@gov-design-system-ce/components 0.0.25 → 0.0.27

package/dist/collection/components/gov-form/select/gov-form-select.css

@@ -0,0 +1,473 @@
+/* stylelint-disable */
+/* stylelint-enable */
+/* stylelint-disable */
+/* stylelint-enable */
+/* stylelint-disable */
+/* stylelint-enable */
+/* stylelint-disable */
+/* stylelint-enable */
+/* [Core] - Buttons
+------------------------------------------------------------------ */
+/*
+ * Gets color from theme-colors or from palette-colors
+ */
+/*
+ * Converts hex value to rgb colors value
+ */
+/* stylelint-disable order/order */
+/* stylelint-enable order/order */
+/*
+ * Generates list of utility classes for margin, padding
+ *
+ * Make sure $list of definitions is sorted so that last item is defined last
+ * So largest views are mentioned last.
+ */
+/*
+ -  Variables - Sizes
+ */
+/* "Constants" for general usage */
+/*
+ -  Variables - Layout
+ */
+/**
+* Utilities - Offset
+*/
+/* stylelint-disable order/order */
+/* stylelint-enable order/order */
+/* stylelint-disable order/order */
+/* stylelint-enable order/order */
+/* stylelint-disable order/order */
+/* stylelint-enable order/order */
+/**
+* Generates CSS3 var with default value
+*/
+/*
+ -  Variables - General
+ */
+/*
+ -  Variables - Typography
+ */
+/*
+ -  Variables - Variants
+ */
+/*
+ -  Variables - Container
+ */
+/*
+ -  Variables - Sizes
+ */
+/* "Constants" for general usage */
+/*
+ -  Variables - Accordion
+ */
+/*
+ -  Variables - Attachments
+ */
+/*
+ -  Variables - Alert
+ */
+/*
+ -  Variables - Backdrop
+ */
+/*
+ -  Variables - Buttons (&& Badges)
+ */
+/*
+ -  Variables - Breadcrumbs
+ */
+/*
+ -  Variables - Classes
+ */
+/*
+ -  Variables - Colors
+ */
+/*
+ -  Variables - Cookiebar
+ */
+/*
+ -  Variables - Card
+ */
+/*
+ -  Variables - Message
+ */
+/*
+ -  Variables - Empty
+ */
+/*
+ -  Variables - Error code
+ */
+/*
+ -  Variables - Grid
+ */
+/*
+ -  Variables - Tiles
+ */
+/*
+ -  Variables - Modal & Prompt
+ */
+/**
+* Utilities - Offset
+*/
+/*
+ -  Variables - shadows
+ */
+/* "Constants" for general usage */
+/*
+ -  Variables - Statsbar
+ */
+/*
+ -  Variables - Tabs
+ */
+/*
+ -  Variables - Tooltip
+ */
+/*
+ -  Variables - Loading
+ */
+/*
+ -	Variables - Forms
+ */
+/*
+ -  Variables - Form Autocomplete
+ */
+/*
+ -  Variables - Form Message
+ */
+/*
+ -	Variables - Form label
+ */
+/*
+ -	Variables - Form switch
+ */
+/*
+ -	Variables - Form select
+ */
+/*
+ -	Variables - Form input
+ */
+/*
+ -	Variables - Form multiselect
+ */
+/*
+ -	Variables - Form password power
+ */
+/*
+ -	Variables - Form checkbox & radio
+ */
+/*
+ -  Variables - Form group
+ */
+/*
+ -	Variables - Form file
+ */
+/*
+ -  Variables - Toast Message
+ */
+/*
+ -  Variables - Wizzard
+ */
+/*
+ -  Variables - Stepper
+ */
+/*
+ -  Variables - Side nav
+ */
+/*
+ -  Variables - Grid & Tile
+ */
+/*
+ -  Variables - Pagination
+ */
+/*
+ -  Variables - Nav
+ */
+/*
+ -  Variables - Layout
+ */
+.gov-spin-animation,
+.gov-pseudo-spin-animation::before {
+  animation: spin 4s linear infinite;
+}
+
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes countdown {
+  to {
+    transform: scaleX(0);
+  }
+}
+@keyframes progress {
+  0% {
+    background-position: -200px 0;
+  }
+  100% {
+    background-position: calc(200px + 100%) 0;
+  }
+}
+@keyframes pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+/*
+*   Select
+*/
+/*
+ *   Select & Multiselect Shared Definitions
+ */
+/*
+ *   Input & Textarea & Select Shared Definitions
+ */
+.gov-form-select {
+  position: relative;
+  display: flex;
+  width: 100%;
+  align-items: center;
+}
+.gov-form-select .element {
+  position: relative;
+  display: flex;
+  flex: 1 1 auto;
+}
+.gov-form-select input,
+.gov-form-select select,
+.gov-form-select textarea {
+  width: 100%;
+  border: var(--gov-form-input-border-width, 0.0625rem solid var(--gov-color-secondary-700));
+  border-radius: var(--gov-border-radius, 0.1875rem);
+  background-color: var(--gov-form-bg-color, var(--gov-color-neutral-white));
+  color: var(--gov-form-input-color, var(--gov-color-secondary-700));
+  font-family: var(--gov-font-family, "Roboto", sans-serif);
+}
+.gov-form-select input:focus,
+.gov-form-select select:focus,
+.gov-form-select textarea:focus {
+  outline: none;
+}
+.gov-form-select input:focus-visible,
+.gov-form-select select:focus-visible,
+.gov-form-select textarea:focus-visible {
+  border-radius: var(--gov-border-radius, 0.1875rem);
+  outline: var(--gov-outline-width, 0.125rem) solid var(--gov-color-focus-base);
+  outline-offset: 0;
+}
+.gov-form-select input::-moz-placeholder, .gov-form-select select::-moz-placeholder, .gov-form-select textarea::-moz-placeholder {
+  color: var(--gov-form-placeholder-color, var(--gov-color-secondary-600));
+}
+.gov-form-select input::placeholder,
+.gov-form-select select::placeholder,
+.gov-form-select textarea::placeholder {
+  color: var(--gov-form-placeholder-color, var(--gov-color-secondary-600));
+}
+.gov-form-select textarea {
+  font-weight: var(--gov-text-m-font-weight);
+  font-size: var(--gov-text-m-font-size);
+  line-height: var(--gov-text-m-line-height);
+  letter-spacing: var(--gov-text-m-letter-spacing);
+  padding: 0.5rem 0.75rem;
+  resize: none;
+}
+.gov-form-select *[slot=left-icon],
+.gov-form-select *[slot=right-icon] {
+  position: absolute;
+  top: 50%;
+  display: flex;
+  justify-content: center;
+  color: var(--gov-form-input-icon-color, var(--gov-color-primary));
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+.gov-form-select *[slot=left-icon] {
+  left: 0;
+}
+.gov-form-select *[slot=right-icon] {
+  right: 0;
+}
+[disabled=""].gov-form-select, [disabled=true i].gov-form-select, [disabled="1"].gov-form-select {
+  pointer-events: none;
+}
+[disabled=""].gov-form-select input,
+[disabled=""].gov-form-select select,
+[disabled=""].gov-form-select textarea, [disabled=true i].gov-form-select input,
+[disabled=true i].gov-form-select select,
+[disabled=true i].gov-form-select textarea, [disabled="1"].gov-form-select input,
+[disabled="1"].gov-form-select select,
+[disabled="1"].gov-form-select textarea {
+  border-color: var(--gov-form-state-color-disabled, var(--gov-color-secondary-600));
+  background: var(--gov-form-input-disabled-bg, var(--gov-color-secondary-300));
+  color: var(--gov-form-state-color-disabled, var(--gov-color-secondary-600));
+}
+[disabled=""].gov-form-select *[slot=left-icon],
+[disabled=""].gov-form-select *[slot=right-icon], [disabled=true i].gov-form-select *[slot=left-icon],
+[disabled=true i].gov-form-select *[slot=right-icon], [disabled="1"].gov-form-select *[slot=left-icon],
+[disabled="1"].gov-form-select *[slot=right-icon] {
+  color: var(--gov-form-state-color-disabled, var(--gov-color-secondary-600));
+}
+[invalid=""].gov-form-select input,
+[invalid=""].gov-form-select select,
+[invalid=""].gov-form-select textarea, [invalid=true i].gov-form-select input,
+[invalid=true i].gov-form-select select,
+[invalid=true i].gov-form-select textarea, [invalid="1"].gov-form-select input,
+[invalid="1"].gov-form-select select,
+[invalid="1"].gov-form-select textarea {
+  border-color: var(--gov-form-state-color-error, var(--gov-color-error));
+  color: var(--gov-form-state-color-error, var(--gov-color-error));
+}
+[invalid=""].gov-form-select input::-moz-placeholder, [invalid=""].gov-form-select select::-moz-placeholder, [invalid=""].gov-form-select textarea::-moz-placeholder, [invalid=true i].gov-form-select input::-moz-placeholder, [invalid=true i].gov-form-select select::-moz-placeholder, [invalid=true i].gov-form-select textarea::-moz-placeholder, [invalid="1"].gov-form-select input::-moz-placeholder, [invalid="1"].gov-form-select select::-moz-placeholder, [invalid="1"].gov-form-select textarea::-moz-placeholder {
+  color: var(--gov-form-state-color-error, var(--gov-color-error-300));
+}
+[invalid=""].gov-form-select input::placeholder,
+[invalid=""].gov-form-select select::placeholder,
+[invalid=""].gov-form-select textarea::placeholder, [invalid=true i].gov-form-select input::placeholder,
+[invalid=true i].gov-form-select select::placeholder,
+[invalid=true i].gov-form-select textarea::placeholder, [invalid="1"].gov-form-select input::placeholder,
+[invalid="1"].gov-form-select select::placeholder,
+[invalid="1"].gov-form-select textarea::placeholder {
+  color: var(--gov-form-state-color-error, var(--gov-color-error-300));
+}
+[invalid=""].gov-form-select *[slot=left-icon],
+[invalid=""].gov-form-select *[slot=right-icon], [invalid=true i].gov-form-select *[slot=left-icon],
+[invalid=true i].gov-form-select *[slot=right-icon], [invalid="1"].gov-form-select *[slot=left-icon],
+[invalid="1"].gov-form-select *[slot=right-icon] {
+  color: var(--gov-form-state-color-error, var(--gov-color-error));
+}
+[success=""].gov-form-select *[slot=right-icon], [success=true i].gov-form-select *[slot=right-icon], [success="1"].gov-form-select *[slot=right-icon] {
+  color: var(--gov-form-state-color-success, var(--gov-color-success));
+}
+[success=""].gov-form-select *[slot=right-icon]:not(.icon-validation):not(.icon-arrow), [success=true i].gov-form-select *[slot=right-icon]:not(.icon-validation):not(.icon-arrow), [success="1"].gov-form-select *[slot=right-icon]:not(.icon-validation):not(.icon-arrow) {
+  display: none;
+}
+[size=m].gov-form-select {
+  font-weight: var(--gov-text-m-font-weight);
+  font-size: var(--gov-text-m-font-size);
+  line-height: var(--gov-text-m-line-height);
+  letter-spacing: var(--gov-text-m-letter-spacing);
+  gap: 0.5rem var(--gov-form-input-core-m-icon-size, 1rem);
+}
+[size=m].gov-form-select input,
+[size=m].gov-form-select select {
+  font-weight: var(--gov-text-m-font-weight);
+  font-size: var(--gov-text-m-font-size);
+  line-height: var(--gov-text-m-line-height);
+  letter-spacing: var(--gov-text-m-letter-spacing);
+  height: var(--gov-form-input-core-m-height, 2.5rem);
+  padding: var(--gov-form-input-core-m-padding, 0.4375rem 0.75rem);
+}
+[size=m].gov-form-select *[slot=left-icon],
+[size=m].gov-form-select *[slot=right-icon] {
+  width: var(--gov-form-input-core-m-icon-size, 1rem);
+  height: var(--gov-form-input-core-m-icon-size, 1rem);
+}
+[size=m].gov-form-select *[slot=left-icon] {
+  left: calc((var(--gov-form-input-core-m-icon-padding, 2.5rem) - var(--gov-form-input-core-m-icon-size, 1rem)) / 2);
+}
+[size=m].gov-form-select *[slot=left-icon] ~ input {
+  padding-left: var(--gov-form-input-core-m-icon-padding, 2.5rem);
+}
+[size=m].gov-form-select *[slot=right-icon] {
+  right: calc((var(--gov-form-input-core-m-icon-padding, 2.5rem) - var(--gov-form-input-core-m-icon-size, 1rem)) / 2);
+}
+[size=m].gov-form-select *[slot=right-icon] ~ input, [size=m].gov-form-select *[slot=right-icon] ~ select {
+  padding-right: var(--gov-form-input-core-m-icon-padding, 2.5rem);
+}
+[size=l].gov-form-select {
+  font-weight: var(--gov-text-m-font-weight);
+  font-size: var(--gov-text-m-font-size);
+  line-height: var(--gov-text-m-line-height);
+  letter-spacing: var(--gov-text-m-letter-spacing);
+  gap: 0.5rem var(--gov-form-input-core-l-icon-size, 1rem);
+}
+[size=l].gov-form-select input,
+[size=l].gov-form-select select {
+  font-weight: var(--gov-text-m-font-weight);
+  font-size: var(--gov-text-m-font-size);
+  line-height: var(--gov-text-m-line-height);
+  letter-spacing: var(--gov-text-m-letter-spacing);
+  height: var(--gov-form-input-core-l-height, 3rem);
+  padding: var(--gov-form-input-core-l-padding, 0.6875rem 0.75rem);
+}
+[size=l].gov-form-select *[slot=left-icon],
+[size=l].gov-form-select *[slot=right-icon] {
+  width: var(--gov-form-input-core-l-icon-size, 1rem);
+  height: var(--gov-form-input-core-l-icon-size, 1rem);
+}
+[size=l].gov-form-select *[slot=left-icon] {
+  left: calc((var(--gov-form-input-core-l-icon-padding, 2.5rem) - var(--gov-form-input-core-l-icon-size, 1rem)) / 2);
+}
+[size=l].gov-form-select *[slot=left-icon] ~ input {
+  padding-left: var(--gov-form-input-core-l-icon-padding, 2.5rem);
+}
+[size=l].gov-form-select *[slot=right-icon] {
+  right: calc((var(--gov-form-input-core-l-icon-padding, 2.5rem) - var(--gov-form-input-core-l-icon-size, 1rem)) / 2);
+}
+[size=l].gov-form-select *[slot=right-icon] ~ input, [size=l].gov-form-select *[slot=right-icon] ~ select {
+  padding-right: var(--gov-form-input-core-l-icon-padding, 2.5rem);
+}
+[size=xl].gov-form-select {
+  font-weight: var(--gov-text-l-font-weight);
+  font-size: var(--gov-text-l-font-size);
+  line-height: var(--gov-text-l-line-height);
+  letter-spacing: var(--gov-text-l-letter-spacing);
+  gap: 0.5rem var(--gov-form-input-core-xl-icon-size, 1.25rem);
+}
+[size=xl].gov-form-select input,
+[size=xl].gov-form-select select {
+  font-weight: var(--gov-text-l-font-weight);
+  font-size: var(--gov-text-l-font-size);
+  line-height: var(--gov-text-l-line-height);
+  letter-spacing: var(--gov-text-l-letter-spacing);
+  height: var(--gov-form-input-core-xl-height, 3.5rem);
+  padding: var(--gov-form-input-core-xl-padding, 0.9375rem 1rem 0.875rem);
+}
+[size=xl].gov-form-select *[slot=left-icon],
+[size=xl].gov-form-select *[slot=right-icon] {
+  width: var(--gov-form-input-core-xl-icon-size, 1.25rem);
+  height: var(--gov-form-input-core-xl-icon-size, 1.25rem);
+}
+[size=xl].gov-form-select *[slot=left-icon] {
+  left: calc((var(--gov-form-input-core-xl-icon-padding, 3rem) - var(--gov-form-input-core-xl-icon-size, 1.25rem)) / 2);
+}
+[size=xl].gov-form-select *[slot=left-icon] ~ input {
+  padding-left: var(--gov-form-input-core-xl-icon-padding, 3rem);
+}
+[size=xl].gov-form-select *[slot=right-icon] {
+  right: calc((var(--gov-form-input-core-xl-icon-padding, 3rem) - var(--gov-form-input-core-xl-icon-size, 1.25rem)) / 2);
+}
+[size=xl].gov-form-select *[slot=right-icon] ~ input, [size=xl].gov-form-select *[slot=right-icon] ~ select {
+  padding-right: var(--gov-form-input-core-xl-icon-padding, 3rem);
+}
+
+.gov-form-select {
+  background: none;
+}
+.gov-form-select select {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+.gov-form-select select::-ms-expand {
+  display: none;
+}
+[size=m].gov-form-select *[slot=right-icon] {
+  right: var(--gov-form-select-m-arrow-right-position, 1rem);
+  width: var(--gov-form-select-m-arrow-size, 0.5rem);
+  height: var(--gov-form-select-m-arrow-size, 0.5rem);
+}
+[size=l].gov-form-select *[slot=right-icon] {
+  right: var(--gov-form-select-l-arrow-right-position, 1rem);
+  width: var(--gov-form-select-l-arrow-size, 0.5rem);
+  height: var(--gov-form-select-l-arrow-size, 0.5rem);
+}
+[size=xl].gov-form-select *[slot=right-icon] {
+  right: var(--gov-form-select-xl-arrow-right-position, 1.3125rem);
+  width: var(--gov-form-select-xl-arrow-size, 0.625rem);
+  height: var(--gov-form-select-xl-arrow-size, 0.625rem);
+}