diff --git a/assets/css/_bootswatch.scss b/assets/css/_bootswatch.scss index 3d9c9023..fd1ec73a 100644 --- a/assets/css/_bootswatch.scss +++ b/assets/css/_bootswatch.scss @@ -6,98 +6,96 @@ $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); + @import url($web-font-path); } // Navbar .navbar { - font-size: $font-size-sm; - text-transform: uppercase; - font-weight: 600; + font-size: $font-size-sm; + text-transform: uppercase; + font-weight: 600; - &-nav { - .nav-link { - padding-top: .715rem; - padding-bottom: .715rem; + &-nav { + .nav-link { + padding-top: .715rem; + padding-bottom: .715rem; + } } - } - &-brand { - margin-right: 2rem; - } + &-brand { + margin-right: 2rem; + } } .bg-primary { - background-color: theme-color("primary") !important; + background-color: theme-color("primary") !important; } .bg-light { - border: 1px solid rgba(0, 0, 0, .1); + border: 1px solid rgba(0, 0, 0, .1); - &.navbar-fixed-top { - border-width: 0 0 1px; - } + &.navbar-fixed-top { + border-width: 0 0 1px; + } - &.navbar-bottom-top { - border-width: 1px 0 0; - } -} - -.nav-item { - margin-right: 2rem; + &.navbar-bottom-top { + border-width: 1px 0 0; + } } // Buttons .btn { - font-size: $font-size-sm; - text-transform: uppercase; + font-size: $font-size-sm; + text-transform: uppercase; - &-sm { - font-size: 10px; - } - - &-warning { - &, - &:hover, - &:not([disabled]):not(.disabled):active, - &:focus { - color: $white; + &-sm { + font-size: 10px; + } + + &-warning { + &, + &:hover, + &:not([disabled]):not(.disabled):active, + &:focus { + color: $white; + } } - } } .btn-outline-secondary { - border-color: $gray-600; - color: $gray-600; + 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):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); + } + - &:not([disabled]):not(.disabled):focus { - box-shadow: 0 0 0 .2rem rgba($gray-400, .5); - } } [class*="btn-outline-"] { - border-width: 2px; + border-width: 2px; } .border-secondary { - border: 1px solid $gray-400 !important; + border: 1px solid $gray-400 !important; } // Typography body { - font-weight: 200; - letter-spacing: 1px; + font-weight: 200; + letter-spacing: 1px; } h1, @@ -106,79 +104,79 @@ h3, h4, h5, h6 { - text-transform: uppercase; - letter-spacing: 3px; + text-transform: uppercase; + letter-spacing: 3px; } .text-secondary { - color: $body-color !important; + color: $body-color !important; } // Tables th { - font-size: $font-size-sm; - text-transform: uppercase; + font-size: $font-size-sm; + text-transform: uppercase; } .table { - th, - td { - padding: 1.5rem; - } - - &-sm { th, td { - padding: .75rem; + padding: 1.5rem; + } + + &-sm { + th, + td { + padding: .75rem; + } } - } } // Navs .dropdown-menu { - font-size: $font-size-sm; - text-transform: none; + font-size: $font-size-sm; + text-transform: none; } // Indicators .badge { - padding-top: .28rem; + padding-top: .28rem; - &-pill { - border-radius: 10rem; - } + &-pill { + border-radius: 10rem; + } - &.bg-secondary, - &.bg-light { - color: $dark; - } + &.bg-secondary, + &.bg-light { + color: $dark; + } } // Containers .list-group-item { - h1, - h2, - h3, - h4, - h5, - h6, - .h1, - .h2, - .h3, - .h4, - .h5, - .h6 { - color: inherit; - } + h1, + h2, + h3, + h4, + h5, + h6, + .h1, + .h2, + .h3, + .h4, + .h5, + .h6 { + color: inherit; + } } .card { - &-title, - &-header { - color: inherit; - } + &-title, + &-header { + color: inherit; + } } diff --git a/assets/css/_variables.scss b/assets/css/_variables.scss index c870b8ce..08d5a9e3 100644 --- a/assets/css/_variables.scss +++ b/assets/css/_variables.scss @@ -7,7 +7,7 @@ $theme: "lux" !default; // Color system // -$white: #fff !default; +$white: #fff !default; $gray-100: #f8f9fa !default; $gray-200: #f7f7f9 !default; $gray-300: #eceeef !default; @@ -17,87 +17,87 @@ $gray-600: #919aa1 !default; $gray-700: #55595c !default; $gray-800: #343a40 !default; $gray-900: #1a1a1a !default; -$black: #000 !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; +$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; +$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; +$min-contrast-ratio: 2.3 !default; // Options -$enable-rounded: false !default; +$enable-rounded: false !default; // Body -$body-color: $gray-700 !default; +$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; +$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; +$table-border-color: rgba(0, 0, 0, .05) !default; // Buttons + Forms -$input-btn-border-width: 0 !default; +$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; +$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; +$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; +$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; +$pagination-border-color: transparent !default; +$pagination-hover-border-color: $pagination-border-color !default; +$pagination-disabled-border-color: $pagination-border-color !default;