diff options
Diffstat (limited to 'webapp/src/app/@theme/components/header/header.component.scss')
-rw-r--r-- | webapp/src/app/@theme/components/header/header.component.scss | 115 |
1 files changed, 115 insertions, 0 deletions
diff --git a/webapp/src/app/@theme/components/header/header.component.scss b/webapp/src/app/@theme/components/header/header.component.scss new file mode 100644 index 0000000..647311b --- /dev/null +++ b/webapp/src/app/@theme/components/header/header.component.scss @@ -0,0 +1,115 @@ +@import '../../styles/themes'; +@import '~bootstrap/scss/mixins/breakpoints'; +@import '~@nebular/theme/styles/global/bootstrap/breakpoints'; + +@include nb-install-component() { + display: flex; + justify-content: space-between; + width: 100%; + + .left { + display: flex; + width: 100%; + order: 0; + flex-direction: row; + } + .right { + order: 1; + flex-direction: row-reverse; + } + + .logo-containter { + display: flex; + align-items: center; + } + + .control-item { + display: block; + } + + .header-container { + display: flex; + align-items: center; + width: 100%; + + .navigation { + padding-right: nb-theme(padding); + font-size: 2.5rem; + text-decoration: none; + + i { + display: block; + } + + } + + .logo { + padding: 0 nb-theme(padding); + font-size: 1.75rem; + font-weight: nb-theme(font-weight-bolder); + border-left: 1px solid nb-theme(separator); + white-space: nowrap; + + span { + font-weight: nb-theme(font-weight-normal); + } + } + } + + .toggle-layout /deep/ a { + display: block; + text-decoration: none; + line-height: 1; + + i { + color: nb-theme(color-fg-highlight); + font-size: 2.25rem; + } + } + + @include media-breakpoint-down(md) { + + nb-action:not(.toggle-layout) { + border: none; + } + + .control-item { + display: none; + } + + .toggle-layout { + padding: 0; + } + } + + @include media-breakpoint-down(sm) { + + nb-user /deep/ .user-name { + display: none; + } + } + + @include media-breakpoint-down(is) { + + .header-container { + .logo { + font-size: 1.25rem; + } + } + + .toggle-layout { + display: none; + } + + nb-action:not(.toggle-layout) { + padding: 0; + } + } + + @include media-breakpoint-down(xs) { + .right /deep/ { + display: none; + } + } +} + |