;; ;" | replace: "e", _element | split: ";" %}{% assign _content = _content | replace: _edges[0], _edges[1] | replace: _edges[2], _edges[3] | replace: _edges[4], _edges[5] %}{% endfor %}{% if _profile and _clippings %}{% assign _profile_clippings = _content | size | plus: 1 %}{% endif %}{{ _content }}{% if _profile %} | Step | Bytes |
| raw | {{ content | size }}{% if _profile_endings %} |
| endings | {{ _profile_endings }}{% endif %}{% if _profile_startings %} |
| startings | {{ _profile_startings }}{% endif %}{% if _profile_comments %} |
| comments | {{ _profile_comments }}{% endif %}{% if _profile_collapse %} |
| collapse | {{ _profile_collapse }}{% endif %}{% if _profile_clippings %} |
| clippings | {{ _profile_clippings }}{% endif %} |
{% endif %}{% endif %}
diff --git a/_layouts/redirect.html b/_layouts/redirect.html
new file mode 100644
index 000000000..ab4553dce
--- /dev/null
+++ b/_layouts/redirect.html
@@ -0,0 +1,16 @@
+
+
+
+ Redirecting...
+
+
+
+
+
+
+ Redirecting...
+ Click here if you are not redirected.
+
+
+
+
diff --git a/apple-touch-icon.png b/apple-touch-icon.png
index 828e10cd9..26ae8ae8f 100644
Binary files a/apple-touch-icon.png and b/apple-touch-icon.png differ
diff --git a/assets/js/index.js b/assets/js/index.js
index e1d5496f5..ef78c9dc8 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -1,8 +1,10 @@
-import $ from 'jquery'
+// import $ from 'jquery'
+import 'element-closest-polyfill' // IE10 closest fix
import ExpansionPanel from './src/expansion-panel'
import FloatingLabel from './src/floating-label'
import NavDrawer from './src/nav-drawer'
import PickDate from './src/pickdate'
+import Ripplet from './src/ripplet'
import SelectionControlFocus from './src/selection-control-focus'
import TabSwitch from './src/tab-switch'
import Util from './src/util'
@@ -13,6 +15,7 @@ export {
FloatingLabel,
NavDrawer,
PickDate,
+ Ripplet,
SelectionControlFocus,
TabSwitch
}
diff --git a/assets/js/src/pickdate.js b/assets/js/src/pickdate.js
index 1f0b61904..32de23fcf 100644
--- a/assets/js/src/pickdate.js
+++ b/assets/js/src/pickdate.js
@@ -27,9 +27,9 @@ const PickDate = (($) => {
hiddenSuffix : '',
klass : {
// button
- buttonClear : 'btn btn-outline-primary picker-button-clear',
- buttonClose : 'btn btn-outline-primary picker-button-close',
- buttonToday : 'btn btn-outline-primary picker-button-today',
+ buttonClear : 'btn btn-flat-primary picker-button-clear',
+ buttonClose : 'btn btn-flat-primary picker-button-close',
+ buttonToday : 'btn btn-flat-primary picker-button-today',
// day
day : 'picker-day',
@@ -70,8 +70,8 @@ const PickDate = (($) => {
},
labelMonthNext : 'Next month',
labelMonthPrev : 'Previous month',
- labelMonthSelect : 'Select a month',
- labelYearSelect : 'Select a year',
+ labelMonthSelect : 'Choose a month',
+ labelYearSelect : 'Choose a year',
max : false,
min : false,
monthsFull : ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
@@ -147,7 +147,7 @@ const PickDate = (($) => {
display(datepickerApi, datepickerRoot, datepickerValue) {
$('.picker-date-display', datepickerRoot).remove()
- $('.picker-wrap', datepickerRoot).prepend(`${datepickerApi.get(datepickerValue, 'yyyy')}
${datepickerApi.get(datepickerValue, 'dddd')}${datepickerApi.get(datepickerValue, 'd')}${datepickerApi.get(datepickerValue, 'mmm')}
${datepickerApi.get(datepickerValue, 'yyyy')}
${datepickerApi.get(datepickerValue, 'dddd')}${datepickerApi.get(datepickerValue, 'mmm')}${datepickerApi.get(datepickerValue, 'd')}
` alignment by inheriting `text-align`.
+// 3. Fix alignment for Safari
+
+th {
+ font-weight: $table-th-font-weight; // 1
+ text-align: inherit; // 2
+ text-align: -webkit-match-parent; // 3
}
-[type='search']::-webkit-search-cancel-button,
-[type='search']::-webkit-search-decoration {
- -webkit-appearance: none;
+//
+// Forms
+//
+
+label {
+ @include typography-caption;
+
+ color: $textfield-caption-color;
+ display: inline-block;
+ user-select: none;
}
-::-webkit-file-upload-button {
- -webkit-appearance: button;
- font: inherit;
+button {
+ border-radius: 0;
}
-// Hidden
+// Explicitly remove focus outline in Chromium when it shouldn't be
+// visible (e.g. as result of mouse click or touch tap). It already
+// should be doing this automatically, but seems to currently be
+// confused and applies its very visible two-tone outline anyway.
-[hidden] {
- display: none !important;
+button:focus:not(:focus-visible) {
+ outline: 0;
}
-// Images
-
-img {
- border-style: none;
- vertical-align: middle;
+input,
+button,
+select,
+optgroup,
+textarea {
+ font-family: inherit;
+ font-size: inherit;
+ line-height: inherit;
+ margin: 0;
}
-svg:not(:root) {
- overflow: hidden;
+button,
+input {
+ overflow: visible;
}
-// Interactive
+button,
+select {
+ text-transform: none;
+}
-summary {
+[role='button'] {
cursor: pointer;
- display: list-item;
}
-// Link
-
-a {
- background-color: transparent;
- color: $link-color;
- text-decoration: $link-decoration;
- -webkit-text-decoration-skip: objects;
+select {
+ word-wrap: normal;
- @include active-focus-hover {
- color: $link-color-hover;
- text-decoration: $link-decoration-hover;
+ &[multiple],
+ &[size] {
+ overflow: auto;
}
}
-a:not([href]):not([tabindex]) {
- color: inherit;
- text-decoration: none;
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+ -webkit-appearance: button;
+}
- @include active-focus-hover {
- color: inherit;
- text-decoration: none;
+@if $enable-pointer-cursor-for-buttons {
+ button,
+ [type='button'],
+ [type='reset'],
+ [type='submit'] {
+ &:not(:disabled) {
+ cursor: pointer;
+ }
}
- &:focus {
- outline: 0;
+ .btn:not(.disabled):not(:disabled),
+ input:enabled + label:hover {
+ cursor: pointer;
}
}
-// Scripting
+button::-moz-focus-inner,
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
+ border-style: none;
+ padding: 0;
+}
-template {
- display: none;
+input[type='radio'],
+input[type='checkbox'] {
+ box-sizing: border-box;
+ padding: 0;
}
-// Table
+textarea {
+ resize: vertical;
+}
-caption {
- @include text-align(left);
+fieldset {
+ border: 0;
+ margin: 0;
+ min-width: 0;
+ padding: 0;
+}
+
+legend {
@include typography-caption;
- caption-side: bottom;
- color: $table-caption-color;
- min-height: $table-thead-cell-height;
- padding: $table-thead-padding-y $table-cell-padding-x-alt;
-}
+ float: left;
+ margin-bottom: $headings-margin-y;
+ padding: 0;
+ width: 100%;
-table {
- border-collapse: collapse;
+ + * {
+ clear: left;
+ }
}
-th {
- @include text-align(left);
+::-webkit-datetime-edit-fields-wrapper,
+::-webkit-datetime-edit-text,
+::-webkit-datetime-edit-minute,
+::-webkit-datetime-edit-hour-field,
+::-webkit-datetime-edit-day-field,
+::-webkit-datetime-edit-month-field,
+::-webkit-datetime-edit-year-field {
+ padding: 0;
}
-// Typography
-
-abbr {
- &[data-original-title],
- &[title] {
- border-bottom: 0;
- cursor: help;
- text-decoration: underline dotted;
- }
+::-webkit-inner-spin-button {
+ height: auto;
}
-address {
- font-style: normal;
- line-height: inherit;
- margin-bottom: $paragraph-margin-y;
+[type='search'] {
+ -webkit-appearance: textfield;
+ outline-offset: -2px;
}
-b,
-strong {
- font-weight: bolder;
+::-webkit-search-decoration {
+ -webkit-appearance: none;
}
-blockquote {
- margin: 0 0 $paragraph-margin-y;
+::-webkit-color-swatch-wrapper {
+ padding: 0;
}
-dd {
- margin-bottom: $headings-margin-y;
- margin-left: 0;
+::file-selector-button {
+ font: inherit;
}
-dfn {
- font-style: italic;
+::-webkit-file-upload-button {
+ -webkit-appearance: button;
+ font: inherit;
}
-dl,
-ol,
-ul {
- margin-top: 0;
- margin-bottom: $paragraph-margin-y;
+//
+// Correct element displays
+//
+
+output {
+ display: inline-block;
}
-dt {
- font-weight: $dt-font-weight;
+iframe {
+ border: 0;
}
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
- margin-top: 0;
- margin-bottom: $headings-margin-y;
+summary {
+ cursor: pointer;
+ display: list-item;
}
-mark {
- background-color: $mark-bg;
- color: $mark-color;
+template {
+ display: none;
}
-ol ol,
-ol ul,
-ul ol,
-ul ul {
- margin-bottom: 0;
+progress {
+ vertical-align: baseline;
}
-p {
- margin-top: 0;
- margin-bottom: $paragraph-margin-y;
+[hidden] {
+ display: none !important;
}
-small {
- font-size: 80%;
+// Additions
+
+@at-root {
+
+ // stylelint-disable-next-line at-rule-no-vendor-prefix
+ @-ms-viewport {
+ width: device-width;
+ }
}
-sub,
-sup {
- font-size: 75%;
- line-height: 0;
- position: relative;
- vertical-align: baseline;
+dfn {
+ font-style: italic;
}
-sub {
- bottom: -0.25em;
+::selection {
+ background-color: rgba(theme-color('primary'), $overlay-selected-white-opacity); // Material Addition
}
-sup {
- top: -0.5em;
+.disabled:hover,
+:disabled:hover {
+ cursor: default;
}
diff --git a/assets/scss/base/_grid.scss b/assets/scss/base/_grid.scss
index d8a4da5cd..54578c1c2 100644
--- a/assets/scss/base/_grid.scss
+++ b/assets/scss/base/_grid.scss
@@ -1,31 +1,57 @@
-// Column
+// Container widths
+//
+// Set the container width, and override it for fixed navbars in media queries.
+// stylelint-disable
@if $enable-grid-classes {
- @include make-grid-columns;
-}
+ // Single container class with breakpoint max-widths
+ .container,
+ // 100% wide container at all breakpoints
+ .container-fluid {
+ @include make-container();
+ }
-// Container
+ // Responsive containers that are 100% wide until a breakpoint
+ @each $breakpoint, $container-max-width in $container-max-widths {
+ .container-#{$breakpoint} {
+ @extend .container-fluid;
+ }
-@if $enable-grid-classes {
- .container {
- @include make-container;
- @include make-container-max-widths;
- }
-}
+ @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
+ %responsive-container-#{$breakpoint} {
+ max-width: $container-max-width;
+ }
-@if $enable-grid-classes {
- .container-fluid {
- @include make-container;
+ // Extend each breakpoint which is smaller or equal to the current breakpoint
+ $extend-breakpoint: true;
+
+ @each $name, $width in $grid-breakpoints {
+ @if ($extend-breakpoint) {
+ .container#{breakpoint-infix($name, $grid-breakpoints)} {
+ @extend %responsive-container-#{$breakpoint};
+ }
+
+ // Once the current breakpoint is reached, stop extending
+ @if ($breakpoint == $name) {
+ $extend-breakpoint: false;
+ }
+ }
+ }
+ }
}
}
// Row
+//
+// Rows contain 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;
@@ -37,3 +63,11 @@
}
}
}
+
+// Columns
+//
+// Common styles for small and large grid columns
+
+@if $enable-grid-classes {
+ @include make-grid-columns();
+}
diff --git a/assets/scss/base/_typography.scss b/assets/scss/base/_typography.scss
index 8f3d5ac2e..1ad737e92 100644
--- a/assets/scss/base/_typography.scss
+++ b/assets/scss/base/_typography.scss
@@ -1,89 +1,6 @@
-// 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;
-}
-
-small,
-.small {
- font-size: $small-font-size;
- font-weight: $font-weight-regular;
-}
-
-.initialism {
- font-size: 90%;
- text-transform: uppercase;
-}
-
-// Headings
-
-.typography-display-4 {
- @include typography-display-4;
-}
-
-.typography-display-3 {
- @include typography-display-3;
-}
-
-.typography-display-2 {
- @include typography-display-2;
-}
-
-.typography-display-1 {
- @include typography-display-1;
-}
-
-.typography-headline {
- @include typography-headline;
-}
-
-.typography-title {
- @include typography-title;
-}
-
-.typography-subheading {
- @include typography-subheading;
-}
-
-.typography-body-2 {
- @include typography-body-2;
-}
-
-.typography-body-1 {
- @include typography-body-1;
-}
-
-.typography-caption {
- @include typography-caption;
-}
// Headings - bootstrap classes
-
+// Keep compatibility for Material UI v1
h1,
h2,
h3,
@@ -102,56 +19,70 @@ h6,
}
h1,
-.h1 {
- @include typography-display-2;
-}
+.h1,
+.display-1,
+.typography-display-4,
+.typography-headline-1 { @include typography-headline-1; }
h2,
-.h2 {
- @include typography-display-1;
-}
+.h2,
+.display-2,
+.typography-display-3,
+.typography-headline-2 { @include typography-headline-2; }
h3,
-.h3 {
- @include typography-headline;
-}
+.h3,
+.display-3,
+.typography-display-2,
+.typography-headline-3 { @include typography-headline-3; }
h4,
-.h4 {
- @include typography-title;
-}
+.h4,
+.display-4,
+.typography-display-1,
+.typography-headline-4 { @include typography-headline-4; }
h5,
-.h5 {
- @include typography-subheading;
-}
+.h5,
+.typography-headline,
+.typography-headline-5 { @include typography-headline-5; }
h6,
-.h6 {
- @include typography-body-2;
+.h6,
+.lead,
+.typography-headline-6,
+.typography-title { @include typography-headline-6; }
+
+.typography-subheading,
+.typography-subtitle-1 {
+ @include typography-subtitle-1;
}
-.display-1 {
- @include typography-display-4;
+.typography-subtitle-2 {
+ @include typography-subtitle-2;
}
-.display-2 {
- @include typography-display-3;
+.typography-body-1 {
+ @include typography-body-1;
}
-.display-3 {
- @include typography-display-2;
+.typography-body-2 {
+ @include typography-body-2;
}
-.display-4 {
- @include typography-display-1;
+.typography-caption {
+ @include typography-caption;
}
-.lead {
- @include typography-title;
+.typography-overline {
+ @include typography-overline;
}
-// Hr
+p { font-size: 1rem; } // djibe addition
+
+//
+// Horizontal rules
+//
hr {
border: 0;
@@ -160,7 +91,57 @@ 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
+//
+
+ol {
+ list-style: decimal outside;
+
+ ol {
+ list-style-type: lower-alpha;
+ }
+}
+
+// djibe addition looks like https://developers.google.com/style/lists
+ul {
+ list-style: disc outside;
+
+ &:not([class]) {
+ padding-left: 2.5rem;
+
+ li {
+ font-size: inherit;
+ margin: 0.75rem 0;
+ padding: 0;
+ }
+ }
+}
+
+li > ul > li { // stylelint-disable-line selector-max-type
+ list-style-type: circle;
+}
+
+.list-unstyled {
+ @include list-unstyled;
+}
.list-inline {
@include list-unstyled;
@@ -174,6 +155,32 @@ 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..c494ecb17 100644
--- a/assets/scss/bootstrap/_alert.scss
+++ b/assets/scss/bootstrap/_alert.scss
@@ -1,45 +1,56 @@
+//
+// 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: 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
+// 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;
- padding: ($alert-padding-y - ($close-font-size - $font-size-base * $line-height-base) / 2) $alert-padding-x;
+ color: $black-hint;
+ padding: ($alert-padding-y - ($close-font-size - $font-size-base * $line-height-base) * 0.5) $alert-padding-x;
position: absolute;
top: 0;
right: 0;
+ z-index: 2;
}
}
-// 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: rgba(theme-color($color), $overlay-selected-colored-opacity);
+ color: darken(theme-color($color), 15%);
}
}
+
+// @mixin alert-variant not used
diff --git a/assets/scss/bootstrap/_badge.scss b/assets/scss/bootstrap/_badge.scss
index 20193554b..1581fa7b4 100644
--- a/assets/scss/bootstrap/_badge.scss
+++ b/assets/scss/bootstrap/_badge.scss
@@ -1,36 +1,83 @@
+// 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;
+ justify-content: center;
line-height: inherit;
padding-right: $badge-padding-x;
padding-left: $badge-padding-x;
- text-align: center;
- vertical-align: baseline;
+ //text-align: center;
white-space: nowrap;
+ @at-root a#{&} {
+ @include hover-focus {
+ text-decoration: none;
+ }
+ }
+
+ // Empty badges collapse automatically
&:empty {
display: none;
}
- .btn & {
- margin-top: -1px;
- margin-bottom: -1px;
- padding-top: 1px;
- padding-bottom: 1px;
+ // Material addition : https://material.angular.io/components/badge/examples
+ .btn > &,
+ .position-relative > & {
+ border-radius: $badge-width * 0.5;
+ // display: inline-block;
+ font-family: Roboto, sans-serif;
+ font-size: $font-size-caption;
+ font-weight: $badge-btn-font-weight;
+ height: $badge-width;
+ letter-spacing: initial;
+ // line-height: $badge-width;
+ min-width: $badge-width;
+ position: absolute;
+ top: -$badge-width * 0.5;
+ }
+
+ .btn > &,
+ i > &,
+ [class*='material-icons'] > & {
+ top: 0;
+ right: 0;
+ transform: translate(50%, -50%);
+ transform-origin: 100% 0%;
+
+ &.badge-before {
+ right: auto;
+ left: 0;
+ transform: translate(-50%, -50%);
+ transform-origin: 0% 100%;
+ }
}
}
+// 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;
@@ -39,8 +86,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..909bd7854 100644
--- a/assets/scss/bootstrap/_breadcrumb.scss
+++ b/assets/scss/bootstrap/_breadcrumb.scss
@@ -1,35 +1,37 @@
.breadcrumb {
- @include border-radius($breadcrumb-border-radius);
-
align-items: center;
- background-color: $breadcrumb-bg;
+ //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;
+ padding: 0; // reset Firefox
}
.breadcrumb-item {
- @include transition-standard(color);
-
align-items: center;
color: $breadcrumb-item-color;
display: flex;
+ font-size: $breadcrumb-font-size;
- @include active-focus-hover {
- color: $breadcrumb-item-color-hover;
+ &.active {
+ cursor: default;
}
- &.active {
- color: $breadcrumb-item-color-hover;
- font-weight: bolder;
+ &:only-child {
+ padding: $breadcrumb-padding-y $breadcrumb-padding-x;
}
a {
+ @include transition-standard(background-color);
+
+ border-radius: $spacer-sm;
color: inherit;
+ padding: $breadcrumb-padding-y $breadcrumb-padding-x;
text-decoration: none;
+
+ &:hover {
+ background-color: $breadcrumb-bg-hover;
+ }
}
+ .breadcrumb-item {
@@ -38,10 +40,17 @@
&::before {
@include set-material-icons;
- color: $breadcrumb-item-color;
- content: $breadcrumb-item-icon;
+ color: $black-secondary;
+ content: $breadcrumb-divider;
display: inline-block;
+ // float: left; // Suppress inline spacings and underlining of the separator
margin-right: $breadcrumb-inner-spacer-x;
}
}
+
+ // stylelint-disable
+ &.active::before {
+ margin-right: $breadcrumb-padding-x;
+ }
+ // stylelint-enable
}
diff --git a/assets/scss/bootstrap/_carousel.scss b/assets/scss/bootstrap/_carousel.scss
index b67131814..30ddef09d 100644
--- a/assets/scss/bootstrap/_carousel.scss
+++ b/assets/scss/bootstrap/_carousel.scss
@@ -1,7 +1,7 @@
.carousel {
position: relative;
- @include hover {
+ &:hover {
.carousel-control-next,
.carousel-control-prev {
opacity: 1;
@@ -113,14 +113,14 @@
height: $carousel-control-size;
justify-content: center;
line-height: 1;
- margin-top: ($carousel-control-size / -2);
+ margin-top: ($carousel-control-size * -0.5);
opacity: 0;
position: absolute;
top: 50%;
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;
@@ -137,11 +137,11 @@
}
.carousel-control-next {
- right: ($carousel-control-size / 2);
+ right: ($carousel-control-size * 0.5);
}
.carousel-control-prev {
- left: ($carousel-control-size / 2);
+ left: ($carousel-control-size * 0.5);
}
.carousel-control-next-icon,
@@ -162,9 +162,9 @@
.carousel-caption {
color: $carousel-caption-color;
position: absolute;
- right: ((100% - $carousel-caption-width) / 2);
+ right: ((100% - $carousel-caption-width) * 0.5);
bottom: ($carousel-indicator-size * 3);
- left: ((100% - $carousel-caption-width) / 2);
+ left: ((100% - $carousel-caption-width) * 0.5);
text-align: center;
z-index: 1;
}
diff --git a/assets/scss/bootstrap/_close.scss b/assets/scss/bootstrap/_close.scss
index 1680ad725..6666fcfcc 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,15 @@
cursor: pointer;
}
}
+
+// stylelint-disable
+button.close {
+ background-color: transparent;
+ border: 0;
+ padding: 0;
+}
+
+a.close.disabled {
+ pointer-events: none;
+}
+// stylelint-enable
diff --git a/assets/scss/bootstrap/_code.scss b/assets/scss/bootstrap/_code.scss
index 8a265ca1b..c5b6fef70 100644
--- a/assets/scss/bootstrap/_code.scss
+++ b/assets/scss/bootstrap/_code.scss
@@ -5,7 +5,7 @@ code {
color: $code-color;
font-size: $code-font-size;
padding: $code-padding-y $code-padding-x;
- word-break: break-word;
+ word-wrap: break-word;
a > & {
color: inherit;
@@ -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/_form.scss b/assets/scss/bootstrap/_form.scss
deleted file mode 100644
index 494c43dce..000000000
--- a/assets/scss/bootstrap/_form.scss
+++ /dev/null
@@ -1,173 +0,0 @@
-// Checkbox and radio button
-
-.form-check {
- display: block;
- margin-bottom: $textfield-margin-y;
- padding-left: $form-check-input-gutter;
- position: relative;
-}
-
-.form-check-inline {
- display: inline-block;
- margin-right: $form-check-inline-margin-x;
- margin-bottom: 0;
-}
-
-.form-check-input {
- margin-top: (($font-size-base * $line-height-base - $font-size-base) / 3 * 2);
- margin-left: ($form-check-input-gutter * -1);
- position: absolute;
-
- &:disabled ~ .form-check-label {
- color: $textfield-color-disabled;
- }
-}
-
-.form-check-label {
- color: inherit;
- font-size: inherit;
- line-height: inherit;
-}
-
-// Form group
-
-.form-group {
- margin-bottom: $form-group-margin-y;
-}
-
-.form-row {
- display: flex;
- flex-wrap: wrap;
- margin-right: ($textfield-margin-x / -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;
-
- .custom-file,
- .custom-select {
- width: auto;
- }
-
- .form-check {
- margin-bottom: 0;
- width: auto;
- }
-
- .form-control,
- .form-control-file {
- display: inline-block;
- vertical-align: middle;
- width: auto;
- }
-
- .form-control-plaintext {
- display: inline-block;
- }
-
- .form-group {
- align-items: center;
- display: flex;
- flex: 0 0 auto;
- flex-flow: row wrap;
- margin-bottom: 0;
- }
-
- .input-group {
- width: auto;
- }
-}
-
-// Label
-
-.col-form-label {
- color: inherit;
- font-size: $font-size-base;
- line-height: ($textfield-font-size * $textfield-line-height / $font-size-base);
- 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);
- line-height: ($textfield-line-height-lg / ($font-size-base / $textfield-font-size));
- 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);
- line-height: ($textfield-line-height-sm / ($font-size-base / $textfield-font-size));
- padding-top: $textfield-padding-y-sm;
- padding-bottom: $textfield-padding-y-sm;
-}
-
-// Misc
-
-.form-text {
- @include typography-caption;
-
- color: $textfield-hint-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;
- }
-}
-
-// Readonly control as plain text
-
-.form-control-plaintext {
- background-color: transparent;
- border-color: transparent;
- border-radius: 0;
- border-style: solid;
- 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;
- 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/_forms.scss b/assets/scss/bootstrap/_forms.scss
new file mode 100644
index 000000000..bcb38cb71
--- /dev/null
+++ b/assets/scss/bootstrap/_forms.scss
@@ -0,0 +1,211 @@
+// 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;
+ position: absolute;
+
+ // Use disabled attribute instead of :disabled pseudo-class
+ // Workaround for: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11295231
+ &[disabled] ~ .form-check-label {
+ color: $textfield-color-disabled;
+ }
+}
+
+.form-check-label {
+ color: inherit;
+ font-size: inherit;
+ line-height: inherit;
+ vertical-align: middle;
+}
+
+.form-check-inline {
+ align-items: center;
+ display: inline-flex;
+ margin-right: $form-check-inline-margin-x;
+ margin-bottom: 0;
+
+ .form-check-input {
+ margin-top: 0;
+ margin-right: $form-check-inline-input-margin-x;
+ margin-left: 0;
+ position: static;
+ }
+}
+
+// Form group
+
+.form-group {
+ margin-bottom: $form-group-margin-y;
+}
+
+.form-row {
+ display: flex;
+ flex-wrap: wrap;
+ margin-right: ($textfield-margin-x * -0.5);
+ margin-left: ($textfield-margin-x * -0.5);
+
+ > .col,
+ > [class*='col-'] {
+ padding-right: ($textfield-margin-x * 0.5);
+ padding-left: ($textfield-margin-x * 0.5);
+ }
+}
+
+// Inline
+
+.form-inline {
+ align-items: center;
+ display: flex;
+ flex-flow: row wrap;
+
+ .form-check {
+ margin-bottom: 0;
+ width: 100%; //auto
+ }
+
+ // stylelint-disable
+ @include media-breakpoint-up(sm) {
+ label {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ margin-bottom: 0;
+ }
+
+ // Inline-block all the things for 'inline'
+ .form-group {
+ align-items: center;
+ display: flex;
+ flex: 0 0 auto;
+ flex-flow: row wrap;
+ margin-bottom: 0;
+ }
+
+ // Allow folks to *not* use `.form-group`
+ .form-control {
+ display: inline-block;
+ vertical-align: middle;
+ width: auto; // Prevent labels from stacking above inputs in `.form-group`
+ }
+
+ // Make static controls behave like regular ones
+ .form-control-plaintext {
+ display: inline-block;
+
+ &:focus {
+ outline: 0;
+ }
+ }
+
+ .input-group,
+ .custom-select {
+ width: auto;
+ }
+
+ .form-check {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ padding-left: 0;
+ width: auto;
+ }
+
+ .form-check-input {
+ flex-shrink: 0;
+ margin-top: 0;
+ margin-right: $form-check-input-gutter;
+ margin-left: 0;
+ position: relative;
+ }
+
+ .custom-control {
+ align-items: center;
+ justify-content: center;
+ }
+
+ .custom-control-label {
+ margin-bottom: 0;
+ }
+ }
+ // stylelint-enable
+}
+
+// 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 {
+ color: $textfield-caption-color;
+ display: block;
+ font-size: $font-size-caption;
+ font-weight: $font-weight-caption;
+ letter-spacing: $letter-spacing-caption;
+ line-height: normal;
+ // padding-left: $textfield-box-padding-x;
+
+ &::before {
+ content: '';
+ display: inline-block;
+ height: 1rem;
+ vertical-align: 0;
+ width: 0;
+ }
+
+ [class~='textfield-box'] &,
+ [class~='textfield-box'] ~ & {
+ padding: 0 $textfield-box-padding-x;
+ }
+}
+
+// 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;
+ 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/_image.scss b/assets/scss/bootstrap/_images.scss
similarity index 56%
rename from assets/scss/bootstrap/_image.scss
rename to assets/scss/bootstrap/_images.scss
index 7c75650d3..f8e29035b 100644
--- a/assets/scss/bootstrap/_image.scss
+++ b/assets/scss/bootstrap/_images.scss
@@ -1,11 +1,21 @@
-.figure {
- display: inline-block;
+.img-fluid {
+ @include img-fluid;
}
-.figure-caption {
- @include typography-caption;
+.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);
+ */
+ @include img-fluid;
- color: $figure-caption-color;
+ box-shadow: $thumbnail-box-shadow;
+}
+
+.figure {
+ display: inline-block;
}
.figure-img {
@@ -13,12 +23,8 @@
margin-bottom: $figure-img-margin-y;
}
-.img-fluid {
- @include img-fluid;
-}
-
-.img-thumbnail {
- @include img-fluid;
+.figure-caption {
+ @include typography-caption;
- box-shadow: $thumbnail-box-shadow;
+ 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..de95aaf6e 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%);
}
}
@@ -31,9 +39,13 @@
.nav-justified {
.nav-item {
- flex-basis: 0;
- flex-grow: 1;
- text-align: center;
+ @include text-truncate;
+
+ display: flex;
+ flex: 1;
+ //flex-basis: 0;
+ //flex-grow: 1;
+ //text-align: center;
}
}
@@ -44,10 +56,12 @@
@include border-radius($nav-pills-border-radius);
@include transition-standard(background-color, color, opacity);
+ background-color: transparent;
+ border: none;
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..dd26e22bc 100644
--- a/assets/scss/bootstrap/_pagination.scss
+++ b/assets/scss/bootstrap/_pagination.scss
@@ -2,69 +2,83 @@
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;
+ min-width: $pagination-line-height * $pagination-font-size;
+ padding: 0 10px;
position: relative;
text-align: center;
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: 3;
}
- @include focus-hover {
- background-image: linear-gradient(to bottom, $btn-overlay, $btn-overlay);
+ &:focus {
+ background-color: rgba($black, $overlay-focus-white-opacity);
+ outline: 0;
}
- &.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;
+ // stylelint-disable
+ &.active .page-link {
+ background-color: theme-color(primary);
+ color: $white;
+ z-index: 3;
}
- .page-item.disabled & {
+ &.disabled .page-link {
background-color: transparent;
color: $pagination-color-disabled;
cursor: auto;
pointer-events: none;
}
+ // stylelint-enable
}
+//
+// Sizing
+//
+
.pagination-lg .page-link {
- font-size: $btn-font-size-lg;
- padding: $btn-padding-y-lg $btn-padding-x-lg;
+ border-radius: ($pagination-line-height * $pagination-font-size-lg) * 0.5;
+ 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;
+ min-width: 0;
+ width: $pagination-line-height * $pagination-font-size-sm;
}
diff --git a/assets/scss/bootstrap/_popover.scss b/assets/scss/bootstrap/_popover.scss
index 9320afda9..705c48e72 100644
--- a/assets/scss/bootstrap/_popover.scss
+++ b/assets/scss/bootstrap/_popover.scss
@@ -3,31 +3,23 @@
// 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);
- display: block;
+ box-shadow: $popover-box-shadow;
font-size: $popover-font-size;
margin: $popover-margin;
max-width: $popover-max-width;
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 +33,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/_transition.scss b/assets/scss/bootstrap/_transitions.scss
similarity index 54%
rename from assets/scss/bootstrap/_transition.scss
rename to assets/scss/bootstrap/_transitions.scss
index 9b7943244..f296e4c10 100644
--- a/assets/scss/bootstrap/_transition.scss
+++ b/assets/scss/bootstrap/_transitions.scss
@@ -1,19 +1,16 @@
-.collapse {
- display: none;
+.fade {
+ //@include transition-standard(opacity);
+ transition: opacity $transition-duration-desktop-complex $transition-timing-function-standard;
- &.show {
- display: block;
+ &:not(.show) {
+ opacity: 0;
}
}
-// 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;
+.collapse {
+ &:not(.show) {
+ display: none;
+ }
}
.collapsing {
@@ -22,14 +19,21 @@ tr.collapse.show {
height: 0;
overflow: hidden;
position: relative;
-}
-.fade {
- @include transition-standard(opacity);
-
- opacity: 0;
+ &.width {
+ @include transition-standard(width);
- &.show {
- opacity: 1;
+ height: auto;
+ width: 0;
}
}
+
+// 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-plugins.scss b/assets/scss/material-plugins.scss
new file mode 100644
index 000000000..a625b7ff7
--- /dev/null
+++ b/assets/scss/material-plugins.scss
@@ -0,0 +1,12 @@
+/*!
+ * Material themes by djibe for various plugins (standalone)
+ */
+
+@import 'colors';
+@import 'functions';
+@import 'variables';
+@import 'mixins';
+
+// Plugins
+
+@import 'plugins';
diff --git a/assets/scss/material.scss b/assets/scss/material.scss
index 4af436bb6..2afa44890 100644
--- a/assets/scss/material.scss
+++ b/assets/scss/material.scss
@@ -1,13 +1,22 @@
-@import 'colors';
+/*!
+ * Daemonite Material UI 4.6.2 - 2.0 (https://djibe.github.io/material/)
+ * Copyright 2011-2023 The Bootstrap Authors
+ * Copyright 2011-2023 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ * Material UI by djibe, Maya, Geoff Bowers and Alex Skinner
+ */
+
@import 'functions';
+@import 'colors';
@import 'mixins';
@import 'variables';
+@import 'theme';
// 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 +27,44 @@
@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/dark-theme';
+@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
diff --git a/assets/scss/material/_button-flat.scss b/assets/scss/material/_button-flat.scss
index cd7f3f5a2..d64a1ae30 100644
--- a/assets/scss/material/_button-flat.scss
+++ b/assets/scss/material/_button-flat.scss
@@ -1,36 +1,81 @@
+// 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'],
+.btn-link,
+.card-link,
+.modal .btn {
+ padding: $btn-padding-y $btn-flat-padding-x;
+}
+
[class*='btn-outline'] {
- background-color: transparent;
- box-shadow: none;
+ border: 1px solid currentColor;
+ padding: $btn-padding-y calc(#{$btn-padding-x} - 1px);
- &.active,
- &:active {
- box-shadow: none;
+ &:disabled,
+ &.disabled {
+ border-color: $btn-color-disabled;
}
+}
- &.disabled,
- &:disabled {
- background-color: transparent;
+[class*='btn-flat'],
+[class*='btn-outline'],
+.btn-link,
+.card-link,
+.modal .btn {
+ background-color: transparent;
+ box-shadow: none;
+
+ @include hover-focus-active {
+ box-shadow: inherit;
}
}
-@each $color, $values in $theme-colors {
+@each $color,
+ $values in $theme-colors {
.btn-flat-#{$color},
- .btn-outline-#{$color} {
- @include plain-active-focus-hover {
- color: theme-color($color);
+ .btn-outline-#{$color},
+ .modal .btn-#{$color} {
+ @if ($color !='dark') {
+ @include plain-hover-focus {
+ color: theme-color($color);
+ }
+ }
+
+ @if ($color !='dark' and $color !='light') {
+ &:hover {
+ background-image: linear-gradient(to bottom, rgba(theme-color($color), $overlay-hover-white-opacity), rgba(theme-color($color), $overlay-hover-white-opacity));
+ }
+
+ &:focus {
+ background-image: linear-gradient(to bottom, rgba(theme-color($color), $overlay-focus-white-opacity), rgba(theme-color($color), $overlay-focus-white-opacity));
+ }
+
+ // stylelint-disable-next-line
+ @if not $enable-ripple {
+ &:active {
+ background-image: linear-gradient(to bottom, rgba(theme-color($color), $overlay-pressed-white-opacity), rgba(theme-color($color), $overlay-pressed-white-opacity));
+ }
+ }
}
- &.disabled,
- &:disabled {
+ &:disabled,
+ &.disabled {
color: $btn-color-disabled;
}
}
}
+.btn-link,
+.card-link {
+ @extend .btn-flat-primary;
+}
+
+/*
.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 +84,35 @@
background-color: $btn-bg-active-inverse;
}
}
+*/
+
+// Btn-icon addition
+.btn-icon {
+ border-radius: 50%;
+ box-shadow: none;
+ color: initial;
+ fill: currentColor;
+ font-size: 1.5rem;
+ height: $btn-icon-width;
+ min-width: 0;
+ padding: 0;
+ transition: background-color 15ms linear;
+ width: $btn-icon-width;
+
+ &.btn-sm {
+ height: $btn-icon-width-sm;
+ width: $btn-icon-width-sm;
+ }
+
+ &.btn-xs {
+ height: $btn-icon-width-xs;
+ width: $btn-icon-width-xs;
+ }
+
+ &:hover,
+ &:focus,
+ &:active {
+ box-shadow: none;
+ color: initial;
+ }
+}
diff --git a/assets/scss/material/_button-float.scss b/assets/scss/material/_button-float.scss
index b91500432..e855f6c0d 100644
--- a/assets/scss/material/_button-float.scss
+++ b/assets/scss/material/_button-float.scss
@@ -1,22 +1,55 @@
+// 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;
- &.active,
- &:active {
+ &:hover {
+ box-shadow: map-get($btn-float-elevation-shadow-hover, shadow);
+ }
+
+ &:active,
+ &.active {
box-shadow: map-get($btn-float-elevation-shadow-active, shadow);
}
- &.disabled,
- &:disabled {
+ &:disabled,
+ &.disabled {
box-shadow: none;
}
+ svg {
+ fill: currentColor;
+ }
+
+ // Extended FAB
+ // stylelint-disable order/order, selector-no-qualifying-type
+ &-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;
+
+ i,
+ svg,
+ [class*='material-icons'] {
+ margin-right: 0.75rem;
+ margin-left: -$spacer-sm;
+
+ &[class*='order-'] {
+ margin-right: -$spacer-sm;
+ margin-left: 0.75rem;
+ }
+ }
+ }
+ // stylelint-enable order/order, selector-no-qualifying-type
+
&.btn-sm {
height: $btn-float-size-sm;
line-height: $btn-float-size-sm;
@@ -45,3 +78,23 @@
}
}
}
+
+.fab-actions {
+ align-items: flex-end;
+ display: flex;
+ flex-direction: column;
+ position: fixed;
+ right: $spacer-lg;
+ bottom: $spacer-lg;
+ z-index: map-get(map-get($elevation-shadows, 12), elevation);
+
+ @media print {
+ & {
+ display: none;
+ }
+ }
+
+ & > .btn {
+ margin-top: 1.25rem;
+ }
+}
diff --git a/assets/scss/material/_button-group.scss b/assets/scss/material/_button-group.scss
index 993f30fd9..6d1625fe3 100644
--- a/assets/scss/material/_button-group.scss
+++ b/assets/scss/material/_button-group.scss
@@ -1,14 +1,18 @@
+// TODO : btn-group disabled
+
.btn-group,
.btn-group-vertical {
@include border-radius($btn-border-radius);
background-color: $btn-group-bg;
+ //border: 1px solid $black-divider;
box-shadow: map-get($btn-elevation-shadow, shadow);
display: inline-flex;
position: relative;
- vertical-align: middle;
+ //vertical-align: middle;
- @each $color, $values in $theme-colors {
+ @each $color,
+ $values in $theme-colors {
> .btn-#{$color} {
&.disabled,
&:disabled {
@@ -19,35 +23,49 @@
}
> .btn {
- @include transition-standard(border-color, opacity);
+ // @include transition-standard(opacity);
box-shadow: none;
- flex: 0 1 auto;
+ flex: 1 1 auto;
min-width: 0;
+ padding-right: $btn-group-padding-x;
+ padding-left: $btn-group-padding-x;
+ position: relative;
+
+ &:hover,
+ &:focus,
+ &:active,
+ &.active {
+ z-index: 1;
+ }
- &.active,
- &:active {
- box-shadow: none;
+ &:active,
+ &.active {
+ background-color: rgba($black, $overlay-activated-white-opacity);
}
- &.disabled,
- &:disabled {
+ &:disabled,
+ &.disabled {
opacity: $btn-group-toggle-opacity;
}
+ // stylelint-disable
&[class*='btn-outline'] {
- opacity: $btn-group-toggle-opacity;
+ border: 0;
+ //opacity: $btn-group-toggle-opacity;
&.active,
&:active {
- opacity: 1;
+ background-color: rgba($black, $overlay-activated-white-opacity);
+ //opacity: 1;
}
&.disabled,
&:disabled {
- opacity: 1;
+ //opacity: 1;
}
}
+ // stylelint-enable
}
> .btn-group,
@@ -60,7 +78,7 @@
}
.btn-group {
- &.show > .btn.dropdown-toggle {
+ &.show > .dropdown-toggle {
box-shadow: none;
}
@@ -103,6 +121,7 @@
margin-top: 0;
}
+ // Reset rounded corners
> .btn:not(:first-child),
> .btn-group:not(:first-child) > .btn {
@include border-top-radius(0);
@@ -115,19 +134,19 @@
}
}
-.btn-group-fluid {
+/* .btn-group-fluid {
background-color: transparent;
box-shadow: none;
+} */
+
+.btn-group-sm > .btn {
+ @extend %btn-sm;
}
.btn-group-lg > .btn {
@extend %btn-lg;
}
-.btn-group-sm > .btn {
- @extend %btn-sm;
-}
-
// Checkbox and radio options
[data-toggle='buttons'] {
@@ -144,25 +163,16 @@
}
}
-// Split button dropdown
-
-.dropdown-toggle.dropdown-toggle-split {
- padding-right: $caret-spacer-x;
- padding-left: $caret-spacer-x;
-
- &::after {
- margin-right: 0;
- margin-left: 0;
- }
-
- .dropleft & {
- &::before {
- margin-right: 0;
- margin-left: 0;
- }
- }
+/* .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 +184,19 @@
width: auto;
}
}
+
+// Checkbox and radio options
+
+.btn-group-toggle {
+ > .btn,
+ > .btn-group > .btn {
+ margin-bottom: 0; // Override default ` | 
## Table of contents
- [Content](#content)
-- [Documentation](#documentation)
-- [Quick start](#quick-start)
++ [Running Documentation Locally](#running-documentation-locally)
+ + [End-Of-Line Issue Fix](#end-of-line-fix)
+ - [Command Notes](#command-notes)
+ * [Quick start](#quick-start)
## Content
-Within the download you will find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:
+Within this repository context, you will find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:
```
-daemonite-material/
+djibe-material/
├── css/
│ ├── material.css
│ ├── material.css.map
│ ├── material.min.css
-│ └── material.min.css.map
+│ ├── material.min.css.map
+| ├── material-plugins.css
+│ ├── material-plugins.css.map
+│ ├── material-plugins.min.css
+│ └── material-plugins.min.css.map
└── js/
├── material.js
├── material.js.map
@@ -39,12 +51,14 @@ daemonite-material/
└── material.min.js.map
```
-We provide compiled CSS and JavaScript (`material.*`), as well as compiled and minified CSS and JavaScript (`material.min.*`). CSS and JavaScript source maps (`material.*.map`) are available for use with certain browsers' developer tools.
+We provide compiled CSS and JavaScript (`material.*`), as well as compiled and minified CSS and JavaScript (`material.min.*`). CSS and JavaScript source maps (`material.*.map`) are also available for use with certain browsers' developer tools.
-The Material source code download includes the precompiled CSS and JavaScript, along with documentation and source assets. More specifically, it includes the following and more:
+`material-plugins.css` is an addon containing suitable style for the Plugins (see doc's Plugin section).
+
+The Material 2 source code download includes the precompiled CSS and JavaScript, along with documentation and source assets. More specifically, it includes the following and more:
```
-daemonite-material/
+djibe-material/
├── assets/
│ ├── js/
│ └── scss/
@@ -52,9 +66,13 @@ daemonite-material/
│ ├── material.css
│ ├── material.css.map
│ ├── material.min.css
-│ └── material.min.css.map
+│ ├── material.min.css.map
+│ ├── material-plugins.css
+│ ├── material-plugins.css.map
+│ ├── material-plugins.min.css
+│ └── material-plugins.min.css.map
├── docs/
-│ └── 4.1/
+│ └── 4.6/
└── js/
├── material.js
├── material.js.map
@@ -64,21 +82,36 @@ daemonite-material/
## Documentation
-Material's documentation, included in this repo in the root directory, is built with [Jekyll](https://jekyllrb.com/) and publicly hosted on GitHub Pages at