mirror of
https://github.com/avatao-content/frontend-tutorial-framework
synced 2025-01-16 05:51:55 +00:00
Cleanup variables in Shadow DOM
This commit is contained in:
Gabor PEK
parent
c3f4ace7e9
commit
822b65462d
@ -1,5 +1,5 @@
|
|||||||
<app-header></app-header>
|
<app-header></app-header>
|
||||||
<div class="tao-grid-main-components">
|
<div class="tfw-grid-main-components">
|
||||||
<div class="tfw-messages"><app-messages></app-messages></div>
|
<div class="tfw-messages"><app-messages></app-messages></div>
|
||||||
<div class="tfw-web tao-grid-top-left"><app-login></app-login></div>
|
<div class="tfw-web tao-grid-top-left"><app-login></app-login></div>
|
||||||
<div class="tfw-webide"><app-webide></app-webide></div>
|
<div class="tfw-webide"><app-webide></app-webide></div>
|
||||||
|
|||||||
@ -1,6 +1,3 @@
|
|||||||
//
|
|
||||||
// Variables
|
|
||||||
//
|
|
||||||
$space: 24px;
|
$space: 24px;
|
||||||
|
|
||||||
$tao-plum-900: #272F4C;
|
$tao-plum-900: #272F4C;
|
||||||
@ -8,17 +5,13 @@ $tao-gray-50: #FAFAFA;
|
|||||||
|
|
||||||
$tao-navbar-height: 67px;
|
$tao-navbar-height: 67px;
|
||||||
|
|
||||||
|
$layout-template: "default"; // Change this to switch template
|
||||||
//
|
|
||||||
// Layouts
|
|
||||||
//
|
|
||||||
$layout-template: "raw"; // Change this to switch template
|
|
||||||
|
|
||||||
$default-layout: (
|
$default-layout: (
|
||||||
'messages': (1, 2, 1, 4),
|
'messages': (1, 2, 1, 4),
|
||||||
'webide': (4, -1, 1, -1),
|
'webide': (4, -1, 1, -1),
|
||||||
'terminal': (1, 4, 4, -1),
|
'terminal': (1, 4, 4, -1),
|
||||||
'web': (2, 4, 1, 4)
|
'web': (2, 4, 1, 4)
|
||||||
);
|
);
|
||||||
|
|
||||||
$raw-layout: (
|
$raw-layout: (
|
||||||
@ -34,7 +27,6 @@ $layout: (
|
|||||||
);
|
);
|
||||||
|
|
||||||
@mixin position-grid-items($map, $sel) {
|
@mixin position-grid-items($map, $sel) {
|
||||||
|
|
||||||
$sel: if($sel == '' and &, &, $sel);
|
$sel: if($sel == '' and &, &, $sel);
|
||||||
@debug $sel;
|
@debug $sel;
|
||||||
|
|
||||||
@ -55,8 +47,7 @@ $layout: (
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.tao-grid-main-components {
|
.tfw-grid-main-components {
|
||||||
|
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
display: grid;
|
display: grid;
|
||||||
padding-top: $tao-navbar-height;
|
padding-top: $tao-navbar-height;
|
||||||
|
|||||||
@ -1,11 +1,11 @@
|
|||||||
<nav class="navbar navbar-default navbar-expand-md navbar-light tao-navbar fixed-top">
|
<nav class="navbar navbar-default navbar-expand-md navbar-light tfw-navbar fixed-top">
|
||||||
<div class="tao-grid-navbar">
|
<div class="tfw-grid-navbar">
|
||||||
<!-- <ul class="navbar-nav tao-grid-center-right">
|
<!-- <ul class="navbar-nav tao-grid-center-right">
|
||||||
<li class="nav-item tao-header-title">an</li>
|
<li class="nav-item tao-header-title">an</li>
|
||||||
</ul>-->
|
</ul>-->
|
||||||
<img src="images/avatao_logo.svg" routerLink="/" class="tao-grid-center-left tao-company-logo" alt="">
|
<img src="images/avatao_logo.svg" routerLink="/" class="tao-grid-center-left tfw-company-logo" alt="">
|
||||||
<ul class="navbar-nav">
|
<ul class="navbar-nav">
|
||||||
<li class="nav-item tao-header-title">Tutorials</li>
|
<li class="nav-item tfw-header-title">Tutorials</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|||||||
@ -1,24 +1,3 @@
|
|||||||
// Variables
|
|
||||||
|
|
||||||
//
|
|
||||||
// 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;
|
|
||||||
|
|
||||||
//
|
|
||||||
// Misc
|
|
||||||
//
|
|
||||||
$tao-blue-500: #277EEC;
|
$tao-blue-500: #277EEC;
|
||||||
$font-size-base: 14px;
|
$font-size-base: 14px;
|
||||||
$font-size-h3: floor(($font-size-base * 1.3));
|
$font-size-h3: floor(($font-size-base * 1.3));
|
||||||
@ -27,15 +6,12 @@ $tao-navbar-height: 67px;
|
|||||||
|
|
||||||
$company-logo-width: 130px;
|
$company-logo-width: 130px;
|
||||||
|
|
||||||
//
|
.tfw-header-title {
|
||||||
// Classes
|
|
||||||
//
|
|
||||||
.tao-header-title {
|
|
||||||
color: $tao-blue-500;
|
color: $tao-blue-500;
|
||||||
font-size: $font-size-h3;
|
font-size: $font-size-h3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tao-navbar {
|
.tfw-navbar {
|
||||||
background-color: rgba(255, 255, 255, 0.96);
|
background-color: rgba(255, 255, 255, 0.96);
|
||||||
min-height: $tao-navbar-height;
|
min-height: $tao-navbar-height;
|
||||||
box-shadow: 0px 1px 6px 0px #888;
|
box-shadow: 0px 1px 6px 0px #888;
|
||||||
@ -43,37 +19,37 @@ $company-logo-width: 130px;
|
|||||||
border: 1px solid #e7e7e7;
|
border: 1px solid #e7e7e7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tao-grid-navbar {
|
.tfw-grid-navbar {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: $company-logo-width 1fr;
|
grid-template-columns: $company-logo-width 1fr;
|
||||||
grid-column-gap: 8px;
|
grid-column-gap: 8px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tao-company-logo {
|
.tfw-company-logo {
|
||||||
display: block;
|
display: block;
|
||||||
width: $company-logo-width;
|
width: $company-logo-width;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tao-company-logo-mobile {
|
.tfw-company-logo-mobile {
|
||||||
display: none;
|
display: none;
|
||||||
width: 130px;
|
width: 130px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 767px) {
|
@media (max-width: 767px) {
|
||||||
.tao-grid-navbar {
|
.tfw-grid-navbar {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tao-company-logo {
|
.tfw-company-logo {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tao-company-logo-mobile {
|
.tfw-company-logo-mobile {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tao-navbar-links {
|
.tfw-navbar-links {
|
||||||
justify-self: left !important;
|
justify-self: left !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
<div class="tao-messages-main">
|
<div class="tfw-messages-main">
|
||||||
<h5>Instructions</h5>
|
<h5>Instructions</h5>
|
||||||
<div class="tao-grid-message" *ngFor="let message of messages.slice().reverse()">
|
<div class="tfw-grid-message" *ngFor="let message of messages.slice().reverse()">
|
||||||
<div class="tao-grid-message-header">
|
<div class="tfw-grid-message-header">
|
||||||
<img class="tao-grid-center-left" src="images/avataobot.svg"/>
|
<img class="tao-grid-center-left" src="images/avataobot.svg"/>
|
||||||
<div class="tao-grid-center-left originator">{{message.originator}}</div>
|
<div class="tao-grid-center-left originator">{{message.originator}}</div>
|
||||||
<div class="timestamp tao-grid-center-right">{{message.timestamp | date:'HH:mm:ss'}}</div>
|
<div class="timestamp tao-grid-center-right">{{message.timestamp | date:'HH:mm:ss'}}</div>
|
||||||
|
|||||||
@ -1,156 +1,20 @@
|
|||||||
//
|
|
||||||
// Spaces
|
|
||||||
//
|
|
||||||
|
|
||||||
$space: 24px;
|
$space: 24px;
|
||||||
|
|
||||||
$sxlarge: 9 * $space;
|
|
||||||
$xxxlarge: 6 * $space;
|
|
||||||
$xxlarge: 4 * $space;
|
|
||||||
$xlarge: 2 * $space;
|
|
||||||
$large: 1.5 * $space;
|
|
||||||
$medium: $space;
|
|
||||||
$small: 0.75 * $space;
|
$small: 0.75 * $space;
|
||||||
$tiny: 0.5 * $space;
|
$tiny: 0.5 * $space;
|
||||||
$hair: 0.25 * $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-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-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-panel-border-radius-sm: 8px;
|
||||||
$tao-input-border-radius: 6px;
|
|
||||||
|
|
||||||
$font-size-nano: 11px;
|
|
||||||
$font-size-tiny: 12px;
|
$font-size-tiny: 12px;
|
||||||
$font-size-small: 13px;
|
|
||||||
$font-size-base: 14px;
|
$font-size-base: 14px;
|
||||||
|
|
||||||
|
|
||||||
.tao-messages-main {
|
.tfw-messages-main {
|
||||||
|
|
||||||
max-height: 50vmin;
|
max-height: 50vmin;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
|
|
||||||
@ -161,7 +25,7 @@ $font-size-base: 14px;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.tao-grid-message {
|
.tfw-grid-message {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-rows: 1fr auto;
|
grid-template-rows: 1fr auto;
|
||||||
grid-row-gap: $hair;
|
grid-row-gap: $hair;
|
||||||
@ -174,7 +38,7 @@ $font-size-base: 14px;
|
|||||||
margin-bottom: $hair;
|
margin-bottom: $hair;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tao-grid-message-header {
|
.tfw-grid-message-header {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 5fr 8fr;
|
grid-template-columns: 1fr 5fr 8fr;
|
||||||
grid-column-gap: 4px;
|
grid-column-gap: 4px;
|
||||||
|
|||||||
@ -1,217 +0,0 @@
|
|||||||
// 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;
|
|
||||||
|
|
||||||
.xterm {
|
|
||||||
font-family: courier-new, courier, monospace;
|
|
||||||
font-feature-settings: "liga" 0;
|
|
||||||
position: relative;
|
|
||||||
user-select: none;
|
|
||||||
-ms-user-select: none;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.xterm.focus,
|
|
||||||
.xterm:focus {
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.xterm .xterm-helpers {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
/**
|
|
||||||
* The z-index of the helpers must be higher than the canvases in order for
|
|
||||||
* IMEs to appear on top.
|
|
||||||
*/
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
.xterm .xterm-helper-textarea {
|
|
||||||
/*
|
|
||||||
* HACK: to fix IE's blinking cursor
|
|
||||||
* Move textarea out of the screen to the far left, so that the cursor is not visible.
|
|
||||||
*/
|
|
||||||
position: absolute;
|
|
||||||
opacity: 0;
|
|
||||||
left: -9999em;
|
|
||||||
top: 0;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
z-index: -10;
|
|
||||||
/** Prevent wrapping so the IME appears against the textarea at the correct position */
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
resize: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.xterm .composition-view {
|
|
||||||
/* TODO: Composition position got messed up somewhere */
|
|
||||||
background: $tao-blue-800;
|
|
||||||
color: #FFF;
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
white-space: nowrap;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.xterm .composition-view.active {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.xterm .xterm-viewport {
|
|
||||||
/* On OS X this is required in order for the scroll bar to appear fully opaque */
|
|
||||||
background-color: $tao-blue-800;
|
|
||||||
overflow-y: scroll;
|
|
||||||
cursor: default;
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.xterm .xterm-screen {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.xterm .xterm-screen canvas {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.xterm .xterm-scroll-area {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.xterm .xterm-char-measure-element {
|
|
||||||
display: inline-block;
|
|
||||||
visibility: hidden;
|
|
||||||
position: absolute;
|
|
||||||
left: -9999em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.xterm.enable-mouse-events {
|
|
||||||
/* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
.xterm:not(.enable-mouse-events) {
|
|
||||||
cursor: text;
|
|
||||||
}
|
|
||||||
@ -1,7 +1,7 @@
|
|||||||
<div class="tao-grid-container">
|
<div class="tfw-grid-container">
|
||||||
<div class="btn-group btn-group-sm flex-wrap tao-grid-center-left">
|
<div class="btn-group btn-group-sm flex-wrap tao-grid-center-left">
|
||||||
<button *ngFor="let file of files"
|
<button *ngFor="let file of files"
|
||||||
class="btn tao-tab-btn"
|
class="btn tfw-tab-btn"
|
||||||
(click)="tabSwitchButtonHandler(file)"
|
(click)="tabSwitchButtonHandler(file)"
|
||||||
[class.active]="filename === file"
|
[class.active]="filename === file"
|
||||||
[class.disabled]="filename === file"
|
[class.disabled]="filename === file"
|
||||||
@ -11,9 +11,9 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="btn-group-sm tao-deploy-btn-group">
|
<div class="btn-group-sm tfw-deploy-btn-group">
|
||||||
<button type="submit"
|
<button type="submit"
|
||||||
class="btn tao-deploy-btn tao-grid-top-center"
|
class="btn tfw-deploy-btn tao-grid-top-center"
|
||||||
(click)="sendCodeIfDirty(); deployCode()"
|
(click)="sendCodeIfDirty(); deployCode()"
|
||||||
[disabled]="deployButtonState === 'DEPLOYING' || deployButtonState === 'DEPLOYED'"
|
[disabled]="deployButtonState === 'DEPLOYING' || deployButtonState === 'DEPLOYED'"
|
||||||
[class.deployed]="deployButtonState === 'DEPLOYED'"
|
[class.deployed]="deployButtonState === 'DEPLOYED'"
|
||||||
|
|||||||
@ -1,142 +1,18 @@
|
|||||||
//
|
|
||||||
// Spaces
|
|
||||||
//
|
|
||||||
|
|
||||||
$space: 24px;
|
$space: 24px;
|
||||||
|
|
||||||
$sxlarge: 9 * $space;
|
|
||||||
$xxxlarge: 6 * $space;
|
|
||||||
$xxlarge: 4 * $space;
|
|
||||||
$xlarge: 2 * $space;
|
|
||||||
$large: 1.5 * $space;
|
|
||||||
$medium: $space;
|
|
||||||
$small: 0.75 * $space;
|
$small: 0.75 * $space;
|
||||||
$tiny: 0.5 * $space;
|
|
||||||
$hair: 0.25 * $space;
|
|
||||||
$nano: 0.125 * $space;
|
|
||||||
|
|
||||||
|
|
||||||
// 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-100: #c5f2e4;
|
||||||
$tao-bright-green-200: #a0ead3;
|
$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-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-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-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-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-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-grid-container {
|
.tfw-grid-container {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 8fr 1fr;
|
grid-template-columns: 8fr 1fr;
|
||||||
}
|
}
|
||||||
@ -150,7 +26,7 @@ $tao-gray-900: #000000;
|
|||||||
padding-left: 34px;
|
padding-left: 34px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tao-tab-btn {
|
.tfw-tab-btn {
|
||||||
background-color: white;
|
background-color: white;
|
||||||
border: 1px solid $tao-plum-900;
|
border: 1px solid $tao-plum-900;
|
||||||
border-left: 0;
|
border-left: 0;
|
||||||
@ -159,7 +35,7 @@ $tao-gray-900: #000000;
|
|||||||
padding: 5px 19px;
|
padding: 5px 19px;
|
||||||
z-index: 200;
|
z-index: 200;
|
||||||
|
|
||||||
.tao-tab-btn-saved,
|
.tfw-tab-btn-saved,
|
||||||
.active,
|
.active,
|
||||||
.disabled,
|
.disabled,
|
||||||
&:disabled {
|
&:disabled {
|
||||||
@ -168,10 +44,10 @@ $tao-gray-900: #000000;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.tao-deploy-btn-group {
|
.tfw-deploy-btn-group {
|
||||||
margin: $small;
|
margin: $small;
|
||||||
|
|
||||||
.tao-deploy-btn {
|
.tfw-deploy-btn {
|
||||||
background: $tao-bright-green-200;
|
background: $tao-bright-green-200;
|
||||||
border-radius: 100px;
|
border-radius: 100px;
|
||||||
padding: 6px 19px;
|
padding: 6px 19px;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user