From f3a178e9f0645e153c8e84de22c93b5b93b25348 Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Mon, 29 Apr 2024 18:01:54 +0200 Subject: [PATCH] built css --- packages/css/react-css-modules.css | 170 ----------------------------- 1 file changed, 170 deletions(-) diff --git a/packages/css/react-css-modules.css b/packages/css/react-css-modules.css index 7961d0fb92..ad89849ef3 100644 --- a/packages/css/react-css-modules.css +++ b/packages/css/react-css-modules.css @@ -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;