Change CSS framework from PicoCSS to Bootstrap 5.3
This commit is contained in:
@@ -0,0 +1,304 @@
|
||||
// Lux 5.3.8
|
||||
// Bootswatch
|
||||
|
||||
|
||||
// Variables
|
||||
|
||||
$web-font-path: "https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;300;400;500;600;700&display=swap" !default;
|
||||
@if $web-font-path {
|
||||
@import url("#{$web-font-path}");
|
||||
}
|
||||
|
||||
:root {
|
||||
--bs-border-width: 0;
|
||||
}
|
||||
|
||||
// Navbar
|
||||
|
||||
.navbar {
|
||||
font-size: $font-size-sm;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
|
||||
&-nav {
|
||||
.nav-link {
|
||||
padding-top: .715rem;
|
||||
padding-bottom: .715rem;
|
||||
}
|
||||
}
|
||||
|
||||
&-brand {
|
||||
margin-right: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-light {
|
||||
border: 1px solid rgba(0, 0, 0, .1);
|
||||
|
||||
&.navbar-fixed-top {
|
||||
border-width: 0 0 1px;
|
||||
}
|
||||
|
||||
&.navbar-bottom-top {
|
||||
border-width: 1px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
margin-right: 2rem;
|
||||
}
|
||||
|
||||
// Buttons
|
||||
|
||||
.btn {
|
||||
font-size: $font-size-sm;
|
||||
text-transform: uppercase;
|
||||
|
||||
&-sm {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
&-primary {
|
||||
--bs-btn-hover-bg: #{$black};
|
||||
--bs-btn-hover-border-color: #{$black};
|
||||
--bs-btn-active-bg: #{$black};
|
||||
--bs-btn-active-border-color: #{$black};
|
||||
}
|
||||
|
||||
&-secondary {
|
||||
--bs-btn-hover-bg: #{$gray-200};
|
||||
--bs-btn-hover-border-color: #{$gray-200};
|
||||
--bs-btn-active-bg: #{$gray-300};
|
||||
--bs-btn-active-border-color: #{$gray-300};
|
||||
}
|
||||
|
||||
&-light {
|
||||
--bs-btn-hover-bg: #{$gray-300};
|
||||
--bs-btn-hover-border-color: #{$gray-300};
|
||||
--bs-btn-active-bg: #{$gray-400};
|
||||
--bs-btn-active-border-color: #{$gray-400};
|
||||
}
|
||||
|
||||
&-link {
|
||||
font-weight: $btn-font-weight;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-outline-secondary {
|
||||
--bs-btn-color: #{$black};
|
||||
--bs-btn-hover-bg: #{$gray-200};
|
||||
--bs-btn-hover-border-color: #{$gray-200};
|
||||
--bs-btn-active-bg: #{$gray-300};
|
||||
--bs-btn-active-border-color: #{$gray-300};
|
||||
border-color: $gray-100;
|
||||
}
|
||||
|
||||
.btn-outline-light {
|
||||
color: var(--bs-btn-active-color);
|
||||
}
|
||||
|
||||
[class*="btn-outline-"] {
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.border-secondary {
|
||||
border: 1px solid $gray-400 !important;
|
||||
}
|
||||
|
||||
@include color-mode(dark) {
|
||||
.btn-primary {
|
||||
--bs-btn-bg: #080808;
|
||||
--bs-btn-hover-bg: #{$black};
|
||||
}
|
||||
|
||||
.btn-outline-primary {
|
||||
color: $white;
|
||||
border-color: #080808;
|
||||
--bs-btn-hover-bg: #{$black};
|
||||
}
|
||||
|
||||
.btn-outline-secondary {
|
||||
--bs-btn-color: #{$white};
|
||||
--bs-btn-hover-color: #{$black};
|
||||
--bs-btn-hover-bg: #{$gray-200};
|
||||
--bs-btn-hover-border-color: #{$gray-200};
|
||||
--bs-btn-active-bg: #{$gray-300};
|
||||
--bs-btn-active-border-color: #{$gray-300};
|
||||
}
|
||||
|
||||
.btn-outline-light {
|
||||
color: $white;
|
||||
|
||||
&:not([disabled]):not(.disabled):hover,
|
||||
&:not([disabled]):not(.disabled):focus,
|
||||
&:not([disabled]):not(.disabled):active {
|
||||
color: var(--bs-btn-active-color);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-outline-dark {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
// Typography
|
||||
|
||||
body {
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
|
||||
.text-secondary {
|
||||
color: $body-color !important;
|
||||
}
|
||||
|
||||
// Tables
|
||||
|
||||
th {
|
||||
font-size: $font-size-sm;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.table {
|
||||
th,
|
||||
td {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
&-sm {
|
||||
th,
|
||||
td {
|
||||
padding: .75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-primary,
|
||||
.table-secondary,
|
||||
.table-success,
|
||||
.table-warning,
|
||||
.table-danger,
|
||||
.table-info,
|
||||
.table-light {
|
||||
--#{$prefix}table-color: #{$body-color};
|
||||
}
|
||||
|
||||
// Forms
|
||||
|
||||
@include color-mode(dark) {
|
||||
.form-control {
|
||||
color: $body-color;
|
||||
|
||||
&::placeholder {
|
||||
color: $body-secondary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.form-floating {
|
||||
> label,
|
||||
> .form-control:focus ~ label,
|
||||
> .form-control:not(:placeholder-shown) ~ label,
|
||||
> .form-control-plaintext ~ label,
|
||||
> .form-select ~ label {
|
||||
color: $body-secondary-color;
|
||||
}
|
||||
|
||||
> .form-control::placeholder,
|
||||
> .form-control-plaintext::placeholder {
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.form-check-input:checked {
|
||||
background-color: $body-secondary-color;
|
||||
}
|
||||
|
||||
.form-switch .form-check-input {
|
||||
background-image: $form-switch-bg-image;
|
||||
}
|
||||
|
||||
.form-range::-webkit-slider-thumb {
|
||||
background-color: $gray-600;
|
||||
}
|
||||
|
||||
.form-range:disabled::-webkit-slider-thumb {
|
||||
background-color: $gray-800;
|
||||
}
|
||||
|
||||
.input-group-text {
|
||||
color: $body-secondary-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Navs
|
||||
|
||||
.dropdown-menu {
|
||||
font-size: $font-size-sm;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
// Indicators
|
||||
|
||||
.badge {
|
||||
padding-top: .28rem;
|
||||
|
||||
&-pill {
|
||||
border-radius: 10rem;
|
||||
}
|
||||
|
||||
&.bg-secondary,
|
||||
&.bg-light {
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
|
||||
// Containers
|
||||
|
||||
.list-group-item,
|
||||
.card {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
.h1,
|
||||
.h2,
|
||||
.h3,
|
||||
.h4,
|
||||
.h5,
|
||||
.h6 {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-dialog {
|
||||
box-shadow: var(--bs-box-shadow);
|
||||
}
|
||||
|
||||
.popover {
|
||||
--bs-popover-border-color: transparent;
|
||||
box-shadow: var(--bs-box-shadow);
|
||||
|
||||
.popover-arrow {
|
||||
--bs-popover-border-width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include color-mode(dark) {
|
||||
.modal-content,
|
||||
.popover,
|
||||
.toast {
|
||||
background-color: lighten($gray-900, 5%);
|
||||
}
|
||||
}
|
||||
Executable
+124
@@ -0,0 +1,124 @@
|
||||
// Lux 5.3.8
|
||||
// Bootswatch
|
||||
|
||||
$theme: "lux" !default;
|
||||
|
||||
//
|
||||
// Color system
|
||||
//
|
||||
|
||||
$white: #fff !default;
|
||||
$gray-100: #f8f9fa !default;
|
||||
$gray-200: #f0f1f2 !default;
|
||||
$gray-300: #e0e1e2 !default;
|
||||
$gray-400: #cdcecf !default;
|
||||
$gray-500: #adb5bd !default;
|
||||
$gray-600: #919aa1 !default;
|
||||
$gray-700: #55595c !default;
|
||||
$gray-800: #343a40 !default;
|
||||
$gray-900: #1a1a1a !default;
|
||||
$black: #000 !default;
|
||||
|
||||
$blue: #007bff !default;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: #6f42c1 !default;
|
||||
$pink: #e83e8c !default;
|
||||
$red: #d9534f !default;
|
||||
$orange: #fd7e14 !default;
|
||||
$yellow: #f0ad4e !default;
|
||||
$green: #4bbf73 !default;
|
||||
$teal: #20c997 !default;
|
||||
$cyan: #1f9bcf !default;
|
||||
|
||||
$primary: $gray-900 !default;
|
||||
$secondary: $white !default;
|
||||
$success: $green !default;
|
||||
$info: $cyan !default;
|
||||
$warning: $yellow !default;
|
||||
$danger: $red !default;
|
||||
$light: $gray-200 !default;
|
||||
$dark: $gray-800 !default;
|
||||
|
||||
$min-contrast-ratio: 1.9 !default;
|
||||
|
||||
// Options
|
||||
|
||||
$enable-rounded: false !default;
|
||||
|
||||
// Body
|
||||
|
||||
$body-color: $gray-700 !default;
|
||||
|
||||
// Fonts
|
||||
|
||||
// stylelint-disable-next-line value-keyword-case
|
||||
$font-family-sans-serif: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
|
||||
|
||||
$font-weight-lighter: lighter !default;
|
||||
$font-weight-light: 200 !default;
|
||||
$font-weight-normal: 300 !default;
|
||||
$font-weight-medium: 400 !default;
|
||||
$font-weight-semibold: 500 !default;
|
||||
$font-weight-bold: 600 !default;
|
||||
$font-weight-bolder: bolder !default;
|
||||
|
||||
$h1-font-size: 2rem !default;
|
||||
$h2-font-size: 1.75rem !default;
|
||||
$h3-font-size: 1.5rem !default;
|
||||
$h4-font-size: 1.25rem !default;
|
||||
$h5-font-size: 1rem !default;
|
||||
$h6-font-size: .75rem !default;
|
||||
$headings-font-weight: 600 !default;
|
||||
$headings-color: $gray-900 !default;
|
||||
|
||||
// Tables
|
||||
|
||||
$table-color: initial !default;
|
||||
|
||||
$table-border-color: rgba(0, 0, 0, .05) !default;
|
||||
|
||||
// Buttons + Forms
|
||||
|
||||
// Buttons
|
||||
|
||||
$btn-line-height: 1.5rem !default;
|
||||
$input-btn-padding-y: .75rem !default;
|
||||
$input-btn-padding-x: 1.5rem !default;
|
||||
$input-btn-padding-y-sm: .5rem !default;
|
||||
$input-btn-padding-x-sm: 1rem !default;
|
||||
$input-btn-padding-y-lg: 2rem !default;
|
||||
$input-btn-padding-x-lg: 2rem !default;
|
||||
$btn-font-weight: 600 !default;
|
||||
|
||||
// Forms
|
||||
|
||||
$input-line-height: 1.5 !default;
|
||||
$input-bg: $gray-200 !default;
|
||||
$input-disabled-bg: $gray-300 !default;
|
||||
$input-group-addon-bg: $gray-300 !default;
|
||||
|
||||
$form-select-disabled-color: $gray-600 !default;
|
||||
$form-select-disabled-bg: $input-disabled-bg !default;
|
||||
|
||||
// Navbar
|
||||
|
||||
$navbar-padding-y: 1.5rem !default;
|
||||
$navbar-dark-hover-color: $white !default;
|
||||
$navbar-light-color: rgba($black, .3) !default;
|
||||
$navbar-light-hover-color: $gray-900 !default;
|
||||
$navbar-light-active-color: $gray-900 !default;
|
||||
|
||||
// Pagination
|
||||
|
||||
$pagination-border-color: transparent !default;
|
||||
$pagination-hover-border-color: $pagination-border-color !default;
|
||||
$pagination-disabled-border-color: $pagination-border-color !default;
|
||||
|
||||
// Popovers
|
||||
|
||||
$popover-header-bg: transparent !default;
|
||||
$popover-header-color: var(--bs-popover-header-color) !default;
|
||||
|
||||
// Toasts
|
||||
|
||||
$toast-header-background-color: transparent !default;
|
||||
Vendored
+12048
File diff suppressed because it is too large
Load Diff
Vendored
+12
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Vendored
+12022
File diff suppressed because it is too large
Load Diff
Vendored
+12
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user