Continued to improve the layout.

This commit is contained in:
Wynne Crisman
2017-11-25 15:07:14 -08:00
parent f848ea9a8f
commit d8a6a31525
15 changed files with 63 additions and 190 deletions

View File

@@ -26,17 +26,17 @@
{{/if}}
<li class="{{isActiveRoute 'Sales'}}">
<a href="{{pathFor 'Sales'}}">
Sales <span class="tag">Test Tag</span>
</a>
</li>
<li class="{{isActiveRoute 'SalesSheets'}}">
<a href="{{pathFor 'SalesSheets'}}">
Sales Sheets
Sales <a class="subMenu {{isActiveRoute 'SalesSheets'}}" href="{{pathFor 'SalesSheets'}}">Sales Sheets</a>
</a>
</li>
<!--<li class="{{isActiveRoute 'SalesSheets'}}">-->
<!--<a href="{{pathFor 'SalesSheets'}}">-->
<!--Sales Sheets-->
<!--</a>-->
<!--</li>-->
<li class="{{isActiveRoute 'Production'}}">
<a href="{{pathFor 'Production'}}">
Production <span class="tag">sample</span>
Production<!-- <span class="tag">sample</span>-->
</a>
</li>
<li class="{{isActiveRoute 'Products'}}">

View File

@@ -45,11 +45,11 @@
position: absolute
right: -30px
top: 10px
-webkit-transition: .25s ease-in
-moz-transition: .25s ease-in
-o-transition: .25s ease-in
-ms-transition: .25s ease-in
transition: .25s ease-in
-webkit-transition: .5s ease-in
-moz-transition: .5s ease-in
-o-transition: .5s ease-in
-ms-transition: .5s ease-in
transition: .5s ease-in
-webkit-border-top-right-radius: 5px
-webkit-border-bottom-right-radius: 5px
-moz-border-radius-topright: 5px
@@ -148,26 +148,47 @@
text-decoration: none
display: block
.tag
padding: .2em .5em
font-size: .7em
padding: .3em .6em
margin-top: -.2em
font-size: .8em
color: #ddd
white-space: nowrap
vertical-align: baseline
border-radius: .5em
border: 1px solid #000000
float: right
.subMenu
background-color: #999
padding: .3em .6em
margin-top: -.2em
font-size: .8em
color: #fff
white-space: nowrap
vertical-align: baseline
border-radius: .25em
border-radius: .5em
border: 1px solid #000000
float: right
.subMenu.active
background-color: #333
li:hover
background-color: #333
-webkit-animation: neon6 1.5s ease-in-out infinite alternate;
-moz-animation: neon6 1.5s ease-in-out infinite alternate;
animation: neon6 1.5s ease-in-out infinite alternate;
// Note: neon6 is defined in effects.import.styl
background-color: #666
-webkit-animation: neon6 1.5s ease-in-out infinite alternate
-moz-animation: neon6 1.5s ease-in-out infinite alternate
animation: neon6 1.5s ease-in-out infinite alternate
.subMenu
// Note: neon6 is defined in effects.import.styl
background-color: #999
-webkit-animation: neon7 1.5s ease-in-out infinite alternate
-moz-animation: neon7 1.5s ease-in-out infinite alternate
animation: neon7 1.5s ease-in-out infinite alternate
li.active
background-color: #333
a
> a
color: #96a2ae
li.active:hover
background-color: #333
a
> a
color: white
.footer
flex: 0 0 auto

View File

@@ -12,5 +12,8 @@ Template.Body.events({
},
"click .menuArea a": function(event, template) {
$('nav.leftSidebarContainer').toggleClass('menuShow');
},
"click .menuArea a .subMenu": function(event, template) {
$('nav.leftSidebarContainer').toggleClass('menuShow');
}
});

View File

@@ -1,3 +1,4 @@
// For black text.
@-webkit-keyframes neon6
from
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de
@@ -13,6 +14,23 @@
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de
to
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de
// For white text.
@-webkit-keyframes neon7
from
text-shadow: 0 0 10px #bbb, 0 0 20px #bbb, 0 0 30px #bbb, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de
to
text-shadow: 0 0 5px #bbb, 0 0 10px #bbb, 0 0 15px #bbb, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de
@-moz-keyframes neon7
from
text-shadow: 0 0 10px #bbb, 0 0 20px #bbb, 0 0 30px #bbb, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de
to
text-shadow: 0 0 5px #bbb, 0 0 10px #bbb, 0 0 15px #bbb, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de
@keyframes neon7
from
text-shadow: 0 0 10px #bbb, 0 0 20px #bbb, 0 0 30px #bbb, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de
to
text-shadow: 0 0 5px #bbb, 0 0 10px #bbb, 0 0 15px #bbb, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de
//@-webkit-keyframes neon6_drop
// from