nfp_sites/app/menu/menu.scss

182 lines
3.4 KiB
SCSS
Raw Normal View History

2019-02-20 16:10:37 +00:00
@import '../_common';
#nav {
display: flex;
flex-direction: column;
.top {
2019-09-14 19:03:38 +00:00
background: $primary-dark-bg;
2019-02-20 16:10:37 +00:00
color: $primary-dark-fg;
2019-09-14 19:03:38 +00:00
padding: 0 10px 0 0;
2019-10-02 21:48:50 +00:00
min-height: 100px;
2019-02-20 16:10:37 +00:00
display: flex;
button.dark {
background: transparent;
color: $secondary-light-bg;
border: none;
cursor: pointer;
font-weight: bold;
}
2019-09-14 19:03:38 +00:00
a.logo {
background: 25px center no-repeat transparent;
background-size: auto 91px;
2019-09-14 19:03:38 +00:00
padding-left: 120px;
display: flex;
color: $primary-dark-fg;
text-decoration: none;
2019-10-01 03:45:44 +00:00
background-image: url("/assets/img/logo_small.jpg");
2019-09-14 19:03:38 +00:00
}
2019-02-20 16:10:37 +00:00
h2 {
align-self: center;
font-size: 30px;
}
aside {
2019-09-14 19:03:38 +00:00
flex-grow: 2;
2019-02-20 16:10:37 +00:00
display: flex;
flex-direction: column;
2019-09-14 19:03:38 +00:00
align-items: flex-end;
2019-02-20 16:10:37 +00:00
padding: 10px 0;
p {
font-size: 0.8em;
2019-09-13 13:33:10 +00:00
color: $meta-light-fg;
2019-02-20 16:10:37 +00:00
padding-bottom: 5px;
2019-09-14 19:03:38 +00:00
a {
margin-left: 5px;
}
button {
font-size: 0.8em;
}
2019-02-20 16:10:37 +00:00
}
a, a:visited {
font-weight: bold;
text-align: center;
color: $secondary-light-bg;
font-size: 0.8em;
line-height: 1.4em;
text-decoration: none;
}
.adminlinks {
display: flex;
justify-content: center;
max-width: 200px;
flex-wrap: wrap;
a {
padding: 3px 5px;
min-width: 100px;
}
}
2019-10-01 03:45:44 +00:00
.loading-spinner {
position: relative;
width: 200px;
}
2019-02-20 16:10:37 +00:00
}
}
nav {
display: flex;
background: $primary-light-bg;
color: $primary-light-fg;
2019-09-13 13:33:10 +00:00
.hassubmenu {
flex-grow: 2;
flex-basis: 0;
display: flex;
}
2019-02-20 16:10:37 +00:00
a, a:visited {
flex-grow: 2;
flex-basis: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: $primary-light-fg;
padding: 10px;
font-size: 0.9em;
text-decoration: none;
&.active {
border-bottom: 3px solid $secondary-bg;
}
}
}
2019-09-13 13:33:10 +00:00
.loading-spinner {
position: relative;
flex-grow: 2;
flex-basis: 0;
}
.menuerror {
background: $primary-bg;
text-align: center;
padding: 10px;
color: $primary-fg-url;
2019-09-13 13:33:10 +00:00
font-weight: bold;
}
2019-02-20 16:10:37 +00:00
}
2019-10-01 03:45:44 +00:00
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
#nav .top a.logo {
background-image: url("/assets/img/logo.jpg");
}
}
.darkmodeon {
#nav {
.top {
background: $dark_primary-dark-bg;
color: $dark_primary-dark-fg;
a.logo {
color: $dark_primary-dark-fg;
}
aside {
p {
color: $dark_meta-light-fg;
}
a, a:visited {
color: $dark_secondary-light-bg;
}
}
}
nav {
background: $dark_primary-light-bg;
color: $dark_primary-light-fg;
a, a:visited {
color: $dark_primary-light-fg;
&.active {
border-bottom: 3px solid $dark_secondary-bg;
}
}
}
.menuerror {
background: $dark_primary-bg;
color: $dark_primary-fg-url;
}
}
}