fix: added colors.scss file, start of a refactor
Some checks failed
Build / Build-and-ng-test (pull_request) Failing after 1m15s

This commit is contained in:
Mihajlo Medjedovic 2024-05-30 12:03:09 +02:00
parent e98f288302
commit 110ad9a6e9
12 changed files with 65 additions and 59 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,5 +1,7 @@
@import '../../../colors.scss';
.sideBarProps {
background: #314351!important;
background: $headerBackground !important;
color: #e0e0e0;
}

View File

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

View File

@ -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
View File

@ -0,0 +1,4 @@
$headerBackground: #314351;
$trackColor: #3b5268;
$thumbColor: #273849;

View File

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