commitall

account/theme/pages/build/scss/_forms.scss

@@ -0,0 +1,451 @@
+//
+// Component: Forms
+//
+
+.form-group {
+  &.has-icon {
+    position: relative;
+
+    .form-control {
+      padding-right: 35px;
+    }
+
+    .form-icon {
+      background-color: transparent;
+      border: 0;
+      cursor: pointer;
+      font-size: 1rem;
+      // margin-top: -3px;
+      padding: $input-btn-padding-y $input-btn-padding-x;
+      position: absolute;
+      right: 3px;
+      top: 0;
+    }
+  }
+}
+
+// Button groups
+.btn-group-vertical {
+  .btn {
+    &.btn-flat:first-of-type,
+    &.btn-flat:last-of-type {
+      @include border-radius(0);
+    }
+  }
+}
+
+// Support icons in form-control
+.form-control-feedback {
+  &.fa,
+  &.fas,
+  &.far,
+  &.fab,
+  &.fal,
+  &.fad,
+  &.svg-inline--fa,
+  &.ion {
+    line-height: $input-height;
+  }
+}
+
+.input-lg + .form-control-feedback,
+.input-group-lg + .form-control-feedback {
+  &.fa,
+  &.fas,
+  &.far,
+  &.fab,
+  &.fal,
+  &.fad,
+  &.svg-inline--fa,
+  &.ion {
+    line-height: $input-height-lg;
+  }
+}
+
+.form-group-lg {
+  .form-control + .form-control-feedback {
+    &.fa,
+    &.fas,
+    &.far,
+    &.fab,
+    &.fal,
+    &.fad,
+    &.svg-inline--fa,
+    &.ion {
+      line-height: $input-height-lg;
+    }
+  }
+}
+
+.input-sm + .form-control-feedback,
+.input-group-sm + .form-control-feedback {
+  &.fa,
+  &.fas,
+  &.far,
+  &.fab,
+  &.fal,
+  &.fad,
+  &.svg-inline--fa,
+  &.ion {
+    line-height: $input-height-sm;
+  }
+}
+
+.form-group-sm {
+  .form-control + .form-control-feedback {
+    &.fa,
+    &.fas,
+    &.far,
+    &.fab,
+    &.fal,
+    &.fad,
+    &.svg-inline--fa,
+    &.ion {
+      line-height: $input-height-sm;
+    }
+  }
+}
+
+label:not(.form-check-label):not(.custom-file-label) {
+  font-weight: $font-weight-bold;
+}
+
+.warning-feedback {
+  @include font-size($form-feedback-font-size);
+  color: theme-color("warning");
+  display: none;
+  margin-top: $form-feedback-margin-top;
+  width: 100%;
+}
+
+.warning-tooltip {
+  @include border-radius($form-feedback-tooltip-border-radius);
+  @include font-size($form-feedback-tooltip-font-size);
+  background-color: rgba(theme-color("warning"), $form-feedback-tooltip-opacity);
+  color: color-yiq(theme-color("warning"));
+  display: none;
+  line-height: $form-feedback-tooltip-line-height;
+  margin-top: .1rem;
+  max-width: 100%; // Contain to parent when possible
+  padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
+  position: absolute;
+  top: 100%;
+  z-index: 5;
+}
+
+.form-control {
+  &.is-warning {
+    border-color: theme-color("warning");
+
+    @if $enable-validation-icons {
+      // padding-right: $input-height-inner;
+      // background-image: none;
+      // background-repeat: no-repeat;
+      // background-position: center right $input-height-inner-quarter;
+      // background-size: $input-height-inner-half $input-height-inner-half;
+    }
+
+    &:focus {
+      border-color: theme-color("warning");
+      box-shadow: 0 0 0 $input-focus-width rgba(theme-color("warning"), .25);
+    }
+
+    ~ .warning-feedback,
+    ~ .warning-tooltip {
+      display: block;
+    }
+  }
+}
+
+// stylelint-disable-next-line selector-no-qualifying-type
+textarea.form-control {
+  &.is-warning {
+    @if $enable-validation-icons {
+      padding-right: $input-height-inner;
+      background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
+    }
+  }
+}
+
+.custom-select {
+  &.is-warning {
+    border-color: theme-color("warning");
+
+    @if $enable-validation-icons {
+      // padding-right: $custom-select-feedback-icon-padding-right;
+      // background: $custom-select-background, none $custom-select-bg no-repeat $custom-select-feedback-icon-position / $custom-select-feedback-icon-size;
+    }
+
+    &:focus {
+      border-color: theme-color("warning");
+      box-shadow: 0 0 0 $input-focus-width rgba(theme-color("warning"), .25);
+    }
+
+    ~ .warning-feedback,
+    ~ .warning-tooltip {
+      display: block;
+    }
+  }
+}
+
+
+.form-control-file {
+  &.is-warning {
+    ~ .warning-feedback,
+    ~ .warning-tooltip {
+      display: block;
+    }
+  }
+}
+
+.form-check-input {
+  &.is-warning {
+    ~ .form-check-label {
+      color: theme-color("warning");
+    }
+
+    ~ .warning-feedback,
+    ~ .warning-tooltip {
+      display: block;
+    }
+  }
+}
+
+.custom-control-input.is-warning {
+  ~ .custom-control-label {
+    color: theme-color("warning");
+
+    &::before {
+      border-color: theme-color("warning");
+    }
+  }
+
+  ~ .warning-feedback,
+  ~ .warning-tooltip {
+    display: block;
+  }
+
+  &:checked {
+    ~ .custom-control-label::before {
+      @include gradient-bg(lighten(theme-color("warning"), 10%));
+      border-color: lighten(theme-color("warning"), 10%);
+    }
+  }
+
+  &:focus {
+    ~ .custom-control-label::before {
+      box-shadow: 0 0 0 $input-focus-width rgba(theme-color("warning"), .25);
+    }
+
+    &:not(:checked) ~ .custom-control-label::before {
+      border-color: theme-color("warning");
+    }
+  }
+}
+
+// custom file
+.custom-file-input {
+  &.is-warning {
+    ~ .custom-file-label {
+      border-color: theme-color("warning");
+    }
+
+    ~ .warning-feedback,
+    ~ .warning-tooltip {
+      display: block;
+    }
+
+    &:focus {
+      ~ .custom-file-label {
+        border-color: theme-color("warning");
+        box-shadow: 0 0 0 $input-focus-width rgba(theme-color("warning"), .25);
+      }
+    }
+  }
+}
+
+// body.text-sm support
+body.text-sm {
+  .input-group-text {
+    font-size: $font-size-sm;
+  }
+}
+
+// custom .form-control styles
+.form-control,
+.custom-select {
+  &.form-control-border {
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+    border-radius: 0;
+    box-shadow: inherit;
+
+    &.border-width-2 {
+      border-bottom-width: 2px;
+    }
+    &.border-width-3 {
+      border-bottom-width: 3px;
+    }
+  }
+}
+
+// custom switch color variations
+.custom-switch {
+  @each $name, $color in $theme-colors {
+    @include custom-switch-variant($name, $color);
+  }
+
+  @each $name, $color in $colors {
+    @include custom-switch-variant($name, $color);
+  }
+}
+
+// custom range color variations
+.custom-range {
+  @each $name, $color in $theme-colors {
+    @include custom-range-variant($name, $color);
+  }
+
+  @each $name, $color in $colors {
+    @include custom-range-variant($name, $color);
+  }
+}
+
+// custom control input variations
+@each $name, $color in $theme-colors {
+  @include custom-control-input-variant($name, $color);
+}
+
+@each $name, $color in $colors {
+  @include custom-control-input-variant($name, $color);
+}
+
+.custom-control-input-outline {
+  ~ .custom-control-label::before {
+    background-color: transparent !important;
+    box-shadow: none;
+  }
+  &:checked ~ .custom-control-label::before {
+    @include gradient-bg(transparent);
+  }
+}
+
+.navbar-dark {
+  .btn-navbar,
+  .form-control-navbar {
+    background-color: lighten($sidebar-dark-bg, 5%);
+    border: 1px solid lighten($sidebar-dark-bg, 15%);
+    color: lighten(color-yiq(lighten($sidebar-dark-bg, 5%)), 15%);
+  }
+  .btn-navbar {
+    &:hover {
+      background-color: lighten($sidebar-dark-bg, 7.5%);
+    }
+    &:focus {
+      background-color: lighten($sidebar-dark-bg, 10%);
+    }
+  }
+
+  .form-control-navbar + .input-group-prepend,
+  .form-control-navbar + .input-group-append {
+    > .btn-navbar {
+      background-color: lighten($sidebar-dark-bg, 5%);
+      color: $white;
+      border: 1px solid lighten($sidebar-dark-bg, 15%);
+      border-left: none;
+    }
+  }
+}
+
+@include dark-mode () {
+  .form-control:not(.form-control-navbar):not(.form-control-sidebar),
+  .custom-select,
+  .custom-file-label,
+  .custom-file-label::after,
+  .custom-control-label::before,
+  .input-group-text {
+    background-color: $dark;
+    color: $white;
+  }
+  .form-control:not(.form-control-navbar):not(.form-control-sidebar):not(.is-invalid):not(:focus),
+  .custom-file-label,
+  .custom-file-label::after {
+    border-color: $gray-600;
+  }
+  select {
+    background-color: $dark;
+    color: $white;
+    border-color: $gray-600;
+  }
+
+  .custom-select {
+    background: $dark $custom-select-dark-background;
+
+    &[multiple]{
+      background: $dark;
+    }
+  }
+
+  .input-group-text {
+    border-color: $gray-600;
+  }
+
+  .custom-control-input:disabled ~ .custom-control-label::before,
+  .custom-control-input[disabled] ~ .custom-control-label::before {
+    background-color: lighten($dark, 5%);
+    border-color: $gray-600;
+    color: $white;
+  }
+
+  input:-webkit-autofill,
+  input:-webkit-autofill:hover,
+  input:-webkit-autofill:focus,
+  textarea:-webkit-autofill,
+  textarea:-webkit-autofill:hover,
+  textarea:-webkit-autofill:focus,
+  select:-webkit-autofill,
+  select:-webkit-autofill:hover,
+  select:-webkit-autofill:focus {
+    -webkit-text-fill-color: $white;
+  }
+
+  .custom-range {
+    &::-webkit-slider-runnable-track {
+      background-color: lighten($dark, 7.5%);
+    }
+    &::-moz-range-track {
+      background-color: lighten($dark, 7.5%);
+    }
+    &::-ms-track {
+      background-color: lighten($dark, 7.5%);
+    }
+
+    @each $name, $color in $theme-colors-alt {
+      @include custom-range-variant($name, $color);
+    }
+
+    @each $name, $color in $colors-alt {
+      @include custom-range-variant($name, $color);
+    }
+  }
+
+  // custom switch color variations
+  .custom-switch {
+    @each $name, $color in $theme-colors-alt {
+      @include custom-switch-variant($name, $color);
+    }
+
+    @each $name, $color in $colors-alt {
+      @include custom-switch-variant($name, $color);
+    }
+  }
+
+  @each $name, $color in $theme-colors-alt {
+    @include custom-control-input-variant($name, $color);
+  }
+
+  @each $name, $color in $colors-alt {
+    @include custom-control-input-variant($name, $color);
+  }
+}