From 938d4a5c0dbeea928c4bc9d4f6ee20781f305627 Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Fri, 26 Apr 2024 08:30:35 +0200 Subject: [PATCH] update react-css --- packages/css/react-css-modules.css | 188 ++--------------------------- 1 file changed, 13 insertions(+), 175 deletions(-) diff --git a/packages/css/react-css-modules.css b/packages/css/react-css-modules.css index ef5247ced7..7882a249a5 100644 --- a/packages/css/react-css-modules.css +++ b/packages/css/react-css-modules.css @@ -517,140 +517,6 @@ } } -@layer fds.accordion { - .fds-accordion-accordion-a8137c3d { - --fds-accordion-border-radius: var(--fds-border_radius-interactive); - --fds-accordion-border-color: var(--fds-semantic-border-neutral-subtle); - - border-bottom: 1px solid var(--fds-semantic-border-neutral-subtle); - box-sizing: border-box; - } - - .fds-accordion-border-a8137c3d { - border: 1px solid var(--fds-accordion-border-color); - border-radius: var(--fds-accordion-border-radius); - } - - .fds-accordion-expandIcon-a8137c3d { - border-radius: var(--fds-border_radius-interactive); - } - - .fds-accordion-content-a8137c3d { - padding: var(--fds-spacing-5, 1rem); - overflow: hidden; - text-overflow: ellipsis; - } - - .fds-accordion-header-a8137c3d { - margin: 0; - } - - .fds-accordion-accordionButton-a8137c3d { - width: 100%; - display: flex; - justify-content: flex-start; - align-items: center; - gap: var(--fds-spacing-2); - margin: 0; - text-align: left; - cursor: pointer; - border: none; - border-top: 1px solid var(--fds-semantic-border-neutral-subtle); - padding: var(--fds-spacing-4); - } - - .fds-accordion-border-a8137c3d .fds-accordion-accordionButton-a8137c3d { - border-radius: var(--fds-accordion-border-radius); - } - - .fds-accordion-item-a8137c3d:focus-within { - position: relative; - } - - .fds-accordion-item-a8137c3d:where(.fds-accordion-open-a8137c3d) .fds-accordion-accordionButton-a8137c3d:hover + * .fds-accordion-content-a8137c3d { - border-color: var(--fds-semantic-border-neutral-strong); - } - - .fds-accordion-item-a8137c3d:where(.fds-accordion-open-a8137c3d) .fds-accordion-expandIcon-a8137c3d { - transform: rotateZ(180deg); - } - - .fds-accordion-neutral-a8137c3d, - .fds-accordion-neutral-a8137c3d .fds-accordion-accordionButton-a8137c3d { - background-color: var(--fds-semantic-surface-neutral-default); - } - - .fds-accordion-subtle-a8137c3d, - .fds-accordion-subtle-a8137c3d .fds-accordion-accordionButton-a8137c3d { - background-color: var(--fds-semantic-surface-neutral-subtle); - } - - .fds-accordion-first-a8137c3d, - .fds-accordion-first-a8137c3d .fds-accordion-accordionButton-a8137c3d { - --fds-accordion-border-color: var(--fds-semantic-border-first-default); - - background: var(--fds-semantic-surface-first-subtle); - } - - .fds-accordion-second-a8137c3d, - .fds-accordion-second-a8137c3d .fds-accordion-accordionButton-a8137c3d { - --fds-accordion-border-color: var(--fds-semantic-border-second-default); - - background: var(--fds-semantic-surface-second-subtle); - } - - .fds-accordion-third-a8137c3d, - .fds-accordion-third-a8137c3d .fds-accordion-accordionButton-a8137c3d { - --fds-accordion-border-color: var(--fds-semantic-border-third-default); - - background: var(--fds-semantic-surface-third-subtle); - } - - .fds-accordion-first-a8137c3d .fds-accordion-item-a8137c3d:where(.fds-accordion-open-a8137c3d) .fds-accordion-accordionButton-a8137c3d, - .fds-accordion-second-a8137c3d .fds-accordion-item-a8137c3d:where(.fds-accordion-open-a8137c3d) .fds-accordion-accordionButton-a8137c3d, - .fds-accordion-third-a8137c3d .fds-accordion-item-a8137c3d:where(.fds-accordion-open-a8137c3d) .fds-accordion-accordionButton-a8137c3d { - background-color: rgba(0 0 0 / 0.03); - } - - .fds-accordion-neutral-a8137c3d .fds-accordion-item-a8137c3d:where(.fds-accordion-open-a8137c3d) .fds-accordion-accordionButton-a8137c3d, - .fds-accordion-subtle-a8137c3d .fds-accordion-item-a8137c3d:where(.fds-accordion-open-a8137c3d) .fds-accordion-accordionButton-a8137c3d { - background-color: var(--fds-semantic-surface-action-first-no_fill-hover); - } - - .fds-accordion-border-a8137c3d .fds-accordion-item-a8137c3d:first-child .fds-accordion-accordionButton-a8137c3d { - border-top: 0; - } - - .fds-accordion-first-a8137c3d .fds-accordion-item-a8137c3d:not(:first-child) .fds-accordion-accordionButton-a8137c3d, - .fds-accordion-second-a8137c3d .fds-accordion-item-a8137c3d:not(:first-child) .fds-accordion-accordionButton-a8137c3d, - .fds-accordion-third-a8137c3d .fds-accordion-item-a8137c3d:not(:first-child) .fds-accordion-accordionButton-a8137c3d { - border-top: 1px solid var(--fds-semantic-surface-neutral-default); - } - - @media (hover: hover) and (pointer: fine) { - .fds-accordion-accordionButton-a8137c3d:hover .fds-accordion-expandIcon-a8137c3d { - background-color: rgba(0 0 0 / 0.1); - } - - .fds-accordion-neutral-a8137c3d .fds-accordion-accordionButton-a8137c3d:hover, - .fds-accordion-subtle-a8137c3d .fds-accordion-accordionButton-a8137c3d:hover { - background-color: var(--fds-semantic-surface-neutral-subtle-hover); - } - - .fds-accordion-first-a8137c3d .fds-accordion-accordionButton-a8137c3d:hover { - background-color: var(--fds-semantic-surface-first-subtle-hover); - } - - .fds-accordion-second-a8137c3d .fds-accordion-accordionButton-a8137c3d:hover { - background-color: var(--fds-semantic-surface-second-subtle-hover); - } - - .fds-accordion-third-a8137c3d .fds-accordion-accordionButton-a8137c3d:hover { - background-color: var(--fds-semantic-surface-third-subtle-hover); - } - } -} - .fds-animateheight-root-a203211d.fds-animateheight-openingOrClosing-a203211d, .fds-animateheight-root-a203211d.fds-animateheight-closed-a203211d { overflow: hidden; @@ -1218,33 +1084,24 @@ "input:not(:read-only)" does not work so using ".container:not(.readonly) >" instead */ @media (hover: hover) and (pointer: fine) { .fds-checkbox-container-ad9a8b9c:not(.fds-checkbox-readonly-ad9a8b9c, .fds-checkbox-disabled-ad9a8b9c) > .fds-checkbox-label-ad9a8b9c:hover, - .fds-checkbox-container-ad9a8b9c:not(.fds-checkbox-readonly-ad9a8b9c, .fds-checkbox-disabled-ad9a8b9c) - > .fds-checkbox-input-ad9a8b9c:hover - + .fds-checkbox-label-ad9a8b9c { + .fds-checkbox-container-ad9a8b9c:not(.fds-checkbox-readonly-ad9a8b9c, .fds-checkbox-disabled-ad9a8b9c) > .fds-checkbox-input-ad9a8b9c:hover + .fds-checkbox-label-ad9a8b9c { color: var(--fds-semantic-text-action-hover); } .fds-checkbox-container-ad9a8b9c:not(.fds-checkbox-readonly-ad9a8b9c, .fds-checkbox-disabled-ad9a8b9c) > .fds-checkbox-input-ad9a8b9c:hover:not(:checked) { --fds-checkbox-border-color: var(--fds-semantic-border-input-hover); - box-shadow: - var(--fds-checkbox-border__hover), - inset 0 0 0 2px var(--fds-checkbox-border-color); + box-shadow: var(--fds-checkbox-border__hover), inset 0 0 0 2px var(--fds-checkbox-border-color); } .fds-checkbox-container-ad9a8b9c:not(.fds-checkbox-readonly-ad9a8b9c, .fds-checkbox-disabled-ad9a8b9c) > .fds-checkbox-input-ad9a8b9c:hover:checked { --fds-checkbox-border-color: var(--fds-semantic-border-input-hover); - box-shadow: - var(--fds-checkbox-border__hover), - inset 0 0 0 2px var(--fds-checkbox-border-color); + box-shadow: var(--fds-checkbox-border__hover), inset 0 0 0 2px var(--fds-checkbox-border-color); } - .fds-checkbox-container-ad9a8b9c:not(.fds-checkbox-readonly-ad9a8b9c, .fds-checkbox-disabled-ad9a8b9c) - > .fds-checkbox-input-ad9a8b9c:hover:checked:focus-visible { - box-shadow: - var(--fds-checkbox-border__hover), - inset 0 0 0 var(--fds-checkbox-focus-border-width) var(--fds-semantic-border-focus-boxshadow); + .fds-checkbox-container-ad9a8b9c:not(.fds-checkbox-readonly-ad9a8b9c, .fds-checkbox-disabled-ad9a8b9c) > .fds-checkbox-input-ad9a8b9c:hover:checked:focus-visible { + box-shadow: var(--fds-checkbox-border__hover), inset 0 0 0 var(--fds-checkbox-focus-border-width) var(--fds-semantic-border-focus-boxshadow); } } @@ -1393,9 +1250,7 @@ .fds-radio-input-7a9bd584:focus-visible { outline-offset: 0; outline: var(--fds-radio-focus-border-width) solid var(--fds-semantic-border-focus-outline); - box-shadow: - inset 0 0 0 var(--fds-radio-focus-border-width) var(--fds-semantic-border-focus-boxshadow), - inset 0 0 0 6px var(--fds-radio-background); + box-shadow: inset 0 0 0 var(--fds-radio-focus-border-width) var(--fds-semantic-border-focus-boxshadow), inset 0 0 0 6px var(--fds-radio-background); } .fds-radio-input-7a9bd584:checked { @@ -1410,9 +1265,7 @@ } .fds-radio-input-7a9bd584:checked:not(:focus-visible) { - box-shadow: - inset 0 0 0 2px var(--fds-radio-border-color), - inset 0 0 0 6px var(--fds-radio-background); + box-shadow: inset 0 0 0 2px var(--fds-radio-border-color), inset 0 0 0 6px var(--fds-radio-background); } .fds-radio-readonly-7a9bd584 > .fds-radio-input-7a9bd584:checked { @@ -1427,33 +1280,24 @@ "input:not(:read-only)" does not work so using ".container:not(.readonly) >" instead */ @media (hover: hover) and (pointer: fine) { .fds-radio-container-7a9bd584:not(.fds-radio-readonly-7a9bd584, .fds-radio-disabled-7a9bd584) > .fds-radio-label-7a9bd584:hover, - .fds-radio-container-7a9bd584:not(.fds-radio-readonly-7a9bd584, .fds-radio-disabled-7a9bd584) - > .fds-radio-input-7a9bd584:hover - + .fds-radio-label-7a9bd584 { + .fds-radio-container-7a9bd584:not(.fds-radio-readonly-7a9bd584, .fds-radio-disabled-7a9bd584) > .fds-radio-input-7a9bd584:hover + .fds-radio-label-7a9bd584 { color: var(--fds-semantic-text-action-hover); } .fds-radio-container-7a9bd584:not(.fds-radio-readonly-7a9bd584, .fds-radio-disabled-7a9bd584) > .fds-radio-input-7a9bd584:hover:not(:checked) { --fds-radio-border-color: var(--fds-semantic-border-input-hover); - box-shadow: - var(--fds-radio-border__hover), - inset 0 0 0 2px var(--fds-radio-border-color); + box-shadow: var(--fds-radio-border__hover), inset 0 0 0 2px var(--fds-radio-border-color); } .fds-radio-container-7a9bd584:not(.fds-radio-readonly-7a9bd584, .fds-radio-disabled-7a9bd584) > .fds-radio-input-7a9bd584:hover:checked { --fds-radio-border-color: var(--fds-semantic-border-input-hover); - box-shadow: - var(--fds-radio-border__hover), - inset 0 0 0 2px var(--fds-radio-border-color), - inset 0 0 0 6px var(--fds-radio-background); + box-shadow: var(--fds-radio-border__hover), inset 0 0 0 2px var(--fds-radio-border-color), inset 0 0 0 6px var(--fds-radio-background); } .fds-radio-container-7a9bd584:not(.fds-radio-readonly-7a9bd584, .fds-radio-disabled-7a9bd584) > .fds-radio-input-7a9bd584:hover:checked:focus-visible { - box-shadow: - var(--fds-radio-border__hover), - inset 0 0 0 var(--fds-radio-focus-border-width) var(--fds-semantic-border-focus-boxshadow), + box-shadow: var(--fds-radio-border__hover), inset 0 0 0 var(--fds-radio-focus-border-width) var(--fds-semantic-border-focus-boxshadow), inset 0 0 0 6px var(--fds-radio-background); } } @@ -1676,11 +1520,7 @@ background-color: var(--fds-semantic-border-neutral-default); } - .fds-switch-readonly-9a6b03bc - .fds-switch-input-9a6b03bc[readonly]:checked - + .fds-switch-label-9a6b03bc - .fds-switch-track-9a6b03bc - .fds-switch-thumb-9a6b03bc { + .fds-switch-readonly-9a6b03bc .fds-switch-input-9a6b03bc[readonly]:checked + .fds-switch-label-9a6b03bc .fds-switch-track-9a6b03bc .fds-switch-thumb-9a6b03bc { background-image: url("data:image/svg+xml,%3Csvg viewBox='-3 -3 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.1339 2.86612C10.622 3.35427 10.622 4.14573 10.1339 4.63388L5.88388 8.88388C5.39573 9.37204 4.60427 9.37204 4.11612 8.88388L1.86612 6.63388C1.37796 6.14573 1.37796 5.35427 1.86612 4.86612C2.35427 4.37796 3.14573 4.37796 3.63388 4.86612L5 6.23223L8.36612 2.86612C8.85427 2.37796 9.64573 2.37796 10.1339 2.86612Z' fill='%23f4f5f6' /%3E%3C/svg%3E"); } @@ -2120,9 +1960,7 @@ } .fds-modal-modal-a6ba173[open] { - animation: - fds-modal-slide-in-a6ba173 300ms ease-in-out, - fds-modal-fade-in-a6ba173 300ms ease-in-out; + animation: fds-modal-slide-in-a6ba173 300ms ease-in-out, fds-modal-fade-in-a6ba173 300ms ease-in-out; } .fds-modal-modal-a6ba173 > hr {