From 5ac380c70262bf1cc0c643fce8396752e0c034f0 Mon Sep 17 00:00:00 2001 From: Gabor PEK Date: Thu, 8 Mar 2018 17:07:21 +0100 Subject: [PATCH] Polishing button colors and starting to create templates for different layouts --- src/app/dashboard/dashboard.component.scss | 16 ++++++++ src/app/messages/messages.component.scss | 6 +-- src/app/webide/webide.component.scss | 16 +++++--- src/assets/images/avatao_logo.svg | 48 +--------------------- 4 files changed, 30 insertions(+), 56 deletions(-) mode change 100755 => 100644 src/assets/images/avatao_logo.svg diff --git a/src/app/dashboard/dashboard.component.scss b/src/app/dashboard/dashboard.component.scss index 1a4df36..5dc2f36 100755 --- a/src/app/dashboard/dashboard.component.scss +++ b/src/app/dashboard/dashboard.component.scss @@ -139,6 +139,16 @@ $tao-gray-900: #000000; $tao-navbar-height: 67px; +// +// Layouts +// + +// Default messages, webide, terminal, web component +@mixin position($col-start, $col-end, $row-start, $row-end) { + grid-column: $col-start / $col-end; + grid-row: $row-start / $row-end; +} + .tao-grid-main-components { overflow-y: hidden; @@ -154,6 +164,7 @@ $tao-navbar-height: 67px; .tao-web-component { padding: $space; + @include position(2, 4, 1, 4); grid-column: 2 / 4; grid-row: 1 / 4; } @@ -161,17 +172,22 @@ $tao-navbar-height: 67px; .tao-messages-component { padding: $space; background-color: $tao-gray-50; + @include position(1, 2, 1, 4); grid-column: 1 / 2; grid-row: 1 / 4; + } .tao-webide-component { background-color: $tao-plum-900; + @include position(4, -1, 1, -1); grid-column: 4 / -1; grid-row: 1 / -1; + } .tao-terminal-component { + @include position(1, 4, 4, -1); grid-row: 4 / -1; grid-column: 1 / 4; } diff --git a/src/app/messages/messages.component.scss b/src/app/messages/messages.component.scss index 73beef1..c76d449 100755 --- a/src/app/messages/messages.component.scss +++ b/src/app/messages/messages.component.scss @@ -164,20 +164,20 @@ $font-size-base: 14px; .tao-grid-message { display: grid; grid-template-rows: 1fr auto; - grid-row-gap: $nano; + 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: $small; + margin-bottom: $hair; } .tao-grid-message-header { display: grid; grid-template-columns: 1fr 5fr 8fr; - grid-column-gap: 0; + grid-column-gap: 4px; width: 100%; img { diff --git a/src/app/webide/webide.component.scss b/src/app/webide/webide.component.scss index 749bf34..4575000 100644 --- a/src/app/webide/webide.component.scss +++ b/src/app/webide/webide.component.scss @@ -163,7 +163,7 @@ $tao-gray-900: #000000; .active, .disabled, &:disabled { - background-color: $tao-bright-green-100; + background-color: $tao-plum-200; color: black; } } @@ -188,19 +188,23 @@ $tao-gray-900: #000000; } &:disabled, - .disabled, - .deployed, - .deploying + &.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 $tao-bright-green-100; + border-top: 2px solid $tao-warm-yellow-200; width: 15px; height: 15px; animation: spin 2s linear infinite; diff --git a/src/assets/images/avatao_logo.svg b/src/assets/images/avatao_logo.svg old mode 100755 new mode 100644 index 3aa8601..29bceab --- a/src/assets/images/avatao_logo.svg +++ b/src/assets/images/avatao_logo.svg @@ -1,47 +1 @@ - - - - - - - - - - - - - - - +avataologo_small \ No newline at end of file