mirror of
https://github.com/retspen/webvirtcloud
synced 2026-11-10 04:06:47 +00:00
chore(frontend): upgrade Bootswatch and Bootstrap SCSS to v5.3.3
- Upgraded Bootswatch SCSS source files across all 25 themes (dev/scss/bootswatch/) to v5.3.3 - Upgraded Bootstrap SCSS source files (dev/scss/bootstrap/) to v5.3.3 to match static/js/bootstrap.bundle.min.js - Updated dev/scss/bootstrap-overrides.scss to import bootstrap/variables-dark - Verified error-free LibSass compilation for all 26 themes (25 Bootswatch + bootstrap-orj) - Recompiled static/css/wvc-main.min.css
This commit is contained in:
catborise
parent
ac91248a29
commit
2ea6652a0e
155 changed files with 1923 additions and 1095 deletions
|
|
@ -1,4 +1,4 @@
|
|||
// Morph 5.2.2
|
||||
// Morph 5.3.3
|
||||
// Bootswatch
|
||||
|
||||
|
||||
|
|
@ -6,25 +6,23 @@
|
|||
|
||||
$web-font-path: "https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" !default;
|
||||
@if $web-font-path {
|
||||
@import url($web-font-path);
|
||||
@import url("#{$web-font-path}");
|
||||
}
|
||||
|
||||
$btn-box-shadow-inset: inset 2px 3px 6px rgba($black, .2), inset -3px -2px 6px rgba($white, .2) !default;
|
||||
|
||||
:root {
|
||||
color-scheme: light;
|
||||
}
|
||||
$box-shadow-dark: 5px 5px 10px rgba(darken($dark, 50%), .2), -5px -5px 10px rgba($white, .05) !default;
|
||||
|
||||
// Mixins
|
||||
|
||||
@mixin shadow($shadow: $box-shadow) {
|
||||
background-color: $gray-200;
|
||||
@mixin shadow($bg: $gray-200, $shadow: $box-shadow) {
|
||||
background-color: $bg;
|
||||
border: none;
|
||||
box-shadow: $shadow;
|
||||
transition: background-color .15s ease-in-out, border .15s ease-in-out, box-shadow .15s ease-in-out, color .15s ease-in-out;
|
||||
}
|
||||
|
||||
@mixin shadow-outline($shadow: $box-shadow) {
|
||||
@mixin shadow-outline($bg: $body-bg, $shadow: $box-shadow) {
|
||||
position: absolute;
|
||||
top: -.5rem;
|
||||
right: -.5rem;
|
||||
|
|
@ -32,7 +30,7 @@ $btn-box-shadow-inset: inset 2px 3px 6px rgba($black, .2), inset -3px -2px 6px r
|
|||
left: -.5rem;
|
||||
z-index: -1;
|
||||
content: "";
|
||||
background-color: $body-bg;
|
||||
background-color: $bg;
|
||||
border: 1px solid rgba($white, .1);
|
||||
box-shadow: $shadow;
|
||||
transition: background-color .15s ease-in-out, border .15s ease-in-out, box-shadow .15s ease-in-out, color .15s ease-in-out;
|
||||
|
|
@ -97,6 +95,13 @@ $btn-box-shadow-inset: inset 2px 3px 6px rgba($black, .2), inset -3px -2px 6px r
|
|||
}
|
||||
}
|
||||
|
||||
@include color-mode(dark) {
|
||||
.btn {
|
||||
@include shadow($dark, $box-shadow-dark);
|
||||
color: $navbar-dark-color;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
@each $color, $value in $theme-colors {
|
||||
&-#{$color} {
|
||||
|
|
@ -160,6 +165,14 @@ $btn-box-shadow-inset: inset 2px 3px 6px rgba($black, .2), inset -3px -2px 6px r
|
|||
}
|
||||
}
|
||||
|
||||
@include color-mode(dark) {
|
||||
.btn-group,
|
||||
.btn-group-vertical {
|
||||
@include shadow($dark, $box-shadow-dark);
|
||||
color: $navbar-dark-color;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
|
||||
> .btn:nth-child(n + 3),
|
||||
|
|
@ -258,6 +271,14 @@ $btn-box-shadow-inset: inset 2px 3px 6px rgba($black, .2), inset -3px -2px 6px r
|
|||
box-shadow: inset 0 3px 6px rgba($black, .2);
|
||||
}
|
||||
|
||||
@include color-mode(dark) {
|
||||
.btn-check:not(:checked) + .btn,
|
||||
.btn-check:not(:checked) + .btn:active {
|
||||
color: $navbar-dark-color;
|
||||
background-color: $dark;
|
||||
}
|
||||
}
|
||||
|
||||
// Navs
|
||||
|
||||
.dropdown-menu {
|
||||
|
|
@ -310,6 +331,16 @@ $btn-box-shadow-inset: inset 2px 3px 6px rgba($black, .2), inset -3px -2px 6px r
|
|||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
@include color-mode(dark) {
|
||||
.nav-tabs,
|
||||
.nav-pills,
|
||||
.breadcrumb,
|
||||
.pagination {
|
||||
@include shadow($dark, $box-shadow-dark);
|
||||
color: $navbar-dark-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Forms
|
||||
|
||||
.input-group {
|
||||
|
|
@ -318,8 +349,6 @@ $btn-box-shadow-inset: inset 2px 3px 6px rgba($black, .2), inset -3px -2px 6px r
|
|||
box-shadow: $box-shadow-inset;
|
||||
|
||||
> .form-control {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
|
@ -327,6 +356,19 @@ $btn-box-shadow-inset: inset 2px 3px 6px rgba($black, .2), inset -3px -2px 6px r
|
|||
.input-group-text {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.btn {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
|
||||
&:first-child {
|
||||
border-radius: $border-radius 0 0 $border-radius;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 $border-radius $border-radius 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-range {
|
||||
|
|
@ -371,11 +413,27 @@ $btn-box-shadow-inset: inset 2px 3px 6px rgba($black, .2), inset -3px -2px 6px r
|
|||
box-shadow: $box-shadow;
|
||||
}
|
||||
|
||||
@include color-mode(dark) {
|
||||
.form-control {
|
||||
&:disabled {
|
||||
background-color: $gray-400;
|
||||
}
|
||||
|
||||
&::file-selector-button {
|
||||
box-shadow: 2px 2px 5px rgba($black, .2), inset 3px 3px 10px rgba(shade-color($form-range-thumb-bg, 50%), .1);
|
||||
}
|
||||
}
|
||||
|
||||
.form-select:not([multiple]) {
|
||||
box-shadow: $box-shadow-dark;
|
||||
}
|
||||
}
|
||||
|
||||
// Indicators
|
||||
|
||||
.alert {
|
||||
box-shadow: $dropdown-box-shadow;
|
||||
backdrop-filter: blur(3px);
|
||||
box-shadow: $dropdown-box-shadow;
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
&-#{$color} {
|
||||
|
|
@ -399,16 +457,16 @@ $btn-box-shadow-inset: inset 2px 3px 6px rgba($black, .2), inset -3px -2px 6px r
|
|||
|
||||
&-inner,
|
||||
.arrow {
|
||||
box-shadow: $dropdown-box-shadow;
|
||||
backdrop-filter: blur(3px);
|
||||
box-shadow: $dropdown-box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
.popover,
|
||||
.toast,
|
||||
.modal-content {
|
||||
box-shadow: $dropdown-box-shadow;
|
||||
backdrop-filter: blur(3px);
|
||||
box-shadow: $dropdown-box-shadow;
|
||||
}
|
||||
|
||||
.progress {
|
||||
|
|
@ -462,3 +520,31 @@ $btn-box-shadow-inset: inset 2px 3px 6px rgba($black, .2), inset -3px -2px 6px r
|
|||
.list-group-item {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
@include color-mode(dark) {
|
||||
|
||||
.card,
|
||||
.list-group {
|
||||
background-color: mix($black, $dark, 3%);
|
||||
box-shadow: inset 2px 2px 6px rgba(shade-color($dark, 50%), .2), inset -3px -2px 4px rgba($white, .05);
|
||||
}
|
||||
|
||||
.card {
|
||||
&.bg-secondary,
|
||||
&.bg-light {
|
||||
color: $body-color;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-content,
|
||||
.popover,
|
||||
.toast {
|
||||
background-color: mix($white, $dark, 3%);
|
||||
box-shadow: 8px 8px 40px rgba(0, 0, 0, .15), inset 1px 1px 3px rgba(255, 255, 255, .05), inset -5px -5px 20px rgba(0, 0, 0, .05);
|
||||
}
|
||||
|
||||
.popover-header,
|
||||
.toast-header {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
// Morph 5.2.2
|
||||
// Morph 5.3.3
|
||||
// Bootswatch
|
||||
|
||||
$theme: "morph" !default;
|
||||
|
|
@ -110,8 +110,6 @@ $form-range-thumb-bg: $gray-100 !default;
|
|||
$form-range-thumb-active-bg: $form-range-thumb-bg !default;
|
||||
$form-range-thumb-disabled-bg: $gray-200 !default;
|
||||
|
||||
$form-file-button-bg: $gray-100 !default;
|
||||
|
||||
// Navs
|
||||
|
||||
$nav-link-color: $body-color !default;
|
||||
|
|
@ -152,7 +150,7 @@ $pagination-padding-y-sm: .5rem !default;
|
|||
$pagination-padding-y-lg: 1.5rem !default;
|
||||
|
||||
$pagination-color: $gray-700 !default;
|
||||
$pagination-bg: $body-bg !default;
|
||||
$pagination-bg: transparent !default;
|
||||
|
||||
$pagination-active-color: darken($pagination-color, 20%) !default;
|
||||
$pagination-active-bg: transparent !default;
|
||||
|
|
@ -166,22 +164,19 @@ $pagination-disabled-bg: $pagination-bg !default;
|
|||
$card-spacer-y: 1.5rem !default;
|
||||
$card-spacer-x: 1.5rem !default;
|
||||
$card-cap-bg: transparent !default;
|
||||
$card-bg: lighten($body-bg, 3%) !default;
|
||||
|
||||
// Tooltips
|
||||
|
||||
$tooltip-color: $body-color !default;
|
||||
$tooltip-bg: $dropdown-bg !default;
|
||||
|
||||
// Popovers
|
||||
|
||||
$popover-bg: $dropdown-bg !default;
|
||||
|
||||
$popover-header-bg: transparent !default;
|
||||
|
||||
$popover-arrow-width: 0 !default;
|
||||
|
||||
// Toasts
|
||||
|
||||
$toast-background-color: $dropdown-bg !default;
|
||||
$toast-border-width: 0 !default;
|
||||
|
||||
$toast-header-color: $body-color !default;
|
||||
|
|
@ -194,8 +189,6 @@ $badge-padding-x: 1.25em !default;
|
|||
|
||||
// Modals
|
||||
|
||||
$modal-content-bg: $dropdown-bg !default;
|
||||
|
||||
// Progress bars
|
||||
|
||||
$progress-height: 1.5rem !default;
|
||||
|
|
@ -203,8 +196,6 @@ $progress-border-radius: $border-radius-pill !default;
|
|||
|
||||
// List groups
|
||||
|
||||
$list-group-bg: $card-bg !default;
|
||||
|
||||
$list-group-hover-bg: transparent !default;
|
||||
$list-group-active-color: $link-color !default;
|
||||
$list-group-active-bg: transparent !default;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue