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;
+}
+