Skip to content

Commit

Permalink
update react-css
Browse files Browse the repository at this point in the history
  • Loading branch information
@mimarz
mimarz committed Apr 29, 2024
1 parent ed2d951 commit 938d4a5
Showing 1 changed file with 13 additions and 175 deletions.
188 changes: 13 additions & 175 deletions packages/css/react-css-modules.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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);
}
}

Expand Down Expand Up @@ -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 {
Expand All @@ -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 {
Expand All @@ -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);
}
}
Expand Down Expand Up @@ -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");
}

Expand Down Expand Up @@ -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 {
Expand Down

0 comments on commit 938d4a5

Please sign in to comment.