Mercurial > piecrust2
diff piecrust/admin/assets/sass/foodtruck/_sidebar.scss @ 778:5e91bc0e3b4d
internal: Move admin panel code into the piecrust package.
author | Ludovic Chabant <ludovic@chabant.com> |
---|---|
date | Sat, 16 Jul 2016 15:02:24 +0200 |
parents | foodtruck/assets/sass/foodtruck/_sidebar.scss@c2708f20a87b |
children | c7393ce2dde7 |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/piecrust/admin/assets/sass/foodtruck/_sidebar.scss Sat Jul 16 15:02:24 2016 +0200 @@ -0,0 +1,151 @@ +// +// Sidebar navigation +// -------------------------------------------------- + +$ft-nav-width: 25rem; +$ft-nav-margin: 2rem; + +// Layout +.ft-nav-container { + padding: 2rem; + margin-top: 3em; + transition: padding-left 0.5s ease; + transition: margin 0.5s ease; +} +.ft-nav-container.ft-nav-enabled { + padding-left: $ft-nav-width + $ft-nav-margin; +} + +.ft-nav-toggle { + display: block; + z-index: 1001; + position: fixed; + top: 0; + left: 0; + transition: all 0.5s ease; +} + +.ft-nav { + z-index: 1000; + position: fixed; + height: 100%; + width: $ft-nav-width; + left: -$ft-nav-width; + top: 0; + bottom: 0; + overflow-y: auto; + transition: all 0.5s ease; +} +.ft-nav.ft-nav-enabled { + left: 0; +} + +@media(min-width:768px) { + .ft-nav-toggle { + left: -3rem; + display: none; + } + .ft-nav-container { + padding-left: $ft-nav-width + $ft-nav-margin; + margin-top: 0; + } + .ft-nav { + left: 0; + } +} + +// Style +.ft-nav-toggle { + background: $ft-color-gray-darkest; + + a { + display: block; + padding: 0.2em 0.8em; + font-family: 'Lobster', cursive; + font-size: 2em; + } + a, a:hover, a:active, a:visited { + color: #fff; + text-decoration: none; + } +} + +.ft-nav { + background: $ft-color-gray-darkest; + color: #fff; + + span.icon { + font-size: 1.5em; + margin-right: 0.4em; + } +} +.ft-nav ul { + list-style: none; + margin: 0; + padding: 0; +} +.ft-nav ul li { + margin: 0; + padding: 0; +} +.ft-nav ul li a { + border-left: 5px solid transparent; + color: $ft-color-gray-light; + background: $ft-color-gray-dark; + padding: 1rem; + display: block; + letter-spacing: 0.05em; + text-transform: uppercase; + + &:hover { + border-left: 5px solid $ft-color-blue; + color: $ft-color-white; + background: $ft-color-gray-darker; + text-decoration: none; + } +} +.ft-nav li>ul { +} +.ft-nav li>ul li a { + color: $ft-color-gray-lighter; + background: $ft-color-gray; + padding-left: 3em; + text-transform: none; + + &:hover { + color: $ft-color-white; + background: $ft-color-gray; + } +} +.ft-nav ul li a.ft-nav-active { + border-left: 5px solid $ft-color-red; + color: $ft-color-white; + background: $ft-color-gray-darker; +} +.ft-nav li>ul li a.ft-nav-active { + color: $ft-color-white; + background: $ft-color-gray; +} + +// Title/logo +.ft-nav-title { + font-size: 2rem; + font-weight: bold; + text-align: center; + padding: 2rem 0; + margin: 0; +} +.ft-nav-brand { + font-family: 'Lobster', cursive; + font-size: 2em; + text-shadow: 2px 5px 0 $ft-color-gray; +} + +// Footer +.ft-nav-auth { + color: $ft-color-gray; + font-size: 0.8em; + text-align: center; + margin: 2em 0; +} +