3.0 source code
This commit is contained in:
agolybev
@@ -1,131 +1,131 @@
|
||||
@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);
|
||||
@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);
|
||||
}
|
||||
Reference in New Issue
Block a user