AuroraMiddleware/gtk
1
0
Fork 1
mirror of https://gitlab.gnome.org/GNOME/gtk.git synced 2024-11-14 20:51:07 +00:00
Code Issues Projects Releases Wiki Activity

Adwaita: add a transition to the switch slider

Browse Source
This commit is contained in:
Lapo Calamandrei 2016-03-21 00:44:47 +01:00
parent 6598dca783
commit eacd632e5e
3 changed files with 15 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
gtk/theme/Adwaita/_common.scss
View File

@ -5,6 +5,7 @@
$ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
$asset_suffix: if($variant=='dark', '-dark', ''); $asset_suffix: if($variant=='dark', '-dark', '');
$backdrop_transition: 200ms ease-out; $backdrop_transition: 200ms ease-out;
$button_transition: all 200ms $ease-out-quad;
* { * {
padding: 0; padding: 0;
@ -437,14 +438,13 @@ $_dot_color: if($variant=='light', $selected_bg_color,
button { button {
@at-root %button_basic, & { @at-root %button_basic, & {
$_button_transition: all 200ms $ease-out-quad;
min-height: 24px; min-height: 24px;
min-width: 16px; min-width: 16px;
padding: 4px 8px; padding: 4px 8px;
border: 1px solid; border: 1px solid;
border-radius: 3px; border-radius: 3px;
transition: $_button_transition; transition: $button_transition;
@include button(normal); @include button(normal);
@ -457,10 +457,10 @@ button {
transition: none; transition: none;
&:hover { &:hover {
transition: $_button_transition; transition: $button_transition;
transition-duration: 500ms; transition-duration: 500ms;
&:active { transition: $_button_transition; } &:active { transition: $button_transition; }
} }
} }
@ -2459,6 +2459,8 @@ switch {
min-height: 27px; min-height: 27px;
border: 1px solid; border: 1px solid;
border-radius: 3px; border-radius: 3px;
transition: $button_transition;
@include button(normal-alt, $edge: $shadow_color); @include button(normal-alt, $edge: $shadow_color);
} }
@ -2469,7 +2471,11 @@ switch {
&:disabled slider { @include button(insensitive); } &:disabled slider { @include button(insensitive); }
&:backdrop { &:backdrop {
slider { @include button(backdrop); } slider {
transition: $backdrop_transition;
@include button(backdrop);
}
&:active slider { border-color: if($variant == 'light', $selected_bg_color, $selected_borders_color); } &:active slider { border-color: if($variant == 'light', $selected_bg_color, $selected_borders_color); }

2
gtk/theme/Adwaita/gtk-contained-dark.css
View File

@ -2444,6 +2444,7 @@ switch {
min-height: 27px; min-height: 27px;
border: 1px solid; border: 1px solid;
border-radius: 3px; border-radius: 3px;
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
color: #eeeeec; color: #eeeeec;
outline-color: rgba(238, 238, 236, 0.3); outline-color: rgba(238, 238, 236, 0.3);
border-color: #1c1f1f; border-color: #1c1f1f;
@ -2468,6 +2469,7 @@ switch {
switch:disabled slider label, switch:disabled slider { switch:disabled slider label, switch:disabled slider {
color: #949796; } color: #949796; }
switch:backdrop slider { switch:backdrop slider {
transition: 200ms ease-out;
border-color: #1f2222; border-color: #1f2222;
background-image: linear-gradient(to bottom, #393f3f); background-image: linear-gradient(to bottom, #393f3f);
text-shadow: none; text-shadow: none;

2
gtk/theme/Adwaita/gtk-contained.css
View File

@ -2457,6 +2457,7 @@ switch {
min-height: 27px; min-height: 27px;
border: 1px solid; border: 1px solid;
border-radius: 3px; border-radius: 3px;
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
color: #2e3436; color: #2e3436;
outline-color: rgba(46, 52, 54, 0.3); outline-color: rgba(46, 52, 54, 0.3);
border-color: #9d9d99; border-color: #9d9d99;
@ -2481,6 +2482,7 @@ switch {
switch:disabled slider label, switch:disabled slider { switch:disabled slider label, switch:disabled slider {
color: #8b8e8f; } color: #8b8e8f; }
switch:backdrop slider { switch:backdrop slider {
transition: 200ms ease-out;
border-color: #a5a5a1; border-color: #a5a5a1;
background-image: linear-gradient(to bottom, #e8e8e7); background-image: linear-gradient(to bottom, #e8e8e7);
text-shadow: none; text-shadow: none;