654 lines
14 KiB
SCSS
654 lines
14 KiB
SCSS
// placeholder spacific scss
|
|
.form-control{
|
|
&::placeholder{
|
|
font-size: 0.85rem;
|
|
color: rgba($black, 0.4);
|
|
transition: all .2s ease;
|
|
}
|
|
|
|
&:-ms-input-placeholder {
|
|
color: darken($body-bg, 20%);
|
|
}
|
|
|
|
&:focus{
|
|
&::placeholder{
|
|
transform: translate(5px);
|
|
transition: all .2s ease;
|
|
}
|
|
~.form-control-position{
|
|
i{
|
|
color: $primary;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Form specific Scss */
|
|
|
|
// Form Label Scscc
|
|
label{
|
|
color: darken($body-bg, 70%);
|
|
font-size: 0.85rem;
|
|
margin-bottom: 0;
|
|
padding-left: 0.2rem;
|
|
}
|
|
|
|
// Text area fontsize and line height
|
|
textarea.form-control{
|
|
line-height: 1.6rem;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
// Form group Scscc
|
|
.form-group{
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
|
|
// Form control Scscc
|
|
.form-control{
|
|
border: 1px solid darken($body-bg, 12%);
|
|
color: darken($body-bg, 60%);
|
|
}
|
|
// Used for Card - Check it and remove if not used
|
|
.form-section{
|
|
color: $gray-600;
|
|
line-height: 3rem;
|
|
margin-bottom: 20px;
|
|
border-bottom: 1px solid $gray-600;
|
|
|
|
i{
|
|
font-size: 20px;
|
|
margin-left: 5px;
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
|
|
/* .form-body{
|
|
overflow: hidden;
|
|
} */
|
|
|
|
// Used for Card - Check it and remove if not used
|
|
.form-actions{
|
|
border-top: 1px solid darken($body-bg, 10%);
|
|
padding: 20px 0;
|
|
margin-top: 20px;
|
|
|
|
&.filled{
|
|
background-color: $body-bg;
|
|
}
|
|
&.center{
|
|
text-align: center;
|
|
}
|
|
&.right{
|
|
text-align: right;
|
|
}
|
|
|
|
&.top{
|
|
border-top: 0;
|
|
border-bottom: 1px solid darken($body-bg, 10%);
|
|
margin-top: 0;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
@include media-breakpoint-down(sm) {
|
|
.buttons-group{
|
|
float: left !important;
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Form-horizotnal layout
|
|
.form-horizontal{
|
|
.form-group{
|
|
@include media-breakpoint-up(sm) {
|
|
.label-control{
|
|
text-align: right;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Form Control Large
|
|
.form-control.form-control-lg{
|
|
padding: 1rem;
|
|
&::placeholder{
|
|
font-size: 1.25rem;
|
|
}
|
|
}
|
|
|
|
// Form Control Small
|
|
.form-control.form-control-sm{
|
|
padding: 0.6rem;
|
|
&::placeholder{
|
|
font-size: 0.7rem;
|
|
}
|
|
}
|
|
|
|
|
|
// Custom-File-Input
|
|
.custom-file-label{
|
|
padding: 0.4rem $custom-file-padding-x;
|
|
&::after{
|
|
padding: 0.4rem $custom-file-padding-x;
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
// Select Inputs Specific SCSS
|
|
select.form-control {
|
|
&:not([multiple="multiple"]){
|
|
//background-image:
|
|
// url("../images/pages/arrow-down.png");
|
|
background-position:
|
|
calc(100% - 12px) 13px,
|
|
calc(100% - 20px) 13px,
|
|
100% 0;
|
|
background-size:
|
|
12px 12px,
|
|
10px 10px;
|
|
background-repeat: no-repeat;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
padding-right: 1.5rem;
|
|
}
|
|
}
|
|
|
|
// For customs-select remove double arrow
|
|
.custom-select{
|
|
-moz-appearance: none; // For firefox
|
|
-webkit-appearance: none; // for chorme
|
|
}
|
|
|
|
// input group addon
|
|
.input-group-addon {
|
|
background-color: #ECEFF1;
|
|
border-color: #BABFC7;
|
|
}
|
|
|
|
// Custom Checkbox
|
|
.custom-control-label::before, .custom-control-label::after{
|
|
width: 1.143rem;
|
|
height: 1.143rem;
|
|
top: 0.08rem;
|
|
}
|
|
// Custom-checkbox when not disabled and active
|
|
.custom-control-input:not(:disabled){
|
|
&:active ~ .custom-control-label{
|
|
&::before {
|
|
background-color: $primary;
|
|
border-color: $primary;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Floating label Group */
|
|
.form-label-group{
|
|
position: relative;
|
|
margin-bottom: 1.5rem;
|
|
|
|
// Form-Control-Large in Floating Label Group
|
|
.form-control-lg{
|
|
~ label{
|
|
font-size: 1.25rem;
|
|
padding: 1rem;
|
|
}
|
|
}
|
|
|
|
// Form-Control-Small in Floating Label Group
|
|
.form-control-sm{
|
|
~ label{
|
|
font-size: 0.7rem;
|
|
}
|
|
}
|
|
|
|
// Form-label
|
|
> label {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
display: block;
|
|
transition: all .25s ease-in-out;
|
|
padding: .6rem;
|
|
pointer-events: none;
|
|
cursor: text;
|
|
color: rgba($black, 0.4);
|
|
font-size: .85rem;
|
|
opacity: 0;
|
|
}
|
|
// form-input
|
|
> input, textarea{
|
|
padding: .6rem;
|
|
|
|
// from-input on focus change label color
|
|
&:focus, &:not(:active){
|
|
&:not(:placeholder-shown) ~ label {
|
|
color: rgba($primary, 1) !important;
|
|
transition: all .25s ease-in-out;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
&:not(:focus){
|
|
&:not(:placeholder-shown) ~ label {
|
|
color: rgba($black, 0.4) !important;
|
|
}
|
|
}
|
|
// form-label after entering text in input box
|
|
&:not(:placeholder-shown) ~ label {
|
|
padding : .25rem 0;
|
|
font-size: .7rem;
|
|
top: -20px;
|
|
left: 3px;
|
|
}
|
|
}
|
|
|
|
// has-icon left with input
|
|
&.has-icon-left{
|
|
> label{
|
|
left: 36px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.vs-checkbox-con{
|
|
position: relative;
|
|
display: flex;
|
|
align-items:center;
|
|
justify-content: flex-start;
|
|
margin: .25rem 0;
|
|
input {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0;
|
|
z-index: 200;
|
|
cursor: pointer;
|
|
top: 0;
|
|
&:checked{
|
|
~.vs-checkbox{
|
|
transform: rotate(0deg);
|
|
border-color: $primary;
|
|
.vs-checkbox--check{
|
|
transform: translate(0);
|
|
background-color: $primary;
|
|
.vs-icon{
|
|
transform: translate(0);
|
|
line-height: 1.2;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
&.vs-checkbox-sm{
|
|
.vs-checkbox--check .vs-icon{
|
|
font-size: 0.75rem;
|
|
}
|
|
}
|
|
&.vs-checkbox-lg{
|
|
.vs-checkbox--check .vs-icon{
|
|
font-size: 1.2rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&:active:checked+.vs-checkbox{
|
|
.vs-checkbox--check{
|
|
transform: translate(3px);
|
|
background-color: $primary;
|
|
.vs-icon{
|
|
opacity: 1;
|
|
transform: translate(6px);
|
|
}
|
|
}
|
|
}
|
|
&:disabled{
|
|
cursor: default;
|
|
pointer-events: none;
|
|
+.vs-checkbox {
|
|
cursor: default;
|
|
opacity: .5;
|
|
}
|
|
}
|
|
}
|
|
.vs-checkbox{
|
|
cursor: pointer;
|
|
position: relative;
|
|
width: $vs-checkbox-box;
|
|
height: $vs-checkbox-box;
|
|
border-width: $vs-checkbox-radio-border-width;
|
|
border-style: solid;
|
|
border-color: $vs-checkbox-radio-border-color;
|
|
border-radius: 2px;
|
|
transform: rotate(-90deg);
|
|
transition: all .2s ease;
|
|
overflow: hidden;
|
|
margin-right: .5rem;
|
|
&.vs-checkbox-sm{
|
|
width: $vs-checkbox-box-sm;
|
|
height: $vs-checkbox-box-sm;
|
|
}
|
|
&.vs-checkbox-lg{
|
|
width: $vs-checkbox-box-lg;
|
|
height: $vs-checkbox-box-lg;
|
|
}
|
|
.vs-checkbox--check{
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
transform: translate(100%);
|
|
transform-origin: right;
|
|
transition: all .2s ease;
|
|
z-index: 10;
|
|
.vs-icon{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: $white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.vs-radio-con{
|
|
position: relative;
|
|
display: flex;
|
|
align-items:center;
|
|
justify-content: flex-start;
|
|
margin: .25rem 0;
|
|
input {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0;
|
|
z-index: 200;
|
|
cursor: pointer;
|
|
&:checked{
|
|
~.vs-radio{
|
|
transform: rotate(0deg);
|
|
outline: 0;
|
|
.vs-radio--circle{
|
|
background: rgba($primary,1);
|
|
box-shadow: 0 3px 12px 0 rgba($primary,.4);
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
.vs-radio--border{
|
|
opacity: 0;
|
|
transform: scale(0.3);
|
|
}
|
|
}
|
|
}
|
|
&:disabled{
|
|
cursor: default;
|
|
pointer-events: none;
|
|
+.vs-radio {
|
|
cursor: default;
|
|
opacity: .5;
|
|
}
|
|
}
|
|
&:active{
|
|
~.vs-radio{
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
}
|
|
}
|
|
.vs-radio{
|
|
cursor: pointer;
|
|
position: relative;
|
|
width: $vs-radio-box;
|
|
height: $vs-radio-box;
|
|
transition: all .2s ease;
|
|
margin-right: .5rem;
|
|
&.vs-radio-sm{
|
|
width: $vs-radio-box-sm;
|
|
height: $vs-radio-box-sm;
|
|
}
|
|
&.vs-radio-lg{
|
|
width: $vs-radio-box-lg;
|
|
height: $vs-radio-box-lg;
|
|
}
|
|
.vs-radio--border, .vs-radio--circle {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
transition: all .25s ease;
|
|
top: 0;
|
|
border-radius: 50%;
|
|
}
|
|
.vs-radio--border{
|
|
background: transparent;
|
|
border: $vs-checkbox-radio-border-width solid $vs-checkbox-radio-border-color;
|
|
}
|
|
.vs-radio--circle{
|
|
opacity: 0;
|
|
transform: scale(0.1);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* Textarea with Counter */
|
|
|
|
.counter-value{
|
|
background-color: $primary;
|
|
color: $white;
|
|
padding: 1px 6px;
|
|
font-size: .6rem;
|
|
border-radius: 0 0 5px 5px;
|
|
margin-right: 1rem;
|
|
}
|
|
|
|
|
|
/* Input box with icon divider */
|
|
|
|
.form-group{
|
|
&.input-divider-left{
|
|
.form-control-position{
|
|
i{
|
|
padding: 0.2rem 0.5rem;
|
|
border-right: 1px solid darken($body-bg, 12%);
|
|
}
|
|
}
|
|
}
|
|
&.input-divider-right{
|
|
.form-control-position{
|
|
i{
|
|
padding: 0.2rem 0.5rem;
|
|
border-left: 1px solid darken($body-bg, 12%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* input-groups-lg and input-groups-sm */
|
|
|
|
.input-group-lg, .input-group-sm{
|
|
.form-control{
|
|
padding: 0.7rem;
|
|
}
|
|
}
|
|
|
|
/* Bootstrap touchspin */
|
|
|
|
.bootstrap-touchspin{
|
|
&.input-group{
|
|
width: 8.4rem;
|
|
align-items: center;
|
|
.form-control{
|
|
padding: 5px;
|
|
height: auto;
|
|
border: 0;
|
|
background-color: $body-bg;
|
|
border-radius: 5px !important;
|
|
text-align: center;
|
|
font-weight: 500;
|
|
&:focus{
|
|
z-index: 1;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.bootstrap-touchspin-injected{
|
|
margin: 0 !important;
|
|
.bootstrap-touchspin-down, .bootstrap-touchspin-up{
|
|
padding: 0;
|
|
min-width: 22px;
|
|
min-height: 22px;
|
|
border-radius: 5px !important;
|
|
position: relative;
|
|
i{
|
|
font-size: 0.8rem;
|
|
position: relative;
|
|
top: -1px;
|
|
}
|
|
}
|
|
.bootstrap-touchspin-down{
|
|
left: 12px;
|
|
}
|
|
.bootstrap-touchspin-up{
|
|
right: 12px;
|
|
}
|
|
}
|
|
|
|
// Disabled Touchspin
|
|
&.disabled-touchspin{
|
|
.bootstrap-touchspin-down, .bootstrap-touchspin-up{
|
|
background-color: rgba(0,0,0,.5) !important;
|
|
cursor: default;
|
|
opacity: .5;
|
|
}
|
|
}
|
|
|
|
// Touchspin Large
|
|
&.input-group-lg{
|
|
width: 9.375rem;
|
|
.touchspin{
|
|
&.form-control{
|
|
height: auto !important;
|
|
}
|
|
}
|
|
.bootstrap-touchspin-down, .bootstrap-touchspin-up{
|
|
i{
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Touchspin Small
|
|
&.input-group-sm{
|
|
width: 6.25rem;
|
|
.touchspin{
|
|
&.form-control{
|
|
height: auto !important;
|
|
}
|
|
}
|
|
.bootstrap-touchspin-injected{
|
|
.bootstrap-touchspin-down, .bootstrap-touchspin-up{
|
|
min-width: 16px;
|
|
min-height: 16px;
|
|
padding-top: 2.2px;
|
|
i{
|
|
font-size: 0.6rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn.disabled-max-min{
|
|
background-color: rgba(0,0,0,.5) !important;
|
|
cursor: default;
|
|
}
|
|
|
|
|
|
/* Number Type Input Box Scss for - Remove arrow on hover */
|
|
input[type=number]::-webkit-inner-spin-button,
|
|
input[type=number]::-webkit-outer-spin-button{
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
/* Number Type Input Box Scss for Touchspin - Remove arrow for firefox */
|
|
.bootstrap-touchspin{
|
|
&.input-group{
|
|
input[type=number] {-moz-appearance: textfield;}
|
|
}
|
|
}
|
|
|
|
|
|
// IE Specific CSS
|
|
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
|
|
|
|
// floating Label Group
|
|
.form-label-group{
|
|
label {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
// Bootstrap Select
|
|
select.form-control {
|
|
&:not([multiple="multiple"]){
|
|
background: none;
|
|
}
|
|
}
|
|
// Custom-File-Input
|
|
.custom-file-label{
|
|
&::after{
|
|
padding: 1.34rem 0.7rem 1.25rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Date & Time Picker - Form Control Bg color
|
|
.picker__input{
|
|
&.form-control {
|
|
background-color: $white;
|
|
}
|
|
}
|
|
|
|
// input Groups specific SCSS
|
|
.input-group {
|
|
.form-control{
|
|
height: auto;
|
|
}
|
|
.input-group-prepend, .input-group-append {
|
|
// dropdown arrow position
|
|
.dropdown-toggle{
|
|
&::after{
|
|
left: 0;
|
|
}
|
|
}
|
|
// checkbox and radio margin
|
|
.vs-checkbox-con, .vs-checkbox, .vs-radio-con, .vs-radio{
|
|
margin: 0;
|
|
}
|
|
}
|
|
&.input-group-lg{
|
|
.form-control{
|
|
&::placeholder{
|
|
font-size: 1.25rem;
|
|
}
|
|
}
|
|
.input-group-prepend, .input-group-append{
|
|
.btn{
|
|
line-height: 1.3;
|
|
font-size: 1.3rem;
|
|
}
|
|
}
|
|
|
|
}
|
|
&.input-group-sm{
|
|
.form-control{
|
|
&::placeholder{
|
|
font-size: 0.7rem;
|
|
}
|
|
}
|
|
}
|
|
}
|