fix: added colors.scss file, start of a refactor
Some checks failed
Build / Build-and-ng-test (pull_request) Failing after 1m15s
Some checks failed
Build / Build-and-ng-test (pull_request) Failing after 1m15s
This commit is contained in:
parent
e98f288302
commit
110ad9a6e9
|
@ -1,3 +1,5 @@
|
|||
@import '../colors.scss';
|
||||
|
||||
// Copyright (c) 2016 VMware, Inc. All Rights Reserved.
|
||||
// This software is released under MIT license.
|
||||
// The full license information can be found in LICENSE in the root directory of this project.
|
||||
|
@ -6,7 +8,7 @@ app-requests-modal {
|
|||
}
|
||||
|
||||
header.app-header {
|
||||
background: #314351 !important;
|
||||
background: $headerBackground !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
@ -42,7 +44,7 @@ header.app-header {
|
|||
align-items: center;
|
||||
padding: 30px;
|
||||
z-index: 110;
|
||||
background: #314351;
|
||||
background: $headerBackground;
|
||||
|
||||
.expired-notice {
|
||||
color: #e0e0e0;
|
||||
|
@ -153,8 +155,8 @@ header {
|
|||
|
||||
body[cds-theme="light"] {
|
||||
.btn-primary .btn, .btn.btn-primary {
|
||||
border-color: #314351;
|
||||
background-color: #314351;
|
||||
border-color: $headerBackground;
|
||||
background-color: $headerBackground;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
@ -194,7 +196,7 @@ header {
|
|||
}
|
||||
|
||||
.btn.btn-outline:hover {
|
||||
border-color: #314351;
|
||||
border-color: $headerBackground;
|
||||
background-color: #495A67;
|
||||
color: #fff;
|
||||
}
|
||||
|
@ -208,13 +210,13 @@ header {
|
|||
|
||||
body[cds-theme="light"] {
|
||||
.btn.btn-icon.btn-dimmed {
|
||||
color: #314351;
|
||||
color: $headerBackground;
|
||||
}
|
||||
|
||||
.btn.btn-outline {
|
||||
border-color: #314351;
|
||||
border-color: $headerBackground;
|
||||
background-color: transparent;
|
||||
color: #314351;
|
||||
color: $headerBackground;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -1,12 +1,14 @@
|
|||
@import '../../colors.scss';
|
||||
|
||||
::ng-deep body[cds-theme="dark"] {
|
||||
.group-info {
|
||||
background-color: #314351;
|
||||
border-color: #314351;
|
||||
background-color: $headerBackground;
|
||||
border-color: $headerBackground;
|
||||
}
|
||||
|
||||
.group-data {
|
||||
background-color: #314351;
|
||||
border-color: #314351;
|
||||
background-color: $headerBackground;
|
||||
border-color: $headerBackground;
|
||||
}
|
||||
|
||||
.member-table tbody{
|
||||
|
@ -63,7 +65,6 @@
|
|||
}
|
||||
|
||||
.member-table{
|
||||
// background-color: #f9f9f9;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
|
@ -1,6 +1,8 @@
|
|||
@import '../../colors.scss';
|
||||
|
||||
.toggle-switch input[type=checkbox]:checked+label:before {
|
||||
border-color: #314351;
|
||||
background-color: #314351!important;
|
||||
border-color: $headerBackground;
|
||||
background-color: $headerBackground !important;
|
||||
transition: .15s ease-in;
|
||||
transition-property: border-color,background-color;
|
||||
}
|
||||
|
|
|
@ -1,3 +1,5 @@
|
|||
@import '../../../colors.scss';
|
||||
|
||||
.loader {
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
|
@ -74,7 +76,7 @@ background: rgba(252, 135, 120, 0.4);
|
|||
font-size: .54167rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: normal;
|
||||
background: #314351;
|
||||
background: $headerBackground;
|
||||
border-radius: .125rem;
|
||||
color: #f0f1ec;;
|
||||
line-height: .75rem;
|
||||
|
@ -97,8 +99,8 @@ background: rgba(252, 135, 120, 0.4);
|
|||
top: auto;
|
||||
right: auto;
|
||||
content: "";
|
||||
border-left: .25rem solid #314351;
|
||||
border-top: .20833rem solid #314351;
|
||||
border-left: .25rem solid $headerBackground;
|
||||
border-top: .20833rem solid $headerBackground;
|
||||
border-right: .25rem solid transparent;
|
||||
border-bottom: .20833rem solid transparent;
|
||||
}
|
||||
|
@ -108,8 +110,8 @@ border: 0px solid;
|
|||
}
|
||||
|
||||
.toggle-switch input[type=checkbox]:checked+label:before {
|
||||
border-color: #314351;
|
||||
background-color: #314351!important;
|
||||
border-color: $headerBackground;
|
||||
background-color: $headerBackground !important;
|
||||
transition: .15s ease-in;
|
||||
transition-property: border-color,background-color;
|
||||
}
|
||||
|
@ -169,7 +171,7 @@ border: 0px solid;
|
|||
.tooll {
|
||||
position: absolute;
|
||||
background: #e6b3b3;
|
||||
color: #314351;
|
||||
color: $headerBackground;
|
||||
top: 0px;
|
||||
height: 36px;
|
||||
width: 100%;
|
||||
|
|
|
@ -1,3 +1,5 @@
|
|||
@import '../../../colors.scss';
|
||||
|
||||
.column-center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
@ -13,11 +15,11 @@
|
|||
}
|
||||
|
||||
.tooltip.tooltip-bottom-left>.tooltip-content, .tooltip .tooltip-content.tooltip-bottom-left {
|
||||
background: #314351!important;
|
||||
background: $headerBackground !important;
|
||||
}
|
||||
.tooltip.tooltip-bottom-left>.tooltip-content:before, .tooltip .tooltip-content.tooltip-bottom-left:before {
|
||||
border-right: .25rem solid #314351;
|
||||
border-bottom: .20833rem solid #314351;
|
||||
border-right: .25rem solid $headerBackground;
|
||||
border-bottom: .20833rem solid $headerBackground;
|
||||
}
|
||||
|
||||
.noBorder {
|
||||
|
|
|
@ -1,13 +1,15 @@
|
|||
@import '../../../colors.scss';
|
||||
|
||||
.noBorder {
|
||||
border-bottom: 1px solid transparent!important;
|
||||
}
|
||||
|
||||
.tooltip.tooltip-bottom-left>.tooltip-content, .tooltip .tooltip-content.tooltip-bottom-left {
|
||||
background: #314351!important;
|
||||
background: $headerBackground !important;
|
||||
}
|
||||
.tooltip.tooltip-bottom-left>.tooltip-content:before, .tooltip .tooltip-content.tooltip-bottom-left:before {
|
||||
border-right: .25rem solid #314351;
|
||||
border-bottom: .20833rem solid #314351;
|
||||
border-right: .25rem solid $headerBackground;
|
||||
border-bottom: .20833rem solid $headerBackground;
|
||||
}
|
||||
|
||||
.no-submitted-tables {
|
||||
|
|
|
@ -1,12 +1,14 @@
|
|||
@import '../../colors.scss';
|
||||
|
||||
::ng-deep body[cds-theme="dark"] {
|
||||
.role {
|
||||
background-color: #314351;
|
||||
border-color: #314351;
|
||||
background-color: $headerBackground;
|
||||
border-color: $headerBackground;
|
||||
}
|
||||
|
||||
.role-data {
|
||||
background-color: #314351;
|
||||
border-color: #314351;
|
||||
background-color: $headerBackground;
|
||||
border-color: $headerBackground;
|
||||
}
|
||||
|
||||
.member-table tbody{
|
||||
|
|
|
@ -1,5 +1,7 @@
|
|||
@import '../../../colors.scss';
|
||||
|
||||
.sideBarProps {
|
||||
background: #314351!important;
|
||||
background: $headerBackground !important;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
|
|
|
@ -1,3 +1,5 @@
|
|||
@import '../../colors.scss';
|
||||
|
||||
.sidebar-height{
|
||||
height: 100%;
|
||||
}
|
||||
|
@ -8,13 +10,13 @@
|
|||
|
||||
::ng-deep body[cds-theme="dark"] {
|
||||
.user-info {
|
||||
background-color: #314351;
|
||||
border-color: #314351;
|
||||
background-color: $headerBackground;
|
||||
border-color: $headerBackground;
|
||||
}
|
||||
|
||||
.user-data {
|
||||
background-color: #314351;
|
||||
border-color: #314351;
|
||||
background-color: $headerBackground;
|
||||
border-color: $headerBackground;
|
||||
}
|
||||
|
||||
.user-table tbody{
|
||||
|
|
|
@ -1,3 +1,5 @@
|
|||
@import '../../colors.scss';
|
||||
|
||||
.card {
|
||||
margin-top: 0;
|
||||
|
||||
|
@ -11,8 +13,8 @@ clr-tree-node button {
|
|||
}
|
||||
|
||||
.toggle-switch input[type=checkbox]:checked+label:before {
|
||||
border-color: #314351;
|
||||
background-color: #314351!important;
|
||||
border-color: $headerBackground;
|
||||
background-color: $headerBackground !important;
|
||||
transition: .15s ease-in;
|
||||
transition-property: border-color,background-color;
|
||||
}
|
||||
|
|
4
client/src/colors.scss
Normal file
4
client/src/colors.scss
Normal file
|
@ -0,0 +1,4 @@
|
|||
$headerBackground: #314351;
|
||||
|
||||
$trackColor: #3b5268;
|
||||
$thumbColor: #273849;
|
|
@ -7,14 +7,13 @@
|
|||
@import '@cds/core/styles/theme.dark.min.css';
|
||||
@import '@clr/ui/clr-ui.min.css';
|
||||
|
||||
@import './colors.scss';
|
||||
|
||||
@font-face {
|
||||
font-family: text-security-disc;
|
||||
src: url('https://raw.githubusercontent.com/noppa/text-security/master/dist/text-security-disc.woff');
|
||||
}
|
||||
|
||||
$trackColor: #3b5268;
|
||||
$thumbColor: #273849;
|
||||
|
||||
body[cds-theme="dark"] {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: $trackColor $thumbColor;
|
||||
|
@ -39,22 +38,6 @@ body[cds-theme="dark"] {
|
|||
}
|
||||
}
|
||||
|
||||
// body::-webkit-scrollbar {
|
||||
// width: 11px;
|
||||
// }
|
||||
// body {
|
||||
// scrollbar-width: thin;
|
||||
// scrollbar-color: red blue;
|
||||
// }
|
||||
// body::-webkit-scrollbar-track {
|
||||
// background: blue;
|
||||
// }
|
||||
// body::-webkit-scrollbar-thumb {
|
||||
// background-color: red;
|
||||
// border-radius: 6px;
|
||||
// border: 3px solid blue;
|
||||
// }
|
||||
|
||||
body,
|
||||
html {
|
||||
font-weight: 400 !important;
|
||||
|
@ -163,7 +146,7 @@ body[cds-theme="light"] {
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
background: #314351;
|
||||
background: $headerBackground;
|
||||
flex-direction: column;
|
||||
z-index: 2000;
|
||||
position: fixed;
|
||||
|
@ -419,7 +402,7 @@ body[cds-theme="light"] {
|
|||
}
|
||||
|
||||
.color-darker-gray {
|
||||
color: #314351;
|
||||
color: $headerBackground;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue
Block a user