diff --git a/.stylelintrc.yml b/.stylelintrc.yml index ac3d42fc1d..bc7a9f14a1 100644 --- a/.stylelintrc.yml +++ b/.stylelintrc.yml @@ -5,6 +5,7 @@ extends: - stylelint-config-sass-guidelines plugins: - stylelint-scss + - stylelint-order rules: # Line Spacing rule-empty-line-before: @@ -39,7 +40,8 @@ rules: - ignoreProperties: - 'box-orient' - ignoreAtRules: ['each', 'else', 'extend', 'for', 'function', 'if', 'include', 'mixin', 'return', 'while'] - + # Imports + import-notation: 'string' # Nesting max-nesting-depth: - 5 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_grid_example-grid-12_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__foundations_grid_example-grid-12_0_document_0_desktop.png new file mode 100644 index 0000000000..0a4cba54af --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__foundations_grid_example-grid-12_0_document_0_desktop.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:d37c83d266299c8eda91d76b14e1ed88d584579b19aa0ad2d9676ccf9d29e298 +size 11613 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_grid_example-grid-12_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__foundations_grid_example-grid-12_0_document_1_tablet.png new file mode 100644 index 0000000000..91b39f42eb --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__foundations_grid_example-grid-12_0_document_1_tablet.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:01f868db9e59800eadf9691211bb987758f59058a4685a4b8628feec801fef20 +size 6797 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_grid_example-grid-12_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__foundations_grid_example-grid-12_0_document_2_mobile.png new file mode 100644 index 0000000000..d74b9ce6c9 --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__foundations_grid_example-grid-12_0_document_2_mobile.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:abc5b8e7cf62e33c23aed6dc7b0dfab4c91c2e0935ba94b254d6157435391873 +size 9532 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_grid_example-grid-7-4_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__foundations_grid_example-grid-7-4_0_document_0_desktop.png new file mode 100644 index 0000000000..7decaa610d --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__foundations_grid_example-grid-7-4_0_document_0_desktop.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:6328dd084df3542c832044d04a88002ccf81470edcd8800fbac800b1e4dfc1e9 +size 11589 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_grid_example-grid-7-4_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__foundations_grid_example-grid-7-4_0_document_1_tablet.png new file mode 100644 index 0000000000..188ca5fb01 --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__foundations_grid_example-grid-7-4_0_document_1_tablet.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:e6872ad2eeec9914606a55dfaafc34f97373405cfe36b9bdc4ff6d23f009cb0d +size 6344 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_grid_example-grid-7-4_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__foundations_grid_example-grid-7-4_0_document_2_mobile.png new file mode 100644 index 0000000000..b57d4da56d --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__foundations_grid_example-grid-7-4_0_document_2_mobile.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:6dcc76c09a3bfa54582da37ceb898db035badf5641d4e973846ae34bb5acc83f +size 3846 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_grid_example-grid-8_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__foundations_grid_example-grid-8_0_document_0_desktop.png new file mode 100644 index 0000000000..35f24264c7 --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__foundations_grid_example-grid-8_0_document_0_desktop.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:1898d8055949b68976abe2e9b818b3da44d41954f76d807b24bae0cefa89f4a5 +size 11509 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_grid_example-grid-8_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__foundations_grid_example-grid-8_0_document_1_tablet.png new file mode 100644 index 0000000000..697757f81b --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__foundations_grid_example-grid-8_0_document_1_tablet.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:492b3324ad0f9a9efab726668f7bc20943858ed0c96bb12a43eda9b1025def39 +size 6240 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_grid_example-grid-8_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__foundations_grid_example-grid-8_0_document_2_mobile.png new file mode 100644 index 0000000000..e97353c35d --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__foundations_grid_example-grid-8_0_document_2_mobile.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:3e8bdb062f1fc26ca0eb641bdbe4480c8295c683f4a9b0ebf6b820d58a16741e +size 3325 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_grid_example-grid-combo_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__foundations_grid_example-grid-combo_0_document_0_desktop.png new file mode 100644 index 0000000000..a26e04005a --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__foundations_grid_example-grid-combo_0_document_0_desktop.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:ddb6048c5041f7d085cbaee20aa0297ec71c43f8897eae7b579575871d56cd74 +size 14966 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_grid_example-grid-combo_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__foundations_grid_example-grid-combo_0_document_1_tablet.png new file mode 100644 index 0000000000..db1113bbdf --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__foundations_grid_example-grid-combo_0_document_1_tablet.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:65f12ace853f664da601a21abf34858dd54274a8d67f2eb7307690db0521dfbf +size 10273 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_grid_example-grid-combo_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__foundations_grid_example-grid-combo_0_document_2_mobile.png new file mode 100644 index 0000000000..3e44646a4f --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__foundations_grid_example-grid-combo_0_document_2_mobile.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:d38b465c42ea854e665b2e739ca91bacf1bc95ce02d23727f92e43c60252ad56 +size 24129 diff --git a/package.json b/package.json index 39376ef033..0b06ecc5d7 100644 --- a/package.json +++ b/package.json @@ -43,7 +43,7 @@ "git add" ], "*.scss": [ - "prettier --print-width 140 --single-quote --parser postcss --write", + "prettier --print-width 140 --single-quote --parser scss --write", "yarn run stylelint-fix", "git add" ] @@ -123,6 +123,7 @@ "stylelint-config-recommended": "^13.0.0", "stylelint-config-sass-guidelines": "^10.0.0", "stylelint-config-standard": "^34.0.0", + "stylelint-order": "^6.0.3", "stylelint-scss": "^5.0.1", "through2": "^4.0.2", "tick-manager": "^1.0.3", diff --git a/src/components/access-code/access-code.scss b/src/components/access-code/access-code.scss index fd3df856ec..5023c5865a 100644 --- a/src/components/access-code/access-code.scss +++ b/src/components/access-code/access-code.scss @@ -6,17 +6,17 @@ text-transform: uppercase; width: 15.1em; - @media all and (min-width: 375px) { + @media all and (width >= 375px) { font-size: 20px !important; width: 15.1em !important; } - @media all and (max-width: 374px) { + @media all and (width <= 374px) { letter-spacing: 0; max-width: 12.6em !important; } - @media all and (max-width: 299px) { + @media all and (width <= 299px) { max-width: 100%; } diff --git a/src/components/autosuggest/_autosuggest.scss b/src/components/autosuggest/_autosuggest.scss index 2398f3b68f..39421c1f53 100644 --- a/src/components/autosuggest/_autosuggest.scss +++ b/src/components/autosuggest/_autosuggest.scss @@ -51,7 +51,7 @@ border-bottom: 1px solid var(--ons-color-input-border); } - &:not(&--no-results):not(&--more-results):hover, + &:not(&--no-results, &--more-results):hover, &--focused:not(&--no-results) { background: var(--ons-color-text-link-hover); border-color: var(--ons-color-text-link-hover); @@ -63,7 +63,7 @@ } } - &:active:not(&--no-results):not(&--more-results) { + &:active:not(&--no-results, &--more-results) { background: var(--ons-color-focus); color: var(--ons-color-text-link-focus); @@ -128,7 +128,7 @@ &--header { .ons-autosuggest__results { border: none; - box-shadow: 0 0 5px 0 rgba(34, 34, 34, 0.6); + box-shadow: 0 0 5px 0 rgb(34 34 34 / 60%); left: 0; position: absolute; z-index: 10; diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss index 8cf202c54e..3955c1bb76 100644 --- a/src/components/button/_button.scss +++ b/src/components/button/_button.scss @@ -15,19 +15,16 @@ $button-shadow-size: 3px; position: relative; text-align: center; text-decoration: none; - text-rendering: optimizeLegibility; + text-rendering: optimizelegibility; vertical-align: top; white-space: nowrap; // Transparent border for IE11 High Contrast mode support due to 'border: 0' on buttons &::after { border: ems($button-shadow-size) solid transparent; - bottom: -(ems($button-shadow-size)); // makes sure button shadow is selectable + inset: 0 0 - (ems($button-shadow-size)) 0; // makes sure button shadow is selectable content: ''; - left: 0; position: absolute; - right: 0; - top: 0; } &--search { @@ -172,8 +169,8 @@ $button-shadow-size: 3px; text-decoration: none; } - &--link:focus:not(:active):not(&--secondary) &, - &--link:focus:hover:not(:active):not(&--secondary) & { + &--link:focus:not(:active, &--secondary) &, + &--link:focus:hover:not(:active, &--secondary) & { outline: inherit; &__inner { @@ -245,7 +242,8 @@ $button-shadow-size: 3px; &--text-link:active:focus & { &__inner { background-color: var(--ons-color-focus); - box-shadow: 0 -2px var(--ons-color-focus), 0 4px var(--ons-color-text-link-focus) !important; + box-shadow: 0 -2px var(--ons-color-focus), + 0 4px var(--ons-color-text-link-focus) !important; color: var(--ons-color-text-link-focus); .ons-icon { fill: var(--ons-color-text-link-focus); @@ -256,7 +254,7 @@ $button-shadow-size: 3px; &--ghost & { &__inner { background: transparent; - border: 2px solid rgba(255, 255, 255, 0.6); + border: 2px solid rgb(255 255 255 / 60%); box-shadow: none; color: var(--ons-color-text-inverse); .ons-icon { @@ -314,7 +312,7 @@ $button-shadow-size: 3px; &--ghost:hover & { &__inner { - background: rgba(0, 0, 0, 0.1); + background: rgb(0 0 0 / 10%); border-color: var(--ons-color-white); } } @@ -323,8 +321,8 @@ $button-shadow-size: 3px; &--ghost:active:focus &, &--ghost.active & { &__inner { - background: rgba(0, 0, 0, 0.2); - border-color: rgba(255, 255, 255, 0.6); + background: rgb(0 0 0 / 20%); + border-color: rgb(255 255 255 / 60%); color: var(--ons-color-text-inverse); .ons-icon { fill: var(--ons-color-text-inverse); @@ -514,8 +512,7 @@ $button-shadow-size: 3px; align-items: baseline; display: flex; - flex-direction: row; - flex-wrap: wrap; + flex-flow: row wrap; & .ons-btn, & a { diff --git a/src/components/checkboxes/_checkbox.scss b/src/components/checkboxes/_checkbox.scss index d84ac074bb..d15673774d 100644 --- a/src/components/checkboxes/_checkbox.scss +++ b/src/components/checkboxes/_checkbox.scss @@ -156,12 +156,9 @@ $checkbox-padding: 11px; background: var(--ons-color-white); border: 1px solid var(--ons-color-input-border); border-radius: 3px; - bottom: 0; + inset: 0; content: ''; - left: 0; position: absolute; - right: 0; - top: 0; z-index: -1; } diff --git a/src/components/download-resources/_download-resources.scss b/src/components/download-resources/_download-resources.scss index 30d9920c9d..914a17d488 100644 --- a/src/components/download-resources/_download-resources.scss +++ b/src/components/download-resources/_download-resources.scss @@ -49,22 +49,20 @@ &__panel--is-visible { background-color: var(--ons-color-white); - bottom: 0; + inset: 0; display: block; height: calc(100% - 76px); // Height of action buttons - left: 0; overflow-y: scroll; padding: 1rem; position: fixed; - right: 0; - top: 0; z-index: 10; } &__actions { background-color: var(--ons-color-white); bottom: 0; - box-shadow: 0 0 5px 0 rgba(34, 34, 34, 0.5), 0 -1px 0 0 rgba(65, 64, 66, 0.5); + box-shadow: 0 0 5px 0 rgb(34 34 34 / 50%), + 0 -1px 0 0 rgb(65 64 66 / 50%); display: flex; left: 0; padding: 1rem; diff --git a/src/components/helpers/_grid.scss b/src/components/helpers/_grid.scss new file mode 100644 index 0000000000..8335fd8c5e --- /dev/null +++ b/src/components/helpers/_grid.scss @@ -0,0 +1,6 @@ +.ons-pl-grid-col { + background: var(--ons-color-grey-5); + font-size: 0.8rem; + margin: 0 0 1rem; + padding: 1rem; +} diff --git a/src/components/helpers/grid.njk b/src/components/helpers/grid.njk new file mode 100644 index 0000000000..5a15023d48 --- /dev/null +++ b/src/components/helpers/grid.njk @@ -0,0 +1,19 @@ +{% macro patternLibExampleGrid(params) %} + {% if params.container -%} +
+ {% endif -%} + +
+ {% for item in (params.itemsList if params.itemsList is iterable else params.itemsList.items()) -%} + {% for i in range(0, item.repeat | default(1) ) -%} +
+
{{ item.col }} col
+
+ {%- endfor %} + {%- endfor %} +
+ + {% if params.container -%} +
+ {% endif -%} +{% endmacro %} diff --git a/src/components/input/_input-type.scss b/src/components/input/_input-type.scss index 79fa067c02..5d58203076 100644 --- a/src/components/input/_input-type.scss +++ b/src/components/input/_input-type.scss @@ -57,13 +57,10 @@ @extend %ons-input-focus; border-radius: $input-radius; - bottom: 0; + inset: 0; content: ''; display: block; - left: 0; position: absolute; - right: 0; - top: 0; } &:not(&--prefix) & { @@ -100,16 +97,13 @@ & + .ons-input-type__type::after { border-radius: $input-radius; - bottom: 0; + inset: 0; // Style input + prefix/suffix for errors box-shadow: 0 0 0 1px var(--ons-color-errors); content: ''; display: block; - left: 0; outline: 1px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows position: absolute; - right: 0; - top: 0; } } diff --git a/src/components/input/_input.scss b/src/components/input/_input.scss index 5593d1a70d..0e6f4dd91b 100644 --- a/src/components/input/_input.scss +++ b/src/components/input/_input.scss @@ -1,5 +1,6 @@ %ons-input-focus { - box-shadow: 0 0 0 $input-border-width var(--ons-color-input-border), 0 0 0 4px var(--ons-color-focus); + box-shadow: 0 0 0 $input-border-width var(--ons-color-input-border), + 0 0 0 4px var(--ons-color-focus); // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows outline: 3px solid transparent; @@ -31,7 +32,7 @@ @include mq(s) { &--text, &--select { - &:not(.ons-input--block):not([class*='input--w-']) { + &:not(.ons-input--block, [class*='input--w-']) { width: $input-width; } } @@ -131,7 +132,7 @@ } .ons-input--ghost { - border: 2px solid rgba(255, 255, 255, 0.6); + border: 2px solid rgb(255 255 255 / 60%); &:focus { border: 2px solid var(--ons-color-input-border); } diff --git a/src/components/modal/_modal.scss b/src/components/modal/_modal.scss index 93e7366028..4c1568dfa9 100644 --- a/src/components/modal/_modal.scss +++ b/src/components/modal/_modal.scss @@ -1,4 +1,4 @@ -$backdrop-colour: rgba(0, 0, 0, 0.8); +$backdrop-colour: rgb(0 0 0 / 80%); .ons-modal { border: none; @@ -13,7 +13,7 @@ $backdrop-colour: rgba(0, 0, 0, 0.8); position: fixed; top: 0; - @media screen and (min-width: 600px) { + @media screen and (width >= 600px) { margin-left: auto; margin-right: auto; max-width: 500px; @@ -21,12 +21,9 @@ $backdrop-colour: rgba(0, 0, 0, 0.8); &-ie11 & { background: var(--ons-color-white); - bottom: 0; + inset: 50% 0 0; height: 350px; - left: 0; position: fixed; - right: 0; - top: 50%; transform: translate(0, -50%); } diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss index 886a99d927..815ad08bab 100644 --- a/src/components/table/_table.scss +++ b/src/components/table/_table.scss @@ -115,7 +115,9 @@ overflow-x: auto; width: 100%; &:focus { - box-shadow: 0 0 0 3px var(--ons-color-page-light), 0 0 0 5px var(--ons-color-text-link-focus), 0 0 0 8px var(--ons-color-focus); + box-shadow: 0 0 0 3px var(--ons-color-page-light), + 0 0 0 5px var(--ons-color-text-link-focus), + 0 0 0 8px var(--ons-color-focus); outline: 3px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows outline-offset: 1px; } @@ -141,13 +143,15 @@ .ons-table__right-shadow { right: 0; &.ons-visible { - box-shadow: inset -1px 0 0 0 #bfc1c3, inset -5px 0 0 0 rgba(191, 193, 195, 0.4); + box-shadow: inset -1px 0 0 0 #bfc1c3, + inset -5px 0 0 0 rgb(191 193 195 / 40%); } } .ons-table__left-shadow { left: 0; &.ons-visible { - box-shadow: inset 1px 0 0 0 #bfc1c3, inset -5px 0 0 0 rgba(191, 193, 195, 0.4); + box-shadow: inset 1px 0 0 0 #bfc1c3, + inset -5px 0 0 0 rgb(191 193 195 / 40%); } } } diff --git a/src/foundations/grid/example-grid-12.njk b/src/foundations/grid/example-grid-12.njk new file mode 100644 index 0000000000..cb81855772 --- /dev/null +++ b/src/foundations/grid/example-grid-12.njk @@ -0,0 +1,15 @@ +--- +layout: layouts/example +--- +{% from "components/helpers/grid.njk" import patternLibExampleGrid %} + +{{ + patternLibExampleGrid({ + "itemsList": [ + { + 'repeat': 12, + 'col': 1 + } + ] + }) +}} diff --git a/src/foundations/grid/example-grid-7-4.njk b/src/foundations/grid/example-grid-7-4.njk new file mode 100644 index 0000000000..34cff0a12d --- /dev/null +++ b/src/foundations/grid/example-grid-7-4.njk @@ -0,0 +1,19 @@ +--- +layout: layouts/example +--- +{% from "components/helpers/grid.njk" import patternLibExampleGrid %} + +{{ + patternLibExampleGrid({ + 'container': true, + "itemsList": [ + { + 'col': 7 + }, + { + 'classes': 'ons-push-1@m', + 'col': 4 + } + ] + }) +}} diff --git a/src/foundations/grid/example-grid-8.njk b/src/foundations/grid/example-grid-8.njk new file mode 100644 index 0000000000..eaaa006994 --- /dev/null +++ b/src/foundations/grid/example-grid-8.njk @@ -0,0 +1,15 @@ +--- +layout: layouts/example +--- +{% from "components/helpers/grid.njk" import patternLibExampleGrid %} + +{{ + patternLibExampleGrid({ + 'container': true, + "itemsList": [ + { + 'col': 8 + } + ] + }) +}} diff --git a/src/foundations/grid/example-grid-combo.njk b/src/foundations/grid/example-grid-combo.njk new file mode 100644 index 0000000000..4ff64147a1 --- /dev/null +++ b/src/foundations/grid/example-grid-combo.njk @@ -0,0 +1,31 @@ +--- +layout: layouts/example +--- +{% from "components/helpers/grid.njk" import patternLibExampleGrid %} + +{{ + patternLibExampleGrid({ + "itemsList": [ + { + 'repeat': 12, + 'col': 1 + }, + { + 'repeat': 6, + 'col': 2 + }, + { + 'repeat': 4, + 'col': 3 + }, + { + 'repeat': 3, + 'col': 4 + }, + { + 'repeat': 2, + 'col': 6 + } + ] + }) +}} diff --git a/src/scss/base/_global.scss b/src/scss/base/_global.scss index 54d6a19ef3..ab3332f8d3 100644 --- a/src/scss/base/_global.scss +++ b/src/scss/base/_global.scss @@ -32,7 +32,8 @@ hr { %a-focus { background-color: var(--ons-color-focus); box-decoration-break: clone; - box-shadow: 0 -2px var(--ons-color-focus), 0 4px var(--ons-color-text-link-focus); + box-shadow: 0 -2px var(--ons-color-focus), + 0 4px var(--ons-color-text-link-focus); color: var(--ons-color-text-link-focus); outline: 3px solid transparent; outline-offset: 1px; @@ -61,7 +62,7 @@ a { color: var(--ons-color-text-link-hover); text-decoration: underline solid var(--ons-color-text-link-hover) 2px; } - &:focus:not(.ons-btn--link):not(.ons-btn--ghost):not(.ons-js-clear-btn):not(.ons-download__thumbnail--link):not(.ons-tab--row):not(.ons-skip-to-content) { + &:focus:not(.ons-btn--link, .ons-btn--ghost, .ons-js-clear-btn, .ons-download__thumbnail--link, .ons-tab--row, .ons-skip-to-content) { @extend %a-focus; } } diff --git a/src/scss/main.scss b/src/scss/main.scss index 7055c9d21c..daec469795 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -25,6 +25,7 @@ @import '../components/fieldset/fieldset'; @import '../components/footer/footer'; @import '../components/header/header'; +@import '../components/helpers/grid'; @import '../components/hero/hero'; @import '../components/icon/icon'; @import '../components/image/image'; diff --git a/src/scss/overrides/hcm.scss b/src/scss/overrides/hcm.scss index 5e5551227f..34f8bb8186 100644 --- a/src/scss/overrides/hcm.scss +++ b/src/scss/overrides/hcm.scss @@ -10,7 +10,7 @@ // Panels – add border to replace backgrounds .ons-panel { - border-color: currentColor; + border-color: currentcolor; border-left-width: 8px !important; } @@ -43,7 +43,7 @@ // I would have approached the mark differently, but without changing the existing approach this fixes it .ons-timeline__item::before { - border: 2px solid currentColor; + border: 2px solid currentcolor; } // Element icons – matches icon with the link colour @@ -54,7 +54,7 @@ .ons-external-link, .ons-list--icons { & .ons-icon { - fill: currentColor !important; + fill: currentcolor !important; forced-color-adjust: auto; } } @@ -64,7 +64,7 @@ .ons-header__title-logo, .ons-footer { & .ons-icon--logo { - fill: currentColor !important; + fill: currentcolor !important; forced-color-adjust: auto; } } @@ -122,21 +122,21 @@ .ons-header__top, .ons-hero, .ons-phase-banner { - border-bottom: 1px solid currentColor; + border-bottom: 1px solid currentcolor; } .ons-footer { - border-top: 1px solid currentColor; + border-top: 1px solid currentcolor; } @include mq(m) { .ons-header__main { - border-bottom: 1px solid currentColor; + border-bottom: 1px solid currentcolor; } } .ons-navigation--sub { - border-top: 1px solid currentColor; + border-top: 1px solid currentcolor; } // Search – override focus state background image @@ -174,8 +174,8 @@ } } - &:checked:not(:disabled):not(:visited), - &:checked:not(:disabled):not(:visited)::after { + &:checked:not(:disabled, :visited), + &:checked:not(:disabled, :visited)::after { border-color: Highlight; } diff --git a/yarn.lock b/yarn.lock index 232012d36a..42a5b8c774 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9390,6 +9390,11 @@ postcss-selector-parser@^6.0.11, postcss-selector-parser@^6.0.13: cssesc "^3.0.0" util-deprecate "^1.0.2" +postcss-sorting@^8.0.2: + version "8.0.2" + resolved "https://registry.yarnpkg.com/postcss-sorting/-/postcss-sorting-8.0.2.tgz#6393385ece272baf74bee9820fb1b58098e4eeca" + integrity sha512-M9dkSrmU00t/jK7rF6BZSZauA5MAaBW4i5EnJXspMwt4iqTh/L9j6fgMnbElEOfyRyfLfVbIHj/R52zHzAPe1Q== + postcss-url@^8.0.0: version "8.0.0" resolved "https://registry.yarnpkg.com/postcss-url/-/postcss-url-8.0.0.tgz#7b10059bd12929cdbb1971c60f61a0e5af86b4ca" @@ -9414,7 +9419,7 @@ postcss@^7.0.16, postcss@^7.0.2: picocolors "^0.2.1" source-map "^0.6.1" -postcss@^8.3.5, postcss@^8.4.25: +postcss@^8.3.5, postcss@^8.4.21, postcss@^8.4.25: version "8.4.27" resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.27.tgz#234d7e4b72e34ba5a92c29636734349e0d9c3057" integrity sha512-gY/ACJtJPSmUFPDCHtX78+01fHa64FaU4zaaWfuh1MhGJISufJAH4cun6k/8fwsHYeK4UQmENQK+tRLCFJE8JQ== @@ -11216,6 +11221,14 @@ stylelint-config-standard@^34.0.0: dependencies: stylelint-config-recommended "^13.0.0" +stylelint-order@^6.0.3: + version "6.0.3" + resolved "https://registry.yarnpkg.com/stylelint-order/-/stylelint-order-6.0.3.tgz#160b78650bd90463241b992581efee7159baefc2" + integrity sha512-1j1lOb4EU/6w49qZeT2SQVJXm0Ht+Qnq9GMfUa3pMwoyojIWfuA+JUDmoR97Bht1RLn4ei0xtLGy87M7d29B1w== + dependencies: + postcss "^8.4.21" + postcss-sorting "^8.0.2" + stylelint-scss@^4.4.0: version "4.7.0" resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-4.7.0.tgz#f986bf8c5a4b93eae2b67d3a3562eef822657908"