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_tile {
background-color: transparent; // no background
color: $osd_fg_color;
border-radius: $base_border_radius + 4px;
padding: $base_padding;
border-width: 2px;
border-style: solid;
border-color: transparent;
border: 2px solid transparent;
transition-duration: 100ms;
text-align: center;
}

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

@ -194,3 +194,38 @@
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
.app-well-app,
.app-folder {
%app-well-app {
@include overview-icon($app_grid_fg_color);
.overview-icon {
@extend %icon_tile;
color: $app_grid_fg_color;
}
&: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);
}
> .overview-icon.overview-icon-with-label {
padding: 10px 8px 5px 8px;
spacing: $base_spacing;
}
}
/* App Folders */
.app-folder {
.overview-icon {
@extend %icon_tile;
}
}
@ -178,11 +141,6 @@ $app_grid_fg_color: #fff;
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
.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 {
color: $osd_fg_color;
@include overview-icon($osd_fg_color);
& .overview-icon {
@extend %icon_tile;
color: $osd_fg_color;
}
&:hover,
&:focus,
&:selected {
.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 {
&:checked {
.overview-icon {
background-color: darken($osd_bg_color,10%);
}
}
&:checked, &:focus {
.show-apps-icon {
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
.grid-search-result {
> .overview-icon {
@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);
}
@extend %app-well-app;
}
// search result provider