/*********************** ! Check and Radio items ************************/ $suffix: if($variant == "dark", "-dark", ""); @mixin toggle($type) { background-image: none; -gtk-icon-source: url("../assets/#{$type}-unchecked#{$suffix}.png"); &:disabled { -gtk-icon-source: url("../assets/#{$type}-unchecked-insensitive#{$suffix}.png"); } &:checked, &:active { -gtk-icon-source: url("../assets/#{$type}-checked#{$suffix}.png"); &:disabled { -gtk-icon-source: url("../assets/#{$type}-checked-insensitive#{$suffix}.png"); } } &:indeterminate { -gtk-icon-source: url("../assets/#{$type}-mixed#{$suffix}.png"); &:disabled { -gtk-icon-source: url("../assets/#{$type}-mixed-insensitive#{$suffix}.png"); } } &.menuitem { -gtk-icon-source: none; &:disabled { -gtk-icon-source: none; } &:checked, &:active { -gtk-icon-source: url("../assets/menuitem-#{$type}-checked.png"); &:hover { -gtk-icon-source: url("../assets/menuitem-#{$type}-checked-hover.png"); } &:disabled { -gtk-icon-source: url("../assets/menuitem-#{$type}-checked-insensitive.png"); } } &:indeterminate { -gtk-icon-source: url("../assets/menuitem-#{$type}-mixed.png"); &:hover { -gtk-icon-source: url("../assets/menuitem-#{$type}-mixed-hover.png"); } &:disabled { -gtk-icon-source: url("../assets/menuitem-#{$type}-mixed-insensitive.png"); } } } } @include exports("checkradio") { radio { @include toggle("radio"); min-width: 16px; min-height: 16px; } check { @include toggle("checkbox"); min-width: 16px; min-height: 16px; } iconview.content-view.cell.check { -gtk-icon-source: url("assets/grid-selection-unchecked#{$suffix}.png"); &:active { -gtk-icon-source: url("assets/grid-selection-checked#{$suffix}.png"); } } } /******** ! Switch *********/ @include exports("switch") { switch { border-radius: 3px; padding: 5px; border: none; outline: none; transition: all 0.4s linear; transition: background-colot 0.4s linear; min-width: 93px; min-height: 25px; background-color: $base_color; color: $text_color; slider { background-color: mix($text_color, $bg_color, .5); transition: all 0.3s linear; box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1); border-radius: 2px; } &:checked { background-color: $selected_bg_color; background-image: none; border-color: $selected_bg_color; color: $selected_fg_color; slider { background-color: $selected_fg_color; } } &:disabled { background-color: mix($bg_color, $base_color, .5); background-image: none; /*border-color: #ccc;*/ color: mix($text_color, $bg_color, .5); slider { background-color: $bg_color; } } } }