diff --git a/assets/scss/_colors.scss b/assets/scss/_colors.scss index ce5342027..242f934d2 100644 --- a/assets/scss/_colors.scss +++ b/assets/scss/_colors.scss @@ -692,34 +692,53 @@ $colors: map-merge( // Black and white // Based on https://material.google.com/style/color.html#color-text-background-colors -$black: #000000 !default; +$black: #000 !default; -$black-primary-opacity: 0.87 !default; -$black-secondary-opacity: 0.54 !default; -$black-hint-opacity: 0.38 !default; -$black-divider-opacity: 0.12 !default; +$black-primary-opacity: .87 !default; +$black-caption-opacity: .60 !default; // Form helper text +$black-secondary-opacity: .54 !default; +$black-hint-opacity: .38 !default; +$black-divider-opacity: .12 !default; -$black-primary: rgba(red($black), green($black), blue($black), $black-primary-opacity) !default; -$black-secondary: rgba(red($black), green($black), blue($black), $black-secondary-opacity) !default; -$black-hint: rgba(red($black), green($black), blue($black), $black-hint-opacity) !default; -$black-divider: rgba(red($black), green($black), blue($black), $black-divider-opacity) !default; +$black-primary: rgba($black, $black-primary-opacity) !default; +$black-caption: rgba($black, $black-caption-opacity) !default; +$black-secondary: rgba($black, $black-secondary-opacity) !default; +$black-hint: rgba($black, $black-hint-opacity) !default; +$black-divider: rgba($black, $black-divider-opacity) !default; -$white: #ffffff !default; +$white: #fff !default; $white-primary-opacity: 1 !default; -$white-secondary-opacity: 0.7 !default; -$white-hint-opacity: 0.5 !default; -$white-divider-opacity: 0.12 !default; - -$white-primary: rgba(red($white), green($white), blue($white), $white-primary-opacity) !default; -$white-secondary: rgba(red($white), green($white), blue($white), $white-secondary-opacity) !default; -$white-hint: rgba(red($white), green($white), blue($white), $white-hint-opacity) !default; -$white-divider: rgba(red($white), green($white), blue($white), $white-divider-opacity) !default; +$white-secondary-opacity: .7 !default; +$white-hint-opacity: .5 !default; +$white-divider-opacity: .12 !default; + +$white-primary: rgba($white, $white-primary-opacity) !default; +$white-secondary: rgba($white, $white-secondary-opacity) !default; +$white-hint: rgba($white, $white-hint-opacity) !default; +$white-divider: rgba($white, $white-divider-opacity) !default; + +// States +// Based on https://material.io/design/interaction/states.html#usage + +$overlay-hover-colored-opacity: .08 !default; +$overlay-focus-colored-opacity: .24 !default; +$overlay-selected-colored-opacity: .16 !default; +$overlay-activated-colored-opacity: .24 !default; +$overlay-pressed-colored-opacity: .32 !default; +$overlay-dragged-colored-opacity: .16 !default; + +$overlay-hover-white-opacity: .04 !default; +$overlay-focus-white-opacity: .12 !default; +$overlay-selected-white-opacity: .08 !default; +$overlay-activated-white-opacity: .12 !default; +$overlay-pressed-white-opacity: .16 !default; +$overlay-dragged-white-opacity: .08 !default; // Theme // Based on https://material.google.com/style/color.html#color-themes -$dark-theme-1: #000000 !default; +$dark-theme-1: $black !default; $dark-theme-2: $material-color-grey-900 !default; $dark-theme-3: #303030 !default; $dark-theme-4: $material-color-grey-800 !default; @@ -727,4 +746,4 @@ $dark-theme-4: $material-color-grey-800 !default; $light-theme-1: $material-color-grey-300 !default; $light-theme-2: $material-color-grey-100 !default; $light-theme-3: $material-color-grey-050 !default; -$light-theme-4: #ffffff !default; +$light-theme-4: $white !default; diff --git a/assets/scss/_functions.scss b/assets/scss/_functions.scss index bf3c492b7..883da04d8 100644 --- a/assets/scss/_functions.scss +++ b/assets/scss/_functions.scss @@ -1,9 +1,8 @@ @mixin _assert-ascending($map, $map-name) { $prev-key: null; $prev-num: null; - @each $key, $num in $map { - @if $prev-num == null { + @if $prev-num == null or unit($num) == "%" { // Do nothing } @else if not comparable($num, $prev-num) { @warn 'Potentially invalid value for #{$map-name}: This map must be in ascending order, but key "#{$key}" has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key "#{$prev-key}"!'; @@ -16,11 +15,13 @@ } } -@mixin _assert-starts-at-zero($map) { - $first-value: nth(map-values($map), 1); - +// Starts at zero +// Used to ensure the min-width of the lowest breakpoint starts at 0. +@mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") { + $values: map-values($map); + $first-value: nth($values, 1); @if $first-value != 0 { - @warn 'First breakpoint in `$grid-breakpoints` must start at 0, but starts at #{$first-value}.'; + @warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}."; } } @@ -75,3 +76,13 @@ @function strip-unit($val) { @return $val / ($val * 0 + 1); } + +// Use secondary color for selection controls/inputs + +@function selection-theme-color() { + @if $secondary-color-for-controls { + @return theme-color(secondary); + } @else { + @return theme-color(primary); + } +} diff --git a/assets/scss/_mixins.scss b/assets/scss/_mixins.scss index daf8cb8b2..9e6c87c09 100644 --- a/assets/scss/_mixins.scss +++ b/assets/scss/_mixins.scss @@ -1,21 +1,41 @@ +@import "mixins/deprecate"; + +// Utilities +@import 'mixins/breakpoints'; +@import 'mixins/hover'; +@import 'mixins/image'; +//@import "mixins/badge"; +@import "mixins/resize"; +@import 'mixins/screen-reader'; +//@import "mixins/size"; +@import "mixins/reset-text"; +@import 'mixins/text-emphasis'; +@import 'mixins/text-hide'; +@import 'mixins/text-truncate'; +@import "mixins/visibility"; + +// Components +//@import "mixins/alert"; +//@import "mixins/buttons"; +//@import "mixins/pagination"; +@import "mixins/lists"; +@import 'mixins/nav-divider'; +@import 'mixins/forms'; +//@import "mixins/table-row"; + +// Skins @import 'mixins/background-variant'; @import 'mixins/border-radius'; -@import 'mixins/breakpoint'; +@import 'mixins/transition'; + +// Layout @import 'mixins/clearfix'; -@import 'mixins/float'; -@import 'mixins/form'; -@import 'mixins/grid'; @import 'mixins/grid-framework'; -@import 'mixins/hover'; -@import 'mixins/image'; -@import 'mixins/list'; +@import 'mixins/grid'; +@import 'mixins/float'; + +// Material @import 'mixins/material-icons'; -@import 'mixins/nav-divider'; @import 'mixins/reset-text'; -@import 'mixins/screenreader'; @import 'mixins/text-alignment'; -@import 'mixins/text-emphasis'; -@import 'mixins/text-hide'; -@import 'mixins/text-truncate'; -@import 'mixins/transition'; @import 'mixins/typography'; diff --git a/assets/scss/_print.scss b/assets/scss/_print.scss index d663664a8..be981656a 100644 --- a/assets/scss/_print.scss +++ b/assets/scss/_print.scss @@ -2,37 +2,44 @@ @if $enable-print-styles { @media print { - @page { - size: $print-page-size; - } *, - *::after, - *::before { - box-shadow: none !important; + *::before, + *::after { text-shadow: none !important; + box-shadow: none !important; } a:not(.btn) { text-decoration: underline; } - // stylelint-disable-next-line selector-no-qualifying-type abbr[title]::after { - content: ' (" attr(title) ") '; + content: " ("attr(title) ") "; } + pre { + white-space: pre-wrap !important; + } + + pre, blockquote { + border: $border-width solid rgba($black, .12); page-break-inside: avoid; } - body { - min-width: $print-body-min-width !important; + thead { + display: table-header-group; } + tr, + img { + page-break-inside: avoid; + } + + p, h2, - h3, - p { + h3 { orphans: 3; widows: 3; } @@ -42,29 +49,65 @@ page-break-inside: avoid; } - img { - page-break-inside: avoid; + @page { + size: $print-page-size; } - pre { - page-break-inside: avoid; - white-space: pre-wrap !important; + body { + min-width: $print-body-min-width !important; } - thead { - display: table-header-group; + .container { + min-width: $print-body-min-width !important; } - tr { - page-break-inside: avoid; + .navbar { + display: none; } - .card { - border: $border-width solid $border-color-solid; + .badge { + border: $border-width solid $black; } - .container { - min-width: $print-body-min-width !important; + .table { + border-collapse: collapse !important; + + td, + th { + background-color: $white !important; + } + } + + .table-bordered { + + th, + td { + border: 1px solid $border-color-solid; + } + } + + .table-dark { + color: inherit; + + th, + td, + thead th, + tbody+tbody { + border-color: $border-color-solid; + } + } + + .table .thead-dark th { + color: inherit; + border-color: $border-color-solid; + } + + +// ADDITIONS + + .card { + border: $border-width solid $border-color-solid; + page-break-inside: avoid; } .dropdown-menu { @@ -99,40 +142,8 @@ border-bottom: $border-width solid $border-color-solid; } - .navbar { - display: none; - } - .popover { border: $border-width solid $border-color-solid; } - - .table { - td, - th { - background-color: $white !important; - } - } - - .table-bordered { - border: $border-width solid $border-color-solid; - } - - .table-dark { - color: inherit; - - td, - th, - .table { - border-color: $border-color-solid; - } - } - - .table .thead-dark { - td, - th { - color: inherit; - } - } } } diff --git a/assets/scss/_utilities.scss b/assets/scss/_utilities.scss index 576075365..0c35e5923 100644 --- a/assets/scss/_utilities.scss +++ b/assets/scss/_utilities.scss @@ -1,20 +1,25 @@ // Bootstrap @import 'utilities/align'; -@import 'utilities/border'; @import 'utilities/background'; +@import 'utilities/borders'; @import 'utilities/clearfix'; @import 'utilities/display'; +@import "utilities/embed"; @import 'utilities/flex'; @import 'utilities/float'; +@import 'utilities/overflow'; @import 'utilities/position'; -@import 'utilities/screenreader'; +@import 'utilities/screenreaders'; @import 'utilities/shadows'; @import 'utilities/sizing'; @import 'utilities/spacing'; +@import 'utilities/stretched-link'; +@import "utilities/spacing"; @import 'utilities/text'; @import 'utilities/visibility'; // Material - @import 'utilities/material-icons'; +@import 'utilities/scrollbars'; +@import 'utilities/webkit-custom'; diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss index 1fa543eb4..a5e9a95c4 100644 --- a/assets/scss/_variables.scss +++ b/assets/scss/_variables.scss @@ -2,6 +2,10 @@ $enable-grid-classes: true !default; $enable-print-styles: true !default; +$enable-pointer-cursor-for-buttons: true !default; +$enable-validation-icons: true !default; +$enable-validation-valid: true !default; // Use Success color for valid inputs +$secondary-color-for-controls: false !default; // Use secondary color for selection/inputs // Variables diff --git a/assets/scss/base/_base.scss b/assets/scss/base/_base.scss index 80dd8d6bb..6fb674849 100644 --- a/assets/scss/base/_base.scss +++ b/assets/scss/base/_base.scss @@ -1,8 +1,5 @@ :root { - @each $bp, $value in $grid-breakpoints { - --breakpoint-#{$bp}: #{$value}; - } - + // Custom variable values only support SassScript inside `#{}`. @each $color, $value in $colors { --#{$color}: #{$value}; } @@ -16,10 +13,15 @@ } } } + + @each $bp, $value in $grid-breakpoints { + --breakpoint-#{$bp}: #{$value}; + } - --font-family-monospace: #{inspect($font-family-monospace)}; + // Use `inspect` for lists so that quoted items keep the quotes. + // See https://github.com/sass/sass/issues/2383#issuecomment-336349172 --font-family-sans-serif: #{inspect($font-family-sans-serif)}; - --font-family-serif: #{inspect($font-family-serif)}; + --font-family-monospace: #{inspect($font-family-monospace)}; } // stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix @@ -29,378 +31,379 @@ *, *::after, *::before { - box-sizing: inherit; + box-sizing: border-box; } -@at-root { - // stylelint-disable-next-line at-rule-no-vendor-prefix - @-ms-viewport { - width: device-width; - } +html { + //font-family: sans-serif; + //line-height: 1.15; + //-webkit-text-size-adjust: 100%; + //-webkit-tap-highlight-color: $webkit-tap-highlight-color; } -// Document - -article, -aside, -figcaption, -figure, -footer, -header, -hgroup, -main, -nav, -section { +article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; } body { - @include text-align(left); - - background-color: $body-bg; - color: $body-color; + margin: 0; font-family: $font-family-base; - font-size: $font-size-base; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; + font-size: ($font-size-base * .875); font-weight: $font-weight-base; line-height: $line-height-base; - margin: 0; -} - -html { - box-sizing: border-box; - font-family: sans-serif; - line-height: 1.15; - text-size-adjust: 100%; - -ms-overflow-style: scrollbar; + color: $body-color; + @include text-align(left); + background-color: $body-bg; + -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: $webkit-tap-highlight-color; } -[tabindex='-1']:focus { +[tabindex="-1"]:focus:not(:focus-visible) { outline: 0 !important; } -// Code - -code, -kbd, -pre, -samp { - font-family: $font-family-monospace; - font-size: 1em; +hr { + box-sizing: content-box; + height: 0; + overflow: visible; } -pre { +h1, h2, h3, h4, h5, h6 { margin-top: 0; - margin-bottom: $pre-margin-y; - overflow: auto; - -ms-overflow-style: scrollbar; + margin-bottom: $headings-margin-y; } -// Content grouping - -figure { - margin: 0 0 $paragraph-margin-y; +p { + margin-top: 0; + margin-bottom: $paragraph-margin-y; } -hr { - box-sizing: content-box; - height: 0; - overflow: visible; +abbr[title], +abbr[data-original-title] { + text-decoration: underline; + text-decoration: underline dotted; + cursor: help; + border-bottom: 0; + text-decoration-skip-ink: none; } -// Form - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; - font-size: inherit; +address { + margin-bottom: $paragraph-margin-y; + font-style: normal; line-height: inherit; - margin: 0; } -button, -html [type='button'], -[type='reset'], -[type='submit'] { - -webkit-appearance: button; +ol, +ul, +dl { + margin-top: 0; + margin-bottom: $paragraph-margin-y; } -button::-moz-focus-inner, -[type='button']::-moz-focus-inner, -[type='reset']::-moz-focus-inner, -[type='submit']::-moz-focus-inner { - border-style: none; - padding: 0; +ol ol, +ol ul, +ul ol, +ul ul { + margin-bottom: 0; } -button, -input { - overflow: visible; +dt { + font-weight: $dt-font-weight; } -button, -select { - text-transform: none; +dd { + margin-bottom: $headings-margin-y; + margin-left: 0; } -button:focus { - outline: 1px dotted; - outline: 5px auto -webkit-focus-ring-color; +blockquote { + margin: 0 0 $paragraph-margin-y; } -fieldset { - border: 0; - margin: 0; - min-width: 0; - padding: 0; +b, +strong { + font-weight: $font-weight-bolder; } -input { - &[type='checkbox'], - &[type='radio'] { - box-sizing: border-box; - padding: 0; - } - - &[type='date'], - &[type='datetime-local'], - &[type='month'], - &[type='time'] { - -webkit-appearance: listbox; - } +small { + font-size: 80%; } -label { - @include typography-caption; - - color: $textfield-hint-color; - display: inline-block; +sub, +sup { + position: relative; + font-size: 75%; + line-height: 0; + vertical-align: baseline; } -legend { - @include typography-headline; +sub { bottom: -.25em; } - color: inherit; - display: block; - margin-bottom: $headings-margin-y; - max-width: 100%; - padding: 0; - white-space: normal; - width: 100%; -} +sup { top: -.5em; } -output { - display: inline-block; -} +// +// Links +// -progress { - vertical-align: baseline; -} +a { + color: $link-color; + text-decoration: $link-decoration; + background-color: transparent; + -webkit-text-decoration-skip: objects; -select { - &[multiple], - &[size] { - overflow: auto; + &:hover { + color: $link-color-hover; + text-decoration: $link-decoration-hover; } } -textarea { - overflow: auto; - resize: vertical; -} +a:not([href]):not([tabindex]) { + color: inherit; + text-decoration: none; -[type='number']::-webkit-inner-spin-button, -[type='number']::-webkit-outer-spin-button { - height: auto; -} + @include hover-focus { //hfa + color: inherit; + text-decoration: none; + } -[type='search'] { - -webkit-appearance: none; - outline-offset: -2px; + &:focus { + outline: 0; + } } -[type='search']::-webkit-search-cancel-button, -[type='search']::-webkit-search-decoration { - -webkit-appearance: none; -} +// +// Code +// -::-webkit-file-upload-button { - -webkit-appearance: button; - font: inherit; +pre, +code, +kbd, +samp { + font-family: $font-family-monospace; + font-size: 1em; } -// Hidden +pre { + margin-top: 0; + margin-bottom: $pre-margin-y; + overflow: auto; +} -[hidden] { - display: none !important; +figure { + margin: 0 0 $paragraph-margin-y; } // Images img { - border-style: none; vertical-align: middle; + border-style: none; } -svg:not(:root) { +svg { overflow: hidden; + vertical-align: middle; } -// Interactive +// Tables -summary { - cursor: pointer; - display: list-item; +table { + border-collapse: collapse; } -// Link - -a { - background-color: transparent; - color: $link-color; - text-decoration: $link-decoration; - -webkit-text-decoration-skip: objects; +caption { + padding: $table-thead-padding-y $table-cell-padding-x-alt; + color: $table-caption-color; + @include text-align(left); + caption-side: bottom; + @include typography-caption; + //min-height: $table-thead-cell-height; +} - @include active-focus-hover { - color: $link-color-hover; - text-decoration: $link-decoration-hover; - } +th { + @include text-align(left); // inherit } -a:not([href]):not([tabindex]) { - color: inherit; - text-decoration: none; +// +// Forms +// - @include active-focus-hover { - color: inherit; - text-decoration: none; - } +label { + display: inline-block; + @include typography-caption; + color: $textfield-hint-color; + // margin-bottom: $label-margin-bottom; +} - &:focus { - outline: 0; - } +button { + border-radius: 0; } -// Scripting +button:focus { + outline: 1px dotted; + outline: 5px auto -webkit-focus-ring-color; +} -template { - display: none; +input, +button, +select, +optgroup, +textarea { + margin: 0; + font-family: inherit; + font-size: inherit; + line-height: inherit; } -// Table +button, +input { + overflow: visible; +} -caption { - @include text-align(left); - @include typography-caption; +button, +select { + text-transform: none; +} - caption-side: bottom; - color: $table-caption-color; - min-height: $table-thead-cell-height; - padding: $table-thead-padding-y $table-cell-padding-x-alt; +select { + word-wrap: normal; } -table { - border-collapse: collapse; +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; } -th { - @include text-align(left); +@if $enable-pointer-cursor-for-buttons { + button, + [type="button"], + [type="reset"], + [type="submit"] { + &:not(:disabled) { + cursor: pointer; + } + } + .btn:not(.disabled):not(:disabled) { + cursor: pointer; + } } -// Typography +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + padding: 0; + border-style: none; +} -abbr { - &[data-original-title], - &[title] { - border-bottom: 0; - cursor: help; - text-decoration: underline dotted; - } +input[type="radio"], +input[type="checkbox"] { + box-sizing: border-box; + padding: 0; } -address { - font-style: normal; - line-height: inherit; - margin-bottom: $paragraph-margin-y; +input[type="date"], +input[type="time"], +input[type="datetime-local"], +input[type="month"] { + -webkit-appearance: listbox; } -b, -strong { - font-weight: bolder; +textarea { + overflow: auto; + resize: vertical; } -blockquote { - margin: 0 0 $paragraph-margin-y; +fieldset { + min-width: 0; + padding: 0; + margin: 0; + border: 0; } -dd { +legend { + display: block; + width: 100%; + max-width: 100%; + padding: 0; margin-bottom: $headings-margin-y; - margin-left: 0; + @include typography-headline-6; + color: inherit; + white-space: normal; } -dfn { - font-style: italic; +progress { + vertical-align: baseline; } -dl, -ol, -ul { - margin-top: 0; - margin-bottom: $paragraph-margin-y; +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; } -dt { - font-weight: $dt-font-weight; +[type="search"] { + outline-offset: -2px; + -webkit-appearance: none; } -h1, -h2, -h3, -h4, -h5, -h6 { - margin-top: 0; - margin-bottom: $headings-margin-y; +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; } -mark { - background-color: $mark-bg; - color: $mark-color; +::-webkit-file-upload-button { + font: inherit; + -webkit-appearance: button; } -ol ol, -ol ul, -ul ol, -ul ul { - margin-bottom: 0; +// +// Correct element displays +// + +output { + display: inline-block; } -p { - margin-top: 0; - margin-bottom: $paragraph-margin-y; +summary { + display: list-item; + cursor: pointer; } -small { - font-size: 80%; +template { + display: none; } -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; +[hidden] { + display: none !important; } -sub { - bottom: -0.25em; + +// Additions + +select { + &[multiple], + &[size] { + overflow: auto; + } } -sup { - top: -0.5em; +mark { + background-color: $mark-bg; + color: $mark-color; +} + +@at-root { + // stylelint-disable-next-line at-rule-no-vendor-prefix + @-ms-viewport { + width: device-width; + } } + +dfn { + font-style: italic; +} + +::selection { + background: rgba(theme-color(primary), $overlay-selected-white-opacity); // Material Addition +} \ No newline at end of file diff --git a/assets/scss/base/_grid.scss b/assets/scss/base/_grid.scss index d8a4da5cd..a22751537 100644 --- a/assets/scss/base/_grid.scss +++ b/assets/scss/base/_grid.scss @@ -1,39 +1,52 @@ -// Column - -@if $enable-grid-classes { - @include make-grid-columns; -} - -// Container +// Container widths +// +// Set the container width, and override it for fixed navbars in media queries. @if $enable-grid-classes { .container { - @include make-container; - @include make-container-max-widths; + @include make-container(); + @include make-container-max-widths(); } } +// Fluid container +// +// Utilizes the mixin meant for fixed width containers, but with 100% width for +// fluid, full width layouts. + @if $enable-grid-classes { .container-fluid { - @include make-container; + @include make-container(); } } // Row +// +// Rows contain and clear the floats of your columns. @if $enable-grid-classes { .row { - @include make-row; + @include make-row(); } + // Remove the negative margin from default .row, then the horizontal padding + // from all immediate children columns (to prevent runaway style inheritance). .no-gutters { margin-right: 0; margin-left: 0; > .col, - > [class*='col-'] { + > [class*="col-"] { padding-right: 0; padding-left: 0; } } } + +// Columns +// +// Common styles for small and large grid columns + +@if $enable-grid-classes { + @include make-grid-columns(); +} diff --git a/assets/scss/base/_grid.zip b/assets/scss/base/_grid.zip new file mode 100644 index 000000000..27e44150d Binary files /dev/null and b/assets/scss/base/_grid.zip differ diff --git a/assets/scss/base/_typography.scss b/assets/scss/base/_typography.scss index 8f3d5ac2e..c6f64927b 100644 --- a/assets/scss/base/_typography.scss +++ b/assets/scss/base/_typography.scss @@ -1,157 +1,82 @@ -// Blockquote - -.blockquote { - @include typography-title; - - border-left: $blockquote-border-width solid $blockquote-border-color; - margin-bottom: $paragraph-margin-y; - padding: 0 $spacer; -} - -.blockquote-footer { - @include typography-caption; - - color: $blockquote-small-color; - display: block; - margin-top: $spacer-xs; - - &::before { - content: '\2014 \00A0'; - } -} - -// Emphasis - -mark, -.mark { - background-color: $mark-bg; - color: $mark-color; - padding: $mark-padding; -} +// +// Headings +// -small, -.small { - font-size: $small-font-size; - font-weight: $font-weight-regular; +.typography-headline-1 { + @include typography-headline-1; } -.initialism { - font-size: 90%; - text-transform: uppercase; +.typography-headline-2 { + @include typography-headline-2; } -// Headings - -.typography-display-4 { - @include typography-display-4; +.typography-headline-3 { + @include typography-headline-3; } -.typography-display-3 { - @include typography-display-3; +.typography-headline-4 { + @include typography-headline-4; } -.typography-display-2 { - @include typography-display-2; +.typography-headline-5 { + @include typography-headline-5; } -.typography-display-1 { - @include typography-display-1; +.typography-headline-6 { + @include typography-headline-6; } -.typography-headline { - @include typography-headline; +.typography-subtitle-1 { + @include typography-subtitle-1; } -.typography-title { - @include typography-title; +.typography-subtitle-2 { + @include typography-subtitle-2; } -.typography-subheading { - @include typography-subheading; +.typography-body-1 { + @include typography-body-1; } .typography-body-2 { @include typography-body-2; } -.typography-body-1 { - @include typography-body-1; -} - .typography-caption { @include typography-caption; } +.typography-overline { + @include typography-overline; +} + // Headings - bootstrap classes -h1, -h2, -h3, -h4, -h5, -h6, -.h1, -.h2, -.h3, -.h4, -.h5, -.h6 { +h1, h2, h3, h4, h5, h6, +.h1, .h2, .h3, .h4, .h5, .h6 { color: $headings-color; font-family: $headings-font-family; margin-bottom: $headings-margin-y; } -h1, -.h1 { - @include typography-display-2; -} +h1, .h1, .display-1 { @include typography-headline-1; } -h2, -.h2 { - @include typography-display-1; -} +h2, .h2, .display-2 { @include typography-headline-2; } -h3, -.h3 { - @include typography-headline; -} +h3, .h3, .display-3 { @include typography-headline-3; } -h4, -.h4 { - @include typography-title; -} +h4, .h4, .display-4 { @include typography-headline-4; } -h5, -.h5 { - @include typography-subheading; -} +h5, .h5 { @include typography-headline-5; } -h6, -.h6 { - @include typography-body-2; -} +h6, .h6 { @include typography-headline-6; } -.display-1 { - @include typography-display-4; -} +.lead { @include typography-headline-6; } -.display-2 { - @include typography-display-3; -} -.display-3 { - @include typography-display-2; -} - -.display-4 { - @include typography-display-1; -} - -.lead { - @include typography-title; -} - -// Hr +// +// Horizontal rules +// hr { border: 0; @@ -160,7 +85,30 @@ hr { margin-bottom: $paragraph-margin-y; } -// List +// +// Emphasis +// + +small, +.small { + font-size: $small-font-size; + font-weight: $font-weight-regular; +} + +mark, +.mark { + background-color: $mark-bg; + color: $mark-color; + padding: $mark-padding; +} + +// +// Lists +// + +.list-unstyled { + @include list-unstyled; +} .list-inline { @include list-unstyled; @@ -174,6 +122,35 @@ hr { } } -.list-unstyled { - @include list-unstyled; +// +// Misc +// + +.initialism { + font-size: 90%; + text-transform: uppercase; +} + +// Blockquotes +.blockquote { + @include typography-body-1; + + border-left: $blockquote-border-width solid $blockquote-border-color; + margin-bottom: $paragraph-margin-y; + padding: 0 $spacer; } + +.blockquote-footer { + @include typography-caption; + + color: $blockquote-small-color; + display: block; + margin-top: $spacer-xs; + + &::before { + content: '\2014 \00A0'; + } +} + + + diff --git a/assets/scss/bootstrap/_alert.scss b/assets/scss/bootstrap/_alert.scss index 48ca6460f..0616a0123 100644 --- a/assets/scss/bootstrap/_alert.scss +++ b/assets/scss/bootstrap/_alert.scss @@ -1,27 +1,45 @@ +// +// Base styles +// +// Not sure it is OK to look like : https://material.io/design/components/banners.html#specs + .alert { @include border-radius($alert-border-radius); - border: 0; + //border: 0; + border: 1px solid $black-divider; + color: $black-primary; display: block; margin-bottom: $alert-margin-y; padding: $alert-padding-y $alert-padding-x; position: relative; } -@each $color, $values in $theme-colors { - .alert-#{$color} { - background-color: theme-color-light($color); - color: color-yiq(theme-color-light($color)); +// Headings for larger alerts +.alert-link { + color: inherit; + font-weight: $alert-link-font-weight; + + @include hover-focus-active { + color: inherit; } } -// Dismissible +// Provide class for links that match alerts +.alert-link { + font-weight: $alert-link-font-weight; +} + +// Dismissible alerts +// +// Expand the right padding and account for the close button's positioning. .alert-dismissible { - padding-right: ($alert-padding-x * 2 + $close-font-size); + padding-right: $close-font-size + $alert-padding-x * 2; + // Adjust close link position .close { - color: inherit; + color: $black-hint; padding: ($alert-padding-y - ($close-font-size - $font-size-base * $line-height-base) / 2) $alert-padding-x; position: absolute; top: 0; @@ -29,17 +47,15 @@ } } -// Misc - -.alert-heading { - color: inherit; -} - -.alert-link { - color: inherit; - font-weight: $alert-link-font-weight; - - @include active-focus-hover { - color: inherit; +// Alternate styles +// +// Generate contextual modifier classes for colorizing the alert. +@each $color, $values in $theme-colors { + .alert-#{$color} { + //background-color: theme-color-light($color); + border-left: 6px solid theme-color($color); + //color: color-yiq(theme-color-light($color)); } } + +// @mixin alert-variant not used diff --git a/assets/scss/bootstrap/_badge.scss b/assets/scss/bootstrap/_badge.scss index 20193554b..6be5076f3 100644 --- a/assets/scss/bootstrap/_badge.scss +++ b/assets/scss/bootstrap/_badge.scss @@ -1,36 +1,65 @@ +// Base class +// +// Requires one of the contextual, color modifier classes for `color` and +// `background-color`. + .badge { @include border-radius($badge-border-radius); + //@include transition($badge-transition); align-items: center; display: inline-flex; - font-size: inherit; + font-size: inherit; //@include font-size($badge-font-size); font-weight: $badge-font-weight; line-height: inherit; padding-right: $badge-padding-x; padding-left: $badge-padding-x; text-align: center; - vertical-align: baseline; white-space: nowrap; - &:empty { - display: none; + @at-root a#{&} { + @include hover-focus { + text-decoration: none; + } } + // Material addition : https://material.angular.io/components/badge/examples .btn & { - margin-top: -1px; - margin-bottom: -1px; - padding-top: 1px; - padding-bottom: 1px; + position: absolute; + top: -$badge-width / 2; + right: -$badge-width / 2; + border-radius: 50%; + width: $badge-width; + height: $badge-width; + line-height: $badge-width; + display: inline-block; + font-weight: $badge-btn-font-weight; + font-size: $font-size-caption; + } + + // Empty badges collapse automatically + &:empty { + display: none; } } -@each $color, $values in $theme-colors { +// Pill badges with extra rounded corners + +.badge-pill { + @include border-radius(1em); + + //padding-right: $badge-pill-padding-x; + //padding-left: $badge-pill-padding-x; +} + +@each $color, +$values in $theme-colors { .badge-#{$color} { background-color: theme-color($color); color: color-yiq(theme-color($color)); &[href] { - @include active-focus-hover { + @include hover-focus-active { background-color: theme-color-dark($color); color: color-yiq(theme-color-dark($color)); text-decoration: none; @@ -38,9 +67,4 @@ } } } - -// Pill badges with extra rounded corners - -.badge-pill { - @include border-radius(1em); -} +// @mixin badge-variant not used diff --git a/assets/scss/bootstrap/_breadcrumb.scss b/assets/scss/bootstrap/_breadcrumb.scss index 2fb3f8b13..b546951b9 100644 --- a/assets/scss/bootstrap/_breadcrumb.scss +++ b/assets/scss/bootstrap/_breadcrumb.scss @@ -1,35 +1,26 @@ .breadcrumb { - @include border-radius($breadcrumb-border-radius); - align-items: center; background-color: $breadcrumb-bg; display: flex; flex-wrap: wrap; - list-style: none; - margin-bottom: $breadcrumb-margin-y; - min-height: $breadcrumb-height; - padding: $breadcrumb-padding-y $breadcrumb-padding-x; } .breadcrumb-item { - @include transition-standard(color); - align-items: center; color: $breadcrumb-item-color; display: flex; - - @include active-focus-hover { - color: $breadcrumb-item-color-hover; - } - - &.active { - color: $breadcrumb-item-color-hover; - font-weight: bolder; - } + font-size: $breadcrumb-font-size; a { + @include transition-standard(background-color); + border-radius: .5rem; color: inherit; text-decoration: none; + padding: .375rem $breadcrumb-padding-y; + + &:hover { + background-color: $breadcrumb-bg-hover; + } } + .breadcrumb-item { @@ -38,10 +29,18 @@ &::before { @include set-material-icons; - color: $breadcrumb-item-color; + color: $black-secondary; content: $breadcrumb-item-icon; display: inline-block; margin-right: $breadcrumb-inner-spacer-x; } } + + &.active::before { + margin-right: $breadcrumb-padding-y; + } + + &:only-child { + padding: .375rem $breadcrumb-padding-y; + } } diff --git a/assets/scss/bootstrap/_carousel.scss b/assets/scss/bootstrap/_carousel.scss index b67131814..e841356d9 100644 --- a/assets/scss/bootstrap/_carousel.scss +++ b/assets/scss/bootstrap/_carousel.scss @@ -120,7 +120,7 @@ user-select: none; width: $carousel-control-size; - @include active-focus-hover { + @include hover-focus-active { background-color: $carousel-control-bg-hover; color: $carousel-control-color; text-decoration: none; diff --git a/assets/scss/bootstrap/_close.scss b/assets/scss/bootstrap/_close.scss index 1680ad725..7773dc7e1 100644 --- a/assets/scss/bootstrap/_close.scss +++ b/assets/scss/bootstrap/_close.scss @@ -10,9 +10,10 @@ font-size: $close-font-size; font-weight: $close-font-weight; line-height: 1; + // opacity: .5; padding: 0; - @include active-focus-hover { + @include hover-focus-active { color: $close-color-hover; text-decoration: none; } @@ -25,3 +26,14 @@ cursor: pointer; } } + +button.close { + padding: 0; + background-color: transparent; + border: 0; + appearance: none; +} + +a.close.disabled { + pointer-events: none; +} diff --git a/assets/scss/bootstrap/_code.scss b/assets/scss/bootstrap/_code.scss index 8a265ca1b..b5727eeeb 100644 --- a/assets/scss/bootstrap/_code.scss +++ b/assets/scss/bootstrap/_code.scss @@ -22,7 +22,7 @@ kbd { kbd { font-size: 100%; - font-weight: bolder; + font-weight: $font-weight-bolder; padding: 0; } } diff --git a/assets/scss/bootstrap/_forms.scss b/assets/scss/bootstrap/_forms.scss new file mode 100644 index 000000000..3811d8d55 --- /dev/null +++ b/assets/scss/bootstrap/_forms.scss @@ -0,0 +1,224 @@ +// Checkbox and radio button + +.form-check { + display: block; + margin-bottom: $textfield-margin-y; + padding-left: $form-check-input-gutter; + position: relative; +} + +.form-check-input { + margin-top: (($font-size-base * $line-height-base - $font-size-base) / 3 * 2); //$form-check-input-margin-y; + margin-left: ($form-check-input-gutter * -1); //-$form-check-input-gutter; + position: absolute; + + &:disabled ~ .form-check-label { + color: $textfield-color-disabled; + } +} + +.form-check-label { + color: inherit; + font-size: inherit; + line-height: inherit; + //margin-bottom: 0; +} + +.form-check-inline { + align-items: center; + display: inline-flex; + margin-right: $form-check-inline-margin-x; + margin-bottom: 0; + //padding-left: 0; + + .form-check-input { + position: static; + margin-top: 0; + margin-right: $form-check-inline-input-margin-x; + margin-left: 0; + } +} + +// Form group + +.form-group { + margin-bottom: $form-group-margin-y; +} + +.form-row { + display: flex; + flex-wrap: wrap; + margin-right: ($textfield-margin-x / -2); //-$form-grid-gutter-width / 2; + margin-left: ($textfield-margin-x / -2); + + > .col, + > [class*='col-'] { + padding-right: ($textfield-margin-x / 2); + padding-left: ($textfield-margin-x / 2); + } +} + +// Inline + +.form-inline { + align-items: center; + display: flex; + flex-flow: row wrap; + + .form-check { + margin-bottom: 0; + width: 100%; //auto + } + + @include media-breakpoint-up(sm) { + label { + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 0; + } + + // Inline-block all the things for "inline" + .form-group { + display: flex; + flex: 0 0 auto; + flex-flow: row wrap; + align-items: center; + margin-bottom: 0; + } + + // Allow folks to *not* use `.form-group` + .form-control { + display: inline-block; + width: auto; // Prevent labels from stacking above inputs in `.form-group` + vertical-align: middle; + } + + // Make static controls behave like regular ones + .form-control-plaintext { + display: inline-block; + } + + .input-group, + .custom-select { + width: auto; + } + + .form-check { + display: flex; + align-items: center; + justify-content: center; + width: auto; + padding-left: 0; + } + .form-check-input { + position: relative; + flex-shrink: 0; + margin-top: 0; + margin-right: $form-check-input-gutter; + margin-left: 0; + } + + .custom-control { + align-items: center; + justify-content: center; + } + .custom-control-label { + margin-bottom: 0; + } + } +} + +// Label + +.col-form-label { + color: inherit; + font-size: $font-size-base; // todo + line-height: ($textfield-font-size * $textfield-line-height / $font-size-base); //$input-line-height + // margin-bottom: 0; + padding-top: $textfield-padding-y; + padding-bottom: $textfield-padding-y; +} + +.col-form-label-lg { + font-size: ($font-size-base / $textfield-font-size * $textfield-font-size-lg); //@include font-size($input-font-size-lg) + line-height: ($textfield-line-height-lg / ($font-size-base / $textfield-font-size)); //$input-line-height-lg; + padding-top: $textfield-padding-y-lg; + padding-bottom: $textfield-padding-y-lg; +} + +.col-form-label-sm { + font-size: ($font-size-base / $textfield-font-size * $textfield-font-size-sm); //@include font-size($input-font-size-sm); + line-height: ($textfield-line-height-sm / ($font-size-base / $textfield-font-size)); //$input-line-height-sm; + padding-top: $textfield-padding-y-sm; + padding-bottom: $textfield-padding-y-sm; +} + +// Misc + +.form-text { + font-size: $font-size-caption; + font-weight: $font-weight-caption; + letter-spacing: $letter-spacing-caption; + line-height: normal; + color: $textfield-caption-color; + display: block; + //margin-top: $textfield-margin-y; + + /*.custom-select-lg + &, + .floating-label-lg + &, + .floating-label-lg .custom-select + &, + .floating-label-lg .form-control + &, + .floating-label-lg .form-control-file + &, + .form-control-lg + &, + .textfield-box-lg + &, + .textfield-box-lg .custom-select + &, + .textfield-box-lg .form-control + &, + .textfield-box-lg .form-control-file + & { + margin-top: $textfield-margin-y-lg; + } + + .custom-select-sm + &, + .floating-label-sm + &, + .floating-label-sm .custom-select + &, + .floating-label-sm .form-control + &, + .floating-label-sm .form-control-file + &, + .form-control-sm + &, + .textfield-box-sm + &, + .textfield-box-sm .custom-select + &, + .textfield-box-sm .form-control + &, + .textfield-box-sm .form-control-file + & { + margin-top: $textfield-margin-y-sm; + }*/ + + &::before { + display: inline-block; + width: 0; + height: 1rem; + content: ""; + vertical-align: 0; + } +} + +// Readonly control as plain text + +.form-control-plaintext { + background-color: transparent; + border: solid transparent; + border-radius: 0; + border-width: 0 0 $textfield-border-width; + box-shadow: none; + color: $textfield-plaintext-color; + display: block; + font-size: $textfield-font-size; + line-height: $textfield-line-height; + // margin-bottom: 0; + padding: $textfield-padding-y 0 calc(#{$textfield-padding-y} - #{$textfield-border-width}); + width: 100%; + + &.form-control-sm, + &.form-control-lg { + padding-right: 0; + padding-left: 0; + } +} diff --git a/assets/scss/bootstrap/_images.scss b/assets/scss/bootstrap/_images.scss new file mode 100644 index 000000000..f437b6b5c --- /dev/null +++ b/assets/scss/bootstrap/_images.scss @@ -0,0 +1,29 @@ +.img-fluid { + @include img-fluid; +} + +.img-thumbnail { + /* padding: $thumbnail-padding; + background-color: $thumbnail-bg; + border: $thumbnail-border-width solid $thumbnail-border-color; + @include border-radius($thumbnail-border-radius); + @include box-shadow($thumbnail-box-shadow); + */ + + box-shadow: $thumbnail-box-shadow; + @include img-fluid; +} + +.figure { + display: inline-block; +} + +.figure-img { + line-height: 1; + margin-bottom: $figure-img-margin-y; +} + +.figure-caption { + @include typography-caption; + color: $figure-caption-color; +} diff --git a/assets/scss/bootstrap/_jumbotron.scss b/assets/scss/bootstrap/_jumbotron.scss index ec7cf72c7..6c635c997 100644 --- a/assets/scss/bootstrap/_jumbotron.scss +++ b/assets/scss/bootstrap/_jumbotron.scss @@ -4,6 +4,7 @@ background-color: $jumbotron-bg; box-shadow: map-get($jumbotron-elevation-shadow, shadow); color: $jumbotron-color; + margin-bottom: $jumbotron-padding-y; padding: $jumbotron-padding-y $jumbotron-padding-x; } diff --git a/assets/scss/bootstrap/_nav.scss b/assets/scss/bootstrap/_nav.scss index df3774869..66ea9dc28 100644 --- a/assets/scss/bootstrap/_nav.scss +++ b/assets/scss/bootstrap/_nav.scss @@ -7,16 +7,24 @@ } .nav-link { + color: selection-theme-color(); display: block; padding: $nav-link-padding-y $nav-link-padding-x; - @include active-focus-hover { + @include hover-focus { text-decoration: none; } + // Disabled state lightens text &.disabled { color: $nav-link-color-disabled; cursor: default; + pointer-events: none; + } + + &:hover, + &.active { + color: darken(selection-theme-color(),16%); } } @@ -47,7 +55,7 @@ color: $nav-pills-color; opacity: $nav-pills-link-opacity; - @include active-focus-hover { + @include hover-focus-active { background-color: $nav-pills-bg-hover; } diff --git a/assets/scss/bootstrap/_pagination.scss b/assets/scss/bootstrap/_pagination.scss index 1c1fb5655..00bc7c472 100644 --- a/assets/scss/bootstrap/_pagination.scss +++ b/assets/scss/bootstrap/_pagination.scss @@ -2,56 +2,59 @@ background-color: $pagination-bg; display: flex; list-style: none; - padding: $pagination-padding-y $pagination-padding-x; + margin: $pagination-margin-x; } .page-link { @include border-radius($pagination-border-radius); - @include transition-standard(color); + @include transition-standard(all); + align-items: center; color: $pagination-color; - display: block; - font-size: $btn-font-size; - font-weight: $btn-font-weight; - line-height: $btn-line-height; + display: flex; + font-size: $pagination-font-size; + font-weight: $pagination-font-weight; + justify-content: center; + line-height: $pagination-line-height; margin-left: $pagination-inner-spacer-x; - padding: $btn-padding-y $btn-padding-x; position: relative; text-align: center; + width: $pagination-line-height * $pagination-font-size; white-space: nowrap; - @include active-focus-hover { + @include hover-focus-active { + background-color: rgba($black, $overlay-hover-white-opacity); color: $pagination-color; text-decoration: none; + z-index: 2; } - @include focus-hover { - background-image: linear-gradient(to bottom, $btn-overlay, $btn-overlay); + &:focus { + background-color: rgba($black, $overlay-focus-white-opacity); } - &.active, &:active { - background-color: $btn-bg-active; - background-image: none; - } - - &:focus { - outline: 0; + background-color: rgba($black, $overlay-pressed-white-opacity); } &:not(:disabled):not(.disabled) { cursor: pointer; } +} - .page-item:first-child & { - margin-left: 0; +.page-item { + &:first-child { + .page-link { + margin-left: 0; + } } - .page-item.active & { - background-color: $btn-bg-active; + &.active .page-link { + background-color: theme-color(primary); + color: $white; } - .page-item.disabled & { + &.disabled .page-link { background-color: transparent; color: $pagination-color-disabled; cursor: auto; @@ -59,12 +62,17 @@ } } + +// +// Sizing +// + .pagination-lg .page-link { - font-size: $btn-font-size-lg; - padding: $btn-padding-y-lg $btn-padding-x-lg; + font-size: $pagination-font-size-lg; + width: $pagination-line-height * $pagination-font-size-lg; } .pagination-sm .page-link { - font-size: $btn-font-size-sm; - padding: $btn-padding-y-sm $btn-padding-x-sm; -} + font-size: $pagination-font-size-sm; + width: $pagination-line-height * $pagination-font-size-sm; +} \ No newline at end of file diff --git a/assets/scss/bootstrap/_popover.scss b/assets/scss/bootstrap/_popover.scss index 9320afda9..d4fa04dcc 100644 --- a/assets/scss/bootstrap/_popover.scss +++ b/assets/scss/bootstrap/_popover.scss @@ -3,11 +3,11 @@ // Therefore, popovers are styled as Material design's dialogs .popover { - @include reset-text; + @include reset-text(); @include border-radius($popover-border-radius); background-color: $popover-bg; - box-shadow: map-get($popover-elevation-shadow, shadow); + box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15); //map-get($popover-elevation-shadow, shadow); // display: block; font-size: $popover-font-size; margin: $popover-margin; @@ -15,19 +15,12 @@ position: absolute; top: 0; left: 0; + word-wrap: break-word; z-index: map-get($popover-elevation-shadow, elevation); } -.popover-body { - padding: $popover-padding-y $popover-padding-x; - - > :last-child { - margin-bottom: 0; - } -} - .popover-header { - @include typography-title; + @include typography-headline-6; margin-bottom: 0; padding: $popover-padding-y $popover-padding-x 0; @@ -41,6 +34,15 @@ } } +.popover-body { + padding: $popover-padding-y $popover-padding-x; + // color: $popover-body-color; + + > :last-child { + margin-bottom: 0; + } +} + // Desktop @include media-breakpoint-up($popover-breakpoint) { diff --git a/assets/scss/bootstrap/_transitions.scss b/assets/scss/bootstrap/_transitions.scss new file mode 100644 index 000000000..f9f6901cb --- /dev/null +++ b/assets/scss/bootstrap/_transitions.scss @@ -0,0 +1,43 @@ +.fade { + //@include transition-standard(opacity); + transition: opacity $transition-duration-desktop-complex $transition-timing-function-standard; + + &:not(.show) { + opacity: 0; + } + + /*opacity: 0; + + &.show { + opacity: 1; + }*/ +} + +.collapse { + &:not(.show) { + display: none; + }/* + display: none; + + &.show { + display: block; + }*/ +} + +.collapsing { + @include transition-standard(height); + + height: 0; + overflow: hidden; + position: relative; +} + +// stylelint-disable-next-line selector-no-qualifying-type +tbody.collapse.show { + display: table-row-group; +} + +// stylelint-disable-next-line selector-no-qualifying-type +tr.collapse.show { + display: table-row; +} diff --git a/assets/scss/material.scss b/assets/scss/material.scss index 4af436bb6..beec472dd 100644 --- a/assets/scss/material.scss +++ b/assets/scss/material.scss @@ -1,13 +1,14 @@ @import 'colors'; @import 'functions'; -@import 'mixins'; @import 'variables'; +@import 'mixins'; + // Base CSS -@import 'base/base'; +@import 'base/base'; // root + reboot @import 'base/grid'; -@import 'base/typography'; +@import 'base/typography'; // type // Bootstrap components // Components covered in Bootstrap's css but not in Material design @@ -18,43 +19,43 @@ @import 'bootstrap/carousel'; @import 'bootstrap/close'; @import 'bootstrap/code'; -@import 'bootstrap/form'; -@import 'bootstrap/image'; +@import 'bootstrap/forms'; +@import 'bootstrap/images'; @import 'bootstrap/jumbotron'; @import 'bootstrap/media'; @import 'bootstrap/nav'; @import 'bootstrap/pagination'; @import 'bootstrap/popover'; @import 'bootstrap/responsive-embed'; -@import 'bootstrap/transition'; +@import 'bootstrap/transitions'; // Material components // Components covered in Material design (https://material.google.com/components) -@import 'material/button'; +@import 'material/buttons'; @import 'material/button-flat'; @import 'material/button-float'; @import 'material/button-group'; @import 'material/card'; @import 'material/chip'; -@import 'material/data-table'; -@import 'material/dialog'; -@import 'material/expansion-panel'; -@import 'material/menu'; +@import 'material/data-table'; // tables +@import 'material/dialog'; // modal +@import 'material/expansion-panel'; // list-group +@import 'material/menu'; // dropdown @import 'material/navdrawer'; @import 'material/picker'; @import 'material/progress'; -@import 'material/progress-circular'; -@import 'material/selection-control'; -@import 'material/slider'; -@import 'material/snackbar'; +@import 'material/progress-circular'; // Spinners +@import 'material/selection-control'; // custom-forms +@import 'material/sliders'; +@import 'material/snackbars'; // toasts @import 'material/stepper'; @import 'material/tab'; @import 'material/text-field'; @import 'material/text-field-box'; @import 'material/text-field-floating-label'; -@import 'material/text-field-input-group'; -@import 'material/toolbar'; +@import 'material/text-field-input-group'; // input-group +@import 'material/toolbar'; // navbar @import 'material/tooltip'; // Utilities @@ -63,4 +64,4 @@ // Very basic print styles -@import 'print'; +@import 'print'; \ No newline at end of file diff --git a/assets/scss/material/_button-flat.scss b/assets/scss/material/_button-flat.scss index cd7f3f5a2..1ed213e97 100644 --- a/assets/scss/material/_button-flat.scss +++ b/assets/scss/material/_button-flat.scss @@ -1,11 +1,26 @@ +// Btn flat and outlined +// Material guidelines : https://material.io/design/components/buttons.html#specs +// Material Web component : https://material-components.github.io/material-components-web-catalog/#/component/button?type=text +[class*='btn-flat'] { + padding: $btn-padding-y $btn-flat-padding-x; +} + + [class*='btn-flat'], [class*='btn-outline'] { - background-color: transparent; box-shadow: none; - &.active, - &:active { +@include hover-focus-active { box-shadow: none; + color: $black-primary; + } + + &:hover { + background-color: rgba(0,0,0,$overlay-hover-white-opacity); + } + + &:active { + background-color: rgba(0,0,0,$overlay-pressed-white-opacity); } &.disabled, @@ -17,20 +32,36 @@ @each $color, $values in $theme-colors { .btn-flat-#{$color}, .btn-outline-#{$color} { - @include plain-active-focus-hover { + @include plain-hover-focus { color: theme-color($color); } + &:hover { + background-color: rgba(theme-color($color), $overlay-hover-white-opacity); + } + + &:focus { + background-color: rgba(theme-color($color), $overlay-focus-white-opacity); + } + + &:active { + background-color: rgba(theme-color($color), $overlay-pressed-white-opacity); + } + &.disabled, &:disabled { + background-color: $btn-bg-disabled; color: $btn-color-disabled; } } + .btn-outline-#{$color} { + border: 2px solid theme-color($color); + } } .btn-flat-light, .btn-outline-light { - @include focus-hover { + @include hover-focus { background-image: linear-gradient(to bottom, $btn-overlay-inverse, $btn-overlay-inverse); } @@ -39,3 +70,16 @@ background-color: $btn-bg-active-inverse; } } + +// Btn-icon addition +.btn-icon { + border-radius: 50%; + color: $black-hint; + height: $btn-icon-height; + padding: $btn-icon-padding; + width: $btn-icon-height; + + &:hover { + color: $black-hint; + } +} diff --git a/assets/scss/material/_button-float.scss b/assets/scss/material/_button-float.scss index b91500432..942e91f09 100644 --- a/assets/scss/material/_button-float.scss +++ b/assets/scss/material/_button-float.scss @@ -1,12 +1,18 @@ +// https://material-components.github.io/material-components-web-catalog/#/component/fab + .btn-float { border-radius: 50%; box-shadow: map-get($btn-float-elevation-shadow, shadow); height: $btn-float-size; - line-height: $btn-float-size; + //line-height: $btn-float-size; min-width: 0; padding: 0; width: $btn-float-size; + &:hover { + box-shadow: map-get($btn-float-elevation-shadow-hover, shadow); + } + &.active, &:active { box-shadow: map-get($btn-float-elevation-shadow-active, shadow); @@ -22,6 +28,20 @@ line-height: $btn-float-size-sm; width: $btn-float-size-sm; } + + // Extended FAB + &-extended { + border-radius: $btn-float-extended-border-radius; + height: $btn-float-extended-height; + line-height: $btn-float-extended-line-height; + padding: 0 $btn-float-extended-padding-x; + width: auto; + + .material-icons { + margin-left: -.5rem; + margin-right: .75rem; + } + } } .btn-float-dropdown { diff --git a/assets/scss/material/_button-group.scss b/assets/scss/material/_button-group.scss index 993f30fd9..3a60decda 100644 --- a/assets/scss/material/_button-group.scss +++ b/assets/scss/material/_button-group.scss @@ -1,3 +1,5 @@ +// todo : btn-group disabled + .btn-group, .btn-group-vertical { @include border-radius($btn-border-radius); @@ -8,8 +10,10 @@ position: relative; vertical-align: middle; - @each $color, $values in $theme-colors { - > .btn-#{$color} { + @each $color, + $values in $theme-colors { + >.btn-#{$color} { + &.disabled, &:disabled { background-color: theme-color-light($color); @@ -18,17 +22,27 @@ } } - > .btn { + >.btn { @include transition-standard(border-color, opacity); box-shadow: none; - flex: 0 1 auto; + flex: 1 1 auto; min-width: 0; + padding-left: $btn-group-padding-x; + padding-right: $btn-group-padding-x; + position: relative; + + &:hover, + &:focus, + &:active, + &.active { + z-index: 1; + } - &.active, + /*&.active, &:active { - box-shadow: none; - } + background-color: rgba($black,$overlay-activated-white-opacity); + }*/ &.disabled, &:disabled { @@ -41,6 +55,7 @@ &.active, &:active { opacity: 1; + background-color: rgba($black,$overlay-activated-white-opacity); } &.disabled, @@ -50,8 +65,8 @@ } } - > .btn-group, - > .btn-group-vertical { + >.btn-group, + >.btn-group-vertical { @include border-radius(0); background-color: transparent; @@ -60,28 +75,28 @@ } .btn-group { - &.show > .btn.dropdown-toggle { + &.show>.dropdown-toggle { box-shadow: none; } - > .btn, - > .btn-group { + >.btn, + >.btn-group { margin-left: ($btn-group-inner-spacer-x * -1); } - > .btn:first-child, - > .btn-group:first-child { + >.btn:first-child, + >.btn-group:first-child { margin-left: 0; } - > .btn:not(:first-child), - > .btn-group:not(:first-child) > .btn { + >.btn:not(:first-child), + >.btn-group:not(:first-child)>.btn { @include border-left-radius(0); } - > .btn:not(:last-child):not(.dropdown-toggle), - > .btn-group:not(:last-child) > .btn, - > .dropdown-toggle:not(:last-of-type) { + >.btn:not(:last-child):not(.dropdown-toggle), + >.btn-group:not(:last-child)>.btn, + >.dropdown-toggle:not(:last-of-type) { @include border-right-radius(0); } } @@ -91,26 +106,27 @@ flex-direction: column; justify-content: center; - > .btn, - > .btn-group { + >.btn, + >.btn-group { margin-top: ($btn-group-inner-spacer-y * -1); margin-left: 0; width: 100%; } - > .btn:first-child, - > .btn-group:first-child { + >.btn:first-child, + >.btn-group:first-child { margin-top: 0; } - > .btn:not(:first-child), - > .btn-group:not(:first-child) > .btn { + // Reset rounded corners + >.btn:not(:first-child), + >.btn-group:not(:first-child)>.btn { @include border-top-radius(0); } - > .btn:not(:last-child):not(.dropdown-toggle), - > .btn-group:not(:last-child) > .btn, - > .dropdown-toggle:not(:last-of-type) { + >.btn:not(:last-child):not(.dropdown-toggle), + >.btn-group:not(:last-child)>.btn, + >.dropdown-toggle:not(:last-of-type) { @include border-bottom-radius(0); } } @@ -120,19 +136,20 @@ box-shadow: none; } -.btn-group-lg > .btn { - @extend %btn-lg; +.btn-group-sm>.btn { + @extend %btn-sm; } -.btn-group-sm > .btn { - @extend %btn-sm; +.btn-group-lg>.btn { + @extend %btn-lg; } // Checkbox and radio options [data-toggle='buttons'] { - > .btn, - > .btn-group > .btn { + + >.btn, + >.btn-group>.btn { margin-bottom: 0; [type='checkbox'], @@ -146,23 +163,33 @@ // Split button dropdown -.dropdown-toggle.dropdown-toggle-split { +.dropdown-toggle-split { padding-right: $caret-spacer-x; padding-left: $caret-spacer-x; - &::after { - margin-right: 0; + &::after, + .dropup &::after, + .dropright &::after { + margin-right: 0; // Daemonite addition margin-left: 0; } - .dropleft & { - &::before { - margin-right: 0; - margin-left: 0; - } + .dropleft &::before { + margin-right: 0; + margin-left: 0; // Daemonite addition } } +/*.btn-sm + .dropdown-toggle-split { + padding-right: $btn-padding-x-sm * .75; + padding-left: $btn-padding-x-sm * .75; +} + +.btn-lg + .dropdown-toggle-split { + padding-right: $btn-padding-x-lg * .75; + padding-left: $btn-padding-x-lg * .75; +}*/ + // Toolbar .btn-toolbar { @@ -174,3 +201,19 @@ width: auto; } } + +// Checkbox and radio options + +.btn-group-toggle { + > .btn, + > .btn-group > .btn { + margin-bottom: 0; // Override default `