diff --git a/src/gtk3/widgets/_checkboxes.scss b/src/gtk3/widgets/_checkboxes.scss index b9fa4bd..3f398ae 100644 --- a/src/gtk3/widgets/_checkboxes.scss +++ b/src/gtk3/widgets/_checkboxes.scss @@ -1,60 +1,84 @@ @charset "UTF-8"; /************************* * Check and Radio items * *************************/ +@each $s,$as in ('','-unchecked'), + (':hover', '-unchecked-hover'), + (':active', '-unchecked-active'), + (':backdrop', '-unchecked-backdrop'), + (':checked', '-checked-active'), + (':checked:hover', '-checked-hover'), + (':checked:active', '-checked-active'), + (':backdrop:checked', '-checked-backdrop') { + .view.content-view.check#{$s}:not(list) { + -gtk-icon-shadow: none; + -gtk-icon-source: -gtk-scaled(url("../assets/check-selectionmode#{$as}.png"), url("../assets/check-selectionmode#{$as}@2.png")); + background-color: transparent; + } +} checkbutton.text-button, radiobutton.text-button { // this is for a nice focus on check and radios text padding: 2px 0; outline-offset: 0; label:not(:only-child) { &:first-child { margin-left: 4px; } &:last-child { margin-right: 4px; } } &:active check, &:active radio { -gtk-icon-transform: translate(1px,1px); } } -check, radio { - margin: 0 4px; +@each $a in ('check','radio') { - &:only-child { margin: 0; } + #{$a} { + margin: 0 4px; - min-height: 18px; - min-width: 18px; - //border: none; - animation: none; - background-color: transparent; - -gtk-icon-palette: error gtk("@theme_button_decoration_focus"), success gtk("@borders"), warning gtk("@theme_button_background_normal"); - -gtk-icon-shadow: 1px 1px rgba(35,38,41,0.2); + &:only-child { margin: 0; } - &:hover { - -gtk-icon-palette: error gtk("@theme_button_decoration_focus"), success gtk("@theme_button_decoration_focus"), warning gtk("@theme_button_background_normal"); - } - &:disabled { - -gtk-icon-palette: error gtk("@theme_button_decoration_focus_insensitive"), success gtk("@insensitive_borders"), warning gtk("@theme_button_background_insensitive"); - } + min-height: 18px; + min-width: 18px; + //border: none; + animation: none; + background-color: transparent; + -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-unchecked.png"), url("../assets/#{$a}-unchecked@2.png")); - menu menuitem & { - margin: 0; // this is a workaround for a menu check/radio size allocation issue - min-height: 18px; - min-width: 18px; - background-color: transparent; - box-shadow: none; - -gtk-icon-shadow: none; - animation: none; - } -} -@each $type in ('check', 'radio') { - #{$type} { - -gtk-icon-source: -gtk-recolor(url("../assets/breeze-#{$type}-unchecked-symbolic.svg")); - @each $state in ('checked', 'indeterminate') { - &:#{$state} { - -gtk-icon-source: -gtk-recolor(url("../assets/breeze-#{$type}-#{$state}-symbolic.svg")); - } + @each $s,$as in ('hover','-hover'), + ('active','-active'), + ('disabled','-insensitive'), + ('backdrop','-backdrop'), + ('backdrop:disabled','-backdrop-insensitive') { + &:#{$s} { -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-unchecked#{$as}.png"), url("../assets/#{$a}-unchecked#{$as}@2.png")); } + &:checked { + -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-checked-active.png"), url("../assets/#{$a}-checked-active@2.png")); + &:#{$s} { -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-checked#{$as}.png"), url("../assets/#{$a}-checked#{$as}@2.png")); } + } + &:indeterminate { + -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-mixed-active.png"), url("../assets/#{$a}-mixed-active@2.png")); + &:#{$s} { -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-mixed#{$as}.png"), url("../assets/#{$a}-mixed#{$as}@2.png")); } } } -} + + menu menuitem & { + margin: 0; // this is a workaround for a menu check/radio size allocation issue + min-height: 18px; + min-width: 18px; + background-color: transparent; + box-shadow: none; + -gtk-icon-shadow: none; + animation: none; + &:hover { + -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-unchecked.png"), url("../assets/#{$a}-unchecked@2.png")); + } + &:checked:hover { + -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-checked-active.png"), url("../assets/#{$a}-checked-active@2.png")); + } + &:indeterminate:hover { + -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-mixed-active.png"), url("../assets/#{$a}-mixed-active@2.png")); + } + } + } +} \ No newline at end of file diff --git a/src/gtk3/widgets/_menus.scss b/src/gtk3/widgets/_menus.scss index 7f6c40e..c241eab 100644 --- a/src/gtk3/widgets/_menus.scss +++ b/src/gtk3/widgets/_menus.scss @@ -1,314 +1,301 @@ @charset "UTF-8"; @mixin item-highlight { @if $new-highlight { background-color: gtk("@theme_selected_bg_color"); color: gtk("@theme_button_foreground_active"); border: 1px solid gtk("@theme_button_decoration_focus"); border-radius: 3px; } @else { background-color: gtk("@theme_button_decoration_focus"); color: gtk("@theme_button_foreground_active") } } /********* * Menus * *********/ menubar, .menubar { -GtkWidget-window-dragging: true; padding: 0px; box-shadow: none; border-style: none; background-color: gtk("@theme_bg_color"); &:backdrop { background-color: gtk("@theme_unfocused_bg_color"); } >menuitem { min-height: 16px; padding: 4px 6px; @if $new-highlight { border-bottom: 3px solid transparent; } &:hover { //Seems like it :hover even with keyboard focus @if $new-highlight { background-color: gtkalpha(gtk("@theme_button_decoration_focus"), 0.3); color: gtk("@theme_button_foreground_active"); border-bottom: 3px solid gtk("@theme_button_decoration_focus"); } @else { background-color: gtk("@theme_button_decoration_focus"); color: gtk("@theme_button_foreground_active"); } } &:disabled { color: gtk("@insensitive_fg_color"); box-shadow: none; &:backdrop { background-color: gtk("@theme_unfocused_bg_color"); color: gtk("@insensitive_unfocused_fg_color"); } } &:backdrop { background-color: gtk("@theme_unfocused_bg_color"); color: gtk("@theme_unfocused_fg_color"); } } } menu, .menu { padding: 0px; background-color: gtk("@theme_bg_color"); border: 0px solid transparent; // FIXME workaround for libreoffice gtk3, should be a border //border: 1px solid $border_color; // adds borders in a non composited env box-shadow: inset 0px 0px 0px 1px gtk("@borders"); border-radius: $r; .csd & { //background-color: transparent; border: 0px solid; border-radius: $r; //box-shadow: 0px 0px 0px 1px $border_color, 2px 2px 2px 1px rgba(0, 0, 0, 0.1); } // axes borders in a composited env separator { color: gtk("@borders"); } menuitem { text-shadow: none; min-height: 16px; min-width: 40px; padding: 4px 4px; @if $new-highlight{ border: 1px solid transparent; margin: 4px; } &:hover { @include item-highlight(); } &:disabled { color: gtk("@insensitive_fg_color"); &:backdrop { color: gtk("@insensitive_unfocused_fg_color"); } } &:backdrop, &:backdrop:hover { color: gtk("@theme_unfocused_fg_color"); background-color: gtk("@theme_unfocused_bg_color"); } // submenu indicators arrow { min-height: 16px; min-width: 16px; &:dir(ltr) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); margin-left: 10px; } &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); margin-right: 10px; } } } // overflow arrows >arrow { @include button(undecorated); min-height: 16px; min-width: 16px; padding: 4px; background-color: transparent; border-radius: 0; &.top { margin-top: -6px; border: none; -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); } &.bottom { margin-bottom: -6px; border: none; -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } &:hover { color: gtk("@theme_button_decoration_hover"); } &:active { color: gtk("@theme_button_decoration_focus");} &:backdrop { background-color: gtk("@theme_unfocused_bg_color"); } &:disabled { color: transparent; background-color: transparent; border-color: transparent ; } } } menuitem { accelerator { color: gtkalpha(currentColor,0.55); } check, radio { min-height: 18px; min-width: 18px; &:dir(ltr) { margin-right: 6px; } &:dir(rtl) { margin-left: 6px; } } &:active check, &:active radio { -gtk-icon-transform: translate(1px,1px); } } /*************** * Popovers * ***************/ /* menu buttons */ modelbutton.flat, .menuitem.button.flat { min-height: 16px; padding: 4px 8px; @extend %undecorated_button; color: gtk("@theme_fg_color"); &:hover { background-color: gtk("@theme_button_decoration_focus"); color: gtk("@theme_button_foreground_active"); } &:selected { background-color: gtk("@theme_button_decoration_focus"); color: gtk("@theme_button_foreground_active"); } &:backdrop, &:backdrop:hover { @extend %undecorated_button; color: gtk("@theme_unfocused_fg_color"); } - check, radio { - -gtk-icon-palette: error gtk("@theme_button_decoration_focus"), success gtk("@borders"), warning gtk("@theme_button_background_normal"); - -gtk-icon-shadow: 1px 1px rgba(35,38,41,0.2); - - &:hover { - -gtk-icon-palette: error gtk("@theme_button_decoration_focus"), success gtk("@theme_button_decoration_focus"), warning gtk("@theme_button_background_normal"); - } - &:disabled { - -gtk-icon-palette: error gtk("@theme_button_decoration_focus_insensitive"), success gtk("@insensitive_borders"), warning gtk("@theme_button_background_insensitive"); - } - } - @each $type in ('check', 'radio') { - #{$type} { - -gtk-icon-source: -gtk-recolor(url("../assets/breeze-#{$type}-unchecked-symbolic.svg")); - @each $state in ('checked', 'indeterminate') { - &:#{$state} { - -gtk-icon-source: -gtk-recolor(url("../assets/breeze-#{$type}-#{$state}-symbolic.svg")); - } - } - } - } + check:hover {-gtk-icon-source: -gtk-scaled(url("../assets/check-unchecked.png"), url("../assets/check-unchecked@2.png"));} + radio:hover {-gtk-icon-source: -gtk-scaled(url("../assets/radio-unchecked.png"), url("../assets/radio-unchecked@2.png"));} + + check:checked:hover {-gtk-icon-source: -gtk-scaled(url("../assets/check-checked-active.png"), url("../assets/check-checked-active@2.png"));} + radio:checked:hover {-gtk-icon-source: -gtk-scaled(url("../assets/radio-checked-active.png"), url("../assets/radio-checked-active@2.png"));} + + check:indeterminate:hover {-gtk-icon-source: -gtk-scaled(url("../assets/check-mixed.png"), url("../assets/check-mixed@2.png"));} + radio:indeterminate:hover {-gtk-icon-source: -gtk-scaled(url("../assets/radio-mixed.png"), url("../assets/radio-mixed@2.png"));} // FIXME: remove the following when the checks/radios rewrite lands check:last-child, radio:last-child { margin-right: 0px; } check:first-child, radio:first-child { margin-left: 0px; } &:active check, &:active radio { -gtk-icon-transform: translate(1px,1px); } } modelbutton.flat arrow { background: none; &:hover { background: none; } &.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } &.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } } popover.background { padding: 0px; border: 1px solid gtk("@borders"); border-radius: 3px; background-color: gtk("@theme_bg_color"); box-shadow: 0 2px 3px transparentize(black, 0.1); &:backdrop { box-shadow: none; } > list, > .view, > toolbar { border-style: none; background-color: transparent; } .csd &, & { &.touch-selection, &.magnifier { @extend %osd; border: 1px solid gtk("@borders"); button { @extend %button }; } &.osd { @extend %osd; } } separator { margin: 3px; } list separator { margin: 0px; } checkbutton, radiobutton { @extend modelbutton.flat; } } // .scale-popup .button, // .scale-popup .button.flat { // +/- buttons on GtkVolumeButton popup // @extend %undecorated_button; // background-color: transparent; // padding: 5px; // color: w_color(text); // &:hover { // @extend %undecorated_button; // color: b_color(hover); // } // &:active { // color: b_color(active); // } // &:insensitive { // color: insensitive(w_color(text)); // } // &:backdrop { // color: backdrop(w_color(text)); // &:insensitive { // color: backdrop(insensitive(w_color(text))); // } // } // } GtkVolumeButton.button { padding: 5px; }