197 lines
4.9 KiB
SCSS
197 lines
4.9 KiB
SCSS
// colors
|
|
$alert-1: #FFE9E9;
|
|
$alert-2: #C60C0C;
|
|
$black: #0C0C12;
|
|
$blue-1: #E9FBFF;
|
|
$blue-4: #007C94;
|
|
$blue-5: #005A6B;
|
|
$gray-10: #27283B;
|
|
$gray-1: #FAFAFC;
|
|
$gray-2: #E2E1E6;
|
|
$gray-3: #C0C0CA;
|
|
$gray-5: #9696A1;
|
|
$gray-6: #80808C;
|
|
$gray-7: #6B6B78;
|
|
$gray-8: #525364;
|
|
$gray-9: #3f3f4f;
|
|
$green-1: #EEFFF0;
|
|
$green-4: #008910;
|
|
$information-1: #E9FFFE;
|
|
$information-2: #006AC4;
|
|
$pink-1: #FFEAF7;
|
|
$pink-4: #C10680;
|
|
$success-1: #EEFFF0;
|
|
$success-2: #03880F;
|
|
$warning-1: #FFF2EB;
|
|
$warning-2: #E86826;
|
|
$yellow-1: #fffae5;
|
|
$yellow-2: #ffeb99;
|
|
$yellow-3: #ffdc4c;
|
|
$yellow-4: #ffcd00;
|
|
$yellow-5: #e5b900;
|
|
|
|
$shadow-1: 0px 4px 8px rgba(39, 40, 59, 0.16);
|
|
$shadow-8: 0px 0px 10px rgba(12, 12, 18, 0.4);
|
|
|
|
// typo
|
|
$base-font: 10 / 16;
|
|
|
|
$font-size-0: 1.4rem * $base-font;
|
|
$font-size-1: 1.6rem * $base-font;
|
|
$font-size-2: 1.8rem * $base-font;
|
|
$font-size-3: 2rem * $base-font;
|
|
$font-size-4: 2.4rem * $base-font;
|
|
$font-size-5: 2.8rem * $base-font;
|
|
$font-size-6: 3.6rem * $base-font;
|
|
$font-size-7: 4.5rem * $base-font;
|
|
$font-size-8: 5.7rem * $base-font;
|
|
$font-size-9: 7.2rem * $base-font;
|
|
|
|
$font-weight-4: 400;
|
|
$font-weight-5: 500;
|
|
$font-weight-6: 600;
|
|
$font-weight-7: 700;
|
|
$font-weight-8: 800;
|
|
|
|
$lineheight-0: 100%;
|
|
$lineheight-1: 125%;
|
|
$lineheight-2: 137.5%;
|
|
$lineheight-3: 150%;
|
|
|
|
$letterspacing-0: 0;
|
|
$letterspacing-1: 0.025rem;
|
|
|
|
// borders & layout
|
|
$border-width-0: 1px;
|
|
$border-width-1: 2px;
|
|
$border-width-2: 3px;
|
|
$border-width-3: 4px;
|
|
|
|
$border-radius-0: 0.5rem * $base-font;
|
|
$border-radius-1: 1rem * $base-font;
|
|
$border-radius-2: 1.5rem * $base-font;
|
|
$border-radius-3: 3.2rem * $base-font;
|
|
$border-radius-4: 4rem * $base-font;
|
|
|
|
$space-xsmall: 0.5rem * $base-font;
|
|
$space-small: 1rem * $base-font;
|
|
$space-medium: 1.5rem * $base-font;
|
|
$space-large: 2rem * $base-font;
|
|
$space-xlarge: 3rem * $base-font;
|
|
|
|
|
|
// fonts
|
|
$primary-color: $yellow-4;
|
|
$font-family: Raleway, Arial, sans-serif;
|
|
$font-size: $font-size-1;
|
|
|
|
$font-color: $gray-9;
|
|
|
|
$title-background: transparent;
|
|
$title-color: $gray-9;
|
|
$title-weight: $font-weight-7;
|
|
$title-font-size: $font-size-4;
|
|
|
|
// layout & general
|
|
$width: 1100px;
|
|
$header-width: 1600px;
|
|
$border-radius: 10px;
|
|
$form-sidebar-width: 25%;
|
|
|
|
// header & nav
|
|
$header-mobile-padding-v: $space-small;
|
|
$header-mobile-padding-h: $space-medium;
|
|
$header-desktop-padding-v: $space-medium;
|
|
$header-desktop-padding-h: $space-xlarge;
|
|
$header-background-color: black;
|
|
$header-logo-height: 50px;
|
|
$header-logo-size: 217px $header-logo-height;
|
|
$toplinks-style: none;
|
|
|
|
// nav
|
|
$nav-background: black;
|
|
$nav-color: white;
|
|
$nav-active-color: white;
|
|
|
|
$nav-border-radius: 0;
|
|
$nav-border-color: transparent;
|
|
$nav-menu-side: 24px;
|
|
$nav-menu-color: white !default;
|
|
$nav-button-background: black;
|
|
$nav-button-color: white;
|
|
$nav-submenu-background: white;
|
|
$nav-submenu-color: $gray-9;
|
|
|
|
$nav-item-selected-border: 0 0 2px 0 solid $yellow-4;
|
|
$nav-item-selected-background: transparent !default;
|
|
$nav-item-selected-color: white;
|
|
$nav-item-hover-background: transparent; // we handle that on the menu--link, not on menu--item
|
|
$nav-item-hover-color: $gray-9;
|
|
|
|
$nav-mobile-menu-background: white;
|
|
$nav-mobile-menu-item-color: $gray-9;
|
|
$nav-item-spacing: 0px !default;
|
|
|
|
$nav-after-image: false;
|
|
|
|
// footer
|
|
$footer-background: black;
|
|
$footer-link-color: white;
|
|
$back-top-display: block;
|
|
$back-top-icon-size: 64px;
|
|
$back-top-layout-direction: vertical !default; // horizontal || vertical
|
|
$back-top-layout-position: static (right: 0, top: 0);
|
|
|
|
|
|
// widgets
|
|
$widget-color: $gray-8;
|
|
$form-accent-color: $yellow-4;
|
|
$widget-border-radius: $border-radius-1;
|
|
$widget-padding: $space-large;
|
|
$widget-unique-checkbox-position: left !default;
|
|
|
|
// we handle it with outline, as it grows on focus & hover, to avoid inputs
|
|
// being resized because of box-sizing: border-box
|
|
$widget-border: 0;
|
|
$widget-focus-border: 0;
|
|
$widget-focus-outline: $border-width-3 solid $gray-8;
|
|
|
|
$button-background: $primary-color;
|
|
$button-color: $black;
|
|
$button-border-radius: $border-radius-3;
|
|
$button-border: $border-width-3 solid transparent;
|
|
$button-hover-background: $yellow-5;
|
|
$button-focus-outline: 0px;
|
|
$cancel-button-style: ".cd28-button-secondary";
|
|
|
|
// Notifications
|
|
$notification-icon-size: 20px;
|
|
$notification-style: border-bar;
|
|
$notification_error_color: $alert-2;
|
|
$notification_info_color: $information-2;
|
|
$notification_success_color: $success-2;
|
|
$notification_warning_color: $warning-2;
|
|
|
|
// cells
|
|
$cell-background: white !default;
|
|
$cell-border: none;
|
|
|
|
$cell-entry-color: $black;
|
|
$cell-entry-font-weight: 500;
|
|
$cell-entry-border-color: $gray-5;
|
|
$cell-entry-border: 0; //we handle bottom border in %cell-links-list
|
|
$cell-entry-hover-background: $yellow-4;
|
|
|
|
// wcs
|
|
$wcs-steps-background: transparent !default;
|
|
$wcs-steps-spacing: 0.35rem !default; // half of default 0.7rem used in publik
|
|
|
|
// Step
|
|
$wcs-step-color: $gray-9; // color for default marker & label
|
|
$wcs-step-current-color: $gray-9;
|
|
$wcs-step-background: transparent !default;
|
|
$wcs-step-current-background: $yellow-1;
|
|
$wcs-step-border-bottom: $gray-5;
|
|
$wcs-step-current-border-bottom: none;
|
|
$buttons-order: previous, cancel (grow), submit;
|