diff --git a/packages/clay-css/src/scss/mixins/_close.scss b/packages/clay-css/src/scss/mixins/_close.scss index 60eed196cb..9c598a5c41 100644 --- a/packages/clay-css/src/scss/mixins/_close.scss +++ b/packages/clay-css/src/scss/mixins/_close.scss @@ -348,43 +348,59 @@ ); @if ($enabled) { - @include clay-css($base); + @if (length($base) != 0) { + @include clay-css($base); + } - &:hover { - @include clay-css($hover); + @if (length($hover) != 0) { + &:hover { + @include clay-css($hover); + } } - @at-root { - button#{&} { - #{$focus-visible-selector}, - #{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} { - @include clay-css($btn-focus); + @if (length($btn-focus) != 0) { + @at-root { + button#{&} { + #{$focus-visible-selector}, + #{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} { + @include clay-css($btn-focus); + } } } } - @at-root { - &.focus, - #{$focus-visible-selector}, - #{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} { - @include clay-css($focus); + @if (length($focus) != 0) { + @at-root { + &.focus, + #{$focus-visible-selector}, + #{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} { + @include clay-css($focus); + } } } - &:active { - @include clay-css($active); + @if (length($active) != 0) { + &:active { + @include clay-css($active); + } } - &.active { - @include clay-css($active-class); + @if (length($active-class) != 0) { + &.active { + @include clay-css($active-class); + } } - &:disabled, - &.disabled { - @include clay-css($disabled); + @if (length($disabled) != 0) { + &:disabled, + &.disabled { + @include clay-css($disabled); - &:active { - @include clay-css($disabled-active); + @if (length($disabled-active) != 0) { + &:active { + @include clay-css($disabled-active); + } + } } } @@ -394,8 +410,10 @@ } } - .lexicon-icon { - @include clay-css($lexicon-icon); + @if (length($lexicon-icon) != 0) { + .lexicon-icon { + @include clay-css($lexicon-icon); + } } } } diff --git a/packages/clay-css/src/scss/mixins/_custom-forms.scss b/packages/clay-css/src/scss/mixins/_custom-forms.scss index abde2226fd..3daa1e89a3 100644 --- a/packages/clay-css/src/scss/mixins/_custom-forms.scss +++ b/packages/clay-css/src/scss/mixins/_custom-forms.scss @@ -104,702 +104,960 @@ $enabled: setter(map-get($map, enabled), true); @if ($enabled) { - @include clay-css($map); - - ~ .custom-control-label::before { - @include clay-css( - map-deep-get($map, custom-control-label, before) - ); + @if (length($map) != 0) { + @include clay-css($map); } - ~ .custom-control-label::after { - @include clay-css( - map-deep-get($map, custom-control-label, after) - ); - } + $_custom-control-label: map-get($map, custom-control-label); - ~ .card { - @include clay-card-variant(map-deep-get($map, card)); - } + @if ($_custom-control-label) { + ~ .custom-control-label { + @include clay-css($_custom-control-label); - &:hover { - ~ .custom-control-label::before { - @include clay-css( - map-deep-get($map, hover, custom-control-label, before) - ); - } + $_before: map-get($_custom-control-label, before); - ~ .custom-control-label::after { - @include clay-css( - map-deep-get($map, hover, custom-control-label, after) - ); + @if ($_before) { + &::before { + @include clay-css($_before); + } + } + + $_after: map-get($_custom-control-label, after); + + @if ($_after) { + &::after { + @include clay-css($_after); + } + } } + } + + $_card: map-get($map, card); + @if ($_card) { ~ .card { - @include clay-card-variant(map-deep-get($map, hover, card)); + @include clay-card-variant($_card); } } - @at-root { - #{$focus-visible-selector}, - #{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} { - ~ .custom-control-label::before { - @include clay-css( - map-deep-get( - $map, - focus, - custom-control-label, - before - ) - ); + $_hover: map-get($map, hover); + + @if ($_hover) { + &:hover { + @include clay-css($_hover); + + $_custom-control-label: map-get( + $_hover, + custom-control-label + ); + + @if ($_custom-control-label) { + ~ .custom-control-label { + @include clay-css($_custom-control-label); + + $_before: map-get($_custom-control-label, before); + + @if ($_before) { + &::before { + @include clay-css($_before); + } + } + + $_after: map-get($_custom-control-label, after); + + @if ($_after) { + &::after { + @include clay-css($_after); + } + } + } } - ~ .custom-control-label::after { - @include clay-css( - map-deep-get( - $map, - focus, - custom-control-label, - after - ) - ); + $_card: map-get($_hover, card); + + @if ($_card) { + ~ .card { + @include clay-card-variant($_card); + } } + } + } + + $_focus: map-get($map, focus); - ~ .card { - @include clay-card-variant( - map-deep-get($map, focus, card) + @if ($_focus) { + @at-root { + #{$focus-visible-selector}, + #{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} { + $_custom-control-label: map-get( + $_focus, + custom-control-label ); + + @if ($_custom-control-label) { + ~ .custom-control-label { + @include clay-css($_custom-control-label); + + $_before: map-get( + $_custom-control-label, + before + ); + + @if ($_before) { + &::before { + @include clay-css($_before); + } + } + + $_after: map-get($_custom-control-label, after); + + @if ($_after) { + &::after { + @include clay-css($_after); + } + } + } + } + + $_card: map-get($_focus, card); + + @if ($_card) { + ~ .card { + @include clay-card-variant($_card); + } + } } } } - &:active { - ~ .custom-control-label::before { - @include clay-css( - map-deep-get($map, active, custom-control-label, before) - ); - } + $_active: map-get($map, active); - ~ .custom-control-label::after { - @include clay-css( - map-deep-get($map, active, custom-control-label, after) + @if ($_active) { + &:active { + $_custom-control-label: map-get( + $_active, + custom-control-label ); - } - ~ .card { - @include clay-card-variant( - map-deep-get($map, active, card) - ); + @if ($_custom-control-label) { + ~ .custom-control-label { + $_before: map-get($_custom-control-label, before); + + @if ($_before) { + &::before { + @include clay-css($_before); + } + } + + $_after: map-get($_custom-control-label, after); + + @if ($_after) { + &::after { + @include clay-css($_after); + } + } + } + } + + $_card: map-get($_active, card); + + @if ($_card) { + ~ .card { + @include clay-card-variant($_card); + } + } } } // Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247 - &[disabled], - &:disabled { - @include clay-css(map-deep-get($map, disabled)); + $_disabled: map-get($map, disabled); - ~ .custom-control-label { - @include clay-css( - map-deep-get($map, disabled, custom-control-label) - ); - } + @if ($_disabled) { + &[disabled], + &:disabled { + @include clay-css($_disabled); - ~ .custom-control-label::before { - @include clay-css( - map-deep-get( - $map, - disabled, - custom-control-label, - before - ) + $_custom-control-label: map-get( + $_disabled, + custom-control-label ); - } - ~ .custom-control-label::after { - @include clay-css( - map-deep-get( - $map, - disabled, - custom-control-label, - after - ) - ); - } + @if ($_custom-control-label) { + ~ .custom-control-label { + @include clay-css($_custom-control-label); - ~ .card { - @include clay-card-variant( - map-deep-get($map, disabled, card) - ); - } - } + $_before: map-get($_custom-control-label, before); - &:checked { - ~ .custom-control-label::before { - @include clay-css( - map-deep-get( - $map, - checked, - custom-control-label, - before - ) - ); - } + @if ($_before) { + &::before { + @include clay-css($_before); + } + } - ~ .custom-control-label::after { - @include clay-css( - map-deep-get($map, checked, custom-control-label, after) - ); - } + $_after: map-get($_custom-control-label, after); - ~ .card { - @include clay-card-variant( - map-deep-get($map, checked, card) - ); + @if ($_after) { + &::after { + @include clay-css($_after); + } + } + } + } + + $_card: map-get($_disabled, card); + + @if ($_card) { + ~ .card { + @include clay-card-variant($_card); + } + } } } - &[readonly] { - @include clay-css(map-deep-get($map, readonly)); + $_readonly: map-get($map, readonly); - ~ .custom-control-label { - @include clay-css( - map-deep-get($map, readonly, custom-control-label) - ); - } + @if ($_readonly) { + &[readonly] { + @include clay-css($_readonly); - ~ .custom-control-label::before { - @include clay-css( - map-deep-get( - $map, - readonly, - custom-control-label, - before - ) + $_custom-control-label: map-get( + $_readonly, + custom-control-label ); - } - ~ .custom-control-label::after { - @include clay-css( - map-deep-get( - $map, - readonly, - custom-control-label, - after - ) - ); - } + @if ($_custom-control-label) { + ~ .custom-control-label { + @include clay-css($_custom-control-label); - ~ .card { - @include clay-card-variant( - map-deep-get($map, readonly, card) - ); + $_before: map-get($_custom-control-label, before); + + @if ($_before) { + &::before { + @include clay-css($_before); + } + } + + $_after: map-get($_custom-control-label, after); + + @if ($_after) { + &::after { + @include clay-css($_after); + } + } + } + } + + $_card: map-get($_readonly, card); + + @if ($_card) { + ~ .card { + @include clay-card-variant($_card); + } + } } } - &[readonly][disabled] { - @include clay-css(map-deep-get($map, readonly, disabled)); + $_readonly-disabled: if( + $_readonly, + map-get($_readonly, disabled), + null + ); - ~ .custom-control-label { - @include clay-css( - map-deep-get( - $map, - readonly, - disabled, - custom-control-label - ) - ); - } + @if ($_readonly-disabled) { + &[readonly][disabled] { + @include clay-css($_readonly-disabled); - ~ .custom-control-label::before { - @include clay-css( - map-deep-get( - $map, - readonly, - disabled, - custom-control-label, - before - ) + $_custom-control-label: map-get( + $_readonly-disabled, + custom-control-label ); - } - ~ .custom-control-label::after { - @include clay-css( - map-deep-get( - $map, - readonly, - disabled, - custom-control-label, - after - ) - ); - } + @if ($_custom-control-label) { + ~ .custom-control-label { + @include clay-css($_custom-control-label); - ~ .card { - @include clay-card-variant( - map-deep-get($map, readonly, disabled, card) - ); + $_before: map-get($_custom-control-label, before); + + @if ($_before) { + &::before { + @include clay-css($_before); + } + } + + $_after: map-get($_custom-control-label, after); + + @if ($_after) { + &::after { + @include clay-css($_after); + } + } + } + } + + $_card: map-get($_readonly-disabled, card); + + @if ($_card) { + ~ .card { + @include clay-card-variant($_card); + } + } } } - &:checked { - ~ .custom-control-label::before { - @include clay-css( - map-deep-get( - $map, - checked, - custom-control-label, - before - ) - ); - } + $_checked: map-get($map, checked); - ~ .custom-control-label::after { - @include clay-css( - map-deep-get($map, checked, custom-control-label, after) + @if ($_checked) { + &:checked { + $_custom-control-label: map-get( + $_checked, + custom-control-label ); - } - ~ .card { - @include clay-card-variant( - map-deep-get($map, checked, card) - ); + @if ($_custom-control-label) { + ~ .custom-control-label { + @include clay-css($_custom-control-label); + + $_before: map-get($_custom-control-label, before); + + @if ($_before) { + &::before { + @include clay-css($_before); + } + } + + $_after: map-get($_custom-control-label, after); + + @if ($_after) { + &::after { + @include clay-css($_after); + } + } + } + } + + $_card: map-get($_checked, card); + + @if ($_card) { + ~ .card { + @include clay-card-variant($_card); + } + } } } - &:checked:hover { - ~ .custom-control-label::before { - @include clay-css( - map-deep-get( - $map, - checked, - hover, - custom-control-label, - before - ) - ); - } + $_checked-hover: if($_checked, map-get($_checked, hover), null); - ~ .custom-control-label::after { - @include clay-css( - map-deep-get( - $map, - checked, - hover, - custom-control-label, - after - ) + @if ($_checked-hover) { + &:checked:hover { + $_custom-control-label: map-get( + $_checked-hover, + custom-control-label ); - } - ~ .card { - @include clay-card-variant( - map-deep-get($map, checked, hover, card) - ); + @if ($_custom-control-label) { + ~ .custom-control-label { + @include clay-css($_custom-control-label); + + $_before: map-get($_custom-control-label, before); + + @if ($_before) { + &::before { + @include clay-css($_before); + } + } + + $_after: map-get($_custom-control-label, after); + + @if ($_after) { + &::after { + @include clay-css($_after); + } + } + } + } + + $_card: map-get($_checked-hover, card); + + @if ($_card) { + ~ .card { + @include clay-card-variant($_card); + } + } } } - @at-root { - &:checked { - #{$focus-visible-selector}, - #{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} { - ~ .custom-control-label::before { - @include clay-css( - map-deep-get( - $map, - checked, - focus, - custom-control-label, - before - ) + $_checked-focus: if($_checked, map-get($_checked, focus), null); + + @if ($_checked-focus) { + @at-root { + &:checked { + #{$focus-visible-selector}, + #{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} { + $_custom-control-label: map-get( + $_checked-focus, + custom-control-label ); + + @if ($_custom-control-label) { + ~ .custom-control-label { + @include clay-css($_custom-control-label); + + $_before: map-get( + $_custom-control-label, + before + ); + + @if ($_before) { + &::before { + @include clay-css($_before); + } + } + + $_after: map-get( + $_custom-control-label, + after + ); + + @if ($_after) { + } + &::after { + @include clay-css($_after); + } + } + } + + $_card: map-get($_checked-focus, card); + + @if ($_card) { + ~ .card { + @include clay-card-variant($_card); + } + } } + } + } + } - ~ .custom-control-label::after { - @include clay-css( - map-deep-get( - $map, - checked, - focus, - custom-control-label, - after - ) - ); + $_checked-active: if($_checked, map-get($_checked, active), null); + + @if ($_checked-active) { + &:checked:active { + $_custom-control-label: map-get( + $_checked-active, + custom-control-label + ); + + @if ($_custom-control-label) { + ~ .custom-control-label { + @include clay-css($_custom-control-label); + + $_before: map-get($_custom-control-label, before); + + @if ($_before) { + &::before { + @include clay-css($_before); + } + } + + $_after: map-get($_custom-control-label, after); + + @if ($_after) { + &::after { + @include clay-css($_after); + } + } } + } + $_card: map-get($_checked-active, card); + + @if ($_card) { ~ .card { @include clay-card-variant( - map-deep-get($map, checked, focus, card) + map-deep-get($map, checked, active, card) ); } } } } - &:checked:active { - ~ .custom-control-label::before { - @include clay-css( - map-deep-get( - $map, - checked, - active, - custom-control-label, - before - ) - ); - } + $_checked-disabled: if( + $_checked, + map-get($_checked, disabled), + null + ); - ~ .custom-control-label::after { - @include clay-css( - map-deep-get( - $map, - checked, - active, - custom-control-label, - after - ) - ); - } + @if ($_checked-disabled) { + &:checked[disabled], + &:checked:disabled { + @include clay-css($_checked-disabled); - ~ .card { - @include clay-card-variant( - map-deep-get($map, checked, active, card) + $_custom-control-label: map-get( + $_checked-disabled, + custom-control-label ); - } - } - &:checked[disabled], - &:checked:disabled { - ~ .custom-control-label::before { - @include clay-css( - map-deep-get( - $map, - checked, - disabled, - custom-control-label, - before - ) - ); - } + @if ($_custom-control-label) { + ~ .custom-control-label { + @include clay-css($_custom-control-label); - ~ .custom-control-label::after { - @include clay-css( - map-deep-get( - $map, - checked, - disabled, - custom-control-label, - after - ) - ); - } + $_before: map-get($_custom-control-label, before); - ~ .card { - @include clay-card-variant( - map-deep-get($map, checked, disabled, card) - ); + @if ($_before) { + &::before { + @include clay-css($_before); + } + } + + $_after: map-get($_custom-control-label, after); + + @if ($_after) { + &::after { + @include clay-css($_after); + } + } + } + } + + $_card: map-get($_checked-disabled, card); + + @if ($_card) { + ~ .card { + @include clay-card-variant($_card); + } + } } } - &:checked[readonly] { - ~ .custom-control-label::before { - @include clay-css( - map-deep-get( - $map, - checked, - readonly, - custom-control-label, - before - ) - ); - } + $_checked-readonly: if( + $_checked, + map-get($_checked, readonly), + null + ); - ~ .custom-control-label::after { - @include clay-css( - map-deep-get( - $map, - checked, - readonly, - custom-control-label, - after - ) - ); - } + @if ($_checked-readonly) { + &:checked[readonly] { + @include clay-css($_checked-readonly); - ~ .card { - @include clay-card-variant( - map-deep-get($map, checked, readonly, card) + $_custom-control-label: map-get( + $_checked-readonly, + custom-control-label ); + + @if ($_custom-control-label) { + ~ .custom-control-label { + @include clay-css($_custom-control-label); + + $_before: map-get($_custom-control-label, before); + + @if ($_before) { + &::before { + @include clay-css($_before); + } + } + + $_after: map-get($_custom-control-label, after); + + @if ($_after) { + &::after { + @include clay-css($_after); + } + } + } + } + + $_card: map-get($_checked-readonly, card); + + @if ($_card) { + ~ .card { + @include clay-card-variant($_card); + } + } } } - &:checked[readonly][disabled] { - ~ .custom-control-label::before { - @include clay-css( - map-deep-get( - $map, - checked, - readonly, - disabled, - custom-control-label, - before - ) - ); - } + $_checked-readonly-disabled: if( + $_checked-readonly, + map-get($_checked-readonly, disabled), + null + ); - ~ .custom-control-label::after { - @include clay-css( - map-deep-get( - $map, - checked, - readonly, - disabled, - custom-control-label, - after - ) - ); - } + @if ($_checked-readonly-disabled) { + &:checked[readonly][disabled] { + @include clay-css($_checked-readonly-disabled); - ~ .card { - @include clay-card-variant( - map-deep-get($map, checked, readonly, disabled, card) + $_custom-control-label: map-get( + $_checked-readonly-disabled, + custom-control-label ); + + @if ($_custom-control-label) { + ~ .custom-control-label { + @include clay-css($_custom-control-label); + + $_before: map-get($_custom-control-label, before); + + @if ($_before) { + &::before { + @include clay-css($_before); + } + } + + $_after: map-get($_custom-control-label, after); + + @if ($_after) { + &::after { + @include clay-css($_after); + } + } + } + } + + $_card: map-get($_checked-readonly-disabled, card); + + @if ($_card) { + ~ .card { + @include clay-card-variant($_card); + } + } } } - &:indeterminate { - ~ .custom-control-label::before { - @include clay-css( - map-deep-get( - $map, - indeterminate, - custom-control-label, - before - ) - ); - } + $_indeterminate: map-get($map, indeterminate); - ~ .custom-control-label::after { - @include clay-css( - map-deep-get( - $map, - indeterminate, - custom-control-label, - after - ) - ); - } + @if ($_indeterminate) { + &:indeterminate { + @include clay-css($_indeterminate); - ~ .card { - @include clay-card-variant( - map-deep-get($map, indeterminate, card) + $_custom-control-label: map-get( + $_indeterminate, + custom-control-label ); + + @if ($_custom-control-label) { + ~ .custom-control-label { + @include clay-css($_custom-control-label); + + $_before: map-get($_custom-control-label, before); + + @if ($_before) { + &::before { + @include clay-css($_before); + } + } + + $_after: map-get($_custom-control-label, after); + + @if ($_after) { + &::after { + @include clay-css($_after); + } + } + } + } + + $_card: map-get($_indeterminate, card); + + @if ($_card) { + ~ .card { + @include clay-card-variant($_card); + } + } } } - &:indeterminate:hover { - ~ .custom-control-label::before { - @include clay-css( - map-deep-get( - $map, - indeterminate, - hover, - custom-control-label, - before - ) - ); - } + $_indeterminate-hover: if( + $_indeterminate, + map-get($_indeterminate, hover), + null + ); - ~ .custom-control-label::after { - @include clay-css( - map-deep-get( - $map, - indeterminate, - hover, - custom-control-label, - after - ) - ); - } + @if ($_indeterminate-hover) { + &:indeterminate:hover { + @include clay-css($_indeterminate-hover); - ~ .card { - @include clay-card-variant( - map-deep-get($map, indeterminate, hover, card) + $_custom-control-label: map-get( + $_indeterminate-hover, + custom-control-label ); - } - } - @at-root { - &:indeterminate { - #{$focus-visible-selector}, - #{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} { - ~ .custom-control-label::before { - @include clay-css( - map-deep-get( - $map, - indeterminate, - focus, - custom-control-label, - before - ) - ); - } + @if ($_custom-control-label) { + ~ .custom-control-label { + @include clay-css($_custom-control-label); - ~ .custom-control-label::after { - @include clay-css( - map-deep-get( - $map, - indeterminate, - focus, - custom-control-label, - after - ) - ); + $_before: map-get($_custom-control-label, before); + + @if ($_before) { + &::before { + @include clay-css($_before); + } + } + + $_after: map-get($_custom-control-label, after); + + @if ($_after) { + &::after { + @include clay-css($_after); + } + } } + } + $_card: map-get($_indeterminate-hover, card); + + @if ($_card) { ~ .card { - @include clay-card-variant( - map-deep-get($map, indeterminate, focus, card) - ); + @include clay-card-variant($_card); } } } } - &:indeterminate:active { - ~ .custom-control-label::before { - @include clay-css( - map-deep-get( - $map, - indeterminate, - active, - custom-control-label, - before - ) - ); - } + $_indeterminate-focus: if( + $_indeterminate, + map-get($_indeterminate, focus), + null + ); + + @if ($_indeterminate-focus) { + @at-root { + &:indeterminate { + #{$focus-visible-selector}, + #{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} { + @include clay-css($_indeterminate-focus); + + $_custom-control-label: map-get( + $_indeterminate-focus, + custom-control-label + ); - ~ .custom-control-label::after { - @include clay-css( - map-deep-get( - $map, - indeterminate, - active, - custom-control-label, - after - ) - ); + @if ($_custom-control-label) { + ~ .custom-control-label { + @include clay-css($_custom-control-label); + + $_before: map-get( + $_custom-control-label, + before + ); + + @if ($_before) { + &::before { + @include clay-css($_before); + } + } + + $_after: map-get( + $_custom-control-label, + after + ); + + @if ($_after) { + &::after { + @include clay-css($_after); + } + } + } + } + + $_card: map-get($_indeterminate-focus, card); + + @if ($_card) { + ~ .card { + @include clay-card-variant($_card); + } + } + } + } } + } - ~ .card { - @include clay-card-variant( - map-deep-get($map, indeterminate, active, card) + $_indeterminate-active: if( + $_indeterminate, + map-get($_indeterminate, active), + null + ); + + @if ($_indeterminate-active) { + &:indeterminate:active { + @include clay-css($_indeterminate-active); + + $_custom-control-label: map-get( + $_indeterminate-active, + custom-control-label ); + + @if ($_custom-control-label) { + ~ .custom-control-label { + @include clay-css($_custom-control-label); + + $_before: map-get($_custom-control-label, before); + + @if ($_before) { + &::before { + @include clay-css($_before); + } + } + + $_after: map-get($_custom-control-label, after); + + @if ($_after) { + &::after { + @include clay-css($_after); + } + } + } + } + + $_card: map-get($_indeterminate-active, card); + + @if ($_card) { + ~ .card { + @include clay-card-variant($_card); + } + } } } - &:indeterminate[disabled], - &:indeterminate:disabled { - ~ .custom-control-label::before { - @include clay-css( - map-deep-get( - $map, - indeterminate, - disabled, - custom-control-label, - before - ) - ); - } + $_indeterminate-disabled: if( + $_indeterminate, + map-get($_indeterminate, disabled), + null + ); - ~ .custom-control-label::after { - @include clay-css( - map-deep-get( - $map, - indeterminate, - disabled, - custom-control-label, - after - ) - ); - } + @if ($_indeterminate-disabled) { + &:indeterminate[disabled], + &:indeterminate:disabled { + @include clay-css($_indeterminate-disabled); - ~ .card { - @include clay-card-variant( - map-deep-get($map, indeterminate, disabled, card) + $_custom-control-label: map-get( + $_indeterminate-disabled, + custom-control-label ); + + @if ($_custom-control-label) { + ~ .custom-control-label { + @include clay-css($_custom-control-label); + + $_before: map-get($_custom-control-label, before); + + @if ($_before) { + &::before { + @include clay-css($_before); + } + } + + $_after: map-get($_custom-control-label, after); + + @if ($_after) { + &::after { + @include clay-css($_after); + } + } + } + } + + $_card: map-get($_indeterminate-disabled, card); + + @if ($_card) { + ~ .card { + @include clay-card-variant($_card); + } + } } } - &:indeterminate[readonly] { - ~ .custom-control-label::before { - @include clay-css( - map-deep-get( - $map, - indeterminate, - readonly, - custom-control-label, - before - ) - ); - } + $_indeterminate-readonly: if( + $_indeterminate, + map-get($_indeterminate, readonly), + null + ); - ~ .custom-control-label::after { - @include clay-css( - map-deep-get( - $map, - indeterminate, - readonly, - custom-control-label, - after - ) - ); - } + @if ($_indeterminate-readonly) { + &:indeterminate[readonly] { + @include clay-css($_indeterminate-readonly); - ~ .card { - @include clay-card-variant( - map-deep-get($map, indeterminate, readonly, card) + $_custom-control-label: map-get( + $_indeterminate-readonly, + custom-control-label ); + + @if ($_custom-control-label) { + ~ .custom-control-label { + @include clay-css($_custom-control-label); + + $_before: map-get($_custom-control-label, before); + + @if ($_before) { + &::before { + @include clay-css($_before); + } + } + + $_after: map-get($_custom-control-label, after); + + @if ($_after) { + &::after { + @include clay-css($_after); + } + } + } + } + + $_card: map-get($_indeterminate-readonly, card); + + @if ($_card) { + ~ .card { + @include clay-card-variant($_card); + } + } } } - &:indeterminate[readonly][disabled] { - ~ .custom-control-label::before { - @include clay-css( - map-deep-get( - $map, - indeterminate, - readonly, - disabled, - custom-control-label, - before - ) - ); - } + $_indeterminate-readonly-disabled: if( + $_indeterminate-readonly, + map-get($_indeterminate-readonly, disabled), + null + ); - ~ .custom-control-label::after { - @include clay-css( - map-deep-get( - $map, - indeterminate, - readonly, - disabled, - custom-control-label, - after - ) - ); - } + @if ($_indeterminate-readonly-disabled) { + &:indeterminate[readonly][disabled] { + @include clay-css($_indeterminate-readonly-disabled); - ~ .card { - @include clay-card-variant( - map-deep-get( - $map, - indeterminate, - readonly, - disabled, - card - ) + $_custom-control-label: map-get( + $_indeterminate-readonly-disabled, + custom-control-label ); + + @if ($_custom-control-label) { + ~ .custom-control-label { + @include clay-css($_custom-control-label); + + $_before: map-get($_custom-control-label, before); + + @if ($_before) { + &::before { + @include clay-css($_before); + } + } + + $_after: map-get($_custom-control-label, after); + + @if ($_after) { + &::after { + @include clay-css($_after); + } + } + } + } + + $_card: map-get($_indeterminate-readonly-disabled, card); + + @if ($_card) { + ~ .card { + @include clay-card-variant($_card); + } + } } } } @@ -926,46 +1184,71 @@ @if (type-of($map) == 'map') { $enabled: setter(map-get($map, enabled), true); - @include clay-css($map); - @if ($enabled) { - label { - @include clay-css(map-deep-get($map, label)); + @if (length($map) != 0) { + @include clay-css($map); } - .custom-control-label { - @include clay-css(map-deep-get($map, custom-control-label)); + $_label: map-get($map, label); - &::before { - @include clay-css( - map-deep-get($map, custom-control-label, before) - ); + @if ($_label) { + label { + @include clay-css($_label); } + } - &::after { - @include clay-css( - map-deep-get($map, custom-control-label, after) - ); + $_custom-control-label: map-get($map, custom-control-label); + + @if ($_custom-control-label) { + .custom-control-label { + @include clay-css($_custom-control-label); + + $_before: map-get($_custom-control-label, before); + + @if ($_before) { + &::before { + @include clay-css($_before); + } + } + + $_after: map-get($_custom-control-label, after); + + @if ($_after) { + &::after { + @include clay-css($_after); + } + } } } - .custom-control-label-text { - @include clay-css( - map-deep-get($map, custom-control-label-text) - ); + $_custom-control-label-text: map-get( + $map, + custom-control-label-text + ); - small, - .small { - @include clay-css( - map-deep-get($map, custom-control-label-text, small) - ); + @if ($_custom-control-label-text) { + .custom-control-label-text { + @include clay-css($_custom-control-label-text); + + $_small: map-get($_custom-control-label-text, small); + + @if ($_small) { + small, + .small { + @include clay-css($_small); + } + } } } - .custom-control-input { - @include clay-custom-control-input-variant( - map-deep-get($map, custom-control-input) - ); + $_custom-control-input: map-get($map, custom-control-input); + + @if ($_custom-control-input) { + .custom-control-input { + @include clay-custom-control-input-variant( + $_custom-control-input + ); + } } } } diff --git a/packages/clay-css/src/scss/mixins/_dropdown-menu.scss b/packages/clay-css/src/scss/mixins/_dropdown-menu.scss index 5b351ea4f6..e5ebb8e131 100644 --- a/packages/clay-css/src/scss/mixins/_dropdown-menu.scss +++ b/packages/clay-css/src/scss/mixins/_dropdown-menu.scss @@ -79,7 +79,9 @@ ); @if ($enabled) { - @include clay-css($base); + @if (length($base) != 0) { + @include clay-css($base); + } @if ($breakpoint-down) { @include media-breakpoint-down($breakpoint-down) { @@ -87,124 +89,209 @@ } } - &::before { - @include clay-css(map-get($map, before)); + $_before: map-get($map, before); + + @if ($_before) { + &::before { + @include clay-css($_before); + } } - &::after { - @include clay-css(map-get($map, after)); + $_after: map-get($map, after); + + @if ($_after) { + &::after { + @include clay-css($_after); + } } - &.show { - @include clay-css(map-get($map, show)); + $_show: map-get($map, show); + + @if ($_show) { + &.show { + @include clay-css($_show); + } } - .dropdown-header { - @include clay-css(map-get($map, dropdown-header)); + $_dropdown-header: map-get($map, dropdown-header); + + @if ($_dropdown-header) { + .dropdown-header { + @include clay-css($_dropdown-header); + } } - .dropdown-subheader { - @include clay-css(map-get($map, dropdown-subheader)); + $_dropdown-subheader: map-get($map, dropdown-subheader); + + @if ($_dropdown-subheader) { + .dropdown-subheader { + @include clay-css($_dropdown-subheader); + } } - .dropdown-section { - @include clay-css(map-get($map, dropdown-section)); + $_dropdown-section: map-get($map, dropdown-section); + + @if ($_dropdown-section) { + .dropdown-section { + @include clay-css($_dropdown-section); + } } - .dropdown-caption { - @include clay-css(map-get($map, dropdown-caption)); + $_dropdown-caption: map-get($map, dropdown-caption); + + @if ($_dropdown-caption) { + .dropdown-caption { + @include clay-css($_dropdown-caption); + } } - .dropdown-item { - @include clay-dropdown-item-variant( - map-get($map, dropdown-item) - ); + $_dropdown-item: map-get($map, dropdown-item); + + @if ($_dropdown-item) { + .dropdown-item { + @include clay-dropdown-item-variant($_dropdown-item); + } } - .dropdown-item-scroll { - @include clay-dropdown-item-variant( - map-get($map, dropdown-item-scroll) - ); + $_dropdown-item-scroll: map-get($map, dropdown-item-scroll); + + @if ($_dropdown-item-scroll) { + .dropdown-item-scroll { + @include clay-dropdown-item-variant($_dropdown-item-scroll); + } } - .dropdown-item-scroll-down { - @include clay-dropdown-item-variant( - map-get($map, dropdown-item-scroll-down) - ); + $_dropdown-item-scroll-down: map-get( + $map, + dropdown-item-scroll-down + ); + + @if ($_dropdown-item-scroll-down) { + .dropdown-item-scroll-down { + @include clay-dropdown-item-variant( + $_dropdown-item-scroll-down + ); + } } - .dropdown-item-scroll-up { - @include clay-dropdown-item-variant( - map-get($map, dropdown-item-scroll-up) - ); + $_dropdown-item-scroll-up: map-get($map, dropdown-item-scroll-up); + + @if ($_dropdown-item-scroll-up) { + .dropdown-item-scroll-up { + @include clay-dropdown-item-variant( + $_dropdown-item-scroll-up + ); + } } - .dropdown-divider { - @include clay-css(map-get($map, dropdown-divider)); + $_dropdown-divider: map-get($map, dropdown-divider); + + @if ($_dropdown-divider) { + .dropdown-divider { + @include clay-css($_dropdown-divider); + } } - .dropdown-footer { - @include clay-css(map-get($map, dropdown-footer)); + $_dropdown-ooter: map-get($map, dropdown-ooter); + + @if ($_dropdown-ooter) { + .dropdown-footer { + @include clay-css($_dropdown-footer); + } } - .alert { - @include clay-alert-variant(map-get($map, alert)); + $_alert: map-get($map, alert); + + @if ($_alert) { + .alert { + @include clay-alert-variant($_alert); + } } - .alert-fluid { - @include clay-alert-variant(map-get($map, alert-fluid)); + $_alert-fluid: map-get($map, alert-fluid); + + @if ($_alert-fluid) { + .alert-fluid { + @include clay-alert-variant($_alert-fluid); + } } - &.dropdown-menu-indicator-start { - $dropdown-menu-indicator-start: setter( - map-get($map, dropdown-menu-indicator-start), - () - ); + $_dropdown-menu-indicator-start: map-get( + $map, + dropdown-menu-indicator-start + ); - @include clay-css($dropdown-menu-indicator-start); + @if ($_dropdown-menu-indicator-start) { + &.dropdown-menu-indicator-start { + @include clay-css($_dropdown-menu-indicator-start); - .dropdown-item { - @include clay-dropdown-item-variant( - map-get($dropdown-menu-indicator-start, dropdown-item) + $_dropdown-item: map-get( + $_dropdown-menu-indicator-start, + dropdown-item ); - } - .dropdown-item-indicator-start { - @include clay-link( - map-get( - $dropdown-menu-indicator-start, - dropdown-item-indicator-start - ) + @if ($_dropdown-item) { + .dropdown-item { + @include clay-dropdown-item-variant( + $_dropdown-item + ); + } + } + + $_dropdown-item-indicator-start: map-get( + $_dropdown-menu-indicator-start, + dropdown-item-indicator-start ); + + @if ($_dropdown-item-indicator-start) { + .dropdown-item-indicator-start { + @include clay-link($_dropdown-item-indicator-start); + } + } } } - &.dropdown-menu-indicator-end { - $dropdown-menu-indicator-end: setter( - map-get($map, dropdown-menu-indicator-end), - () - ); + $_dropdown-menu-indicator-end: map-get( + $map, + dropdown-menu-indicator-end + ); - @include clay-css($dropdown-menu-indicator-end); + @if ($_dropdown-menu-indicator-end) { + &.dropdown-menu-indicator-end { + @include clay-css($_dropdown-menu-indicator-end); - .dropdown-item { - @include clay-dropdown-item-variant( - map-get($dropdown-menu-indicator-end, dropdown-item) + $_dropdown-item: map-get( + $_dropdown-menu-indicator-end, + dropdown-item ); - } - .dropdown-item-indicator-end { - @include clay-link( - map-get( - $dropdown-menu-indicator-end, - dropdown-item-indicator-end - ) + @if ($_dropdown-item) { + .dropdown-item { + @include clay-dropdown-item-variant( + $_dropdown-item + ); + } + } + + $_dropdown-item-indicator-end: map-get( + $_dropdown-menu-indicator-end, + dropdown-item-indicator-end ); + + @if ($_dropdown-item-indicator-end) { + .dropdown-item-indicator-end { + @include clay-link($_dropdown-item-indicator-end); + } + } } } - .inline-scroller { - @include clay-css(map-get($map, inline-scroller)); + $_inline-scroller: map-get($map, inline-scroller); + + @if ($_inline-scroller) { + .inline-scroller { + @include clay-css($_inline-scroller); + } } $_media-breakpoint-down: map-get($map, media-breakpoint-down); @@ -579,136 +666,214 @@ ); @if ($enabled) { - @include clay-css($base); + @if (length($base) != 0) { + @include clay-css($base); + } - &:link { - $_link: setter(map-get($map, link), ()); + $_link: map-get($map, link); - @include clay-css($_link); + @if ($_link) { + &:link { + @include clay-css($_link); - &::before { - @include clay-css(map-get($_link, before)); - } + $_before: map-get($_link, before); - &::after { - @include clay-css(map-get($_link, after)); - } + @if ($_before) { + &::before { + @include clay-css($_before); + } + } - .c-kbd-inline { - @include clay-css(map-get($_link, c-kbd-inline)); - } - } + $_after: map-get($_link, after); - &:visited { - $_visited: setter(map-get($map, visited), ()); + @if ($_after) { + &::after { + @include clay-css($_after); + } + } - @include clay-css($_visited); + $_c-kbd-inline: map-get($_link, c-kbd-inline); - &::before { - @include clay-css(map-get($_visited, before)); + @if ($_c-kbd-inline) { + .c-kbd-inline { + @include clay-css($_c-kbd-inline); + } + } } + } - &::after { - @include clay-css(map-get($_visited, after)); - } + $_visited: map-get($map, visited); - .c-kbd-inline { - @include clay-css(map-get($_visited, c-kbd-inline)); - } - } + @if ($_visited) { + &:visited { + @include clay-css($_visited); - &:hover, - &.hover { - @include clay-css($hover); + $_before: map-get($_visited, before); - &::before { - @include clay-css(map-get($hover, before)); - } + @if ($_before) { + &::before { + @include clay-css($_before); + } + } - &::after { - @include clay-css(map-get($hover, after)); - } + $_after: map-get($_visited, after); - .c-kbd-inline { - @include clay-css($hover-c-kbd-inline); + @if ($_after) { + &::after { + @include clay-css($_after); + } + } + + $_c-kbd-inline: map-get($_visited, c-kbd-inline); + + @if ($_c-kbd-inline) { + .c-kbd-inline { + @include clay-css($_c-kbd-inline); + } + } } } - @at-root { - &.focus, - #{$focus-visible-selector}, - #{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} { - @include clay-css($focus); + @if (length($hover) != 0) { + &:hover, + &.hover { + @include clay-css($hover); + + $_before: map-get($hover, before); - &::before { - @include clay-css(map-get($focus, before)); + @if ($_before) { + &::before { + @include clay-css($_before); + } } - &::after { - @include clay-css(map-get($focus, after)); + $_after: map-get($hover, after); + + @if ($_after) { + &::after { + @include clay-css($_after); + } } - .c-kbd-inline { - @include clay-css($focus-c-kbd-inline); + @if (length($hover-c-kbd-inline) != 0) { + .c-kbd-inline { + @include clay-css($hover-c-kbd-inline); + } } } } - &:active { - @include clay-css($active); + @if (length($focus) != 0) { + @at-root { + &.focus, + #{$focus-visible-selector}, + #{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} { + @include clay-css($focus); - &::before { - @include clay-css(map-get($active, before)); - } + $_before: map-get($focus, before); - &::after { - @include clay-css(map-get($active, after)); - } + @if ($_before) { + &::before { + @include clay-css($_before); + } + } - label { - color: map-get($active, color); - } + $_after: map-get($focus, after); - .form-check-label { - color: map-get($active, color); - font-weight: map-get($active, font-weight); - } + @if ($_after) { + &::after { + @include clay-css($_after); + } + } - .custom-control-label { - font-weight: map-get($active, font-weight); + @if (length($focus-c-kbd-inline) != 0) { + .c-kbd-inline { + @include clay-css($focus-c-kbd-inline); + } + } + } } + } - .c-kbd-inline { - @include clay-css($active-c-kbd-inline); + @if (length($active) != 0) { + &:active { + @include clay-css($active); + + $_before: map-get($active, before); + + @if ($_before) { + &::before { + @include clay-css($_before); + } + } + + $_after: map-get($active, after); + + @if ($_after) { + &::after { + @include clay-css($_after); + } + } + + label { + color: map-get($active, color); + } + + .form-check-label { + color: map-get($active, color); + font-weight: map-get($active, font-weight); + } + + .custom-control-label { + font-weight: map-get($active, font-weight); + } + + @if (length($active-c-kbd-inline) != 0) { + .c-kbd-inline { + @include clay-css($active-c-kbd-inline); + } + } } } - &.active { - @include clay-css($active-class); + @if (length($active-class) != 0) { + &.active { + @include clay-css($active-class); - &::before { - @include clay-css(map-get($active-class, before)); - } + $_before: map-get($active-class, before); - &::after { - @include clay-css(map-get($active-class, after)); - } + @if ($_before) { + &::before { + @include clay-css($_before); + } + } - label { - color: map-get($active-class, color); - } + $_after: map-get($active-class, after); - .form-check-label { - color: map-get($active-class, color); - font-weight: map-get($active-class, font-weight); - } + @if ($_after) { + &::after { + @include clay-css($_after); + } + } - .custom-control-label { - font-weight: map-get($active-class, font-weight); - } + label { + color: map-get($active-class, color); + } - .c-kbd-inline { - @include clay-css($active-class-c-kbd-inline); + .form-check-label { + color: map-get($active-class, color); + font-weight: map-get($active-class, font-weight); + } + + .custom-control-label { + font-weight: map-get($active-class, font-weight); + } + + @if (length($active-class-c-kbd-inline) != 0) { + .c-kbd-inline { + @include clay-css($active-class-c-kbd-inline); + } + } } } @@ -725,60 +890,100 @@ } } - &:disabled, - &.disabled { - @include clay-css($disabled); + @if (length($disabled) != 0) { + &:disabled, + &.disabled { + @include clay-css($disabled); - &::before { - @include clay-css(map-get($disabled, before)); - } + $_before: map-get($disabled, before); - &::after { - @include clay-css(map-get($disabled, after)); - } + @if ($_before) { + &::before { + @include clay-css($_before); + } + } - label, - .form-check-label { - color: map-get($disabled, color); - } + $_after: map-get($disabled, after); - .c-kbd-inline { - @include clay-css($disabled-c-kbd-inline); - } + @if ($_after) { + &::after { + @include clay-css($_after); + } + } - &:active { - @include clay-css($disabled-active); + label, + .form-check-label { + color: map-get($disabled, color); + } - &::before { - @include clay-css(map-get($disabled-active, before)); + @if (length($disabled-c-kbd-inline) != 0) { + .c-kbd-inline { + @include clay-css($disabled-c-kbd-inline); + } } - &::after { - @include clay-css(map-get($disabled-active, after)); + @if (length($disabled-active) != 0) { + &:active { + @include clay-css($disabled-active); + + $_before: map-get($disabled-active, before); + + @if ($_before) { + &::before { + @include clay-css($_before); + } + } + + $_after: map-get($map, after); + + @if ($_after) { + &::after { + @include clay-css($_after); + } + } + } } } } - &.show { - $show: setter(map-get($map, show), ()); + $_show: map-get($map, show); - @include clay-css($show); + @if ($_show) { + &.show { + @include clay-css($_show); - &::before { - @include clay-css(map-get($show, before)); - } + $_before: map-get($_show, before); - &::after { - @include clay-css(map-get($show, after)); + @if ($_before) { + &::before { + @include clay-css($_before); + } + } + + $_after: map-get($_show, after); + + @if ($_after) { + &::after { + @include clay-css($_after); + } + } } } - &::before { - @include clay-css(map-get($map, before)); + $_before: map-get($map, before); + + @if ($_before) { + &::before { + @include clay-css($_before); + } } - &::after { - @include clay-css(map-get($map, after)); + $_after: map-get($map, after); + + @if ($_after) { + &::after { + @include clay-css($_after); + } } @if (map-get($c-inner, enabled)) { @@ -787,40 +992,66 @@ } } - &.autofit-row { - @include clay-css(map-deep-get($map, '&.autofit-row')); + $_autofit-row: map-get($map, '&.autofit-row'); - > .autofit-col { - @include clay-css( - map-deep-get($map, '&.autofit-row', autofit-col) - ); - } + @if ($_autofit-row) { + &.autofit-row { + @include clay-css($_autofit-row); + + $_autofit-col: map-get($_autofit-row, autofit-col); + + @if ($_autofit-col) { + > .autofit-col { + @include clay-css($_autofit-col); + } + } - > .autofit-col-expand { - @include clay-css( - map-deep-get($map, '&.autofit-row', autofit-col-expand) + $_autofit-col-expand: map-get( + $_autofit-row, + autofit-col-expand ); + + @if ($_autofit-col-expand) { + > .autofit-col-expand { + @include clay-css($_autofit-col-expand); + } + } } } - .autofit-row { - @include clay-css(map-get($map, autofit-row)); + $_autofit-row: map-get($map, autofit-row); - > .autofit-col { - @include clay-css( - map-deep-get($map, autofit-row, autofit-col) - ); - } + @if ($_autofit-row) { + .autofit-row { + @include clay-css($_autofit-row); + + $_autofit-col: map-get($_autofit-row, autofit-col); - > .autofit-col-expand { - @include clay-css( - map-deep-get($map, autofit-row, autofit-col-expand) + @if ($_autofit-col) { + > .autofit-col { + @include clay-css($_autofit-col); + } + } + + $_autofit-col-expand: map-get( + $_autofit-row, + autofit-col-expand ); + + @if ($_autofit-col-expand) { + > .autofit-col-expand { + @include clay-css($_autofit-col-expand); + } + } } } - .c-kbd-inline { - @include clay-css(map-get($map, c-kbd-inline)); + $_c-kbd-inline: map-get($map, c-kbd-inline); + + @if ($_c-kbd-inline) { + .c-kbd-inline { + @include clay-css($_c-kbd-inline); + } } .form-check-label { @@ -831,18 +1062,30 @@ font-weight: map-get($map, font-weight); } - .inline-item { - $_inline-item: setter(map-get($map, inline-item), ()); + $_inline-item: map-get($map, inline-item); + + @if ($_inline-item) { + .inline-item { + @include clay-css($_inline-item); - @include clay-css($_inline-item); + $_lexicon-icon: map-get($_inline-item, lexicon-icon); - .lexicon-icon { - @include clay-css(map-get($_inline-item, lexicon-icon)); + @if ($_lexicon-icon) { + .lexicon-icon { + @include clay-css( + map-get($_inline-item, lexicon-icon) + ); + } + } } } - .label { - @include clay-label-variant(map-get($map, label)); + $_label: map-get($map, label); + + @if ($_label) { + .label { + @include clay-label-variant($_label); + } } } }