diff options
Diffstat (limited to 'Redcore-daylight/gtk-3.20/scss/widgets/_button.scss')
| -rw-r--r-- | Redcore-daylight/gtk-3.20/scss/widgets/_button.scss | 566 |
1 files changed, 566 insertions, 0 deletions
diff --git a/Redcore-daylight/gtk-3.20/scss/widgets/_button.scss b/Redcore-daylight/gtk-3.20/scss/widgets/_button.scss new file mode 100644 index 0000000..263c037 --- /dev/null +++ b/Redcore-daylight/gtk-3.20/scss/widgets/_button.scss @@ -0,0 +1,566 @@ +/********* + ! Buttons +**********/ + +@include exports("button_extends") { + // stuff for .needs-attention + $_dot_color: if($variant == 'light', $selected_bg_color, lighten($selected_bg_color, .15)); + + @keyframes needs_attention { + from { + background-image: -gtk-gradient(radial, center center, 0, center center, .01, to($_dot_color), to(transparent)); + } + + to { + background-image: -gtk-gradient(radial, center center, 0, center center, .5, to($selected_bg_color), to(transparent)); + } + } + + %needs_attention { + animation: needs_attention 150ms ease-in; + $_dot_shadow: _text_shadow_color(); + $_dot_shadow_r: if($variant == 'light', .5, .45); + background-image: -gtk-gradient(radial, center center, 0, center center, .5, to($_dot_color), to(transparent)), + -gtk-gradient(radial, center center, 0, center center, $_dot_shadow_r, to($_dot_shadow), to(transparent)); + background-size: 6px 6px, 6px 6px; + background-repeat: no-repeat; + + @if $variant == 'light' { + background-position: right 3px, right 4px; + } @else { + background-position: right 3px, right 2px; + } + + &:backdrop { background-size: 6px 6px, 0 0; } + + &:dir(rtl) { + @if $variant == 'light' { + background-position: left 3px, left 4px; + } @else { + background-position: left 3px, left 2px; + } + } + } + + %button { + min-height: 14px + $spacing * 2; + min-width: 14px + $spacing * 2; + padding: $spacing ($spacing + 2px); + border-width: 1px; + border-style: solid; + border-radius: $roundness; + transition: 150ms ease; + outline-color: transparent; + } + + %undecorated_button { + border-color: transparent; + background-color: transparent; + background-image: none; + box-shadow: none; + } + + %linked_middle { + border-radius: 0; + border-left-style: none; + border-right-style: solid; + + &:dir(rtl) { + border-radius: 0; // needed when including %linked_middle:dir(rtl) + border-right-style: none; + border-left-style: solid; + } + } + + %linked_vertical_middle { + border-radius: 0; + border-top-style: none; + border-bottom-style: solid; + + &:dir(rtl) { + border-radius: 0; // needed when including %linked_vertical_middle:dir(rtl) + border-top-style: none; + border-bottom-style: solid; + } + } + + %linked_button { + border-width: 1px; + border-style: solid; + border-radius: 0; + border-right-style: none; + border-left-style: none; + + &:first-child { + border-width: 1px; + border-radius: $roundness; + border-left-style: solid; + border-right-style: none; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + + &:dir(rtl) { + border-left-style: none; + border-right-style: solid; + } + } + + &:last-child { + border-width: 1px; + border-radius: $roundness; + border-left-style: none; + border-right-style: solid; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + + &:dir(rtl) { + border-left-style: solid; + border-right-style: none; + } + } + + &:only-child, &:first-child:only-child { + border-width: 1px; + border-style: solid; + } + + &:only-child { + border-radius: $roundness; + } + } + + %linked_vertical_button { + border-width: 1px; + border-style: solid; + border-radius: 0; + border-top-style: none; + border-bottom-style: none; + + &:first-child { + border-width: 1px; + border-radius: $roundness; + border-top-style: solid; + border-bottom-style: none; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + + &:dir(rtl) { + border-top-style: none; + border-bottom-style: solid; + } + } + + &:last-child { + border-width: 1px; + border-radius: $roundness; + border-top-style: none; + border-bottom-style: solid; + border-top-left-radius: 0; + border-top-right-radius: 0; + + &:dir(rtl) { + border-top-style: solid; + border-bottom-style: none; + } + } + + &:only-child, &:first-child:only-child { + border-width: 1px; + border-style: solid; + } + + &:only-child { + border-radius: $roundness; + } + } +} + +@mixin linked_button($bg) { + $border_strength: if(lightness($bg) > 50, 0, .1); + $shadow_strength: if(lightness($bg) > 50, 0, .1); + + @extend %linked_button; + + box-shadow: inset -1px 0 border_normal(rgba(0, 0, 0, .12 + $border_strength)), + 0 1px 2px -1px alpha($dark_shadow, .12 + $shadow_strength); + + &:focus, &:hover { + box-shadow: inset -1px 0 border_focus(rgba(0, 0, 0, .12 + $border_strength)), + 0 1px 2px -1px alpha($dark_shadow, .32 + $shadow_strength); + } + + &:active, &:active:hover, + &:active:focus, &:active:hover:focus, + &:checked, &:checked:hover, + &:checked:focus, &:checked:hover:focus { + box-shadow: inset -1px 0 border_active(rgba(0, 0, 0, .12 + $border_strength)), + inset 0 1px alpha($dark_shadow, .07), + inset 0 -1px alpha($dark_shadow, .05); + } + + &:disabled { box-shadow: inset -1px 0 shade($bg, .8); } + + &:last-child, &:only-child { box-shadow: 0 1px 2px -1px alpha($dark_shadow, .12 + $shadow_strength); } + + &:last-child:hover, &:only-child:hover { box-shadow: 0 1px 2px -1px alpha($dark_shadow, .32 + $shadow_strength); } + + &:disabled:last-child, &:disabled:only-child, + &:active:disabled:last-child, &:active:disabled:only-child, + &:checked:disabled:last-child, &:checked:disabled:only-child { box-shadow: none; } + + &:active:last-child, &:active:last-child:focus, &:active:last-child:hover, &:active:last-child:hover:focus, + &:checked:last-child, &:checked:last-child:focus, &:checked:last-child:hover, &:checked:last-child:hover:focus { + box-shadow: inset 0 1px alpha($dark_shadow, .07), + inset -1px 0 alpha($dark_shadow, .06); + } + + &:active:only-child, &:active:only-child:focus, &:active:only-child:hover, &:active:only-child:hover:focus, + &:checked:only-child, &:checked:only-child:focus, &:checked:only-child:hover, &:checked:only-child:hover:focus { + box-shadow: inset 1px 0 alpha($dark_shadow, .06), + inset 0 1px alpha($dark_shadow, .07), + inset -1px 0 alpha($dark_shadow, .06); + } +} + +@mixin linked_vertical_button($bg) { + $border_strength: if(lightness($bg) > 50, 0, .1); + $shadow_strength: if(lightness($bg) > 50, 0, .1); + + @extend %linked_vertical_button; + + box-shadow: inset 0 -1px border_normal(rgba(0, 0, 0, .12 + $border_strength)), + 0 1px 2px -1px alpha($dark_shadow, .12 + $shadow_strength); + + &:focus, &:hover { + box-shadow: inset 0 -1px border_focus(rgba(0, 0, 0, .12 + $border_strength)), + 0 1px 2px -1px alpha($dark_shadow, .32 + $shadow_strength); + } + + &:active, &:active:hover, + &:active:focus, &:active:hover:focus, + &:checked, &:checked:hover, + &:checked:focus, &:checked:hover:focus { + box-shadow: inset 0 -1px border_active(rgba(0, 0, 0, .12 + $border_strength)), + inset 1px 0 alpha($dark_shadow, .07), + inset -1px 0 alpha($dark_shadow, .05); + } + + &:disabled { box-shadow: inset 0 -1px shade($bg, .8); } + + &:last-child, &:only-child { box-shadow: 0 1px 2px -1px alpha($dark_shadow, .12 + $shadow_strength); } + + &:last-child:hover, &:only-child:hover { box-shadow: 0 1px 2px -1px alpha($dark_shadow, .32 + $shadow_strength); } + + &:disabled:last-child, &:disabled:only-child, + &:active:disabled:last-child, &:active:disabled:only-child, + &:checked:disabled:last-child, &:checked:disabled:only-child { box-shadow: none; } + + &:active:last-child, &:active:last-child:focus, &:active:last-child:hover, &:active:last-child:hover:focus, + &:checked:last-child, &:checked:last-child:focus, &:checked:last-child:hover, &:checked:last-child:hover:focus { + box-shadow: inset 0 1px alpha($dark_shadow, .07), + inset -1px 0 alpha($dark_shadow, .06); + } + + &:active:only-child, &:active:only-child:focus, &:active:only-child:hover, &:active:only-child:hover:focus, + &:checked:only-child, &:checked:only-child:focus, &:checked:only-child:hover, &:checked:only-child:hover:focus { + box-shadow: inset 1px 0 alpha($dark_shadow, .06), + inset 0 1px alpha($dark_shadow, .07), + inset -1px 0 alpha($dark_shadow, .06); + } +} + +@mixin button($bg, $fg) { + $border_strength: if(lightness($fg) > 50, .1, .2); + $shadow_strength: if(lightness($bg) > 50, 0, .1); + + $button_bg: $bg; + + @extend %button; + @include linear-gradient($button_bg); + @include border(alpha($fg, .12 + $border_strength)); + + color: $fg; + box-shadow: 0 1px 2px -1px alpha($dark_shadow, .12 + $shadow_strength); + + + &.flat { + //color: mix($bg, $fg, .2); + color: $fg; + border-color: alpha($button_bg, 0); + background-color: alpha($button_bg, 0); + background-image: none; + box-shadow: none; + } + + &, &.flat { + + &:hover { + @include linear-gradient(shade($bg, 1.05)); + @include border(alpha($fg, .20 + $border_strength)); + + color: $fg; + box-shadow: 0 1px 2px -1px alpha($dark_shadow, .22 + $shadow_strength); + } + + &:focus { + @include linear-gradient(shade($bg, 1.05)); + @include border(alpha($fg, .20 + $border_strength)); + + color: $fg; + box-shadow: 0 1px 2px -1px alpha($dark_shadow, .32 + $shadow_strength); + &:hover { + @include linear-gradient(shade($bg, 1.1)); + @include border(alpha($fg, .20 + $border_strength)); + + box-shadow: 0 1px 2px -1px alpha($dark_shadow, .38 + $shadow_strength); + } + } + + &:checked, &:active { + /*@include linear-gradient(shade($bg, .7), to top);*/ + @include linear-gradient($selected_bg_color, to top); + + color: $selected_fg_color; + box-shadow: inset 1px 0 alpha($fg, .06), + inset 0 1px alpha($fg, .07), + inset -1px 0 alpha($fg, .06), + inset 0 -1px alpha($fg, .05); + @include border(alpha($fg, .12 + $border_strength)); + + &:focus, &:hover { + /*@include linear-gradient(shade($bg, .65), to top);*/ + @include linear-gradient(shade($selected_bg_color, 1.05), to top); + + color: $selected_fg_color; + } + } + + &:focus, &:hover { color: $fg; } + + &:disabled:disabled { + @include linear-gradient(alpha(mix($bg, $fg, .2), .4)); + /*border: 1px solid alpha($bg, .2);*/ + opacity: .4; + + color: mix($bg, $fg, .5); + box-shadow: none; + } + + &:active:disabled, &:checked:disabled { + @include linear-gradient(alpha($selected_bg_color, .6)); + + color: $selected_fg_color; + box-shadow: none; + } + } + + &.separator, .separator { + border: 1px solid currentColor; + color: alpha($bg, ($contrast + .1)); + + &:disabled { color: alpha($bg, .85); } + } +} + +@include exports("button") { + %close_button { + border: 1px solid transparent; + background-color: transparent; + background-image: none; + box-shadow: none; + + &:focus, &:hover { + border: 1px solid alpha($bg_color, .3); + background-color: alpha($fg_color, .2); + background-image: none; + box-shadow: none; + } + + &:active, &:checked, &:active:hover, &:checked:hover { + border: 1px solid alpha($selected_bg_color, .3); + background-color: alpha($selected_fg_color, .1); + background-image: none; + box-shadow: none; + } + } + + button { + @include button($button_bg_color, $button_fg_color); + + + .inline-toolbar &, + .linked > & { @include linked_button($button_bg_color); } + + .linked.vertical > & { @include linked_vertical_button($button_bg_color); } + + &.circular, + &.circular-button { // FIXME: aggregate to buttons + padding: 0; + min-width: 28px; + min-height: 28px; + border-radius: 9999px; // Fixed: https://github.com/GNOME/gtk/commit/a6409458f0d50d673a4dc370b9251993b7835b6b + -gtk-outline-radius: 9999px; + + label { padding: 0; } + } + } + + spinbutton { + + &:disabled { + opacity: .4; + } + + button { + color: $button_fg_color; + + &:active, &:checked, &:hover { + @include linear-gradient(shade($button_bg_color, 1.2)); + } + + &:disabled { color: mix($button_fg_color, $bg_color, .7); } + + &:backdrop { color: mix($backdrop_base_color, $backdrop_fg_color, .9); } + + &:backdrop:disabled { color: alpha($backdrop_insensitive_color, .8); } + } + + &:not(.vertical) { + /*@extend %entry;*/ + @include linear-gradient($base_color, to top); + /*@include border($base_color);*/ + + padding: 0; + border-radius: $roundness; + + color: $text_color; + caret-color: $text_color; + + /*&:focus, &:active { border-color: border_focus($borders_color); }*/ + + &:disabled { + @include linear-gradient(shade($base_color, .9), to top); + + color: mix($base_color, $text_color, .5); + } + + entry { + border-radius: $roundness 0 0 $roundness; + border-right-width: 0; + box-shadow: none; + } + + button { + @extend %linked_middle; + border-radius: 0; + /*border-color: alpha($borders_color, .8);*/ + /*border-style: none none none solid;*/ + background-image: none; + box-shadow: none; + + /* + @if (lightness($bg_color) > 50) { + background-color: shade($bg_color, 1.08); + } + + &:hover { + @if (lightness($bg_color) > 50) { + background-color: shade($bg_color, 1.11); + } + } + */ + + &:dir(rtl) { border-style: none solid none none; } + + &:active { box-shadow: inset 0 2px 3px -1px transparentize($black, .8); } + + &:backdrop { border-color: alpha($backdrop_borders_color, .8); } + + &:backdrop:disabled { + border-style: none none none solid; // It is needed or it gets overridden + &:dir(rtl) { border-style: none solid none none; } + } + + &:dir(rtl):first-child { border-radius: $roundness 0 0 $roundness; } + + &:dir(ltr):last-child { border-radius: 0 $roundness $roundness 0; } + } + } + + &.vertical { + button, entry { + min-width: 0; + padding-left: $spacing - 2px; + padding-right: $spacing - 2px; + } + + entry { + // reset all the other props since the spinbutton node is styled here + border-radius: 0; + border-top-width: 0; + border-bottom-width: 0; + } + + button { + &.up { + border-style: solid solid none solid; + border-radius: $roundness $roundness 0 0; + } + + &.down { + border-style: none solid solid solid; + border-radius: 0 0 $roundness $roundness; + } + } + } + } +} + +/****************** +! ComboBoxes * +*******************/ + +@include exports("combobox") { + combobox { + button.combo { + // otherwise the arrow placement is not symmetric + min-width: 0; + padding-left: $spacing + 2px; + padding-right: $spacing + 2px; + } + + arrow { + -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); + min-height: 16px; + min-width: 16px; + } + + box button, box entry { + @extend %linked_button; + padding: $spacing ($spacing + 2px); + } + + .linked:not(.vertical) > & > box > button.combo { + // the combo is a composite widget so the way we do button linked doesn't + // work, special case needed. See + // https://bugzilla.gnome.org/show_bug.cgi?id=733979 + &:dir(ltr) { @extend %linked_middle; } + // specificity bump + &:dir(rtl) { @extend %linked_middle:dir(rtl); } + } + + .linked:not(.vertical) > &:first-child > box > button.combo { @extend %linked_button:first-child; } + + .linked:not(.vertical) > &:last-child > box > button.combo { @extend %linked_button:last-child; } + + .linked:not(.vertical) > &:only-child > box > button.combo { @extend %linked_button:only-child; } + + .linked.vertical > & > box > button.combo { @extend %linked_vertical_middle; } + + .linked.vertical > &:first-child > box > button.combo { @extend %linked_vertical_button:first-child; } + + .linked.vertical > &:last-child > box > button.combo { @extend %linked_vertical_button:last-child; } + + .linked.vertical > &:only-child > box > button.combo { @extend %linked_vertical_button:only-child; } + } +} |