Add theme assets;
This commit is contained in:
82
public/assets/scss/demo1/_layouts.scss
Normal file
82
public/assets/scss/demo1/_layouts.scss
Normal file
@@ -0,0 +1,82 @@
|
||||
.sidebar-folded {
|
||||
.sidebar {
|
||||
.sidebar-header {
|
||||
width: $sidebar-folded-width;
|
||||
.sidebar-brand {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.page-wrapper {
|
||||
width: calc(100% - #{$sidebar-folded-width});
|
||||
margin-left: $sidebar-folded-width;
|
||||
.navbar {
|
||||
width: calc(100% - #{$sidebar-folded-width});
|
||||
left: $sidebar-folded-width;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
&:not(.open-sidebar-folded) {
|
||||
.sidebar {
|
||||
width: $sidebar-folded-width;
|
||||
.sidebar-header {
|
||||
width: $sidebar-folded-width;
|
||||
.sidebar-brand {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
.sidebar-body {
|
||||
.nav {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
.link-title,
|
||||
.link-arrow {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
&.nav-category {
|
||||
visibility: hidden;
|
||||
&::before {
|
||||
content: '';
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background: $text-muted;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 6px;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.sub-menu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-open, .settings-open {
|
||||
@media(max-width: 991px) {
|
||||
.main-wrapper {
|
||||
&::before {
|
||||
content: '';
|
||||
width: 100vw;
|
||||
background: rgba(0, 0, 0, .3);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 99;
|
||||
-webkit-transition: all 3s ease;
|
||||
transition: all 3s ease;
|
||||
z-index: 980;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
156
public/assets/scss/demo1/_navbar.scss
Normal file
156
public/assets/scss/demo1/_navbar.scss
Normal file
@@ -0,0 +1,156 @@
|
||||
.navbar {
|
||||
width: calc(100% - #{$sidebar-width-lg});
|
||||
height: $navbar-height;
|
||||
background: $card-bg;
|
||||
border-bottom: 1px solid $border-color;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
left: $sidebar-width-lg;
|
||||
z-index: 978;
|
||||
box-shadow: 3px 0 10px 0 rgba(183,192,206,.2);
|
||||
transition: width .1s ease, left .1s ease;
|
||||
|
||||
@media(max-width: 991px) {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
.navbar-content {
|
||||
width: calc(100% - #{$sidebar-folded-width} - 1px);
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-toggler {
|
||||
height: 100%;
|
||||
border-right: 1px solid $border-color;
|
||||
align-items: center;
|
||||
padding: 0 25px;
|
||||
display: none;
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: $text-muted;
|
||||
}
|
||||
@media(max-width: 991px) {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.search-form {
|
||||
@extend .d-none;
|
||||
@extend .d-md-flex;
|
||||
@extend .align-items-center;
|
||||
width: 100%;
|
||||
margin-right: 60px;
|
||||
.input-group {
|
||||
.input-group-text {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
color: $text-muted;
|
||||
background: $input-bg;
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.form-control {
|
||||
border: 0;
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-content {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-left: 25px;
|
||||
padding-right: 25px;
|
||||
@media(max-width: 991px) {
|
||||
width: calc(100% - #{$sidebar-folded-width} - 1px);
|
||||
}
|
||||
.navbar-nav {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-left: auto;
|
||||
.nav-item {
|
||||
position: relative;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
min-width: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.nav-link {
|
||||
color: $body-color;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
&:hover,
|
||||
&[aria-expanded="true"] {
|
||||
color: $primary;
|
||||
}
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.indicator {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 2px;
|
||||
.circle {
|
||||
background: $primary;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
&::before {
|
||||
background-color: $primary;
|
||||
content: "";
|
||||
display: table;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
@extend .pulse;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.dropdown {
|
||||
@media(max-width: 767px) {
|
||||
position: static;
|
||||
}
|
||||
.dropdown-menu {
|
||||
width: max-content;
|
||||
position: absolute;
|
||||
right: -20px;
|
||||
left: auto;
|
||||
@extend .dropdownAnimation;
|
||||
&::before {
|
||||
content: '';
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
background: $dropdown-bg;
|
||||
position: absolute;
|
||||
top: -7px;
|
||||
right: 28px;
|
||||
transform: rotate(45deg);
|
||||
border-top: 1px solid $dropdown-border-color;
|
||||
border-left: 1px solid $dropdown-border-color;
|
||||
}
|
||||
@media(max-width: 767px) {
|
||||
right: 20px;
|
||||
width: calc(100% - 40px);
|
||||
&::before{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
588
public/assets/scss/demo1/_sidebar.scss
Normal file
588
public/assets/scss/demo1/_sidebar.scss
Normal file
@@ -0,0 +1,588 @@
|
||||
.sidebar {
|
||||
width: $sidebar-width-lg;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
-webkit-transition: width .1s ease, margin .1s ease-in-out;
|
||||
transition: width .1s ease, margin .1s ease-in-out;
|
||||
z-index: 999;
|
||||
|
||||
.sidebar-header {
|
||||
background: $card-bg;
|
||||
height: $navbar-height;
|
||||
border-bottom: 1px solid $border-color;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 25px;
|
||||
border-right: 1px solid $border-color;
|
||||
z-index: 999;
|
||||
width: $sidebar-width-lg;
|
||||
-webkit-transition: width .1s ease;
|
||||
transition: width .1s ease;
|
||||
|
||||
.sidebar-open & {
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
|
||||
.sidebar-brand {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
-webkit-transition: opacity .5s ease;
|
||||
transition: opacity .5s ease;
|
||||
font-weight: 700;
|
||||
font-size: 25px;
|
||||
color: darken($primary, 50%);
|
||||
direction: ltr#{'/*rtl:ignore*/'};
|
||||
span {
|
||||
color: $primary;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
.sidebar-toggler {
|
||||
cursor: pointer;
|
||||
width: 18px;
|
||||
span {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border-radius: 3px;
|
||||
height: 2px;
|
||||
background: $text-muted;
|
||||
-webkit-transition: all .3s;
|
||||
transition: all .3s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
span + span {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
&.active span:nth-child(1) {
|
||||
-webkit-animation: ease .6s top forwards;
|
||||
animation: ease .6s top forwards;
|
||||
}
|
||||
|
||||
&.not-active span:nth-child(1) {
|
||||
-webkit-animation: ease .6s top-2 forwards;
|
||||
animation: ease .6s top-2 forwards;
|
||||
}
|
||||
|
||||
&.active span:nth-child(2) {
|
||||
-webkit-animation: ease .6s scaled forwards;
|
||||
animation: ease .6s scaled forwards;
|
||||
}
|
||||
|
||||
&.not-active span:nth-child(2) {
|
||||
-webkit-animation: ease .6s scaled-2 forwards;
|
||||
animation: ease .6s scaled-2 forwards;
|
||||
}
|
||||
|
||||
&.active span:nth-child(3) {
|
||||
-webkit-animation: ease .6s bottom forwards;
|
||||
animation: ease .6s bottom forwards;
|
||||
}
|
||||
|
||||
&.not-active span:nth-child(3) {
|
||||
-webkit-animation: ease .6s bottom-2 forwards;
|
||||
animation: ease .6s bottom-2 forwards;
|
||||
}
|
||||
|
||||
@-webkit-keyframes top {
|
||||
0% {
|
||||
top: 0;
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
50% {
|
||||
top: 6px;
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
100% {
|
||||
top: 6px;
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes top {
|
||||
0% {
|
||||
top: 0;
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
50% {
|
||||
top: 6px;
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
100% {
|
||||
top: 6px;
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes top-2 {
|
||||
0% {
|
||||
top: 6px;
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
50% {
|
||||
top: 6px;
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
top: 0;
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes top-2 {
|
||||
0% {
|
||||
top: 6px;
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
50% {
|
||||
top: 6px;
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
top: 0;
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes bottom {
|
||||
0% {
|
||||
bottom: 0;
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
50% {
|
||||
bottom: 6px;
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
100% {
|
||||
bottom: 6px;
|
||||
-webkit-transform: rotate(135deg);
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bottom {
|
||||
0% {
|
||||
bottom: 0;
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
50% {
|
||||
bottom: 6px;
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
100% {
|
||||
bottom: 6px;
|
||||
-webkit-transform: rotate(135deg);
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes bottom-2 {
|
||||
0% {
|
||||
bottom: 6px;
|
||||
-webkit-transform: rotate(135deg);
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
50% {
|
||||
bottom: 6px;
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
100% {
|
||||
bottom: 0;
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bottom-2 {
|
||||
0% {
|
||||
bottom: 6px;
|
||||
-webkit-transform: rotate(135deg);
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
50% {
|
||||
bottom: 6px;
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
100% {
|
||||
bottom: 0;
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes scaled {
|
||||
50% {
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scaled {
|
||||
50% {
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes scaled-2 {
|
||||
0% {
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scaled-2 {
|
||||
0% {
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.sidebar-body {
|
||||
max-height: calc(100% - #{$navbar-height});
|
||||
position: relative;
|
||||
border-right: 1px solid $border-color;
|
||||
height: 100%;
|
||||
-webkit-box-shadow: 0 8px 10px 0 rgba(183,192,206,.2);
|
||||
box-shadow: 0 8px 10px 0 rgba(183,192,206,.2);
|
||||
background: $card-bg;
|
||||
.nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 25px 25px 50px 25px;
|
||||
.nav-item {
|
||||
position: relative;
|
||||
.nav-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
height: 32px;
|
||||
white-space: nowrap;
|
||||
color: $body-color;
|
||||
.link-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
fill: rgba(233, 236, 239, 0.21);
|
||||
position: absolute;
|
||||
color: inherit;
|
||||
}
|
||||
.link-title {
|
||||
margin-left: 30px;
|
||||
font-size: 14px;
|
||||
-webkit-transition: all .2s ease-in-out;
|
||||
transition: all .2s ease-in-out;
|
||||
}
|
||||
.link-arrow {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-left: auto;
|
||||
-webkit-transition: all .3s ease;
|
||||
-webkit-transition: all .3s ease-in-out;
|
||||
transition: all .3s ease-in-out;
|
||||
color: inherit;
|
||||
}
|
||||
.link-icon,
|
||||
.link-title,
|
||||
.link-arrow {
|
||||
-webkit-transition: all .3s ease;
|
||||
transition: all .3s ease;
|
||||
}
|
||||
&[aria-expanded="true"] {
|
||||
color: $primary;
|
||||
.link-arrow {
|
||||
-webkit-transform: rotate(90deg);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.nav-category {
|
||||
color: $text-muted;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
letter-spacing: .5px;
|
||||
margin-bottom: 5px;
|
||||
height: 15px;
|
||||
&:not(:first-child) {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.nav-link {
|
||||
color: $primary;
|
||||
.link-title {
|
||||
margin-left: 31px;
|
||||
}
|
||||
.link-icon {
|
||||
color: $primary;
|
||||
fill: rgba(239, 243, 255, .5);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
.nav-link {
|
||||
color: $primary;
|
||||
&::before {
|
||||
content: '';
|
||||
width: 3px;
|
||||
height: 26px;
|
||||
background: $primary;
|
||||
position: absolute;
|
||||
left: -25px;
|
||||
}
|
||||
.link-icon {
|
||||
fill: rgba(239, 243, 255, .5);
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.sub-menu {
|
||||
padding: 0 0 15px 33px;
|
||||
.nav-item {
|
||||
position: relative;
|
||||
.nav-link {
|
||||
height: 25px;
|
||||
color: $body-color;
|
||||
font-size: 13px;
|
||||
-webkit-transition: all .3s ease-in-out;
|
||||
transition: all .3s ease-in-out;
|
||||
&::before {
|
||||
content: '';
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: transparent;
|
||||
border: 1px solid darken($border-color, 20%);
|
||||
position: absolute;
|
||||
left: -29px;
|
||||
top: 10px;
|
||||
-webkit-transition: all .7s ease-in-out;
|
||||
-webkit-transition: all .4s ease-in-out;
|
||||
transition: all .4s ease-in-out;
|
||||
}
|
||||
&.active {
|
||||
color: $primary;
|
||||
&::before {
|
||||
border: 1px solid $primary;
|
||||
background: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.nav-link {
|
||||
color: $primary;
|
||||
margin-left: 3px;
|
||||
&::before {
|
||||
border: 1px solid $primary;
|
||||
background: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media(max-width: 991px) {
|
||||
z-index: 999;
|
||||
margin-left: -#{$sidebar-width-lg};
|
||||
visibility: hidden;
|
||||
.sidebar-open & {
|
||||
margin-left: 0;
|
||||
visibility: visible;
|
||||
}
|
||||
.sidebar-header {
|
||||
// transform: translateX($sidebar-folded-width);
|
||||
// visibility: visible;
|
||||
// transition: none;
|
||||
// .sidebar-open & {
|
||||
// transform: translateX(0);
|
||||
// }
|
||||
}
|
||||
.sidebar-body {
|
||||
.nav {
|
||||
.nav-item {
|
||||
width: auto;
|
||||
.nav-link {
|
||||
.link-icon {
|
||||
-webkit-transition: none;
|
||||
transition: none;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-dark {
|
||||
.sidebar {
|
||||
.sidebar-header {
|
||||
background: $sidebar-dark-bg;
|
||||
border-bottom: 1px solid rgba($border-color, .1);
|
||||
border-right: 1px solid rgba($border-color, .1);
|
||||
.sidebar-brand {
|
||||
color: $light;
|
||||
}
|
||||
.sidebar-toggler {
|
||||
span {
|
||||
background: $text-muted;
|
||||
}
|
||||
}
|
||||
}
|
||||
.sidebar-body {
|
||||
background: $sidebar-dark-bg;
|
||||
border-right: 1px solid rgba($border-color, .1);
|
||||
.nav {
|
||||
.nav-item {
|
||||
&.nav-category {
|
||||
color: $white;
|
||||
}
|
||||
.nav-link {
|
||||
color: $text-muted;
|
||||
svg {
|
||||
fill: none;
|
||||
}
|
||||
&[aria-expanded="true"] {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
&:hover,
|
||||
&.active {
|
||||
.nav-link {
|
||||
svg {
|
||||
fill: rgba($primary, .2);
|
||||
}
|
||||
.link-title {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Right sidebar
|
||||
.settings-sidebar {
|
||||
position: fixed;
|
||||
right: -232px;
|
||||
top: 130px;
|
||||
width: 232px;
|
||||
background: $white;
|
||||
-webkit-box-shadow: -3px 0 10px 0 rgba(183,192,206,0.2);
|
||||
box-shadow: -3px 0 10px 0 rgba(183,192,206,0.2);
|
||||
z-index: 999;
|
||||
border-radius: 0 0 0 4px;
|
||||
-webkit-transition: all .2s ease-in-out;
|
||||
transition: all .2s ease-in-out;
|
||||
.settings-open & {
|
||||
right: 0;
|
||||
}
|
||||
.sidebar-body {
|
||||
position: relative;
|
||||
padding: 18px;
|
||||
.settings-sidebar-toggler {
|
||||
position: absolute;
|
||||
left: -44px;
|
||||
top: 0;
|
||||
padding: 12px;
|
||||
border-radius: 4px 0 0 4px;
|
||||
background: $white;
|
||||
-webkit-box-shadow: -3px 0 10px 0 rgba(183,192,206,0.2);
|
||||
box-shadow: -3px 0 10px 0 rgba(183,192,206,0.2);
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: $text-muted;
|
||||
@extend .infinite-spin;
|
||||
}
|
||||
}
|
||||
.theme-wrapper {
|
||||
.theme-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin-bottom: 19px;
|
||||
border-radius: 6px;
|
||||
border: 3px solid $light;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba($primary, 0);
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&.active {
|
||||
border: 3px solid lighten($primary, 15%);
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
border-radius: 3px;
|
||||
}
|
||||
&:hover {
|
||||
&::after {
|
||||
background: rgba($primary, .2);
|
||||
-webkit-transition: all .3s ease-in-out;
|
||||
transition: all .3s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
7
public/assets/scss/demo1/_variables.scss
Normal file
7
public/assets/scss/demo1/_variables.scss
Normal file
@@ -0,0 +1,7 @@
|
||||
// Sidebar
|
||||
$sidebar-width-lg: 240px;
|
||||
$sidebar-folded-width: 70px;
|
||||
$sidebar-dark-bg: #0c1427;
|
||||
|
||||
// Navbar
|
||||
$navbar-height: 60px;
|
||||
63
public/assets/scss/demo1/_vertical-wrapper.scss
Normal file
63
public/assets/scss/demo1/_vertical-wrapper.scss
Normal file
@@ -0,0 +1,63 @@
|
||||
.main-wrapper {
|
||||
display: flex;
|
||||
// overflow: hidden; // commented for fixing content-nav sticky position
|
||||
.page-wrapper {
|
||||
min-height: 100vh;
|
||||
background: $body-bg;
|
||||
width: calc(100% - #{$sidebar-width-lg});
|
||||
margin-left: $sidebar-width-lg;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
-webkit-transition: margin .1s ease, width .1s ease;
|
||||
transition: margin .1s ease, width .1s ease;
|
||||
.page-content {
|
||||
flex-grow: 1;
|
||||
padding: 25px;
|
||||
margin-top: $navbar-height;
|
||||
@media(max-width: 767px) {
|
||||
padding: 25px 15px;
|
||||
}
|
||||
}
|
||||
&.full-page {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
.page-content {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
@media(max-width: 991px) {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-content {
|
||||
.main-content {
|
||||
}
|
||||
.content-nav-wrapper {
|
||||
padding: 0;
|
||||
position: sticky;
|
||||
top: 80px;
|
||||
height: calc(100vh - 6rem);
|
||||
overflow-y: auto;
|
||||
border-left: 1px solid $border-color;
|
||||
display: none;
|
||||
@media(min-width: 1200px) {
|
||||
display: block;
|
||||
}
|
||||
.content-nav {
|
||||
padding: 0px 25px;
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
padding: 0;
|
||||
height: 30px;
|
||||
white-space: nowrap;
|
||||
color: $text-muted;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
123
public/assets/scss/demo1/style.scss
Normal file
123
public/assets/scss/demo1/style.scss
Normal file
@@ -0,0 +1,123 @@
|
||||
/*
|
||||
* NobleUI - HTML Bootstrap 5 Admin Dashboard Template v2.0.2 (https://nobleui.com/)
|
||||
* Copyright © 2022 NobleUI
|
||||
* Licensed under ThemeForest License
|
||||
*/
|
||||
|
||||
// Theme style for demo1 (Vertical Layout - Light, Light-RTL, Dark-sidebar)
|
||||
|
||||
|
||||
|
||||
|
||||
// Custom variables
|
||||
@import '../theme-light/variables';
|
||||
@import './variables';
|
||||
|
||||
|
||||
// Bootstrap stylesheets
|
||||
@import "bootstrap/scss/functions";
|
||||
@import "bootstrap/scss/variables";
|
||||
@import "bootstrap/scss/maps";
|
||||
@import "bootstrap/scss/mixins";
|
||||
@import "bootstrap/scss/utilities";
|
||||
|
||||
// Bootstrap layout & components
|
||||
@import "bootstrap/scss/root";
|
||||
@import "bootstrap/scss/reboot";
|
||||
@import "bootstrap/scss/type";
|
||||
@import "bootstrap/scss/images";
|
||||
@import "bootstrap/scss/containers";
|
||||
@import "bootstrap/scss/grid";
|
||||
@import "bootstrap/scss/tables";
|
||||
@import "bootstrap/scss/forms";
|
||||
@import "bootstrap/scss/buttons";
|
||||
@import "bootstrap/scss/transitions";
|
||||
@import "bootstrap/scss/dropdown";
|
||||
@import "bootstrap/scss/button-group";
|
||||
@import "bootstrap/scss/nav";
|
||||
@import "bootstrap/scss/navbar";
|
||||
@import "bootstrap/scss/card";
|
||||
@import "bootstrap/scss/accordion";
|
||||
@import "bootstrap/scss/breadcrumb";
|
||||
@import "bootstrap/scss/pagination";
|
||||
@import "bootstrap/scss/badge";
|
||||
@import "bootstrap/scss/alert";
|
||||
@import "bootstrap/scss/progress";
|
||||
@import "bootstrap/scss/list-group";
|
||||
@import "bootstrap/scss/close";
|
||||
@import "bootstrap/scss/toasts";
|
||||
@import "bootstrap/scss/modal";
|
||||
@import "bootstrap/scss/tooltip";
|
||||
@import "bootstrap/scss/popover";
|
||||
@import "bootstrap/scss/carousel";
|
||||
@import "bootstrap/scss/spinners";
|
||||
|
||||
// Bootstrap helpers
|
||||
@import "bootstrap/scss/helpers";
|
||||
|
||||
// Bootstrap utilities
|
||||
@import '../common/utilities';
|
||||
@import "bootstrap/scss/utilities/api";
|
||||
|
||||
|
||||
// Custom mixins
|
||||
@import '../common/mixins/animation';
|
||||
@import '../common/mixins/buttons';
|
||||
@import '../common/mixins/misc';
|
||||
@import '../common/mixins/width';
|
||||
|
||||
// Core styles
|
||||
@import '../common/background';
|
||||
@import '../common/reset';
|
||||
@import '../common/functions';
|
||||
@import '../common/misc';
|
||||
@import '../common/helpers';
|
||||
@import '../common/typography';
|
||||
@import '../common/demo';
|
||||
|
||||
// Layout
|
||||
@import './vertical-wrapper';
|
||||
@import './navbar';
|
||||
@import './sidebar';
|
||||
@import './layouts';
|
||||
|
||||
// Custom components
|
||||
@import "../common/components/badges";
|
||||
@import "../common/components/bootstrap-alert";
|
||||
@import "../common/components/breadcrumbs";
|
||||
@import "../common/components/buttons";
|
||||
@import "../common/components/cards";
|
||||
// @import "../common/components/checkbox-radio";
|
||||
@import "../common/components/dashboard";
|
||||
@import "../common/components/dropdown";
|
||||
@import "../common/components/forms";
|
||||
@import "../common/components/icons";
|
||||
@import "../common/components/nav";
|
||||
@import "../common/components/pagination";
|
||||
@import "../common/components/tables";
|
||||
@import "../common/components/timeline";
|
||||
@import "../common/components/chat";
|
||||
@import "../common/components/auth";
|
||||
|
||||
// Email app
|
||||
@import '../common/components/email/inbox';
|
||||
|
||||
// 3rd-Party plugin overrides
|
||||
@import "../theme-light/components/plugin-overrides/ace";
|
||||
@import "../theme-light/components/plugin-overrides/apex-charts";
|
||||
@import "../theme-light/components/plugin-overrides/data-tables";
|
||||
@import "../theme-light/components/plugin-overrides/dropify";
|
||||
@import "../theme-light/components/plugin-overrides/dropzone";
|
||||
@import "../theme-light/components/plugin-overrides/flatpickr";
|
||||
@import "../theme-light/components/plugin-overrides/full-calendar";
|
||||
@import "../theme-light/components/plugin-overrides/jquery-flot";
|
||||
@import "../theme-light/components/plugin-overrides/morrisjs";
|
||||
@import "../theme-light/components/plugin-overrides/peity";
|
||||
@import "../theme-light/components/plugin-overrides/perfect-scrollbar";
|
||||
@import "../theme-light/components/plugin-overrides/sweet-alert";
|
||||
@import "../theme-light/components/plugin-overrides/select2";
|
||||
@import "../theme-light/components/plugin-overrides/easymde";
|
||||
@import "../theme-light/components/plugin-overrides/tags-input";
|
||||
@import "../theme-light/components/plugin-overrides/tinymce";
|
||||
@import "../theme-light/components/plugin-overrides/typeahead";
|
||||
@import "../theme-light/components/plugin-overrides/wizard";
|
||||
Reference in New Issue
Block a user