/* * Includes icon and alternate color mixin functions. */ /* helpers */ // to calculate when the value is an even number or not isEven($value) { if ($value % 2 == 0) { true; } else { false; } } // to take half of the given value half($value) { $value / 2; } /* icons */ // line-height and font-size can be overridden after calling _icon-core-style() _icon-core-style() { font-family: $icon-font-family; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; font-size: $icon-size; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Button */ _button-hover(color) { background: darken(color, 5%); border-color: darken(color, 15%); } _button-active(color) { background: darken(color, 12%); border-color: darken(color, 30%); } _button-disabled(color) { background: lighten(color, 35%); border-color: lighten(color, 22%) color: darken($button-alternative-text-color, 5%); } // common button style properties button-style() { border-style: solid; border-width: 1px; border-color: $border-color; padding: $padding; border-radius: $border-radius; line-height: $line-height; cursor: pointer; transition: all 0.05s linear; background: $theme-base-color; } button-hover-style() { transition: all 0.1s; _button-hover($theme-base-color); } button-active-style() { transition: none; outline: none; box-shadow: $shadow-inset; _button-active($theme-base-color); } button-disabled-style() { cursor: default; color: $button-disabled-color; background-color: $button-disabled-background-color; border-color: $button-disabled-border-color; } // alternative colors create-alternative-buttons(colors) { colors = arguments if length(arguments) >= 1; for class in colors { .dijitButton.{class} .dijitButtonNode, .dijitDropDownButton.{class} .dijitButtonNode, .dijitComboButton.{class} .dijitButtonNode, .dijitToggleButton.{class} .dijitButtonNode, .dijitComboBox.{class} .dijitButtonNode, .dijitSelect.{class} .dijitButtonContents, .dijitSelect.{class} .dijitButtonNode, .dijitSpinner.{class} .dijitArrowButton { background: colors[class]; color: $button-alternative-text-color; border-color: darken(colors[class], 18.5%); } // combo button border .dijitComboButton.{class} .dijitStretch { border-right-color: darken(colors[class], 18.5%); } .dijitComboButtonRtl.{class} .dijitStretch { border-left-color: darken(colors[class], 18.5%);; } } } create-alternative-buttons-hover(colors) { colors = arguments if length(arguments) >= 1; for class in colors { .dijitButtonHover.{class} .dijitButtonNode, .dijitDropDownButtonHover.{class} .dijitButtonNode, .dijitComboButton.{class} .dijitButtonNodeHover, .dijitComboButton.{class} .dijitDownArrowButtonHover, .dijitToggleButtonHover.{class} .dijitButtonNode, .dijitComboBoxHover.{class} .dijitButtonNode, .dijitSelectHover.{class} .dijitButtonContents, .dijitSelectHover.{class} .dijitButtonNode, .dijitSelect.dijitSelectOpened.{class} .dijitButtonContents, .dijitSelect.dijitSelectOpened.{class} .dijitArrowButton, .dijitSpinner.{class} .dijitUpArrowButtonHover, .dijitSpinner.{class} .dijitDownArrowButtonHover { _button-hover(colors[class]); } } } create-alternative-buttons-active(colors) { colors = arguments if length(arguments) >= 1; for class in colors { .dijitButtonActive.{class} .dijitButtonNode, .dijitDropDownButtonActive.{class} .dijitButtonNode, .dijitComboButton.{class} .dijitButtonNodeActive, .dijitToggleButtonActive.{class} .dijitButtonNode, .dijitComboBoxActive.{class} .dijitButtonNode, .dijitSelectActive.{class} .dijitButtonContents, .dijitSelectActive.{class} .dijitArrowButton, .dijitSelect.dijitSelectOpened.{class} .dijitButtonContents, .dijitSelect.dijitSelectOpened.{class} .dijitArrowButton , .dijitComboBox.{class} .dijitButtonNode.dijitHasDropDownOpen, .dijitSpinner.{class} .dijitUpArrowButtonActive, .dijitSpinner.{class} .dijitDownArrowButtonActive { _button-active(colors[class]); } } } create-alternative-buttons-disabled(colors) { colors = arguments if length(arguments) >= 1; for class in colors { .dijitButtonDisabled.{class}, .dijitDropDownButtonDisabled.{class}, .dijitComboButtonDisabled.{class}, .dijitToggleButtonDisabled.{class} { .dijitButtonNode { _button-disabled(colors[class]); } } // combo button border .dijitComboButtonDisabled.{class} .dijitStretch { border-right-color: lighten(colors[class], 22%); } .dijitComboButtonRtlDisabled.{class} .dijitStretch { border-left-color: lighten(colors[class], 22%); } // combo box .dijitComboBoxDisabled.{class} .dijitButtonNode { border-left-color: lighten(colors[class], 22%); } .dijitComboBoxRtlDisabled.{class} .dijitButtonNode { border-right-color: lighten(colors[class], 22%); } // time textbox .dijitTimeTextBoxDisabled.{class} .dijitButtonNode { border-left-color: lighten(colors[class], 22%); } .dijitTimeTextBoxRtlDisabled.{class} .dijitButtonNode { border-right-color: lighten(colors[class], 22%); } // date textbox .dijitDateTextBoxDisabled.{class} .dijitButtonNode { border-left-color: lighten(colors[class], 22%); } .dijitDateTextBoxRtlDisabled.{class} .dijitButtonNode { border-right-color: lighten(colors[class], 22%); } } } /* TextBox */ // alternative colors (Textboxes in Select, ComboBox, NumberSpinner, TimeTextBox and DateTextBox) create-alternative-textboxes(colors) { colors = arguments if length(arguments) >= 1; for class in colors { .dijitSelect.{class}, .dijitComboBox.{class}, .dijitSpinner.{class} { border-color: colors[class]; } } } create-alternative-textboxes-disabled(colors) { colors = arguments if length(arguments) >= 1; for class in colors { .dijitComboBoxDisabled.{class}, .dijitSpinnerDisabled.{class} { background: $disabled-background-color; color: $disabled-color; border: lighten(colors[class], 35%); } .dijitComboBoxDisabled.{class} .dijitButtonNode, .dijitSpinnerDisabled.{class} .dijitButtonNode { background: lighten(colors[class], 35%); color: darken($button-alternative-text-color, 5%); } // number spinner border .dijitSpinnerDisabled.{class} .dijitSpinnerButtonContainer { border-left-color: lighten(colors[class], 35%); } .dijitSpinnerRtlDisabled.{class} .dijitSpinnerButtonContainer { border-right-color: lighten(colors[class], 35%);; } // select .dijitSelectDisabled.{class} { border-color: lighten(colors[class], 35%); } .dijitSelectDisabled.{class} .dijitStretch, .dijitSelectDisabled.{class} .dijitButtonNode { background: lighten(colors[class], 35%); color: darken($button-alternative-text-color, 5%); } } } /* ProgressBar alternate colors */ _progress-bar-color-properties(color) { background-color: color; }