128 lines
3.2 KiB
SCSS
128 lines
3.2 KiB
SCSS
// Colors
|
|
|
|
$salmon: #FFA58A;
|
|
$salmon-dark: #D8522A;
|
|
$salmon-light: #F9EEE3;
|
|
|
|
$gray-1: #212121;
|
|
$gray-2: #4A4A4A;
|
|
$gray-3: #757575;
|
|
$gray-5:#BFBFBF;
|
|
$gray-6: #E2E2E2;
|
|
|
|
$color-info: #036DCF;
|
|
$color-success: #00840D;
|
|
$color-warning: #FA4C02;
|
|
|
|
// Typo
|
|
$base-font: 17;
|
|
$base-font-m: 16;
|
|
|
|
$fz-1: 52em / $base-font;
|
|
$fz-1m: 30em / $base-font-m;
|
|
$fz-2: 36em / $base-font;
|
|
$fz-2m: 26em / $base-font-m;
|
|
$fz-3: 26em / $base-font;
|
|
$fz-3m: 22em / $base-font-m;
|
|
$fz-4: 20em / $base-font;
|
|
$fz-small: 15em / $base-font;
|
|
$fz-xsmall: 13em / $base-font;
|
|
|
|
// layout
|
|
$header-width: 1440em / $base-font;
|
|
$header-mobile-height: 57px;
|
|
$topbar-mobile-height: 2rem;
|
|
|
|
// Core vars
|
|
$primary-color: $salmon-dark;
|
|
$font-family: roboto, sans-serif;
|
|
$font-size: 100% / ( 16 / $base-font );
|
|
$font-color: $gray-1;
|
|
$link-color: $font-color;
|
|
|
|
$width: 1210em / $base-font;
|
|
$mobile-limit: 1023px;
|
|
$very-small-limit: 35em;
|
|
$columns-gutter: 3rem;
|
|
|
|
$header-logo-size: 201px 54px;
|
|
$header-background-color: white;
|
|
$toplinks-style: none;
|
|
$toplinks-background: $gray-1;
|
|
|
|
$nav-background: $gray-1;
|
|
$nav-full-width-background: true;
|
|
$nav-color: white;
|
|
$nav-active-color: $salmon;
|
|
$nav-border-color: none;
|
|
$nav-menu-side: 28px;
|
|
$nav-after-image: false;
|
|
$nav-item-selected-background: transparent;
|
|
$nav-item-selected-color: $nav-active-color;
|
|
$nav-mobile-menu-background: $nav-background;
|
|
$nav-mobile-menu-item-color: $nav-color;
|
|
$nav-button-background: transparent;
|
|
$nav-button-color: $salmon-dark;
|
|
$nav-mobile-bottom-bar-color: $nav-color;
|
|
$nav-mobile-bottom-bar-background: $nav-background;
|
|
$nav-mobile-bottom-bar-hover-color: $nav-active-color;
|
|
$responsive-menu: left-to-right;
|
|
|
|
$timetable-cell-background: transparentize($salmon, 0.8);
|
|
$timetable-cell-hover-background: $salmon;
|
|
|
|
$title-background: transparent;
|
|
$title-color: $primary-color;
|
|
$title-font-size: $fz-2;
|
|
$title-weight: bold;
|
|
|
|
$cell-border: none;
|
|
$cell-background: transparent;
|
|
$cell-entry-color: $gray-2;
|
|
$cell-entry-border-color: $gray-6;
|
|
$cell-entry-hover-color: $primary-color;
|
|
$cell-entry-hover-background: white;
|
|
|
|
$table-wrapper-background: white;
|
|
|
|
$button-background: white;
|
|
$button-color: $font-color;
|
|
$button-border: 2px solid $salmon;
|
|
$button-hover-background: $salmon;
|
|
|
|
$title-background: transparent;
|
|
|
|
$error-color: #D00000;
|
|
$form-sidebar-position: top;
|
|
$wcs-step-color: $font-color;
|
|
$wcs-step-current-color: $wcs-step-color;
|
|
$wcs-step-border-bottom: none;
|
|
$wcs-step-marker-size: 50px;
|
|
$wcs-step-marker-background: white;
|
|
$wcs-step-current-marker-color: white;
|
|
$wcs-step-current-marker-background: $wcs-step-color;
|
|
$wcs-step-marker-type: disc tied;
|
|
$wcs-step-marker-tie-width: 1px;
|
|
$wcs-step-marker-tie-color: $gray-5;
|
|
$wcs-steps-small-layout-limit: $mobile-limit;
|
|
|
|
$widget-border: 1px solid $gray-6;
|
|
$widget-focus-border: 1px solid $gray-3;
|
|
$widget-unique-checkbox-position: left;
|
|
$widget-padding: 19px 25px 21px 30px;
|
|
|
|
$form-accent-color: $gray-3;
|
|
$buttons-order: cancel, previous, submit;
|
|
$buttons-alignment: center;
|
|
$cancel-button-style: ".gray-button";
|
|
|
|
$notification-icon-size: 28px;
|
|
|
|
$notification_error_color: rgba($error-color, 0.15);
|
|
$notification_warning_color: rgba($color-warning, 0.15);
|
|
$notification_success_color: rgba($color-success, 0.15);
|
|
$notification_info_color: rgba($color-info, 0.15);
|
|
|
|
$footer-background: black;
|
|
$footer-color: white;
|