app/assets/stylesheets/alchemy/navigation.scss
#top_menu {
position: fixed;
top: 0;
margin-left: $collapsed-main-menu-width;
padding-right: $collapsed-main-menu-width;
z-index: 20;
width: 100%;
@extend .disable-user-select;
@media screen and (min-width: $large-screen-break-point) {
body:not(.collapsed-menu) & {
margin-left: $main-menu-width;
padding-right: $main-menu-width;
}
}
}
#left_menu {
z-index: 30;
height: 100%;
position: fixed;
top: 0;
left: 0;
width: $collapsed-main-menu-width;
background-color: $main-menu-bg-color;
@extend .disable-user-select;
@media screen and (min-width: $large-screen-break-point) {
body:not(.collapsed-menu) & {
width: $main-menu-width;
}
}
}
#main_navi {
max-height: 100vh;
padding-top: 28px;
padding-bottom: 80px;
@media screen and (max-width: $medium-screen-break-point) {
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
}
.main_navi_entry {
position: relative;
display: block;
line-height: 46px;
margin-bottom: 3 * $default-padding;
background-color: transparent;
transition: background-color $transition-duration $transition-easing;
&:hover {
background-color: $main-menu-active-bg-color;
.sub_navigation {
visibility: visible;
opacity: 1;
background-color: $main-menu-active-bg-color;
}
}
&.active,
&:hover {
background-color: $main-menu-active-bg-color;
cursor: default;
a,
.icon {
color: $main-menu-active-text-color;
text-decoration: none;
text-shadow: none;
&:focus {
@include default-focus-style(
$box-shadow: inset 0 0 0 2px $main-menu-active-text-color,
$border-radius: 0
);
}
}
}
label {
position: absolute;
top: 0;
left: $collapsed-main-menu-width - 1;
width: auto;
padding-left: 4 * $default-padding;
padding-right: 4 * $default-padding;
visibility: hidden;
opacity: 0;
background-color: $main-menu-active-bg-color;
transition: opacity $transition-duration $transition-easing;
vertical-align: middle;
cursor: pointer;
@include truncate($collapsed-main-menu-entry-max-width, $wrap: nowrap);
@media screen and (min-width: $large-screen-break-point) {
body:not(.collapsed-menu) & {
position: static;
visibility: visible;
max-width: $main-menu-entry-max-width;
opacity: 1;
padding-left: 2 * $default-padding;
background-color: transparent;
}
}
}
&.has_sub_navigation label {
display: none;
@media screen and (min-width: $large-screen-break-point) {
body:not(.collapsed-menu) & {
display: inline-block;
}
}
}
&:hover label {
visibility: visible;
opacity: 1;
}
svg {
fill: currentColor;
transition: fill $transition-duration $transition-easing;
}
img,
svg,
.icon {
display: inline-flex;
width: var(--icon-size-xxl);
height: var(--icon-size-xxl);
align-items: center;
justify-content: center;
}
img {
border-style: none;
vertical-align: -0.6em;
}
a {
display: flex;
align-items: center;
height: 46px;
padding-left: 14px;
font-weight: bold;
color: $main-menu-text-color;
transition: color $transition-duration $transition-easing;
@include antialiased-font-smoothing;
&:focus {
@include default-focus-style(
$box-shadow: inset 0 0 0 2px $focus-color,
$border-radius: 0
);
}
}
}
.sub_navigation {
position: absolute;
width: auto;
left: $collapsed-main-menu-width;
top: 0;
visibility: hidden;
opacity: 0;
transition: opacity $transition-duration $transition-easing;
}
.subnavi_tab {
&:first-of-type {
border-left: 1px solid $main-menu-active-bg-color;
margin-left: -1px;
}
a {
padding-left: 4 * $default-padding;
padding-right: 4 * $default-padding;
background-color: transparent;
transition: background-color $transition-duration $transition-easing;
@include truncate($main-menu-width, $display: block, $wrap: nowrap);
}
&.active a,
a:hover {
background-color: darken($dark-orange, 5%);
}
}
@media screen and (min-width: $large-screen-break-point) {
body:not(.collapsed-menu) {
.sub_navigation {
left: $main-menu-width;
}
.main_navi_entry.active {
.sub_navigation {
position: static;
visibility: visible;
opacity: 1;
width: auto;
}
.subnavi_tab {
line-height: 24px;
a {
padding: 8px 4px 8px 42px;
}
}
}
}
}
#locked_pages {
display: flex;
flex-grow: 1;
flex-wrap: nowrap;
height: $header-height;
label {
float: left;
font-size: $small-font-size;
line-height: 27px;
height: 27px;
margin-left: 8px;
margin-right: 4px;
}
img {
float: left;
}
.subnavi_tab > a {
padding-right: 0;
}
}
.locked_page {
display: flex;
align-items: center;
flex-wrap: nowrap;
color: #444;
border-right: $default-border;
border-bottom: $default-border;
form {
align-self: center;
justify-self: flex-end;
margin-right: $default-padding;
line-height: 1;
}
&:hover {
color: $text-color;
text-decoration: none;
}
> a {
display: flex;
align-items: end;
cursor: pointer;
padding: $default-padding 2 * $default-padding;
&:focus {
@include default-focus-style($box-shadow: inset 0 0 0 2px $focus-color);
}
}
.icon.close {
vertical-align: text-bottom;
text-shadow: $text-shadow-light;
}
.page_name {
margin-right: $default-margin;
text-shadow: $text-shadow-light;
}
.page_language,
.page_site {
display: inline-block;
color: $muted-text-color;
font-size: $small-font-size;
margin-right: $default-margin;
}
.page_language {
text-transform: uppercase;
}
}