157 lines
3.3 KiB
CSS
157 lines
3.3 KiB
CSS
/*
|
|
Template Name: Admin Template
|
|
Author: Wrappixel
|
|
|
|
File: scss
|
|
*/
|
|
@import url(https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700);
|
|
/*Theme Colors*/
|
|
/**
|
|
* Table Of Content
|
|
*
|
|
* 1. Color system
|
|
* 2. Options
|
|
* 3. Body
|
|
* 4. Typography
|
|
* 5. Breadcrumbs
|
|
* 6. Cards
|
|
* 7. Dropdowns
|
|
* 8. Buttons
|
|
* 9. Typography
|
|
* 10. Progress bars
|
|
* 11. Tables
|
|
* 12. Forms
|
|
* 14. Component
|
|
*/
|
|
/*******************/
|
|
/*Floating Label*/
|
|
/*******************/
|
|
.floating-labels .form-group {
|
|
position: relative; }
|
|
|
|
.floating-labels .form-control {
|
|
padding: 10px 10px 10px 0;
|
|
display: block;
|
|
border: none;
|
|
font-family: "Poppins", sans-serif;
|
|
border-radius: 0px;
|
|
border-bottom: 1px solid #e9ecef; }
|
|
|
|
.floating-labels select.form-control > option {
|
|
font-size: 14px; }
|
|
|
|
.floating-labels .has-error .form-control {
|
|
border-bottom: 1px solid #e46a76; }
|
|
|
|
.floating-labels .has-warning .form-control {
|
|
border-bottom: 1px solid #fec107; }
|
|
|
|
.floating-labels .has-success .form-control {
|
|
border-bottom: 1px solid #00c292; }
|
|
|
|
.floating-labels .form-control:focus {
|
|
outline: none;
|
|
border: none; }
|
|
|
|
.floating-labels label {
|
|
color: #212529;
|
|
position: absolute;
|
|
cursor: auto;
|
|
top: 5px;
|
|
transition: 0.2s ease all;
|
|
-moz-transition: 0.2s ease all;
|
|
-webkit-transition: 0.2s ease all; }
|
|
|
|
.floating-labels .focused label {
|
|
top: -20px;
|
|
font-size: 12px;
|
|
color: #343a40; }
|
|
|
|
.floating-labels .bar {
|
|
position: relative;
|
|
display: block; }
|
|
|
|
.floating-labels .bar:before,
|
|
.floating-labels .bar:after {
|
|
content: '';
|
|
height: 2px;
|
|
width: 0;
|
|
bottom: 1px;
|
|
position: absolute;
|
|
background: #fb9678;
|
|
transition: 0.2s ease all;
|
|
-moz-transition: 0.2s ease all;
|
|
-webkit-transition: 0.2s ease all; }
|
|
|
|
.floating-labels .bar:before {
|
|
left: 50%; }
|
|
|
|
.floating-labels .bar:after {
|
|
right: 50%; }
|
|
|
|
.floating-labels .form-control:focus ~ .bar:before,
|
|
.floating-labels .form-control:focus ~ .bar:after {
|
|
width: 50%; }
|
|
|
|
.floating-labels .highlight {
|
|
position: absolute;
|
|
height: 60%;
|
|
width: 100px;
|
|
top: 25%;
|
|
left: 0;
|
|
pointer-events: none;
|
|
opacity: 0.5; }
|
|
|
|
.floating-labels .input-lg ~ label,
|
|
.floating-labels .input-lg {
|
|
font-size: 24px; }
|
|
|
|
.floating-labels .input-sm ~ label,
|
|
.floating-labels .input-sm {
|
|
font-size: 16px; }
|
|
|
|
.has-warning .bar:before,
|
|
.has-warning .bar:after {
|
|
background: #fec107; }
|
|
|
|
.has-success .bar:before,
|
|
.has-success .bar:after {
|
|
background: #00c292; }
|
|
|
|
.has-error .bar:before,
|
|
.has-error .bar:after {
|
|
background: #e46a76; }
|
|
|
|
.has-warning .form-control:focus ~ label,
|
|
.has-warning .form-control:valid ~ label {
|
|
color: #fec107; }
|
|
|
|
.has-success .form-control:focus ~ label,
|
|
.has-success .form-control:valid ~ label {
|
|
color: #00c292; }
|
|
|
|
.has-error .form-control:focus ~ label,
|
|
.has-error .form-control:valid ~ label {
|
|
color: #e46a76; }
|
|
|
|
.has-feedback label ~ .t-0 {
|
|
top: 0; }
|
|
|
|
.form-group.error input, .form-group.error select, .form-group.error textarea {
|
|
border: 1px solid #e46a76; }
|
|
|
|
.form-group.validate input, .form-group.validate select, .form-group.validate textarea {
|
|
border: 1px solid #00c292; }
|
|
|
|
.form-group.error .help-block ul {
|
|
padding: 0px;
|
|
color: #e46a76; }
|
|
.form-group.error .help-block ul li {
|
|
list-style: none; }
|
|
|
|
.form-group.issue .help-block ul {
|
|
padding: 0px;
|
|
color: #fec107; }
|
|
.form-group.issue .help-block ul li {
|
|
list-style: none; }
|