@uqds/form 0.0.7-alpha.0 → 0.0.12-alpha.0

package/src/scss/_component.scss

@@ -1,505 +1,528 @@
-@use '@uqds/core/src/scss/global' as core;
-@use '@uqds/icon/src/scss/global' as icon;
-@use 'global' as *;
-@use 'icons' as *;
-
-$use-encapsulation: false !default;
-
-@mixin form-styles {
-  form,
-  fieldset,
-  legend,
-  label,
-  input,
-  select,
-  textarea,
-  .uq-error-summary,
-  .uq-error-message,
-  .uq-success-message,
-  .uq-inline-help  {
-    box-sizing: border-box;
-    font-family: core.$font-body;
-  }
-
-  fieldset,
-  legend,
-  label,
-  input,
-  select,
-  textarea {
-    &::before, &::after,
-    *, *::before, *::after {
-      box-sizing: border-box;
-    }
-  }
-
-  fieldset {
-    border: 0;
-    padding: 0;
-    margin: 0;
-  }
-
-  label,
-  legend {
-    color: $form-text-color;
-    display: block;
-    font-size: $form-label-size;
-    font-weight: core.$font-weight-bold;
-  }
-
-  legend {
-    margin-bottom: $form-spacing;
-    line-height: core.$line-height-h;
-    padding: 0;
-
-    &.uq-legend--error {
-      color: $form-color-error;
-    }
-
-    .uq-legend__required {
-      color: $form-color-error;
-    }
-  }
-  
-  label {
-    cursor: pointer;
-    line-height: core.$line-height-ui;
-
-    &.uq-label {
-      &--inline {
-        align-items: center;
-        display: inline-flex;
-        font-size: core.$font-size;
-        line-height: core.$line-height;
-        margin-bottom: core.$space-m;
-  
-        input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
-        select,
-        textarea,
-        + input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
-        + select,
-        + textarea {
-          max-width: none;
-          min-width: 200px;
-          margin-left: core.$space;
-          margin-right: core.$space-m;
-          width: auto;
-        }
-
-        input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
-        select,
-        textarea {
-          margin-top: 0;
-          margin-bottom: core.$space-none;
-        }
-      }
-
-      &--disabled,
-      &--readonly {
-        color: $form-text-disabled-color;
-      }
-
-      &--disabled {
-        cursor: not-allowed;
-      }
-
-      &--error {
-        color: $form-color-error;
-      }
-
-      &--success {
-        color: $form-color-success;
-      }
-    }
-
-    input:not([type="checkbox"]):not([type="radio"]),
-    select,
-    textarea,
-    + input:not([type="checkbox"]):not([type="radio"]),
-    + select,
-    + textarea {
-      margin-top: core.$space-s;
-    }
-
-    input[type="radio"],
-    input[type="checkbox"] {
-      + *:not(input):not(select):not(textarea) {
-        display: inline-block;
-        font-size: core.$font-size;
-        font-weight: core.$font-weight-normal;
-        line-height: $form-checkbox-size;
-        margin-bottom: core.$space;
-        margin-left: core.$space-s;
-        margin-right: $form-spacing;
-        padding-top: core.$space-xs;
-        padding-left: core.$space-m;
-        vertical-align: top;
-      }
-
-      &[disabled] {
-        + *:not(input):not(select):not(textarea) {
-          color: $form-text-disabled-color;
-        }
-      }
-    }
-
-    .uq-label__required {
-      color: $form-color-error;
-    }
-  }
-
-  input,
-  select,
-  textarea {
-    &[disabled] {
-      cursor: not-allowed;
-    }
-  }
-
-  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
-  select,
-  textarea {
-    background-color: core.$uq-white;
-    max-width: 100%;
-    min-width: 100%;
-    padding: ($form-spacing - core.$space-xs) $form-spacing;
-    border: $form-border-width solid $form-border-color;
-    border-radius: $form-border-radius;
-    font-size: $form-text-size;
-    color: $form-text-color;
-    line-height: core.$line-height-ui;
-    margin-bottom: core.$space-m;
-
-    &:focus {
-      border-color: $form-border-color-focus;
-      box-shadow: 0 0 0 1px $form-border-color-focus inset;
-      outline: none;
-    }
-
-    &[disabled] {
-      color: $form-placeholder-color;
-    }
-
-    &[readonly] {
-      &:focus {
-        border-color: $form-border-color;
-        box-shadow: 0 0 0 1px $form-border-color inset;
-      }
-    }
-
-    &::placeholder {
-      color: $form-placeholder-color;
-    }
-
-    &.uq-input--error,
-    &.uq-input--success {
-      border-radius: $form-border-radius;
-
-      &:focus {
-        border-color: $form-border-color-focus;
-        box-shadow: 0 2px 0 0 $form-border-color-focus,
-                    0 0 0 1px $form-border-color-focus inset;
-      }
-    }
-
-    &.uq-input--error {
-      border-color: $form-color-error;
-      box-shadow: 0 2px 0 0 $form-color-error;
-    }
-
-    &.uq-input--success {
-      border-color: $form-color-success;
-      box-shadow: 0 2px 0 0 $form-color-success;
-    }
-
-    &.uq-input--large {
-      padding: 1.15625rem core.$space-m;
-      border-radius: core.$space-xs;
-    }
-
-    + .uq-error-message,
-    + .uq-success-message {
-      margin-top: -(core.$space-m);
-      border-radius: 0 0 $form-border-radius $form-border-radius;
-    }
-  }
-
-  select {
-    appearance: none;
-    -webkit-appearance: none;
-    background-image: url(icon.get-icon('standard--chevron-down-sml', $form-select-icon));
-    background-repeat: no-repeat;
-    background-position: right core.$space-xs center;
-    padding-right: 2.5rem;
-    cursor: pointer;
-    line-height: 1.2;
-    width: 100%;
-
-    &:focus {
-      background-image: url(icon.get-icon('standard--chevron-down-sml', $form-focus-color));
-    }
-  
-    &[multiple] {
-      height: auto;
-      background-image: none;
-
-      &:focus {
-        background-image: none;
-      }
-    }
-  
-    &[disabled] {
-      background-image: url(icon.get-icon('standard--chevron-down-sml', $form-select-icon-disabled));
-    }
-  }
-
-  textarea {
-    height: 4 * $form-element-height;
-  }
-
-  input[type="radio"],
-  input[type="checkbox"] {
-    appearance: none;
-    -webkit-appearance: none;
-    display: inline-block;
-    border: $form-checkbox-border-width solid $form-border-color;
-    cursor: pointer;
-    height: $form-checkbox-size;
-    width: $form-checkbox-size;
-    vertical-align: top;
-    position: absolute;
-
-    &:focus {
-      border-color: $form-focus-color;
-      box-shadow: 0 0 0 1px $form-focus-color;
-      outline: none;
-    }
-
-    + label {
-      display: inline-block;
-      font-size: core.$font-size;
-      font-weight: core.$font-weight-normal;
-      line-height: core.$line-height-h;
-      margin-bottom: core.$space;
-      margin-left: core.$space-s;
-      margin-right: $form-spacing;
-      padding-top: core.$space-compressed-xs;
-      padding-left: core.$space-m;
-      vertical-align: top;
-    }
-
-    &:checked {
-      border-color: core.$link;
-
-      &:focus {
-        border-color: $form-focus-color;
-        box-shadow: 0 0 0 1px $form-focus-color;
-      }
-    }
-
-    &.uq-input--error {
-      border-color: $form-color-error;
-
-      &:focus {
-        border-color: $form-focus-color;
-        box-shadow: 0 0 0 1px $form-focus-color;
-      }
-
-      &:checked {
-        border-color: $form-color-error;
-
-        &:focus {
-          border-color: $form-focus-color;
-          box-shadow: 0 0 0 1px $form-focus-color;
-        }
-      }
-    }
-
-    &[disabled] {
-      cursor: not-allowed;
-      border-color: $form-border-color;
-      background-color: core.$uq-neutral-light80;
-
-      + label {
-        color: $form-text-disabled-color;
-      }
-
-      &:checked {
-        background-color: core.$uq-neutral-light20;
-      }
-    }
-  }
-  
-  input[type="checkbox"] {
-    border-radius: $form-checkbox-border-radius;
-
-    &::after {
-      content: "";
-      display: block;
-      position: absolute;
-      background-repeat: no-repeat;
-      background-position: center center;
-      top: 1px;
-      left: 1px;
-      height: $form-checkbox-check-size;
-      width: $form-checkbox-check-size;
-    }
-
-    &:checked {
-      background-color: core.$link;
-
-      &::after {
-        background-image: url(icon.get-icon('standard--check', $form-checkbox-check-color));
-        padding: 0px;
-      }
-    }
-
-    &.uq-input--error {
-      &:checked {
-        background-color: $form-color-error;
-      }
-    }
-  }
-  
-  input[type="radio"] {
-    border-radius: 50%;
-  
-    &:checked {
-      border-width: 2px;
-
-      &::after {
-        border-radius: 50%;
-        background-color: core.$link;
-        content: "";
-        display: block;
-        position: absolute;
-        top: 3px;
-        left: 3px;
-        height: $form-checkbox-size - 10px;
-        width: $form-checkbox-size - 10px;
-      }
-    }
-
-    &[disabled] {
-      &:checked {
-        background-color: core.$uq-neutral-light80;
-        &::after {
-          background-color: core.$uq-neutral-light20;
-        }
-      }
-    }
-
-    &.uq-input--error {
-      &:checked {
-        border-color: $form-color-error;
-
-        &::after {
-          background-color: $form-color-error;
-        }
-      }
-    }
-  }
-
-  [type="submit"] {
-    appearance: none;
-  }
-
-  .uq-error-summary {
-    background-color: lighten(core.$alert-light, 10%);
-    border: 1px solid core.$alert;
-    border-left-width: core.$space-xs;
-    padding: core.$space;
-    margin-bottom: core.$space-m;
-  
-    &__title {
-      color: core.$text;
-      font-size: core.$font-size-m;
-      font-weight: core.$font-weight-bold;
-      line-height: core.$line-height-h;
-      margin: core.$space-none core.$space-none core.$space core.$space-none;
-    }
-  
-    &_body {
-      color: core.$text;
-      font-size: core.$space;
-    }
-    
-    &__list {
-      color: core.$text;
-      font-size: core.$space;
-      margin: core.$space-none;
-  
-      &__item {
-        margin-bottom: core.$space-xs;
-        line-height: core.$line-height;
-      }
-  
-      a {
-        color: core.$alert;
-        text-decoration: underline;
-        font-weight: core.$font-weight-normal;
-        &:hover, &:focus {
-          color: darken(core.$alert, 5%);
-        }
-      }
-    }
-  }
-
-  .uq-error-message,
-  .uq-success-message {
-    color: core.$uq-white;
-    display: block;
-    font-size: core.$font-size;
-    font-style: normal;
-    font-weight: core.$font-weight-normal;
-    line-height: core.$line-height;
-    margin-bottom: core.$space-m;
-    padding: calc(#{core.$space-s} - 1px) core.$space core.$space-s core.$space-xxl;
-    position: relative;
-
-    &::before {
-      content: '';
-      display: block;
-      background-position: center;
-      background-repeat: no-repeat;
-      background-size: contain;
-      height: core.$space-compressed-xl;
-      left: core.$space;
-      margin-right: core.$space-s;
-      margin-top: calc(#{-(core.$space-compressed-xl) * 0.5} - 1px);
-      position: absolute;
-      top: 50%;
-      width: core.$space-compressed-xl;
-    }
-  }
-
-  .uq-error-message {
-    background-color: $form-color-error;
-
-    &::before {
-      background-image: url(icon.get-icon('standard--alert-triangle', core.$uq-white));
-    }
-  }
-
-  .uq-success-message {
-    background-color: $form-color-success;
-
-    &::before {
-      background-image: url(icon.get-icon('standard--success-circle', core.$uq-white));
-    }
-  }
-
-  .uq-inline-help {
-    display: block;
-    font-size: $form-description-size;
-    margin: 0 0 $form-spacing;
-  }
-}
-
-@if $use-encapsulation {
-  .uq {
-    @include form-styles;
-  }
-} @else {
-  @include form-styles;
-}
+@use "@uqds/core/src/scss/global" as core;
+@use "@uqds/icon/src/scss/global" as icon;
+@use "global" as *;
+@use "icons" as *;
+
+$use-encapsulation: false !default;
+
+@mixin form-styles {
+  form,
+  fieldset,
+  legend,
+  label,
+  input,
+  select,
+  textarea,
+  .uq-error-summary,
+  .uq-error-message,
+  .uq-success-message,
+  .uq-inline-help {
+    box-sizing: border-box;
+    font-family: core.$font-body;
+  }
+
+  fieldset,
+  legend,
+  label,
+  input,
+  select,
+  textarea {
+    &::before,
+    &::after,
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+  }
+
+  fieldset {
+    border: 0;
+    padding: 0;
+    margin: 0;
+  }
+
+  label,
+  legend {
+    color: $form-text-color;
+    display: block;
+    font-size: $form-label-size;
+    font-weight: core.$font-weight-bold;
+  }
+
+  legend {
+    margin-bottom: $form-spacing;
+    line-height: core.$line-height-h;
+    padding: 0;
+
+    &.uq-legend--error {
+      color: $form-color-error;
+    }
+
+    .uq-legend__required {
+      color: $form-color-error;
+    }
+  }
+
+  label {
+    cursor: pointer;
+    line-height: core.$line-height-ui;
+
+    &.uq-label {
+      &--inline {
+        align-items: center;
+        display: inline-flex;
+        font-size: core.$font-size;
+        line-height: core.$line-height;
+        margin-bottom: core.$space-m;
+
+        input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
+        select,
+        textarea,
+        + input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
+        + select,
+        + textarea {
+          max-width: none;
+          min-width: 200px;
+          margin-left: core.$space;
+          margin-right: core.$space-m;
+          width: auto;
+        }
+
+        input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
+        select,
+        textarea {
+          margin-top: 0;
+          margin-bottom: core.$space-none;
+        }
+      }
+
+      &--disabled,
+      &--readonly {
+        color: $form-text-disabled-color;
+      }
+
+      &--disabled {
+        cursor: not-allowed;
+      }
+
+      &--error {
+        color: $form-color-error;
+      }
+
+      &--success {
+        color: $form-color-success;
+      }
+    }
+
+    input:not([type="checkbox"]):not([type="radio"]),
+    select,
+    textarea,
+    + input:not([type="checkbox"]):not([type="radio"]),
+    + select,
+    + textarea {
+      margin-top: core.$space-s;
+    }
+
+    input[type="radio"],
+    input[type="checkbox"] {
+      + *:not(input):not(select):not(textarea) {
+        display: inline-block;
+        font-size: core.$font-size;
+        font-weight: core.$font-weight-normal;
+        line-height: $form-checkbox-size;
+        margin-bottom: core.$space;
+        margin-left: core.$space-s;
+        margin-right: $form-spacing;
+        padding-top: core.$space-xs;
+        padding-left: core.$space-m;
+        vertical-align: top;
+      }
+
+      &[disabled] {
+        + *:not(input):not(select):not(textarea) {
+          color: $form-text-disabled-color;
+        }
+      }
+    }
+
+    .uq-label__required {
+      color: $form-color-error;
+    }
+  }
+
+  input,
+  select,
+  textarea {
+    &[disabled] {
+      cursor: not-allowed;
+    }
+  }
+
+  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
+  select,
+  textarea {
+    background-color: core.$uq-white;
+    max-width: 100%;
+    min-width: 100%;
+    padding: ($form-spacing - core.$space-xs) $form-spacing;
+    border: $form-border-width solid $form-border-color;
+    border-radius: $form-border-radius;
+    font-size: $form-text-size;
+    color: $form-text-color;
+    line-height: core.$line-height-ui;
+    margin-bottom: core.$space-m;
+
+    &:focus {
+      border-color: $form-border-color-focus;
+      box-shadow: 0 0 0 1px $form-border-color-focus inset;
+      outline: none;
+    }
+
+    &[disabled] {
+      color: $form-placeholder-color;
+    }
+
+    &[readonly] {
+      &:focus {
+        border-color: $form-border-color;
+        box-shadow: 0 0 0 1px $form-border-color inset;
+      }
+    }
+
+    &::placeholder {
+      color: $form-placeholder-color;
+    }
+
+    &.uq-input--error,
+    &.uq-input--success {
+      border-radius: $form-border-radius;
+
+      &:focus {
+        border-color: $form-border-color-focus;
+        box-shadow: 0 2px 0 0 $form-border-color-focus,
+          0 0 0 1px $form-border-color-focus inset;
+      }
+    }
+
+    &.uq-input--error {
+      border-color: $form-color-error;
+      box-shadow: 0 2px 0 0 $form-color-error;
+    }
+
+    &.uq-input--success {
+      border-color: $form-color-success;
+      box-shadow: 0 2px 0 0 $form-color-success;
+    }
+
+    &.uq-input--large {
+      padding: 1.15625rem core.$space-m;
+      border-radius: core.$space-xs;
+    }
+
+    + .uq-error-message,
+    + .uq-success-message {
+      margin-top: -(core.$space-m);
+      border-radius: 0 0 $form-border-radius $form-border-radius;
+    }
+  }
+
+  select {
+    appearance: none;
+    -webkit-appearance: none;
+    background-image: url(icon.get-icon(
+      "standard--chevron-down-sml",
+      $form-select-icon
+    ));
+    background-repeat: no-repeat;
+    background-position: right core.$space-xs center;
+    padding-right: 2.5rem;
+    cursor: pointer;
+    line-height: 1.2;
+    width: 100%;
+
+    &:focus {
+      background-image: url(icon.get-icon(
+        "standard--chevron-down-sml",
+        $form-focus-color
+      ));
+    }
+
+    &[multiple] {
+      height: auto;
+      background-image: none;
+
+      &:focus {
+        background-image: none;
+      }
+    }
+
+    &[disabled] {
+      background-image: url(icon.get-icon(
+        "standard--chevron-down-sml",
+        $form-select-icon-disabled
+      ));
+    }
+  }
+
+  textarea {
+    height: 4 * $form-element-height;
+  }
+
+  input[type="radio"],
+  input[type="checkbox"] {
+    appearance: none;
+    -webkit-appearance: none;
+    display: inline-block;
+    border: $form-checkbox-border-width solid $form-border-color;
+    cursor: pointer;
+    height: $form-checkbox-size;
+    width: $form-checkbox-size;
+    vertical-align: top;
+    position: absolute;
+
+    &:focus {
+      border-color: $form-focus-color;
+      box-shadow: 0 0 0 1px $form-focus-color;
+      outline: none;
+    }
+
+    + label {
+      display: inline-block;
+      font-size: core.$font-size;
+      font-weight: core.$font-weight-normal;
+      line-height: core.$line-height-h;
+      margin-bottom: core.$space;
+      margin-left: core.$space-s;
+      margin-right: $form-spacing;
+      padding-top: core.$space-compressed-xs;
+      padding-left: core.$space-m;
+      vertical-align: top;
+    }
+
+    &:checked {
+      border-color: core.$link;
+
+      &:focus {
+        border-color: $form-focus-color;
+        box-shadow: 0 0 0 1px $form-focus-color;
+      }
+    }
+
+    &.uq-input--error {
+      border-color: $form-color-error;
+
+      &:focus {
+        border-color: $form-focus-color;
+        box-shadow: 0 0 0 1px $form-focus-color;
+      }
+
+      &:checked {
+        border-color: $form-color-error;
+
+        &:focus {
+          border-color: $form-focus-color;
+          box-shadow: 0 0 0 1px $form-focus-color;
+        }
+      }
+    }
+
+    &[disabled] {
+      cursor: not-allowed;
+      border-color: $form-border-color;
+      background-color: core.$uq-neutral-light80;
+
+      + label {
+        color: $form-text-disabled-color;
+      }
+
+      &:checked {
+        background-color: core.$uq-neutral-light20;
+      }
+    }
+  }
+
+  input[type="checkbox"] {
+    border-radius: $form-checkbox-border-radius;
+
+    &::after {
+      content: "";
+      display: block;
+      position: absolute;
+      background-repeat: no-repeat;
+      background-position: center center;
+      top: 1px;
+      left: 1px;
+      height: $form-checkbox-check-size;
+      width: $form-checkbox-check-size;
+    }
+
+    &:checked {
+      background-color: core.$link;
+
+      &::after {
+        background-image: url(icon.get-icon(
+          "standard--check",
+          $form-checkbox-check-color
+        ));
+        padding: 0px;
+      }
+    }
+
+    &.uq-input--error {
+      &:checked {
+        background-color: $form-color-error;
+      }
+    }
+  }
+
+  input[type="radio"] {
+    border-radius: 50%;
+
+    &:checked {
+      border-width: 2px;
+
+      &::after {
+        border-radius: 50%;
+        background-color: core.$link;
+        content: "";
+        display: block;
+        position: absolute;
+        top: 3px;
+        left: 3px;
+        height: $form-checkbox-size - 10px;
+        width: $form-checkbox-size - 10px;
+      }
+    }
+
+    &[disabled] {
+      &:checked {
+        background-color: core.$uq-neutral-light80;
+        &::after {
+          background-color: core.$uq-neutral-light20;
+        }
+      }
+    }
+
+    &.uq-input--error {
+      &:checked {
+        border-color: $form-color-error;
+
+        &::after {
+          background-color: $form-color-error;
+        }
+      }
+    }
+  }
+
+  [type="submit"] {
+    appearance: none;
+  }
+
+  .uq-error-summary {
+    background-color: lighten(core.$alert-light, 10%);
+    border: 1px solid core.$alert;
+    border-left-width: core.$space-xs;
+    padding: core.$space;
+    margin-bottom: core.$space-m;
+
+    &__title {
+      color: core.$text;
+      font-size: core.$font-size-m;
+      font-weight: core.$font-weight-bold;
+      line-height: core.$line-height-h;
+      margin: core.$space-none core.$space-none core.$space core.$space-none;
+    }
+
+    &_body {
+      color: core.$text;
+      font-size: core.$space;
+    }
+
+    &__list {
+      color: core.$text;
+      font-size: core.$space;
+      margin: core.$space-none;
+
+      &__item {
+        margin-bottom: core.$space-xs;
+        line-height: core.$line-height;
+      }
+
+      a {
+        color: core.$alert;
+        text-decoration: underline;
+        font-weight: core.$font-weight-normal;
+        &:hover,
+        &:focus {
+          color: darken(core.$alert, 5%);
+        }
+      }
+    }
+  }
+
+  .uq-error-message,
+  .uq-success-message {
+    color: core.$uq-white;
+    display: block;
+    font-size: core.$font-size;
+    font-style: normal;
+    font-weight: core.$font-weight-normal;
+    line-height: core.$line-height;
+    margin-bottom: core.$space-m;
+    padding: calc(#{core.$space-s} - 1px) core.$space core.$space-s
+      core.$space-xxl;
+    position: relative;
+
+    &::before {
+      content: "";
+      display: block;
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: contain;
+      height: core.$space-compressed-xl;
+      left: core.$space;
+      margin-right: core.$space-s;
+      margin-top: calc(#{- (core.$space-compressed-xl) * 0.5} - 1px);
+      position: absolute;
+      top: 50%;
+      width: core.$space-compressed-xl;
+    }
+  }
+
+  .uq-error-message {
+    background-color: $form-color-error;
+
+    &::before {
+      background-image: url(icon.get-icon(
+        "standard--exclamation-triangle",
+        core.$uq-white
+      ));
+    }
+  }
+
+  .uq-success-message {
+    background-color: $form-color-success;
+
+    &::before {
+      background-image: url(icon.get-icon(
+        "standard--check-circle",
+        core.$uq-white
+      ));
+    }
+  }
+
+  .uq-inline-help {
+    display: block;
+    font-size: $form-description-size;
+    margin: 0 0 $form-spacing;
+  }
+}
+
+@if $use-encapsulation {
+  .uq {
+    @include form-styles;
+  }
+} @else {
+  @include form-styles;
+}