diff --git a/config/stylelint-config-carbon/plugins/scss.js b/config/stylelint-config-carbon/plugins/scss.js index 7fabd3cf4751..c142fb0c7599 100644 --- a/config/stylelint-config-carbon/plugins/scss.js +++ b/config/stylelint-config-carbon/plugins/scss.js @@ -120,4 +120,19 @@ module.exports = { // Disallow redundant nesting selectors (&). 'scss/selector-no-redundant-nesting-selector': true, }, + overrides: [ + { + files: [ + './packages/components/**/*.scss', + './packages/type/**/*.scss', + './packages/motion/**/*.scss', + './packages/layout/**/*.scss', + './packages/grid/**/*.scss', + './packages/import-once/**/*.scss', + ], + rules: { + 'scss/no-global-function-names': OFF, + }, + }, + ], }; diff --git a/packages/carbon-react/src/components/Icons/Icons.stories.scss b/packages/carbon-react/src/components/Icons/Icons.stories.scss index 7d5f58aa0e37..18617f4cb8b8 100644 --- a/packages/carbon-react/src/components/Icons/Icons.stories.scss +++ b/packages/carbon-react/src/components/Icons/Icons.stories.scss @@ -4,7 +4,6 @@ // This source code is licensed under the Apache-2.0 license found in the // LICENSE file in the root directory of this source tree. // - .demo-icon-example { display: flex; width: 10rem; diff --git a/packages/components/src/globals/scss/_helper-mixins.scss b/packages/components/src/globals/scss/_helper-mixins.scss index 9d928cb6e322..e4b14c770ae6 100644 --- a/packages/components/src/globals/scss/_helper-mixins.scss +++ b/packages/components/src/globals/scss/_helper-mixins.scss @@ -207,35 +207,43 @@ transform: scaleX(0); transform-origin: left; } + 20% { opacity: 1; transform: scaleX(1); transform-origin: left; } + 28% { transform: scaleX(1); transform-origin: right; } + 51% { transform: scaleX(0); transform-origin: right; } + 58% { transform: scaleX(0); transform-origin: right; } + 82% { transform: scaleX(1); transform-origin: right; } + 83% { transform: scaleX(1); transform-origin: left; } + 96% { transform: scaleX(0); transform-origin: left; } + 100% { opacity: 0.3; transform: scaleX(0); diff --git a/packages/grid/scss/_mixins.import.scss b/packages/grid/scss/_mixins.import.scss index e799c31da54f..62bb2d2ec4cc 100644 --- a/packages/grid/scss/_mixins.import.scss +++ b/packages/grid/scss/_mixins.import.scss @@ -25,8 +25,8 @@ @use 'sass:meta'; @use 'sass:math'; -@import '@carbon/layout/scss/breakpoint'; /* stylelint-disable-line no-invalid-position-at-import-rule */ -@import 'prefix'; /* stylelint-disable-line no-invalid-position-at-import-rule */ +@import '@carbon/layout/scss/breakpoint'; +@import 'prefix'; // ----------------------------------------------------------------------------- // Columns diff --git a/packages/import-once/scss/import-once.scss b/packages/import-once/scss/import-once.scss index f7fbca1d0adc..633165fe07bf 100644 --- a/packages/import-once/scss/import-once.scss +++ b/packages/import-once/scss/import-once.scss @@ -18,7 +18,7 @@ $imported-modules: () !default; /// @content Declaration blocks to be imported /// @group @carbon/import-once @mixin exports($name, $warn: false) { - @if (index($imported-modules, $name) == null) { + @if not(index($imported-modules, $name)) { $imported-modules: append($imported-modules, $name) !global; @content; } @else if $warn == true { diff --git a/packages/layout/scss/_key-height.import.scss b/packages/layout/scss/_key-height.import.scss index 15e9f7090f33..e95d82a0178c 100644 --- a/packages/layout/scss/_key-height.import.scss +++ b/packages/layout/scss/_key-height.import.scss @@ -21,8 +21,8 @@ @use 'sass:meta'; @use "sass:math"; -@import 'breakpoint'; /* stylelint-disable-line no-invalid-position-at-import-rule */ -@import 'utilities'; /* stylelint-disable-line no-invalid-position-at-import-rule */ +@import 'breakpoint'; +@import 'utilities'; /// Get the column width for a given breakpoint /// @param {String} $breakpoint diff --git a/packages/styles/scss/_reset.scss b/packages/styles/scss/_reset.scss index 174333e27aaf..54643b478804 100644 --- a/packages/styles/scss/_reset.scss +++ b/packages/styles/scss/_reset.scss @@ -144,8 +144,8 @@ border-collapse: collapse; border-spacing: 0; } - /// End vendor reset + /// End vendor reset html { box-sizing: border-box; } diff --git a/packages/styles/scss/components/date-picker/_flatpickr.scss b/packages/styles/scss/components/date-picker/_flatpickr.scss index 675dd2ac9ef2..7b5c68ac63a8 100644 --- a/packages/styles/scss/components/date-picker/_flatpickr.scss +++ b/packages/styles/scss/components/date-picker/_flatpickr.scss @@ -16,66 +16,73 @@ @use '../button/tokens' as *; -@keyframes fpFadeInDown { +@keyframes fp-fade-in-down { from { opacity: 0; transform: translate3d(0, -20px, 0); } + to { opacity: 1; transform: translate3d(0, 0, 0); } } -@keyframes fpSlideLeft { +@keyframes fp-slide-left { from { transform: translate3d(0, 0, 0); } + to { transform: translate3d(-100%, 0, 0); } } -@keyframes fpSlideLeftNew { +@keyframes fp-slide-left-new { from { transform: translate3d(100%, 0, 0); } + to { transform: translate3d(0, 0, 0); } } -@keyframes fpSlideRight { +@keyframes fp-slide-right { from { transform: translate3d(0, 0, 0); } + to { transform: translate3d(100%, 0, 0); } } -@keyframes fpSlideRightNew { +@keyframes fp-slide-right-new { from { transform: translate3d(-100%, 0, 0); } + to { transform: translate3d(0, 0, 0); } } -@keyframes fpFadeOut { +@keyframes fp-fade-out { from { opacity: 1; } + to { opacity: 0; } } -@keyframes fpFadeIn { +@keyframes fp-fade-in { from { opacity: 0; } + to { opacity: 1; } @@ -130,7 +137,7 @@ } .flatpickr-calendar.animate.open { - animation: fpFadeInDown $duration-fast-02 motion(entrance, productive); + animation: fp-fade-in-down $duration-fast-02 motion(entrance, productive); } .flatpickr-calendar.inline { @@ -392,8 +399,8 @@ } .flatpickr-calendar.animate .dayContainer.slideLeft { - animation: fpFadeOut 400ms cubic-bezier(0.23, 1, 0.32, 1), - fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1); + animation: fp-fade-out 400ms cubic-bezier(0.23, 1, 0.32, 1), + fp-slide-left 400ms cubic-bezier(0.23, 1, 0.32, 1); } .flatpickr-calendar.animate .dayContainer.slideLeft, @@ -402,19 +409,19 @@ } .flatpickr-calendar.animate .dayContainer.slideLeftNew { - animation: fpFadeIn 400ms cubic-bezier(0.23, 1, 0.32, 1), - fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1); + animation: fp-fade-in 400ms cubic-bezier(0.23, 1, 0.32, 1), + fp-slide-left 400ms cubic-bezier(0.23, 1, 0.32, 1); } .flatpickr-calendar.animate .dayContainer.slideRight { - animation: fpFadeOut 400ms cubic-bezier(0.23, 1, 0.32, 1), - fpSlideRight 400ms cubic-bezier(0.23, 1, 0.32, 1); + animation: fp-fade-out 400ms cubic-bezier(0.23, 1, 0.32, 1), + fp-slide-right 400ms cubic-bezier(0.23, 1, 0.32, 1); transform: translate3d(100%, 0, 0); } .flatpickr-calendar.animate .dayContainer.slideRightNew { - animation: fpFadeIn 400ms cubic-bezier(0.23, 1, 0.32, 1), - fpSlideRightNew 400ms cubic-bezier(0.23, 1, 0.32, 1); + animation: fp-fade-in 400ms cubic-bezier(0.23, 1, 0.32, 1), + fp-slide-right-new 400ms cubic-bezier(0.23, 1, 0.32, 1); } .flatpickr-day { diff --git a/packages/styles/scss/fonts/_src.scss b/packages/styles/scss/fonts/_src.scss index 5a6790a8dd54..0f2d21b5783d 100644 --- a/packages/styles/scss/fonts/_src.scss +++ b/packages/styles/scss/fonts/_src.scss @@ -66,7 +66,7 @@ $-google-filenames: ( @function -get-google-filename($map, $keys...) { @each $key in $keys { - $map: map-get($map, $key); + $map: map.get($map, $key); } @return $map; diff --git a/packages/styles/scss/utilities/_keyframes.scss b/packages/styles/scss/utilities/_keyframes.scss index 435284c5da55..afaea6ed0237 100644 --- a/packages/styles/scss/utilities/_keyframes.scss +++ b/packages/styles/scss/utilities/_keyframes.scss @@ -19,6 +19,7 @@ 0% { @include content-visible; } + 100% { @include content-hidden; } @@ -28,6 +29,7 @@ 0% { @include content-hidden; } + 100% { @include content-visible; } @@ -39,35 +41,43 @@ transform: scaleX(0); transform-origin: left; } + 20% { opacity: 1; transform: scaleX(1); transform-origin: left; } + 28% { transform: scaleX(1); transform-origin: right; } + 51% { transform: scaleX(0); transform-origin: right; } + 58% { transform: scaleX(0); transform-origin: right; } + 82% { transform: scaleX(1); transform-origin: right; } + 83% { transform: scaleX(1); transform-origin: left; } + 96% { transform: scaleX(0); transform-origin: left; } + 100% { opacity: 0.3; transform: scaleX(0); diff --git a/packages/styles/scss/utilities/_tooltip.scss b/packages/styles/scss/utilities/_tooltip.scss index 5d09d882bb10..f8abf99c4751 100644 --- a/packages/styles/scss/utilities/_tooltip.scss +++ b/packages/styles/scss/utilities/_tooltip.scss @@ -93,6 +93,7 @@ @if $tooltip-type == 'icon' { cursor: pointer; + &:focus { outline: 1px solid transparent; @@ -181,6 +182,7 @@ from { opacity: 0; } + to { opacity: 1; } diff --git a/packages/type/scss/_styles.import.scss b/packages/type/scss/_styles.import.scss index 51b105afd082..d4b0d69eafe8 100644 --- a/packages/type/scss/_styles.import.scss +++ b/packages/type/scss/_styles.import.scss @@ -21,9 +21,9 @@ @use "sass:meta"; @use "sass:math"; -@import '@carbon/layout/scss/breakpoint'; /* stylelint-disable-line no-invalid-position-at-import-rule */ -@import 'font-family'; /* stylelint-disable-line no-invalid-position-at-import-rule */ -@import 'scale'; /* stylelint-disable-line no-invalid-position-at-import-rule */ +@import '@carbon/layout/scss/breakpoint'; +@import 'font-family'; +@import 'scale'; /// @type Map /// @access public diff --git a/www/src/components/Header/Header.module.scss b/www/src/components/Header/Header.module.scss index db9261b3b893..1e3e3b7c322d 100644 --- a/www/src/components/Header/Header.module.scss +++ b/www/src/components/Header/Header.module.scss @@ -4,7 +4,6 @@ // This source code is licensed under the Apache-2.0 license found in the // LICENSE file in the root directory of this source tree. // - .header { display: grid; min-height: 4rem;