Skip to content

Commit

Permalink
refactor(Switch): ♻️ Move styling to switch.css (#1909)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mimarz
mimarz authored Apr 30, 2024
1 parent 1df0359 commit 6ba395e
Show file tree
Hide file tree
Showing 4 changed files with 66 additions and 280 deletions.
3 changes: 2 additions & 1 deletion packages/css/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,10 @@
@import url('./react-css-modules.css');
@import url('./button.css');
@import url('./utils.css');
@import url('./box.css');
@import url('./alert.css');
@import url('./ingress.css');
@import url('./skiplink.css');
@import url('./accordion.css');
@import url('./box.css');
@import url('./switch.css');
@import url('./checkbox.css');
217 changes: 0 additions & 217 deletions packages/css/react-css-modules.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1161,223 +1161,6 @@
}
}

@layer fds.switch {
.fds-switch-switch-9a6b03bc {
--fds-transition: 200ms;
--fds-switch-height: 1.75rem;
--fds-switch-focus-border-width: 3px;

position: relative;
}

@media (prefers-reduced-motion) {
.fds-switch-switch-9a6b03bc {
--fds-transition: 0;
}
}

.fds-switch-label-9a6b03bc {
min-height: var(--fds-sizing-10);
min-width: min-content;
display: grid;
grid-template-columns: auto 1fr;
gap: var(--fds-spacing-1);
align-items: center;
cursor: pointer;
}

.fds-switch-track-9a6b03bc {
position: relative;
display: inline-block;
pointer-events: none;
width: var(--fds-switch-width);
height: var(--fds-switch-height);
margin: auto;
overflow: visible;
border-radius: var(--fds-border_radius-full);
background-color: var(--fds-semantic-surface-neutral-dark);
transition: background-color var(--fds-transition) ease;
margin-right: var(--fds-spacing-1);
}

.fds-switch-description-9a6b03bc {
padding-left: calc(var(--fds-switch-width) + var(--fds-spacing-2));
margin-top: calc(var(--fds-spacing-2) * -1);
color: var(--fds-semantic-text-neutral-subtle);
}

.fds-switch-padlock-9a6b03bc {
height: 1.2em;
width: 1.2em;
}

.fds-switch-right-9a6b03bc {
grid-template-columns: 1fr auto;
grid-auto-flow: dense;
}

.fds-switch-right-9a6b03bc .fds-switch-track-9a6b03bc {
order: 1;
margin-right: 0;
}

.fds-switch-right-9a6b03bc + .fds-switch-description-9a6b03bc {
padding-left: 0;
}

.fds-switch-input-9a6b03bc {
position: absolute;
width: 2.75rem;
height: 2.75rem;
z-index: 1;
opacity: 0;
cursor: pointer;
margin: 0;
}

.fds-switch-readonly-9a6b03bc > .fds-switch-label-9a6b03bc {
grid-template-columns: auto min-content 1fr;
}

.fds-switch-readonly-9a6b03bc > .fds-switch-label-9a6b03bc:where(.fds-switch-right-9a6b03bc) {
grid-template-columns: min-content 1fr auto;
}

.fds-switch-readonly-9a6b03bc > .fds-switch-input-9a6b03bc,
.fds-switch-readonly-9a6b03bc > .fds-switch-label-9a6b03bc {
cursor: default;
}

.fds-switch-disabled-9a6b03bc > .fds-switch-input-9a6b03bc,
.fds-switch-disabled-9a6b03bc > .fds-switch-label-9a6b03bc,
.fds-switch-disabled-9a6b03bc > .fds-switch-track-9a6b03bc {
cursor: not-allowed;
}

.fds-switch-disabled-9a6b03bc > .fds-switch-label-9a6b03bc,
.fds-switch-disabled-9a6b03bc > .fds-switch-track-9a6b03bc,
.fds-switch-disabled-9a6b03bc > .fds-switch-description-9a6b03bc {
opacity: var(--fds-opacity-disabled);
}

.fds-switch-readonly-9a6b03bc > .fds-switch-description-9a6b03bc {
margin-left: var(--fds-spacing-1);
}

.fds-switch-small-9a6b03bc,
.fds-switch-small-9a6b03bc .fds-switch-label-9a6b03bc {
min-height: var(--fds-sizing-6);
}

.fds-switch-medium-9a6b03bc,
.fds-switch-medium-9a6b03bc .fds-switch-label-9a6b03bc {
min-height: var(--fds-sizing-7);
}

.fds-switch-large-9a6b03bc,
.fds-switch-large-9a6b03bc .fds-switch-label-9a6b03bc {
min-height: var(--fds-sizing-8);
}

.fds-switch-small-9a6b03bc {
--fds-switch-height: var(--fds-sizing-6);
--fds-switch-width: var(--fds-sizing-11);
}

.fds-switch-small-9a6b03bc .fds-switch-input-9a6b03bc {
left: -0.25rem;
top: -0.25rem;
}

.fds-switch-medium-9a6b03bc {
--fds-switch-height: var(--fds-sizing-7);
--fds-switch-width: var(--fds-sizing-13);
}

.fds-switch-medium-9a6b03bc .fds-switch-input-9a6b03bc {
left: 0;
top: 0;
}

.fds-switch-large-9a6b03bc {
--fds-switch-height: var(--fds-sizing-8);
--fds-switch-width: var(--fds-sizing-15);
}

.fds-switch-large-9a6b03bc .fds-switch-input-9a6b03bc {
left: 0;
top: 0.25rem;
}

.fds-switch-label-9a6b03bc:has(.fds-switch-track-9a6b03bc:only-child) {
grid-template-columns: auto;
}

.fds-switch-label-9a6b03bc:has(.fds-switch-track-9a6b03bc:only-child) .fds-switch-track-9a6b03bc {
margin-right: 0;
}

.fds-switch-input-9a6b03bc:focus-visible + .fds-switch-label-9a6b03bc .fds-switch-track-9a6b03bc {
outline: var(--fds-switch-focus-border-width) solid var(--fds-semantic-border-focus-outline);
box-shadow: inset 0 0 0 var(--fds-switch-focus-border-width) var(--fds-semantic-border-focus-boxshadow);
}

.fds-switch-input-9a6b03bc:not([readonly]):checked + .fds-switch-label-9a6b03bc .fds-switch-track-9a6b03bc {
background-color: var(--fds-semantic-surface-success-default);
}

.fds-switch-thumb-9a6b03bc {
scale: 0.8;
position: absolute;
height: var(--fds-switch-height);
width: var(--fds-switch-height);
border-radius: var(--fds-border_radius-full);
background-color: var(--fds-semantic-background-default);
transition: transform var(--fds-transition) ease;
}

.fds-switch-input-9a6b03bc:checked + .fds-switch-label-9a6b03bc .fds-switch-track-9a6b03bc .fds-switch-thumb-9a6b03bc {
transform: translateX(calc((var(--fds-switch-width) - var(--fds-switch-height)) * 1.2));
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='%23118849' /%3E%3C/svg%3E");
}

.fds-switch-readonly-9a6b03bc .fds-switch-input-9a6b03bc[readonly] + .fds-switch-label-9a6b03bc .fds-switch-track-9a6b03bc {
box-shadow: inset 0 0 0 2px var(--fds-semantic-border-neutral-subtle);
background-color: var(--fds-semantic-background-subtle);
}

.fds-switch-readonly-9a6b03bc .fds-switch-input-9a6b03bc[readonly] + .fds-switch-label-9a6b03bc .fds-switch-track-9a6b03bc > .fds-switch-thumb-9a6b03bc {
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 {
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");
}

@media (hover: hover) and (pointer: fine) {
.fds-switch-input-9a6b03bc:not([readonly], :disabled):hover + .fds-switch-label-9a6b03bc .fds-switch-track-9a6b03bc > .fds-switch-thumb-9a6b03bc {
transform: translateX(calc((var(--fds-switch-width) - var(--fds-switch-height)) * 0.2));
}

.fds-switch-input-9a6b03bc:not([readonly], :disabled):hover + .fds-switch-label-9a6b03bc {
color: var(--fds-semantic-border-input-hover);
}

.fds-switch-input-9a6b03bc:not(:disabled, [readonly]):checked:hover + .fds-switch-label-9a6b03bc .fds-switch-track-9a6b03bc > .fds-switch-thumb-9a6b03bc {
transform: translateX(calc((var(--fds-switch-width) - var(--fds-switch-height))));
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='%230c6536' /%3E%3C/svg%3E");
}

.fds-switch-input-9a6b03bc:not(:checked, :disabled, [readonly]):hover + .fds-switch-label-9a6b03bc .fds-switch-track-9a6b03bc {
background-color: var(--fds-semantic-surface-neutral-dark-hover);
}

.fds-switch-input-9a6b03bc:not(:disabled, [readonly]):checked:hover + .fds-switch-label-9a6b03bc .fds-switch-track-9a6b03bc {
background-color: var(--fds-semantic-surface-success-hover);
}
}
}

@layer fds.textfield {
.fds-textfield-formField-d98267a0 {
display: grid;
Expand Down
Loading

0 comments on commit 6ba395e

Please sign in to comment.