Adwaita: some code refactoring

This commit is contained in:
Lapo Calamandrei 2014-07-19 10:50:01 +02:00
parent 61edf40936
commit f5c2c81645
5 changed files with 44 additions and 41 deletions

View File

@ -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 */

View File

@ -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%);
} }
} }

View File

@ -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;

View File

@ -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;

View File

@ -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;