isa/gnome-shell
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

theme: Simplify .overview-icon styling

Browse Source 
This reduces duplicate code by using overview-icon() and %app-well-app
to improve maintainability.

https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/957
This commit is contained in:
nana-4 2020-01-25 17:53:17 +09:00 committed by Florian Müllner
parent 40f7d61524
commit 60f12da3cd
5 changed files with 44 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
data/theme/gnome-shell-sass/_common.scss
View File

@ -91,13 +91,9 @@ stage {
// icon tiles // icon tiles
%icon_tile { %icon_tile {
background-color: transparent; // no background
color: $osd_fg_color;
border-radius: $base_border_radius + 4px; border-radius: $base_border_radius + 4px;
padding: $base_padding; padding: $base_padding;
border-width: 2px; border: 2px solid transparent;
border-style: solid;
border-color: transparent;
transition-duration: 100ms; transition-duration: 100ms;
text-align: center; text-align: center;
} }

35
data/theme/gnome-shell-sass/_drawing.scss
View File

@ -194,3 +194,38 @@
icon-shadow: none; icon-shadow: none;
} }
} }
// overview icons
@mixin overview-icon($color) {
.overview-icon {
@extend %icon_tile;
color: $color;
}
&:hover,
&:selected {
.overview-icon {
background-color: transparentize($color, .9);
}
}
&:focus {
.overview-icon {
background-color: transparentize($color, .7);
// border-color: $selected_bg_color;
}
}
&:drop {
.overview-icon {
background-color: transparentize($selected_bg_color, .15);
}
}
&:active,
&:checked {
.overview-icon {
background-color: transparentize(darken($osd_bg_color, 10%), .5);
}
}
}

52
data/theme/gnome-shell-sass/widgets/_app-grid.scss
View File

@ -33,55 +33,18 @@ $app_grid_fg_color: #fff;
// Icon tiles in the app grid // Icon tiles in the app grid
.app-well-app, .app-well-app,
.app-folder { %app-well-app {
@include overview-icon($app_grid_fg_color);
.overview-icon { > .overview-icon.overview-icon-with-label {
@extend %icon_tile; padding: 10px 8px 5px 8px;
color: $app_grid_fg_color; spacing: $base_spacing;
}
&:selected {
.overview-icon {
background-color: transparentize($osd_bg_color,0.7);
color: $app_grid_fg_color;
}
}
&:hover,
&:focus,
&:selected {
.overview-icon {
background-color: transparentize($osd_fg_color,0.9);
color: $osd_fg_color;
}
}
&:focus {
.overview-icon {
background-color: transparentize($osd_fg_color,0.7);
// border-color: $selected_bg_color;
color: $app_grid_fg_color;
}
}
&:drop {
.overview-icon {
background-color: transparentize($selected_bg_color,.15);
}
}
&:active,
&:checked {
.overview-icon {
background-color: transparentize(darken($osd_bg_color,10%), 0.5);
}
} }
} }
/* App Folders */ /* App Folders */
.app-folder { .app-folder {
.overview-icon { .overview-icon {
@extend %icon_tile;
} }
} }
@ -178,11 +141,6 @@ $app_grid_fg_color: #fff;
padding: 0px 88px 10px 88px; padding: 0px 88px 10px 88px;
} }
.app-well-app > .overview-icon.overview-icon-with-label {
padding: 10px 8px 5px 8px;
spacing: $base_spacing;
}
// Label when no frequent apps // Label when no frequent apps
.no-frequent-applications-label { @extend %status_text; } .no-frequent-applications-label { @extend %status_text; }

27
data/theme/gnome-shell-sass/widgets/_dash.scss
View File

@ -48,36 +48,13 @@ $dash_border_radius: $modal_radius * 1.5;
// Show apps button // Show apps button
.show-apps { .show-apps {
color: $osd_fg_color; @include overview-icon($osd_fg_color);
& .overview-icon {
@extend %icon_tile;
color: $osd_fg_color;
}
&:hover,
&:focus, &:focus,
&:selected { &:checked {
.overview-icon {
background-color: transparentize($osd_fg_color,0.9);
color: $osd_fg_color;
}
}
&:drop .overview-icon {
background-color: transparentize($selected_bg_color,.15);
}
&:active, &:checked {
.overview-icon { .overview-icon {
background-color: darken($osd_bg_color,10%); background-color: darken($osd_bg_color,10%);
}
}
&:checked, &:focus {
.show-apps-icon {
color: $fg_color; color: $fg_color;
transition-duration: 100ms;
} }
} }
} }

28
data/theme/gnome-shell-sass/widgets/_search-results.scss
View File

@ -41,33 +41,7 @@
// Search results with icons // Search results with icons
.grid-search-result { .grid-search-result {
> .overview-icon { @extend %app-well-app;
@extend %icon_tile;
color: $osd_fg_color;
}
> .overview-icon.overview-icon-with-label {
padding: 10px 8px 5px 8px;
spacing: $base_spacing;
}
&:hover,
&:focus,
&:selected {
.overview-icon {
background-color: transparentize($osd_bg_color,0.8);
color: $osd_fg_color;
}
}
&:drop .overview-icon {
background-color: transparentize($selected_bg_color,.15);
}
&:active .overview-icon,
&:checked .overview-icon {
background-color: transparentize(darken($osd_bg_color,10%), 0.5);
}
} }
// search result provider // search result provider