$bgcolor: #fff; $themecolor: #242939; $navlinkcolor:#989eb3; $naviconcolor:#8492bc; $textcolor: #555; $fontsize: 16px; /* $bgcolor: #fff; $themecolor: #3afe; $navlinkcolor:#fff; $naviconcolor:#fff; $textcolor: #555; $fontsize: 16px; */ // $bgcolor: #fff; // $themecolor: #be2835; // $navlinkcolor:#fff; // $naviconcolor:#fff; // $textcolor: #555; // $fontsize: 16px; body { font-family: 'Nunito', sans-serif; background: #faf7ff; font-size: $fontsize; font-weight: 400; line-height: 1.7; color: $textcolor; } .modal-backdrop { opacity: .5; } :focus { outline: none; } .dropdown-item:active{ background-color: transparent; color:#333; } h1{ font-size: 24px; line-height: 1.5; } h2 { font-size: 20px; line-height: 1.5; } h3 { font-size: 18px; line-height: 1.75; font-weight: 600; color:#181818; } h4 { font-size: 16px; font-weight: 600; color:#181818; } .wrapper { .left-sidebar { position: fixed; opacity: 1; transition: all .2s ease-in; background: $themecolor; box-shadow: 0 0 35px 0 rgba(154, 161, 171, .15); width: 230px; height: 1000px; .logo-wrapper { padding: 20px 10px; background: darken($themecolor, 2%); ; .logo { width: 140px; padding: 20px; } } .nav-title { font-size: 14px; color: #fff; padding: 15px 30px; } .dropdown-container { display: none; background-color: lighten($themecolor, 10%); // padding-left: 8px; } ul { margin: 0; padding: 0; li { list-style-type: none; .sub-nav { display: none; li{ margin:0; padding:0; .dot{ width:4px; height: 4px; border-radius: 50%; background:#687393; display:flex; align-items: center; margin-right: 10px; margin-top: 8px; } a{ background: darken($themecolor, 17%); padding-left: 50px; } } } } } li a, .dropdown-btn { background-color: #1f2433; padding: 9px 20px; text-decoration: none; font-size: 14px; color: $navlinkcolor; display: flex; border: none; flex-grow: 1; -webkit-box-align: stretch; align-items: stretch; background: none; width: 100%; text-align: left; cursor: pointer; outline: none; transition: all .2s ease-in; .link-text { flex-grow: 1; } &:hover { background: darken($themecolor, 2%); color: #fff; } i { color: $naviconcolor; } } .dropdown-btn.active{ background: rgba(0, 0, 0, 0.1); color: #fff; } .router-link-exact-active { background: rgba(0, 0, 0, 0.1); color: #fff; border-left: 4px solid #3afe; i { color: #fff; } } } @media(max-width:768px) { .left-sidebar { opacity: 0; transition: all .2s ease-in; } .left-sidebar.open { opacity: 1; transition: all .2s ease-in; } } .main-content { transition: all .2s ease-in; margin-left: 230px; .headerbar { background: #fff; display: flex; align-items: center; padding: 8px 20px; min-height: 70px; box-shadow: 0 0 35px 0 rgba(154, 161, 171, .15); #menu-btn { padding: 5px; i { font-size: 25px; } } } main { padding: 30px 15px; } } @media(max-width: 768px) { .main-content { margin-left: 0; } .main-content.open { // margin-left: 230px; position: relative; left: 230px; transition: all .3s ease-in; } } } main { .widget1 { background: #fff; border-radius: 6px; padding: 20px; margin-bottom: 35px; word-wrap: break-word; overflow: hidden; // box-shadow: 0 10px 20px 0 rgba(26, 44, 57, 0.14); box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, .03); .title{ font-weight: 600; } .count{ font-size: 26px; font-weight: 600; } } } .card { border: none; margin-bottom: 35px; box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, .03); .card-body { padding: 24px; } } .b-toast { display: block; position: relative; max-width: 350px; -webkit-backface-visibility: hidden; backface-visibility: hidden; background-clip: padding-box; z-index: 1; border-radius: .25rem; .toast-header { display: flex; align-items: center; padding: .25rem .75rem; color: #6c757d; background-color: hsla(0, 0%, 100%, .85); background-clip: padding-box; border-bottom: 1px solid rgba(0, 0, 0, .05); } .toast-body { display: block; padding: .75rem; } }