ttrss/lib/flat-ttrss/dijit/form/dijit_form_variables.styl

213 lines
6.5 KiB
Stylus
Raw Normal View History

2018-12-04 19:24:31 +00:00
/* 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"