diff --git a/packages/components/src/components/@shared/_kol-button-mixin.scss b/packages/components/src/components/@shared/_kol-button-mixin.scss index e6d95ce6df..f1dda336ea 100644 --- a/packages/components/src/components/@shared/_kol-button-mixin.scss +++ b/packages/components/src/components/@shared/_kol-button-mixin.scss @@ -7,7 +7,7 @@ //Needed for custom width display: inline-block; } - .#{$block-classname } { + .#{$block-classname} { font-style: rem(16); display: inline-flex; place-items: center; diff --git a/packages/components/src/components/@shared/_kol-link-mixin.scss b/packages/components/src/components/@shared/_kol-link-mixin.scss new file mode 100644 index 0000000000..b1961000a8 --- /dev/null +++ b/packages/components/src/components/@shared/_kol-link-mixin.scss @@ -0,0 +1,37 @@ +@import 'mixins'; +@import '../tooltip/style'; + +@mixin kol-link-styles($block-classname) { + @layer kol-component { + :host { + // Causing linebreak, when removed + display: inline-block; + } + + .#{$block-classname} { + $root: &; + + font-size: rem(16); + align-items: baseline; + display: inline-flex; + place-items: center; + text-align: left; + text-decoration-line: none; + + &__text { + .span-label { + text-decoration-line: underline; + + @at-root #{$root}:is(:focus, :hover):not([aria-disabled], [disabled]) & { + text-decoration-thickness: 0.2em; + } + } + } + + &__icon { + display: inline-flex; + margin-left: rem(8); + } + } + } +} diff --git a/packages/components/src/components/button-link/shadow.tsx b/packages/components/src/components/button-link/shadow.tsx index 7a24cb01ca..b0ca677ebd 100644 --- a/packages/components/src/components/button-link/shadow.tsx +++ b/packages/components/src/components/button-link/shadow.tsx @@ -58,7 +58,6 @@ export class KolButtonLink implements ButtonLinkProps, FocusableElement { public render(): JSX.Element { return ( diff --git a/packages/components/src/components/form/shadow.tsx b/packages/components/src/components/form/shadow.tsx index a97fa70186..f8fca3d001 100644 --- a/packages/components/src/components/form/shadow.tsx +++ b/packages/components/src/components/form/shadow.tsx @@ -59,6 +59,7 @@ export class KolForm implements FormAPI { {errorList?.map((error, index) => (
  • - 0, - }} - _accessKey={this._accessKey} - _ariaCurrentValue={this._ariaCurrentValue} - _ariaDescription={this._ariaDescription} - _disabled={this._disabled} - _download={this._download} - _hideLabel={this._hideLabel} - _href={this._href} - _icons={this._icons} - _label={this._label} - _on={this._on} - _role="button" - _shortKey={this._shortKey} - _tabIndex={this._tabIndex} - _target={this._target} - _tooltipAlign={this._tooltipAlign} - > - - - + + + ); } diff --git a/packages/components/src/components/link-button/style.scss b/packages/components/src/components/link-button/style.scss index ed1a37b744..907260460e 100644 --- a/packages/components/src/components/link-button/style.scss +++ b/packages/components/src/components/link-button/style.scss @@ -2,4 +2,4 @@ @import '../style'; @import '../@shared/kol-button-mixin'; -@include kol-button-styles('kol-link-button'); +@include kol-button-styles('kol-link'); diff --git a/packages/components/src/components/link-button/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/link-button/test/__snapshots__/snapshot.spec.tsx.snap index cfa08290d9..8dda80e7d4 100644 --- a/packages/components/src/components/link-button/test/__snapshots__/snapshot.spec.tsx.snap +++ b/packages/components/src/components/link-button/test/__snapshots__/snapshot.spec.tsx.snap @@ -1,9 +1,9 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`kol-link-button should render with _href="https://example.com" _icons="codicon codicon-home" _label="Label" _target="self" _tooltipAlign="bottom" 1`] = ` - + @@ -11,9 +11,9 @@ exports[`kol-link-button should render with _href="https://example.com" _icons=" `; exports[`kol-link-button should render with _href="https://example.com" _icons="codicon codicon-home" _label="Label" _target="self" _tooltipAlign="left" 1`] = ` - + @@ -21,9 +21,9 @@ exports[`kol-link-button should render with _href="https://example.com" _icons=" `; exports[`kol-link-button should render with _href="https://example.com" _icons="codicon codicon-home" _label="Label" _target="self" _tooltipAlign="right" 1`] = ` - + @@ -31,9 +31,9 @@ exports[`kol-link-button should render with _href="https://example.com" _icons=" `; exports[`kol-link-button should render with _href="https://example.com" _icons="codicon codicon-home" _label="Label" _target="self" _tooltipAlign="top" _hideLabel=true 1`] = ` - + @@ -41,9 +41,9 @@ exports[`kol-link-button should render with _href="https://example.com" _icons=" `; exports[`kol-link-button should render with _href="https://example.com" _icons="codicon codicon-home" _label="Label" _target="self" _tooltipAlign="top" 1`] = ` - + @@ -51,9 +51,9 @@ exports[`kol-link-button should render with _href="https://example.com" _icons=" `; exports[`kol-link-button should render with _href="https://example.com" _icons="codicon codicon-home" _label="Label" _target="self" 1`] = ` - + @@ -61,9 +61,9 @@ exports[`kol-link-button should render with _href="https://example.com" _icons=" `; exports[`kol-link-button should render with _label="Label" _href="" _download="download-file.zip" _target="blank" 1`] = ` - + diff --git a/packages/components/src/components/link.scss b/packages/components/src/components/link.scss deleted file mode 100644 index 7656e3fe54..0000000000 --- a/packages/components/src/components/link.scss +++ /dev/null @@ -1,48 +0,0 @@ -@import './@shared/mixins'; -@import '../tooltip/style.scss'; - -@layer kol-component { - :host { - display: inline-block; - font-size: rem(16); - } - - :is(a, button) { - align-items: baseline; - display: inline-flex; - place-items: center; - text-align: left; - text-decoration-line: none; - - .kol-span-wc .span-label { - text-decoration-line: underline; - } - } - - a:is(:focus, :hover):not([aria-disabled]), - button:is(:focus, :hover):not([disabled]) { - .kol-span-wc .span-label { - text-decoration-thickness: 0.2em; - } - } - - .skip { - left: rem(-99999); - overflow: hidden; - position: absolute; - z-index: 9999999; - line-height: 1; - } - - .skip:focus { - background-color: #fff; - left: unset; - padding: 1em; - position: unset; - } - - .kol-icon.external-link-icon { - display: inline-flex; - margin-left: rem(8); - } -} diff --git a/packages/components/src/components/link/component.tsx b/packages/components/src/components/link/component.tsx index a6c628cab6..5214ddcb51 100644 --- a/packages/components/src/components/link/component.tsx +++ b/packages/components/src/components/link/component.tsx @@ -1,10 +1,12 @@ -import type { +import { AccessKeyPropType, AlternativeButtonLinkRolePropType, AriaCurrentValuePropType, AriaDescriptionPropType, AriaExpandedPropType, AriaOwnsPropType, + ButtonVariantPropType, + CustomClassPropType, DisabledPropType, DownloadPropType, FocusableElement, @@ -29,6 +31,8 @@ import { validateAriaDescription, validateAriaExpanded, validateAriaOwns, + validateButtonVariant, + validateCustomClass, validateDisabled, validateDownload, validateHideLabel, @@ -52,6 +56,7 @@ import { KolIconTag, KolTooltipWcTag } from '../../core/component-names'; import { translate } from '../../i18n'; import { validateAccessAndShortKey } from '../../schema/validators/access-and-short-key'; import { KolSpanFc } from '../../functional-components'; +import clsx from 'clsx'; /** * @internal @@ -128,7 +133,7 @@ export class KolLinkWc implements LinkAPI, FocusableElement { const hasAriaDescription = Boolean(this.state._ariaDescription?.trim()?.length); return ( - + 0, + })} {...this.state._on} // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/click-events-have-key-events.md onClick={this.onClick} @@ -156,6 +164,7 @@ export class KolLinkWc implements LinkAPI, FocusableElement { tabIndex={this.state._disabled ? -1 : this.state._tabIndex} > {isExternal && ( ); } diff --git a/packages/components/src/components/link/style.scss b/packages/components/src/components/link/style.scss index ed99740474..dd8f131dec 100644 --- a/packages/components/src/components/link/style.scss +++ b/packages/components/src/components/link/style.scss @@ -1,3 +1,5 @@ @import '../@shared/mixins'; @import '../style'; -@import '../link'; +@import '../@shared/kol-link-mixin'; + +@include kol-link-styles('kol-link'); diff --git a/packages/components/src/components/link/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/link/test/__snapshots__/snapshot.spec.tsx.snap index 736121b04b..ececb45849 100644 --- a/packages/components/src/components/link/test/__snapshots__/snapshot.spec.tsx.snap +++ b/packages/components/src/components/link/test/__snapshots__/snapshot.spec.tsx.snap @@ -1,12 +1,12 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`kol-link should render with _href="https://example.com" _icons="codicon codicon-home" _label="Label" _target="self" _tooltipAlign="bottom" 1`] = ` - + `; exports[`kol-link should render with _href="https://example.com" _icons="codicon codicon-home" _label="Label" _target="self" _tooltipAlign="left" 1`] = ` - + `; exports[`kol-link should render with _href="https://example.com" _icons="codicon codicon-home" _label="Label" _target="self" _tooltipAlign="right" 1`] = ` - + `; exports[`kol-link should render with _href="https://example.com" _icons="codicon codicon-home" _label="Label" _target="self" _tooltipAlign="top" _hideLabel=true 1`] = ` - + `; exports[`kol-link should render with _href="https://example.com" _icons="codicon codicon-home" _label="Label" _target="self" _tooltipAlign="top" 1`] = ` - + `; exports[`kol-link should render with _href="https://example.com" _icons="codicon codicon-home" _label="Label" _target="self" 1`] = ` - + `; exports[`kol-link should render with _label="Label" _href="" _download="download-file.zip" _target="blank" 1`] = ` - + diff --git a/packages/components/src/components/skip-nav/style.scss b/packages/components/src/components/skip-nav/style.scss index 4e1fcb9ae1..ccb9a39505 100644 --- a/packages/components/src/components/skip-nav/style.scss +++ b/packages/components/src/components/skip-nav/style.scss @@ -16,17 +16,17 @@ height: 0; } - .kol-link-wc a { + .kol-link { left: rem(-99999); overflow: hidden; position: absolute; z-index: 9999999; line-height: 1; - } - .kol-link-wc a:focus { - background-color: #fff; - left: unset; - position: unset; + &:focus { + background-color: #fff; + left: unset; + position: unset; + } } } diff --git a/packages/components/src/schema/components/link-button.ts b/packages/components/src/schema/components/link-button.ts index e01191fc40..e6f326828d 100644 --- a/packages/components/src/schema/components/link-button.ts +++ b/packages/components/src/schema/components/link-button.ts @@ -1,9 +1,9 @@ import type { Generic } from 'adopted-style-sheets'; -import type { PropAlternativeButtonLinkRole } from '../props'; +import type { PropAlternativeButtonLinkRole, PropButtonVariant, PropCustomClass } from '../props'; import type { OptionalProps as LinkOptionalProps, RequiredProps as LinkRequiredProps } from './link'; type RequiredProps = LinkRequiredProps; -type OptionalProps = Omit; // _role is fixed to "button" +type OptionalProps = Omit & PropButtonVariant & PropCustomClass; // _role is fixed to "button" export type LinkButtonProps = Generic.Element.Members; diff --git a/packages/components/src/schema/components/link.ts b/packages/components/src/schema/components/link.ts index 2756e68a59..c6078965d7 100644 --- a/packages/components/src/schema/components/link.ts +++ b/packages/components/src/schema/components/link.ts @@ -6,6 +6,8 @@ import type { PropAriaDescription, PropAriaExpanded, PropAriaOwns, + PropButtonVariant, + PropCustomClass, PropDisabled, PropDownload, PropHideLabel, @@ -41,7 +43,11 @@ export type OptionalProps = { PropTooltipAlign; type RequiredStates = PropAriaCurrentValue & PropIcons & PropHref; -type OptionalStates = { ariaCurrent: string } & PropAriaExpanded & PropAriaOwns & Omit; +type OptionalStates = { ariaCurrent: string } & PropAriaExpanded & + PropAriaOwns & + PropButtonVariant & + PropCustomClass & + Omit; export type LinkProps = Generic.Element.Members; export type LinkStates = Generic.Element.Members; diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-link-button-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-link-button-basic-firefox-linux.png index 3c650d10ab..2b6f6e25b4 100644 Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-link-button-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-link-button-basic-firefox-linux.png differ diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-buttonLink-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-buttonLink-firefox-linux.png index c617d749a6..9d5c26ba00 100644 Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-buttonLink-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-buttonLink-firefox-linux.png differ diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-link-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-link-firefox-linux.png index b8b480e2b7..d7f57aff14 100644 Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-link-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-link-firefox-linux.png differ diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-link-button-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-link-button-basic-firefox-linux.png index 3c650d10ab..2b6f6e25b4 100644 Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-link-button-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-link-button-basic-firefox-linux.png differ diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-buttonLink-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-buttonLink-firefox-linux.png index c617d749a6..9d5c26ba00 100644 Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-buttonLink-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-buttonLink-firefox-linux.png differ diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-link-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-link-firefox-linux.png index b8b480e2b7..d7f57aff14 100644 Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-link-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-link-firefox-linux.png differ diff --git a/packages/themes/default/src/components/button-link.scss b/packages/themes/default/src/components/button-link.scss index 573ab2cb8d..13d2141e6a 100644 --- a/packages/themes/default/src/components/button-link.scss +++ b/packages/themes/default/src/components/button-link.scss @@ -1,6 +1,9 @@ @import '../mixins/rem'; +@import '../mixins/link'; @layer kol-theme-component { + @include kol-link('kol-button'); + .kol-button { $root: &; @@ -21,12 +24,12 @@ } &__text { - border-radius: var(--text-border-radius); - outline: var(--text-outline); - - @at-root #{$root}:hover:not([disabled]) &, - #{$root}:hover:not([aria-disabled]) & { - .span-label { + @at-root #{$root}:focus & { + border-radius: var(--text-border-radius); + outline: var(--text-outline); + } + .span-label { + @at-root #{$root}:is(:focus, :hover):not([aria-disabled], [disabled]) & { text-decoration-thickness: 0.25em; } } diff --git a/packages/themes/default/src/components/button.scss b/packages/themes/default/src/components/button.scss index d22afac07a..a379b8229e 100644 --- a/packages/themes/default/src/components/button.scss +++ b/packages/themes/default/src/components/button.scss @@ -2,21 +2,15 @@ @import '../mixins/rem'; @layer kol-theme-component { + @include kol-button('kol-button'); .kol-button { font-family: var(--font-family); &__text { font-weight: 700; - border-radius: var(--border-radius); border-style: solid; border-width: var(--border-width); - min-height: var(--a11y-min-size); - min-width: var(--a11y-min-size); - padding: rem(8) rem(14); - text-align: center; - transition-duration: 0.5s; - transition-property: background-color, color, border-color; + border-radius: var(--border-radius); } } - @include kol-button; } diff --git a/packages/themes/default/src/components/form.scss b/packages/themes/default/src/components/form.scss index dccf1433a0..9b337cc347 100644 --- a/packages/themes/default/src/components/form.scss +++ b/packages/themes/default/src/components/form.scss @@ -3,18 +3,18 @@ @import '../mixins/link'; @layer kol-theme-component { + @include kol-alert-theme; + @include kol-link('kol-link'); + :host { font-family: var(--font-family); } - .kol-link-wc { - @include kol-link; + .kol-form__link { display: inline-block; } .mandatory-fields-hint { @include indented-text; } - - @include kol-alert-theme; } diff --git a/packages/themes/default/src/components/link-button.scss b/packages/themes/default/src/components/link-button.scss index 789966ee84..e57b409722 100644 --- a/packages/themes/default/src/components/link-button.scss +++ b/packages/themes/default/src/components/link-button.scss @@ -1,155 +1,41 @@ @import '../mixins/rem'; +@import '../mixins/button'; @layer kol-theme-component { + @include kol-button('kol-link'); + :host { font-family: var(--font-family); } - :is(a, .button) { - :focus { + .kol-link { + $root: &; + + &:focus { outline: none; } - //temp fix for underline until link refactor - display: inline-flex; - place-items: center; - text-align: center; - text-decoration-line: none; - } - - :is(a, button):focus .kol-span-wc { - outline-color: var(--color-primary-variant); - outline-offset: rem(2); - outline-style: solid; - outline-width: calc(var(--border-width) * 2); - transition: outline-offset 0.2s linear; - } - - :is(a, button) > .kol-span-wc { - font-weight: 700; - border-radius: var(--a11y-min-size); - border-style: solid; - outline-width: calc(var(--border-width) * 2); - min-height: var(--a11y-min-size); - min-width: var(--a11y-min-size); - padding: rem(8) rem(14); - text-align: center; - transition-duration: 0.5s; - transition-property: background-color, color, border-color; - } - - .primary :is(a, button) > .kol-span-wc, - .primary :is(a, button):disabled:hover > .kol-span-wc { - background-color: var(--color-primary); - border-color: var(--color-primary); - color: var(--color-light); - } - - .secondary :is(a, button) > .kol-span-wc, - .secondary :is(a, button):disabled:hover > .kol-span-wc, - .normal :is(a, button) > .kol-span-wc, - .normal :is(a, button):disabled:hover > .kol-span-wc { - background-color: var(--color-light); - border-color: var(--color-primary); - color: var(--color-primary); - } - - .danger :is(a, button) > .kol-span-wc, - .danger :is(a, button):disabled:hover > .kol-span-wc { - background-color: var(--color-danger); - border-color: var(--color-danger); - color: var(--color-light); - } - - .ghost :is(a, button) > .kol-span-wc, - .ghost :is(a, button):disabled:hover > .kol-span-wc { - border-color: var(--color-light); - background-color: var(--color-light); - box-shadow: none; - color: var(--color-primary); - } - - /*-----------*/ - .primary :is(a, button):active > .kol-span-wc, - .primary :is(a, button):hover > .kol-span-wc, - .secondary :is(a, button):active > .kol-span-wc, - .secondary :is(a, button):hover > .kol-span-wc, - .normal :is(a, button):active > .kol-span-wc, - .normal :is(a, button):hover > .kol-span-wc, - .danger :is(a, button):active > .kol-span-wc, - .danger :is(a, button):hover > .kol-span-wc, - .ghost :is(a, button):active > .kol-span-wc, - .ghost :is(a, button):hover > .kol-span-wc { - background-color: var(--color-primary-variant); - border-color: var(--color-primary-variant); - box-shadow: 0 rem(2) rem(8) rem(2) rgba(8, 35, 48, 0.24); - color: var(--color-light); - } - - .danger :is(a, button):active > .kol-span-wc, - .danger :is(a, button):hover > .kol-span-wc { - background-color: var(--color-danger); - border-color: var(--color-danger); - } - - :is(a, button):disabled:hover > .kol-span-wc, - :is(a, button):focus:hover > .kol-span-wc { - box-shadow: none; - } - - .primary :is(a, button):active > .kol-span-wc, - .secondary :is(a, button):active > .kol-span-wc, - .normal :is(a, button):active > .kol-span-wc, - .danger :is(a, button):active > .kol-span-wc, - .ghost :is(a, button):active > .kol-span-wc { - border-color: var(--color-light); - box-shadow: none; - outline: none; - } - - :is(a, button).hide-label > .kol-span-wc { - padding: rem(12.8); - width: unset; - } - - :is(a, button).hide-label > .kol-span-wc > span > span { - display: none; - } - - :is(a, button).loading > .kol-span-wc .kol-icon { - animation: spin 5s infinite linear; - } - - /** small ghost button */ - .ghost :is(a, button).small > .kol-span-wc { - border: none; - background-color: transparent; - box-shadow: none; - } - - .ghost :is(a, button).small > .kol-span-wc > span { - border-radius: 1.5em; - border-style: solid; - border-width: var(--border-width); - border-color: var(--color-light); - background-color: var(--color-light); - } - - .ghost :is(a, button).small:active > .kol-span-wc > span, - .ghost :is(a, button).small:hover > .kol-span-wc > span, - .ghost :is(a, button).small.transparent:active > .kol-span-wc > span, - .ghost :is(a, button).small.transparent:hover > .kol-span-wc > span { - background-color: var(--color-primary-variant); - border-color: var(--color-primary-variant); - box-shadow: 0 rem(2) rem(8) rem(2) rgba(8, 35, 48, 0.24); - color: var(--color-light); - } - - /** :is(a,button) with transparent background */ - :is(a, button).transparent > .kol-span-wc > span, - .ghost :is(a, button).small.transparent > .kol-span-wc > span, - :is(a, button).transparent > .kol-span-wc { - background-color: transparent; - border-color: transparent; + &__text { + font-weight: 700; + border-style: solid; + border-radius: var(--a11y-min-size); + outline-width: calc(var(--border-width) * 2); + + @at-root #{$root}:focus & { + outline-color: var(--color-primary-variant); + outline-offset: rem(2); + outline-style: solid; + outline-width: calc(var(--border-width) * 2); + transition: outline-offset 0.2s linear; + } + + @at-root #{$root}:disabled:hover & { + box-shadow: none; + } + + @at-root #{$root}:focus:hover & { + box-shadow: none; + } + } } } diff --git a/packages/themes/default/src/components/link.scss b/packages/themes/default/src/components/link.scss index 47c3428892..0b38cbbd11 100644 --- a/packages/themes/default/src/components/link.scss +++ b/packages/themes/default/src/components/link.scss @@ -1,9 +1,12 @@ @import '../mixins/link'; @layer kol-theme-component { + @include kol-link('kol-link'); + :host { font-family: inherit; } - - @include kol-link; + .kol-link { + line-height: 1; + } } diff --git a/packages/themes/default/src/components/skip-nav.scss b/packages/themes/default/src/components/skip-nav.scss index 61cfc7d623..6e75e5bc76 100644 --- a/packages/themes/default/src/components/skip-nav.scss +++ b/packages/themes/default/src/components/skip-nav.scss @@ -5,16 +5,18 @@ font-family: var(--font-family); } - .kol-link-wc > a > .kol-span-wc { - border-radius: var(--a11y-min-size); - border-style: solid; - border-width: var(--border-width); - gap: calc(var(--spacing) * 2); - line-height: 1; - padding: rem(8) rem(14); - background-color: var(--color-primary-variant); - border-color: var(--color-primary-variant); - color: var(--color-light); - cursor: pointer; + .kol-link { + &__text { + border-radius: var(--a11y-min-size); + border-style: solid; + border-width: var(--border-width); + gap: calc(var(--spacing) * 2); + line-height: 1; + padding: rem(8) rem(14); + background-color: var(--color-primary-variant); + border-color: var(--color-primary-variant); + color: var(--color-light); + cursor: pointer; + } } } diff --git a/packages/themes/default/src/components/split-button.scss b/packages/themes/default/src/components/split-button.scss index c8b16effb4..dcf2732f5b 100644 --- a/packages/themes/default/src/components/split-button.scss +++ b/packages/themes/default/src/components/split-button.scss @@ -48,5 +48,5 @@ border-bottom-right-radius: var(--border-radius); } - @include kol-button; + @include kol-button('kol-button'); } diff --git a/packages/themes/default/src/mixins/button.scss b/packages/themes/default/src/mixins/button.scss index d98e70ac3f..eba618f8af 100644 --- a/packages/themes/default/src/mixins/button.scss +++ b/packages/themes/default/src/mixins/button.scss @@ -1,8 +1,8 @@ @import './rem'; @import './focus-outline'; -@mixin kol-button { - .kol-button { +@mixin kol-button($block-classname) { + .#{$block-classname} { $root: &; &:focus { @@ -59,6 +59,13 @@ border-color: var(--text-border-color); color: var(--text-color); + min-height: var(--a11y-min-size); + min-width: var(--a11y-min-size); + padding: rem(8) rem(14); + text-align: center; + transition-duration: 0.5s; + transition-property: background-color, color, border-color; + &:hover { box-shadow: 0 rem(2) rem(8) rem(2) rgba(8, 35, 48, 0.24); background-color: var(--text-background-color); diff --git a/packages/themes/default/src/mixins/link.scss b/packages/themes/default/src/mixins/link.scss index 5f7ab2f842..c0de63f1b1 100644 --- a/packages/themes/default/src/mixins/link.scss +++ b/packages/themes/default/src/mixins/link.scss @@ -1,44 +1,32 @@ @import './rem'; -@mixin kol-link { - :is(a, button) { +@mixin kol-link($block-classname) { + .#{$block-classname} { + $root: &; + color: var(--color-primary); font-style: normal; font-weight: 400; - line-height: 1; - } - - :is(a, button):focus { - outline: none; - } - - :is(a, button):focus kol-span-wc { - border-radius: var(--border-radius); - outline: var(--border-width) solid; - } - a:is(:focus, :hover):not([aria-disabled]), - button:is(:focus, :hover):not([disabled]) { - .kol-span-wc .span-label { - text-decoration-thickness: 0.25em; + &:focus { + outline: none; } - } - :is(a, button):visited { - color: var(--visited); - } + &:visited { + color: var(--visited); + } - .skip { - left: rem(-99999); - overflow: hidden; - position: absolute; - z-index: 9999999; - line-height: 1; - } + &__text { + @at-root #{$root}:focus & { + border-radius: var(--border-radius); + outline: var(--border-width) solid; + } - .skip:focus { - background-color: white; - left: unset; - position: unset; + .span-label { + @at-root #{$root}:is(:focus, :hover):not([aria-disabled], [disabled]) & { + text-decoration-thickness: 0.25em; + } + } + } } } diff --git a/packages/themes/ecl/src/ecl-ec/components/button-link.scss b/packages/themes/ecl/src/ecl-ec/components/button-link.scss index 445d40b4f2..6bf9e5ee40 100644 --- a/packages/themes/ecl/src/ecl-ec/components/button-link.scss +++ b/packages/themes/ecl/src/ecl-ec/components/button-link.scss @@ -1,34 +1,8 @@ @import '../../mixins/rem'; +@import '../mixins/link'; @layer kol-theme-component { - .kol-button { - color: var(--color-primary); - font-style: normal; - font-weight: 400; - text-decoration-line: underline; - font-size: inherit; - - :focus { - outline: none; - } - - &:hover { - &:visited { - color: var(--visited); - } - } - - &__text { - border-radius: var(--border-radius); - outline: calc(var(--border-width) * 2) solid; - - &:hover { - .span-label { - text-decoration-thickness: 0.25em; - } - } - } - } + @include kol-link('kol-button'); .badge-text-hint { background-color: var(--color-mute-variant); diff --git a/packages/themes/ecl/src/ecl-ec/components/button.scss b/packages/themes/ecl/src/ecl-ec/components/button.scss index bcb176089f..dd120ca111 100644 --- a/packages/themes/ecl/src/ecl-ec/components/button.scss +++ b/packages/themes/ecl/src/ecl-ec/components/button.scss @@ -2,21 +2,5 @@ @import '../../mixins/rem'; @layer kol-theme-component { - .kol-button { - font-family: var(--font-family); - - &__text { - border-radius: 0; - border-style: solid; - border-width: rem(2); - font-weight: var(--font-weight-bold); - margin: 0; - min-height: rem(44); - min-width: rem(44); - padding: 0.25em 0.75em; - line-height: 1.2; - } - } - - @include kol-button; + @include kol-button('kol-button'); } diff --git a/packages/themes/ecl/src/ecl-ec/components/form.scss b/packages/themes/ecl/src/ecl-ec/components/form.scss index 85f1140d0c..3e36a2b81b 100644 --- a/packages/themes/ecl/src/ecl-ec/components/form.scss +++ b/packages/themes/ecl/src/ecl-ec/components/form.scss @@ -3,14 +3,15 @@ @import '../mixins/link'; @layer kol-theme-component { + @include kol-link('kol-link'); + :host { font-family: var(--font-family); width: 100%; @include kol-alert-theme; } - .kol-link-wc { - @include kol-link; + .kol-form__link { display: inline-block; } diff --git a/packages/themes/ecl/src/ecl-ec/components/link-button.scss b/packages/themes/ecl/src/ecl-ec/components/link-button.scss index 44ce9cf8a0..bb153748cf 100644 --- a/packages/themes/ecl/src/ecl-ec/components/link-button.scss +++ b/packages/themes/ecl/src/ecl-ec/components/link-button.scss @@ -1,19 +1,14 @@ @import '../../mixins/rem'; @layer kol-theme-component { - :host { + .kol-link { --kolibri-spacing: #{rem(4)}; - } - - a, - button { appearance: none; color: var(--color-blue); text-decoration: underline; - } - a:hover, - button:hover { - color: var(--color-blue-130); + &:hover { + color: var(--color-blue-130); + } } } diff --git a/packages/themes/ecl/src/ecl-ec/components/link.scss b/packages/themes/ecl/src/ecl-ec/components/link.scss index a612e4a58d..23a14dc6da 100644 --- a/packages/themes/ecl/src/ecl-ec/components/link.scss +++ b/packages/themes/ecl/src/ecl-ec/components/link.scss @@ -1,9 +1,5 @@ @import '../mixins/link'; @layer kol-theme-component { - :host { - font-family: var(--font-family); - } - - @include kol-link; + @include kol-link('kol-link'); } diff --git a/packages/themes/ecl/src/ecl-ec/components/nav.scss b/packages/themes/ecl/src/ecl-ec/components/nav.scss index dcbfce6619..b03f54cc47 100644 --- a/packages/themes/ecl/src/ecl-ec/components/nav.scss +++ b/packages/themes/ecl/src/ecl-ec/components/nav.scss @@ -21,7 +21,7 @@ } .entry .kol-button-wc:first-child, - .entry .kol-link-wc, + .entry .kol-link, .entry .kol-span-wc { flex-grow: 1; } @@ -66,12 +66,12 @@ text-decoration: none; } - :is(.kol-button-wc, .kol-link-wc):focus-within .kol-span-wc { + :is(.kol-button-wc, .kol-link):focus-within .kol-span-wc { border-color: var(--color-white); } - :is(.kol-button-wc, .kol-link-wc):focus-within .kol-span-wc, - :is(.kol-button-wc, .kol-link-wc):hover .kol-span-wc { + :is(.kol-button-wc, .kol-link):focus-within .kol-span-wc, + :is(.kol-button-wc, .kol-link):hover .kol-span-wc { text-decoration: underline; } diff --git a/packages/themes/ecl/src/ecl-ec/components/skip-nav.scss b/packages/themes/ecl/src/ecl-ec/components/skip-nav.scss index 83deaea53d..3cd4a539da 100644 --- a/packages/themes/ecl/src/ecl-ec/components/skip-nav.scss +++ b/packages/themes/ecl/src/ecl-ec/components/skip-nav.scss @@ -5,17 +5,19 @@ font-family: var(--font-family); } - .kol-link-wc > a > .kol-span-wc { - border-radius: 0; - border-style: solid; - border-width: rem(2); - font-weight: var(--font-weight-bold); - gap: rem(8); - line-height: 1; - padding: 0.25em 0.75em; - background-color: var(--color-blue); - border-color: var(--color-blue); - color: var(--color-white); - cursor: pointer; + .kol-link { + &__text { + border-radius: 0; + border-style: solid; + border-width: rem(2); + font-weight: var(--font-weight-bold); + gap: rem(8); + line-height: 1; + padding: 0.25em 0.75em; + background-color: var(--color-blue); + border-color: var(--color-blue); + color: var(--color-white); + cursor: pointer; + } } } diff --git a/packages/themes/ecl/src/ecl-ec/components/split-button.scss b/packages/themes/ecl/src/ecl-ec/components/split-button.scss index 569a37f937..ec3e1be40b 100644 --- a/packages/themes/ecl/src/ecl-ec/components/split-button.scss +++ b/packages/themes/ecl/src/ecl-ec/components/split-button.scss @@ -28,5 +28,5 @@ padding: 0.25em 0.75em; } - @include kol-button; + @include kol-button('kol-button'); } diff --git a/packages/themes/ecl/src/ecl-ec/mixins/button.scss b/packages/themes/ecl/src/ecl-ec/mixins/button.scss index 65e290abdf..f04e98a2d5 100644 --- a/packages/themes/ecl/src/ecl-ec/mixins/button.scss +++ b/packages/themes/ecl/src/ecl-ec/mixins/button.scss @@ -1,9 +1,11 @@ @import '../../mixins/rem'; -@mixin kol-button { - .kol-button { +@mixin kol-button($block-classname) { + .#{$block-classname} { $root: &; + font-family: var(--font-family); + appearance: none; outline: none; text-decoration: none; @@ -91,6 +93,16 @@ border-color: var(--text-border-color); color: var(--text-color); + border-radius: 0; + border-style: solid; + border-width: rem(2); + font-weight: var(--font-weight-bold); + margin: 0; + min-height: rem(44); + min-width: rem(44); + padding: 0.25em 0.75em; + line-height: 1.2; + @at-root #{$root}--hide-label & { .span-label { display: none; diff --git a/packages/themes/ecl/src/ecl-ec/mixins/link.scss b/packages/themes/ecl/src/ecl-ec/mixins/link.scss index 66e4307a33..3cd6aa26db 100644 --- a/packages/themes/ecl/src/ecl-ec/mixins/link.scss +++ b/packages/themes/ecl/src/ecl-ec/mixins/link.scss @@ -1,12 +1,13 @@ -@mixin kol-link { - a, - button { +@mixin kol-link($block-classname) { + .#{$block-classname} { + font-family: var(--font-family); + appearance: none; color: var(--color-blue); line-height: 1.2; - } - a:hover, - button:hover { - color: var(--color-blue-130); + + &:hover { + color: var(--color-blue-130); + } } } diff --git a/packages/themes/ecl/src/ecl-eu/components/button-link.scss b/packages/themes/ecl/src/ecl-eu/components/button-link.scss index 813e14fb7c..313ed5a33a 100644 --- a/packages/themes/ecl/src/ecl-eu/components/button-link.scss +++ b/packages/themes/ecl/src/ecl-eu/components/button-link.scss @@ -1,11 +1,5 @@ -@layer kol-theme-component { - .kol-button { - appearance: none; - color: var(--color-blue); - text-decoration: underline; +@import '../mixins/link'; - &:hover { - color: var(--color-blue-130); - } - } +@layer kol-theme-component { + @include kol-link('kol-button'); } diff --git a/packages/themes/ecl/src/ecl-eu/components/button.scss b/packages/themes/ecl/src/ecl-eu/components/button.scss index a0ddd26acc..2dd471aa8b 100644 --- a/packages/themes/ecl/src/ecl-eu/components/button.scss +++ b/packages/themes/ecl/src/ecl-eu/components/button.scss @@ -2,10 +2,5 @@ @import '../mixins/button'; @layer kol-theme-component { - .kol-button { - --kolibri-spacing: #{rem(4)}; - font-family: var(--font-family); - } - - @include kol-button; + @include kol-button('kol-button'); } diff --git a/packages/themes/ecl/src/ecl-eu/components/form.scss b/packages/themes/ecl/src/ecl-eu/components/form.scss index 85f1140d0c..3e36a2b81b 100644 --- a/packages/themes/ecl/src/ecl-eu/components/form.scss +++ b/packages/themes/ecl/src/ecl-eu/components/form.scss @@ -3,14 +3,15 @@ @import '../mixins/link'; @layer kol-theme-component { + @include kol-link('kol-link'); + :host { font-family: var(--font-family); width: 100%; @include kol-alert-theme; } - .kol-link-wc { - @include kol-link; + .kol-form__link { display: inline-block; } diff --git a/packages/themes/ecl/src/ecl-eu/components/link-button.scss b/packages/themes/ecl/src/ecl-eu/components/link-button.scss index 5c4a5414ff..240c3a798d 100644 --- a/packages/themes/ecl/src/ecl-eu/components/link-button.scss +++ b/packages/themes/ecl/src/ecl-eu/components/link-button.scss @@ -1,132 +1,6 @@ @import '../../mixins/rem'; +@import '../mixins/button'; @layer kol-theme-component { - :host { - --kolibri-spacing: #{rem(4)}; - font-family: var(--font-family); - } - - a, - button { - appearance: none; - border-radius: rem(4); - text-decoration: none; - } - - a:focus, - button:focus { - outline: none; - } - - a > .kol-span-wc, - button > .kol-span-wc { - min-height: rem(44); - min-width: rem(44); - border-radius: rem(4); - font: - normal normal 400 rem(16) / rem(20) arial, - sans-serif; - font-weight: 400; - margin: 0; - padding: rem(12); - } - - a:focus-visible > .kol-span-wc, - button:focus-visible > .kol-span-wc { - outline-offset: rem(-4); - outline-style: solid; - outline-width: rem(2); - } - - a:active > .kol-span-wc, - button:active > .kol-span-wc, - a:hover > .kol-span-wc, - button:hover > .kol-span-wc { - box-shadow: - 0 rem(2) rem(4) rgb(9 49 142 / 8%), - 0 0 rem(10) rgb(9 49 142 / 4%), - 0 rem(4) rem(5) rgb(9 49 142 / 4%), - 0 rem(-4) rem(4) rgb(9 49 142 / 4%); - } - - .primary a > .kol-span-wc, - .primary button > .kol-span-wc { - background-color: #0e47cb; - color: #fff; - } - - .primary a:focus-visible > .kol-span-wc, - .primary button:focus-visible > .kol-span-wc { - outline-color: #fff; - } - - .primary a:hover > .kol-span-wc, - .primary button:hover > .kol-span-wc { - background-color: #3e6cd5; - } - - .secondary a > .kol-span-wc, - .secondary button > .kol-span-wc { - background-color: #fff; - border: rem(2) solid #0e47cb; - color: #0e47cb; - padding: calc(rem(12) - rem(2)) calc(rem(16) - rem(2)); - } - - .secondary a:focus-visible > .kol-span-wc, - .secondary button:focus-visible > .kol-span-wc { - box-shadow: inset 0 0 0 rem(4) #0e47cb; - outline-color: #fff; - } - - .secondary a:hover > .kol-span-wc, - .secondary button:hover > .kol-span-wc { - border-color: #0e47cb; - color: #0e47cb; - } - - .normal a > .kol-span-wc, - .normal button > .kol-span-wc { - background-color: #fc0; - color: #171a22; - } - - .normal a:focus-visible > .kol-span-wc, - .normal button:focus-visible > .kol-span-wc { - outline-color: #000; - } - - .normal a:hover > .kol-span-wc, - .normal button:hover > .kol-span-wc { - background-color: #fc0; - border-color: #fc0; - } - - .danger a .kol-span-wc, - .danger button .kol-span-wc { - background-color: var(--color-red); - border-color: var(--color-red); - color: var(--color-white); - } - - .danger a:hover .kol-span-wc, - .danger button:hover .kol-span-wc { - background-color: var(--color-red); - border-color: var(--color-red); - } - - .ghost a > .kol-span-wc, - .ghost button > .kol-span-wc { - color: #0e47cb; - } - - .ghost a:focus-visible > .kol-span-wc, - .ghost button:focus-visible > .kol-span-wc { - outline-color: #0e47cb; - } - - .ghost a:hover > .kol-span-wc, - .ghost button:hover > .kol-span-wc { - color: #0e47cb; - } + @include kol-button('kol-link'); } diff --git a/packages/themes/ecl/src/ecl-eu/components/link.scss b/packages/themes/ecl/src/ecl-eu/components/link.scss index a612e4a58d..6296c13de6 100644 --- a/packages/themes/ecl/src/ecl-eu/components/link.scss +++ b/packages/themes/ecl/src/ecl-eu/components/link.scss @@ -1,9 +1,9 @@ @import '../mixins/link'; @layer kol-theme-component { + @include kol-link('kol-link'); + :host { font-family: var(--font-family); } - - @include kol-link; } diff --git a/packages/themes/ecl/src/ecl-eu/components/nav.scss b/packages/themes/ecl/src/ecl-eu/components/nav.scss index dcbfce6619..b03f54cc47 100644 --- a/packages/themes/ecl/src/ecl-eu/components/nav.scss +++ b/packages/themes/ecl/src/ecl-eu/components/nav.scss @@ -21,7 +21,7 @@ } .entry .kol-button-wc:first-child, - .entry .kol-link-wc, + .entry .kol-link, .entry .kol-span-wc { flex-grow: 1; } @@ -66,12 +66,12 @@ text-decoration: none; } - :is(.kol-button-wc, .kol-link-wc):focus-within .kol-span-wc { + :is(.kol-button-wc, .kol-link):focus-within .kol-span-wc { border-color: var(--color-white); } - :is(.kol-button-wc, .kol-link-wc):focus-within .kol-span-wc, - :is(.kol-button-wc, .kol-link-wc):hover .kol-span-wc { + :is(.kol-button-wc, .kol-link):focus-within .kol-span-wc, + :is(.kol-button-wc, .kol-link):hover .kol-span-wc { text-decoration: underline; } diff --git a/packages/themes/ecl/src/ecl-eu/components/skip-nav.scss b/packages/themes/ecl/src/ecl-eu/components/skip-nav.scss index d92e5470fd..5943f74b13 100644 --- a/packages/themes/ecl/src/ecl-eu/components/skip-nav.scss +++ b/packages/themes/ecl/src/ecl-eu/components/skip-nav.scss @@ -5,13 +5,15 @@ font-family: var(--font-family); } - .kol-link-wc > a > .kol-span-wc { - border-radius: rem(4); - gap: rem(8); - line-height: 1; - padding: rem(12); - background-color: #0e47cb; - color: #fff; - cursor: pointer; + .kol-link { + &__text { + border-radius: rem(4); + gap: rem(8); + line-height: 1; + padding: rem(12); + background-color: #0e47cb; + color: #fff; + cursor: pointer; + } } } diff --git a/packages/themes/ecl/src/ecl-eu/components/split-button.scss b/packages/themes/ecl/src/ecl-eu/components/split-button.scss index 402f611c94..9c574ab278 100644 --- a/packages/themes/ecl/src/ecl-eu/components/split-button.scss +++ b/packages/themes/ecl/src/ecl-eu/components/split-button.scss @@ -18,5 +18,5 @@ background-color: #fff; } - @include kol-button; + @include kol-button('kol-button'); } diff --git a/packages/themes/ecl/src/ecl-eu/mixins/button.scss b/packages/themes/ecl/src/ecl-eu/mixins/button.scss index f2bf224818..6c63aa3540 100644 --- a/packages/themes/ecl/src/ecl-eu/mixins/button.scss +++ b/packages/themes/ecl/src/ecl-eu/mixins/button.scss @@ -1,11 +1,12 @@ @import '../../mixins/rem'; -@mixin kol-button { - .kol-button { +@mixin kol-button($block-classname) { + .#{$block-classname} { $root: &; - + --kolibri-spacing: #{rem(4)}; --text-focus-outline-color: var(--color-white); + font-family: var(--font-family); appearance: none; border-radius: rem(4); text-decoration: none; diff --git a/packages/themes/ecl/src/ecl-eu/mixins/link.scss b/packages/themes/ecl/src/ecl-eu/mixins/link.scss index 66e4307a33..eb5207f4c7 100644 --- a/packages/themes/ecl/src/ecl-eu/mixins/link.scss +++ b/packages/themes/ecl/src/ecl-eu/mixins/link.scss @@ -1,12 +1,11 @@ -@mixin kol-link { - a, - button { +@mixin kol-link($block-classname) { + .#{$block-classname} { appearance: none; color: var(--color-blue); line-height: 1.2; - } - a:hover, - button:hover { - color: var(--color-blue-130); + + &:hover { + color: var(--color-blue-130); + } } } diff --git a/packages/themes/itzbund/src/components/button.scss b/packages/themes/itzbund/src/components/button.scss index dbd9f08086..b65a13f31b 100644 --- a/packages/themes/itzbund/src/components/button.scss +++ b/packages/themes/itzbund/src/components/button.scss @@ -2,6 +2,7 @@ @import '../mixins/rem'; @layer kol-theme-component { + @include kol-button('kol-button'); .kol-button { font-family: var(--font-family-sans); /* text-transform: uppercase; */ @@ -20,6 +21,4 @@ padding: 0 rem(16); } } - - @include kol-button; } diff --git a/packages/themes/itzbund/src/components/form.scss b/packages/themes/itzbund/src/components/form.scss index d398605896..e742fea31b 100644 --- a/packages/themes/itzbund/src/components/form.scss +++ b/packages/themes/itzbund/src/components/form.scss @@ -4,9 +4,9 @@ @layer kol-theme-component { @include kol-alert-theme; + @include kol-link; - .kol-link-wc { - @include kol-link; + .kol-form__link { display: inline-block; } diff --git a/packages/themes/itzbund/src/components/nav.scss b/packages/themes/itzbund/src/components/nav.scss index ae81dd595f..a7516361ab 100644 --- a/packages/themes/itzbund/src/components/nav.scss +++ b/packages/themes/itzbund/src/components/nav.scss @@ -37,13 +37,13 @@ height: 100%; } - :host > div > nav .kol-link-wc { + :host > div > nav .kol-link { width: 100%; /*height: 100%;font-weight: 600;*/ display: block; } - :host > div > nav .kol-link-wc a { + :host > div > nav .kol-link a { border-radius: var(--border-radius); background-color: var(--color-petrol); border: rem(1) solid transparent; @@ -59,21 +59,21 @@ text-decoration: inherit; } - :host > div > nav .kol-link-wc[exportparts*='selected'] a { + :host > div > nav .kol-link[exportparts*='selected'] a { background-color: var(--color-achat); font-weight: 700; } - :host > div > nav .kol-link-wc a .kol-icon.mr-2 { + :host > div > nav .kol-link a .kol-icon.mr-2 { margin-right: calc(2 * 2 * var(--spacing)); } - :host > div > nav .kol-link-wc a .kol-icon.ml-2 { + :host > div > nav .kol-link a .kol-icon.ml-2 { margin-left: calc(2 * 2 * var(--spacing)); } - :host > div > nav .kol-link-wc a:focus, - :host > div > nav .kol-link-wc a:hover { + :host > div > nav .kol-link a:focus, + :host > div > nav .kol-link a:hover { border: rem(1) solid white; background-color: var(--color-fluorit); color: var(--color-anthrazit); @@ -86,7 +86,7 @@ text-align: center; } - :host > div > nav .kol-link-wc a.text-center { + :host > div > nav .kol-link a.text-center { display: grid; align-items: center; justify-items: center; diff --git a/packages/themes/itzbund/src/components/skip-nav.scss b/packages/themes/itzbund/src/components/skip-nav.scss index 2567def78d..320134db3c 100644 --- a/packages/themes/itzbund/src/components/skip-nav.scss +++ b/packages/themes/itzbund/src/components/skip-nav.scss @@ -1,15 +1,17 @@ @import '../mixins/rem'; @layer kol-theme-component { - .kol-link-wc > a > .kol-span-wc { - border-radius: rem(32); - border-style: solid; - gap: rem(8); - line-height: 1; - padding: 0 rem(16); - background-color: var(--color-petrol); - border-color: var(--color-petrol); - color: var(--color-weiss); - cursor: pointer; + .kol-link { + &__text { + border-radius: rem(32); + border-style: solid; + gap: rem(8); + line-height: 1; + padding: 0 rem(16); + background-color: var(--color-petrol); + border-color: var(--color-petrol); + color: var(--color-weiss); + cursor: pointer; + } } } diff --git a/packages/themes/itzbund/src/components/split-button.scss b/packages/themes/itzbund/src/components/split-button.scss index 9c8a097168..da8d3e676f 100644 --- a/packages/themes/itzbund/src/components/split-button.scss +++ b/packages/themes/itzbund/src/components/split-button.scss @@ -73,5 +73,5 @@ min-height: rem(44); } - @include kol-button; + @include kol-button('kol-button'); } diff --git a/packages/themes/itzbund/src/mixins/button.scss b/packages/themes/itzbund/src/mixins/button.scss index cf211c7783..a3d36f11a5 100644 --- a/packages/themes/itzbund/src/mixins/button.scss +++ b/packages/themes/itzbund/src/mixins/button.scss @@ -1,7 +1,7 @@ @import './rem'; -@mixin kol-button { - .kol-button { +@mixin kol-button($block-classname) { + .#{$block-classname} { $root: &; background-color: transparent; diff --git a/packages/themes/itzbund/src/mixins/link.scss b/packages/themes/itzbund/src/mixins/link.scss index bd4c9ad97a..3a644f8c5f 100644 --- a/packages/themes/itzbund/src/mixins/link.scss +++ b/packages/themes/itzbund/src/mixins/link.scss @@ -1,13 +1,8 @@ @import './rem'; @mixin kol-link { - .kol-link-wc a, - .kol-button-wc button { + .kol-link { text-decoration-line: none; - } - - a, - button { background-image: repeating-linear-gradient(to right, #66ddec, #66ddec); background-repeat: no-repeat; background-position: left 0 bottom 0; @@ -17,36 +12,18 @@ font-family: var(--font-family-sans); font-size: inherit; /* text-transform: uppercase; */ - transition-delay: 0; + transition-delay: 0ms; transition-timing-function: ease-in-out; transition-duration: 0.5s; transition-property: background, color, border-color; - } - - a:focus, - a:hover, - button:focus, - button:hover { - background-size: 100% 0.25ex; - color: var(--color-achat); - } - - a > .kol-span-wc, - button > .kol-span-wc { - gap: 0.25em; - } - a.skip { - left: rem(-99999); - overflow: hidden; - position: absolute; - z-index: 9999999; - } + &:hover { + background-size: 100% 0.25ex; + color: var(--color-achat); + } - a.skip:focus { - background-color: white; - box-shadow: 0 0 rem(8) rem(8) white; - left: unset; - position: unset; + &__text { + gap: 0.25em; + } } }