@openedx/paragon 21.7.0 → 22.0.0-alpha.15

package/src/Form/_index.scss

@@ -1,28 +1,24 @@
-@import "variables";
-@import "~bootstrap/scss/forms";
-@import "~bootstrap/scss/input-group";
-@import "~bootstrap/scss/custom-forms";
+@import "bootstrap-forms";
+@import "input-group";
+@import "bootstrap-custom-forms";
 @import "mixins";
 @import "FormText";
 @import "FormControlSet";
 
-$form-control-icon-width: 32px !default;
-$select-icon-padding: .5625rem !default;
-
 // A form input state used by the now deprecate Fieldset and asInput
 // we can remove this when they are deleted.
 .form-control.is-invalid.is-invalid-nodanger {
   @include form-control-focus(true);
 
-  border-color: $input-border-color;
+  border-color: var(--pgn-color-form-input-border);
 }
 
 .form-control:hover {
-  border: solid $input-hover-width $dark-700;
+  border: solid var(--pgn-size-form-input-width-hover) var(--pgn-color-dark-700);
 }
 
 .pgn__form-group {
-  margin-bottom: $form-group-margin-bottom;
+  margin-bottom: var(--pgn-spacing-form-group-margin-bottom);
   text-align: start;
 
   .form-check {
@@ -46,53 +42,71 @@ $select-icon-padding: .5625rem !default;
   flex-grow: 1;
   align-items: flex-start;
 
-  @media (min-width: map-get($grid-breakpoints, "sm")) {
-    margin-inline-end: $custom-control-gutter;
+  @media (--pgn-size-breakpoint-min-width-sm) {
+    margin-inline-end: var(--pgn-spacing-form-control-gutter);
   }
 
   &.has-prepended-node {
     .form-control {
-      padding-inline-start: calc(#{$input-padding-x} + #{$form-control-icon-width});
+      padding-inline-start:
+        calc(
+          var(--pgn-spacing-form-input-padding-x-base) + var(--pgn-size-form-control-icon-width)
+        );
 
       [dir="rtl"] & {
-        background-position: left $select-icon-padding center;
+        background-position: left var(--pgn-spacing-form-control-select-icon-padding) center;
       }
     }
 
     .form-control-lg {
-      padding-inline-start: calc(#{$input-padding-x-lg} + #{$form-control-icon-width});
+      padding-inline-start:
+        calc(
+          var(--pgn-spacing-form-input-padding-x-lg) + var(--pgn-size-form-control-icon-width)
+        );
     }
 
     .form-control-sm {
-      padding-inline-start: calc(#{$input-padding-x-sm} + #{$form-control-icon-width});
+      padding-inline-start:
+        calc(
+          var(--pgn-spacing-form-input-padding-x-sm) + var(--pgn-size-form-control-icon-width)
+        );
     }
   }
 
   &.has-appended-node {
     .form-control {
-      padding-inline-end: calc(#{$input-padding-x} + #{$form-control-icon-width});
+      padding-inline-end:
+        calc(
+          var(--pgn-spacing-form-input-padding-x-base) + var(--pgn-size-form-control-icon-width)
+        );
     }
 
     .form-control-lg {
-      padding-inline-end: calc(#{$input-padding-x-lg} + #{$form-control-icon-width});
+      padding-inline-end:
+        calc(
+          var(--pgn-spacing-form-input-padding-x-lg) + var(--pgn-size-form-control-icon-width)
+        );
     }
 
     .form-control-sm {
-      padding-inline-end: calc(#{$input-padding-x-sm} + #{$form-control-icon-width});
+      padding-inline-end:
+        calc(
+          var(--pgn-spacing-form-input-padding-x-sm) + var(--pgn-size-form-control-icon-width)
+        );
     }
   }
 
-  font-size: $input-font-size;
-  line-height: $input-line-height;
+  font-size: var(--pgn-typography-form-input-font-size-base);
+  line-height: var(--pgn-typography-form-input-line-height-base);
 
   &.pgn__form-control-decorator-group-sm {
-    font-size: $input-font-size-sm;
-    line-height: $input-line-height-sm;
+    font-size: var(--pgn-typography-form-input-font-size-sm);
+    line-height: var(--pgn-typography-form-input-line-height-sm);
   }
 
   &.pgn__form-control-decorator-group-lg {
-    font-size: $input-font-size-lg;
-    line-height: $input-line-height-lg;
+    font-size: var(--pgn-typography-form-input-font-size-lg);
+    line-height: var(--pgn-typography-form-input-line-height-lg);
   }
 }
 
@@ -106,8 +120,8 @@ $select-icon-padding: .5625rem !default;
     pointer-events: initial;
   }
 
-  height: $input-height;
-  min-width: $input-height;
+  height: var(--pgn-size-form-input-height-base);
+  min-width: var(--pgn-size-form-input-height-base);
   line-height: inherit;
   display: flex;
   justify-content: center;
@@ -116,58 +130,64 @@ $select-icon-padding: .5625rem !default;
 
   &.pgn__form-control-decorator-leading {
     inset-inline-start: 0;
-    padding-inline-start: $input-padding-x;
-    padding-inline-end: calc($input-padding-x / 2);
+    padding-inline-start: var(--pgn-spacing-form-input-padding-x-base);
+    padding-inline-end: calc(var(--pgn-spacing-form-input-padding-x-base) / 2);
   }
 
   &.pgn__form-control-decorator-trailing {
     inset-inline-end: 0;
-    padding-inline-start: calc($input-padding-x / 2);
-    padding-inline-end: calc(#{$input-padding-y-sm} - #{2 * $input-border-width});
+    padding-inline-start: calc(var(--pgn-spacing-form-input-padding-x-base) / 2);
+    padding-inline-end:
+      calc(
+        var(--pgn-spacing-form-input-padding-y-sm) - calc(2 * var(--pgn-size-form-input-width-border))
+      );
   }
 
   .pgn__form-control-decorator-group-lg & {
-    height: $input-height-lg;
-    min-width: $input-height-lg;
+    height: var(--pgn-size-form-input-height-lg);
+    min-width: var(--pgn-size-form-input-height-lg);
 
     &.pgn__form-control-decorator-leading {
-      padding-left: $input-padding-x-lg;
-      padding-right: calc($input-padding-x-lg / 2);
+      padding-left: var(--pgn-spacing-form-input-padding-x-lg);
+      padding-right: calc(var(--pgn-spacing-form-input-padding-x-lg) / 2);
     }
 
     &.pgn__form-control-decorator-trailing {
-      padding-left: calc($input-padding-x-lg / 2);
-      padding-right: calc(#{$input-padding-y} - #{2 * $input-border-width});
+      padding-left: calc(var(--pgn-spacing-form-input-padding-x-lg) / 2);
+      padding-right:
+        calc(
+          var(--pgn-spacing-form-input-padding-y-base) - (2 * var(--pgn-size-form-input-width-border))
+        );
     }
   }
 
   .pgn__form-control-decorator-group-sm & {
-    height: $input-height-sm;
-    min-width: $input-height-lg;
+    height: var(--pgn-size-form-input-height-sm);
+    min-width: var(--pgn-size-form-input-height-lg);
 
     &.pgn__form-control-decorator-leading {
-      padding-left: $input-padding-x-sm;
-      padding-right: calc($input-padding-x-sm / 2);
+      padding-left: var(--pgn-spacing-form-input-padding-x-sm);
+      padding-right: calc(var(--pgn-spacing-form-input-padding-x-sm) / 2);
     }
 
     &.pgn__form-control-decorator-trailing {
-      padding-left: calc($input-padding-x-sm / 2);
-      padding-right: calc(#{$input-padding-y-sm} - #{2 * $input-border-width});
+      padding-left: calc(var(--pgn-spacing-form-input-padding-x-sm) / 2);
+      padding-right: calc(var(--pgn-spacing-form-input-padding-y-sm) - (2 * var(--pgn-size-form-input-width-border)));
     }
   }
 
   .btn-icon {
-    color: $gray-500 !important;
+    color: var(--pgn-color-gray-500) !important;
 
     &:hover {
-      background-color: $gray-500 !important;
-      color: $white !important;
+      background-color: var(--pgn-color-gray-500) !important;
+      color: var(--pgn-color-white) !important;
     }
 
     &:focus {
-      background-color: $white !important;
-      color: $gray-500 !important;
-      box-shadow: inset 0 0 0 2px $gray-500 !important;
+      background-color: var(--pgn-color-white) !important;
+      color: var(--pgn-color-gray-500) !important;
+      box-shadow: inset 0 0 0 2px var(--pgn-color-gray-500) !important;
     }
   }
 }
@@ -176,7 +196,7 @@ $select-icon-padding: .5625rem !default;
 
 .pgn__form-control-floating-label {
   position: absolute;
-  inset-inline-start: $input-border-width;
+  inset-inline-start: var(--pgn-size-form-input-width-border);
   inset-inline-end: 0;
   display: flex;
   width: 100%;
@@ -198,7 +218,7 @@ $select-icon-padding: .5625rem !default;
     // Prevent background-color from being output as "transparent"
     // Firefox doesn't handle the first animation well from transparent to
     // a color. Adding an alpha channel smooths it out.
-    background-color: rgba($input-bg, .01);
+    background-color: var(--pgn-color-form-control-label-floating-text);
     white-space: nowrap;
     max-width: 75vw;
     display: block;
@@ -212,39 +232,39 @@ $select-icon-padding: .5625rem !default;
 
   .has-leading-element & {
     .pgn__form-control-floating-label-text {
-      transform: translateX(#{$form-control-icon-width});
+      transform: translateX(var(--pgn-size-form-control-icon-width));
 
       [dir="rtl"] & {
-        transform: translateX(#{-$form-control-icon-width});
+        transform: translateX(calc(-1 * var(--pgn-size-form-control-icon-width)));
       }
     }
   }
 
   @include form-control-floating-label-initial(
-    $input-padding-x,
-    $input-padding-y,
-    $input-line-height,
-    $input-font-size,
-    $input-border-width
+    var(--pgn-spacing-form-input-padding-x-base),
+    var(--pgn-spacing-form-input-padding-y-base),
+    var(--pgn-typography-form-input-line-height-base),
+    var(--pgn-typography-form-input-font-size-base),
+    var(--pgn-size-form-input-width-border)
   );
 
   .pgn__form-control-decorator-group-lg & {
     @include form-control-floating-label-initial(
-      $input-padding-x-lg,
-      $input-padding-y-lg,
-      $input-line-height-lg,
-      $input-font-size-lg,
-      $input-border-width
+      var(--pgn-spacing-form-input-padding-x-lg),
+      var(--pgn-spacing-form-input-padding-y-lg),
+      var(--pgn-typography-form-input-line-height-lg),
+      var(--pgn-typography-form-input-font-size-lg),
+      var(--pgn-size-form-input-width-border)
     );
   }
 
   .pgn__form-control-decorator-group-sm & {
     @include form-control-floating-label-initial(
-      $input-padding-x-sm,
-      $input-padding-y-sm,
-      $input-line-height-sm,
-      $input-font-size-sm,
-      $input-border-width
+      var(--pgn-spacing-form-input-padding-x-sm),
+      var(--pgn-spacing-form-input-padding-y-sm),
+      var(--pgn-typography-form-input-line-height-sm),
+      var(--pgn-typography-form-input-font-size-sm),
+      var(--pgn-size-form-input-width-border)
     );
   }
 
@@ -252,35 +272,35 @@ $select-icon-padding: .5625rem !default;
   // select.form-control ~ &,
   .form-control.has-value ~ & {
     .pgn__form-control-floating-label-text {
-      background-color: $input-bg;
+      background-color: var(--pgn-color-form-input-bg-base);
     }
 
     @include form-control-floating-label-float(
-      $input-padding-x,
-      $input-padding-y,
-      $input-line-height,
-      $input-font-size,
-      $input-border-width
+      var(--pgn-spacing-form-input-padding-x-base),
+      var(--pgn-spacing-form-input-padding-y-base),
+      var(--pgn-typography-form-input-line-height-base),
+      var(--pgn-typography-form-input-font-size-base),
+      var(--pgn-size-form-input-width-border)
     );
   }
 
   .float-label.pgn__form-control-decorator-group-lg & {
     @include form-control-floating-label-float(
-      $input-padding-x-lg,
-      $input-padding-y-lg,
-      $input-line-height-lg,
-      $input-font-size-lg,
-      $input-border-width
+      var(--pgn-spacing-form-input-padding-x-lg),
+      var(--pgn-spacing-form-input-padding-y-lg),
+      var(--pgn-typography-form-input-line-height-lg),
+      var(--pgn-typography-form-input-font-size-lg),
+      var(--pgn-size-form-input-width-border)
     );
   }
 
   .float-label.pgn__form-control-decorator-group-sm & {
     @include form-control-floating-label-float(
-      $input-padding-x-sm,
-      $input-padding-y-sm,
-      $input-line-height-sm,
-      $input-font-size-sm,
-      $input-border-width
+      var(--pgn-spacing-form-input-padding-x-sm),
+      var(--pgn-spacing-form-input-padding-y-sm),
+      var(--pgn-typography-form-input-line-height-sm),
+      var(--pgn-typography-form-input-font-size-sm),
+      var(--pgn-size-form-input-width-border)
     );
   }
 }
@@ -319,22 +339,22 @@ $select-icon-padding: .5625rem !default;
 }
 
 select.form-control {
-  padding-inline-end: 2rem + $select-icon-padding;
-  background-image: $custom-select-indicator;
-  background-position: right $select-icon-padding center;
+  padding-inline-end: calc(var(--pgn-spacing-form-control-select-icon-padding) + 2rem);
+  background-image: var(--pgn-other-content-form-control-select-indicator-icon);
+  background-position: right var(--pgn-spacing-form-control-select-icon-padding) center;
   background-repeat: no-repeat;
   background-size: 24px 24px;
   appearance: none;
 
   [dir="rtl"] & {
-    background-position: left $select-icon-padding center;
+    background-position: left var(--pgn-spacing-form-control-select-icon-padding) center;
   }
 }
 
 // Regular Form Label
 
 .pgn__form-label {
-  font-size: $input-font-size;
+  font-size: var(--pgn-typography-form-input-font-size-base);
   display: inline-block;
   margin-bottom: .5rem;
 
@@ -348,11 +368,11 @@ select.form-control {
   }
 
   &.pgn__form-label-lg {
-    font-size: $input-font-size-lg;
+    font-size: var(--pgn-typography-form-input-font-size-lg);
   }
 
   &.pgn__form-label-sm {
-    font-size: $input-font-size-sm;
+    font-size: var(--pgn-typography-form-input-font-size-sm);
   }
 }
 
@@ -362,12 +382,14 @@ select.form-control {
 .pgn__form-radio-input,
 .pgn__form-switch-input {
   appearance: none;
-  height: $custom-control-indicator-size;
-  width: $custom-control-indicator-size;
-  background-color: $custom-control-indicator-bg;
-  border: solid $custom-control-indicator-border-width $custom-control-indicator-border-color;
-  border-radius: $custom-checkbox-indicator-border-radius;
-  margin-inline-end: $custom-control-gutter;
+  height: var(--pgn-size-form-control-indicator-base);
+  width: var(--pgn-size-form-control-indicator-base);
+  background-color: var(--pgn-color-form-control-indicator-bg-base);
+  border:
+    solid var(--pgn-size-form-control-indicator-border-width)
+    var(--pgn-color-form-control-indicator-border);
+  border-radius: var(--pgn-size-form-control-border-checkbox-indicator-radius) radius;
+  margin-inline-end: var(--pgn-spacing-form-control-gutter);
   background-position: center;
 
   &:not(:disabled) {
@@ -375,7 +397,7 @@ select.form-control {
   }
 
   &:not(:disabled):hover {
-    box-shadow: $custom-control-indicator-focus-box-shadow;
+    box-shadow: var(--pgn-elevation-form-control-indicator-checked-focus);
   }
 
   &:disabled {
@@ -383,17 +405,17 @@ select.form-control {
   }
 
   &:checked {
-    border-color: $custom-control-indicator-checked-border-color;
+    border-color: var(--pgn-color-form-control-indicator-checked-border-base);
   }
 }
 
 .pgn__form-checkbox-input {
   &:checked {
-    background-image: escape-svg($custom-checkbox-indicator-icon-checked);
+    background-image: var(--pgn-other-content-form-control-checkbox-indicator-icon-checked-base);
   }
 
   &:indeterminate {
-    background-image: escape-svg($custom-checkbox-indicator-icon-indeterminate);
+    background-image: var(--pgn-other-content-form-control-checkbox-indicator-indeterminate-icon);
   }
 }
 
@@ -404,59 +426,59 @@ select.form-control {
     outline: none;
     box-shadow: none;
     text-decoration: none;
-    border-color: $input-focus-border-color;
+    border-color: var(--pgn-color-form-input-focus-border);
   }
 
   &:focus::before {
     content: "";
     position: absolute;
-    top: -$form-check-position-axis;
-    right: -$form-check-position-axis;
-    bottom: -$form-check-position-axis;
-    left: -$form-check-position-axis;
-    border: $form-check-border-width solid $input-focus-border-color;
-    border-radius: $form-check-focus-border-radius;
+    top: calc(var(--pgn-spacing-form-check-position-axis) * -1);
+    right: calc(var(--pgn-spacing-form-check-position-axis) * -1);
+    bottom: calc(var(--pgn-spacing-form-check-position-axis) * -1);
+    left: calc(var(--pgn-spacing-form-check-position-axis) * -1);
+    border: var(--pgn-size-form-border-radius-width) solid var(--pgn-color-form-input-focus-border);
+    border-radius: var(--pgn-size-form-border-radius-check-focus);
   }
 }
 
 .pgn__form-switch-input {
-  width: $custom-switch-width;
-  border-radius: $custom-switch-indicator-border-radius;
-  background-image: escape-svg($custom-switch-indicator-icon-off);
+  width: var(--pgn-size-form-control-switch-width);
+  border-radius: var(--pgn-size-form-control-switch-indicator-border-radius);
+  background-image: var(--pgn-other-content-form-control-switch-indicator-icon-off);
   background-position: left center;
   background-repeat: no-repeat;
   transition: background 150ms ease;
 
   &:checked {
     background-position: right center;
-    background-color: $custom-switch-indicator-checked-bg;
-    background-image: escape-svg($custom-switch-indicator-icon-on);
+    background-color: var(--pgn-color-form-control-switch-indicator-checked-bg);
+    background-image: var(--pgn-other-content-form-control-switch-indicator-icon-on);
   }
 
   &:indeterminate {
     background-position: center;
-    background-image: escape-svg($custom-switch-indicator-icon-off);
+    background-image: var(--pgn-other-content-form-control-switch-indicator-icon-off);
   }
 }
 
 .pgn__form-switch-helper-text {
-  color: $gray-500;
-  font-size: $font-size-xs;
+  color: var(--pgn-color-gray-500);
+  font-size: var(--pgn-typography-font-size-xs);
   margin-top: .25rem;
 }
 
 .pgn__form-radio-input {
-  border-radius: $custom-radio-indicator-border-radius;
+  border-radius: var(--pgn-size-form-control-border-radio-indicator-radius);
 
   &:checked {
-    background-image: escape-svg($custom-radio-indicator-icon-checked);
+    background-image: var(--pgn-other-content-form-control-radio-indicator-icon-checked-base);
   }
 
   &:focus {
-    border-color: $black;
+    border-color: var(--pgn-color-black);
 
     &::before {
-      border-radius: $custom-radio-indicator-border-radius;
+      border-radius: var(--pgn-size-form-control-border-radio-indicator-radius);
     }
   }
 }
@@ -470,7 +492,7 @@ select.form-control {
     display: flex;
     align-items: center;
     margin-bottom: 0;
-    line-height: $custom-control-indicator-size;
+    line-height: var(--pgn-size-form-control-indicator-base);
   }
 
   input:disabled ~ * {
@@ -478,17 +500,17 @@ select.form-control {
   }
 
   &.pgn__form-control-invalid input {
-    border-color: $form-feedback-invalid-color;
+    border-color: var(--pgn-color-form-feedback-invalid);
   }
 
   &.pgn__form-control-valid input {
-    border-color: $form-feedback-valid-color;
+    border-color: var(--pgn-color-form-feedback-valid);
   }
 
   &.pgn__form-control-label-left {
     .pgn__form-label {
       order: 1;
-      margin-inline-end: $custom-control-gutter;
+      margin-inline-end: var(--pgn-spacing-form-control-gutter);
     }
 
     input {
@@ -500,13 +522,13 @@ select.form-control {
 .pgn__form-checkbox {
   &.pgn__form-control-invalid input {
     &:checked {
-      background-image: escape-svg($custom-checkbox-indicator-icon-invalid-checked);
+      background-image: var(--pgn-other-content-form-control-checkbox-indicator-icon-checked-invalid);
     }
   }
 
   &.pgn__form-control-valid input {
     &:checked {
-      background-image: escape-svg($custom-checkbox-indicator-icon-valid-checked);
+      background-image: var(--pgn-other-content-form-control-checkbox-indicator-icon-checked-valid);
     }
   }
 }
@@ -514,13 +536,13 @@ select.form-control {
 .pgn__form-radio {
   &.pgn__form-control-invalid input {
     &:checked {
-      background-image: escape-svg($custom-radio-indicator-icon-invalid-checked);
+      background-image: var(--pgn-other-content-form-control-radio-indicator-icon-checked-invalid);
     }
   }
 
   &.pgn__form-control-valid input {
     &:checked {
-      background-image: escape-svg($custom-radio-indicator-icon-valid-checked);
+      background-image: var(--pgn-other-content-form-control-radio-indicator-icon-checked-valid);
     }
   }
 }
@@ -534,7 +556,7 @@ select.form-control {
 .input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
 .input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
   [dir="rtl"] & {
-    border-radius: 0 $input-border-radius $input-border-radius 0;
+    border-radius: 0 var(--pgn-size-form-input-radius-border-base) var(--pgn-size-form-input-radius-border-base) 0;
   }
 }
 
@@ -545,7 +567,7 @@ select.form-control {
 .input-group > .input-group-prepend:first-child > .btn:not(:first-child),
 .input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) {
   [dir="rtl"] & {
-    border-radius: $input-border-radius 0 0 $input-border-radius;
+    border-radius: var(--pgn-size-form-input-radius-border-base) 0 0 var(--pgn-size-form-input-radius-border-base);
   }
 }
 
@@ -554,11 +576,11 @@ select.form-control {
 
   .pgn__form-control-decorator .btn-icon {
     &:hover {
-      fill: $white;
+      fill: var(--pgn-color-white);
     }
 
     &:focus {
-      fill: $gray-500;
+      fill: var(--pgn-color-gray-500);
     }
   }
 
@@ -567,24 +589,24 @@ select.form-control {
   }
 
   .pgn__icon.btn-icon__icon {
-    height: $form-autosuggest-icon-height;
-    width: $form-autosuggest-icon-width;
+    height: var(--pgn-size-form-autosuggest-icon-height);
+    width: var(--pgn-size-form-autosuggest-icon-width);
   }
 
   .pgn__form-autosuggest__dropdown {
     @include pgn-box-shadow(1, "centered");
 
-    @media (min-width: map-get($grid-breakpoints, "sm")) {
-      margin-inline-end: $custom-control-gutter;
+    @media (--pgn-size-breakpoint-min-width-sm) {
+      margin-inline-end: var(--pgn-spacing-form-control-gutter);
     }
 
-    border-radius: $border-radius-sm;
+    border-radius: var(--pgn-size-border-radius-sm);
     max-height: 15rem;
     overflow-y: scroll;
     position: absolute;
-    background-color: $white;
+    background-color: var(--pgn-color-white);
     width: calc(100% - .5rem);
-    z-index: $zindex-dropdown;
+    z-index: var(--pgn-elevation-dropdown-zindex);
     top: 3.125rem;
     padding: 0;
 
@@ -597,7 +619,7 @@ select.form-control {
       text-overflow: ellipsis;
 
       &:active {
-        color: $white;
+        color: var(--pgn-color-white);
       }
     }
 
@@ -606,9 +628,9 @@ select.form-control {
       text-align: center;
 
       .spinner-border {
-        width: $form-autosuggest-spinner-width;
-        height: $form-autosuggest-spinner-height;
-        border: $form-autosuggest-border-width solid $black;
+        width: var(--pgn-size-form-autosuggest-spinner-width);
+        height: var(--pgn-size-form-autosuggest-spinner-height);
+        border: var(--pgn-size-form-autosuggest-border-width) solid var(--pgn-color-black);
         border-right-color: transparent;
       }
     }