mirror of
https://github.com/avatao-content/frontend-tutorial-framework
synced 2025-01-16 02:51:57 +00:00
Merge branch 'cssdesign'
This commit is contained in:
Kristóf Tóth
commit
e5b7d1d809
@ -8,8 +8,9 @@
|
||||
"root": "src",
|
||||
"outDir": "dist",
|
||||
"assets": [
|
||||
"assets",
|
||||
"favicon.ico"
|
||||
{ "glob": "*(fonts|images|icons)/**/*",
|
||||
"input": "./assets/",
|
||||
"output": "./" }
|
||||
],
|
||||
"index": "index.html",
|
||||
"main": "main.ts",
|
||||
|
||||
15
src/app/dashboard/dashboard.component.html
Normal file → Executable file
15
src/app/dashboard/dashboard.component.html
Normal file → Executable file
@ -1,12 +1,7 @@
|
||||
<app-header></app-header>
|
||||
<div class="container-fluid">
|
||||
<div class="row tfw-first-row">
|
||||
<div class="col-sm"><app-login></app-login></div>
|
||||
<div class="col-sm-6"><app-webide></app-webide></div>
|
||||
<div class="col-sm"><app-messages></app-messages></div>
|
||||
</div>
|
||||
<div class="row tfw-second-row">
|
||||
<div class="col-sm-3"><app-testmessager></app-testmessager></div>
|
||||
<div class="col-sm-9"><app-terminal></app-terminal></div>
|
||||
</div>
|
||||
<div class="tfw-grid-main-components">
|
||||
<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-webide"><app-webide></app-webide></div>
|
||||
<div class="tfw-terminal"><app-terminal></app-terminal></div>
|
||||
</div>
|
||||
|
||||
80
src/app/dashboard/dashboard.component.scss
Normal file → Executable file
80
src/app/dashboard/dashboard.component.scss
Normal file → Executable file
@ -1,5 +1,79 @@
|
||||
.tfw-first-row {
|
||||
height: 40vh;
|
||||
$space: 24px;
|
||||
|
||||
$tao-plum-900: #272F4C;
|
||||
$tao-gray-50: #FAFAFA;
|
||||
|
||||
$tao-navbar-height: 67px;
|
||||
|
||||
$layout-template: "default"; // Change this to switch template
|
||||
|
||||
$default-layout: (
|
||||
'messages': (1, 2, 1, 4),
|
||||
'webide': (4, -1, 1, -1),
|
||||
'terminal': (1, 4, 4, -1),
|
||||
'web': (2, 4, 1, 4)
|
||||
);
|
||||
|
||||
$raw-layout: (
|
||||
'messages': (1, 2, 1, -1),
|
||||
'webide': (4, -1, 1, -1),
|
||||
'terminal': (2, 4, 1, -1),
|
||||
'web': (),
|
||||
);
|
||||
|
||||
$layout: (
|
||||
"default": $default-layout,
|
||||
"raw": $raw-layout
|
||||
);
|
||||
|
||||
@mixin position-grid-items($map, $sel) {
|
||||
$sel: if($sel == '' and &, &, $sel);
|
||||
@debug $sel;
|
||||
|
||||
#{$sel} {
|
||||
@each $k, $v in $map {
|
||||
@at-root #{$sel}#{$k} {
|
||||
@if (length($v) == 0) {
|
||||
display: none
|
||||
}
|
||||
@else {
|
||||
grid-column-start: nth($v, 1);
|
||||
grid-column-end: nth($v, 2);
|
||||
grid-row-start: nth($v, 3);
|
||||
grid-row-end: nth($v, 4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tfw-second-row {}
|
||||
.tfw-grid-main-components {
|
||||
overflow-y: hidden;
|
||||
display: grid;
|
||||
padding-top: $tao-navbar-height;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
grid-template-rows: repeat(5, 1fr);
|
||||
|
||||
@include position-grid-items(map_get($layout,$layout-template),'.tfw-');
|
||||
|
||||
.tfw-web {
|
||||
padding: $space;
|
||||
}
|
||||
|
||||
.tfw-messages {
|
||||
padding: $space;
|
||||
background-color: $tao-gray-50;
|
||||
}
|
||||
|
||||
.tfw-webide {
|
||||
background-color: $tao-plum-900;
|
||||
}
|
||||
|
||||
.tfw-terminal {
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
17
src/app/header/header.component.html
Normal file → Executable file
17
src/app/header/header.component.html
Normal file → Executable file
@ -1,8 +1,11 @@
|
||||
<div class="jumbotron text-center">
|
||||
<h1>Tutorial framework Demo</h1>
|
||||
<h3>
|
||||
Powered by Angular
|
||||
<img class="logo" width="36" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
|
||||
</h3>
|
||||
<nav class="navbar navbar-default navbar-expand-md navbar-light tfw-navbar fixed-top">
|
||||
<div class="tfw-grid-navbar">
|
||||
<!-- <ul class="navbar-nav tao-grid-center-right">
|
||||
<li class="nav-item tao-header-title">an</li>
|
||||
</ul>-->
|
||||
<img src="images/avatao_logo.svg" routerLink="/" class="tao-grid-center-left tfw-company-logo" alt="">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item tfw-header-title">Tutorials</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
80
src/app/header/header.component.scss
Normal file → Executable file
80
src/app/header/header.component.scss
Normal file → Executable file
@ -1,33 +1,57 @@
|
||||
@keyframes heartbeat
|
||||
{
|
||||
0%
|
||||
{
|
||||
transform: scale( .75 );
|
||||
}
|
||||
20%
|
||||
{
|
||||
transform: scale( 1 );
|
||||
}
|
||||
40%
|
||||
{
|
||||
transform: scale( .75 );
|
||||
}
|
||||
60%
|
||||
{
|
||||
transform: scale( 1 );
|
||||
}
|
||||
80%
|
||||
{
|
||||
transform: scale( .75 );
|
||||
}
|
||||
100%
|
||||
{
|
||||
transform: scale( .75 );
|
||||
}
|
||||
$tao-blue-500: #277EEC;
|
||||
$font-size-base: 14px;
|
||||
$font-size-h3: floor(($font-size-base * 1.3));
|
||||
|
||||
$tao-navbar-height: 67px;
|
||||
|
||||
$company-logo-width: 130px;
|
||||
|
||||
.tfw-header-title {
|
||||
color: $tao-blue-500;
|
||||
font-size: $font-size-h3;
|
||||
}
|
||||
|
||||
.logo {
|
||||
animation: heartbeat 1s infinite;
|
||||
.tfw-navbar {
|
||||
background-color: rgba(255, 255, 255, 0.96);
|
||||
min-height: $tao-navbar-height;
|
||||
box-shadow: 0px 1px 6px 0px #888;
|
||||
margin-bottom: 12px;
|
||||
border: 1px solid #e7e7e7;
|
||||
}
|
||||
|
||||
.tfw-grid-navbar {
|
||||
display: grid;
|
||||
grid-template-columns: $company-logo-width 1fr;
|
||||
grid-column-gap: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tfw-company-logo {
|
||||
display: block;
|
||||
width: $company-logo-width;
|
||||
}
|
||||
|
||||
.tfw-company-logo-mobile {
|
||||
display: none;
|
||||
width: 130px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.tfw-grid-navbar {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.tfw-company-logo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tfw-company-logo-mobile {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tfw-navbar-links {
|
||||
justify-self: left !important;
|
||||
}
|
||||
}
|
||||
|
||||
.jumbotron {
|
||||
|
||||
20
src/app/messages/messages.component.html
Normal file → Executable file
20
src/app/messages/messages.component.html
Normal file → Executable file
@ -1,11 +1,11 @@
|
||||
<div>
|
||||
<ul>
|
||||
<li *ngFor="let message of messages.slice().reverse()">
|
||||
<p>
|
||||
<strong>{{message.originator}}</strong>
|
||||
<span class="timestamp">{{message.timestamp | date:'yyyy-MM-dd HH:mm:ss'}}</span><br>
|
||||
<span [innerHtml]="message.message"></span>
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tfw-messages-main">
|
||||
<h5>Instructions</h5>
|
||||
<div class="tfw-grid-message" *ngFor="let message of messages.slice().reverse()">
|
||||
<div class="tfw-grid-message-header">
|
||||
<img class="tao-grid-center-left" src="images/avataobot.svg"/>
|
||||
<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>
|
||||
<div [innerHtml]="message.message"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
61
src/app/messages/messages.component.scss
Normal file → Executable file
61
src/app/messages/messages.component.scss
Normal file → Executable file
@ -1,14 +1,61 @@
|
||||
div {
|
||||
display: block;
|
||||
overflow: auto;
|
||||
max-height: 100%;
|
||||
$space: 24px;
|
||||
|
||||
$small: 0.75 * $space;
|
||||
$tiny: 0.5 * $space;
|
||||
$hair: 0.25 * $space;
|
||||
|
||||
|
||||
$tao-blue-500: #277EEC;
|
||||
$tao-gray-100: #F2F2F2;
|
||||
|
||||
$tao-panel-border-radius-sm: 8px;
|
||||
|
||||
$font-size-tiny: 12px;
|
||||
$font-size-base: 14px;
|
||||
|
||||
|
||||
.tfw-messages-main {
|
||||
max-height: 50vmin;
|
||||
overflow-y: scroll;
|
||||
|
||||
h5 {
|
||||
margin-bottom: $small;
|
||||
color: $tao-blue-500;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
max-height: inherit;
|
||||
list-style-type: none;
|
||||
.tfw-grid-message {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr auto;
|
||||
grid-row-gap: $hair;
|
||||
width: 100%;
|
||||
|
||||
background-color: $tao-gray-100;
|
||||
border-radius: $tao-panel-border-radius-sm;
|
||||
padding: $tiny;
|
||||
font-size: $font-size-base;
|
||||
margin-bottom: $hair;
|
||||
}
|
||||
|
||||
.tfw-grid-message-header {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 5fr 8fr;
|
||||
grid-column-gap: 4px;
|
||||
width: 100%;
|
||||
|
||||
img {
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
.originator {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
font-size: $font-size-tiny;
|
||||
opacity: 0.37;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -1,15 +1,36 @@
|
||||
<div class="btn-group btn-group-sm flex-wrap">
|
||||
<div class="tfw-grid-container">
|
||||
<div class="btn-group btn-group-sm flex-wrap tao-grid-center-left">
|
||||
<button *ngFor="let file of files"
|
||||
class="btn btn-secondary"
|
||||
class="btn tfw-tab-btn"
|
||||
(click)="tabSwitchButtonHandler(file)"
|
||||
[class.active]="filename === file"
|
||||
[class.disabled]="filename === file"
|
||||
[disabled]="filename === file"
|
||||
[class.btn-success]="filename === file && codeState === 'SAVED'">
|
||||
[class.tao-tab-btn-saved]="filename === file && codeState === 'SAVED'">
|
||||
{{file}}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="btn-group-sm tfw-deploy-btn-group">
|
||||
<button type="submit"
|
||||
class="btn tfw-deploy-btn tao-grid-top-center"
|
||||
(click)="sendCodeIfDirty(); deployCode()"
|
||||
[disabled]="deployButtonState === 'DEPLOYING' || deployButtonState === 'DEPLOYED'"
|
||||
[class.deployed]="deployButtonState === 'DEPLOYED'"
|
||||
[class.deploy]="deployButtonState === 'DEPLOYING'"
|
||||
[class.disabled]="deployButtonState === 'DEPLOYING' || deployButtonState === 'DEPLOYED'"
|
||||
[class.failed]="deployButtonState === 'FAILED'"
|
||||
>
|
||||
<span *ngIf="deployButtonState === 'TODEPLOY'">Deploy</span>
|
||||
<span *ngIf="deployButtonState === 'DEPLOYED'">
|
||||
<img src="images/greentick_icon.svg"/>
|
||||
<span>Deployed</span>
|
||||
</span>
|
||||
<span *ngIf="deployButtonState === 'DEPLOYING'"><div class="loader"></div>Reloading app...</span>
|
||||
<span *ngIf="deployButtonState === 'FAILED'">Deployment failed. Retry</span></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div (keyup)="setCodeState('DIRTY'); setDeployButtonState('TODEPLOY'); resetAutoSaveCountdown()"
|
||||
ace-editor
|
||||
[(text)]="code"
|
||||
@ -18,18 +39,3 @@
|
||||
class="tfw-ace-editor"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="btn-group flex-wrap">
|
||||
<button type="submit"
|
||||
class="btn btn-secondary"
|
||||
(click)="sendCodeIfDirty(); deployCode()"
|
||||
[disabled]="deployButtonState === 'DEPLOYING' || deployButtonState === 'DEPLOYED'"
|
||||
[class.btn-success]="deployButtonState === 'DEPLOYED'"
|
||||
[class.btn-info]="deployButtonState === 'DEPLOYING'"
|
||||
[class.disabled]="deployButtonState === 'DEPLOYING' || deployButtonState === 'DEPLOYED'"
|
||||
[class.btn-danger]="deployButtonState === 'FAILED'"
|
||||
><span *ngIf="deployButtonState === 'TODEPLOY'">Deploy</span>
|
||||
<span *ngIf="deployButtonState === 'DEPLOYED'">Deploy</span>
|
||||
<span *ngIf="deployButtonState === 'DEPLOYING'"><div class="loader"></div>Reloading app...</span>
|
||||
<span *ngIf="deployButtonState === 'FAILED'">Deployment failed</span></button>
|
||||
</div>
|
||||
|
||||
@ -1,18 +1,86 @@
|
||||
.tfw-ace-editor {
|
||||
min-height: 30vh;
|
||||
height: 80%;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
$space: 24px;
|
||||
$small: 0.75 * $space;
|
||||
|
||||
$tao-bright-green-100: #c5f2e4;
|
||||
$tao-bright-green-200: #a0ead3;
|
||||
|
||||
$tao-warm-yellow-200: #FFE0A9;
|
||||
$tao-warm-yellow-600: #E59C3C;
|
||||
|
||||
$tao-plum-200: #BEC7F3;
|
||||
$tao-plum-900: #272F4C;
|
||||
$tao-red-500: #FF5252;
|
||||
|
||||
|
||||
.tfw-grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: 8fr 1fr;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
border-radius: 0;
|
||||
.tfw-ace-editor {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
padding-left: 34px;
|
||||
}
|
||||
|
||||
.tfw-tab-btn {
|
||||
background-color: white;
|
||||
border: 1px solid $tao-plum-900;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
border-radius: 100px;
|
||||
padding: 5px 19px;
|
||||
z-index: 200;
|
||||
|
||||
.tfw-tab-btn-saved,
|
||||
.active,
|
||||
.disabled,
|
||||
&:disabled {
|
||||
background-color: $tao-plum-200;
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
.tfw-deploy-btn-group {
|
||||
margin: $small;
|
||||
|
||||
.tfw-deploy-btn {
|
||||
background: $tao-bright-green-200;
|
||||
border-radius: 100px;
|
||||
padding: 6px 19px;
|
||||
|
||||
img {
|
||||
position: relative;
|
||||
bottom: 1px;
|
||||
height: $small;
|
||||
}
|
||||
|
||||
&.failed {
|
||||
background-color: $tao-red-500;
|
||||
color:white;
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.disabled,
|
||||
&.deployed,
|
||||
&.deploy
|
||||
{
|
||||
background-color: $tao-bright-green-100;
|
||||
color: black;
|
||||
}
|
||||
|
||||
&.deploy {
|
||||
background-color: $tao-warm-yellow-200;
|
||||
}
|
||||
|
||||
|
||||
.loader {
|
||||
border: 2px solid #ffffff;
|
||||
border: 2px solid $tao-warm-yellow-600;
|
||||
border-radius: 50%;
|
||||
border-top: 2px solid #212529;
|
||||
border-top: 2px solid $tao-warm-yellow-200;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
animation: spin 2s linear infinite;
|
||||
@ -26,3 +94,7 @@
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@ import 'brace/mode/json';
|
||||
import 'brace/mode/python';
|
||||
import 'brace/mode/sql';
|
||||
|
||||
import 'brace/theme/monokai';
|
||||
import 'brace/theme/cobalt';
|
||||
import { SourceCode } from './source-code';
|
||||
import { WebSocketService } from '../services/websocket.service';
|
||||
import { ProcessManagerService } from '../services/processmanager.service';
|
||||
@ -31,7 +31,7 @@ export class WebideComponent implements OnInit {
|
||||
filename = 'demo.js';
|
||||
code: string = defaultSourceCode;
|
||||
language = 'javascript';
|
||||
theme = 'monokai';
|
||||
theme = 'cobalt';
|
||||
directory = '';
|
||||
files: string[];
|
||||
codeState = 'SAVED';
|
||||
|
||||
1
src/assets/images/avatao_logo.svg
Normal file
1
src/assets/images/avatao_logo.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 7.0 KiB |
1
src/assets/images/avataobot.svg
Executable file
1
src/assets/images/avataobot.svg
Executable file
@ -0,0 +1 @@
|
||||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11.98 16.98"><defs><style>.cls-1{fill:none;stroke:#277eec;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style></defs><title>avataobot</title><rect class="cls-1" x="2.46" y="7.47" width="7.05" height="7.05" transform="translate(9.53 -1.01) rotate(45)"/><polyline class="cls-1" points="10.98 1 5.99 5.99 1 1"/></svg>
|
||||
|
After Width: | Height: | Size: 417 B |
BIN
src/assets/images/favicon.ico
Executable file
BIN
src/assets/images/favicon.ico
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
1
src/assets/images/greentick_icon.svg
Normal file
1
src/assets/images/greentick_icon.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg id="Réteg_1" data-name="Réteg 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12.2"><defs><style>.cls-1{fill:none;stroke:#4fc3a8;stroke-linecap:round;stroke-miterlimit:10;}</style></defs><title>greentick_icon_smalll</title><line class="cls-1" x1="3.47" y1="6.58" x2="4.94" y2="8.45"/><line class="cls-1" x1="4.99" y1="8.44" x2="8.53" y2="4.18"/><ellipse class="cls-1" cx="6" cy="6.1" rx="5.5" ry="5.6"/></svg>
|
||||
|
After Width: | Height: | Size: 422 B |
44
src/assets/scss/_grid.scss
Normal file
44
src/assets/scss/_grid.scss
Normal file
@ -0,0 +1,44 @@
|
||||
.tao-grid-center-center {
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.tao-grid-center-right {
|
||||
justify-self: right;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.tao-grid-center-left {
|
||||
justify-self: left;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.tao-grid-start-center {
|
||||
justify-self: center;
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
.tao-grid-end-center {
|
||||
justify-self: center;
|
||||
align-self: end;
|
||||
}
|
||||
|
||||
.tao-grid-top-right {
|
||||
justify-self: right;
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
.tao-grid-top-left {
|
||||
justify-self: left;
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
.tao-grid-bottom-left {
|
||||
justify-self: left;
|
||||
align-self: end;
|
||||
}
|
||||
|
||||
.tao-grid-bottom-right {
|
||||
justify-self: right;
|
||||
align-self: end;
|
||||
}
|
||||
12
src/assets/scss/_main.scss
Normal file
12
src/assets/scss/_main.scss
Normal file
@ -0,0 +1,12 @@
|
||||
|
||||
|
||||
@import
|
||||
'variables',
|
||||
'grid';
|
||||
|
||||
@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));
|
||||
|
||||
|
||||
|
||||
$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;
|
||||
}
|
||||
}
|
||||
BIN
src/favicon.ico
BIN
src/favicon.ico
Binary file not shown.
|
Before Width: | Height: | Size: 5.3 KiB |
@ -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>
|
||||
|
||||
@ -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";
|
||||
|
||||
Loading…
Reference in New Issue
Block a user