Using global CSS and shadow DOM CSSs as well

.angular-cli.json

@@ -8,9 +8,10 @@
       "root": "src",
       "outDir": "dist",
       "assets": [
-        "assets",
-        "favicon.ico"
-      ],
+        { "glob": "*(fonts|images|icons)/**/*",
+          "input": "./assets/",
+          "output": "./" }
+       ],
       "index": "index.html",
       "main": "main.ts",
       "polyfills": "polyfills.ts",

src/assets/scss/_main.scss

@@ -0,0 +1,10 @@
+
+
+@import 'variables';
+
+@import
+  'shared/buttons';
+
+
+
+

src/assets/scss/_variables.scss

@@ -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;

src/assets/scss/shared/_buttons.scss

@@ -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;
+  }
+}

src/index.html

@@ -6,7 +6,7 @@
   <base href="/">
 
   <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>
 <body>
   <app-root></app-root>

src/styles.scss

@@ -1,3 +1,5 @@
 /* You can add global styles to this file, and also import other style files */
 @import '../node_modules/bootstrap/scss/bootstrap';
 @import '../node_modules/xterm/dist/xterm.css';
+
+@import "assets/scss/main";