first init
This commit is contained in:
arifal
35
resources/scss/structure/_footer.scss
Executable file
35
resources/scss/structure/_footer.scss
Executable file
@@ -0,0 +1,35 @@
|
||||
//
|
||||
// _footer.scss
|
||||
//
|
||||
|
||||
.footer {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 calc(#{$spacer} * 0.5);
|
||||
color: $footer-color;
|
||||
height: $footer-height;
|
||||
border-top: $card-border-width solid $card-border-color;
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
background: linear-gradient(to right, $primary 10%, $warning 50%, $success 60%);
|
||||
background-size: auto auto;
|
||||
background-clip: border-box;
|
||||
background-size: 200% auto;
|
||||
background-clip: text;
|
||||
text-fill-color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
animation: textclip 2.5s linear infinite;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@keyframes textclip {
|
||||
to {
|
||||
background-position: 200% center;
|
||||
}
|
||||
}
|
||||
130
resources/scss/structure/_general.scss
Executable file
130
resources/scss/structure/_general.scss
Executable file
@@ -0,0 +1,130 @@
|
||||
//
|
||||
// _general.scss
|
||||
//
|
||||
|
||||
.app-wrapper {
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// Main Content
|
||||
.page-content {
|
||||
position: relative;
|
||||
transition: all 0.3s ease-in-out;
|
||||
min-height: calc(100vh - $topbar-height);
|
||||
padding: calc($spacer * 1) calc($spacer * 0.5) $footer-height calc($spacer * 0.5);
|
||||
margin-left: $sidebar-width;
|
||||
}
|
||||
|
||||
|
||||
// Animated Star
|
||||
$shooting-time: 3000ms;
|
||||
|
||||
.animated-stars {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: rotateZ(45deg);
|
||||
}
|
||||
|
||||
.shooting-star {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
height: 2px;
|
||||
background: linear-gradient(-45deg, rgba(95, 145, 255, 1), rgba(0, 0, 255, 0));
|
||||
border-radius: 999px;
|
||||
filter: drop-shadow(0 0 6px rgba(105, 155, 255, 1));
|
||||
animation:
|
||||
tail $shooting-time ease-in-out infinite,
|
||||
shooting $shooting-time ease-in-out infinite;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: calc(50% - 1px);
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(-45deg, rgba(0, 0, 255, 0), rgba(95, 145, 255, 1), rgba(0, 0, 255, 0));
|
||||
transform: translateX(50%) rotateZ(45deg);
|
||||
border-radius: 100%;
|
||||
animation: shining $shooting-time ease-in-out infinite;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: calc(50% - 1px);
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(-45deg, rgba(0, 0, 255, 0), rgba(95, 145, 255, 1), rgba(0, 0, 255, 0));
|
||||
transform: translateX(50%) rotateZ(45deg);
|
||||
border-radius: 100%;
|
||||
animation: shining $shooting-time ease-in-out infinite;
|
||||
transform: translateX(50%) rotateZ(-45deg);
|
||||
}
|
||||
|
||||
@for $i from 1 through 20 {
|
||||
&:nth-child(#{$i}) {
|
||||
$delay: random(9999) + 0ms;
|
||||
top: calc(50% - #{random(400) - 200px});
|
||||
left: calc(50% - #{random(300) + 0px});
|
||||
animation-delay: $delay;
|
||||
// opacity: random(50) / 100 + 0.5;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
animation-delay: $delay;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tail {
|
||||
0% {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
30% {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
100% {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shining {
|
||||
0% {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
50% {
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
100% {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shooting {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(300px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sky {
|
||||
0% {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(45 + 360deg);
|
||||
}
|
||||
}
|
||||
13
resources/scss/structure/_page-title.scss
Executable file
13
resources/scss/structure/_page-title.scss
Executable file
@@ -0,0 +1,13 @@
|
||||
//
|
||||
// Page-title
|
||||
//
|
||||
|
||||
.page-title-box {
|
||||
padding-bottom: $spacer;
|
||||
background-color: transparent;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: $spacer * 0.5;
|
||||
}
|
||||
582
resources/scss/structure/_sidebar.scss
Executable file
582
resources/scss/structure/_sidebar.scss
Executable file
@@ -0,0 +1,582 @@
|
||||
//
|
||||
// _vertical.scss
|
||||
//
|
||||
|
||||
// Logo
|
||||
.logo-box {
|
||||
position: sticky;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
transition: all 0.3s ease-in-out;
|
||||
line-height: $topbar-height;
|
||||
padding: 0 calc($sidebar-width-sm * 0.5 - $logo-sm-height * 0.5);
|
||||
|
||||
.logo-sm {
|
||||
display: none;
|
||||
height: $logo-sm-height;
|
||||
}
|
||||
|
||||
.logo-lg {
|
||||
height: $logo-lg-height;
|
||||
}
|
||||
|
||||
.logo-light {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.logo-dark {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Main Nav
|
||||
.app-sidebar {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 1010;
|
||||
margin-left: 0;
|
||||
position: fixed;
|
||||
transition: all 0.3s ease-in-out;
|
||||
width: $sidebar-width;
|
||||
font-family: $font-family-secondary;
|
||||
background: $sidebar-bg;
|
||||
// background-image: url("../images/bg-pattern.svg") no-repeat;
|
||||
min-width: $sidebar-width;
|
||||
padding-bottom: $spacer;
|
||||
border-right: $card-border-width solid $sidebar-border-color;
|
||||
border-left: $card-border-width solid $sidebar-border-color;
|
||||
|
||||
.scrollbar {
|
||||
height: calc(100% - $topbar-height);
|
||||
}
|
||||
|
||||
.menu-arrow {
|
||||
&::after {
|
||||
right: calc($sidebar-item-padding-x * 1.5);
|
||||
display: flex;
|
||||
content: "\ea4a";
|
||||
font-family: boxicons;
|
||||
margin-left: auto;
|
||||
position: absolute;
|
||||
transition: transform 0.2s;
|
||||
color: inherit;
|
||||
font-size: calc($sidebar-item-font-size * 1.25);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
&[aria-expanded="true"] {
|
||||
&::after {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
|
||||
&::before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-title {
|
||||
cursor: default;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
color: $sidebar-item-color;
|
||||
opacity: .6;
|
||||
font-weight: $font-weight-semibold;
|
||||
padding: $sidebar-item-padding-y calc($sidebar-item-padding-x * 1.25);
|
||||
transition: all 0.3s ease-in-out;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
margin: 0 15px;
|
||||
|
||||
.nav-item {
|
||||
padding: calc($sidebar-item-padding-y * 0.1) 0;
|
||||
|
||||
.nav-link {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
line-height: 1;
|
||||
font-weight: 400;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
transition: all 0.3s ease-in-out;
|
||||
border-radius: 8px;
|
||||
color: $sidebar-item-color;
|
||||
font-size: $sidebar-item-font-size;
|
||||
padding: $sidebar-item-padding-y $sidebar-item-padding-x;
|
||||
margin: $sidebar-item-margin-y 0;
|
||||
|
||||
&.show,
|
||||
&:active,
|
||||
&.active,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $sidebar-item-hover-color;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: $sidebar-item-hover-bg;
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: $sidebar-item-icon-size;
|
||||
}
|
||||
|
||||
.badge {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sub-navbar-nav {
|
||||
flex-direction: column;
|
||||
padding-left: $sidebar-item-padding-x;
|
||||
|
||||
.menu-arrow {
|
||||
&::after {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-nav-item {
|
||||
padding: calc($sidebar-item-padding-y * 0.5) $sidebar-item-padding-x;
|
||||
|
||||
.sub-nav-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
transition: all 0.3s ease-in-out;
|
||||
color: $sidebar-item-color;
|
||||
font-size: calc($sidebar-item-font-size * 0.95);
|
||||
padding: calc($sidebar-item-padding-y * 0.25) $sidebar-item-padding-x;
|
||||
|
||||
&.active {
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
|
||||
.badge {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:active,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $sidebar-item-hover-color;
|
||||
|
||||
&::before {
|
||||
background-color: $sidebar-item-hover-color;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.sub-navbar-nav {
|
||||
padding-left: calc($sidebar-width-sm - $sidebar-item-padding-x * 5.25);
|
||||
}
|
||||
}
|
||||
|
||||
.disabled {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sidenav Condensed
|
||||
html[data-sidebar-size="condensed"] {
|
||||
|
||||
.app-sidebar {
|
||||
position: absolute;
|
||||
width: $sidebar-width-sm;
|
||||
min-width: $sidebar-width-sm;
|
||||
|
||||
.logo-box {
|
||||
top: 0;
|
||||
z-index: 1020 !important;
|
||||
background: $sidebar-bg;
|
||||
|
||||
.logo-lg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.logo-sm {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.menu-title {
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.simplebar-mask,
|
||||
.simplebar-content-wrapper {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.simplebar-scrollbar {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.simplebar-offset {
|
||||
bottom: 0 !important;
|
||||
}
|
||||
|
||||
// Sidenav Menu
|
||||
.navbar-nav {
|
||||
padding: 10px;
|
||||
margin: 0;
|
||||
|
||||
.nav-link {
|
||||
justify-content: center;
|
||||
|
||||
.nav-text,
|
||||
&.menu-arrow::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
font-size: 22px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.collapse,
|
||||
.collapsing {
|
||||
display: none;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.sub-nav-item,
|
||||
.nav-item {
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
|
||||
>.collapse,
|
||||
>.collapsing {
|
||||
display: block;
|
||||
left: 100%;
|
||||
margin-top: -4px;
|
||||
position: absolute;
|
||||
height: inherit !important;
|
||||
transition: none !important;
|
||||
|
||||
>.sub-navbar-nav {
|
||||
padding-left: 0;
|
||||
background: $dropdown-bg;
|
||||
box-shadow: var(--#{$prefix}box-shadow);
|
||||
width: calc($sidebar-width - $sidebar-width-sm);
|
||||
border: $card-border-width solid $card-border-color;
|
||||
|
||||
>.sub-nav-item {
|
||||
padding: 0;
|
||||
|
||||
>.sub-nav-link {
|
||||
padding: calc($sidebar-item-padding-y * 0.75) $sidebar-item-padding-x;
|
||||
z-index: 5;
|
||||
|
||||
>.nav-text {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
>.collapse,
|
||||
>.collapsing {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-nav-item {
|
||||
.sub-nav-link {
|
||||
color: $dropdown-color;
|
||||
|
||||
&[aria-expanded="true"],
|
||||
&.active,
|
||||
&.show,
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: var(--#{$prefix}primary);
|
||||
}
|
||||
}
|
||||
|
||||
.collapse,
|
||||
.collapsing {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
>.nav-item {
|
||||
|
||||
&:hover {
|
||||
|
||||
>.nav-link {
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
inset: 0px;
|
||||
position: absolute;
|
||||
width: $sidebar-width;
|
||||
}
|
||||
|
||||
>.nav-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
left: calc($sidebar-width-sm - 2px - 20px);
|
||||
background: $dropdown-bg;
|
||||
color: $dropdown-color;
|
||||
line-height: $sidebar-item-icon-size;
|
||||
width: calc($sidebar-width - $sidebar-width-sm);
|
||||
padding: $sidebar-item-padding-y $sidebar-item-padding-x;
|
||||
border: $card-border-width solid $card-border-color;
|
||||
box-shadow: var(--#{$prefix}box-shadow);
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-text,
|
||||
.sub-navbar-nav {
|
||||
margin-left: 10px;
|
||||
|
||||
.sub-navbar-nav {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sub-nav-item {
|
||||
.menu-arrow {
|
||||
&::after {
|
||||
right: 10px;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-text {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-topbar {
|
||||
padding-left: $sidebar-width-sm;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
margin-left: $sidebar-width-sm;
|
||||
min-height: 1300px;
|
||||
}
|
||||
}
|
||||
|
||||
// Sidebar sm hover Toggle Menu Button
|
||||
.button-sm-hover {
|
||||
border: 0;
|
||||
top: 17px;
|
||||
z-index: 1;
|
||||
right: 10px;
|
||||
display: none;
|
||||
text-align: end;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: transparent;
|
||||
transition: all 0.2s ease-in-out;
|
||||
color: $sidebar-item-color;
|
||||
padding: 0;
|
||||
|
||||
.button-sm-hover-icon {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
display: flex;
|
||||
font-size: 22px;
|
||||
border-radius: 50%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&.show,
|
||||
&.active,
|
||||
&:active,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $sidebar-item-hover-color;
|
||||
background-color: $sidebar-item-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Small Hover
|
||||
html[data-sidebar-size="sm-hover"] {
|
||||
|
||||
.app-topbar {
|
||||
padding-left: $sidebar-width-sm;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
margin-left: $sidebar-width-sm;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.button-toggle-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.app-sidebar:not(:hover) {
|
||||
width: $sidebar-width-sm;
|
||||
min-width: $sidebar-width-sm;
|
||||
|
||||
.logo-box {
|
||||
.logo-lg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.logo-sm {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
|
||||
.nav-link {
|
||||
justify-content: center;
|
||||
|
||||
.nav-text,
|
||||
.badge {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.menu-arrow {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.collapse,
|
||||
.collapsing {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-title {
|
||||
transition: all 0.3s ease-in-out;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.simplebar-track.simplebar-vertical {
|
||||
visibility: hidden !important;
|
||||
}
|
||||
}
|
||||
|
||||
.app-sidebar {
|
||||
width: $sidebar-width;
|
||||
min-width: $sidebar-width;
|
||||
|
||||
.logo-box {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.button-sm-hover {
|
||||
display: block;
|
||||
|
||||
.button-sm-hover-icon {
|
||||
transform: rotateY(180deg);
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.simplebar-track.simplebar-horizontal {
|
||||
visibility: hidden !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Small Hover Active
|
||||
html[data-sidebar-size="sm-hover-active"] {
|
||||
.button-toggle-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.app-sidebar {
|
||||
.logo-box {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.button-sm-hover {
|
||||
display: block;
|
||||
|
||||
.button-sm-hover-icon {
|
||||
transform-style: preserve-3d;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// SideNav Hidden (Mobile View)
|
||||
html[data-sidebar-size="hidden"] {
|
||||
.app-sidebar {
|
||||
margin-left: calc($sidebar-width * -1);
|
||||
}
|
||||
|
||||
.page-content {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&.sidebar-enable {
|
||||
.app-sidebar {
|
||||
margin-left: 0;
|
||||
z-index: 1055;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sidenav Dark and Brand
|
||||
html[data-bs-theme="dark"],
|
||||
html[data-sidebar-color="dark"],
|
||||
html[data-sidebar-color="brand"] {
|
||||
.app-sidebar {
|
||||
.logo-box {
|
||||
.logo-light {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.logo-dark {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
159
resources/scss/structure/_topbar.scss
Executable file
159
resources/scss/structure/_topbar.scss
Executable file
@@ -0,0 +1,159 @@
|
||||
//
|
||||
// topbar.scss
|
||||
//
|
||||
|
||||
.app-topbar {
|
||||
top: 0;
|
||||
z-index: 1005;
|
||||
position: sticky;
|
||||
transition: all 0.3s ease-in-out;
|
||||
height: $topbar-height;
|
||||
background-color: $topbar-bg;
|
||||
padding-left: $sidebar-width;
|
||||
border-bottom: $card-border-width solid $card-border-color;
|
||||
|
||||
.navbar-header {
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
// Search
|
||||
.app-search {
|
||||
|
||||
.form-control {
|
||||
border: none;
|
||||
padding-left: 40px;
|
||||
padding-right: 15px;
|
||||
background-color: $topbar-search-bg;
|
||||
box-shadow: none;
|
||||
height: 38px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.search-widget-icon {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
font-size: 18px;
|
||||
left: 11px;
|
||||
top: 50%;
|
||||
color: $gray-500;
|
||||
transform: translateY(-50%);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.search-widget-icon-close {
|
||||
right: 7px;
|
||||
left: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.topbar-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: $topbar-height;
|
||||
|
||||
.topbar-button {
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background-color: $topbar-search-bg;
|
||||
transition: all 0.3s ease-in-out;
|
||||
color: $topbar-item-color;
|
||||
padding: $btn-padding-y $btn-padding-y;
|
||||
position: relative;
|
||||
|
||||
&.show,
|
||||
&.active,
|
||||
&:active,
|
||||
&:hover {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.topbar-badge {
|
||||
right: -7px;
|
||||
top: 7px !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// fullscreen exit icon
|
||||
[data-toggle="fullscreen"] {
|
||||
.fullscreen {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.quit-fullscreen {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.fullscreen-enable {
|
||||
.fullscreen {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.quit-fullscreen {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Dark Mode Icon
|
||||
.app-topbar {
|
||||
#light-dark-mode {
|
||||
.light-mode {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dark-mode {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] {
|
||||
.app-topbar {
|
||||
#light-dark-mode {
|
||||
.light-mode {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dark-mode {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
html[data-sidebar-size="hidden"] {
|
||||
.app-topbar {
|
||||
padding: 0 $spacer * 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// @include media-breakpoint-down(md) {
|
||||
@media (max-width: 375px) {
|
||||
.app-topbar {
|
||||
padding: 0 0.5 * $spacer !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.app-topbar {
|
||||
.dropdown {
|
||||
position: static;
|
||||
|
||||
.dropdown-menu {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user