136 lines
3.2 KiB
SCSS
136 lines
3.2 KiB
SCSS
//
|
|
// Spaces
|
|
//
|
|
|
|
$space: 32px;
|
|
|
|
$sxlarge: 9 * $space;
|
|
$xxxlarge: 6 * $space;
|
|
$xxlarge: 4 * $space;
|
|
$xlarge: 2 * $space;
|
|
$large: 1.5 * $space;
|
|
$medium: $space;
|
|
$small: 0.75 * $space;
|
|
$tiny: 0.5 * $space;
|
|
$hair: 0.25 * $space;
|
|
$nano: 0.125 * $space;
|
|
|
|
|
|
// Color system
|
|
|
|
// Tao blue palette
|
|
$tao-blue-50: #F2F7FE;
|
|
$tao-blue-100: #C9DFFA;
|
|
$tao-blue-200: #A0C6F7;
|
|
$tao-blue-300: #77AEF3;
|
|
$tao-blue-400: #4E95EF;
|
|
$tao-blue-500: #277EEC;
|
|
$tao-blue-600: #2170B7;
|
|
$tao-blue-700: #195684;
|
|
$tao-blue-800: #103B5B;
|
|
$tao-blue-900: #081A2B;
|
|
|
|
// Tao turqoise palette
|
|
$tao-turqoise-50: #F1FBFB;
|
|
$tao-turqoise-100: #C3EFEF;
|
|
$tao-turqoise-200: #96E3E3;
|
|
$tao-turqoise-300: #68D7D7;
|
|
$tao-turqoise-400: #3BCBCB;
|
|
$tao-turqoise-500: #10BFBF;
|
|
$tao-turqoise-600: #079995;
|
|
$tao-turqoise-700: #00726F;
|
|
$tao-turqoise-800: #004C4A;
|
|
$tao-turqoise-900: #002625;
|
|
|
|
// Tao bright green palette
|
|
$tao-bright-green-50: #effbf7;
|
|
$tao-bright-green-100: #c5f2e4;
|
|
$tao-bright-green-200: #a0ead3;
|
|
$tao-bright-green-300: #7ae2c2;
|
|
$tao-bright-green-400: #55d9b0;
|
|
$tao-bright-green-500: #2fd19f;
|
|
$tao-bright-green-600: #2ab587;
|
|
$tao-bright-green-700: #248e63;
|
|
$tao-bright-green-800: #1c6844;
|
|
$tao-bright-green-900: #114431;
|
|
|
|
// Tao warm yellow palette
|
|
$tao-warm-yellow-50: #FFF8EB;
|
|
$tao-warm-yellow-100: #FFEDCE;
|
|
$tao-warm-yellow-200: #FFE0A9;
|
|
$tao-warm-yellow-300: #FFD283;
|
|
$tao-warm-yellow-400: #FFC55E;
|
|
$tao-warm-yellow-500: #FFB83B;
|
|
$tao-warm-yellow-600: #E59C3C;
|
|
$tao-warm-yellow-700: #CC8B36;
|
|
$tao-warm-yellow-800: #B2762F;
|
|
$tao-warm-yellow-900: #996526;
|
|
|
|
|
|
// Tao red palette
|
|
$tao-red-50: #FFF5F5;
|
|
$tao-red-100: #FFD4D4;
|
|
$tao-red-200: #FFB3B3;
|
|
$tao-red-300: #FF9292;
|
|
$tao-red-400: #FF7171;
|
|
$tao-red-500: #FF5252;
|
|
$tao-red-600: #E54848;
|
|
$tao-red-700: #CC3636;
|
|
$tao-red-800: #B22424;
|
|
$tao-red-900: #991919;
|
|
|
|
// Tao gray palette
|
|
$tao-gray-50: #FAFAFA;
|
|
$tao-gray-100: #F2F2F2;
|
|
$tao-gray-200: #D6D6D6;
|
|
$tao-gray-300: #A0A0A0;
|
|
$tao-gray-400: #777777;
|
|
$tao-gray-500: #555555;
|
|
$tao-gray-600: #323232;
|
|
$tao-gray-700: #232323;
|
|
$tao-gray-800: #0C0C0C;
|
|
$tao-gray-900: #000000;
|
|
|
|
// Tao messages
|
|
$tao-base-color: #2A324C;
|
|
$tao-btn-font-color: #1F2836;
|
|
$tao-card-color: #363E56;
|
|
$tao-message-originator-color: #6697FF;
|
|
$tao-copy-color: #FFFFFF;
|
|
$tao-timestamp-color: #94A6B9;
|
|
$tao-gray-color: #94A6B9; // @25% opacity
|
|
$tao-shadow-color: rgba(255, 255, 255, 0.5);
|
|
$tao-yellow-color: #FFD68F;
|
|
$tao-shadow-yellow-color: rgba(255, 214, 143, 0.5);
|
|
$tao-blue-color: #6697FF;
|
|
$tao-shadow-blue-color: rgba(102, 151, 255, 0.5);
|
|
$tao-green-color: #48BEB0;
|
|
$tao-shadow-green-color: rgba(72, 190, 176, 0.5);
|
|
$tao-cyan-color: #60FDEB;
|
|
$tao-red-color: #FF4583;
|
|
$tao-shadow-red-color: rgba(255, 69, 131, 0.5);
|
|
|
|
|
|
// Panel border radius
|
|
$tao-panel-border-radius: 14px;
|
|
$tao-panel-border-radius-sm: 8px;
|
|
$tao-input-border-radius: 6px;
|
|
|
|
// Font sizes
|
|
$font-size-nano: 11px;
|
|
$font-size-tiny: 12px;
|
|
$font-size-small: 13px;
|
|
$font-size-base: 14px;
|
|
$font-size-title: floor(($font-size-base * 3.5));
|
|
$font-size-h2: floor(($font-size-base * 1.75));
|
|
$font-size-h3: floor(($font-size-base * 1.3));
|
|
$font-size-h4: floor(($font-size-base * 1.2));
|
|
$font-size-h5: floor(($font-size-base * 1.1));
|
|
|
|
|
|
$tao-navbar-height: 67px;
|
|
$company-logo-width: 130px;
|
|
|
|
|
|
|