FM / mixins

/var/www/cobraambalaj/node_modules/shards-ui/src/scss/mixins/

/var/www/cobraambalaj/node_modules/shards-ui/src/scss/mixins

Name	Size	Mode	Actions
_alert.scss	241	0644	edit dl rm
_background-variant.scss	783	0644	edit dl rm
_badge.scss	229	0644	edit dl rm
_border-radius.scss	722	0644	edit dl rm
_box-shadow.scss	87	0644	edit dl rm
_breakpoints.scss	4467	0644	edit dl rm
_buttons.scss	3336	0644	edit dl rm
_clearfix.scss	93	0644	edit dl rm
_float.scss	146	0644	edit dl rm
_forms.scss	3612	0644	edit dl rm
_gradients.scss	2023	0644	edit dl rm
_hover.scss	782	0644	edit dl rm
_image.scss	1171	0644	edit dl rm
_list-group.scss	527	0644	edit dl rm
_lists.scss	168	0644	edit dl rm
_nav-divider.scss	219	0644	edit dl rm
_pagination.scss	453	0644	edit dl rm
_reset-text.scss	546	0644	edit dl rm
_resize.scss	202	0644	edit dl rm
_screen-reader.scss	777	0644	edit dl rm
_size.scss	98	0644	edit dl rm
_table-row.scss	647	0644	edit dl rm
_text-emphasis.scss	258	0644	edit dl rm
_text-hide.scss	230	0644	edit dl rm
_text-truncate.scss	168	0644	edit dl rm
_transition.scss	192	0644	edit dl rm
_visibility.scss	133	0644	edit dl rm

Edit: /var/www/cobraambalaj/node_modules/shards-ui/src/scss/mixins/_forms.scss (3612B)

// Forms mixins

// Form control focus state
@mixin form-control-focus() {
  &:focus {
    color: $input-focus-color;
    background-color: $input-focus-bg;
    border-color: $input-focus-border-color;
    
    @if $enable-shadows {
      box-shadow: $input-focus-box-shadow;
    }

// Set the border color to the focused state border color
    // when the input is also hovered.
    &:hover {
      border-color: $input-focus-border-color;
    }
  }
}

@mixin form-validation-state($state, $color) {
  .#{$state}-feedback {
    margin-top: $form-feedback-margin-top;
    font-size: $form-feedback-font-size;
    color: $color;
  }

.#{$state}-tooltip {
    background-color: rgba($color, .8);
  }

.form-control,
  .custom-select {
    .was-validated &:#{$state},
    &.is-#{$state} {
      border-color: $color;
      
      @include box-shadow(0 5px 11.5px rgba($color, .1));

&:focus {
        box-shadow: 0 5px 11.5px rgba($color, .1), 0 1px 1px .1rem rgba($color, .2);
      }

&:hover {
        border-color: $color;
      }
    }
  }

.form-check-input {
    .was-validated &:#{$state},
    &.is-#{$state} {
      ~ .form-check-label {
        color: $color;
      }
    }
  }

.custom-control-input {
    .was-validated &:#{$state},
    &.is-#{$state} {
      ~ .custom-control-label {
        color: $color;

&::before {
          background-color: lighten($color, 20%);
          border-color: lighten($color, 10);
        }
      }

&:checked {
        ~ .custom-control-label::before {
          @include gradient-bg(lighten($color, 10%));
        }
      }

&:focus {
        ~ .custom-control-label::before {
          box-shadow: 0 .313rem .719rem rgba($color,.1), 0 .156rem .125rem rgba($black, .06);
        }
      }
    }
  }

// Custom file input
  .custom-file-input {
    .was-validated &:#{$state},
    &.is-#{$state} {
      ~ .custom-file-label {
        color: $color;
        border-color: $color;

&::after {
          background-color: lighten($color, 40);
          border-color: lighten($color, 10);
          color: $color;
        }
      }
    }

&:focus {
      .was-validated &:#{$state},
      &.is-#{$state} {
        ~ .custom-file-label {
          border-color: $color;
          box-shadow: 0 5px 11.5px rgba($color, .1), 0 1px 1px .1rem rgba($color, .2);
        }
      }
    }

// Fix default custom input hover color issue on validated
    // custom file inputs.
    &:hover {
      .was-validated &:#{$state},
      &.is-#{$state} {
        ~ .custom-file-label {
          border-color: $color;
        }
      }
    }
  }

// Custom toggles validation
  .custom-toggle {
    .custom-control-input {
      &:not(:checked) {
        .was-validated &:#{$state},
        &.is-#{$state} {
          ~ .custom-control-label::before {
            background-color: $custom-toggle-invalid-background-color;
          }
        }
      }

// Valid custom toggle
      .was-validated &:valid,
      &.is-valid {
        ~ .custom-control-label {
          &::before {
            background-color: $custom-toggle-checked-background;
          }
        }
      }

// Invalid custom toggle
      .was-validated &:invalid,
      &.is-invalid {
        ~ .custom-control-label {
          &::after {
            background-color: $custom-toggle-invalid-knob-background-color;
          }
        }

&:focus {
          ~ .custom-control-label::before {
            box-shadow: 0 .313rem .719rem rgba($color,.1), 0 .156rem .125rem rgba($black, .06);
          }
        }
      }
    } 
  }
}

cmd: