diff --git a/gtk-3.0/scss/widgets/_grid.scss b/gtk-3.0/scss/widgets/_grid.scss index 877707c..573e5c2 100644 --- a/gtk-3.0/scss/widgets/_grid.scss +++ b/gtk-3.0/scss/widgets/_grid.scss @@ -2,44 +2,47 @@ ! Grid and flowbox *******************/ -.list { - background-color: shade($bg_color, 0.97); - color: $fg_color; +@include exports("grid") { + .list { + background-color: shade($bg_color, 0.97); + color: $fg_color; - &-row { - &, &.button { - border: none; - border-radius: 0; - padding: $spacing; - background-image: none; - background-color: transparent; - box-shadow: none; - - &:hover { + &-row { + &, &.button { + border: none; + border-radius: 0; + padding: $spacing; background-image: none; - background-color: shade($bg_color, 1.02); - } + background-color: transparent; + box-shadow: none; - &:selected { - &, &:hover, &:focus { + &:hover { background-image: none; - background-color: $selected_bg_color; - color: $selected_fg_color; + background-color: shade($bg_color, 1.02); + } + + &:selected { + &, &:hover, &:focus { + background-image: none; + background-color: $selected_bg_color; + color: $selected_fg_color; + } } } } } -} -.grid-child { - &, GtkFlowBox & { - padding: $spacing; - border-radius: $roundness; + .grid-child { + &, GtkFlowBox & { + padding: $spacing; + border-radius: $roundness; - &:selected { - @extend %selected; + &:selected { + @extend %selected; - outline-offset: -2px; + outline-offset: -2px; + } } } } + diff --git a/gtk-3.0/scss/widgets/_misc.scss b/gtk-3.0/scss/widgets/_misc.scss index 1d5a510..f7a5c94 100644 --- a/gtk-3.0/scss/widgets/_misc.scss +++ b/gtk-3.0/scss/widgets/_misc.scss @@ -2,9 +2,11 @@ ! Dimmed label * ****************/ -.dim-label { - opacity: 0.5; - text-shadow: none; +@include exports("dimlabel") { + .dim-label { + opacity: 0.5; + text-shadow: none; + } } diff --git a/gtk-3.0/scss/widgets/_osd.scss b/gtk-3.0/scss/widgets/_osd.scss index 178283d..87be1e5 100644 --- a/gtk-3.0/scss/widgets/_osd.scss +++ b/gtk-3.0/scss/widgets/_osd.scss @@ -5,146 +5,127 @@ ! OSD * ********/ -GtkOverlay.osd { - background-color: transparent; -} +@include exports("osd") { + GtkOverlay.osd { background-color: transparent; } -.osd { - &.background { - background-color: alpha($osd_bg, 0.8); - color: $osd_fg; - } + .osd { + &.background { + background-color: alpha($osd_bg, 0.8); + color: $osd_fg; + } - &.frame { - background-clip: border-box; - background-origin: border-box; - } + &.frame { + background-clip: border-box; + background-origin: border-box; + } - &.button, .button { @include button($osd_bg, $osd_fg); } + &.button, .button { @include button($osd_bg, $osd_fg); } - &.toolbar { - -GtkToolbar-button-relief: normal; + &.toolbar { + -GtkToolbar-button-relief: normal; - padding: $spacing; - border: 1px solid border_normal($osd_bg); - border-radius: $roundness; - background-color: $osd_bg; - background-image: none; - color: $osd_fg; - - .separator { color: shade($osd_bg, ($contrast + .1)); } - } - - /* used by gnome-settings-daemon's media-keys OSD */ - &.trough { background-color: shade($osd_bg, 0.8); } - - &.progressbar { background-color: $osd_fg; } - - .scale { - &.slider { - background-color: shade($osd_bg, 1.08); + padding: $spacing; + border: 1px solid border_normal($osd_bg); + border-radius: $roundness; + background-color: $osd_bg; background-image: none; - /* we will draw the border using box shadow for now */ - box-shadow: inset 1px 0 shade($osd_bg, 0.8), - inset 0 1px shade($osd_bg, 0.8), - inset -1px 0 shade($osd_bg, 0.8), - inset 0 -1px shade($osd_bg, 0.8); + color: $osd_fg; - &:hover { - box-shadow: inset 1px 0 shade($osd_bg, 0.7), - inset 0 1px shade($osd_bg, 0.7), - inset -1px 0 shade($osd_bg, 0.7), - inset 0 -1px shade($osd_bg, 0.7); + .separator { color: shade($osd_bg, ($contrast + .1)); } + } + + /* used by gnome-settings-daemon's media-keys OSD */ + &.trough { background-color: shade($osd_bg, 0.8); } + + &.progressbar { background-color: $osd_fg; } + + .scale { + &.slider { + @include linear-gradient(shade($osd_bg, 1.08)); + @include border($osd_bg); + + &:insensitive { @include linear-gradient(shade($osd_bg, 0.9)); } } - &:insensitive { - background-color: shade($osd_bg, 0.9); + &.trough { + border-color: shade($osd_bg, 0.8); + background-color: shade($osd_bg, 1.08); background-image: none; - box-shadow: inset 1px 0 shade($osd_bg, 0.85), - inset 0 1px shade($osd_bg, 0.85), - inset -1px 0 shade($osd_bg, 0.85), - inset 0 -1px shade($osd_bg, 0.85); + + &.highlight { + border-color: $selected_bg_color; + background-color: $selected_bg_color; + background-image: none; + } + + &:insensitive, &.highlight:insensitive { + border-color: shade($osd_bg, 0.85); + background-color: shade($osd_bg, 0.9); + background-image: none; + } } } + &.view, .view { background-color: $osd_bg; } + + .scrollbar { + .trough { background-color: $osd_bg; } + + .slider { + border: 1px solid mix(shade($osd_bg, 0.87), $osd_fg, 0.21); + border-radius: 0; + background-color: mix($osd_bg, $osd_fg, 0.21); + + &:hover { + border-color: mix(shade($osd_bg, 0.87), $osd_fg, 0.31); + background-color: mix($osd_bg, $osd_fg, 0.31); + } + + &:active { + border-color: shade($selected_bg_color, 0.9); + background-color: $selected_bg_color; + } + } + } + + GtkIconView.cell { + &:selected, &:selected:focus { + background-color: transparent; + border: 3px solid mix(shade($osd_bg, 0.87), $osd_fg, 0.21); + border-radius: $roundness; + outline-color: transparent; + } + } + + /* used by Documents */ + .page-thumbnail { + border: 1px solid shade($osd_bg, 0.9); + /* when there's no pixbuf yet */ + background-color: $osd_bg; + } + } + + .osd GtkProgressBar, GtkProgressBar.osd { + -GtkProgressBar-xspacing: 0; + -GtkProgressBar-yspacing: 2px; + -GtkProgressBar-min-horizontal-bar-height: 2px; + + padding: 0; + &.trough { - border-color: shade($osd_bg, 0.8); - background-color: shade($osd_bg, 1.08); - background-image: none; - - &.highlight { - border-color: $selected_bg_color; - background-color: $selected_bg_color; - background-image: none; - } - - &:insensitive, &.highlight:insensitive { - border-color: shade($osd_bg, 0.85); - background-color: shade($osd_bg, 0.9); - background-image: none; - } - } - } - - &.view, .view { background-color: $osd_bg; } - - .scrollbar { - .trough { background-color: $osd_bg; } - - .slider { - border: 1px solid mix(shade($osd_bg, 0.87), $osd_fg, 0.21); + padding: 0; + border-style: none; border-radius: 0; - background-color: mix($osd_bg, $osd_fg, 0.21); - - &:hover { - border-color: mix(shade($osd_bg, 0.87), $osd_fg, 0.31); - background-color: mix($osd_bg, $osd_fg, 0.31); - } - - &:active { - border-color: shade($selected_bg_color, 0.9); - background-color: $selected_bg_color; - } - } - } - - GtkIconView.cell { - &:selected, &:selected:focus { + background-image: none; background-color: transparent; - border: 3px solid mix(shade($osd_bg, 0.87), $osd_fg, 0.21); - border-radius: $roundness; - outline-color: transparent; + } + + &.progressbar { + border-style: none; + border-radius: 0; + background-color: $selected_bg_color; + background-image: none; } } - - /* used by Documents */ - .page-thumbnail { - border: 1px solid shade($osd_bg, 0.9); - /* when there's no pixbuf yet */ - background-color: $osd_bg; - } -} - -.osd GtkProgressBar, GtkProgressBar.osd { - -GtkProgressBar-xspacing: 0; - -GtkProgressBar-yspacing: 2px; - -GtkProgressBar-min-horizontal-bar-height: 2px; - - padding: 0; - - &.trough { - padding: 0; - border-style: none; - border-radius: 0; - background-image: none; - background-color: transparent; - } - - &.progressbar { - border-style: none; - border-radius: 0; - background-color: $selected_bg_color; - background-image: none; - } } diff --git a/gtk-3.0/scss/widgets/_progress.scss b/gtk-3.0/scss/widgets/_progress.scss index 94ec533..c09ff40 100644 --- a/gtk-3.0/scss/widgets/_progress.scss +++ b/gtk-3.0/scss/widgets/_progress.scss @@ -120,37 +120,14 @@ &.slider { @include linear-gradient(shade($bg_color, 1.08)); + @include border($bg_color); border-radius: 8px; + border-width: 1px; + border-style: solid; + box-shadow: 0 1px 2px -1px alpha($dark_shadow, .3); - /* we will draw the border using box shadow for now */ - box-shadow: inset 1px 0 border_normal($bg_color), - inset 0 1px border_normal($bg_color), - inset -1px 0 border_normal($bg_color), - inset 0 -1px border_normal($bg_color); - - &:hover, &:focus { - box-shadow: inset 1px 0 border_focus($bg_color), - inset 0 1px border_focus($bg_color), - inset -1px 0 border_focus($bg_color), - inset 0 -1px border_focus($bg_color); - } - - &:active { - box-shadow: inset 1px 0 border_active($bg_color), - inset 0 1px border_active($bg_color), - inset -1px 0 border_active($bg_color), - inset 0 -1px border_active($bg_color); - } - - &:insensitive { - @include linear-gradient(shade($bg_color, 0.9)); - - box-shadow: inset 1px 0 border_insensitive($bg_color), - inset 0 1px border_insensitive($bg_color), - inset -1px 0 border_insensitive($bg_color), - inset 0 -1px border_insensitive($bg_color); - } + &:insensitive { @include linear-gradient(shade($bg_color, 0.9)); } } &.fine-tune { diff --git a/gtk-3.0/scss/widgets/_sidebar.scss b/gtk-3.0/scss/widgets/_sidebar.scss index af417ff..b3185d5 100755 --- a/gtk-3.0/scss/widgets/_sidebar.scss +++ b/gtk-3.0/scss/widgets/_sidebar.scss @@ -19,21 +19,21 @@ } row, .view row { - &:selected { - &, &:hover, &:focus { - border: none; - background-image: none; - background-color: $selected_bg_color; - color: $selected_fg_color; - } + &:selected { + &, &:hover, &:focus { + border: none; + background-image: none; + background-color: $selected_bg_color; + color: $selected_fg_color; + } - &:prelight { - border: none; - background-image: none; - background-color: shade($selected_bg_color, 1.05); - color: $selected_fg_color; - } - } + &:prelight { + border: none; + background-image: none; + background-color: shade($selected_bg_color, 1.05); + color: $selected_fg_color; + } + } &:prelight { border: none; @@ -46,7 +46,7 @@ .frame { border-width: 0; } GtkAssistant & { - padding: 4px; + padding: $spacing; border-width: 0 1px 0 0; border-style: solid; border-right-color: border_normal($bg_color);