diff --git a/packages/clay-css/src/scss/mixins/_buttons.scss b/packages/clay-css/src/scss/mixins/_buttons.scss index 4becdab237..640f6377af 100644 --- a/packages/clay-css/src/scss/mixins/_buttons.scss +++ b/packages/clay-css/src/scss/mixins/_buttons.scss @@ -594,7 +594,9 @@ ); @if ($enabled) { - @include clay-css($base); + @if (length($base) != 0) { + @include clay-css($base); + } @if ($breakpoint-down) { @include media-breakpoint-down($breakpoint-down) { @@ -608,314 +610,567 @@ } } - &::before { - @include clay-css(map-get($map, before)); - } - - &::after { - @include clay-css(map-get($map, after)); - } - - &:link { - $_link: setter(map-get($map, link), ()); - - @include clay-css($_link); + $_before: map-get($map, before); + @if ($_before) { &::before { - @include clay-css(map-get($_link, before)); + @include clay-css($_before); } + } + $_after: map-get($map, after); + + @if ($_after) { &::after { - @include clay-css(map-get($_link, after)); + @include clay-css($_after); } + } - .inline-item { - @include clay-css(map-get($_link, inline-item)); - } + $_link: map-get($map, link); - .inline-item-before { - @include clay-css(map-get($_link, inline-item-before)); - } + @if ($_link) { + &:link { + @include clay-css($_link); - .inline-item-middle { - @include clay-css(map-get($_link, inline-item-middle)); - } + $_before: map-get($_link, before); - .inline-item-after { - @include clay-css(map-get($_link, inline-item-after)); - } - } + @if ($_before) { + &::before { + @include clay-css($_before); + } + } - &:visited { - $_visited: setter(map-get($map, visited), ()); + $_after: map-get($_link, after); - @include clay-css($_visited); + @if ($_after) { + &::after { + @include clay-css($_after); + } + } - &::before { - @include clay-css(map-get($_visited, before)); - } + $_inline-item: map-get($_link, inline-item); - &::after { - @include clay-css(map-get($_visited, after)); - } + @if ($_inline-item) { + .inline-item { + @include clay-css($_inline-item); + } + } - .inline-item { - @include clay-css(map-get($_visited, inline-item)); - } + $_inline-item-before: map-get($_link, inline-item-before); - .inline-item-before { - @include clay-css(map-get($_visited, inline-item-before)); - } + @if ($_inline-item-before) { + .inline-item-before { + @include clay-css($_inline-item-before); + } + } - .inline-item-middle { - @include clay-css(map-get($_visited, inline-item-middle)); - } + $_inline-item-middle: map-get($_link, inline-item-middle); - .inline-item-after { - @include clay-css(map-get($_visited, inline-item-after)); + @if ($_inline-item-middle) { + .inline-item-middle { + @include clay-css($_inline-item-middle); + } + } + + $_inline-item-after: map-get($_link, inline-item-after); + + @if ($_inline-item-after) { + .inline-item-after { + @include clay-css($_inline-item-after); + } + } } } - &:hover { - @include clay-css($hover); + $_visited: map-get($map, visited); - &::before { - @include clay-css(map-deep-get($map, hover, before)); - } + @if ($_visited) { + &:visited { + @include clay-css($_visited); - &::after { - @include clay-css(map-deep-get($map, hover, after)); - } + $_before: map-get($_visited, before); - .inline-item { - @include clay-css(map-get($hover, inline-item)); - } + @if ($_before) { + &::before { + @include clay-css($_before); + } + } - .inline-item-before { - @include clay-css(map-get($hover, inline-item-before)); - } + $_after: map-get($_visited, after); - .inline-item-middle { - @include clay-css(map-get($hover, inline-item-middle)); - } + @if ($_after) { + &::after { + @include clay-css($_after); + } + } - .inline-item-after { - @include clay-css(map-get($hover, inline-item-after)); - } - } + $_inline-item: map-get($_visited, inline-item); + + @if ($_inline-item) { + .inline-item { + @include clay-css($_inline-item); + } + } + + $_inline-item-before: map-get( + $_visited, + inline-item-before + ); - @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 ($_inline-item-before) { + .inline-item-before { + @include clay-css($_inline-item-before); + } + } - &::before { - @include clay-css(map-deep-get($map, focus, before)); + $_inline-item-middle: map-get( + $_visited, + inline-item-middle + ); + + @if ($_inline-item-middle) { + .inline-item-middle { + @include clay-css($_inline-item-middle); + } } - &::after { - @include clay-css(map-deep-get($map, focus, after)); + $_inline-item-after: map-get($_visited, inline-item-after); + + @if ($_inline-item-after) { + .inline-item-after { + @include clay-css($_inline-item-after); + } } + } + } - &:hover { - @include clay-css(map-deep-get($map, focus, hover)); + @if (length($hover) != 0) { + &:hover { + @include clay-css($hover); + $_before: map-get($hover, before); + + @if ($_before) { &::before { - @include clay-css( - map-deep-get($map, focus, hover, before) - ); + @include clay-css($_before); } + } + + $_after: map-get($hover, after); + @if ($_after) { &::after { - @include clay-css( - map-deep-get($map, focus, hover, after) - ); + @include clay-css($_after); } } - .inline-item { - @include clay-css(map-get($focus, inline-item)); + $_inline-item: map-get($hover, inline-item); + + @if ($_inline-item) { + .inline-item { + @include clay-css($_inline-item); + } } - .inline-item-before { - @include clay-css(map-get($focus, inline-item-before)); + $_inline-item-before: map-get($hover, inline-item-before); + + @if ($_inline-item-before) { + .inline-item-before { + @include clay-css($_inline-item-before); + } } - .inline-item-middle { - @include clay-css(map-get($focus, inline-item-middle)); + $_inline-item-middle: map-get($hover, inline-item-middle); + + @if ($_inline-item-middle) { + .inline-item-middle { + @include clay-css($_inline-item-middle); + } } - .inline-item-after { - @include clay-css(map-get($focus, inline-item-after)); + $_inline-item-after: map-get($hover, inline-item-after); + + @if ($_inline-item-after) { + .inline-item-after { + @include clay-css($_inline-item-after); + } } } } - &: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-deep-get($map, active, before)); - } + $_before: map-get($focus, before); - &::after { - @include clay-css(map-deep-get($map, active, after)); + @if ($_before) { + &::before { + @include clay-css($_before); + } + } + + $_after: map-get($focus, after); + + @if ($_after) { + &::after { + @include clay-css($_after); + } + } + + $_hover: map-get($focus, hover); + + @if ($_hover) { + &:hover { + @include clay-css($_hover); + + $_before: map-get($_hover, before); + + @if ($_before) { + &::before { + @include clay-css($_before); + } + } + + $_after: map-get($_hover, after); + + @if ($_after) { + &::after { + @include clay-css($_after); + } + } + } + } + + $_inline-item: map-get($focus, inline-item); + + @if ($_inline-item) { + .inline-item { + @include clay-css($_inline-item); + } + } + + $_inline-item-before: map-get( + $focus, + inline-item-before + ); + + @if ($_inline-item-before) { + .inline-item-before { + @include clay-css($_inline-item-before); + } + } + + $_inline-item-middle: map-get( + $focus, + inline-item-middle + ); + + @if ($_inline-item-middle) { + .inline-item-middle { + @include clay-css($_inline-item-middle); + } + } + + $_inline-item-after: map-get($focus, inline-item-after); + + @if ($_inline-item-after) { + .inline-item-after { + @include clay-css($_inline-item-after); + } + } + } } + } - @at-root { - #{$focus-visible-selector}, - #{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} { - @include clay-css($active-focus); + @if (length($active) != 0) { + &:active { + @include clay-css($active); + + $_before: map-get($active, before); + @if ($_before) { &::before { - @include clay-css( - map-deep-get($map, active, focus, before) - ); + @include clay-css($_before); } + } + + $_after: map-get($active, after); + @if ($_after) { &::after { - @include clay-css( - map-deep-get($map, active, focus, after) - ); + @include clay-css($_after); } } - } - .inline-item { - @include clay-css(map-get($active, inline-item)); - } + $_focus: map-get($active, focus); - .inline-item-before { - @include clay-css(map-get($active, inline-item-before)); - } + @if ($_focus) { + @at-root { + #{$focus-visible-selector}, + #{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} { + @include clay-css($_focus); - .inline-item-middle { - @include clay-css(map-get($active, inline-item-middle)); - } + $_before: map-get($_focus, before); - .inline-item-after { - @include clay-css(map-get($active, inline-item-after)); + @if ($_before) { + &::before { + @include clay-css($_before); + } + } + + $_after: map-get($_focus, after); + + @if ($_after) { + &::after { + @include clay-css($_after); + } + } + } + } + } + + $_inline-item: map-get($active, inline-item); + + @if ($_inline-item) { + .inline-item { + @include clay-css($_inline-item); + } + } + + $_inline-item-before: map-get($active, inline-item-before); + + @if ($_inline-item-before) { + .inline-item-before { + @include clay-css($_inline-item-before); + } + } + + $_inline-item-middle: map-get($active, inline-item-middle); + + @if ($_inline-item-middle) { + .inline-item-middle { + @include clay-css($_inline-item-middle); + } + } + + $_inline-item-after: map-get($active, inline-item-after); + + @if ($_inline-item-after) { + .inline-item-after { + @include clay-css($_inline-item-after); + } + } } } - &.active { - @include clay-css($active-class); + @if (length($active-class) != 0) { + &.active { + @include clay-css($active-class); - &::before { - @include clay-css(map-deep-get($map, active-class, before)); - } + $_before: map-get($active-class, before); - &::after { - @include clay-css(map-get($map, active-class-after)); - } + @if ($_before) { + &::before { + @include clay-css($_before); + } + } - @at-root { - #{$focus-visible-selector}, - #{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} { - @include clay-css( - map-deep-get($map, active-class, focus) - ); + $_after: map-get($active-class, after); + + @if ($_after) { + &::after { + @include clay-css($_after); + } } - } - .inline-item { - @include clay-css(map-get($active-class, inline-item)); - } + $_focus: map-get($active-class, focus); - .inline-item-before { - @include clay-css( - map-get($active-class, inline-item-before) - ); - } + @if ($_focus) { + @at-root { + #{$focus-visible-selector}, + #{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} { + @include clay-css($_focus); + } + } + } - .inline-item-middle { - @include clay-css( - map-get($active-class, inline-item-middle) + $_inline-item: map-get($active-class, inline-item); + + @if ($_inline-item) { + .inline-item { + @include clay-css($_inline-item); + } + } + + $_inline-item-before: map-get( + $active-class, + inline-item-before ); - } - .inline-item-after { - @include clay-css( - map-get($active-class, inline-item-after) + @if ($_inline-item-before) { + .inline-item-before { + @include clay-css($_inline-item-before); + } + } + + $_inline-item-middle: map-get( + $active-class, + inline-item-middle ); - } - } - &:disabled, - &.disabled { - @include clay-css($disabled); + @if ($_inline-item-middle) { + .inline-item-middle { + @include clay-css($_inline-item-middle); + } + } - &::before { - @include clay-css(map-deep-get($map, disabled, before)); - } + $_inline-item-after: map-get( + $active-class, + inline-item-after + ); - &::after { - @include clay-css(map-deep-get($map, disabled, after)); + @if ($_inline-item-after) { + .inline-item-after { + @include clay-css($_inline-item-after); + } + } } + } - @at-root { - #{$focus-visible-selector}, - #{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} { - @include clay-css(map-get($disabled, focus)); + @if (length($disabled) != 0) { + &:disabled, + &.disabled { + @include clay-css($disabled); + + $_before: map-get($disabled, before); + @if ($_before) { &::before { - @include clay-css( - map-deep-get($map, disabled, focus, before) - ); + @include clay-css($_before); } + } + + $_after: map-get($disabled, after); + @if ($_after) { &::after { - @include clay-css( - map-deep-get($map, disabled, focus, after) - ); + @include clay-css($_after); } } - } - &:active { - @include clay-css($disabled-active); + $_focus: map-get($disabled, focus); - &::before { - @include clay-css( - map-deep-get($map, disabled, active, before) - ); + @if ($_focus) { + @at-root { + #{$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: map-get($_focus, before); + + @if ($_before) { + &::before { + @include clay-css($_before); + } + } + + $_after: map-get($_focus, after); + + @if ($_after) { + &::after { + @include clay-css($_after); + } + } + } + } } - &::after { - @include clay-css( - map-deep-get($map, 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($disabled-active, after); + + @if ($_after) { + &::after { + @include clay-css($_after); + } + } + } } - } - .inline-item { - @include clay-css(map-get($disabled, inline-item)); - } + $_inline-item: map-get($disabled, inline-item); - .inline-item-before { - @include clay-css(map-get($disabled, inline-item-before)); - } + @if ($_inline-item) { + .inline-item { + @include clay-css($_inline-item); + } + } - .inline-item-middle { - @include clay-css(map-get($disabled, inline-item-middle)); - } + $_inline-item-before: map-get( + $disabled, + inline-item-before + ); - .inline-item-after { - @include clay-css(map-get($disabled, inline-item-after)); + @if ($_inline-item-before) { + .inline-item-before { + @include clay-css($_inline-item-before); + } + } + + $_inline-item-middle: map-get( + $disabled, + inline-item-middle + ); + + @if ($_inline-item-middle) { + .inline-item-middle { + @include clay-css($_inline-item-middle); + } + } + + $_inline-item-after: map-get($disabled, inline-item-after); + + @if ($_inline-item-after) { + .inline-item-after { + @include clay-css($_inline-item-after); + } + } } } - &[aria-expanded='true'], - &.show { - @include clay-css($show); + @if (length($show) != 0) { + &[aria-expanded='true'], + &.show { + @include clay-css($show); - &::before { - @include clay-css(map-deep-get($map, show, before)); - } + $_before: map-get($show, before); - &::after { - @include clay-css(map-deep-get($map, show, after)); + @if ($_before) { + &::before { + @include clay-css($_before); + } + } + + $_after: map-get($show, after); + + @if ($_after) { + &::after { + @include clay-css($_after); + } + } } } @@ -925,42 +1180,65 @@ } } - .lexicon-icon { - @include clay-css($lexicon-icon); + @if (length($lexicon-icon) != 0) { + .lexicon-icon { + @include clay-css($lexicon-icon); + } } - .inline-item { - @include clay-css($inline-item); + @if (length($inline-item) != 0) { + .inline-item { + @include clay-css($inline-item); - .lexicon-icon { - @include clay-css(map-get($inline-item, lexicon-icon)); + $_lexicon-icon: map-get($inline-item, lexicon-icon); + + @if ($_lexicon-icon) { + .lexicon-icon { + @include clay-css($_lexicon-icon); + } + } } } - .inline-item-before { - @include clay-css(map-get($map, inline-item-before)); + $_inline-item-before: map-get($map, inline-item-before); + + @if ($_inline-item-before) { + .inline-item-before { + @include clay-css($_inline-item-before); + } } - .inline-item-middle { - @include clay-css(map-get($map, inline-item-middle)); + $_inline-item-middle: map-get($map, inline-item-middle); - + .inline-item-middle { - @include clay-css( - map-deep-get( - $map, - inline-item-middle, - inline-item-middle - ) + @if ($_inline-item-middle) { + .inline-item-middle { + @include clay-css($_inline-item-middle); + + $_inline-item-middle: map-get( + $_inline-item-middle, + inline-item-middle ); + + @if ($_inline-item-middle) { + + .inline-item-middle { + @include clay-css($_inline-item-middle); + } + } } } - .inline-item-after { - @include clay-css(map-get($map, inline-item-after)); + $_inline-item-after: map-get($map, inline-item-after); + + @if ($_inline-item-after) { + .inline-item-after { + @include clay-css($_inline-item-after); + } } - .btn-section { - @include clay-css($section); + @if (length($section) != 0) { + .btn-section { + @include clay-css($section); + } } .loading-animation { diff --git a/packages/clay-css/src/scss/mixins/_links.scss b/packages/clay-css/src/scss/mixins/_links.scss index bc9ef75893..683aa3fdaf 100644 --- a/packages/clay-css/src/scss/mixins/_links.scss +++ b/packages/clay-css/src/scss/mixins/_links.scss @@ -550,400 +550,641 @@ ); @if ($enabled) { - @include clay-css($base); - - &::before { - @include clay-css(map-get($map, before)); - } - - &::after { - @include clay-css(map-get($map, after)); + @if (length($base) != 0) { + @include clay-css($base); } - &:link { - $_link: setter(map-get($map, link), ()); - - @include clay-css($_link); + $_before: map-get($map, before); + @if ($_before) { &::before { - @include clay-css(map-get($_link, before)); - } - - &::after { - @include clay-css(map-get($_link, after)); - } - - .inline-item { - @include clay-css(map-get($_link, inline-item)); - } - - .inline-item-before { - @include clay-css(map-get($_link, inline-item-before)); - } - - .inline-item-middle { - @include clay-css(map-get($_link, inline-item-middle)); - } - - .inline-item-after { - @include clay-css(map-get($_link, inline-item-after)); + @include clay-css($_before); } } - &:visited { - $_visited: setter(map-get($map, visited), ()); - - @include clay-css($_visited); - - &::before { - @include clay-css(map-get($_visited, before)); - } + $_after: map-get($map, after); + @if ($_after) { &::after { - @include clay-css(map-get($_visited, after)); - } - - .inline-item { - @include clay-css(map-get($_visited, inline-item)); - } - - .inline-item-before { - @include clay-css(map-get($_visited, inline-item-before)); - } - - .inline-item-middle { - @include clay-css(map-get($_visited, inline-item-middle)); - } - - .inline-item-after { - @include clay-css(map-get($_visited, inline-item-after)); + @include clay-css($_after); } } - &:hover, - &.hover { - @include clay-css($hover); + $_link: map-get($map, link); - &::before { - @include clay-css(map-get($hover, before)); - } + @if ($_link) { + &:link { + @include clay-css($_link); - &::after { - @include clay-css(map-get($hover, after)); - } + &::before { + @include clay-css(map-get($_link, before)); + } - .inline-item { - @include clay-css(map-get($hover, inline-item)); - } + &::after { + @include clay-css(map-get($_link, after)); + } - .inline-item-before { - @include clay-css(map-get($hover, inline-item-before)); - } + .inline-item { + @include clay-css(map-get($_link, inline-item)); + } - .inline-item-middle { - @include clay-css(map-get($hover, inline-item-middle)); - } + .inline-item-before { + @include clay-css(map-get($_link, inline-item-before)); + } - .inline-item-after { - @include clay-css(map-get($hover, inline-item-after)); + .inline-item-middle { + @include clay-css(map-get($_link, inline-item-middle)); + } + + .inline-item-after { + @include clay-css(map-get($_link, inline-item-after)); + } } } - @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); + $_visited: map-get($map, visited); + + @if ($_visited) { + &:visited { + @include clay-css($_visited); &::before { - @include clay-css(map-get($focus, before)); + @include clay-css(map-get($_visited, before)); } &::after { - @include clay-css(map-get($focus, after)); + @include clay-css(map-get($_visited, after)); } .inline-item { - @include clay-css(map-get($focus, inline-item)); + @include clay-css(map-get($_visited, inline-item)); } .inline-item-before { - @include clay-css(map-get($focus, inline-item-before)); + @include clay-css( + map-get($_visited, inline-item-before) + ); } .inline-item-middle { - @include clay-css(map-get($focus, inline-item-middle)); + @include clay-css( + map-get($_visited, inline-item-middle) + ); } .inline-item-after { - @include clay-css(map-get($focus, inline-item-after)); + @include clay-css( + map-get($_visited, inline-item-after) + ); } } } - &:active { - @include clay-css($active); + @if (length($hover) != 0) { + &:hover, + &.hover { + @include clay-css($hover); - &::before { - @include clay-css(map-get($active, before)); - } + $_before: map-get($hover, before); - &::after { - @include clay-css(map-get($active, after)); + @if ($_before) { + &::before { + @include clay-css($_before); + } + } + + $_after: map-get($hover, after); + + @if ($_after) { + &::after { + @include clay-css($_after); + } + } + + $_inline-item: map-get($hover, inline-item); + + @if ($_inline-item) { + .inline-item { + @include clay-css($_inline-item); + } + } + + $_inline-item-before: map-get($hover, inline-item-before); + + @if ($_inline-item-before) { + .inline-item-before { + @include clay-css($_inline-item-before); + } + } + + $_inline-item-middle: map-get($hover, inline-item-middle); + + @if ($_inline-item-middle) { + .inline-item-middle { + @include clay-css($_inline-item-middle); + } + } + + $_inline-item-after: map-get($hover, inline-item-after); + + @if ($_inline-item-after) { + .inline-item-after { + @include clay-css($_inline-item-after); + } + } } + } + @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'))} { - $_active-focus: setter(map-get($active, focus), ()); + @include clay-css($focus); + + $_before: map-get($focus, before); + + @if ($_before) { + &::before { + @include clay-css($_before); + } + } + + $_after: map-get($focus, after); + + @if ($_after) { + &::after { + @include clay-css($_after); + } + } + + $_inline-item: map-get($focus, inline-item); + + @if ($_inline-item) { + .inline-item { + @include clay-css($_inline-item); + } + } + + $_inline-item-before: map-get( + $focus, + inline-item-before + ); + + @if ($_inline-item-before) { + .inline-item-before { + @include clay-css($_inline-item-before); + } + } + + $_inline-item-middle: map-get( + $focus, + inline-item-middle + ); + + @if ($_inline-item-middle) { + .inline-item-middle { + @include clay-css($_inline-item-middle); + } + } + + $_inline-item-after: map-get($focus, inline-item-after); + + @if ($_inline-item-after) { + .inline-item-after { + @include clay-css($_inline-item-after); + } + } + } + } + } + + @if (length($active) != 0) { + &:active { + @include clay-css($active); - @include clay-css($_active-focus); + $_before: map-get($active, before); + @if ($_before) { &::before { - @include clay-css(map-get($_active-focus, before)); + @include clay-css($_before); } + } + + $_after: map-get($active, after); + @if ($_after) { &::after { - @include clay-css(map-get($_active-focus, after)); + @include clay-css($_after); } } - } - .inline-item { - @include clay-css(map-get($active, inline-item)); - } + $_focus: map-get($active, focus); - .inline-item-before { - @include clay-css(map-get($active, inline-item-before)); - } + @if ($_focus) { + @at-root { + #{$focus-visible-selector}, + #{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} { + @include clay-css($_focus); - .inline-item-middle { - @include clay-css(map-get($active, inline-item-middle)); - } + &::before { + @include clay-css(map-get($_focus, before)); + } - .inline-item-after { - @include clay-css(map-get($active, inline-item-after)); - } - } + &::after { + @include clay-css(map-get($_focus, after)); + } + } + } + } - &.active { - @include clay-css($active-class); + $_inline-item: map-get($active, inline-item); - &::before { - @include clay-css(map-get($active-class, before)); - } + @if ($_inline-item) { + .inline-item { + @include clay-css($_inline-item); + } + } - &::after { - @include clay-css(map-get($active-class, after)); + $_inline-item-before: map-get($active, inline-item-before); + + @if ($_inline-item-before) { + .inline-item-before { + @include clay-css($_inline-item-before); + } + } + + $_inline-item-middle: map-get($active, inline-item-middle); + + @if ($_inline-item-middle) { + .inline-item-middle { + @include clay-css($_inline-item-middle); + } + } + + $_inline-item-after: map-get($active, inline-item-after); + + @if ($_inline-item-after) { + .inline-item-after { + @include clay-css($_inline-item-after); + } + } } + } - @at-root { - #{$focus-visible-selector}, - #{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} { - $_active-class-focus: setter( - map-get($active-class, focus), - () - ); + @if (length($active-class) != 0) { + &.active { + @include clay-css($active-class); - @include clay-css($_active-class-focus); + $_before: map-get($active-class, before); + @if ($_before) { &::before { - @include clay-css( - map-get($_active-class-focus, before) - ); + @include clay-css($_before); } + } + + $_after: map-get($active-class, after); + @if ($_after) { &::after { - @include clay-css( - map-get($_active-class-focus, after) - ); + @include clay-css($_after); } } - } - .inline-item { - @include clay-css(map-get($active-class, inline-item)); - } + $_focus: map-get($active-class, focus); - .inline-item-before { - @include clay-css( - map-get($active-class, inline-item-before) - ); - } + @if ($_focus) { + @at-root { + #{$focus-visible-selector}, + #{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} { + @include clay-css($_focus); - .inline-item-middle { - @include clay-css( - map-get($active-class, inline-item-middle) + &::before { + @include clay-css(map-get($_focus, before)); + } + + &::after { + @include clay-css(map-get($_focus, after)); + } + } + } + } + + $_inline-item: map-get($active-class, inline-item); + + @if ($_inline-item) { + .inline-item { + @include clay-css($_inline-item); + } + } + + $_inline-item-before: map-get( + $active-class, + inline-item-before ); - } - .inline-item-after { - @include clay-css( - map-get($active-class, inline-item-after) + @if ($_inline-item-before) { + .inline-item-before { + @include clay-css($_inline-item-before); + } + } + + $_inline-item-middle: map-get( + $active-class, + inline-item-middle ); - } - } - &:disabled, - &.disabled { - @include clay-css($disabled); + @if ($_inline-item-middle) { + .inline-item-middle { + @include clay-css($_inline-item-middle); + } + } - &::before { - @include clay-css(map-get($disabled, before)); - } + $_inline-item-after: map-get( + $active-class, + inline-item-after + ); - &::after { - @include clay-css(map-get($disabled, after)); + @if ($_inline-item-after) { + .inline-item-after { + @include clay-css($_inline-item-after); + } + } } + } - @at-root { - #{$focus-visible-selector}, - #{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} { - $_disabled-focus: setter(map-get($disabled, focus), ()); + @if (length($disabled) != 0) { + &:disabled, + &.disabled { + @include clay-css($disabled); - @include clay-css($_disabled-focus); + $_before: map-get($disabled, before); + @if ($_before) { &::before { - @include clay-css( - map-get($_disabled-focus, before) - ); + @include clay-css($_before); } + } + + $_after: map-get($disabled, after); + @if ($_after) { &::after { - @include clay-css(map-get($_disabled-focus, after)); + @include clay-css($_after); } } - } - &:active { - @include clay-css($disabled-active); + $_focus: map-get($disabled, focus); - &::before { - @include clay-css(map-get($disabled-active, before)); + @if ($_focus) { + @at-root { + #{$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($_focus, before)); + } + + &::after { + @include clay-css(map-get($_focus, after)); + } + } + } } - &::after { - @include clay-css(map-get($disabled-active, after)); + @if (length($disabled-active) != 0) { + &:active { + @include clay-css($disabled-active); + + &::before { + @include clay-css( + map-get($disabled-active, before) + ); + } + + &::after { + @include clay-css( + map-get($disabled-active, after) + ); + } + } } - } - .inline-item { - @include clay-css(map-get($disabled, inline-item)); - } + $_inline-item: map-get($disabled, inline-item); - .inline-item-before { - @include clay-css(map-get($disabled, inline-item-before)); - } + @if ($_inline-item) { + .inline-item { + @include clay-css($_inline-item); + } + } - .inline-item-middle { - @include clay-css(map-get($disabled, inline-item-middle)); - } + $_inline-item-before: map-get( + $disabled, + inline-item-before + ); - .inline-item-after { - @include clay-css(map-get($disabled, inline-item-after)); + @if ($_inline-item-before) { + .inline-item-before { + @include clay-css($_inline-item-before); + } + } + + $_inline-item-middle: map-get( + $disabled, + inline-item-middle + ); + + @if ($_inline-item-middle) { + .inline-item-middle { + @include clay-css($_inline-item-middle); + } + } + + $_inline-item-after: map-get($disabled, inline-item-after); + + @if ($_inline-item-after) { + .inline-item-after { + @include clay-css($_inline-item-after); + } + } } } - &[type] { - @at-root { - #{$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) { + &[type] { + @at-root { + #{$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); + } } } } - &[aria-expanded='true'], - &.show { - @include clay-css($show); - - &::before { - @include clay-css(map-get($show, before)); - } + @if (length($show) != 0) { + &[aria-expanded='true'], + &.show { + @include clay-css($show); - &::after { - @include clay-css(map-get($show, after)); - } + $_before: map-get($show, before); - &:hover { - $_show-hover: setter(map-get($show, hover), ()); + @if ($_before) { + &::before { + @include clay-css($_before); + } + } - @include clay-css($_show-hover); + $_after: map-get($show, after); - &::before { - @include clay-css(map-get($_show-hover, before)); + @if ($_after) { + &::after { + @include clay-css($_after); + } } - &::after { - @include clay-css(map-get($_show-hover, after)); + $_hover: map-get($show, hover); + + @if ($_hover) { + &:hover { + @include clay-css($_hover); + + $_before: map-get($_hover, before); + + @if ($_before) { + &::before { + @include clay-css($_before); + } + } + + $_after: map-get($_hover, after); + + @if ($_after) { + &::after { + @include clay-css($_after); + } + } + } } - } - @at-root { - #{$focus-visible-selector}, - #{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} { - $_show-focus: setter(map-get($show, focus), ()); + $_focus: map-get($show, focus); - @include clay-css($_show-focus); + @if ($_focus) { + @at-root { + #{$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($_show-focus, before)); + $_before: map-get($_focus, before); + + @if ($_before) { + &::before { + @include clay-css($_before); + } + } + + $_after: map-get($_focus, after); + + @if ($_after) { + &::after { + @include clay-css($_after); + } + } + } } + } - &::after { - @include clay-css(map-get($_show-focus, after)); + $_inline-item: map-get($show, inline-item); + + @if ($_inline-item) { + .inline-item { + @include clay-css($_inline-item); } } - } - .inline-item { - @include clay-css(map-get($show, inline-item)); - } + $_inline-item-before: map-get($show, inline-item-before); - .inline-item-before { - @include clay-css(map-get($show, inline-item-before)); - } + @if ($_inline-item-before) { + .inline-item-before { + @include clay-css($_inline-item-before); + } + } - .inline-item-middle { - @include clay-css(map-get($show, inline-item-middle)); - } + $_inline-item-middle: map-get($show, inline-item-middle); - .inline-item-after { - @include clay-css(map-get($show, inline-item-after)); + @if ($_inline-item-middle) { + .inline-item-middle { + @include clay-css($_inline-item-middle); + } + } + + $_inline-item-after: map-get($show, inline-item-after); + + @if ($_inline-item-after) { + .inline-item-after { + @include clay-css($_inline-item-after); + } + } } } - &.collapse-icon { - $_collapse-icon: setter(map-get($map, collapse-icon), ()); + $_collapse-icon: map-get($map, collapse-icon); - @include clay-css($_collapse-icon); + @if ($_collapse-icon) { + &.collapse-icon { + @include clay-css($_collapse-icon); - .collapse-icon-closed { - @include clay-css( - map-get($_collapse-icon, collapse-icon-closed) + $_collapse-icon-closed: map-get( + $_collapse-icon, + collapse-icon-closed ); - } - .collapse-icon-open { - @include clay-css( - map-get($_collapse-icon, collapse-icon-open) + @if ($_collapse-icon-closed) { + .collapse-icon-closed { + @include clay-css($_collapse-icon-closed); + } + } + + $_collapse-icon-open: map-get( + $_collapse-icon, + collapse-icon-open ); + + @if ($_collapse-icon-open) { + .collapse-icon-open { + @include clay-css($_collapse-icon-open); + } + } } } - .autofit-row { - $_autofit-row: setter(map-get($map, autofit-row), ()); + $_autofit-row: map-get($map, autofit-row); - @include clay-css($_autofit-row); + @if ($_autofit-row) { + .autofit-row { + @include clay-css($_autofit-row); - .autofit-col { - @include clay-css(map-get($_autofit-row, autofit-col)); - } + $_autofit-col: map-get($_autofit-row, autofit-col); + + @if ($_autofit-col) { + .autofit-col { + @include clay-css( + map-get($_autofit-row, autofit-col) + ); + } + } - .autofit-col-expand { - @include clay-css( - map-get($_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); + } + } } } @@ -953,34 +1194,53 @@ } } - .inline-item { - @include clay-css(map-get($map, inline-item)); + $_inline-item: map-get($map, inline-item); + + @if ($_inline-item) { + .inline-item { + @include clay-css($_inline-item); + } } - .inline-item-before { - @include clay-css(map-get($map, inline-item-before)); + $_inline-item-before: map-get($map, inline-item-before); + + @if ($_inline-item-before) { + .inline-item-before { + @include clay-css($_inline-item-before); + } } - .inline-item-middle { - @include clay-css(map-get($map, inline-item-middle)); + $_inline-item-middle: map-get($map, inline-item-middle); - + .inline-item-middle { - @include clay-css( - map-deep-get( - $map, - inline-item-middle, - inline-item-middle - ) + @if ($_inline-item-middle) { + .inline-item-middle { + @include clay-css($_inline-item-middle); + + $_inline-item-middle: map-get( + $_inline-item-middle, + inline-item-middle ); + + @if ($_inline-item-middle) { + } + + .inline-item-middle { + @include clay-css($_inline-item-middle); + } } } - .inline-item-after { - @include clay-css(map-get($map, inline-item-after)); + $_inline-item-after: map-get($map, inline-item-after); + + @if ($_inline-item-after) { + .inline-item-after { + @include clay-css($_inline-item-after); + } } - .lexicon-icon { - @include clay-css($lexicon-icon); + @if (length($lexicon-icon) != 0) { + .lexicon-icon { + @include clay-css($lexicon-icon); + } } $c-link-variants: map-get($map, c-link-variants); @@ -1029,27 +1289,47 @@ $href: setter(map-get($map, href), ()); $href: map-deep-merge($href, $link); - @include clay-css($map); + @if (length($map) != 0) { + @include clay-css($map); + } - &::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); + } } - &:first-child { - @include clay-css(map-get($map, first-child)); + $_first-child: map-get($map, first-child); + + @if ($_first-child) { + &:first-child { + @include clay-css($_first-child); + } } - &:last-child { - @include clay-css(map-get($map, last-child)); + $_last-child: map-get($map, last-child); + + @if ($_last-child) { + &:last-child { + @include clay-css($_last-child); + } } - &[href], - a[href] { - @include clay-link($href); + @if (length($href) != 0) { + &[href], + a[href] { + @include clay-link($href); + } } } } @@ -1059,5 +1339,7 @@ /// @param {Map} $map - A map of `key: value` pairs. @mixin clay-title($map) { - @include clay-text-typography($map); + @if (length($map) != 0) { + @include clay-text-typography($map); + } }