Update architect-ui, bootstrap, javascript and css
This commit is contained in:
15
resources/themes/architect/src/layout/_layout-variables.scss
vendored
Normal file
15
resources/themes/architect/src/layout/_layout-variables.scss
vendored
Normal file
@@ -0,0 +1,15 @@
|
||||
// Variables
|
||||
|
||||
$spacer-lg: 3rem;
|
||||
$spacer-sm: 1.5rem;
|
||||
|
||||
$layout-spacer-lg: 3rem;
|
||||
$layout-spacer-x: 1.5rem;
|
||||
|
||||
$app-sidebar-width: 250px;
|
||||
$app-sidebar-width-collapsed: 80px;
|
||||
|
||||
$logo-height: 23px;
|
||||
$logo-width: 97px;
|
||||
|
||||
$app-header-height: 60px;
|
||||
9
resources/themes/architect/src/layout/_layout.scss
vendored
Normal file
9
resources/themes/architect/src/layout/_layout.scss
vendored
Normal file
@@ -0,0 +1,9 @@
|
||||
// Variables
|
||||
@import "layout-variables";
|
||||
@import "generic/generic-base";
|
||||
@import "header/header-base";
|
||||
@import "sidebar/sidebar-base";
|
||||
@import "main/main-base";
|
||||
@import "footer/footer-base";
|
||||
@import "elements/page-title/page-title-base";
|
||||
@import "elements/search-box/search-box";
|
||||
94
resources/themes/architect/src/layout/elements/page-title/_page-title-base.scss
vendored
Normal file
94
resources/themes/architect/src/layout/elements/page-title/_page-title-base.scss
vendored
Normal file
@@ -0,0 +1,94 @@
|
||||
// Page title
|
||||
|
||||
.app-page-title {
|
||||
padding: $grid-gutter-width;
|
||||
margin: (-$grid-gutter-width) (-$grid-gutter-width) $grid-gutter-width;
|
||||
position: relative;
|
||||
|
||||
& + .body-tabs-layout {
|
||||
margin-top: (-($grid-gutter-width)) !important;
|
||||
}
|
||||
|
||||
.page-title-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.page-title-heading,
|
||||
.page-title-subheading {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.page-title-heading {
|
||||
font-size: $h5-font-size;
|
||||
font-weight: 400;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.page-title-subheading {
|
||||
padding: 3px 0 0;
|
||||
font-size: $font-size-base;
|
||||
opacity: .6;
|
||||
|
||||
.breadcrumb {
|
||||
padding: 0;
|
||||
margin: 3px 0 0;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.page-title-actions {
|
||||
margin-left: auto;
|
||||
|
||||
.breadcrumb {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.page-title-icon {
|
||||
font-size: 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
text-align: center;
|
||||
padding: calc($layout-spacer-x / 1.8);
|
||||
margin: 0 ($grid-gutter-width) 0 0;
|
||||
background: $white;
|
||||
box-shadow: $box-shadow-default;
|
||||
@include border-radius($border-radius);
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
|
||||
i {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
&.rounded-circle {
|
||||
margin: 0 calc($grid-gutter-width / 1.5) 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
& + .RRT__container {
|
||||
margin-top: calc($grid-gutter-width / -1.3);
|
||||
}
|
||||
|
||||
&.app-page-title-simple {
|
||||
margin: 0;
|
||||
background: none !important;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.page-title-icon-rounded {
|
||||
.page-title-icon {
|
||||
@include border-radius(50px);
|
||||
}
|
||||
}
|
||||
163
resources/themes/architect/src/layout/elements/search-box/_search-box.scss
vendored
Normal file
163
resources/themes/architect/src/layout/elements/search-box/_search-box.scss
vendored
Normal file
@@ -0,0 +1,163 @@
|
||||
// Search Box
|
||||
|
||||
$search-box-size: 42px;
|
||||
|
||||
.search-wrapper {
|
||||
position: relative;
|
||||
margin-right: calc($nav-link-padding-x / 1.5);
|
||||
|
||||
.input-holder {
|
||||
height: $search-box-size;
|
||||
width: $search-box-size;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
transition: all 0.3s ease-in-out;
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
padding: 0 70px 0 20px;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: transparent;
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
outline: none;
|
||||
transform: translate(0, 60px);
|
||||
transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);
|
||||
transition-delay: 0.3s;
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
width: $search-box-size;
|
||||
height: $search-box-size;
|
||||
border: none;
|
||||
padding: 0;
|
||||
outline: none;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease-in-out;
|
||||
background: rgba(0, 0, 0, .06);
|
||||
@include border-radius(30px);
|
||||
|
||||
span {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
transform: rotate(45deg);
|
||||
transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
}
|
||||
|
||||
&::before {
|
||||
width: 4px;
|
||||
height: 11px;
|
||||
left: 9px;
|
||||
top: 13px;
|
||||
border-radius: 2px;
|
||||
background: $primary;
|
||||
}
|
||||
|
||||
&::after {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
left: 4px;
|
||||
top: 0;
|
||||
border-radius: 16px;
|
||||
border: 2px solid $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-top: -10px;
|
||||
cursor: pointer;
|
||||
opacity: 0 !important;
|
||||
// transform: rotate(-180deg);
|
||||
transition: all .2s cubic-bezier(0.285, -0.450, 0.935, 0.110);
|
||||
transition-delay: 0.1s;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
// content: '';
|
||||
background: $primary;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
width: 2px;
|
||||
height: 20px;
|
||||
left: 9px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
left: 0;
|
||||
top: 9px;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
width: 330px;
|
||||
|
||||
.input-holder {
|
||||
width: 290px;
|
||||
border-radius: 50px;
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
|
||||
|
||||
.search-input {
|
||||
opacity: 1;
|
||||
transform: translate(0, 11px);
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
width: $search-box-size;
|
||||
height: $search-box-size;
|
||||
margin: 0;
|
||||
border-radius: 30px;
|
||||
|
||||
span {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
left: 300px;
|
||||
opacity: .6 !important;
|
||||
// transform: rotate(45deg);
|
||||
transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
|
||||
transition-delay: 0.5s;
|
||||
|
||||
&:hover {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
& + .header-menu {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
28
resources/themes/architect/src/layout/footer/_footer-base.scss
vendored
Normal file
28
resources/themes/architect/src/layout/footer/_footer-base.scss
vendored
Normal file
@@ -0,0 +1,28 @@
|
||||
// Footer base
|
||||
|
||||
.app-footer {
|
||||
height: $app-header-height;
|
||||
|
||||
.app-footer__inner {
|
||||
padding: 0 $layout-spacer-x 0 calc($layout-spacer-x / 2);
|
||||
height: $app-header-height;
|
||||
|
||||
display: flex;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
|
||||
.app-footer-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.app-footer-right {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Footer Modifiers
|
||||
|
||||
// @import "fixed-footer";
|
||||
19
resources/themes/architect/src/layout/generic/_generic-base.scss
vendored
Normal file
19
resources/themes/architect/src/layout/generic/_generic-base.scss
vendored
Normal file
@@ -0,0 +1,19 @@
|
||||
// General
|
||||
|
||||
a,
|
||||
button,
|
||||
.btn {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.app-container {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.table th,
|
||||
.table td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
91
resources/themes/architect/src/layout/header/_header-base.scss
vendored
Normal file
91
resources/themes/architect/src/layout/header/_header-base.scss
vendored
Normal file
@@ -0,0 +1,91 @@
|
||||
// Header Base
|
||||
|
||||
.app-header {
|
||||
height: $app-header-height;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
transition: all .2s;
|
||||
|
||||
&.header-shadow {
|
||||
box-shadow: $box-shadow-default;
|
||||
}
|
||||
|
||||
.app-header__content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
flex: 1;
|
||||
padding: 0 $layout-spacer-x;
|
||||
height: $app-header-height;
|
||||
|
||||
.app-header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-menu {
|
||||
.nav-link {
|
||||
color: $gray-600;
|
||||
|
||||
i {
|
||||
color: $gray-500;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $gray-900;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-header-right {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.header-user-info {
|
||||
& > .widget-heading,
|
||||
& > .widget-subheading {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
& > .widget-subheading {
|
||||
font-size: $font-size-xs;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-header__logo {
|
||||
padding: 0 $layout-spacer-x;
|
||||
height: $app-header-height;
|
||||
width: $app-sidebar-width;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: width .2s;
|
||||
|
||||
.logo-src {
|
||||
height: $logo-height;
|
||||
width: $logo-width;
|
||||
}
|
||||
}
|
||||
|
||||
.app-header__menu,
|
||||
.app-header__mobile-menu {
|
||||
display: none;
|
||||
padding: 0 $layout-spacer-x;
|
||||
height: $app-header-height;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// Header Modifiers
|
||||
|
||||
@import "modifiers/fixed-header";
|
||||
|
||||
// Header Themes
|
||||
|
||||
@import "themes/header-light";
|
||||
@import "themes/header-dark";
|
||||
25
resources/themes/architect/src/layout/header/modifiers/_fixed-header.scss
vendored
Normal file
25
resources/themes/architect/src/layout/header/modifiers/_fixed-header.scss
vendored
Normal file
@@ -0,0 +1,25 @@
|
||||
// Fixed Header
|
||||
|
||||
.fixed-header {
|
||||
.app-header {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
|
||||
.app-header__logo {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.app-main {
|
||||
padding-top: $app-header-height;
|
||||
}
|
||||
|
||||
&:not(.fixed-sidebar):not(.closed-sidebar) {
|
||||
.app-sidebar {
|
||||
.app-header__logo {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
119
resources/themes/architect/src/layout/header/themes/_header-dark.scss
vendored
Normal file
119
resources/themes/architect/src/layout/header/themes/_header-dark.scss
vendored
Normal file
@@ -0,0 +1,119 @@
|
||||
// Header Dark
|
||||
|
||||
.app-header {
|
||||
&.header-text-dark {
|
||||
.app-header-left > .nav > li > .nav-link {
|
||||
color: rgba(0, 0, 0, .7);
|
||||
|
||||
.nav-link-icon {
|
||||
color: rgba(0, 0, 0, .8);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: rgba(0, 0, 0, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.app-header-right {
|
||||
.icon-wrapper-alt {
|
||||
|
||||
.fa,
|
||||
.icon {
|
||||
color: rgba(0, 0, 0, .7) !important;
|
||||
transition: all .2s;
|
||||
}
|
||||
|
||||
.icon-wrapper-bg {
|
||||
background: rgba(0, 0, 0, .1) !important;
|
||||
transition: all .2s;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.fa,
|
||||
.icon {
|
||||
color: rgba(0, 0, 0, .95) !important;
|
||||
}
|
||||
|
||||
.icon-wrapper-bg {
|
||||
background: rgba(0, 0, 0, .15) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.badge-dot {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
& > .header-btn-lg {
|
||||
|
||||
& .widget-content-left .btn-group > .btn,
|
||||
.widget-heading,
|
||||
.widget-subheading {
|
||||
color: rgba(0, 0, 0, .8);
|
||||
}
|
||||
|
||||
.header-user-info {
|
||||
& > .btn-shadow {
|
||||
box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, .1), 0 0.0625rem 0.125rem rgba(0, 0, 0, .2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-wrapper {
|
||||
.input-holder {
|
||||
.search-icon {
|
||||
background: rgba(0, 0, 0, .1);
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
.input-holder {
|
||||
background: rgba(0, 0, 0, .1);
|
||||
|
||||
.search-input {
|
||||
color: rgba(0, 0, 0, .8);
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
background: rgba(0, 0, 0, .1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-btn-lg {
|
||||
&::before {
|
||||
background: rgba(0, 0, 0, .2);
|
||||
}
|
||||
}
|
||||
|
||||
.header-btn-lg,
|
||||
.header__pane {
|
||||
.hamburger-inner,
|
||||
.hamburger.is-active .hamburger-inner,
|
||||
.hamburger-inner::before,
|
||||
.hamburger-inner::after {
|
||||
background-color: rgba(0, 0, 0, .8) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.search-wrapper .input-holder .search-icon span::after {
|
||||
border-color: rgba(0, 0, 0, .8);
|
||||
}
|
||||
|
||||
.search-wrapper .btn-close::before,
|
||||
.search-wrapper .btn-close::after,
|
||||
.search-wrapper .input-holder .search-icon span::before {
|
||||
background: rgba(0, 0, 0, .8);
|
||||
}
|
||||
|
||||
.app-header__logo {
|
||||
.logo-src {
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
137
resources/themes/architect/src/layout/header/themes/_header-light.scss
vendored
Normal file
137
resources/themes/architect/src/layout/header/themes/_header-light.scss
vendored
Normal file
@@ -0,0 +1,137 @@
|
||||
// Header Light
|
||||
|
||||
.app-header {
|
||||
&.header-text-light {
|
||||
.app-header-left > .nav > li > .nav-link {
|
||||
color: rgba(255, 255, 255, .7);
|
||||
|
||||
.nav-link-icon {
|
||||
color: rgba(255, 255, 255, .8);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.app-header-right {
|
||||
.icon-wrapper-alt {
|
||||
|
||||
.fa,
|
||||
.icon {
|
||||
color: rgba(255, 255, 255, .7) !important;
|
||||
transition: all .2s;
|
||||
}
|
||||
|
||||
.icon-wrapper-bg {
|
||||
background: rgba(255, 255, 255, .1) !important;
|
||||
transition: all .2s;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.fa,
|
||||
.icon {
|
||||
color: rgba(255, 255, 255, .9) !important;
|
||||
}
|
||||
|
||||
.icon-wrapper-bg {
|
||||
background: rgba(255, 255, 255, .15) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.badge-dot {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
& > .header-btn-lg {
|
||||
|
||||
& .widget-content-left .btn-group > .btn,
|
||||
.widget-heading,
|
||||
.widget-subheading {
|
||||
color: rgba(255, 255, 255, .8);
|
||||
}
|
||||
|
||||
.header-user-info {
|
||||
& > .btn-shadow {
|
||||
box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, .1), 0 0.0625rem 0.125rem rgba(0, 0, 0, .2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-wrapper {
|
||||
.input-holder {
|
||||
.search-icon {
|
||||
background: rgba(0, 0, 0, .1);
|
||||
}
|
||||
|
||||
.search-input {
|
||||
&::placeholder,
|
||||
&::-webkit-input-placeholder,
|
||||
&:-ms-input-placeholder,
|
||||
&:-moz-placeholder,
|
||||
&::-moz-placeholder {
|
||||
color: rgba(255, 255, 255, .5) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
.input-holder {
|
||||
background: rgba(255, 255, 255, .1);
|
||||
|
||||
.search-input {
|
||||
color: rgba(255, 255, 255, .8);
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
background: rgba(255, 255, 255, .1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-btn-lg {
|
||||
&::before {
|
||||
background: rgba(255, 255, 255, .2);
|
||||
}
|
||||
}
|
||||
|
||||
.header-btn-lg,
|
||||
.header__pane {
|
||||
.hamburger-inner,
|
||||
.hamburger.is-active .hamburger-inner,
|
||||
.hamburger-inner::before,
|
||||
.hamburger-inner::after {
|
||||
background-color: rgba(255, 255, 255, .8) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.search-wrapper .input-holder .search-icon span::after {
|
||||
border-color: rgba(255, 255, 255, .8);
|
||||
}
|
||||
|
||||
.search-wrapper .btn-close::before,
|
||||
.search-wrapper .btn-close::after,
|
||||
.search-wrapper .input-holder .search-icon span::before {
|
||||
background: rgba(255, 255, 255, .8);
|
||||
}
|
||||
|
||||
.app-header__logo {
|
||||
.logo-src {
|
||||
}
|
||||
}
|
||||
|
||||
.app-header__mobile-menu {
|
||||
.hamburger-inner,
|
||||
.hamburger-inner::before,
|
||||
.hamburger-inner::after {
|
||||
background: rgba(255, 255, 255, .9);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
24
resources/themes/architect/src/layout/main/_main-base.scss
vendored
Normal file
24
resources/themes/architect/src/layout/main/_main-base.scss
vendored
Normal file
@@ -0,0 +1,24 @@
|
||||
// Main Base
|
||||
|
||||
.app-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
z-index: 8;
|
||||
position: relative;
|
||||
|
||||
.app-main__outer {
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
z-index: 12;
|
||||
}
|
||||
|
||||
.app-main__inner {
|
||||
padding: $grid-gutter-width $grid-gutter-width 0;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Themes
|
||||
|
||||
@import "themes/main-white";
|
||||
37
resources/themes/architect/src/layout/main/themes/_main-white.scss
vendored
Normal file
37
resources/themes/architect/src/layout/main/themes/_main-white.scss
vendored
Normal file
@@ -0,0 +1,37 @@
|
||||
// Theme White
|
||||
|
||||
// Variables
|
||||
|
||||
$app-container-bg: #f1f4f6;
|
||||
$app-sidebar-bg: #ffffff;
|
||||
$app-header-bg: #fafbfc;
|
||||
$app-header-logo-bg: rgba(255, 255, 255, .9);
|
||||
|
||||
// Content
|
||||
|
||||
.app-theme-white {
|
||||
|
||||
&.app-container {
|
||||
background: $app-container-bg;
|
||||
}
|
||||
|
||||
.app-sidebar {
|
||||
background: $app-sidebar-bg;
|
||||
}
|
||||
|
||||
.app-page-title {
|
||||
background: rgba(255, 255, 255, .45);
|
||||
}
|
||||
|
||||
.app-footer .app-footer__inner,
|
||||
.app-header {
|
||||
background: $app-header-bg;
|
||||
}
|
||||
|
||||
&.fixed-header {
|
||||
.app-header__logo {
|
||||
background: rgba($app-header-bg, .1);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
443
resources/themes/architect/src/layout/responsive/_responsive-base.scss
vendored
Normal file
443
resources/themes/architect/src/layout/responsive/_responsive-base.scss
vendored
Normal file
@@ -0,0 +1,443 @@
|
||||
// Responsive
|
||||
|
||||
@media only screen and (max-width: 1320px) {
|
||||
.header-user-info {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
|
||||
.app-main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
&::before,
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.app-sidebar {
|
||||
flex: 0 0 $app-sidebar-width !important;
|
||||
width: $app-sidebar-width !important;
|
||||
transform: translateX(-$app-sidebar-width);
|
||||
position: fixed;
|
||||
|
||||
.app-header__logo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-mobile-open {
|
||||
|
||||
.app-sidebar {
|
||||
|
||||
transform: translateX(0);
|
||||
|
||||
.app-sidebar__inner {
|
||||
|
||||
.app-sidebar__heading {
|
||||
text-indent: initial;
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
ul li a {
|
||||
text-indent: initial;
|
||||
padding: 0 $layout-spacer-x 0 45px;
|
||||
}
|
||||
|
||||
.metismenu-icon {
|
||||
text-indent: initial;
|
||||
left: 5px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.metismenu-state-icon {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
ul {
|
||||
&::before {
|
||||
display: block;
|
||||
}
|
||||
|
||||
ul li a {
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
&.mm-show {
|
||||
padding: .5em 0 0 2rem;
|
||||
|
||||
& > li > a {
|
||||
height: 2rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-header__logo {
|
||||
width: auto !important;
|
||||
|
||||
.logo-src {
|
||||
width: $logo-width !important;
|
||||
margin-left: auto;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixed-sidebar .app-sidebar {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sidebar-mobile-overlay {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.app-main {
|
||||
|
||||
.app-main__outer {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.app-header {
|
||||
justify-content: space-between;
|
||||
|
||||
.app-header__logo {
|
||||
display: none;
|
||||
order: 2;
|
||||
background: transparent !important;
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
.app-header__content {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
box-shadow: $box-shadow-default;
|
||||
position: absolute;
|
||||
left: 5%;
|
||||
width: 90%;
|
||||
top: 0;
|
||||
transition: all .2s;
|
||||
background: $white;
|
||||
@include border-radius(50px);
|
||||
padding: 0 10px;
|
||||
overflow: hidden;
|
||||
|
||||
.header-btn-lg {
|
||||
margin-left: .5rem;
|
||||
padding: 0 .5rem;
|
||||
}
|
||||
|
||||
.app-header-left {
|
||||
.nav {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.header-mobile-open {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
top: $app-header-height + 20;
|
||||
}
|
||||
}
|
||||
|
||||
.app-header__mobile-menu {
|
||||
display: flex;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.app-header__menu {
|
||||
display: flex;
|
||||
order: 3;
|
||||
}
|
||||
|
||||
&.header-text-light {
|
||||
.app-header__menu {
|
||||
& > span .btn,
|
||||
& > .btn {
|
||||
background: rgba(255, 255, 255, .1);
|
||||
border-color: rgba(255, 255, 255, .1);
|
||||
}
|
||||
}
|
||||
|
||||
.header-mobile-open {
|
||||
background: $gray-800;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.popover,
|
||||
.dropdown-menu {
|
||||
position: fixed !important;
|
||||
z-index: 50;
|
||||
left: 5% !important;
|
||||
top: 50% !important;
|
||||
width: 90% !important;
|
||||
transform: translateY(-50%) !important;
|
||||
min-width: 10px !important;
|
||||
|
||||
.btn-icon-vertical .btn-icon-wrapper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.popover {
|
||||
max-width: initial;
|
||||
.arrow {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.app-page-title {
|
||||
text-align: center;
|
||||
|
||||
.page-title-heading,
|
||||
.page-title-wrapper {
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.page-title-actions {
|
||||
margin: calc($grid-gutter-width / 2) auto 0;
|
||||
}
|
||||
|
||||
.page-title-actions,
|
||||
.page-title-subheading {
|
||||
.breadcrumb-item,
|
||||
.breadcrumb {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Footer
|
||||
|
||||
.app-footer .app-footer__inner {
|
||||
.app-footer-right {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.app-footer-left {
|
||||
width: 100%;
|
||||
|
||||
.footer-dots {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Components
|
||||
|
||||
.widget-content {
|
||||
.widget-numbers {
|
||||
font-size: 1.6rem;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-slider-sm {
|
||||
.slick-slider {
|
||||
max-width: 650px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-transparent.list-group-item {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.tabs-lg-alternate.card-header {
|
||||
|
||||
& > .nav .nav-item {
|
||||
.widget-number {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-title-head {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-between(xs, md) {
|
||||
|
||||
.app-page-title .page-title-icon,
|
||||
.ui-theme-settings {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
&.responsive-center {
|
||||
display: block;
|
||||
text-align: center;
|
||||
height: auto;
|
||||
padding: $layout-spacer-x;
|
||||
|
||||
.nav,
|
||||
.btn-actions-pane-right {
|
||||
margin: calc($layout-spacer-x / 2) 0 0;
|
||||
|
||||
.d-inline-block.ml-2 {
|
||||
width: 100% !important;
|
||||
text-align: left;
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slick-slider-sm {
|
||||
.slick-slider {
|
||||
max-width: 650px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
|
||||
.slick-slider-sm {
|
||||
.slick-slider {
|
||||
max-width: 850px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
|
||||
.-hide-paging .-pagination .-center {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
.app-main .app-main__inner {
|
||||
padding: 15px 15px 0;
|
||||
}
|
||||
|
||||
.mbg-3,
|
||||
body .card.mb-3 {
|
||||
margin-bottom: calc($grid-gutter-width / 2) !important;
|
||||
}
|
||||
|
||||
.app-page-title {
|
||||
padding: calc($grid-gutter-width / 2);
|
||||
margin: calc($grid-gutter-width / -2) calc($grid-gutter-width / -2) calc($grid-gutter-width / 2);
|
||||
|
||||
& + .body-tabs-layout {
|
||||
margin-top: (calc($grid-gutter-width / -2)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.body-tabs-line .body-tabs-layout {
|
||||
margin-bottom: calc($grid-gutter-width / 2);
|
||||
margin-left: calc($grid-gutter-width / -2);
|
||||
margin-right: calc($grid-gutter-width / -2);
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.body-tabs {
|
||||
padding: 0 calc($grid-gutter-width / 2);
|
||||
display: block;
|
||||
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popover,
|
||||
.dropdown-menu {
|
||||
width: 80%;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
body .card-header {
|
||||
height: auto;
|
||||
display: block;
|
||||
padding: calc($layout-spacer-x / 2) $layout-spacer-x;
|
||||
text-align: center;
|
||||
|
||||
.btn-actions-pane-right {
|
||||
padding: calc($layout-spacer-x / 2) 0 0;
|
||||
}
|
||||
|
||||
.actions-icon-btn {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
&.card-header-tab {
|
||||
.card-header-title {
|
||||
display: inline-flex !important;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
& > .nav {
|
||||
margin: calc($layout-spacer-x / 2) 0 calc($layout-spacer-x / -2);
|
||||
display: table !important;
|
||||
width: 100%;
|
||||
|
||||
.nav-item {
|
||||
display: table-cell;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.profile-responsive-sm,
|
||||
.profile-responsive {
|
||||
.dropdown-menu-header .menu-header-content.btn-pane-right {
|
||||
display: block;
|
||||
text-align: center;
|
||||
|
||||
.avatar-icon-wrapper {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
.menu-header-btn-pane {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slick-slider-sm .slick-slider .slick-prev {
|
||||
left: calc($grid-gutter-width / 2);
|
||||
}
|
||||
|
||||
.slick-slider-sm .slick-slider .slick-next {
|
||||
right: calc($grid-gutter-width / 2);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1200px) and (max-width: 1500px) {
|
||||
.profile-responsive {
|
||||
.dropdown-menu-header .menu-header-content.btn-pane-right {
|
||||
display: block;
|
||||
text-align: center;
|
||||
|
||||
.avatar-icon-wrapper {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
.menu-header-btn-pane {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
80
resources/themes/architect/src/layout/sidebar/_sidebar-base.scss
vendored
Normal file
80
resources/themes/architect/src/layout/sidebar/_sidebar-base.scss
vendored
Normal file
@@ -0,0 +1,80 @@
|
||||
// Sidebar Base
|
||||
|
||||
.app-sidebar {
|
||||
width: $app-sidebar-width;
|
||||
display: flex;
|
||||
z-index: 11;
|
||||
overflow: hidden;
|
||||
min-width: $app-sidebar-width;
|
||||
position: relative;
|
||||
flex: 0 0 $app-sidebar-width;
|
||||
margin-top: -$app-header-height;
|
||||
padding-top: $app-header-height;
|
||||
transition: all .2s;
|
||||
|
||||
.app-sidebar__inner {
|
||||
padding: 2px ($layout-spacer-x) $layout-spacer-x;
|
||||
}
|
||||
|
||||
.scrollbar-sidebar {
|
||||
z-index: 15;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.app-sidebar-bg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
opacity: 0.05;
|
||||
background-size: cover;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.app-header__logo {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: none;
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
&.sidebar-shadow {
|
||||
box-shadow: 7px 0 60px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
.app-sidebar__heading {
|
||||
text-transform: uppercase;
|
||||
font-size: $font-size-xs;
|
||||
margin: calc($layout-spacer-x / 2) 0;
|
||||
font-weight: bold;
|
||||
color: $primary;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sidebar-mobile-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #333;
|
||||
opacity: .6;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 12;
|
||||
}
|
||||
|
||||
// Sidebar Components
|
||||
|
||||
@import "modifiers/navmenu-vertical";
|
||||
|
||||
// Sidebar Modifiers
|
||||
|
||||
@import "themes/sidebar-light";
|
||||
// @import "themes/sidebar-dark";
|
||||
|
||||
@import "modifiers/fixed-sidebar";
|
||||
@import "modifiers/closed-sidebar";
|
||||
217
resources/themes/architect/src/layout/sidebar/modifiers/_closed-sidebar.scss
vendored
Normal file
217
resources/themes/architect/src/layout/sidebar/modifiers/_closed-sidebar.scss
vendored
Normal file
@@ -0,0 +1,217 @@
|
||||
// Closed Sidebar
|
||||
|
||||
// Sidebar Menu Hover
|
||||
|
||||
.closed-sidebar {
|
||||
.app-sidebar {
|
||||
transition: all .3s ease;
|
||||
width: $app-sidebar-width-collapsed;
|
||||
min-width: $app-sidebar-width-collapsed;
|
||||
flex: 0 0 $app-sidebar-width-collapsed;
|
||||
z-index: 13;
|
||||
|
||||
.app-sidebar__inner {
|
||||
|
||||
.app-sidebar__heading {
|
||||
text-indent: -999em;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: $dropdown-link-hover-bg;
|
||||
text-indent: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
ul li a {
|
||||
text-indent: -99rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.metismenu-icon {
|
||||
text-indent: 0;
|
||||
left: 50%;
|
||||
margin-left: -17px;
|
||||
}
|
||||
|
||||
.metismenu-state-icon {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
ul {
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.mm-show {
|
||||
padding: 0;
|
||||
|
||||
& > li > a {
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
flex: 0 0 $app-sidebar-width !important;
|
||||
width: $app-sidebar-width !important;
|
||||
|
||||
.app-sidebar__inner {
|
||||
|
||||
.app-sidebar__heading {
|
||||
text-indent: initial;
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
&::before {
|
||||
display: block;
|
||||
}
|
||||
|
||||
li a {
|
||||
text-indent: initial;
|
||||
padding: 0 $layout-spacer-x 0 45px;
|
||||
}
|
||||
}
|
||||
|
||||
.metismenu-icon {
|
||||
text-indent: initial;
|
||||
left: 5px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.metismenu-state-icon {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
ul {
|
||||
&.mm-show {
|
||||
padding: .5em 0 0 2rem;
|
||||
|
||||
& > li > a {
|
||||
height: 2.3em;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
li a {
|
||||
padding-left: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.sidebar-mobile-open) {
|
||||
|
||||
.app-sidebar {
|
||||
.scrollbar-sidebar {
|
||||
position: static;
|
||||
height: auto;
|
||||
overflow: initial !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.scrollbar-sidebar {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.closed-sidebar-mobile) {
|
||||
.app-header {
|
||||
.app-header__logo {
|
||||
width: $app-sidebar-width-collapsed;
|
||||
|
||||
.logo-src {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header__pane {
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.fixed-sidebar {
|
||||
.app-main__outer {
|
||||
padding-left: $app-sidebar-width-collapsed;
|
||||
}
|
||||
}
|
||||
|
||||
&.fixed-header:not(.fixed-sidebar) {
|
||||
.app-sidebar {
|
||||
.app-header__logo {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.closed-sidebar-mobile {
|
||||
.app-sidebar,
|
||||
.app-header {
|
||||
.app-header__logo {
|
||||
width: auto;
|
||||
display: flex;
|
||||
|
||||
.header__pane {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-sidebar {
|
||||
.app-header__logo {
|
||||
display: flex;
|
||||
width: $app-sidebar-width-collapsed;
|
||||
padding: 0 $layout-spacer-x !important;
|
||||
|
||||
.logo-src {
|
||||
display: block !important;
|
||||
margin: 0 auto;
|
||||
width: $logo-width - 76;
|
||||
}
|
||||
|
||||
.header__pane {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.app-header__logo {
|
||||
width: $app-sidebar-width;
|
||||
|
||||
.logo-src {
|
||||
width: $logo-width;
|
||||
margin: 0;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-header {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.fixed-footer {
|
||||
.app-footer__inner {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
71
resources/themes/architect/src/layout/sidebar/modifiers/_fixed-sidebar.scss
vendored
Normal file
71
resources/themes/architect/src/layout/sidebar/modifiers/_fixed-sidebar.scss
vendored
Normal file
@@ -0,0 +1,71 @@
|
||||
// Fixed Sidebar
|
||||
|
||||
.fixed-sidebar {
|
||||
.app-sidebar {
|
||||
position: fixed;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.app-main {
|
||||
|
||||
.app-main__outer {
|
||||
z-index: 9;
|
||||
padding-left: $app-sidebar-width;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.fixed-header {
|
||||
.app-sidebar {
|
||||
.app-header__logo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.fixed-header) {
|
||||
.app-sidebar {
|
||||
.app-header__logo {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.app-header {
|
||||
|
||||
margin-left: $app-sidebar-width;
|
||||
|
||||
.app-header__logo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.app-main {
|
||||
//z-index: 12;
|
||||
}
|
||||
}
|
||||
|
||||
&.closed-sidebar {
|
||||
&:not(.fixed-header) {
|
||||
|
||||
.app-header {
|
||||
margin-left: $app-sidebar-width-collapsed;
|
||||
}
|
||||
|
||||
.app-sidebar {
|
||||
|
||||
.app-header__logo {
|
||||
width: $app-sidebar-width-collapsed;
|
||||
padding: 0;
|
||||
|
||||
.logo-src {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header__pane {
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
144
resources/themes/architect/src/layout/sidebar/modifiers/_navmenu-vertical.scss
vendored
Normal file
144
resources/themes/architect/src/layout/sidebar/modifiers/_navmenu-vertical.scss
vendored
Normal file
@@ -0,0 +1,144 @@
|
||||
// Navigation Menu Vertical
|
||||
|
||||
.vertical-nav-menu {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
list-style: none;
|
||||
|
||||
&::after {
|
||||
content: " ";
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.mm-collapse:not(.mm-show) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mm-collapsing {
|
||||
position: relative;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
transition-timing-function: ease;
|
||||
transition-duration: .25s;
|
||||
transition-property: height, visibility;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
&:before {
|
||||
opacity: 0;
|
||||
transition: opacity 300ms;
|
||||
}
|
||||
|
||||
li {
|
||||
a {
|
||||
display: block;
|
||||
line-height: 2.4rem;
|
||||
height: 2.4rem;
|
||||
padding: 0 $layout-spacer-x 0 45px;
|
||||
position: relative;
|
||||
@include border-radius($border-radius);
|
||||
color: $gray-800;
|
||||
white-space: nowrap;
|
||||
transition: all .2s;
|
||||
margin: .1rem 0;
|
||||
|
||||
&:hover {
|
||||
background: $dropdown-link-hover-bg;
|
||||
text-decoration: none;
|
||||
|
||||
i.metismenu-icon {
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
i.metismenu-state-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.mm-active > a {
|
||||
font-weight: bold;
|
||||
|
||||
i.metismenu-state-icon {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
}
|
||||
|
||||
a.mm-active {
|
||||
color: $gray-800;
|
||||
background: $dropdown-link-hover-bg;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
i.metismenu-state-icon,
|
||||
i.metismenu-icon {
|
||||
text-align: center;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 50%;
|
||||
margin-top: -17px;
|
||||
font-size: 1.5rem;
|
||||
opacity: .3;
|
||||
transition: color 300ms;
|
||||
}
|
||||
|
||||
i.metismenu-state-icon {
|
||||
transition: transform 300ms;
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
transition: padding 300ms;
|
||||
padding: .5em 0 0 2rem;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
height: 100%;
|
||||
opacity: 1;
|
||||
width: 3px;
|
||||
background: $dropdown-link-hover-bg;
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 0;
|
||||
@include border-radius(15px);
|
||||
}
|
||||
|
||||
& > li > a {
|
||||
color: $gray-600;
|
||||
height: 2rem;
|
||||
line-height: 2rem;
|
||||
padding: 0 $layout-spacer-x 0;
|
||||
|
||||
&:hover {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.metismenu-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.mm-active {
|
||||
color: $primary;
|
||||
background: $dropdown-link-hover-bg;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
86
resources/themes/architect/src/layout/sidebar/themes/_sidebar-dark.scss
vendored
Normal file
86
resources/themes/architect/src/layout/sidebar/themes/_sidebar-dark.scss
vendored
Normal file
@@ -0,0 +1,86 @@
|
||||
// Sidebar Light
|
||||
|
||||
.app-sidebar {
|
||||
&.sidebar-text-dark {
|
||||
border-right: 0 !important;
|
||||
|
||||
.app-sidebar__heading {
|
||||
color: rgba(0, 0, 0, .6);
|
||||
|
||||
&::before {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.vertical-nav-menu {
|
||||
li {
|
||||
a {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
i.metismenu-icon {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
i.metismenu-state-icon {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
|
||||
i.metismenu-icon {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
i.metismenu-state-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.mm-active {
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
&:before {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
& > li > a {
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
|
||||
&:hover {
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
&.mm-active {
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ps__thumb-y {
|
||||
background: rgba(0, 0, 0, .3);
|
||||
}
|
||||
|
||||
.ps__rail-y:hover {
|
||||
.ps__thumb-y {
|
||||
background: rgba(0, 0, 0, .2);
|
||||
}
|
||||
}
|
||||
|
||||
.app-header__logo {
|
||||
|
||||
.hamburger-inner,
|
||||
.hamburger-inner::before,
|
||||
.hamburger-inner::after {
|
||||
background-color: rgba(0, 0, 0, .8);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
88
resources/themes/architect/src/layout/sidebar/themes/_sidebar-light.scss
vendored
Normal file
88
resources/themes/architect/src/layout/sidebar/themes/_sidebar-light.scss
vendored
Normal file
@@ -0,0 +1,88 @@
|
||||
// Sidebar Light
|
||||
|
||||
.app-sidebar {
|
||||
&.sidebar-text-light {
|
||||
border-right: 0 !important;
|
||||
|
||||
.app-sidebar__heading {
|
||||
color: rgba(255, 255, 255, .6);
|
||||
|
||||
&::before {
|
||||
background: rgba(255, 255, 255, 0.5) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.vertical-nav-menu {
|
||||
li {
|
||||
a {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
i.metismenu-icon {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
i.metismenu-state-icon {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
color: rgba(255, 255, 255, 1);
|
||||
|
||||
i.metismenu-icon {
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
i.metismenu-state-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.mm-active {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
&:before {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
& > li > a {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
|
||||
&:hover {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
&.mm-active {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ps__thumb-y {
|
||||
background: rgba(255, 255, 255, .3);
|
||||
}
|
||||
|
||||
.ps__rail-y:hover {
|
||||
.ps__thumb-y {
|
||||
background: rgba(255, 255, 255, .2);
|
||||
}
|
||||
}
|
||||
|
||||
.app-header__logo {
|
||||
.logo-src {
|
||||
}
|
||||
|
||||
.hamburger-inner,
|
||||
.hamburger-inner::before,
|
||||
.hamburger-inner::after {
|
||||
background-color: rgba(255, 255, 255, .8);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user