mirror of
https://github.com/avatao-content/frontend-tutorial-framework
synced 2024-09-08 19:24:11 +00:00
Using global CSS and shadow DOM CSSs as well
This commit is contained in:
parent
2c89cff3a9
commit
ff53319631
@ -8,9 +8,10 @@
|
|||||||
"root": "src",
|
"root": "src",
|
||||||
"outDir": "dist",
|
"outDir": "dist",
|
||||||
"assets": [
|
"assets": [
|
||||||
"assets",
|
{ "glob": "*(fonts|images|icons)/**/*",
|
||||||
"favicon.ico"
|
"input": "./assets/",
|
||||||
],
|
"output": "./" }
|
||||||
|
],
|
||||||
"index": "index.html",
|
"index": "index.html",
|
||||||
"main": "main.ts",
|
"main": "main.ts",
|
||||||
"polyfills": "polyfills.ts",
|
"polyfills": "polyfills.ts",
|
||||||
|
Before Width: | Height: | Size: 5.3 KiB After Width: | Height: | Size: 5.3 KiB |
10
src/assets/scss/_main.scss
Normal file
10
src/assets/scss/_main.scss
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
|
||||||
|
|
||||||
|
@import 'variables';
|
||||||
|
|
||||||
|
@import
|
||||||
|
'shared/buttons';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
160
src/assets/scss/_variables.scss
Normal file
160
src/assets/scss/_variables.scss
Normal file
@ -0,0 +1,160 @@
|
|||||||
|
//
|
||||||
|
// Spaces
|
||||||
|
//
|
||||||
|
|
||||||
|
$space: 24px;
|
||||||
|
|
||||||
|
$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 sky palette
|
||||||
|
$tao-sky-50: #F1FAFD;
|
||||||
|
$tao-sky-100: #C5E9F5;
|
||||||
|
$tao-sky-200: #9AD8EE;
|
||||||
|
$tao-sky-300: #6EC7E6;
|
||||||
|
$tao-sky-400: #42B7DF;
|
||||||
|
$tao-sky-500: #19A7D8;
|
||||||
|
$tao-sky-600: #0E8BA8;
|
||||||
|
$tao-sky-700: #04647A;
|
||||||
|
$tao-sky-800: #004251;
|
||||||
|
$tao-sky-900: #002028;
|
||||||
|
|
||||||
|
// Tao phtalo palette
|
||||||
|
$tao-phtalo-50: #F2FBFC;
|
||||||
|
$tao-phtalo-100: #C8EDF1;
|
||||||
|
$tao-phtalo-200: #9FDFE6;
|
||||||
|
$tao-phtalo-300: #75D1DB;
|
||||||
|
$tao-phtalo-400: #4CC3D0;
|
||||||
|
$tao-phtalo-500: #24B6C6;
|
||||||
|
$tao-phtalo-600: #16989E;
|
||||||
|
$tao-phtalo-700: #0C7575;
|
||||||
|
$tao-phtalo-800: #034C4F;
|
||||||
|
$tao-phtalo-900: #002426;
|
||||||
|
|
||||||
|
// 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 plum palette
|
||||||
|
$tao-plum-50: #F6F8FD;
|
||||||
|
$tao-plum-100: #DADFF8;
|
||||||
|
$tao-plum-200: #BEC7F3;
|
||||||
|
$tao-plum-300: #A2AFED;
|
||||||
|
$tao-plum-400: #8797E8;
|
||||||
|
$tao-plum-500: #6C80E3;
|
||||||
|
$tao-plum-600: #5E77BF;
|
||||||
|
$tao-plum-700: #4B5E99;
|
||||||
|
$tao-plum-800: #384672;
|
||||||
|
$tao-plum-900: #272F4C;
|
||||||
|
|
||||||
|
// Tao pink palette
|
||||||
|
$tao-pink-50: #FFF0F7;
|
||||||
|
$tao-pink-100: #FFBFDF;
|
||||||
|
$tao-pink-200: #FF8FC6;
|
||||||
|
$tao-pink-300: #FF5EAE;
|
||||||
|
$tao-pink-400: #FF2E95;
|
||||||
|
$tao-pink-500: #FF007E;
|
||||||
|
$tao-pink-600: #D8007C;
|
||||||
|
$tao-pink-700: #B20066;
|
||||||
|
$tao-pink-800: #8C0050;
|
||||||
|
$tao-pink-900: #66003A;
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
|
||||||
|
|
||||||
|
// 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));
|
||||||
|
|
||||||
|
// Custom sizes
|
||||||
|
|
||||||
|
$tao-navbar-height: 67px;
|
47
src/assets/scss/shared/_buttons.scss
Normal file
47
src/assets/scss/shared/_buttons.scss
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
.tao-btn-primary {
|
||||||
|
color: $tao-blue-500;
|
||||||
|
font-size: $font-size-base;
|
||||||
|
padding: 6px 19px;
|
||||||
|
border-radius: 100px !important;
|
||||||
|
background-color: transparent;
|
||||||
|
border: 1px solid $tao-blue-500;
|
||||||
|
outline: none !important;
|
||||||
|
transition: all 0.18s ease-out 0.18s;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&.large {
|
||||||
|
font-size: $font-size-h3;
|
||||||
|
padding: 10px 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.hidden {
|
||||||
|
visibility: hidden;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
&.medium {
|
||||||
|
font-size: $font-size-h4;
|
||||||
|
padding: 8px 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: transparent;
|
||||||
|
color: $tao-blue-500;
|
||||||
|
box-shadow: inset 0 0 0 1px $tao-blue-500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tao-btn-rainbow {
|
||||||
|
@extend .tao-btn-primary;
|
||||||
|
background: linear-gradient(135deg, $tao-blue-500 0%, $tao-turqoise-500 70%,$tao-bright-green-300 100%);
|
||||||
|
transition: all 2s ease;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
text-decoration: none !important;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
box-shadow: none;
|
||||||
|
background: linear-gradient(135deg, $tao-blue-500 0%, $tao-turqoise-500 80%,$tao-bright-green-300 100%);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
@ -6,7 +6,7 @@
|
|||||||
<base href="/">
|
<base href="/">
|
||||||
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<app-root></app-root>
|
<app-root></app-root>
|
||||||
|
@ -1,3 +1,5 @@
|
|||||||
/* You can add global styles to this file, and also import other style files */
|
/* You can add global styles to this file, and also import other style files */
|
||||||
@import '../node_modules/bootstrap/scss/bootstrap';
|
@import '../node_modules/bootstrap/scss/bootstrap';
|
||||||
@import '../node_modules/xterm/dist/xterm.css';
|
@import '../node_modules/xterm/dist/xterm.css';
|
||||||
|
|
||||||
|
@import "assets/scss/main";
|
||||||
|
Loading…
Reference in New Issue
Block a user