/ *
Template Name : Material Pro Admin
Author : Themedesigner
Email : niravjoshi87 @ gmail . com
File : scss
* /
@import ' variable ' ;
@import url( 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700' ) ;
$bodyfont : ' Roboto ' , ' open sans ' , ' Helvetica Neue ' , ' Helvetica ' , ' Arial ' , sans-serif ;
$headingfont : ' Roboto ' , ' open sans ' , ' Helvetica Neue ' , ' Helvetica ' , ' Arial ' , sans-serif ;
$themecolor : #3a3f51 ;
$themecolor-dark : #252833 ;
$topbar : #ce2829 ;
$themecolor-alt : #252833 ;
$sidebar : #3a3f51 ;
$swhite : #e1e2e3 ;
$bodycolor : #f5f7fa ;
body {
font-family : $bodyfont ;
}
/ * * * * * * * * * * * * * * * * * * *
/ * Top bar
* * * * * * * * * * * * * * * * * * * /
. topbar {
background : $topbar ;
. top-navbar . navbar-header . navbar-brand . light-logo {
display : inline-block ;
color : rgba ( 255 , 255 , 255 , 0 .8 ) ;
}
. navbar-light . navbar-nav . nav-item > {
a . nav-link {
color : $white !important ;
& : hover ,
& : focus {
color : rgba ( 255 , 255 , 255 , 0 .8 ) !important ;
}
}
}
}
/ * * * * * * * * * * * * * * * * * * *
/ * General Elements
* * * * * * * * * * * * * * * * * * * /
a . link {
& : hover ,
& : focus {
color : $themecolor !important ;
}
}
. bg-theme {
background-color : $themecolor !important ;
}
. pagination > . active > a ,
. pagination > . active > span ,
. pagination > . active > a : hover ,
. pagination > . active > span : hover ,
. pagination > . active > a : focus ,
. pagination > . active > span : focus {
background-color : $themecolor ;
border-color : $themecolor ;
}
. right-sidebar {
. rpanel-title {
background : $themecolor ;
}
}
. stylish-table {
tbody tr {
& : hover ,
& . active {
border-left : 4 px solid $themecolor ;
}
}
}
. text-themecolor {
color : $swhite !important ;
}
. profile-tab ,
. customtab {
li {
a . nav-link {
& . active {
border-bottom : 2 px solid $themecolor ;
color : $themecolor ;
}
& : hover {
color : $themecolor ;
}
}
}
}
. left-sidebar {
position : absolute ;
width : 240 px ;
height : 100 % ;
top : 0 ;
z-index : 20 ;
padding-top : 60 px ;
background : $sidebar ;
box-shadow : 0 0 0 rgba ( 0 , 0 , 0 , 0 .08 ) ;
}
. sidebar-nav {
background : $sidebar ;
padding : 0 ;
> ul {
padding : 0 0 60 px ;
}
ul {
margin : 0 ;
li {
list-style : none ;
a {
color : $swhite ;
font-weight : 400 ;
padding : 8 px 35 px 8 px 40 px ;
display : block ;
font-size : 14 px ;
border-radius : 0 ;
white-space : nowrap ;
i {
color : $swhite ;
font-size : 14 px ;
}
& . active ,
& : hover {
color : $topbar ;
cursor : pointer ;
}
& . active {
font-weight : 400 ;
color : $topbar ;
}
}
ul {
padding-left : 60 px ;
padding-top : 0 ;
transition-delay : inherit ;
border-left : 3 px solid $topbar ;
li a {
padding : 15 px 35 px 10 px 15 px ;
}
ul {
padding-left : 35 px ;
}
}
& . nav-small-cap {
font-size : 12 px ;
margin-bottom : 0 ;
padding : 14 px 14 px 14 px 20 px ;
color : $dark ;
font-weight : 400 ;
}
}
}
> ul > li {
margin-bottom : 0 px ;
& . active > a {
color : $topbar ;
font-weight : 400 ;
border-left : 3 px solid $topbar ;
background : $themecolor-alt ;
padding : 8 px 35 px 8 px 37 px ;
box-shadow : 0 0 0 rgba ( 0 , 0 , 0 , 0 .2 ) ;
i {
color : $topbar ;
font-size : 14 px ;
}
}
}
> ul > li > a {
& . active ,
& : hover {
i {
color : $topbar ;
}
}
i {
width : 27 px ;
height : 27 px ;
line-height : 27 px ;
display : inline-block ;
vertical-align : middle ;
color : $swhite ;
}
. label {
float : right ;
margin-top : 6 px ;
}
& . active {
font-weight : 400 ;
background : #242933 ;
color : $topbar ;
}
}
}
@media ( min-width : 768px ) {
. mini-sidebar . sidebar-nav # sidebarnav li {
position : relative ;
}
. mini-sidebar . sidebar-nav # sidebarnav > li > ul {
position : absolute ;
left : 60 px ;
top : 45 px ;
width : 200 px ;
z-index : 1001 ;
background : $sidebar-alt ;
display : none ;
padding-left : 1 px ;
}
. mini-sidebar . sidebar-nav {
padding : 0 ;
}
. mini-sidebar . fix-sidebar . left-sidebar {
position : absolute ;
}
. mini-sidebar . sidebar-nav # sidebarnav > li : hover > ul {
height : auto !important ;
overflow : auto ;
}
. mini-sidebar . sidebar-nav # sidebarnav > li : hover > ul ,
. mini-sidebar . sidebar-nav # sidebarnav > li : hover > ul . collapse {
display : block ;
}
. mini-sidebar . sidebar-nav # sidebarnav > li > a . has-arrow : after {
display : none ;
}
. mini-sidebar {
. left-sidebar {
width : 60 px ;
}
. user-profile {
padding-bottom : 15 px ;
width : 60 px ;
margin-bottom : 7 px ;
. profile-img {
padding : 15 px 0 0 0 ;
margin : 0 px 0 0 6 px ;
& : before {
top : 15 px ;
}
}
}
. scroll-sidebar {
padding-bottom : 0 px ;
position : absolute ;
}
. hide-menu ,
. nav-small-cap ,
. sidebar-footer ,
. user-profile . profile-text {
display : none ;
}
. nav-devider {
width : 50 px ;
}
. sidebar-nav {
background : transparent ;
}
. sidebar-nav # sidebarnav > li > a {
padding : 9 px 20 px ;
width : 60 px ;
}
. sidebar-nav # sidebarnav > li : hover > a {
width : 260 px ;
background : $themecolor-alt ;
color : $white ;
border-color : $themecolor ;
i {
color : $white ;
}
. hide-menu {
display : inline ;
}
}
. sidebar-nav # sidebarnav > li . active > a {
border-color : transparent ;
& . active {
border-color : $topbar ;
}
}
}
}
/ * * * * * * * * * * * * * * * * * * *
/ * Buttons
* * * * * * * * * * * * * * * * * * * /
. btn-themecolor ,
. btn-themecolor . disabled {
background : $themecolor ;
color : $swhite ;
border : 1 px solid $themecolor ;
& : hover {
background : $themecolor ;
opacity : 0 .7 ;
border : 1 px solid $themecolor ;
}
& . active ,
& : focus {
background : $themecolor-dark ;
}
}
. topbar {
position : relative ;
z-index : 50 ;
box-shadow : 0 0 0 rgba ( 0 , 0 , 0 , 0 .5 ) ;
. top-navbar {
min-height : 60 px ;
height : 60 px ;
padding : 0 15 px 0 0 ;
. dropdown-toggle : : after {
display : none ;
}
. navbar-header {
line-height : 60 px ;
text-align : left ;
. navbar-brand {
margin-right : 0 ;
padding-bottom : 0 ;
padding-top : 0 ;
padding-left : 10 px ;
. light-logo {
display : none ;
}
b {
line-height : 60 px ;
display : inline-block ;
}
}
}
}
. dropdown-menu {
box-shadow : 0 0 0 rgba ( 0 , 0 , 0 , 0 .05 ) ;
-webkit-box-shadow : 0 0 0 rgba ( 0 , 0 , 0 , 0 .05 ) ;
-moz-box-shadow : 0 0 0 rgba ( 0 , 0 , 0 , 0 .05 ) ;
border-color : $border ;
background : $themecolor ;
padding : 0 0 ;
. dropdown-item {
padding : 7 px 1 .5 rem ;
}
}
ul . dropdown-user {
padding : 0 ;
width : 270 px ;
background : $themecolor ;
li {
list-style : none ;
padding : 0 ;
margin : 0 ;
a {
padding : 10 px 15 px ;
display : block ;
color : $swhite ;
background : $themecolor ;
& : hover {
background : $themecolor-alt ;
color : $swhite ;
text-decoration : none ;
}
}
}
}
}
. page-titles {
background : #4f566f ;
margin : 0 - 30 px 5 px ;
min-height : 60 px ;
height : 60 px ;
padding : 0 ;
box-shadow : 0 0 0 rgba ( 0 , 0 , 0 , 0 .1 ) ;
. btn {
height : 50 px ;
width : 70 px ;
padding : 0 0 ;
}
}
. card-no-border {
. sidebar-nav > ul > li > a . active {
background : $themecolor-alt ;
}
}
. form-material . form-control {
& : : placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color : $swhite ;
opacity : 1 ; /* Firefox */
}
& : -ms-input-placeholder { /* Internet Explorer 10-11 */
color : $swhite ;
}
& : : -ms-input-placeholder { /* Microsoft Edge */
color : $swhite ;
}
}
. form-material . form-control , . form-material . form-control . focus , . form-material . form-control : focus {
background-image : linear-gradient ( $topbar , $topbar ) , linear-gradient ( $swhite , $swhite ) ;
border : 0 none ;
border-radius : 0 ;
box-shadow : none ;
float : none ;
}
. form-control : focus {
& : : placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color : $topbar ;
opacity : 1 ; /* Firefox */
}
& : -ms-input-placeholder { /* Internet Explorer 10-11 */
color : $topbar ;
}
& : : -ms-input-placeholder { /* Microsoft Edge */
color : $topbar ;
}
}
. page-wrapper {
background : $bodycolor ;
padding-bottom : 60 px ;
}
. overlay {
display : none ;
height : 100 % ;
width : 100 % ;
position : fixed ;
z-index : 2147483647 ;
left : 0 ;
top : 0 ;
background-color : rgb ( 0 , 0 , 0 ) ;
background-color : rgba ( 0 , 0 , 0 , 0 .8 ) ;
backdrop-filter : blur ( 6 px ) ;
overflow-x : hidden ;
}
. overlay-content {
position : relative ;
top : 50 % ;
width : 100 % ;
text-align : center ;
}
. dataTables_wrapper {
padding-top : 0 px
}
. dt-buttons {
display : inline-block ;
padding-top : 0 ;
margin-bottom : 0 ;
}
. tooltip {
pointer-events : none ;
}
table . dataTable tbody td {
vertical-align : middle ;
}
@media ( min-width : 1024 px ) {
# edit_bar {
margin-left : 240 px ;
}
}
@media ( max-width : 767px ) {
/*Sidebar and wrapper*/
. mini-sidebar . page-wrapper {
padding-top : 0 ;
}
}