gtk3/widgets/_checkboxes.scss

0001 @charset "UTF-8";
0002
0003 /*************************
0004  * Check and Radio items *
0005  *************************/
0006
0007 checkbutton.text-button,
0008 radiobutton.text-button {
0009         // this is for a nice focus on check and radios text
0010         padding: 2px 0;
0011         outline-offset: 0;
0012
0013         label:not(:only-child) {
0014                 &:first-child {
0015                         margin-left: 4px;
0016                 }
0017                 &:last-child {
0018                         margin-right: 4px;
0019                 }
0020         }
0021 }
0022
0023 check,
0024 radio {
0025         transition: 0.1s;
0026         margin: 0 4px;
0027
0028         &:only-child {
0029                 margin: 0;
0030         }
0031
0032         min-height: 14px;
0033         min-width: 14px;
0034         //border: none;
0035         animation-timing-function: $ease-out-quad;
0036         background-color: gtk("@theme_base_color");
0037         border: 1px solid gtkalpha(
0038                 gtk("@theme_button_foreground_normal"),
0039                 0.33
0040         );
0041
0042         -gtk-icon-shadow: none;
0043         -gtk-icon-palette: fg gtk("@theme_fg_color");
0044
0045         &:hover {
0046                 border: 1px solid gtk("@theme_button_decoration_hover");
0047         }
0048         &:disabled {
0049                 background-color: gtk("@insensitive_base_color");
0050
0051                 border-color: gtkalpha(
0052                         gtk("@insensitive_base_fg_color"),
0053                         0.33
0054                 );
0055         }
0056
0057         &:active {
0058                 background: shade(gtk("@theme_base_color"), 0.9)
0059         }
0060
0061         &:focus {
0062                 border-color: gtk("@theme_button_decoration_focus");
0063         }
0064
0065         &:indeterminate,
0066         &:checked {
0067                 border-color: gtk("@theme_button_decoration_hover");
0068                 background-color: gtkalpha(
0069                         gtk("@theme_button_decoration_hover"),
0070                         0.33
0071                 );
0072
0073                 &:backdrop {
0074                         background-color: gtkalpha(
0075                                 gtk("@theme_unfocused_selected_bg_color"),
0076                                 0.33
0077                         );
0078
0079                         border-color: gtk("@theme_unfocused_selected_bg_color");
0080                 }
0081
0082                 &:disabled {
0083                         background-color: gtkalpha(
0084                                 gtk("@insensitive_bg_color"),
0085                                 0.33
0086                         );
0087
0088                         border-color: gtk("@insensitive_bg_color");
0089                         color: gtk("@insensitive_fg_color");
0090                         -gtk-icon-effect: none;
0091                 }
0092         }
0093
0094         &:indeterminate {
0095                 -gtk-icon-source: -gtk-recolor(url("../assets/dash-symbolic.svg"));
0096         }
0097
0098         menu menuitem & {
0099                 margin: 0; // this is a workaround for a menu check/radio size allocation issue
0100                 min-height: 14px;
0101                 min-width: 14px;
0102                 background-color: transparent;
0103                 box-shadow: none;
0104                 -gtk-icon-shadow: none;
0105                 animation: none;
0106         }
0107 }
0108
0109 check{
0110         border-radius: $r;
0111         &:checked {
0112                 -gtk-icon-source: -gtk-recolor(url("../assets/checkmark-symbolic.svg"));
0113         }
0114 }
0115 radio {
0116    border-radius: 50%;
0117    &:checked {
0118         -gtk-icon-source: -gtk-recolor(url("../assets/bullet-symbolic.svg"));
0119    }
0120 }
0121
0122 radio:not(:indeterminate):not(:checked):active:not(:backdrop) { -gtk-icon-transform: scale(0); }
0123
0124 check:not(:indeterminate):not(:checked):active:not(:backdrop) { -gtk-icon-transform: translate(-4px, 3px) scale(0) }
0125
0126 radio,
0127 check {
0128   &:active { -gtk-icon-transform: scale(0, 1); }
0129
0130   &:checked:not(:backdrop), &:indeterminate:not(:backdrop) {
0131     -gtk-icon-transform: unset;
0132   }
0133 }