Skip to content

Commit

Permalink
made sub-sub items float on the left side in favor of missing space (…
Browse files Browse the repository at this point in the history 
…via css).
  • Loading branch information
@agitator
Markus Hilbert authored and agitator committed Jun 16, 2017
1 parent 0cc18c7 commit 1098874
Show file tree
Hide file tree
Showing 5 changed files with 267 additions and 144 deletions.
2 changes: 1 addition & 1 deletion DEVELOP.rst
View file
Expand Up @@ -9,5 +9,5 @@ To udpate/generate css from less, use the following snippet

::

lessc --modify-var="plone-link-color=#007bb1" --source-map=webcouturier.dropdownmenu-compiled.css.map dropdown.less webcouturier.dropdownmenu-compiled.css
lessc --modify-var="plone-link-color=#007bb1" --source-map=dropdownmenu-compiled.css.map dropdown.less dropdownmenu-compiled.css

203 changes: 101 additions & 102 deletions src/webcouturier/dropdownmenu/browser/static/dropdown.less
View file
Expand Up @@ -6,17 +6,16 @@

// a { outline: 1px dotted white; margin: 0.25em; }
.plone-navbar-nav li {
.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: (@plone-font-size-base * .25) dashed;
border-right: (@plone-font-size-base * .25) solid transparent;
border-left: (@plone-font-size-base * .25) solid transparent;
}

.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: (@plone-font-size-base * .25) dashed;
border-right: (@plone-font-size-base * .25) solid transparent;
border-left: (@plone-font-size-base * .25) solid transparent;
}
&:hover > .submenu {
display: block;
}
Expand Down Expand Up @@ -88,113 +87,113 @@
width: 100%;
&:hover ul {
top: 0;
left: 100%;
left: -100%;
width: 100%
}
}
}
}


@media (max-width: 768px) {
.plone-navbar-collapse.in {
.opener {
background: transparent;
border: 1px solid white;
border-radius: (@plone-font-size-base * .25);
float: right;
text-align: center;
width: @plone-font-size-base * 2;
height: @plone-font-size-base * 2;
margin-top: -(@plone-font-size-base * 0.4);
margin-right: -(@plone-font-size-base * 0.7);
.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 0;
margin-bottom: 0.2em;
vertical-align: bottom;
border-top: 0.5em dashed;
border-right: 0.5em solid transparent;
border-left: 0.5em solid transparent;
border-bottom: 0;
.plone-navbar-collapse.in {
.opener {
background: transparent;
border: 1px solid white;
border-radius: (@plone-font-size-base * .25);
float: right;
text-align: center;
width: @plone-font-size-base * 2;
height: @plone-font-size-base * 2;
margin-top: -(@plone-font-size-base * 0.4);
margin-right: -(@plone-font-size-base * 0.7);
.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 0;
margin-bottom: 0.2em;
vertical-align: bottom;
border-top: 0.5em dashed;
border-right: 0.5em solid transparent;
border-left: 0.5em solid transparent;
border-bottom: 0;
}
}
}
.menu-open { display: block!important; }
.plone-navbar-nav {
margin: 0 -15px 0;
}
li {
&:hover > .submenu {
display: none;
.menu-open { display: block!important; }
.plone-navbar-nav {
margin: 0 -15px 0;
}
.submenu {
.opener {
background: transparent;
border: 1px solid white;
border-radius: (@plone-font-size-base * .25);
float: right;
text-align: center;
width: @plone-font-size-base * 2;
height: @plone-font-size-base * 2;
margin-top: -(@plone-font-size-base * 0.4);
margin-right: -(@plone-font-size-base * 0.7);
.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 0;
margin-bottom: 0.2em;
vertical-align: bottom;
border-top: 0.5em dashed;
li {
&:hover > .submenu {
display: none;
}
.submenu {
.opener {
background: transparent;
border: 1px solid white;
border-radius: (@plone-font-size-base * .25);
float: right;
text-align: center;
width: @plone-font-size-base * 2;
height: @plone-font-size-base * 2;
margin-top: -(@plone-font-size-base * 0.4);
margin-right: -(@plone-font-size-base * 0.7);
.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 0;
margin-bottom: 0.2em;
vertical-align: bottom;
border-top: 0.5em dashed;
border-right: 0.5em solid transparent;
border-left: 0.5em solid transparent;
border-bottom: 0;
}
}
// display: block;
position: relative;
a {
&:hover {
// background-color: unset;
}
}
li {
float: none;
&:hover ul {
top: unset;
left: unset;
}
}
}
.opener.menu-open {
> .caret {
border-top: 0;
border-right: 0.5em solid transparent;
border-left: 0.5em solid transparent;
border-bottom: 0;
border-bottom: 0.5em dashed;
}
}
// display: block;
position: relative;
a {
&:hover {
// background-color: unset;
}
.navTreeLevel0 .submenu_title {
padding-left: 0.5em;
}
li {
float: none;
&:hover ul {
top: unset;
left: unset;
}
.navTreeLevel1 .submenu_title {
padding-left: 1em;
}
}
.opener.menu-open {
> .caret {
border-top: 0;
border-right: 0.5em solid transparent;
border-left: 0.5em solid transparent;
border-bottom: 0.5em dashed;
.navTreeLevel2 .submenu_title {
padding-left: 1.5em;
}
.navTreeLevel3 .submenu_title {
padding-left: 2em;
}
}
.navTreeLevel0 .submenu_title {
padding-left: 0.5em;
}
.navTreeLevel1 .submenu_title {
padding-left: 1em;
}
.navTreeLevel2 .submenu_title {
padding-left: 1.5em;
}
.navTreeLevel3 .submenu_title {
padding-left: 2em;
}
}
}
.plone-navbar-nav li {
.submenu {
// display: none;
}
&:hover > .submenu {
display: unset;
.plone-navbar-nav li {
.submenu {
// display: none;
}
&:hover > .submenu {
display: unset;
}
}
}
}

0 comments on commit 1098874

Please sign in to comment.