dc/dc
dc/dc
3
1
Fork 0
Code Issues 8 Pull Requests 1 Actions Packages Projects Releases 32 Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
client/src/app/app.component.scss
View File

@ -1,3 +1,5 @@
@import '../colors.scss';
// Copyright (c) 2016 VMware, Inc. All Rights Reserved. // Copyright (c) 2016 VMware, Inc. All Rights Reserved.
// This software is released under MIT license. // This software is released under MIT license.
// The full license information can be found in LICENSE in the root directory of this project. // 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 { header.app-header {
background: #314351 !important; background: $headerBackground !important;
color: #fff; color: #fff;
} }
@ -42,7 +44,7 @@ header.app-header {
align-items: center; align-items: center;
padding: 30px; padding: 30px;
z-index: 110; z-index: 110;
background: #314351; background: $headerBackground;
.expired-notice { .expired-notice {
color: #e0e0e0; color: #e0e0e0;
@ -153,8 +155,8 @@ header {
body[cds-theme="light"] { body[cds-theme="light"] {
.btn-primary .btn, .btn.btn-primary { .btn-primary .btn, .btn.btn-primary {
border-color: #314351; border-color: $headerBackground;
background-color: #314351; background-color: $headerBackground;
color: #fff; color: #fff;
} }
} }
@ -194,7 +196,7 @@ header {
} }
.btn.btn-outline:hover { .btn.btn-outline:hover {
border-color: #314351; border-color: $headerBackground;
background-color: #495A67; background-color: #495A67;
color: #fff; color: #fff;
} }
@ -208,13 +210,13 @@ header {
body[cds-theme="light"] { body[cds-theme="light"] {
.btn.btn-icon.btn-dimmed { .btn.btn-icon.btn-dimmed {
color: #314351; color: $headerBackground;
} }
.btn.btn-outline { .btn.btn-outline {
border-color: #314351; border-color: $headerBackground;
background-color: transparent; background-color: transparent;
color: #314351; color: $headerBackground;
} }
} }

11
client/src/app/group/group.component.scss
View File

@ -1,12 +1,14 @@
@import '../../colors.scss';
::ng-deep body[cds-theme="dark"] { ::ng-deep body[cds-theme="dark"] {
.group-info { .group-info {
background-color: #314351; background-color: $headerBackground;
border-color: #314351; border-color: $headerBackground;
} }
.group-data { .group-data {
background-color: #314351; background-color: $headerBackground;
border-color: #314351; border-color: $headerBackground;
} }
.member-table tbody{ .member-table tbody{
@ -63,7 +65,6 @@
} }
.member-table{ .member-table{
// background-color: #f9f9f9;
width: 100%; width: 100%;
} }

6
client/src/app/lineage/lineage.component.scss
View File

@ -1,6 +1,8 @@
@import '../../colors.scss';
.toggle-switch input[type=checkbox]:checked+label:before { .toggle-switch input[type=checkbox]:checked+label:before {
border-color: #314351; border-color: $headerBackground;
background-color: #314351!important; background-color: $headerBackground !important;
transition: .15s ease-in; transition: .15s ease-in;
transition-property: border-color,background-color; transition-property: border-color,background-color;
} }

14
client/src/app/review/approve-details/approve-details.component.scss
View File

@ -1,3 +1,5 @@
@import '../../../colors.scss';
.loader { .loader {
display:flex; display:flex;
justify-content: center; justify-content: center;
@ -74,7 +76,7 @@ background: rgba(252, 135, 120, 0.4);
font-size: .54167rem; font-size: .54167rem;
font-weight: 400; font-weight: 400;
letter-spacing: normal; letter-spacing: normal;
background: #314351; background: $headerBackground;
border-radius: .125rem; border-radius: .125rem;
color: #f0f1ec;; color: #f0f1ec;;
line-height: .75rem; line-height: .75rem;
@ -97,8 +99,8 @@ background: rgba(252, 135, 120, 0.4);
top: auto; top: auto;
right: auto; right: auto;
content: ""; content: "";
border-left: .25rem solid #314351; border-left: .25rem solid $headerBackground;
border-top: .20833rem solid #314351; border-top: .20833rem solid $headerBackground;
border-right: .25rem solid transparent; border-right: .25rem solid transparent;
border-bottom: .20833rem solid transparent; border-bottom: .20833rem solid transparent;
} }
@ -108,8 +110,8 @@ border: 0px solid;
} }
.toggle-switch input[type=checkbox]:checked+label:before { .toggle-switch input[type=checkbox]:checked+label:before {
border-color: #314351; border-color: $headerBackground;
background-color: #314351!important; background-color: $headerBackground !important;
transition: .15s ease-in; transition: .15s ease-in;
transition-property: border-color,background-color; transition-property: border-color,background-color;
} }
@ -169,7 +171,7 @@ border: 0px solid;
.tooll { .tooll {
position: absolute; position: absolute;
background: #e6b3b3; background: #e6b3b3;
color: #314351; color: $headerBackground;
top: 0px; top: 0px;
height: 36px; height: 36px;
width: 100%; width: 100%;

8
client/src/app/review/approve/approve.component.scss
View File

@ -1,3 +1,5 @@
@import '../../../colors.scss';
.column-center { .column-center {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -13,11 +15,11 @@
} }
.tooltip.tooltip-bottom-left>.tooltip-content, .tooltip .tooltip-content.tooltip-bottom-left { .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 { .tooltip.tooltip-bottom-left>.tooltip-content:before, .tooltip .tooltip-content.tooltip-bottom-left:before {
border-right: .25rem solid #314351; border-right: .25rem solid $headerBackground;
border-bottom: .20833rem solid #314351; border-bottom: .20833rem solid $headerBackground;
} }
.noBorder { .noBorder {

8
client/src/app/review/submitter/submitter.component.scss
View File

@ -1,13 +1,15 @@
@import '../../../colors.scss';
.noBorder { .noBorder {
border-bottom: 1px solid transparent!important; border-bottom: 1px solid transparent!important;
} }
.tooltip.tooltip-bottom-left>.tooltip-content, .tooltip .tooltip-content.tooltip-bottom-left { .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 { .tooltip.tooltip-bottom-left>.tooltip-content:before, .tooltip .tooltip-content.tooltip-bottom-left:before {
border-right: .25rem solid #314351; border-right: .25rem solid $headerBackground;
border-bottom: .20833rem solid #314351; border-bottom: .20833rem solid $headerBackground;
} }
.no-submitted-tables { .no-submitted-tables {

10
client/src/app/role/role.component.scss
View File

@ -1,12 +1,14 @@
@import '../../colors.scss';
::ng-deep body[cds-theme="dark"] { ::ng-deep body[cds-theme="dark"] {
.role { .role {
background-color: #314351; background-color: $headerBackground;
border-color: #314351; border-color: $headerBackground;
} }
.role-data { .role-data {
background-color: #314351; background-color: $headerBackground;
border-color: #314351; border-color: $headerBackground;
} }
.member-table tbody{ .member-table tbody{

4
client/src/app/shared/login/login.component.scss
View File

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

10
client/src/app/user/user.component.scss
View File

@ -1,3 +1,5 @@
@import '../../colors.scss';
.sidebar-height{ .sidebar-height{
height: 100%; height: 100%;
} }
@ -8,13 +10,13 @@
::ng-deep body[cds-theme="dark"] { ::ng-deep body[cds-theme="dark"] {
.user-info { .user-info {
background-color: #314351; background-color: $headerBackground;
border-color: #314351; border-color: $headerBackground;
} }
.user-data { .user-data {
background-color: #314351; background-color: $headerBackground;
border-color: #314351; border-color: $headerBackground;
} }
.user-table tbody{ .user-table tbody{

6
client/src/app/viewer/viewer.component.scss
View File

@ -1,3 +1,5 @@
@import '../../colors.scss';
.card { .card {
margin-top: 0; margin-top: 0;
@ -11,8 +13,8 @@ clr-tree-node button {
} }
.toggle-switch input[type=checkbox]:checked+label:before { .toggle-switch input[type=checkbox]:checked+label:before {
border-color: #314351; border-color: $headerBackground;
background-color: #314351!important; background-color: $headerBackground !important;
transition: .15s ease-in; transition: .15s ease-in;
transition-property: border-color,background-color; 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;

25
client/src/styles.scss
View File

@ -7,14 +7,13 @@
@import '@cds/core/styles/theme.dark.min.css'; @import '@cds/core/styles/theme.dark.min.css';
@import '@clr/ui/clr-ui.min.css'; @import '@clr/ui/clr-ui.min.css';
@import './colors.scss';
@font-face { @font-face {
font-family: text-security-disc; font-family: text-security-disc;
src: url('https://raw.githubusercontent.com/noppa/text-security/master/dist/text-security-disc.woff'); src: url('https://raw.githubusercontent.com/noppa/text-security/master/dist/text-security-disc.woff');
} }
$trackColor: #3b5268;
$thumbColor: #273849;
body[cds-theme="dark"] { body[cds-theme="dark"] {
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: $trackColor $thumbColor; 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, body,
html { html {
font-weight: 400 !important; font-weight: 400 !important;
@ -163,7 +146,7 @@ body[cds-theme="light"] {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100vh; height: 100vh;
background: #314351; background: $headerBackground;
flex-direction: column; flex-direction: column;
z-index: 2000; z-index: 2000;
position: fixed; position: fixed;
@ -419,7 +402,7 @@ body[cds-theme="light"] {
} }
.color-darker-gray { .color-darker-gray {
color: #314351; color: $headerBackground;
} }
} }