186 lines
4.1 KiB
SCSS
186 lines
4.1 KiB
SCSS
/* === COLORS === */
|
|
|
|
/* Primary */
|
|
$blue--100: #F2F6F9;
|
|
$blue--300: #CBE4FF;
|
|
$blue--500: #047AE6;
|
|
$blue--700: #1074B5;
|
|
$blue--900: #003267;
|
|
|
|
/* Neutral */
|
|
$white: #FFF;
|
|
$neutral--100: #F9F9F9;
|
|
$neutral--200: #EBEEF5;
|
|
$neutral--300: #E6E8EB;
|
|
$neutral--400: #C2CDD6;
|
|
$neutral--500: #BABEC0;
|
|
$neutral--600: #6F757B;
|
|
$neutral--700: #34444C;
|
|
$neutral--800: #2E3C43;
|
|
$black: #000;
|
|
|
|
/* Accents */
|
|
$yellow--100: #F2E24B;
|
|
$yellow--300: #FEE600;
|
|
$yellow--500: #FFC300;
|
|
$yellow--700: #F90;
|
|
$yellow--800: #FB7B23;
|
|
|
|
$red--400: #F15743;
|
|
$red--500: #FA1414;
|
|
$red--600: #EB1510;
|
|
$red--700: #E20703;
|
|
|
|
$green--400: #2aac02;
|
|
$green--500: #74FFA8;
|
|
$green--700: #72EEA8;
|
|
$green--800: #74C86B;
|
|
|
|
$purple--500: #3D33CC;
|
|
|
|
$navy-blue: #162945;
|
|
|
|
/* Theme */
|
|
$color-primary--soft: $blue--100;
|
|
$color-primary: $blue--500;
|
|
$color-primary--dark: $blue--700;
|
|
|
|
$color-premium: $yellow--700;
|
|
|
|
/* === TYPE === */
|
|
$base__font-family: 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif;
|
|
$title__font-family: 'Montserrat', 'Helvetica Neue', Helvetica, sans-serif;
|
|
|
|
$text__color: $neutral--800;
|
|
$text__color--secondary: $neutral--600;
|
|
|
|
$link__color: $color-primary;
|
|
|
|
$code__border-color: $neutral--400;
|
|
|
|
/* === LAYOUT === */
|
|
$layout-tablet: 800px;
|
|
$layout-mobile: 600px;
|
|
|
|
/* === COMPONENTS === */
|
|
|
|
/* defaults */
|
|
$border-color: $neutral--200;
|
|
$border-color--dark: $neutral--300;
|
|
|
|
$success__bg-color: $green--700;
|
|
$warning__bg-color: $yellow--500;
|
|
$warning__border-color: $yellow--500;
|
|
$danger__bg-color: $red--500;
|
|
$danger__color: $red--700;
|
|
$info__bg-color: $blue--500;
|
|
|
|
/* buttons */
|
|
$button__color: $white;
|
|
$button__bg-color: $color-primary;
|
|
$button__bg-color--hover: $color-primary--dark;
|
|
|
|
$button-outline__color: $color-primary;
|
|
$button-outline__border-color: $color-primary;
|
|
$button-outline__bg-color: $white;
|
|
$button-outline__bg-color--hover: $color-primary--soft;
|
|
|
|
$button-ghost__color: $color-primary;
|
|
|
|
$button-cta__color: $neutral--800;
|
|
$button-cta__bg-color: $yellow--300;
|
|
$button-cta__bg-color--hover: $yellow--100;
|
|
|
|
$button-alert__bg-color: $red--400;
|
|
$button-alert__bg-color--hover: $red--700;
|
|
|
|
/* header */
|
|
$header__height: 64px;
|
|
|
|
/* subheader */
|
|
$subheader__height: 64px;
|
|
|
|
/* navbar */
|
|
$navbar-avatar__bg-color: $neutral--500;
|
|
$notification__bg-color: $green--500;
|
|
|
|
/* form */
|
|
$checkbox__border-color: $border-color--dark;
|
|
$checkbox__bg-color: $white;
|
|
$checkbox__border-color--hover: $color-primary;
|
|
$checkbox__bg-color--selected: $color-primary;
|
|
$checkbox-stroke__color: $white;
|
|
|
|
/* dropdowns */
|
|
$dropdown__shadow-color: rgba($black, 0.16);
|
|
$dropdown__shadow: 0 2px 8px 0 $dropdown__shadow-color;
|
|
|
|
/* progressbar */
|
|
$progressbar__bg-color: $neutral--200;
|
|
|
|
/* cards */
|
|
$card__shadow-color: rgba($neutral--400, 0.8);
|
|
$card__shadow: 0 8px 20px 0 $card__shadow-color;
|
|
$thumbnail__bg-color: $neutral--200;
|
|
|
|
/* settings */
|
|
$settings_border-color: rgba(0, 0, 0, 0.1);
|
|
$settings_tab_border-color: #333;
|
|
|
|
/* badges */
|
|
// default
|
|
$badge__color: $text__color--secondary;
|
|
$badge__bg-color: $white;
|
|
$badge__border-color: $neutral--600;
|
|
|
|
// condensed
|
|
$badge-condensed__bg-color: $blue--100;
|
|
|
|
// cartoframes
|
|
$badge-cf__color: $purple--500;
|
|
|
|
/* notification warning */
|
|
|
|
$notification-warning__height: 60px;
|
|
|
|
/* modal */
|
|
$modal__width: 960px;
|
|
|
|
/* === PAGES === */
|
|
|
|
/* onboarding */
|
|
$onboarding__bg-color: $neutral--100;
|
|
$onboarding-tags__border-color: $neutral--700;
|
|
$onboarding-congrats__height: 445px;
|
|
$onboarding-congrats__bg-color: rgba($blue--300, 0.3);
|
|
$onboarding-notification: $yellow--300;
|
|
|
|
/* Jupyter code blocks
|
|
Not our palette color, just copying jupyter look and feel */
|
|
$jupyter__fill-color: #F7F7F7;
|
|
$jupyter__border-color: #CFCFCF;
|
|
$jupyter__text--in: #DA4D24;
|
|
$jupyter__text--out: #2F3F9F;
|
|
|
|
/* lockout */
|
|
$button-lockout__bg-color: $blue--900;
|
|
|
|
/* === Z_INDEX === */
|
|
$z-index__dialog: 1000;
|
|
$z-index__notification-warning: 12;
|
|
$z-index__navbar: 5;
|
|
$z-index__subheader: 4;
|
|
$z-index__dropdown: 3;
|
|
$z-index__sticky: 2;
|
|
$z-index__local-dropdown: 1;
|
|
|
|
// Variables to create different stacking context
|
|
// Used in pages where you have Maps and Dataset Lists
|
|
$z-index__stack-context--first: 2;
|
|
$z-index__stack-context--second: 1;
|
|
$z-index__stack-context--third: 0;
|
|
|
|
/* === DEPRECATED === */
|
|
$primary-color: $color-primary;
|
|
$softblue: $color-primary--soft;
|