forked from AuroraMiddleware/gtk
Adwaita: some code refactoring
This commit is contained in:
parent
61edf40936
commit
f5c2c81645
@ -35,6 +35,7 @@ $backdrop_bg_color: $bg_color;
|
|||||||
$backdrop_fg_color: mix($fg_color, $backdrop_bg_color, 80%);
|
$backdrop_fg_color: mix($fg_color, $backdrop_bg_color, 80%);
|
||||||
$backdrop_insensitive_color: if($variant =='light', darken($backdrop_bg_color,15%), lighten($backdrop_bg_color,5%));
|
$backdrop_insensitive_color: if($variant =='light', darken($backdrop_bg_color,15%), lighten($backdrop_bg_color,5%));
|
||||||
$backdrop_borders_color: mix($borders_color, $bg_color, 90%);
|
$backdrop_borders_color: mix($borders_color, $bg_color, 90%);
|
||||||
|
$backdrop_dark_fill: mix($backdrop_borders_color,$backdrop_bg_color, 35%);
|
||||||
|
|
||||||
//apps rely on some named colors to be exported
|
//apps rely on some named colors to be exported
|
||||||
/* GTK NAMED COLORS */
|
/* GTK NAMED COLORS */
|
||||||
|
@ -332,7 +332,7 @@ GtkLabel {
|
|||||||
&:hover { @include button(osd-hover); @extend %linked_buttons; }
|
&:hover { @include button(osd-hover); @extend %linked_buttons; }
|
||||||
&:active { @include button(osd-active); @extend %linked_buttons; }
|
&:active { @include button(osd-active); @extend %linked_buttons; }
|
||||||
&:insensitive { @include button(osd-insensitive); @extend %linked_buttons; }
|
&:insensitive { @include button(osd-insensitive); @extend %linked_buttons; }
|
||||||
&:backdrop { @include button(osd-backdrop); @extend %linked_buttons; }
|
&:backdrop { @include button(osd-backdrop); @extend %linked_buttons; }
|
||||||
}
|
}
|
||||||
// Suggested and Destructive Action buttons
|
// Suggested and Destructive Action buttons
|
||||||
@each $b_type, $b_color in (suggested-action, $selected_bg_color),
|
@each $b_type, $b_color in (suggested-action, $selected_bg_color),
|
||||||
@ -525,7 +525,7 @@ GtkLabel {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
GtkColorButton.button {
|
GtkColorButton.button {
|
||||||
padding: 4px; // Uniform padding on the GtkColorButton
|
padding: 4px; // Uniform padding on the GtkColorButton
|
||||||
GtkColorSwatch {
|
GtkColorSwatch {
|
||||||
border-radius: 1.5px;
|
border-radius: 1.5px;
|
||||||
@ -765,7 +765,7 @@ GtkComboBox {
|
|||||||
//FIXME edge would be nice, but doesn't work
|
//FIXME edge would be nice, but doesn't work
|
||||||
&:backdrop {
|
&:backdrop {
|
||||||
border-color: $backdrop_borders_color;
|
border-color: $backdrop_borders_color;
|
||||||
background-color: mix($backdrop_borders_color,$backdrop_bg_color, 35%);
|
background-color: $backdrop_dark_fill;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -842,16 +842,16 @@ GtkComboBox {
|
|||||||
&:hover { @include button(hover, $selected_bg_color, $selected_fg_color,
|
&:hover { @include button(hover, $selected_bg_color, $selected_fg_color,
|
||||||
$noedge: true); }
|
$noedge: true); }
|
||||||
&:active { @include button(active, $selected_bg_color, $selected_fg_color, $noedge: true); }
|
&:active { @include button(active, $selected_bg_color, $selected_fg_color, $noedge: true); }
|
||||||
&:insensitive { @include button(insensitive, $selected_bg_color,
|
&:insensitive { @include button(insensitive, $selected_bg_color,
|
||||||
$selected_fg_color, $noedge: true); }
|
$selected_fg_color, $noedge: true); }
|
||||||
&:backdrop {
|
&:backdrop {
|
||||||
@include button(backdrop, $selected_bg_color, $selected_fg_color,
|
@include button(backdrop, $selected_bg_color, $selected_fg_color,
|
||||||
$noedge: true);
|
$noedge: true);
|
||||||
border-color: $selected_borders_color;
|
border-color: $selected_borders_color;
|
||||||
}
|
}
|
||||||
&:backdrop:insensitive {
|
&:backdrop:insensitive {
|
||||||
@include button(backdrop-insensitive, $selected_bg_color,
|
@include button(backdrop-insensitive, $selected_bg_color,
|
||||||
$selected_fg_color, $noedge: true);
|
$selected_fg_color, $noedge: true);
|
||||||
}
|
}
|
||||||
&.suggested-action {
|
&.suggested-action {
|
||||||
@include button($t:normal, $noedge:true);
|
@include button($t:normal, $noedge:true);
|
||||||
@ -1214,7 +1214,7 @@ GtkTreeView.view.progressbar { //Progressbar in treeview cells
|
|||||||
}
|
}
|
||||||
&:backdrop {
|
&:backdrop {
|
||||||
// same color as backdrop pushed button
|
// same color as backdrop pushed button
|
||||||
background-color: mix($backdrop_borders_color,$backdrop_bg_color, 35%);
|
background-color: $backdrop_dark_fill;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1485,7 +1485,7 @@ GtkSwitch {
|
|||||||
&:backdrop {
|
&:backdrop {
|
||||||
color: $backdrop_fg_color;
|
color: $backdrop_fg_color;
|
||||||
border-color: $backdrop_borders_color;
|
border-color: $backdrop_borders_color;
|
||||||
background-color: $backdrop_bg_color;
|
background-color: $backdrop_dark_fill;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
&:active {
|
&:active {
|
||||||
@ -1497,6 +1497,7 @@ GtkSwitch {
|
|||||||
&:insensitive {
|
&:insensitive {
|
||||||
color: $backdrop_insensitive_color;
|
color: $backdrop_insensitive_color;
|
||||||
border-color: $backdrop_insensitive_color;
|
border-color: $backdrop_insensitive_color;
|
||||||
|
background-color: $backdrop_bg_color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1589,7 +1590,7 @@ $asset_suffix: if($variant=='dark', '-dark', '');
|
|||||||
&:inconsistent {
|
&:inconsistent {
|
||||||
-gtk-icon-source: -gtk-icontheme('#{$a}-mixed-symbolic');
|
-gtk-icon-source: -gtk-icontheme('#{$a}-mixed-symbolic');
|
||||||
}
|
}
|
||||||
&:backdrop, &:backdrop:hover {
|
&:backdrop, &:backdrop:hover {
|
||||||
color: transparentize($backdrop_fg_color,0.9);
|
color: transparentize($backdrop_fg_color,0.9);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1703,9 +1704,9 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
|
|||||||
border-color: $backdrop_insensitive_color;
|
border-color: $backdrop_insensitive_color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:active {
|
&:active {
|
||||||
border: 1px solid if($variant=='light',darken($selected_borders_color,3%),
|
border: 1px solid if($variant=='light',darken($selected_borders_color,3%),
|
||||||
darken($selected_bg_color,15%));
|
darken($selected_bg_color,15%));
|
||||||
}
|
}
|
||||||
//OSD sliders
|
//OSD sliders
|
||||||
.osd & {
|
.osd & {
|
||||||
@ -1759,7 +1760,7 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$asset_suffix: if($variant=='dark', '-dark', '');
|
$asset_suffix: if($variant=='dark', '-dark', '');
|
||||||
@each $d,$dn in ('', 'horz'),
|
@each $d,$dn in ('', 'horz'),
|
||||||
('.vertical', 'vert') {
|
('.vertical', 'vert') {
|
||||||
@ -1769,7 +1770,7 @@ $asset_suffix: if($variant=='dark', '-dark', '');
|
|||||||
-GtkScale-slider-length: 20;
|
-GtkScale-slider-length: 20;
|
||||||
-GtkRange-slider-width: 24;
|
-GtkRange-slider-width: 24;
|
||||||
-GtkRange-trough-border: 2;
|
-GtkRange-trough-border: 2;
|
||||||
|
|
||||||
@extend %#{$we}_#{$dn};
|
@extend %#{$we}_#{$dn};
|
||||||
|
|
||||||
@each $s,$as in ('',''),
|
@each $s,$as in ('',''),
|
||||||
@ -1872,7 +1873,7 @@ GtkProgressBar.trough {
|
|||||||
// $widget_edge;
|
// $widget_edge;
|
||||||
&:backdrop{
|
&:backdrop{
|
||||||
border-color: $backdrop_borders_color;
|
border-color: $backdrop_borders_color;
|
||||||
background-color: mix($backdrop_borders_color,$backdrop_bg_color, 35%);
|
background-color: $backdrop_dark_fill;
|
||||||
box-shadow: 0 1px transparentize(white,1);
|
box-shadow: 0 1px transparentize(white,1);
|
||||||
}
|
}
|
||||||
&.osd {
|
&.osd {
|
||||||
@ -2087,20 +2088,20 @@ GtkExpander {
|
|||||||
/************
|
/************
|
||||||
* Calendar *
|
* Calendar *
|
||||||
***********/
|
***********/
|
||||||
GtkCalendar {
|
GtkCalendar {
|
||||||
border: 1px solid $borders_color;
|
border: 1px solid $borders_color;
|
||||||
&.button {
|
&.button {
|
||||||
@extend %undecorated_button;
|
@extend %undecorated_button;
|
||||||
padding: 0 4px; //FIXME no effect on these pseudobuttons
|
padding: 0 4px; //FIXME no effect on these pseudobuttons
|
||||||
color: mix($fg_color, $base_color, 40%); //we need a dimmed stuff var
|
color: mix($fg_color, $base_color, 40%); //we need a dimmed stuff var
|
||||||
&:hover {
|
&:hover {
|
||||||
@extend %undecorated_button;
|
@extend %undecorated_button;
|
||||||
color: $fg_color;
|
color: $fg_color;
|
||||||
}
|
}
|
||||||
&:backdrop, &:backdrop:hover {
|
&:backdrop, &:backdrop:hover {
|
||||||
@extend %undecorated_button;
|
@extend %undecorated_button;
|
||||||
color: mix($backdrop_fg_color, $backdrop_base_color, 50%);
|
color: mix($backdrop_fg_color, $backdrop_base_color, 50%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.view { border-radius: 2px; }
|
&.view { border-radius: 2px; }
|
||||||
&.header {
|
&.header {
|
||||||
@ -2108,8 +2109,8 @@ GtkCalendar {
|
|||||||
lighten($bg_color,2%),
|
lighten($bg_color,2%),
|
||||||
darken($bg_color,2%));
|
darken($bg_color,2%));
|
||||||
border-bottom-color: mix($borders_color,$bg_color,50%);
|
border-bottom-color: mix($borders_color,$bg_color,50%);
|
||||||
&:backdrop {
|
&:backdrop {
|
||||||
background-image: linear-gradient(to bottom, $backdrop_bg_color);
|
background-image: linear-gradient(to bottom, $backdrop_bg_color);
|
||||||
border-bottom-color: mix($backdrop_borders_color,$backdrop_bg_color,50%);
|
border-bottom-color: mix($backdrop_borders_color,$backdrop_bg_color,50%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -43,7 +43,7 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
|
|||||||
|
|
||||||
$_blank_edge: if($noedge, none, 0 1px transparentize(white,1));
|
$_blank_edge: if($noedge, none, 0 1px transparentize(white,1));
|
||||||
$_entry_edge: if($noedge, none, $widget_edge);
|
$_entry_edge: if($noedge, none, $widget_edge);
|
||||||
|
|
||||||
@if $t==normal {
|
@if $t==normal {
|
||||||
border-color: $borders_color;
|
border-color: $borders_color;
|
||||||
@include _shadows(inset 0 2px 2px -2px mix(black, $base_color, 50%),
|
@include _shadows(inset 0 2px 2px -2px mix(black, $base_color, 50%),
|
||||||
@ -233,8 +233,7 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
|
|||||||
//
|
//
|
||||||
color: $backdrop_fg_color;
|
color: $backdrop_fg_color;
|
||||||
border-color: $backdrop_borders_color;
|
border-color: $backdrop_borders_color;
|
||||||
background-image: linear-gradient(to bottom,
|
background-image: linear-gradient(to bottom, $backdrop_dark_fill);
|
||||||
mix($backdrop_borders_color,$backdrop_bg_color, 35%));
|
|
||||||
box-shadow: inset 0 1px transparentize(white,1),
|
box-shadow: inset 0 1px transparentize(white,1),
|
||||||
0 1px transparentize(white,1);
|
0 1px transparentize(white,1);
|
||||||
}
|
}
|
||||||
@ -261,7 +260,7 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
|
|||||||
box-shadow: inset 0 1px transparentize(white,1),
|
box-shadow: inset 0 1px transparentize(white,1),
|
||||||
0 1px transparentize(white,1);
|
0 1px transparentize(white,1);
|
||||||
}
|
}
|
||||||
|
|
||||||
@else if $t==osd {
|
@else if $t==osd {
|
||||||
//
|
//
|
||||||
// normal osd button
|
// normal osd button
|
||||||
@ -303,7 +302,7 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
|
|||||||
box-shadow: inset 0 1px transparentize(white,1);
|
box-shadow: inset 0 1px transparentize(white,1);
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
icon-shadow: none;
|
icon-shadow: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin trough($flat:false, $c:$bg_color, $tc:$fg_color, $noedge:false) {
|
@mixin trough($flat:false, $c:$bg_color, $tc:$fg_color, $noedge:false) {
|
||||||
@ -318,8 +317,8 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
|
|||||||
}
|
}
|
||||||
|
|
||||||
border-color: if($c!=$bg_color, _border_color($c), $border_color);
|
border-color: if($c!=$bg_color, _border_color($c), $border_color);
|
||||||
|
|
||||||
@if not($noedge) {
|
@if not($noedge) {
|
||||||
@if lightness($c) > 60% {
|
@if lightness($c) > 60% {
|
||||||
box-shadow: inset 0 -1px $borders_edge,
|
box-shadow: inset 0 -1px $borders_edge,
|
||||||
0 1px $borders_edge;
|
0 1px $borders_edge;
|
||||||
|
@ -1577,7 +1577,7 @@ GtkSwitch {
|
|||||||
GtkSwitch.trough:backdrop {
|
GtkSwitch.trough:backdrop {
|
||||||
color: #c9cbc9;
|
color: #c9cbc9;
|
||||||
border-color: #1e2222;
|
border-color: #1e2222;
|
||||||
background-color: #393f3f;
|
background-color: #2f3434;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
text-shadow: none; }
|
text-shadow: none; }
|
||||||
GtkSwitch.trough:backdrop:active {
|
GtkSwitch.trough:backdrop:active {
|
||||||
@ -1587,7 +1587,8 @@ GtkSwitch {
|
|||||||
box-shadow: none; }
|
box-shadow: none; }
|
||||||
GtkSwitch.trough:backdrop:insensitive {
|
GtkSwitch.trough:backdrop:insensitive {
|
||||||
color: #454c4c;
|
color: #454c4c;
|
||||||
border-color: #454c4c; }
|
border-color: #454c4c;
|
||||||
|
background-color: #393f3f; }
|
||||||
GtkSwitch.slider {
|
GtkSwitch.slider {
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
|
@ -1571,7 +1571,7 @@ GtkSwitch {
|
|||||||
GtkSwitch.trough:backdrop {
|
GtkSwitch.trough:backdrop {
|
||||||
color: #54595a;
|
color: #54595a;
|
||||||
border-color: #a8a8a8;
|
border-color: #a8a8a8;
|
||||||
background-color: #ededed;
|
background-color: #d4d4d4;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
text-shadow: none; }
|
text-shadow: none; }
|
||||||
GtkSwitch.trough:backdrop:active {
|
GtkSwitch.trough:backdrop:active {
|
||||||
@ -1581,7 +1581,8 @@ GtkSwitch {
|
|||||||
box-shadow: none; }
|
box-shadow: none; }
|
||||||
GtkSwitch.trough:backdrop:insensitive {
|
GtkSwitch.trough:backdrop:insensitive {
|
||||||
color: #c7c7c7;
|
color: #c7c7c7;
|
||||||
border-color: #c7c7c7; }
|
border-color: #c7c7c7;
|
||||||
|
background-color: #ededed; }
|
||||||
GtkSwitch.slider {
|
GtkSwitch.slider {
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
|
Loading…
Reference in New Issue
Block a user