diff options
Diffstat (limited to 'lib/flat/dijit/form')
25 files changed, 3408 insertions, 0 deletions
diff --git a/lib/flat/dijit/form/Button.css b/lib/flat/dijit/form/Button.css new file mode 100644 index 000000000..f88271f84 --- /dev/null +++ b/lib/flat/dijit/form/Button.css @@ -0,0 +1,646 @@ +/* Button | DropDownButton | ComboButton | ToggleButton + * + * Styling Buttons mainly includes: + * + * 1. Containers + * .dijitButton + * .dijitDropDownButton + * .dijitComboButton + * .dijitButtonNode - common button/arrow wrapper shared across all three button types + * + * 2. Button text + * .dijitButtonText + * + * 3. Arrows - only for DropDownButton and ComboButton + * There are total four directions arrows - down, left, right, up: + * .dijitArrowButtonInner - down arrow by default + * .dijitLeftArrowButton .dijitArrowButtonInner - left arrow + * .dijitRightArrowButton .dijitArrowButtonInner - right arrow + * .dijitUpArrowButton .dijitArrowButtonInner - up arrow + * + * 4. States - Hover, Active, Disabled, e.g. + * .dijitButtonHover .dijitButtonNode + * .dijitButtonActive .dijitButtonNode + * .dijitButtonDisabled .dijitButtonNode + * + * .dijitDisabled .dijitArrowButtonInner - disabled arrow states + */ +.flat .dijitButtonText { + padding: 0 4px; + text-align: center; +} +.flat .dijitButton .dijitButtonNode, +.flat .dijitDropDownButton .dijitButtonNode, +.flat .dijitComboButton .dijitButtonNode, +.flat .dijitToggleButton .dijitButtonNode { + border-style: solid; + border-width: 1px; + border-color: #9e9e9e; + padding: 4px; + border-radius: 3px; + line-height: 20px; + cursor: pointer; + -webkit-transition: all 0.05s linear; + -moz-transition: all 0.05s linear; + -o-transition: all 0.05s linear; + -ms-transition: all 0.05s linear; + transition: all 0.05s linear; + background: #fff; +} +.flat .dijitButton.alt-primary .dijitButtonNode, +.flat .dijitDropDownButton.alt-primary .dijitButtonNode, +.flat .dijitComboButton.alt-primary .dijitButtonNode, +.flat .dijitToggleButton.alt-primary .dijitButtonNode, +.flat .dijitComboBox.alt-primary .dijitButtonNode, +.flat .dijitSelect.alt-primary .dijitButtonContents, +.flat .dijitSelect.alt-primary .dijitButtonNode, +.flat .dijitSpinner.alt-primary .dijitArrowButton { + background: #1e88e5; + color: #fff; + border-color: #166fbd; +} +.flat .dijitComboButton.alt-primary .dijitStretch { + border-right-color: #166fbd; +} +.flat .dijitComboButtonRtl.alt-primary .dijitStretch { + border-left-color: #166fbd; +} +.flat .dijitButton.alt-success .dijitButtonNode, +.flat .dijitDropDownButton.alt-success .dijitButtonNode, +.flat .dijitComboButton.alt-success .dijitButtonNode, +.flat .dijitToggleButton.alt-success .dijitButtonNode, +.flat .dijitComboBox.alt-success .dijitButtonNode, +.flat .dijitSelect.alt-success .dijitButtonContents, +.flat .dijitSelect.alt-success .dijitButtonNode, +.flat .dijitSpinner.alt-success .dijitArrowButton { + background: #43a047; + color: #fff; + border-color: #37823a; +} +.flat .dijitComboButton.alt-success .dijitStretch { + border-right-color: #37823a; +} +.flat .dijitComboButtonRtl.alt-success .dijitStretch { + border-left-color: #37823a; +} +.flat .dijitButton.alt-info .dijitButtonNode, +.flat .dijitDropDownButton.alt-info .dijitButtonNode, +.flat .dijitComboButton.alt-info .dijitButtonNode, +.flat .dijitToggleButton.alt-info .dijitButtonNode, +.flat .dijitComboBox.alt-info .dijitButtonNode, +.flat .dijitSelect.alt-info .dijitButtonContents, +.flat .dijitSelect.alt-info .dijitButtonNode, +.flat .dijitSpinner.alt-info .dijitArrowButton { + background: #03a9f4; + color: #fff; + border-color: #028ac7; +} +.flat .dijitComboButton.alt-info .dijitStretch { + border-right-color: #028ac7; +} +.flat .dijitComboButtonRtl.alt-info .dijitStretch { + border-left-color: #028ac7; +} +.flat .dijitButton.alt-warning .dijitButtonNode, +.flat .dijitDropDownButton.alt-warning .dijitButtonNode, +.flat .dijitComboButton.alt-warning .dijitButtonNode, +.flat .dijitToggleButton.alt-warning .dijitButtonNode, +.flat .dijitComboBox.alt-warning .dijitButtonNode, +.flat .dijitSelect.alt-warning .dijitButtonContents, +.flat .dijitSelect.alt-warning .dijitButtonNode, +.flat .dijitSpinner.alt-warning .dijitArrowButton { + background: #fb8c00; + color: #fff; + border-color: #cd7200; +} +.flat .dijitComboButton.alt-warning .dijitStretch { + border-right-color: #cd7200; +} +.flat .dijitComboButtonRtl.alt-warning .dijitStretch { + border-left-color: #cd7200; +} +.flat .dijitButton.alt-danger .dijitButtonNode, +.flat .dijitDropDownButton.alt-danger .dijitButtonNode, +.flat .dijitComboButton.alt-danger .dijitButtonNode, +.flat .dijitToggleButton.alt-danger .dijitButtonNode, +.flat .dijitComboBox.alt-danger .dijitButtonNode, +.flat .dijitSelect.alt-danger .dijitButtonContents, +.flat .dijitSelect.alt-danger .dijitButtonNode, +.flat .dijitSpinner.alt-danger .dijitArrowButton { + background: #e53935; + color: #fff; + border-color: #cc1e1a; +} +.flat .dijitComboButton.alt-danger .dijitStretch { + border-right-color: #cc1e1a; +} +.flat .dijitComboButtonRtl.alt-danger .dijitStretch { + border-left-color: #cc1e1a; +} +.flat .dijitButton.alt-inverse .dijitButtonNode, +.flat .dijitDropDownButton.alt-inverse .dijitButtonNode, +.flat .dijitComboButton.alt-inverse .dijitButtonNode, +.flat .dijitToggleButton.alt-inverse .dijitButtonNode, +.flat .dijitComboBox.alt-inverse .dijitButtonNode, +.flat .dijitSelect.alt-inverse .dijitButtonContents, +.flat .dijitSelect.alt-inverse .dijitButtonNode, +.flat .dijitSpinner.alt-inverse .dijitArrowButton { + background: #616161; + color: #fff; + border-color: #4f4f4f; +} +.flat .dijitComboButton.alt-inverse .dijitStretch { + border-right-color: #4f4f4f; +} +.flat .dijitComboButtonRtl.alt-inverse .dijitStretch { + border-left-color: #4f4f4f; +} +.flat .dijitButtonHover .dijitButtonNode, +.flat .dijitDropDownButtonHover .dijitButtonNode, +.flat .dijitToggleButtonHover .dijitButtonNode { + -webkit-transition: all 0.1s; + -moz-transition: all 0.1s; + -o-transition: all 0.1s; + -ms-transition: all 0.1s; + transition: all 0.1s; + background: #f2f2f2; + border-color: #d9d9d9; +} +.flat .dijitComboButton .dijitButtonNodeHover, +.flat .dijitComboButton .dijitDownArrowButtonHover { + -webkit-transition: all 0.1s; + -moz-transition: all 0.1s; + -o-transition: all 0.1s; + -ms-transition: all 0.1s; + transition: all 0.1s; + background: #f2f2f2; + border-color: #d9d9d9; +} +.flat .dijitButtonHover.alt-primary .dijitButtonNode, +.flat .dijitDropDownButtonHover.alt-primary .dijitButtonNode, +.flat .dijitComboButton.alt-primary .dijitButtonNodeHover, +.flat .dijitComboButton.alt-primary .dijitDownArrowButtonHover, +.flat .dijitToggleButtonHover.alt-primary .dijitButtonNode, +.flat .dijitComboBoxHover.alt-primary .dijitButtonNode, +.flat .dijitSelectHover.alt-primary .dijitButtonContents, +.flat .dijitSelectHover.alt-primary .dijitButtonNode, +.flat .dijitSelect.dijitSelectOpened.alt-primary .dijitButtonContents, +.flat .dijitSelect.dijitSelectOpened.alt-primary .dijitArrowButton, +.flat .dijitSpinner.alt-primary .dijitUpArrowButtonHover, +.flat .dijitSpinner.alt-primary .dijitDownArrowButtonHover { + background: #1981dd; + border-color: #1774c5; +} +.flat .dijitButtonHover.alt-success .dijitButtonNode, +.flat .dijitDropDownButtonHover.alt-success .dijitButtonNode, +.flat .dijitComboButton.alt-success .dijitButtonNodeHover, +.flat .dijitComboButton.alt-success .dijitDownArrowButtonHover, +.flat .dijitToggleButtonHover.alt-success .dijitButtonNode, +.flat .dijitComboBoxHover.alt-success .dijitButtonNode, +.flat .dijitSelectHover.alt-success .dijitButtonContents, +.flat .dijitSelectHover.alt-success .dijitButtonNode, +.flat .dijitSelect.dijitSelectOpened.alt-success .dijitButtonContents, +.flat .dijitSelect.dijitSelectOpened.alt-success .dijitArrowButton, +.flat .dijitSpinner.alt-success .dijitUpArrowButtonHover, +.flat .dijitSpinner.alt-success .dijitDownArrowButtonHover { + background: #409843; + border-color: #39883c; +} +.flat .dijitButtonHover.alt-info .dijitButtonNode, +.flat .dijitDropDownButtonHover.alt-info .dijitButtonNode, +.flat .dijitComboButton.alt-info .dijitButtonNodeHover, +.flat .dijitComboButton.alt-info .dijitDownArrowButtonHover, +.flat .dijitToggleButtonHover.alt-info .dijitButtonNode, +.flat .dijitComboBoxHover.alt-info .dijitButtonNode, +.flat .dijitSelectHover.alt-info .dijitButtonContents, +.flat .dijitSelectHover.alt-info .dijitButtonNode, +.flat .dijitSelect.dijitSelectOpened.alt-info .dijitButtonContents, +.flat .dijitSelect.dijitSelectOpened.alt-info .dijitArrowButton, +.flat .dijitSpinner.alt-info .dijitUpArrowButtonHover, +.flat .dijitSpinner.alt-info .dijitDownArrowButtonHover { + background: #03a1e8; + border-color: #0390cf; +} +.flat .dijitButtonHover.alt-warning .dijitButtonNode, +.flat .dijitDropDownButtonHover.alt-warning .dijitButtonNode, +.flat .dijitComboButton.alt-warning .dijitButtonNodeHover, +.flat .dijitComboButton.alt-warning .dijitDownArrowButtonHover, +.flat .dijitToggleButtonHover.alt-warning .dijitButtonNode, +.flat .dijitComboBoxHover.alt-warning .dijitButtonNode, +.flat .dijitSelectHover.alt-warning .dijitButtonContents, +.flat .dijitSelectHover.alt-warning .dijitButtonNode, +.flat .dijitSelect.dijitSelectOpened.alt-warning .dijitButtonContents, +.flat .dijitSelect.dijitSelectOpened.alt-warning .dijitArrowButton, +.flat .dijitSpinner.alt-warning .dijitUpArrowButtonHover, +.flat .dijitSpinner.alt-warning .dijitDownArrowButtonHover { + background: #ee8500; + border-color: #d57700; +} +.flat .dijitButtonHover.alt-danger .dijitButtonNode, +.flat .dijitDropDownButtonHover.alt-danger .dijitButtonNode, +.flat .dijitComboButton.alt-danger .dijitButtonNodeHover, +.flat .dijitComboButton.alt-danger .dijitDownArrowButtonHover, +.flat .dijitToggleButtonHover.alt-danger .dijitButtonNode, +.flat .dijitComboBoxHover.alt-danger .dijitButtonNode, +.flat .dijitSelectHover.alt-danger .dijitButtonContents, +.flat .dijitSelectHover.alt-danger .dijitButtonNode, +.flat .dijitSelect.dijitSelectOpened.alt-danger .dijitButtonContents, +.flat .dijitSelect.dijitSelectOpened.alt-danger .dijitArrowButton, +.flat .dijitSpinner.alt-danger .dijitUpArrowButtonHover, +.flat .dijitSpinner.alt-danger .dijitDownArrowButtonHover { + background: #e32d29; + border-color: #d4201b; +} +.flat .dijitButtonHover.alt-inverse .dijitButtonNode, +.flat .dijitDropDownButtonHover.alt-inverse .dijitButtonNode, +.flat .dijitComboButton.alt-inverse .dijitButtonNodeHover, +.flat .dijitComboButton.alt-inverse .dijitDownArrowButtonHover, +.flat .dijitToggleButtonHover.alt-inverse .dijitButtonNode, +.flat .dijitComboBoxHover.alt-inverse .dijitButtonNode, +.flat .dijitSelectHover.alt-inverse .dijitButtonContents, +.flat .dijitSelectHover.alt-inverse .dijitButtonNode, +.flat .dijitSelect.dijitSelectOpened.alt-inverse .dijitButtonContents, +.flat .dijitSelect.dijitSelectOpened.alt-inverse .dijitArrowButton, +.flat .dijitSpinner.alt-inverse .dijitUpArrowButtonHover, +.flat .dijitSpinner.alt-inverse .dijitDownArrowButtonHover { + background: #5c5c5c; + border-color: #525252; +} +.flat .dijitButtonActive .dijitButtonNode, +.flat .dijitDropDownButtonActive .dijitButtonNode, +.flat .dijitToggleButtonActive .dijitButtonNode, +.flat .dijitToggleButtonChecked .dijitButtonNode { + -webkit-transition: none; + -moz-transition: none; + -o-transition: none; + -ms-transition: none; + transition: none; + outline: none; + -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); + box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); + background: #e0e0e0; + border-color: #b3b3b3; +} +.flat .dijitComboButton .dijitButtonNodeActive, +.flat .dijitComboButton .dijitDownArrowButtonActive { + -webkit-transition: none; + -moz-transition: none; + -o-transition: none; + -ms-transition: none; + transition: none; + outline: none; + -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); + box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); + background: #e0e0e0; + border-color: #b3b3b3; +} +.flat .dijitButtonActive.alt-primary .dijitButtonNode, +.flat .dijitDropDownButtonActive.alt-primary .dijitButtonNode, +.flat .dijitComboButton.alt-primary .dijitButtonNodeActive, +.flat .dijitToggleButtonActive.alt-primary .dijitButtonNode, +.flat .dijitComboBoxActive.alt-primary .dijitButtonNode, +.flat .dijitSelectActive.alt-primary .dijitButtonContents, +.flat .dijitSelectActive.alt-primary .dijitArrowButton, +.flat .dijitSelect.dijitSelectOpened.alt-primary .dijitButtonContents, +.flat .dijitSelect.dijitSelectOpened.alt-primary .dijitArrowButton, +.flat .dijitComboBox.alt-primary .dijitButtonNode.dijitHasDropDownOpen, +.flat .dijitSpinner.alt-primary .dijitUpArrowButtonActive, +.flat .dijitSpinner.alt-primary .dijitDownArrowButtonActive { + background: #1878cc; + border-color: #135fa3; +} +.flat .dijitButtonActive.alt-success .dijitButtonNode, +.flat .dijitDropDownButtonActive.alt-success .dijitButtonNode, +.flat .dijitComboButton.alt-success .dijitButtonNodeActive, +.flat .dijitToggleButtonActive.alt-success .dijitButtonNode, +.flat .dijitComboBoxActive.alt-success .dijitButtonNode, +.flat .dijitSelectActive.alt-success .dijitButtonContents, +.flat .dijitSelectActive.alt-success .dijitArrowButton, +.flat .dijitSelect.dijitSelectOpened.alt-success .dijitButtonContents, +.flat .dijitSelect.dijitSelectOpened.alt-success .dijitArrowButton, +.flat .dijitComboBox.alt-success .dijitButtonNode.dijitHasDropDownOpen, +.flat .dijitSpinner.alt-success .dijitUpArrowButtonActive, +.flat .dijitSpinner.alt-success .dijitDownArrowButtonActive { + background: #3b8d3e; + border-color: #2f7032; +} +.flat .dijitButtonActive.alt-info .dijitButtonNode, +.flat .dijitDropDownButtonActive.alt-info .dijitButtonNode, +.flat .dijitComboButton.alt-info .dijitButtonNodeActive, +.flat .dijitToggleButtonActive.alt-info .dijitButtonNode, +.flat .dijitComboBoxActive.alt-info .dijitButtonNode, +.flat .dijitSelectActive.alt-info .dijitButtonContents, +.flat .dijitSelectActive.alt-info .dijitArrowButton, +.flat .dijitSelect.dijitSelectOpened.alt-info .dijitButtonContents, +.flat .dijitSelect.dijitSelectOpened.alt-info .dijitArrowButton, +.flat .dijitComboBox.alt-info .dijitButtonNode.dijitHasDropDownOpen, +.flat .dijitSpinner.alt-info .dijitUpArrowButtonActive, +.flat .dijitSpinner.alt-info .dijitDownArrowButtonActive { + background: #0395d7; + border-color: #0276ab; +} +.flat .dijitButtonActive.alt-warning .dijitButtonNode, +.flat .dijitDropDownButtonActive.alt-warning .dijitButtonNode, +.flat .dijitComboButton.alt-warning .dijitButtonNodeActive, +.flat .dijitToggleButtonActive.alt-warning .dijitButtonNode, +.flat .dijitComboBoxActive.alt-warning .dijitButtonNode, +.flat .dijitSelectActive.alt-warning .dijitButtonContents, +.flat .dijitSelectActive.alt-warning .dijitArrowButton, +.flat .dijitSelect.dijitSelectOpened.alt-warning .dijitButtonContents, +.flat .dijitSelect.dijitSelectOpened.alt-warning .dijitArrowButton, +.flat .dijitComboBox.alt-warning .dijitButtonNode.dijitHasDropDownOpen, +.flat .dijitSpinner.alt-warning .dijitUpArrowButtonActive, +.flat .dijitSpinner.alt-warning .dijitDownArrowButtonActive { + background: #dd7b00; + border-color: #b06200; +} +.flat .dijitButtonActive.alt-danger .dijitButtonNode, +.flat .dijitDropDownButtonActive.alt-danger .dijitButtonNode, +.flat .dijitComboButton.alt-danger .dijitButtonNodeActive, +.flat .dijitToggleButtonActive.alt-danger .dijitButtonNode, +.flat .dijitComboBoxActive.alt-danger .dijitButtonNode, +.flat .dijitSelectActive.alt-danger .dijitButtonContents, +.flat .dijitSelectActive.alt-danger .dijitArrowButton, +.flat .dijitSelect.dijitSelectOpened.alt-danger .dijitButtonContents, +.flat .dijitSelect.dijitSelectOpened.alt-danger .dijitArrowButton, +.flat .dijitComboBox.alt-danger .dijitButtonNode.dijitHasDropDownOpen, +.flat .dijitSpinner.alt-danger .dijitUpArrowButtonActive, +.flat .dijitSpinner.alt-danger .dijitDownArrowButtonActive { + background: #dc211c; + border-color: #af1a17; +} +.flat .dijitButtonActive.alt-inverse .dijitButtonNode, +.flat .dijitDropDownButtonActive.alt-inverse .dijitButtonNode, +.flat .dijitComboButton.alt-inverse .dijitButtonNodeActive, +.flat .dijitToggleButtonActive.alt-inverse .dijitButtonNode, +.flat .dijitComboBoxActive.alt-inverse .dijitButtonNode, +.flat .dijitSelectActive.alt-inverse .dijitButtonContents, +.flat .dijitSelectActive.alt-inverse .dijitArrowButton, +.flat .dijitSelect.dijitSelectOpened.alt-inverse .dijitButtonContents, +.flat .dijitSelect.dijitSelectOpened.alt-inverse .dijitArrowButton, +.flat .dijitComboBox.alt-inverse .dijitButtonNode.dijitHasDropDownOpen, +.flat .dijitSpinner.alt-inverse .dijitUpArrowButtonActive, +.flat .dijitSpinner.alt-inverse .dijitDownArrowButtonActive { + background: #555; + border-color: #444; +} +.flat .dijitButtonDisabled, +.flat .dijitDropDownButtonDisabled, +.flat .dijitComboButtonDisabled, +.flat .dijitToggleButtonDisabled { + outline: none; +} +.flat .dijitButtonDisabled .dijitButtonNode, +.flat .dijitDropDownButtonDisabled .dijitButtonNode, +.flat .dijitComboButtonDisabled .dijitButtonNode, +.flat .dijitToggleButtonDisabled .dijitButtonNode { + cursor: default; + color: #9e9e9e; + background-color: #f5f5f5; + border-color: #e3e3e3; +} +.flat .dijitButtonDisabled.alt-primary .dijitButtonNode, +.flat .dijitDropDownButtonDisabled.alt-primary .dijitButtonNode, +.flat .dijitComboButtonDisabled.alt-primary .dijitButtonNode, +.flat .dijitToggleButtonDisabled.alt-primary .dijitButtonNode { + background: #6db2ee; + border-color: #50a2eb; + color: #f2f2f2; +} +.flat .dijitComboButtonDisabled.alt-primary .dijitStretch { + border-right-color: #50a2eb; +} +.flat .dijitComboButtonRtlDisabled.alt-primary .dijitStretch { + border-left-color: #50a2eb; +} +.flat .dijitComboBoxDisabled.alt-primary .dijitButtonNode { + border-left-color: #50a2eb; +} +.flat .dijitComboBoxRtlDisabled.alt-primary .dijitButtonNode { + border-right-color: #50a2eb; +} +.flat .dijitTimeTextBoxDisabled.alt-primary .dijitButtonNode { + border-left-color: #50a2eb; +} +.flat .dijitTimeTextBoxRtlDisabled.alt-primary .dijitButtonNode { + border-right-color: #50a2eb; +} +.flat .dijitDateTextBoxDisabled.alt-primary .dijitButtonNode { + border-left-color: #50a2eb; +} +.flat .dijitDateTextBoxRtlDisabled.alt-primary .dijitButtonNode { + border-right-color: #50a2eb; +} +.flat .dijitButtonDisabled.alt-success .dijitButtonNode, +.flat .dijitDropDownButtonDisabled.alt-success .dijitButtonNode, +.flat .dijitComboButtonDisabled.alt-success .dijitButtonNode, +.flat .dijitToggleButtonDisabled.alt-success .dijitButtonNode { + background: #7dc981; + border-color: #63be67; + color: #f2f2f2; +} +.flat .dijitComboButtonDisabled.alt-success .dijitStretch { + border-right-color: #63be67; +} +.flat .dijitComboButtonRtlDisabled.alt-success .dijitStretch { + border-left-color: #63be67; +} +.flat .dijitComboBoxDisabled.alt-success .dijitButtonNode { + border-left-color: #63be67; +} +.flat .dijitComboBoxRtlDisabled.alt-success .dijitButtonNode { + border-right-color: #63be67; +} +.flat .dijitTimeTextBoxDisabled.alt-success .dijitButtonNode { + border-left-color: #63be67; +} +.flat .dijitTimeTextBoxRtlDisabled.alt-success .dijitButtonNode { + border-right-color: #63be67; +} +.flat .dijitDateTextBoxDisabled.alt-success .dijitButtonNode { + border-left-color: #63be67; +} +.flat .dijitDateTextBoxRtlDisabled.alt-success .dijitButtonNode { + border-right-color: #63be67; +} +.flat .dijitButtonDisabled.alt-info .dijitButtonNode, +.flat .dijitDropDownButtonDisabled.alt-info .dijitButtonNode, +.flat .dijitComboButtonDisabled.alt-info .dijitButtonNode, +.flat .dijitToggleButtonDisabled.alt-info .dijitButtonNode { + background: #56c9fd; + border-color: #34befd; + color: #f2f2f2; +} +.flat .dijitComboButtonDisabled.alt-info .dijitStretch { + border-right-color: #34befd; +} +.flat .dijitComboButtonRtlDisabled.alt-info .dijitStretch { + border-left-color: #34befd; +} +.flat .dijitComboBoxDisabled.alt-info .dijitButtonNode { + border-left-color: #34befd; +} +.flat .dijitComboBoxRtlDisabled.alt-info .dijitButtonNode { + border-right-color: #34befd; +} +.flat .dijitTimeTextBoxDisabled.alt-info .dijitButtonNode { + border-left-color: #34befd; +} +.flat .dijitTimeTextBoxRtlDisabled.alt-info .dijitButtonNode { + border-right-color: #34befd; +} +.flat .dijitDateTextBoxDisabled.alt-info .dijitButtonNode { + border-left-color: #34befd; +} +.flat .dijitDateTextBoxRtlDisabled.alt-info .dijitButtonNode { + border-right-color: #34befd; +} +.flat .dijitButtonDisabled.alt-warning .dijitButtonNode, +.flat .dijitDropDownButtonDisabled.alt-warning .dijitButtonNode, +.flat .dijitComboButtonDisabled.alt-warning .dijitButtonNode, +.flat .dijitToggleButtonDisabled.alt-warning .dijitButtonNode { + background: #ffb557; + border-color: #ffa635; + color: #f2f2f2; +} +.flat .dijitComboButtonDisabled.alt-warning .dijitStretch { + border-right-color: #ffa635; +} +.flat .dijitComboButtonRtlDisabled.alt-warning .dijitStretch { + border-left-color: #ffa635; +} +.flat .dijitComboBoxDisabled.alt-warning .dijitButtonNode { + border-left-color: #ffa635; +} +.flat .dijitComboBoxRtlDisabled.alt-warning .dijitButtonNode { + border-right-color: #ffa635; +} +.flat .dijitTimeTextBoxDisabled.alt-warning .dijitButtonNode { + border-left-color: #ffa635; +} +.flat .dijitTimeTextBoxRtlDisabled.alt-warning .dijitButtonNode { + border-right-color: #ffa635; +} +.flat .dijitDateTextBoxDisabled.alt-warning .dijitButtonNode { + border-left-color: #ffa635; +} +.flat .dijitDateTextBoxRtlDisabled.alt-warning .dijitButtonNode { + border-right-color: #ffa635; +} +.flat .dijitButtonDisabled.alt-danger .dijitButtonNode, +.flat .dijitDropDownButtonDisabled.alt-danger .dijitButtonNode, +.flat .dijitComboButtonDisabled.alt-danger .dijitButtonNode, +.flat .dijitToggleButtonDisabled.alt-danger .dijitButtonNode { + background: #ee7e7c; + border-color: #eb6561; + color: #f2f2f2; +} +.flat .dijitComboButtonDisabled.alt-danger .dijitStretch { + border-right-color: #eb6561; +} +.flat .dijitComboButtonRtlDisabled.alt-danger .dijitStretch { + border-left-color: #eb6561; +} +.flat .dijitComboBoxDisabled.alt-danger .dijitButtonNode { + border-left-color: #eb6561; +} +.flat .dijitComboBoxRtlDisabled.alt-danger .dijitButtonNode { + border-right-color: #eb6561; +} +.flat .dijitTimeTextBoxDisabled.alt-danger .dijitButtonNode { + border-left-color: #eb6561; +} +.flat .dijitTimeTextBoxRtlDisabled.alt-danger .dijitButtonNode { + border-right-color: #eb6561; +} +.flat .dijitDateTextBoxDisabled.alt-danger .dijitButtonNode { + border-left-color: #eb6561; +} +.flat .dijitDateTextBoxRtlDisabled.alt-danger .dijitButtonNode { + border-right-color: #eb6561; +} +.flat .dijitButtonDisabled.alt-inverse .dijitButtonNode, +.flat .dijitDropDownButtonDisabled.alt-inverse .dijitButtonNode, +.flat .dijitComboButtonDisabled.alt-inverse .dijitButtonNode, +.flat .dijitToggleButtonDisabled.alt-inverse .dijitButtonNode { + background: #989898; + border-color: #848484; + color: #f2f2f2; +} +.flat .dijitComboButtonDisabled.alt-inverse .dijitStretch { + border-right-color: #848484; +} +.flat .dijitComboButtonRtlDisabled.alt-inverse .dijitStretch { + border-left-color: #848484; +} +.flat .dijitComboBoxDisabled.alt-inverse .dijitButtonNode { + border-left-color: #848484; +} +.flat .dijitComboBoxRtlDisabled.alt-inverse .dijitButtonNode { + border-right-color: #848484; +} +.flat .dijitTimeTextBoxDisabled.alt-inverse .dijitButtonNode { + border-left-color: #848484; +} +.flat .dijitTimeTextBoxRtlDisabled.alt-inverse .dijitButtonNode { + border-right-color: #848484; +} +.flat .dijitDateTextBoxDisabled.alt-inverse .dijitButtonNode { + border-left-color: #848484; +} +.flat .dijitDateTextBoxRtlDisabled.alt-inverse .dijitButtonNode { + border-right-color: #848484; +} +.flat .dijitComboButtonDisabled .dijitArrowButton { + border-left-width: 0; +} +.flat .dijitDropDownButton .dijitButtonNode { + padding-right: 8px; +} +.flat table.dijitComboButton { + border-collapse: separate; /* override dijit.css so that ComboBox rounded corners work */ +} +.flat table.dijitComboButton .dijitStretch { + border-radius: 3px 0 0 3px; +} +.flat table.dijitComboButton .dijitArrowButton { + padding: 4px; + width: 20px; + border-radius: 0 3px 3px 0; + border-left-width: 0; +} +.flat .dijitToggleButton .dijitCheckBoxIcon { + display: none; +} +.flat .dijitToggleButtonChecked .dijitIcon { + display: inline-block; +} +.flat .dijitDropDownButton .dijitArrowButtonInner { + margin-left: 3px; +} +.flat .dijitDropDownButton .dijitArrowButtonInner, +.flat .dijitArrowButton { + font-family: "flat-icon"; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + font-size: 16px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +.flat .dijitDropDownButton .dijitArrowButtonInner:before, +.flat .dijitArrowButton:before { + content: "\f002"; +} +.flat .dijitLeftArrowButton:before { + content: "\f000"; +} +.flat .dijitRightArrowButton:before { + content: "\f001"; +} +.flat .dijitUpArrowButton:before { + content: "\f003"; +} diff --git a/lib/flat/dijit/form/Button.styl b/lib/flat/dijit/form/Button.styl new file mode 100755 index 000000000..dfeb602b4 --- /dev/null +++ b/lib/flat/dijit/form/Button.styl @@ -0,0 +1,165 @@ +/* Button | DropDownButton | ComboButton | ToggleButton + * + * Styling Buttons mainly includes: + * + * 1. Containers + * .dijitButton + * .dijitDropDownButton + * .dijitComboButton + * .dijitButtonNode - common button/arrow wrapper shared across all three button types + * + * 2. Button text + * .dijitButtonText + * + * 3. Arrows - only for DropDownButton and ComboButton + * There are total four directions arrows - down, left, right, up: + * .dijitArrowButtonInner - down arrow by default + * .dijitLeftArrowButton .dijitArrowButtonInner - left arrow + * .dijitRightArrowButton .dijitArrowButtonInner - right arrow + * .dijitUpArrowButton .dijitArrowButtonInner - up arrow + * + * 4. States - Hover, Active, Disabled, e.g. + * .dijitButtonHover .dijitButtonNode + * .dijitButtonActive .dijitButtonNode + * .dijitButtonDisabled .dijitButtonNode + * + * .dijitDisabled .dijitArrowButtonInner - disabled arrow states + */ + +@import 'dijit_form_variables'; + +.{$theme-name} { + /* ----- Button ----- */ + .dijitButtonText { + padding: 0 $padding; + text-align: center; + } + + .dijitButton, + .dijitDropDownButton, + .dijitComboButton, + .dijitToggleButton { + .dijitButtonNode { + button-style(); + } + } + + create-alternative-buttons($button-alternative-colors); + + // hover + .dijitButtonHover, + .dijitDropDownButtonHover, + .dijitToggleButtonHover { + .dijitButtonNode { + button-hover-style(); + } + } + .dijitComboButton { + .dijitButtonNodeHover, + .dijitDownArrowButtonHover { + button-hover-style(); + } + } + + create-alternative-buttons-hover($button-alternative-colors); + + // active and checked + .dijitButtonActive, + .dijitDropDownButtonActive, + .dijitToggleButtonActive, + .dijitToggleButtonChecked { + .dijitButtonNode { + button-active-style(); + } + } + .dijitComboButton { + .dijitButtonNodeActive, + .dijitDownArrowButtonActive { + button-active-style(); + } + } + + create-alternative-buttons-active($button-alternative-colors); + + // disabled + .dijitButtonDisabled, + .dijitDropDownButtonDisabled, + .dijitComboButtonDisabled, + .dijitToggleButtonDisabled { + outline: none; + } + + .dijitButtonDisabled, + .dijitDropDownButtonDisabled, + .dijitComboButtonDisabled, + .dijitToggleButtonDisabled { + .dijitButtonNode { + button-disabled-style(); + } + } + + create-alternative-buttons-disabled($button-alternative-colors); + + .dijitComboButtonDisabled .dijitArrowButton { + border-left-width: 0; + } + + /* ----- DropDownButton ----- */ + .dijitDropDownButton .dijitButtonNode { + padding-right: $padding * 2; + } + + /* ----- ComboButton ----- */ + table.dijitComboButton { + border-collapse: separate; /* override dijit.css so that ComboBox rounded corners work */ + .dijitStretch { + border-radius: $border-radius 0 0 $border-radius; + } + .dijitArrowButton { + padding: $padding; + width: $button-arrow-width; + border-radius: 0 $border-radius $border-radius 0; + border-left-width: 0; + } + } + + /* ----- ToggleButton ----- */ + .dijitToggleButton { + .dijitCheckBoxIcon { + display: none; + } + } + + .dijitToggleButtonChecked { + .dijitIcon { + display: inline-block; + } + } + + // arrow styles for down/up/left/right directions + .dijitDropDownButton .dijitArrowButtonInner{ + margin-left: $padding * 0.75; + } + + .dijitDropDownButton .dijitArrowButtonInner, + .dijitArrowButton { + _icon-core-style(); + } + + .dijitDropDownButton .dijitArrowButtonInner:before, + .dijitArrowButton:before { + content: $icon-drop-down; + } + + .dijitLeftArrowButton:before { + content: $icon-drop-left; + } + + .dijitRightArrowButton:before { + content: $icon-drop-right; + } + + .dijitUpArrowButton:before { + content: $icon-drop-up; + } +}
\ No newline at end of file diff --git a/lib/flat/dijit/form/Button_rtl.css b/lib/flat/dijit/form/Button_rtl.css new file mode 100644 index 000000000..2653de756 --- /dev/null +++ b/lib/flat/dijit/form/Button_rtl.css @@ -0,0 +1,15 @@ +.flat table.dijitComboButtonRtl .dijitStretch { + border-radius: 0 3px 3px 0; +} +.flat table.dijitComboButtonRtl .dijitArrowButton { + border-radius: 3px 0 0 3px; + border-left-width: 1px; + border-right-width: 0; +} +.flat .dijitDropDownButtonRtl .dijitButtonNode { + padding-left: 8px; +} +.flat .dijitDropDownButtonRtl .dijitArrowButtonInner { + margin-left: 0; + margin-right: 12px; +} diff --git a/lib/flat/dijit/form/Button_rtl.styl b/lib/flat/dijit/form/Button_rtl.styl new file mode 100755 index 000000000..8dab1cd23 --- /dev/null +++ b/lib/flat/dijit/form/Button_rtl.styl @@ -0,0 +1,27 @@ +@import 'dijit_form_variables'; + +.{$theme-name} { + + /* ----- ComboButton ----- */ + + table.dijitComboButtonRtl .dijitStretch { + border-radius: 0 $button-border-radius $button-border-radius 0; + } + table.dijitComboButtonRtl .dijitArrowButton { + border-radius: $button-border-radius 0 0 $button-border-radius; + border-left-width: 1px; + border-right-width: 0; + } + + /* ----- DropDownButton ----- */ + + .dijitDropDownButtonRtl { + .dijitButtonNode { + padding-left: $padding*2; + } + .dijitArrowButtonInner { + margin-left: 0; + margin-right: $padding * 3; + } + } +}
\ No newline at end of file diff --git a/lib/flat/dijit/form/Checkbox.css b/lib/flat/dijit/form/Checkbox.css new file mode 100644 index 000000000..236eb40e8 --- /dev/null +++ b/lib/flat/dijit/form/Checkbox.css @@ -0,0 +1,131 @@ +/* CheckBox + * + * Styling CheckBox mainly includes: + * + * 1. Containers + * .dijitCheckBox + * + * 2. CheckBox within ToggleButton + * .dijitCheckBoxIcon + * + * 3. States - Checked, Hover, Disabled. + * .dijitCheckBoxChecked + * .dijitCheckBoxHover + * .dijitCheckBoxCheckedHover + * .dijitCheckBoxDisabled + * .dijitCheckBoxCheckedDisabled + */ +.flat .dijitCheckBox { + background-color: #fff; + border: 1px solid #9e9e9e; + width: 16px; + height: 16px; + line-height: 1; + padding: 0; + border-radius: 2px; + text-align: center; + position: relative; + overflow: visible; + -webkit-transition: all 0.1s linear; + -moz-transition: all 0.1s linear; + -o-transition: all 0.1s linear; + -ms-transition: all 0.1s linear; + transition: all 0.1s linear; +} +.flat .dijitCheckBox input { + position: absolute; + top: 0; +} +.flat .dijitCheckBoxIcon:before, +.flat .dijitCheckBoxChecked:before, +.flat .dijitCheckBoxCheckedDisabled:before { + font-family: "flat-icon"; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + font-size: 16px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + content: "\f00c"; + color: #fff; +} +.flat .dijitCheckBoxIcon { + padding: 0; +} +.flat .dijitCheckBoxIcon:before { + color: #2196f3; +} +.flat .alt-primary .dijitCheckBoxIcon:before { + color: #fff; +} +.flat .alt-success .dijitCheckBoxIcon:before { + color: #fff; +} +.flat .alt-info .dijitCheckBoxIcon:before { + color: #fff; +} +.flat .alt-warning .dijitCheckBoxIcon:before { + color: #fff; +} +.flat .alt-danger .dijitCheckBoxIcon:before { + color: #fff; +} +.flat .alt-inverse .dijitCheckBoxIcon:before { + color: #fff; +} +.flat .dijitCheckBoxChecked { + background-color: #2196f3; + border-color: #2196f3; +} +.flat .dijitCheckBoxHover { + background-color: #fff; + border: 1px solid #2196f3; +} +.flat .dijitCheckBoxCheckedHover { + background-color: #42a6f5; + border: 1px solid #2196f3; +} +.flat .dijitCheckBoxDisabled { + color: #9e9e9e; + background-color: #f5f5f5; + border-color: #e3e3e3; +} +.flat .dijitCheckBoxCheckedDisabled { + color: #a6a6a6; + background-color: #6fbbf7; + border-color: #6fbbf7; +} +.flat .dijitCheckedMenuItem .dijitCheckedMenuItemIcon { + background-color: #fff; + border: 1px solid #9e9e9e; + width: 16px; + height: 16px; + line-height: 1; + padding: 0; + border-radius: 2px; + text-align: center; + position: relative; + overflow: visible; + -webkit-transition: all 0.1s linear; + -moz-transition: all 0.1s linear; + -o-transition: all 0.1s linear; + -ms-transition: all 0.1s linear; + transition: all 0.1s linear; +} +.flat .dijitCheckedMenuItemChecked .dijitCheckedMenuItemIcon:before { + font-family: "flat-icon"; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + font-size: 16px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + content: "\f00c"; + color: #2196f3; +} 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 diff --git a/lib/flat/dijit/form/NumberSpinner.css b/lib/flat/dijit/form/NumberSpinner.css new file mode 100644 index 000000000..6c6ea6b8c --- /dev/null +++ b/lib/flat/dijit/form/NumberSpinner.css @@ -0,0 +1,125 @@ +/* NumberSpinner - namespace "dijitSpinner" + * + * Styling NumberSpinner mainly includes: + * + * 1. Arrows + * Outer containers: .dijitSpinnerButtonContainer|.dijitSpinnerButtonInner - for border, padding and position + * Arrows: .dijitArrowButton|.dijitUpArrowButton.|dijitDownArrowButton + * Inner container: .dijitArrowButtonInner - for border, padding, width|height and background image + * + * 2. Hover state + * .dijitUpArrowButtonHover|.dijitDownArrowButtonHover .* - for background color|image + * + * 3. Active state + * .dijitUpArrowButtonActive|.dijitDownArrowButtonActive .* - for border, padding, margin and background color|image + * + * 4. Focused state + * .dijitSpinnerFocused .* - for background color|image + * + * 5. Disabled state + * .dijitSpinnerDisabled .* - for background color|image + */ +.flat .dijitSpinner .dijitSpinnerButtonContainer { + overflow: hidden; + position: relative; + width: auto; + padding: 0; + border: 1px solid #9e9e9e; +} +.flat .dijitSpinner .dijitSpinnerButtonInner { + width: 30px; + padding: 4px 0 !important; + margin: 0; +} +.flat .dijitSpinner .dijitArrowButton { + border-style: solid; + border-width: 1px; + border-color: #9e9e9e; + padding: 4px; + border-radius: 3px; + line-height: 20px; + cursor: pointer; + -webkit-transition: all 0.05s linear; + -moz-transition: all 0.05s linear; + -o-transition: all 0.05s linear; + -ms-transition: all 0.05s linear; + transition: all 0.05s linear; + background: #fff; + border-radius: 0; + border: 0; + width: auto; + overflow: hidden; + left: 0; + right: 0; + padding: 0; +} +.flat .dijitSpinner .dijitArrowButton:before { + content: none; +} +.flat .dijitSpinner .dijitUpArrowButton { + border-top-right-radius: 2.000000000000001px; +} +.flat .dijitSpinner .dijitDownArrowButton { + border-bottom-right-radius: 2.000000000000001px; +} +.flat .dijitSpinner .dijitUpArrowButtonHover, +.flat .dijitSpinner .dijitDownArrowButtonHover { + -webkit-transition: all 0.1s; + -moz-transition: all 0.1s; + -o-transition: all 0.1s; + -ms-transition: all 0.1s; + transition: all 0.1s; + background: #f2f2f2; + border-color: #d9d9d9; +} +.flat .dijitSpinner .dijitDownArrowButtonActive, +.flat .dijitSpinner .dijitUpArrowButtonActive { + -webkit-transition: none; + -moz-transition: none; + -o-transition: none; + -ms-transition: none; + transition: none; + outline: none; + -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); + box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); + background: #e0e0e0; + border-color: #b3b3b3; +} +.flat .dijitSpinner .dijitArrowButtonInner { + line-height: 16px; + display: block; +} +.flat .dijitSpinner .dijitArrowButtonInner .dijitInputField { + padding: 0; +} +.flat .dijitSpinner .dijitArrowButtonInner:before { + content: "\f003"; +} +.flat .dijitSpinner .dijitDownArrowButton .dijitArrowButtonInner:before { + content: "\f002"; +} +.flat .dijitSpinnerDisabled .dijitDownArrowButton, +.flat .dijitSpinnerDisabled .dijitUpArrowButton { + cursor: default; + color: #9e9e9e; + background-color: #f5f5f5; + border-color: #e3e3e3; +} +.flat .alt-primary .dijitSpinnerButtonContainer { + border-color: #1e88e5; +} +.flat .alt-success .dijitSpinnerButtonContainer { + border-color: #43a047; +} +.flat .alt-info .dijitSpinnerButtonContainer { + border-color: #03a9f4; +} +.flat .alt-warning .dijitSpinnerButtonContainer { + border-color: #fb8c00; +} +.flat .alt-danger .dijitSpinnerButtonContainer { + border-color: #e53935; +} +.flat .alt-inverse .dijitSpinnerButtonContainer { + border-color: #616161; +} diff --git a/lib/flat/dijit/form/NumberSpinner.styl b/lib/flat/dijit/form/NumberSpinner.styl new file mode 100755 index 000000000..fa80c36bb --- /dev/null +++ b/lib/flat/dijit/form/NumberSpinner.styl @@ -0,0 +1,124 @@ +/* NumberSpinner - namespace "dijitSpinner" + * + * Styling NumberSpinner mainly includes: + * + * 1. Arrows + * Outer containers: .dijitSpinnerButtonContainer|.dijitSpinnerButtonInner - for border, padding and position + * Arrows: .dijitArrowButton|.dijitUpArrowButton.|dijitDownArrowButton + * Inner container: .dijitArrowButtonInner - for border, padding, width|height and background image + * + * 2. Hover state + * .dijitUpArrowButtonHover|.dijitDownArrowButtonHover .* - for background color|image + * + * 3. Active state + * .dijitUpArrowButtonActive|.dijitDownArrowButtonActive .* - for border, padding, margin and background color|image + * + * 4. Focused state + * .dijitSpinnerFocused .* - for background color|image + * + * 5. Disabled state + * .dijitSpinnerDisabled .* - for background color|image + */ + +@import 'dijit_form_variables'; + +.{$theme-name} { + + .dijitSpinner { + + .dijitSpinnerButtonContainer { + overflow: hidden; + position: relative; + width: auto; + padding: 0; + border: $numberspinner-button-border; + } + + .dijitSpinnerButtonInner { + width: $numberspinner-button-width; + padding: $numberspinner-button-inner-padding 0 !important; + margin: 0; + } + + /* up & down buttons */ + + .dijitArrowButton { + button-style(); + border-radius: 0; + border: 0; + width: auto; + overflow: hidden; + left: 0; + right: 0; + padding: $numberspinner-button-padding; + &:before { + content: none; // remove arrow icons from dijitArrowButton nodes + } + } + + /* up button */ + .dijitUpArrowButton { + border-top-right-radius: $numberspinner-button-border-radius + } + + /* down button */ + .dijitDownArrowButton { + border-bottom-right-radius: $numberspinner-button-border-radius + } + + /* hover */ + + .dijitUpArrowButtonHover, + .dijitDownArrowButtonHover { + button-hover-style(); + } + + /* active */ + + .dijitDownArrowButtonActive, + .dijitUpArrowButtonActive { + button-active-style(); + } + + /* up & down arrows */ + + .dijitArrowButtonInner { + line-height: $icon-size; + display: block; + + .dijitInputField { + padding: 0; + } + + &:before { + content: $numberspinner-icon-up; + } + } + + .dijitDownArrowButton .dijitArrowButtonInner { + &:before { + content: $numberspinner-icon-down; + } + } + } + + /* disabled */ + + .dijitSpinnerDisabled { + .dijitDownArrowButton, + .dijitUpArrowButton { + button-disabled-style(); + } + } + + // checkbox icon within alternative buttons + if($button-alternative-colors && length($button-alternative-colors) > 0) { + for class in $button-alternative-colors { + .{class} { + .dijitSpinnerButtonContainer { + border-color: $button-alternative-colors[class]; + } + } + } + } +}
\ No newline at end of file diff --git a/lib/flat/dijit/form/NumberSpinner_rtl.css b/lib/flat/dijit/form/NumberSpinner_rtl.css new file mode 100644 index 000000000..462d66195 --- /dev/null +++ b/lib/flat/dijit/form/NumberSpinner_rtl.css @@ -0,0 +1,4 @@ +.flat .dijitSpinnerRtl .dijitSpinnerButtonContainer .dijitArrowButton { + right: 0; + left: auto; +} diff --git a/lib/flat/dijit/form/NumberSpinner_rtl.styl b/lib/flat/dijit/form/NumberSpinner_rtl.styl new file mode 100644 index 000000000..1fe335c3f --- /dev/null +++ b/lib/flat/dijit/form/NumberSpinner_rtl.styl @@ -0,0 +1,10 @@ +@import 'dijit_form_variables'; + +.{$theme-name} { + + .dijitSpinnerRtl .dijitSpinnerButtonContainer .dijitArrowButton { + right: 0; + left: auto; + } + +}
\ No newline at end of file diff --git a/lib/flat/dijit/form/RadioButton.css b/lib/flat/dijit/form/RadioButton.css new file mode 100644 index 000000000..34503fb4e --- /dev/null +++ b/lib/flat/dijit/form/RadioButton.css @@ -0,0 +1,157 @@ +/* RadioButton + * + * Styling RadioButton mainly includes: + * + * 1. Containers + * .dijitRadio|.dijitRadioIcon + * + * 2. RadioButton within ToggleButton + * .dijitToggleButton|.dijitToggleButtonChecked + * + * 3. Checked state + * .dijitRadioChecked + * .dijitToggleButtonChecked + * + * 4. Hover state + * .dijitRadioHover|.dijitRadioCheckedHover + * + * 5. Disabled state + * .dijitRadioDisabled|.dijitRadioCheckedDisabled + */ +.flat .dijitRadio, +.flat .dijitRadioIcon { +/* inside a toggle button */ + width: 16px; + height: 16px; + background: #fff; + border: 1px solid #2196f3; + border-radius: 50%; + position: relative; + overflow: visible; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +.flat .dijitRadio:after, +.flat .dijitRadioIcon:after { + content: " "; + display: block; + width: 0; + height: 0; + background-color: #2196f3; + border-radius: 50%; + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + margin: 8px; + position: absolute; + top: 0; + left: 0; + -webkit-transition: all 0.15s ease-in-out; + -moz-transition: all 0.15s ease-in-out; + -o-transition: all 0.15s ease-in-out; + -ms-transition: all 0.15s ease-in-out; + transition: all 0.15s ease-in-out; +} +.flat .dijitRadioHover { + border-color: #59b0f6; +} +.flat .dijitRadioChecked:after, +.flat .dijitChecked .dijitRadioIcon:after { + width: 8px; + height: 8px; + margin: 3px; + opacity: 1; + -ms-filter: none; + filter: none; +} +.flat .alt-primary .dijitRadioIcon { + border-color: #fff; +} +.flat .alt-primary .dijitRadioIcon:after { + background-color: #fff; +} +.flat .alt-success .dijitRadioIcon { + border-color: #fff; +} +.flat .alt-success .dijitRadioIcon:after { + background-color: #fff; +} +.flat .alt-info .dijitRadioIcon { + border-color: #fff; +} +.flat .alt-info .dijitRadioIcon:after { + background-color: #fff; +} +.flat .alt-warning .dijitRadioIcon { + border-color: #fff; +} +.flat .alt-warning .dijitRadioIcon:after { + background-color: #fff; +} +.flat .alt-danger .dijitRadioIcon { + border-color: #fff; +} +.flat .alt-danger .dijitRadioIcon:after { + background-color: #fff; +} +.flat .alt-inverse .dijitRadioIcon { + border-color: #fff; +} +.flat .alt-inverse .dijitRadioIcon:after { + background-color: #fff; +} +.flat .dijitRadioDisabled { + background-color: #f5f5f5; + border-color: #e3e3e3; +} +.flat .dijitRadioCheckedDisabled { + background-color: #f5f5f5; + border-color: #6fbbf7; +} +.flat .dijitRadioCheckedDisabled:after { + background-color: #6fbbf7; +} +.flat .dijitRadioMenuItem .dijitCheckedMenuItemIcon { + width: 16px; + height: 16px; + background: #fff; + border: 1px solid #9e9e9e; + border-radius: 50%; + position: relative; + overflow: visible; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +.flat .dijitRadioMenuItem .dijitCheckedMenuItemIcon:after { + content: " "; + display: block; + width: 0; + height: 0; + background-color: #2196f3; + border-radius: 50%; + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + margin: 8px; + position: absolute; + top: 0; + left: 0; + -webkit-transition: all 0.15s ease-in-out; + -moz-transition: all 0.15s ease-in-out; + -o-transition: all 0.15s ease-in-out; + -ms-transition: all 0.15s ease-in-out; + transition: all 0.15s ease-in-out; +} +.flat .dijitRadioMenuItemChecked .dijitCheckedMenuItemIcon { + border-color: #9e9e9e; +} +.flat .dijitRadioMenuItemChecked .dijitCheckedMenuItemIcon:after { + width: 8px; + height: 8px; + margin: 3px; + opacity: 1; + -ms-filter: none; + filter: none; +} diff --git a/lib/flat/dijit/form/RadioButton.styl b/lib/flat/dijit/form/RadioButton.styl new file mode 100755 index 000000000..b93eff66e --- /dev/null +++ b/lib/flat/dijit/form/RadioButton.styl @@ -0,0 +1,136 @@ +/* RadioButton + * + * Styling RadioButton mainly includes: + * + * 1. Containers + * .dijitRadio|.dijitRadioIcon + * + * 2. RadioButton within ToggleButton + * .dijitToggleButton|.dijitToggleButtonChecked + * + * 3. Checked state + * .dijitRadioChecked + * .dijitToggleButtonChecked + * + * 4. Hover state + * .dijitRadioHover|.dijitRadioCheckedHover + * + * 5. Disabled state + * .dijitRadioDisabled|.dijitRadioCheckedDisabled + */ + +@import 'dijit_form_variables'; + +.{$theme-name} { + + .dijitRadio, + .dijitRadioIcon { /* inside a toggle button */ + width: $radio-width; + height: $radio-height; + background: $radio-background-color; + border: 1px solid $radio-border-color; + border-radius: 50%; + position: relative; + overflow: visible; + box-sizing: border-box; + &:after { + content: " "; + display: block; + width: 0; + height: 0; + background-color: $radio-checked-color; + border-radius: 50%; + opacity: 0; + margin: ($radio-width) * .5; + position: absolute; + top: 0; + left: 0; + transition: all 0.15s ease-in-out; + } + } + + // hover + .dijitRadioHover { + border-color: $radio-hover-border-color; + } + + // checked + .dijitRadioChecked, + .dijitChecked .dijitRadioIcon { + &:after { + width: $radio-width - 8px; + height: @width; + margin: 3px; + opacity: 1; + } + } + + // checkbox icon within alternative buttons + if($button-alternative-colors && length($button-alternative-colors) > 0) { + for class in $button-alternative-colors { + .{class} { + .dijitRadioIcon { + border-color: $white; + &:after { + background-color: $white; + } + } + } + } + } + + // disabled + .dijitRadioDisabled { + background-color: $radio-disabled-background-color; + border-color: $radio-disabled-border-color; + } + + .dijitRadioCheckedDisabled { + background-color: $radio-disabled-background-color; + border-color: $radio-checked-disabled-color; + &:after { + background-color: $radio-checked-disabled-color; + } + } + + /* ---- RadioMenuItem ---- */ + .dijitRadioMenuItem { + .dijitCheckedMenuItemIcon { + width: $radio-width; + height: $radio-height; + background: $radio-background-color; + border: 1px solid $border-color; + border-radius: 50%; + position: relative; + overflow: visible; + box-sizing: border-box; + &:after { + content: " "; + display: block; + width: 0; + height: 0; + background-color: $radio-checked-color; + border-radius: 50%; + opacity: 0; + margin: ($radio-width) * .5; + position: absolute; + top: 0; + left: 0; + transition: all 0.15s ease-in-out; + } + } + } + + .dijitRadioMenuItemChecked { + .dijitCheckedMenuItemIcon { + border-color: $border-color; + &:after { + width: $radio-width - 8px; + height: @width; + margin: 3px; + opacity: 1; + } + } + } + +}
\ No newline at end of file diff --git a/lib/flat/dijit/form/Select.css b/lib/flat/dijit/form/Select.css new file mode 100644 index 000000000..148f4a59a --- /dev/null +++ b/lib/flat/dijit/form/Select.css @@ -0,0 +1,167 @@ +/* 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 + * + */ +.flat .dijitSelect .dijitArrowButtonInner, +.flat .dijitComboBox .dijitArrowButtonInner { + margin: 0; + width: 0; + height: 0; +} +.flat .dijitSelect { + border-style: solid; + border-width: 1px; + border-color: #9e9e9e; + padding: 4px; + border-radius: 3px; + line-height: 20px; + cursor: pointer; + -webkit-transition: all 0.05s linear; + -moz-transition: all 0.05s linear; + -o-transition: all 0.05s linear; + -ms-transition: all 0.05s linear; + transition: all 0.05s linear; + background: #fff; + table-layout: fixed; +} +.flat .dijitSelect .dijitButtonContents, +.flat .dijitSelect .dijitArrowButton { + line-height: 20px; + padding: 4px 12px; + border: 0; + border-radius: 0 2.000000000000001px 2.000000000000001px 0; +} +.flat .dijitSelect .dijitButtonContents { + padding: 0; + overflow: hidden; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; + border-radius: 2.000000000000001px 0 0 2.000000000000001px; +} +.flat .dijitSelect .dijitInputField { + padding: 0 0 0 12px; +} +.flat .dijitSelect .dijitArrowButton { + width: 20px; + padding: 4px; +} +.flat .dijitSelectHover { + -webkit-transition: all 0.1s; + -moz-transition: all 0.1s; + -o-transition: all 0.1s; + -ms-transition: all 0.1s; + transition: all 0.1s; + background: #f2f2f2; + border-color: #d9d9d9; +} +.flat .dijitSelectActive { + -webkit-transition: none; + -moz-transition: none; + -o-transition: none; + -ms-transition: none; + transition: none; + outline: none; + -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); + box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); + background: #e0e0e0; + border-color: #b3b3b3; +} +.flat .dijitSelectFocused { + border: 1px solid #9e9e9e; +} +.flat .dijitSelectDisabled { + cursor: default; + color: #9e9e9e; + background-color: #f5f5f5; + border-color: #e3e3e3; +} +.flat .dijitComboBox .dijitButtonNode { + border-style: solid; + border-width: 1px; + border-color: #9e9e9e; + padding: 4px; + border-radius: 3px; + line-height: 20px; + cursor: pointer; + -webkit-transition: all 0.05s linear; + -moz-transition: all 0.05s linear; + -o-transition: all 0.05s linear; + -ms-transition: all 0.05s linear; + transition: all 0.05s linear; + background: #fff; + border-radius: 0 2.000000000000001px 2.000000000000001px 0; +} +.flat .dijitComboBoxOpenHover .dijitButtonNode, +.flat .dijitComboBox .dijitDownArrowButtonHover { + -webkit-transition: all 0.1s; + -moz-transition: all 0.1s; + -o-transition: all 0.1s; + -ms-transition: all 0.1s; + transition: all 0.1s; + background: #f2f2f2; + border-color: #d9d9d9; + -webkit-box-shadow: none; + box-shadow: none; +} +.flat .dijitComboBoxDisabled .dijitButtonNode { + cursor: default; + color: #9e9e9e; + background-color: #f5f5f5; + border-color: #e3e3e3; +} +.flat .dijitComboBox .dijitArrowButton { + width: 20px; + padding: 4px; +} +.flat .dijitToolbar .dijitComboBox .dijitArrowButtonInner { + border: none; +} +.flat .dijitDateTextBox .dijitArrowButton:before { + content: "\f01e"; +} +.flat .dijitTimeTextBox .dijitArrowButton:before { + content: "\f01f"; +} +.flat select { + padding: 4px 0; + border: 1px solid #9e9e9e; + -webkit-box-shadow: 0 1px 0.5px rgba(0,0,0,0.3), 0 2px 2px rgba(0,0,0,0.2); + box-shadow: 0 1px 0.5px rgba(0,0,0,0.3), 0 2px 2px rgba(0,0,0,0.2); +} +.flat select option { + padding: 4px 8px; +} +.flat .dijitSelectMenu td.dijitMenuItemIconCell, +.flat .dijitSelectMenu td.dijitMenuArrowCell { +/* so that arrow and icon cells from MenuItem are not displayed */ + display: none; +} 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 diff --git a/lib/flat/dijit/form/Select_rtl.css b/lib/flat/dijit/form/Select_rtl.css new file mode 100644 index 000000000..d42ef90ef --- /dev/null +++ b/lib/flat/dijit/form/Select_rtl.css @@ -0,0 +1,15 @@ +.flat .dijitSelectRtl .dijitButtonText { + float: right; + padding: 0 12px 0 0; +} +.flat .dijitSelectRtl .dijitButtonContents { + border-style: none none none solid; + text-align: right; +} +.flat .dijitComboBoxRtl .dijitButtonNode.dijitArrowButtonContainer { + border-radius: 3px 0 0 3px; +} +.flat .dijitComboBoxRtl .dijitArrowButtonContainer { + border-right-width: 1px !important; + border-left-width: 0 !important; +} diff --git a/lib/flat/dijit/form/Select_rtl.styl b/lib/flat/dijit/form/Select_rtl.styl new file mode 100644 index 000000000..c04aa1722 --- /dev/null +++ b/lib/flat/dijit/form/Select_rtl.styl @@ -0,0 +1,27 @@ +@import 'dijit_form_variables'; + +.{$theme-name} { + + .dijitSelectRtl { + .dijitButtonText { + float: right; + padding: 0 $input-padding*3 0 0; + } + .dijitButtonContents { + border-style: none none none solid; + text-align: right; + } + } + + .dijitComboBoxRtl { + .dijitButtonNode.dijitArrowButtonContainer { + border-radius: $button-border-radius 0 0 $button-border-radius; + } + + .dijitArrowButtonContainer { + border-right-width: 1px !important; + border-left-width: 0 !important; + } + } + +}
\ No newline at end of file diff --git a/lib/flat/dijit/form/Slider.css b/lib/flat/dijit/form/Slider.css new file mode 100644 index 000000000..5e966882b --- /dev/null +++ b/lib/flat/dijit/form/Slider.css @@ -0,0 +1,300 @@ +/* Slider + * + * Styling Slider mainly includes styling the Slider progress bar (dijitSliderProgressBar) + * + * Slider progress bar: + * 1. Slider progress bar (default styling): + * .dijitSliderProgressBarH - progress bar at the middle of horizontal slider + * .dijitSliderLeftBumper - bar at the left of horizontal slider + * .dijitSliderRightBumper - bar at the right of horizontal slider + * .dijitSliderProgressBarV - progress bar at the middle of vertical slider + * .dijitSliderTopBumper - bar at the top of vertical slider + * .dijitSliderBottomtBumper - bar at the bottom of vertical slider + * + * 2. hovered Slider progress bar (ie, mouse hover on progress bar) + * .dijitSliderHover .dijitSliderProgressBarH(horizontal) - hovered bar style: background, border + * + * 3. focused Slider progress bar (ie, mouse focused on progress bar) + * .dijitSliderFocused .dijitSliderProgressBarH(horizontal) - focus bar style: background, border + * + * 4. disabled/read-only Slider progress bar + * .dijitSliderDisabled .dijitSliderProgressBarH(horizontal) - bar styles when slider is disabled + * + * + * Slider Thumbs: + * 1. Slider Thumbs (default styling): + * .dijitSliderImageHandleH / .dijitSliderImageHandleV - styles for the controller on the progress bar + * + * 2. hovered Slider Thumbs (ie, mouse hover on slider thumbs) + * .dijitSliderHover .dijitSliderImageHandleH - hovered controller style + * + * 3. focused Slider progress bar (ie, mouse focused on slider thumbs) + * .dijitSliderFocused .dijitSliderImageHandleV - focused controller style + * + * + * Slider Increment/Decrement Buttons: + * 1. Slider Increment/Decrement Buttons (default styling): + * .dijitSliderDecrementIconH - decrement icon which lies at the left of horizontal slider + * .dijitSliderIncrementIconH - increment icon which lies at the right of horizontal slider + * .dijitSliderDecrementIconV - decrement icon which lies at the bottom of vertical slider + * .dijitSliderIncrementIconV - increment icon which lies at the top of vertical slider + * + * 2. hovered Slider Increment/Decrement Buttons (mouse hover on the icons) + * .dijitSliderHover .dijitSliderDecrementIconH - for background, border + * + * 3. active Slider Increment/Decrement Buttons (mouse down on the icons) + * .dijitSliderActive .dijitSliderIncrementIconV - for background, border + * + * 4. disabled/read-only Slider Increment/Decrement Buttons + * .dijitSliderDisabled .dijitSliderDecrementIconH - styles for the icons in disabled slider + * .dijitSliderReadOnly .dijitSliderIncrementIconV - styles for the icons in read-only slider + */ +.flat .dijitSliderBar { + border-style: solid; + outline: 1px; +} +.flat .dijitRuleLabelsContainer { + color: #424242; + font-size: smaller; +} +.flat .dijitSliderDisabled { + opacity: 0.65; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; + filter: alpha(opacity=65); +} +.flat .dijitRuleLabelsContainerH { + padding: 0; +} +.flat .dijitSliderBarH, +.flat .dijitSliderBumperH { + height: 3px; +} +.flat .dijitSlider .dijitSliderLeftBumper { + border-radius: 1.5px 0 0 1.5px; + border: 0 none; + margin-left: 4px; +} +.flat .dijitSlider .dijitSliderRightBumper { + border-radius: 0 1.5px 1.5px 0; + border: 0 none; + margin-left: -2px; + margin-right: 4px; +} +.flat .dijitSlider .dijitSliderProgressBarH, +.flat .dijitSlider .dijitSliderLeftBumper { + border: 0 none; + background-color: #2196f3; + background-image: none; +} +.flat .dijitSlider .dijitSliderRemainingBarH, +.flat .dijitSlider .dijitSliderRightBumper { + border: 0 none; + background-color: #9e9e9e; +} +.flat .dijitSliderHover .dijitSliderProgressBarH, +.flat .dijitSliderHover .dijitSliderLeftBumper { + background-color: #0d8cf1; + background-image: none; +} +.flat .dijitSliderFocused .dijitSliderProgressBarH, +.flat .dijitSliderFocused .dijitSliderLeftBumper { + -webkit-box-shadow: none; + box-shadow: none; +} +.flat .dijitSliderFocused .dijitSliderRemainingBarH, +.flat .dijitSliderFocused .dijitSliderRightBumper { + -webkit-box-shadow: none; + box-shadow: none; +} +.flat .dijitRuleLabelsContainerV { + padding: 0; +} +.flat .dijitSliderBarV, +.flat .dijitSliderBumperV { + width: 3px; +} +.flat .dijitSlider .dijitSliderTopBumper { + border-radius: 1.5px 1.5px 0 0; + border: 0 none; + margin-top: 4px; + margin-bottom: -2px; +} +.flat .dijitSlider .dijitSliderBottomBumper { + border-radius: 0 0 1.5px 1.5px; + border: 0 none; + margin-bottom: 4px; +} +.flat .dijitSlider .dijitSliderProgressBarV, +.flat .dijitSlider .dijitSliderBottomBumper { + border: 0 none; + background-color: #2196f3; + background-image: none; +} +.flat .dijitSlider .dijitSliderRemainingBarV, +.flat .dijitSlider .dijitSliderTopBumper { + border: 0 none; + background-color: #9e9e9e; +} +.flat .dijitSliderHover .dijitSliderProgressBarV, +.flat .dijitSliderHover .dijitSliderBottomBumper { + background-color: #0d8cf1; + background-image: none; +} +.flat .dijitSliderFocused .dijitSliderProgressBarV, +.flat .dijitSliderFocused .dijitSliderBottomBumper { + -webkit-box-shadow: none; + box-shadow: none; +} +.flat .dijitSliderFocused .dijitSliderRemainingBarV, +.flat .dijitSliderFocused .dijitSliderTopBumper { + -webkit-box-shadow: none; + box-shadow: none; +} +.flat .dijitSliderImageHandle { + background: #fff; + -webkit-box-shadow: 0 1px 0.5px rgba(0,0,0,0.3), 0 2px 2px rgba(0,0,0,0.2); + box-shadow: 0 1px 0.5px rgba(0,0,0,0.3), 0 2px 2px rgba(0,0,0,0.2); + border-radius: 50%; + border: 1px solid #2196f3; + width: 16px; + height: 16px; + margin-top: -2px; + position: absolute; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +.flat .dijitSliderImageHandle:after { + content: ""; + display: block; + background: #2196f3; + border-radius: 50%; + height: 10px; + width: 10px; + left: 2px; + top: 2px; + position: absolute; +} +.flat .dijitSliderImageHandleV { + margin-top: 0; +} +.flat .dijitSliderHover .dijitSliderImageHandle, +.flat .dijitSliderFocused .dijitSliderImageHandle { + -webkit-box-shadow: 0 4px 2px -2px rgba(0,0,0,0.3), 0 4px 6px rgba(0,0,0,0.2); + box-shadow: 0 4px 2px -2px rgba(0,0,0,0.3), 0 4px 6px rgba(0,0,0,0.2); +} +.flat .dijitSliderDisabled.dijitSliderFocused .dijitSliderImageHandle:after { + display: none; +} +.flat .dijitSliderDecrementIconH, +.flat .dijitSliderIncrementIconH, +.flat .dijitSliderDecrementIconV, +.flat .dijitSliderIncrementIconV { + border-style: solid; + border-width: 1px; + border-color: #9e9e9e; + padding: 4px; + border-radius: 3px; + line-height: 20px; + cursor: pointer; + -webkit-transition: all 0.05s linear; + -moz-transition: all 0.05s linear; + -o-transition: all 0.05s linear; + -ms-transition: all 0.05s linear; + transition: all 0.05s linear; + background: #fff; + height: 20px; + width: 20px; + cursor: pointer; + color: #2196f3; + padding: 0; +} +.flat .dijitSliderDecrementIconH:hover, +.flat .dijitSliderIncrementIconH:hover, +.flat .dijitSliderDecrementIconV:hover, +.flat .dijitSliderIncrementIconV:hover { + -webkit-transition: all 0.1s; + -moz-transition: all 0.1s; + -o-transition: all 0.1s; + -ms-transition: all 0.1s; + transition: all 0.1s; + background: #f2f2f2; + border-color: #d9d9d9; +} +.flat .dijitSliderDecrementIconH:active, +.flat .dijitSliderIncrementIconH:active, +.flat .dijitSliderDecrementIconV:active, +.flat .dijitSliderIncrementIconV:active { + -webkit-transition: none; + -moz-transition: none; + -o-transition: none; + -ms-transition: none; + transition: none; + outline: none; + -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); + box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); + background: #e0e0e0; + border-color: #b3b3b3; +} +.flat .dijitSliderReadOnly .dijitSliderDecrementIconH, +.flat .dijitSliderDisabled .dijitSliderDecrementIconH, +.flat .dijitSliderReadOnly .dijitSliderDecrementIconV, +.flat .dijitSliderDisabled .dijitSliderDecrementIconV, +.flat .dijitSliderReadOnly .dijitSliderIncrementIconH, +.flat .dijitSliderDisabled .dijitSliderIncrementIconH, +.flat .dijitSliderReadOnly .dijitSliderIncrementIconV, +.flat .dijitSliderDisabled .dijitSliderIncrementIconV { + opacity: 0.65; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; + filter: alpha(opacity=65); +} +.flat .dijitSliderIncrementIconH, +.flat .dijitSliderIncrementIconV, +.flat .dijitSliderDecrementIconH, +.flat .dijitSliderDecrementIconV { + font-family: "flat-icon"; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + font-size: 16px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +.flat .dijitSliderIncrementIconH:before, +.flat .dijitSliderIncrementIconV:before, +.flat .dijitSliderDecrementIconH:before, +.flat .dijitSliderDecrementIconV:before { + content: "\f011"; + top: 0; + line-height: 20px; +} +.flat .dijitSliderIncrementIconH .dijitSliderButtonInner, +.flat .dijitSliderIncrementIconV .dijitSliderButtonInner, +.flat .dijitSliderDecrementIconH .dijitSliderButtonInner, +.flat .dijitSliderDecrementIconV .dijitSliderButtonInner { + display: none; +} +.flat .dijitSliderDecrementIconH:before, +.flat .dijitSliderDecrementIconV:before { + content: "\f012"; +} +.flat .dijitRuleMark { + border: 0 none; +} +.flat .dijitRuleMarkH { + border-right: 1px solid #e0e0e0; +} +.flat .dijitRuleMarkV { + border-bottom: 1px solid #e0e0e0; +} +.flat .dijitRuleLabelContainerH { + margin-top: 2px; + margin-bottom: 2px; +} +.flat .dijitRuleLabelContainerV { + margin-left: 2px; + margin-right: 2px; +} diff --git a/lib/flat/dijit/form/Slider.styl b/lib/flat/dijit/form/Slider.styl new file mode 100755 index 000000000..76fe95949 --- /dev/null +++ b/lib/flat/dijit/form/Slider.styl @@ -0,0 +1,345 @@ +/* Slider + * + * Styling Slider mainly includes styling the Slider progress bar (dijitSliderProgressBar) + * + * Slider progress bar: + * 1. Slider progress bar (default styling): + * .dijitSliderProgressBarH - progress bar at the middle of horizontal slider + * .dijitSliderLeftBumper - bar at the left of horizontal slider + * .dijitSliderRightBumper - bar at the right of horizontal slider + * .dijitSliderProgressBarV - progress bar at the middle of vertical slider + * .dijitSliderTopBumper - bar at the top of vertical slider + * .dijitSliderBottomtBumper - bar at the bottom of vertical slider + * + * 2. hovered Slider progress bar (ie, mouse hover on progress bar) + * .dijitSliderHover .dijitSliderProgressBarH(horizontal) - hovered bar style: background, border + * + * 3. focused Slider progress bar (ie, mouse focused on progress bar) + * .dijitSliderFocused .dijitSliderProgressBarH(horizontal) - focus bar style: background, border + * + * 4. disabled/read-only Slider progress bar + * .dijitSliderDisabled .dijitSliderProgressBarH(horizontal) - bar styles when slider is disabled + * + * + * Slider Thumbs: + * 1. Slider Thumbs (default styling): + * .dijitSliderImageHandleH / .dijitSliderImageHandleV - styles for the controller on the progress bar + * + * 2. hovered Slider Thumbs (ie, mouse hover on slider thumbs) + * .dijitSliderHover .dijitSliderImageHandleH - hovered controller style + * + * 3. focused Slider progress bar (ie, mouse focused on slider thumbs) + * .dijitSliderFocused .dijitSliderImageHandleV - focused controller style + * + * + * Slider Increment/Decrement Buttons: + * 1. Slider Increment/Decrement Buttons (default styling): + * .dijitSliderDecrementIconH - decrement icon which lies at the left of horizontal slider + * .dijitSliderIncrementIconH - increment icon which lies at the right of horizontal slider + * .dijitSliderDecrementIconV - decrement icon which lies at the bottom of vertical slider + * .dijitSliderIncrementIconV - increment icon which lies at the top of vertical slider + * + * 2. hovered Slider Increment/Decrement Buttons (mouse hover on the icons) + * .dijitSliderHover .dijitSliderDecrementIconH - for background, border + * + * 3. active Slider Increment/Decrement Buttons (mouse down on the icons) + * .dijitSliderActive .dijitSliderIncrementIconV - for background, border + * + * 4. disabled/read-only Slider Increment/Decrement Buttons + * .dijitSliderDisabled .dijitSliderDecrementIconH - styles for the icons in disabled slider + * .dijitSliderReadOnly .dijitSliderIncrementIconV - styles for the icons in read-only slider + */ + +@import 'dijit_form_variables'; + +.{$theme-name} { + + .dijitSlider { + } + + .dijitSliderBar { + border-style: solid; + outline: 1px; + } + + .dijitRuleLabelsContainer { + color: $slider-label-text-color; + font-size: smaller; + } + + /* disabled */ + + .dijitSliderDisabled { + opacity: $disabled-opacity; + } + + /* ----- Horizontal Slider ----- */ + + .dijitRuleLabelsContainerH { + padding: 0; + } + + /* ----- Bar ----- */ + + .dijitSliderBarH, + .dijitSliderBumperH { + height: $slider-bar-width; + } + + .dijitSlider { + .dijitSliderLeftBumper { + border-radius: $slider-bar-radius 0 0 $slider-bar-radius; + border: 0 none; + margin-left: $slider-bar-spacing; + } + .dijitSliderRightBumper { + border-radius: 0 $slider-bar-radius $slider-bar-radius 0; + border: 0 none; + margin-left: -2px; + margin-right: $slider-bar-spacing; + } + + .dijitSliderProgressBarH, + .dijitSliderLeftBumper { + border: 0 none; + background-color: $slider-progressbar-background-color; + background-image: none; + } + .dijitSliderRemainingBarH, + .dijitSliderRightBumper { + border: 0 none; + background-color: $slider-remainingbar-background-color; + } + } + + /* hover */ + + .dijitSliderHover { + .dijitSliderProgressBarH, + .dijitSliderLeftBumper { + background-color: darken($slider-progressbar-background-color, 8%); + background-image: none; + } + .dijitSliderRemainingBarH, + .dijitSliderRightBumper { + } + } + + /* focus */ + + .dijitSliderFocused { + .dijitSliderProgressBarH, + .dijitSliderLeftBumper { + box-shadow: none; + } + .dijitSliderRemainingBarH, + .dijitSliderRightBumper { + box-shadow: none; + } + } + + /* ----- Vertical Slider ----- */ + + .dijitRuleLabelsContainerV { + padding: 0; + } + + .dijitSliderBarV, + .dijitSliderBumperV { + width: $slider-bar-width; + } + + .dijitSlider { + .dijitSliderTopBumper { + border-radius: $slider-bar-radius $slider-bar-radius 0 0; + border: 0 none; + margin-top: $slider-bar-spacing; + margin-bottom: -2px; + } + .dijitSliderBottomBumper { + border-radius: 0 0 $slider-bar-radius $slider-bar-radius; + border: 0 none; + margin-bottom: $slider-bar-spacing; + } + + .dijitSliderProgressBarV, + .dijitSliderBottomBumper { + border: 0 none; + background-color: $slider-progressbar-verticalr-background-color; + background-image: none; + } + .dijitSliderRemainingBarV, + .dijitSliderTopBumper { + border: 0 none; + background-color: $slider-remainingbar-vertical-background-color; + } + } + + /* hover */ + + .dijitSliderHover { + .dijitSliderProgressBarV, + .dijitSliderBottomBumper{ + background-color: darken($slider-progressbar-verticalr-background-color, 8%); + background-image: none; + } + .dijitSliderRemainingBarV, + .dijitSliderTopBumper { + } + } + + /* focused */ + + .dijitSliderFocused { + .dijitSliderProgressBarV, + .dijitSliderBottomBumper{ + box-shadow: none; + } + .dijitSliderRemainingBarV, + .dijitSliderTopBumper { + box-shadow: none; + } + } + + /* ------- Thumbs ------- */ + + .dijitSliderImageHandle { + background: $slider-thumb-background-color; + box-shadow: $slider-thumb-box-shadow; + border-radius: $slider-thumb-border-radius; + border: 1px solid $slider-thumb-border-color; + width: $slider-thumb-width; + height: $slider-thumb-height; + margin-top: -2px; + position: absolute; + box-sizing: border-box; + &:after { + content: ""; + display: block; + background: $slider-thumb-inner-background-color; + border-radius: $slider-thumb-inner-border-radius; + height: $slider-thumb-inner-height; + width: $slider-thumb-inner-width; + left: ($slider-thumb-width - $slider-thumb-inner-width) * 0.5 - 1px; + top: ($slider-thumb-height - $slider-thumb-inner-height) * 0.5 - 1px; + position: absolute; + } + } + + .dijitSliderImageHandleV { + margin-top: 0; + } + + /* hover & focused */ + + .dijitSliderHover, + .dijitSliderFocused { + .dijitSliderImageHandle { + box-shadow: $shadow-depth1_5; + } + } + + .dijitSliderDisabled.dijitSliderFocused { + .dijitSliderImageHandle { + &:after { + display: none; + } + } + } + + /* ---- Increment/Decrement Buttons ---- */ + + .dijitSliderDecrementIconH, + .dijitSliderIncrementIconH, + .dijitSliderDecrementIconV, + .dijitSliderIncrementIconV { + button-style(); + height: $slider-button-height; + width: $slider-button-width; + cursor: pointer; + color: $slider-button-text-color; + padding: 0; + } + + .dijitSliderDecrementIconH, + .dijitSliderIncrementIconH, + .dijitSliderDecrementIconV, + .dijitSliderIncrementIconV { + + /* hover */ + + &:hover{ + button-hover-style(); + } + + /* active */ + + &:active{ + button-active-style(); + } + } + + /* read only & disabled */ + + .dijitSliderReadOnly, + .dijitSliderDisabled { + .dijitSliderDecrementIconH, + .dijitSliderDecrementIconV, + .dijitSliderIncrementIconH, + .dijitSliderIncrementIconV { + opacity: $disabled-opacity; + } + } + + /* icons */ + + .dijitSliderButtonInner { + } + + .dijitSliderIncrementIconH, + .dijitSliderIncrementIconV, + .dijitSliderDecrementIconH, + .dijitSliderDecrementIconV { + _icon-core-style(); + &:before { + content: $slider-icon-increment; + top:0; + line-height: $slider-button-height; + } + .dijitSliderButtonInner { + display: none; + } + } + + .dijitSliderDecrementIconH, + .dijitSliderDecrementIconV { + &:before { + content: $slider-icon-decrement; + } + } + + /* ---- Rule Mark ---- */ + + .dijitRuleMark { + border: 0 none; + } + + .dijitRuleMarkH { + border-right: 1px solid $slider-ruler-color; + } + + .dijitRuleMarkV { + border-bottom: 1px solid $slider-ruler-color; + } + + .dijitRuleLabelContainerH { + margin-top: $slider-ruler-padding; + margin-bottom: $slider-ruler-padding; + } + + .dijitRuleLabelContainerV { + margin-left: $slider-ruler-padding; + margin-right: $slider-ruler-padding; + } + +}
\ No newline at end of file diff --git a/lib/flat/dijit/form/Slider_rtl.css b/lib/flat/dijit/form/Slider_rtl.css new file mode 100644 index 000000000..131dd19ae --- /dev/null +++ b/lib/flat/dijit/form/Slider_rtl.css @@ -0,0 +1,32 @@ +.flat .dijitSliderRtl .dijitSliderProgressBarH { + float: right; + right: 0; + left: auto; +} +.flat .dijitSliderRtl .dijitSliderLeftBumper { + border-left-width: 0; + border-right-width: 1px; + margin-left: 0; + margin-right: 4px; + border-radius: 0 1.5px 1.5px 0; +} +.flat .dijitSliderRtl .dijitSliderRightBumper { + border-left-width: 1px; + border-right-width: 0; + margin-left: 4px; + margin-right: -2px; + border-radius: 1.5px 0 0 1.5px; +} +.flat .dijitSliderRtl .dijitSliderMoveableH { + right: auto; + left: 0; +} +.flat .dijitSliderRtl .dijitSliderImageHandleV { + left: auto; +} +.flat .dijitSliderRtl .dijitSliderImageHandleH { + left: -50%; +} +.flat .dijitSliderRtl .dijitRuleContainerV { + float: right; +} diff --git a/lib/flat/dijit/form/Slider_rtl.styl b/lib/flat/dijit/form/Slider_rtl.styl new file mode 100755 index 000000000..f8c53d85b --- /dev/null +++ b/lib/flat/dijit/form/Slider_rtl.styl @@ -0,0 +1,39 @@ +@import 'dijit_form_variables'; + +.{$theme-name} { + + .dijitSliderRtl { + .dijitSliderProgressBarH { + float:right; + right:0; + left:auto; + } + .dijitSliderLeftBumper { + border-left-width: 0; + border-right-width: 1px; + margin-left: 0; + margin-right: $slider-bar-spacing; + border-radius: 0 $slider-bar-radius $slider-bar-radius 0; + } + .dijitSliderRightBumper { + border-left-width: 1px; + border-right-width: 0; + margin-left: $slider-bar-spacing; + margin-right: -2px; + border-radius: $slider-bar-radius 0 0 $slider-bar-radius; + } + .dijitSliderMoveableH { + right: auto; + left: 0; + } + .dijitSliderImageHandleV { + left:auto; + } + .dijitSliderImageHandleH { + left:-50%; + } + .dijitRuleContainerV { + float:right; + } + } +}
\ No newline at end of file diff --git a/lib/flat/dijit/form/TextBox.css b/lib/flat/dijit/form/TextBox.css new file mode 100644 index 000000000..568fb9e93 --- /dev/null +++ b/lib/flat/dijit/form/TextBox.css @@ -0,0 +1,275 @@ +/* Text Inputs: [TextBox | DateTextBox | CurrencyTextBox | ValidationTextBox | ...] | TextArea + * Mainly includes: + * + * 1. Containers + * .dijitTextBox + * .dijitInputField - container that wraps "dijitInputInner" or "dijitPlaceHolder" + * + * 2. Textbox input + * .dijitInputInner + * .dijitPlaceHolder + * + * 3. States - Hover, Focused, Disabled, Error, Error while Focused e.g. + * .dijitTextBoxHover + * .dijitTextBoxFocused + * .dijitTextBoxDisabled + * .dijitTextBoxError + * .dijitTextBoxErrorFocused + * +*/ +.flat .dijitTextBox, +.flat .dijitInputInner { + line-height: 20px; +} +.flat .dijitTextBox { + background: #fff; + border: 1px solid #9e9e9e; + border-radius: 3px; + -webkit-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; + -moz-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; + -o-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; + -ms-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; + transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; +} +.flat .dijitTextArea { + padding: 4px 6px; +} +.flat .dijitTextBox .dijitInputField { + padding: 0 4px; + margin: 0 2px; +} +.flat .dijitSelect.alt-primary, +.flat .dijitComboBox.alt-primary, +.flat .dijitSpinner.alt-primary { + border-color: #1e88e5; +} +.flat .dijitSelect.alt-success, +.flat .dijitComboBox.alt-success, +.flat .dijitSpinner.alt-success { + border-color: #43a047; +} +.flat .dijitSelect.alt-info, +.flat .dijitComboBox.alt-info, +.flat .dijitSpinner.alt-info { + border-color: #03a9f4; +} +.flat .dijitSelect.alt-warning, +.flat .dijitComboBox.alt-warning, +.flat .dijitSpinner.alt-warning { + border-color: #fb8c00; +} +.flat .dijitSelect.alt-danger, +.flat .dijitComboBox.alt-danger, +.flat .dijitSpinner.alt-danger { + border-color: #e53935; +} +.flat .dijitSelect.alt-inverse, +.flat .dijitComboBox.alt-inverse, +.flat .dijitSpinner.alt-inverse { + border-color: #616161; +} +.flat .dijitTextBox .dijitInputInner, +.flat .dijitValidationTextBox .dijitValidationContainer, +.flat .dijitTextBox .dijitInputField .dijitPlaceHolder { + padding: 4px; +} +.flat .dijitTextBoxHover { + border-color: #2196f3; + -webkit-transition-duration: 0.25s; + -moz-transition-duration: 0.25s; + -o-transition-duration: 0.25s; + -ms-transition-duration: 0.25s; + transition-duration: 0.25s; +} +.flat .dijitTextBoxFocused { + border-color: #2196f3; + -webkit-transition-duration: 0.1s; + -moz-transition-duration: 0.1s; + -o-transition-duration: 0.1s; + -ms-transition-duration: 0.1s; + transition-duration: 0.1s; +} +.flat .dijitTextBoxDisabled { + color: #9e9e9e; + background-color: #f5f5f5; + border-color: #e3e3e3; +} +.flat .dijitComboBoxDisabled.alt-primary, +.flat .dijitSpinnerDisabled.alt-primary { + background: #f5f5f5; + color: #9e9e9e; + border: 1px solid #6db2ee; +} +.flat .dijitComboBoxDisabled.alt-primary .dijitButtonNode, +.flat .dijitSpinnerDisabled.alt-primary .dijitButtonNode { + background: #6db2ee; + color: #f2f2f2; +} +.flat .dijitSpinnerDisabled.alt-primary .dijitSpinnerButtonContainer { + border-left-color: #6db2ee; +} +.flat .dijitSpinnerRtlDisabled.alt-primary .dijitSpinnerButtonContainer { + border-right-color: #6db2ee; +} +.flat .dijitSelectDisabled.alt-primary { + border-color: #6db2ee; +} +.flat .dijitSelectDisabled.alt-primary .dijitStretch, +.flat .dijitSelectDisabled.alt-primary .dijitButtonNode { + background: #6db2ee; + color: #f2f2f2; +} +.flat .dijitComboBoxDisabled.alt-success, +.flat .dijitSpinnerDisabled.alt-success { + background: #f5f5f5; + color: #9e9e9e; + border: 1px solid #7dc981; +} +.flat .dijitComboBoxDisabled.alt-success .dijitButtonNode, +.flat .dijitSpinnerDisabled.alt-success .dijitButtonNode { + background: #7dc981; + color: #f2f2f2; +} +.flat .dijitSpinnerDisabled.alt-success .dijitSpinnerButtonContainer { + border-left-color: #7dc981; +} +.flat .dijitSpinnerRtlDisabled.alt-success .dijitSpinnerButtonContainer { + border-right-color: #7dc981; +} +.flat .dijitSelectDisabled.alt-success { + border-color: #7dc981; +} +.flat .dijitSelectDisabled.alt-success .dijitStretch, +.flat .dijitSelectDisabled.alt-success .dijitButtonNode { + background: #7dc981; + color: #f2f2f2; +} +.flat .dijitComboBoxDisabled.alt-info, +.flat .dijitSpinnerDisabled.alt-info { + background: #f5f5f5; + color: #9e9e9e; + border: 1px solid #56c9fd; +} +.flat .dijitComboBoxDisabled.alt-info .dijitButtonNode, +.flat .dijitSpinnerDisabled.alt-info .dijitButtonNode { + background: #56c9fd; + color: #f2f2f2; +} +.flat .dijitSpinnerDisabled.alt-info .dijitSpinnerButtonContainer { + border-left-color: #56c9fd; +} +.flat .dijitSpinnerRtlDisabled.alt-info .dijitSpinnerButtonContainer { + border-right-color: #56c9fd; +} +.flat .dijitSelectDisabled.alt-info { + border-color: #56c9fd; +} +.flat .dijitSelectDisabled.alt-info .dijitStretch, +.flat .dijitSelectDisabled.alt-info .dijitButtonNode { + background: #56c9fd; + color: #f2f2f2; +} +.flat .dijitComboBoxDisabled.alt-warning, +.flat .dijitSpinnerDisabled.alt-warning { + background: #f5f5f5; + color: #9e9e9e; + border: 1px solid #ffb557; +} +.flat .dijitComboBoxDisabled.alt-warning .dijitButtonNode, +.flat .dijitSpinnerDisabled.alt-warning .dijitButtonNode { + background: #ffb557; + color: #f2f2f2; +} +.flat .dijitSpinnerDisabled.alt-warning .dijitSpinnerButtonContainer { + border-left-color: #ffb557; +} +.flat .dijitSpinnerRtlDisabled.alt-warning .dijitSpinnerButtonContainer { + border-right-color: #ffb557; +} +.flat .dijitSelectDisabled.alt-warning { + border-color: #ffb557; +} +.flat .dijitSelectDisabled.alt-warning .dijitStretch, +.flat .dijitSelectDisabled.alt-warning .dijitButtonNode { + background: #ffb557; + color: #f2f2f2; +} +.flat .dijitComboBoxDisabled.alt-danger, +.flat .dijitSpinnerDisabled.alt-danger { + background: #f5f5f5; + color: #9e9e9e; + border: 1px solid #ee7e7c; +} +.flat .dijitComboBoxDisabled.alt-danger .dijitButtonNode, +.flat .dijitSpinnerDisabled.alt-danger .dijitButtonNode { + background: #ee7e7c; + color: #f2f2f2; +} +.flat .dijitSpinnerDisabled.alt-danger .dijitSpinnerButtonContainer { + border-left-color: #ee7e7c; +} +.flat .dijitSpinnerRtlDisabled.alt-danger .dijitSpinnerButtonContainer { + border-right-color: #ee7e7c; +} +.flat .dijitSelectDisabled.alt-danger { + border-color: #ee7e7c; +} +.flat .dijitSelectDisabled.alt-danger .dijitStretch, +.flat .dijitSelectDisabled.alt-danger .dijitButtonNode { + background: #ee7e7c; + color: #f2f2f2; +} +.flat .dijitComboBoxDisabled.alt-inverse, +.flat .dijitSpinnerDisabled.alt-inverse { + background: #f5f5f5; + color: #9e9e9e; + border: 1px solid #989898; +} +.flat .dijitComboBoxDisabled.alt-inverse .dijitButtonNode, +.flat .dijitSpinnerDisabled.alt-inverse .dijitButtonNode { + background: #989898; + color: #f2f2f2; +} +.flat .dijitSpinnerDisabled.alt-inverse .dijitSpinnerButtonContainer { + border-left-color: #989898; +} +.flat .dijitSpinnerRtlDisabled.alt-inverse .dijitSpinnerButtonContainer { + border-right-color: #989898; +} +.flat .dijitSelectDisabled.alt-inverse { + border-color: #989898; +} +.flat .dijitSelectDisabled.alt-inverse .dijitStretch, +.flat .dijitSelectDisabled.alt-inverse .dijitButtonNode { + background: #989898; + color: #f2f2f2; +} +.flat .dijitTextBoxError, +.flat .dijitTextBoxError .dijitButtonNode { + border-color: #dd2c00; +} +.flat .dijitTextBoxErrorFocused, +.flat .dijitTextBoxErrorFocused .dijitButtonNode { + border: 1px solid #bc2500; +} +.flat .dijitValidationTextBoxError .dijitValidationContainer { + color: #dd2c00; + width: 18px; + font-family: "flat-icon"; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + font-size: 16px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-size: 18px; +} +.flat .dijitValidationTextBoxError .dijitValidationContainer:before { + content: "\f017"; +} +.flat .dijitValidationTextBoxError .dijitValidationIcon { + display: none; +} diff --git a/lib/flat/dijit/form/TextBox.styl b/lib/flat/dijit/form/TextBox.styl new file mode 100755 index 000000000..b8a1da2e6 --- /dev/null +++ b/lib/flat/dijit/form/TextBox.styl @@ -0,0 +1,104 @@ +/* Text Inputs: [TextBox | DateTextBox | CurrencyTextBox | ValidationTextBox | ...] | TextArea + * Mainly includes: + * + * 1. Containers + * .dijitTextBox + * .dijitInputField - container that wraps "dijitInputInner" or "dijitPlaceHolder" + * + * 2. Textbox input + * .dijitInputInner + * .dijitPlaceHolder + * + * 3. States - Hover, Focused, Disabled, Error, Error while Focused e.g. + * .dijitTextBoxHover + * .dijitTextBoxFocused + * .dijitTextBoxDisabled + * .dijitTextBoxError + * .dijitTextBoxErrorFocused + * +*/ + +@import 'dijit_form_variables'; + +.{$theme-name} { + + .dijitTextBox, + .dijitInputInner { + line-height: $line-height; + } + + .dijitTextBox { + background: $input-background; + border: 1px solid $input-border-color; + border-radius: $input-border-radius; + transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; + } + + .dijitTextArea { + padding: $input-padding $input-padding + 2px; + } + + .dijitTextBox { + .dijitInputField { + padding: 0 $input-padding; + margin:0 2px; + } + } + + create-alternative-textboxes($button-alternative-colors); + + .dijitTextBox .dijitInputInner, + .dijitValidationTextBox .dijitValidationContainer, + .dijitTextBox .dijitInputField .dijitPlaceHolder { + padding: $input-padding; + } + + // hover + .dijitTextBoxHover { + border-color: $input-hover-border-color; + transition-duration: .25s; + } + + // focused + .dijitTextBoxFocused { + border-color: $input-focused-border-color; + transition-duration: .1s; + } + + // disabled + .dijitTextBoxDisabled { + color: $input-disabled-color; + background-color: $input-disabled-background-color; + border-color: $input-disabled-border-color; + } + + create-alternative-textboxes-disabled($button-alternative-colors); + + // error + .dijitTextBoxError, + .dijitTextBoxError .dijitButtonNode { + border-color: $input-error-border-color; + } + + // error: focused + .dijitTextBoxErrorFocused, + .dijitTextBoxErrorFocused .dijitButtonNode { + border: $input-focused-error-border; + } + + // error: icon + .dijitValidationTextBoxError { + .dijitValidationContainer { + color: $input-error-icon-background-color; + width: $input-error-icon-width; + _icon-core-style(); + font-size: $input-error-icon-width; + &:before { + content: $icon-error; + } + } + .dijitValidationIcon { + display: none; + } + } +}
\ No newline at end of file diff --git a/lib/flat/dijit/form/TextBox_rtl.css b/lib/flat/dijit/form/TextBox_rtl.css new file mode 100644 index 000000000..9117b674d --- /dev/null +++ b/lib/flat/dijit/form/TextBox_rtl.css @@ -0,0 +1,21 @@ +.flat .dijitTextBoxRtl .dijitValidationContainer, +.flat .dijitTextBoxRtl .dijitSpinnerButtonContainer { + border-right-width: 1px !important; + border-left-width: 0 !important; +} +.flat .dijitTextBoxRtlError .dijitValidationContainer { + border-left-width: 0; + border-right-width: 1px; +} +.flat .dijitRtl .dijitPlaceHolder { + left: auto; + right: 0; +} +.flat .dijitTextBoxRtl .dijitSpinnerButtonContainer, +.flat .dijitValidationTextBoxRtl .dijitValidationContainer, +.flat .dijitTextBoxRtl .dijitArrowButtonContainer { + float: left; +} +.flat div.dijitNumberTextBoxRtl { + text-align: right; +} diff --git a/lib/flat/dijit/form/TextBox_rtl.styl b/lib/flat/dijit/form/TextBox_rtl.styl new file mode 100755 index 000000000..b7ec2bd08 --- /dev/null +++ b/lib/flat/dijit/form/TextBox_rtl.styl @@ -0,0 +1,30 @@ +@import 'dijit_form_variables'; + +.{$theme-name} { + .dijitTextBoxRtl .dijitValidationContainer, + .dijitTextBoxRtl .dijitSpinnerButtonContainer { + border-right-width: 1px !important; + border-left-width: 0 !important; + } + + .dijitTextBoxRtlError .dijitValidationContainer { + border-left-width: 0; + border-right-width: 1px; + } + + .dijitRtl .dijitPlaceHolder { + left: auto; + right: 0; + } + + .dijitTextBoxRtl .dijitSpinnerButtonContainer, + .dijitValidationTextBoxRtl .dijitValidationContainer, + .dijitTextBoxRtl .dijitArrowButtonContainer { + float: left; + } + + div.dijitNumberTextBoxRtl { + text-align: right; + } + +}
\ No newline at end of file diff --git a/lib/flat/dijit/form/dijit_form_variables.styl b/lib/flat/dijit/form/dijit_form_variables.styl new file mode 100644 index 000000000..ad1163a61 --- /dev/null +++ b/lib/flat/dijit/form/dijit_form_variables.styl @@ -0,0 +1,212 @@ +/* dijit/form/* variables */ + +@import '../../variables'; + +/* Button (default) */ + +$button-default-color = $theme-base-color; +$button-default-border-color = $border-color; +$button-padding = $padding $padding * 3; +$button-border-radius = $border-radius; + +// arrow button +$button-arrow-width = $line-height; // The arrow button size will be 30px by 30px +$button-arrow-padding = $padding; + +// disabled +$button-disabled-color = $disabled-color; +$button-disabled-background-color = $disabled-background-color; +$button-disabled-border-color = $disabled-border-color; + +// alternatice button styles + +$button-alternative-text-color = $theme-base-color; +$button-alternative-colors = { + alt-primary: $primary, + alt-success: $success, + alt-info: $info, + alt-warning: $warning, + alt-danger: $danger, + alt-inverse: $inverse +}; + +/* Text Inputs (textbox, textarea, validation textbox, etc.) */ + +$input-padding = $padding; +$input-border-radius = $border-radius; + +// normal +$input-border-color = $border-color; +$input-background = $theme-base-color; + +// hover +$input-hover-border-color = $theme-base; + +// focused +$input-focused-border-color = $theme-base; + +// disabled +$input-disabled-color = $disabled-color; +$input-disabled-background-color = $disabled-background-color; +$input-disabled-border-color = $disabled-border-color; + +// error +$input-error-border-color = $error; + +// error: focused +$input-focused-error-border = 1px solid darken($error, 15%); + +// error icon +$input-error-icon-width = 18px; // the width of the error icon container and icon height +$input-error-icon-background-color = $error; + +/* CheckBox (and Checkbox Icon) */ + +$checkbox-height = 16px; +$checkbox-width = 16px; +$checkbox-padding = 0; +$checkbox-border-radius = 2px; +$checkbox-icon-size = $icon-size; +$checkbox-icon = "\f00c"; + +// normal +$checkbox-background-color = $theme-base-color; +$checkbox-border-color = $border-color; + +// checked +$checkbox-checked-icon-color = $theme-base-color; +$checkbox-checked-background-color = $theme-base; +$checkbox-checked-border-color = $theme-base; + +// hover +// hover unchecked +$checkbox-hover-unchecked-background-color = $checkbox-background-color; +$checkbox-hover-unchecked-border-color = 1px solid $theme-base; + +// hover checked +$checkbox-hover-checked-background-color = lighten($checkbox-checked-background-color, 15%); +$checkbox-hover-checked-border-color = $checkbox-checked-border-color; + +// Checkbox icon (within a widget, e.g. toggle button) +$checkbox-icon-checked-icon-color = $theme-base; +$checkbox-icon-padding = 0; + +// disabled +$checkbox-disabled-color = $disabled-color; +$checkbox-disabled-background-color = $disabled-background-color; +$checkbox-disabled-border-color = $disabled-border-color; +$checkbox-checked-disabled-color = darken($checkbox-checked-icon-color, 35%); // may need a &:before for icon in Checkbox.styl +$checkbox-checked-disabled-background-color = lighten($checkbox-checked-background-color, 35%); +$checkbox-checked-disabled-border-color = $checkbox-checked-disabled-background-color; + +/* Radio (and Radio Icon)the styles are using pure CSS */ + +$radio-height = 16px; +$radio-width = 16px; +$radio-icon-size = 16px; + +// normal +$radio-background-color = $theme-base-color; +$radio-border-color = $theme-base; +$radio-border-radius = 50%; + +// checked +$radio-checked-color = $theme-base; + +// hover +$radio-hover-border-color = lighten($radio-checked-color, 25%); + +// disabled +$radio-disabled-background-color = $disabled-background-color; +$radio-disabled-border-color = $disabled-border-color; +$radio-checked-disabled-color = lighten($radio-checked-color, 35%); // both border and check + +/* Select (only for the button part, the styles for the "dropdown" are defined in the "Menu" section) */ + +$select-border = 1px solid $border-color; +$select-button-border-radius = $border-radius * (2/3); + +// Select's normal, hover, active and disabled styles are the same as "form/Button" + +// focus +$select-focus-border = $select-border; + +// icons +$select-date-icon = "\f01e"; +$select-time-icon = "\f01f"; + +/* Slider */ + +// bar +$slider-bar-width = 3px;// the height for the horizontal slider and the width for the vertical slider +$slider-bar-radius = $slider-bar-width * .5; +$slider-bar-spacing = $padding;// the spacing between the buttons and the bar + +// honrizontal slider +// normal +$slider-progressbar-background-color = $theme-base;// Background color for the progress(highlight) part of slider bar +$slider-remainingbar-background-color = $border-color;// Background color for the remaining part of slider bar + +// hover +$slider-hovered-progressbar-border-color = darken($theme-base, 25%); + +// focus +$slider-focused-progressbar-border-color = $slider-progressbar-border-color; + +// vertical slider +// normal +$slider-progressbar-verticalr-background-color = $theme-base; +$slider-remainingbar-vertical-background-color = $slider-remainingbar-background-color; + +// hover +$slider-hovered-progressbar-vertical-border-color = $slider-hovered-progressbar-border-color; + +// focus +$slider-focused-progressbar-vertical-border-color = $slider-progressbar-vertical-border-color; + +// thumbs +$slider-thumb-background-color = $theme-base-color; +$slider-thumb-box-shadow = $shadow-depth1; +$slider-thumb-border-radius = 50%; +$slider-thumb-border-color = $theme-base; +$slider-thumb-height = 16px; +$slider-thumb-width = 16px; + +// The center part of the thumb +$slider-thumb-inner-border-radius = 50%; +$slider-thumb-inner-height = 10px; +$slider-thumb-inner-width = 10px; +$slider-thumb-inner-background-color = $theme-base; + +// hover (& focused) +$slider-thumb-hover-box-shadow = $shadow-depth2; + +// label +$slider-label-text-color = $grey-dark; // text color for labeling + +// ruler +$slider-ruler-color = $grey-light; +$slider-ruler-padding = $padding * 0.5; + +// increment and decrement buttons +$slider-button-text-color = $theme-base; +$slider-button-width = 20px; +$slider-button-height = $slider-button-width; +$slider-icon-increment = "\f011"; +$slider-icon-decrement = "\f012"; + +/* Number Spinner */ + +$numberspinner-button-border = 1px solid $border-color; +$numberspinner-button-inner-padding = $padding; +$numberspinner-button-width = ($line-height + $numberspinner-button-inner-padding * 2) + 2px; // 30px +$numberspinner-button-padding = 0; +$numberspinner-arrow-padding = $padding; +$numberspinner-button-border-radius = $border-radius * (2/3); + +// icons +$numberspinner-icon-up = $icon-drop-up; +$numberspinner-icon-down = $icon-drop-down; + +// number spinner button's normal, active and disabled status styles are the same as "form/Button" +// and the styles of the text input field are the same as "form/TextBox", which is defined in "form/Common.styl" |