first commit
This commit is contained in:
235
public/style/scss/layout/theme/_theme-bg.scss
Normal file
235
public/style/scss/layout/theme/_theme-bg.scss
Normal file
@ -0,0 +1,235 @@
|
||||
//background for nav header
|
||||
@each $name, $color in $theme_backgrounds {
|
||||
[data-nav-headerbg="#{$name}"][data-theme-version="dark"],
|
||||
[data-nav-headerbg="#{$name}"] {
|
||||
@if $name != "color_1" {
|
||||
.nav-header {
|
||||
background-color: $color;
|
||||
|
||||
.brand-logo {
|
||||
color: $white;
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
.hamburger .line{
|
||||
background:#fff;
|
||||
}
|
||||
|
||||
}
|
||||
&[data-sidebar-style="full"][data-layout="vertical"]{
|
||||
.menu-toggle .nav-header .nav-control .hamburger .line{
|
||||
background:#fff ;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
//background for header
|
||||
@each $name, $color in $theme_backgrounds {
|
||||
[data-headerbg="#{$name}"][data-theme-version="dark"],
|
||||
[data-headerbg="#{$name}"] {
|
||||
|
||||
@if $name != "color_1" {
|
||||
.header {
|
||||
background-color: $color;
|
||||
color: $white;
|
||||
}
|
||||
.header-left {
|
||||
input {
|
||||
border-color: lighten($color: $color, $amount: 10%);
|
||||
background-color: lighten($color: $color, $amount: 10%) !important;
|
||||
color: $white;
|
||||
// border-right-color: transparent;
|
||||
|
||||
&::placeholder {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: darken($color: $color, $amount: 10%);
|
||||
}
|
||||
}
|
||||
.search_icon{
|
||||
background-color: lighten($color: $color, $amount: 10%) !important;
|
||||
i{
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
background-color: darken($color: $color, $amount: 10%);
|
||||
border-color: darken($color: $color, $amount: 10%);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background-color: darken($color: $color, $amount: 20%);
|
||||
border-color: darken($color: $color, $amount: 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-right {
|
||||
.dropdown {
|
||||
&>a {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
.pulse-css{
|
||||
background-color:$white;
|
||||
&:after,
|
||||
&:before{
|
||||
background-color:inherit;
|
||||
}
|
||||
}
|
||||
.notification_dropdown .nav-link{
|
||||
background-color: lighten($color: $color, $amount: 10%) !important;
|
||||
}
|
||||
.right-sidebar a{
|
||||
border-color:rgba(255,255,255,0.1);
|
||||
color:$white;
|
||||
}
|
||||
.header-profile > a.nav-link .header-info {
|
||||
strong{
|
||||
color:$white;
|
||||
}
|
||||
span,
|
||||
small{
|
||||
color:rgba(255,255,255,0.7);
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-control {
|
||||
background-color: lighten($color: $color, $amount: 10%);
|
||||
color: $white;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//styles for sidebar
|
||||
@each $name, $color in $theme_backgrounds {
|
||||
//:not([data-sidebar-style="modern"])
|
||||
[data-sibebarbg="#{$name}"][data-theme-version="dark"],
|
||||
[data-sibebarbg="#{$name}"] {
|
||||
@if $name != "color_1" {
|
||||
|
||||
.deznav {
|
||||
background-color: $color;
|
||||
.menu-tabs li a.active{
|
||||
color: $color;
|
||||
}
|
||||
.metismenu {
|
||||
.nav-label{
|
||||
color:rgba(255,255,255,0.7);
|
||||
border-color:rgba(255,255,255,0.2);
|
||||
}
|
||||
&>li {
|
||||
&>a {
|
||||
color: rgba(255,255,255,0.7); //darken($color: $white, $amount: 0%);
|
||||
svg{
|
||||
color:rgba(255,255,255,0.7);
|
||||
}
|
||||
g [fill] {
|
||||
fill: rgba(255,255,255,0.7);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.mm-active {
|
||||
|
||||
&>a {
|
||||
color: $white;
|
||||
g [fill] {
|
||||
fill:$white;
|
||||
}
|
||||
svg{
|
||||
color:$white;
|
||||
}
|
||||
// &::after {
|
||||
// border-color: transparent transparent $white transparent;
|
||||
// }
|
||||
}
|
||||
}
|
||||
@at-root [data-layout="horizontal"]#{&} {
|
||||
// &:not(:last-child) {
|
||||
border-color: lighten($color: $color, $amount: 10%);
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgba(255,255,255,0.7);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.mm-active {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
border-color: rgba(255,255,255,0.2);
|
||||
&:after{
|
||||
background-color: rgba(255,255,255,0.2);
|
||||
}
|
||||
}
|
||||
|
||||
// .has-arrow {
|
||||
// &:after {
|
||||
// border-color: transparent transparent darken($color: $white, $amount: 30%) transparent;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
&[data-sidebar-style="mini"][data-layout="vertical"]{
|
||||
.deznav .metismenu li > ul{
|
||||
background-color: lighten($color: $color, $amount: 10%);
|
||||
}
|
||||
.deznav .metismenu > li.mm-active > a,
|
||||
.deznav .metismenu > li:hover > a{
|
||||
background-color: lighten($color: $color, $amount: 10%);
|
||||
}
|
||||
}
|
||||
&[data-sidebar-style="full"][data-layout="vertical"]{
|
||||
.menu-toggle .deznav .metismenu li > ul,
|
||||
.menu-toggle .deznav .metismenu > li.mm-active > a,
|
||||
.menu-toggle .deznav .metismenu > li:hover > a{
|
||||
background-color: lighten($color: $color, $amount: 10%);
|
||||
}
|
||||
}
|
||||
&[data-sidebar-style="icon-hover"][data-layout="vertical"]{
|
||||
.deznav .metismenu ul{
|
||||
border-color: rgba(255,255,255,0.2);
|
||||
}
|
||||
}
|
||||
&[data-layout="horizontal"]{
|
||||
.deznav .metismenu > li{
|
||||
border-color: rgba(255,255,255,0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-headerbg="transparent"]{
|
||||
.header{
|
||||
box-shadow: none;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
[data-headerbg="color_1"]{
|
||||
.nav-header .hamburger.is-active .line,
|
||||
.nav-header .hamburger .line{
|
||||
background:$primary !important;
|
||||
}
|
||||
}
|
||||
92
public/style/scss/layout/theme/_theme-boxed.scss
Normal file
92
public/style/scss/layout/theme/_theme-boxed.scss
Normal file
@ -0,0 +1,92 @@
|
||||
@media (min-width: 992px) {
|
||||
[data-container="boxed"] {
|
||||
#main-wrapper {
|
||||
max-width: 1199px;
|
||||
margin: 0 auto;
|
||||
|
||||
@at-root [direction="rtl"]#{&} {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@include custommq($min: 1350px) {
|
||||
[data-layout="vertical"][data-sidebar-style="overlay"][data-container="boxed"][data-header-position="fixed"] {
|
||||
.header {
|
||||
width: 1199px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include custommq($min: 1200px, $max: 1349px) {
|
||||
[data-layout="vertical"][data-sidebar-style="overlay"][data-container="boxed"][data-header-position="fixed"] {
|
||||
.header {
|
||||
width: 1199px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
[data-header-position="fixed"][data-layout="horizontal"][data-container="boxed"] {
|
||||
.deznav {
|
||||
max-width: 1199px;
|
||||
}
|
||||
} //ok
|
||||
|
||||
[data-layout="horizontal"][data-container="boxed"][data-header-position="fixed"] {
|
||||
.header {
|
||||
width: 1199px;
|
||||
}
|
||||
}
|
||||
|
||||
[data-layout="horizontal"][data-container="boxed"][data-header-position="fixed"][data-sidebar-style="mini"] {
|
||||
.header {
|
||||
width: 1199px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
[data-container="boxed"] {
|
||||
.metismenu.fixed {
|
||||
left: auto;
|
||||
max-width: 1199px;
|
||||
}
|
||||
|
||||
.page-titles {
|
||||
margin-bottom: 3rem;
|
||||
padding: 15px 15px;
|
||||
}
|
||||
|
||||
.content-body .container-fluid {
|
||||
padding: 0.9375rem 0.9375rem 0 0.9375rem;
|
||||
}
|
||||
}
|
||||
|
||||
[data-container="boxed"][data-layout="vertical"] {
|
||||
.page-titles {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
[data-layout="vertical"][data-container="boxed"][data-sidebar-position="fixed"][data-header-position="static"][data-sidebar-style="overlay"] {
|
||||
.nav-header {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.menu-toggle {
|
||||
.deznav {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-container="boxed"][data-sidebar-position="fixed"][data-layout="horizontal"] {
|
||||
.deznav.fixed {
|
||||
left: auto;
|
||||
max-width: 1199px;
|
||||
}
|
||||
}
|
||||
605
public/style/scss/layout/theme/_theme-color.scss
Normal file
605
public/style/scss/layout/theme/_theme-color.scss
Normal file
@ -0,0 +1,605 @@
|
||||
//Theme color for Primary Variable
|
||||
@each $name, $color in $theme_backgrounds {
|
||||
[data-primary="#{$name}"] {
|
||||
@if $name != "color_1" {
|
||||
|
||||
a {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.active {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
[data-class="bg-primary"]:before{
|
||||
background: $color;
|
||||
}
|
||||
.email-left-box .intro-title{
|
||||
background: rgba($color, .1);
|
||||
i{
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
.widget-stat .media .media-body h4{
|
||||
color: $color !important;
|
||||
}
|
||||
.email-right-box .right-box-border{
|
||||
border-right: 2px solid rgba($color, .1);
|
||||
}
|
||||
.mail-list .list-group-item.active i{
|
||||
color: $color;
|
||||
}
|
||||
.single-mail.active{
|
||||
background: $color;
|
||||
}
|
||||
.profile-info h4.text-primary {
|
||||
color: $color!important;
|
||||
}
|
||||
.profile-tab .nav-item .nav-link{
|
||||
&:hover,
|
||||
&.active{
|
||||
border-bottom: .20px solid $color;
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
.amChartsInputField {
|
||||
border: 0;
|
||||
background: $color;
|
||||
}
|
||||
.amcharts-period-input,
|
||||
.amcharts-period-input-selected {
|
||||
background: $color;
|
||||
}
|
||||
.morris-hover {
|
||||
background: $color;
|
||||
}
|
||||
.select2-container--default .select2-results__option--highlighted[aria-selected] {
|
||||
background-color: $color;
|
||||
}
|
||||
.custom-select:focus{
|
||||
border-color: $color;
|
||||
color: $color;
|
||||
}
|
||||
.daterangepicker {
|
||||
td.active {
|
||||
background-color: $color;
|
||||
|
||||
&:hover {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
button.applyBtn {
|
||||
background-color: $color;
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
.wizard {
|
||||
&>.steps li.current a {
|
||||
background-color: $color;
|
||||
}
|
||||
.skip-email a {
|
||||
color: $color;
|
||||
}
|
||||
&>.actions li:not(.disabled) a {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
.step-form-horizontal {
|
||||
.wizard {
|
||||
.steps {
|
||||
li {
|
||||
&.done {
|
||||
a {
|
||||
.number {
|
||||
background: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.current a {
|
||||
.number {
|
||||
color: $color;
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
&.disabled a {
|
||||
.number {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
&:not(:last-child) {
|
||||
&::after {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.is-invalid .input-group-prepend .input-group-text i {
|
||||
color: lighten($color, 15%);
|
||||
}
|
||||
.datamaps-hoverover {
|
||||
color: $color;
|
||||
border: 1px solid rgba($color, .3);
|
||||
}
|
||||
.jqvmap-zoomin,
|
||||
.jqvmap-zoomout {
|
||||
background-color: $color;
|
||||
}
|
||||
.table {
|
||||
.thead-primary th {
|
||||
background-color: $color;
|
||||
}
|
||||
&.primary-table-bg-hover {
|
||||
thead th {
|
||||
background-color: darken($color: $color, $amount: 5%);
|
||||
}
|
||||
tbody tr {
|
||||
background-color: $color;
|
||||
&:hover {
|
||||
background-color: lighten($color: $color, $amount: 5%);
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
td, th {
|
||||
border-bottom: 1px solid darken($color: $color, $amount: 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
table.dataTable tr.selected{
|
||||
color: $color;
|
||||
}
|
||||
.dataTables_wrapper .dataTables_paginate .paginate_button.current{
|
||||
color: $color !important;
|
||||
background: rgba($color, .1);
|
||||
}
|
||||
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
|
||||
color: $color !important;
|
||||
background: rgba($color, .1);
|
||||
}
|
||||
.clipboard-btn:hover {
|
||||
background-color: $color;
|
||||
}
|
||||
.cd-h-timeline__dates {
|
||||
&::before {
|
||||
background: $color;
|
||||
}
|
||||
&::after {
|
||||
background: $color;
|
||||
}
|
||||
}
|
||||
.cd-h-timeline__line {
|
||||
background-color: $color;
|
||||
}
|
||||
.cd-h-timeline__date:after {
|
||||
border-color: lighten($color, 0.9);
|
||||
background-color: $color;
|
||||
}
|
||||
.cd-h-timeline__navigation {
|
||||
border-color: lighten($color, 0.9);
|
||||
}
|
||||
.cd-h-timeline__navigation--inactive:hover {
|
||||
border-color: lighten($color, 0.9);
|
||||
}
|
||||
.dd-handle {
|
||||
background: $color;
|
||||
}
|
||||
.dd-handle:hover {
|
||||
background: $color;
|
||||
}
|
||||
.dd3-content:hover {
|
||||
background: $color;
|
||||
}
|
||||
.noUi-connect {
|
||||
background-color: $color;
|
||||
&.c-3-color {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
.noUi-horizontal .noUi-handle, .noUi-vertical .noUi-handle {
|
||||
background-color: $color;
|
||||
}
|
||||
#slider-toggle.off .noUi-handle {
|
||||
border-color: $color;
|
||||
}
|
||||
.pignose-calendar {
|
||||
border-color: $color;
|
||||
|
||||
.pignose-calendar-top-date {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
.pignose-calendar.pignose-calendar-blue .pignose-calendar-body .pignose-calendar-row .pignose-calendar-unit.pignose-calendar-unit-active a {
|
||||
background-color: $color;
|
||||
}
|
||||
.bootstrap-tagsinput .tag {
|
||||
background-color: $color;
|
||||
}
|
||||
.toast {
|
||||
&-success {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
.twitter-typeahead .tt-menu .tt-suggestion:hover {
|
||||
background-color: $color;
|
||||
}
|
||||
.accordion {
|
||||
&-header-bg {
|
||||
.accordion__header {
|
||||
&--primary {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.alert-primary{
|
||||
background: lighten($color, 25%);
|
||||
border-color: lighten($color, 25%);
|
||||
color: $color;
|
||||
}
|
||||
.alert-alt.alert-primary{
|
||||
border-left: 4px solid $color;
|
||||
}
|
||||
.alert-alt.alert-primary.solid{
|
||||
border-left: 4px solid darken($color,25%)!important;
|
||||
}
|
||||
.alert.alert-primary.solid{
|
||||
background: $color;
|
||||
border-color: $color;
|
||||
}
|
||||
.alert.alert-outline-primary{
|
||||
color: $color;
|
||||
border-color: $color;
|
||||
}
|
||||
.badge-outline-primary{
|
||||
border: 1px solid $color;
|
||||
color: $color;
|
||||
}
|
||||
.badge-primary {
|
||||
background-color: $color;
|
||||
}
|
||||
.page-titles h4 {
|
||||
color: $color;
|
||||
}
|
||||
.card-action{
|
||||
&>a{
|
||||
background: darken($color,57%);
|
||||
}
|
||||
//&:hover,&:focus{
|
||||
// background: darken($color,57%);
|
||||
//}
|
||||
.dropdown{
|
||||
background: darken($color,57%);
|
||||
color: $color;
|
||||
&:hover,&:focus{
|
||||
background: darken($color,57%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.card-loader i {
|
||||
background: darken($color,7%);
|
||||
}
|
||||
|
||||
.dropdown-outline{
|
||||
border: .1rem solid $color;
|
||||
}
|
||||
.custom-dropdown .dropdown-menu .dropdown-item:hover{
|
||||
color: $color;
|
||||
}
|
||||
.card-action .custom-dropdown{
|
||||
background: lighten($color, 30%);
|
||||
&.show,&:focus,&:hover{
|
||||
background: $color;
|
||||
}
|
||||
}
|
||||
.label-primary{
|
||||
background: $color;
|
||||
}
|
||||
.pagination {
|
||||
.page-item {
|
||||
.page-link {
|
||||
&:hover{
|
||||
background: $color;
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
&.active .page-link {
|
||||
background-color: $color;
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bootstrap-popover-wrapper .bootstrap-popover{
|
||||
button:hover,
|
||||
button:focus{
|
||||
background: $color;
|
||||
}
|
||||
}
|
||||
.progress-bar {
|
||||
background-color: $color;
|
||||
}
|
||||
.progress-bar-primary {
|
||||
background-color: $color;
|
||||
}
|
||||
.ribbon {
|
||||
&__four {
|
||||
background-color: $color;
|
||||
&:after, &:before {
|
||||
background-color: lighten($color: $color, $amount: 20%);
|
||||
}
|
||||
}
|
||||
&__five {
|
||||
background-color: $color;
|
||||
|
||||
&::before {
|
||||
border-color: transparent transparent $color transparent;
|
||||
}
|
||||
}
|
||||
&__six {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
.multi-steps{
|
||||
& > li {
|
||||
color: $color;
|
||||
&:after {
|
||||
background-color: $color;
|
||||
}
|
||||
&.is-active:before {
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.timeline-badge.primary {
|
||||
background-color: $color !important;
|
||||
}
|
||||
.tooltip{
|
||||
&-wrapper{
|
||||
button:hover{
|
||||
background: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chart_widget_tab_one {
|
||||
.nav-link {
|
||||
&.active {
|
||||
background-color: $color;
|
||||
border: 1px solid $color;
|
||||
&:hover {
|
||||
border: 1px solid $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.social-icon2{
|
||||
a{
|
||||
border: .1rem solid $color;
|
||||
}
|
||||
i{
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
.social-icon3 ul li a:hover i{
|
||||
color: $color;
|
||||
}
|
||||
.bgl-primary{
|
||||
background: lighten($color, 30%);
|
||||
border-color: lighten($color, 30%);
|
||||
color: $color;
|
||||
}
|
||||
.tdl-holder input[type=checkbox]:checked + i {
|
||||
background: $color;
|
||||
}
|
||||
.footer .copyright a{
|
||||
color: $color;
|
||||
}
|
||||
.hamburger .line {
|
||||
background: $color;
|
||||
}
|
||||
svg.pulse-svg .first-circle {
|
||||
fill: $color;
|
||||
}
|
||||
.pulse-css {
|
||||
background: $color;
|
||||
&:after,
|
||||
&:before {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
.notification_dropdown .dropdown-menu-right .notification_title {
|
||||
background: $color;
|
||||
}
|
||||
.header-right {
|
||||
.header-profile {
|
||||
.dropdown-menu {
|
||||
a {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.active {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.profile_title {
|
||||
background: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
&[data-sidebar-style="full"][data-layout="vertical"] {
|
||||
.menu-toggle .nav-header .nav-control .hamburger .line {
|
||||
background-color: $color!important;
|
||||
}
|
||||
}
|
||||
.deznav .metismenu{
|
||||
& > li{
|
||||
& > a svg {
|
||||
color: $color;
|
||||
}
|
||||
&:hover,
|
||||
&:focus {
|
||||
&>a {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
&.mm-active {
|
||||
&>a {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
ul a {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.mm-active {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-width:767px) {
|
||||
[data-sidebar-style="modern"] {
|
||||
.deznav {
|
||||
.metismenu {
|
||||
&>li {
|
||||
&>a {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.mm-active {
|
||||
&>a {
|
||||
background-color: lighten($color: $color, $amount: 50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&[data-sidebar-style="overlay"] {
|
||||
.nav-header .hamburger.is-active .line {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
.nav-user {
|
||||
background: $color;
|
||||
}
|
||||
.sidebar-right .sidebar-right .sidebar-right-trigger {
|
||||
color: $color;
|
||||
&:hover {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
&[data-theme-version="dark"] {
|
||||
.pagination .page-item{
|
||||
.page-link:hover{
|
||||
background: $color;
|
||||
border-color: $color;
|
||||
}
|
||||
&.active .page-link{
|
||||
background: $color;
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
.header-left input:focus {
|
||||
border-color: $color;
|
||||
}
|
||||
.loader {
|
||||
&__bar {
|
||||
background: $color;
|
||||
}
|
||||
&__ball {
|
||||
background: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
&[data-theme-version="transparent"] {
|
||||
.header-left input:focus {
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
.new-arrival-content .price {
|
||||
color: $color;
|
||||
}
|
||||
.chart-link a i.text-primary {
|
||||
color: $color;
|
||||
}
|
||||
#user-activity .nav-tabs .nav-link.active {
|
||||
background: $color;
|
||||
border-color: $color;
|
||||
}
|
||||
span#counter {
|
||||
color: $color;
|
||||
}
|
||||
|
||||
.welcome-content:after{
|
||||
background: $color;
|
||||
}
|
||||
.timeline-badge {
|
||||
background-color: $color;
|
||||
}
|
||||
.page-timeline{
|
||||
.timeline {
|
||||
&-workplan#{&} {
|
||||
.timeline-badge:after {
|
||||
background-color: rgba($color: $color, $alpha: .4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.sk-three-bounce .sk-child {
|
||||
background-color: $color;
|
||||
}
|
||||
.dropdown-item.active,
|
||||
.dropdown-item:active{
|
||||
color: #fff;
|
||||
background-color:$color;
|
||||
}
|
||||
.overlay-box:after {
|
||||
background: $color;
|
||||
}
|
||||
.btn-primary{
|
||||
background-color: $color;
|
||||
border-color: $color;
|
||||
}
|
||||
.bg-primary{
|
||||
background-color: $color !important;
|
||||
}
|
||||
.text-primary{
|
||||
color:$color !important;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background-color:darken($color, 15);
|
||||
border-color: darken($color, 15);
|
||||
}
|
||||
.btn-outline-primary {
|
||||
color:$color;
|
||||
border-color: $color;
|
||||
}
|
||||
.btn-outline-primary:hover {
|
||||
background-color: $color;
|
||||
border-color: $color;
|
||||
}
|
||||
.btn-primary:not(:disabled):not(.disabled):active,
|
||||
.btn-primary:not(:disabled):not(.disabled).active,
|
||||
.show > .btn-primary.dropdown-toggle,
|
||||
.btn-outline-primary:not(:disabled):not(.disabled):active,
|
||||
.btn-outline-primary:not(:disabled):not(.disabled).active,
|
||||
.show > .btn-outline-primary.dropdown-toggle{
|
||||
background-color:darken($color, 15);
|
||||
border-color: darken($color, 15);
|
||||
}
|
||||
// End Css
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.bg-#{$color}-alt {
|
||||
background-color: rgba($value, .1);
|
||||
}
|
||||
}
|
||||
115
public/style/scss/layout/theme/_theme-wide-boxed.scss
Normal file
115
public/style/scss/layout/theme/_theme-wide-boxed.scss
Normal file
@ -0,0 +1,115 @@
|
||||
[data-container="wide-boxed"] {
|
||||
@media (min-width: 992px) {
|
||||
#main-wrapper {
|
||||
max-width: 1480px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-container="wide-boxed"][data-sidebar-style="full"] {
|
||||
@media (min-width: 992px) {
|
||||
.header {
|
||||
width: 100%;
|
||||
}
|
||||
.menu-toggle {
|
||||
.header {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@at-root [data-header-position="fixed"]#{&} {
|
||||
.header {
|
||||
max-width: 1480px;
|
||||
}
|
||||
.menu-toggle {
|
||||
.header {
|
||||
max-width: 1480px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-container="wide-boxed"][data-sidebar-style="mini"] {
|
||||
@media (min-width: 992px) {
|
||||
.header {
|
||||
width: 100%;
|
||||
}
|
||||
@at-root [data-header-position="fixed"]#{&} {
|
||||
.header {
|
||||
max-width: 1480px;
|
||||
}
|
||||
}
|
||||
@at-root [data-header-position="fixed"][data-layout="horizontal"]#{&} {
|
||||
.header {
|
||||
max-width: 1480px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-container="wide-boxed"][data-sidebar-style="compact"] {
|
||||
@media (min-width: 992px) {
|
||||
.header {
|
||||
width: 100%;
|
||||
}
|
||||
@at-root [data-header-position="fixed"]#{&} {
|
||||
.header {
|
||||
max-width: 1480px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-container="wide-boxed"][data-sidebar-style="overlay"] {
|
||||
@media (min-width: 992px) {
|
||||
.header {
|
||||
width: 100%;
|
||||
}
|
||||
@at-root [data-header-position="fixed"]#{&} {
|
||||
.header {
|
||||
max-width: 1480px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-layout="horizontal"][data-container="wide-boxed"] {
|
||||
.header {
|
||||
width: 100%;
|
||||
}
|
||||
@at-root [data-sidebar-style="full"][data-header-position="fixed"]#{&} {
|
||||
.header {
|
||||
max-width: 1480px;
|
||||
}
|
||||
}
|
||||
@at-root [data-sidebar-style="mini"]#{&} {
|
||||
.header {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-layout="horizontal"][data-container="wide-boxed"][data-sidebar-position="fixed"] {
|
||||
.deznav.fixed {
|
||||
max-width: 1480px;
|
||||
transition: none;
|
||||
}
|
||||
&[direction="rtl"] {
|
||||
.deznav.fixed {
|
||||
right: 5%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-layout="horizontal"][data-container="wide-boxed"][data-sidebar-position="fixed"][data-header-position="fixed"] {
|
||||
.deznav {
|
||||
max-width: 1480px;
|
||||
left: 5%;
|
||||
}
|
||||
&[direction="rtl"] {
|
||||
.deznav {
|
||||
right: 5%;
|
||||
}
|
||||
}
|
||||
}
|
||||
4
public/style/scss/layout/theme/_theme.scss
Normal file
4
public/style/scss/layout/theme/_theme.scss
Normal file
@ -0,0 +1,4 @@
|
||||
@import './theme-bg';
|
||||
@import './theme-boxed';
|
||||
@import './theme-wide-boxed';
|
||||
@import './theme-color';
|
||||
Reference in New Issue
Block a user