diff options
Diffstat (limited to 'lib/flat-ttrss/mixins.styl')
| -rwxr-xr-x | lib/flat-ttrss/mixins.styl | 238 |
1 files changed, 238 insertions, 0 deletions
diff --git a/lib/flat-ttrss/mixins.styl b/lib/flat-ttrss/mixins.styl new file mode 100755 index 000000000..77d87b792 --- /dev/null +++ b/lib/flat-ttrss/mixins.styl @@ -0,0 +1,238 @@ +/* + * 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; +}
\ No newline at end of file |