@openedx/paragon 22.4.0 → 23.0.0-alpha.1

package/src/Form/_bootstrap-forms.scss

@@ -0,0 +1,381 @@
+@import "mixins";
+// stylelint-disable selector-no-qualifying-type
+
+//
+// Textual form controls
+//
+
+.form-control {
+  display: block;
+  width: 100%;
+  height: var(--pgn-size-form-input-height-base);
+  padding: var(--pgn-spacing-form-input-padding-y-base) var(--pgn-spacing-form-input-padding-x-base);
+  font-family: var(--pgn-typography-form-input-font-family);
+
+  @include font-size(var(--pgn-typography-form-input-font-size-base));
+
+  font-weight: var(--pgn-typography-form-input-font-weight);
+  line-height: var(--pgn-typography-form-input-line-height-base);
+  color: var(--pgn-color-form-input-base);
+  background-color: var(--pgn-color-form-input-bg-base);
+  background-clip: padding-box;
+  border: var(--pgn-size-form-input-width-border) solid var(--pgn-color-form-input-border);
+  transition: var(--pgn-transition-form-input);
+  box-shadow: var(--pgn-elevation-form-input-base);
+
+  // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
+  @include border-radius(var(--pgn-size-form-input-radius-border-base), 0);
+
+  // Unstyle the caret on `<select>`s in IE10+.
+  &::-ms-expand {
+    background-color: transparent;
+    border: 0;
+  }
+
+  // Customize the `:focus` state to imitate native WebKit styles.
+  @include form-control-focus($ignore-warning: true);
+
+  // Placeholder
+  &::placeholder {
+    color: var(--pgn-color-form-input-placeholder);
+    // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
+    opacity: 1;
+  }
+
+  // Disabled and read-only inputs
+  //
+  // HTML5 says that controls under a fieldset > legend:first-child won't be
+  // disabled if the fieldset is disabled. Due to implementation difficulty, we
+  // don't honor that edge case; we style them as disabled anyway.
+  &:disabled,
+  &[readonly] {
+    background-color: var(--pgn-color-form-input-bg-disabled);
+    // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
+    opacity: 1;
+  }
+}
+
+input[type="date"],
+input[type="time"],
+input[type="datetime-local"],
+input[type="month"] {
+  &.form-control {
+    appearance: none; // Fix appearance for date inputs in Safari
+  }
+}
+
+select.form-control {
+  // Remove select outline from select box in FF
+  &:-moz-focusring {
+    color: transparent;
+    text-shadow: 0 0 0 var(--pgn-color-form-input-base);
+  }
+
+  &:focus::-ms-value {
+    // Suppress the nested default white text on blue background highlight given to
+    // the selected option text when the (still closed) <select> receives focus
+    // in IE and (under certain conditions) Edge, as it looks bad and cannot be made to
+    // match the appearance of the native widget.
+    // See https://github.com/twbs/bootstrap/issues/19398.
+    color: var(--pgn-color-form-input-base);
+    background-color: var(--pgn-color-form-input-bg-base);
+  }
+}
+
+// Make file inputs better match text inputs by forcing them to new lines.
+.form-control-file,
+.form-control-range {
+  display: block;
+  width: 100%;
+}
+
+
+//
+// Labels
+//
+
+// For use with horizontal and inline forms, when you need the label (or legend)
+// text to align with the form controls.
+.col-form-label {
+  padding-top: calc(var(--pgn-spacing-form-input-padding-y-base) + var(--pgn-size-form-input-width-border));
+  padding-bottom: calc(var(--pgn-spacing-form-input-padding-y-base) + var(--pgn-size-form-input-width-border));
+  margin-bottom: 0; // Override the `<label>/<legend>` default
+
+  @include font-size(inherit); // Override the `<legend>` default
+
+  line-height: var(--pgn-typography-form-input-line-height-base);
+}
+
+.col-form-label-lg {
+  padding-top: calc(var(--pgn-spacing-form-input-padding-y-lg) + var(--pgn-size-form-input-width-border));
+  padding-bottom: calc(var(--pgn-spacing-form-input-padding-y-lg) + var(--pgn-size-form-input-width-border));
+
+  @include font-size(var(--pgn-typography-form-input-font-size-lg));
+
+  line-height: var(--pgn-typography-form-input-line-height-lg);
+}
+
+.col-form-label-sm {
+  padding-top: calc(var(--pgn-spacing-form-input-padding-y-sm) + var(--pgn-size-form-input-width-border));
+  padding-bottom: calc(var(--pgn-spacing-form-input-padding-y-sm) + var(--pgn-size-form-input-width-border));
+
+  @include font-size(var(--pgn-typography-form-input-font-size-sm));
+
+  line-height: var(--pgn-typography-form-input-line-height-sm);
+}
+
+
+// Readonly controls as plain text
+//
+// Apply class to a readonly input to make it appear like regular plain
+// text (without any border, background color, focus indicator)
+
+.form-control-plaintext {
+  display: block;
+  width: 100%;
+  padding: var(--pgn-spacing-form-input-padding-y-base) 0;
+  margin-bottom: 0; // match inputs if this class comes on inputs with default margins
+
+  @include font-size(var(--pgn-typography-form-input-font-size-base));
+
+  line-height: var(--pgn-typography-form-input-line-height-base);
+  color: var(--pgn-color-form-input-plaintext);
+  background-color: transparent;
+  border: solid transparent;
+  border-width: var(--pgn-size-form-input-width-border) 0;
+
+  &.form-control-sm,
+  &.form-control-lg {
+    padding-right: 0;
+    padding-left: 0;
+  }
+}
+
+
+// Form control sizing
+//
+// Build on `.form-control` with modifier classes to decrease or increase the
+// height and font-size of form controls.
+//
+// Repeated in `_input_group.scss` to avoid Sass extend issues.
+
+.form-control-sm {
+  height: var(--pgn-size-form-input-height-sm);
+  padding: var(--pgn-spacing-form-input-padding-y-sm) var(--pgn-spacing-form-input-padding-x-sm);
+
+  @include font-size(var(--pgn-typography-form-input-font-size-sm));
+
+  line-height: var(--pgn-typography-form-input-line-height-sm);
+
+  @include border-radius(var(--pgn-size-form-input-radius-border-sm));
+}
+
+.form-control-lg {
+  height: var(--pgn-size-form-input-height-lg);
+  padding: var(--pgn-spacing-form-input-padding-y-lg) var(--pgn-spacing-form-input-padding-x-lg);
+
+  @include font-size(var(--pgn-typography-form-input-font-size-lg));
+
+  line-height: var(--pgn-typography-form-input-line-height-lg);
+
+  @include border-radius(var(--pgn-size-form-input-radius-border-lg));
+}
+
+// stylelint-disable-next-line no-duplicate-selectors
+select.form-control {
+  &[size],
+  &[multiple] {
+    height: auto;
+  }
+}
+
+textarea.form-control {
+  height: auto;
+}
+
+// Form groups
+//
+// Designed to help with the organization and spacing of vertical forms. For
+// horizontal forms, use the predefined grid classes.
+
+.form-group {
+  margin-bottom: var(--pgn-spacing-form-group-margin-bottom);
+}
+
+.form-text {
+  display: block;
+  margin-top: var(--pgn-spacing-form-text-margin-top);
+}
+
+
+// Form grid
+//
+// Special replacement for our grid system's `.row` for tighter form layouts.
+
+.form-row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: calc(-1 * var(--pgn-size-form-grid-gutter-width) * .5);
+  margin-left: calc(-1 * var(--pgn-size-form-grid-gutter-width) * .5);
+
+  > .col,
+  > [class*="col-"] {
+    padding-right: calc(var(--pgn-size-form-grid-gutter-width) * .5);
+    padding-left: calc(var(--pgn-size-form-grid-gutter-width) * .5);
+  }
+}
+
+
+// Checkboxes and radios
+//
+// Indent the labels to position radios/checkboxes as hanging controls.
+
+.form-check {
+  position: relative;
+  display: block;
+  padding-left: var(--pgn-spacing-form-input-check-gutter);
+}
+
+.form-check-input {
+  position: absolute;
+  margin-top: var(--pgn-spacing-form-input-check-margin-y);
+  margin-left: calc(-1 * var(--pgn-spacing-form-input-check-gutter));
+
+  // Use [disabled] and :disabled for workaround https://github.com/twbs/bootstrap/issues/28247
+  &[disabled] ~ .form-check-label,
+  &:disabled ~ .form-check-label {
+    color: var(--pgn-color-text-muted);
+  }
+}
+
+.form-check-label {
+  margin-bottom: 0; // Override default `<label>` bottom margin
+}
+
+.form-check-inline {
+  display: inline-flex;
+  align-items: center;
+  padding-left: 0; // Override base .form-check
+  margin-right: var(--pgn-spacing-form-check-inline-margin-x);
+
+  // Undo .form-check-input defaults and add some `margin-right`.
+  .form-check-input {
+    position: static;
+    margin-top: 0;
+    margin-right: var(--pgn-spacing-form-input-check-margin-x-inline);
+    margin-left: 0;
+  }
+}
+
+
+// Form validation
+//
+// Provide feedback to users when form field values are valid or invalid. Works
+// primarily for client-side validation via scoped `:invalid` and `:valid`
+// pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
+// server side validation.
+
+@include form-validation-state(
+  "valid",
+  var(--pgn-color-form-feedback-valid),
+  var(--pgn-other-content-form-feedback-icon-valid),
+  var(--pgn-color-form-feedback-tooltip-valid),
+  var(--pgn-color-form-feedback-tooltip-bg-valid),
+  var(--pgn-color-form-feedback-tooltip-box-shadow-focus-valid),
+  var(--pgn-color-form-feedback-checked-valid),
+);
+@include form-validation-state(
+  "invalid",
+  var(--pgn-color-form-feedback-invalid),
+  var(--pgn-other-content-form-feedback-icon-invalid),
+  var(--pgn-color-form-feedback-tooltip-bg-invalid),
+  transparent,
+  var(--pgn-color-form-feedback-tooltip-box-shadow-focus-invalid),
+  var(--pgn-color-form-feedback-checked-invalid),
+);
+
+// Inline forms
+//
+// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
+// forms begin stacked on extra small (mobile) devices and then go inline when
+// viewports reach <768px.
+//
+// Requires wrapping inputs and labels with `.form-group` for proper display of
+// default HTML form controls and our custom form controls (e.g., input groups).
+
+.form-inline {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center; // Prevent shorter elements from growing to same height as others (e.g.,
+  // small buttons growing to normal sized button height)
+
+  // Because we use flex, the initial sizing of checkboxes is collapsed and
+  // doesn't occupy the full-width (which is what we want for xs grid tier),
+  // so we force that here.
+  .form-check {
+    width: 100%;
+  }
+
+  // Kick in the inline
+  @include media-breakpoint-up(sm) {
+    label {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 0;
+    }
+
+    // Inline-block all the things for "inline"
+    .form-group {
+      display: flex;
+      flex: 0 0 auto;
+      flex-flow: row wrap;
+      align-items: center;
+      margin-bottom: 0;
+    }
+
+    // Allow folks to *not* use `.form-group`
+    .form-control {
+      display: inline-block;
+      width: auto; // Prevent labels from stacking above inputs in `.form-group`
+      vertical-align: middle;
+    }
+
+    // Make static controls behave like regular ones
+    .form-control-plaintext {
+      display: inline-block;
+    }
+
+    .input-group,
+    .custom-select {
+      width: auto;
+    }
+
+    // Remove default margin on radios/checkboxes that were used for stacking, and
+    // then undo the floating of radios and checkboxes to match.
+    .form-check {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: auto;
+      padding-left: 0;
+    }
+
+    .form-check-input {
+      position: relative;
+      flex-shrink: 0;
+      margin-top: 0;
+      margin-right: var(--pgn-spacing-form-input-check-margin-x-base);
+      margin-left: 0;
+    }
+
+    .custom-control {
+      align-items: center;
+      justify-content: center;
+    }
+
+    .custom-control-label {
+      margin-bottom: 0;
+    }
+  }
+}