Skip to content

Commit

Permalink
[GUI] Rewrite CSS to remove dependency on global HTML font-size
Browse files Browse the repository at this point in the history
  • Loading branch information
@dragonbane0
dragonbane0 committed Aug 2, 2023
1 parent 11cb1f3 commit 8d7508c
Show file tree
Hide file tree
Showing 14 changed files with 208 additions and 174 deletions.
6 changes: 3 additions & 3 deletions GUI/src/app/@theme/components/footer/footer.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,10 @@
align-items: center;

.socials {
font-size: 2rem;
font-size: 28px;

a {
padding: 0.4rem;
padding: 5.6px;
color: nb-theme(color-success-600);
transition: color ease-out 0.1s;

Expand All @@ -29,7 +29,7 @@

@include media-breakpoint-down(is) {
.socials {
font-size: 1.5rem;
font-size: 21px;
}
}
}
8 changes: 4 additions & 4 deletions GUI/src/app/@theme/components/header/header.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@
width: 80px;

.navigation {
font-size: 2.5rem;
font-size: 35px;
text-decoration: none;

i {
Expand All @@ -86,7 +86,7 @@
}

ngx-layout-direction-switcher {
margin: 0 1.5rem;
margin: 0 21px
}

@include media-breakpoint-down(xl) {
Expand All @@ -102,7 +102,7 @@

i {
color: nb-theme(text-hint-color);
font-size: 2.25rem;
font-size: 31.5px;
border-radius: 50%;
position: relative;
animation-name: pulse-light;
Expand Down Expand Up @@ -186,7 +186,7 @@

.header-container {
.logo {
font-size: 1.25rem;
font-size: 17.5px;
}
}

Expand Down
24 changes: 12 additions & 12 deletions GUI/src/app/@theme/layouts/GUI/gui.layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@
}

nb-sidebar.settings-sidebar {
$sidebar-width: 7.5rem;
$sidebar-width: 105px;

transition: width 0.3s ease;
width: $sidebar-width;
Expand All @@ -96,7 +96,7 @@

.scrollable {
width: $sidebar-width;
padding: 1.25rem;
padding: 17.5px;
}
}
}
Expand Down Expand Up @@ -146,15 +146,15 @@
}

:host ::ng-deep nb-sidebar-header {
padding-bottom: 0.5rem;
padding-bottom: 7px;
text-align: center;
}

background: transparent;

.main-btn {
padding: 0.75rem 2.5rem;
margin-top: -2rem;
padding: 10.5px 35px;
margin-top: -28px;
font-weight: bold;
transition: padding 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.48);

Expand All @@ -163,13 +163,13 @@
}

i {
font-size: 2rem;
font-size: 28px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

span {
@include nb-ltr(padding-left, 0.25rem);
@include nb-rtl(padding-right, 0.25rem);
@include nb-ltr(padding-left, 3.5px);
@include nb-rtl(padding-right, 3.5px);
}

i, span {
Expand All @@ -185,9 +185,9 @@
&::after {
content: 'new';
color: nb-theme(color-white);
margin-left: 1rem;
margin-left: 14px;
background: nb-theme(color-danger);
padding: 0 0.5rem;
padding: 0 7px;
border-radius: nb-theme(border-radius);
font-size: nb-theme(font-size-sm);
}
Expand All @@ -197,7 +197,7 @@
}

.nb-e-commerce {
font-size: 2rem;
font-size: 28px;
}
}

Expand All @@ -211,7 +211,7 @@
.main-btn {
width: 46px;
height: 44px;
padding: 0.375rem;
padding: 5.25px;
border-radius: 5px;
transition: none;

Expand Down
90 changes: 45 additions & 45 deletions GUI/src/app/@theme/styles/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,13 +124,13 @@
background-color: nb-theme(color-basic-100) !important;
display: block;
width: 100%;
font-size: 1rem;
font-size: 14px;
line-height: 1.5;
color: nb-theme(color-basic-600);
background-clip: padding-box;
border-radius: 0.25rem;
border-radius: 3.5px;
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
padding: 0.75rem 1.125rem;
padding: 10.5px 15.75px;
font-family: Roboto, "Helvetica Neue", sans-serif;
font-weight: 400;
}
Expand Down Expand Up @@ -163,10 +163,10 @@
color: nb-theme(color-basic-100);
}

padding: 0.5rem 1.25rem;
font-size: .75rem;
padding: 7px 17.5px;
font-size: 10.5px;
line-height: 1.25;
border-radius: 0.75rem;
border-radius: 10.5px;
color: nb-theme(color-basic-100);
font-weight: nb-theme(picker-font-weight);
font-family: Exo;
Expand Down Expand Up @@ -209,8 +209,8 @@

