YunoHost/yunohost-admin
1
0
Fork 0
mirror of https://github.com/YunoHost/yunohost-admin.git synced 2024-09-03 20:06:15 +02:00
Code Issues Projects Releases Packages Wiki Activity

migration(bs5): update scss variables (colors, etc.)

Browse source
This commit is contained in:
axolotle 2024-03-14 21:42:38 +01:00
parent 6d26ef596d
commit 915023de1d
2 changed files with 77 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

102
app/src/scss/_variables.scss
View file

@ -27,45 +27,77 @@
@import '~bootstrap/scss/functions.scss'; @import '~bootstrap/scss/functions.scss';
$font-size-base: 0.9rem; $prefix: bs-;
$font-weight-bold: 500;
$white: var(--white); $white: #fff;
$gray-100: var(--gray-100); $gray-100: #fafafa;
$gray-200: var(--gray-200); $gray-200: #ededed;
$gray-300: var(--gray-300); $gray-300: #e3e3e3;
$gray-400: var(--gray-400); $gray-400: #d4d4d4;
$gray-500: var(--gray-500); $gray-500: #b5b5b5;
$gray-600: var(--gray-600); $gray-600: #757575;
$gray-700: var(--gray-700); $gray-700: #4f4f4f;
$gray-800: var(--gray-800); $gray-800: #3b3b3b;
$gray-900: var(--gray-900); $gray-900: #262626;
$black: var(--black); $black: #202020;
$blue: var(--blue); $blue: #60a5fa;
$indigo: var(--indigo); $indigo: #6812f3;
$purple: var(--purple); $purple: #b957ea;
$pink: var(--pink); $pink: #e93f8e;
$red: var(--red); $red: #ff5a5a;
$orange: var(--orange); $orange: #fd7e17;
$yellow: var(--yellow); $yellow: #ffd452;
$green: var(--green); $green: #70ea8d;
$teal: var(--teal); $teal: #20cb98;
$cyan: var(--cyan); $cyan: #7dd3fc;
$primary: $blue;
$secondary: $gray-600;
$success: $green;
$info: $cyan;
$warning: $yellow;
$danger: $red;
$light: $gray-100;
$dark: $gray-900;
$theme-colors: ( $theme-colors: (
'primary': $primary,
'secondary': $secondary,
'success': $success,
'info': $info,
'warning': $warning,
'danger': $danger,
'light': $light,
'dark': $dark,
'best': $purple, 'best': $purple,
); );
$code-color: $black; $min-contrast-ratio: 7;
// Replace font-weight 300 with 200 $spacer: 1rem;
$body-bg-dark: $black;
$border-color: $gray-400;
$border-color-dark: $gray-800;
$hr-border-color: var(--#{$prefix}border-color);
$link-color: shift-color($primary, 40%);
$code-color: $black;
$code-color-dark: $black;
$component-active-color: $black;
// Adapt font-weight based on fira
$font-weight-light: 200; $font-weight-light: 200;
$display1-weight: 200; $font-weight-normal: 400;
$display2-weight: 200; $font-weight-medium: 500;
$display3-weight: 200; $font-weight-semibold: 500;
$display4-weight: 200; $font-weight-bold: 700;
$lead-font-weight: 200;
$headings-font-weight: 500;
$font-size-base: 0.9rem;
// Set fonts // Set fonts
$font-family-sans-serif: $font-family-sans-serif:
@ -91,12 +123,7 @@ $h3-font-size: $font-size-base * 1.4;
$h4-font-size: $font-size-base * 1.25; $h4-font-size: $font-size-base * 1.25;
$h5-font-size: $font-size-base * 1.1; $h5-font-size: $font-size-base * 1.1;
$alert-padding-x: 1rem; $list-group-item-padding-y: $spacer * 0.75;
$card-spacer-y: 0.6rem;
$card-spacer-x: 1rem;
$list-group-item-padding-x: 1rem;
// Import default variables after the above setup to compute all other variables. // Import default variables after the above setup to compute all other variables.
@import '~bootstrap/scss/variables'; @import '~bootstrap/scss/variables';
@ -131,6 +158,5 @@ $fa-font-size-base: $font-size-base;
$thin-border: $hr-border-width solid $hr-border-color; $thin-border: $hr-border-width solid $hr-border-color;
$btn-padding-y-xs: 0.25rem; $btn-padding-y-xs: 0rem;
$btn-padding-x-xs: 0.35rem; $btn-padding-x-xs: 0.35rem;
$btn-line-height-xs: 1.5;

14
app/src/scss/main.scss
View file

@ -75,14 +75,19 @@ body {
align-items: center; align-items: center;
} }
// BOOSTRAP OVERIDES/ADDITIONS
// Add breakpoints for w-* // Add breakpoints for w-*
@each $breakpoint in map-keys($grid-breakpoints) { @each $breakpoint in map-keys($grid-breakpoints) {
@each $size, $length in $sizes {
@include media-breakpoint-up($breakpoint) { @include media-breakpoint-up($breakpoint) {
@each $size, $length in $position-values {
.w-#{$breakpoint}-#{$size} { .w-#{$breakpoint}-#{$size} {
width: $length !important; width: $length !important;
} }
} }
.w-#{$breakpoint}-auto {
width: auto !important;
}
} }
} }
@ -92,11 +97,16 @@ body {
$btn-padding-y-xs, $btn-padding-y-xs,
$btn-padding-x-xs, $btn-padding-x-xs,
$btn-font-size-sm, $btn-font-size-sm,
$btn-line-height-xs,
$btn-border-radius-sm $btn-border-radius-sm
); );
} }
.btn-outline-dark {
[data-bs-theme='dark'] & {
@include button-outline-variant($light);
}
}
// Allow state of input group to be displayed under the group // Allow state of input group to be displayed under the group
.input-group .is-invalid ~ .invalid-feedback { .input-group .is-invalid ~ .invalid-feedback {
display: block; display: block;