High Contrast: disabled flat buttons

- disabled flat buttons and backdrop state
This commit is contained in:
Jakub Steiner 2016-03-17 14:57:09 +01:00
parent 09168806a2
commit 1bf3f40cc5
4 changed files with 44 additions and 35 deletions

View File

@ -386,6 +386,12 @@ button {
&:active { transition: $_button_transition; }
}
&:backdrop,
&:disabled,
&:backdrop:disabled {
@include button(undecorated-insensitive);
}
}
&:hover {
@ -401,7 +407,6 @@ button {
}
&:backdrop {
&.flat, & {
@include button(backdrop);
-gtk-icon-effect: none;
@ -416,9 +421,6 @@ button {
&:checked { @include button(backdrop-insensitive-active); }
}
}
}
&.flat { &:backdrop, &:disabled, &:backdrop:disabled { @include button(undecorated); }}
&:disabled {
@include button(insensitive);

View File

@ -259,6 +259,13 @@
background-image: none;
border-color: transparent;
}
@else if $t==undecorated-insensitive {
color: $insensitive_fg_color;
background-color: transparent;
background-image: none;
border-color: transparent;
}
}
@mixin overshoot($p, $t:normal, $c:$fg_color) {

View File

@ -403,6 +403,13 @@ button.titlebutton, button {
transition-duration: 500ms; }
button.titlebutton:hover:active, button.flat:hover:active, button.sidebar-button:hover:active {
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
button.titlebutton:backdrop, button.titlebutton:disabled, button.titlebutton:backdrop:disabled, button.flat:backdrop, button.sidebar-button:backdrop, button.flat:disabled, button.sidebar-button:disabled, button.flat:backdrop:disabled, button.sidebar-button:backdrop:disabled {
border-width: 2px;
border-style: solid;
color: gray;
background-color: transparent;
background-image: none;
border-color: transparent; }
button.titlebutton:hover, button:hover {
border-width: 2px;
border-style: solid;
@ -419,7 +426,7 @@ button.titlebutton, button {
background-color: white;
border-color: gray;
transition-duration: 50ms; }
button.titlebutton:backdrop, button.titlebutton:backdrop, button:backdrop.flat, button.sidebar-button:backdrop, button:backdrop {
button.titlebutton:backdrop, button:backdrop {
border-width: 2px;
border-style: solid;
color: #fff;
@ -427,34 +434,27 @@ button.titlebutton, button {
border-color: #737373;
background-image: none;
-gtk-icon-effect: none; }
button.titlebutton:backdrop:active, button.titlebutton:backdrop:checked, button.titlebutton:backdrop:active, button.titlebutton:backdrop:checked, button:backdrop.flat:active, button.sidebar-button:backdrop:active, button:backdrop.flat:checked, button.sidebar-button:backdrop:checked, button:backdrop:active, button:backdrop:checked {
button.titlebutton:backdrop:active, button.titlebutton:backdrop:checked, button:backdrop:active, button:backdrop:checked {
border-width: 2px;
border-style: solid;
color: black;
background-color: #737373;
border-color: #737373;
background-image: none; }
button.titlebutton:backdrop:disabled, button.titlebutton:backdrop:disabled, button:backdrop.flat:disabled, button.sidebar-button:backdrop:disabled, button:backdrop:disabled {
button.titlebutton:backdrop:disabled, button:backdrop:disabled {
border-width: 2px;
border-style: solid;
color: gray;
background-color: #070707;
border-color: #494949;
background-image: none; }
button.titlebutton:backdrop:disabled:active, button.titlebutton:backdrop:disabled:checked, button.titlebutton:backdrop:disabled:active, button.titlebutton:backdrop:disabled:checked, button:backdrop.flat:disabled:active, button.sidebar-button:backdrop:disabled:active, button:backdrop.flat:disabled:checked, button.sidebar-button:backdrop:disabled:checked, button:backdrop:disabled:active, button:backdrop:disabled:checked {
button.titlebutton:backdrop:disabled:active, button.titlebutton:backdrop:disabled:checked, button:backdrop:disabled:active, button:backdrop:disabled:checked {
border-width: 2px;
border-style: solid;
color: gray;
border-color: #494949;
background-image: none;
background-color: #090909; }
button.titlebutton:backdrop, button.titlebutton:disabled, button.titlebutton:backdrop:disabled, button.flat:backdrop, button.sidebar-button:backdrop, button.flat:disabled, button.sidebar-button:disabled, button.flat:backdrop:disabled, button.sidebar-button:backdrop:disabled {
border-width: 2px;
border-style: solid;
color: #fff;
background-color: transparent;
background-image: none;
border-color: transparent; }
button.titlebutton:disabled, button:disabled {
border-width: 2px;
border-style: solid;

View File

@ -403,6 +403,13 @@ button.titlebutton, button {
transition-duration: 500ms; }
button.titlebutton:hover:active, button.flat:hover:active, button.sidebar-button:hover:active {
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
button.titlebutton:backdrop, button.titlebutton:disabled, button.titlebutton:backdrop:disabled, button.flat:backdrop, button.sidebar-button:backdrop, button.flat:disabled, button.sidebar-button:disabled, button.flat:backdrop:disabled, button.sidebar-button:backdrop:disabled {
border-width: 2px;
border-style: solid;
color: gray;
background-color: transparent;
background-image: none;
border-color: transparent; }
button.titlebutton:hover, button:hover {
border-width: 2px;
border-style: solid;
@ -419,7 +426,7 @@ button.titlebutton, button {
background-color: black;
border-color: gray;
transition-duration: 50ms; }
button.titlebutton:backdrop, button.titlebutton:backdrop, button:backdrop.flat, button.sidebar-button:backdrop, button:backdrop {
button.titlebutton:backdrop, button:backdrop {
border-width: 2px;
border-style: solid;
color: #000;
@ -427,34 +434,27 @@ button.titlebutton, button {
border-color: #8d8d8d;
background-image: none;
-gtk-icon-effect: none; }
button.titlebutton:backdrop:active, button.titlebutton:backdrop:checked, button.titlebutton:backdrop:active, button.titlebutton:backdrop:checked, button:backdrop.flat:active, button.sidebar-button:backdrop:active, button:backdrop.flat:checked, button.sidebar-button:backdrop:checked, button:backdrop:active, button:backdrop:checked {
button.titlebutton:backdrop:active, button.titlebutton:backdrop:checked, button:backdrop:active, button:backdrop:checked {
border-width: 2px;
border-style: solid;
color: white;
background-color: #8d8d8d;
border-color: #8d8d8d;
background-image: none; }
button.titlebutton:backdrop:disabled, button.titlebutton:backdrop:disabled, button:backdrop.flat:disabled, button.sidebar-button:backdrop:disabled, button:backdrop:disabled {
button.titlebutton:backdrop:disabled, button:backdrop:disabled {
border-width: 2px;
border-style: solid;
color: gray;
background-color: white;
border-color: silver;
background-image: none; }
button.titlebutton:backdrop:disabled:active, button.titlebutton:backdrop:disabled:checked, button.titlebutton:backdrop:disabled:active, button.titlebutton:backdrop:disabled:checked, button:backdrop.flat:disabled:active, button.sidebar-button:backdrop:disabled:active, button:backdrop.flat:disabled:checked, button.sidebar-button:backdrop:disabled:checked, button:backdrop:disabled:active, button:backdrop:disabled:checked {
button.titlebutton:backdrop:disabled:active, button.titlebutton:backdrop:disabled:checked, button:backdrop:disabled:active, button:backdrop:disabled:checked {
border-width: 2px;
border-style: solid;
color: gray;
border-color: silver;
background-image: none;
background-color: #f6f6f6; }
button.titlebutton:backdrop, button.titlebutton:disabled, button.titlebutton:backdrop:disabled, button.flat:backdrop, button.sidebar-button:backdrop, button.flat:disabled, button.sidebar-button:disabled, button.flat:backdrop:disabled, button.sidebar-button:backdrop:disabled {
border-width: 2px;
border-style: solid;
color: #000;
background-color: transparent;
background-image: none;
border-color: transparent; }
button.titlebutton:disabled, button:disabled {
border-width: 2px;
border-style: solid;