131 lines
3.1 KiB
SCSS
131 lines
3.1 KiB
SCSS
@mixin common-toolbar-button($bg-color, $type){
|
|
&, .x-toolbar & {
|
|
border: 1px solid darken($bg-color, 22%);
|
|
border-top-color: darken($bg-color, 15%);
|
|
min-height: 29px;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
|
|
@include border-radius(2px);
|
|
@include box-shadow(rgba(#fff, .35) 0 1px 0);
|
|
|
|
@include color-by-background($bg-color);
|
|
|
|
.x-button-icon {
|
|
width: $icons-default-size;
|
|
height: $icons-default-size;
|
|
}
|
|
|
|
// Fix Back/Forward buttons
|
|
&.x-button-forward, &.x-button-back {
|
|
&:before, &:after {
|
|
$mask-height: $button-height;
|
|
$mask-width: $mask-height/2.23;
|
|
|
|
-webkit-mask-size: $mask-width $mask-height - .05em;
|
|
}
|
|
}
|
|
|
|
& .x-button-label {
|
|
@if $type == normal {
|
|
color: darken($bg-color, 60%);
|
|
text-shadow: lighten($bg-color, 50%) 0 .09em 0;
|
|
} @else {
|
|
color: lighten($bg-color, 80%);
|
|
text-shadow: darken($bg-color, 22%) 0 -.09em 0;
|
|
}
|
|
}
|
|
|
|
&.x-button-back:before, &.x-button-forward:before {
|
|
background: darken($bg-color, 20%);
|
|
}
|
|
|
|
&, &.x-button-back:after, &.x-button-forward:after {
|
|
@include background-gradient($bg-color, color_stops(lighten($bg-color, 100%), lighten($bg-color, 13%) 3%, $bg-color));
|
|
}
|
|
|
|
&.x-button-pressing, &.x-button-pressed, &.x-button-active {
|
|
&, &:after {
|
|
@if $type == normal {
|
|
@include background-gradient(darken($bg-color, 40%), 'recessed');
|
|
} @else {
|
|
@include background-gradient(darken($bg-color, 10%), 'recessed');
|
|
}
|
|
}
|
|
|
|
& .x-button-label {
|
|
@if $type == normal {
|
|
color: lighten($bg-color, 80%);
|
|
text-shadow: darken($bg-color, 50%) 0 .09em 0;
|
|
} @else {
|
|
text-shadow: darken($bg-color, 22%) 0 .09em 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@mixin common-button-ui($ui-label, $color, $type: 'normal') {
|
|
|
|
// Buttons
|
|
|
|
.x-button.x-button-#{$ui-label}{
|
|
padding: .3em 8px;
|
|
|
|
@include common-toolbar-button($color, $type);
|
|
|
|
@if $ui-label == back {
|
|
&, .x-toolbar & {
|
|
@include border-radius(4px);
|
|
@include border-top-left-radius(6px);
|
|
@include border-bottom-left-radius(6px);
|
|
}
|
|
}
|
|
}
|
|
|
|
// SegmentedButtons
|
|
.x-segmentedbutton-base {
|
|
&:not(.divided) {
|
|
margin: 0 .2em;
|
|
|
|
.x-button-#{$ui-label} {
|
|
margin: 0;
|
|
|
|
@include border-radius(0 !important);
|
|
|
|
&:not(.x-first) {
|
|
border-left: 0 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.divided {
|
|
.x-button-#{$ui-label} {
|
|
&:not(.x-first) {
|
|
border-left: 1px solid darken($color, 22%);
|
|
}
|
|
|
|
&:not(.x-last) {
|
|
margin-right: 7px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.x-button-#{$ui-label} {
|
|
&.x-first {
|
|
@include border-left-radius(2px !important);
|
|
}
|
|
&.x-last {
|
|
@include border-right-radius(2px !important);
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
// Additional button styles
|
|
|
|
.x-button.border-radius-10 {
|
|
@include border-radius(10px !important);
|
|
} |