From 6ff8eb6a9116ad0b788fafb44e686a66c3ce4535 Mon Sep 17 00:00:00 2001 From: Sami Mokaddem Date: Tue, 21 Mar 2023 09:45:21 +0100 Subject: [PATCH] chg: [UI:saas] Clean-up css files and improved sidebar behavior and rendering for all themes --- templates/element/layouts/sidebar/entry.php | 2 +- .../element/layouts/sidebar/sub-menu.php | 20 +-- webroot/css/layout-style.css | 139 ------------------ webroot/css/layout.css | 25 ++-- webroot/css/login.css | 2 +- webroot/css/main.css | 18 --- webroot/css/themes/theme-darkly.css | 109 +++++++++++++- webroot/css/themes/theme-default.css | 117 ++++++++++++++- webroot/css/themes/theme-flatly.css | 113 +++++++++++++- webroot/css/themes/theme-minty.css | 113 +++++++++++++- webroot/css/themes/theme-quartz.css | 109 +++++++++++++- webroot/css/themes/theme-slate.css | 109 +++++++++++++- webroot/css/themes/theme-vapor.css | 105 +++++++++++++ webroot/theme/scss/theme-darkly.scss | 4 +- webroot/theme/scss/theme-default.scss | 31 +++- webroot/theme/scss/theme-quartz.scss | 7 +- webroot/theme/scss/theme-slate.scss | 2 +- webroot/theme/scss/theme-vapor.scss | 5 + 18 files changed, 825 insertions(+), 205 deletions(-) delete mode 100644 webroot/css/layout-style.css diff --git a/templates/element/layouts/sidebar/entry.php b/templates/element/layouts/sidebar/entry.php index 9c0bdab..9e4c65c 100644 --- a/templates/element/layouts/sidebar/entry.php +++ b/templates/element/layouts/sidebar/entry.php @@ -61,7 +61,7 @@
  • diff --git a/templates/element/layouts/sidebar/sub-menu.php b/templates/element/layouts/sidebar/sub-menu.php index 5b96b62..916023e 100644 --- a/templates/element/layouts/sidebar/sub-menu.php +++ b/templates/element/layouts/sidebar/sub-menu.php @@ -2,12 +2,14 @@ $seed = $seed ?? 'sd-' . mt_rand(); ?> - +
    +
      + $child): ?> + element('layouts/sidebar/entry', [ + 'parentName' => $childName, + 'parent' => $child, + ]) + ?> + +
    +
    diff --git a/webroot/css/layout-style.css b/webroot/css/layout-style.css deleted file mode 100644 index f01a93d..0000000 --- a/webroot/css/layout-style.css +++ /dev/null @@ -1,139 +0,0 @@ -/* body.light-mode { - background-color: #f1f2f4; -} - - -body.light-mode .sub-container { - background-color: white; - box-shadow: 0 0 35px 0 rgb(154 161 171 / 15%); -} - -body.dark-mode .sub-container { - background-color: #363636; - border: 1px solid #454545; -} */ - -.sidebar { - box-shadow: 0 2px 2px 0 rgb(0 0 0 / 16%), 0 2px 6px 0 rgb(0 0 0 / 12%); -} - -.sidebar ~ main.content:after { - background:#000; -} - -.top-navbar { - box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16),0 2px 6px 0 rgba(0,0,0,0.12); -} - -.light-mode .sidebar-wrapper { - border-right: 1px solid #ddd; -} - -.light-mode .sidebar-wrapper { - border-right: 1px solid rgba(0, 0, 0, 0.125); -} - -.light-mode ul.sidebar-elements li > a.sidebar-link.active { - background-color: #ebebeb; -} -.dark-mode ul.sidebar-elements li > a.sidebar-link.active { - background-color: #375a7f; -} - -ul.sidebar-elements li > a.sidebar-link.active::after { - background-color: var(--cerebrate-color); -} - -.light-mode .sidebar ul.sidebar-elements li > a.sidebar-link.have-active-child { - background-color: #ebebeb; -} -.dark-mode .sidebar ul.sidebar-elements li > a.sidebar-link.have-active-child { - background-color: #375a7f; -} - -.sidebar.expanded ul.sidebar-elements li > a.sidebar-link.have-active-child, -.sidebar:hover ul.sidebar-elements li > a.sidebar-link.have-active-child { - background-color: unset; -} - -.sidebar ul.sidebar-elements li > a.sidebar-link.have-active-child::after { - background-color: var(--cerebrate-color); -} - -ul.sidebar-elements li > a.sidebar-link { - color: unset; -} - -.light-mode ul.sidebar-elements > li > a.sidebar-link:hover { - background-color: #f0f0f0; -} -.dark-mode ul.sidebar-elements > li > a.sidebar-link:hover { - background-color: #375a7f; -} - -/* sidebar sub-menu */ -ul.sidebar-elements li.parent > a.sidebar-link::before { - color: #bbb; -} - -ul.sidebar-elements > li ul li > a.sidebar-link:hover { - background-color: #e0e0e0; -} - -/* - Header -*/ -header.navbar-dark.top-navbar .header-menu > a:hover, -header.navbar-dark.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover { - color: #d6d6d6 !important; -} -header.navbar-light.top-navbar .header-menu > a:hover, -header.navbar-light.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover { - color: #6c757d !important; -} - -.center-navbar nav.header-breadcrumb { - color: white; -} - -.navbar-dark .center-navbar nav.header-breadcrumb li.header-breadcrumb-item a{ - color: white; -} -.navbar-light .center-navbar nav.header-breadcrumb li.header-breadcrumb-item a { - color: black; -} - -.header-breadcrumb-children { - box-shadow: - 0 1px 0 rgba(255, 255, 255, 0.07), - inset 0 -1px 2px rgba(0, 0, 0, 0.5), - inset 0 3px 5px rgba(0, 0, 0, 0.6); -} - -.navbar-dark .right-navbar .header-menu a.nav-link { - color: white; -} -.navbar-light .right-navbar .header-menu a { - color: black; -} - -.navbar-dark .left-navbar .navbar-brand img { - filter: invert(1); -} -.navbar-light .left-navbar .navbar-brand img { - filter: invert(0); -} - -.navbar-dark .left-navbar .navbar-brand:hover img { - filter: invert(1) drop-shadow(0px 0px 3px #fff); -} -.navbar-light .left-navbar .navbar-brand:hover img { - filter: invert(0) drop-shadow(0px 0px 3px #000); -} - -.navbar-light .composed-app-icon-container > .app-icon { - background-color: black; -} -.navbar-dark .composed-app-icon-container > .app-icon { - background-color: white; -} diff --git a/webroot/css/layout.css b/webroot/css/layout.css index f7f57c2..8f40e4c 100644 --- a/webroot/css/layout.css +++ b/webroot/css/layout.css @@ -352,10 +352,13 @@ ul.sidebar-elements > li > a.sidebar-link > i.sidebar-icon { .sidebar.expanded ul.sidebar-elements > li > a.sidebar-link > span.text, .sidebar:hover ul.sidebar-elements > li > a.sidebar-link > span.text { visibility: visible; + opacity: 1; } ul.sidebar-elements > li > a.sidebar-link > span.text { visibility: hidden; + opacity: 0; + transition: opacity 0.2s linear; line-height: 40px; white-space: nowrap; } @@ -363,17 +366,18 @@ ul.sidebar-elements > li > a.sidebar-link > span.text { /* sidebar sub-menu */ ul.sidebar-elements li.parent > a.sidebar-link::before { visibility: hidden; - content: "\f0d7"; + content: "\f104"; float: right; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 1rem; order: 6 !important; margin-left: auto; + transition: transform 0.3s ease-out; } ul.sidebar-elements li.parent > a.sidebar-link:not(.collapsed)::before { - content: "\f0d8"; + transform: rotate(-90deg); } .sidebar.expanded ul.sidebar-elements li.parent > a.sidebar-link::before, @@ -381,17 +385,20 @@ ul.sidebar-elements li.parent > a.sidebar-link:not(.collapsed)::before { visibility: visible; } -.sidebar.expanded ul.sidebar-elements li ul.show, -.sidebar.expanded ul.sidebar-elements li ul.collapsing, -.sidebar.expanded ul.sidebar-elements li ul.in, -.sidebar:hover ul.sidebar-elements li ul.show, -.sidebar:hover ul.sidebar-elements li ul.collapsing, -.sidebar:hover ul.sidebar-elements li ul.in { +.sidebar.expanded ul.sidebar-elements li div.show, +.sidebar.expanded ul.sidebar-elements li div.collapsing, +.sidebar.expanded ul.sidebar-elements li div.in, +.sidebar:hover ul.sidebar-elements li div.show, +.sidebar:hover ul.sidebar-elements li div.collapsing, +.sidebar:hover ul.sidebar-elements li div.in { display: block; } -ul.sidebar-elements > li ul { +.sidebar ul.sidebar-elements li div { display: none; +} + +ul.sidebar-elements > li ul { padding: 10px 0; list-style: none; line-height: 20px; diff --git a/webroot/css/login.css b/webroot/css/login.css index 7cfb32d..044e3f2 100644 --- a/webroot/css/login.css +++ b/webroot/css/login.css @@ -18,7 +18,7 @@ body { } .cerebrate-background-logo { - background-color: var(--cerebrate-color); + background-color: var(--application-color); -webkit-mask: url(/img/icon-composition/z.svg) no-repeat; mask: url(/img/icon-composition/z.svg) no-repeat; -webkit-mask-size: 400px 400px; diff --git a/webroot/css/main.css b/webroot/css/main.css index 391019d..5036657 100644 --- a/webroot/css/main.css +++ b/webroot/css/main.css @@ -1,26 +1,8 @@ -:root { - --cerebrate-color: #924da6; -} - .pagination li.page-item > a.page-link > .ellipsis { line-height: 12px; vertical-align: top; } -.footer { - position: absolute; - bottom: 0; - width: 100%; - /* Set the fixed height of the footer here */ - height: 60px; - line-height: 60px; /* Vertically center the text there */ - background-color: #f5f5f5; -} - -.black { - color:black; -} - .loading-overlay-container { backdrop-filter: blur(1px); } diff --git a/webroot/css/themes/theme-darkly.css b/webroot/css/themes/theme-darkly.css index 34e902b..8718150 100644 --- a/webroot/css/themes/theme-darkly.css +++ b/webroot/css/themes/theme-darkly.css @@ -1,3 +1,94 @@ +:root { + --bs-blue: #375a7f; + --bs-indigo: #6610f2; + --bs-purple: #6f42c1; + --bs-pink: #e83e8c; + --bs-red: #e74c3c; + --bs-orange: #fd7e14; + --bs-yellow: #f39c12; + --bs-green: #00bc8c; + --bs-teal: #20c997; + --bs-cyan: #3498db; + --bs-white: #fff; + --bs-gray: #888; + --bs-gray-dark: #303030; + --bs-gray-100: #f8f9fa; + --bs-gray-200: #ebebeb; + --bs-gray-300: #dee2e6; + --bs-gray-400: #ced4da; + --bs-gray-500: #adb5bd; + --bs-gray-600: #888; + --bs-gray-700: #444; + --bs-gray-800: #303030; + --bs-gray-900: #222; + --bs-primary: #375a7f; + --bs-secondary: #444; + --bs-success: #00bc8c; + --bs-info: #3498db; + --bs-warning: #f39c12; + --bs-danger: #e74c3c; + --bs-light: #adb5bd; + --bs-dark: #303030; + --bs-primary-rgb: 55, 90, 127; + --bs-secondary-rgb: 68, 68, 68; + --bs-success-rgb: 0, 188, 140; + --bs-info-rgb: 52, 152, 219; + --bs-warning-rgb: 243, 156, 18; + --bs-danger-rgb: 231, 76, 60; + --bs-light-rgb: 173, 181, 189; + --bs-dark-rgb: 48, 48, 48; + --bs-white-rgb: 255, 255, 255; + --bs-black-rgb: 0, 0, 0; + --bs-body-color-rgb: 255, 255, 255; + --bs-body-bg-rgb: 34, 34, 34; + --bs-font-sans-serif: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); + --bs-body-font-family: var(--bs-font-sans-serif); + --bs-body-font-size: 1rem; + --bs-body-font-weight: 400; + --bs-body-line-height: 1.5; + --bs-body-color: #fff; + --bs-body-bg: #222; +} + +.fade { + transition: opacity 0.15s linear; +} +@media (prefers-reduced-motion: reduce) { + .fade { + transition: none; + } +} +.fade:not(.show) { + opacity: 0; +} + +.collapse:not(.show) { + display: none; +} + +.collapsing { + height: 0; + overflow: hidden; + transition: height 0.35s cubic-bezier(0, 0.71, 0.58, 1); +} +@media (prefers-reduced-motion: reduce) { + .collapsing { + transition: none; + } +} +.collapsing.collapse-horizontal { + width: 0; + height: auto; + transition: width 0.35s ease; +} +@media (prefers-reduced-motion: reduce) { + .collapsing.collapse-horizontal { + transition: none; + } +} + /* Callout */ .callout { border: 1px solid 1px solid none; @@ -475,6 +566,10 @@ height: 100%; } +:root { + --application-color: #924da6; +} + /* Body */ body { background-color: var(--bs-body-bg); @@ -569,7 +664,7 @@ header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover { } .sidebar ul.sidebar-elements li > a.sidebar-link.have-active-child::after { - background-color: var(--cerebrate-color); + background-color: var(--application-color); } .sidebar ul.sidebar-elements li > a.sidebar-link:hover { @@ -587,10 +682,20 @@ header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover { background-color: #60676c; } +.sidebar ul.sidebar-elements li > a.sidebar-link.active:hover { + background-color: #50565a; + color: #fff; +} + ul.sidebar-elements li > a.sidebar-link.active::after { - background-color: var(--cerebrate-color); + background-color: var(--application-color); } .lock-sidebar > a.btn { background-color: unset; } + +.sidebar ul.sidebar-elements li ul.sub-menu { + background-color: #3e4346; + box-shadow: inset #11111a1a 0px 0px 0px 1px; +} diff --git a/webroot/css/themes/theme-default.css b/webroot/css/themes/theme-default.css index 56e4cd5..3df35cc 100644 --- a/webroot/css/themes/theme-default.css +++ b/webroot/css/themes/theme-default.css @@ -1,3 +1,94 @@ +:root { + --bs-blue: #0d6efd; + --bs-indigo: #6610f2; + --bs-purple: #6f42c1; + --bs-pink: #d63384; + --bs-red: #dc3545; + --bs-orange: #fd7e14; + --bs-yellow: #ffc107; + --bs-green: #198754; + --bs-teal: #20c997; + --bs-cyan: #0dcaf0; + --bs-white: #fff; + --bs-gray: #6c757d; + --bs-gray-dark: #343a40; + --bs-gray-100: #f8f9fa; + --bs-gray-200: #e9ecef; + --bs-gray-300: #dee2e6; + --bs-gray-400: #ced4da; + --bs-gray-500: #adb5bd; + --bs-gray-600: #6c757d; + --bs-gray-700: #495057; + --bs-gray-800: #343a40; + --bs-gray-900: #212529; + --bs-primary: #0d6efd; + --bs-secondary: #6c757d; + --bs-success: #198754; + --bs-info: #0dcaf0; + --bs-warning: #ffc107; + --bs-danger: #dc3545; + --bs-light: #f8f9fa; + --bs-dark: #212529; + --bs-primary-rgb: 13, 110, 253; + --bs-secondary-rgb: 108, 117, 125; + --bs-success-rgb: 25, 135, 84; + --bs-info-rgb: 13, 202, 240; + --bs-warning-rgb: 255, 193, 7; + --bs-danger-rgb: 220, 53, 69; + --bs-light-rgb: 248, 249, 250; + --bs-dark-rgb: 33, 37, 41; + --bs-white-rgb: 255, 255, 255; + --bs-black-rgb: 0, 0, 0; + --bs-body-color-rgb: 33, 37, 41; + --bs-body-bg-rgb: 255, 255, 255; + --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); + --bs-body-font-family: var(--bs-font-sans-serif); + --bs-body-font-size: 1rem; + --bs-body-font-weight: 400; + --bs-body-line-height: 1.5; + --bs-body-color: #212529; + --bs-body-bg: #fff; +} + +.fade { + transition: opacity 0.15s linear; +} +@media (prefers-reduced-motion: reduce) { + .fade { + transition: none; + } +} +.fade:not(.show) { + opacity: 0; +} + +.collapse:not(.show) { + display: none; +} + +.collapsing { + height: 0; + overflow: hidden; + transition: height 0.35s cubic-bezier(0, 0.71, 0.58, 1); +} +@media (prefers-reduced-motion: reduce) { + .collapsing { + transition: none; + } +} +.collapsing.collapse-horizontal { + width: 0; + height: auto; + transition: width 0.35s ease; +} +@media (prefers-reduced-motion: reduce) { + .collapsing.collapse-horizontal { + transition: none; + } +} + /* Callout */ .callout { border: 1px solid #e9ecef; @@ -475,6 +566,10 @@ height: 100%; } +:root { + --application-color: #924da6; +} + /* Body */ body { background-color: var(--bs-body-bg); @@ -559,21 +654,21 @@ header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover { } .sidebar ul.sidebar-elements li > a.sidebar-link.active { - background-color: #dbdbdb; + background-color: #dedede; color: #000; } .sidebar ul.sidebar-elements li > a.sidebar-link.have-active-child { - background-color: #dbdbdb; + background-color: #dedede; color: #000; } .sidebar ul.sidebar-elements li > a.sidebar-link.have-active-child::after { - background-color: var(--cerebrate-color); + background-color: var(--application-color); } .sidebar ul.sidebar-elements li > a.sidebar-link:hover { - background-color: #ebebeb; + background-color: lightgray; color: #000; } @@ -584,13 +679,23 @@ header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover { .sidebar.expanded ul.sidebar-elements li > a.sidebar-link.have-active-child:hover, .sidebar:hover ul.sidebar-elements li > a.sidebar-link.have-active-child:hover { - background-color: #ebebeb; + background-color: lightgray; +} + +.sidebar ul.sidebar-elements li > a.sidebar-link.active:hover { + background-color: #c8c8c8; + color: #000; } ul.sidebar-elements li > a.sidebar-link.active::after { - background-color: var(--cerebrate-color); + background-color: var(--application-color); } .lock-sidebar > a.btn { background-color: #f8f9fa; } + +.sidebar ul.sidebar-elements li ul.sub-menu { + background-color: #efefef; + box-shadow: inset #11111a1a 0px 0px 0px 1px; +} diff --git a/webroot/css/themes/theme-flatly.css b/webroot/css/themes/theme-flatly.css index b0dbfc1..84a5bb7 100644 --- a/webroot/css/themes/theme-flatly.css +++ b/webroot/css/themes/theme-flatly.css @@ -1,3 +1,94 @@ +:root { + --bs-blue: #2c3e50; + --bs-indigo: #6610f2; + --bs-purple: #6f42c1; + --bs-pink: #e83e8c; + --bs-red: #e74c3c; + --bs-orange: #fd7e14; + --bs-yellow: #f39c12; + --bs-green: #18bc9c; + --bs-teal: #20c997; + --bs-cyan: #3498db; + --bs-white: #fff; + --bs-gray: #95a5a6; + --bs-gray-dark: #343a40; + --bs-gray-100: #f8f9fa; + --bs-gray-200: #ecf0f1; + --bs-gray-300: #dee2e6; + --bs-gray-400: #ced4da; + --bs-gray-500: #b4bcc2; + --bs-gray-600: #95a5a6; + --bs-gray-700: #7b8a8b; + --bs-gray-800: #343a40; + --bs-gray-900: #212529; + --bs-primary: #2c3e50; + --bs-secondary: #95a5a6; + --bs-success: #18bc9c; + --bs-info: #3498db; + --bs-warning: #f39c12; + --bs-danger: #e74c3c; + --bs-light: #ecf0f1; + --bs-dark: #7b8a8b; + --bs-primary-rgb: 44, 62, 80; + --bs-secondary-rgb: 149, 165, 166; + --bs-success-rgb: 24, 188, 156; + --bs-info-rgb: 52, 152, 219; + --bs-warning-rgb: 243, 156, 18; + --bs-danger-rgb: 231, 76, 60; + --bs-light-rgb: 236, 240, 241; + --bs-dark-rgb: 123, 138, 139; + --bs-white-rgb: 255, 255, 255; + --bs-black-rgb: 0, 0, 0; + --bs-body-color-rgb: 33, 37, 41; + --bs-body-bg-rgb: 255, 255, 255; + --bs-font-sans-serif: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); + --bs-body-font-family: var(--bs-font-sans-serif); + --bs-body-font-size: 1rem; + --bs-body-font-weight: 400; + --bs-body-line-height: 1.5; + --bs-body-color: #212529; + --bs-body-bg: #fff; +} + +.fade { + transition: opacity 0.15s linear; +} +@media (prefers-reduced-motion: reduce) { + .fade { + transition: none; + } +} +.fade:not(.show) { + opacity: 0; +} + +.collapse:not(.show) { + display: none; +} + +.collapsing { + height: 0; + overflow: hidden; + transition: height 0.35s cubic-bezier(0, 0.71, 0.58, 1); +} +@media (prefers-reduced-motion: reduce) { + .collapsing { + transition: none; + } +} +.collapsing.collapse-horizontal { + width: 0; + height: auto; + transition: width 0.35s ease; +} +@media (prefers-reduced-motion: reduce) { + .collapsing.collapse-horizontal { + transition: none; + } +} + /* Callout */ .callout { border: 1px solid #ecf0f1; @@ -475,6 +566,10 @@ height: 100%; } +:root { + --application-color: #924da6; +} + /* Body */ body { background-color: var(--bs-body-bg); @@ -559,12 +654,12 @@ header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover { } .sidebar ul.sidebar-elements li > a.sidebar-link.active { - background-color: #dbdbdb; + background-color: #dedede; color: #18bc9c; } .sidebar ul.sidebar-elements li > a.sidebar-link.have-active-child { - background-color: #dbdbdb; + background-color: #dedede; color: #18bc9c; } @@ -573,7 +668,7 @@ header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover { } .sidebar ul.sidebar-elements li > a.sidebar-link:hover { - background-color: #ebebeb; + background-color: lightgray; color: #18bc9c; } @@ -584,7 +679,12 @@ header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover { .sidebar.expanded ul.sidebar-elements li > a.sidebar-link.have-active-child:hover, .sidebar:hover ul.sidebar-elements li > a.sidebar-link.have-active-child:hover { - background-color: #ebebeb; + background-color: lightgray; +} + +.sidebar ul.sidebar-elements li > a.sidebar-link.active:hover { + background-color: #c8c8c8; + color: #18bc9c; } ul.sidebar-elements li > a.sidebar-link.active::after { @@ -594,3 +694,8 @@ ul.sidebar-elements li > a.sidebar-link.active::after { .lock-sidebar > a.btn { background-color: unset; } + +.sidebar ul.sidebar-elements li ul.sub-menu { + background-color: #efefef; + box-shadow: inset #11111a1a 0px 0px 0px 1px; +} diff --git a/webroot/css/themes/theme-minty.css b/webroot/css/themes/theme-minty.css index 421f575..9d505f4 100644 --- a/webroot/css/themes/theme-minty.css +++ b/webroot/css/themes/theme-minty.css @@ -1,3 +1,94 @@ +:root { + --bs-blue: #2c3e50; + --bs-indigo: #6610f2; + --bs-purple: #6f42c1; + --bs-pink: #e83e8c; + --bs-red: #e74c3c; + --bs-orange: #fd7e14; + --bs-yellow: #f39c12; + --bs-green: #18bc9c; + --bs-teal: #20c997; + --bs-cyan: #3498db; + --bs-white: #fff; + --bs-gray: #95a5a6; + --bs-gray-dark: #343a40; + --bs-gray-100: #f8f9fa; + --bs-gray-200: #ecf0f1; + --bs-gray-300: #dee2e6; + --bs-gray-400: #ced4da; + --bs-gray-500: #b4bcc2; + --bs-gray-600: #95a5a6; + --bs-gray-700: #7b8a8b; + --bs-gray-800: #343a40; + --bs-gray-900: #212529; + --bs-primary: #2c3e50; + --bs-secondary: #95a5a6; + --bs-success: #18bc9c; + --bs-info: #3498db; + --bs-warning: #f39c12; + --bs-danger: #e74c3c; + --bs-light: #ecf0f1; + --bs-dark: #7b8a8b; + --bs-primary-rgb: 44, 62, 80; + --bs-secondary-rgb: 149, 165, 166; + --bs-success-rgb: 24, 188, 156; + --bs-info-rgb: 52, 152, 219; + --bs-warning-rgb: 243, 156, 18; + --bs-danger-rgb: 231, 76, 60; + --bs-light-rgb: 236, 240, 241; + --bs-dark-rgb: 123, 138, 139; + --bs-white-rgb: 255, 255, 255; + --bs-black-rgb: 0, 0, 0; + --bs-body-color-rgb: 33, 37, 41; + --bs-body-bg-rgb: 255, 255, 255; + --bs-font-sans-serif: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); + --bs-body-font-family: var(--bs-font-sans-serif); + --bs-body-font-size: 1rem; + --bs-body-font-weight: 400; + --bs-body-line-height: 1.5; + --bs-body-color: #212529; + --bs-body-bg: #fff; +} + +.fade { + transition: opacity 0.15s linear; +} +@media (prefers-reduced-motion: reduce) { + .fade { + transition: none; + } +} +.fade:not(.show) { + opacity: 0; +} + +.collapse:not(.show) { + display: none; +} + +.collapsing { + height: 0; + overflow: hidden; + transition: height 0.35s cubic-bezier(0, 0.71, 0.58, 1); +} +@media (prefers-reduced-motion: reduce) { + .collapsing { + transition: none; + } +} +.collapsing.collapse-horizontal { + width: 0; + height: auto; + transition: width 0.35s ease; +} +@media (prefers-reduced-motion: reduce) { + .collapsing.collapse-horizontal { + transition: none; + } +} + /* Callout */ .callout { border: 1px solid #ecf0f1; @@ -475,6 +566,10 @@ height: 100%; } +:root { + --application-color: #924da6; +} + /* Body */ body { background-color: var(--bs-body-bg); @@ -559,12 +654,12 @@ header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover { } .sidebar ul.sidebar-elements li > a.sidebar-link.active { - background-color: #dbdbdb; + background-color: #dedede; color: #18bc9c; } .sidebar ul.sidebar-elements li > a.sidebar-link.have-active-child { - background-color: #dbdbdb; + background-color: #dedede; color: #18bc9c; } @@ -573,7 +668,7 @@ header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover { } .sidebar ul.sidebar-elements li > a.sidebar-link:hover { - background-color: #ebebeb; + background-color: lightgray; color: #18bc9c; } @@ -584,7 +679,12 @@ header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover { .sidebar.expanded ul.sidebar-elements li > a.sidebar-link.have-active-child:hover, .sidebar:hover ul.sidebar-elements li > a.sidebar-link.have-active-child:hover { - background-color: #ebebeb; + background-color: lightgray; +} + +.sidebar ul.sidebar-elements li > a.sidebar-link.active:hover { + background-color: #c8c8c8; + color: #18bc9c; } ul.sidebar-elements li > a.sidebar-link.active::after { @@ -594,3 +694,8 @@ ul.sidebar-elements li > a.sidebar-link.active::after { .lock-sidebar > a.btn { background-color: unset; } + +.sidebar ul.sidebar-elements li ul.sub-menu { + background-color: #efefef; + box-shadow: inset #11111a1a 0px 0px 0px 1px; +} diff --git a/webroot/css/themes/theme-quartz.css b/webroot/css/themes/theme-quartz.css index 45e7268..ff4e54e 100644 --- a/webroot/css/themes/theme-quartz.css +++ b/webroot/css/themes/theme-quartz.css @@ -1,3 +1,94 @@ +:root { + --bs-blue: #3a8fd9; + --bs-indigo: #6610f2; + --bs-purple: #686dc3; + --bs-pink: #e83283; + --bs-red: #fc346f; + --bs-orange: #fd7e14; + --bs-yellow: #ffc107; + --bs-green: #41d7a7; + --bs-teal: #528fb3; + --bs-cyan: #39cbfb; + --bs-white: #fff; + --bs-gray: #6c757d; + --bs-gray-dark: #343a40; + --bs-gray-100: #f8f9fa; + --bs-gray-200: #e9e9e8; + --bs-gray-300: #dee2e6; + --bs-gray-400: #ced4da; + --bs-gray-500: #adb5bd; + --bs-gray-600: #6c757d; + --bs-gray-700: #495057; + --bs-gray-800: #343a40; + --bs-gray-900: #212529; + --bs-primary: #e83283; + --bs-secondary: rgba(255, 255, 255, 0.4); + --bs-success: #41d7a7; + --bs-info: #39cbfb; + --bs-warning: #ffc107; + --bs-danger: #fd7e14; + --bs-light: #e9e9e8; + --bs-dark: #212529; + --bs-primary-rgb: 232, 50, 131; + --bs-secondary-rgb: 255, 255, 255; + --bs-success-rgb: 65, 215, 167; + --bs-info-rgb: 57, 203, 251; + --bs-warning-rgb: 255, 193, 7; + --bs-danger-rgb: 253, 126, 20; + --bs-light-rgb: 233, 233, 232; + --bs-dark-rgb: 33, 37, 41; + --bs-white-rgb: 255, 255, 255; + --bs-black-rgb: 0, 0, 0; + --bs-body-color-rgb: 255, 255, 255; + --bs-body-bg-rgb: 104, 109, 195; + --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); + --bs-body-font-family: var(--bs-font-sans-serif); + --bs-body-font-size: 1rem; + --bs-body-font-weight: 400; + --bs-body-line-height: 1.5; + --bs-body-color: #fff; + --bs-body-bg: #686dc3; +} + +.fade { + transition: opacity 0.15s linear; +} +@media (prefers-reduced-motion: reduce) { + .fade { + transition: none; + } +} +.fade:not(.show) { + opacity: 0; +} + +.collapse:not(.show) { + display: none; +} + +.collapsing { + height: 0; + overflow: hidden; + transition: height 0.35s cubic-bezier(0, 0.71, 0.58, 1); +} +@media (prefers-reduced-motion: reduce) { + .collapsing { + transition: none; + } +} +.collapsing.collapse-horizontal { + width: 0; + height: auto; + transition: width 0.35s ease; +} +@media (prefers-reduced-motion: reduce) { + .collapsing.collapse-horizontal { + transition: none; + } +} + /* Callout */ .callout { border: 1px solid #e9e9e8; @@ -475,6 +566,10 @@ height: 100%; } +:root { + --application-color: #924da6; +} + /* Body */ .panel { background-color: transparent; @@ -564,7 +659,7 @@ header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover { } .sidebar ul.sidebar-elements li > a.sidebar-link:hover { - background-color: #fff; + background-color: rgba(255, 255, 255, 0.46); color: #343a40; } @@ -575,7 +670,12 @@ header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover { .sidebar.expanded ul.sidebar-elements li > a.sidebar-link.have-active-child:hover, .sidebar:hover ul.sidebar-elements li > a.sidebar-link.have-active-child:hover { - background-color: #fff; + background-color: rgba(255, 255, 255, 0.46); +} + +.sidebar ul.sidebar-elements li > a.sidebar-link.active:hover { + background-color: rgba(255, 255, 255, 0.58); + color: #343a40; } ul.sidebar-elements li > a.sidebar-link.active::after { @@ -586,6 +686,11 @@ ul.sidebar-elements li > a.sidebar-link.active::after { background-color: rgba(255, 255, 255, 0.4); } +.sidebar ul.sidebar-elements li ul.sub-menu { + background-color: rgba(211, 211, 211, 0.43); + box-shadow: inset #11111a1a 0px 0px 0px 1px; +} + .btn { display: inline-block; font-weight: 400; diff --git a/webroot/css/themes/theme-slate.css b/webroot/css/themes/theme-slate.css index cb59b58..7d216bc 100644 --- a/webroot/css/themes/theme-slate.css +++ b/webroot/css/themes/theme-slate.css @@ -1,3 +1,94 @@ +:root { + --bs-blue: #007bff; + --bs-indigo: #6610f2; + --bs-purple: #6f42c1; + --bs-pink: #e83e8c; + --bs-red: #ee5f5b; + --bs-orange: #fd7e14; + --bs-yellow: #f89406; + --bs-green: #62c462; + --bs-teal: #20c997; + --bs-cyan: #5bc0de; + --bs-white: #fff; + --bs-gray: #7a8288; + --bs-gray-dark: #3a3f44; + --bs-gray-100: #f8f9fa; + --bs-gray-200: #e9ecef; + --bs-gray-300: #dee2e6; + --bs-gray-400: #ced4da; + --bs-gray-500: #999; + --bs-gray-600: #7a8288; + --bs-gray-700: #52575c; + --bs-gray-800: #3a3f44; + --bs-gray-900: #272b30; + --bs-primary: #3a3f44; + --bs-secondary: #7a8288; + --bs-success: #62c462; + --bs-info: #5bc0de; + --bs-warning: #f89406; + --bs-danger: #ee5f5b; + --bs-light: #e9ecef; + --bs-dark: #272b30; + --bs-primary-rgb: 58, 63, 68; + --bs-secondary-rgb: 122, 130, 136; + --bs-success-rgb: 98, 196, 98; + --bs-info-rgb: 91, 192, 222; + --bs-warning-rgb: 248, 148, 6; + --bs-danger-rgb: 238, 95, 91; + --bs-light-rgb: 233, 236, 239; + --bs-dark-rgb: 39, 43, 48; + --bs-white-rgb: 255, 255, 255; + --bs-black-rgb: 0, 0, 0; + --bs-body-color-rgb: 170, 170, 170; + --bs-body-bg-rgb: 39, 43, 48; + --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); + --bs-body-font-family: var(--bs-font-sans-serif); + --bs-body-font-size: 1rem; + --bs-body-font-weight: 400; + --bs-body-line-height: 1.5; + --bs-body-color: #aaa; + --bs-body-bg: #272b30; +} + +.fade { + transition: opacity 0.15s linear; +} +@media (prefers-reduced-motion: reduce) { + .fade { + transition: none; + } +} +.fade:not(.show) { + opacity: 0; +} + +.collapse:not(.show) { + display: none; +} + +.collapsing { + height: 0; + overflow: hidden; + transition: height 0.35s cubic-bezier(0, 0.71, 0.58, 1); +} +@media (prefers-reduced-motion: reduce) { + .collapsing { + transition: none; + } +} +.collapsing.collapse-horizontal { + width: 0; + height: auto; + transition: width 0.35s ease; +} +@media (prefers-reduced-motion: reduce) { + .collapsing.collapse-horizontal { + transition: none; + } +} + /* Callout */ .callout { border: 1px solid #e9ecef; @@ -475,6 +566,10 @@ height: 100%; } +:root { + --application-color: #924da6; +} + /* Body */ body { background-color: var(--bs-body-bg); @@ -569,7 +664,7 @@ header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover { } .sidebar ul.sidebar-elements li > a.sidebar-link.have-active-child::after { - background-color: var(--cerebrate-color); + background-color: var(--application-color); } .sidebar ul.sidebar-elements li > a.sidebar-link:hover { @@ -587,14 +682,24 @@ header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover { background-color: #60676c; } +.sidebar ul.sidebar-elements li > a.sidebar-link.active:hover { + background-color: #50565a; + color: #fff; +} + ul.sidebar-elements li > a.sidebar-link.active::after { - background-color: var(--cerebrate-color); + background-color: var(--application-color); } .lock-sidebar > a.btn { background-color: #7a8288; } +.sidebar ul.sidebar-elements li ul.sub-menu { + background-color: #acafb2; + box-shadow: inset #11111a1a 0px 0px 0px 1px; +} + .btn { display: inline-block; font-weight: 400; diff --git a/webroot/css/themes/theme-vapor.css b/webroot/css/themes/theme-vapor.css index d44b6ca..4ae954e 100644 --- a/webroot/css/themes/theme-vapor.css +++ b/webroot/css/themes/theme-vapor.css @@ -1,3 +1,94 @@ +:root { + --bs-blue: #1ba2f6; + --bs-indigo: #6610f2; + --bs-purple: #6f42c1; + --bs-pink: #ea39b8; + --bs-red: #e44c55; + --bs-orange: #f1b633; + --bs-yellow: #ffc107; + --bs-green: #3cf281; + --bs-teal: #3f81a2; + --bs-cyan: #32fbe2; + --bs-white: #fff; + --bs-gray: #6c757d; + --bs-gray-dark: #343a40; + --bs-gray-100: #f8f9fa; + --bs-gray-200: #e9ecef; + --bs-gray-300: #dee2e6; + --bs-gray-400: #ced4da; + --bs-gray-500: #adb5bd; + --bs-gray-600: #6c757d; + --bs-gray-700: #495057; + --bs-gray-800: #343a40; + --bs-gray-900: #170229; + --bs-primary: #6f42c1; + --bs-secondary: #ea39b8; + --bs-success: #3cf281; + --bs-info: #1ba2f6; + --bs-warning: #ffc107; + --bs-danger: #e44c55; + --bs-light: #44d9e8; + --bs-dark: #170229; + --bs-primary-rgb: 111, 66, 193; + --bs-secondary-rgb: 234, 57, 184; + --bs-success-rgb: 60, 242, 129; + --bs-info-rgb: 27, 162, 246; + --bs-warning-rgb: 255, 193, 7; + --bs-danger-rgb: 228, 76, 85; + --bs-light-rgb: 68, 217, 232; + --bs-dark-rgb: 23, 2, 41; + --bs-white-rgb: 255, 255, 255; + --bs-black-rgb: 0, 0, 0; + --bs-body-color-rgb: 50, 251, 226; + --bs-body-bg-rgb: 26, 9, 51; + --bs-font-sans-serif: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); + --bs-body-font-family: var(--bs-font-sans-serif); + --bs-body-font-size: 1rem; + --bs-body-font-weight: 400; + --bs-body-line-height: 1.5; + --bs-body-color: #32fbe2; + --bs-body-bg: #1a0933; +} + +.fade { + transition: opacity 0.15s linear; +} +@media (prefers-reduced-motion: reduce) { + .fade { + transition: none; + } +} +.fade:not(.show) { + opacity: 0; +} + +.collapse:not(.show) { + display: none; +} + +.collapsing { + height: 0; + overflow: hidden; + transition: height 0.35s cubic-bezier(0, 0.71, 0.58, 1); +} +@media (prefers-reduced-motion: reduce) { + .collapsing { + transition: none; + } +} +.collapsing.collapse-horizontal { + width: 0; + height: auto; + transition: width 0.35s ease; +} +@media (prefers-reduced-motion: reduce) { + .collapsing.collapse-horizontal { + transition: none; + } +} + /* Callout */ .callout { border: 1px solid #e9ecef; @@ -475,6 +566,10 @@ height: 100%; } +:root { + --application-color: #924da6; +} + /* Body */ .panel { background-color: #363636; @@ -578,6 +673,11 @@ header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover { background-color: #495057; } +.sidebar ul.sidebar-elements li > a.sidebar-link.active:hover { + background-color: #5d6166; + color: #3cf281; +} + ul.sidebar-elements li > a.sidebar-link.active::after { background-color: #6f42c1; } @@ -585,3 +685,8 @@ ul.sidebar-elements li > a.sidebar-link.active::after { .lock-sidebar > a.btn { background-color: unset; } + +.sidebar ul.sidebar-elements li ul.sub-menu { + background-color: #230f34; + box-shadow: inset #11111a1a 0px 0px 0px 1px; +} diff --git a/webroot/theme/scss/theme-darkly.scss b/webroot/theme/scss/theme-darkly.scss index 4312b4b..56a6278 100644 --- a/webroot/theme/scss/theme-darkly.scss +++ b/webroot/theme/scss/theme-darkly.scss @@ -2,6 +2,7 @@ // $h1-font-size: 3rem; $theme: "app-darkly"; +@import "../node_modules/bootstrap/scss/functions"; @import "darkly/variables"; $bodyBackgroundBlendmode: soft-light; @@ -24,10 +25,11 @@ $sidebarTextColor: $white; $sidebarActiveColor: $nav-tabs-link-active-color; $sidebarActiveBgColor: #595f64; $sidebarHoverColor: #60676c; +$sidebarSubmenuColor: shade-color($sidebarActiveBgColor, 30%); $sidebarBorder: none; $sidebarShadows: none; $sidebarLockButton: unset; -$activeSidebarLinkColor: var(--cerebrate-color); +$activeSidebarLinkColor: var(--application-color); $calloutBorderColor: 1px solid none; diff --git a/webroot/theme/scss/theme-default.scss b/webroot/theme/scss/theme-default.scss index dc58b3d..16540dd 100644 --- a/webroot/theme/scss/theme-default.scss +++ b/webroot/theme/scss/theme-default.scss @@ -1,13 +1,18 @@ $theme: "app-default"; @import "../node_modules/bootstrap/scss/functions"; + +$transition-collapse: height .35s cubic-bezier(0, 0.71, 0.58, 1); + @import "../node_modules/bootstrap/scss/variables"; @import "../node_modules/bootstrap/scss/mixins"; +@import "../node_modules/bootstrap/scss/root"; +@import "../node_modules/bootstrap/scss/transitions"; @import "./mixins/background"; -$cerebrateColor: #924da6; -$bodyBackgroundImageStopColor: tint-color($cerebrateColor, 62) !default; +$applicationColor: #924da6; +$bodyBackgroundImageStopColor: tint-color($applicationColor, 62) !default; $enabledBackgroundSVG: true !default; $bodyBackgroundBlendmode: normal !default; @@ -26,12 +31,15 @@ $headerBreadcrumbLinksBGColor: $light !default; $sidebarBgColor: $light !default; $sidebarTextColor: $black !default; $sidebarActiveColor: $black !default; -$sidebarActiveBgColor: #dbdbdb !default; -$sidebarHoverColor: #ebebeb !default; + +$sidebarActiveBgColor: #dedede !default; +$sidebarSubmenuColor: tint-color($sidebarActiveBgColor, 50%) !default; +$sidebarHoverColor: shade-color($sidebarActiveBgColor, 5%) !default; +$sidebarHoverActiveColor: shade-color($sidebarActiveBgColor, 10%) !default; $sidebarBorder: #ddd !default; $sidebarShadows: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 2px 6px 0 rgba(0, 0, 0, 0.12) !default; $sidebarLockButton: $light !default; -$activeSidebarLinkColor: var(--cerebrate-color) !default; +$activeSidebarLinkColor: var(--application-color) !default; // $calloutBorderColor: $gray-200 !default; $calloutBgColor: $panelBgColor !default; @@ -39,6 +47,10 @@ $calloutShadow: $panelShadow !default; @import "additional/bootstrap-additional"; +:root { + --application-color: #{$applicationColor}; +} + /* Body */ body { @if $enabledBackgroundSVG { @@ -151,6 +163,10 @@ header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover { background-color: $sidebarHoverColor; } +.sidebar ul.sidebar-elements li > a.sidebar-link.active:hover { + background-color: $sidebarHoverActiveColor; + color: $sidebarActiveColor; +} ul.sidebar-elements li > a.sidebar-link.active::after { background-color: $activeSidebarLinkColor; @@ -158,4 +174,9 @@ ul.sidebar-elements li > a.sidebar-link.active::after { .lock-sidebar > a.btn { background-color: $sidebarLockButton; +} + +.sidebar ul.sidebar-elements li ul.sub-menu { + background-color: $sidebarSubmenuColor; + box-shadow: inset #11111a1a 0px 0px 0px 1px; } \ No newline at end of file diff --git a/webroot/theme/scss/theme-quartz.scss b/webroot/theme/scss/theme-quartz.scss index 92d2e3e..2e07b50 100644 --- a/webroot/theme/scss/theme-quartz.scss +++ b/webroot/theme/scss/theme-quartz.scss @@ -2,6 +2,7 @@ // $h1-font-size: 3rem; $theme: "app-slate"; +@import "../node_modules/bootstrap/scss/functions"; @import "quartz/variables"; $enabledBackgroundSVG: false; @@ -20,7 +21,11 @@ $sidebarBgColor: $secondary; $sidebarTextColor: $white; $sidebarActiveColor: $nav-tabs-link-active-color; $sidebarActiveBgColor: $nav-tabs-link-active-bg; -$sidebarHoverColor: $nav-tabs-link-active-bg; + +$sidebarSubmenuColor: shade-color($secondary, 5%); +$sidebarHoverColor: tint-color($secondary, 10%); +$sidebarHoverActiveColor: tint-color($secondary, 30%); + $sidebarBorder: none; $sidebarShadows: none; $sidebarLockButton: $secondary; diff --git a/webroot/theme/scss/theme-slate.scss b/webroot/theme/scss/theme-slate.scss index c3e3921..03d1f34 100644 --- a/webroot/theme/scss/theme-slate.scss +++ b/webroot/theme/scss/theme-slate.scss @@ -28,7 +28,7 @@ $sidebarHoverColor: #60676c; $sidebarBorder: none; $sidebarShadows: none; $sidebarLockButton: $secondary; -$activeSidebarLinkColor: var(--cerebrate-color); +$activeSidebarLinkColor: var(--application-color); @import "theme-default"; @import "../node_modules/bootstrap/scss/buttons"; diff --git a/webroot/theme/scss/theme-vapor.scss b/webroot/theme/scss/theme-vapor.scss index 4fe035d..ab701f3 100644 --- a/webroot/theme/scss/theme-vapor.scss +++ b/webroot/theme/scss/theme-vapor.scss @@ -2,6 +2,7 @@ // $h1-font-size: 3rem; $theme: "app-vapor"; +@import "../node_modules/bootstrap/scss/functions"; @import "vapor/variables"; $enabledBackgroundSVG: false; @@ -20,6 +21,10 @@ $sidebarTextColor: $white; $sidebarActiveColor: $success; $sidebarActiveBgColor: $gray-800; $sidebarHoverColor: $gray-700; + +$sidebarSubmenuColor: tint-color($dark, 5%); +$sidebarHoverActiveColor: tint-color($sidebarActiveBgColor, 20%); + $sidebarBorder: none; $sidebarShadows: none; $sidebarLockButton: unset;