diff options
author | Andrew Dolgov <[email protected]> | 2018-12-04 16:53:01 +0300 |
---|---|---|
committer | Andrew Dolgov <[email protected]> | 2018-12-04 16:53:01 +0300 |
commit | 563a46f55a392011d075811b3dc798e9cdcca949 (patch) | |
tree | 4321fadc393b5cf5bf26929d2fcf017dfc0b8f9a /lib/flat/dijit/form/Checkbox.styl | |
parent | f679ec2e6e25598c511177d7d160c51d2bdf631e (diff) |
initial
Diffstat (limited to 'lib/flat/dijit/form/Checkbox.styl')
-rwxr-xr-x | lib/flat/dijit/form/Checkbox.styl | 137 |
1 files changed, 137 insertions, 0 deletions
diff --git a/lib/flat/dijit/form/Checkbox.styl b/lib/flat/dijit/form/Checkbox.styl new file mode 100755 index 000000000..556afaf68 --- /dev/null +++ b/lib/flat/dijit/form/Checkbox.styl @@ -0,0 +1,137 @@ +/* CheckBox + * + * Styling CheckBox mainly includes: + * + * 1. Containers + * .dijitCheckBox + * + * 2. CheckBox within ToggleButton + * .dijitCheckBoxIcon + * + * 3. States - Checked, Hover, Disabled. + * .dijitCheckBoxChecked + * .dijitCheckBoxHover + * .dijitCheckBoxCheckedHover + * .dijitCheckBoxDisabled + * .dijitCheckBoxCheckedDisabled + */ + + +@import 'dijit_form_variables'; + +.{$theme-name} { + + .dijitCheckBox { + background-color: $checkbox-background-color; + border: 1px solid $checkbox-border-color; + width: $checkbox-width; + height: $checkbox-height; + line-height: 1; + padding: $checkbox-padding; + border-radius: $checkbox-border-radius; + text-align: center; + position: relative; + overflow: visible; + transition: all 0.1s linear; + input { + position: absolute; + top: 0; + } + } + + /* Icon */ + + .dijitCheckBoxIcon, + .dijitCheckBoxChecked, + .dijitCheckBoxCheckedDisabled { + &:before { + _icon-core-style(); + content: $checkbox-icon; + color: $checkbox-checked-icon-color; + } + } + + /* This is the checkbox icon within a widget, e.g. toggle button */ + + .dijitCheckBoxIcon { + padding: $checkbox-icon-padding; + + &:before { + color: $checkbox-icon-checked-icon-color; + } + } + + // checkbox icon within alternative buttons + if($button-alternative-colors && length($button-alternative-colors) > 0) { + for class in $button-alternative-colors { + .{class} { + .dijitCheckBoxIcon { + &:before { + color: $checkbox-checked-icon-color; + } + } + } + } + } + + /* checked */ + + .dijitCheckBoxChecked { + background-color: $checkbox-checked-background-color; + border-color: $checkbox-checked-border-color; + } + + /* hovered */ + /* over unchecked */ + + .dijitCheckBoxHover { + background-color: $checkbox-hover-unchecked-background-color; + border: $checkbox-hover-unchecked-border-color; + } + + /* over checked */ + + .dijitCheckBoxCheckedHover { + background-color: $checkbox-hover-checked-background-color; + border: $checkbox-hover-checked-border-color; + } + + /* disabled */ + + .dijitCheckBoxDisabled { + color: $checkbox-disabled-color; + background-color: $checkbox-disabled-background-color; + border-color: $checkbox-disabled-border-color; + } + + .dijitCheckBoxCheckedDisabled { + color: $checkbox-checked-disabled-color; + background-color: $checkbox-checked-disabled-background-color; + border-color: $checkbox-checked-disabled-border-color; + } + + /* Checkbox within a menu item */ + + .dijitCheckedMenuItem .dijitCheckedMenuItemIcon { + background-color: $checkbox-background-color; + border: 1px solid $checkbox-border-color; + width: $checkbox-width; + height: $checkbox-height; + line-height: 1; + padding: $checkbox-padding; + border-radius: $checkbox-border-radius; + text-align: center; + position: relative; + overflow: visible; + transition: all 0.1s linear; + } + + .dijitCheckedMenuItemChecked .dijitCheckedMenuItemIcon { + &:before { + _icon-core-style(); + content: $checkbox-icon; + color: $theme-base; + } + } + +}
\ No newline at end of file |