-
- {% include cards/icons.html title="Tabler icons" group="tabler" %}
-
-
{% if jekyll.environment == 'production' %}
+
+ {% include cards/icons.html title="Tabler icons" group="tabler" %}
+
{% include cards/icons.html title="Brand icons" group="brand" %}
diff --git a/pages/layout-combo.html b/pages/layout-combo.html
new file mode 100644
index 000000000..e94b37eab
--- /dev/null
+++ b/pages/layout-combo.html
@@ -0,0 +1,12 @@
+---
+page-header: Combo layout
+menu: layout.combo
+layout-sidebar: true
+layout-sidebar-dark: true
+layout-navbar-hide-brand: true
+layout-navbar-hide-menu: true
+layout-navbar-class: "d-none d-lg-flex"
+layout-navbar-condensed: true
+---
+
+{% include layout/homepage.html %}
\ No newline at end of file
diff --git a/pages/layout-condensed-dark.html b/pages/layout-condensed-dark.html
new file mode 100644
index 000000000..18c7e0e2f
--- /dev/null
+++ b/pages/layout-condensed-dark.html
@@ -0,0 +1,8 @@
+---
+page-header: Condensed dark layout
+menu: layout.condensed-dark
+layout-navbar-condensed: true
+layout-navbar-dark: true
+---
+
+{% include layout/homepage.html %}
\ No newline at end of file
diff --git a/pages/layout-condensed.html b/pages/layout-condensed.html
new file mode 100644
index 000000000..d0fecf66a
--- /dev/null
+++ b/pages/layout-condensed.html
@@ -0,0 +1,7 @@
+---
+page-header: Condensed layout
+menu: layout.condensed
+layout-navbar-condensed: true
+---
+
+{% include layout/homepage.html %}
\ No newline at end of file
diff --git a/pages/layout-dark.html b/pages/layout-dark.html
new file mode 100644
index 000000000..6757b95f2
--- /dev/null
+++ b/pages/layout-dark.html
@@ -0,0 +1,7 @@
+---
+page-header: Dark mode
+menu: layout.dark-mode
+layout-dark: true
+---
+
+{% include layout/homepage.html %}
diff --git a/pages/layout-fluid-vertical.html b/pages/layout-fluid-vertical.html
new file mode 100644
index 000000000..9fa81da66
--- /dev/null
+++ b/pages/layout-fluid-vertical.html
@@ -0,0 +1,10 @@
+---
+page-header: Fluid vertical layout
+menu: layout.fluid-vertical
+layout-fluid: true
+layout-sidebar: true
+layout-sidebar-dark: true
+layout-hide-topbar: true
+---
+
+{% include layout/homepage.html %}
diff --git a/pages/layout-fluid.html b/pages/layout-fluid.html
new file mode 100644
index 000000000..3a3dfc6c3
--- /dev/null
+++ b/pages/layout-fluid.html
@@ -0,0 +1,7 @@
+---
+page-header: Fluid layout
+menu: layout.fluid
+layout-fluid: true
+---
+
+{% include layout/homepage.html %}
diff --git a/pages/layout-horizontal.html b/pages/layout-horizontal.html
new file mode 100644
index 000000000..055801999
--- /dev/null
+++ b/pages/layout-horizontal.html
@@ -0,0 +1,6 @@
+---
+page-header: Horizontal layout
+menu: layout.horizontal
+---
+
+{% include layout/homepage.html %}
\ No newline at end of file
diff --git a/pages/layout-navbar-dark.html b/pages/layout-navbar-dark.html
new file mode 100644
index 000000000..b9132dd3a
--- /dev/null
+++ b/pages/layout-navbar-dark.html
@@ -0,0 +1,7 @@
+---
+page-header: Navbar dark
+menu: layout.navbar-dark
+layout-navbar-dark: true
+---
+
+{% include layout/homepage.html %}
\ No newline at end of file
diff --git a/pages/layout-vertical-right.html b/pages/layout-vertical-right.html
new file mode 100644
index 000000000..c0e670a26
--- /dev/null
+++ b/pages/layout-vertical-right.html
@@ -0,0 +1,9 @@
+---
+page-header: Right vertical layout
+menu: layout.vertical-right
+layout-sidebar: true
+layout-sidebar-right: true
+layout-hide-topbar: true
+---
+
+{% include layout/homepage.html %}
\ No newline at end of file
diff --git a/pages/layout-vertical.html b/pages/layout-vertical.html
new file mode 100644
index 000000000..7fec1e06b
--- /dev/null
+++ b/pages/layout-vertical.html
@@ -0,0 +1,9 @@
+---
+page-header: Vertical layout
+menu: layout.vertical
+layout-sidebar: true
+layout-sidebar-dark: true
+layout-hide-topbar: true
+---
+
+{% include layout/homepage.html %}
\ No newline at end of file
diff --git a/pages/navigation.html b/pages/navigation.html
new file mode 100644
index 000000000..1d269287e
--- /dev/null
+++ b/pages/navigation.html
@@ -0,0 +1,35 @@
+---
+menu: base.navigation
+page-header: Navigation
+---
+
+
+
+
+ {% include layout/navbar.html sample=true transparent=true person-id=3 %}
+
+
+
+ {% include layout/navbar.html sample=true person-id=4 %}
+
+
+
+ {% include layout/navbar.html sample=true dark=true hide-logo=true show-title=true hide-icons=true hide-username=true person-id=5 %}
+
+
+
+ {% include layout/navbar.html sample=true dark=true small-logo=true background-color="#7952b3" hide-search=true person-id=6 %}
+
+
+
+ {% include layout/navbar.html sample=true dark=true background="primary" hide-brand=true hide-icons=true fluid-search=true hide-username=true person-id=7 %}
+
+
+
+ {% include layout/navbar.html sample=true secondary=true small-logo=true show-title=true person-id=8 %}
+
+
+
+ {% include layout/navbar.html sample=true secondary=true dark=true person-id=9 %}
+
+
\ No newline at end of file
diff --git a/scss/_dark.scss b/scss/_dark.scss
index 0d0d043a4..d4e29c41f 100644
--- a/scss/_dark.scss
+++ b/scss/_dark.scss
@@ -7,7 +7,6 @@
}
.card,
- .navbar-light,
.footer,
.modal-content,
.modal-header,
@@ -47,10 +46,6 @@
background-color: $dark-mode-darken;
}
- .navbar {
- box-shadow: 0 0 0 1px $dark-mode-darken;
- }
-
.highlight {
background-color: $dark-mode-darken;
}
diff --git a/scss/_mixins-override.scss b/scss/_mixins-override.scss
index dfbe0f567..eff3401b1 100644
--- a/scss/_mixins-override.scss
+++ b/scss/_mixins-override.scss
@@ -13,6 +13,7 @@
height: $caret-width;
border-bottom: 1px solid;
border-left: 1px solid;
+ margin-right: .1em;
@if $direction != 'left' {
margin-left: $caret-spacing;
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 5468d85ab..f8c00c389 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -2,15 +2,24 @@
$assets-base: ".." !default;
// FONTS
-$google-font: "Source Sans Pro" !default;
+$google-font: "Ubuntu" !default;
-$font-family-sans-serif: $google-font, -apple-system, blinkmacsystemfont, segoe ui, helvetica, arial, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol !default;
+$font-family-sans-serif: $google-font, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !default;
$font-family-monospace: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
$font-family-serif: "Georgia", "Times New Roman", times, serif !default;
// EXTERNAL FONTS
$icon-fonts: () !default;
+//Fonts
+$font-size-base: .875rem !default;
+$font-weight-bold: 500 !default;
+$body-letter-spacing: -.01em !default;
+
+$line-height-base: (1.5rem/$font-size-base) !default;
+$line-height-sm: 1.3333334 !default;
+$line-height-lg: 2.1333334 !default;
+
// COLORS
$theme-color-interval: 10% !default;
$min-contrast-ratio: 1.5 !default;
@@ -54,10 +63,10 @@ $white: #ffffff !default;
$body-bg: $light !default;
$body-color: $dark !default;
-$text-muted-opacity: .60 !default;
+$text-muted-opacity: .72 !default; //Perfect color for AA
$text-muted: mix($body-color, #ffffff, $text-muted-opacity * 100%) !default;
-$border-color: rgba($text-muted, .24) !default;
-$border-color-light: rgba($text-muted, .12) !default;
+$border-color: rgba($text-muted, .2) !default;
+$border-color-light: rgba($text-muted, .1) !default;
$active-bg: rgba($blue, .06) !default;
$hover-bg: rgba($text-muted, .06) !default;
@@ -122,14 +131,6 @@ $avatar-sizes: (
"xl": 6rem
) !default;
-//Fonts
-$font-size-base: .9375rem !default;
-$font-weight-bold: 600 !default;
-$body-letter-spacing: null !default;
-
-$line-height-base: 1.6 !default;
-$line-height-sm: 1.3333334 !default;
-$line-height-lg: 2.1333334 !default;
$link-decoration: none !default;
@@ -142,19 +143,19 @@ $headings-font-weight: $font-weight-bold !default;
$small-font-size: 87.5% !default;
-$h1-font-size: (26rem / 16) !default;
+$h1-font-size: (28rem / 16) !default;
$h2-font-size: (22rem / 16) !default;
$h3-font-size: (18rem / 16) !default;
-$h4-font-size: (15rem / 16) !default;
-$h5-font-size: (13rem / 16) !default;
-$h6-font-size: (11rem / 16) !default;
+$h4-font-size: $font-size-base !default;
+$h5-font-size: (12rem / 16) !default;
+$h6-font-size: (10rem / 16) !default;
-$blockquote-font-size: $h4-font-size !default;
+$blockquote-font-size: $font-size-base !default;
$code-font-size: $h6-font-size !default;
$code-color: $primary !default;
-$lead-font-size: $h4-font-size !default;
+$lead-font-size: $font-size-base !default;
$lead-font-weight: 400 !default;
$hr-opacity: .1 !default;
@@ -169,11 +170,9 @@ $spacers: (
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
- 4: $spacer * 1.25,
- 5: $spacer * 2,
- 6: $spacer * 3,
- 7: $spacer * 6,
- 8: $spacer * 9,
+ 4: $spacer * 1.5,
+ 5: $spacer * 3,
+ 6: $spacer * 4.5
) !default;
$size-spacers: (
@@ -238,7 +237,6 @@ $embed-responsive-aspect-ratios: (
$content-padding-y: 1.25rem !default;
-
//alerts
$alert-link-font-weight: $font-weight-bold !default;
$alert-bg-level: -8 !default;
@@ -253,6 +251,9 @@ $breadcrumb-variants: (
) !default;
//badges
+$badge-padding-y: .125rem !default;
+$badge-padding-x: .25rem !default;
+$badge-font-size: $h6-font-size !default;
$badge-font-weight: $font-weight-bold !default;
$badge-empty-size: .5rem !default;
@@ -277,7 +278,7 @@ $input-focus-color: inherit !default;
//buttons
$btn-padding-x: 1rem !default;
-$btn-font-weight: 500 !default;
+$btn-font-weight: $font-weight-bold !default;
$btn-border-radius: 3px !default;
//cards
@@ -307,14 +308,13 @@ $carousel-control-prev-icon-bg: url("data:image/svg+xml,
") !default;
-
//close
$close-font-weight: 400 !default;
$close-font-size: 1.5rem !default;
//dropdown
$dropdown-item-padding-x: 1rem !default;
-$dropdown-font-size: $h4-font-size !default;
+$dropdown-font-size: $font-size-base !default;
$dropdown-divider-bg: $border-color !default;
$dropdown-padding-y: .5rem !default;
$dropdown-link-hover-bg: $hover-bg !default;
@@ -330,6 +330,7 @@ $dropdown-menu-max-width: 25rem !default;
//grid
$grid-gutter-width: 1.5rem !default;
+$container-padding-x: .75rem !default;
//loader
$loader-size: 2.5rem !default;
@@ -363,29 +364,41 @@ $modal-lg: 720px !default;
$modal-md: 540px !default;
$modal-sm: 380px !default;
+//nav
+$nav-link-padding-y: .25rem !default;
+$nav-link-padding-x: .75rem !default;
+
//navbar
-$navbar-padding-y: .5rem !default;
$navbar-height: 3.5rem !default;
-$navbar-border-color: $border-color !default;
+$navbar-padding-y: .25rem !default;
+
+$navbar-light-color: rgba($body-color, $text-muted-opacity) !default;
+$navbar-light-brand-color: $body-color !default;
+$navbar-light-active-color: $body-color !default;
+$navbar-light-disabled-color: rgba($body-color, .3) !default;
+
+$navbar-dark-color: rgba($white, $text-muted-opacity) !default;
+$navbar-dark-brand-color: $white !default;
+$navbar-dark-active-color: $white !default;
+$navbar-dark-disabled-color: rgba($white, .3) !default;
+
+
+$navbar-brand-padding-y: $nav-link-padding-y !default;
+$navbar-brand-image-height: 2rem !default;
+$navbar-brand-margin-right: 0 !default;
+$navbar-brand-font-size: $h3-font-size !default;
+$navbar-brand-font-weight: $font-weight-bold !default;
-$navbar-toggler-padding-y: .75rem !default;
-$navbar-toggler-padding-x: .75rem !default;
-$navbar-toggler-margin: -.75rem !default;
$navbar-toggler-font-size: 1rem !default;
-$navbar-toggler-size: 1.5rem !default;
-$navbar-toggler-item-height: 2px !default;
-$navbar-toggler-item-spacing: 7px !default;
-$navbar-toggler-transform-time: .2s !default;
+$navbar-toggler-padding-x: 0 !default;
+$navbar-toggler-padding-y: 0 !default;
+$navbar-toggler-animation-time: .2s !default;
+$navbar-toggler-focus-width: 0 !default;
-//sidenav
-$navbar-vertical-width: 15.625rem !default;
-$navbar-vertical-narrow-width: 4rem !default;
-$navbar-vertical-dark-bg: $dark !default;
-$navbar-vertical-dark-color: $white !default;
-$navbar-vertical-padding: 1rem !default;
-$navbar-vertical-active-accent-color: $primary !default;
+$navbar-nav-link-padding-x: $nav-link-padding-x !default;
-$navbar-nav-link-padding-x: .75rem !default;
+//sidebar
+$sidebar-width: 15rem !default;
//popover
$popover-border-color: $border-color !default;
@@ -481,7 +494,7 @@ $form-range-thumb-focus-box-shadow-width: .125rem !default;
$form-feedback-icon-valid: str-replace(url("data:image/svg+xml,
"), "#", "%23") !default;
$form-feedback-icon-invalid: str-replace(url("data:image/svg+xml,
"), "#", "%23") !default;
-$caret-width: .32em !default;
+$caret-width: .36em !default;
//Flags
$generate-flags: true !default;
diff --git a/scss/fonts/_webfonts.scss b/scss/fonts/_webfonts.scss
index 8bc416a7e..a97c7a68e 100644
--- a/scss/fonts/_webfonts.scss
+++ b/scss/fonts/_webfonts.scss
@@ -1,5 +1,5 @@
@if $google-font {
- $google-font-url: "https://fonts.googleapis.com/css?family=" + str-replace($google-font, " ", "+") + ":300,400,500,600,700&display=swap" !default;
+ $google-font-url: "https://fonts.googleapis.com/css2?family=" + str-replace($google-font, " ", "+") + ":wght@300;400;500;600;700&display=swap" !default;
@import url($google-font-url);
}
diff --git a/scss/layout/_core.scss b/scss/layout/_core.scss
index f9fb15dea..da724c052 100644
--- a/scss/layout/_core.scss
+++ b/scss/layout/_core.scss
@@ -10,6 +10,7 @@ body {
touch-action: manipulation;
text-rendering: optimizeLegibility;
font-feature-settings: "liga" 0;
+ position: relative;
.content * {
@include scrollbar;
diff --git a/scss/layout/_navbar.scss b/scss/layout/_navbar.scss
index d481d7ec6..88b1d4bdc 100644
--- a/scss/layout/_navbar.scss
+++ b/scss/layout/_navbar.scss
@@ -1,314 +1,30 @@
-/*
-Horizontal navbar
- */
-@mixin navbar-horizontal {
- .d-none-navbar-horizontal,
- ~ * .d-none-navbar-vertical-narrow {
- display: none !important;
- }
+@mixin navbar-color($bg-color: transparent, $color: $navbar-light-color, $brand-color: $navbar-light-brand-color, $link-active-color: $navbar-light-active-color, $link-disabled-color: $navbar-light-disabled-color) {
+ background: $bg-color;
+ color: $color;
- .dropdown-menu {
- margin-right: -.25rem;
- }
-}
-
-/*
-Vertical narrow navbar
- */
-@mixin navbar-vertical-narrow {
- width: $navbar-vertical-narrow-width;
- overflow: visible;
-
- .d-none-navbar-vertical-narrow,
- ~ * .d-none-navbar-vertical-narrow {
- display: none !important;
- }
-
- .navbar-nav {
- margin-top: 0;
- }
-
- .nav-link {
- height: 3rem; //todo: to variable
- }
-
- .nav-link-title,
- .navbar-heading {
- display: none;
- }
-
- .nav-link-icon {
- margin: 0 auto;
- font-size: 1.125rem;
- width: 1.125rem;
- height: 1.125rem;
- }
-
- .navbar-brand-logo-large {
- display: none;
- }
-
- .navbar-brand-logo-small {
- display: inline-block;
- }
-
- ~ .navbar,
- ~ .content {
- margin-left: $navbar-vertical-narrow-width;
- }
-
- .dropdown-toggle:after {
- content: none;
- }
-
- .dropdown-menu {
- left: 100%;
- top: 0;
- margin: 0 0 0 -4px;
-
- &:before,
- &:after {
- content: none;
- }
-
- &.dropdown-menu-right {
- top: auto;
- bottom: 0;
- right: auto;
- }
- }
-
- &.navbar-right {
- ~ .navbar,
- ~ .content {
- margin-left: 0;
- margin-right: $navbar-vertical-narrow-width;
- }
-
- .dropdown-menu {
- margin: 0 -4px 0 0;
- left: auto;
- right: 100%;
- }
- }
-}
-
-/*
-Vertical navbar
- */
-@mixin navbar-vertical {
- position: fixed;
- left: 0;
- top: 0;
- bottom: 0;
- width: $navbar-vertical-width;
- z-index: $zindex-fixed;
- min-height: auto;
- align-items: start;
- overflow: auto;
-
- > [class*="container"] {
- flex-direction: column;
- align-items: stretch;
- padding-left: 0;
- padding-right: 0;
- min-height: 100%;
- }
-
- ~ .navbar,
- ~ .content {
- margin-left: $navbar-vertical-width;
-
- [class*="container"] {
- padding-left: $cards-grid-gap;
- padding-right: $cards-grid-gap;
- }
- }
-
- .d-none-navbar-vertical,
- ~ * .d-none-navbar-vertical {
- display: none !important;
- }
+ @include scrollbar;
.navbar-brand {
- display: flex;
- width: 100%;
- margin: 0;
- text-align: center;
- height: $navbar-height;
- align-items: center;
- justify-content: center;
- }
+ color: $brand-color;
- .navbar-heading {
- @include subheader();
- display: block;
- margin-bottom: .5rem;
- }
-
- .navbar-collapse {
- flex-direction: column;
- text-align: left;
- align-items: normal;
-
- padding: $navbar-vertical-padding $navbar-vertical-padding;
+ &:hover,
+ &:focus {
+ color: $brand-color;
+ opacity: .8;
+ }
}
.navbar-nav {
- flex-direction: column;
- align-items: normal;
- margin-left: -($navbar-vertical-padding);
- margin-right: -($navbar-vertical-padding);
-
.nav-link {
- min-height: 0;
- height: 2.5rem;
- padding-left: $navbar-vertical-padding;
- padding-right: $navbar-vertical-padding;
- justify-content: start;
- }
+ color: $color;
- .nav-item {
- &.active {
- font-weight: 600;
-
- >.nav-link:before {
- left: 0;
- right: auto;
- top: 0;
- bottom: 0;
- height: auto;
- width: 2px;
- }
- }
- }
- }
-
- .navbar-side {
- margin-left: 0;
- margin-top: auto;
- padding-left: 0;
- padding-top: $navbar-vertical-padding;
-
- > * {
- margin-left: 0;
- margin-top: 1rem;
- }
- }
-
- &.navbar-right {
- left: auto;
- right: 0;
-
- ~ .navbar,
- ~ .content {
- margin-left: 0;
- margin-right: $navbar-vertical-width;
- }
- }
-
- &:not(.navbar-vertical-narrow) {
- .d-none-navbar-vertical-wide,
- ~ * .d-none-navbar-vertical-wide {
- display: none !important;
- }
-
- .nav-item.active>.dropdown-menu {
- display: block;
- }
-
- .dropdown-menu {
- position: static;
- background: inherit;
- border: 0;
- box-shadow: none;
- padding: 0;
- margin: 0;
- color: inherit;
- columns: 1;
-
- &:before,
- &:after {
- content: none;
- }
- }
-
- .dropdown-item {
- padding-left: add($navbar-vertical-padding, 1.5rem);
- opacity: $text-muted-opacity;
- color: inherit;
- background: transparent;
-
- &.active {
- font-weight: 600;
- opacity: 1;
- }
-
- &:hover {
- opacity: 1;
- }
- }
-
- .dropdown-toggle:after {
- margin-left: auto;
- }
- }
-
- &.navbar-vertical-narrow {
- @include navbar-vertical-narrow;
- }
-}
-
-/*
-All navbars
- */
-.navbar {
- padding-top: 0;
- padding-bottom: 0;
- min-height: $navbar-height;
- box-shadow: 0 0 0 1px $border-color;
- z-index: $zindex-fixed;
-
- @media print {
- display: none;
- margin: 0 !important;
- }
-
- .nav-link {
- line-height: 1;
- min-width: 2rem;
- min-height: 2rem;
- position: relative;
- user-select: none;
- text-align: center;
- }
-
- .nav-link-icon {
- font-size: 1rem;
- width: 1rem;
- height: 1rem;
- display: block;
- margin-right: .5rem;
- line-height: .99;
- }
-
- .navbar-nav {
- align-items: center;
-
- .nav-link {
- color: inherit;
- opacity: $text-muted-opacity;
- transition: .3s opacity;
- justify-content: center;
-
- &:hover {
- color: inherit;
- opacity: 1;
+ &:hover,
+ &:focus {
+ color: $link-active-color;
}
&.disabled {
- color: inherit;
- opacity: $text-muted-opacity / 3;
+ color: $link-disabled-color;
}
}
@@ -316,21 +32,171 @@ All navbars
.active > .nav-link,
.nav-link.show,
.nav-link.active {
+ color: $link-active-color;
+ }
+ }
+
+ .navbar-toggler {
+ color: $brand-color;
+ border-color: transparent;
+ }
+
+ .navbar-text {
+ color: $color;
+
+ a,
+ a:hover,
+ a:focus {
+ color: $color;
+ }
+ }
+}
+
+@mixin navbar-dark {
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, .1);
+ @include navbar-color($dark, $navbar-dark-color, $navbar-dark-brand-color, $navbar-dark-active-color, $navbar-dark-disabled-color);
+ @include scrollbar(true);
+
+ .input-icon-addon {
+ color: rgba($dark-mode-text, .64);
+ }
+
+ .form-control {
+ border-color: transparent;
+ background-color: rgba(0, 0, 0, .1);
+
+ &::placeholder {
+ color: rgba($dark-mode-text, .64);
+ }
+ }
+}
+
+@mixin navbar-vertical-nav {
+ .navbar-collapse {
+ flex-direction: column;
+
+ [class*="container"] {
+ flex-direction: column;
+ align-items: stretch;
+ }
+
+ .navbar-nav {
+ margin-left: -($container-padding-x);
+ margin-right: -($container-padding-x);
+
+ .nav-link {
+ padding: .5rem $container-padding-x;
+ justify-content: flex-start;
+ }
+ }
+
+ .dropdown-menu {
+ padding: 0;
+ background: transparent;
+ position: static;
color: inherit;
- opacity: 1;
+ box-shadow: none;
+ border: none;
+ columns: 1;
+ min-width: 0;
+
+ .dropdown-item {
+ min-width: 0;
+ display: flex;
+ width: auto;
+ padding-left: add($container-padding-x, 1.5rem);
+ }
+ }
+
+ .dropdown-toggle:after {
+ margin-left: auto;
+ }
+
+ .nav-item.active:after {
+ border-bottom-width: 0;
+ border-left-width: 2px;
+ right: auto;
+ top: 0;
+ bottom: 0;
+ }
+ }
+}
+
+/**
+Navbar
+ */
+.navbar {
+ min-height: $navbar-height;
+ align-items: stretch;
+
+ @include navbar-color();
+
+ @include dark-mode {
+ @include navbar-dark();
+ }
+
+ .dropdown-menu {
+ position: absolute;
+ }
+
+ .navbar-nav {
+ min-height: subtract($navbar-height, 2 * $navbar-padding-y);
+
+ .nav-link {
+ position: relative;
+ min-width: 2rem;
+ min-height: 2rem;
+ justify-content: center;
+
+ .badge {
+ position: absolute;
+ top: .375rem;
+ right: .375rem;
+ transform: translate(50%, -50%);
+ }
}
}
}
.navbar-expand {
- @each $breakpoint, $breakpoint-max-width in $grid-breakpoints {
- &-#{$breakpoint} {
- @include media-breakpoint-up($breakpoint) {
- .navbar-nav {
- margin-left: (-$navbar-nav-link-padding-x);
+ @each $breakpoint in map-keys($grid-breakpoints) {
+ $next: breakpoint-next($breakpoint, $grid-breakpoints);
+ $infix: breakpoint-infix($next, $grid-breakpoints);
- .nav-item {
+ {$infix} {
+ @include media-breakpoint-down($breakpoint) {
+ @include navbar-vertical-nav;
+ }
+
+ @include media-breakpoint-up($next) {
+ .navbar-collapse {
+ width: auto;
+ flex: 1 1 auto;
+ }
+
+ &.navbar-dark,
+ .navbar-dark {
+ .nav-item.active {
+ .nav-link {
+ background-color: rgba(#000, .1);
+ }
+ }
+ }
+
+ &.navbar-light,
+ .navbar-light {
+ .nav-item.active {
position: relative;
+
+ &:after {
+ content: '';
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: subtract(-.25rem, 1px);
+ border: 0 solid $primary;
+ border-bottom-width: 2px;
+ }
}
}
}
@@ -338,88 +204,189 @@ All navbars
}
}
-.navbar-side {
- margin-left: auto;
- padding-left: 1.5rem;
-
- > * {
- margin-left: 1rem;
- }
-}
-
-.navbar-heading {
- display: none;
-}
-
/**
Navbar brand
*/
.navbar-brand {
- padding: 0; //todo: move to varaibles
+ display: inline-flex;
+ align-items: center;
+ font-weight: $navbar-brand-font-weight;
}
-.navbar-brand-logo {
- height: 2rem;
+.navbar-brand-image {
+ display: block;
+ height: $navbar-brand-image-height;
}
-.navbar-brand-logo-small {
- display: none;
+/**
+Navbar toggler
+ */
+.navbar-toggler {
+ border: 0;
+ width: $navbar-brand-image-height;
+ height: $navbar-brand-image-height;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
+.navbar-toggler-icon {
+ height: 2px;
+ width: 1.25em;
+ background: currentColor;
+ border-radius: 10px;
+ transition: $navbar-toggler-animation-time $navbar-toggler-animation-time top, $navbar-toggler-animation-time $navbar-toggler-animation-time bottom, $navbar-toggler-animation-time transform, 0s $navbar-toggler-animation-time opacity;
+ position: relative;
+
+ &:before,
+ &:after {
+ content: '';
+ display: block;
+ height: inherit;
+ width: inherit;
+ border-radius: inherit;
+ background: inherit;
+ position: absolute;
+ left: 0;
+ transition: inherit;
+ }
+
+ &:before {
+ top: -.45em;
+ }
+
+ &:after {
+ bottom: -.45em;
+ }
+
+ .navbar-toggler[aria-expanded="true"] & {
+ transform: rotate(45deg);
+ transition: .3s top, .3s bottom, .3s .3s transform, 0s .3s opacity;
+
+ &:before {
+ top: 0;
+ transform: rotate(-90deg);
+ }
+
+ &:after {
+ bottom: 0;
+ opacity: 0;
+ }
+ }
+}
+
+/**
+Navbar light
+ */
.navbar-light {
- background: $white;
- @include scrollbar;
+ box-shadow: 0 0 0 1px $border-color;
+ background-color: $white;
}
+/**
+Navbar dark
+ */
.navbar-dark {
- background: $navbar-vertical-dark-bg;
- color: $navbar-vertical-dark-color;
- box-shadow: 0 0 0 1px $dark-mode-darken;
- @include scrollbar(true);
+ @include navbar-dark;
+}
- .text-muted {
- color: inherit !important;
- opacity: $text-muted-opacity;
- }
+/**
+Navbar nav
+ */
+.navbar-nav {
+ align-items: stretch;
- .navbar-brand-autodark {
- @include autodark-image;
+ .nav-item {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
}
+}
- .form-control {
- border-color: transparent;
- background: $dark-mode-lighten;
- color: $white;
- }
+/**
+Navbar side
+ */
+.navbar-side {
+ margin: 0;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-around;
}
/**
Navbar vertical
*/
@if $enable-navbar-vertical {
- .navbar:not(.navbar-vertical) {
- @include navbar-horizontal;
- }
-
.navbar-vertical {
- @each $breakpoint, $breakpoint-max-width in $grid-breakpoints {
- &.navbar-expand-#{$breakpoint} {
- @include media-breakpoint-up($breakpoint) {
- @include navbar-vertical;
- }
+ &.navbar-expand {
+ @each $breakpoint in map-keys($grid-breakpoints) {
+ $next: breakpoint-next($breakpoint, $grid-breakpoints);
+ $infix: breakpoint-infix($next, $grid-breakpoints);
- @include media-breakpoint-down-than($breakpoint) {
- @include navbar-horizontal;
+ {$infix} {
+ @include media-breakpoint-up($next) {
+ width: $sidebar-width;
+ position: fixed;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ z-index: $zindex-fixed;
+ align-items: flex-start;
+ transition: .3s transform;
+ overflow-x: auto;
+
+ &.navbar-right {
+ left: auto;
+ right: 0;
+ }
+
+ .navbar-brand {
+ padding: (($navbar-height - $navbar-brand-image-height) / 2) 0;
+ justify-content: center;
+ }
+
+ .navbar-collapse {
+ align-items: stretch;
+ }
+
+ .navbar-nav {
+ flex-direction: column;
+ flex-grow: 1;
+ min-height: auto;
+
+ .nav-link {
+ padding-top: .5rem;
+ padding-bottom: .5rem;
+ }
+ }
+
+ > [class*="container"] {
+ flex-direction: column;
+ align-items: stretch;
+ min-height: 100%;
+ justify-content: flex-start;
+ }
+
+ ~ .page {
+ padding-left: $sidebar-width;
+
+ [class*="container"] {
+ padding-left: 1.5rem;
+ padding-right: 1.5rem;
+ }
+ }
+
+ &.navbar-right ~ .page {
+ padding-left: 0;
+ padding-right: $sidebar-width;
+ }
+
+ @include navbar-vertical-nav;
+ }
}
}
}
}
-}
-
-/**
-Navbar secondary
- */
-.navbar-secondary {
- order: -1;
- z-index: $zindex-fixed + 10;
-}
+}
\ No newline at end of file
diff --git a/scss/mixins/_mixins.scss b/scss/mixins/_mixins.scss
index d7e8a970e..338410143 100644
--- a/scss/mixins/_mixins.scss
+++ b/scss/mixins/_mixins.scss
@@ -34,7 +34,7 @@
background: $gray-500;
@if ($is-dark) {
- background: mix(#fff, $dark, 20%);
+ background: mix(#ffffff, $dark, 20%);
} @else {
background: $gray-500;
}
@@ -48,15 +48,29 @@
@mixin dark-mode {
@if $enable-dark-mode {
+ $selector: &;
+
@media not print {
- .theme-dark {
- @content
+ @if ($selector) {
+ .theme-dark & {
+ @content
+ }
+ } @else {
+ .theme-dark {
+ @content
+ }
}
}
@media not print and (prefers-color-scheme: dark) {
- .theme-dark-auto {
- @content
+ @if ($selector) {
+ .theme-dark-auto & {
+ @content
+ }
+ } @else {
+ .theme-dark-auto {
+ @content
+ }
}
}
}
diff --git a/scss/ui/_badges.scss b/scss/ui/_badges.scss
index f1b7193a3..743825a81 100644
--- a/scss/ui/_badges.scss
+++ b/scss/ui/_badges.scss
@@ -2,11 +2,10 @@
@include subheader(false);
display: inline-flex;
justify-content: center;
- padding: 0 .5em;
- line-height: 1.75em;
background: $gray-500;
overflow: hidden;
vertical-align: text-bottom;
+ user-select: none;
@at-root a#{&} {
color: $white;
diff --git a/scss/ui/_buttons.scss b/scss/ui/_buttons.scss
index 8e7e99233..743e8918d 100644
--- a/scss/ui/_buttons.scss
+++ b/scss/ui/_buttons.scss
@@ -1,5 +1,5 @@
.btn {
- font-weight: 600;
+ font-weight: $btn-font-weight;
display: inline-flex;
align-items: center;
justify-content: center;
diff --git a/scss/ui/_dropdowns.scss b/scss/ui/_dropdowns.scss
index 4eed962a4..1f1546852 100644
--- a/scss/ui/_dropdowns.scss
+++ b/scss/ui/_dropdowns.scss
@@ -23,8 +23,8 @@
}
.dropdown-item-icon {
- width: 1rem;
- font-size: 1rem;
+ width: 1rem !important;
+ font-size: 1rem !important;
margin-right: .5rem;
opacity: .64;
text-align: center;
diff --git a/scss/ui/_forms.scss b/scss/ui/_forms.scss
index a84335193..d14d57c80 100644
--- a/scss/ui/_forms.scss
+++ b/scss/ui/_forms.scss
@@ -81,6 +81,22 @@ Form control
border-color: transparent;
}
+.form-control-dark {
+ background-color: rgba($black, .1);
+ color: $white;
+ border-color: transparent;
+
+ &:focus {
+ background-color: rgba($black, .1);
+ box-shadow: none;
+ border-color: rgba($white, .24);
+ }
+
+ &::placeholder {
+ color: rgba($white, .6);
+ }
+}
+
.form-control-rounded {
border-radius: 10rem;
}
@@ -111,7 +127,7 @@ Form help
*/
.form-help {
display: inline-flex;
- font-weight: 600;
+ font-weight: $font-weight-bold;
align-items: center;
justify-content: center;
width: 1.125rem;
diff --git a/scss/ui/_markdown.scss b/scss/ui/_markdown.scss
index 8da001839..5bf5b5335 100644
--- a/scss/ui/_markdown.scss
+++ b/scss/ui/_markdown.scss
@@ -2,11 +2,6 @@
Markdown
*/
.markdown {
-
- @include media-breakpoint-up(md) {
- font-size: 1rem;
- }
-
> :first-child {
margin-top: 0;
}
diff --git a/scss/ui/_nav.scss b/scss/ui/_nav.scss
index baec75e18..0e7705ed0 100644
--- a/scss/ui/_nav.scss
+++ b/scss/ui/_nav.scss
@@ -50,7 +50,23 @@
}
.nav-link {
+ border-radius: $border-radius;
display: flex;
- align-items: center;
transition: .3s color;
+ align-items: center;
+
+ .icon {
+ display: inline-block;
+ font-size: 1rem;
+ }
}
+
+.nav-link-icon {
+ width: 1.25rem;
+ height: 1rem;
+ font-size: 1rem;
+
+ .icon {
+ display: block;
+ }
+}
\ No newline at end of file