Skip to content

Commit

Permalink
refactor(Checkbox): ♻️ Move styling to checkbox.css (#1893)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mimarz
mimarz authored Apr 30, 2024
1 parent aa81f5a commit 1df0359
Show file tree
Hide file tree
Showing 4 changed files with 102 additions and 274 deletions.
74 changes: 40 additions & 34 deletions ...ponents/form/Checkbox/Checkbox.module.css → packages/css/checkbox.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@layer fds.checkbox {
.container {
.fds-checkbox {
--fds-checkbox-size: 1.75rem;
--fds-checkbox-focus-border-width: 3px;
--fds-checkbox-background: var(--fds-semantic-background-default);
Expand All @@ -9,13 +9,13 @@
display: grid;
}

.container:has(.label) {
.fds-checkbox:has(.fds-checkbox__label) {
grid-template-columns: var(--fds-checkbox-size) auto;
gap: var(--fds-spacing-2);
}

/* Checkbox */
.input {
.fds-checkbox__input {
position: relative;
width: var(--fds-checkbox-size);
height: var(--fds-checkbox-size);
Expand All @@ -30,7 +30,7 @@
border-radius: var(--fds-border_radius-medium);
}

.input::before {
.fds-checkbox__input::before {
position: absolute;
content: '';
display: block;
Expand All @@ -43,7 +43,7 @@
border-radius: var(--fds-border_radius-medium);
}

.label {
.fds-checkbox__label {
min-height: var(--fds-sizing-10);
min-width: min-content;
display: inline-flex;
Expand All @@ -53,115 +53,121 @@
cursor: pointer;
}

.description {
.fds-checkbox__description {
margin-top: calc(var(--fds-spacing-3) * -1);
color: var(--fds-semantic-text-neutral-subtle);
grid-column: 2;
}

.disabled > .input,
.disabled > .label,
.disabled > .input::before {
.fds-checkbox--disabled > .fds-checkbox__input,
.fds-checkbox--disabled > .fds-checkbox__label,
.fds-checkbox--disabled > .fds-checkbox__input::before {
cursor: not-allowed;
}

.disabled > .label,
.disabled > .input,
.disabled > .description {
.fds-checkbox--disabled > .fds-checkbox__label,
.fds-checkbox--disabled > .fds-checkbox__input,
.fds-checkbox--disabled > .fds-checkbox__description {
opacity: var(--fds-opacity-disabled);
}

.readonly > .label,
.readonly > .input,
.readonly > .input::before {
.fds-checkbox--readonly > .fds-checkbox__label,
.fds-checkbox--readonly > .fds-checkbox__input,
.fds-checkbox--readonly > .fds-checkbox__input::before {
cursor: default;
}

.input:focus-visible {
.fds-checkbox__input:focus-visible {
outline-offset: 0;
outline: var(--fds-checkbox-focus-border-width) solid var(--fds-semantic-border-focus-outline);
box-shadow: inset 0 0 0 var(--fds-checkbox-focus-border-width) var(--fds-semantic-border-focus-boxshadow);
}

.input:checked {
.fds-checkbox__input:checked {
--fds-checkbox-border-color: var(--fds-semantic-border-input-hover);

background: var(--fds-checkbox-border-color);
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 23 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.5509 6.32414C18.9414 6.71467 18.9414 7.34783 18.5509 7.73836L10.5821 15.7071C10.1916 16.0976 9.55842 16.0976 9.16789 15.7071L4.94914 11.4884C4.55862 11.0978 4.55862 10.4647 4.94914 10.0741C5.33967 9.68362 5.97283 9.68362 6.36336 10.0741L9.875 13.5858L17.1366 6.32414C17.5272 5.93362 18.1603 5.93362 18.5509 6.32414Z' fill='white'/%3E%3C/svg%3E%0A");
}

.input:indeterminate {
.fds-checkbox__input:indeterminate {
--fds-checkbox-border-color: var(--fds-semantic-border-input-hover);

background-color: var(--fds-checkbox-border-color);
background-repeat: no-repeat;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 23 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.25 11.25C4.25 10.4216 4.92157 9.75 5.75 9.75H16.75C17.5784 9.75 18.25 10.4216 18.25 11.25C18.25 12.0784 17.5784 12.75 16.75 12.75H5.75C4.92157 12.75 4.25 12.0784 4.25 11.25Z' fill='white' /%3E%3C/svg%3E%0A");
}

.readonly > .input {
.fds-checkbox--readonly > .fds-checkbox__input {
--fds-checkbox-border-color: var(--fds-semantic-border-neutral-subtle);
--fds-checkbox-background: var(--fds-semantic-surface-neutral-subtle);
}

.input:checked:not(:focus-visible) {
.fds-checkbox__input:checked:not(:focus-visible) {
box-shadow: inset 0 0 0 2px var(--fds-checkbox-border-color);
}

.readonly > .input:checked {
.fds-checkbox--readonly > .fds-checkbox__input:checked {
background: var(--fds-checkbox-background);
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 23 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.5509 6.32414C18.9414 6.71467 18.9414 7.34783 18.5509 7.73836L10.5821 15.7071C10.1916 16.0976 9.55842 16.0976 9.16789 15.7071L4.94914 11.4884C4.55862 11.0978 4.55862 10.4647 4.94914 10.0741C5.33967 9.68362 5.97283 9.68362 6.36336 10.0741L9.875 13.5858L17.1366 6.32414C17.5272 5.93362 18.1603 5.93362 18.5509 6.32414Z' fill='%2368707c'/%3E%3C/svg%3E%0A");
}

.readonly > .input:indeterminate {
.fds-checkbox--readonly > .fds-checkbox__input:indeterminate {
background: var(--fds-checkbox-background);
background-repeat: no-repeat;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 23 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.25 11.25C4.25 10.4216 4.92157 9.75 5.75 9.75H16.75C17.5784 9.75 18.25 10.4216 18.25 11.25C18.25 12.0784 17.5784 12.75 16.75 12.75H5.75C4.92157 12.75 4.25 12.0784 4.25 11.25Z' fill='%2368707c' /%3E%3C/svg%3E%0A");
}

.error > .input:not(:disabled, :focus-visible) {
.fds-checkbox--error > .fds-checkbox__input:not(:disabled, :focus-visible) {
--fds-checkbox-border-color: var(--fds-semantic-border-danger-default);
}

/* Only use hover for non-touch devices to prevent sticky-hovering
"input:not(:read-only)" does not work so using ".container:not(.readonly) >" instead */
@media (hover: hover) and (pointer: fine) {
.container:not(.readonly, .disabled) > .label:hover,
.container:not(.readonly, .disabled) > .input:hover + .label {
.fds-checkbox:not(.fds-checkbox--readonly, .fds-checkbox--disabled) > .fds-checkbox__label:hover,
.fds-checkbox:not(.fds-checkbox--readonly, .fds-checkbox--disabled) > .fds-checkbox__input:hover + .fds-checkbox__label {
color: var(--fds-semantic-text-action-hover);
}

.container:not(.readonly, .disabled) > .input:hover:not(:checked) {
.fds-checkbox:not(.fds-checkbox--readonly, .fds-checkbox--disabled) > .fds-checkbox__input: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);
}

.container:not(.readonly, .disabled) > .input:hover:checked {
.fds-checkbox:not(.fds-checkbox--readonly, .fds-checkbox--disabled) > .fds-checkbox__input: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);
}

.container:not(.readonly, .disabled) > .input: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:not(.fds-checkbox--readonly, .fds-checkbox--disabled) > .fds-checkbox__input: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);
}
}

/** Sizing */

.small {
.fds-checkbox--small {
--fds-checkbox-size: var(--fds-sizing-5);

min-height: var(--fds-sizing-10);
}

.medium {
.fds-checkbox--medium {
--fds-checkbox-size: var(--fds-sizing-6);

min-height: var(--fds-sizing-11);
}

.large {
.fds-checkbox--large {
--fds-checkbox-size: var(--fds-sizing-7);

min-height: var(--fds-sizing-12);
Expand Down
1 change: 1 addition & 0 deletions packages/css/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,3 +11,4 @@
@import url('./skiplink.css');
@import url('./accordion.css');
@import url('./box.css');
@import url('./checkbox.css');
170 changes: 0 additions & 170 deletions packages/css/react-css-modules.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -956,176 +956,6 @@
}
}

@layer fds.checkbox {
.fds-checkbox-container-ad9a8b9c {
--fds-checkbox-size: 1.75rem;
--fds-checkbox-focus-border-width: 3px;
--fds-checkbox-background: var(--fds-semantic-background-default);
--fds-checkbox-border-color: var(--fds-semantic-border-input-default);
--fds-checkbox-border__hover: 0 0 0 var(--fds-spacing-2) var(--fds-semantic-surface-info-subtle-hover);

display: grid;
}

.fds-checkbox-container-ad9a8b9c:has(.fds-checkbox-label-ad9a8b9c) {
grid-template-columns: var(--fds-checkbox-size) auto;
gap: var(--fds-spacing-2);
}

/* Checkbox */
.fds-checkbox-input-ad9a8b9c {
position: relative;
width: var(--fds-checkbox-size);
height: var(--fds-checkbox-size);
z-index: 1;
appearance: none;
margin: 0;
align-self: center;
outline: none;
cursor: pointer;
box-shadow: inset 0 0 0 2px var(--fds-checkbox-border-color);
background: var(--fds-checkbox-background);
border-radius: var(--fds-border_radius-medium);
}

.fds-checkbox-input-ad9a8b9c::before {
position: absolute;
content: '';
display: block;
width: 2.75rem;
height: 2.75rem;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
cursor: pointer;
border-radius: var(--fds-border_radius-medium);
}

.fds-checkbox-label-ad9a8b9c {
min-height: var(--fds-sizing-10);
min-width: min-content;
display: inline-flex;
flex-direction: row;
gap: var(--fds-spacing-1);
align-items: center;
cursor: pointer;
}

.fds-checkbox-description-ad9a8b9c {
margin-top: calc(var(--fds-spacing-3) * -1);
color: var(--fds-semantic-text-neutral-subtle);
grid-column: 2;
}

.fds-checkbox-disabled-ad9a8b9c > .fds-checkbox-input-ad9a8b9c,
.fds-checkbox-disabled-ad9a8b9c > .fds-checkbox-label-ad9a8b9c,
.fds-checkbox-disabled-ad9a8b9c > .fds-checkbox-input-ad9a8b9c::before {
cursor: not-allowed;
}

.fds-checkbox-disabled-ad9a8b9c > .fds-checkbox-label-ad9a8b9c,
.fds-checkbox-disabled-ad9a8b9c > .fds-checkbox-input-ad9a8b9c,
.fds-checkbox-disabled-ad9a8b9c > .fds-checkbox-description-ad9a8b9c {
opacity: var(--fds-opacity-disabled);
}

.fds-checkbox-readonly-ad9a8b9c > .fds-checkbox-label-ad9a8b9c,
.fds-checkbox-readonly-ad9a8b9c > .fds-checkbox-input-ad9a8b9c,
.fds-checkbox-readonly-ad9a8b9c > .fds-checkbox-input-ad9a8b9c::before {
cursor: default;
}

.fds-checkbox-input-ad9a8b9c:focus-visible {
outline-offset: 0;
outline: var(--fds-checkbox-focus-border-width) solid var(--fds-semantic-border-focus-outline);
box-shadow: inset 0 0 0 var(--fds-checkbox-focus-border-width) var(--fds-semantic-border-focus-boxshadow);
}

.fds-checkbox-input-ad9a8b9c:checked {
--fds-checkbox-border-color: var(--fds-semantic-border-input-hover);

background: var(--fds-checkbox-border-color);
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 23 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.5509 6.32414C18.9414 6.71467 18.9414 7.34783 18.5509 7.73836L10.5821 15.7071C10.1916 16.0976 9.55842 16.0976 9.16789 15.7071L4.94914 11.4884C4.55862 11.0978 4.55862 10.4647 4.94914 10.0741C5.33967 9.68362 5.97283 9.68362 6.36336 10.0741L9.875 13.5858L17.1366 6.32414C17.5272 5.93362 18.1603 5.93362 18.5509 6.32414Z' fill='white'/%3E%3C/svg%3E%0A");
}

.fds-checkbox-input-ad9a8b9c:indeterminate {
--fds-checkbox-border-color: var(--fds-semantic-border-input-hover);

background-color: var(--fds-checkbox-border-color);
background-repeat: no-repeat;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 23 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.25 11.25C4.25 10.4216 4.92157 9.75 5.75 9.75H16.75C17.5784 9.75 18.25 10.4216 18.25 11.25C18.25 12.0784 17.5784 12.75 16.75 12.75H5.75C4.92157 12.75 4.25 12.0784 4.25 11.25Z' fill='white' /%3E%3C/svg%3E%0A");
}

.fds-checkbox-readonly-ad9a8b9c > .fds-checkbox-input-ad9a8b9c {
--fds-checkbox-border-color: var(--fds-semantic-border-neutral-subtle);
--fds-checkbox-background: var(--fds-semantic-surface-neutral-subtle);
}

.fds-checkbox-input-ad9a8b9c:checked:not(:focus-visible) {
box-shadow: inset 0 0 0 2px var(--fds-checkbox-border-color);
}

.fds-checkbox-readonly-ad9a8b9c > .fds-checkbox-input-ad9a8b9c:checked {
background: var(--fds-checkbox-background);
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 23 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.5509 6.32414C18.9414 6.71467 18.9414 7.34783 18.5509 7.73836L10.5821 15.7071C10.1916 16.0976 9.55842 16.0976 9.16789 15.7071L4.94914 11.4884C4.55862 11.0978 4.55862 10.4647 4.94914 10.0741C5.33967 9.68362 5.97283 9.68362 6.36336 10.0741L9.875 13.5858L17.1366 6.32414C17.5272 5.93362 18.1603 5.93362 18.5509 6.32414Z' fill='%2368707c'/%3E%3C/svg%3E%0A");
}

.fds-checkbox-readonly-ad9a8b9c > .fds-checkbox-input-ad9a8b9c:indeterminate {
background: var(--fds-checkbox-background);
background-repeat: no-repeat;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 23 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.25 11.25C4.25 10.4216 4.92157 9.75 5.75 9.75H16.75C17.5784 9.75 18.25 10.4216 18.25 11.25C18.25 12.0784 17.5784 12.75 16.75 12.75H5.75C4.92157 12.75 4.25 12.0784 4.25 11.25Z' fill='%2368707c' /%3E%3C/svg%3E%0A");
}

.fds-checkbox-error-ad9a8b9c > .fds-checkbox-input-ad9a8b9c:not(:disabled, :focus-visible) {
--fds-checkbox-border-color: var(--fds-semantic-border-danger-default);
}

/* Only use hover for non-touch devices to prevent sticky-hovering
"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 {
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);
}

.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);
}

.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);
}
}

/** Sizing */

.fds-checkbox-small-ad9a8b9c {
--fds-checkbox-size: var(--fds-sizing-5);

min-height: var(--fds-sizing-10);
}

.fds-checkbox-medium-ad9a8b9c {
--fds-checkbox-size: var(--fds-sizing-6);

min-height: var(--fds-sizing-11);
}

.fds-checkbox-large-ad9a8b9c {
--fds-checkbox-size: var(--fds-sizing-7);

min-height: var(--fds-sizing-12);
}
}

@layer fds.fieldset {
.fds-fieldset-fieldset-2b3c05fc {
margin: 0;
Expand Down
Loading

0 comments on commit 1df0359

Please sign in to comment.