Changeset View
Changeset View
Standalone View
Standalone View
src/gtk3/widgets/_checkboxes.scss
| 1 | @charset "UTF-8"; | 1 | @charset "UTF-8"; | ||
|---|---|---|---|---|---|
| 2 | 2 | | |||
| 3 | /************************* | 3 | /************************* | ||
| 4 | * Check and Radio items * | 4 | * Check and Radio items * | ||
| 5 | *************************/ | 5 | *************************/ | ||
| 6 | @each $s,$as in ('','-unchecked'), | | |||
| 7 | (':hover', '-unchecked-hover'), | | |||
| 8 | (':active', '-unchecked-active'), | | |||
| 9 | (':backdrop', '-unchecked-backdrop'), | | |||
| 10 | (':checked', '-checked-active'), | | |||
| 11 | (':checked:hover', '-checked-hover'), | | |||
| 12 | (':checked:active', '-checked-active'), | | |||
| 13 | (':backdrop:checked', '-checked-backdrop') { | | |||
| 14 | .view.content-view.check#{$s}:not(list) { | | |||
| 15 | -gtk-icon-shadow: none; | | |||
| 16 | -gtk-icon-source: -gtk-scaled(url("../assets/check-selectionmode#{$as}.png"), url("../assets/check-selectionmode#{$as}@2.png")); | | |||
| 17 | background-color: transparent; | | |||
| 18 | } | | |||
| 19 | } | | |||
| 20 | 6 | | |||
| 21 | checkbutton.text-button, radiobutton.text-button { | 7 | checkbutton.text-button, radiobutton.text-button { | ||
| 22 | // this is for a nice focus on check and radios text | 8 | // this is for a nice focus on check and radios text | ||
| 23 | padding: 2px 0; | 9 | padding: 2px 0; | ||
| 24 | outline-offset: 0; | 10 | outline-offset: 0; | ||
| 25 | 11 | | |||
| 26 | label:not(:only-child) { | 12 | label:not(:only-child) { | ||
| 27 | &:first-child { margin-left: 4px; } | 13 | &:first-child { margin-left: 4px; } | ||
| 28 | &:last-child { margin-right: 4px; } | 14 | &:last-child { margin-right: 4px; } | ||
| 29 | } | 15 | } | ||
| 30 | &:active check, &:active radio { | 16 | &:active check, &:active radio { | ||
| 31 | -gtk-icon-transform: translate(1px,1px); | 17 | -gtk-icon-transform: translate(1px,1px); | ||
| 32 | } | 18 | } | ||
| 33 | } | 19 | } | ||
| 34 | 20 | | |||
| 35 | @each $a in ('check','radio') { | 21 | check, radio { | ||
| 36 | | ||||
| 37 | #{$a} { | | |||
| 38 | margin: 0 4px; | 22 | margin: 0 4px; | ||
| 39 | 23 | | |||
| 40 | &:only-child { margin: 0; } | 24 | &:only-child { margin: 0; } | ||
| 41 | 25 | | |||
| 42 | min-height: 18px; | 26 | min-height: 18px; | ||
| 43 | min-width: 18px; | 27 | min-width: 18px; | ||
| 44 | //border: none; | 28 | //border: none; | ||
| 45 | animation: none; | 29 | animation: none; | ||
| 46 | background-color: transparent; | 30 | background-color: transparent; | ||
| 47 | -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-unchecked.png"), url("../assets/#{$a}-unchecked@2.png")); | 31 | -gtk-icon-palette: error gtk("@theme_button_decoration_focus"), success gtk("@borders"), warning gtk("@theme_button_background_normal"); | ||
| 32 | -gtk-icon-shadow: 1px 1px rgba(35,38,41,0.2); | ||||
| 48 | 33 | | |||
| 49 | @each $s,$as in ('hover','-hover'), | 34 | &:hover { | ||
| 50 | ('active','-active'), | 35 | -gtk-icon-palette: error gtk("@theme_button_decoration_focus"), success gtk("@theme_button_decoration_focus"), warning gtk("@theme_button_background_normal"); | ||
| 51 | ('disabled','-insensitive'), | | |||
| 52 | ('backdrop','-backdrop'), | | |||
| 53 | ('backdrop:disabled','-backdrop-insensitive') { | | |||
| 54 | &:#{$s} { -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-unchecked#{$as}.png"), url("../assets/#{$a}-unchecked#{$as}@2.png")); } | | |||
| 55 | &:checked { | | |||
| 56 | -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-checked-active.png"), url("../assets/#{$a}-checked-active@2.png")); | | |||
| 57 | &:#{$s} { -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-checked#{$as}.png"), url("../assets/#{$a}-checked#{$as}@2.png")); } | | |||
| 58 | } | | |||
| 59 | &:indeterminate { | | |||
| 60 | -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-mixed-active.png"), url("../assets/#{$a}-mixed-active@2.png")); | | |||
| 61 | &:#{$s} { -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-mixed#{$as}.png"), url("../assets/#{$a}-mixed#{$as}@2.png")); } | | |||
| 62 | } | 36 | } | ||
| 37 | &:disabled { | ||||
| 38 | -gtk-icon-palette: error gtk("@theme_button_decoration_focus_insensitive"), success gtk("@insensitive_borders"), warning gtk("@theme_button_background_insensitive"); | ||||
| 63 | } | 39 | } | ||
| 64 | 40 | | |||
| 65 | menu menuitem & { | 41 | menu menuitem & { | ||
| 66 | margin: 0; // this is a workaround for a menu check/radio size allocation issue | 42 | margin: 0; // this is a workaround for a menu check/radio size allocation issue | ||
| 67 | min-height: 18px; | 43 | min-height: 18px; | ||
| 68 | min-width: 18px; | 44 | min-width: 18px; | ||
| 69 | background-color: transparent; | 45 | background-color: transparent; | ||
| 70 | box-shadow: none; | 46 | box-shadow: none; | ||
| 71 | -gtk-icon-shadow: none; | 47 | -gtk-icon-shadow: none; | ||
| 72 | animation: none; | 48 | animation: none; | ||
| 73 | &:hover { | | |||
| 74 | -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-unchecked.png"), url("../assets/#{$a}-unchecked@2.png")); | | |||
| 75 | } | 49 | } | ||
| 76 | &:checked:hover { | | |||
| 77 | -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-checked-active.png"), url("../assets/#{$a}-checked-active@2.png")); | | |||
| 78 | } | 50 | } | ||
| 79 | &:indeterminate:hover { | 51 | @each $type in ('check', 'radio') { | ||
| 80 | -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-mixed-active.png"), url("../assets/#{$a}-mixed-active@2.png")); | 52 | #{$type} { | ||
| 53 | -gtk-icon-source: -gtk-recolor(url("../assets/breeze-#{$type}-unchecked-symbolic.svg")); | ||||
| 54 | @each $state in ('checked', 'indeterminate') { | ||||
| 55 | &:#{$state} { | ||||
| 56 | -gtk-icon-source: -gtk-recolor(url("../assets/breeze-#{$type}-#{$state}-symbolic.svg")); | ||||
| 81 | } | 57 | } | ||
| 82 | } | 58 | } | ||
| 83 | } | 59 | } | ||
| 84 | } | 60 | } | ||
| 85 | No newline at end of file | | |||