133 lines
2.4 KiB
SCSS
133 lines
2.4 KiB
SCSS
input, select{
|
|
background-color: $gray-dark;
|
|
color: $gray-lighter;
|
|
border: 1px solid $gray-light;
|
|
font-family: $font-family-bold;
|
|
|
|
&:focus{
|
|
border-color: $teal-lighter;
|
|
}
|
|
|
|
&:-webkit-autofill {
|
|
background-color: $gray-dark !important;
|
|
@include box-shadow(0 0 0 50px $gray-dark inset !important);
|
|
-webkit-text-fill-color: $gray-lighter;
|
|
}
|
|
|
|
&:-webkit-autofill:focus {
|
|
@include box-shadow(0 0 0 50px $gray-dark inset !important);
|
|
-webkit-text-fill-color: $gray-lighter;
|
|
}
|
|
|
|
// file input
|
|
&::-webkit-file-upload-button{
|
|
background-color: transparent;
|
|
border: none;
|
|
color: $gray-light;
|
|
outline: none;
|
|
}
|
|
|
|
&[disabled]{
|
|
@include placeholder(transparent);
|
|
}
|
|
}
|
|
|
|
textarea{
|
|
min-height: 32px;
|
|
max-height: 400px;
|
|
resize: vertical;
|
|
}
|
|
|
|
fieldset[disabled]{
|
|
.form-control{
|
|
color: $gray-light;
|
|
@include placeholder(transparent);
|
|
}
|
|
|
|
.input-icon-left, .input-icon-right{
|
|
.fa-stack{
|
|
i:last-child{
|
|
color: $gray;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// form fields with icons groups (stacked icons) ==================================================
|
|
.input-icon-left:not(.input-icon-right){
|
|
.fa-stack:first-child{
|
|
left: 14px;
|
|
}
|
|
}
|
|
|
|
.input-icon-right:not(.input-icon-left){
|
|
.fa-stack:first-child{
|
|
right: 14px;
|
|
}
|
|
}
|
|
|
|
.input-icon-left.input-icon-right{
|
|
.fa-stack:first-child{
|
|
left: 14px;
|
|
}
|
|
.fa-stack:nth-child(2) {
|
|
right: 14px;
|
|
}
|
|
}
|
|
|
|
.input-icon-left, .input-icon-right{
|
|
.fa-stack{
|
|
position: absolute;
|
|
top: 4px;
|
|
|
|
i:first-child{
|
|
color: $gray-light;
|
|
}
|
|
|
|
i:last-child{
|
|
color: $gray-dark;
|
|
}
|
|
}
|
|
}
|
|
|
|
// "fake" button (no user interaction) ============================================================
|
|
.btn-fake{
|
|
border: none;
|
|
text-align: left;
|
|
cursor: default;
|
|
opacity: 1 !important;
|
|
color: $gray-light !important;
|
|
background-color: $gray !important;
|
|
}
|
|
|
|
// drag&drop zone
|
|
.pf-form-dropzone{
|
|
border: 2px dashed $gray-darker;
|
|
height: 100px;
|
|
background-color: darken($gray, 3%);
|
|
text-align: center;
|
|
font-size: 20px;
|
|
line-height: 100px;
|
|
margin: 15px 0;
|
|
color: $gray-darker;
|
|
@include border-radius(10px);
|
|
@include transition( color 0.18s ease-out, border-color 0.18s ease-out);
|
|
|
|
&:hover{
|
|
color: $teal-lighter;
|
|
border-color: $teal-lighter;
|
|
cursor: -moz-grabbing;
|
|
cursor: -webkit-grabbing;
|
|
cursor: grabbing;
|
|
}
|
|
}
|
|
|
|
|
|
// fix for bootstrap-toggle plugin
|
|
.toggle{
|
|
&.btn:active{
|
|
box-shadow: none;
|
|
}
|
|
}
|