250 lines
4.1 KiB
Text
250 lines
4.1 KiB
Text
@menu-spacing: 3 * @spacing;
|
|
@menu-spacing-mobile: 1.5 * @spacing;
|
|
|
|
.AppMenu {
|
|
background-color: @light-gray-bg;
|
|
|
|
width: @content-margin-min;
|
|
@media (min-width: 2401px) {
|
|
width: @content-margin-max;
|
|
}
|
|
@media (min-width: 1100px) and (max-width: 2400px) {
|
|
width: @content-margin;
|
|
}
|
|
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14),
|
|
0px 1px 18px 0px rgba(0, 0, 0, 0.12);
|
|
transition: all 0.5s ease;
|
|
z-index: 0;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
|
|
&:hover {
|
|
z-index: 2;
|
|
|
|
width: @menu-size;
|
|
@media (min-width: 2401px) {
|
|
width: @content-margin-max;
|
|
}
|
|
@media (min-width: 1100px) and (max-width: 2400px) {
|
|
width: @content-margin-max;
|
|
}
|
|
}
|
|
}
|
|
.AppMenu__container {
|
|
width: @menu-size;
|
|
@media (min-width: 2401px) {
|
|
width: @content-margin-max;
|
|
}
|
|
@media (min-width: 1100px) and (max-width: 2400px) {
|
|
width: @content-margin-max;
|
|
}
|
|
padding: 0 @menu-spacing @menu-spacing @spacing * 2;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 568px;
|
|
}
|
|
|
|
.touch .AppMenu {
|
|
width: @menu-size;
|
|
opacity: 0;
|
|
z-index: 0;
|
|
transition: z-index 0s ease 0s, opacity 0s ease 0.3s;
|
|
}
|
|
.touch .AppMenu__container {
|
|
padding: 0 @menu-spacing-mobile;
|
|
}
|
|
.touch .AppMenu.open {
|
|
display: flex;
|
|
z-index: 3;
|
|
opacity: 1;
|
|
transition: z-index 0s ease 0.3s;
|
|
}
|
|
@media @tablet, @phone {
|
|
.AppMenu,
|
|
.touch .AppMenu {
|
|
width: @menu-size;
|
|
opacity: 0;
|
|
z-index: 0;
|
|
transition: z-index 0s ease 0s, opacity 0s ease 0.3s;
|
|
}
|
|
.AppMenu__container,
|
|
.tocuh .AppMenu__container {
|
|
padding: 0 @menu-spacing-mobile;
|
|
}
|
|
.AppMenu.open,
|
|
.touch .AppMenu.open {
|
|
display: flex;
|
|
z-index: 3;
|
|
opacity: 1;
|
|
transition: z-index 0s ease 0.3s;
|
|
}
|
|
}
|
|
|
|
// NAV
|
|
.MenNav {
|
|
margin-top: @menu-spacing;
|
|
margin-bottom: @menu-spacing;
|
|
@media @tablet, @phone {
|
|
margin-top: @menu-spacing-mobile;
|
|
margin-bottom: @menu-spacing-mobile;
|
|
}
|
|
}
|
|
.MenuNavItem a,
|
|
.MenuTitle--small {
|
|
margin: 0px;
|
|
font-size: @medium-font-size;
|
|
|
|
&:hover,
|
|
&.active {
|
|
color: @hovered-color;
|
|
}
|
|
}
|
|
.MenuTitle {
|
|
display: flex;
|
|
flex-direction: column;
|
|
&:hover {
|
|
color: @hovered-color;
|
|
}
|
|
&.reverted {
|
|
flex-flow: column-reverse;
|
|
}
|
|
}
|
|
|
|
.MenuTitle--big h1.big-text {
|
|
color: inherit;
|
|
margin: 0;
|
|
font-size: @big-font-size;
|
|
transform: translateY(-2px);
|
|
}
|
|
.MenuTitle--small {
|
|
color: inherit;
|
|
margin-top: -9px;
|
|
}
|
|
|
|
// TAGS
|
|
.MenuBody {
|
|
overflow: auto;
|
|
}
|
|
|
|
.Tag button {
|
|
background-color: transparent;
|
|
border: 0.5px solid black;
|
|
border-radius: 2px;
|
|
margin: 3px;
|
|
padding: 4px 8px;
|
|
cursor: pointer;
|
|
&:before {
|
|
content: '#';
|
|
}
|
|
&:hover,
|
|
&.selected {
|
|
background-color: @accent-color;
|
|
}
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
.TagWithoutHash button {
|
|
background-color: transparent;
|
|
border: 0.5px solid black;
|
|
border-radius: 2px;
|
|
margin: 3px;
|
|
padding: 4px 8px;
|
|
cursor: pointer;
|
|
&:hover,
|
|
&.selected {
|
|
background-color: @accent-color;
|
|
}
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
}
|
|
.touch .Tag button {
|
|
padding: 8px 12px;
|
|
&:hover {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
.touch .Tag button.selected {
|
|
&:hover {
|
|
background-color: @accent-color;
|
|
}
|
|
}
|
|
|
|
.TagGroup {
|
|
margin-bottom: 10px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
// FOOTER
|
|
.MenuFooter {
|
|
margin-top: auto;
|
|
padding-top: @menu-spacing;
|
|
@media @tablet, @phone {
|
|
padding-top: @menu-spacing-mobile;
|
|
}
|
|
}
|
|
.MenuFooter-museum-link {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
line-height: 0.9;
|
|
|
|
&:hover {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
img {
|
|
max-width: 85px;
|
|
margin-right: 15px;
|
|
}
|
|
}
|
|
.MenuFooter hr {
|
|
margin-top: @spacing * 1.5;
|
|
height: 5px;
|
|
background: black;
|
|
border: none;
|
|
}
|
|
.LangSelector {
|
|
margin-top: @spacing * 1.5;
|
|
}
|
|
.MenuFooter span {
|
|
margin-right: 1.5 * @spacing;
|
|
cursor: pointer;
|
|
&:hover,
|
|
&.activeLang {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
.SitesTabGroup {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.SitesTab {
|
|
border-left: 1px solid black;
|
|
border-right: 1px solid black;
|
|
border-bottom: 1px solid black;
|
|
|
|
border-bottom-left-radius: 5px;
|
|
border-bottom-right-radius: 5px;
|
|
padding: 2px 20px 2px 20px;
|
|
display: inline;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.SitesTab:nth-child(1n+2) {
|
|
border-left: 0;
|
|
}
|
|
|
|
.SitesTab.active {
|
|
background-color: #ffe600;
|
|
}
|