input.form-control.ng-valid.size-medium.status-basic.shape-rectangle {
max-width: unset;
border-radius: 0.17rem;
padding: 0.75rem 1.125rem;
border-radius: 2.38px;
padding: 10.5px 15.75px;
height: 28px;
margin: 1px 0 9px 0;
background-color: white;
Expand All @@ -219,38 +219,38 @@
nb-dialog-container {
input.size-small.status-basic.shape-rectangle {
line-height: unset;
padding: 0.375rem 1.125rem;
padding: 5.25px 15.75px;
}

nb-card-header {
border: 0;
padding: 1.25rem;
padding: 17.5px;
font-family: Exo;
font-size: 1.125rem;
font-size: 15.75px;
font-weight: 600;

button[nbbutton] {
padding: 0.5rem 1.25rem;
font-size: 0.75rem;
padding: 7px 17.5px;
font-size: 10.5px;
box-shadow: unset;
}
}

nb-card-footer {
border: 0;
padding: 1.25rem;
padding: 17.5px;
}

.footerButtonWrapper {
padding: 0;
font-family: Exo;
font-size: 1.125rem;
font-size: 15.75px;
font-weight: 600;

button[nbbutton].shape-rectangle {
line-height: 1.0rem;
padding: 0.75rem 1.5rem;
font-size: 0.875rem;
line-height: 14px;
padding: 10.5px 21px;
font-size: 12.25px;

&.status-basic, &.status-primary {
background-color: nb-theme(color-warning-200);
Expand All @@ -268,7 +268,7 @@
}

&.status-danger {
padding: 0.75rem 1.5rem;
padding: 10.5px 21px;
background-image: unset;
box-shadow: unset;
}
Expand All @@ -282,13 +282,13 @@
button[nbbutton] {
font-family: Exo;
font-weight: 500;
font-size: 0.875rem;
font-size: 12.25px;
background-image: unset;

&.status-danger {
font-size: 0.875rem;
font-size: 12.25px;
line-height: 1.25;
border-radius: 0.75rem;
border-radius: 10.5px;
background-color: nb-theme(color-warning-900);
border-color: nb-theme(color-warning-900);
color: nb-theme(color-success-700);
Expand All @@ -302,9 +302,9 @@

input.size-small.status-basic.shape-rectangle {
font-family: Roboto, "Helvetica Neue", sans-serif;
border-radius: 0.17rem;
font-size: 0.875rem;
padding: 0.1rem 1.125rem;
border-radius: 2.38px;
font-size: 12.25px;
padding: 1.4px 15.75px;
position: relative;
left: 0;
max-width: unset;
Expand Down Expand Up @@ -337,8 +337,8 @@
min-width: 30px;
width: auto;
text-align: center;
padding-top: 0.15rem;
padding-bottom: 0.15rem;
padding-top: 2.1px;
padding-bottom: 2.1px;
}
}

Expand Down Expand Up @@ -405,7 +405,7 @@
}

nb-layout-column {
padding: 0 2.25rem 0;
padding: 0 31.5px 0;
}
}

Expand All @@ -421,12 +421,12 @@

nb-card {
border: 0;
font-size: 1rem;
font-size: 14px;
line-height: 1.25;
background: nb-theme(background-basic-color-1);
color: #000;
margin-bottom: 1.5rem;
border-radius: 0.17rem;
margin-bottom: 21px;
border-radius: 2.38px;
box-shadow: none;
font-weight: 400;

Expand All @@ -441,7 +441,7 @@

nb-option {
background-color: nb-theme(color-basic-700);
padding: 0.75rem 1.5rem;
padding: 10.5px 21px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
Expand All @@ -465,8 +465,8 @@

.form-control.ng-pristine.ng-valid.size-medium.status-basic.shape-rectangle {
&.ng-untouched, &.ng-touched {
border-radius: 0.17rem;
padding: 0.75rem 1.125rem;
border-radius: 2.38px;
padding: 10.5px 15.75px;
height: 28px;
margin: 1px 0 9px 0;
background-color: white;
Expand All @@ -492,9 +492,9 @@
background-color: nb-theme(color-warning-200);
border-color: nb-theme(color-warning-200);
color: nb-theme(color-info-300);
padding: 0.75rem 1.5rem;
padding: 10.5px 21px;
font-family: Exo;
font-size: 1rem;
font-size: 14px;
font-weight: 500;
}

Expand Down Expand Up @@ -534,9 +534,9 @@
}

button.size-small.status-info.shape-rectangle {
font-size: 0.875rem;
font-size: 12.25px;
font-weight: 500;
padding: 0.275rem 1.5rem;
padding: 3.85px 21px;
font-family: Exo;
letter-spacing: 0.4px;
background-color: nb-theme(color-info-500);
Expand Down Expand Up @@ -571,7 +571,7 @@
position: fixed;
bottom: 0;
left: 0;
padding: 1.25rem;
padding: 17.5px;
height: 40px;
width: 100%;
background: nb-theme(color-warning-800);
Expand All @@ -584,7 +584,7 @@

nb-tab {
font-family: Roboto, "Helvetica Neue", sans-serif;
font-size: 1rem;
font-size: 14px;

h3 {
font-family: Exo;
Expand Down Expand Up @@ -627,14 +627,14 @@
nb-tabset a.tab-link {
background-color: transparent;
cursor: pointer;
padding: 1rem 1rem 0.6rem 1rem;
padding: 14px 14px 8.4px 14px;
color: nb-theme(color-basic-1000);
font-family: Exo;
font-size: 1.125rem;
font-size: 15.75px;
font-weight: 700;
line-height: 1rem;
line-height: 14px;
text-transform: uppercase;
margin-top: 0.5rem;
margin-top: 7px;
}

mat-grid-tile.mat-grid-tile {
Expand Down Expand Up @@ -692,6 +692,6 @@
}
}

html {
ngx-app {
font-size: 14px;
}
Loading

0 comments on commit 8d7508c

Please sign in to comment.