mirror of
https://git.tt-rss.org/git/tt-rss.git
synced 2026-02-10 16:01:33 +00:00
initial
This commit is contained in:
Andrew Dolgov
646
lib/flat/dijit/form/Button.css
Normal file
646
lib/flat/dijit/form/Button.css
Normal file
@@ -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";
|
||||
}
|
||||
165
lib/flat/dijit/form/Button.styl
Executable file
165
lib/flat/dijit/form/Button.styl
Executable file
@@ -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;
|
||||
}
|
||||
}
|
||||
15
lib/flat/dijit/form/Button_rtl.css
Normal file
15
lib/flat/dijit/form/Button_rtl.css
Normal file
@@ -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;
|
||||
}
|
||||
27
lib/flat/dijit/form/Button_rtl.styl
Executable file
27
lib/flat/dijit/form/Button_rtl.styl
Executable file
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
131
lib/flat/dijit/form/Checkbox.css
Normal file
131
lib/flat/dijit/form/Checkbox.css
Normal file
@@ -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;
|
||||
}
|
||||
137
lib/flat/dijit/form/Checkbox.styl
Executable file
137
lib/flat/dijit/form/Checkbox.styl
Executable file
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
125
lib/flat/dijit/form/NumberSpinner.css
Normal file
125
lib/flat/dijit/form/NumberSpinner.css
Normal file
@@ -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;
|
||||
}
|
||||
124
lib/flat/dijit/form/NumberSpinner.styl
Executable file
124
lib/flat/dijit/form/NumberSpinner.styl
Executable file
@@ -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];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
4
lib/flat/dijit/form/NumberSpinner_rtl.css
Normal file
4
lib/flat/dijit/form/NumberSpinner_rtl.css
Normal file
@@ -0,0 +1,4 @@
|
||||
.flat .dijitSpinnerRtl .dijitSpinnerButtonContainer .dijitArrowButton {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
10
lib/flat/dijit/form/NumberSpinner_rtl.styl
Normal file
10
lib/flat/dijit/form/NumberSpinner_rtl.styl
Normal file
@@ -0,0 +1,10 @@
|
||||
@import 'dijit_form_variables';
|
||||
|
||||
.{$theme-name} {
|
||||
|
||||
.dijitSpinnerRtl .dijitSpinnerButtonContainer .dijitArrowButton {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
}
|
||||
157
lib/flat/dijit/form/RadioButton.css
Normal file
157
lib/flat/dijit/form/RadioButton.css
Normal file
@@ -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;
|
||||
}
|
||||
136
lib/flat/dijit/form/RadioButton.styl
Executable file
136
lib/flat/dijit/form/RadioButton.styl
Executable file
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
167
lib/flat/dijit/form/Select.css
Normal file
167
lib/flat/dijit/form/Select.css
Normal file
@@ -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;
|
||||
}
|
||||
164
lib/flat/dijit/form/Select.styl
Executable file
164
lib/flat/dijit/form/Select.styl
Executable file
@@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
15
lib/flat/dijit/form/Select_rtl.css
Normal file
15
lib/flat/dijit/form/Select_rtl.css
Normal file
@@ -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;
|
||||
}
|
||||
27
lib/flat/dijit/form/Select_rtl.styl
Normal file
27
lib/flat/dijit/form/Select_rtl.styl
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
300
lib/flat/dijit/form/Slider.css
Normal file
300
lib/flat/dijit/form/Slider.css
Normal file
@@ -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;
|
||||
}
|
||||
345
lib/flat/dijit/form/Slider.styl
Executable file
345
lib/flat/dijit/form/Slider.styl
Executable file
@@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
32
lib/flat/dijit/form/Slider_rtl.css
Normal file
32
lib/flat/dijit/form/Slider_rtl.css
Normal file
@@ -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;
|
||||
}
|
||||
39
lib/flat/dijit/form/Slider_rtl.styl
Executable file
39
lib/flat/dijit/form/Slider_rtl.styl
Executable file
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
275
lib/flat/dijit/form/TextBox.css
Normal file
275
lib/flat/dijit/form/TextBox.css
Normal file
@@ -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;
|
||||
}
|
||||
104
lib/flat/dijit/form/TextBox.styl
Executable file
104
lib/flat/dijit/form/TextBox.styl
Executable file
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
21
lib/flat/dijit/form/TextBox_rtl.css
Normal file
21
lib/flat/dijit/form/TextBox_rtl.css
Normal file
@@ -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;
|
||||
}
|
||||
30
lib/flat/dijit/form/TextBox_rtl.styl
Executable file
30
lib/flat/dijit/form/TextBox_rtl.styl
Executable file
@@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
212
lib/flat/dijit/form/dijit_form_variables.styl
Normal file
212
lib/flat/dijit/form/dijit_form_variables.styl
Normal file
@@ -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"
|
||||
Reference in New Issue
Block a user