| //// |
| /// @group root/variables-osbp |
| //// |
| |
| @import "components/functions.scss"; |
| |
| /***************************/ |
| /** Vaadin/Valo-Variables **/ |
| |
| $v-app-loading-text: "OSBP"; |
| $v-unit-size: 22px; |
| |
| $v-textfield-disabled-opacity: 1; |
| |
| /* $v-luminance-threshold: 150 !default; */ |
| |
| $v-app-background-color: #fff; |
| |
| //// Don't load fontawesome via valo theme |
| $v-font-awesome: false; |
| |
| /// Main color accent of theme; not available as valo variable. |
| $os-base-color: #1f567d; |
| $valo-menu-background-color: $os-base-color; //scale-color($v-app-background-color, $lightness: if(color-luminance($v-app-background-color) < 10, 15%, -70%)) !default; |
| $v-table-background-color: $v-app-background-color; |
| $v-focus-color: #f5863c; |
| $v-font-family: Arial; |
| $v-font-size: 12px; |
| $v-line-height: $v-font-size * 1.75; //$os-line-height-factor: 1.6; |
| |
| $v-loading-indicator-bar-height: floor($v-unit-size * 0.1); |
| |
| |
| $v-table-row-height: $v-unit-size; |
| $v-default-field-width: make_even($v-unit-size * 10); //$v-unit-size * 5 !default; |
| |
| |
| /// Overriding default-value 0.75 (affects v-grid) |
| $v-scaling-factor--tiny: 1 !default; //0.75 |
| $v-scaling-factor--small: 0.85 !default; |
| $v-scaling-factor--large: 1.4 !default; //1.2 |
| $v-scaling-factor--huge: 1.8 !default; //1.6 |
| /* $os-l-font-factor: 1.4; */ |
| /* $os-xl-font-factor: 1.8; */ |
| |
| /* $v-border: $os-border-width $os-border-style $os-border-color !default; */ |
| /// $v-border default is useless, v-shade doesn't compile for some reason |
| $v-border: 1px solid get_contrast($strength: 17, $v-app-background-color, $desaturate: false) !default; |
| $v-border-radius: 0px; |
| |
| |
| |
| /// Set this for v-layout-margin-* when you're too lazy to type the same value four times. |
| $os-layout-margin: $v-unit-size * 0.5; |
| $v-layout-margin-top: $os-layout-margin; |
| $v-layout-margin-left: $os-layout-margin; |
| $v-layout-margin-right: $os-layout-margin; |
| $v-layout-margin-bottom: $os-layout-margin; |
| $v-layout-spacing-vertical: make_even($v-unit-size/3) !default; |
| $v-layout-spacing-horizontal: make_even($v-unit-size/3) !default; |
| |
| $v-tabsheet-content-animation-enabled: false; //default: true |
| |
| |
| /// When v-gradient is set to false, still set a gradient in some places. |
| $os-gradient: v-linear 5%; |
| $v-gradient: false; |
| /// Setting might irritate POS dimensions. @todo recalculate |
| $v-bevel: false; |
| $os-shadow-range: 7px; |
| $v-shadow: 1px 3px $os-shadow-range transparentize(#000, 0.9); |
| $v-textfield-shadow: false; |
| $v-shadow-opacity: 10% !default; |
| $v-focus-style: 0 0 0 1px transparent; //Focus-shadow/glow-color. Default = glow // 0 0 0 2px rgba($v-focus-color, .5) !default; |
| /*$v-hover-styles-enabled: false /*true !default;*/ |
| |
| /****************************************/ |
| /*** ADDITIONAL OS-SPECIFIC VARIABLES ***/ |
| |
| /// Can be set and used in places where a theme-variant needs deviating style definitions. |
| $os-theme-desig: "osbp"; |
| |
| $os-loading-animation: url('load_spinner_3.gif'); |
| $os-login-background-image: url('os-bee-logo-2016-cmyk_transparent.png'); |
| |
| /** os-related Switches **/ |
| $os-button-uppercase: true; |
| $os-img-size-override: false; |
| $os-bordered: false; |
| $os-cash-zoom-factor: 1.6; /* 1 */ |
| $os-cash-display-zoom-factor: 2.35; |
| |
| $os-odd-highlight: $v-focus-color; |
| $os-button-as-tab: $v-focus-color; //header |
| |
| $os-light-contrast: get_contrast($strength: 7, $v-app-background-color, $desaturate: false); |
| $os-mid-contrast: get_contrast($strength: 37, $v-app-background-color, $desaturate: false); |
| $os-dark-contrast: get_contrast($strength: 67, $v-app-background-color, $desaturate: false); |
| |
| /* textfield background, table background */ |
| |
| $os-button-color: $os-base-color; |
| $os-color-contrast: $os-light-contrast; |
| $os-textfield-shade: $os-light-contrast; |
| |
| /// Lighter version of $v-focus-color as textfield background |
| $os-focus-color: get_color_mix($v-focus-color, #fff, 50); |
| $os-base-color-light: get_color_mix($os-base-color, #fff, 50); |
| |
| $os-splitter-shade: $os-light-contrast; |
| $os-main-header-bg: $os-light-contrast; |
| $os-sub-header-bg: $os-light-contrast; |
| |
| /// Used to determine the correct size of font icons according to unit. |
| $os-font-unit: px; |
| |
| /// Valo default is border-width. Not enough. |
| $os-splitter-size: make_even($v-unit-size/2.75); |
| |
| /// Override valo defaults. |
| $os-button-height: $v-unit-size + floor($v-unit-size/3); |
| /// @todo figure out if this is needed. |
| $os-button-width: $v-unit-size*7; |
| |
| /// Only used once so far, but probably still useful. |
| $os-shadow-reversed: 0px -2px 2px transparentize(#000, 0.9); |
| /// @todo replace with valo-text-shadow; |
| $os-text-shadow: 0px 1px 1px transparentize(#000, 0.8); |
| |
| |
| |
| /* $os-luminance-threshold: 150 ;//150 !default */ |
| /* $os-loading-bar-height: 2px; */ |
| /* $os-loading-bar-color: $os-highlight-color; */ |
| /* $os-progress-important: #be1e2d; */ |
| |
| /* $os-shadow: 1px 3px 7px transparentize(#000, 0.9); */ |
| |
| /* get_contrast */ |
| /* $os-fn-desaturate: false; //default: true */ |
| /* $os-fn-light: 7; */ |
| /* $os-fn-border: 17; */ |
| /* $os-fn-medium: 37; */ |
| /* $os-fn-strong: 67; */ |
| /* $v-textfield-bevel: false; */ |
| |
| /** OS-Variables **/ |
| /* $os-background-color: #fff;// #334455; */ |
| |
| /* $os-base-color: #1f567d; //blau */ |
| |
| /* $os-highlight-color: #EF7F1E; //orange #F5832F, #f39200, #F2910D */ |
| /* $os-highlight-color: #c37f27; //gelblich */ |
| /* $os-highlight-color: #c35127; //roetlich */ |
| /* $os-highlight-color: #f5863c; */ |
| |
| |
| /* |
| $v-overlay-background-color: $os-orange; |
| */ |
| /* alternatives: desaturate(lighten($os-base-color, 25), 10%) */ |
| /* $v-focus-color: hsl(218, 80%, 60%); |
| $v-border: 1px solid (v-shade 0.6); |
| $v-border-radius: 0px; |
| $v-bevel: inset 0 1px 0 v-tint; |
| $v-textfield-bevel: false; |
| $v-gradient: v-linear 3%; |
| $v-shadow: false; |
| $v-friendly-color: hsl(163, 61%, 41%); |
| $v-error-indicator-color: hsl(349, 66%, 56%); |
| $v-font-family: Arial; |
| $v-font-size: 12px; |
| $v-line-height: 1.618;*/ |