Skip to content

Commit

Permalink
built css
Browse files Browse the repository at this point in the history
  • Loading branch information
@mimarz
mimarz committed Apr 29, 2024
1 parent b9c1a3c commit f3a178e
Showing 1 changed file with 0 additions and 170 deletions.
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

0 comments on commit f3a178e

Please sign in to comment.