platypush/platypush/backend/http/static/css/source/common/vars.scss

114 lines
4.5 KiB
SCSS

//// Common defaults
$default-bg: white !default;
$default-bg-2: #f4f5f6 !default;
$default-bg-3: #f1f3f2 !default;
$default-bg-4: #edf0ee !default;
$default-bg-5: #f8f8f8 !default;
$default-bg-6: #e4e4e4 !default;
$default-fg: black !default;
$default-fg-2: #333333 !default;
$default-fg-3: #888888 !default;
$default-font-size: 15px !default;
$default-font-size-vertial: 25px !default;
$default-shadow: 2px 2px 2px #ccc !default;
$default-hover-fg: #35b870 !default;
$default-hover-fg-2: #38cf80 !default;
$default-font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$default-border: 1px solid #e1e4e8 !default;
$default-border-2: 1px solid #dddddd !default;
$default-border-3: 1px solid #cccccc !default;
$default-bottom: $default-border !default;
$default-link-fg: #5f7869 !default;
$font-size: $default-font-size !default;
$selected-bg: #c8ffd0 !default;
$hover-bg: #def6ea !default;
$header-bg: $default_bg !default;
$nav-height: 4.5rem !default;
$nav-bg: #e8e8e8 !default;
$nav-fg: $default-link-fg;
$nav-margin: .2rem;
$nav-date-time-shadow: .2rem .2rem .2rem #ccc !default;
//// Animations defaults
$transition-duration: .5s !default;
$fade-transition-duration: $transition-duration !default;
$roll-transition-duration: $transition-duration !default;
$fade-in-transition-duration: $fade-transition-duration !default;
$fade-out-transition-duration: $fade-transition-duration !default;
$roll-in-transition-duration: $roll-transition-duration !default;
$roll-out-transition-duration: $roll-transition-duration !default;
$active-glow-bg-1: #d4ffe3 !default;
$active-glow-bg-2: #9cdfb0 !default;
//// Notifications
$notification-bg: rgba(185, 255, 193, 0.9) !default;
$notification-hover-bg: rgba(160,245,178,0.95) !default;
$notification-warning-bg: rgba(228, 255, 78, 0.9) !default;
$notification-warning-hover-bg: rgba(218, 245, 68, 0.95) !default;
$notification-error-bg: rgba(255, 100, 100, 0.9) !default;
$notification-error-hover-bg: rgba(245, 90, 90, 0.95) !default;
$notification-border: 1px solid rgba(109, 205, 134, 0.62) !default;
$notification-warning-border: 1px solid rgba(205, 205, 109, 0.62) !default;
$notification-error-border: 1px solid rgba(205, 109, 109, 0.62) !default;
$notification-title-border: 1px solid rgba(83, 158, 102, 0.43) !default;
$notification-icon-color: black !default;
$notification-warning-icon-color: #662 !default;
$notification-error-icon-color: #8b0000 !default;
//// Switch element
$switch-bg-1: #f9f8f6 !default;
$switch-bg-2: #38ffa0 !default;
$switch-bg-3: #cccccc !default;
$switch-bg-hover: #b3b3b3 !default;
$switch-bg-checked: #38ffa0 !default;
$switch-bg-glow-1: #111111 !default;
$switch-bg-glow-2: #ffffff !default;
$switch-bg-glow-3: #aaaaaa !default;
$switch-bg-glow-hover: #ffffff !default;
$switch-bg-glow-checked: #00e094 !default;
$switch-shadow-1: 0 5px 10px 0px #333, 0 15px 20px 0px #cccccc !default;
$switch-shadow-2: inset 0 0 0 5px #ccc, inset 0 0 0 14px #f9f8f6 !default;
$switch-shadow-3: 0 0 0 2.5px #f9f8f6 !default;
$switch-shadow-hover: inset 0 0 0 5px #b3b3b3, inset 0 0 0 14px #f9f8f6 !default;
$switch-shadow-checked-1: 0 2px 5px 0px gray, 0 15px 20px 0px transparent !default;
$switch-shadow-checked-2: inset 0 0 0 5px #38ffa0, inset 0 0 0 14px #f9f8f6 !default;
$switch-shadow-glow-1: 0 5px 10px 0 #aaa, 0 0 0 3px #bbb, 0 0 8px 2px transparent, 0 0 0 6px #eee !default;
$switch-shadow-glow-2: inset 0 0 0 5px #aaa, inset 0 0 0 14px #fff !default;
$switch-shadow-glow-hover: inset 0 0 0 5px #fff, inset 0 0 0 14px #fff !default;
$switch-shadow-glow-checked-1: 0 0px 8px 0 #00ad72, 0 0 0 3px #00e094, 0 0 30px 0 #00e094, 0 0 0 6px #fff !default;
$switch-shadow-glow-checked-2: inset 0 0 0 5px #00e094, inset 0 0 0 14px #fff !default;
//// Slider element
$slider-bg: #e4e4e4 !default;
$slider-thumb-bg: rgba(0,215,80,1.0) !default;
$slider-thumb-disabled-bg: rgba(0,215,80,0.3) !default;
$slider-hover-on-hover-bg: #d2d2d2 !default;
$slider-progress-bg: rgba(0,215,80,0.2) !default;
//// Input element
$text-icon-color: #888;
$border-focus: 1px solid rgba(127, 216, 95, 0.83);
$border-hover: 1px solid rgba(159, 180, 152, 0.83);
$text-shadow: 2px 2px 2px #d4d4d4;
//// Header style
$header-bottom: $default-bottom;
//// Dropdown element
$dropdown-bg: rgba(241,243,242,0.9) !default;
$dropdown-disabled-color: #999 !default;
$dropdown-shadow: 1px 1px 1px #bbb !default;
//// Modal element
$modal-header-bg: #f0f0f0 !default;
$modal-header-border: 1px solid #ccc !default;
$modal-body-bg: white !default;
//// Autocomplete element
$autocomplete-bg: white !default;