dotfiles

config files for my linux setup
git clone git://edryd.org/dotfiles
Log | Files | Refs | README

_toggle.scss (3438B)

      1 /***********************
      2  ! Check and Radio items
      3 ************************/
      4 
      5 $suffix: if($variant == "dark", "-dark", "");
      6 
      7 @mixin toggle($type) {
      8     background-image: none;
      9 
     10     -gtk-icon-source: url("../assets/#{$type}-unchecked#{$suffix}.png");
     11 
     12     &:insensitive { -gtk-icon-source: url("../assets/#{$type}-unchecked-insensitive#{$suffix}.png"); }
     13 
     14     &:checked, &:active {
     15         -gtk-icon-source: url("../assets/#{$type}-checked#{$suffix}.png");
     16 
     17         &:insensitive { -gtk-icon-source: url("../assets/#{$type}-checked-insensitive#{$suffix}.png"); }
     18     }
     19 
     20     &:inconsistent {
     21         -gtk-icon-source: url("../assets/#{$type}-mixed#{$suffix}.png");
     22 
     23         &:insensitive { -gtk-icon-source: url("../assets/#{$type}-mixed-insensitive#{$suffix}.png"); }
     24     }
     25 
     26     &.menuitem {
     27         -gtk-icon-source: none;
     28 
     29         &:insensitive { -gtk-icon-source: none; }
     30 
     31         &:checked, &:active {
     32             -gtk-icon-source: url("../assets/menuitem-#{$type}-checked.png");
     33 
     34             &:hover { -gtk-icon-source: url("../assets/menuitem-#{$type}-checked-hover.png"); }
     35 
     36             &:insensitive { -gtk-icon-source: url("../assets/menuitem-#{$type}-checked-insensitive.png"); }
     37         }
     38 
     39         &:inconsistent {
     40             -gtk-icon-source: url("../assets/menuitem-#{$type}-mixed.png");
     41 
     42             &:hover { -gtk-icon-source: url("../assets/menuitem-#{$type}-mixed-hover.png"); }
     43 
     44             &:insensitive { -gtk-icon-source: url("../assets/menuitem-#{$type}-mixed-insensitive.png"); }
     45         }
     46     }
     47 }
     48 
     49 @include exports("checkradio") {
     50     * {
     51         -GtkCheckButton-indicator-size: 16;
     52         -GtkCheckMenuItem-indicator-size: 16;
     53     }
     54 
     55     .radio { @include toggle("radio"); }
     56 
     57     .check { @include toggle("checkbox"); }
     58 
     59     GtkIconView.content-view.cell.check {
     60         -gtk-icon-source: url("assets/grid-selection-unchecked#{$suffix}.png");
     61 
     62         &:active { -gtk-icon-source: url("assets/grid-selection-checked#{$suffix}.png"); }
     63     }
     64 }
     65 
     66 
     67 /********
     68  ! Switch
     69 *********/
     70 
     71 @include exports("switch") {
     72     GtkSwitch {
     73         padding: 0;
     74         border-radius: $roundness;
     75         font: bold condensed;
     76         outline-offset: -4px;
     77 
     78         &.slider {
     79             @include linear-gradient(shade($bg_color, 1.2));
     80 
     81             border: 1px solid rgba(0, 0, 0, .2);
     82             box-shadow: 0 1px 2px -1px alpha($dark_shadow, .12);
     83 
     84             &:insensitive {
     85                 border-color: rgba(0, 0, 0, .1);
     86                 background-color: shade($bg_color, .9);
     87                 box-shadow: none;
     88             }
     89         }
     90 
     91         &.trough {
     92             @include linear-gradient(shade($bg_color, .95), to top);
     93 
     94             border: 1px solid border_normal($bg_color);
     95             color: $fg_color;
     96             box-shadow: inset 1px 0 alpha($dark_shadow, .07),
     97                         inset 0 1px alpha($dark_shadow, .08),
     98                         inset -1px 0 alpha($dark_shadow, .07),
     99                         inset 0 -1px alpha($dark_shadow, .05);
    100 
    101             &:active {
    102                 @include linear-gradient($selected_bg_color, to top);
    103 
    104                 border-color: shade($selected_bg_color, .9);
    105                 color: $selected_fg_color;
    106             }
    107 
    108             &:insensitive {
    109                 @include linear-gradient(shade($bg_color, .9), to top);
    110 
    111                 border-color: border_insensitive($bg_color);
    112                 color: mix($fg_color, $bg_color, .5);
    113             }
    114         }
    115     }
    116 }