From b8e73a87ebcf97776b1be338539edfee8b65c256 Mon Sep 17 00:00:00 2001 From: djibe Date: Mon, 16 Dec 2019 20:32:31 +0100 Subject: [PATCH] Proper 4.4.1 alpha1 commit in djibe fork --- .editorconfig | 15 + .gitignore | 3 + .stylelintrc | 338 + CHANGELOG.md | 69 + Gemfile | 11 +- Gemfile.lock | 108 +- README.md | 56 +- _config.yml | 39 +- _data/nav.yml | 4 +- _layouts/redirect.html | 16 + assets/js/src/pickdate.js | 12 +- assets/scss/_colors.scss | 44 +- assets/scss/_functions.scss | 8 +- assets/scss/_mixins.scss | 23 +- assets/scss/_print.scss | 19 +- assets/scss/_utilities.scss | 2 +- assets/scss/_variables.scss | 11 +- assets/scss/base/_base.scss | 176 +- assets/scss/base/_grid.scss | 28 +- assets/scss/base/_typography.scss | 51 +- assets/scss/bootstrap/_alert.scss | 5 - assets/scss/bootstrap/_badge.scss | 25 +- assets/scss/bootstrap/_breadcrumb.scss | 17 +- assets/scss/bootstrap/_close.scss | 6 +- assets/scss/bootstrap/_code.scss | 2 +- assets/scss/bootstrap/_forms.scss | 68 +- assets/scss/bootstrap/_images.scss | 3 +- assets/scss/bootstrap/_nav.scss | 2 +- assets/scss/bootstrap/_pagination.scss | 7 +- assets/scss/bootstrap/_popover.scss | 2 +- assets/scss/material.scss | 7 +- assets/scss/material/_button-flat.scss | 18 +- assets/scss/material/_button-float.scss | 26 +- assets/scss/material/_button-group.scss | 86 +- assets/scss/material/_buttons.scss | 45 +- assets/scss/material/_card.scss | 61 +- assets/scss/material/_chip.scss | 144 +- assets/scss/material/_data-table.scss | 9 +- assets/scss/material/_dialog.scss | 64 +- assets/scss/material/_expansion-panel.scss | 25 +- assets/scss/material/_menu.scss | 28 +- assets/scss/material/_picker.scss | 43 +- assets/scss/material/_progress-circular.scss | 28 +- assets/scss/material/_progress.scss | 4 +- assets/scss/material/_selection-control.scss | 58 +- assets/scss/material/_sliders.scss | 79 +- assets/scss/material/_snackbars.scss | 56 +- assets/scss/material/_tab.scss | 46 +- assets/scss/material/_text-field-box.scss | 5 +- .../material/_text-field-floating-label.scss | 14 +- .../material/_text-field-input-group.scss | 9 +- assets/scss/material/_text-field.scss | 43 +- assets/scss/material/_toolbar.scss | 18 +- assets/scss/material/_tooltip.scss | 19 +- assets/scss/mixins/_breakpoints.scss | 4 +- assets/scss/mixins/_clearfix.scss | 4 +- assets/scss/mixins/_deprecate.scss | 2 +- assets/scss/mixins/_float.scss | 15 +- assets/scss/mixins/_forms.scss | 9 +- assets/scss/mixins/_grid-framework.scss | 13 +- assets/scss/mixins/_grid.scss | 1 + assets/scss/mixins/_image.scss | 3 +- assets/scss/mixins/_transition.scss | 4 +- assets/scss/mixins/_typography.scss | 4 +- assets/scss/mixins/_visibility.scss | 3 +- assets/scss/utilities/_align.scss | 10 +- assets/scss/utilities/_borders.scss | 22 +- assets/scss/utilities/_display.scss | 1 - assets/scss/utilities/_embed.scss | 12 +- assets/scss/utilities/_flex.scss | 58 +- assets/scss/utilities/_float.scss | 4 +- assets/scss/utilities/_scrollbars.scss | 38 +- assets/scss/utilities/_spacing.scss | 74 +- assets/scss/utilities/_stretched-link.scss | 8 +- assets/scss/utilities/_text.scss | 25 +- assets/scss/utilities/_webkit-custom.scss | 38 +- assets/scss/variables/_elevation-shadow.scss | 6 +- assets/scss/variables/_palette.scss | 10 +- assets/scss/variables/_transition.scss | 32 +- assets/scss/variables/_typography.scss | 41 +- .../scss/variables/_variable-bootstrap.scss | 304 +- assets/scss/variables/_variable-material.scss | 208 +- bower.json | 4 +- build/.eslintrc.doc.json | 21 + build/.htmllintrc | 8 +- build/.stylelintrc | 5 + build/rollup.config.js | 7 +- css/material.css | 31024 ++++++++-------- css/material.css.map | 8 +- css/material.min.css | 15 +- css/material.min.css.map | 2 +- docs-assets/scss/docs.scss | 34 +- docs/4.1/material/dialogs.md | 174 - docs/4.1/material/selection-controls.md | 51 - docs/4.1/material/snackbars.md | 90 - docs/{4.1 => 4.4}/components/alerts.md | 0 docs/{4.1 => 4.4}/components/badge.md | 0 docs/{4.1 => 4.4}/components/breadcrumb.md | 0 docs/{4.1 => 4.4}/components/button-group.md | 0 docs/{4.1 => 4.4}/components/buttons.md | 2 +- docs/{4.1 => 4.4}/components/card.md | 0 docs/{4.1 => 4.4}/components/carousel.md | 12 +- docs/{4.1 => 4.4}/components/collapse.md | 0 docs/{4.1 => 4.4}/components/dropdowns.md | 0 docs/{4.1 => 4.4}/components/forms.md | 0 docs/{4.1 => 4.4}/components/input-group.md | 0 docs/{4.1 => 4.4}/components/jumbotron.md | 0 docs/{4.1 => 4.4}/components/list-group.md | 8 +- docs/{4.1 => 4.4}/components/modal.md | 0 docs/{4.1 => 4.4}/components/navbar.md | 0 docs/{4.1 => 4.4}/components/navs.md | 0 docs/{4.1 => 4.4}/components/pagination.md | 0 docs/{4.1 => 4.4}/components/popovers.md | 0 docs/{4.1 => 4.4}/components/progress.md | 0 docs/{4.1 => 4.4}/components/scrollspy.md | 0 docs/{4.1 => 4.4}/components/tooltips.md | 0 docs/{4.1 => 4.4}/content/code.md | 0 docs/{4.1 => 4.4}/content/figures.md | 0 docs/{4.1 => 4.4}/content/images.md | 0 docs/{4.1 => 4.4}/content/tables.md | 3 +- docs/{4.1 => 4.4}/content/typography.md | 2 +- .../examples/navdrawer-default.html | 0 .../examples/navdrawer-permanent-clipped.html | 0 .../navdrawer-permanent-float-card.html | 0 .../examples/navdrawer-permanent-float.html | 0 .../examples/navdrawer-permanent.html | 0 .../examples/navdrawer-persistent.html | 0 .../examples/navdrawer-right.html | 0 .../examples/navdrawer-temporary.html | 0 .../getting-started/introduction.md | 6 +- .../{4.1 => 4.4}/getting-started/migration.md | 2 +- docs/{4.1 => 4.4}/getting-started/theming.md | 26 +- docs/{4.1 => 4.4}/getting-started/tooling.md | 0 docs/{4.1 => 4.4}/layout/grid.md | 2 +- docs/{4.1 => 4.4}/layout/media-object.md | 0 .../layout/utilities-for-layout.md | 0 docs/{4.1 => 4.4}/material/buttons.md | 4 +- docs/{4.1 => 4.4}/material/cards.md | 0 docs/{4.1 => 4.4}/material/chips.md | 0 .../colours.md => 4.4/material/colors.md} | 8 +- docs/{4.1 => 4.4}/material/data-tables.md | 0 docs/4.4/material/dialogs.md | 230 + .../material/elevation-and-shadows.md | 0 .../{4.1 => 4.4}/material/expansion-panels.md | 0 docs/{4.1 => 4.4}/material/icons.md | 0 docs/{4.1 => 4.4}/material/menu.md | 0 .../material/navigation-drawer.md | 4 +- docs/{4.1 => 4.4}/material/pickers.md | 0 docs/{4.1 => 4.4}/material/progress.md | 2 +- docs/{4.1 => 4.4}/material/steppers.md | 0 docs/{4.1 => 4.4}/material/tabs.md | 0 docs/{4.1 => 4.4}/material/text-fields.md | 0 docs/{4.1 => 4.4}/material/toolbars.md | 0 docs/{4.1 => 4.4}/material/tooltips.md | 0 docs/{4.1 => 4.4}/material/typography.md | 28 +- docs/{4.1 => 4.4}/utilities/borders.md | 2 +- docs/{4.1 => 4.4}/utilities/clearfix.md | 0 docs/{4.1 => 4.4}/utilities/close-icon.md | 0 docs/{4.1 => 4.4}/utilities/colors.md | 0 docs/{4.1 => 4.4}/utilities/display.md | 0 docs/{4.1 => 4.4}/utilities/embed.md | 0 docs/{4.1 => 4.4}/utilities/flex.md | 0 docs/{4.1 => 4.4}/utilities/float.md | 0 .../utilities/image-replacement.md | 0 docs/{4.1 => 4.4}/utilities/position.md | 0 docs/{4.1 => 4.4}/utilities/screenreaders.md | 0 docs/{4.1 => 4.4}/utilities/shadows.md | 0 docs/{4.1 => 4.4}/utilities/sizing.md | 0 docs/{4.1 => 4.4}/utilities/spacing.md | 0 docs/{4.1 => 4.4}/utilities/text.md | 0 docs/{4.1 => 4.4}/utilities/vertical-align.md | 0 docs/{4.1 => 4.4}/utilities/visibility.md | 0 docs/css/docs.css | 151 +- docs/css/docs.css.map | 2 +- docs/css/docs.min.css | 2 +- docs/css/docs.min.css.map | 2 +- docs/images/doc-jumbotron-bg.jpg | Bin 80930 -> 260269 bytes favicon.ico | Bin 1150 -> 7406 bytes index.html | 44 +- js/material.js | 4456 ++- js/material.js.map | 2 +- js/material.min.js | 19 +- js/material.min.js.map | 2 +- package-lock.json | 10082 +++-- package.json | 57 +- 185 files changed, 24436 insertions(+), 25225 deletions(-) create mode 100644 .editorconfig create mode 100644 .stylelintrc create mode 100644 CHANGELOG.md create mode 100644 _layouts/redirect.html create mode 100644 build/.eslintrc.doc.json delete mode 100644 docs/4.1/material/dialogs.md delete mode 100644 docs/4.1/material/selection-controls.md delete mode 100644 docs/4.1/material/snackbars.md rename docs/{4.1 => 4.4}/components/alerts.md (100%) rename docs/{4.1 => 4.4}/components/badge.md (100%) rename docs/{4.1 => 4.4}/components/breadcrumb.md (100%) rename docs/{4.1 => 4.4}/components/button-group.md (100%) rename docs/{4.1 => 4.4}/components/buttons.md (99%) rename docs/{4.1 => 4.4}/components/card.md (100%) rename docs/{4.1 => 4.4}/components/carousel.md (99%) rename docs/{4.1 => 4.4}/components/collapse.md (100%) rename docs/{4.1 => 4.4}/components/dropdowns.md (100%) rename docs/{4.1 => 4.4}/components/forms.md (100%) rename docs/{4.1 => 4.4}/components/input-group.md (100%) rename docs/{4.1 => 4.4}/components/jumbotron.md (100%) rename docs/{4.1 => 4.4}/components/list-group.md (98%) rename docs/{4.1 => 4.4}/components/modal.md (100%) rename docs/{4.1 => 4.4}/components/navbar.md (100%) rename docs/{4.1 => 4.4}/components/navs.md (100%) rename docs/{4.1 => 4.4}/components/pagination.md (100%) rename docs/{4.1 => 4.4}/components/popovers.md (100%) rename docs/{4.1 => 4.4}/components/progress.md (100%) rename docs/{4.1 => 4.4}/components/scrollspy.md (100%) rename docs/{4.1 => 4.4}/components/tooltips.md (100%) rename docs/{4.1 => 4.4}/content/code.md (100%) rename docs/{4.1 => 4.4}/content/figures.md (100%) rename docs/{4.1 => 4.4}/content/images.md (100%) rename docs/{4.1 => 4.4}/content/tables.md (99%) rename docs/{4.1 => 4.4}/content/typography.md (99%) rename docs/{4.1 => 4.4}/examples/navdrawer-default.html (100%) rename docs/{4.1 => 4.4}/examples/navdrawer-permanent-clipped.html (100%) rename docs/{4.1 => 4.4}/examples/navdrawer-permanent-float-card.html (100%) rename docs/{4.1 => 4.4}/examples/navdrawer-permanent-float.html (100%) rename docs/{4.1 => 4.4}/examples/navdrawer-permanent.html (100%) rename docs/{4.1 => 4.4}/examples/navdrawer-persistent.html (100%) rename docs/{4.1 => 4.4}/examples/navdrawer-right.html (100%) rename docs/{4.1 => 4.4}/examples/navdrawer-temporary.html (100%) rename docs/{4.1 => 4.4}/getting-started/introduction.md (98%) rename docs/{4.1 => 4.4}/getting-started/migration.md (98%) rename docs/{4.1 => 4.4}/getting-started/theming.md (94%) rename docs/{4.1 => 4.4}/getting-started/tooling.md (100%) rename docs/{4.1 => 4.4}/layout/grid.md (99%) rename docs/{4.1 => 4.4}/layout/media-object.md (100%) rename docs/{4.1 => 4.4}/layout/utilities-for-layout.md (100%) rename docs/{4.1 => 4.4}/material/buttons.md (99%) rename docs/{4.1 => 4.4}/material/cards.md (100%) rename docs/{4.1 => 4.4}/material/chips.md (100%) rename docs/{4.1/material/colours.md => 4.4/material/colors.md} (93%) rename docs/{4.1 => 4.4}/material/data-tables.md (100%) create mode 100644 docs/4.4/material/dialogs.md rename docs/{4.1 => 4.4}/material/elevation-and-shadows.md (100%) rename docs/{4.1 => 4.4}/material/expansion-panels.md (100%) rename docs/{4.1 => 4.4}/material/icons.md (100%) rename docs/{4.1 => 4.4}/material/menu.md (100%) rename docs/{4.1 => 4.4}/material/navigation-drawer.md (98%) rename docs/{4.1 => 4.4}/material/pickers.md (100%) rename docs/{4.1 => 4.4}/material/progress.md (88%) rename docs/{4.1 => 4.4}/material/steppers.md (100%) rename docs/{4.1 => 4.4}/material/tabs.md (100%) rename docs/{4.1 => 4.4}/material/text-fields.md (100%) rename docs/{4.1 => 4.4}/material/toolbars.md (100%) rename docs/{4.1 => 4.4}/material/tooltips.md (100%) rename docs/{4.1 => 4.4}/material/typography.md (67%) rename docs/{4.1 => 4.4}/utilities/borders.md (98%) rename docs/{4.1 => 4.4}/utilities/clearfix.md (100%) rename docs/{4.1 => 4.4}/utilities/close-icon.md (100%) rename docs/{4.1 => 4.4}/utilities/colors.md (100%) rename docs/{4.1 => 4.4}/utilities/display.md (100%) rename docs/{4.1 => 4.4}/utilities/embed.md (100%) rename docs/{4.1 => 4.4}/utilities/flex.md (100%) rename docs/{4.1 => 4.4}/utilities/float.md (100%) rename docs/{4.1 => 4.4}/utilities/image-replacement.md (100%) rename docs/{4.1 => 4.4}/utilities/position.md (100%) rename docs/{4.1 => 4.4}/utilities/screenreaders.md (100%) rename docs/{4.1 => 4.4}/utilities/shadows.md (100%) rename docs/{4.1 => 4.4}/utilities/sizing.md (100%) rename docs/{4.1 => 4.4}/utilities/spacing.md (100%) rename docs/{4.1 => 4.4}/utilities/text.md (100%) rename docs/{4.1 => 4.4}/utilities/vertical-align.md (100%) rename docs/{4.1 => 4.4}/utilities/visibility.md (100%) diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 000000000..70c00f52d --- /dev/null +++ b/.editorconfig @@ -0,0 +1,15 @@ +# This file is for unifying the coding style for different editors and IDEs +# editorconfig.org + +root = true + +[*] +indent_style = space +indent_size = 2 +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true + +[*.md] +trim_trailing_whitespace = false diff --git a/.gitignore b/.gitignore index 9c393b1db..3b7ab866b 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,7 @@ .sass-cache/ +.jekyll-cache/ bower_components/ gh-pages/ node_modules/ +*.code-workspace +*.iml diff --git a/.stylelintrc b/.stylelintrc new file mode 100644 index 000000000..689be3e00 --- /dev/null +++ b/.stylelintrc @@ -0,0 +1,338 @@ +{ + "extends": [ + "stylelint-config-standard", + "stylelint-config-recommended-scss" + ], + "plugins": [ + "stylelint-order" + ], + "rules": { + "at-rule-empty-line-before": [ + "always", + { + "except": [ + "blockless-after-same-name-blockless", + "first-nested" + ], + "ignore": [ + "after-comment" + ], + "ignoreAtRules": [ + "else" + ] + } + ], + "at-rule-no-vendor-prefix": true, + "at-rule-semicolon-space-before": "never", + "block-closing-brace-newline-after": [ + "always", + { + "ignoreAtRules": [ + "else", + "if" + ] + } + ], + "color-hex-length": "long", + "color-named": "never", + "declaration-block-semicolon-newline-before": "never-multi-line", + "declaration-no-important": true, + "font-family-name-quotes": "always-where-recommended", + "font-weight-notation": [ + "numeric", + { + "ignore": [ + "relative" + ] + } + ], + "font-family-no-missing-generic-family-keyword": [ true, { + "ignoreValues": [ + "Material Icons" + ] + }], + "function-comma-newline-before": "never-multi-line", + "function-url-no-scheme-relative": true, + "function-url-quotes": "always", + "media-feature-name-no-unknown": [ + true, + { + "ignoreMediaFeatureNames": [ + "prefers-reduced-motion" + ] + } + ], + "media-feature-name-no-vendor-prefix": true, + "media-query-list-comma-newline-before": "never-multi-line", + "no-descending-specificity": null, + "no-duplicate-selectors": true, + "order/order": [ + { + "name": "extend", + "type": "at-rule" + }, + { + "hasBlock": false, + "name": "include", + "type": "at-rule" + }, + "declarations", + { + "hasBlock": true, + "type": "at-rule" + }, + { + "selector": "^&[^:]", + "type": "rule" + }, + { + "selector": "^&:", + "type": "rule" + }, + { + "selector": "^[*]", + "type": "rule" + }, + { + "selector": "^[a-z]", + "type": "rule" + }, + { + "selector": "^[.]", + "type": "rule" + }, + { + "type": "rule" + } + ], + "order/properties-order": [ + "align-content", + "align-items", + "align-self", + "animation", + "animation-delay", + "animation-direction", + "animation-duration", + "animation-fill-mode", + "animation-iteration-count", + "animation-name", + "animation-play-state", + "animation-timing-function", + "appearance", + "backface-visibility", + "background", + "background-attachment", + "background-clip", + "background-color", + "background-image", + "background-position", + "background-repeat", + "background-size", + "border", + "border-top", + "border-right", + "border-bottom", + "border-left", + "border-collapse", + "border-color", + "border-top-color", + "border-right-color", + "border-bottom-color", + "border-left-color", + "border-radius", + "border-top-left-radius", + "border-top-right-radius", + "border-bottom-right-radius", + "border-bottom-left-radius", + "border-spacing", + "border-style", + "border-top-style", + "border-right-style", + "border-bottom-style", + "border-left-style", + "border-width", + "border-top-width", + "border-right-width", + "border-bottom-width", + "border-left-width", + "box-shadow", + "box-sizing", + "caption-side", + "clear", + "clip", + "clip-path", + "color", + "columns", + "column-count", + "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", + "filter", + "flex", + "flex-basis", + "flex-direction", + "flex-flow", + "flex-grow", + "flex-shrink", + "flex-wrap", + "float", + "font", + "font-effect", + "font-emphasize", + "font-emphasize-position", + "font-emphasize-style", + "font-family", + "font-size", + "font-size-adjust", + "font-smoothing", + "font-stretch", + "font-style", + "font-variant", + "font-weight", + "height", + "hyphens", + "justify-content", + "letter-spacing", + "line-height", + "list-style", + "list-style-image", + "list-style-position", + "list-style-type", + "margin", + "margin-top", + "margin-right", + "margin-bottom", + "margin-left", + "margin-collapse", + "margin-top-collapse", + "margin-right-collapse", + "margin-bottom-collapse", + "margin-left-collapse", + "mask", + "mask-image", + "max-height", + "max-width", + "min-height", + "min-width", + "nav-index", + "nav-up", + "nav-right", + "nav-down", + "nav-left", + "opacity", + "order", + "orphans", + "outline", + "outline-color", + "outline-offset", + "outline-style", + "outline-width", + "overflow", + "overflow-x", + "overflow-y", + "padding", + "padding-top", + "padding-right", + "padding-bottom", + "padding-left", + "page-break-after", + "page-break-before", + "page-break-inside", + "perspective", + "perspective-origin", + "pointer-events", + "position", + "top", + "right", + "bottom", + "left", + "quotes", + "resize", + "size", + "speak", + "src", + "stroke", + "stroke-dasharray", + "stroke-dashoffset", + "stroke-linecap", + "stroke-width", + "tab-size", + "table-layout", + "text-align", + "text-align-last", + "text-decoration", + "text-emphasis", + "text-emphasis-color", + "text-emphasis-position", + "text-emphasis-style", + "text-indent", + "text-justify", + "text-overflow", + "text-overflow-ellipsis", + "text-overflow-mode", + "text-rendering", + "text-outline", + "text-shadow", + "text-transform", + "text-wrap", + "touch-action", + "transform", + "transform-origin", + "transform-style", + "transition", + "transition-delay", + "transition-duration", + "transition-property", + "transition-timing-function", + "unicode-bidi", + "user-select", + "vertical-align", + "visibility", + "white-space", + "width", + "windows", + "word-break", + "word-spacing", + "word-wrap", + "z-index", + "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", + "selector-max-attribute": 2, + "selector-max-class": 4, + "selector-max-combinators": 4, + "selector-max-compound-selectors": 4, + "selector-max-empty-lines": 1, + "selector-max-id": 0, + "selector-max-type": 2, + "selector-max-universal": 1, + "selector-no-qualifying-type": true, + "selector-no-vendor-prefix": true, + "string-quotes": "single", + "value-keyword-case": "lower", + "value-list-comma-newline-before": "never-multi-line", + "value-no-vendor-prefix": true + } +} \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 000000000..ec5408a26 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,69 @@ +# CHANGELOG + +## What's in next version 4.4.1 - alpha 2 +Expansion panels according to MD v2 +Links used as buttons aspect on hover + +CSS +https://github.com/twbs/bootstrap/pull/28275 + #27890: Fix buttons :focus state styles + #28275: Change :disabled to [disabled] for Edge + #28328: Change word-break: break-word to word-wrap: break-word in elements + #28365: Fix border if only one card in accordion + #28400: Disable _assert-ascending function's check if the previous unit was a percent value + #28417: Fix scrollbars in screenreader utilities + #28447: Prevent form validation mixin from generating invalid CSS + #28464: Sync plain text font-size with $input-font-size + #28530: Fix prefers-reduced-motion for animated progress bars + #28567: Remove duplicate $table-dark-color variable + #28585, #28775: Calculate modal header/footer border radius according to the border width + #28633: Add variable for .custom-control-label's color + #28733: Fix incorrect variable for popover border radius + #28782, #28785: Cleanup .input-group's use of flex-basis. + #28784: Adjust z-index on pagination according to our z-index rules + #28814: Fix background position for form-validation + #28852: Adjust position of browser validation messages on custom checks and radios + #28883: Add width and height to SVG background-images for IE10 + #28938: Deprecated bg-variant() mixin + #28944: Move to exclamation icon on invalid form fields to avoid implying "clear field" functionality + #28956: Remove redundant radius properties on .list-group-item + #29077: Use escape-svg() function + #29095: Add responsive containers + https://github.com/twbs/bootstrap/commit/2892675f65d0089fc907f664dfee6487e95d95cc + #29268 Deprecate text-emphasis-variant() mixin + #29073: Add row columns for responsive card decks and more + +## 4.4.1 - alpha 1 ++ NPM support by @tiberiumihai ++ BS 4.4.1 grid support ++ Enhenced date picker + +FIXED Datepicker autoclosing +FIXED Helper text left padding for textfield-box inputs +FIXED Indeterminate custom checkbox color (when checkbox is not disabled) + +## RC-4 + +FIXED Links used as elements (dropdown-items, ...) aspect on hover +FIXED Picker input if disabled or readonly + +## RC-3 + ++ chips look like Material Design v2 ++ chip outline style ++ chip choice ++ chip filter +FIXED Buttons on links hover effect + +## RC-2 + +### Bug fixes + +* Modal margins enhenced +* Primary color tweaked +* Tables overflowing of container + +### Removals + +Because they are no longer in Material design guidelines. +* Vertical card actions \ No newline at end of file diff --git a/Gemfile b/Gemfile index da8b3aa14..692aa54a2 100644 --- a/Gemfile +++ b/Gemfile @@ -1,8 +1,11 @@ source 'https://rubygems.org' group :development, :test do - gem 'jekyll', '~> 3.8.0' - gem 'jekyll-redirect-from', '~> 0.13.0' - gem 'jekyll-sitemap', '~> 1.2.0' - gem 'jekyll-toc', '~> 0.5.1' + gem 'jekyll', '>= 4.0.0' + gem 'jekyll-target-blank', '>= 2.0.0' + gem 'jekyll-redirect-from', '>= 0.15.0' + gem 'jekyll-sitemap', '>= 1.4.0' + gem 'jekyll-toc', '>= 0.12.2' + gem 'rouge', '>= 3.14.0' + gem 'wdm', '>= 0.1.1' if Gem.win_platform? end diff --git a/Gemfile.lock b/Gemfile.lock index c2fac1783..dbe88bf65 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,75 +1,91 @@ GEM remote: https://rubygems.org/ specs: - addressable (2.5.2) - public_suffix (>= 2.0.2, < 4.0) + addressable (2.7.0) + public_suffix (>= 2.0.2, < 5.0) colorator (1.1.0) - concurrent-ruby (1.0.5) + concurrent-ruby (1.1.5) em-websocket (0.5.1) eventmachine (>= 0.12.9) http_parser.rb (~> 0.6.0) - eventmachine (1.2.5) - ffi (1.9.23) + eventmachine (1.2.7) + eventmachine (1.2.7-x64-mingw32) + ffi (1.11.3) + ffi (1.11.3-x64-mingw32) forwardable-extended (2.6.0) http_parser.rb (0.6.0) - i18n (0.9.5) + i18n (1.7.0) concurrent-ruby (~> 1.0) - jekyll (3.8.0) + jekyll (4.0.0) addressable (~> 2.4) colorator (~> 1.0) em-websocket (~> 0.5) - i18n (~> 0.7) - jekyll-sass-converter (~> 1.0) + i18n (>= 0.9.5, < 2) + jekyll-sass-converter (~> 2.0) jekyll-watch (~> 2.0) - kramdown (~> 1.14) + kramdown (~> 2.1) + kramdown-parser-gfm (~> 1.0) liquid (~> 4.0) mercenary (~> 0.3.3) pathutil (~> 0.9) - rouge (>= 1.7, < 4) + rouge (~> 3.0) safe_yaml (~> 1.0) - jekyll-redirect-from (0.13.0) - jekyll (~> 3.3) - jekyll-sass-converter (1.5.2) - sass (~> 3.4) - jekyll-sitemap (1.2.0) - jekyll (~> 3.3) - jekyll-toc (0.5.2) - nokogiri (~> 1.6) - jekyll-watch (2.0.0) + terminal-table (~> 1.8) + jekyll-redirect-from (0.15.0) + jekyll (>= 3.3, < 5.0) + jekyll-sass-converter (2.0.1) + sassc (> 2.0.1, < 3.0) + jekyll-sitemap (1.4.0) + jekyll (>= 3.7, < 5.0) + jekyll-target-blank (2.0.0) + jekyll (>= 3.0, < 5.0) + nokogiri (~> 1.10) + jekyll-toc (0.12.2) + nokogiri (~> 1.9) + jekyll-watch (2.2.1) listen (~> 3.0) - kramdown (1.16.2) - liquid (4.0.0) - listen (3.1.5) - rb-fsevent (~> 0.9, >= 0.9.4) - rb-inotify (~> 0.9, >= 0.9.7) - ruby_dep (~> 1.2) + kramdown (2.1.0) + kramdown-parser-gfm (1.1.0) + kramdown (~> 2.0) + liquid (4.0.3) + listen (3.2.1) + rb-fsevent (~> 0.10, >= 0.10.3) + rb-inotify (~> 0.9, >= 0.9.10) mercenary (0.3.6) - mini_portile2 (2.3.0) - nokogiri (1.8.2) - mini_portile2 (~> 2.3.0) - pathutil (0.16.1) + mini_portile2 (2.4.0) + nokogiri (1.10.7) + mini_portile2 (~> 2.4.0) + nokogiri (1.10.7-x64-mingw32) + mini_portile2 (~> 2.4.0) + pathutil (0.16.2) forwardable-extended (~> 2.6) - public_suffix (3.0.2) + public_suffix (4.0.1) rb-fsevent (0.10.3) - rb-inotify (0.9.10) - ffi (>= 0.5.0, < 2) - rouge (3.1.1) - ruby_dep (1.5.0) - safe_yaml (1.0.4) - sass (3.5.6) - sass-listen (~> 4.0.0) - sass-listen (4.0.0) - rb-fsevent (~> 0.9, >= 0.9.4) - rb-inotify (~> 0.9, >= 0.9.7) + rb-inotify (0.10.0) + ffi (~> 1.0) + rouge (3.14.0) + safe_yaml (1.0.5) + sassc (2.2.1) + ffi (~> 1.9) + sassc (2.2.1-x64-mingw32) + ffi (~> 1.9) + terminal-table (1.8.0) + unicode-display_width (~> 1.1, >= 1.1.1) + unicode-display_width (1.6.0) + wdm (0.1.1) PLATFORMS ruby + x64-mingw32 DEPENDENCIES - jekyll (~> 3.8.0) - jekyll-redirect-from (~> 0.13.0) - jekyll-sitemap (~> 1.2.0) - jekyll-toc (~> 0.5.1) + jekyll (>= 4.0.0) + jekyll-redirect-from (>= 0.15.0) + jekyll-sitemap (>= 1.4.0) + jekyll-target-blank (>= 2.0.0) + jekyll-toc (>= 0.12.2) + rouge (>= 3.14.0) + wdm (>= 0.1.1) BUNDLED WITH - 1.16.1 + 2.1.0 diff --git a/README.md b/README.md index 8a60c4e49..010242583 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,18 @@ # Material -Daemonite's Material UI is a cross-platform and fully responsive front-end interface based on Google Material Design developed using Bootstrap 4. +[![Backers on Open Collective](https://opencollective.com/material/backers/badge.svg)](#backers) +[![Sponsors on Open Collective](https://opencollective.com/material/sponsors/badge.svg)](#sponsors) -The basic idea behind this project is to combine the front-end technology of the popular Bootstrap framework with the visual language of Google Material Design. +> **DISCLAIMER**: This framework has been created by [Daemonite team](http://daemonite.github.io/material/). As they are not active for now, we enhence this framework until they come back to maintain the project. + +Daemonite's Material UI 2 is a cross-platform and fully responsive front-end interface based on Google Material Design 2 developed using Bootstrap 4. + +The basic idea behind this project is to combine the front-end technology of the popular Bootstrap framework with the visual language of Google Material Design 2. > A visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. This is material design. -> http://www.google.com/design/spec/material-design/introduction.html +> https://material.io/design/introduction/ -Feel free to check out our [documentation site](http://daemonite.github.io/material/) or let us know what you think at the [Daemon Labs](http://labs.daemon.com.au) forum. +Feel free to check out our [documentation site](http://djibe.github.io/material2/) or let us know what you think in the Issues tab of this repository. The primary goal of this project is to give all Bootstrap components and elements a Google Material Design look, so it allows web developers to continue using the exact same Bootstrap HTML markup they are familiar with, but presents them a final outcome that is in line with the principles and specifics of Google Material Design. @@ -15,6 +20,33 @@ A secondary goal of this project is to add support for some unique Google Materi Because these components will require additional markup (some may require additional JavaScript), they will be documented separately in Material's documentation. +## :pray: + +This project exists thanks to all the people who contribute. + + + +### Backers + +Thank you to all our backers! [[Become a backer](https://opencollective.com/material#backer)] + + + +### Sponsors + +Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/material#sponsor)] + + + + + + + + + + + + ## Table of contents - [Content](#content) @@ -54,7 +86,7 @@ daemonite-material/ │ ├── material.min.css │ └── material.min.css.map ├── docs/ -│ └── 4.1/ +│ └── 4.4/ └── js/ ├── material.js ├── material.js.map @@ -64,21 +96,21 @@ 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 . The docs may also be run locally. +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 . The docs may also be run locally. ### Running documentation locally -1. Run through the [tooling setup](http://daemonite.github.io/material/docs/4.1/getting-started/tooling/#getting-started) to install Jekyll and other Ruby dependencies with `bundle install`. +1. Run through the [tooling setup](http://djibe.github.io/material2/docs/4.4/getting-started/tooling/#getting-started) to install Jekyll and other Ruby dependencies with `bundle install`. 2. Run `npm install` to install Node.js dependencies. 3. Run `npm run dist` and `npm run docs` to rebuild distributed CSS and JavaScript files, as well as docs assets. -4. From the root `/daemonite-material` directory, run `npm run docs-serve` in the command line. -5. Open `http://localhost:9999/material` in your browser, and voilà. +4. From the root `/material2` directory, run `npm run docs-serve` in the command line. +5. Open `http://localhost:9999/material2` in your browser, and voilà. ## Quick start Several quick start options are available: -- Clone the repo: `git clone https://github.com/Daemonite/material.git` +- Clone the repo: `git clone https://github.com/djibe/material2.git` - Download the [latest release](https://github.com/Daemonite/material/releases) -- Install with [bower](https://bower.io/): `bower install daemonite-material` -- Install with [npm](https://www.npmjs.com/): `npm install daemonite-material` +- Install with [bower](https://bower.io/): **TODO** +- Install with [npm](https://www.npmjs.com/): **TODO** diff --git a/_config.yml b/_config.yml index 45e99388a..600515329 100644 --- a/_config.yml +++ b/_config.yml @@ -17,10 +17,11 @@ plugins: - jekyll-redirect-from - jekyll-sitemap - jekyll-toc + - jekyll-target-blank # server -baseurl: "/material" # workaround for our GitHub Pages hosting -destination: "gh-pages/material" # workaround for our GitHub Pages hosting +baseurl: "/material2" # workaround for our GitHub Pages hosting +destination: "gh-pages/material2" # workaround for our GitHub Pages hosting encoding: "UTF-8" exclude: - .babelrc.js @@ -43,11 +44,11 @@ exclude: host: 0.0.0.0 port: 9999 source: "." -url: "http://daemonite.github.io" +url: "http://djibe.github.io" # social authors: "Daemonite" -description: "Daemonite's Material UI is a cross-platform and fully responsive front-end interface based on Google Material Design developed using Bootstrap 4." +description: "Daemonite's Material UI 2 is a cross-platform and fully responsive front-end interface based on Google Material Design developed using Bootstrap 4." title: "Material" # toc @@ -57,24 +58,24 @@ toc: # vars cdn: - bs_css: "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" - bs_css_docs: "https://getbootstrap.com/docs/4.1/assets/css/docs.min.css" - bs_css_hash: "sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" - bs_js: "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" - bs_js_hash: "sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" - 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|Roboto+Mono:300,400,700|Roboto+Slab:300,400,700" + bs_css: "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" + bs_css_docs: "https://getbootstrap.com/docs/4.4/assets/css/docs.min.css" + bs_css_hash: "sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" + bs_js: "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" + bs_js_hash: "sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" + jquery: "https://code.jquery.com/jquery-3.4.1.slim.min.js" + jquery_hash: "sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" + md_font: "https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i|Roboto+Mono:300,400,700|Roboto+Slab:300,400,700&display=swap" md_icon: "https://fonts.googleapis.com/icon?family=Material+Icons" - popper: "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" - popper_hash: "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" -current_version: "4.1.1" -docs_version: "4.1" + popper: "https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" + popper_hash: "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" +current_version: "4.4.1" +docs_version: "4.4" download: - source: "https://github.com/Daemonite/material/archive/v4.1.1.zip" - dist: "https://github.com/Daemonite/material/releases/download/v4.1.1/material-4.1.1-dist.zip" + source: "https://github.com/djibe/material2/archive/v4.4.1.zip" + dist: "https://github.com/djibe/material2/releases/download/v4.4.1/material-4.4.1-dist.zip" id: main: "doc-main-h1" navbar: "doc-navbar" navdrawer: "doc-navdrawer" -repo: "https://github.com/Daemonite/material" +repo: "https://github.com/djibe/material2" diff --git a/_data/nav.yml b/_data/nav.yml index 0cacf1d6a..c28708e4d 100644 --- a/_data/nav.yml +++ b/_data/nav.yml @@ -68,7 +68,7 @@ - title: Buttons - title: Cards - title: Chips - - title: Colours + - title: Colors - title: Data tables - title: Dialogs - title: Elevation and shadows @@ -78,8 +78,6 @@ - title: Navigation drawer - title: Pickers - title: Progress - - title: Selection controls - - title: Snackbars - title: Steppers - title: Tabs - title: Text fields 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/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')}
`) + $('.picker-wrap', datepickerRoot).prepend(`
${datepickerApi.get(datepickerValue, 'yyyy')}
${datepickerApi.get(datepickerValue, 'dddd')}${datepickerApi.get(datepickerValue, 'mmm')}${datepickerApi.get(datepickerValue, 'd')}
`) } show() { diff --git a/assets/scss/_colors.scss b/assets/scss/_colors.scss index 9e7ad548f..a6ec49506 100644 --- a/assets/scss/_colors.scss +++ b/assets/scss/_colors.scss @@ -692,13 +692,13 @@ $colors: map-merge( // Black and white // Based on https://material.google.com/style/color.html#color-text-background-colors -$black: #000 !default; +$black: #000000 !default; -$black-primary-opacity: .87 !default; -$black-caption-opacity: .60 !default; // Form helper text -$black-secondary-opacity: .54 !default; -$black-hint-opacity: .38 !default; -$black-divider-opacity: .12 !default; +$black-primary-opacity: 0.87 !default; +$black-caption-opacity: 0.6 !default; // Form helper text +$black-secondary-opacity: 0.54 !default; +$black-hint-opacity: 0.38 !default; +$black-divider-opacity: 0.12 !default; $black-primary: rgba($black, $black-primary-opacity) !default; $black-caption: rgba($black, $black-caption-opacity) !default; @@ -706,11 +706,11 @@ $black-secondary: rgba($black, $black-secondary-opacity) !default; $black-hint: rgba($black, $black-hint-opacity) !default; $black-divider: rgba($black, $black-divider-opacity) !default; -$white: #fff !default; +$white: #ffffff !default; $white-primary-opacity: 1 !default; -$white-secondary-opacity: .7 !default; -$white-hint-opacity: .5 !default; +$white-secondary-opacity: 0.7 !default; +$white-hint-opacity: 0.5 !default; $white-divider-opacity: $black-divider-opacity !default; $white-primary: rgba($white, $white-primary-opacity) !default; @@ -721,19 +721,19 @@ $white-divider: rgba($white, $white-divider-opacity) !default; // States // Based on https://material.io/design/interaction/states.html#usage -$overlay-hover-colored-opacity: .08 !default; -$overlay-focus-colored-opacity: .24 !default; -$overlay-selected-colored-opacity: .16 !default; -$overlay-activated-colored-opacity: .24 !default; -$overlay-pressed-colored-opacity: .32 !default; -$overlay-dragged-colored-opacity: .16 !default; - -$overlay-hover-white-opacity: .04 !default; -$overlay-focus-white-opacity: .12 !default; -$overlay-selected-white-opacity: .08 !default; -$overlay-activated-white-opacity: .12 !default; -$overlay-pressed-white-opacity: .16 !default; -$overlay-dragged-white-opacity: .08 !default; +$overlay-hover-colored-opacity: 0.08 !default; +$overlay-focus-colored-opacity: 0.24 !default; +$overlay-selected-colored-opacity: 0.16 !default; +$overlay-activated-colored-opacity: 0.24 !default; +$overlay-pressed-colored-opacity: 0.32 !default; +//$overlay-dragged-colored-opacity: .16 !default; + +$overlay-hover-white-opacity: 0.04 !default; +$overlay-focus-white-opacity: 0.12 !default; +$overlay-selected-white-opacity: 0.08 !default; +$overlay-activated-white-opacity: 0.12 !default; +$overlay-pressed-white-opacity: 0.16 !default; +//$overlay-dragged-white-opacity: .08 !default; // Theme // Based on https://material.google.com/style/color.html#color-themes diff --git a/assets/scss/_functions.scss b/assets/scss/_functions.scss index 883da04d8..a3ed84465 100644 --- a/assets/scss/_functions.scss +++ b/assets/scss/_functions.scss @@ -1,8 +1,9 @@ @mixin _assert-ascending($map, $map-name) { $prev-key: null; $prev-num: null; + @each $key, $num in $map { - @if $prev-num == null or unit($num) == "%" { + @if $prev-num == null or unit($num) == '%' { // Do nothing } @else if not comparable($num, $prev-num) { @warn 'Potentially invalid value for #{$map-name}: This map must be in ascending order, but key "#{$key}" has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key "#{$prev-key}"!'; @@ -17,11 +18,12 @@ // Starts at zero // Used to ensure the min-width of the lowest breakpoint starts at 0. -@mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") { +@mixin _assert-starts-at-zero($map, $map-name: '$grid-breakpoints') { $values: map-values($map); $first-value: nth($values, 1); + @if $first-value != 0 { - @warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}."; + @warn 'First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.'; } } diff --git a/assets/scss/_mixins.scss b/assets/scss/_mixins.scss index 9e6c87c09..ce176d153 100644 --- a/assets/scss/_mixins.scss +++ b/assets/scss/_mixins.scss @@ -1,27 +1,27 @@ -@import "mixins/deprecate"; +@import 'mixins/deprecate'; // Utilities @import 'mixins/breakpoints'; @import 'mixins/hover'; @import 'mixins/image'; -//@import "mixins/badge"; -@import "mixins/resize"; +//@import 'mixins/badge'; +@import 'mixins/resize'; @import 'mixins/screen-reader'; -//@import "mixins/size"; -@import "mixins/reset-text"; +//@import 'mixins/size'; +@import 'mixins/reset-text'; @import 'mixins/text-emphasis'; @import 'mixins/text-hide'; @import 'mixins/text-truncate'; -@import "mixins/visibility"; +@import 'mixins/visibility'; // Components -//@import "mixins/alert"; -//@import "mixins/buttons"; -//@import "mixins/pagination"; -@import "mixins/lists"; +//@import 'mixins/alert'; +//@import 'mixins/buttons'; +//@import 'mixins/pagination'; +@import 'mixins/lists'; @import 'mixins/nav-divider'; @import 'mixins/forms'; -//@import "mixins/table-row"; +//@import 'mixins/table-row'; // Skins @import 'mixins/background-variant'; @@ -36,6 +36,5 @@ // Material @import 'mixins/material-icons'; -@import 'mixins/reset-text'; @import 'mixins/text-alignment'; @import 'mixins/typography'; diff --git a/assets/scss/_print.scss b/assets/scss/_print.scss index be981656a..18e1b0153 100644 --- a/assets/scss/_print.scss +++ b/assets/scss/_print.scss @@ -2,21 +2,22 @@ @if $enable-print-styles { @media print { - *, *::before, *::after { - text-shadow: none !important; box-shadow: none !important; + text-shadow: none !important; } a:not(.btn) { text-decoration: underline; } + // stylelint-disable abbr[title]::after { - content: " ("attr(title) ") "; + content: ' ("attr(title) ") '; } + // stylelint-enable pre { white-space: pre-wrap !important; @@ -24,7 +25,7 @@ pre, blockquote { - border: $border-width solid rgba($black, .12); + border: $border-width solid rgba($black, 0.12); page-break-inside: avoid; } @@ -49,9 +50,11 @@ page-break-inside: avoid; } + // stylelint-disable @page { size: $print-page-size; } + // stylelint-enable body { min-width: $print-body-min-width !important; @@ -79,7 +82,6 @@ } .table-bordered { - th, td { border: 1px solid $border-color-solid; @@ -92,18 +94,17 @@ th, td, thead th, - tbody+tbody { + tbody + tbody { border-color: $border-color-solid; } } .table .thead-dark th { - color: inherit; border-color: $border-color-solid; + color: inherit; } - -// ADDITIONS + // ADDITIONS .card { border: $border-width solid $border-color-solid; diff --git a/assets/scss/_utilities.scss b/assets/scss/_utilities.scss index 577336f7b..1d2d9d53f 100644 --- a/assets/scss/_utilities.scss +++ b/assets/scss/_utilities.scss @@ -5,7 +5,7 @@ @import 'utilities/borders'; @import 'utilities/clearfix'; @import 'utilities/display'; -@import "utilities/embed"; +@import 'utilities/embed'; @import 'utilities/flex'; @import 'utilities/float'; @import 'utilities/overflow'; diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss index 34ff7fece..155638f10 100644 --- a/assets/scss/_variables.scss +++ b/assets/scss/_variables.scss @@ -1,10 +1,15 @@ -// Sass option +// Options +// +// Quickly modify global styling by enabling or disabling optional features. $enable-grid-classes: true !default; -$enable-negative-margins: true !default; // Include negative margin/padding utilities -$enable-print-styles: true !default; $enable-pointer-cursor-for-buttons: true !default; +$enable-print-styles: true !default; +//$enable-responsive-font-sizes: false !default; // TODO $enable-validation-icons: true !default; +$enable-deprecation-messages: true !default; + +//$enable-negative-margins: true !default; // Include negative margin/padding utilities $enable-validation-valid: true !default; // Apply Success color to valid inputs (not recommended) $secondary-color-for-controls: false !default; // Use secondary color for selection/inputs (primary color otherwise, not recommended) diff --git a/assets/scss/base/_base.scss b/assets/scss/base/_base.scss index cea008c05..cdba97860 100644 --- a/assets/scss/base/_base.scss +++ b/assets/scss/base/_base.scss @@ -13,7 +13,7 @@ } } } - + @each $bp, $value in $grid-breakpoints { --breakpoint-#{$bp}: #{$value}; } @@ -32,43 +32,43 @@ *::before, *::after { box-sizing: border-box; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } -/* -// Dropped in latest BS commits html { font-family: sans-serif; line-height: 1.15; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: $webkit-tap-highlight-color; -}*/ - -/*article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { - display: block; -}*/ - -html { - -ms-overflow-style: -ms-autohiding-scrollbar; } -main { +article, +aside, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section { display: block; } body { - margin: 0; + @include text-align(left); + + background-color: $body-bg; + color: $body-color; font-family: $font-family-base; - font-size: ($font-size-base * .875); + font-size: ($font-size-base * 0.875); font-weight: $font-weight-base; line-height: $line-height-base; - color: $body-color; - @include text-align(left); - background-color: $body-bg; - -webkit-text-size-adjust: 100%; - -webkit-tap-highlight-color: $webkit-tap-highlight-color; + margin: 0; } -[tabindex="-1"]:focus:not(:focus-visible) { +[tabindex='-1']:focus:not(:focus-visible) { outline: 0 !important; } @@ -78,7 +78,12 @@ hr { overflow: visible; } -h1, h2, h3, h4, h5, h6 { +h1, +h2, +h3, +h4, +h5, +h6 { margin-top: 0; margin-bottom: $headings-margin-y; } @@ -90,17 +95,17 @@ p { abbr[title], abbr[data-original-title] { + border-bottom: 0; + cursor: help; text-decoration: underline; text-decoration: underline dotted; - cursor: help; - border-bottom: 0; text-decoration-skip-ink: none; } address { - margin-bottom: $paragraph-margin-y; font-style: normal; line-height: inherit; + margin-bottom: $paragraph-margin-y; } ol, @@ -135,31 +140,28 @@ strong { font-weight: $font-weight-bolder; } -small { - font-size: 80%; -} +small { font-size: 80%; } sub, sup { - position: relative; font-size: 75%; line-height: 0; + position: relative; vertical-align: baseline; } -sub { bottom: -.25em; } +sub { bottom: -0.25em; } -sup { top: -.5em; } +sup { top: -0.5em; } // // Links // a { + background-color: transparent; color: $link-color; text-decoration: $link-decoration; - background-color: transparent; - -webkit-text-decoration-skip: objects; &:hover { color: $link-color-hover; @@ -167,18 +169,14 @@ a { } } -a:not([href]):not([tabindex]) { +a:not([href]) { color: inherit; text-decoration: none; - @include hover-focus { //hfa + &:hover { color: inherit; text-decoration: none; } - - &:focus { - outline: 0; - } } // @@ -206,8 +204,8 @@ figure { // Images img { - vertical-align: middle; border-style: none; + vertical-align: middle; } svg { @@ -222,12 +220,12 @@ table { } caption { - padding: $table-thead-padding-y $table-cell-padding-x-alt; - color: $table-caption-color; @include text-align(left); - caption-side: bottom; @include typography-caption; - //min-height: $table-thead-cell-height; + + caption-side: bottom; + color: $table-caption-color; + padding: $table-thead-padding-y $table-cell-padding-x-alt; } th { @@ -239,10 +237,11 @@ th { // label { - display: inline-block; @include typography-caption; + color: $textfield-hint-color; - // margin-bottom: $label-margin-bottom; + display: inline-block; + user-select: none; } button { @@ -259,10 +258,10 @@ button, select, optgroup, textarea { - margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; + margin: 0; } button, @@ -277,47 +276,54 @@ select { select { word-wrap: normal; + + &[multiple], + &[size] { + overflow: auto; + } } button, -[type="button"], -[type="reset"], -[type="submit"] { +[type='button'], +[type='reset'], +[type='submit'] { -webkit-appearance: button; } @if $enable-pointer-cursor-for-buttons { button, - [type="button"], - [type="reset"], - [type="submit"] { + [type='button'], + [type='reset'], + [type='submit'] { &:not(:disabled) { cursor: pointer; } } - .btn:not(.disabled):not(:disabled) { + + .btn:not(.disabled):not(:disabled), + input:enabled + label:hover { cursor: pointer; } } button::-moz-focus-inner, -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner { - padding: 0; +[type='button']::-moz-focus-inner, +[type='reset']::-moz-focus-inner, +[type='submit']::-moz-focus-inner { border-style: none; + padding: 0; } -input[type="radio"], -input[type="checkbox"] { +input[type='radio'], +input[type='checkbox'] { box-sizing: border-box; padding: 0; } -input[type="date"], -input[type="time"], -input[type="datetime-local"], -input[type="month"] { +input[type='date'], +input[type='time'], +input[type='datetime-local'], +input[type='month'] { -webkit-appearance: listbox; } @@ -327,44 +333,45 @@ textarea { } fieldset { + border: 0; + margin: 0; min-width: 0; padding: 0; - margin: 0; - border: 0; } legend { + @include typography-headline-6; + + color: inherit; display: block; - width: 100%; + margin-bottom: $headings-margin-y; max-width: 100%; padding: 0; - margin-bottom: $headings-margin-y; - @include typography-headline-6; - color: inherit; white-space: normal; + width: 100%; } progress { vertical-align: baseline; } -[type="number"]::-webkit-inner-spin-button, -[type="number"]::-webkit-outer-spin-button { +[type='number']::-webkit-inner-spin-button, +[type='number']::-webkit-outer-spin-button { height: auto; } -[type="search"] { - outline-offset: -2px; +[type='search'] { -webkit-appearance: none; + outline-offset: -2px; } -[type="search"]::-webkit-search-decoration { +[type='search']::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { - font: inherit; -webkit-appearance: button; + font: inherit; } // @@ -376,8 +383,8 @@ output { } summary { - display: list-item; cursor: pointer; + display: list-item; } template { @@ -388,16 +395,8 @@ template { display: none !important; } - // Additions -select { - &[multiple], - &[size] { - overflow: auto; - } -} - mark { background-color: $mark-bg; color: $mark-color; @@ -415,5 +414,10 @@ dfn { } ::selection { - background: rgba(theme-color(primary), $overlay-selected-white-opacity); // Material Addition -} \ No newline at end of file + background: rgba(theme-color('primary'), $overlay-selected-white-opacity); // Material Addition +} + +.disabled:hover, +:disabled:hover { + cursor: default; +} diff --git a/assets/scss/base/_grid.scss b/assets/scss/base/_grid.scss index a22751537..113d2cce8 100644 --- a/assets/scss/base/_grid.scss +++ b/assets/scss/base/_grid.scss @@ -3,26 +3,36 @@ // Set the container width, and override it for fixed navbars in media queries. @if $enable-grid-classes { + // Single container class with breakpoint max-widths .container { @include make-container(); @include make-container-max-widths(); } -} - -// Fluid container -// -// Utilizes the mixin meant for fixed width containers, but with 100% width for -// fluid, full width layouts. -@if $enable-grid-classes { + // 100% wide container at all breakpoints .container-fluid { @include make-container(); } + + // Responsive containers that are 100% wide until a breakpoint + // stylelint-disable + @each $breakpoint, $container-max-width in $container-max-widths { + .container-#{$breakpoint} { + @include make-container(); + } + + @include media-breakpoint-up($breakpoint, $grid-breakpoints) { + .container-#{$breakpoint} { + max-width: $container-max-width; + } + } + } + // stylelint-enable } // Row // -// Rows contain and clear the floats of your columns. +// Rows contain your columns. @if $enable-grid-classes { .row { @@ -36,7 +46,7 @@ margin-left: 0; > .col, - > [class*="col-"] { + > [class*='col-'] { padding-right: 0; padding-left: 0; } diff --git a/assets/scss/base/_typography.scss b/assets/scss/base/_typography.scss index ea4c4ac69..b6a9d4b11 100644 --- a/assets/scss/base/_typography.scss +++ b/assets/scss/base/_typography.scss @@ -1,31 +1,38 @@ // // Headings -// +// Keep compatibility for Material UI v1 +.typography-display-4, .typography-headline-1 { @include typography-headline-1; } +.typography-display-3, .typography-headline-2 { @include typography-headline-2; } +.typography-display-2, .typography-headline-3 { @include typography-headline-3; } +.typography-display-1, .typography-headline-4 { @include typography-headline-4; } +.typography-headline, .typography-headline-5 { @include typography-headline-5; } -.typography-headline-6 { +.typography-headline-6, +.typography-title { @include typography-headline-6; } +.typography-subheading, .typography-subtitle-1 { @include typography-subtitle-1; } @@ -52,25 +59,44 @@ // Headings - bootstrap classes -h1, h2, h3, h4, h5, h6, -.h1, .h2, .h3, .h4, .h5, .h6 { +h1, +h2, +h3, +h4, +h5, +h6, +.h1, +.h2, +.h3, +.h4, +.h5, +.h6 { color: $headings-color; font-family: $headings-font-family; margin-bottom: $headings-margin-y; } -h1, .h1, .display-1 { @include typography-headline-1; } - -h2, .h2, .display-2 { @include typography-headline-2; } +h1, +.h1, +.display-1 { @include typography-headline-1; } -h3, .h3, .display-3 { @include typography-headline-3; } +h2, +.h2, +.display-2 { @include typography-headline-2; } -h4, .h4, .display-4 { @include typography-headline-4; } +h3, +.h3, +.display-3 { @include typography-headline-3; } -h5, .h5 { @include typography-headline-5; } +h4, +.h4, +.display-4 { @include typography-headline-4; } -h6, .h6 { @include typography-headline-6; } +h5, +.h5 { @include typography-headline-5; } +h6, +.h6, .lead { @include typography-headline-6; } p { font-size: 1rem; } // djibe addition @@ -152,6 +178,3 @@ mark, content: '\2014 \00A0'; } } - - - diff --git a/assets/scss/bootstrap/_alert.scss b/assets/scss/bootstrap/_alert.scss index 0616a0123..37a10cee1 100644 --- a/assets/scss/bootstrap/_alert.scss +++ b/assets/scss/bootstrap/_alert.scss @@ -25,11 +25,6 @@ } } -// Provide class for links that match alerts -.alert-link { - font-weight: $alert-link-font-weight; -} - // Dismissible alerts // // Expand the right padding and account for the close button's positioning. diff --git a/assets/scss/bootstrap/_badge.scss b/assets/scss/bootstrap/_badge.scss index a251be94c..73147d2aa 100644 --- a/assets/scss/bootstrap/_badge.scss +++ b/assets/scss/bootstrap/_badge.scss @@ -23,28 +23,28 @@ } } + // Empty badges collapse automatically + &:empty { + display: none; + } + // Material addition : https://material.angular.io/components/badge/examples .btn & { + border-radius: 50%; + display: inline-block; + font-size: $font-size-caption; + font-weight: $badge-btn-font-weight; + height: $badge-width; + line-height: $badge-width; position: absolute; top: -$badge-width / 2; right: -$badge-width / 2; - border-radius: 50%; width: $badge-width; - height: $badge-width; - line-height: $badge-width; - display: inline-block; - font-weight: $badge-btn-font-weight; - font-size: $font-size-caption; &.badge-before { left: -$badge-width / 2; } } - - // Empty badges collapse automatically - &:empty { - display: none; - } } // Pill badges with extra rounded corners @@ -56,8 +56,7 @@ //padding-left: $badge-pill-padding-x; } -@each $color, -$values in $theme-colors { +@each $color, $values in $theme-colors { .badge-#{$color} { background-color: theme-color($color); color: color-yiq(theme-color($color)); diff --git a/assets/scss/bootstrap/_breadcrumb.scss b/assets/scss/bootstrap/_breadcrumb.scss index b546951b9..23ed227ac 100644 --- a/assets/scss/bootstrap/_breadcrumb.scss +++ b/assets/scss/bootstrap/_breadcrumb.scss @@ -11,12 +11,17 @@ display: flex; font-size: $breadcrumb-font-size; + &:only-child { + padding: $breadcrumb-padding-y $breadcrumb-padding-x; + } + a { @include transition-standard(background-color); - border-radius: .5rem; + + border-radius: $spacer-sm; color: inherit; + padding: $breadcrumb-padding-y $breadcrumb-padding-x; text-decoration: none; - padding: .375rem $breadcrumb-padding-y; &:hover { background-color: $breadcrumb-bg-hover; @@ -36,11 +41,9 @@ } } + // stylelint-disable &.active::before { - margin-right: $breadcrumb-padding-y; - } - - &:only-child { - padding: .375rem $breadcrumb-padding-y; + margin-right: $breadcrumb-padding-x; } + // stylelint-enable } diff --git a/assets/scss/bootstrap/_close.scss b/assets/scss/bootstrap/_close.scss index 7773dc7e1..6f9042d32 100644 --- a/assets/scss/bootstrap/_close.scss +++ b/assets/scss/bootstrap/_close.scss @@ -27,13 +27,15 @@ } } +/* stylelint-disable */ button.close { - padding: 0; + appearance: none; background-color: transparent; border: 0; - appearance: none; + 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 b5727eeeb..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; diff --git a/assets/scss/bootstrap/_forms.scss b/assets/scss/bootstrap/_forms.scss index 3811d8d55..59f54210f 100644 --- a/assets/scss/bootstrap/_forms.scss +++ b/assets/scss/bootstrap/_forms.scss @@ -8,10 +8,11 @@ } .form-check-input { - margin-top: (($font-size-base * $line-height-base - $font-size-base) / 3 * 2); //$form-check-input-margin-y; - margin-left: ($form-check-input-gutter * -1); //-$form-check-input-gutter; + 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; + &[disabled] ~ .form-check-label, &:disabled ~ .form-check-label { color: $textfield-color-disabled; } @@ -29,13 +30,12 @@ display: inline-flex; margin-right: $form-check-inline-margin-x; margin-bottom: 0; - //padding-left: 0; .form-check-input { - position: static; margin-top: 0; margin-right: $form-check-inline-input-margin-x; margin-left: 0; + position: static; } } @@ -70,28 +70,29 @@ width: 100%; //auto } + /* stylelint-disable */ @include media-breakpoint-up(sm) { label { - display: flex; align-items: center; + display: flex; justify-content: center; margin-bottom: 0; } - // Inline-block all the things for "inline" + // Inline-block all the things for 'inline' .form-group { + align-items: center; display: flex; flex: 0 0 auto; flex-flow: row wrap; - align-items: center; margin-bottom: 0; } // Allow folks to *not* use `.form-group` .form-control { display: inline-block; - width: auto; // Prevent labels from stacking above inputs in `.form-group` vertical-align: middle; + width: auto; // Prevent labels from stacking above inputs in `.form-group` } // Make static controls behave like regular ones @@ -105,28 +106,31 @@ } .form-check { - display: flex; align-items: center; + display: flex; justify-content: center; - width: auto; padding-left: 0; + width: auto; } + .form-check-input { - position: relative; 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 @@ -157,47 +161,26 @@ // 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; - color: $textfield-caption-color; - display: block; - //margin-top: $textfield-margin-y; - - /*.custom-select-lg + &, - .floating-label-lg + &, - .floating-label-lg .custom-select + &, - .floating-label-lg .form-control + &, - .floating-label-lg .form-control-file + &, - .form-control-lg + &, - .textfield-box-lg + &, - .textfield-box-lg .custom-select + &, - .textfield-box-lg .form-control + &, - .textfield-box-lg .form-control-file + & { - margin-top: $textfield-margin-y-lg; - } - - .custom-select-sm + &, - .floating-label-sm + &, - .floating-label-sm .custom-select + &, - .floating-label-sm .form-control + &, - .floating-label-sm .form-control-file + &, - .form-control-sm + &, - .textfield-box-sm + &, - .textfield-box-sm .custom-select + &, - .textfield-box-sm .form-control + &, - .textfield-box-sm .form-control-file + & { - margin-top: $textfield-margin-y-sm; - }*/ + padding-left: $textfield-box-padding-x; &::before { + content: ''; display: inline-block; - width: 0; height: 1rem; - content: ""; vertical-align: 0; + width: 0; } + + /* [class~='textfield-box'] &, + [class~='textfield-box'] ~ & { + padding-left: $textfield-box-padding-x; + } */ } // Readonly control as plain text @@ -212,7 +195,6 @@ display: block; font-size: $textfield-font-size; line-height: $textfield-line-height; - // margin-bottom: 0; padding: $textfield-padding-y 0 calc(#{$textfield-padding-y} - #{$textfield-border-width}); width: 100%; diff --git a/assets/scss/bootstrap/_images.scss b/assets/scss/bootstrap/_images.scss index f437b6b5c..f8e29035b 100644 --- a/assets/scss/bootstrap/_images.scss +++ b/assets/scss/bootstrap/_images.scss @@ -9,9 +9,9 @@ @include border-radius($thumbnail-border-radius); @include box-shadow($thumbnail-box-shadow); */ + @include img-fluid; box-shadow: $thumbnail-box-shadow; - @include img-fluid; } .figure { @@ -25,5 +25,6 @@ .figure-caption { @include typography-caption; + color: $figure-caption-color; } diff --git a/assets/scss/bootstrap/_nav.scss b/assets/scss/bootstrap/_nav.scss index 66ea9dc28..6b0fe3412 100644 --- a/assets/scss/bootstrap/_nav.scss +++ b/assets/scss/bootstrap/_nav.scss @@ -24,7 +24,7 @@ &:hover, &.active { - color: darken(selection-theme-color(),16%); + color: darken(selection-theme-color(), 16%); } } diff --git a/assets/scss/bootstrap/_pagination.scss b/assets/scss/bootstrap/_pagination.scss index 00bc7c472..f834c6574 100644 --- a/assets/scss/bootstrap/_pagination.scss +++ b/assets/scss/bootstrap/_pagination.scss @@ -17,9 +17,9 @@ justify-content: center; line-height: $pagination-line-height; margin-left: $pagination-inner-spacer-x; + min-width: $pagination-line-height * $pagination-font-size; position: relative; text-align: center; - width: $pagination-line-height * $pagination-font-size; white-space: nowrap; @include hover-focus-active { @@ -49,6 +49,7 @@ } } + // stylelint-disable &.active .page-link { background-color: theme-color(primary); color: $white; @@ -60,9 +61,9 @@ cursor: auto; pointer-events: none; } + // stylelint-enable } - // // Sizing // @@ -75,4 +76,4 @@ .pagination-sm .page-link { font-size: $pagination-font-size-sm; width: $pagination-line-height * $pagination-font-size-sm; -} \ No newline at end of file +} diff --git a/assets/scss/bootstrap/_popover.scss b/assets/scss/bootstrap/_popover.scss index d4fa04dcc..f28737634 100644 --- a/assets/scss/bootstrap/_popover.scss +++ b/assets/scss/bootstrap/_popover.scss @@ -7,7 +7,7 @@ @include border-radius($popover-border-radius); background-color: $popover-bg; - box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15); //map-get($popover-elevation-shadow, shadow); // + box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15); display: block; font-size: $popover-font-size; margin: $popover-margin; diff --git a/assets/scss/material.scss b/assets/scss/material.scss index 916ee152f..24ba5a87a 100644 --- a/assets/scss/material.scss +++ b/assets/scss/material.scss @@ -1,5 +1,5 @@ /*! - * Daemonite Material UI v4.3.1-RC1 (http://daemonite.github.io/material/) + * Daemonite Material UI v4.4.1-alpha 1 (http://djibe.github.io/material2/) * Copyright 2011-2019 The Bootstrap Authors * Copyright 2011-2019 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) @@ -11,7 +11,6 @@ @import 'variables'; @import 'mixins'; - // Base CSS @import 'base/base'; // root + reboot @@ -53,7 +52,7 @@ @import 'material/navdrawer'; @import 'material/picker'; @import 'material/progress'; -@import 'material/progress-circular'; // Spinners +@import 'material/progress-circular'; // spinners @import 'material/selection-control'; // custom-forms @import 'material/sliders'; @import 'material/snackbars'; // toasts @@ -72,4 +71,4 @@ // Very basic print styles -@import 'print'; \ No newline at end of file +@import 'print'; diff --git a/assets/scss/material/_button-flat.scss b/assets/scss/material/_button-flat.scss index cfdb15a96..c42d71720 100644 --- a/assets/scss/material/_button-flat.scss +++ b/assets/scss/material/_button-flat.scss @@ -14,26 +14,27 @@ [class*='btn-outline'] { box-shadow: none; -@include hover-focus-active { + @include hover-focus-active { box-shadow: none; color: $black-primary; } &:hover { - background-color: rgba(0,0,0,$overlay-hover-white-opacity); + background-color: rgba(0, 0, 0, $overlay-hover-white-opacity); } &:active { - background-color: rgba(0,0,0,$overlay-pressed-white-opacity); + background-color: rgba(0, 0, 0, $overlay-pressed-white-opacity); } - &.disabled, - &:disabled { + &:disabled, + &.disabled { background-color: transparent; } } -@each $color, $values in $theme-colors { +@each $color, + $values in $theme-colors { .btn-flat-#{$color}, .btn-outline-#{$color} { @include plain-hover-focus { @@ -52,12 +53,13 @@ background-color: rgba(theme-color($color), $overlay-pressed-white-opacity); } - &.disabled, - &:disabled { + &:disabled, + &.disabled { background-color: $btn-bg-disabled; color: $btn-color-disabled; } } + .btn-outline-#{$color} { border-color: theme-color($color); } diff --git a/assets/scss/material/_button-float.scss b/assets/scss/material/_button-float.scss index 942e91f09..f89641294 100644 --- a/assets/scss/material/_button-float.scss +++ b/assets/scss/material/_button-float.scss @@ -13,23 +13,18 @@ box-shadow: map-get($btn-float-elevation-shadow-hover, shadow); } - &.active, - &:active { + &:active, + &.active { box-shadow: map-get($btn-float-elevation-shadow-active, shadow); } - &.disabled, - &:disabled { + &:disabled, + &.disabled { box-shadow: none; } - &.btn-sm { - height: $btn-float-size-sm; - line-height: $btn-float-size-sm; - width: $btn-float-size-sm; - } - // Extended FAB + /* stylelint-disable */ &-extended { border-radius: $btn-float-extended-border-radius; height: $btn-float-extended-height; @@ -38,10 +33,17 @@ width: auto; .material-icons { - margin-left: -.5rem; - margin-right: .75rem; + margin-right: 0.75rem; + margin-left: -0.5rem; } } + /* stylelint-enable */ + + &.btn-sm { + height: $btn-float-size-sm; + line-height: $btn-float-size-sm; + width: $btn-float-size-sm; + } } .btn-float-dropdown { diff --git a/assets/scss/material/_button-group.scss b/assets/scss/material/_button-group.scss index 7d1443dda..8ba6c7019 100644 --- a/assets/scss/material/_button-group.scss +++ b/assets/scss/material/_button-group.scss @@ -11,9 +11,8 @@ vertical-align: middle; @each $color, - $values in $theme-colors { - >.btn-#{$color} { - + $values in $theme-colors { + > .btn-#{$color} { &.disabled, &:disabled { background-color: theme-color-light($color); @@ -22,14 +21,14 @@ } } - >.btn { + > .btn { @include transition-standard(border-color, opacity); - + box-shadow: none; flex: 1 1 auto; min-width: 0; - padding-left: $btn-group-padding-x; padding-right: $btn-group-padding-x; + padding-left: $btn-group-padding-x; position: relative; &:hover, @@ -39,24 +38,25 @@ z-index: 1; } - /*&.active, + /* &.active, &:active { background-color: rgba($black,$overlay-activated-white-opacity); - }*/ + } */ - &.disabled, - &:disabled { + &:disabled, + &.disabled { opacity: $btn-group-toggle-opacity; } + /* stylelint-disable */ &[class*='btn-outline'] { border: 0; opacity: $btn-group-toggle-opacity; &.active, &:active { + background-color: rgba($black, $overlay-activated-white-opacity); opacity: 1; - background-color: rgba($black,$overlay-activated-white-opacity); } &.disabled, @@ -64,10 +64,11 @@ opacity: 1; } } + /* stylelint-enable */ } - >.btn-group, - >.btn-group-vertical { + > .btn-group, + > .btn-group-vertical { @include border-radius(0); background-color: transparent; @@ -76,28 +77,28 @@ } .btn-group { - &.show>.dropdown-toggle { + &.show > .dropdown-toggle { box-shadow: none; } - >.btn, - >.btn-group { + > .btn, + > .btn-group { margin-left: ($btn-group-inner-spacer-x * -1); } - >.btn:first-child, - >.btn-group:first-child { + > .btn:first-child, + > .btn-group:first-child { margin-left: 0; } - >.btn:not(:first-child), - >.btn-group:not(:first-child)>.btn { + > .btn:not(:first-child), + > .btn-group:not(:first-child) > .btn { @include border-left-radius(0); } - >.btn:not(:last-child):not(.dropdown-toggle), - >.btn-group:not(:last-child)>.btn, - >.dropdown-toggle:not(:last-of-type) { + > .btn:not(:last-child):not(.dropdown-toggle), + > .btn-group:not(:last-child) > .btn, + > .dropdown-toggle:not(:last-of-type) { @include border-right-radius(0); } } @@ -107,27 +108,27 @@ flex-direction: column; justify-content: center; - >.btn, - >.btn-group { + > .btn, + > .btn-group { margin-top: ($btn-group-inner-spacer-y * -1); margin-left: 0; width: 100%; } - >.btn:first-child, - >.btn-group:first-child { + > .btn:first-child, + > .btn-group:first-child { margin-top: 0; } // Reset rounded corners - >.btn:not(:first-child), - >.btn-group:not(:first-child)>.btn { + > .btn:not(:first-child), + > .btn-group:not(:first-child) > .btn { @include border-top-radius(0); } - >.btn:not(:last-child):not(.dropdown-toggle), - >.btn-group:not(:last-child)>.btn, - >.dropdown-toggle:not(:last-of-type) { + > .btn:not(:last-child):not(.dropdown-toggle), + > .btn-group:not(:last-child) > .btn, + > .dropdown-toggle:not(:last-of-type) { @include border-bottom-radius(0); } } @@ -137,20 +138,19 @@ box-shadow: none; } -.btn-group-sm>.btn { +.btn-group-sm > .btn { @extend %btn-sm; } -.btn-group-lg>.btn { +.btn-group-lg > .btn { @extend %btn-lg; } // Checkbox and radio options [data-toggle='buttons'] { - - >.btn, - >.btn-group>.btn { + > .btn, + > .btn-group > .btn { margin-bottom: 0; [type='checkbox'], @@ -162,9 +162,7 @@ } } - - -/*.btn-sm + .dropdown-toggle-split { +/* .btn-sm + .dropdown-toggle-split { padding-right: $btn-padding-x-sm * .75; padding-left: $btn-padding-x-sm * .75; } @@ -172,7 +170,7 @@ .btn-lg + .dropdown-toggle-split { padding-right: $btn-padding-x-lg * .75; padding-left: $btn-padding-x-lg * .75; -}*/ +} */ // Toolbar @@ -193,11 +191,11 @@ > .btn-group > .btn { margin-bottom: 0; // Override default `