mirror of
https://github.com/creativetimofficial/vue-material-kit.git
synced 2025-05-23 21:04:21 +08:00
scss cleaned
This commit is contained in:
Dragos
parent
0e08bb7cff
commit
590c9c965d
@ -2,13 +2,6 @@
|
|||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.presentation-page{
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tim-white-buttons {
|
|
||||||
background-color: #777777;
|
|
||||||
}
|
|
||||||
.title{
|
.title{
|
||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
margin-bottom: 25px;
|
margin-bottom: 25px;
|
||||||
@ -23,10 +16,6 @@
|
|||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title h2 {
|
|
||||||
display: initial;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tim-typo{
|
.tim-typo{
|
||||||
padding-left: 25%;
|
padding-left: 25%;
|
||||||
margin-bottom: 40px;
|
margin-bottom: 40px;
|
||||||
@ -56,14 +45,6 @@
|
|||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.switch{
|
|
||||||
margin-right: 20px;
|
|
||||||
}
|
|
||||||
#navbar-full .navbar{
|
|
||||||
border-radius: 0 !important;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
.space{
|
.space{
|
||||||
height: 130px;
|
height: 130px;
|
||||||
display: block;
|
display: block;
|
||||||
@ -80,13 +61,6 @@
|
|||||||
height: 70px;
|
height: 70px;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
.navigation-example .img-src{
|
|
||||||
background-attachment: scroll;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tim-container .noUi-horizontal{
|
|
||||||
margin: 30px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navigation-example{
|
.navigation-example{
|
||||||
background-position: center center;
|
background-position: center center;
|
||||||
@ -116,118 +90,6 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.be-social{
|
|
||||||
padding-bottom: 20px;
|
|
||||||
/* border-bottom: 1px solid #aaa; */
|
|
||||||
margin: 0 auto 40px;
|
|
||||||
}
|
|
||||||
.txt-white{
|
|
||||||
color: #FFFFFF;
|
|
||||||
}
|
|
||||||
.txt-gray{
|
|
||||||
color: #ddd !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.parallax{
|
|
||||||
width:100%;
|
|
||||||
height:570px;
|
|
||||||
|
|
||||||
display: block;
|
|
||||||
background-attachment: fixed;
|
|
||||||
background-repeat:no-repeat;
|
|
||||||
background-size:cover;
|
|
||||||
background-position: center center;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo-container .logo{
|
|
||||||
overflow: hidden;
|
|
||||||
border-radius: 50%;
|
|
||||||
border: 1px solid #333333;
|
|
||||||
width: 50px;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo-container .brand{
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 18px;
|
|
||||||
float: left;
|
|
||||||
margin-left: 10px;
|
|
||||||
margin-top: 7px;
|
|
||||||
color: #fff;
|
|
||||||
width: 70px;
|
|
||||||
height: 40px;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-default .logo-container .brand{
|
|
||||||
color: #999999;
|
|
||||||
}
|
|
||||||
.navbar-transparent .logo-container .brand{
|
|
||||||
color: #FFFFFF;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo-container .brand-material{
|
|
||||||
font-size: 18px;
|
|
||||||
margin-top: 15px;
|
|
||||||
height: 25px;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
.logo-container .logo img{
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.navbar-small .logo-container .brand{
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fixed-section{
|
|
||||||
top: 90px;
|
|
||||||
max-height: 71vh;
|
|
||||||
overflow: scroll;
|
|
||||||
border-bottom: 1px solid rgba(220,220,220, .8);
|
|
||||||
}
|
|
||||||
.fixed-section ul li{
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
.fixed-section li a{
|
|
||||||
font-size: 14px;
|
|
||||||
padding: 2px;
|
|
||||||
display: block;
|
|
||||||
color: #666666;
|
|
||||||
}
|
|
||||||
.fixed-section li a.active{
|
|
||||||
color: #00bbff;
|
|
||||||
}
|
|
||||||
.fixed-section.float{
|
|
||||||
position: fixed;
|
|
||||||
top: 100px;
|
|
||||||
width: 200px;
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.parallax .parallax-image{
|
|
||||||
width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
.parallax .parallax-image img{
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px){
|
|
||||||
.parallax .parallax-image{
|
|
||||||
width: 100%;
|
|
||||||
height: 640px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.parallax .parallax-image img{
|
|
||||||
height: 100%;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.separator{
|
.separator{
|
||||||
content: "Separator";
|
content: "Separator";
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
@ -244,11 +106,6 @@
|
|||||||
.separator.separator-gray{
|
.separator.separator-gray{
|
||||||
background-color: #EEEEEE;
|
background-color: #EEEEEE;
|
||||||
}
|
}
|
||||||
.social-buttons-demo .btn{
|
|
||||||
/*margin-right: 5px;
|
|
||||||
margin-bottom: 7px;*/
|
|
||||||
margin: 10px 5px 7px 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.img-container{
|
.img-container{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -258,97 +115,12 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.lightbox img{
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.lightbox .modal-content{
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.lightbox .modal-body{
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
@media screen and (min-width: 991px){
|
|
||||||
.lightbox .modal-dialog{
|
|
||||||
width: 960px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 991px) {
|
|
||||||
.fixed-section.affix {
|
|
||||||
position: relative;
|
|
||||||
margin-bottom: 100px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px){
|
|
||||||
.btn, .btn-morphing{
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
.parallax .motto{
|
|
||||||
top: 170px;
|
|
||||||
margin-top: 0;
|
|
||||||
font-size: 60px;
|
|
||||||
width: 270px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Loading dots */
|
|
||||||
|
|
||||||
/* transitions */
|
|
||||||
.presentation .front, .presentation .front:after, .presentation .front .btn, .logo-container .logo, .logo-container .brand{
|
|
||||||
-webkit-transition: all .2s;
|
|
||||||
-moz-transition: all .2s;
|
|
||||||
-o-transition: all .2s;
|
|
||||||
transition: all .2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
#images h4{
|
#images h4{
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
}
|
}
|
||||||
#javascriptComponents{
|
#javascriptComponents{
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
}
|
}
|
||||||
#javascriptComponents .btn-raised{
|
|
||||||
margin: 10px 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* layer animation */
|
|
||||||
|
|
||||||
.layers-container{
|
|
||||||
display: block;
|
|
||||||
margin-top: 50px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.layers-container img {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-black {
|
|
||||||
background-color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.animate {
|
|
||||||
transition: 1.5s ease-in-out;
|
|
||||||
-moz-transition: 1.5s ease-in-out;
|
|
||||||
-webkit-transition: 1.5s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-default.navbar-small .logo-container .brand{
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
.navbar-transparent.navbar-small .logo-container .brand{
|
|
||||||
color: #FFFFFF;
|
|
||||||
}
|
|
||||||
.navbar-default.navbar-small .logo-container .brand{
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sharing-area{
|
.sharing-area{
|
||||||
margin-top: 80px;
|
margin-top: 80px;
|
||||||
@ -362,7 +134,6 @@
|
|||||||
margin-bottom: -20px;
|
margin-bottom: -20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-thin,
|
|
||||||
.section-notifications{
|
.section-notifications{
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
@ -390,342 +161,6 @@
|
|||||||
.section-download h4{
|
.section-download h4{
|
||||||
margin-bottom: 50px;
|
margin-bottom: 50px;
|
||||||
}
|
}
|
||||||
.section-examples a{
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
.section-examples h5{
|
.section-examples h5{
|
||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
}
|
}
|
||||||
.components-page .wrapper > .header,
|
|
||||||
.tutorial-page .wrapper > .header{
|
|
||||||
height: 400px;
|
|
||||||
padding-top: 100px;
|
|
||||||
background-size: cover;
|
|
||||||
background-position: center center;
|
|
||||||
}
|
|
||||||
.components-page .title,
|
|
||||||
.tutorial-page .title{
|
|
||||||
color: #FFFFFF;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 830px){
|
|
||||||
.main-raised{
|
|
||||||
margin-left: 10px;
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*@media all and (min-width: 1200px){
|
|
||||||
#modal-row [class*="col-"]:nth-child(1),
|
|
||||||
#modal-row [class*="col-"]:nth-child(4),
|
|
||||||
#javascriptComponents [class*="col-"]:nth-child(2),
|
|
||||||
#javascriptComponents [class*="col-"]:nth-child(5){
|
|
||||||
padding-right: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#modal-row [class*="col-"]:nth-child(2),
|
|
||||||
#javascriptComponents [class*="col-"]:nth-child(3){
|
|
||||||
padding-right: 3px;
|
|
||||||
padding-left: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#modal-row [class*="col-"]:nth-child(3),
|
|
||||||
#modal-row [class*="col-"]:nth-child(5),
|
|
||||||
#javascriptComponents [class*="col-"]:nth-child(4),
|
|
||||||
#javascriptComponents [class*="col-"]:nth-child(6){
|
|
||||||
padding-left: 3px;
|
|
||||||
}
|
|
||||||
}*/
|
|
||||||
|
|
||||||
.components-page .footer{
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.components-page .page-header:after{
|
|
||||||
background: rgba(132, 13, 121, 0.88);
|
|
||||||
background: linear-gradient(45deg, rgba(132, 13, 121, 0.88) 0%, rgba(208, 44, 180, 0.31) 100%);
|
|
||||||
background: -moz-linear-gradient(135deg, rgba(132, 13, 121, 0.88) 0%, rgba(208, 44, 180, 0.31) 100%);
|
|
||||||
background: -webkit-linear-gradient(135deg, rgba(132, 13, 121, 0.88) 0%, rgba(208, 44, 180, 0.31) 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.components-page .page-header.header-filter:before{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.components-page .page-header .title-container{
|
|
||||||
position: relative;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
.components-page .footer .container{
|
|
||||||
padding-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.components-page .footer .btn i{
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.components-page .page-header{
|
|
||||||
height: 100vh !important;
|
|
||||||
min-height: auto !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* PRESENTION PAGE */
|
|
||||||
|
|
||||||
/* Section Components */
|
|
||||||
|
|
||||||
.section-components .title{
|
|
||||||
margin-top: 60px;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
.section-components .description{
|
|
||||||
margin-top: 35px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-components .image-container{
|
|
||||||
height: 560px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-components .components-macbook{
|
|
||||||
width: auto;
|
|
||||||
left: -100px;
|
|
||||||
top: 0;
|
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-components .table-img,
|
|
||||||
.section-components .share-btn-img,
|
|
||||||
.section-components .coloured-card-btn-img,
|
|
||||||
.section-components .coloured-card-img,
|
|
||||||
.section-components .social-img,
|
|
||||||
.section-components .pin-btn-img{
|
|
||||||
position: absolute;
|
|
||||||
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
.section-components .coloured-card-img{
|
|
||||||
left: 90%;
|
|
||||||
top: 11%;
|
|
||||||
height: 90px;
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
.section-components .social-img{
|
|
||||||
left: 70%;
|
|
||||||
top: 67%;
|
|
||||||
height: 40px;
|
|
||||||
|
|
||||||
}
|
|
||||||
.section-components .coloured-card-btn-img{
|
|
||||||
left: 35%;
|
|
||||||
top: 2%;
|
|
||||||
height: 125px;
|
|
||||||
border-radius: 6px;
|
|
||||||
}
|
|
||||||
.section-components .table-img{
|
|
||||||
left: -13%;
|
|
||||||
top: 27%;
|
|
||||||
height: 175px;
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
.section-components .pin-btn-img{
|
|
||||||
left: 0%;
|
|
||||||
top: 68%;
|
|
||||||
height: 25px;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
.section-components .share-btn-img{
|
|
||||||
left: 3%;
|
|
||||||
top: -3%;
|
|
||||||
height: 25px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Section Content */
|
|
||||||
|
|
||||||
.section-content .section-description{
|
|
||||||
margin-top: 100px;
|
|
||||||
}
|
|
||||||
.section-content .title{
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-content .section-description .title + .description{
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
.section-content .description{
|
|
||||||
margin-top: 35px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-content .image-container{
|
|
||||||
max-width: 900px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.section-content .image-container .ipad-img{
|
|
||||||
width: 100%;
|
|
||||||
transition: transform .6s .9s;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
.section-content .image-container .area-img,
|
|
||||||
.section-content .image-container .info-img{
|
|
||||||
position: absolute;
|
|
||||||
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate3D(0px, 100px, 0px);
|
|
||||||
-webkit-transform: translate3D(0px, 100px, 0px);
|
|
||||||
}
|
|
||||||
.section-content .image-container .area-img{
|
|
||||||
top: 10%;
|
|
||||||
left: 60%;
|
|
||||||
height: 300px;
|
|
||||||
width: 250px;
|
|
||||||
z-index: 2;
|
|
||||||
-webkit-transition: all 1s ease-out 0s;
|
|
||||||
-moz-transition: all 1s ease-out 0s;
|
|
||||||
-o-transition: all 1s ease-out 0s;
|
|
||||||
-ms-transition: all 1s ease-out 0s;
|
|
||||||
transition: all 1s ease-out 0s;
|
|
||||||
}
|
|
||||||
.section-content .image-container .info-img{
|
|
||||||
top: 50%;
|
|
||||||
left: 0%;
|
|
||||||
height: 200px;
|
|
||||||
width: 300px;
|
|
||||||
-webkit-transition: all 1s ease-out 0s;
|
|
||||||
-moz-transition: all 1s ease-out 0s;
|
|
||||||
-o-transition: all 1s ease-out 0s;
|
|
||||||
-ms-transition: all 1s ease-out 0s;
|
|
||||||
transition: all 1s ease-out 0s;
|
|
||||||
}
|
|
||||||
.animated{
|
|
||||||
transform: translate3D(0px, 0px, 0px) !important;
|
|
||||||
-webkit-transform: translate3D(0px, 0px, 0px) !important;
|
|
||||||
opacity: 1 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* animated images */
|
|
||||||
|
|
||||||
@-webkit-keyframes Floatingy{
|
|
||||||
from {-webkit-transform:translate(0, 0px);}
|
|
||||||
65% {-webkit-transform:translate(50px, 0);}
|
|
||||||
to {-webkit-transform: translate(0, -0px);}
|
|
||||||
}
|
|
||||||
@-moz-keyframes Floatingy{
|
|
||||||
from {-moz-transform:translate(0, 0px);}
|
|
||||||
65% {-moz-transform:translate(50px, 0);}
|
|
||||||
to {-moz-transform: translate(0, -0px);}
|
|
||||||
}
|
|
||||||
@-webkit-keyframes Floatingx{
|
|
||||||
from {-webkit-transform:translate(50px, 0px);}
|
|
||||||
65% {-webkit-transform:translate(0, 0);}
|
|
||||||
to {-webkit-transform: translate(50px, -0px);}
|
|
||||||
}
|
|
||||||
@-moz-keyframes Floatingx{
|
|
||||||
from {-moz-transform:translate(50px, 0px);}
|
|
||||||
65% {-moz-transform:translate(0, 0);}
|
|
||||||
to {-moz-transform: translate(50px, -0px);}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.table-img, .coloured-card-img, .coloured-card-btn-img, .pin-btn-img, .share-btn-img, .social-img{
|
|
||||||
-webkit-animation-iteration-count: infinite;
|
|
||||||
-webkit-animation-timing-function: ease-in-out;
|
|
||||||
-moz-animation-iteration-count: infinite;
|
|
||||||
-moz-animation-timing-function: ease-in-out;
|
|
||||||
-webkit-animation-name: Floatingy;
|
|
||||||
-moz-animation-name: Floatingy;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
.table-img{
|
|
||||||
-webkit-animation-duration: 14s;
|
|
||||||
-moz-animation-duration: 14s;
|
|
||||||
-webkit-animation-name: Floatingx;
|
|
||||||
-moz-animation-name: Floatingx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.coloured-card-img{
|
|
||||||
-webkit-animation-duration: 10s;
|
|
||||||
-moz-animation-duration: 10s;
|
|
||||||
-webkit-animation-name: Floatingx;
|
|
||||||
-moz-animation-name: Floatingx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.coloured-card-btn-img{
|
|
||||||
-webkit-animation-duration: 18s;
|
|
||||||
-moz-animation-duration: 18s;
|
|
||||||
}
|
|
||||||
.pin-btn-img{
|
|
||||||
-webkit-animation-duration: 15s;
|
|
||||||
-moz-animation-duration: 15s;
|
|
||||||
}
|
|
||||||
.share-btn-img{
|
|
||||||
-webkit-animation-duration: 11s;
|
|
||||||
-moz-animation-duration: 11s;
|
|
||||||
}
|
|
||||||
.social-img{
|
|
||||||
-webkit-animation-duration: 16s;
|
|
||||||
-moz-animation-duration: 16s;
|
|
||||||
-webkit-animation-name: Floatingx;
|
|
||||||
-moz-animation-name: Floatingx;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Presentation Page OnScroll Animation */
|
|
||||||
|
|
||||||
.animated {
|
|
||||||
animation-duration: 1s;
|
|
||||||
animation-fill-mode: both;
|
|
||||||
}
|
|
||||||
|
|
||||||
.animated.infinite {
|
|
||||||
animation-iteration-count: infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.animated.hinge {
|
|
||||||
animation-duration: 2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.animated.flipOutX,
|
|
||||||
.animated.flipOutY,
|
|
||||||
.animated.bounceIn,
|
|
||||||
.animated.bounceOut {
|
|
||||||
animation-duration: .75s;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes bounce {
|
|
||||||
from, 20%, 53%, 80%, to {
|
|
||||||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
40%, 43% {
|
|
||||||
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
|
||||||
transform: translate3d(0, -30px, 0);
|
|
||||||
}
|
|
||||||
70% {
|
|
||||||
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
|
||||||
transform: translate3d(0, -15px, 0);
|
|
||||||
}
|
|
||||||
90% {
|
|
||||||
transform: translate3d(0, -4px, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.bounce {
|
|
||||||
animation-name: bounce;
|
|
||||||
transform-origin: center bottom;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes flash {
|
|
||||||
from, 50%, to {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
25%, 75% {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.flash {
|
|
||||||
animation-name: flash;
|
|
||||||
}
|
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
=========================================================
|
=========================================================
|
||||||
|
|
||||||
* Product Page: http://www.creative-tim.com/product/vue-material-kit
|
* Product Page: http://www.creative-tim.com/product/vue-material-kit
|
||||||
* Copyright 2017 Creative Tim (http://www.creative-tim.com)
|
* Copyright 2018 Creative Tim (http://www.creative-tim.com)
|
||||||
* Licensed under MIT (https://github.com/creativetimofficial/vue-material-kit/blob/master/LICENSE.md)
|
* Licensed under MIT (https://github.com/creativetimofficial/vue-material-kit/blob/master/LICENSE.md)
|
||||||
|
|
||||||
=========================================================
|
=========================================================
|
||||||
@ -26,7 +26,6 @@
|
|||||||
|
|
||||||
// Core CSS
|
// Core CSS
|
||||||
@import "material-kit/typography";
|
@import "material-kit/typography";
|
||||||
@import "material-kit/sidebar-and-main-panel";
|
|
||||||
@import "material-kit/buttons";
|
@import "material-kit/buttons";
|
||||||
@import "material-kit/carousel";
|
@import "material-kit/carousel";
|
||||||
@import "material-kit/autocomplete";
|
@import "material-kit/autocomplete";
|
||||||
@ -37,7 +36,6 @@
|
|||||||
@import "material-kit/inputs";
|
@import "material-kit/inputs";
|
||||||
@import "material-kit/badges";
|
@import "material-kit/badges";
|
||||||
@import "material-kit/progress";
|
@import "material-kit/progress";
|
||||||
@import "material-kit/forms";
|
|
||||||
@import "material-kit/alerts";
|
@import "material-kit/alerts";
|
||||||
@import "material-kit/tables";
|
@import "material-kit/tables";
|
||||||
@import "material-kit/layout";
|
@import "material-kit/layout";
|
||||||
@ -57,5 +55,4 @@
|
|||||||
@import "material-kit/dropdown";
|
@import "material-kit/dropdown";
|
||||||
@import "material-kit/cards";
|
@import "material-kit/cards";
|
||||||
@import "material-kit/tabs";
|
@import "material-kit/tabs";
|
||||||
@import "material-kit/chartist";
|
|
||||||
@import "material-kit/responsive";
|
@import "material-kit/responsive";
|
||||||
|
|||||||
@ -10,9 +10,6 @@
|
|||||||
color: $mdb-card-body-text;
|
color: $mdb-card-body-text;
|
||||||
background: $mdb-card-body-background;
|
background: $mdb-card-body-background;
|
||||||
|
|
||||||
.card-height-indicator {
|
|
||||||
margin-top: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.row-space{
|
&.row-space{
|
||||||
.header{
|
.header{
|
||||||
|
|||||||
@ -1,254 +0,0 @@
|
|||||||
@mixin ct-responsive-svg-container($width: 100%, $ratio: $ct-container-ratio) {
|
|
||||||
display: block;
|
|
||||||
position: relative;
|
|
||||||
width: $width;
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
display: block;
|
|
||||||
float: left;
|
|
||||||
content: "";
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
padding-bottom: $ratio * 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:after {
|
|
||||||
content: "";
|
|
||||||
display: table;
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
|
|
||||||
> svg {
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin ct-align-justify($ct-text-align: $ct-text-align, $ct-text-justify: $ct-text-justify) {
|
|
||||||
-webkit-box-align: $ct-text-align;
|
|
||||||
-webkit-align-items: $ct-text-align;
|
|
||||||
-ms-flex-align: $ct-text-align;
|
|
||||||
align-items: $ct-text-align;
|
|
||||||
-webkit-box-pack: $ct-text-justify;
|
|
||||||
-webkit-justify-content: $ct-text-justify;
|
|
||||||
-ms-flex-pack: $ct-text-justify;
|
|
||||||
justify-content: $ct-text-justify;
|
|
||||||
// Fallback to text-align for non-flex browsers
|
|
||||||
@if($ct-text-justify == 'flex-start') {
|
|
||||||
text-align: left;
|
|
||||||
} @else if ($ct-text-justify == 'flex-end') {
|
|
||||||
text-align: right;
|
|
||||||
} @else {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin ct-flex() {
|
|
||||||
// Fallback to block
|
|
||||||
display: block;
|
|
||||||
display: -webkit-box;
|
|
||||||
display: -moz-box;
|
|
||||||
display: -ms-flexbox;
|
|
||||||
display: -webkit-flex;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@mixin ct-chart-label($ct-text-color: $ct-text-color, $ct-text-size: $ct-text-size, $ct-text-line-height: $ct-text-line-height) {
|
|
||||||
fill: $ct-text-color;
|
|
||||||
color: $ct-text-color;
|
|
||||||
font-size: $ct-text-size;
|
|
||||||
line-height: $ct-text-line-height;
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin ct-chart-grid($ct-grid-color: $ct-grid-color, $ct-grid-width: $ct-grid-width, $ct-grid-dasharray: $ct-grid-dasharray) {
|
|
||||||
stroke: $ct-grid-color;
|
|
||||||
stroke-width: $ct-grid-width;
|
|
||||||
|
|
||||||
@if ($ct-grid-dasharray) {
|
|
||||||
stroke-dasharray: $ct-grid-dasharray;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin ct-chart-point($ct-point-size: $ct-point-size, $ct-point-shape: $ct-point-shape) {
|
|
||||||
stroke-width: $ct-point-size;
|
|
||||||
stroke-linecap: $ct-point-shape;
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin ct-chart-line($ct-line-width: $ct-line-width, $ct-line-dasharray: $ct-line-dasharray) {
|
|
||||||
fill: none;
|
|
||||||
stroke-width: $ct-line-width;
|
|
||||||
|
|
||||||
@if ($ct-line-dasharray) {
|
|
||||||
stroke-dasharray: $ct-line-dasharray;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin ct-chart-area($ct-area-opacity: $ct-area-opacity) {
|
|
||||||
stroke: none;
|
|
||||||
fill-opacity: $ct-area-opacity;
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin ct-chart-bar($ct-bar-width: $ct-bar-width) {
|
|
||||||
fill: none;
|
|
||||||
stroke-width: $ct-bar-width;
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin ct-chart-donut($ct-donut-width: $ct-donut-width) {
|
|
||||||
fill: none;
|
|
||||||
stroke-width: $ct-donut-width;
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin ct-chart-series-color($color) {
|
|
||||||
.#{$ct-class-point}, .#{$ct-class-line}, .#{$ct-class-bar}, .#{$ct-class-slice-donut} {
|
|
||||||
stroke: $color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$ct-class-slice-pie}, .#{$ct-class-area} {
|
|
||||||
fill: $color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin ct-chart($ct-container-ratio: $ct-container-ratio, $ct-text-color: $ct-text-color, $ct-text-size: $ct-text-size, $ct-grid-color: $ct-grid-color, $ct-grid-width: $ct-grid-width, $ct-grid-dasharray: $ct-grid-dasharray, $ct-point-size: $ct-point-size, $ct-point-shape: $ct-point-shape, $ct-line-width: $ct-line-width, $ct-bar-width: $ct-bar-width, $ct-donut-width: $ct-donut-width, $ct-series-names: $ct-series-names, $ct-series-colors: $ct-series-colors) {
|
|
||||||
|
|
||||||
.#{$ct-class-label} {
|
|
||||||
@include ct-chart-label($ct-text-color, $ct-text-size);
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$ct-class-chart-line} .#{$ct-class-label},
|
|
||||||
.#{$ct-class-chart-bar} .#{$ct-class-label} {
|
|
||||||
@include ct-flex();
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} {
|
|
||||||
@include ct-align-justify(flex-end, flex-start);
|
|
||||||
// Fallback for browsers that don't support foreignObjects
|
|
||||||
text-anchor: start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} {
|
|
||||||
@include ct-align-justify(flex-start, flex-start);
|
|
||||||
// Fallback for browsers that don't support foreignObjects
|
|
||||||
text-anchor: start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-start} {
|
|
||||||
@include ct-align-justify(flex-end, flex-end);
|
|
||||||
// Fallback for browsers that don't support foreignObjects
|
|
||||||
text-anchor: end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-end} {
|
|
||||||
@include ct-align-justify(flex-end, flex-start);
|
|
||||||
// Fallback for browsers that don't support foreignObjects
|
|
||||||
text-anchor: start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$ct-class-chart-bar} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} {
|
|
||||||
@include ct-align-justify(flex-end, center);
|
|
||||||
// Fallback for browsers that don't support foreignObjects
|
|
||||||
text-anchor: start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$ct-class-chart-bar} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} {
|
|
||||||
@include ct-align-justify(flex-start, center);
|
|
||||||
// Fallback for browsers that don't support foreignObjects
|
|
||||||
text-anchor: start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} {
|
|
||||||
@include ct-align-justify(flex-end, flex-start);
|
|
||||||
// Fallback for browsers that don't support foreignObjects
|
|
||||||
text-anchor: start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} {
|
|
||||||
@include ct-align-justify(flex-start, flex-start);
|
|
||||||
// Fallback for browsers that don't support foreignObjects
|
|
||||||
text-anchor: start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-start} {
|
|
||||||
//@include ct-chart-label($ct-text-color, $ct-text-size, center, $ct-vertical-text-justify);
|
|
||||||
@include ct-align-justify(center, flex-end);
|
|
||||||
// Fallback for browsers that don't support foreignObjects
|
|
||||||
text-anchor: end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-end} {
|
|
||||||
@include ct-align-justify(center, flex-start);
|
|
||||||
// Fallback for browsers that don't support foreignObjects
|
|
||||||
text-anchor: end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$ct-class-grid} {
|
|
||||||
@include ct-chart-grid($ct-grid-color, $ct-grid-width, $ct-grid-dasharray);
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$ct-class-point} {
|
|
||||||
@include ct-chart-point($ct-point-size, $ct-point-shape);
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$ct-class-line} {
|
|
||||||
@include ct-chart-line($ct-line-width);
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$ct-class-area} {
|
|
||||||
@include ct-chart-area();
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$ct-class-bar} {
|
|
||||||
@include ct-chart-bar($ct-bar-width);
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$ct-class-slice-donut} {
|
|
||||||
@include ct-chart-donut($ct-donut-width);
|
|
||||||
}
|
|
||||||
|
|
||||||
@if $ct-include-colored-series {
|
|
||||||
@for $i from 0 to length($ct-series-names) {
|
|
||||||
.#{$ct-class-series}-#{nth($ct-series-names, $i + 1)} {
|
|
||||||
$color: nth($ct-series-colors, $i + 1);
|
|
||||||
|
|
||||||
@include ct-chart-series-color($color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@if $ct-include-classes {
|
|
||||||
@include ct-chart();
|
|
||||||
|
|
||||||
@if $ct-include-alternative-responsive-containers {
|
|
||||||
@for $i from 0 to length($ct-scales-names) {
|
|
||||||
.#{nth($ct-scales-names, $i + 1)} {
|
|
||||||
@include ct-responsive-svg-container($ratio: nth($ct-scales, $i + 1));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.ct-blue{
|
|
||||||
stroke: $brand-primary !important;
|
|
||||||
}
|
|
||||||
.ct-azure{
|
|
||||||
stroke: $brand-info !important;
|
|
||||||
}
|
|
||||||
.ct-green{
|
|
||||||
stroke: $brand-success !important;
|
|
||||||
}
|
|
||||||
.ct-orange{
|
|
||||||
stroke: $brand-warning !important;
|
|
||||||
}
|
|
||||||
.ct-red{
|
|
||||||
stroke: $brand-danger !important;
|
|
||||||
}
|
|
||||||
.ct-white{
|
|
||||||
stroke: $white-color !important;
|
|
||||||
}
|
|
||||||
.ct-rose{
|
|
||||||
stroke: $brand-rose !important;
|
|
||||||
}
|
|
||||||
@ -12,19 +12,10 @@
|
|||||||
text-align: left;
|
text-align: left;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
-webkit-background-clip: padding-box;
|
|
||||||
background-clip: padding-box;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border: 1px solid rgba(0,0,0,.15);
|
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
|
|
||||||
box-shadow: 0 6px 12px rgba(0,0,0,.175);
|
|
||||||
}
|
|
||||||
.dropdown-menu {
|
|
||||||
border: 0;
|
border: 0;
|
||||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
|
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
|
||||||
|
|
||||||
|
|
||||||
li > a{
|
li > a{
|
||||||
font-size: $mdb-dropdown-font-size;
|
font-size: $mdb-dropdown-font-size;
|
||||||
padding: .625rem 1.5rem;
|
padding: .625rem 1.5rem;
|
||||||
@ -79,7 +70,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-divider {
|
.dropdown-divider {
|
||||||
|
|||||||
@ -1,58 +0,0 @@
|
|||||||
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
|
|
||||||
|
|
||||||
@mixin mdb-label-color-toggle-focus(){
|
|
||||||
// override bootstrap focus and keep all the standard color (could be multiple radios in the form group)
|
|
||||||
.form-group.is-focused & {
|
|
||||||
color: $mdb-label-color;
|
|
||||||
|
|
||||||
// on focus just darken the specific labels, do not turn them to the brand-primary
|
|
||||||
&:hover,
|
|
||||||
&:focus {
|
|
||||||
color: $mdb-label-color-toggle-focus;
|
|
||||||
}
|
|
||||||
|
|
||||||
// correct the above focus color for disabled items
|
|
||||||
fieldset[disabled] & {
|
|
||||||
color: $mdb-label-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-horizontal {
|
|
||||||
|
|
||||||
// Consistent vertical alignment of radios and checkboxes
|
|
||||||
.radio,
|
|
||||||
.checkbox,
|
|
||||||
.radio-inline,
|
|
||||||
.checkbox-inline {
|
|
||||||
padding-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.radio {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
label.control-label {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-newsletter{
|
|
||||||
.input-group,
|
|
||||||
.form-group{
|
|
||||||
float: left;
|
|
||||||
width: 78%;
|
|
||||||
margin-right: 2%;
|
|
||||||
margin-top: 9px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn{
|
|
||||||
float: left;
|
|
||||||
width: 20%;
|
|
||||||
margin: 9px 0 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,223 +0,0 @@
|
|||||||
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
|
|
||||||
|
|
||||||
//
|
|
||||||
// Forms - sizing - material - mirrors bootstrap/forms.less with custom sizing
|
|
||||||
//
|
|
||||||
// LEAVE THIS IDENTICAL TO THE BOOTSTRAP FILE - DO NOT CUSTOMIZE HERE.
|
|
||||||
//
|
|
||||||
// NOTE: this is intentionally kept structurally _identical_ to the bootstrap/forms.less file to make it easier
|
|
||||||
// to identify differences in sizing approaches to form inputs.
|
|
||||||
// --------------------------------------------------
|
|
||||||
|
|
||||||
legend {
|
|
||||||
margin-bottom: $mdb-input-line-height-computed;
|
|
||||||
font-size: ($mdb-input-font-size-base * 1.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Adjust output element
|
|
||||||
output {
|
|
||||||
padding-top: ($mdb-input-padding-base-vertical + 1);
|
|
||||||
font-size: $mdb-input-font-size-base;
|
|
||||||
line-height: $mdb-input-line-height-base;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-control {
|
|
||||||
height: $mdb-input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
|
|
||||||
padding: $mdb-input-padding-base-vertical $mdb-input-padding-base-horizontal;
|
|
||||||
font-size: $mdb-input-font-size-base;
|
|
||||||
line-height: $mdb-input-line-height-base;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Special styles for iOS temporal inputs
|
|
||||||
//
|
|
||||||
// In Mobile Safari, setting `display: block` on temporal inputs causes the
|
|
||||||
// text within the input to become vertically misaligned. As a workaround, we
|
|
||||||
// set a pixel line-height that matches the given height of the input, but only
|
|
||||||
// for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848
|
|
||||||
//
|
|
||||||
// Note that as of 8.3, iOS doesn't support `datetime` or `week`.
|
|
||||||
|
|
||||||
@media screen and (-webkit-min-device-pixel-ratio: 0) {
|
|
||||||
input[type="date"],
|
|
||||||
input[type="time"],
|
|
||||||
input[type="datetime-local"],
|
|
||||||
input[type="month"] {
|
|
||||||
&.form-control {
|
|
||||||
line-height: $mdb-input-height-base;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.input-sm,
|
|
||||||
.input-group-sm & {
|
|
||||||
line-height: $mdb-input-height-small;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.input-lg,
|
|
||||||
.input-group-lg & {
|
|
||||||
line-height: $mdb-input-height-large;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.radio,
|
|
||||||
.checkbox {
|
|
||||||
|
|
||||||
label {
|
|
||||||
min-height: $mdb-input-line-height-computed; // Ensure the input doesn't jump when there is no text
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Static form control text
|
|
||||||
//
|
|
||||||
// Apply class to a `p` element to make any string of text align with labels in
|
|
||||||
// a horizontal form layout.
|
|
||||||
|
|
||||||
.form-control-static {
|
|
||||||
// Size it appropriately next to real form controls
|
|
||||||
padding-top: ($mdb-input-padding-base-vertical + 1);
|
|
||||||
padding-bottom: ($mdb-input-padding-base-vertical + 1);
|
|
||||||
min-height: ($mdb-input-line-height-computed + $mdb-input-font-size-base);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Form control sizing
|
|
||||||
//
|
|
||||||
// Relative text size, padding, and border-radii changes for form controls. For
|
|
||||||
// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
|
|
||||||
// element gets special love because it's special, and that's a fact!
|
|
||||||
|
|
||||||
// mixin pulled from bootstrap and altered for less/sass compatibility with sass parent hack.
|
|
||||||
// bootstrap-sass has this one, but we would have to then convert it back to less. chicken meet egg.
|
|
||||||
@mixin input-size($parent, $mdb-input-height, $padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius){
|
|
||||||
|
|
||||||
#{$parent} {
|
|
||||||
height: $mdb-input-height;
|
|
||||||
padding: $padding-vertical $padding-horizontal;
|
|
||||||
font-size: $font-size;
|
|
||||||
line-height: $line-height;
|
|
||||||
border-radius: $border-radius;
|
|
||||||
}
|
|
||||||
|
|
||||||
select#{$parent} {
|
|
||||||
height: $mdb-input-height;
|
|
||||||
line-height: $mdb-input-height;
|
|
||||||
}
|
|
||||||
|
|
||||||
textarea#{$parent},
|
|
||||||
select[multiple]#{$parent} {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Form control sizing
|
|
||||||
//
|
|
||||||
// Build on `.form-control` with modifier classes to decrease or increase the
|
|
||||||
// height and font-size of form controls.
|
|
||||||
//
|
|
||||||
// The `.form-group-* form-control` variations are sadly duplicated to avoid the
|
|
||||||
// issue documented in https://github.com/twbs/bootstrap/issues/15074.
|
|
||||||
.input-sm {
|
|
||||||
@include input-size(unquote(".input-sm"), $mdb-input-height-small, $mdb-input-padding-small-vertical, $mdb-input-padding-small-horizontal, $mdb-input-font-size-small, $mdb-input-line-height-small, $mdb-input-border-radius-small);
|
|
||||||
}
|
|
||||||
.form-group-sm {
|
|
||||||
.form-control {
|
|
||||||
height: $mdb-input-height-small;
|
|
||||||
padding: $mdb-input-padding-small-vertical $mdb-input-padding-small-horizontal;
|
|
||||||
font-size: $mdb-input-font-size-small;
|
|
||||||
line-height: $mdb-input-line-height-small;
|
|
||||||
}
|
|
||||||
select.form-control {
|
|
||||||
height: $mdb-input-height-small;
|
|
||||||
line-height: $mdb-input-height-small;
|
|
||||||
}
|
|
||||||
textarea.form-control,
|
|
||||||
select[multiple].form-control {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
.form-control-static {
|
|
||||||
height: $mdb-input-height-small;
|
|
||||||
min-height: ($mdb-input-line-height-computed + $mdb-input-font-size-small);
|
|
||||||
padding: ($mdb-input-padding-small-vertical + 1) $mdb-input-padding-small-horizontal;
|
|
||||||
font-size: $mdb-input-font-size-small;
|
|
||||||
line-height: $mdb-input-line-height-small;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-lg {
|
|
||||||
@include input-size(unquote(".input-lg"), $mdb-input-height-large, $mdb-input-padding-large-vertical, $mdb-input-padding-large-horizontal, $mdb-input-font-size-large, $mdb-input-line-height-large, $mdb-input-border-radius-large);
|
|
||||||
}
|
|
||||||
.form-group-lg {
|
|
||||||
.form-control {
|
|
||||||
height: $mdb-input-height-large;
|
|
||||||
padding: $mdb-input-padding-large-vertical $mdb-input-padding-large-horizontal;
|
|
||||||
font-size: $mdb-input-font-size-large;
|
|
||||||
line-height: $mdb-input-line-height-large;
|
|
||||||
}
|
|
||||||
select.form-control {
|
|
||||||
height: $mdb-input-height-large;
|
|
||||||
line-height: $mdb-input-height-large;
|
|
||||||
}
|
|
||||||
textarea.form-control,
|
|
||||||
select[multiple].form-control {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
.form-control-static {
|
|
||||||
height: $mdb-input-height-large;
|
|
||||||
min-height: ($mdb-input-line-height-computed + $mdb-input-font-size-large);
|
|
||||||
padding: ($mdb-input-padding-large-vertical + 1) $mdb-input-padding-large-horizontal;
|
|
||||||
font-size: $mdb-input-font-size-large;
|
|
||||||
line-height: $mdb-input-line-height-large;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.form-horizontal {
|
|
||||||
|
|
||||||
// Consistent vertical alignment of radios and checkboxes
|
|
||||||
//
|
|
||||||
// Labels also get some reset styles, but that is scoped to a media query below.
|
|
||||||
.radio,
|
|
||||||
.checkbox,
|
|
||||||
.radio-inline,
|
|
||||||
.checkbox-inline {
|
|
||||||
padding-top: ($mdb-input-padding-base-vertical + 1); // Default padding plus a border
|
|
||||||
}
|
|
||||||
// Account for padding we're adding to ensure the alignment and of help text
|
|
||||||
// and other content below items
|
|
||||||
.radio,
|
|
||||||
.checkbox {
|
|
||||||
min-height: ($mdb-input-line-height-computed + ($mdb-input-padding-base-vertical + 1));
|
|
||||||
}
|
|
||||||
|
|
||||||
// Reset spacing and right align labels, but scope to media queries so that
|
|
||||||
// labels on narrow viewports stack the same as a default form example.
|
|
||||||
@media (min-width: $screen-sm-min) {
|
|
||||||
.control-label {
|
|
||||||
padding-top: ($mdb-input-padding-base-vertical + 1); // Default padding plus a border
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Form group sizes
|
|
||||||
//
|
|
||||||
// Quick utility class for applying `.input-lg` and `.input-sm` styles to the
|
|
||||||
// inputs and labels within a `.form-group`.
|
|
||||||
.form-group-lg {
|
|
||||||
@media (min-width: $screen-sm-min) {
|
|
||||||
.control-label {
|
|
||||||
padding-top: (($mdb-input-padding-large-vertical * $mdb-input-line-height-large) + 1);
|
|
||||||
font-size: $mdb-input-font-size-large;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.form-group-sm {
|
|
||||||
@media (min-width: $screen-sm-min) {
|
|
||||||
.control-label {
|
|
||||||
padding-top: ($mdb-input-padding-small-vertical + 1);
|
|
||||||
font-size: $mdb-input-font-size-small;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,390 +1,5 @@
|
|||||||
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
|
|
||||||
|
|
||||||
@import '_inputs-size';
|
|
||||||
|
|
||||||
// label variations
|
|
||||||
.label {
|
|
||||||
border-radius: $border-radius-small;
|
|
||||||
// @include variations(unquote(".label"), unquote(""), background-color, $grey);
|
|
||||||
}
|
|
||||||
|
|
||||||
// must be broken out for reuse - webkit selector breaks firefox
|
|
||||||
@mixin label-static($label-top, $static-font-size, $static-line-height){
|
|
||||||
label.control-label {
|
|
||||||
top: $label-top;
|
|
||||||
left: 0;
|
|
||||||
// must repeat because the selector above is more specific than the general label sizing
|
|
||||||
font-size: $static-font-size;
|
|
||||||
line-height: $static-line-height;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin label-size-variant($placeholder-font-size, $vertical-padding, $line-height, $static-font-size, $static-line-height, $help-block-font-size){
|
|
||||||
.form-control {
|
|
||||||
@include material-placeholder {
|
|
||||||
font-size: $placeholder-font-size;
|
|
||||||
line-height: $line-height;
|
|
||||||
color: $mdb-input-placeholder-color;
|
|
||||||
font-weight: 400;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// generic labels used anywhere in the form (not control-label)
|
|
||||||
.checkbox label,
|
|
||||||
.radio label,
|
|
||||||
label {
|
|
||||||
font-size: $placeholder-font-size;
|
|
||||||
line-height: $line-height;
|
|
||||||
color: $mdb-input-placeholder-color;
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
|
|
||||||
// smaller focused or static size
|
|
||||||
label.control-label {
|
|
||||||
font-size: $static-font-size;
|
|
||||||
line-height: $static-line-height;
|
|
||||||
color: $mdb-input-placeholder-color;
|
|
||||||
font-weight: 400;
|
|
||||||
margin: 16px 0 0 0; // std and lg
|
|
||||||
}
|
|
||||||
|
|
||||||
.help-block {
|
|
||||||
margin-top: 0; // allow the input margin to set-off the top of the help-block
|
|
||||||
font-size: $help-block-font-size;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin form-group-validation-state($name, $color){
|
|
||||||
|
|
||||||
&.#{$name} { // e.g. has-error
|
|
||||||
.form-control {
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
&.is-focused .form-control {
|
|
||||||
background-image: linear-gradient($color, $color), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color);
|
|
||||||
}
|
|
||||||
label.control-label,
|
|
||||||
.help-block {
|
|
||||||
color: $color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin form-group-size-variant($parent, $placeholder-font-size, $label-top-margin, $vertical-padding, $line-height, $label-as-placeholder-shim){
|
|
||||||
$static-font-size: ceil(($mdb-label-static-size-ratio * $placeholder-font-size)) !default;
|
|
||||||
$static-line-height: ($mdb-label-static-size-ratio * $line-height) !default;
|
|
||||||
|
|
||||||
$label-as-placeholder-top: -1 * ($vertical-padding + $label-as-placeholder-shim) !default;
|
|
||||||
$label-top: $label-as-placeholder-top - ($placeholder-font-size + $vertical-padding) !default;
|
|
||||||
|
|
||||||
$help-block-font-size: ceil(($mdb-help-block-size-ratio * $placeholder-font-size)) !default;
|
|
||||||
$help-block-line-height: ($mdb-help-block-size-ratio * $line-height) !default;
|
|
||||||
|
|
||||||
// this is outside a form-group
|
|
||||||
@if not $parent {
|
|
||||||
@include label-size-variant($placeholder-font-size, $vertical-padding, $line-height, $static-font-size, $static-line-height, $help-block-font-size);
|
|
||||||
}
|
|
||||||
|
|
||||||
// this is inside a form-group, may be .form-group.form-group-sm or .form-group.form-group-lg
|
|
||||||
@else {
|
|
||||||
#{$parent} {
|
|
||||||
@include label-size-variant($placeholder-font-size, $vertical-padding, $line-height, $static-font-size, $static-line-height, $help-block-font-size);
|
|
||||||
|
|
||||||
// form-group padding-bottom
|
|
||||||
// upon collapsing margins, the largest margin is honored which collapses the form-control margin-bottom,
|
|
||||||
// so the form-control margin-bottom must also be expressed as form-group padding
|
|
||||||
padding-bottom: $padding-large-vertical;
|
|
||||||
|
|
||||||
// form-group margin-top must be large enough for the label and the label's top padding since label is absolutely positioned
|
|
||||||
margin: ($label-top-margin + $static-font-size) 0 0 0;
|
|
||||||
|
|
||||||
// larger labels as placeholders
|
|
||||||
&.label-floating,
|
|
||||||
&.label-placeholder {
|
|
||||||
label.control-label {
|
|
||||||
top: $label-as-placeholder-top; // place the floating label to look like a placeholder with input padding
|
|
||||||
font-size: $placeholder-font-size;
|
|
||||||
line-height: $line-height;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// static, focused, or autofill floating labels
|
|
||||||
&.label-static,
|
|
||||||
&.label-floating.is-focused,
|
|
||||||
&.label-floating:not(.is-empty) {
|
|
||||||
@include label-static($label-top, $static-font-size, $static-line-height);
|
|
||||||
}
|
|
||||||
// #559 Fix for webkit/chrome autofill - rule must be separate because it breaks firefox otherwise #731
|
|
||||||
&.label-floating input.form-control:-webkit-autofill ~ label.control-label {
|
|
||||||
@include label-static($label-top, $static-font-size, $static-line-height);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// -----
|
// -----
|
||||||
// Inputs
|
// Inputs
|
||||||
|
|
||||||
.form-control,
|
|
||||||
.form-group .form-control {
|
|
||||||
border: 0;
|
|
||||||
background-image: linear-gradient($brand-primary, $brand-primary), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color);
|
|
||||||
background-size: 0 2px, 100% 1px;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center bottom, center calc(100% - 1px);
|
|
||||||
background-color: rgba(0, 0, 0, 0);
|
|
||||||
transition: background 0s ease-out;
|
|
||||||
float: none;
|
|
||||||
box-shadow: none;
|
|
||||||
border-radius: 0;
|
|
||||||
|
|
||||||
font-weight: 400;
|
|
||||||
|
|
||||||
// Placeholders and and labels-as-placeholders should look the same
|
|
||||||
@include material-placeholder {
|
|
||||||
color: $mdb-input-placeholder-color;
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
//&:textarea { // appears to be an invalid selector
|
|
||||||
// height: 40px;
|
|
||||||
//}
|
|
||||||
|
|
||||||
&[readonly],
|
|
||||||
&[disabled],
|
|
||||||
fieldset[disabled] & {
|
|
||||||
background-color: rgba(0, 0, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
&[disabled],
|
|
||||||
fieldset[disabled] & {
|
|
||||||
background-image: none;
|
|
||||||
border-bottom: 1px dotted $mdb-input-underline-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// -----
|
|
||||||
// Labels with form-group signalled state
|
|
||||||
//
|
|
||||||
// Reference http://www.google.com/design/spec/components/text-fields.html
|
|
||||||
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
|
|
||||||
//.variations(unquote(" label.control-label"), color, $mdb-input-placeholder-color); // default label color variations
|
|
||||||
|
|
||||||
.form-group {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
// -----
|
|
||||||
// Labels with form-group signalled state
|
|
||||||
//
|
|
||||||
// Reference http://www.google.com/design/spec/components/text-fields.html
|
|
||||||
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
|
|
||||||
&.label-static,
|
|
||||||
&.label-placeholder,
|
|
||||||
&.label-floating {
|
|
||||||
label.control-label {
|
|
||||||
position: absolute;
|
|
||||||
pointer-events: none;
|
|
||||||
transition: 0.3s ease all;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// hint to browser for optimization
|
|
||||||
// TODO: evaluate effectiveness - looking for community feedback
|
|
||||||
&.label-floating label.control-label {
|
|
||||||
will-change: left, top, contents;
|
|
||||||
}
|
|
||||||
|
|
||||||
// hide label-placeholders when the field is not empty
|
|
||||||
&.label-placeholder:not(.is-empty){
|
|
||||||
label.control-label{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Help blocks - position: absolute approach - uses no vertical space, text wrapping - not so good.
|
|
||||||
.help-block {
|
|
||||||
position: absolute; // do not use position: absolute because width/wrapping isn't automatic and overflows occur
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
// form-group is-focused display
|
|
||||||
&.is-focused {
|
|
||||||
.form-control {
|
|
||||||
outline: none;
|
|
||||||
background-image: linear-gradient($brand-primary, $brand-primary), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color);
|
|
||||||
background-size: 100% 2px, 100% 1px;
|
|
||||||
box-shadow: none;
|
|
||||||
transition-duration: 0.3s;
|
|
||||||
|
|
||||||
.material-input:after {
|
|
||||||
background-color: $brand-primary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.form-info{
|
|
||||||
.form-control{
|
|
||||||
background-image: linear-gradient($brand-info, $brand-info), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.form-success{
|
|
||||||
.form-control{
|
|
||||||
background-image: linear-gradient($brand-success, $brand-success), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.form-warning{
|
|
||||||
.form-control{
|
|
||||||
background-image: linear-gradient($brand-warning, $brand-warning), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.form-danger{
|
|
||||||
.form-control{
|
|
||||||
background-image: linear-gradient($brand-danger, $brand-danger), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.form-white{
|
|
||||||
.form-control{
|
|
||||||
background-image: linear-gradient($white-color, $white-color), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//.variations(unquote(".is-focused.label-placeholder label.control-label"), color, $mdb-input-placeholder-color); // default label color variations
|
|
||||||
&.label-placeholder {
|
|
||||||
label,
|
|
||||||
label.control-label {
|
|
||||||
color: $mdb-input-placeholder-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.help-block {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include form-group-validation-state(has-warning, $brand-warning);
|
|
||||||
@include form-group-validation-state(has-error, $brand-danger);
|
|
||||||
@include form-group-validation-state(has-success, $brand-success);
|
|
||||||
@include form-group-validation-state(has-info, $brand-info);
|
|
||||||
|
|
||||||
textarea {
|
|
||||||
resize: none;
|
|
||||||
& ~ .form-control-highlight {
|
|
||||||
margin-top: -11px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
select {
|
|
||||||
appearance: none; // Fix for OS X
|
|
||||||
|
|
||||||
& ~ .material-input:after {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// default floating size/location without a form-group (will skip form-group styles, and just render default sizing variation)
|
|
||||||
// @include form-group-size-variant(null, $mdb-input-font-size-base, $mdb-label-top-margin-base, $mdb-input-padding-base-vertical, $mdb-input-line-height-base, $mdb-label-as-placeholder-shim-base);
|
|
||||||
//
|
|
||||||
// // default floating size/location with a form-group (need margin etc from a default form-group)
|
|
||||||
// @include form-group-size-variant(unquote(".form-group"), $mdb-input-font-size-base, $mdb-label-top-margin-base, $mdb-input-padding-base-vertical, $mdb-input-line-height-base, $mdb-label-as-placeholder-shim-base);
|
|
||||||
//
|
|
||||||
// // sm floating size/location
|
|
||||||
// @include form-group-size-variant(unquote(".form-group.form-group-sm"), $mdb-input-font-size-small, $mdb-label-top-margin-small, $mdb-input-padding-small-vertical, $mdb-input-line-height-small, $mdb-label-as-placeholder-shim-small);
|
|
||||||
//
|
|
||||||
// // lg floating size/location
|
|
||||||
// @include form-group-size-variant(unquote(".form-group.form-group-lg"), $mdb-input-font-size-large, $mdb-label-top-margin-large, $mdb-input-padding-large-vertical, $mdb-input-line-height-large, $mdb-label-as-placeholder-shim-large);
|
|
||||||
|
|
||||||
|
|
||||||
select.form-control {
|
|
||||||
|
|
||||||
border: 0;
|
|
||||||
box-shadow: none;
|
|
||||||
border-radius: 0;
|
|
||||||
|
|
||||||
.form-group.is-focused & {
|
|
||||||
box-shadow: none;
|
|
||||||
border-color: $mdb-input-underline-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&[multiple] {
|
|
||||||
&,
|
|
||||||
.form-group.is-focused & {
|
|
||||||
height: 85px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin input-group-button-variation($vertical-padding){
|
|
||||||
.input-group-btn {
|
|
||||||
.btn {
|
|
||||||
margin: 0 0 $vertical-padding 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ----------------
|
|
||||||
// input group/addon related styles
|
|
||||||
|
|
||||||
// default margin - no form-group required
|
|
||||||
@include input-group-button-variation($mdb-input-padding-base-vertical);
|
|
||||||
|
|
||||||
.form-group {
|
|
||||||
//.form-control {
|
|
||||||
// float: none;
|
|
||||||
//}
|
|
||||||
|
|
||||||
// sm margin
|
|
||||||
&.form-group-sm {
|
|
||||||
@include input-group-button-variation($mdb-input-padding-small-vertical);
|
|
||||||
}
|
|
||||||
|
|
||||||
// lg margin
|
|
||||||
&.form-group-lg {
|
|
||||||
@include input-group-button-variation($mdb-input-padding-large-vertical);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-group { // may be in or outside of form-group
|
|
||||||
.input-group-btn {
|
|
||||||
padding: 0 12px; // match addon spacing
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-group-addon {
|
|
||||||
border: 0;
|
|
||||||
background: transparent;
|
|
||||||
padding: 6px 15px 0px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Input files - hide actual input - requires specific markup in the sample.
|
|
||||||
.form-group input[type=file] {
|
|
||||||
opacity: 0;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
z-index: 100;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.form-control-feedback{
|
|
||||||
opacity: 0;
|
|
||||||
|
|
||||||
.has-success &{
|
|
||||||
color: $green;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.has-error &{
|
|
||||||
color: $red;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-field{
|
.md-field{
|
||||||
|
|
||||||
.md-input,
|
.md-input,
|
||||||
|
|||||||
@ -2,68 +2,3 @@
|
|||||||
padding-right: 15px;
|
padding-right: 15px;
|
||||||
padding-left: 15px;
|
padding-left: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 992px) {
|
|
||||||
.typo-line {
|
|
||||||
padding-left: 140px;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.typo-line .category {
|
|
||||||
transform: translateY(-50%);
|
|
||||||
top: 50%;
|
|
||||||
left: 0px;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
.sidebar .nav>li.active-pro {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
bottom: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#map {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: calc(100vh - 60px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.places-buttons .btn {
|
|
||||||
margin-bottom: 30px
|
|
||||||
}
|
|
||||||
|
|
||||||
.space-70 {
|
|
||||||
height: 70px;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tim-row {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tim-typo {
|
|
||||||
padding-left: 25%;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tim-typo .tim-note {
|
|
||||||
bottom: 10px;
|
|
||||||
color: #c0c1c2;
|
|
||||||
display: block;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 13px;
|
|
||||||
line-height: 13px;
|
|
||||||
left: 0;
|
|
||||||
margin-left: 20px;
|
|
||||||
position: absolute;
|
|
||||||
width: 260px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tim-row {
|
|
||||||
padding-top: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tim-row h3 {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|||||||
@ -4,22 +4,6 @@ body {
|
|||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
color: $black-color;
|
color: $black-color;
|
||||||
line-height: 1.5em;
|
line-height: 1.5em;
|
||||||
&.inverse {
|
|
||||||
background: #333333;
|
|
||||||
&, .form-control {
|
|
||||||
color: $mdb-text-color-light;
|
|
||||||
}
|
|
||||||
.modal,
|
|
||||||
.panel-default,
|
|
||||||
.card {
|
|
||||||
&,
|
|
||||||
.form-control {
|
|
||||||
background-color: initial;
|
|
||||||
color: initial;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.main{
|
.main{
|
||||||
@ -35,7 +19,6 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.wrapper{
|
.wrapper{
|
||||||
|
|
||||||
&.wrapper-full-page{
|
&.wrapper-full-page{
|
||||||
height: auto;
|
height: auto;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
@ -76,10 +59,8 @@ a{
|
|||||||
@include rotate-180();
|
@include rotate-180();
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar .nav a,
|
|
||||||
.caret,
|
.caret,
|
||||||
.md-toolbar,
|
.md-toolbar {
|
||||||
.sidebar .dropdown .dropdown-menu li a{
|
|
||||||
@include transition($fast-transition-time, $transition-ease-in);
|
@include transition($fast-transition-time, $transition-ease-in);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -115,16 +96,6 @@ legend {
|
|||||||
outline: 0;
|
outline: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
a:focus, a:active,
|
|
||||||
button:active, button:focus, button:hover,
|
|
||||||
button::-moz-focus-inner,
|
|
||||||
input[type="reset"]::-moz-focus-inner,
|
|
||||||
input[type="button"]::-moz-focus-inner,
|
|
||||||
input[type="submit"]::-moz-focus-inner,
|
|
||||||
select::-moz-focus-inner,
|
|
||||||
input[type="file"] > input[type="button"]::-moz-focus-inner {
|
|
||||||
outline : 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-center{
|
.text-center{
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|||||||
@ -2,7 +2,6 @@
|
|||||||
|
|
||||||
@import "mixins/transparency";
|
@import "mixins/transparency";
|
||||||
@import "mixins/vendor-prefixes";
|
@import "mixins/vendor-prefixes";
|
||||||
@import "mixins/chartist";
|
|
||||||
|
|
||||||
// Placeholder text
|
// Placeholder text
|
||||||
@mixin material-placeholder() {
|
@mixin material-placeholder() {
|
||||||
|
|||||||
@ -1,26 +1,8 @@
|
|||||||
@media (min-width: 992px){
|
@media (min-width: 992px){
|
||||||
.navbar-form {
|
|
||||||
margin-top: 21px;
|
|
||||||
margin-bottom: 21px;
|
|
||||||
padding-left: 5px;
|
|
||||||
padding-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-toolbar-toggle{
|
.md-toolbar-toggle{
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.navbar-nav.navbar-right > li > .dropdown-menu:before{
|
|
||||||
left: auto;
|
|
||||||
right: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-nav.navbar-right > li > .dropdown-menu:after{
|
|
||||||
left: auto;
|
|
||||||
right: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer:not(.footer-big){
|
.footer:not(.footer-big){
|
||||||
nav > ul{
|
nav > ul{
|
||||||
li:first-child{
|
li:first-child{
|
||||||
@ -28,151 +10,15 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
body > .navbar-collapse.collapse{
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card{
|
|
||||||
form{
|
|
||||||
[class*="col-"]{
|
|
||||||
padding: 6px;
|
|
||||||
}
|
|
||||||
[class*="col-"]:first-child{
|
|
||||||
padding-left: 15px;
|
|
||||||
}
|
|
||||||
[class*="col-"]:last-child{
|
|
||||||
padding-right: 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar{
|
|
||||||
.navbar-form{
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
.nav-mobile-menu{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Changes for small display */
|
/* Changes for small display */
|
||||||
|
|
||||||
@media (max-width: 991px){
|
@media (max-width: 991px){
|
||||||
.main-panel > .content{
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar{
|
|
||||||
display: none;
|
|
||||||
box-shadow: none;
|
|
||||||
|
|
||||||
.sidebar-wrapper{
|
|
||||||
padding-bottom: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-mobile-menu{
|
|
||||||
margin-top: 0;
|
|
||||||
|
|
||||||
.md-field{
|
|
||||||
width: auto;
|
|
||||||
margin: 10px 36px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notification{
|
|
||||||
float: left;
|
|
||||||
line-height: 30px;
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-menu {
|
|
||||||
position: static;
|
|
||||||
float: none;
|
|
||||||
width: auto;
|
|
||||||
margin-top: 0;
|
|
||||||
background-color: transparent;
|
|
||||||
border: 0;
|
|
||||||
display: none;
|
|
||||||
-webkit-box-shadow: none;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown.open .dropdown-menu{
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown{
|
|
||||||
li:hover a{
|
|
||||||
background-color: $brand-primary;
|
|
||||||
@include shadow-8dp();
|
|
||||||
color: $white-color !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
html,
|
|
||||||
body{
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-on-left{
|
|
||||||
.nav-open &{
|
|
||||||
.main-panel,
|
|
||||||
.wrapper-full-page,
|
|
||||||
.navbar-fixed > div{
|
|
||||||
@include transform-translate-x(260px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-panel{
|
|
||||||
position: initial;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar,
|
|
||||||
.off-canvas-sidebar{
|
|
||||||
left: 0;
|
|
||||||
right: auto;
|
|
||||||
@include transform-translate-x(-260px);
|
|
||||||
}
|
|
||||||
|
|
||||||
#bodyClick{
|
|
||||||
left: 260px;
|
|
||||||
right: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-panel{
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.navbar-transparent{
|
.navbar-transparent{
|
||||||
padding-top: 15px;
|
padding-top: 15px;
|
||||||
background-color: rgba(0, 0, 0, 0.45);
|
background-color: rgba(0, 0, 0, 0.45);
|
||||||
}
|
}
|
||||||
body,
|
|
||||||
html{
|
|
||||||
position: relative;
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
.navbar .container{
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
@include transition (0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1));
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.navbar .navbar-collapse.collapse,
|
|
||||||
.navbar .navbar-collapse.collapse.in,
|
|
||||||
.navbar .navbar-collapse.collapsing{
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-nav > li{
|
|
||||||
float: none;
|
|
||||||
position: relative;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-toolbar-row {
|
.md-toolbar-row {
|
||||||
will-change: auto;
|
will-change: auto;
|
||||||
@ -189,7 +35,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.md-collapse-lateral .md-collapse{
|
.md-collapse-lateral .md-collapse {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
display: block;
|
display: block;
|
||||||
top: 0;
|
top: 0;
|
||||||
@ -450,65 +296,6 @@
|
|||||||
background-color: rgba(229, 229, 229, 0.15);
|
background-color: rgba(229, 229, 229, 0.15);
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-nav {
|
|
||||||
margin: 1px 0;
|
|
||||||
|
|
||||||
.open .dropdown-menu > li {
|
|
||||||
& > a{
|
|
||||||
padding: 15px 15px 5px 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:first-child > a{
|
|
||||||
padding: 5px 15px 5px 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child > a {
|
|
||||||
padding: 15px 15px 25px 50px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
[class*="navbar-"] .navbar-nav {
|
|
||||||
& > li > a,
|
|
||||||
> li > a:hover,
|
|
||||||
> li > a:focus,
|
|
||||||
.active > a,
|
|
||||||
.active > a:hover,
|
|
||||||
.active > a:focus,
|
|
||||||
.open .dropdown-menu > li > a,
|
|
||||||
.open .dropdown-menu > li > a:hover,
|
|
||||||
.open .dropdown-menu > li > a:focus,
|
|
||||||
.navbar-nav .open .dropdown-menu > li > a:active {
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
& > li > a,
|
|
||||||
> li > a:hover,
|
|
||||||
> li > a:focus,
|
|
||||||
.open .dropdown-menu > li > a,
|
|
||||||
.open .dropdown-menu > li > a:hover,
|
|
||||||
.open .dropdown-menu > li > a:focus{
|
|
||||||
opacity: .7;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.navbar-nav .open .dropdown-menu > li > a:active {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
& .dropdown > a{
|
|
||||||
&:hover .caret {
|
|
||||||
border-bottom-color: #777;
|
|
||||||
border-top-color: #777;
|
|
||||||
}
|
|
||||||
&:active .caret {
|
|
||||||
border-bottom-color: white;
|
|
||||||
border-top-color: white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-menu {
|
.dropdown-menu {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
@ -531,9 +318,6 @@
|
|||||||
.social-line .btn{
|
.social-line .btn{
|
||||||
margin: $margin-bottom;
|
margin: $margin-bottom;
|
||||||
}
|
}
|
||||||
.subscribe-line .form-control{
|
|
||||||
margin: $margin-bottom;
|
|
||||||
}
|
|
||||||
.social-line.pull-right{
|
.social-line.pull-right{
|
||||||
float: none;
|
float: none;
|
||||||
}
|
}
|
||||||
@ -543,58 +327,9 @@
|
|||||||
.social-area.pull-right{
|
.social-area.pull-right{
|
||||||
float: none !important;
|
float: none !important;
|
||||||
}
|
}
|
||||||
.form-control + .form-control-feedback{
|
|
||||||
margin-top: -8px;
|
|
||||||
}
|
|
||||||
.navbar-toggle:hover,.navbar-toggle:focus {
|
.navbar-toggle:hover,.navbar-toggle:focus {
|
||||||
background-color: transparent !important;
|
background-color: transparent !important;
|
||||||
}
|
}
|
||||||
.btn.dropdown-toggle{
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
.media-post .author{
|
|
||||||
width: 20%;
|
|
||||||
float: none !important;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto 10px;
|
|
||||||
}
|
|
||||||
.media-post .media-body{
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-collapse.collapse{
|
|
||||||
height: 100% !important;
|
|
||||||
}
|
|
||||||
.navbar-collapse.collapse.in {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.navbar-header .collapse, .navbar-toggle {
|
|
||||||
display:block !important;
|
|
||||||
}
|
|
||||||
.navbar-header {
|
|
||||||
float:none;
|
|
||||||
}
|
|
||||||
.navbar-collapse{
|
|
||||||
.nav p{
|
|
||||||
font-size: $font-size-base;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
[class^="pe-7s-"]{
|
|
||||||
float: left;
|
|
||||||
font-size: 20px;
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer {
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
.container{
|
|
||||||
justify-content: unset;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px){
|
@media (max-width: 768px){
|
||||||
@ -620,37 +355,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@media (max-width: 480px), (max-width: 767px){
|
|
||||||
.form-group{
|
|
||||||
.form-control{
|
|
||||||
width: 83%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-form{
|
|
||||||
.form-group{
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 992px){
|
|
||||||
.table-full-width{
|
|
||||||
margin-left: -20px;
|
|
||||||
margin-right: -20px;
|
|
||||||
}
|
|
||||||
.table-responsive{
|
|
||||||
overflow: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hidden-lg {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 576px) {
|
@media screen and (max-width: 576px) {
|
||||||
.tim-typo{
|
.tim-typo{
|
||||||
padding-left: 11% !important;
|
padding-left: 11% !important;
|
||||||
@ -688,6 +392,10 @@
|
|||||||
.footer .container {
|
.footer .container {
|
||||||
max-width: 960px;
|
max-width: 960px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.hidden-lg {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1200px) {
|
@media (min-width: 1200px) {
|
||||||
|
|||||||
@ -1,325 +0,0 @@
|
|||||||
.wrapper:after{
|
|
||||||
display: table;
|
|
||||||
clear: both;
|
|
||||||
content: " ";
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar,
|
|
||||||
.off-canvas-sidebar {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 1;
|
|
||||||
@include shadow-big();
|
|
||||||
background-size: cover;
|
|
||||||
background-position: center center;
|
|
||||||
@extend .animation-transition-general;
|
|
||||||
|
|
||||||
.md-icon.md-theme-default.md-icon-font,
|
|
||||||
.material-icons{
|
|
||||||
color: #fff !important;
|
|
||||||
opacity: .8
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-list {
|
|
||||||
&.nav {
|
|
||||||
position: initial;
|
|
||||||
}
|
|
||||||
|
|
||||||
background-color: transparent !important;
|
|
||||||
|
|
||||||
.md-list-item a{
|
|
||||||
text-transform: capitalize;
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-list-item-content{
|
|
||||||
justify-content: flex-start;
|
|
||||||
min-height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
& .md-list-item-container:hover{
|
|
||||||
background-color: rgba(200, 200, 200, 0.2) !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-ripple span .md-ripple-wave{
|
|
||||||
background-color: rgba(200, 200, 200, 0.4) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.sidebar-wrapper{
|
|
||||||
position: relative;
|
|
||||||
height: calc(100vh - 75px);
|
|
||||||
overflow: auto;
|
|
||||||
width: 260px;
|
|
||||||
z-index: 4;
|
|
||||||
|
|
||||||
.dropdown .dropdown-backdrop{
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-form{
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav{
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
[data-toggle="collapse"] ~ div > ul > li > a{
|
|
||||||
padding-left: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.caret{
|
|
||||||
margin-top: 13px;
|
|
||||||
position: absolute;
|
|
||||||
right: 18px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo-tim{
|
|
||||||
border-radius: 50%;
|
|
||||||
border: 1px solid #333;
|
|
||||||
display: block;
|
|
||||||
height: 61px;
|
|
||||||
width: 61px;
|
|
||||||
float: left;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
img{
|
|
||||||
width: 60px;
|
|
||||||
height: 60px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.nav{
|
|
||||||
margin-top: 20px;
|
|
||||||
|
|
||||||
&.nav-mobile-menu{
|
|
||||||
li a {
|
|
||||||
padding: 10px 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
li{
|
|
||||||
|
|
||||||
a{
|
|
||||||
display: flex;
|
|
||||||
text-decoration: none;
|
|
||||||
margin: 10px 15px 0;
|
|
||||||
border-radius: $border-radius-base;
|
|
||||||
color: $white-color !important;
|
|
||||||
white-space: nowrap;
|
|
||||||
cursor: pointer;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:first-child > a{
|
|
||||||
margin: 0 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover > a,
|
|
||||||
.dropdown:hover > a{
|
|
||||||
background: rgba(200, 200, 200, 0.2);
|
|
||||||
color: $black-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.active {
|
|
||||||
color: #FFFFFF !important;
|
|
||||||
|
|
||||||
.md-ripple i{
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
p{
|
|
||||||
margin: 0;
|
|
||||||
line-height: 30px;
|
|
||||||
font-size: 14px;
|
|
||||||
position: relative;
|
|
||||||
display: block;
|
|
||||||
height: auto;
|
|
||||||
font-weight: $font-weight-light;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
i{
|
|
||||||
font-size: 24px !important;
|
|
||||||
float: left;
|
|
||||||
margin-right: 15px !important;
|
|
||||||
margin-left: 0;
|
|
||||||
line-height: 30px;
|
|
||||||
width: 30px;
|
|
||||||
text-align: center;
|
|
||||||
color: #a9afbb;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo{
|
|
||||||
position: relative;
|
|
||||||
padding: $padding-base 0;
|
|
||||||
z-index: 4;
|
|
||||||
|
|
||||||
&:after{
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
right: 15px;
|
|
||||||
height: 1px;
|
|
||||||
width: calc(100% - 30px);
|
|
||||||
background-color: rgba(180,180,180, .3);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
p{
|
|
||||||
float: left;
|
|
||||||
font-size: 20px;
|
|
||||||
margin: 10px 10px;
|
|
||||||
color: $white-color;
|
|
||||||
line-height: 20px;
|
|
||||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo-mini{
|
|
||||||
float: left;
|
|
||||||
width: 40px;
|
|
||||||
text-align: center;
|
|
||||||
margin-left: 25px;
|
|
||||||
margin-right: 11px;
|
|
||||||
position: relative;
|
|
||||||
top: -5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.simple-text{
|
|
||||||
text-transform: uppercase;
|
|
||||||
padding: $padding-small-vertical $padding-zero;
|
|
||||||
display: block;
|
|
||||||
font-size: $font-size-large;
|
|
||||||
font-weight: $font-weight-default;
|
|
||||||
line-height: 30px;
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
&,
|
|
||||||
&:hover,
|
|
||||||
&:focus{
|
|
||||||
color: $white-color !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo-img{
|
|
||||||
width: 40px;
|
|
||||||
display: inline-block;
|
|
||||||
height: 40px;
|
|
||||||
background: $white-color;
|
|
||||||
border-radius: 50%;
|
|
||||||
text-align: center;
|
|
||||||
overflow: hidden;
|
|
||||||
@include shadow-big();
|
|
||||||
|
|
||||||
img{
|
|
||||||
width: 55%;
|
|
||||||
vertical-align: -webkit-baseline-middle;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo-tim{
|
|
||||||
border-radius: 50%;
|
|
||||||
border: 1px solid #333;
|
|
||||||
display: block;
|
|
||||||
height: 61px;
|
|
||||||
width: 61px;
|
|
||||||
float: left;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
img{
|
|
||||||
width: 60px;
|
|
||||||
height: 60px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:after{
|
|
||||||
display: block;
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: rgba(27, 27, 27, 0.87);
|
|
||||||
opacity: .85;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
&[data-color="blue"]{
|
|
||||||
@include set-background-color-button($brand-info);
|
|
||||||
}
|
|
||||||
&[data-color="green"]{
|
|
||||||
@include set-background-color-button($brand-success);
|
|
||||||
}
|
|
||||||
&[data-color="orange"]{
|
|
||||||
@include set-background-color-button($brand-warning);
|
|
||||||
}
|
|
||||||
&[data-color="red"]{
|
|
||||||
@include set-background-color-button($brand-danger);
|
|
||||||
}
|
|
||||||
&[data-color="purple"]{
|
|
||||||
@include set-background-color-button($brand-primary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.off-canvas-sidebar{
|
|
||||||
.nav {
|
|
||||||
> li > a,
|
|
||||||
> li > a:hover{
|
|
||||||
color: $white-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
> li > a:focus{
|
|
||||||
background: rgba(200, 200, 200, 0.2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.perfect-scrollbar-on{
|
|
||||||
.sidebar,
|
|
||||||
.main-panel{
|
|
||||||
height: 100%;
|
|
||||||
max-height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-panel{
|
|
||||||
position: relative;
|
|
||||||
float: right;
|
|
||||||
width: $sidebar-width;
|
|
||||||
@include transition (0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1));
|
|
||||||
|
|
||||||
> .content{
|
|
||||||
padding: 30px 15px;
|
|
||||||
min-height: calc(100vh - 123px);
|
|
||||||
}
|
|
||||||
|
|
||||||
> .footer{
|
|
||||||
border-top: 1px solid #e7e7e7;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .navbar{
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// .sidebar,
|
|
||||||
// .main-panel{
|
|
||||||
// -webkit-transition-property: top,bottom;
|
|
||||||
// transition-property: top,bottom;
|
|
||||||
// -webkit-transition-duration: .2s,.2s;
|
|
||||||
// transition-duration: .2s,.2s;
|
|
||||||
// -webkit-transition-timing-function: linear,linear;
|
|
||||||
// transition-timing-function: linear,linear;
|
|
||||||
// -webkit-overflow-scrolling: touch;
|
|
||||||
// }
|
|
||||||
@ -1,89 +0,0 @@
|
|||||||
// Scales for responsive SVG containers
|
|
||||||
$ct-scales: ((1), (15/16), (8/9), (5/6), (4/5), (3/4), (2/3), (5/8), (1/1.618), (3/5), (9/16), (8/15), (1/2), (2/5), (3/8), (1/3), (1/4)) !default;
|
|
||||||
$ct-scales-names: (ct-square, ct-minor-second, ct-major-second, ct-minor-third, ct-major-third, ct-perfect-fourth, ct-perfect-fifth, ct-minor-sixth, ct-golden-section, ct-major-sixth, ct-minor-seventh, ct-major-seventh, ct-octave, ct-major-tenth, ct-major-eleventh, ct-major-twelfth, ct-double-octave) !default;
|
|
||||||
|
|
||||||
// Class names to be used when generating CSS
|
|
||||||
$ct-class-chart: ct-chart !default;
|
|
||||||
$ct-class-chart-line: ct-chart-line !default;
|
|
||||||
$ct-class-chart-bar: ct-chart-bar !default;
|
|
||||||
$ct-class-horizontal-bars: ct-horizontal-bars !default;
|
|
||||||
$ct-class-chart-pie: ct-chart-pie !default;
|
|
||||||
$ct-class-chart-donut: ct-chart-donut !default;
|
|
||||||
$ct-class-label: ct-label !default;
|
|
||||||
$ct-class-series: ct-series !default;
|
|
||||||
$ct-class-line: ct-line !default;
|
|
||||||
$ct-class-point: ct-point !default;
|
|
||||||
$ct-class-area: ct-area !default;
|
|
||||||
$ct-class-bar: ct-bar !default;
|
|
||||||
$ct-class-slice-pie: ct-slice-pie !default;
|
|
||||||
$ct-class-slice-donut: ct-slice-donut !default;
|
|
||||||
$ct-class-grid: ct-grid !default;
|
|
||||||
$ct-class-vertical: ct-vertical !default;
|
|
||||||
$ct-class-horizontal: ct-horizontal !default;
|
|
||||||
$ct-class-start: ct-start !default;
|
|
||||||
$ct-class-end: ct-end !default;
|
|
||||||
|
|
||||||
// Container ratio
|
|
||||||
$ct-container-ratio: (1/1.618) !default;
|
|
||||||
|
|
||||||
// Text styles for labels
|
|
||||||
$ct-text-color: rgba(0, 0, 0, 0.4) !default;
|
|
||||||
$ct-text-size: 0.875rem !default;
|
|
||||||
$ct-text-align: flex-start !default;
|
|
||||||
$ct-text-justify: flex-start !default;
|
|
||||||
$ct-text-line-height: 1;
|
|
||||||
|
|
||||||
.ct-big-chart-white{
|
|
||||||
$ct-grid-color: rgba(250, 250, 250, 0.7) !default;
|
|
||||||
}
|
|
||||||
// Grid styles
|
|
||||||
$ct-grid-color: rgba(0, 0, 0, 0.2) !default;
|
|
||||||
$ct-grid-dasharray: 2px !default;
|
|
||||||
$ct-grid-width: 1px !default;
|
|
||||||
|
|
||||||
// Line chart properties
|
|
||||||
$ct-line-width: 3px !default;
|
|
||||||
$ct-line-dasharray: false !default;
|
|
||||||
$ct-point-size: 8px !default;
|
|
||||||
// Line chart point, can be either round or square
|
|
||||||
$ct-point-shape: round !default;
|
|
||||||
// Area fill transparency between 0 and 1
|
|
||||||
$ct-area-opacity: 0.8 !default;
|
|
||||||
|
|
||||||
// Bar chart bar width
|
|
||||||
$ct-bar-width: 10px !default;
|
|
||||||
|
|
||||||
// Donut width (If donut width is to big it can cause issues where the shape gets distorted)
|
|
||||||
$ct-donut-width: 60px !default;
|
|
||||||
|
|
||||||
// If set to true it will include the default classes and generate CSS output. If you're planning to use the mixins you
|
|
||||||
// should set this property to false
|
|
||||||
$ct-include-classes: true !default;
|
|
||||||
|
|
||||||
// If this is set to true the CSS will contain colored series. You can extend or change the color with the
|
|
||||||
// properties below
|
|
||||||
$ct-include-colored-series: $ct-include-classes !default;
|
|
||||||
|
|
||||||
// If set to true this will include all responsive container variations using the scales defined at the top of the script
|
|
||||||
$ct-include-alternative-responsive-containers: $ct-include-classes !default;
|
|
||||||
|
|
||||||
// Series names and colors. This can be extended or customized as desired. Just add more series and colors.
|
|
||||||
$ct-series-names: (a, b, c, d, e, f, g, h, i, j, k, l, m, n, o) !default;
|
|
||||||
$ct-series-colors: (
|
|
||||||
|
|
||||||
$brand-info,
|
|
||||||
$brand-danger,
|
|
||||||
$brand-warning,
|
|
||||||
$brand-primary,
|
|
||||||
$brand-success,
|
|
||||||
$font-background-light-grey,
|
|
||||||
$gray-color,
|
|
||||||
$social-google,
|
|
||||||
$social-tumblr,
|
|
||||||
$social-youtube,
|
|
||||||
$social-twitter,
|
|
||||||
$social-pinterest,
|
|
||||||
$social-behance,
|
|
||||||
#6188e2,
|
|
||||||
#a748ca
|
|
||||||
) !default;
|
|
||||||
Loading…
x
Reference in New Issue
Block a user