From 9d8030c6c872cebe44b3e33efaf87e79a3caf219 Mon Sep 17 00:00:00 2001 From: MAYA Date: Mon, 12 Feb 2018 13:39:49 +1100 Subject: [PATCH 001/117] Update stylelint config to add new properties --- build/.stylelintrc | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/build/.stylelintrc b/build/.stylelintrc index e2a2258a1..213cbf32b 100644 --- a/build/.stylelintrc +++ b/build/.stylelintrc @@ -154,12 +154,16 @@ "column-fill", "column-gap", "column-rule", + "column-rule-color", + "column-rule-style", + "column-rule-width", "column-span", "column-width", "content", "counter-increment", "counter-reset", "cursor", + "direction", "display", "empty-cells", "fill", @@ -217,6 +221,7 @@ "nav-left", "opacity", "order", + "orphans", "outline", "outline-color", "outline-offset", @@ -230,6 +235,8 @@ "padding-right", "padding-bottom", "padding-left", + "page-break-after", + "page-break-before", "page-break-inside", "perspective", "perspective-origin", @@ -277,11 +284,13 @@ "transition-duration", "transition-property", "transition-timing-function", + "unicode-bidi", "user-select", "vertical-align", "visibility", "white-space", "width", + "windows", "word-break", "word-spacing", "word-wrap", From 32730d4b0584982096d880aec96eee0c4e616445 Mon Sep 17 00:00:00 2001 From: MAYA Date: Mon, 12 Feb 2018 13:52:27 +1100 Subject: [PATCH 002/117] Update `.sr-only` mixin and utility --- assets/scss/mixins/_screenreader.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/assets/scss/mixins/_screenreader.scss b/assets/scss/mixins/_screenreader.scss index f4d1931ca..b8d5bcd15 100644 --- a/assets/scss/mixins/_screenreader.scss +++ b/assets/scss/mixins/_screenreader.scss @@ -1,7 +1,6 @@ @mixin sr-only { border: 0; clip: rect(0, 0, 0, 0); - clip-path: inset(50%); height: 1px; overflow: hidden; padding: 0; @@ -14,7 +13,6 @@ &:active, &:focus { clip: auto; - clip-path: none; height: auto; overflow: visible; position: static; From 535a418878116f5888ca8cf0f57f8a6cd8b761de Mon Sep 17 00:00:00 2001 From: MAYA Date: Mon, 12 Feb 2018 14:04:06 +1100 Subject: [PATCH 003/117] Set colour to `.form-control-plaintext` --- assets/scss/material/_text-field.scss | 1 + assets/scss/variables/_variable-material.scss | 1 + 2 files changed, 2 insertions(+) diff --git a/assets/scss/material/_text-field.scss b/assets/scss/material/_text-field.scss index 3a2cb5f2d..5809e7b03 100644 --- a/assets/scss/material/_text-field.scss +++ b/assets/scss/material/_text-field.scss @@ -149,6 +149,7 @@ textarea { @include form-control-size($textfield-font-size, $textfield-height, $textfield-line-height, $textfield-padding-x, $textfield-padding-y); border-color: transparent; + color: $textfield-plaintext-color; display: block; width: 100%; diff --git a/assets/scss/variables/_variable-material.scss b/assets/scss/variables/_variable-material.scss index 343467188..c86a85110 100644 --- a/assets/scss/variables/_variable-material.scss +++ b/assets/scss/variables/_variable-material.scss @@ -357,6 +357,7 @@ $textfield-color-disabled: $black-hint !default; $textfield-hint-color: $black-hint !default; $textfield-line-height: $line-height-base !default; $textfield-margin-x: $spacer !default; +$textfield-plaintext-color: $body-color !default; $textfield-font-size: 1rem !default; $textfield-font-size-lg: 2.125rem !default; From efbf59d6bcc7e655e9c4298a7d71353d848f853b Mon Sep 17 00:00:00 2001 From: MAYA Date: Mon, 12 Feb 2018 14:08:09 +1100 Subject: [PATCH 004/117] Update theming docs for how to remove from map --- docs/4.0/getting-started/theming.md | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/docs/4.0/getting-started/theming.md b/docs/4.0/getting-started/theming.md index 074179472..b858accf2 100644 --- a/docs/4.0/getting-started/theming.md +++ b/docs/4.0/getting-started/theming.md @@ -274,10 +274,24 @@ Classes such as `mb-5` will then set `margin-bottom` to be `5rem` instead of the #### Remove from map -To remove an item from a map, use `map-remove`: +To remove an item from a map, use `map-remove`. Be aware you must insert it between our requirements and options: {% highlight scss %} +// Required +@import "node_modules/daemonite-material/assets/scss/colours"; +@import "node_modules/daemonite-material/assets/scss/functions"; +@import "node_modules/daemonite-material/assets/scss/mixins"; +@import "node_modules/daemonite-material/assets/scss/variables"; + $theme-colors: map-remove($theme-colors, "info"); + +// Optional +@import "node_modules/daemonite-material/assets/scss/base/base"; +@import "node_modules/daemonite-material/assets/scss/base/grid"; +@import "node_modules/daemonite-material/assets/scss/base/typography"; +@import "node_modules/daemonite-material/assets/scss/material/button"; +@import "node_modules/daemonite-material/assets/scss/material/card"; +@import "node_modules/daemonite-material/assets/scss/material/text-field"; {% endhighlight %} However, please be aware that Material assumes the presence of some specific keys within Sass maps. As you customise the included maps, you may encounter errors where a specific Sass map's key is being used. From 94d38d2ba00051963eb706fb2565b4e99210127d Mon Sep 17 00:00:00 2001 From: MAYA Date: Mon, 12 Feb 2018 14:25:35 +1100 Subject: [PATCH 005/117] Linting of default global variables --- assets/scss/_colors.scss | 2 ++ assets/scss/utilities/_position.scss | 1 + assets/scss/variables/_palette.scss | 1 + assets/scss/variables/_spacer.scss | 2 ++ build/.stylelintrc | 6 ++++++ package-lock.json | 8 ++++---- package.json | 2 +- 7 files changed, 17 insertions(+), 5 deletions(-) diff --git a/assets/scss/_colors.scss b/assets/scss/_colors.scss index 5e7f261ca..ce5342027 100644 --- a/assets/scss/_colors.scss +++ b/assets/scss/_colors.scss @@ -274,6 +274,7 @@ $material-color-yellow-a200: #ffff00 !default; $material-color-yellow-a400: #ffea00 !default; $material-color-yellow-a700: #ffd600 !default; +// stylelint-disable scss/dollar-variable-default $ambers: () !default; $ambers: map-merge( ( @@ -686,6 +687,7 @@ $colors: map-merge( ), $colors ); +// stylelint-enable // Black and white // Based on https://material.google.com/style/color.html#color-text-background-colors diff --git a/assets/scss/utilities/_position.scss b/assets/scss/utilities/_position.scss index 377e016a2..f3550e0ba 100644 --- a/assets/scss/utilities/_position.scss +++ b/assets/scss/utilities/_position.scss @@ -2,6 +2,7 @@ // Common values +// stylelint-disable-next-line scss/dollar-variable-default $positions: absolute, fixed, relative, static, sticky; @each $position in $positions { diff --git a/assets/scss/variables/_palette.scss b/assets/scss/variables/_palette.scss index 90aec8ea0..99a93cf95 100644 --- a/assets/scss/variables/_palette.scss +++ b/assets/scss/variables/_palette.scss @@ -50,6 +50,7 @@ $light: ( ) !default; $theme-colors: () !default; +// stylelint-disable-next-line scss/dollar-variable-default $theme-colors: map-merge( ( 'primary': $primary, diff --git a/assets/scss/variables/_spacer.scss b/assets/scss/variables/_spacer.scss index e776d6401..bbe1897be 100644 --- a/assets/scss/variables/_spacer.scss +++ b/assets/scss/variables/_spacer.scss @@ -4,6 +4,7 @@ $border-radius: 2px !default; $border-width: 1px !default; $sizes: () !default; +// stylelint-disable-next-line scss/dollar-variable-default $sizes: map-merge( ( 25: 25%, @@ -23,6 +24,7 @@ $spacer-lg: ($spacer * 1.5) !default; $spacer-xl: ($spacer * 3) !default; $spacers: () !default; +// stylelint-disable-next-line scss/dollar-variable-default $spacers: map-merge( ( 0: 0, diff --git a/build/.stylelintrc b/build/.stylelintrc index 213cbf32b..53173a2a3 100644 --- a/build/.stylelintrc +++ b/build/.stylelintrc @@ -298,6 +298,12 @@ "zoom" ], "property-no-vendor-prefix": true, + "scss/dollar-variable-default": [ + true, + { + "ignore": "local" + } + ], "selector-attribute-quotes": "always", "selector-list-comma-newline-before": "never-multi-line", "selector-list-comma-space-after": "always-single-line", diff --git a/package-lock.json b/package-lock.json index a2ee5a1f6..f99310a65 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "daemonite-material", - "version": "4.0.0-beta", + "version": "4.0.0", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -8512,9 +8512,9 @@ } }, "stylelint-scss": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-2.2.0.tgz", - "integrity": "sha512-O3jIpujSDrMHlGoXT3AYsOz2DPb49Y+0rCPGU34BHrbMBWSciwkvtm4WFrYi/cDnbpkXFemC0lHwmtspK8IQEA==", + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-2.3.0.tgz", + "integrity": "sha512-gYLw1jma/BUZ9eQ3hsrL/7bddQN2BJ13oSp0A0kOqje4hBrSCrUjf7rmpnK8taRWoU3KASwMo4apWg+YopDK5Q==", "dev": true, "requires": { "lodash": "4.17.4", diff --git a/package.json b/package.json index 4294e505e..49b0c01f6 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,7 @@ "stylelint-config-recommended-scss": "^3.0.0", "stylelint-config-standard": "^18.0.0", "stylelint-order": "^0.8.0", - "stylelint-scss": "^2.2.0", + "stylelint-scss": "^2.3.0", "uglify-js": "^3.3.9" }, "engines": { From 233a84b421c8859ce6c686e366e84d6437d26def Mon Sep 17 00:00:00 2001 From: MAYA Date: Mon, 12 Feb 2018 14:44:27 +1100 Subject: [PATCH 006/117] Update jQuery to v3.3.1 --- _config.yml | 4 ++-- docs/4.0/examples/navdrawer-default.html | 2 +- docs/4.0/examples/navdrawer-permanent-clipped.html | 2 +- docs/4.0/examples/navdrawer-permanent-float-card.html | 2 +- docs/4.0/examples/navdrawer-permanent-float.html | 2 +- docs/4.0/examples/navdrawer-permanent.html | 2 +- docs/4.0/examples/navdrawer-persistent.html | 2 +- docs/4.0/examples/navdrawer-right.html | 2 +- docs/4.0/examples/navdrawer-temporary.html | 2 +- 9 files changed, 10 insertions(+), 10 deletions(-) diff --git a/_config.yml b/_config.yml index 7fa1dbead..f22c1b4ed 100644 --- a/_config.yml +++ b/_config.yml @@ -51,8 +51,8 @@ bs_css_docs: "https://getbootstrap.com/assets/css/docs.min.css" bs_js: "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" bs_js_docs: "https://getbootstrap.com/assets/js/docs.min.js" - jquery: "https://code.jquery.com/jquery-3.2.1.slim.min.js" - jquery_hash: "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" + jquery: "https://code.jquery.com/jquery-3.3.1.slim.min.js" + jquery_hash: "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" md_font: "https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i" md_icon: "https://fonts.googleapis.com/icon?family=Material+Icons" popper: "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" diff --git a/docs/4.0/examples/navdrawer-default.html b/docs/4.0/examples/navdrawer-default.html index 6be3961fb..1ebff846d 100644 --- a/docs/4.0/examples/navdrawer-default.html +++ b/docs/4.0/examples/navdrawer-default.html @@ -62,7 +62,7 @@ - + diff --git a/docs/4.0/examples/navdrawer-permanent-clipped.html b/docs/4.0/examples/navdrawer-permanent-clipped.html index cf76f7717..b687c7b38 100644 --- a/docs/4.0/examples/navdrawer-permanent-clipped.html +++ b/docs/4.0/examples/navdrawer-permanent-clipped.html @@ -44,7 +44,7 @@ - + diff --git a/docs/4.0/examples/navdrawer-permanent-float-card.html b/docs/4.0/examples/navdrawer-permanent-float-card.html index 04e00ea75..992f8564b 100644 --- a/docs/4.0/examples/navdrawer-permanent-float-card.html +++ b/docs/4.0/examples/navdrawer-permanent-float-card.html @@ -46,7 +46,7 @@ - + diff --git a/docs/4.0/examples/navdrawer-permanent-float.html b/docs/4.0/examples/navdrawer-permanent-float.html index af9f07c86..a3c6790a1 100644 --- a/docs/4.0/examples/navdrawer-permanent-float.html +++ b/docs/4.0/examples/navdrawer-permanent-float.html @@ -44,7 +44,7 @@ - + diff --git a/docs/4.0/examples/navdrawer-permanent.html b/docs/4.0/examples/navdrawer-permanent.html index d0f3f2c05..a62409d70 100644 --- a/docs/4.0/examples/navdrawer-permanent.html +++ b/docs/4.0/examples/navdrawer-permanent.html @@ -59,7 +59,7 @@ - + diff --git a/docs/4.0/examples/navdrawer-persistent.html b/docs/4.0/examples/navdrawer-persistent.html index 590c65744..1832d8537 100644 --- a/docs/4.0/examples/navdrawer-persistent.html +++ b/docs/4.0/examples/navdrawer-persistent.html @@ -51,7 +51,7 @@ - + diff --git a/docs/4.0/examples/navdrawer-right.html b/docs/4.0/examples/navdrawer-right.html index abdeceb58..262c96a95 100644 --- a/docs/4.0/examples/navdrawer-right.html +++ b/docs/4.0/examples/navdrawer-right.html @@ -62,7 +62,7 @@ - + diff --git a/docs/4.0/examples/navdrawer-temporary.html b/docs/4.0/examples/navdrawer-temporary.html index 2b9912e81..b78c63b56 100644 --- a/docs/4.0/examples/navdrawer-temporary.html +++ b/docs/4.0/examples/navdrawer-temporary.html @@ -51,7 +51,7 @@ - + From 272d95cc7e48b43d5e44561795f9de02cf1b5dfa Mon Sep 17 00:00:00 2001 From: MAYA Date: Tue, 13 Feb 2018 09:13:15 +1100 Subject: [PATCH 007/117] Add `integrity` attribute --- _config.yml | 2 ++ _includes/footer.html | 6 +++--- docs/4.0/examples/navdrawer-default.html | 6 +++--- docs/4.0/examples/navdrawer-permanent-clipped.html | 6 +++--- docs/4.0/examples/navdrawer-permanent-float-card.html | 6 +++--- docs/4.0/examples/navdrawer-permanent-float.html | 6 +++--- docs/4.0/examples/navdrawer-permanent.html | 6 +++--- docs/4.0/examples/navdrawer-persistent.html | 6 +++--- docs/4.0/examples/navdrawer-right.html | 6 +++--- docs/4.0/examples/navdrawer-temporary.html | 6 +++--- 10 files changed, 29 insertions(+), 27 deletions(-) diff --git a/_config.yml b/_config.yml index f22c1b4ed..5b25ba0ed 100644 --- a/_config.yml +++ b/_config.yml @@ -49,8 +49,10 @@ cdn: bs_css: "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" bs_css_docs: "https://getbootstrap.com/assets/css/docs.min.css" + bs_css_hash: "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" bs_js: "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" bs_js_docs: "https://getbootstrap.com/assets/js/docs.min.js" + bs_js_hash: "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" jquery: "https://code.jquery.com/jquery-3.3.1.slim.min.js" jquery_hash: "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" md_font: "https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i" diff --git a/_includes/footer.html b/_includes/footer.html index 6b1286855..b3d137b15 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -1,7 +1,7 @@ - - - + + + diff --git a/docs/4.0/examples/navdrawer-default.html b/docs/4.0/examples/navdrawer-default.html index 1ebff846d..f64737ecc 100644 --- a/docs/4.0/examples/navdrawer-default.html +++ b/docs/4.0/examples/navdrawer-default.html @@ -62,9 +62,9 @@ - - - + + + diff --git a/docs/4.0/examples/navdrawer-permanent-clipped.html b/docs/4.0/examples/navdrawer-permanent-clipped.html index b687c7b38..f05ee277b 100644 --- a/docs/4.0/examples/navdrawer-permanent-clipped.html +++ b/docs/4.0/examples/navdrawer-permanent-clipped.html @@ -44,9 +44,9 @@ - - - + + + diff --git a/docs/4.0/examples/navdrawer-permanent-float-card.html b/docs/4.0/examples/navdrawer-permanent-float-card.html index 992f8564b..7edb6fe13 100644 --- a/docs/4.0/examples/navdrawer-permanent-float-card.html +++ b/docs/4.0/examples/navdrawer-permanent-float-card.html @@ -46,9 +46,9 @@ - - - + + + diff --git a/docs/4.0/examples/navdrawer-permanent-float.html b/docs/4.0/examples/navdrawer-permanent-float.html index a3c6790a1..46e89837c 100644 --- a/docs/4.0/examples/navdrawer-permanent-float.html +++ b/docs/4.0/examples/navdrawer-permanent-float.html @@ -44,9 +44,9 @@ - - - + + + diff --git a/docs/4.0/examples/navdrawer-permanent.html b/docs/4.0/examples/navdrawer-permanent.html index a62409d70..6b8d43eb4 100644 --- a/docs/4.0/examples/navdrawer-permanent.html +++ b/docs/4.0/examples/navdrawer-permanent.html @@ -59,9 +59,9 @@ - - - + + + diff --git a/docs/4.0/examples/navdrawer-persistent.html b/docs/4.0/examples/navdrawer-persistent.html index 1832d8537..4bcd3deeb 100644 --- a/docs/4.0/examples/navdrawer-persistent.html +++ b/docs/4.0/examples/navdrawer-persistent.html @@ -51,9 +51,9 @@ - - - + + + diff --git a/docs/4.0/examples/navdrawer-right.html b/docs/4.0/examples/navdrawer-right.html index 262c96a95..7a7cd27ac 100644 --- a/docs/4.0/examples/navdrawer-right.html +++ b/docs/4.0/examples/navdrawer-right.html @@ -62,9 +62,9 @@ - - - + + + diff --git a/docs/4.0/examples/navdrawer-temporary.html b/docs/4.0/examples/navdrawer-temporary.html index b78c63b56..b32676bda 100644 --- a/docs/4.0/examples/navdrawer-temporary.html +++ b/docs/4.0/examples/navdrawer-temporary.html @@ -51,9 +51,9 @@ - - - + + + From dde03984a6538977cb9efa47ed67882d20f58d5f Mon Sep 17 00:00:00 2001 From: MAYA Date: Tue, 13 Feb 2018 12:12:21 +1100 Subject: [PATCH 008/117] Update `bower.json` --- bower.json | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/bower.json b/bower.json index 23d2c85f5..f6763c7df 100644 --- a/bower.json +++ b/bower.json @@ -1,15 +1,12 @@ { "name": "daemonite-material", "authors": "Daemon Pty Ltd", - "dependencies": { - "jquery": "^3.0.0", - "popper.js": "^1.12.3" - }, "description": "Daemonite's Material UI is a cross-platform and fully responsive front-end interface based on Google Material Design developed using Bootstrap 4.", "homepage": "http://daemonite.github.io/material/", "ignore": [ "**/.*", "bower_components", + "gh-pages", "node_modules" ], "keywords": [ @@ -28,6 +25,10 @@ "js/material.js" ], "moduleType": "globals", + "peerDependencies": { + "jquery": "1.9.1 - 3", + "pickadate": "^3.5.6" + }, "repository": { "type": "git", "url": "https://github.com/Daemonite/material.git" From 8691c392c1e4e3aba4a96d603e4fec12d122d343 Mon Sep 17 00:00:00 2001 From: MAYA Date: Tue, 13 Feb 2018 12:18:02 +1100 Subject: [PATCH 009/117] Add `.custom-range` based on slider's styles --- assets/scss/material.scss | 1 + assets/scss/material/_slider.scss | 157 ++++++++++++++++++ assets/scss/variables/_variable-material.scss | 10 ++ 3 files changed, 168 insertions(+) create mode 100644 assets/scss/material/_slider.scss diff --git a/assets/scss/material.scss b/assets/scss/material.scss index 8cf689b3d..7bd8be813 100644 --- a/assets/scss/material.scss +++ b/assets/scss/material.scss @@ -47,6 +47,7 @@ @import 'material/progress'; @import 'material/progress-circular'; @import 'material/selection-control'; +@import 'material/slider'; @import 'material/stepper'; @import 'material/tab'; @import 'material/text-field'; diff --git a/assets/scss/material/_slider.scss b/assets/scss/material/_slider.scss new file mode 100644 index 000000000..358ce38f7 --- /dev/null +++ b/assets/scss/material/_slider.scss @@ -0,0 +1,157 @@ +.custom-range { + appearance: none; + background-color: transparent; + padding-left: 0; + width: 100%; + + &:active, + &:focus { + &::-moz-range-track { + background-color: $slider-track-bg-active; + } + + &::-ms-fill-upper { + background-color: $slider-track-bg-active; + } + + &::-webkit-slider-runnable-track { + background-color: $slider-track-bg-active; + } + } + + &:focus { + outline: 0; + + &::-moz-range-thumb { + box-shadow: 0 0 0 $slider-thumb-size hex-to-rgba($slider-thumb-bg, $slider-thumb-radial-opacity); + } + + &::-ms-range-thumb { + box-shadow: 0 0 0 $slider-thumb-size hex-to-rgba($slider-thumb-bg, $slider-thumb-radial-opacity); + } + + &::-webkit-slider-thumb { + box-shadow: 0 0 0 $slider-thumb-size hex-to-rgba($slider-thumb-bg, $slider-thumb-radial-opacity); + } + } + + &::-moz-focus-outer { + border: 0; + } + + &::-moz-range-progress { + background-color: $slider-thumb-bg; + } + + &::-moz-range-thumb { + @include transition-standard(box-shadow, height, width); + + appearance: none; + background-color: $slider-thumb-bg; + border: 0; + border-radius: 50%; + height: $slider-thumb-size; + width: $slider-thumb-size; + + &:active { + box-shadow: none; + height: ($slider-thumb-size * 2); + width: ($slider-thumb-size * 2); + } + + &:focus { + outline: 0; + } + } + + &::-moz-range-track { + @include transition-standard(background-color); + + background-color: $slider-track-bg; + border-color: transparent; + border-radius: 0; + color: transparent; + cursor: pointer; + height: $slider-track-height; + width: 100%; + } + + &::-ms-fill-lower { + background-color: $slider-thumb-bg; + height: $slider-track-height; + margin-bottom: $slider-track-height; + margin-left: ($slider-thumb-size / 2); + } + + &::-ms-fill-upper { + background-color: $slider-track-bg; + height: $slider-track-height; + margin-right: ($slider-thumb-size / 2); + margin-bottom: $slider-track-height; + } + + &::-ms-thumb { + @include transition-standard(box-shadow); + + appearance: none; + background-color: $slider-thumb-bg; + border: 0; + border-radius: 50%; + height: $slider-thumb-size; + margin-right: ($slider-thumb-size / 2); + margin-left: ($slider-thumb-size / 2); + width: $slider-thumb-size; + + &:active { + box-shadow: 0 0 0 ($slider-thumb-size / 2) $slider-thumb-bg; + } + + &:focus { + outline: 0; + } + } + + &::-ms-track { + @include transition-standard(background-color); + + background-color: transparent; + border-color: transparent; + border-width: ($slider-thumb-size + $slider-track-height) 0; + color: transparent; + cursor: pointer; + height: $slider-track-height; + width: 100%; + } + + &::-webkit-slider-runnable-track { + @include transition-standard(background-color); + + background-color: $slider-track-bg; + border-color: transparent; + border-radius: 0; + color: transparent; + cursor: pointer; + height: $slider-track-height; + width: 100%; + } + + &::-webkit-slider-thumb { + @include transition-standard(box-shadow); + + appearance: none; + background-color: $slider-thumb-bg; + border: 0; + border-radius: 50%; + height: $slider-thumb-size; + margin-top: (($slider-thumb-size - $slider-track-height) / -2); + width: $slider-thumb-size; + + &:active { + box-shadow: 0 0 0 ($slider-thumb-size / 2) $slider-thumb-bg; + } + + &:focus { + outline: 0; + } + } +} diff --git a/assets/scss/variables/_variable-material.scss b/assets/scss/variables/_variable-material.scss index c86a85110..fe4b286bd 100644 --- a/assets/scss/variables/_variable-material.scss +++ b/assets/scss/variables/_variable-material.scss @@ -304,6 +304,16 @@ $selection-control-track-bg-disabled: $black-divider !default; $selection-control-track-height: 1rem !default; $selection-control-track-width: ($selection-control-indicator-size * 2) !default; +// Slider (Bootstrap custom form control) +// Based on https://material.io/guidelines/components/sliders.html#sliders-continuous-slider + +$slider-thumb-bg: theme-color(primary) !default; +$slider-thumb-radial-opacity: $black-divider-opacity !default; +$slider-thumb-size: ($material-icon-size / 2) !default; +$slider-track-bg: rgba(0, 0, 0, 0.26) !default; +$slider-track-bg-active: rgba(0, 0, 0, 0.38) !default; +$slider-track-height: 0.125rem !default; + // Stepper // Based on https://material.google.com/components/steppers.html#steppers-specs From 14814653b19d4cf26871382ed61ad31c55122cd1 Mon Sep 17 00:00:00 2001 From: MAYA Date: Tue, 13 Feb 2018 16:27:10 +1100 Subject: [PATCH 010/117] Add `$popover-breakpoint` and `$tooltip-breakpoint` vars --- assets/scss/bootstrap/_popover.scss | 2 +- assets/scss/material/_tooltip.scss | 4 ++-- assets/scss/variables/_variable-bootstrap.scss | 1 + assets/scss/variables/_variable-material.scss | 1 + 4 files changed, 5 insertions(+), 3 deletions(-) diff --git a/assets/scss/bootstrap/_popover.scss b/assets/scss/bootstrap/_popover.scss index 28bb55ec7..adffcd033 100644 --- a/assets/scss/bootstrap/_popover.scss +++ b/assets/scss/bootstrap/_popover.scss @@ -44,7 +44,7 @@ // Desktop -@include media-breakpoint-up(md) { +@include media-breakpoint-up($popover-breakpoint) { .popover { margin: $popover-margin-desktop; } diff --git a/assets/scss/material/_tooltip.scss b/assets/scss/material/_tooltip.scss index 440b3ad25..8df5cba19 100644 --- a/assets/scss/material/_tooltip.scss +++ b/assets/scss/material/_tooltip.scss @@ -10,7 +10,7 @@ word-break: break-word; z-index: $tooltip-zindex; - @include media-breakpoint-up(md) { + @include media-breakpoint-up($tooltip-breakpoint) { font-size: $tooltip-font-size-desktop; margin: $tooltip-margin-desktop; } @@ -34,7 +34,7 @@ text-align: center; transform: scale($tooltip-scale); - @include media-breakpoint-up(md) { + @include media-breakpoint-up($tooltip-breakpoint) { padding: $tooltip-padding-y-desktop $tooltip-padding-x-desktop; } } diff --git a/assets/scss/variables/_variable-bootstrap.scss b/assets/scss/variables/_variable-bootstrap.scss index 25db8db9d..8ac4d8209 100644 --- a/assets/scss/variables/_variable-bootstrap.scss +++ b/assets/scss/variables/_variable-bootstrap.scss @@ -172,6 +172,7 @@ $pagination-padding-y: 0.625rem !default; $popover-bg: $white !default; $popover-border-radius: $border-radius !default; +$popover-breakpoint: md !default; $popover-elevation-shadow: $elevation-shadow-24dp !default; $popover-font-size: $font-size-base !default; $popover-margin: 1.5rem !default; diff --git a/assets/scss/variables/_variable-material.scss b/assets/scss/variables/_variable-material.scss index fe4b286bd..77eec4465 100644 --- a/assets/scss/variables/_variable-material.scss +++ b/assets/scss/variables/_variable-material.scss @@ -443,6 +443,7 @@ $toolbar-dark-element-bg: $white-divider !default; $tooltip-bg: $material-color-grey-700 !default; $tooltip-border-radius: $border-radius !default; +$tooltip-breakpoint: md !default; $tooltip-color: $white-primary !default; $tooltip-font-size: 0.875rem !default; $tooltip-font-size-desktop: 0.625rem !default; From 7bdc466662bd24499642ad581f051ccb973246b7 Mon Sep 17 00:00:00 2001 From: MAYA Date: Wed, 14 Feb 2018 16:20:49 +1100 Subject: [PATCH 011/117] Separate multiple controls in `.input-group` --- assets/scss/material/_text-field-input-group.scss | 14 ++++++++++---- assets/scss/variables/_variable-bootstrap.scss | 2 +- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/assets/scss/material/_text-field-input-group.scss b/assets/scss/material/_text-field-input-group.scss index b403e3274..945bce9a0 100644 --- a/assets/scss/material/_text-field-input-group.scss +++ b/assets/scss/material/_text-field-input-group.scss @@ -11,6 +11,12 @@ flex: 1 1 auto; margin-bottom: 0; width: 1%; + + + .custom-file, + + .custom-select, + + .form-control { + margin-left: $input-group-inner-spacer-x; + } } } @@ -33,20 +39,20 @@ } .input-group-append { - margin-left: $input-group-addon-margin-x; + margin-left: $input-group-inner-spacer-x; } .input-group-prepend { - margin-right: $input-group-addon-margin-x; + margin-right: $input-group-inner-spacer-x; } .input-group-text { color: inherit; font-size: $textfield-font-size; line-height: $textfield-line-height; - margin-right: ($input-group-addon-margin-x / 2); + margin-right: ($input-group-inner-spacer-x / 2); margin-bottom: 0; - margin-left: ($input-group-addon-margin-x / 2); + margin-left: ($input-group-inner-spacer-x / 2); white-space: nowrap; } diff --git a/assets/scss/variables/_variable-bootstrap.scss b/assets/scss/variables/_variable-bootstrap.scss index 8ac4d8209..0134e9287 100644 --- a/assets/scss/variables/_variable-bootstrap.scss +++ b/assets/scss/variables/_variable-bootstrap.scss @@ -92,7 +92,7 @@ $form-feedback-valid-color: theme-color(success) !default; $form-group-margin-y: $spacer !default; -$input-group-addon-margin-x: 1rem !default; +$input-group-inner-spacer-x: 1rem !default; // Jumbotron From fb8c33b43cee5e0078ab8c7973787bb1319d1198 Mon Sep 17 00:00:00 2001 From: MAYA Date: Wed, 14 Feb 2018 17:19:54 +1100 Subject: [PATCH 012/117] Add support for using floating label and textfiel box in input group --- .../material/_text-field-input-group.scss | 58 ++++++++++++++++++- 1 file changed, 56 insertions(+), 2 deletions(-) diff --git a/assets/scss/material/_text-field-input-group.scss b/assets/scss/material/_text-field-input-group.scss index 945bce9a0..ffffeb654 100644 --- a/assets/scss/material/_text-field-input-group.scss +++ b/assets/scss/material/_text-field-input-group.scss @@ -7,14 +7,18 @@ > .custom-file, > .custom-select, - > .form-control { + > .floating-label, + > .form-control, + > .textfield-box { flex: 1 1 auto; margin-bottom: 0; width: 1%; + .custom-file, + .custom-select, - + .form-control { + + .floating-label, + + .form-control, + + .textfield-box { margin-left: $input-group-inner-spacer-x; } } @@ -76,6 +80,16 @@ @extend %form-control-lg; } + > .floating-label { + @extend .floating-label-lg; + + &.has-value label, + &.is-focused label { + line-height: 1; + top: 0; + } + } + > .input-group-append, > .input-group-prepend { min-width: $textfield-height-lg; @@ -89,6 +103,21 @@ line-height: $textfield-line-height-lg; } } + + > .textfield-box { + @extend .textfield-box-lg; + + &.floating-label { + &.has-value label, + &.is-focused label { + top: $textfield-box-label-spacer-y; + } + + .form-control { + padding-bottom: ($textfield-box-label-spacer-y - $textfield-border-width / $font-size-root * 1rem); + } + } + } } .input-group-sm { @@ -96,6 +125,16 @@ @extend %form-control-sm; } + > .floating-label { + @extend .floating-label-sm; + + &.has-value label, + &.is-focused label { + line-height: 1; + top: 0; + } + } + > .input-group-append, > .input-group-prepend { min-width: $textfield-height-sm; @@ -109,4 +148,19 @@ line-height: $textfield-line-height-sm; } } + + > .textfield-box { + @extend .textfield-box-sm; + + &.floating-label { + &.has-value label, + &.is-focused label { + top: $textfield-box-label-spacer-y; + } + + .form-control { + padding-bottom: ($textfield-box-label-spacer-y - $textfield-border-width / $font-size-root * 1rem); + } + } + } } From 8a7b58b51c2d1a3ed21e7039dbafb5c8b9ea2486 Mon Sep 17 00:00:00 2001 From: MAYA Date: Wed, 14 Feb 2018 17:26:14 +1100 Subject: [PATCH 013/117] Tighten input group text margin --- assets/scss/material/_text-field-input-group.scss | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/assets/scss/material/_text-field-input-group.scss b/assets/scss/material/_text-field-input-group.scss index ffffeb654..ca2f78921 100644 --- a/assets/scss/material/_text-field-input-group.scss +++ b/assets/scss/material/_text-field-input-group.scss @@ -31,7 +31,6 @@ align-items: center; display: flex; justify-content: center; - min-width: $textfield-height; .btn { min-width: 0; @@ -54,10 +53,12 @@ color: inherit; font-size: $textfield-font-size; line-height: $textfield-line-height; - margin-right: ($input-group-inner-spacer-x / 2); margin-bottom: 0; - margin-left: ($input-group-inner-spacer-x / 2); white-space: nowrap; + + + .input-group-text { + margin-left: ($input-group-inner-spacer-x / 2); + } } // Border radius @@ -92,8 +93,6 @@ > .input-group-append, > .input-group-prepend { - min-width: $textfield-height-lg; - > .btn { @extend %btn-lg; } @@ -137,8 +136,6 @@ > .input-group-append, > .input-group-prepend { - min-width: $textfield-height-sm; - > .btn { @extend %btn-sm; } From bfd70bca4e9590d1d7efcaf85ee52ed1393ea5e8 Mon Sep 17 00:00:00 2001 From: MAYA Date: Thu, 15 Feb 2018 10:51:57 +1100 Subject: [PATCH 014/117] Add `.input-group-icon` --- .../material/_text-field-input-group.scss | 34 +++++++++++ docs/4.0/material/text-fields.md | 59 ++++++++++++++++++- 2 files changed, 92 insertions(+), 1 deletion(-) diff --git a/assets/scss/material/_text-field-input-group.scss b/assets/scss/material/_text-field-input-group.scss index ca2f78921..f82c551c5 100644 --- a/assets/scss/material/_text-field-input-group.scss +++ b/assets/scss/material/_text-field-input-group.scss @@ -74,6 +74,30 @@ } } +// Icons + +.input-group-icon { + @include transition-standard(color); + + color: $textfield-border-color; + font-size: ($font-size-base / 1rem * $textfield-font-size); + margin-right: $input-group-inner-spacer-x; + order: -1; + + @include hover { + color: $textfield-border-color-hover; + } + + .floating-label.is-focused ~ &, + .form-control:focus ~ & { + color: $textfield-border-color-focus; + } + + .floating-label:not(.textfield-box) ~ & { + margin-top: $floating-label-font-size-focus; + } +} + // Size .input-group-lg { @@ -103,6 +127,11 @@ } } + > .input-group-icon { + font-size: ($font-size-base / 1rem * $textfield-font-size-lg); + line-height: $textfield-line-height-lg; + } + > .textfield-box { @extend .textfield-box-lg; @@ -146,6 +175,11 @@ } } + > .input-group-icon { + font-size: ($font-size-base / 1rem * $textfield-font-size-sm); + line-height: $textfield-line-height-sm; + } + > .textfield-box { @extend .textfield-box-sm; diff --git a/docs/4.0/material/text-fields.md b/docs/4.0/material/text-fields.md index a64d0569a..e8658b0d0 100644 --- a/docs/4.0/material/text-fields.md +++ b/docs/4.0/material/text-fields.md @@ -90,7 +90,7 @@ $('.floating-label .form-control').floatinglabel(); {% endexample %} -## Text field box +## Text field boxes Text field boxes increase text field identifiability and scannability by using a transparent rectangular fill to enclose the label and input text. @@ -175,3 +175,60 @@ Sizes can also be set by adding `.floating-label-lg/sm` and `.textfield-box-lg/s {% endexample %} + +## With icons + +Icons describe the type of input a text field requires. They are displayed to the left of the text field. + +{% example html %} +
+ + +
+
+ + +
+
+ + +
+{% endexample %} + +`.input-group-icon` can also work with floating label text fields: + +{% example html %} +
+
+ + +
+ +
+
+
+ + +
+ +
+
+
+ + +
+ +
+{% endexample %} From 42888eae156b1f36ba2a0be9bcbcd59b66f3ec00 Mon Sep 17 00:00:00 2001 From: MAYA Date: Thu, 15 Feb 2018 13:05:54 +1100 Subject: [PATCH 015/117] Stop dropdown caret being truncated in `.card-actions` --- assets/scss/material/_card.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/assets/scss/material/_card.scss b/assets/scss/material/_card.scss index 7537623a1..813f6e413 100644 --- a/assets/scss/material/_card.scss +++ b/assets/scss/material/_card.scss @@ -61,6 +61,10 @@ padding-right: $card-action-inner-spacer-x; padding-left: $card-action-inner-spacer-x; } + + .dropdown-toggle::after { + margin-right: 0; + } } // Body From 5647a8e9da61b0024d44c4b8e82c4c18d8b4e283 Mon Sep 17 00:00:00 2001 From: MAYA Date: Thu, 15 Feb 2018 13:10:34 +1100 Subject: [PATCH 016/117] Fix table example --- docs/4.0/material/data-tables.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/docs/4.0/material/data-tables.md b/docs/4.0/material/data-tables.md index efa352813..df752ba76 100644 --- a/docs/4.0/material/data-tables.md +++ b/docs/4.0/material/data-tables.md @@ -13,11 +13,11 @@ Tables may be embedded within a card, with data manipulation tools and table nav {% example html %}
-
-

Card title

-
+
+

Card title

+
- +
Filter 1 Filter 2 @@ -25,7 +25,7 @@ Tables may be embedded within a card, with data manipulation tools and table nav
- +
Action Another action @@ -36,7 +36,7 @@ Tables may be embedded within a card, with data manipulation tools and table nav
- +
@@ -66,9 +66,9 @@ Tables may be embedded within a card, with data manipulation tools and table nav
#
-
-
- Rows per page: +
+
+ Rows per page:
@@ -79,7 +79,7 @@ Tables may be embedded within a card, with data manipulation tools and table nav Show all
- 1-3 of 300 + 1-3 of 300 chevron_left chevron_right
From 3c4b78fe8a9769504aa9eb19d0a618a4a2866f42 Mon Sep 17 00:00:00 2001 From: MAYA Date: Thu, 15 Feb 2018 13:37:42 +1100 Subject: [PATCH 017/117] Add migration doc --- _data/nav.yml | 1 + docs/4.0/getting-started/migration.md | 49 +++++++++++++++++++++++++++ 2 files changed, 50 insertions(+) create mode 100644 docs/4.0/getting-started/migration.md diff --git a/_data/nav.yml b/_data/nav.yml index d4cfc71b5..27b4f0438 100644 --- a/_data/nav.yml +++ b/_data/nav.yml @@ -1,6 +1,7 @@ - title: Getting started pages: - title: Introduction + - title: Migration - title: Theming - title: Tooling diff --git a/docs/4.0/getting-started/migration.md b/docs/4.0/getting-started/migration.md new file mode 100644 index 000000000..6961e0156 --- /dev/null +++ b/docs/4.0/getting-started/migration.md @@ -0,0 +1,49 @@ +--- +layout: docs +title: Migrating to v4 +description: Material v4 is a major rewrite of the entire project. The most notable changes are summarized below. +group: getting-started +toc: true +--- + +## Bootstrap changes + +Material monitors the changes in the Bootstrap project so the exact same Bootstrap HTML markup can always work with Material. For example, when Bootstrap dropped `.hidden-*` classes for new display utilities, Material did the same by dropping `.hidden-*` classes and introducing `.d-{value}` and `.d-{breakpoint}-{value}` classes. If you are upgrading Material, please follow Bootstrap's [migration doc](https://getbootstrap.com/docs/4.0/migration/) for details about breaking and/or notable changes in each release as the changes will apply to Material, too. + +This page will focus on the changes that are unique to Material. + +## v4.0.0 + +All previous alpha and beta releases mainly focused on keeping up with Bootstrap 4's continuous releases plus minor bug fixes. The stable v4.0.0 release addressed a few issues that have hinged on for a while. + +### Breakpoints + +Material v4's alpha and beta releases have a different set of breakpoints and container `max-width`s than Bootstrap's default values. Material's stable v4.0.0 reverts these values back to be the same as Bootstrap's default values. The reason is that although the values used in Material v4's alpha and beta releases are more in line with Google Material Design's [responsive UI guidelines](https://material.io/guidelines/layout/responsive-ui.html#responsive-ui-breakpoints), Bootstrap's grid setup seems to work better in most cases. + +### Floating action buttons + +Added Material specific `.btn-float-dropdown` to allow a floating action button to fling out related actions since the default dropdown menus do not work well with floating action buttons. For detailed usage, please visit [buttons doc]({{ site.baseurl }}/docs/{{ site.docs_version }}/material/buttons/#dropdown). + +### Input groups + +Added Material specific `.input-group-icon` to allow an icon to change its colour based on the state of its associated form control. For detailed usage, please visit [text fields doc]({{ site.baseurl }}/docs/{{ site.docs_version }}/material/text-fields/#with-icons). + +### Navigation drawer + +Since Bootstrap introduced responsive `.navbar-expand-{breakpoint}`, navigation drawer has been due a similar change, too. + +- Permanent, persistent, and temporary navigation drawers now support responsive behaviours via `.navdrawer-{type}-{breakpoint}` classes. + +- Navigation drawer JavaScript is updated to provide an extra option, `breakpoint`, to allow a value from `sm` to `xl` to be passed in. This option can also be passed via data attribute as `data-breakpoint`. `xs` is not included because `.navdrawer-{type}-xs` would be applied from `min-width: 0;` and up which means it is not bound by a media query. + +For more details, please visit the [navigation drawer doc]({{ site.baseurl }}/docs/{{ site.docs_version }}/material/navigation-drawer/). + +### Removed third party plugins + +Two third party plugins, `textarea-autosize` and `waves`, are removed from the stable v4.0.0 release. The reason is that these third party plugins can be used without any modifications to work with Material, so leaving out these third party plugins can not only bring down the size of the CSS and JavaScript of Material a bit, but also provide some flexibility for developers to use their preferred plugins for the same job. + +In case the two plugins are required, please check out the following two projects and incorporate them back in accordingly: + +- The plugin used in v4's alpha and beta to adjust the height of the textarea automatically is: [`textarea-autosize`](https://github.com/javierjulio/textarea-autosize) + +- The plugin used in v4's alpha and beta to create the ripple effect on click is : [`waves`](https://github.com/fians/Waves) From 14db14422b4bd46813d53e2af1345c8f5c0b1fb2 Mon Sep 17 00:00:00 2001 From: MAYA Date: Thu, 15 Feb 2018 17:13:15 +1100 Subject: [PATCH 018/117] Fix docs' `.highlight` styles on mobile --- docs-assets/scss/docs.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs-assets/scss/docs.scss b/docs-assets/scss/docs.scss index 2c88ada9c..a0faaeaa0 100644 --- a/docs-assets/scss/docs.scss +++ b/docs-assets/scss/docs.scss @@ -5,8 +5,8 @@ // Bootstrap doc css override -.bd-example, -.highlight { +.bd-content .highlight, +.bd-example { margin-right: 0; margin-left: 0; } From ed7247b2fccfbe3b07d37c5dc282ae014cacf7d3 Mon Sep 17 00:00:00 2001 From: MAYA Date: Thu, 15 Feb 2018 17:17:46 +1100 Subject: [PATCH 019/117] Add basic styles for toast Bootstrap's toast violates Material's snackbar/toast guidelines, so `.toast` here will only be very basic, and Material specific `.snackbar` will be added for additional styles. --- assets/scss/material.scss | 1 + assets/scss/material/_toast.scss | 20 +++++++++++++++++++ assets/scss/variables/_variable-material.scss | 14 +++++++++++++ 3 files changed, 35 insertions(+) create mode 100644 assets/scss/material/_toast.scss diff --git a/assets/scss/material.scss b/assets/scss/material.scss index 7bd8be813..92fe695f9 100644 --- a/assets/scss/material.scss +++ b/assets/scss/material.scss @@ -54,6 +54,7 @@ @import 'material/text-field-box'; @import 'material/text-field-floating-label'; @import 'material/text-field-input-group'; +@import 'material/toast'; @import 'material/toolbar'; @import 'material/tooltip'; diff --git a/assets/scss/material/_toast.scss b/assets/scss/material/_toast.scss new file mode 100644 index 000000000..0c765533e --- /dev/null +++ b/assets/scss/material/_toast.scss @@ -0,0 +1,20 @@ +.toast { + background-clip: padding-box; + background-color: $toast-bg; + color: $toast-color; + font-size: $toast-font-size; + overflow: hidden; + padding: $toast-padding-y $toast-padding-x; + width: 100%; + + @include media-breakpoint-up($toast-breakpoint) { + border-radius: $toast-border-radius; + max-width: $toast-max-width; + min-width: $toast-min-width; + width: auto; + } + + + .toast { + margin-top: $toast-margin-y; + } +} diff --git a/assets/scss/variables/_variable-material.scss b/assets/scss/variables/_variable-material.scss index 77eec4465..5ade32705 100644 --- a/assets/scss/variables/_variable-material.scss +++ b/assets/scss/variables/_variable-material.scss @@ -412,6 +412,20 @@ $floating-label-color: $textfield-hint-color !default; $floating-label-color-focus: theme-color(primary) !default; $floating-label-font-size-focus: 0.75rem !default; +// Toast (Bootstrap toast) +// Based on https://material.io/guidelines/components/snackbars-toasts.html#snackbars-toasts-specs + +$toast-bg: #323232 !default; +$toast-border-radius: $border-radius !default; +$toast-breakpoint: sm !default; +$toast-color: $white-primary !default; +$toast-font-size: 0.875rem !default; +$toast-margin-y: $spacer-lg !default; +$toast-max-width: 35.5rem !default; +$toast-min-width: 18rem !default; +$toast-padding-x: 1.5rem !default; +$toast-padding-y: 0.875rem !default; + // Toolbar (Bootstrap navbar) // Based on https://material.google.com/components/toolbars.html#toolbars-usage From 03a40abb44ddae8d5d0e4c90380cedb6dcbd6cd7 Mon Sep 17 00:00:00 2001 From: MAYA Date: Fri, 16 Feb 2018 09:22:28 +1100 Subject: [PATCH 020/117] Rename toast to snackbar --- assets/scss/material.scss | 2 +- assets/scss/material/_snackbar.scss | 22 +++++++++++++++ assets/scss/material/_toast.scss | 20 ------------- assets/scss/variables/_variable-material.scss | 28 +++++++++---------- 4 files changed, 37 insertions(+), 35 deletions(-) create mode 100644 assets/scss/material/_snackbar.scss delete mode 100644 assets/scss/material/_toast.scss diff --git a/assets/scss/material.scss b/assets/scss/material.scss index 92fe695f9..0e4f050c7 100644 --- a/assets/scss/material.scss +++ b/assets/scss/material.scss @@ -48,13 +48,13 @@ @import 'material/progress-circular'; @import 'material/selection-control'; @import 'material/slider'; +@import 'material/snackbar'; @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/toast'; @import 'material/toolbar'; @import 'material/tooltip'; diff --git a/assets/scss/material/_snackbar.scss b/assets/scss/material/_snackbar.scss new file mode 100644 index 000000000..2cc8e8c2c --- /dev/null +++ b/assets/scss/material/_snackbar.scss @@ -0,0 +1,22 @@ +// Basic styles for Bootstrap toast + +.toast { + background-clip: padding-box; + background-color: $snackbar-bg; + color: $snackbar-color; + font-size: $snackbar-font-size; + overflow: hidden; + padding: $snackbar-padding-y $snackbar-padding-x; + width: 100%; + + @include media-breakpoint-up($snackbar-breakpoint) { + border-radius: $snackbar-border-radius; + max-width: $snackbar-max-width; + min-width: $snackbar-min-width; + width: auto; + } + + + .toast { + margin-top: $snackbar-margin-y; + } +} diff --git a/assets/scss/material/_toast.scss b/assets/scss/material/_toast.scss deleted file mode 100644 index 0c765533e..000000000 --- a/assets/scss/material/_toast.scss +++ /dev/null @@ -1,20 +0,0 @@ -.toast { - background-clip: padding-box; - background-color: $toast-bg; - color: $toast-color; - font-size: $toast-font-size; - overflow: hidden; - padding: $toast-padding-y $toast-padding-x; - width: 100%; - - @include media-breakpoint-up($toast-breakpoint) { - border-radius: $toast-border-radius; - max-width: $toast-max-width; - min-width: $toast-min-width; - width: auto; - } - - + .toast { - margin-top: $toast-margin-y; - } -} diff --git a/assets/scss/variables/_variable-material.scss b/assets/scss/variables/_variable-material.scss index 5ade32705..3b793c7cf 100644 --- a/assets/scss/variables/_variable-material.scss +++ b/assets/scss/variables/_variable-material.scss @@ -314,6 +314,20 @@ $slider-track-bg: rgba(0, 0, 0, 0.26) !default; $slider-track-bg-active: rgba(0, 0, 0, 0.38) !default; $slider-track-height: 0.125rem !default; +// Snackbar/toast (Bootstrap toast) +// Based on https://material.io/guidelines/components/snackbars-toasts.html#snackbars-toasts-specs + +$snackbar-bg: #323232 !default; +$snackbar-border-radius: $border-radius !default; +$snackbar-breakpoint: sm !default; +$snackbar-color: $white-primary !default; +$snackbar-font-size: 0.875rem !default; +$snackbar-margin-y: $spacer-lg !default; +$snackbar-max-width: 35.5rem !default; +$snackbar-min-width: 18rem !default; +$snackbar-padding-x: 1.5rem !default; +$snackbar-padding-y: 0.875rem !default; + // Stepper // Based on https://material.google.com/components/steppers.html#steppers-specs @@ -412,20 +426,6 @@ $floating-label-color: $textfield-hint-color !default; $floating-label-color-focus: theme-color(primary) !default; $floating-label-font-size-focus: 0.75rem !default; -// Toast (Bootstrap toast) -// Based on https://material.io/guidelines/components/snackbars-toasts.html#snackbars-toasts-specs - -$toast-bg: #323232 !default; -$toast-border-radius: $border-radius !default; -$toast-breakpoint: sm !default; -$toast-color: $white-primary !default; -$toast-font-size: 0.875rem !default; -$toast-margin-y: $spacer-lg !default; -$toast-max-width: 35.5rem !default; -$toast-min-width: 18rem !default; -$toast-padding-x: 1.5rem !default; -$toast-padding-y: 0.875rem !default; - // Toolbar (Bootstrap navbar) // Based on https://material.google.com/components/toolbars.html#toolbars-usage From a88a29e8811d9c462d78359ab8eec1dd3926c072 Mon Sep 17 00:00:00 2001 From: MAYA Date: Fri, 16 Feb 2018 13:06:13 +1100 Subject: [PATCH 021/117] Reset permanent and persistent navdrawer `z-index` when styles kick in --- assets/scss/material/_navdrawer.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/assets/scss/material/_navdrawer.scss b/assets/scss/material/_navdrawer.scss index 21725cdc4..67de5276f 100644 --- a/assets/scss/material/_navdrawer.scss +++ b/assets/scss/material/_navdrawer.scss @@ -183,6 +183,7 @@ display: block !important; // stylelint-disable-line declaration-no-important right: auto; width: $navdrawer-width; + z-index: auto; &.navdrawer-permanent-clipped, &.navdrawer-permanent-float { @@ -229,6 +230,7 @@ .navdrawer-persistent#{$infix} { right: auto; width: $navdrawer-width; + z-index: auto; &.navdrawer-persistent-clipped { border-top: $navdrawer-border-width solid $navdrawer-border-color; From e015aa9b089849855b41081fbdef21f82127182e Mon Sep 17 00:00:00 2001 From: MAYA Date: Fri, 16 Feb 2018 13:06:47 +1100 Subject: [PATCH 022/117] Update navdrawer examples --- docs/4.0/examples/navdrawer-default.html | 2 +- docs/4.0/examples/navdrawer-permanent-clipped.html | 2 +- docs/4.0/examples/navdrawer-permanent-float-card.html | 2 +- docs/4.0/examples/navdrawer-permanent-float.html | 2 +- docs/4.0/examples/navdrawer-permanent.html | 2 +- docs/4.0/examples/navdrawer-persistent.html | 2 +- docs/4.0/examples/navdrawer-right.html | 2 +- docs/4.0/examples/navdrawer-temporary.html | 2 +- 8 files changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/4.0/examples/navdrawer-default.html b/docs/4.0/examples/navdrawer-default.html index f64737ecc..e07640788 100644 --- a/docs/4.0/examples/navdrawer-default.html +++ b/docs/4.0/examples/navdrawer-default.html @@ -20,7 +20,7 @@ -
+
diff --git a/docs/4.0/examples/navdrawer-permanent-clipped.html b/docs/4.0/examples/navdrawer-permanent-clipped.html index f05ee277b..3b2779b4f 100644 --- a/docs/4.0/examples/navdrawer-permanent-clipped.html +++ b/docs/4.0/examples/navdrawer-permanent-clipped.html @@ -20,7 +20,7 @@ -
+
Brand
diff --git a/docs/4.0/examples/navdrawer-permanent-float-card.html b/docs/4.0/examples/navdrawer-permanent-float-card.html index 7edb6fe13..c07a04ec4 100644 --- a/docs/4.0/examples/navdrawer-permanent-float-card.html +++ b/docs/4.0/examples/navdrawer-permanent-float-card.html @@ -20,7 +20,7 @@ -
+
Brand
diff --git a/docs/4.0/examples/navdrawer-permanent-float.html b/docs/4.0/examples/navdrawer-permanent-float.html index 46e89837c..eac73879e 100644 --- a/docs/4.0/examples/navdrawer-permanent-float.html +++ b/docs/4.0/examples/navdrawer-permanent-float.html @@ -20,7 +20,7 @@ -
+
Brand
diff --git a/docs/4.0/examples/navdrawer-permanent.html b/docs/4.0/examples/navdrawer-permanent.html index 6b8d43eb4..a97fcf3b9 100644 --- a/docs/4.0/examples/navdrawer-permanent.html +++ b/docs/4.0/examples/navdrawer-permanent.html @@ -20,7 +20,7 @@ -
+
-{% endexample %} +{% endcapture %} +{% include example.html content=example %} Just like with card groups, card footers in decks will automatically line up. -{% example html %} +{% capture example %}
Card image cap @@ -567,7 +591,8 @@ Just like with card groups, card footers in decks will automatically line up.
-{% endexample %} +{% endcapture %} +{% include example.html content=example %} ### Card columns @@ -575,7 +600,7 @@ Cards can be organized into [Masonry](https://masonry.desandro.com/)-like column **Heads up!** Your mileage with card columns may vary. To prevent cards breaking across columns, we must set them to `display: inline-block` as `column-break-inside: avoid` isn't a bulletproof solution yet. -{% example html %} +{% capture example %}
Card image cap @@ -640,7 +665,8 @@ Cards can be organized into [Masonry](https://masonry.desandro.com/)-like column
-{% endexample %} +{% endcapture %} +{% include example.html content=example %} Card columns can also be extended and customized with some additional code. Shown below is an extension of the `.card-columns` class using the same CSS we use—CSS columns— to generate a set of responsive tiers for changing the number of columns. diff --git a/docs/4.0/components/carousel.md b/docs/4.0/components/carousel.md index 0aa132ed7..7c4a0472e 100644 --- a/docs/4.0/components/carousel.md +++ b/docs/4.0/components/carousel.md @@ -20,13 +20,13 @@ Lastly, if you're building our JavaScript from source, it [requires `util.js`]({ Carousels don't automatically normalize slide dimensions. As such, you may need to use additional utilities or custom styles to appropriately size content. While carousels support previous/next controls and indicators, they're not explicitly required. Add and customize as you see fit. -**The `.active` class needs to be added to one of the slides** otherwise the carousel will not be visible. Also be sure to set a unique id on the `.carousel` for optional controls, especially if you're using multiple carousels on a single page. +**The `.active` class needs to be added to one of the slides** otherwise the carousel will not be visible. Also be sure to set a unique id on the `.carousel` for optional controls, especially if you're using multiple carousels on a single page. Control and indicator elements must have a `data-target` attribute (or `href` for links) that matches the id of the `.carousel` element. ### Slides only -Here's a carousel with slides only. Note the presence of the `.d-block` and `.img-fluid` on carousel images to prevent browser default image alignment. +Here's a carousel with slides only. Note the presence of the `.d-block` and `.w-100` on carousel images to prevent browser default image alignment. -{% example html %} +{% capture example %} -{% endexample %} +{% endcapture %} +{% include example.html content=example %} ### With controls Adding in the previous and next controls: -{% example html %} +{% capture example %}
-{% endexample %} +{% endcapture %} +{% include example.html content=example %} ## Accordion example Using the [card]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/card/) component, you can extend the default collapse behavior to create an accordion. -{% example html %} -
+{% capture example %} +
-{% endexample %} +{% endcapture %} +{% include example.html content=example %} And with `` elements: -{% example html %} -
+{% capture example %} +
@@ -57,7 +58,8 @@ And with `` elements: Something else here
-{% endexample %} +{% endcapture %} +{% include example.html content=example %} The best part is you can do this with any button variant, too: @@ -539,7 +541,7 @@ Trigger dropdown menus at the left of the elements by adding `.dropleft` to the Historically dropdown menu contents *had* to be links, but that's no longer the case with v4. Now you can optionally use `
-{% endexample %} +{% endcapture %} +{% include example.html content=example %} You can also create non-interactive dropdown items with `.dropdown-item-text`. Feel free to style further with custom CSS or text utilities. -{% example html %} +{% capture example %}
Dropdown item text Action Another action Something else here
-{% endexample %} +{% endcapture %} +{% include example.html content=example %} ### Active Add `.active` to items in the dropdown to **style them as active**. -{% example html %} +{% capture example %}
Regular link Active link Another link
-{% endexample %} +{% endcapture %} +{% include example.html content=example %} ### Disabled Add `.disabled` to items in the dropdown to **style them as disabled**. -{% example html %} +{% capture example %}
Regular link Disabled link Another link
-{% endexample %} +{% endcapture %} +{% include example.html content=example %} ## Menu alignment By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add `.dropdown-menu-right` to a `.dropdown-menu` to right align the dropdown menu. -{% callout info %} +{% capture callout %} **Heads up!** Dropdowns are positioned thanks to Popper.js (except when they are contained in a navbar). -{% endcallout %} +{% endcapture %} +{% include callout.html content=callout type="info" %} -{% example html %} +{% capture example %}
-{% endexample %} +{% endcapture %} +{% include example.html content=example %} ## Menu content @@ -614,19 +622,20 @@ By default, a dropdown menu is automatically positioned 100% from the top and al Add a header to label sections of actions in any dropdown menu. -{% example html %} +{% capture example %}
Dropdown header
Action Another action
-{% endexample %} +{% endcapture %} +{% include example.html content=example %} ### Dividers Separate groups of related menu items with a divider. -{% example html %} +{% capture example %}
Action Another action @@ -634,13 +643,14 @@ Separate groups of related menu items with a divider.
Separated link
-{% endexample %} +{% endcapture %} +{% include example.html content=example %} ### Text Place any freeform text within a dropdown menu with text and use [spacing utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/). Note that you'll likely need additional sizing styles to constrain the menu width. -{% example html %} +{% capture example %}

Some example text that's free-flowing within the dropdown menu. @@ -649,13 +659,14 @@ Place any freeform text within a dropdown menu with text and use [spacing utilit And this is more example text.

-{% endexample %} +{% endcapture %} +{% include example.html content=example %} ### Forms Put a form within a dropdown menu, or make it into a dropdown menu, and use [margin or padding utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/) to give it the negative space you require. -{% example html %} +{% capture example %}
@@ -678,9 +689,10 @@ Put a form within a dropdown menu, or make it into a dropdown menu, and use [mar New around here? Sign up Forgot password?
-{% endexample %} +{% endcapture %} +{% include example.html content=example %} -{% example html %} +{% capture example %}
@@ -698,13 +710,14 @@ Put a form within a dropdown menu, or make it into a dropdown menu, and use [mar
-{% endexample %} +{% endcapture %} +{% include example.html content=example %} ## Dropdown options Use `data-offset` or `data-reference` to change the location of the dropdown. -{% example html %} +{% capture example %}
-{% endexample %} +{% endcapture %} +{% include example.html content=example %} ## Usage Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the `.show` class on the parent list item. The `data-toggle="dropdown"` attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use it. -{% callout info %} +{% capture callout %} On touch-enabled devices, opening a dropdown adds empty (`$.noop`) `mouseover` handlers to the immediate children of the `` element. This admittedly ugly hack is necessary to work around a [quirk in iOS' event delegation](https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html), which would otherwise prevent a tap anywhere outside of the dropdown from triggering the code that closes the dropdown. Once the dropdown is closed, these additional empty `mouseover` handlers are removed. -{% endcallout %} +{% endcapture %} +{% include callout.html content=callout type="info" %} ### Via data attributes @@ -763,11 +778,12 @@ Call the dropdowns via JavaScript: $('.dropdown-toggle').dropdown() {% endhighlight %} -{% callout info %} +{% capture callout %} ##### `data-toggle="dropdown"` still required Regardless of whether you call your dropdown via JavaScript or instead use the data-api, `data-toggle="dropdown"` is always required to be present on the dropdown's trigger element. -{% endcallout %} +{% endcapture %} +{% include callout.html content=callout type="info" %} ### Options @@ -807,6 +823,12 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap 'toggle' Reference element of the dropdown menu. Accepts the values of 'toggle', 'parent', or an HTMLElement reference. For more information refer to Popper.js's referenceObject docs. + + display + string + dynamic | static + By default, we use Popper.js for dynamic positioning. Disable this with `static`. + diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md index 59ce56bdc..0eb34bae9 100644 --- a/docs/4.0/components/forms.md +++ b/docs/4.0/components/forms.md @@ -14,7 +14,7 @@ Be sure to use an appropriate `type` attribute on all inputs (e.g., `email` for Here's a quick example to demonstrate Bootstrap's form styles. Keep reading for documentation on required classes, form layout, and more. -{% example html %} +{% capture example %}
@@ -25,13 +25,14 @@ Here's a quick example to demonstrate Bootstrap's form styles. Keep reading for
-
+
-{% endexample %} +{% endcapture %} +{% include example.html content=example %} ## Form controls @@ -39,7 +40,7 @@ Textual form controls—like ``s, `
-{% endexample %} +{% endcapture %} +{% include example.html content=example %} For file inputs, swap the `.form-control` for `.form-control-file`. -{% example html %} +{% capture example %}
-{% endexample %} +{% endcapture %} +{% include example.html content=example %} ### Sizing Set heights using classes like `.form-control-lg` and `.form-control-sm`. -{% example html %} +{% capture example %} -{% endexample %} +{% endcapture %} +{% include example.html content=example %} -{% example html %} +{% capture example %} @@ -103,21 +107,37 @@ Set heights using classes like `.form-control-lg` and `.form-control-sm`. -{% endexample %} +{% endcapture %} +{% include example.html content=example %} + +## Range Inputs + +Set horizontally scrollable range inputs using `.form-control-range`. + +{% capture example %} +
+
+ + +
+
+{% endcapture %} +{% include example.html content=example %} ### Readonly Add the `readonly` boolean attribute on an input to prevent modification of the input's value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor. -{% example html %} +{% capture example %} -{% endexample %} +{% endcapture %} +{% include example.html content=example %} ### Readonly plain text If you want to have `` elements in your form styled as plain text, use the `.form-control-plaintext` class to remove the default form field styling and preserve the correct margin and padding. -{% example html %} +{% capture example %}
@@ -132,9 +152,10 @@ If you want to have `` elements in your form styled as plain tex
-{% endexample %} +{% endcapture %} +{% include example.html content=example %} -{% example html %} +{% capture example %}
@@ -146,7 +167,8 @@ If you want to have `` elements in your form styled as plain tex
-{% endexample %} +{% endcapture %} +{% include example.html content=example %} ## Checkboxes and radios @@ -160,7 +182,7 @@ Checkboxes and radios use are built to support HTML-based form validation and pr By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with `.form-check`. -{% example html %} +{% capture example %}
-{% endexample %} +{% endcapture %} +{% include example.html content=example %} -{% example html %} +{% capture example %}
-{% endexample %} +{% endcapture %} +{% include example.html content=example %} ### Inline Group checkboxes or radios on the same horizontal row by adding `.form-check-inline` to any `.form-check`. -{% example html %} +{% capture example %}
@@ -213,9 +237,10 @@ Group checkboxes or radios on the same horizontal row by adding `.form-check-inl
-{% endexample %} +{% endcapture %} +{% include example.html content=example %} -{% example html %} +{% capture example %}
@@ -228,20 +253,22 @@ Group checkboxes or radios on the same horizontal row by adding `.form-check-inl
-{% endexample %} +{% endcapture %} +{% include example.html content=example %} ### Without labels Add `.position-static` to inputs within `.form-check` that don't have any label text. Remember to still provide some form of label for assistive technologies (for instance, using `aria-label`). -{% example html %} +{% capture example %}
-{% endexample %} +{% endcapture %} +{% include example.html content=example %} ## Layout @@ -251,7 +278,7 @@ Since Bootstrap applies `display: block` and `width: 100%` to almost all our for The `.form-group` class is the easiest way to add some structure to forms. It provides a flexible class that encourages proper grouping of labels, controls, optional help text, and form validation messaging. By default it only applies `margin-bottom`, but it picks up additional styles in `.form-inline` as needed. Use it with `
`s, `
`s, or nearly any other element. -{% example html %} +{% capture example %}
@@ -262,13 +289,14 @@ The `.form-group` class is the easiest way to add some structure to forms. It pr
-{% endexample %} +{% endcapture %} +{% include example.html content=example %} ### Form grid More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options. -{% example html %} +{% capture example %}
@@ -279,13 +307,14 @@ More complex forms can be built using our grid classes. Use these for form layou
-{% endexample %} +{% endcapture %} +{% include example.html content=example %} #### Form row You may also swap `.row` for `.form-row`, a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts. -{% example html %} +{% capture example %}
@@ -296,11 +325,12 @@ You may also swap `.row` for `.form-row`, a variation of our standard grid row t
-{% endexample %} +{% endcapture %} +{% include example.html content=example %} More complex layouts can also be created with the grid system. -{% example html %} +{% capture example %}
@@ -347,7 +377,8 @@ More complex layouts can also be created with the grid system.
-{% endexample %} +{% endcapture %} +{% include example.html content=example %} #### Horizontal form @@ -355,7 +386,7 @@ Create horizontal forms with the grid by adding the `.row` class to form groups At times, you maybe need to use margin or padding utilities to create that perfect alignment you need. For example, we've removed the `padding-top` on our stacked radio inputs label to better align the text baseline. -{% example html %} +{% capture example %}
@@ -411,13 +442,14 @@ At times, you maybe need to use margin or padding utilities to create that perfe
-{% endexample %} +{% endcapture %} +{% include example.html content=example %} ##### Horizontal form label sizing Be sure to use `.col-form-label-sm` or `.col-form-label-lg` to your `
-{% endexample %} +{% endcapture %} +{% include example.html content=example %} #### Column sizing As shown in the previous examples, our grid system allows you to place any number of `.col`s within a `.row` or `.form-row`. They'll split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining `.col`s equally split the rest, with specific column classes like `.col-7`. -{% example html %} +{% capture example %}
@@ -458,13 +491,14 @@ As shown in the previous examples, our grid system allows you to place any numbe
-{% endexample html %} +{% endcapture %} +{% include example.html content=example %} #### Auto-sizing The example below uses a flexbox utility to vertically center the contents and changes `.col` to `.col-auto` so that your columns only take up as much space as needed. Put another way, the column sizes itself based on the contents. -{% example html %} +{% capture example %}
@@ -493,11 +527,12 @@ The example below uses a flexbox utility to vertically center the contents and c
-{% endexample %} +{% endcapture %} +{% include example.html content=example %} You can then remix that once again with size-specific column classes. -{% example html %} +{% capture example %}
@@ -526,11 +561,12 @@ You can then remix that once again with size-specific column classes.
-{% endexample %} +{% endcapture %} +{% include example.html content=example %} And of course [custom form controls](#custom-forms) are supported. -{% example html %} +{% capture example %}
@@ -553,7 +589,8 @@ And of course [custom form controls](#custom-forms) are supported.
-{% endexample %} +{% endcapture %} +{% include example.html content=example %} ### Inline forms @@ -565,7 +602,7 @@ Use the `.form-inline` class to display a series of labels, form controls, and b You may need to manually address the width and alignment of individual form controls with [spacing utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/) (as shown below). Lastly, be sure to always include a `
-{% endexample %} +{% endcapture %} +{% include example.html content=example %} ## Flush Add `.list-group-flush` to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards). -{% example html %} +{% capture example %}
  • Cras justo odio
  • Dapibus ac facilisis in
    • @@ -92,40 +97,42 @@ Add `.list-group-flush` to remove some borders and rounded corners to render lis
  • Porta ac consectetur ac
  • Vestibulum at eros
-{% endexample %} +{% endcapture %} +{% include example.html content=example %} ## Contextual classes Use contextual classes to style list items with a stateful background and color. -{% example html %} +{% capture example %}
  • Dapibus ac facilisis in
    • {% for color in site.data.theme-colors %} -
  • This is a {{ color.name }} list group item
    • {% endfor %} +
  • A simple {{ color.name }} list group item
    • {% endfor %}
-{% endexample %} +{% endcapture %} +{% include example.html content=example %} Contextual classes also work with `.list-group-item-action`. Note the addition of the hover styles here not present in the previous example. Also supported is the `.active` state; apply it to indicate an active selection on a contextual list group item. -{% example html %} +{% capture example %}
Dapibus ac facilisis in {% for color in site.data.theme-colors %} - This is a {{ color.name }} list group item{% endfor %} + A simple {{ color.name }} list group item{% endfor %}
-{% endexample %} +{% endcapture %} +{% include example.html content=example %} -{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %} -{{ callout-include | markdownify }} +{% include callout-warning-color-assistive-technologies.md %} ## With badges Add badges to any list group item to show unread counts, activity, and more with the help of some [utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/flex/). -{% example html %} +{% capture example %}
  • Cras justo odio @@ -140,13 +147,14 @@ Add badges to any list group item to show unread counts, activity, and more with 1
-{% endexample %} +{% endcapture %} +{% include example.html content=example %} ## Custom content Add nearly any HTML within, even for linked list groups like the one below, with the help of [flexbox utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/flex/). -{% example html %} +{% capture example %}
@@ -173,7 +181,8 @@ Add nearly any HTML within, even for linked list groups like the one below, with Donec id elit non mi porta.
-{% endexample %} +{% endcapture %} +{% include example.html content=example %} ## JavaScript behavior diff --git a/docs/4.0/components/modal.md b/docs/4.0/components/modal.md index 42ef4e080..d4be8783a 100644 --- a/docs/4.0/components/modal.md +++ b/docs/4.0/components/modal.md @@ -67,8 +67,8 @@ Below is a _static_ modal example (meaning its `position` and `display` have bee

Modal body text goes here.

- +
@@ -249,7 +249,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
- + @@ -400,7 +400,7 @@ Have a bunch of buttons that all trigger the same modal with slightly different Below is a live demo followed by example HTML and JavaScript. For more information, [read the modal events docs](#events) for details on `relatedTarget`. -{% example html %} +{% capture example %} @@ -433,7 +433,8 @@ Below is a live demo followed by example HTML and JavaScript. For more informati
-{% endexample %} +{% endcapture %} +{% include example.html content=example %} {% highlight js %} $('#exampleModal').on('show.bs.modal', function (event) { @@ -596,8 +597,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap ### Methods -{% capture callout-include %}{% include callout-danger-async-methods.md %}{% endcapture %} -{{ callout-include | markdownify }} +{% include callout-danger-async-methods.md %} #### `.modal(options)` diff --git a/docs/4.0/components/navbar.md b/docs/4.0/components/navbar.md index 2e69a6129..3e3d1f277 100644 --- a/docs/4.0/components/navbar.md +++ b/docs/4.0/components/navbar.md @@ -32,7 +32,7 @@ Navbars come with built-in support for a handful of sub-components. Choose from Here's an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the `lg` (large) breakpoint. -{% example html %} +{% capture example %} -{% endexample %} +{% endcapture %} +{% include example.html content=example %} This example uses [color]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/colors/) (`bg-light`) and [spacing]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/) (`my-2`, `my-lg-0`, `mr-sm-0`, `my-sm-0`) utility classes. @@ -76,7 +77,7 @@ This example uses [color]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilit The `.navbar-brand` can be applied to most elements, but an anchor works best as some elements might require utility classes or custom styles. -{% example html %} +{% capture example %} -{% endexample %} +{% endcapture %} +{% include example.html content=example %} diff --git a/docs/4.0/components/navs.md b/docs/4.0/components/navs.md index 5c750d8a0..86173e9a2 100644 --- a/docs/4.0/components/navs.md +++ b/docs/4.0/components/navs.md @@ -12,11 +12,12 @@ Navigation available in Bootstrap share general markup and styles, from the base The base `.nav` component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling. -{% callout info %} +{% capture callout %} The base `.nav` component does not include any `.active` state. The following examples include the class, mainly to demonstrate that this particular class does not trigger any special styling. -{% endcallout %} +{% endcapture %} +{% include callout.html content=callout type="info" %} -{% example html %} +{% capture example %}
  • Active @@ -31,18 +32,20 @@ The base `.nav` component does not include any `.active` state. The following ex Disabled
-{% endexample %} +{% endcapture %} +{% include example.html content=example %} Classes are used throughout, so your markup can be super flexible. Use `
    `s like above, or roll your own with say a `