From b3e373bc0b33677d77b9576fd1a4daf5dc158781 Mon Sep 17 00:00:00 2001 From: Alex Tselegidis Date: Mon, 24 Jan 2022 10:38:38 +0100 Subject: [PATCH] Add bootwatch's "lux" theme override --- assets/css/_bootswatch.scss | 184 ++++++++++++++++++++++++++++++++++++ assets/css/_variables.scss | 103 ++++++++++++++++++++ assets/css/bootstrap.scss | 5 + 3 files changed, 292 insertions(+) create mode 100644 assets/css/_bootswatch.scss create mode 100644 assets/css/_variables.scss diff --git a/assets/css/_bootswatch.scss b/assets/css/_bootswatch.scss new file mode 100644 index 00000000..3d9c9023 --- /dev/null +++ b/assets/css/_bootswatch.scss @@ -0,0 +1,184 @@ +// Lux 5.1.3 +// Bootswatch + + +// Variables + +$web-font-path: "https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600&display=swap" !default; +@if $web-font-path { + @import url($web-font-path); +} + +// Navbar + +.navbar { + font-size: $font-size-sm; + text-transform: uppercase; + font-weight: 600; + + &-nav { + .nav-link { + padding-top: .715rem; + padding-bottom: .715rem; + } + } + + &-brand { + margin-right: 2rem; + } +} + +.bg-primary { + background-color: theme-color("primary") !important; +} + +.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; + } + + &-warning { + &, + &:hover, + &:not([disabled]):not(.disabled):active, + &:focus { + color: $white; + } + } +} + +.btn-outline-secondary { + border-color: $gray-600; + color: $gray-600; + + &:not([disabled]):not(.disabled):hover, + &:not([disabled]):not(.disabled):focus, + &:not([disabled]):not(.disabled):active { + background-color: $gray-400; + border-color: $gray-400; + color: $white; + } + + &:not([disabled]):not(.disabled):focus { + box-shadow: 0 0 0 .2rem rgba($gray-400, .5); + } +} + +[class*="btn-outline-"] { + border-width: 2px; +} + +.border-secondary { + border: 1px solid $gray-400 !important; +} + +// Typography + +body { + font-weight: 200; + 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; + } + } +} + +// 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 { + h1, + h2, + h3, + h4, + h5, + h6, + .h1, + .h2, + .h3, + .h4, + .h5, + .h6 { + color: inherit; + } +} + +.card { + &-title, + &-header { + color: inherit; + } +} diff --git a/assets/css/_variables.scss b/assets/css/_variables.scss new file mode 100644 index 00000000..c870b8ce --- /dev/null +++ b/assets/css/_variables.scss @@ -0,0 +1,103 @@ +// Lux 5.1.3 +// Bootswatch + +$theme: "lux" !default; + +// +// Color system +// + +$white: #fff !default; +$gray-100: #f8f9fa !default; +$gray-200: #f7f7f9 !default; +$gray-300: #eceeef !default; +$gray-400: #ced4da !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: $white !default; +$dark: $gray-800 !default; + +$min-contrast-ratio: 2.3 !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; +$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-border-color: rgba(0, 0, 0, .05) !default; + +// Buttons + Forms + +$input-btn-border-width: 0 !default; + +// 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; + +// 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; diff --git a/assets/css/bootstrap.scss b/assets/css/bootstrap.scss index 34d581b3..33d359e7 100644 --- a/assets/css/bootstrap.scss +++ b/assets/css/bootstrap.scss @@ -10,6 +10,11 @@ * ---------------------------------------------------------------------------- */ $primary: #439982; + $min-contrast-ratio: 2; +@import "variables"; + @import '../../node_modules/bootstrap/scss/bootstrap'; + +@import "bootswatch";