2019-07-18 14:22:11 +00:00
|
|
|
//
|
|
|
|
// Component: Forms
|
|
|
|
//
|
2020-05-30 13:06:11 +00:00
|
|
|
|
2015-10-31 21:00:16 +00:00
|
|
|
.form-group {
|
2016-10-19 15:24:30 +00:00
|
|
|
&.has-icon {
|
|
|
|
position: relative;
|
2019-06-28 08:02:07 +00:00
|
|
|
|
2016-10-19 15:24:30 +00:00
|
|
|
.form-control {
|
|
|
|
padding-right: 35px;
|
|
|
|
}
|
2019-06-28 08:02:07 +00:00
|
|
|
|
2016-10-19 15:24:30 +00:00
|
|
|
.form-icon {
|
2019-06-28 08:02:07 +00:00
|
|
|
background-color: transparent;
|
|
|
|
border: 0;
|
2016-10-19 15:24:30 +00:00
|
|
|
cursor: pointer;
|
2019-06-28 08:02:07 +00:00
|
|
|
font-size: 1rem;
|
|
|
|
// margin-top: -3px;
|
|
|
|
padding: $input-btn-padding-y $input-btn-padding-x;
|
2016-10-19 15:24:30 +00:00
|
|
|
position: absolute;
|
|
|
|
right: 3px;
|
|
|
|
top: 0;
|
|
|
|
}
|
|
|
|
}
|
2015-10-31 21:00:16 +00:00
|
|
|
}
|
|
|
|
|
2019-06-28 08:02:07 +00:00
|
|
|
// Button groups
|
2015-10-31 21:00:16 +00:00
|
|
|
.btn-group-vertical {
|
|
|
|
.btn {
|
2019-07-18 14:22:11 +00:00
|
|
|
&.btn-flat:first-of-type,
|
|
|
|
&.btn-flat:last-of-type {
|
2015-10-31 21:00:16 +00:00
|
|
|
@include border-radius(0);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-06-28 08:02:07 +00:00
|
|
|
// Support icons in form-control
|
2019-06-05 11:34:15 +00:00
|
|
|
.form-control-feedback {
|
2019-06-28 08:02:07 +00:00
|
|
|
&.fa,
|
|
|
|
&.fas,
|
|
|
|
&.far,
|
|
|
|
&.fab,
|
2020-07-22 14:50:44 +00:00
|
|
|
&.fal,
|
|
|
|
&.fad,
|
2020-07-24 15:59:40 +00:00
|
|
|
&.svg-inline--fa,
|
2019-06-28 08:02:07 +00:00
|
|
|
&.ion {
|
2019-06-05 11:34:15 +00:00
|
|
|
line-height: $input-height;
|
|
|
|
}
|
2015-10-31 21:00:16 +00:00
|
|
|
}
|
|
|
|
|
2020-05-30 13:06:11 +00:00
|
|
|
.input-lg + .form-control-feedback,
|
2019-06-28 08:02:07 +00:00
|
|
|
.input-group-lg + .form-control-feedback {
|
|
|
|
&.fa,
|
|
|
|
&.fas,
|
|
|
|
&.far,
|
|
|
|
&.fab,
|
2020-07-22 14:50:44 +00:00
|
|
|
&.fal,
|
|
|
|
&.fad,
|
2020-07-24 15:59:40 +00:00
|
|
|
&.svg-inline--fa,
|
2019-06-28 08:02:07 +00:00
|
|
|
&.ion {
|
|
|
|
line-height: $input-height-lg;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.form-group-lg {
|
|
|
|
.form-control + .form-control-feedback {
|
|
|
|
&.fa,
|
|
|
|
&.fas,
|
|
|
|
&.far,
|
|
|
|
&.fab,
|
2020-07-22 14:50:44 +00:00
|
|
|
&.fal,
|
|
|
|
&.fad,
|
2020-07-24 15:59:40 +00:00
|
|
|
&.svg-inline--fa,
|
2019-06-28 08:02:07 +00:00
|
|
|
&.ion {
|
|
|
|
line-height: $input-height-lg;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-05-30 13:06:11 +00:00
|
|
|
.input-sm + .form-control-feedback,
|
2019-06-28 08:02:07 +00:00
|
|
|
.input-group-sm + .form-control-feedback {
|
|
|
|
&.fa,
|
|
|
|
&.fas,
|
|
|
|
&.far,
|
|
|
|
&.fab,
|
2020-07-22 14:50:44 +00:00
|
|
|
&.fal,
|
|
|
|
&.fad,
|
2020-07-24 15:59:40 +00:00
|
|
|
&.svg-inline--fa,
|
2019-06-28 08:02:07 +00:00
|
|
|
&.ion {
|
|
|
|
line-height: $input-height-sm;
|
|
|
|
}
|
2015-10-31 21:00:16 +00:00
|
|
|
}
|
|
|
|
|
2019-06-28 08:02:07 +00:00
|
|
|
.form-group-sm {
|
|
|
|
.form-control + .form-control-feedback {
|
|
|
|
&.fa,
|
|
|
|
&.fas,
|
|
|
|
&.far,
|
|
|
|
&.fab,
|
2020-07-22 14:50:44 +00:00
|
|
|
&.fal,
|
|
|
|
&.fad,
|
2020-07-24 15:59:40 +00:00
|
|
|
&.svg-inline--fa,
|
2019-06-28 08:02:07 +00:00
|
|
|
&.ion {
|
|
|
|
line-height: $input-height-sm;
|
|
|
|
}
|
|
|
|
}
|
2015-10-31 21:00:16 +00:00
|
|
|
}
|
2018-03-17 17:07:55 +00:00
|
|
|
|
2019-12-04 13:54:06 +00:00
|
|
|
label:not(.form-check-label):not(.custom-file-label) {
|
2018-03-17 17:07:55 +00:00
|
|
|
font-weight: $font-weight-bold;
|
|
|
|
}
|
2019-06-05 11:34:15 +00:00
|
|
|
|
|
|
|
.warning-feedback {
|
|
|
|
@include font-size($form-feedback-font-size);
|
2020-05-30 13:06:11 +00:00
|
|
|
color: theme-color("warning");
|
2019-06-28 08:02:07 +00:00
|
|
|
display: none;
|
|
|
|
margin-top: $form-feedback-margin-top;
|
|
|
|
width: 100%;
|
2019-06-05 11:34:15 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.warning-tooltip {
|
2019-06-28 08:02:07 +00:00
|
|
|
@include border-radius($form-feedback-tooltip-border-radius);
|
|
|
|
@include font-size($form-feedback-tooltip-font-size);
|
2020-05-30 13:06:11 +00:00
|
|
|
background-color: rgba(theme-color("warning"), $form-feedback-tooltip-opacity);
|
|
|
|
color: color-yiq(theme-color("warning"));
|
2019-06-05 11:34:15 +00:00
|
|
|
display: none;
|
2019-06-28 08:02:07 +00:00
|
|
|
line-height: $form-feedback-tooltip-line-height;
|
|
|
|
margin-top: .1rem;
|
2019-06-05 11:34:15 +00:00
|
|
|
max-width: 100%; // Contain to parent when possible
|
|
|
|
padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
|
2019-06-28 08:02:07 +00:00
|
|
|
position: absolute;
|
|
|
|
top: 100%;
|
|
|
|
z-index: 5;
|
2019-06-05 11:34:15 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.form-control {
|
|
|
|
&.is-warning {
|
2020-05-30 13:06:11 +00:00
|
|
|
border-color: theme-color("warning");
|
2019-06-05 11:34:15 +00:00
|
|
|
|
|
|
|
@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 {
|
2020-05-30 13:06:11 +00:00
|
|
|
border-color: theme-color("warning");
|
|
|
|
box-shadow: 0 0 0 $input-focus-width rgba(theme-color("warning"), .25);
|
2019-06-05 11:34:15 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
~ .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 {
|
2020-05-30 13:06:11 +00:00
|
|
|
border-color: theme-color("warning");
|
2019-06-05 11:34:15 +00:00
|
|
|
|
|
|
|
@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 {
|
2020-05-30 13:06:11 +00:00
|
|
|
border-color: theme-color("warning");
|
|
|
|
box-shadow: 0 0 0 $input-focus-width rgba(theme-color("warning"), .25);
|
2019-06-05 11:34:15 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
~ .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 {
|
2020-05-30 13:06:11 +00:00
|
|
|
color: theme-color("warning");
|
2019-06-05 11:34:15 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
~ .warning-feedback,
|
|
|
|
~ .warning-tooltip {
|
|
|
|
display: block;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-06-28 08:02:07 +00:00
|
|
|
.custom-control-input.is-warning {
|
|
|
|
~ .custom-control-label {
|
2020-05-30 13:06:11 +00:00
|
|
|
color: theme-color("warning");
|
2019-06-05 11:34:15 +00:00
|
|
|
|
2019-06-28 08:02:07 +00:00
|
|
|
&::before {
|
2020-05-30 13:06:11 +00:00
|
|
|
border-color: theme-color("warning");
|
2019-06-05 11:34:15 +00:00
|
|
|
}
|
2019-06-28 08:02:07 +00:00
|
|
|
}
|
2019-06-05 11:34:15 +00:00
|
|
|
|
2019-06-28 08:02:07 +00:00
|
|
|
~ .warning-feedback,
|
|
|
|
~ .warning-tooltip {
|
|
|
|
display: block;
|
|
|
|
}
|
2019-06-05 11:34:15 +00:00
|
|
|
|
2019-06-28 08:02:07 +00:00
|
|
|
&:checked {
|
|
|
|
~ .custom-control-label::before {
|
2020-05-30 13:06:11 +00:00
|
|
|
@include gradient-bg(lighten(theme-color("warning"), 10%));
|
|
|
|
border-color: lighten(theme-color("warning"), 10%);
|
2019-06-05 11:34:15 +00:00
|
|
|
}
|
2019-06-28 08:02:07 +00:00
|
|
|
}
|
2019-06-05 11:34:15 +00:00
|
|
|
|
2019-06-28 08:02:07 +00:00
|
|
|
&:focus {
|
|
|
|
~ .custom-control-label::before {
|
2020-05-30 13:06:11 +00:00
|
|
|
box-shadow: 0 0 0 $input-focus-width rgba(theme-color("warning"), .25);
|
2019-06-28 08:02:07 +00:00
|
|
|
}
|
2019-06-05 11:34:15 +00:00
|
|
|
|
2019-06-28 08:02:07 +00:00
|
|
|
&:not(:checked) ~ .custom-control-label::before {
|
2020-05-30 13:06:11 +00:00
|
|
|
border-color: theme-color("warning");
|
2019-06-05 11:34:15 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// custom file
|
|
|
|
.custom-file-input {
|
|
|
|
&.is-warning {
|
|
|
|
~ .custom-file-label {
|
2020-05-30 13:06:11 +00:00
|
|
|
border-color: theme-color("warning");
|
2019-06-05 11:34:15 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
~ .warning-feedback,
|
|
|
|
~ .warning-tooltip {
|
|
|
|
display: block;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:focus {
|
|
|
|
~ .custom-file-label {
|
2020-05-30 13:06:11 +00:00
|
|
|
border-color: theme-color("warning");
|
|
|
|
box-shadow: 0 0 0 $input-focus-width rgba(theme-color("warning"), .25);
|
2019-06-05 11:34:15 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2019-06-07 07:14:05 +00:00
|
|
|
|
2020-09-22 12:34:16 +00:00
|
|
|
// body.text-sm support
|
|
|
|
body.text-sm {
|
|
|
|
.input-group-text {
|
|
|
|
font-size: $font-size-sm;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-09-22 13:01:56 +00:00
|
|
|
// 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;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-06-26 14:12:40 +00:00
|
|
|
// custom switch color variations
|
2019-06-07 07:14:05 +00:00
|
|
|
.custom-switch {
|
|
|
|
@each $name, $color in $theme-colors {
|
2019-07-18 14:22:11 +00:00
|
|
|
@include custom-switch-variant($name, $color);
|
2019-06-07 07:14:05 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
@each $name, $color in $colors {
|
2019-07-18 14:22:11 +00:00
|
|
|
@include custom-switch-variant($name, $color);
|
2019-06-28 08:02:07 +00:00
|
|
|
}
|
2019-06-07 07:14:05 +00:00
|
|
|
}
|
|
|
|
|
2019-06-26 14:12:40 +00:00
|
|
|
// custom range color variations
|
|
|
|
.custom-range {
|
|
|
|
@each $name, $color in $theme-colors {
|
2019-07-18 14:22:11 +00:00
|
|
|
@include custom-range-variant($name, $color);
|
2019-06-26 14:12:40 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
@each $name, $color in $colors {
|
2019-07-18 14:22:11 +00:00
|
|
|
@include custom-range-variant($name, $color);
|
2019-06-28 08:02:07 +00:00
|
|
|
}
|
2019-06-26 14:12:40 +00:00
|
|
|
}
|
2020-09-22 13:21:52 +00:00
|
|
|
|
|
|
|
// 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);
|
|
|
|
}
|
2020-09-23 06:46:54 +00:00
|
|
|
|
|
|
|
.custom-control-input-outline {
|
|
|
|
~ .custom-control-label::before {
|
|
|
|
background-color: transparent !important;
|
|
|
|
box-shadow: none;
|
|
|
|
}
|
|
|
|
&:checked ~ .custom-control-label::before {
|
|
|
|
@include gradient-bg(transparent);
|
|
|
|
}
|
|
|
|
}
|
2020-09-23 14:08:15 +00:00
|
|
|
|
|
|
|
.dark-mode {
|
2020-09-24 07:08:20 +00:00
|
|
|
.form-control,
|
2020-09-23 14:08:15 +00:00
|
|
|
.custom-select,
|
|
|
|
.custom-file-label,
|
|
|
|
.custom-file-label::after,
|
|
|
|
.custom-control-label::before,
|
|
|
|
.input-group-text {
|
|
|
|
background-color: $dark;
|
|
|
|
color: $white;
|
|
|
|
}
|
2020-09-24 07:08:20 +00:00
|
|
|
.form-control:not(.form-control-navbar):not(.is-invalid):not(:focus) {
|
|
|
|
border-color: $gray-600;
|
|
|
|
}
|
2020-09-23 14:08:15 +00:00
|
|
|
select {
|
|
|
|
background-color: $dark;
|
|
|
|
color: $white;
|
|
|
|
border-color: $gray-600;
|
|
|
|
}
|
|
|
|
|
2020-09-24 07:08:20 +00:00
|
|
|
.input-group-text {
|
|
|
|
border-color: $gray-600;
|
|
|
|
}
|
|
|
|
|
2020-09-23 14:08:15 +00:00
|
|
|
.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;
|
|
|
|
}
|
|
|
|
|
|
|
|
.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%);
|
|
|
|
}
|
|
|
|
}
|
2020-09-24 07:08:20 +00:00
|
|
|
|
|
|
|
.navbar-dark {
|
|
|
|
.btn-navbar,
|
|
|
|
.form-control-navbar {
|
|
|
|
background-color: $dark;
|
|
|
|
border: $input-border-width solid $gray-600;
|
|
|
|
}
|
|
|
|
.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($dark, 5%);
|
|
|
|
color: $white;
|
|
|
|
border: $input-border-width solid $gray-600;
|
|
|
|
border-left: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2020-09-23 14:08:15 +00:00
|
|
|
}
|