silverstripe-framework/scss/_sprites.scss

80 lines
2.7 KiB
SCSS
Raw Normal View History

/**
* Helper SCSS file for generating sprites for the interface.
*/
@import "compass/utilities/sprites/base";
//$sprites32: sprite-map("sprites_32x32/*.png", $spacing: 10px);
$sprites16: sprite-map("sprites_16x16/*.png", $spacing: 10px);
/* CMS action button sprite mix-in for UploadField, copied from admin/scss/_forms.scss */
@mixin actionButtonSprite($name) {
padding-left: 24px;
padding-right: 6px;
@include background($color-button-generic sprite($sprites16, $name, 5px, 6px) no-repeat);
@include background(sprite($sprites16, $name, 5px, 6px) no-repeat,
linear-gradient(color-stops(
lighten($color-button-generic, 10%),
darken($color-button-generic, 5%)
))
);
&.ui-state-hover,
&:hover {
@include background(lighten($color-button-generic, 10%) sprite($sprites16, $name, 5px, 6px) no-repeat);
@include background(sprite($sprites16, $name, 5px, 6px) no-repeat,
linear-gradient(color-stops(
lighten($color-button-generic, 20%),
$color-button-generic
))
);
}
&.ui-state-disabled {
background-image: none;
color: $color-text;
@include background(lighten($color-button-generic, 20%) sprite($sprites16, $name+_disabled, 5px, 6px) no-repeat);
@include background(sprite($sprites16, $name+_disabled, 5px, 6px) no-repeat,
linear-gradient(color-stops(
lighten($color-button-generic, 20%),
$color-button-generic
))
);
}
}
@mixin actionButtonSpriteConstructive($name) {
background-image: none;
padding-left: 25px;
padding-right: 7px;
font-weight: bold;
margin-left: $grid-x;
color: $color-text-light;
border-color: $color-button-constructive-border;
border-bottom-color: darken($color-button-constructive-border, 10%);
@include background($color-button-constructive sprite($sprites16, $name, 6, 6) no-repeat);
@include background(sprite($sprites16, $name
, 6, 6) no-repeat,
linear-gradient(color-stops(
lighten($color-button-constructive, 10%),
darken($color-button-constructive, 5%)
))
);
@include text-shadow(darken($color-button-constructive, 10%) 0 1px 1px);
&.ui-state-hover {
border-color: darken($color-button-constructive-border, 10%);
@include background(lighten($color-button-constructive, 10%) sprite($sprites16, $name, 6, 6) no-repeat);
@include background(sprite($sprites16, $name, 6, 6) no-repeat,
linear-gradient(color-stops(
lighten($color-button-constructive, 15%),
$color-button-constructive
))
);
}
&:active, &:focus {
padding: $grid-y 8px $grid-y 26px;
border: none;
@include background(darken($color-button-constructive, 2%) sprite($sprites16, $name, 7, 7) no-repeat);
@include box-shadow(inset 0 1px 3px rgb(23, 24, 26), 0 1px 0 rgba(255, 255, 255, .6));
}
}