Demo refactor
This commit is contained in:
chapoi
parent
3d341a4735
commit
445089cb74
|
|
@ -9,22 +9,22 @@
|
|||
$item-height: 40px;
|
||||
$icon-opacity: 0.7;
|
||||
|
||||
.top-menu {
|
||||
.d-top-menu {
|
||||
background: fallback($Menu_background, $primary);
|
||||
width: 100%;
|
||||
|
||||
.menu-content {
|
||||
&__content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: if($Invert_position == "true", flex-end, flex-start);
|
||||
}
|
||||
|
||||
.menu-items {
|
||||
&__items {
|
||||
display: flex;
|
||||
height: $item-height;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
&__item {
|
||||
position: relative;
|
||||
color: fallback($Menu_item_color, $secondary);
|
||||
border: none;
|
||||
|
|
@ -44,6 +44,7 @@ $icon-opacity: 0.7;
|
|||
.d-icon-caret-right {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.d-header-dropdown {
|
||||
display: block;
|
||||
top: $item-height;
|
||||
|
|
@ -70,18 +71,19 @@ $icon-opacity: 0.7;
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.d-icon-caret-right {
|
||||
margin-left: 0.25em;
|
||||
transition: transform 0.15s ease-in-out;
|
||||
.d-icon-caret-right {
|
||||
//margin-left: 0.25em; //ideally, this kind of tiny tweaks can be done by utility classes
|
||||
transition: transform 0.15s ease-in-out;
|
||||
|
||||
.rtl & {
|
||||
margin-left: 0em;
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
.rtl & {
|
||||
margin-left: 0em;
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
//existing components leave as-is
|
||||
.d-header-dropdown {
|
||||
position: absolute;
|
||||
display: none;
|
||||
|
|
@ -95,7 +97,7 @@ $icon-opacity: 0.7;
|
|||
list-style: none;
|
||||
}
|
||||
|
||||
.submenu-link {
|
||||
&__submenu-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: fallback($Submenu_item_color, $primary);
|
||||
|
|
@ -109,11 +111,12 @@ $icon-opacity: 0.7;
|
|||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
&__divider {
|
||||
border-top: solid 1px fallback($Divider_color, $primary-low);
|
||||
margin: 0.25em auto;
|
||||
}
|
||||
|
||||
//special case
|
||||
.d-icon {
|
||||
opacity: $icon-opacity;
|
||||
min-width: 1em;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,15 @@
|
|||
$item-height: 40px;
|
||||
|
||||
@if $Fixed_mode == "true" {
|
||||
.top-menu {
|
||||
.d-top-menu {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: z("header") + 1;
|
||||
|
||||
&__item.vmo {
|
||||
//changing vdo classname is out of scope, but would ideally be a modifier so -vmo
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.d-header-wrap {
|
||||
|
|
@ -15,9 +20,3 @@ $item-height: 40px;
|
|||
padding-top: calc(1.8em + #{$item-height});
|
||||
}
|
||||
}
|
||||
|
||||
.top-menu {
|
||||
.menu-item.vmo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,25 +1,33 @@
|
|||
<div id='top-menu' class='top-menu'>
|
||||
<div class='menu-content wrap'>
|
||||
<div class="menu-placeholder">
|
||||
<div class="menu-item-container">
|
||||
<div class="menu-items">
|
||||
<div id="top-menu" class="d-top-menu">
|
||||
<div class="d-top-menu__content wrap">
|
||||
<div class="d-top-menu__placeholder">
|
||||
<div class="d-top-menu__item-container">
|
||||
<div class="d-top-menu__items">
|
||||
{{#each menuItems as |item|}}
|
||||
<a class="menu-item {{item.view}} {{item.className}}" title="{{item.title}}">
|
||||
<a
|
||||
class="d-top-menu__item {{item.view}} {{item.className}}"
|
||||
title="{{item.title}}"
|
||||
>
|
||||
{{#if item.icon}}
|
||||
{{d-icon item.icon}}
|
||||
{{/if}}
|
||||
{{item.text}}
|
||||
{{#if showCaret}}
|
||||
{{d-icon "caret-right"}}
|
||||
{{d-icon "caret-right" class="u-ml025"}}
|
||||
{{/if}}
|
||||
<div class="d-header-dropdown">
|
||||
<ul class="d-dropdown-menu">
|
||||
{{#each item.childItems as |child|}}
|
||||
{{#if child.divider}}
|
||||
<li class='divider'></li>
|
||||
<li class="divider"></li>
|
||||
{{else}}
|
||||
<li class="submenu-item {{child.className}}">
|
||||
<a target="{{child.target}}" title="{{child.title}}" class="submenu-link" href="{{child.href}}">
|
||||
<li class="d-top-menu__submenu-item {{child.className}}">
|
||||
<a
|
||||
target="{{child.target}}"
|
||||
title="{{child.title}}"
|
||||
class="d-top-menu__submenu-link"
|
||||
href="{{child.href}}"
|
||||
>
|
||||
{{#if child.icon}}
|
||||
{{d-icon child.icon}}
|
||||
{{/if}}
|
||||
|
|
@ -36,4 +44,4 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,26 +1,27 @@
|
|||
$item-height: 40px;
|
||||
|
||||
.menu-item-container {
|
||||
overflow-x: scroll;
|
||||
height: 100vh;
|
||||
pointer-events: none;
|
||||
.d-top-menu {
|
||||
&__item-container {
|
||||
overflow-x: scroll;
|
||||
height: 100vh;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.menu-items {
|
||||
&__items {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: $item-height;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-placeholder {
|
||||
height: $item-height;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.top-menu {
|
||||
.menu-item.vdo {
|
||||
&__item.vdo {
|
||||
//changing vdo classname is out of scope, but would ideally be a modifier so -vdo
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__placeholder {
|
||||
height: $item-height;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue