webpack-bootstrap-ui-kit/src/scss/_components/_ui.form.basics.scss

132 lines
2.7 KiB
SCSS
Executable File

// date-time fields
input.date,
input.time {
&[readonly] {
background-color: $white;
}
}
.bootstrap-timepicker-widget,
.datepicker-dropdown {
border: 1px solid #ced4da;
box-shadow: 0 0 3px #999;
}
.bootstrap-timepicker-widget {
.glyphicon {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
font-family: Font Awesome\5 Free;
font-weight: 900;
}
.glyphicon-chevron-up:before {
content: '\f077';
}
.glyphicon-chevron-down:before {
content: '\f078';
}
input {
border: 1px solid #ced4da;
}
}
.form-inline {
margin-top: -1rem;
fieldset {
margin-top: 1rem;
}
.field {
display: flex;
}
.form-control {
width: 100%;
}
}
// select2 dropdowns bootstrap4 styling
.select2-container {
display: block;
width: 100% !important;
}
.select2-container--default {
&.select2-container--focus {
.select2-selection {
color: $input-focus-color;
background-color: $input-focus-bg;
border-color: $input-focus-border-color;
outline: 0;
// Avoid using mixin so we can pass custom focus shadow properly
@if $enable-shadows {
box-shadow: $input-box-shadow, $input-focus-box-shadow;
} @else {
box-shadow: $input-focus-box-shadow;
}
&.select2-selection--single {
}
&.select2-selection--multiple {
}
}
}
.select2-selection {
@extend .form-control;
.select2-selection__rendered {
line-height: inherit;
}
&.select2-selection--single {
}
&.select2-selection--multiple {
padding-top: 0;
padding-bottom: 0;
.select2-selection__choice {
@extend .badge;
@extend .badge-primary;
padding: $input-padding-y $input-padding-x;
border: 0;
}
.select2-selection__choice__remove {
color: color-yiq($primary);
}
}
}
.select2-results__option--highlighted[aria-selected] {
background: $primary;
color: color-yiq($primary);
}
}
.select2-dropdown {
border: $input-border-width solid $input-border-color;
.select2-search--dropdown {
padding: $input-padding-y $input-padding-x;
}
.select2-search__field {
@extend .form-control;
}
}