mirror of
https://github.com/gethinode/hinode.git
synced 2025-10-07 01:54:23 +00:00
438 lines
9.7 KiB
SCSS
438 lines
9.7 KiB
SCSS
// stylelint-disable annotation-no-unknown
|
|
|
|
// adapted from https://www.codeply.com/p/UsTEwDkzNp#
|
|
.checkbox {
|
|
opacity: 0;
|
|
position: absolute;
|
|
}
|
|
|
|
.mode-switch {
|
|
--#{$prefix}mode-switch-width: 3em;
|
|
}
|
|
|
|
.mode-switch .label {
|
|
border-color: var(--#{$prefix}border-color);
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
border-radius: var(--#{$prefix}mode-switch-width);
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 5px;
|
|
position: relative;
|
|
height: calc(1px + var(--#{$prefix}mode-switch-width) / 2);
|
|
width: var(--#{$prefix}mode-switch-width);
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
.notransition {
|
|
-webkit-transition: none !important;
|
|
-moz-transition: none !important;
|
|
-o-transition: none !important;
|
|
transition: none !important;
|
|
}
|
|
|
|
.mode-switch .label .ball {
|
|
background-color: var(--#{$prefix}border-color);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
top: 2px;
|
|
left: 2px;
|
|
height: calc((var(--#{$prefix}mode-switch-width) / 2) - 5px);
|
|
width: calc((var(--#{$prefix}mode-switch-width) / 2) - 5px);
|
|
transition: transform 0.2s linear;
|
|
}
|
|
|
|
.mode-switch .checkbox:checked + .label .ball {
|
|
transform: translateX(calc((var(--#{$prefix}mode-switch-width) / 2) - 1px));
|
|
}
|
|
|
|
@if $enable-dark-mode {
|
|
[data-bs-theme="light"] .mode-switch .ball {
|
|
transform: translateX(calc((var(--#{$prefix}mode-switch-width) / 2) - 1px));
|
|
}
|
|
}
|
|
|
|
.mode-switch .fa-moon {
|
|
color: $yellow;
|
|
transform: scale(0.8);
|
|
}
|
|
|
|
.mode-switch .fa-sun {
|
|
color: var(--#{$prefix}bs-body-color);
|
|
transform: scale(0.8);
|
|
}
|
|
|
|
.mode-toggle > input {
|
|
z-index: 1;
|
|
cursor: pointer;
|
|
height: 25px;
|
|
width: 25px;
|
|
}
|
|
|
|
.mode-toggle > label {
|
|
z-index: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
// Source: https://jsfiddle.net/njhgr40m/
|
|
|
|
@if $enable-dark-mode {
|
|
[data-bs-theme-animate="true"] .navbar {
|
|
transition: 0.5s ease-in-out;
|
|
}
|
|
}
|
|
|
|
.navbar {
|
|
--bs-navbar-expanded-color: var(--bs-body-bg);
|
|
--bs-navbar-toggler-color: var(--bs-navbar-hover-color);
|
|
|
|
background-color: transparent;
|
|
|
|
@each $state, $val in $theme-colors {
|
|
--bs-navbar-color-#{$state}: #{$val};
|
|
}
|
|
}
|
|
|
|
.navbar[data-transparent="true"] {
|
|
backdrop-filter: blur(10px);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.nav-active, .navbar-expanded {
|
|
background-color: var(--bs-navbar-expanded-color);
|
|
border-bottom: 1px solid var(--bs-secondary-bg);
|
|
}
|
|
|
|
.nav-link {
|
|
margin: 0 .15rem;
|
|
}
|
|
|
|
.navbar-title, .navbar-title-center, .navbar-title-start {
|
|
display: inline-block;
|
|
white-space: normal;
|
|
vertical-align: middle;
|
|
padding: 0 $spacer;
|
|
width: 100% !important;
|
|
}
|
|
|
|
.navbar-title, .navbar-title-center {
|
|
text-align: center !important;
|
|
}
|
|
|
|
.navbar-contrast .nav-link.active, .navbar-contrast .nav-link.show, .navbar-contrast .nav-link:hover {
|
|
border-bottom: solid 1px var(--bs-navbar-hover-color);
|
|
margin-bottom: -1px;
|
|
}
|
|
|
|
.navbar-brand {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.navbar-contrast {
|
|
--bs-navbar-color: white !important;
|
|
--bs-navbar-hover-color: white !important;
|
|
--bs-navbar-disabled-color: white !important;
|
|
--bs-navbar-active-color: white !important;
|
|
--bs-navbar-toggler-color: white;
|
|
|
|
.navbar-title, .navbar-brand, .mode-switch {
|
|
--#{$prefix}border-color: white;
|
|
|
|
color: white !important;
|
|
}
|
|
|
|
.mode-switch .fa-moon {
|
|
color: $white;
|
|
}
|
|
}
|
|
|
|
.navbar-expanded {
|
|
box-shadow: $box-shadow-sm;
|
|
min-height: 100vh;
|
|
align-items: start;
|
|
}
|
|
|
|
.navbar-expanded .navbar-collapse {
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
@each $h, $size in $font-sizes {
|
|
.navbar-fs-#{$h} {
|
|
font-size: #{$size};
|
|
}
|
|
}
|
|
|
|
@each $breakpoint in map-keys($grid-breakpoints) {
|
|
$next: breakpoint-next($breakpoint, $grid-breakpoints);
|
|
$infix: breakpoint-infix($next, $grid-breakpoints);
|
|
|
|
@if $infix != '' {
|
|
@include media-breakpoint-up($next) {
|
|
.navbar#{$infix}-fs {
|
|
font-size: inherit;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.navbar-icon {
|
|
padding-right: var(--bs-navbar-nav-link-padding-x);
|
|
padding-left: var(--bs-navbar-nav-link-padding-x);
|
|
}
|
|
|
|
.nav-item .vr {
|
|
color: var(--bs-navbar-color);
|
|
}
|
|
|
|
.navbar .nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.navbar-collapse .dropdown {
|
|
display: inline;
|
|
align-items: normal;
|
|
}
|
|
|
|
.navbar-expanded .btn {
|
|
font-size: 1em;
|
|
}
|
|
|
|
.navbar .btn {
|
|
border-radius: #{$theme-border-radius};
|
|
}
|
|
|
|
.navbar-expanded .search-input {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/* Remove border from toggler */
|
|
.navbar-toggler {
|
|
border: 0 if($enable-important-utilities, !important, null);
|
|
}
|
|
|
|
.navbar-toggler:focus,
|
|
.navbar-toggler:active,
|
|
.navbar-toggler-icon:focus {
|
|
outline: none if($enable-important-utilities, !important, null);
|
|
box-shadow: none if($enable-important-utilities, !important, null);
|
|
border: 0 if($enable-important-utilities, !important, null);
|
|
}
|
|
|
|
.fw-30 {
|
|
width: 30px !important;
|
|
}
|
|
|
|
/* Lines of the Toggler */
|
|
.toggler-icon {
|
|
width: 30px;
|
|
height: 3px;
|
|
display: block;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
/* Adds Space between the lines */
|
|
.middle-bar {
|
|
margin: 5px auto;
|
|
}
|
|
|
|
/* State when navbar is opened (START) */
|
|
.navbar-toggler .top-bar {
|
|
transform: rotate(45deg);
|
|
transform-origin: 10% 10%;
|
|
}
|
|
|
|
.navbar-toggler .middle-bar {
|
|
opacity: 0;
|
|
filter: alpha(opacity=0);
|
|
}
|
|
|
|
.navbar-toggler .bottom-bar {
|
|
transform: rotate(-45deg);
|
|
transform-origin: 10% 90%;
|
|
}
|
|
|
|
/* State when navbar is opened (END) */
|
|
|
|
/* State when navbar is collapsed (START) */
|
|
.navbar-toggler.collapsed .top-bar {
|
|
transform: rotate(0);
|
|
}
|
|
|
|
.navbar-toggler.collapsed .middle-bar {
|
|
opacity: 1;
|
|
filter: alpha(opacity=100);
|
|
}
|
|
|
|
.navbar-toggler.collapsed .bottom-bar {
|
|
transform: rotate(0);
|
|
}
|
|
|
|
/* State when navbar is collapsed (END) */
|
|
|
|
/* Color of Toggler when collapsed */
|
|
.navbar-toggler.collapsed .toggler-icon {
|
|
background-color: var(--bs-navbar-toggler-color);
|
|
}
|
|
|
|
.emphasis {
|
|
background-color: var(--bs-navbar-toggler-color);
|
|
}
|
|
|
|
@include color-mode(dark) {
|
|
.emphasis {
|
|
background-color: $white if($enable-important-utilities, !important, null);
|
|
}
|
|
}
|
|
|
|
// stylelint-enable annotation-no-unknown
|
|
|
|
.navbar .dropdown-divider-bg {
|
|
color: var(--#{$prefix}navbar-color);
|
|
}
|
|
|
|
:root {
|
|
--dropdown-horizontal-bg: var(--#{$prefix}light);
|
|
--navbar-offset: #{$navbar-offset-xs};
|
|
}
|
|
|
|
.navbar-container {
|
|
min-height: calc(2rem + 10px);
|
|
width: 100% !important;
|
|
}
|
|
|
|
@include media-breakpoint-up(#{$navbar-size}) {
|
|
:root {
|
|
--navbar-offset: #{$navbar-offset};
|
|
}
|
|
|
|
.navbar-container {
|
|
width: auto !important;
|
|
}
|
|
|
|
.navbar-title {
|
|
text-align: initial !important;
|
|
padding: 0;
|
|
}
|
|
|
|
.navbar-brand {
|
|
margin-right: var(--bs-navbar-brand-margin-end);
|
|
}
|
|
}
|
|
|
|
@if $enable-dark-mode {
|
|
@include color-mode(dark) {
|
|
--dropdown-horizontal-bg: var(--#{$prefix}tertiary-bg);
|
|
}
|
|
}
|
|
|
|
.dropdown-horizontal {
|
|
@each $breakpoint in map-keys($grid-breakpoints) {
|
|
$next: breakpoint-next($breakpoint, $grid-breakpoints);
|
|
$infix: breakpoint-infix($next, $grid-breakpoints);
|
|
|
|
@include media-breakpoint-up($next) {
|
|
&#{$infix} {
|
|
position: static !important;
|
|
}
|
|
|
|
&#{$infix} > .dropdown-menu {
|
|
opacity: 0;
|
|
display: block;
|
|
visibility: hidden;
|
|
background-color: var(--dropdown-horizontal-bg) if($enable-important-utilities, !important, null);
|
|
width: 100%;
|
|
height: auto;
|
|
text-align: center;
|
|
border-radius: 0;
|
|
border: 0;
|
|
margin-top: $dropdown-horizontal-margin-top;
|
|
padding-top: $dropdown-horizontal-padding-y;
|
|
padding-bottom: $dropdown-horizontal-padding-y;
|
|
box-shadow: 0.125rem 0.25rem rgba(0, 0, 0, .075);
|
|
|
|
@include transition($dropdown-transition);
|
|
}
|
|
|
|
&#{$infix} > .dropdown-menu.show {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
|
|
&#{$infix} > .dropdown-menu > li {
|
|
display: inline-block;
|
|
padding-left: $spacer;
|
|
padding-right: $spacer;
|
|
}
|
|
|
|
&#{$infix} > .dropdown-menu > li > a {
|
|
padding-left: .25 * $spacer;
|
|
padding-right: .25 * $spacer;
|
|
|
|
&.active,
|
|
&:hover,
|
|
&:focus {
|
|
color: var(--bs-body-color);
|
|
border-bottom: solid 1px var(--bs-navbar-hover-color);
|
|
margin-bottom: -1px;
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
&#{$infix} > .nav-link.show {
|
|
background-color: var(--dropdown-horizontal-bg) if($enable-important-utilities, !important, null);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.navbar-overlay {
|
|
position: absolute;
|
|
z-index: $zindex-fixed;
|
|
}
|
|
|
|
.form-control.is-search {
|
|
border: 1px solid var(--bs-border-color) !important;
|
|
}
|
|
|
|
.d-none-main-light, .d-none-inline-main-light {
|
|
display: none !important;
|
|
}
|
|
|
|
.d-none-main-dark {
|
|
display: block !important;
|
|
}
|
|
|
|
.d-none-inline-main-dark {
|
|
display: inline !important;
|
|
}
|
|
|
|
[data-bs-main-theme="dark"] .d-none-main-light {
|
|
display: block !important;
|
|
}
|
|
|
|
[data-bs-main-theme="dark"] .d-none-inline-main-light {
|
|
display: inline !important;
|
|
}
|
|
|
|
[data-bs-main-theme="dark"] .d-none-main-dark, [data-bs-main-theme="dark"] .d-none-inline-main-dark {
|
|
display: none !important;
|
|
}
|
|
|
|
.inline-menu li {
|
|
display: inline-block;
|
|
padding: 0.5rem;
|
|
color: var(--bs-nav-link-color);
|
|
}
|
|
|
|
.inline-menu li .active, .inline-menu li>a:hover {
|
|
box-shadow: inset 0 -1px 0 var(--bs-navbar-hover-color);
|
|
}
|
|
|
|
ul.inline-menu {
|
|
padding: 0;
|
|
}
|