399 lines
7.7 KiB
SCSS
399 lines
7.7 KiB
SCSS
|
|
// Basic Input
|
|
|
|
.form-check{
|
|
padding: 0;
|
|
padding-#{$dlab-pos-left}: 1.5em;
|
|
.form-check-input{
|
|
float: #{$dlab-pos-left};
|
|
margin-#{$dlab-pos-left}: -1.5em;
|
|
}
|
|
}
|
|
|
|
.form-control{
|
|
border: 1px solid var(--border);
|
|
padding: 0.3125rem 1.25rem;
|
|
color: var(--text-dark);
|
|
height: 2.85rem;
|
|
background-color: var(--card);
|
|
border-radius:$radius;
|
|
&::placeholder{
|
|
color: var(--text);
|
|
}
|
|
@include respond('laptop') {
|
|
height: 2.8rem;
|
|
}
|
|
&:hover,&:focus,&.active{
|
|
box-shadow: none;
|
|
background: var(--card);
|
|
color: var(--text-dark);
|
|
}
|
|
&.solid{
|
|
background-color: var(--light);
|
|
border: 1px solid var(--light);
|
|
&:hover,&:focus,&.active{
|
|
background-color: var(--light);
|
|
}
|
|
}
|
|
&:focus{
|
|
border-color:var(--rgba-primary-5);
|
|
}
|
|
&-lg {
|
|
min-height: 3.75rem;
|
|
padding: 0.5rem 1.1rem;
|
|
font-size: 1.09375rem;
|
|
border-radius: $radius ;
|
|
line-height: 2.8125rem;
|
|
}
|
|
&-sm{
|
|
min-height: 2.5rem;
|
|
height: auto;
|
|
border-radius: $radius;
|
|
}
|
|
|
|
}
|
|
.basic-form{
|
|
.btn.btn-primary{
|
|
flex: 0 0 auto;
|
|
|
|
@media only screen and (max-width: 1699px) and (min-width: 1600px){
|
|
padding: 0.688rem 0.675rem;
|
|
font-size: 0.875rem;
|
|
}
|
|
@media only screen and (max-width: 1490px) and (min-width: 1199px){
|
|
padding: 0.688rem 0.5rem;
|
|
font-size: 0.675rem;
|
|
flex: 0 0 25%;
|
|
}
|
|
|
|
}
|
|
}
|
|
.nice-select.form-control{
|
|
line-height: 2.2rem;
|
|
&-lg{
|
|
line-height:2.8125rem;
|
|
}
|
|
&-sm{
|
|
line-height:1.8rem;
|
|
}
|
|
}
|
|
|
|
.form-control[type="file"] {
|
|
line-height: 2.2rem;
|
|
padding-#{$dlab-pos-left}: 10px;
|
|
}
|
|
.form-control-sm[type="file"] {
|
|
line-height: 2rem;
|
|
padding-#{$dlab-pos-left}: 8px;
|
|
}
|
|
.form-control-lg[type="file"] {
|
|
line-height: 2.6rem;
|
|
padding-#{$dlab-pos-left}: 8px;
|
|
}
|
|
|
|
.input-rounded {
|
|
border-radius: 6.25rem;
|
|
}
|
|
.input-group-append .input-group-text {
|
|
border-radius: 0;
|
|
border-bottom-#{$dlab-pos-right}-radius: $radius;
|
|
border-bottom-#{$dlab-pos-right}-radius: $radius;
|
|
}
|
|
|
|
.input-group.input-group-sm {
|
|
.form-control.form-control-sm{
|
|
border-bottom-#{$dlab-pos-right}-radius: $radius;
|
|
border-bottom-#{$dlab-pos-right}-radius: $radius;
|
|
}
|
|
|
|
.input-group-text{
|
|
border-bottom-#{$dlab-pos-left}-radius: $radius;
|
|
border-bottom-#{$dlab-pos-left}-radius: $radius;
|
|
}
|
|
}
|
|
.input-group.input-group-lg{
|
|
.form-control.form-control-lg{
|
|
border-bottom-#{$dlab-pos-right}-radius: $radius;
|
|
border-bottom-#{$dlab-pos-right}-radius: $radius;
|
|
}
|
|
|
|
.input-group-text{
|
|
border-bottom-#{$dlab-pos-left}-radius: $radius;
|
|
border-bottom-#{$dlab-pos-left}-radius: $radius;
|
|
}
|
|
}
|
|
|
|
// Input Color
|
|
[data-theme-version="light"],
|
|
[data-theme-version="dark"] {
|
|
.input-primary{
|
|
.form-control{
|
|
border-color:var(--primary);
|
|
}
|
|
.input-group-text{
|
|
background-color:var(--primary);
|
|
color:$white;
|
|
}
|
|
}
|
|
.input-danger{
|
|
.form-control{
|
|
border-color:$danger;
|
|
}
|
|
.input-group-text{
|
|
background-color:$danger;
|
|
color:$white;
|
|
}
|
|
}
|
|
.input-info{
|
|
.form-control{
|
|
border-color:$info;
|
|
}
|
|
.input-group-text{
|
|
background-color:$info;
|
|
color:$white;
|
|
}
|
|
}
|
|
.input-success{
|
|
.form-control{
|
|
border-color:$success;
|
|
}
|
|
.input-group-text{
|
|
background-color:$success;
|
|
color:$white;
|
|
}
|
|
}
|
|
.input-warning{
|
|
.form-control{
|
|
border-color:$warning;
|
|
}
|
|
.input-group-text{
|
|
background-color:$warning;
|
|
color:$white;
|
|
}
|
|
}
|
|
}
|
|
// Input Outline
|
|
[data-theme-version="light"],
|
|
[data-theme-version="dark"] {
|
|
.input-primary-o{
|
|
.form-control{
|
|
border-color:var(--primary);
|
|
|
|
}
|
|
.input-group-text{
|
|
background-color:transparent;
|
|
border-color:var(--primary);
|
|
color:var(--primary);
|
|
}
|
|
}
|
|
.input-danger-o{
|
|
.form-control{
|
|
border-color:$danger;
|
|
}
|
|
.input-group-text{
|
|
background-color:transparent;
|
|
border-color:$danger;
|
|
color:$danger;
|
|
}
|
|
}
|
|
.input-info-o{
|
|
.form-control{
|
|
border-color:$info;
|
|
}
|
|
.input-group-text{
|
|
background-color:transparent;
|
|
border-color:$info;
|
|
color:$info;
|
|
}
|
|
}
|
|
.input-success-o{
|
|
.form-control{
|
|
border-color:$success;
|
|
}
|
|
.input-group-text{
|
|
background-color:transparent;
|
|
border-color:$success;
|
|
color:$success;
|
|
}
|
|
}
|
|
.input-warning-o{
|
|
.form-control{
|
|
border-color:$warning;
|
|
}
|
|
.input-group-text{
|
|
background-color:transparent;
|
|
border-color:$warning;
|
|
color:$warning;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.form-control-sm{
|
|
min-height: 2.25rem;
|
|
}
|
|
|
|
|
|
|
|
// Input Group
|
|
.input-group-text{
|
|
background-color:var(--light);
|
|
border: 0.0625rem solid transparent;
|
|
min-width: 3.125rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 0.532rem 0.75rem;
|
|
border-radius:$radius;
|
|
|
|
i{
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
|
|
.form-file-label{
|
|
height: 2.5rem;
|
|
padding: 0.5rem 0.75rem;
|
|
}
|
|
.input-group-prepend .btn,
|
|
.input-group-append .btn {
|
|
z-index: 0;
|
|
}
|
|
.custom-select{
|
|
background: none;
|
|
border-color: $border;
|
|
color: $dark;
|
|
&:focus{
|
|
box-shadow: none;
|
|
border-color: var(--primary);
|
|
color: var(--primary);
|
|
}
|
|
}
|
|
.form-file-label{
|
|
background: #656C73;
|
|
white-space: nowrap;
|
|
color: $white;
|
|
@at-root [data-theme-version="dark"] & {
|
|
background: $d-border;
|
|
border-color: $d-border;
|
|
color: $body-color;
|
|
}
|
|
}
|
|
|
|
.custom_file_input {
|
|
.form-file-label::after {
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
|
|
.form-control:disabled,
|
|
.form-control[readonly] {
|
|
background: var(--light);
|
|
opacity: 1;
|
|
}
|
|
|
|
.form-file{
|
|
border: 0.0625rem solid $border;
|
|
background: $white;
|
|
@at-root [data-theme-version="dark"] & {
|
|
background: $d-bg;
|
|
border-color: $d-border;
|
|
}
|
|
}
|
|
.input-group{
|
|
> .form-control-plaintext,
|
|
> .form-select,
|
|
> .form-file {
|
|
position: relative; // For focus state's z-index
|
|
flex: 1 1 auto;
|
|
// Add width 1% and flex-basis auto to ensure that button will not wrap out
|
|
// the column. Applies to IE Edge+ and Firefox. Chrome does not require this.
|
|
width: 1%;
|
|
margin-bottom: 0;
|
|
|
|
}
|
|
&> .form-file {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
|
|
.select2-container--default
|
|
.select2-selection--multiple
|
|
.select2-selection__choice{
|
|
border-radius:$radius;
|
|
}
|
|
|
|
.form-file{
|
|
.form-control{
|
|
margin:0;
|
|
border-radius:0;
|
|
border:0;
|
|
height:auto;
|
|
}
|
|
.form-control[type="file"] {
|
|
line-height: 28px;
|
|
padding-#{$dlab-pos-left}: 10px;
|
|
}
|
|
}
|
|
|
|
.form-label{
|
|
font-size: .8375rem;
|
|
color: var(--text-dark);
|
|
font-weight: 500;
|
|
&.required{
|
|
color: var(--text-dark);
|
|
&::after{
|
|
content: "*";
|
|
color: $danger;
|
|
margin-#{$dlab-pos-left}: 3px;
|
|
transform: scale(1.3);
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
.col-form-label{
|
|
color: var(--text-dark);
|
|
}
|
|
.input-hasicon{
|
|
position: relative;
|
|
.icon{
|
|
position: absolute;
|
|
height: 100%;
|
|
#{$dlab-pos-right}: 0;
|
|
top: 0;
|
|
width: 2rem;
|
|
display: flex;
|
|
align-items: center;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
.bootstrap-select.show-tick .dropdown-menu .selected span.check-mark {
|
|
#{$dlab-pos-right}: 15px;
|
|
#{$dlab-pos-left} : auto;
|
|
}
|
|
|
|
.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating){
|
|
border-top-#{$dlab-pos-right}-radius: 0 !important;
|
|
border-bottom-#{$dlab-pos-right}-radius: 0 !important;
|
|
border-top-#{$dlab-pos-left}-radius: $radius;
|
|
border-bottom-#{$dlab-pos-left}-radius: $radius;
|
|
}
|
|
.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
|
|
margin-#{$dlab-pos-left}: calc(var(--bs-border-width) * -1);
|
|
border-top-#{$dlab-pos-left}-radius: 0;
|
|
border-bottom-#{$dlab-pos-left}-radius: 0;
|
|
border-top-#{$dlab-pos-right}-radius: $radius;
|
|
border-bottom-#{$dlab-pos-right}-radius: $radius;
|
|
}
|
|
.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n + 3){
|
|
border-top-#{$dlab-pos-right}-radius: 0;
|
|
border-bottom-#{$dlab-pos-right}-radius: 0;
|
|
border-top-#{$dlab-pos-left}-radius: $radius;
|
|
border-bottom-#{$dlab-pos-left}-radius: $radius;
|
|
}
|
|
.input-group button.dropdown-toggle.dropdown-toggle-split:nth-child(2){
|
|
border-radius: 0 !important;
|
|
}
|