1
0
mirror of https://github.com/horst3180/arc-theme.git synced 2024-09-28 14:00:44 +00:00

fix flat button transition

This commit is contained in:
Horst3180 2015-09-11 22:08:41 +02:00
parent 200498e4ec
commit 12f6457901
14 changed files with 28 additions and 14 deletions

View File

@ -285,7 +285,8 @@ GtkSearchEntry.entry {
border-color: transparent;
background-color: transparent;
background-image: none;
background-color: rgba(56, 60, 74, 0);
background-color: rgba(68, 74, 88, 0);
border-color: rgba(43, 46, 57, 0);
transition: none; }
.button.flat:hover {
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);

View File

@ -285,7 +285,8 @@ GtkSearchEntry.entry {
border-color: transparent;
background-color: transparent;
background-image: none;
background-color: rgba(245, 246, 247, 0);
background-color: rgba(251, 251, 252, 0);
border-color: rgba(207, 214, 230, 0);
transition: none; }
.button.flat:hover {
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);

View File

@ -285,7 +285,8 @@ GtkSearchEntry.entry {
border-color: transparent;
background-color: transparent;
background-image: none;
background-color: rgba(56, 60, 74, 0);
background-color: rgba(68, 74, 88, 0);
border-color: rgba(43, 46, 57, 0);
transition: none; }
.button.flat:hover {
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);

View File

@ -285,7 +285,8 @@ GtkSearchEntry.entry {
border-color: transparent;
background-color: transparent;
background-image: none;
background-color: rgba(245, 246, 247, 0);
background-color: rgba(251, 251, 252, 0);
border-color: rgba(207, 214, 230, 0);
transition: none; }
.button.flat:hover {
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);

View File

@ -285,7 +285,8 @@ GtkSearchEntry.entry {
border-color: transparent;
background-color: transparent;
background-image: none;
background-color: rgba(245, 246, 247, 0);
background-color: rgba(251, 251, 252, 0);
border-color: rgba(207, 214, 230, 0);
transition: none; }
.button.flat:hover {
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);

View File

@ -285,7 +285,8 @@ GtkSearchEntry.entry {
border-color: transparent;
background-color: transparent;
background-image: none;
background-color: rgba(245, 246, 247, 0);
background-color: rgba(251, 251, 252, 0);
border-color: rgba(207, 214, 230, 0);
transition: none; }
.button.flat:hover {
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);

View File

@ -398,7 +398,8 @@ $_dot_color: $selected_bg_color;
&.flat {
@include button(undecorated);
background-color: transparentize($bg_color, 1);
background-color: transparentize($button_bg, 1);
border-color: transparentize($button_border, 1);
// to avoid adiacent buttons borders clashing when transitioning, the transition on the normal state is set
// to none, while it's added back in the hover state, so the button decoration will fade in on hover, but
// it won't fade out when the pointer leave the button allocation area. To make the transition more evident

View File

@ -285,7 +285,8 @@ GtkSearchEntry.entry {
border-color: transparent;
background-color: transparent;
background-image: none;
background-color: rgba(56, 60, 74, 0);
background-color: rgba(68, 74, 88, 0);
border-color: rgba(43, 46, 57, 0);
transition: none; }
.button.flat:hover {
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);

View File

@ -285,7 +285,8 @@ GtkSearchEntry.entry {
border-color: transparent;
background-color: transparent;
background-image: none;
background-color: rgba(245, 246, 247, 0);
background-color: rgba(251, 251, 252, 0);
border-color: rgba(207, 214, 230, 0);
transition: none; }
.button.flat:hover {
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);

View File

@ -285,7 +285,8 @@ GtkSearchEntry.entry {
border-color: transparent;
background-color: transparent;
background-image: none;
background-color: rgba(56, 60, 74, 0);
background-color: rgba(68, 74, 88, 0);
border-color: rgba(43, 46, 57, 0);
transition: none; }
.button.flat:hover {
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);

View File

@ -285,7 +285,8 @@ GtkSearchEntry.entry {
border-color: transparent;
background-color: transparent;
background-image: none;
background-color: rgba(245, 246, 247, 0);
background-color: rgba(251, 251, 252, 0);
border-color: rgba(207, 214, 230, 0);
transition: none; }
.button.flat:hover {
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);

View File

@ -285,7 +285,8 @@ GtkSearchEntry.entry {
border-color: transparent;
background-color: transparent;
background-image: none;
background-color: rgba(245, 246, 247, 0);
background-color: rgba(251, 251, 252, 0);
border-color: rgba(207, 214, 230, 0);
transition: none; }
.button.flat:hover {
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);

View File

@ -285,7 +285,8 @@ GtkSearchEntry.entry {
border-color: transparent;
background-color: transparent;
background-image: none;
background-color: rgba(245, 246, 247, 0);
background-color: rgba(251, 251, 252, 0);
border-color: rgba(207, 214, 230, 0);
transition: none; }
.button.flat:hover {
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);

View File

@ -398,7 +398,8 @@ $_dot_color: $selected_bg_color;
&.flat {
@include button(undecorated);
background-color: transparentize($bg_color, 1);
background-color: transparentize($button_bg, 1);
border-color: transparentize($button_border, 1);
// to avoid adiacent buttons borders clashing when transitioning, the transition on the normal state is set
// to none, while it's added back in the hover state, so the button decoration will fade in on hover, but
// it won't fade out when the pointer leave the button allocation area. To make the transition more evident