AdminLTE/build/scss/_forms.scss

440 lines
9.0 KiB
SCSS
Raw Normal View History

//
// Component: Forms
//
2015-10-31 21:00:16 +00:00
.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;
}
}
2015-10-31 21:00:16 +00:00
}
// Button groups
2015-10-31 21:00:16 +00:00
.btn-group-vertical {
.btn {
&.btn-flat:first-of-type,
&.btn-flat:last-of-type {
2015-10-31 21:00:16 +00:00
@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;
}
2015-10-31 21:00:16 +00:00
}
.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;
}
2015-10-31 21:00:16 +00:00
}
.form-group-sm {
.form-control + .form-control-feedback {
&.fa,
&.fas,
&.far,
&.fab,
&.fal,
&.fad,
&.svg-inline--fa,
&.ion {
line-height: $input-height-sm;
}
}
2015-10-31 21:00:16 +00:00
}
2018-03-17 17:07:55 +00:00
label:not(.form-check-label):not(.custom-file-label) {
2018-03-17 17:07:55 +00:00
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;
}
}
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;
}
}
}
// 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);
}
}
2020-09-23 14:08:15 +00:00
2020-11-30 07:45:57 +00:00
.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 () {
2020-11-30 07:45:57 +00:00
.form-control:not(.form-control-navbar):not(.form-control-sidebar),
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-11-30 07:45:57 +00:00
.form-control:not(.form-control-navbar):not(.form-control-sidebar):not(.is-invalid):not(:focus),
.custom-file-label,
.custom-file-label::after {
2020-09-24 07:08:20 +00:00
border-color: $gray-600;
}
2020-09-23 14:08:15 +00:00
select {
background-color: $dark;
color: $white;
border-color: $gray-600;
}
2021-04-06 23:22:03 +00:00
.custom-select {
background: $dark $custom-select-dark-background;
&[multiple]{
background: $dark;
}
}
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%);
}
2021-03-09 19:44:26 +00:00
@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);
2020-09-23 14:08:15 +00:00
}
}