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/Select.styl | |
parent | f679ec2e6e25598c511177d7d160c51d2bdf631e (diff) |
initial
Diffstat (limited to 'lib/flat/dijit/form/Select.styl')
-rwxr-xr-x | lib/flat/dijit/form/Select.styl | 164 |
1 files changed, 164 insertions, 0 deletions
diff --git a/lib/flat/dijit/form/Select.styl b/lib/flat/dijit/form/Select.styl new file mode 100755 index 000000000..28559995b --- /dev/null +++ b/lib/flat/dijit/form/Select.styl @@ -0,0 +1,164 @@ +/* Select | Combobox + * And minor style for DateTextBox | MultiSelect + * + * Styling Select mainly includes: + * + * 1. Containers + * Select: + * .dijitSelect + * .dijitButtonContents + * Combobox: + * .dijitComboBox + * + * 2. Arrow Button + * .dijitArrowButton + * .dijitArrowButtonInner + * .dijitComboBox .dijitButtonNode + * + * 3. Menu + * .dijitSelectMenu + * + * 4. States - Hover, Active, Focused, Disabled, e.g. + * + * Select: Hover, Active, Focused, Disabled + * .dijitSelectHover + * .dijitSelectFocused + * .dijitSelectDisabled + * + * Combobox: Hover, Focused (Open), Disabled + * .dijitComboBox .dijitDownArrowButtonHover + * .dijitComboBoxOpenHover .dijitButtonNode + * .dijitComboBoxDisabled .dijitButtonNode + * + */ + +@import 'dijit_form_variables'; + +.{$theme-name} { + + /* arrows */ + + .dijitSelect, + .dijitComboBox { + .dijitArrowButtonInner { + margin: 0; + width:0; + height: 0; + } + } + + /* ----- Select ----- */ + + .dijitSelect { + button-style(); + table-layout: fixed; + + .dijitButtonContents, + .dijitArrowButton { + line-height: 20px; + padding: $button-padding; + border: 0; + border-radius: 0 $select-button-border-radius $select-button-border-radius 0; + } + .dijitButtonContents { + padding:0; + overflow: hidden; + text-overflow: ellipsis; + border-radius: $select-button-border-radius 0 0 $select-button-border-radius; + } + .dijitInputField { + padding: 0 0 0 $input-padding*3; + } + .dijitArrowButton { + width: $button-arrow-width; + padding: $button-arrow-padding; + } + } + + /* hover */ + + .dijitSelectHover { + button-hover-style(); + } + + .dijitSelectActive { + button-active-style(); + } + + /* focused */ + + .dijitSelectFocused { + border: $select-focus-border; + } + + /* disabled */ + + .dijitSelectDisabled { + button-disabled-style(); + } + + /* ----- Combobox ----- */ + + .dijitComboBox .dijitButtonNode { + button-style(); + border-radius: 0 $select-button-border-radius $select-button-border-radius 0; + } + + /* hover */ + + .dijitComboBoxOpenHover .dijitButtonNode, + .dijitComboBox .dijitDownArrowButtonHover { + button-hover-style(); + box-shadow: none; + } + + /* disabled */ + + .dijitComboBoxDisabled .dijitButtonNode { + button-disabled-style(); + } + + .dijitComboBox .dijitArrowButton { + width: $button-arrow-width; + padding: $button-arrow-padding; + } + + // remove arrow when wrapped in a toolbar dijit + .dijitToolbar .dijitComboBox .dijitArrowButtonInner { + border: none; + } + + /* ----- DateTextBox ----- */ + + .dijitDateTextBox .dijitArrowButton:before { + content: $select-date-icon; + } + /* ----- TimeTextBox ----- */ + + .dijitTimeTextBox .dijitArrowButton:before { + content: $select-time-icon; + } + + /* ----- Multiple Select ----- */ + + select { + padding: $input-padding 0; + border: 1px solid $input-border-color; + box-shadow: $shadow-depth1; + } + + select option { + padding: $input-padding $input-padding * 2; + } + + /* Dropdown menu styles for "Select" + * Most of menu styles are defined in Menu.styl + */ + + .dijitSelectMenu td.dijitMenuItemIconCell, + .dijitSelectMenu td.dijitMenuArrowCell { + /* so that arrow and icon cells from MenuItem are not displayed */ + display: none; + } + +}
\ No newline at end of file |