diff options
Diffstat (limited to 'packages/anastasis-webui/src/scss/_nav-bar.scss')
-rw-r--r-- | packages/anastasis-webui/src/scss/_nav-bar.scss | 144 |
1 files changed, 144 insertions, 0 deletions
diff --git a/packages/anastasis-webui/src/scss/_nav-bar.scss b/packages/anastasis-webui/src/scss/_nav-bar.scss new file mode 100644 index 000000000..09f1e2326 --- /dev/null +++ b/packages/anastasis-webui/src/scss/_nav-bar.scss @@ -0,0 +1,144 @@ +/* + This file is part of GNU Taler + (C) 2021 Taler Systems S.A. + + GNU Taler is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> + */ + + /** + * + * @author Sebastian Javier Marchano (sebasjm) + */ + +nav.navbar { + box-shadow: $navbar-box-shadow; + + .navbar-item { + &.has-user-avatar { + .is-user-avatar { + margin-right: $default-padding * .5; + display: inline-flex; + width: $navbar-avatar-size; + height: $navbar-avatar-size; + } + } + + &.has-divider { + border-right: $navbar-divider-border; + } + + &.no-left-space { + padding-left: 0; + } + + &.has-dropdown { + padding-right: 0; + padding-left: 0; + + .navbar-link { + padding-right: $navbar-item-h-padding; + padding-left: $navbar-item-h-padding; + } + } + + &.has-control { + padding-top: 0; + padding-bottom: 0; + } + + .control { + .input { + color: $navbar-input-color; + border: 0; + box-shadow: none; + background: transparent; + + &::placeholder { + color: $navbar-input-placeholder-color; + } + } + } + } +} + +@include touch { + nav.navbar { + display: flex; + padding-right: 0; + + .navbar-brand { + flex: 1; + + &.is-right { + flex: none; + } + } + + .navbar-item { + &.no-left-space-touch { + padding-left: 0; + } + } + + .navbar-menu { + position: absolute; + width: 100vw; + padding-top: 0; + top: $navbar-height; + left: 0; + + .navbar-item { + .icon:first-child { + margin-right: $default-padding * .5; + } + + &.has-dropdown { + >.navbar-link { + background-color: $white-ter; + .icon:last-child { + display: none; + } + } + } + + &.has-user-avatar { + >.navbar-link { + display: flex; + align-items: center; + padding-top: $default-padding * .5; + padding-bottom: $default-padding * .5; + } + } + } + } + } +} + +@include desktop { + nav.navbar { + .navbar-item { + padding-right: $navbar-item-h-padding; + padding-left: $navbar-item-h-padding; + + &:not(.is-desktop-icon-only) { + .icon:first-child { + margin-right: $default-padding * .5; + } + } + &.is-desktop-icon-only { + span:not(.icon) { + display: none; + } + } + } + } +} |