forked from AuroraMiddleware/gtk
Revert "Adwaita: only needed properties on entry transition"
Shouldn't be needed with recent Benjamin work.
This reverts commit d57f4a781c
.
This commit is contained in:
parent
9c2110122b
commit
826913135b
@ -1,21 +1,10 @@
|
|||||||
|
@function gtkalpha($c,$a) {
|
||||||
|
@return unquote("alpha(#{$c},#{$a})");
|
||||||
|
}
|
||||||
|
|
||||||
$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', '');
|
||||||
|
|
||||||
@function transite($properties, $duration, $timing_function) {
|
|
||||||
$transition: none;
|
|
||||||
|
|
||||||
@each $property in $properties {
|
|
||||||
@if $transition == none { $transition: $property $duration $timing_function; }
|
|
||||||
@else { $transition: $transition, $property, $duration, $timing_function; }
|
|
||||||
}
|
|
||||||
|
|
||||||
@return $transition;
|
|
||||||
}
|
|
||||||
|
|
||||||
// this is for using gtk alpha function directly, the function name
|
|
||||||
// clashes with the sass function, so we need this trick
|
|
||||||
@function gtkalpha($c, $a) { @return unquote("alpha(#{$c},#{$a})"); }
|
|
||||||
|
|
||||||
* {
|
* {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
-GtkToolButton-icon-spacing: 4;
|
-GtkToolButton-icon-spacing: 4;
|
||||||
@ -253,11 +242,7 @@ entry {
|
|||||||
}
|
}
|
||||||
|
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
|
transition: all 200ms $ease-out-quad;
|
||||||
// animate just what's needed
|
|
||||||
$_entry_transition_properties: color border-color background-color background-image box-shadow;
|
|
||||||
transition: transite($_entry_transition_properties, 200ms, $ease-out-quad);
|
|
||||||
|
|
||||||
@include entry(normal);
|
@include entry(normal);
|
||||||
|
|
||||||
&.flat,
|
&.flat,
|
||||||
@ -408,8 +393,14 @@ button {
|
|||||||
@at-root %button_basic, & {
|
@at-root %button_basic, & {
|
||||||
// animating "all" is not needed and also triggers some weird gtk sizing issue so, the transition is restricted
|
// animating "all" is not needed and also triggers some weird gtk sizing issue so, the transition is restricted
|
||||||
// to just the needed properties (see $_button_transition_properties).
|
// to just the needed properties (see $_button_transition_properties).
|
||||||
$_button_transition_properties: color background-color background-image border-color box-shadow text-shadow -gtk-icon-shadow;
|
|
||||||
$_button_transition: transite($_button_transition_properties, 200ms, $ease-out-quad);
|
$_button_transition_details: 200ms $ease-out-quad;
|
||||||
|
$_button_transition_properties: background-color, background-image, border-color, box-shadow, text-shadow, -gtk-icon-shadow;
|
||||||
|
$_button_transition: color $_button_transition_details;
|
||||||
|
|
||||||
|
@each $single_transition in $_button_transition_properties {
|
||||||
|
$_button_transition: $_button_transition, $single_transition $_button_transition_details;
|
||||||
|
}
|
||||||
|
|
||||||
min-height: 24px;
|
min-height: 24px;
|
||||||
min-width: 16px;
|
min-width: 16px;
|
||||||
|
@ -162,7 +162,7 @@ entry, spinbutton:not(.vertical) {
|
|||||||
padding-left: 8px;
|
padding-left: 8px;
|
||||||
padding-right: 8px;
|
padding-right: 8px;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
transition: color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), background-image, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||||
background-color: #292929;
|
background-color: #292929;
|
||||||
background-image: linear-gradient(to bottom, #1d2020, #242525 3px, #292929 90%);
|
background-image: linear-gradient(to bottom, #1d2020, #242525 3px, #292929 90%);
|
||||||
color: white;
|
color: white;
|
||||||
@ -349,7 +349,7 @@ notebook > header > tabs > arrow, headerbar button.titlebutton,
|
|||||||
padding: 4px 8px;
|
padding: 4px 8px;
|
||||||
border: 1px solid;
|
border: 1px solid;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
transition: color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), background-image, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), text-shadow, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), -gtk-icon-shadow, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
transition: color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-image 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 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;
|
||||||
@ -372,13 +372,13 @@ notebook > header > tabs > arrow, headerbar button.titlebutton,
|
|||||||
.titlebar notebook > header > tabs > arrow.titlebutton:hover,
|
.titlebar notebook > header > tabs > arrow.titlebutton:hover,
|
||||||
.titlebar button.titlebutton:hover, button.flat:hover, notebook > header > tabs > arrow:hover, button.sidebar-button:hover, headerbar button.titlebutton:hover,
|
.titlebar button.titlebutton:hover, button.flat:hover, notebook > header > tabs > arrow:hover, button.sidebar-button:hover, headerbar button.titlebutton:hover,
|
||||||
.titlebar button.titlebutton:hover {
|
.titlebar button.titlebutton:hover {
|
||||||
transition: color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), background-image, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), text-shadow, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), -gtk-icon-shadow, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
transition: color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-image 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||||
transition-duration: 500ms; }
|
transition-duration: 500ms; }
|
||||||
notebook > header > tabs > arrow.flat:hover:active, headerbar notebook > header > tabs > arrow.titlebutton:hover:active, headerbar button.titlebutton:hover:active,
|
notebook > header > tabs > arrow.flat:hover:active, headerbar notebook > header > tabs > arrow.titlebutton:hover:active, headerbar button.titlebutton:hover:active,
|
||||||
.titlebar notebook > header > tabs > arrow.titlebutton:hover:active,
|
.titlebar notebook > header > tabs > arrow.titlebutton:hover:active,
|
||||||
.titlebar button.titlebutton:hover:active, button.flat:hover:active, notebook > header > tabs > arrow:hover:active, button.sidebar-button:hover:active, headerbar button.titlebutton:hover:active,
|
.titlebar button.titlebutton:hover:active, button.flat:hover:active, notebook > header > tabs > arrow:hover:active, button.sidebar-button:hover:active, headerbar button.titlebutton:hover:active,
|
||||||
.titlebar button.titlebutton:hover:active {
|
.titlebar button.titlebutton:hover:active {
|
||||||
transition: color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), background-image, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), text-shadow, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), -gtk-icon-shadow, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94); }
|
transition: color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-image 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
|
||||||
notebook > header > tabs > arrow:hover, headerbar button.titlebutton:hover,
|
notebook > header > tabs > arrow:hover, headerbar button.titlebutton:hover,
|
||||||
.titlebar button.titlebutton:hover, button:hover {
|
.titlebar button.titlebutton:hover, button:hover {
|
||||||
color: #eeeeec;
|
color: #eeeeec;
|
||||||
|
@ -162,7 +162,7 @@ entry, spinbutton:not(.vertical) {
|
|||||||
padding-left: 8px;
|
padding-left: 8px;
|
||||||
padding-right: 8px;
|
padding-right: 8px;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
transition: color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), background-image, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
background-image: linear-gradient(to bottom, #d3d3d1, #fcfcfc 2px, #ffffff 90%);
|
background-image: linear-gradient(to bottom, #d3d3d1, #fcfcfc 2px, #ffffff 90%);
|
||||||
color: black;
|
color: black;
|
||||||
@ -349,7 +349,7 @@ notebook > header > tabs > arrow, headerbar button.titlebutton,
|
|||||||
padding: 4px 8px;
|
padding: 4px 8px;
|
||||||
border: 1px solid;
|
border: 1px solid;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
transition: color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), background-image, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), text-shadow, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), -gtk-icon-shadow, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
transition: color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-image 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 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;
|
||||||
@ -372,13 +372,13 @@ notebook > header > tabs > arrow, headerbar button.titlebutton,
|
|||||||
.titlebar notebook > header > tabs > arrow.titlebutton:hover,
|
.titlebar notebook > header > tabs > arrow.titlebutton:hover,
|
||||||
.titlebar button.titlebutton:hover, button.flat:hover, notebook > header > tabs > arrow:hover, button.sidebar-button:hover, headerbar button.titlebutton:hover,
|
.titlebar button.titlebutton:hover, button.flat:hover, notebook > header > tabs > arrow:hover, button.sidebar-button:hover, headerbar button.titlebutton:hover,
|
||||||
.titlebar button.titlebutton:hover {
|
.titlebar button.titlebutton:hover {
|
||||||
transition: color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), background-image, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), text-shadow, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), -gtk-icon-shadow, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
transition: color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-image 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||||
transition-duration: 500ms; }
|
transition-duration: 500ms; }
|
||||||
notebook > header > tabs > arrow.flat:hover:active, headerbar notebook > header > tabs > arrow.titlebutton:hover:active, headerbar button.titlebutton:hover:active,
|
notebook > header > tabs > arrow.flat:hover:active, headerbar notebook > header > tabs > arrow.titlebutton:hover:active, headerbar button.titlebutton:hover:active,
|
||||||
.titlebar notebook > header > tabs > arrow.titlebutton:hover:active,
|
.titlebar notebook > header > tabs > arrow.titlebutton:hover:active,
|
||||||
.titlebar button.titlebutton:hover:active, button.flat:hover:active, notebook > header > tabs > arrow:hover:active, button.sidebar-button:hover:active, headerbar button.titlebutton:hover:active,
|
.titlebar button.titlebutton:hover:active, button.flat:hover:active, notebook > header > tabs > arrow:hover:active, button.sidebar-button:hover:active, headerbar button.titlebutton:hover:active,
|
||||||
.titlebar button.titlebutton:hover:active {
|
.titlebar button.titlebutton:hover:active {
|
||||||
transition: color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), background-image, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), text-shadow, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), -gtk-icon-shadow, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94); }
|
transition: color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-image 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
|
||||||
notebook > header > tabs > arrow:hover, headerbar button.titlebutton:hover,
|
notebook > header > tabs > arrow:hover, headerbar button.titlebutton:hover,
|
||||||
.titlebar button.titlebutton:hover, button:hover {
|
.titlebar button.titlebutton:hover, button:hover {
|
||||||
color: #2e3436;
|
color: #2e3436;
|
||||||
|
Loading…
Reference in New Issue
Block a user