Penambahan FrontEnd All-New-Manufacture
This commit is contained in:
pand03
440
public/scss/layout/theme/_theme-bg.scss
Normal file
440
public/scss/layout/theme/_theme-bg.scss
Normal file
@@ -0,0 +1,440 @@
|
||||
:root{
|
||||
--nav-headbg: #FFFFFF;
|
||||
--sidebar-bg: #FFFFFF;
|
||||
--headerbg: #FFFFFF;
|
||||
}
|
||||
|
||||
//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-headbg: #{$color};
|
||||
.nav-header{
|
||||
.logo-abbr{
|
||||
path{
|
||||
fill:$color;
|
||||
stroke:$color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-headerbg="color_2"],[data-nav-headerbg="color_3"],[data-nav-headerbg="color_4"],[data-nav-headerbg="color_5"],[data-nav-headerbg="color_6"],[data-nav-headerbg="color_7"],
|
||||
[data-nav-headerbg="color_9"],[data-nav-headerbg="color_10"],[data-nav-headerbg="color_11"],[data-nav-headerbg="color_12"],[data-nav-headerbg="color_13"],[data-nav-headerbg="color_14"],
|
||||
[data-nav-headerbg="color_15"]{
|
||||
.nav-header .rect-primary-rect {
|
||||
fill: #ffffff;
|
||||
}
|
||||
.nav-header{
|
||||
.brand-logo{
|
||||
.brand-title{
|
||||
path{
|
||||
fill:$white;
|
||||
}
|
||||
tspan{
|
||||
fill:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//special work for color
|
||||
[data-nav-headerbg="color_8"]{
|
||||
.nav-header{
|
||||
.brand-logo{
|
||||
.brand-title{
|
||||
path{
|
||||
fill:$black;
|
||||
}
|
||||
tspan{
|
||||
fill:$black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//background for nav header
|
||||
@each $name, $color in $theme_backgrounds {
|
||||
[data-sidebarbg="#{$name}"][data-theme-version="dark"],
|
||||
[data-sidebarbg="#{$name}"] {
|
||||
@if $name != "color_1" {
|
||||
--sidebar-bg: #{$color};
|
||||
|
||||
.menu-toggle .dlabnav .metismenu li > ul{
|
||||
background:$color!important;
|
||||
}
|
||||
|
||||
&[data-sidebar-style="mini"],
|
||||
&[data-sidebar-style="modern"],
|
||||
&[data-sidebar-style="compact"],
|
||||
&[data-sidebar-style="icon-hover"][data-layout="horizontal"],
|
||||
&[data-sidebar-style="full"][data-layout="horizontal"]
|
||||
{
|
||||
.dlabnav{
|
||||
.metismenu li ul{
|
||||
background-color: lighten($color: $color, $amount: 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-sidebarbg="color_2"],[data-sidebarbg="color_3"],[data-sidebarbg="color_4"],[data-sidebarbg="color_5"],[data-sidebarbg="color_6"],[data-sidebarbg="color_7"],
|
||||
[data-sidebarbg="color_9"],[data-sidebarbg="color_10"],[data-sidebarbg="color_11"],[data-sidebarbg="color_12"],[data-sidebarbg="color_13"],[data-sidebarbg="color_14"],
|
||||
[data-sidebarbg="color_15"]{
|
||||
.dlabnav {
|
||||
.metismenu {
|
||||
a{
|
||||
color:rgba($white,0.75);
|
||||
}
|
||||
ul a:before{
|
||||
background:rgba($white,0.5);
|
||||
}
|
||||
li{
|
||||
ul{
|
||||
a{
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.mm-active {
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&>li{
|
||||
&>a{
|
||||
color:rgba($white,0.85);
|
||||
i{
|
||||
color:rgba($white,0.85);
|
||||
}
|
||||
}
|
||||
&.mm-active{
|
||||
&>a{
|
||||
background:rgba($white,0.15);
|
||||
color:$white;
|
||||
i{
|
||||
color:$white;
|
||||
}
|
||||
&:before{
|
||||
background:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.has-arrow:after{
|
||||
border-color: rgba($white,0.85) transparent transparent rgba($white,0.85);
|
||||
}
|
||||
}
|
||||
.header-info2{
|
||||
background-color: rgba($black,0.15);
|
||||
span{
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
.sidebar-info{
|
||||
color: $white;
|
||||
i{
|
||||
color: $white!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.plus-box{
|
||||
background-color: rgba($white,0.15);
|
||||
}
|
||||
.copyright{
|
||||
color:$white;
|
||||
strong{
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
&[data-sidebar-style="full"][data-layout="vertical"]{
|
||||
.dlabnav {
|
||||
.metismenu{
|
||||
&>li{
|
||||
&.mm-active{
|
||||
&>a{
|
||||
i{
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
ul a::before{
|
||||
background: rgba($white,0.25);
|
||||
}
|
||||
}
|
||||
}
|
||||
.menu-toggle .dlabnav .metismenu {
|
||||
& > li.mm-active,
|
||||
& > li:hover {
|
||||
& > a {
|
||||
background: rgba($white,0.15);
|
||||
i{
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&[data-sidebar-style="mini"][data-layout="vertical"]{
|
||||
.dlabnav .metismenu > li{
|
||||
&.mm-active,
|
||||
&:hover{
|
||||
& > a i {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&[data-sidebar-style="modern"],
|
||||
&[data-sidebar-style="overlay"],
|
||||
&[data-sidebar-style="icon-hover"][data-layout="vertical"],
|
||||
&[data-layout="horizontal"]{
|
||||
.dlabnav .metismenu > li{
|
||||
&:hover,
|
||||
&.mm-active{
|
||||
& > a{
|
||||
color: $white;
|
||||
i{
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&[data-sidebar-style="icon-hover"][data-layout="vertical"]{
|
||||
.dlabnav .metismenu > li{
|
||||
&:hover,
|
||||
&.mm-active{
|
||||
& > a{
|
||||
background-color: rgba($white,0.15);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&[data-sidebar-style="compact"][data-layout="vertical"]{
|
||||
.dlabnav {
|
||||
.metismenu {
|
||||
&>li {
|
||||
a{
|
||||
&:hover{
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
&>a{
|
||||
&>i{
|
||||
background: rgba($white,0.15)!important;
|
||||
color:rgba($white,0.7);
|
||||
}
|
||||
}
|
||||
&.mm-active,&:hover{
|
||||
&>a {
|
||||
box-shadow:none;
|
||||
background:transparent!important;
|
||||
color:$white!important;
|
||||
i{
|
||||
background: rgba($white,0.15)!important;
|
||||
color:$white!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&[data-sidebar-style="mini"],
|
||||
&[data-sidebar-style="modern"],
|
||||
&[data-sidebar-style="compact"],
|
||||
&[data-sidebar-style="icon-hover"][data-layout="horizontal"],
|
||||
&[data-sidebar-style="full"][data-layout="horizontal"]
|
||||
{
|
||||
.dlabnav .metismenu > li.mm-active > a,
|
||||
.dlabnav .metismenu > li:hover > a{
|
||||
background:rgba($white,0.15)!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
//special work for color
|
||||
[data-sidebarbg="color_8"]{
|
||||
.dlabnav .metismenu ul a:before {
|
||||
background:rgba($black,0.5);
|
||||
}
|
||||
.dlabnav {
|
||||
.metismenu{
|
||||
a{
|
||||
color:rgba($black,0.6)!important;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.mm-active {
|
||||
color:$black!important;
|
||||
}
|
||||
}
|
||||
.has-arrow:after{
|
||||
border-color: rgba(0,0,0,0.5) transparent transparent rgba(0,0,0,0.5);
|
||||
}
|
||||
&>li{
|
||||
&>a{
|
||||
color:rgba($black,0.6)!important;
|
||||
i{
|
||||
color:rgba($black,0.6)!important;
|
||||
}
|
||||
}
|
||||
&.mm-active{
|
||||
&>a{
|
||||
background:rgba($black,0.1)!important;
|
||||
&:before{
|
||||
background:rgba($black,0.6)!important;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.copyright p{
|
||||
color:rgba($black,0.6);
|
||||
}
|
||||
.book-box{
|
||||
background: rgba($black,0.4);
|
||||
}
|
||||
.header-info2 {
|
||||
background-color: rgba($black,0.05);
|
||||
span{
|
||||
color: $text-dark;
|
||||
}
|
||||
}
|
||||
.sidebar-info{
|
||||
color: rgba($black,0.6);
|
||||
i{
|
||||
color: rgba($black,0.6)
|
||||
}
|
||||
}
|
||||
}
|
||||
.plus-box{
|
||||
background-color:rgba($black,0.4);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//background for nav header
|
||||
@each $name, $color in $theme_backgrounds {
|
||||
[data-headerbg="#{$name}"][data-theme-version="dark"],
|
||||
[data-headerbg="#{$name}"] {
|
||||
@if $name != "color_1" {
|
||||
--headerbg: #{$color};
|
||||
|
||||
.header-right{
|
||||
.notification_dropdown .nav-link {
|
||||
.badge{
|
||||
color: $color!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-headerbg="color_2"],[data-headerbg="color_3"],[data-headerbg="color_4"],[data-headerbg="color_5"],[data-headerbg="color_6"],[data-headerbg="color_7"],
|
||||
[data-headerbg="color_9"],[data-headerbg="color_10"],[data-headerbg="color_11"],[data-headerbg="color_12"],[data-headerbg="color_13"],[data-headerbg="color_14"],
|
||||
[data-headerbg="color_15"]{
|
||||
.search-area .input-group-text,
|
||||
.search-area .form-control,.search-area .form-control::placeholder{
|
||||
color:$white;
|
||||
}
|
||||
.search-area .input-group-append .input-group-text i{
|
||||
color:$white;
|
||||
}
|
||||
.header-profile > a.nav-link .header-info small, .header-profile > a.nav-link .header-info span{
|
||||
color:$white;
|
||||
}
|
||||
.hamburger .line{
|
||||
background:$white!important;
|
||||
}
|
||||
.header-left{
|
||||
.search-area .form-control,
|
||||
.search-area .input-group-text{
|
||||
background-color: rgba($white,0.15);
|
||||
i{
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
.dashboard_bar{
|
||||
color:$white;
|
||||
}
|
||||
.plus-icon a{
|
||||
background-color: rgba($white,0.15);
|
||||
color: $white;
|
||||
}
|
||||
|
||||
}
|
||||
.header-right{
|
||||
svg{
|
||||
path{
|
||||
fill:$white;
|
||||
}
|
||||
}
|
||||
#icon-dark{
|
||||
color:$white;
|
||||
}
|
||||
.notification_dropdown .nav-link {
|
||||
.badge{
|
||||
background-color: $white!important;
|
||||
}
|
||||
svg path{
|
||||
fill: $white;
|
||||
}
|
||||
}
|
||||
.nav-item .nav-link{
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//special work for color
|
||||
[data-headerbg="color_8"]{
|
||||
.search-area .input-group-text,
|
||||
.search-area .form-control,.search-area .form-control::placeholder{
|
||||
color:$black;
|
||||
background:#F1F1F1;
|
||||
}
|
||||
.header-left{
|
||||
.search-area .form-control,
|
||||
.search-area .input-group-text{
|
||||
i{
|
||||
color:$black;
|
||||
}
|
||||
}
|
||||
.dashboard_bar{
|
||||
color:$black;
|
||||
}
|
||||
|
||||
}
|
||||
.hamburger .line{
|
||||
background:$black;
|
||||
}
|
||||
|
||||
.header-right{
|
||||
svg{
|
||||
path{
|
||||
fill:rgba($black,0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
100
public/scss/layout/theme/_theme-boxed.scss
Normal file
100
public/scss/layout/theme/_theme-boxed.scss
Normal file
@@ -0,0 +1,100 @@
|
||||
@media (min-width: 62rem) {
|
||||
[data-container="boxed"] {
|
||||
#main-wrapper {
|
||||
max-width: 74.9375rem;
|
||||
margin: 0 auto;
|
||||
box-shadow: 0 0 1.875rem 0 rgba(0,0,0,0.1);
|
||||
|
||||
@at-root [direction="rtl"]#{&} {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
.invoice-num {
|
||||
font-size: 1.375rem;
|
||||
}
|
||||
.header-left .search-area{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@include custommq($min: 84.375rem) {
|
||||
[data-layout="vertical"][data-sidebar-style="overlay"][data-container="boxed"][data-header-position="fixed"] {
|
||||
.header {
|
||||
width: 74.9375rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include custommq($min: 75rem, $max: 84.3125rem) {
|
||||
[data-layout="vertical"][data-sidebar-style="overlay"][data-container="boxed"][data-header-position="fixed"] {
|
||||
.header {
|
||||
width: 74.9375rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
[data-header-position="fixed"][data-layout="horizontal"][data-container="boxed"] {
|
||||
.dlabnav {
|
||||
max-width: 74.9375rem;
|
||||
}
|
||||
} //ok
|
||||
|
||||
[data-layout="vertical"][data-container="boxed"][data-header-position="fixed"],
|
||||
[data-layout="horizontal"][data-container="boxed"][data-header-position="fixed"] {
|
||||
.header {
|
||||
width: 74.9375rem;
|
||||
}
|
||||
}
|
||||
|
||||
[data-layout="horizontal"][data-container="boxed"][data-header-position="fixed"][data-sidebar-style="mini"] {
|
||||
.header {
|
||||
width: 74.9375rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
[data-container="boxed"] {
|
||||
.metismenu.fixed {
|
||||
left: auto;
|
||||
max-width: 74.9375rem;
|
||||
}
|
||||
|
||||
.page-titles {
|
||||
margin-bottom: 3rem;
|
||||
padding: 0.9375rem 0.9375rem;
|
||||
}
|
||||
|
||||
.content-body .container-fluid {
|
||||
padding: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
[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 {
|
||||
.dlabnav {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-container="boxed"][data-sidebar-position="fixed"][data-layout="horizontal"] {
|
||||
.dlabnav.fixed {
|
||||
left: auto;
|
||||
max-width: 74.9375rem;
|
||||
}
|
||||
}
|
||||
20
public/scss/layout/theme/_theme-color.scss
Normal file
20
public/scss/layout/theme/_theme-color.scss
Normal file
@@ -0,0 +1,20 @@
|
||||
//background for nav header
|
||||
@each $name, $color in $theme_backgrounds {
|
||||
[data-primary="#{$name}"] {
|
||||
@if $name != "color_1" {
|
||||
--primary: #{$color};
|
||||
--secondary: #{$secondary};
|
||||
--primary-hover: #{darken($color, 10)};
|
||||
--primary-dark: #{darken($color, 30)};
|
||||
--rgba-primary-1: #{rgba($color, 0.1)};
|
||||
--rgba-primary-2: #{rgba($color, 0.2)};
|
||||
--rgba-primary-3: #{rgba($color, 0.3)};
|
||||
--rgba-primary-4: #{rgba($color, 0.4)};
|
||||
--rgba-primary-5: #{rgba($color, 0.5)};
|
||||
--rgba-primary-6: #{rgba($color, 0.6)};
|
||||
--rgba-primary-7: #{rgba($color, 0.7)};
|
||||
--rgba-primary-8: #{rgba($color, 0.8)};
|
||||
--rgba-primary-9: #{rgba($color, 0.9)};
|
||||
}
|
||||
}
|
||||
}
|
||||
98
public/scss/layout/theme/_theme-wide-boxed.scss
Normal file
98
public/scss/layout/theme/_theme-wide-boxed.scss
Normal file
@@ -0,0 +1,98 @@
|
||||
@media (min-width: 62rem) {
|
||||
[data-container="wide-boxed"] {
|
||||
#main-wrapper {
|
||||
max-width: 92.5rem;
|
||||
margin: 0 auto;
|
||||
box-shadow: 0 0 1.875rem 0 rgba(0,0,0,0.1);
|
||||
|
||||
@at-root [direction="rtl"]#{&} {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@include custommq($min: 84.375rem) {
|
||||
[data-layout="vertical"][data-sidebar-style="overlay"][data-container="wide-boxed"][data-header-position="fixed"] {
|
||||
.header {
|
||||
max-width: 92.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include custommq($min: 75rem, $max: 100rem) {
|
||||
[data-layout="vertical"][data-sidebar-style="overlay"][data-container="wide-boxed"][data-header-position="fixed"] {
|
||||
.header {
|
||||
max-width: 92.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
[data-sidebar-style="compact"][data-header-position="fixed"][data-container="wide-boxed"][data-layout="vertical"] {
|
||||
.header {
|
||||
max-width: 92.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
[data-header-position="fixed"][data-layout="horizontal"][data-container="wide-boxed"] {
|
||||
.dlabnav {
|
||||
max-width: 92.5rem;
|
||||
}
|
||||
} //ok
|
||||
|
||||
[data-layout="vertical"][data-container="wide-boxed"][data-header-position="fixed"],
|
||||
[data-layout="horizontal"][data-container="wide-boxed"][data-header-position="fixed"] {
|
||||
.header {
|
||||
max-width: 92.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
[data-layout="horizontal"][data-container="wide-boxed"][data-header-position="fixed"][data-sidebar-style="mini"] {
|
||||
.header {
|
||||
max-width: 92.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
[data-container="wide-boxed"] {
|
||||
.metismenu.fixed {
|
||||
left: auto;
|
||||
max-width: 92.5rem;
|
||||
}
|
||||
|
||||
.page-titles {
|
||||
margin-bottom: 3rem;
|
||||
padding: 0.9375rem 0.9375rem;
|
||||
}
|
||||
|
||||
.content-body .container-fluid {
|
||||
padding: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
[data-container="wide-boxed"][data-layout="vertical"] {
|
||||
.page-titles {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
[data-layout="vertical"][data-container="wide-boxed"][data-sidebar-position="fixed"][data-header-position="static"][data-sidebar-style="overlay"] {
|
||||
.nav-header {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.menu-toggle {
|
||||
.dlabnav {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-container="wide-boxed"][data-sidebar-position="fixed"][data-layout="horizontal"] {
|
||||
.dlabnav.fixed {
|
||||
left: auto;
|
||||
max-width: 92.5rem;
|
||||
}
|
||||
}
|
||||
4
public/scss/layout/theme/_theme.scss
Normal file
4
public/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