145 lines
2.9 KiB
SCSS
145 lines
2.9 KiB
SCSS
|
/*
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|