diff --git a/embark-ui/src/dark-theme/_animate.scss b/embark-ui/src/dark-theme/_animate.scss new file mode 100644 index 00000000..c0a244ba --- /dev/null +++ b/embark-ui/src/dark-theme/_animate.scss @@ -0,0 +1,27 @@ +// scss-lint:disable all +.animated { + animation-duration: 1s; + // animation-fill-mode: both; +} + +.animated.infinite { + animation-iteration-count: infinite; +} + +.animated.hinge { + animation-duration: 2s; +} + +@keyframes fadeIn { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} + +.fadeIn { + animation-name: fadeIn; +} diff --git a/embark-ui/src/dark-theme/_aside.scss b/embark-ui/src/dark-theme/_aside.scss new file mode 100644 index 00000000..556edf0c --- /dev/null +++ b/embark-ui/src/dark-theme/_aside.scss @@ -0,0 +1,65 @@ +.aside-menu { + z-index: $zindex-sticky - 1; + width: $aside-menu-width; + color: $aside-menu-color; + background: $aside-menu-bg; + @include borders($aside-menu-borders); + + .nav-tabs { + border-color: $border-color; + .nav-link { + padding: $aside-menu-nav-padding-y $aside-menu-nav-padding-x; + color: $body-color; + border-top: 0; + @include border-radius(0); + &.active { + color: theme-color("primary"); + border-right-color: $border-color; + border-left-color: $border-color; + } + } + .nav-item:first-child { + .nav-link { + border-left: 0; + } + } + } + + .tab-content { + position: relative; + overflow-x: hidden; + overflow-y: auto; + border: 0; + border-top: 1px solid $border-color; + -ms-overflow-style: -ms-autohiding-scrollbar; + + &::-webkit-scrollbar { + width: 10px; + margin-left: -10px; + appearance: none; + } + + // &::-webkit-scrollbar-button { } + + &::-webkit-scrollbar-track { + background-color: lighten($aside-menu-bg, 5%); + border-right: 1px solid darken($aside-menu-bg, 5%); + border-left: 1px solid darken($aside-menu-bg, 5%); + } + + // &::-webkit-scrollbar-track-piece { } + + &::-webkit-scrollbar-thumb { + height: 50px; + background-color: darken($aside-menu-bg, 10%); + background-clip: content-box; + border-color: transparent; + border-style: solid; + border-width: 1px 2px; + } + + .tab-pane { + padding: 0; + } + } +} diff --git a/embark-ui/src/dark-theme/_avatars.scss b/embark-ui/src/dark-theme/_avatars.scss new file mode 100644 index 00000000..83dc6b1e --- /dev/null +++ b/embark-ui/src/dark-theme/_avatars.scss @@ -0,0 +1,44 @@ +.avatar { + @include avatar($avatar-width,$avatar-status-width); + + > img { + @extend .img-avatar; + vertical-align: initial; + } +} + +.avatar-lg { + @include avatar($avatar-lg-width,$avatar-lg-status-width); +} + +.avatar-sm { + @include avatar($avatar-sm-width,$avatar-sm-status-width); +} + +.avatar-xs { + @include avatar($avatar-xs-width,$avatar-xs-status-width); +} + +.avatars-stack { + + .avatar { + margin-right: - ($avatar-width / 2); + transition: margin-right $layout-transition-speed; + + &:hover { + margin-right: 0; + } + } + + .avatar-lg { + margin-right: - ($avatar-lg-width / 2); + } + + .avatar-sm { + margin-right: - ($avatar-sm-width / 2); + } + + .avatar-xs { + margin-right: - ($avatar-xs-width / 2); + } +} diff --git a/embark-ui/src/dark-theme/_badge.scss b/embark-ui/src/dark-theme/_badge.scss new file mode 100644 index 00000000..31048856 --- /dev/null +++ b/embark-ui/src/dark-theme/_badge.scss @@ -0,0 +1,3 @@ +.badge-pill { + border-radius: $badge-pill-border-radius; +} diff --git a/embark-ui/src/dark-theme/_brand-buttons.scss b/embark-ui/src/dark-theme/_brand-buttons.scss new file mode 100644 index 00000000..1bfdce6a --- /dev/null +++ b/embark-ui/src/dark-theme/_brand-buttons.scss @@ -0,0 +1,60 @@ +// +// Base styles +// + +.btn-brand { + border: 0; + i { + display: inline-block; + width: (($btn-padding-y * 2) + ($font-size-base * $btn-line-height)); + margin: (- $btn-padding-y) (- $btn-padding-x); + line-height: (($btn-padding-y * 2) + ($font-size-base * $btn-line-height)); + text-align: center; + background-color: rgba(0, 0, 0, .2); + @include border-radius($btn-border-radius); + } + + i + span { + margin-left: ($btn-padding-x * 2); + } + + &.btn-lg { + i { + width: (($btn-padding-y-lg * 2) + ($font-size-lg * $btn-line-height-lg)); + margin: (- $btn-padding-y-lg) (- $btn-padding-x-lg); + line-height: (($btn-padding-y-lg * 2) + ($font-size-lg * $btn-line-height-lg)); + @include border-radius($btn-border-radius-lg); + } + + i + span { + margin-left: ($btn-padding-x-lg * 2); + } + } + + &.btn-sm { + i { + width: (($btn-padding-y-sm * 2) + ($font-size-sm * $btn-line-height-sm)); + margin: (- $btn-padding-y-sm) (- $btn-padding-x-sm); + line-height: (($btn-padding-y-sm * 2) + ($font-size-sm * $btn-line-height-sm)); + @include border-radius($btn-border-radius-sm); + } + + i + span { + margin-left: ($btn-padding-x-sm * 2); + } + } + + &.btn-square i { + border-radius: 0; + } +} + +// +// Variants +// + +@each $color, $value in $brands-colors { + .btn-#{$color} { + @include button-variant($value, $value); + } +} diff --git a/embark-ui/src/dark-theme/_brand-card.scss b/embark-ui/src/dark-theme/_brand-card.scss new file mode 100644 index 00000000..08caf9d1 --- /dev/null +++ b/embark-ui/src/dark-theme/_brand-card.scss @@ -0,0 +1,65 @@ +// +// Base styles +// + +.brand-card { + position: relative; + display: flex; + flex-direction: column; + min-width: 0; + margin-bottom: ($spacer * 1.5); + word-wrap: break-word; + background-color: $card-bg; + background-clip: border-box; + border: $card-border-width solid $card-border-color; + @include border-radius($card-border-radius); +} + +.brand-card-header { + position: relative; + display: flex; + align-items: center; + justify-content: center; + height: 6rem; + @include border-radius($card-border-radius $card-border-radius 0 0); + + i { + font-size: 2rem; + color: #fff; + } + + .chart-wrapper { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } +} + +.brand-card-body { + display: flex; + flex-direction: row; + padding: $card-spacer-y 0; + text-align: center; + + > * { + flex: 1; + padding: ($card-spacer-y * .25) 0; + } + + > *:not(:last-child) { + border-right: 1px solid $border-color; + } +} + +// stylelint-disable selector-max-universal +// Right-to-Left Support +*[dir="rtl"] { + .brand-card-body { + > *:not(:last-child) { + border-right: 0; + border-left: 1px solid $border-color; + } + } +} diff --git a/embark-ui/src/dark-theme/_breadcrumb-menu.scss b/embark-ui/src/dark-theme/_breadcrumb-menu.scss new file mode 100644 index 00000000..148775b1 --- /dev/null +++ b/embark-ui/src/dark-theme/_breadcrumb-menu.scss @@ -0,0 +1,44 @@ +.breadcrumb-menu { + margin-left: auto; + + &::before { + display: none; + } + + .btn-group { + vertical-align: top; + } + + .btn { + padding: 0 $input-btn-padding-x; + color: $text-muted; + vertical-align: top; + border: 0; + + &:hover, + &.active { + color: $body-color; + background: transparent; + } + } + + .open { + .btn { + color: $body-color; + background: transparent; + } + } + + .dropdown-menu { + min-width: 180px; + line-height: $line-height-base; + } +} + +// Right-to-Left Support +*[dir="rtl"] { + .breadcrumb-menu { + margin-right: auto; + margin-left: initial; + } +} diff --git a/embark-ui/src/dark-theme/_breadcrumb.scss b/embark-ui/src/dark-theme/_breadcrumb.scss new file mode 100644 index 00000000..f827a3b3 --- /dev/null +++ b/embark-ui/src/dark-theme/_breadcrumb.scss @@ -0,0 +1,16 @@ +.breadcrumb { + position: relative; + @include border-radius($breadcrumb-border-radius); + @include borders($breadcrumb-borders); +} + +*[dir="rtl"] { + .breadcrumb-item::before { + padding-right: 0; + padding-left: $breadcrumb-item-padding; + } + .breadcrumb-item { + padding-right: $breadcrumb-item-padding; + padding-left: 0; + } +} diff --git a/embark-ui/src/dark-theme/_buttons.scss b/embark-ui/src/dark-theme/_buttons.scss new file mode 100644 index 00000000..c1f84699 --- /dev/null +++ b/embark-ui/src/dark-theme/_buttons.scss @@ -0,0 +1,32 @@ +button { + cursor: pointer; +} + +.btn-transparent { + color: #fff; + background-color: transparent; + border-color: transparent; +} + +.btn { + [class^="icon-"], + [class*=" icon-"] { + display: inline-block; + margin-top: -2px; + vertical-align: middle; + } +} + +.btn-pill { + border-radius: 50em; +} + +.btn-square { + border-radius: 0; +} + +@each $color, $value in $theme-colors { + .btn-ghost-#{$color} { + @include button-ghost-variant($value); + } +} diff --git a/embark-ui/src/dark-theme/_callout.scss b/embark-ui/src/dark-theme/_callout.scss new file mode 100644 index 00000000..7036b1ea --- /dev/null +++ b/embark-ui/src/dark-theme/_callout.scss @@ -0,0 +1,73 @@ +// +// Base styles +// + +.callout { + position: relative; + padding: 0 $spacer; + margin: $spacer 0; + border-left: 4px solid $border-color; + + @if $enable-rounded { + border-radius: $border-radius; + } + + .chart-wrapper { + position: absolute; + top: 10px; + left: 50%; + float: right; + width: 50%; + } +} + +.callout-bordered { + border: 1px solid $border-color; + border-left-width: 4px; +} +.callout code { + border-radius: $border-radius; +} +.callout h4 { + margin-top: 0; + margin-bottom: .25rem; +} +.callout p:last-child { + margin-bottom: 0; +} +.callout + .callout { + margin-top: - .25rem; +} + +// +// Variants +// + +@each $color, $value in $theme-colors { + .callout-#{$color} { + border-left-color: $value; + + h4 { + color: $value; + } + } +} + +// Right-to-Left Support +*[dir="rtl"] { + .callout { + border-right: 4px solid $border-color; + border-left: 0; + + @each $color, $value in $theme-colors { + &.callout-#{$color} { + border-right-color: $value; + } + } + + .chart-wrapper { + left: 0; + float: left; + } + } +} diff --git a/embark-ui/src/dark-theme/_card.scss b/embark-ui/src/dark-theme/_card.scss new file mode 100644 index 00000000..82b03ad7 --- /dev/null +++ b/embark-ui/src/dark-theme/_card.scss @@ -0,0 +1,117 @@ +.card { + margin-bottom: ($spacer * 1.5); + + // Cards with color accent + @each $color, $value in $theme-colors { + &.bg-#{$color} { + border-color: darken($value, 12.5%); + .card-header { + background-color: darken($value, 3%); + border-color: darken($value, 12.5%); + } + } + } + + &.drag, + .drag { + cursor: move; + } +} + +.card-placeholder { + background: rgba(0, 0, 0, .025); + border: 1px dashed $gray-300; +} + +.card-header { + > i { + margin-right: $spacer / 2; + } + + .nav-tabs { + margin-top: -$card-spacer-y; + margin-bottom: -$card-spacer-y; + border-bottom: 0; + + .nav-item { + border-top: 0; + } + + .nav-link { + padding: $card-spacer-y ($card-spacer-x / 2); + color: $text-muted; + border-top: 0; + + &.active { + color: $body-color; + background: #fff; + } + } + } +} + +*[dir="rtl"] .card-header > i { + margin-right: 0; + margin-left: $spacer / 2; +} + +.card-header-icon-bg { + display: inline-block; + width: ($card-spacer-y * 2) + ($font-size-base * $line-height-base); + padding: $card-spacer-y 0; + margin: (- $card-spacer-y) $card-spacer-x (- $card-spacer-y) (- $card-spacer-x); + line-height: inherit; + color: $card-icon-color; + text-align: center; + background: $card-icon-bg; + border-right: $card-border-width solid $card-border-color; +} + +.card-header-actions { + display: inline-block; + float: right; + margin-right: - ($spacer / 4); +} + +*[dir="rtl"] { + .card-header-actions { + float: left; + margin-right: auto; + margin-left: - ($spacer / 4); + } +} + +.card-header-action { + padding: 0 ($spacer / 4); + color: $gray-600; + + &:hover { + color: $body-color; + text-decoration: none; + } +} + + +// Cards with color accent +@each $color, $value in $theme-colors { + .card-accent-#{$color} { + @include card-accent-variant($value); + } +} + +.card-full { + margin-top: - $spacer; + margin-right: - $grid-gutter-width / 2; + margin-left: - $grid-gutter-width / 2; + border: 0; + border-bottom: $card-border-width solid $border-color; +} + +@include media-breakpoint-up(sm) { + .card-columns { + + &.cols-2 { + column-count: 2; + } + } +} diff --git a/embark-ui/src/dark-theme/_charts.scss b/embark-ui/src/dark-theme/_charts.scss new file mode 100644 index 00000000..410bf81b --- /dev/null +++ b/embark-ui/src/dark-theme/_charts.scss @@ -0,0 +1,55 @@ +.chart-wrapper canvas { + width: 100%; +} +// stylelint-disable selector-no-qualifying-type, selector-type-no-unknown +base-chart.chart { + display: block; +} + +canvas { + user-select: none; +} + +.chartjs-tooltip { + position: absolute; + z-index: $zindex-sticky + 1; + display: flex; + flex-direction: column; + padding: ($spacer * .25) ($spacer * .5); + color: #fff; + pointer-events: none; + background: rgba(0, 0, 0, .7); + opacity: 0; + transition: all $layout-transition-speed ease; + transform: translate(-50%, 0); + @include border-radius($border-radius); + + .tooltip-header { + margin-bottom: ($spacer * .5); + } + + .tooltip-header-item { + font-size: $font-size-sm; + font-weight: $font-weight-bold; + } + + .tooltip-body-item { + display: flex; + align-items: center; + font-size: $font-size-sm; + white-space: nowrap; + } + + .tooltip-body-item-color { + display: inline-block; + width: $font-size-base; + height: $font-size-base; + margin-right: $font-size-base; + } + + .tooltip-body-item-value { + padding-left: $spacer; + margin-left: auto; + font-weight: $font-weight-bold; + } +} diff --git a/embark-ui/src/dark-theme/_dropdown-menu-right.scss b/embark-ui/src/dark-theme/_dropdown-menu-right.scss new file mode 100644 index 00000000..4f195468 --- /dev/null +++ b/embark-ui/src/dark-theme/_dropdown-menu-right.scss @@ -0,0 +1,8 @@ +// Temp fix for reactstrap +.app-header { + .navbar-nav { + .dropdown-menu-right { + right: auto; + } + } +} diff --git a/embark-ui/src/dark-theme/_dropdown.scss b/embark-ui/src/dark-theme/_dropdown.scss new file mode 100644 index 00000000..564e4df2 --- /dev/null +++ b/embark-ui/src/dark-theme/_dropdown.scss @@ -0,0 +1,69 @@ +// Links, buttons, and more within the dropdown menu +.dropdown-item { + position: relative; + padding: 10px 20px; + border-bottom: 1px solid $dropdown-border-color; + + &:last-child { + border-bottom: 0; + } + + i { + display: inline-block; + width: 20px; + margin-right: 10px; + margin-left: -10px; + color: $dropdown-border-color; + text-align: center; + } + + .badge { + position: absolute; + right: 10px; + margin-top: 2px; + } +} + +// Dropdown section headers +.dropdown-header { + padding: 8px 20px; + background: $dropdown-divider-bg; + border-bottom: 1px solid $dropdown-border-color; + + .btn { + margin-top: -7px; + color: $dropdown-header-color; + + &:hover { + color: $body-color; + } + + &.pull-right { + margin-right: -20px; + } + } +} + +.dropdown-menu-lg { + width: 250px; +} +.app-header { + .navbar-nav { + .dropdown-menu { + position: absolute; + } + // Menu positioning + // + // Add extra class to `.dropdown-menu` to flip the alignment of the dropdown + // menu with the parent. + .dropdown-menu-right { + right: 0; + left: auto; // Reset the default from `.dropdown-menu` + } + + .dropdown-menu-left { + right: auto; + left: 0; + } + } +} diff --git a/embark-ui/src/dark-theme/_footer.scss b/embark-ui/src/dark-theme/_footer.scss new file mode 100644 index 00000000..e01595a1 --- /dev/null +++ b/embark-ui/src/dark-theme/_footer.scss @@ -0,0 +1,9 @@ +.app-footer { + display: flex; + flex-wrap: wrap; + align-items: center; + padding: 0 $spacer; + color: $footer-color; + background: $footer-bg; + @include borders($footer-borders); +} diff --git a/embark-ui/src/dark-theme/_grid.scss b/embark-ui/src/dark-theme/_grid.scss new file mode 100644 index 00000000..38edd86a --- /dev/null +++ b/embark-ui/src/dark-theme/_grid.scss @@ -0,0 +1,15 @@ +.row.row-equal { + padding-right: ($grid-gutter-width / 4); + padding-left: ($grid-gutter-width / 4); + margin-right: ($grid-gutter-width / -2); + margin-left: ($grid-gutter-width / -2); + + [class*="col-"] { + padding-right: ($grid-gutter-width / 4); + padding-left: ($grid-gutter-width / 4); + } +} + +.main .container-fluid { + padding: 0 30px; +} diff --git a/embark-ui/src/dark-theme/_header.scss b/embark-ui/src/dark-theme/_header.scss new file mode 100644 index 00000000..d0ff6214 --- /dev/null +++ b/embark-ui/src/dark-theme/_header.scss @@ -0,0 +1,135 @@ +.app-header { + position: relative; + flex-direction: row; + height: $navbar-height; + padding: 0; + margin: 0; + background-color: $navbar-bg; + @include borders($navbar-border); + + .navbar-brand { + display: inline-flex; + align-items: center; + justify-content: center; + width: $navbar-brand-width; + height: $navbar-height; + padding: 0; + margin-right: 0; + background-color: $navbar-brand-bg; + @include borders($navbar-brand-border); + + .navbar-brand-minimized { + display: none; + } + } + + .navbar-toggler { + min-width: 50px; + padding: $navbar-toggler-padding-y 0; + + &:hover .navbar-toggler-icon { + background-image: $navbar-toggler-icon-hover; + } + } + + .navbar-toggler-icon { + height: 23px; + background-image: $navbar-toggler-icon; + } + + .navbar-nav { + flex-direction: row; + align-items: center; + } + + .nav-item { + position: relative; + min-width: 50px; + margin: 0; + text-align: center; + + button { + margin: 0 auto; + } + + .nav-link { + padding-top: 0; + padding-bottom: 0; + background: 0; + border: 0; + + .badge { + position: absolute; + top: 50%; + left: 50%; + margin-top: -16px; + margin-left: 0; + } + + > .img-avatar { + height: $navbar-height - 20px; + margin: 0 10px; + } + } + } + + .dropdown-menu { + padding-bottom: 0; + line-height: $line-height-base; + } + + .dropdown-item { + min-width: 180px; + } +} + +// .navbar-brand { +// color: $navbar-active-color; +// +// @include hover-focus { +// color: $navbar-active-color; +// } +// } + +.navbar-nav { + .nav-link { + color: $navbar-color; + + @include hover-focus { + color: $navbar-hover-color; + } + } + + .open > .nav-link, + .active > .nav-link, + .nav-link.open, + .nav-link.active { + @include plain-hover-focus { + color: $navbar-active-color; + } + } +} + +.navbar-divider { + background-color: rgba(0, 0, 0, .075); +} + +@include media-breakpoint-up(lg) { + .brand-minimized { + .app-header { + .navbar-brand { + width: $navbar-brand-minimized-width; + background-color: $navbar-brand-minimized-bg; + @include borders($navbar-brand-minimized-border); + + .navbar-brand-full { + display: none; + } + + .navbar-brand-minimized { + display: block; + } + } + } + } +} diff --git a/embark-ui/src/dark-theme/_ie-custom-properties.scss b/embark-ui/src/dark-theme/_ie-custom-properties.scss new file mode 100644 index 00000000..b61a1307 --- /dev/null +++ b/embark-ui/src/dark-theme/_ie-custom-properties.scss @@ -0,0 +1,14 @@ +.ie-custom-properties { + // Custom variable values only support SassScript inside `#{}`. + @each $color, $value in $colors { + #{$color}: #{$value}; + } + + @each $color, $value in $theme-colors { + #{$color}: #{$value}; + } + + @each $bp, $value in $grid-breakpoints { + breakpoint-#{$bp}: #{$value}; + } +} diff --git a/embark-ui/src/dark-theme/_images.scss b/embark-ui/src/dark-theme/_images.scss new file mode 100644 index 00000000..92cae976 --- /dev/null +++ b/embark-ui/src/dark-theme/_images.scss @@ -0,0 +1,6 @@ +.img-avatar, +.img-circle { + max-width: 100%; + height: auto; + border-radius: 50em; +} diff --git a/embark-ui/src/dark-theme/_input-group.scss b/embark-ui/src/dark-theme/_input-group.scss new file mode 100644 index 00000000..c8ce1158 --- /dev/null +++ b/embark-ui/src/dark-theme/_input-group.scss @@ -0,0 +1,5 @@ +.input-group-prepend, +.input-group-append { + white-space: nowrap; + vertical-align: middle; // Match the inputs +} diff --git a/embark-ui/src/dark-theme/_layout.scss b/embark-ui/src/dark-theme/_layout.scss new file mode 100644 index 00000000..773f1617 --- /dev/null +++ b/embark-ui/src/dark-theme/_layout.scss @@ -0,0 +1,478 @@ +// IE10&11 Flexbox fix +@media all and (-ms-high-contrast: none) { + html { + display: flex; + flex-direction: column; + } +} + +// stylelint-disable selector-type-no-unknown, no-duplicate-selectors, selector-no-qualifying-type +// app-dashboard and app-root are Angular2+ selectors. You can add here your own selectors if you need. +.app, +app-dashboard, +app-root { + display: flex; + flex-direction: column; + min-height: 100vh; +} + +.app-header { + flex: 0 0 $navbar-height; +} + +.app-footer { + flex: 0 0 $footer-height; +} + +.app-body { + display: flex; + flex-direction: row; + flex-grow: 1; + overflow-x: hidden; + + .main { + flex: 1; + min-width: 0; + } + + .sidebar { + // $sidebar-width is the width of the columns + flex: 0 0 $sidebar-width; + // put the nav on the left + order: -1; + } + + .aside-menu { + // $aside-menu-width is the width of the columns + flex: 0 0 $aside-menu-width; + } +} + +html:not([dir="rtl"]) { + .sidebar { + margin-left: - $sidebar-width; + } + .aside-menu { + right: 0; + margin-right: - $aside-menu-width; + } +} +html[dir="rtl"] { + .sidebar { + margin-right: - $sidebar-width; + } + .aside-menu { + left: 0; + margin-left: - $aside-menu-width; + } +} + +@include media-breakpoint-up(lg) { + // + // Header + // + .header-fixed { + .app-header { + position: fixed; + z-index: $zindex-sticky; + width: 100%; + } + .app-body { + margin-top: $navbar-height; + } + } + // + // Sidebar + // + .sidebar-fixed { + .sidebar { + position: fixed; + z-index: $zindex-sticky - 1; + width: $sidebar-width; + height: 100vh; + } + } + .sidebar-fixed { + .app-header + .app-body .sidebar { + height: calc(100vh - #{$navbar-height}); + } + } + + .sidebar-compact { + .sidebar { + flex: 0 0 $sidebar-compact-width; + } + + &.sidebar-fixed { + .sidebar { + width: $sidebar-compact-width; + } + } + .sidebar-minimizer { + display: none; + } + } + + .sidebar-minimized { + .sidebar { + flex: 0 0 $sidebar-minimized-width; + } + + &.sidebar-fixed { + .sidebar { + width: $sidebar-minimized-width; + } + } + } + + .sidebar-off-canvas { + .sidebar { + position: fixed; + z-index: $zindex-sticky - 1; + height: 100%; + } + } + + .sidebar-off-canvas { + .app-header + .app-body .sidebar { + height: calc(100vh - #{$navbar-height}); + } + } + + html:not([dir="rtl"]) { + .sidebar-compact { + .sidebar { + margin-left: - $sidebar-compact-width; + } + } + .sidebar-minimized { + .sidebar { + margin-left: - $sidebar-minimized-width; + } + } + } + html[dir="rtl"] { + .sidebar-compact { + .sidebar { + margin-right: - $sidebar-compact-width; + } + } + .sidebar-minimized { + .sidebar { + margin-right: - $sidebar-minimized-width; + } + } + } + + // + // Aside Menu + // + + .aside-menu-fixed { + .aside-menu { + position: fixed; + height: 100%; + + .tab-content { + height: calc(100vh - #{$aside-menu-nav-padding-y * 2 + $font-size-base} - #{$navbar-height}); + } + } + } + + .aside-menu-fixed { + .app-header + .app-body .aside-menu { + height: calc(100vh - #{$navbar-height}); + } + } + + .aside-menu-off-canvas { + .aside-menu { + position: fixed; + z-index: $zindex-sticky - 1; + height: 100%; + } + } + + .aside-menu-off-canvas { + .app-header + .app-body .aside-menu { + height: calc(100vh - #{$navbar-height}); + } + } + + html:not([dir="rtl"]) { + .aside-menu-fixed, + .aside-menu-off-canvas { + .aside-menu { + right: 0; + } + } + } + html[dir="rtl"] { + .aside-menu-fixed, + .aside-menu-off-canvas { + .aside-menu { + left: 0; + } + } + } +} + +// +// Breadcrumb +// +.breadcrumb-fixed { + .main { + $breadcrumb-height: 2 * $breadcrumb-padding-y + $font-size-base + 1.5 * $spacer; + padding-top: $breadcrumb-height; + } + + .breadcrumb { + position: fixed; + top: $navbar-height; + right: 0; + left: 0; + z-index: $zindex-sticky - 3; + } +} + +@each $breakpoint in map-keys($grid-breakpoints) { + @include media-breakpoint-up($breakpoint) { + $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + html:not([dir="rtl"]) { + .sidebar#{$infix}-show { + .sidebar { + margin-left: 0; + } + @if media-breakpoint-up(sm) { + &.sidebar-fixed { + .main, + .app-footer { + margin-left: $sidebar-width; + } + &.sidebar-compact { + .main, + .app-footer { + margin-left: $sidebar-compact-width; + } + } + &.sidebar-minimized { + .main, + .app-footer { + margin-left: $sidebar-minimized-width; + } + } + } + &.breadcrumb-fixed { + .breadcrumb { + left: $sidebar-width; + } + &.sidebar-compact { + .breadcrumb { + left: $sidebar-compact-width; + } + } + &.sidebar-minimized { + .breadcrumb { + left: $sidebar-minimized-width; + } + } + } + } + } + + .aside-menu#{$infix}-show { + .aside-menu { + margin-right: 0; + } + @if media-breakpoint-up(sm) { + &.aside-menu-fixed { + .main, + .app-footer { + margin-right: $aside-menu-width; + } + } + &.breadcrumb-fixed { + .breadcrumb { + right: $aside-menu-width; + } + } + } + } + } + + html[dir="rtl"] { + .sidebar#{$infix}-show { + .sidebar { + margin-right: 0; + } + @if media-breakpoint-up(sm) { + &.sidebar-fixed { + .main, + .app-footer { + margin-right: $sidebar-width; + } + &.sidebar-compact { + .main, + .app-footer { + margin-right: $sidebar-compact-width; + } + } + &.sidebar-minimized { + .main, + .app-footer { + margin-right: $sidebar-minimized-width; + } + } + } + &.breadcrumb-fixed { + .breadcrumb { + right: $sidebar-width; + } + &.sidebar-compact { + .breadcrumb { + right: $sidebar-compact-width; + } + } + &.sidebar-minimized { + .breadcrumb { + right: $sidebar-minimized-width; + } + } + } + } + } + + .aside-menu#{$infix}-show { + .aside-menu { + margin-left: 0; + } + @if media-breakpoint-up(sm) { + &.aside-menu-fixed { + .main, + .app-footer { + margin-left: $aside-menu-width; + } + } + &.breadcrumb-fixed { + .breadcrumb { + left: $aside-menu-width; + } + } + } + } + } + .sidebar#{$infix}-show, + .aside-menu#{$infix}-show { + @keyframes opacity { + 0% { opacity: 0; } + 100% { opacity: 1; } + } + + @include media-breakpoint-down(xs) { + .main { + position: relative; + &::before { + position: absolute; + top: 0; + left: 0; + z-index: $zindex-sticky - 2; + width: 100%; + height: 100%; + content: ""; + background: rgba(0, 0, 0, .7); + animation: opacity $layout-transition-speed; + } + } + } + } + } +} + +// +// Footer +// +.footer-fixed { + .app-footer { + position: fixed; + right: 0; + bottom: 0; + left: 0; + z-index: $zindex-sticky; + height: $footer-height; + } + + .app-body { + margin-bottom: $footer-height; + } +} + +// +// Animations +// +.app-header, +.app-footer, +.sidebar, +.main, +.aside-menu { + transition: margin-left $layout-transition-speed, margin-right $layout-transition-speed, width $layout-transition-speed, flex $layout-transition-speed; +} +.sidebar-nav { + transition: width $layout-transition-speed; +} +.breadcrumb { + transition: left $layout-transition-speed, right $layout-transition-speed, width $layout-transition-speed; +} + +// +// Mobile layout +// + +@include media-breakpoint-down(md) { + .app-header { + position: fixed; + z-index: $zindex-sticky; + width: 100%; + text-align: center; + @if $navbar-brand-bg == transparent { + background-color: $navbar-bg; + } @else { + background-color: $navbar-brand-bg; + } + @include borders($navbar-brand-border); + + .navbar-toggler { + @if (lightness( $navbar-brand-bg ) > 40) { + color: $navbar-color; + } @else { + color: #fff; + } + } + + .navbar-brand { + position: absolute; + top: 0; + left: 50%; + margin-left: - ($navbar-brand-width / 2); + } + } + + .app-body { + margin-top: $navbar-height; + } + + .sidebar { + position: fixed; + z-index: $zindex-sticky - 1; + width: $sidebar-width; + height: calc(100vh - #{$navbar-height}); + } + + .sidebar-minimizer { + display: none; + } + + .aside-menu { + position: fixed; + height: 100%; + } +} diff --git a/embark-ui/src/dark-theme/_list-group.scss b/embark-ui/src/dark-theme/_list-group.scss new file mode 100644 index 00000000..8b156773 --- /dev/null +++ b/embark-ui/src/dark-theme/_list-group.scss @@ -0,0 +1,35 @@ +// List items with accent +// +// Remove top, bottome and right borders and border-radius. + +.list-group-accent { + .list-group-item { + margin-bottom: 1px; + border-top: 0; + border-right: 0; + border-bottom: 0; + @include border-radius(0); + + &.list-group-item-divider { + position: relative; + + &::before { + position: absolute; + bottom: -1px; + left: 5%; + width: 90%; + height: 1px; + content: ""; + background-color: $gray-200; + } + } + } +} + +// Contextual variants +// +// Add modifier classes to change border color on individual items. + +@each $color, $value in $theme-colors { + @include list-group-item-accent-variant($color, $value); +} diff --git a/embark-ui/src/dark-theme/_mixins.scss b/embark-ui/src/dark-theme/_mixins.scss new file mode 100644 index 00000000..1cda7d83 --- /dev/null +++ b/embark-ui/src/dark-theme/_mixins.scss @@ -0,0 +1,7 @@ +@import "mixins/avatars"; +@import "mixins/buttons"; +@import "mixins/borders"; +@import "mixins/card-accent"; +@import "mixins/list-group"; +@import "mixins/sidebar-width"; +@import "mixins/switches"; diff --git a/embark-ui/src/dark-theme/_modal.scss b/embark-ui/src/dark-theme/_modal.scss new file mode 100644 index 00000000..1c44ddd0 --- /dev/null +++ b/embark-ui/src/dark-theme/_modal.scss @@ -0,0 +1,13 @@ +@each $color, $value in $theme-colors { + .modal-#{$color} { + + .modal-content { + border-color: $value; + } + + .modal-header { + color: #fff; + background-color: $value; + } + } +} diff --git a/embark-ui/src/dark-theme/_nav.scss b/embark-ui/src/dark-theme/_nav.scss new file mode 100644 index 00000000..a9ec4133 --- /dev/null +++ b/embark-ui/src/dark-theme/_nav.scss @@ -0,0 +1,57 @@ +.nav-tabs { + .nav-link { + color: $gray-600; + &:hover { + cursor: pointer; + } + &.active { + color: $gray-800; + background: #fff; + border-color: $border-color; + border-bottom-color: #fff; + &:focus { + background: #fff; + border-color: $border-color; + border-bottom-color: #fff; + } + } + } +} + +.tab-content { + margin-top: -1px; + background: #fff; + border: 1px solid $border-color; + .tab-pane { + padding: $spacer; + } +} + +.card-block { + .tab-content { + margin-top: 0; + border: 0; + } +} + +.nav-fill { + .nav-link { + background-color: #fff; + border-color: $border-color; + } + .nav-link + .nav-link { + margin-left: -1px; + } + .nav-link.active { + margin-top: -1px; + // margin-left: 0; + border-top: 2px solid $primary; + } +} + +// Right-to-Left Support +*[dir="rtl"] { + .nav { + padding-right: 0; + } +} diff --git a/embark-ui/src/dark-theme/_navbar.scss b/embark-ui/src/dark-theme/_navbar.scss new file mode 100644 index 00000000..d0ff6214 --- /dev/null +++ b/embark-ui/src/dark-theme/_navbar.scss @@ -0,0 +1,135 @@ +.app-header { + position: relative; + flex-direction: row; + height: $navbar-height; + padding: 0; + margin: 0; + background-color: $navbar-bg; + @include borders($navbar-border); + + .navbar-brand { + display: inline-flex; + align-items: center; + justify-content: center; + width: $navbar-brand-width; + height: $navbar-height; + padding: 0; + margin-right: 0; + background-color: $navbar-brand-bg; + @include borders($navbar-brand-border); + + .navbar-brand-minimized { + display: none; + } + } + + .navbar-toggler { + min-width: 50px; + padding: $navbar-toggler-padding-y 0; + + &:hover .navbar-toggler-icon { + background-image: $navbar-toggler-icon-hover; + } + } + + .navbar-toggler-icon { + height: 23px; + background-image: $navbar-toggler-icon; + } + + .navbar-nav { + flex-direction: row; + align-items: center; + } + + .nav-item { + position: relative; + min-width: 50px; + margin: 0; + text-align: center; + + button { + margin: 0 auto; + } + + .nav-link { + padding-top: 0; + padding-bottom: 0; + background: 0; + border: 0; + + .badge { + position: absolute; + top: 50%; + left: 50%; + margin-top: -16px; + margin-left: 0; + } + + > .img-avatar { + height: $navbar-height - 20px; + margin: 0 10px; + } + } + } + + .dropdown-menu { + padding-bottom: 0; + line-height: $line-height-base; + } + + .dropdown-item { + min-width: 180px; + } +} + +// .navbar-brand { +// color: $navbar-active-color; +// +// @include hover-focus { +// color: $navbar-active-color; +// } +// } + +.navbar-nav { + .nav-link { + color: $navbar-color; + + @include hover-focus { + color: $navbar-hover-color; + } + } + + .open > .nav-link, + .active > .nav-link, + .nav-link.open, + .nav-link.active { + @include plain-hover-focus { + color: $navbar-active-color; + } + } +} + +.navbar-divider { + background-color: rgba(0, 0, 0, .075); +} + +@include media-breakpoint-up(lg) { + .brand-minimized { + .app-header { + .navbar-brand { + width: $navbar-brand-minimized-width; + background-color: $navbar-brand-minimized-bg; + @include borders($navbar-brand-minimized-border); + + .navbar-brand-full { + display: none; + } + + .navbar-brand-minimized { + display: block; + } + } + } + } +} diff --git a/embark-ui/src/dark-theme/_others.scss b/embark-ui/src/dark-theme/_others.scss new file mode 100644 index 00000000..fbe7d6d8 --- /dev/null +++ b/embark-ui/src/dark-theme/_others.scss @@ -0,0 +1,4 @@ +// stylelint-disable selector-no-qualifying-type +hr.transparent { + border-top: 1px solid transparent; +} diff --git a/embark-ui/src/dark-theme/_progress-group.scss b/embark-ui/src/dark-theme/_progress-group.scss new file mode 100644 index 00000000..ac00a169 --- /dev/null +++ b/embark-ui/src/dark-theme/_progress-group.scss @@ -0,0 +1,40 @@ +.progress-group { + display: flex; + flex-flow: row wrap; + margin-bottom: $spacer; +} + +.progress-group-prepend { + flex: 0 0 100px; + align-self: center; +} + +.progress-group-icon { + margin: 0 $spacer 0 ($spacer * .25); + font-size: $font-size-lg; +} + +.progress-group-text { + font-size: $font-size-sm; + color: $gray-600; +} + +.progress-group-header { + display: flex; + flex-basis: 100%; + align-items: flex-end; + margin-bottom: ($spacer * .25); +} + +.progress-group-bars { + flex-grow: 1; + align-self: center; + + .progress:not(:last-child) { + margin-bottom: 2px; + } +} + +.progress-group-header + .progress-group-bars { + flex-basis: 100%; +} diff --git a/embark-ui/src/dark-theme/_progress.scss b/embark-ui/src/dark-theme/_progress.scss new file mode 100644 index 00000000..3ff35fed --- /dev/null +++ b/embark-ui/src/dark-theme/_progress.scss @@ -0,0 +1,15 @@ +.progress-xs { + height: 4px; +} + +.progress-sm { + height: 8px; +} + +// White progress bar +.progress-white { + background-color: rgba(255, 255, 255, .2); + .progress-bar { + background-color: #fff; + } +} diff --git a/embark-ui/src/dark-theme/_rtl.scss b/embark-ui/src/dark-theme/_rtl.scss new file mode 100644 index 00000000..3b765297 --- /dev/null +++ b/embark-ui/src/dark-theme/_rtl.scss @@ -0,0 +1,27 @@ +// +// RTL Support +// +*[dir="rtl"] { + direction: rtl; + unicode-bidi: embed; + + body { + text-align: right; + } + + + // Dropdown + .dropdown-item { + text-align: right; + + i { + margin-right: -10px; + margin-left: 10px; + } + + .badge { + right: auto; + left: 10px; + } + } +} diff --git a/embark-ui/src/dark-theme/_sidebar.scss b/embark-ui/src/dark-theme/_sidebar.scss new file mode 100644 index 00000000..4e174f61 --- /dev/null +++ b/embark-ui/src/dark-theme/_sidebar.scss @@ -0,0 +1,529 @@ +// stylelint-disable selector-max-class, declaration-no-important, selector-max-compound-selectors +.sidebar { + display: flex; + flex-direction: column; + padding: $sidebar-padding; + color: $sidebar-color; + background: $sidebar-bg; + @include borders($sidebar-borders); + + .sidebar-close { + position: absolute; + right: 0; + display: none; + padding: 0 $spacer; + font-size: 24px; + font-weight: 800; + line-height: $navbar-height; + color: $sidebar-color; + background: 0; + border: 0; + opacity: .8; + + &:hover { + opacity: 1; + } + } + + // Will be added soon + // .sidebar-brand { } + + .sidebar-header { + flex: 0 0 $sidebar-header-height; + padding: $sidebar-header-padding-y $sidebar-header-padding-x; + text-align: center; + background: $sidebar-header-bg; + } + + .sidebar-form .form-control { + color: $sidebar-form-color; + background: $sidebar-form-bg; + border: $sidebar-form-border; + + &::placeholder { + color: $sidebar-form-placeholder-color; + } + } + + .sidebar-nav { + position: relative; + flex: 1; + overflow-x: hidden; + overflow-y: auto; + @include sidebar-width($sidebar-borders, $sidebar-width); + } + + .nav { + @include sidebar-width($sidebar-borders, $sidebar-width); + flex-direction: column; + min-height: 100%; + padding: 0; + } + + .nav-title { + padding: $sidebar-nav-title-padding-y $sidebar-nav-title-padding-x; + font-size: 80%; + font-weight: 700; + color: $sidebar-nav-title-color; + text-transform: uppercase; + } + + .nav-divider { + height: 10px; + } + + .nav-item { + position: relative; + margin: 0; + transition: background .3s ease-in-out; + } + + .nav-dropdown-items { + max-height: 0; + padding: 0; + margin: 0; + overflow-y: hidden; + transition: max-height .3s ease-in-out; + + .nav-item { + padding: 0; + list-style: none; + } + } + + .nav-link { + display: block; + padding: $sidebar-nav-link-padding-y $sidebar-nav-link-padding-x; + color: $sidebar-nav-link-color; + text-decoration: none; + background: $sidebar-nav-link-bg; + @include borders($sidebar-nav-link-borders); + @if $enable-sidebar-nav-rounded { + border-radius: $border-radius; + } + + .nav-icon { + display: inline-block; + width: ($font-size-base * 1.25); + margin: 0 ($sidebar-nav-link-padding-x / 2) 0 0; + font-size: $font-size-base; + color: $sidebar-nav-link-icon-color; + text-align: center; + } + + .badge { + float: right; + margin-top: 2px; + } + + &.active { + color: $sidebar-nav-link-active-color; + background: $sidebar-nav-link-active-bg; + @include borders($sidebar-nav-link-active-borders); + + .nav-icon { + color: $sidebar-nav-link-active-icon-color; + } + } + + &:hover { + color: $sidebar-nav-link-hover-color; + background: $sidebar-nav-link-hover-bg; + @include borders($sidebar-nav-link-hover-borders); + + .nav-icon { + color: $sidebar-nav-link-hover-icon-color; + } + + &.nav-dropdown-toggle::before { + background-image: $sidebar-nav-dropdown-indicator-hover; + } + } + + @each $color, $value in $theme-colors { + &.nav-link-#{$color} { + background: $value; + .nav-icon { + color: rgba(255, 255, 255, .7); + } + &:hover { + background: darken($value, 5%); + i { + color: #fff; + } + } + } + } + } + + .nav-dropdown-toggle { + position: relative; + + &::before { + position: absolute; + top: 50%; + right: $sidebar-nav-link-padding-x; + display: block; + width: 8px; + height: 8px; + padding: 0; + margin-top: -4px; + content: ""; + background-image: $sidebar-nav-dropdown-indicator; + background-repeat: no-repeat; + background-position: center; + transition: transform .3s; + } + + .badge { + margin-right: 16px; + } + } + + .nav-dropdown.open { + background: $sidebar-nav-dropdown-bg; + @include borders($sidebar-nav-dropdown-borders); + @if $enable-sidebar-nav-rounded { + border-radius: $border-radius; + } + > .nav-dropdown-items { + max-height: 1500px; + } + + .nav-link { + color: $sidebar-nav-dropdown-color; + border-left: 0; + } + + > .nav-dropdown-toggle::before { + transform: rotate(-90deg); + } + + .nav-dropdown.open { + border-left: 0; + } + } + + .nav-label { + display: block; + padding: ($sidebar-nav-link-padding-y / 8) $sidebar-nav-link-padding-x; + color: $sidebar-nav-title-color; + + &:hover { + color: $sidebar-color; + text-decoration: none; + } + + .nav-icon { + width: 20px; + margin: -3px ($sidebar-nav-link-padding-x / 2) 0 0; + font-size: 10px; + color: $sidebar-nav-link-icon-color; + text-align: center; + vertical-align: middle; + } + } + + @if (lightness( $sidebar-bg ) < 40) { + .progress { + background-color: lighten($sidebar-bg, 15%) !important; + } + } + + .sidebar-footer { + flex: 0 0 $sidebar-footer-height; + padding: $sidebar-footer-padding-y $sidebar-footer-padding-x; + background: $sidebar-footer-bg; + @include borders($sidebar-footer-borders); + } + + .sidebar-minimizer { + position: relative; + flex: 0 0 $sidebar-minimizer-height; + background-color: $sidebar-minimizer-bg; + border: 0; + @include borders($sidebar-minimizer-borders); + + &::before { + position: absolute; + top: 0; + right: 0; + width: $sidebar-minimizer-height; + height: $sidebar-minimizer-height; + content: ""; + background-image: $sidebar-minimizer-indicator; + background-repeat: no-repeat; + background-position: center; + background-size: $sidebar-minimizer-height / 4; + transition: .3s; + } + + &:focus, + &.focus { + outline: 0; + } + + &:hover { + background-color: $sidebar-minimizer-hover-bg; + &::before { + background-image: $sidebar-minimizer-hover-indicator; + } + } + } +} + +@include media-breakpoint-up(lg) { + .sidebar-compact { + .sidebar { + .sidebar-nav { + @include sidebar-width($sidebar-borders, $sidebar-compact-width); + } + + .nav { + @include sidebar-width($sidebar-borders, $sidebar-compact-width); + } + + .d-compact-none { + display: none; + } + + .nav-title { + text-align: center; + } + + .nav-item { + width: $sidebar-compact-width; + border-left: 0; + } + + .nav-link { + text-align: center; + + .nav-icon { + display: block; + width: 100%; + margin: $spacer / 4 0; + font-size: 24px; + } + + .badge { + position: absolute; + top: 18px; + right: 10px; + } + + &.nav-dropdown-toggle { + + &::before { + top: 30px; + } + } + } + } + } + + // Minimized Sidebar + .sidebar-minimized { + .sidebar { + z-index: $zindex-sticky - 1; + + .sidebar-nav { + overflow: visible; + @include sidebar-width($sidebar-borders, $sidebar-minimized-width); + } + + .nav { + @include sidebar-width($sidebar-borders, $sidebar-minimized-width); + } + + .d-minimized-none, + .nav-divider, + .nav-label, + .nav-title, + .sidebar-footer, + .sidebar-form, + .sidebar-header { + display: none; + } + + // Temporary fix for this issue: https://github.com/coreui/coreui-free-bootstrap-admin-template/issues/404 + // ToDo: find better solution + .sidebar-minimizer { + position: fixed; + bottom: 0; + width: $sidebar-minimized-width; + height: $sidebar-minimizer-height; + background-color: darken($sidebar-bg, 5%); + } + // stylelint-disable no-duplicate-selectors + .sidebar-nav { + padding-bottom: $sidebar-minimizer-height; + } + // Temporary fix end + + .sidebar-minimizer::before { + width: 100%; + transform: rotate(-180deg); + } + + .nav-item { + width: $sidebar-minimized-width; + overflow: hidden; + + &:hover { + width: $sidebar-width + $sidebar-minimized-width; + overflow: visible; + + > .nav-link { + background: $sidebar-nav-link-hover-bg; + + .nav-icon { + color: $sidebar-nav-link-hover-color; + } + } + } + } + + .nav-link { + position: relative; + padding-left: 0; + margin: 0; + white-space: nowrap; + border-left: 0; + + .nav-icon { + display: block; + float: left; + width: $sidebar-minimized-height; + font-size: 18px; + } + + .badge { + position: absolute; + right: 15px; + display: none; + } + + &:hover { + width: $sidebar-width + $sidebar-minimized-width; + background: $sidebar-nav-link-hover-bg; + + .badge { + display: inline; + } + } + + &.nav-dropdown-toggle::before { + display: none; + } + } + + .nav-dropdown-items { + .nav-item { + width: $sidebar-width; + + .nav-link { + width: $sidebar-width; + } + } + } + + .nav > .nav-dropdown { + > .nav-dropdown-items { + display: none; + max-height: 1000px; + background: $sidebar-bg; + } + + &:hover { + background: $sidebar-nav-link-hover-bg; + > .nav-dropdown-items { + position: absolute; + left: $sidebar-minimized-width; + display: inline; + } + } + } + } + } +} + +*[dir="rtl"] { + .sidebar { + .nav-dropdown-toggle::before { + position: absolute; + right: auto; + left: $sidebar-nav-link-padding-x; + transform: rotate(180deg); + } + + .nav-dropdown.open { + > .nav-dropdown-toggle::before { + transform: rotate(270deg); + } + } + + .nav-link { + .nav-icon { + margin: 0 0 0 ($sidebar-nav-link-padding-x / 2); + } + + .badge { + float: left; + margin-top: 2px; + } + } + + .nav-link.nav-dropdown-toggle { + .badge { + margin-right: auto; + margin-left: 16px; + } + } + + .sidebar-minimizer::before { + right: unset; + left: 0; + transform: rotate(180deg); + } + } + + .sidebar-minimized { + .sidebar { + .nav { + list-style-type: disc; + } + + .nav-link { + padding-right: 0; + .nav-icon { + float: right; + padding: 0; + margin: 0; + } + + .badge { + right: auto; + left: 15px; + } + } + + .nav-dropdown:hover { + > .nav-dropdown-items { + right: $sidebar-minimized-width; + left: 0; + } + } + + .sidebar-minimizer::before { + transform: rotate(0deg); + } + } + } + + // Temp fix for rtl sidebar-toggler + // ToDo: find better solution + .sidebar-toggler { + margin-right: 0 !important; + } +} diff --git a/embark-ui/src/dark-theme/_switches.scss b/embark-ui/src/dark-theme/_switches.scss new file mode 100644 index 00000000..c0379ffd --- /dev/null +++ b/embark-ui/src/dark-theme/_switches.scss @@ -0,0 +1,173 @@ +// +// Base styles +// + +.switch { + display: inline-block; + width: $switch-width; + height: $switch-height; +} + +.switch-input { + display: none; +} + +.switch-slider { + position: relative; + display: block; + height: inherit; + cursor: pointer; + background-color: #fff; + border: $border-width solid $border-color; + transition: .15s ease-out; + @include border-radius($border-radius); + + &::before { + position: absolute; + top: $switch-handle-margin; + left: $switch-handle-margin; + box-sizing: border-box; + width: $switch-height - ($switch-handle-margin * 2) - ($border-width * 2); + height: $switch-height - ($switch-handle-margin * 2) - ($border-width * 2); + content: ""; + background-color: #fff; + border: 1px solid $border-color; + transition: .15s ease-out; + @include border-radius($border-radius / 2); + } +} + +.switch-input:checked ~ .switch-slider { + &::before { + transform: translateX($switch-width - $switch-height); + } +} + +.switch-input:disabled ~ .switch-slider { + cursor: not-allowed; + opacity: .5; +} + +// +// Switch Sizes +// + +.switch-lg { + @include switch-size($switch-lg-width, $switch-lg-height, $switch-lg-font-size, $switch-handle-margin); +} + +.switch-sm { + @include switch-size($switch-sm-width, $switch-sm-height, $switch-sm-font-size, $switch-handle-margin); +} + +// +// Switch with label +// +.switch-label { + width: $switch-label-width; + + .switch-slider { + &::before { + z-index: 2; + } + &::after { + position: absolute; + top: 50%; + right: 1px; + z-index: 1; + width: 50%; + margin-top: -.5em; + font-size: $switch-font-size; + font-weight: 600; + line-height: 1; + color: $gray-300; + text-align: center; + text-transform: uppercase; + content: attr(data-unchecked); + transition: inherit; + } + } + + .switch-input:checked ~ .switch-slider { + &::before { + transform: translateX($switch-label-width - $switch-height); + } + &::after { + left: 1px; + color: #fff; + content: attr(data-checked); + } + } + + // Sizes + &.switch-lg { + @include switch-size($switch-label-lg-width, $switch-lg-height, $switch-lg-font-size, $switch-handle-margin); + } + + &.switch-sm { + @include switch-size($switch-label-sm-width, $switch-sm-height, $switch-sm-font-size, $switch-handle-margin); + } +} + +// +// Switch 3d +// + +.switch-3d { + .switch-slider { + background-color: $gray-100; + border-radius: 50em; + + &::before { + top: -1px; + left: -1px; + width: $switch-height; + height: $switch-height; + border: 0; + border-radius: 50em; + box-shadow: 0 2px 5px rgba(0, 0, 0, .3); + } + } + + // Sizes + &.switch-lg { + @include switch-3d-size($switch-lg-width, $switch-lg-height); + } + + &.switch-sm { + @include switch-3d-size($switch-sm-width, $switch-sm-height); + } +} + +// +// Switch Variants +// + +@each $color, $value in $theme-colors { + //normal style + .switch-#{$color} { + @include switch-variant($value); + } + //outline style + .switch-outline-#{$color} { + @include switch-outline-variant($value); + } + //outline alternative style + .switch-outline-#{$color}-alt { + @include switch-outline-variant-alt($value); + } +} + +// +// Pill Style +// + +.switch-pill { + .switch-slider { + border-radius: 50em; + + &::before { + border-radius: 50em; + } + } +} diff --git a/embark-ui/src/dark-theme/_tables.scss b/embark-ui/src/dark-theme/_tables.scss new file mode 100644 index 00000000..aabc023f --- /dev/null +++ b/embark-ui/src/dark-theme/_tables.scss @@ -0,0 +1,20 @@ +.table-outline { + border: 1px solid $table-border-color; + + td { + vertical-align: middle; + } +} + +.table-align-middle { + + td { + vertical-align: middle; + } +} + +.table-clear { + td { + border: 0; + } +} diff --git a/embark-ui/src/dark-theme/_utilities.scss b/embark-ui/src/dark-theme/_utilities.scss new file mode 100644 index 00000000..3ff28277 --- /dev/null +++ b/embark-ui/src/dark-theme/_utilities.scss @@ -0,0 +1,4 @@ +@import "utilities/background"; +@import "utilities/borders"; +@import "utilities/display"; +@import "utilities/typography"; diff --git a/embark-ui/src/dark-theme/_variables.scss b/embark-ui/src/dark-theme/_variables.scss new file mode 100644 index 00000000..d7e35bba --- /dev/null +++ b/embark-ui/src/dark-theme/_variables.scss @@ -0,0 +1,196 @@ +// Import CoreUI default colors +@import "variables/colors"; + +// Customized Bootstrap variables +@import "variables/bootstrap/variables"; + +// Import Bootstrap variables after customization for use below +@import "node_modules/bootstrap/scss/functions"; // from bootstrap node_modules +@import "node_modules/bootstrap/scss/variables"; // from bootstrap node_modules + +// CoreUI Variables + +// stylelint-disable +$enable-sidebar-nav-rounded: false !default; +$layout-transition-speed: .25s !default; + +// Navbar + +$navbar-height: 55px !default; +$navbar-bg: #fff !default; +$navbar-border: ( + bottom: ( + size: 1px, + style: solid, + color: $border-color + ) +) !default; +$navbar-brand-width: 155px !default; +$navbar-brand-bg: transparent !default; +$navbar-brand-border: 0 !default; + +$navbar-brand-minimized-width: 50px !default; +$navbar-brand-minimized-bg: $navbar-brand-bg !default; +$navbar-brand-minimized-border: $navbar-brand-border !default; + +$navbar-color: $gray-600 !default; +$navbar-hover-color: $gray-800 !default; +$navbar-active-color: $gray-800 !default; +$navbar-disabled-color: $gray-300 !default; + +$navbar-toggler-icon: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-color}' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default; +$navbar-toggler-icon-hover: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-hover-color}' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default; + +// Sidebar + +$sidebar-width: 200px !default; +$sidebar-padding: 0 !default; +$sidebar-minimized-width: 50px !default; +$sidebar-minimized-height: $sidebar-minimized-width !default; +$sidebar-compact-width: 150px !default; +$sidebar-compact-height: $sidebar-compact-width !default; +$sidebar-color: #fff !default; +$sidebar-bg: $gray-800 !default; +$sidebar-borders: none !default; +$mobile-sidebar-width: 220px !default; + +// Sidebar Header + +$sidebar-header-height: auto !default; +$sidebar-header-bg: rgba(0,0,0,.2) !default; +$sidebar-header-padding-y: .75rem !default; +$sidebar-header-padding-x: 1rem !default; + +// Sidebar Form + +$sidebar-form-border: 0 !default; +$sidebar-form-bg: darken($sidebar-bg,10%) !default; +$sidebar-form-color: #fff !default; +$sidebar-form-placeholder-color: rgba(255,255,255,.7) !default; + +// Sidebar Navigation + +$sidebar-nav-color: #fff !default; +$sidebar-nav-title-padding-y: .75rem !default; +$sidebar-nav-title-padding-x: 1rem !default; +$sidebar-nav-title-color: $gray-200 !default; +$sidebar-nav-link-padding-y: .75rem !default; +$sidebar-nav-link-padding-x: 1rem !default; +$sidebar-nav-link-color: #fff !default; +$sidebar-nav-link-bg: transparent !default; +$sidebar-nav-link-icon-color: $gray-600 !default; +$sidebar-nav-link-borders: 0 !default; + +$sidebar-nav-link-hover-color: #fff !default; +$sidebar-nav-link-hover-bg: theme-color("primary") !default; +$sidebar-nav-link-hover-icon-color: #fff !default; +$sidebar-nav-link-hover-borders: 0 !default; + +$sidebar-nav-link-active-color: #fff !default; +$sidebar-nav-link-active-bg: lighten($sidebar-bg, 5%) !default; +$sidebar-nav-link-active-icon-color: theme-color("primary") !default; +$sidebar-nav-link-active-borders: 0 !default; + +$sidebar-nav-dropdown-color: #fff !default; +$sidebar-nav-dropdown-bg: rgba(0,0,0,.2) !default; +$sidebar-nav-dropdown-borders: 0 !default; +$sidebar-nav-dropdown-indicator-color:$gray-600 !default; +$sidebar-nav-dropdown-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-nav-dropdown-indicator-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"), "#", "%23") !default; +$sidebar-nav-dropdown-indicator-hover-color:$sidebar-nav-link-hover-color; +$sidebar-nav-dropdown-indicator-hover:str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-nav-dropdown-indicator-hover-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"), "#", "%23") !default; + +// Sidebar Footer + +$sidebar-footer-height: auto !default; +$sidebar-footer-bg: rgba(0,0,0,.2) !default; +$sidebar-footer-padding-y: .75rem !default; +$sidebar-footer-padding-x: 1rem !default; +$sidebar-footer-borders: 0 !default; + +// Sidebar Minimizer + +$sidebar-minimizer-height: 50px !default; +$sidebar-minimizer-bg: rgba(0,0,0,.2) !default; +$sidebar-minimizer-borders: 0 !default; +$sidebar-minimizer-indicator-color: $gray-600 !default; +$sidebar-minimizer-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-minimizer-indicator-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"), "#", "%23") !default; +$sidebar-minimizer-hover-bg: rgba(0,0,0,.3) !default; +$sidebar-minimizer-hover-indicator-color:$sidebar-nav-link-hover-color !default; +$sidebar-minimizer-hover-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-minimizer-hover-indicator-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"), "#", "%23") !default; + +// Breadcrumb +$breadcrumb-borders: ( + bottom: ( + size: 1px, + style: solid, + color: $border-color + ) +) !default; + +// Aside + +$aside-menu-width: 250px !default; +$aside-menu-color: $gray-800 !default; +$aside-menu-bg: #fff !default; +$aside-menu-borders: ( + left: ( + size: 1px, + style: solid, + color: $border-color + ) +) !default; + +$aside-menu-nav-padding-y: .75rem !default; +$aside-menu-nav-padding-x: 1rem !default; + +// Footer + +$footer-height: 50px !default; +$footer-bg: $gray-100 !default; +$footer-color: $body-color !default; +$footer-borders: ( + top: ( + size: 1px, + style: solid, + color: $border-color + ) +) !default; + +// Avatars + +$avatar-width: 36px !default; +$avatar-status-width: 10px !default; + +$avatar-lg-width: 72px !default; +$avatar-lg-status-width: 12px !default; + +$avatar-sm-width: 24px !default; +$avatar-sm-status-width: 8px !default; + +$avatar-xs-width: 20px !default; +$avatar-xs-status-width: 8px !default; + +// Cards + +$card-icon-bg: transparent !default; +$card-icon-color: $body-color !default; + +// Switches + +$switch-width: 40px !default; +$switch-height: 26px !default; +$switch-font-size: 10px !default; + +$switch-lg-width: 48px !default; +$switch-lg-height: 30px !default; +$switch-lg-font-size: 12px !default; + +$switch-sm-width: 32px !default; +$switch-sm-height: 22px !default; +$switch-sm-font-size: 8px !default; + +$switch-label-width: 48px !default; +$switch-label-lg-width: 56px !default; +$switch-label-sm-width: 40px !default; + +$switch-handle-margin: 2px !default; diff --git a/embark-ui/src/dark-theme/_vendors.scss b/embark-ui/src/dark-theme/_vendors.scss new file mode 100644 index 00000000..08497e2c --- /dev/null +++ b/embark-ui/src/dark-theme/_vendors.scss @@ -0,0 +1 @@ +@import "vendors/perfect-scrollbar"; diff --git a/embark-ui/src/dark-theme/_widgets.scss b/embark-ui/src/dark-theme/_widgets.scss new file mode 100644 index 00000000..c15f26f4 --- /dev/null +++ b/embark-ui/src/dark-theme/_widgets.scss @@ -0,0 +1 @@ +// ... diff --git a/embark-ui/src/dark-theme/bootstrap.scss b/embark-ui/src/dark-theme/bootstrap.scss new file mode 100644 index 00000000..8b642cd4 --- /dev/null +++ b/embark-ui/src/dark-theme/bootstrap.scss @@ -0,0 +1,4 @@ +// Override Boostrap variables +@import "variables"; +// Import Bootstrap source files +@import "node_modules/bootstrap/scss/bootstrap"; diff --git a/embark-ui/src/dark-theme/bootstrap/_alert.scss b/embark-ui/src/dark-theme/bootstrap/_alert.scss new file mode 100644 index 00000000..dd43e237 --- /dev/null +++ b/embark-ui/src/dark-theme/bootstrap/_alert.scss @@ -0,0 +1,51 @@ +// +// Base styles +// + +.alert { + position: relative; + padding: $alert-padding-y $alert-padding-x; + margin-bottom: $alert-margin-bottom; + border: $alert-border-width solid transparent; + @include border-radius($alert-border-radius); +} + +// Headings for larger alerts +.alert-heading { + // Specified to prevent conflicts of changing $headings-color + color: inherit; +} + +// Provide class for links that match alerts +.alert-link { + font-weight: $alert-link-font-weight; +} + + +// Dismissible alerts +// +// Expand the right padding and account for the close button's positioning. + +.alert-dismissible { + padding-right: ($close-font-size + $alert-padding-x * 2); + + // Adjust close link position + .close { + position: absolute; + top: 0; + right: 0; + padding: $alert-padding-y $alert-padding-x; + color: inherit; + } +} + + +// Alternate styles +// +// Generate contextual modifier classes for colorizing the alert. + +@each $color, $value in $theme-colors { + .alert-#{$color} { + @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level)); + } +} diff --git a/embark-ui/src/dark-theme/bootstrap/_badge.scss b/embark-ui/src/dark-theme/bootstrap/_badge.scss new file mode 100644 index 00000000..b87a1b00 --- /dev/null +++ b/embark-ui/src/dark-theme/bootstrap/_badge.scss @@ -0,0 +1,47 @@ +// Base class +// +// Requires one of the contextual, color modifier classes for `color` and +// `background-color`. + +.badge { + display: inline-block; + padding: $badge-padding-y $badge-padding-x; + font-size: $badge-font-size; + font-weight: $badge-font-weight; + line-height: 1; + text-align: center; + white-space: nowrap; + vertical-align: baseline; + @include border-radius($badge-border-radius); + + // Empty badges collapse automatically + &:empty { + display: none; + } +} + +// Quick fix for badges in buttons +.btn .badge { + position: relative; + top: -1px; +} + +// Pill badges +// +// Make them extra rounded with a modifier to replace v3's badges. + +.badge-pill { + padding-right: $badge-pill-padding-x; + padding-left: $badge-pill-padding-x; + @include border-radius($badge-pill-border-radius); +} + +// Colors +// +// Contextual variations (linked badges get darker on :hover). + +@each $color, $value in $theme-colors { + .badge-#{$color} { + @include badge-variant($value); + } +} diff --git a/embark-ui/src/dark-theme/bootstrap/_breadcrumb.scss b/embark-ui/src/dark-theme/bootstrap/_breadcrumb.scss new file mode 100644 index 00000000..be309506 --- /dev/null +++ b/embark-ui/src/dark-theme/bootstrap/_breadcrumb.scss @@ -0,0 +1,41 @@ +.breadcrumb { + display: flex; + flex-wrap: wrap; + padding: $breadcrumb-padding-y $breadcrumb-padding-x; + margin-bottom: $breadcrumb-margin-bottom; + list-style: none; + background-color: $breadcrumb-bg; + @include border-radius($breadcrumb-border-radius); +} + +.breadcrumb-item { + // The separator between breadcrumbs (by default, a forward-slash: "/") + + .breadcrumb-item { + padding-left: $breadcrumb-item-padding; + + &::before { + display: inline-block; // Suppress underlining of the separator in modern browsers + padding-right: $breadcrumb-item-padding; + color: $breadcrumb-divider-color; + content: $breadcrumb-divider; + } + } + + // IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built + // without `