diff --git a/gtk-3.0/scss/_button.scss b/gtk-3.0/scss/_button.scss index 4baaf0f..44cbcd2 100755 --- a/gtk-3.0/scss/_button.scss +++ b/gtk-3.0/scss/_button.scss @@ -145,29 +145,31 @@ .linked & { @include linked_button($bg, $dark_shadow); } } -%close_button { - border: 1px solid transparent; - background-color: transparent; - background-image: none; - box-shadow: none; - - &:focus, &:hover { - border: 1px solid alpha(black, 0.3); - background-color: alpha(white, 0.2); +@include exports("button") { + %close_button { + border: 1px solid transparent; + background-color: transparent; background-image: none; box-shadow: none; + + &:focus, &:hover { + border: 1px solid alpha(black, 0.3); + background-color: alpha(white, 0.2); + background-image: none; + box-shadow: none; + } + + &:active, &:checked, &:active:hover, &:checked:hover { + border: 1px solid alpha(black, 0.3); + background-color: alpha(black, 0.1); + background-image: none; + box-shadow: none; + } } - &:active, &:checked, &:active:hover, &:checked:hover { - border: 1px solid alpha(black, 0.3); - background-color: alpha(black, 0.1); - background-image: none; - box-shadow: none; + .button { + @include button($bg_color, $fg_color); + + &.default { @include button($selected_bg_color, $selected_fg_color); } } } - -.button { - @include button($bg_color, $fg_color); - - &.default { @include button($selected_bg_color, $selected_fg_color); } -} diff --git a/gtk-3.0/scss/_calendar.scss b/gtk-3.0/scss/_calendar.scss index a1be572..6eacde0 100644 --- a/gtk-3.0/scss/_calendar.scss +++ b/gtk-3.0/scss/_calendar.scss @@ -6,19 +6,22 @@ ! Calendar ***********/ -GtkCalendar { - padding: $spacing; - outline-offset: -1px; +@include exports("calendar") { + GtkCalendar { + padding: $spacing; + outline-offset: -1px; - &:inconsistent { color: mix($fg_color, $bg_color, 0.5); } + &:inconsistent { color: mix($fg_color, $bg_color, 0.5); } - &.view, &.highlight, &.header, &.button { - &, &:hover, &:insensitive { - border: none; - background-color: transparent; - background-image: none; + &.view, &.highlight, &.header, &.button { + &, &:hover, &:insensitive { + border: none; + background-color: transparent; + background-image: none; + } } - } - &.highlight { color: $selected_bg_color; } + &.highlight { color: $selected_bg_color; } + } } + diff --git a/gtk-3.0/scss/_entry.scss b/gtk-3.0/scss/_entry.scss index d099aff..7720308 100755 --- a/gtk-3.0/scss/_entry.scss +++ b/gtk-3.0/scss/_entry.scss @@ -72,27 +72,32 @@ &.image.left { padding-right: $spacing; } } -.entry { @include entry($base_color, $text_color); } +@include exports("entry") { + .entry { @include entry($base_color, $text_color); } +} /****************** ! Combobox entry * *******************/ -GtkComboBox.combobox-entry { - .entry { - &, &:hover, &:focus, &:active, &:insensitive { - border-width: 1px 0 1px 1px; - border-top-right-radius: 0; - border-bottom-right-radius: 0; +@include exports("comboboxentry") { + GtkComboBox.combobox-entry { + .entry { + &, &:hover, &:focus, &:active, &:insensitive { + border-width: 1px 0 1px 1px; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } } - } - .button { - &, &:hover, &:focus, &:active, &:insensitive { - border-width: 1px 1px 1px 1px; - border-bottom-left-radius: 0; - border-top-left-radius: 0; + .button { + &, &:hover, &:focus, &:active, &:insensitive { + border-width: 1px 1px 1px 1px; + border-bottom-left-radius: 0; + border-top-left-radius: 0; + } } } } + diff --git a/gtk-3.0/scss/_grid.scss b/gtk-3.0/scss/_grid.scss index 1f60beb..a92ba9a 100644 --- a/gtk-3.0/scss/_grid.scss +++ b/gtk-3.0/scss/_grid.scss @@ -13,7 +13,7 @@ &-row { border: none; border-radius: 0; - padding: 3px; + padding: $spacing; background-image: none; background-color: transparent; diff --git a/gtk-3.0/scss/_infobar.scss b/gtk-3.0/scss/_infobar.scss index 29a096b..848c247 100644 --- a/gtk-3.0/scss/_infobar.scss +++ b/gtk-3.0/scss/_infobar.scss @@ -7,31 +7,33 @@ ! Infobar **********/ -GtkInfoBar { - border: none; +@include exports("infobar") { + GtkInfoBar { + border: none; - $types: ( - info: ( $info_fg_color, $info_bg_color ), - warning: ( $warning_fg_color, $warning_bg_color ), - question: ( $question_fg_color, $question_bg_color ), - error: ( $error_fg_color, $error_bg_color ), - ); + $types: ( + info: ( $info_fg_color, $info_bg_color ), + warning: ( $warning_fg_color, $warning_bg_color ), + question: ( $question_fg_color, $question_bg_color ), + error: ( $error_fg_color, $error_bg_color ), + ); - @each $type, $colors in $types { - $fg_color: nth($colors, 1); - $bg_color: nth($colors, 2); + @each $type, $colors in $types { + $fg_color: nth($colors, 1); + $bg_color: nth($colors, 2); - &.#{$type} { - border: 1px solid shade($bg_color, 0.8); - background-color: $bg_color; - background-image: none; - color: $fg_color; + &.#{$type} { + border: 1px solid shade($bg_color, 0.8); + background-color: $bg_color; + background-image: none; + color: $fg_color; - .button { - @include button($bg_color, $fg_color); + .button { + @include button($bg_color, $fg_color); - &.close { @extend %close_button; } + &.close { @extend %close_button; } + } } } } diff --git a/gtk-3.0/scss/_menu.scss b/gtk-3.0/scss/_menu.scss index 44fd1bf..6fa1a44 100755 --- a/gtk-3.0/scss/_menu.scss +++ b/gtk-3.0/scss/_menu.scss @@ -7,30 +7,32 @@ ! Menubar **********/ -.menubar { - -GtkWidget-window-dragging: true; +@include exports("menubar") { + .menubar { + -GtkWidget-window-dragging: true; - border: none; - background-color: $menubar_bg_color; - background-image: none; - color: $menubar_fg_color; - - - &.menuitem, .menuitem { - padding: $spacing ($spacing * 2); - border: 1px solid transparent; - background-color: transparent; + border: none; + background-color: $menubar_bg_color; background-image: none; color: $menubar_fg_color; - &:hover { - border-color: mix($menubar_bg_color, $menubar_fg_color, 0.21); - background-color: mix($menubar_bg_color, $menubar_fg_color, 0.21); - background-image: none; - color: shade($menubar_fg_color, 1.08); - } - & *:hover { color: shade($menubar_fg_color, 1.08); } + &.menuitem, .menuitem { + padding: $spacing ($spacing * 2); + border: 1px solid transparent; + background-color: transparent; + background-image: none; + color: $menubar_fg_color; + + &:hover { + border-color: mix($menubar_bg_color, $menubar_fg_color, 0.21); + background-color: mix($menubar_bg_color, $menubar_fg_color, 0.21); + background-image: none; + color: shade($menubar_fg_color, 1.08); + } + + & *:hover { color: shade($menubar_fg_color, 1.08); } + } } } @@ -39,185 +41,189 @@ ! Menu *******/ -GtkTreeMenu, GtkMenuToolButton, GtkComboBox { - &.menu, .menu { - background-color: $menu_bg_color; - margin: $spacing; - } -} - -#toolbar-popup, .menu { - padding: 0; - border-radius: 0; - border-style: none; - background-color: $menu_bg_color; - color: $menu_fg_color; - - &:selected { background-color: $selected_bg_color; } - - .button { - &, &:hover, &:active, &:active *:insensitive, &:insensitive { - border-width: 0; - background-color: transparent; - background-image: none; +@include exports("menu") { + GtkTreeMenu, GtkMenuToolButton, GtkComboBox { + &.menu, .menu { + background-color: $menu_bg_color; + margin: $spacing; } } -} -.context-menu { font: initial; } - -.menuitem { - GtkTreeMenu & { + #toolbar-popup, .menu { padding: 0; - border-width: 0; - } - - &, .menu & { - margin: $spacing; - padding: $spacing; - border: none; border-radius: 0; - background-color: transparent; - background-image: none; - - -GtkMenuItem-arrow-scaling: 0.5; - - &:active, &:hover { - border: none; - background-color: $selected_bg_color; - background-image: none; - color: $selected_fg_color; - } - - & *:active, & *:hover { color: $selected_fg_color; } - - &:insensitive, & *:insensitive { color: mix($menu_fg_color, $menu_bg_color, .5); } - } - - &.check, &.radio { - &, &:focus, &:hover, &:insensitive { background-image: none; } - - &, &:focus, &:hover, &:active, &:insensitive { - border-style: none; - background-color: transparent; - } - } - - &.separator { - -GtkMenuItem-horizontal-padding: 0; - -GtkWidget-separator-height: 1; - border-style: none; - color: shade($menu_bg_color, .9); - } + background-color: $menu_bg_color; + color: $menu_fg_color; - &.button { - &, &:focus, &:active, &:insensitive, &:active:insensitive { - background-color: transparent; - background-image: none; - border-color: transparent; - border-style: none; - box-shadow: none; - color: currentColor; - } - - &:hover, &:focus:hover, &:active:hover, &:selected { - background-color: $selected_bg_color; - background-image: none; - color: $selected_fg_color; - } - } - - GtkCalendar { - &:inconsistent { color: mix($menu_fg_color, $menu_bg_color, .5); } + &:selected { background-color: $selected_bg_color; } .button { - border-style: none; - background-color: transparent; - background-image: none; + &, &:hover, &:active, &:active *:insensitive, &:insensitive { + border-width: 0; + background-color: transparent; + background-image: none; + } } } - .accelerator { - color: alpha($menu_fg_color, .6); + .context-menu { font: initial; } - &:hover { color: alpha($selected_fg_color, .8); } + .menuitem { + GtkTreeMenu & { + padding: 0; + border-width: 0; + } - &:insensitive { color: alpha(mix($menu_fg_color, $menu_bg_color, .5), .4); } + &, .menu & { + margin: $spacing; + padding: $spacing; + border: none; + border-radius: 0; + background-color: transparent; + background-image: none; + + -GtkMenuItem-arrow-scaling: 0.5; + + &:active, &:hover { + border: none; + background-color: $selected_bg_color; + background-image: none; + color: $selected_fg_color; + } + + & *:active, & *:hover { color: $selected_fg_color; } + + &:insensitive, & *:insensitive { color: mix($menu_fg_color, $menu_bg_color, .5); } + } + + &.check, &.radio { + &, &:focus, &:hover, &:insensitive { background-image: none; } + + &, &:focus, &:hover, &:active, &:insensitive { + border-style: none; + background-color: transparent; + } + } + + &.separator { + -GtkMenuItem-horizontal-padding: 0; + -GtkWidget-separator-height: 1; + + border-style: none; + color: shade($menu_bg_color, .9); + } + + &.button { + &, &:focus, &:active, &:insensitive, &:active:insensitive { + background-color: transparent; + background-image: none; + border-color: transparent; + border-style: none; + box-shadow: none; + color: currentColor; + } + + &:hover, &:focus:hover, &:active:hover, &:selected { + background-color: $selected_bg_color; + background-image: none; + color: $selected_fg_color; + } + } + + GtkCalendar { + &:inconsistent { color: mix($menu_fg_color, $menu_bg_color, .5); } + + .button { + border-style: none; + background-color: transparent; + background-image: none; + } + } + + .accelerator { + color: alpha($menu_fg_color, .6); + + &:hover { color: alpha($selected_fg_color, .8); } + + &:insensitive { color: alpha(mix($menu_fg_color, $menu_bg_color, .5), .4); } + } + + .entry { @include entry($menu_bg_color, $menu_fg_color); } } - .entry { @include entry($menu_bg_color, $menu_fg_color); } + GtkModelMenuItem GtkBox GtkImage { padding-right: $spacing; } } -GtkModelMenuItem GtkBox GtkImage { padding-right: $spacing; } - /********* ! Popover **********/ -GtkPopover { - @include border($menu_bg_color); +@include exports("popover") { + GtkPopover { + @include border($menu_bg_color); - margin: 10px; - padding: $spacing; - border-radius: $roundness; - border-width: 1px; - border-style: solid; - background-clip: border-box; - background-color: $menu_bg_color; - background-image: none; - color: $menu_fg_color; - box-shadow: 0 2px 3px alpha(black, .5); - - &.background { - background-image: none; + margin: 10px; + padding: $spacing; + border-radius: $roundness; + border-width: 1px; + border-style: solid; + background-clip: border-box; background-color: $menu_bg_color; + background-image: none; color: $menu_fg_color; - } + box-shadow: 0 2px 3px alpha(black, .5); - &:backdrop { box-shadow: none; } - - &.osd { - box-shadow: 0 2px 7px 3px alpha(black, .5); - - > .toolbar .button { - border-radius: 0; - border-width: 0; + &.background { background-image: none; - background-color: transparent; - } - } - - > .list, > .view, > .toolbar { background-color: transparent; } - - .separator { - border: 0; - background-color: transparent; - color: alpha($menu_bg_color, .5); - font-size: 80%; - font-weight: bold; - } -} - -GtkModelButton.button { - &, &:focus, &:active, &:insensitive, &:active:insensitive { - &, &:backdrop { - background-color: transparent; - background-image: none; - border-color: transparent; - border-image: none; - border-style: none; - box-shadow: none; + background-color: $menu_bg_color; color: $menu_fg_color; } + + &:backdrop { box-shadow: none; } + + &.osd { + box-shadow: 0 2px 7px 3px alpha(black, .5); + + > .toolbar .button { + border-radius: 0; + border-width: 0; + background-image: none; + background-color: transparent; + } + } + + > .list, > .view, > .toolbar { background-color: transparent; } + + .separator { + border: 0; + background-color: transparent; + color: alpha($menu_bg_color, .5); + font-size: 80%; + font-weight: bold; + } } - &:focus:hover, &:active:hover, &:hover, &:selected { - background-image: none; - background-color: $selected_bg_color; - color: $selected_fg_color; - border: none; - border-radius: 2px; + GtkModelButton.button { + &, &:focus, &:active, &:insensitive, &:active:insensitive { + &, &:backdrop { + background-color: transparent; + background-image: none; + border-color: transparent; + border-image: none; + border-style: none; + box-shadow: none; + color: $menu_fg_color; + } + } + + &:focus:hover, &:active:hover, &:hover, &:selected { + background-image: none; + background-color: $selected_bg_color; + color: $selected_fg_color; + border: none; + border-radius: 2px; + } } } diff --git a/gtk-3.0/scss/_notebook.scss b/gtk-3.0/scss/_notebook.scss index b16b0d6..defac44 100644 --- a/gtk-3.0/scss/_notebook.scss +++ b/gtk-3.0/scss/_notebook.scss @@ -1,134 +1,137 @@ @import "functions"; @import "global"; + /********** ! Notebook ***********/ -.notebook { - padding: 0; - border-width: 1px 0 0 0; - border-style: solid; - border-color: border_normal($base_color); - border-radius: 0; - background-color: $base_color; - background-image: none; - background-clip: border-box; - color: $text_color; - - -GtkNotebook-initial-gap: 0; - -GtkNotebook-arrow-spacing: 5; - -GtkNotebook-tab-curvature: 0; - -GtkNotebook-tab-overlap: 1; - -GtkNotebook-has-tab-gap: false; - - &.frame { border-width: 1px; } - - &.header { - border-width: 0; - background-color: shade($base_color, 0.85); - - &.frame { - border-color: shade($base_color, 0.75); - - &.top { border-width: 1px 1px 0 1px; } - - &.right { border-width: 1px 1px 1px 0; } - - &.bottom { border-width: 0 1px 1px 1px; } - - &.left { border-width: 1px 0 1px 1px; } - } - } - - GtkViewport { - border-width: 0; +@include exports("notebook") { + .notebook { + padding: 0; + border-width: 1px 0 0 0; + border-style: solid; + border-color: border_normal($base_color); + border-radius: 0; background-color: $base_color; - color: $text_color; - } - - tab { - padding: $spacing ($spacing * 2); - border: 1px solid transparent; - background-color: transparent; background-image: none; + background-clip: border-box; + color: $text_color; - &:active { + -GtkNotebook-initial-gap: 0; + -GtkNotebook-arrow-spacing: 5; + -GtkNotebook-tab-curvature: 0; + -GtkNotebook-tab-overlap: 1; + -GtkNotebook-has-tab-gap: false; + + &.frame { border-width: 1px; } + + &.header { + border-width: 0; + background-color: shade($base_color, 0.85); + + &.frame { + border-color: shade($base_color, 0.75); + + &.top { border-width: 1px 1px 0 1px; } + + &.right { border-width: 1px 1px 1px 0; } + + &.bottom { border-width: 0 1px 1px 1px; } + + &.left { border-width: 1px 0 1px 1px; } + } + } + + GtkViewport { + border-width: 0; + background-color: $base_color; + color: $text_color; + } + + tab { + padding: $spacing ($spacing * 2); + border: 1px solid transparent; background-color: transparent; background-image: none; + + &:active { + background-color: transparent; + background-image: none; + } + + &.top { + border-bottom-width: 2px; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + + &:hover { border-bottom-color: alpha($selected_bg_color, 0.3); } + + &:active { border-bottom-color: $selected_bg_color; } + } + + &.right { + border-left-width: 2px; + border-bottom-left-radius: 0; + border-top-left-radius: 0; + + &:hover { border-left-color: alpha($selected_bg_color, 0.3); } + + &:active { border-left-color: $selected_bg_color; } + } + + + &.bottom { + border-top-width: 2px; + border-top-right-radius: 0; + border-top-left-radius: 0; + + &:hover { border-top-color: alpha($selected_bg_color, 0.3); } + + &:active { border-top-color: $selected_bg_color; } + } + + &.left { + border-right-width: 2px; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + + &:hover { border-right-color: alpha($selected_bg_color, 0.3); } + + &:active { border-right-color: $selected_bg_color; } + } + + GtkLabel { color: mix($text_color, $base_color, 0.3); } + + /* close button styling */ + .button { @extend %close_button; } } - &.top { - border-bottom-width: 2px; - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; - - &:hover { border-bottom-color: alpha($selected_bg_color, 0.3); } - - &:active { border-bottom-color: $selected_bg_color; } + .prelight-page { + &, GtkLabel { color: mix($text_color, $base_color, 0.15); } } - &.right { - border-left-width: 2px; - border-bottom-left-radius: 0; - border-top-left-radius: 0; - - &:hover { border-left-color: alpha($selected_bg_color, 0.3); } - - &:active { border-left-color: $selected_bg_color; } + .active-page { + &, GtkLabel { color: $text_color; } } + .reorderable-page { + &:hover { + background-color: shade($base_color, 0.85); + border-left: 0; + border-right: 0; + /* using box shadows instead of borders due to slanted edges */ + box-shadow: inset 0 3px alpha(black, 0.03), inset 0 2px alpha(black, 0.03), inset 0 1px alpha(black, 0.03), + inset 1px 0 shade($base_color, 0.7), inset -1px 0 shade($base_color, 0.7); + } - &.bottom { - border-top-width: 2px; - border-top-right-radius: 0; - border-top-left-radius: 0; - - &:hover { border-top-color: alpha($selected_bg_color, 0.3); } - - &:active { border-top-color: $selected_bg_color; } - } - - &.left { - border-right-width: 2px; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - - &:hover { border-right-color: alpha($selected_bg_color, 0.3); } - - &:active { border-right-color: $selected_bg_color; } - } - - GtkLabel { color: mix($text_color, $base_color, 0.3); } - - /* close button styling */ - .button { @extend %close_button; } - } - - .prelight-page { - &, GtkLabel { color: mix($text_color, $base_color, 0.15); } - } - - .active-page { - &, GtkLabel { color: $text_color; } - } - - .reorderable-page { - &:hover { - background-color: shade($base_color, 0.85); - border-left: 0; - border-right: 0; - /* using box shadows instead of borders due to slanted edges */ - box-shadow: inset 0 3px alpha(black, 0.03), inset 0 2px alpha(black, 0.03), inset 0 1px alpha(black, 0.03), - inset 1px 0 shade($base_color, 0.7), inset -1px 0 shade($base_color, 0.7); - } - - &:active { - background-color: shade($base_color, 0.90); - border-left: 0; - border-right: 0; - box-shadow: inset 0 3px alpha(black, 0.03), inset 0 2px alpha(black, 0.03), inset 0 1px alpha(black, 0.03), - inset 1px 0 shade($base_color, 0.75), inset -1px 0 shade($base_color, 0.75); + &:active { + background-color: shade($base_color, 0.90); + border-left: 0; + border-right: 0; + box-shadow: inset 0 3px alpha(black, 0.03), inset 0 2px alpha(black, 0.03), inset 0 1px alpha(black, 0.03), + inset 1px 0 shade($base_color, 0.75), inset -1px 0 shade($base_color, 0.75); + } } } } diff --git a/gtk-3.0/scss/_progress.scss b/gtk-3.0/scss/_progress.scss index f648f95..b5ccb30 100644 --- a/gtk-3.0/scss/_progress.scss +++ b/gtk-3.0/scss/_progress.scss @@ -6,189 +6,191 @@ ! Progress bars * ******************/ -GtkProgressBar { - padding: 0; - border-radius: $roundness; - font-size: smaller; - color: alpha($fg_color, 0.6); +@include exports("progressbar") { + GtkProgressBar { + padding: 0; + border-radius: $roundness; + font-size: smaller; + color: alpha($fg_color, 0.6); - -GtkProgressBar-min-horizontal-bar-height: 12; - -GtkProgressBar-min-vertical-bar-width: 12; + -GtkProgressBar-min-horizontal-bar-height: 12; + -GtkProgressBar-min-vertical-bar-width: 12; - &.osd { - -GtkProgressBar-xspacing: 0; - -GtkProgressBar-yspacing: 0; - -GtkProgressBar-min-horizontal-bar-height: 3; + &.osd { + -GtkProgressBar-xspacing: 0; + -GtkProgressBar-yspacing: 0; + -GtkProgressBar-min-horizontal-bar-height: 3; + } + + &.trough { + border: 1px solid alpha(border_normal($bg_color), 0.5); + background-color: shade($bg_color, 1.08); + background-image: none; + } } - &.trough { - border: 1px solid alpha(border_normal($bg_color), 0.5); - background-color: shade($bg_color, 1.08); - background-image: none; - } -} - -.progressbar { - background-image: none; - background-color: $selected_bg_color; - border-radius: 0; - box-shadow: none; - - &.left { - border-top-left-radius: $roundness; - border-bottom-left-radius: $roundness; - } - - &.right { - border-top-right-radius: $roundness; - border-bottom-right-radius: $roundness; - } - - &.left.right { box-shadow: none; } - - &.vertical { + .progressbar { background-image: none; background-color: $selected_bg_color; + border-radius: 0; + box-shadow: none; - &.bottom { + &.left { + border-top-left-radius: $roundness; border-bottom-left-radius: $roundness; + } + + &.right { + border-top-right-radius: $roundness; border-bottom-right-radius: $roundness; } - &.top { - border-top-left-radius: $roundness; - border-top-right-radius: $roundness; - } - } -} + &.left.right { box-shadow: none; } -GtkLevelBar { - -GtkLevelBar-min-block-width: 34; - -GtkLevelBar-min-block-height: 3; - - &.vertical { - -GtkLevelBar-min-block-width: 3; - -GtkLevelBar-min-block-height: 34; - } -} - -.level-bar { - &.trough { - border: 1px solid alpha(border_normal($bg_color), 0.5); - background-color: shade($bg_color, 1.08); - background-image: none; - border-radius: $roundness; - } - - &.fill-block { - // FIXME: it would be nice to set make fill blocks bigger, but we'd need - // :nth-child working on discrete indicators - background-color: $selected_bg_color; - border-color: transparent; - border-radius: 0; - - &.indicator-discrete { - &.horizontal { margin-right: 1px; } - &.vertical { margin-bottom: 1px; } - } - - &.level-high { - background-color: $success_color; - border-color: transparent; - } - - &.level-low { - background-color: $warning_color; - border-color: transparent; - } - - &.empty-fill-block { - background-color: transparent; - border-color: transparent; - box-shadow: none; - } - } -} - -.scale { - -GtkRange-slider-width: 16; - -GtkRange-trough-border: 1; - -GtkScale-slider-length: 16; - - padding: 0; - border-width: 1px; - border-radius: $roundness; - outline-offset: -1px; - - - &.slider { - border-radius: 8px; - background-color: shade($bg_color, 1.08); - background-image: none; - /* 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 { - background-color: shade($bg_color, 0.9); + &.vertical { background-image: none; - 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); - } - } + background-color: $selected_bg_color; - &.fine-tune { - &, &.horizontal { - &:active, &:active:hover { - background-size: 50%; - background-repeat: no-repeat; - background-position: center; + &.bottom { + border-bottom-left-radius: $roundness; + border-bottom-right-radius: $roundness; + } + + &.top { + border-top-left-radius: $roundness; + border-top-right-radius: $roundness; } } } - &.mark { border-color: alpha(border_normal($bg_color), 0.5); } + GtkLevelBar { + -GtkLevelBar-min-block-width: 34; + -GtkLevelBar-min-block-height: 3; - - &.trough { - margin: 7px 0; - border: 1px solid alpha(border_normal($bg_color), 0.5); - border-radius: $roundness; - background-color: shade($bg_color, 1.08); - background-image: none; - - &:insensitive { background-color: shade($bg_color, 0.9); } - - &.vertical { margin: 0 7px; } + &.vertical { + -GtkLevelBar-min-block-width: 3; + -GtkLevelBar-min-block-height: 34; + } } - &.highlight { - &, &.left, &.bottom { - border-color: $selected_bg_color; - background-color: $selected_bg_color; + .level-bar { + &.trough { + border: 1px solid alpha(border_normal($bg_color), 0.5); + background-color: shade($bg_color, 1.08); background-image: none; + border-radius: $roundness; + } + + &.fill-block { + // FIXME: it would be nice to set make fill blocks bigger, but we'd need + // :nth-child working on discrete indicators + background-color: $selected_bg_color; + border-color: transparent; + border-radius: 0; + + &.indicator-discrete { + &.horizontal { margin-right: 1px; } + &.vertical { margin-bottom: 1px; } + } + + &.level-high { + background-color: $success_color; + border-color: transparent; + } + + &.level-low { + background-color: $warning_color; + border-color: transparent; + } + + &.empty-fill-block { + background-color: transparent; + border-color: transparent; + box-shadow: none; + } + } + } + + .scale { + -GtkRange-slider-width: 16; + -GtkRange-trough-border: 1; + -GtkScale-slider-length: 16; + + padding: 0; + border-width: 1px; + border-radius: $roundness; + outline-offset: -1px; + + + &.slider { + border-radius: 8px; + background-color: shade($bg_color, 1.08); + background-image: none; + /* 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 { - border-color: shade($bg_color, 0.7); - background-color: shade($bg_color, 0.8); + background-color: shade($bg_color, 0.9); + background-image: none; + 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); + } + } + + &.fine-tune { + &, &.horizontal { + &:active, &:active:hover { + background-size: 50%; + background-repeat: no-repeat; + background-position: center; + } + } + } + + &.mark { border-color: alpha(border_normal($bg_color), 0.5); } + + + &.trough { + margin: 7px 0; + border: 1px solid alpha(border_normal($bg_color), 0.5); + border-radius: $roundness; + background-color: shade($bg_color, 1.08); + background-image: none; + + &:insensitive { background-color: shade($bg_color, 0.9); } + + &.vertical { margin: 0 7px; } + } + + &.highlight { + &, &.left, &.bottom { + border-color: $selected_bg_color; + background-color: $selected_bg_color; + background-image: none; + + &:insensitive { + border-color: shade($bg_color, 0.7); + background-color: shade($bg_color, 0.8); + } } } } diff --git a/gtk-3.0/scss/_scrollbar.scss b/gtk-3.0/scss/_scrollbar.scss index 8412d5d..7777280 100644 --- a/gtk-3.0/scss/_scrollbar.scss +++ b/gtk-3.0/scss/_scrollbar.scss @@ -5,57 +5,59 @@ ! Scrollbar ************/ -.scrollbar { - border: none; - padding: 0; +@include exports("scrollbar") { + .scrollbar { + border: none; + padding: 0; - &.button { - &, &:active, &:active:hover { - border-width: 0; + &.button { + &, &:active, &:active:hover { + border-width: 0; + border-radius: 0; + background-color: transparent; + background-image: none; + color: shade($bg_color, 0.6); + } + } + + &.slider, &.slider.vertical { + border: 1px solid mix(shade($bg_color, 0.87), $fg_color, 0.21); border-radius: 0; - background-color: transparent; - background-image: none; - color: shade($bg_color, 0.6); + background-color: mix($bg_color, $fg_color, 0.21); + + &:hover { + border-color: mix(shade($bg_color, 0.87), $fg_color, 0.31); + background-color: mix($bg_color, $fg_color, 0.31); + } + + &:active { + border-color: shade($selected_bg_color, 0.9); + background-color: $selected_bg_color; + } + + &.fine-tune:prelight:active { + border-width: 2px; + border-color: transparent; + } } } - &.slider, &.slider.vertical { - border: 1px solid mix(shade($bg_color, 0.87), $fg_color, 0.21); + .scrollbars-junction, + .scrollbar.trough { + border: none; border-radius: 0; - background-color: mix($bg_color, $fg_color, 0.21); + background-color: $bg_color; + background-image: none; + } - &:hover { - border-color: mix(shade($bg_color, 0.87), $fg_color, 0.31); - background-color: mix($bg_color, $fg_color, 0.31); - } + /* overlay scrollbar */ + OsThumb, OsScrollbar { + color: shade($bg_color, 0.7); - &:active { - border-color: shade($selected_bg_color, 0.9); - background-color: $selected_bg_color; - } + &:selected { background-color: $selected_bg_color; } - &.fine-tune:prelight:active { - border-width: 2px; - border-color: transparent; - } + &:active { background-color: $selected_bg_color; } + + &:insensitive { background-color: shade($bg_color, 0.9); } } } - -.scrollbars-junction, -.scrollbar.trough { - border: none; - border-radius: 0; - background-color: $bg_color; - background-image: none; -} - -/* overlay scrollbar */ -OsThumb, OsScrollbar { - color: shade($bg_color, 0.7); - - &:selected { background-color: $selected_bg_color; } - - &:active { background-color: $selected_bg_color; } - - &:insensitive { background-color: shade($bg_color, 0.9); } -} diff --git a/gtk-3.0/scss/_sidebar.scss b/gtk-3.0/scss/_sidebar.scss index b6658a9..78e1b89 100755 --- a/gtk-3.0/scss/_sidebar.scss +++ b/gtk-3.0/scss/_sidebar.scss @@ -6,69 +6,71 @@ ! Sidebar **********/ -.sidebar { - &, &.view, & .view, & GtkScrolledWindow { - background-color: $bg_color; - color: mix($fg_color, $bg_color, 0.1); +@include exports("sidebar") { + .sidebar { + &, &.view, & .view, & GtkScrolledWindow { + background-color: $bg_color; + color: mix($fg_color, $bg_color, 0.1); - &.separator { - &, &:hover, &:focus { - border-width: 1px; - border-style: solid; - border-color: shade($bg_color, 0.9); - color: shade($bg_color, 0.9); + &.separator { + &, &:hover, &:focus { + border-width: 1px; + border-style: solid; + border-color: shade($bg_color, 0.9); + color: shade($bg_color, 0.9); + } } } - } - row, .view row { - &:selected { - &, &:hover, &:focus { - border: none; - background-image: none; - background-color: $selected_bg_color; - color: $selected_fg_color; + row, .view row { + &: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; - background-image: none; - background-color: shade($bg_color, 0.95); - color: $fg_color; - } - } - - .frame { border-width: 0; } - - GtkAssistant & { - padding: 4px; - border-width: 0 1px 0 0; - border-style: solid; - border-right-color: border_normal($bg_color); - border-radius: 0; - background-color: $bg_color; - color: mix($fg_color, $bg_color, 0.1); - - &:dir(ltr) { border-width: 0 1px 0 0; } - &:dir(rtl) { border-width: 0 0 0 1px; } - - GtkLabel { - padding: $spacing ($spacing * 2); - - &.highlight { background-color: mix($bg_color, $fg_color, 0.80); } + &:prelight { + border: none; + background-image: none; + background-color: shade($bg_color, 0.95); + color: $fg_color; + } } - &.csd .sidebar { border-top-style: none; } + .frame { border-width: 0; } - .highlight { font: bold; } + GtkAssistant & { + padding: 4px; + border-width: 0 1px 0 0; + border-style: solid; + border-right-color: border_normal($bg_color); + border-radius: 0; + background-color: $bg_color; + color: mix($fg_color, $bg_color, 0.1); + + &:dir(ltr) { border-width: 0 1px 0 0; } + &:dir(rtl) { border-width: 0 0 0 1px; } + + GtkLabel { + padding: $spacing ($spacing * 2); + + &.highlight { background-color: mix($bg_color, $fg_color, 0.80); } + } + + &.csd .sidebar { border-top-style: none; } + + .highlight { font: bold; } + } } } @@ -77,42 +79,47 @@ ! Pane separator ****************/ -.pane-separator { - &, &.horizontal { - background-image: linear-gradient(to bottom, - shade($bg_color, 0.8) 0%, - shade($bg_color, 0.8) 20%, - transparent 20%, - transparent 45%, - shade($bg_color, 0.8) 45%, - shade($bg_color, 0.8) 55%, - transparent 55%, - transparent 80%, - shade($bg_color, 0.8) 80%, - shade($bg_color, 0.8) - ); +@include exports("paneseparator") { + .pane-separator { + background-color: $bg_color; + color: transparent; - background-size: 4px 10px; - background-repeat: no-repeat; - background-position: center center; - } + &, &.horizontal { + background-image: linear-gradient(to bottom, + shade($bg_color, 0.8) 0%, + shade($bg_color, 0.8) 20%, + transparent 20%, + transparent 45%, + shade($bg_color, 0.8) 45%, + shade($bg_color, 0.8) 55%, + transparent 55%, + transparent 80%, + shade($bg_color, 0.8) 80%, + shade($bg_color, 0.8) + ); - &.vertical { - background-image: linear-gradient(to right, - shade($bg_color, 0.8) 0%, - shade($bg_color, 0.8) 20%, - transparent 20%, - transparent 45%, - shade($bg_color, 0.8) 45%, - shade($bg_color, 0.8) 55%, - transparent 55%, - transparent 80%, - shade($bg_color, 0.8) 80%, - shade($bg_color, 0.8) - ); + background-size: 4px 10px; + background-repeat: no-repeat; + background-position: center center; + } - background-size: 10px 4px; - background-repeat: no-repeat; - background-position: center center; + &.vertical { + background-image: linear-gradient(to right, + shade($bg_color, 0.8) 0%, + shade($bg_color, 0.8) 20%, + transparent 20%, + transparent 45%, + shade($bg_color, 0.8) 45%, + shade($bg_color, 0.8) 55%, + transparent 55%, + transparent 80%, + shade($bg_color, 0.8) 80%, + shade($bg_color, 0.8) + ); + + background-size: 10px 4px; + background-repeat: no-repeat; + background-position: center center; + } } } diff --git a/gtk-3.0/scss/_spinner.scss b/gtk-3.0/scss/_spinner.scss index f8b00e7..ee50103 100644 --- a/gtk-3.0/scss/_spinner.scss +++ b/gtk-3.0/scss/_spinner.scss @@ -6,21 +6,23 @@ ! Spinner animation ********************/ -@keyframes spin { - to { -gtk-icon-transform: rotate(1turn); } -} +@include exports("spinner") { + @keyframes spin { + to { -gtk-icon-transform: rotate(1turn); } + } -.spinner { - background-image: none; - background-color: $selected_bg_color; - opacity: 0; // non spinning spinner makes no sense + .spinner { + background-image: none; + background-color: $selected_bg_color; + opacity: 0; // non spinning spinner makes no sense - -gtk-icon-source: -gtk-icontheme("process-working-symbolic"); + -gtk-icon-source: -gtk-icontheme("process-working-symbolic"); - &:active { - opacity: 1; - animation: spin 1s linear infinite; + &:active { + opacity: 1; + animation: spin 1s linear infinite; - &:insensitive { opacity: 0.5; } + &:insensitive { opacity: 0.5; } + } } } diff --git a/gtk-3.0/scss/_toggle.scss b/gtk-3.0/scss/_toggle.scss index 43e0fc1..4e0199a 100755 --- a/gtk-3.0/scss/_toggle.scss +++ b/gtk-3.0/scss/_toggle.scss @@ -6,11 +6,6 @@ ! Check and Radio items ************************/ -* { - -GtkCheckButton-indicator-size: 16; - -GtkCheckMenuItem-indicator-size: 14; -} - @mixin toggle($type) { background-image: none; @@ -53,14 +48,21 @@ } } -.radio { @include toggle("radio"); } +@include exports("checkradio") { + * { + -GtkCheckButton-indicator-size: 16; + -GtkCheckMenuItem-indicator-size: 14; + } -.check { @include toggle("checkbox"); } + .radio { @include toggle("radio"); } -GtkIconView.content-view.cell.check { - -gtk-icon-source: url("assets/grid-selection-unchecked.svg"); + .check { @include toggle("checkbox"); } - &:active { -gtk-icon-source: url("assets/grid-selection-checked.svg"); } + GtkIconView.content-view.cell.check { + -gtk-icon-source: url("assets/grid-selection-unchecked.svg"); + + &:active { -gtk-icon-source: url("assets/grid-selection-checked.svg"); } + } } @@ -68,37 +70,39 @@ GtkIconView.content-view.cell.check { ! Switch *********/ -GtkSwitch { - padding: 0; - border-radius: $roundness; - font: bold condensed; - outline-offset: -4px; +@include exports("switch") { + GtkSwitch { + padding: 0; + border-radius: $roundness; + font: bold condensed; + outline-offset: -4px; - &.slider { - border: 1px solid shade($bg_color, 0.8); - background-color: shade($bg_color, 1.08); + &.slider { + border: 1px solid shade($bg_color, 0.8); + background-color: shade($bg_color, 1.08); - &:insensitive { - border-color: shade($bg_color, 0.85); - background-color: shade($bg_color, 0.9); - } - } - - &.trough { - border-color: shade($bg_color, 0.8); - background-color: shade($bg_color, 0.95); - color: $fg_color; - - &:active { - border-color: shade($selected_bg_color, 0.9); - background-color: $selected_bg_color; - color: $selected_fg_color; + &:insensitive { + border-color: shade($bg_color, 0.85); + background-color: shade($bg_color, 0.9); + } } - &:insensitive { - border-color: shade($bg_color, 0.85); - background-color: shade($bg_color, 0.9); - color: mix($fg_color, $bg_color, 0.5); + &.trough { + border-color: shade($bg_color, 0.8); + background-color: shade($bg_color, 0.95); + color: $fg_color; + + &:active { + border-color: shade($selected_bg_color, 0.9); + background-color: $selected_bg_color; + color: $selected_fg_color; + } + + &:insensitive { + border-color: shade($bg_color, 0.85); + background-color: shade($bg_color, 0.9); + color: mix($fg_color, $bg_color, 0.5); + } } } } diff --git a/gtk-3.0/scss/_toolbar.scss b/gtk-3.0/scss/_toolbar.scss index 4721a6d..79ca6c1 100755 --- a/gtk-3.0/scss/_toolbar.scss +++ b/gtk-3.0/scss/_toolbar.scss @@ -49,67 +49,69 @@ .menubar { -GtkToolbar-button-relief: normal; } } -.toolbar { - @include toolbar($bg_color, $fg_color); +@include exports("toolbar") { + .toolbar { + @include toolbar($bg_color, $fg_color); - border-style: none; -} + border-style: none; + } -.header-bar { - @include toolbar($titlebar_bg_color, $titlebar_fg_color); + .header-bar { + @include toolbar($titlebar_bg_color, $titlebar_fg_color); - border-width: 0 0 1px 0; - border-style: solid; -} + border-width: 0 0 1px 0; + border-style: solid; + } -.titlebar { - @include linear-gradient($titlebar_bg_color); - - border-radius: $roundness $roundness 0 0; - color: mix($titlebar_fg_color, $titlebar_bg_color, .1); - - &:backdrop { + .titlebar { @include linear-gradient($titlebar_bg_color); - color: mix($titlebar_fg_color, $titlebar_bg_color, .6); - text-shadow: none; - } - - &.default-decoration { - border: none; - box-shadow: none; - } - - .tiled &, .maximized & { border-radius: 0; } - - .title { font: bold; } - - .titlebutton { - padding: $spacing; - border: none; - background-image: none; - background-color: transparent; + border-radius: $roundness $roundness 0 0; color: mix($titlebar_fg_color, $titlebar_bg_color, .1); - box-shadow: none; - - &:hover, &:hover:focus { - background-image: none; - background-color: transparent; - color: $selected_bg_color; - box-shadow: none; - } - - &:active, &:active:hover { - background-image: none; - background-color: transparent; - color: darken($selected_bg_color, 10%); - box-shadow: none; - } &:backdrop { - background: none; + @include linear-gradient($titlebar_bg_color); + color: mix($titlebar_fg_color, $titlebar_bg_color, .6); - icon-shadow: none; + text-shadow: none; + } + + &.default-decoration { + border: none; + box-shadow: none; + } + + .tiled &, .maximized & { border-radius: 0; } + + .title { font: bold; } + + .titlebutton { + padding: $spacing; + border: none; + background-image: none; + background-color: transparent; + color: mix($titlebar_fg_color, $titlebar_bg_color, .1); + box-shadow: none; + + &:hover, &:hover:focus { + background-image: none; + background-color: transparent; + color: $selected_bg_color; + box-shadow: none; + } + + &:active, &:active:hover { + background-image: none; + background-color: transparent; + color: darken($selected_bg_color, 10%); + box-shadow: none; + } + + &:backdrop { + background: none; + color: mix($titlebar_fg_color, $titlebar_bg_color, .6); + icon-shadow: none; + } } } } diff --git a/gtk-3.0/scss/_view.scss b/gtk-3.0/scss/_view.scss index e7c0155..cf5e5d9 100644 --- a/gtk-3.0/scss/_view.scss +++ b/gtk-3.0/scss/_view.scss @@ -6,125 +6,128 @@ ! Generic views ****************/ -.view { - color: $text_color; - background-color: $base_color; - - &:insensitive, &:insensitive:insensitive { - background-color: shade($base_color, 0.9); - color: mix($text_color, $base_color, 0.5); - } - - &:selected, &:selected:focus { @extend %selected_items; } -} - -.cell { - border-width: 0; - border-radius: 0; - - &:selected, &:selected:focus { - background-color: $selected_bg_color; - color: $selected_fg_color; - } -} - -row { - &:selected { - &, &:hover, &:focus { - -GtkWidget-focus-padding: 1; - -GtkWidget-focus-line-width: 0; - - border: none; - background-color: $selected_bg_color; - background-image: none; - color: $selected_fg_color; - } - } -} - -.content-view { - &.view { +@include exports("view") { + .view { + color: $text_color; background-color: $base_color; - &:prelight { background-color: alpha($selected_bg_color, 0.6); } - - &:selected, &:active { background-color: $selected_bg_color; } - - &:insensitive { background-color: shade($base_color, 0.9); } - - &.check { - &, &:active, &:prelight, &:insensitive, &:selected { background-color: transparent; } + &:insensitive, &:insensitive:insensitive { + background-color: shade($base_color, 0.9); + color: mix($text_color, $base_color, 0.5); } + + &:selected, &:selected:focus { @extend %selected_items; } } - .subtitle { - font: smaller; - padding: 0 12px; - } -} + .cell { + border-width: 0; + border-radius: 0; -GtkIconView { - &.content-view.check { @extend .content-view.check; } - - &.view.cell { &:selected, &:selected:focus { - border: none; - border-radius: 2px; - background-image: none; background-color: $selected_bg_color; color: $selected_fg_color; } } -} -.dim-label { - &, &.view { color: alpha(currentColor, 0.5); } -} + row { + &:selected { + &, &:hover, &:focus { + -GtkWidget-focus-padding: 1; + -GtkWidget-focus-line-width: 0; -.dnd { border: 1px solid $selected_bg_color; } + border: none; + background-color: $selected_bg_color; + background-image: none; + color: $selected_fg_color; + } + } + } -.grip { background-color: transparent; } + .content-view { + &.view { + background-color: $base_color; -.arrow { color: alpha(currentColor, 0.7); } + &:prelight { background-color: alpha($selected_bg_color, 0.6); } -.rubberband { - &, &.view, &.content-view.view { - border: 1px solid $selected_bg_color; - border-radius: 0; - background-color: alpha($selected_bg_color, 0.3); + &:selected, &:active { background-color: $selected_bg_color; } + + &:insensitive { background-color: shade($base_color, 0.9); } + + &.check { + &, &:active, &:prelight, &:insensitive, &:selected { background-color: transparent; } + } + } + + .subtitle { + font: smaller; + padding: 0 12px; + } + } + + GtkIconView { + &.content-view.check { @extend .content-view.check; } + + &.view.cell { + &:selected, &:selected:focus { + border: none; + border-radius: 2px; + background-image: none; + background-color: $selected_bg_color; + color: $selected_fg_color; + } + } + } + + .dim-label { + &, &.view { color: alpha(currentColor, 0.5); } + } + + .dnd { border: 1px solid $selected_bg_color; } + + .grip { background-color: transparent; } + + .arrow { color: alpha(currentColor, 0.7); } + + .rubberband { + &, &.view, &.content-view.view { + border: 1px solid $selected_bg_color; + border-radius: 0; + background-color: alpha($selected_bg_color, 0.3); + } + } + + /* used by GtkScrolledWindow, shown when content is touch-dragged past boundaries. */ + .overshoot { background-color: alpha($selected_bg_color, 0.3); } + + GdMainIconView.content-view { -GdMainIconView-icon-size: 40; } + + /* this will get overridden by .view, needed by gedit line numbers */ + GtkTextView { background-color: mix($bg_color, $base_color, 0.50); } + + GtkDrawingArea, GtkHTML { + @extend .view; + + &:insensitive { background-color: shade($base_color, 0.9); } } } -/* used by GtkScrolledWindow, shown when content is touch-dragged past boundaries. */ -.overshoot { background-color: alpha($selected_bg_color, 0.3); } - -GdMainIconView.content-view { -GdMainIconView-icon-size: 40; } - -/* this will get overridden by .view, needed by gedit line numbers */ -GtkTextView { background-color: mix($bg_color, $base_color, 0.50); } - -GtkDrawingArea, GtkHTML { - @extend .view; - - &:insensitive { background-color: shade($base_color, 0.9); } -} - - /************ ! Treeview * *************/ -GtkTreeView { - -GtkTreeView-vertical-separator: 0; +@include exports("treeview") { + GtkTreeView { + -GtkTreeView-vertical-separator: 0; - outline-offset: -1px; + outline-offset: -1px; - &.dnd { border: 1px solid $selected_bg_color; } + &.dnd { border: 1px solid $selected_bg_color; } - .entry { - border-radius: 0; - background-color: $base_color; - background-image: none; + .entry { + border-radius: 0; + background-color: $base_color; + background-image: none; + } } } @@ -133,28 +136,30 @@ GtkTreeView { ! Column view headers **********************/ -column-header { - .button { - &, &:active { - border-width: 0 1px 1px 0; - border-radius: 0; - } +@include exports("columnheader") { + column-header { + .button { + &, &:active { + border-width: 0 1px 1px 0; + border-radius: 0; + } - &, &:active, &:focus, &:active:focus { - border-color: shade($base_color, 0.9); - border-bottom-color: shade($base_color, 0.8); - background-color: shade($base_color, 0.97); - background-image: none; - } + &, &:active, &:focus, &:active:focus { + border-color: shade($base_color, 0.9); + border-bottom-color: shade($base_color, 0.8); + background-color: shade($base_color, 0.97); + background-image: none; + } - &:hover, &:active:hover, &:hover:focus, &:active:hover:focus { - border-color: shade($base_color, 0.9); - border-bottom-color: shade($base_color, 0.8); - background-color: shade($base_color, 0.99); - background-image: none; - } + &:hover, &:active:hover, &:hover:focus, &:active:hover:focus { + border-color: shade($base_color, 0.9); + border-bottom-color: shade($base_color, 0.8); + background-color: shade($base_color, 0.99); + background-image: none; + } - &:last-child .button { border-width: 0 0 1px 0; } + &:last-child .button { border-width: 0 0 1px 0; } + } } } @@ -163,13 +168,15 @@ column-header { ! Frames * ***********/ -.frame { border: none; } +@include exports("frame") { + .frame { border: none; } -GtkScrolledWindow { - &.frame { border: 1px solid border_normal($bg_color); } + GtkScrolledWindow { + &.frame { border: 1px solid border_normal($bg_color); } - /* avoid double borders when a viewport is packed into a GtkScrolledWindow */ - GtkViewport.frame { border: none; } + /* avoid double borders when a viewport is packed into a GtkScrolledWindow */ + GtkViewport.frame { border: none; } + } } @@ -177,23 +184,25 @@ GtkScrolledWindow { ! Expanders * **************/ -GtkExpander { - padding: $spacing; - outline-offset: 1px; -} - -.expander { - color: alpha(currentColor, 0.7); - border: alpha(currentColor, 0.7); - - &:hover { - color: alpha(currentColor, 0.8); - border-color: alpha(currentColor, 0.8); +@include exports("expander") { + GtkExpander { + padding: $spacing; + outline-offset: 1px; } - &:active { - color: alpha(currentColor, 0.9); - border-color: alpha(currentColor, 0.9); + .expander { + color: alpha(currentColor, 0.7); + border: alpha(currentColor, 0.7); + + &:hover { + color: alpha(currentColor, 0.8); + border-color: alpha(currentColor, 0.8); + } + + &:active { + color: alpha(currentColor, 0.9); + border-color: alpha(currentColor, 0.9); + } } } @@ -202,22 +211,14 @@ GtkExpander { ! Symbolic images * ********************/ -.image { - color: alpha(currentColor, 0.5); +@include exports("symbolicimage") { + .image { + color: alpha(currentColor, 0.5); - &:hover { color: alpha(currentColor, 0.9); } + &:hover { color: alpha(currentColor, 0.9); } - &:selected, &:selected:hover { color: $selected_fg_color; } -} - - -/****************** - ! Pane separator * -*******************/ - -.pane-separator { - background-color: $bg_color; - color: transparent; + &:selected, &:selected:hover { color: $selected_fg_color; } + } } @@ -225,43 +226,45 @@ GtkExpander { ! Floating bar * *****************/ -.floating-bar { - border: 1px solid border_normal($bg_color); - border-radius: $roundness; - background-color: $bg_color; - background-image: none; - color: $fg_color; - - &.top { - border-top-width: 0; - border-top-right-radius: 0; - border-top-left-radius: 0; - } - - &.right { - border-right-width: 0; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - - &.bottom { - border-bottom-width: 0; - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; - } - - &.left { - border-left-width: 0; - border-bottom-left-radius: 0; - border-top-left-radius: 0; - } - - .button { - -GtkButton-image-spacing: 0; - -GtkButton-inner-border: 0; - - border: none; - background-color: transparent; +@include exports("floatingbar") { + .floating-bar { + border: 1px solid border_normal($bg_color); + border-radius: $roundness; + background-color: $bg_color; background-image: none; + color: $fg_color; + + &.top { + border-top-width: 0; + border-top-right-radius: 0; + border-top-left-radius: 0; + } + + &.right { + border-right-width: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + &.bottom { + border-bottom-width: 0; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + } + + &.left { + border-left-width: 0; + border-bottom-left-radius: 0; + border-top-left-radius: 0; + } + + .button { + -GtkButton-image-spacing: 0; + -GtkButton-inner-border: 0; + + border: none; + background-color: transparent; + background-image: none; + } } } diff --git a/gtk-3.0/scss/_window.scss b/gtk-3.0/scss/_window.scss index fc31783..0be7a63 100755 --- a/gtk-3.0/scss/_window.scss +++ b/gtk-3.0/scss/_window.scss @@ -6,38 +6,40 @@ ! Window frame ***************/ -.window-frame { - border: none; - border-radius: $roundness $roundness 0 0; - box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23), - 0 0 0 1px mix(shade($titlebar_bg_color, 0.7), $titlebar_fg_color, 0.21); +@include exports("window") { + .window-frame { + border: none; + border-radius: $roundness $roundness 0 0; + box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23), + 0 0 0 1px mix(shade($titlebar_bg_color, 0.7), $titlebar_fg_color, 0.21); - /* this is used for the resize cursor area */ - margin: $spacing * 3; + /* this is used for the resize cursor area */ + margin: $spacing * 3; - &:backdrop { - box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24), - 0 0 0 1px mix(shade($titlebar_bg_color, 0.7), $titlebar_fg_color, 0.12); - } - - &.tiled { border-radius: 0; } - - &.csd { - &.popup { - border-radius: 0; - box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23), - 0 0 0 1px mix(shade($titlebar_bg_color, 0.7), $titlebar_fg_color, 0.21); + &:backdrop { + box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24), + 0 0 0 1px mix(shade($titlebar_bg_color, 0.7), $titlebar_fg_color, 0.12); } - &.tooltip { - border-radius: $roundness; - box-shadow: none; - } + &.tiled { border-radius: 0; } - &.message-dialog { - border-radius: $roundness; - box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23), - 0 0 0 1px mix(shade($titlebar_bg_color, 0.7), $titlebar_fg_color, 0.21); + &.csd { + &.popup { + border-radius: 0; + box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23), + 0 0 0 1px mix(shade($titlebar_bg_color, 0.7), $titlebar_fg_color, 0.21); + } + + &.tooltip { + border-radius: $roundness; + box-shadow: none; + } + + &.message-dialog { + border-radius: $roundness; + box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23), + 0 0 0 1px mix(shade($titlebar_bg_color, 0.7), $titlebar_fg_color, 0.21); + } } } } diff --git a/gtk-3.0/scss/widgets.scss b/gtk-3.0/scss/widgets.scss index c74514b..81844c9 100755 --- a/gtk-3.0/scss/widgets.scss +++ b/gtk-3.0/scss/widgets.scss @@ -17,78 +17,6 @@ @import "notebook"; @import "scrollbar"; - -/************* -* scrollbar * -*************/ -.scrollbar { - border-width: 1px; - border-style: solid; - padding: 0; -} - -.scrollbars-junction, -.scrollbar.trough { - border-width: 0; - border-radius: 0; - background-color: $bg_color; - background-image: none; -} - -.scrollbar.button, -.scrollbar.button:active, -.scrollbar.button:active:hover { - border-width: 0; - border-radius: 0; - background-color: transparent; - background-image: none; - color: shade($bg_color, 0.6); -} - -.scrollbar.slider { - border-width: 1px; - border-color: mix(shade($bg_color, 0.87), $fg_color, 0.21); - border-radius: 0; - background-color: mix($bg_color, $fg_color, 0.21); -} - -.scrollbar.slider:hover, -.scrollbar.slider.vertical:hover { - border-color: mix(shade($bg_color, 0.87), $fg_color, 0.31); - background-color: mix($bg_color, $fg_color, 0.31); -} - -.scrollbar.slider:active, -.scrollbar.slider.vertical:active { - border-color: shade($selected_bg_color, 0.9); - background-color: $selected_bg_color; -} - -.scrollbar.slider.fine-tune:prelight:active { - border-width: 2px; - border-color: transparent; -} - -/* overlay scrollbar */ -OsThumb { - color: shade($bg_color, 0.7); -} - -OsThumb:selected, -OsScrollbar:selected { - background-color: $selected_bg_color; -} - -OsThumb:active, -OsScrollbar:active { - background-color: $selected_bg_color; -} - -OsThumb:insensitive, -OsScrollbar:insensitive { - background-color: shade($bg_color, 0.9); -} - /************* * separator * *************/