furatto 0.0.1 → 0.0.2

data/vendor/assets/stylesheets/furatto/_navbar.scss

@@ -22,14 +22,6 @@
   *z-index: 2;
 }
 
-.navbar-alpha {
-  background: rgba($navbar-bg-color, $navbar-alpha);
-
-  .navbar-inner {
-    background: rgba($navbar-bg-color, $navbar-alpha);
-  }
-}
-
 // Inner for background effects
 // Gradient is applied to its own element because overflow visible is not honored by IE when filter is present
 .navbar-inner {
@@ -57,7 +49,7 @@
 .navbar .nav {
   padding-left: 0px;
 
-  [class^="icon_"], [class*=" icon_"] {
+  [class^="icon-"], [class*=" icon-"] {
     margin-right: 5px;
   }
 }
@@ -66,13 +58,13 @@
   float: left;
   display: block;
   margin-right: 20px;
+  font-weight: 500;
 
   /*Vertically center the text given $navbar-height*/
   padding: (($navbar-height - $base-line-height) / 2) 20px (($navbar-height - $base-line-height) / 2);
 
-  margin-left: -20px; /*negative indent to left-align the text down the page*/
+  /*margin-left: -20px; [>negative indent to left-align the text down the page<]*/
   font-size: 20px;
-  font-weight: 200;
   color: $navbar-brand-color;
 
   &:hover,
@@ -103,31 +95,20 @@
 .navbar .nav > .active > a:focus {
   color: $navbar-link-color-active;
   text-decoration: none;
-  border-top: 2px solid $green;
-
+  background: lighten($navbar-bg-color, 10%);
 }
 
 // Navbar button for toggling navbar items in responsive layouts
 // These definitions need to come after '.navbar .btn'
 .navbar .btn-navbar {
-  display: none;
-  float: right;
   padding: 7px 10px;
-  margin-left: 5px;
-  margin-right: 5px;
-  /*.buttonBackground(darken(@navbarBackgroundHighlight, 5%), darken(@navbarBackground, 5%));*/
-  /*.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)");*/
-}
-.navbar .btn-navbar .icon_cloud {
-  display: block;
-  width: 18px;
-  height: 2px;
-  background-color: #f5f5f5;
-  /*.border-radius(1px);*/
-  /*.box-shadow(0 1px 0 rgba(0,0,0,.25));*/
+  margin-top: 8px;
+  margin-bottom: 8px;
 }
-.btn-navbar .icon_cloud + .icon_cloud {
-  margin-top: 3px;
+
+.navbar .navbar-text {
+  margin: 0;
+  display: inline-block;
 }
 
 //Navigation
@@ -137,7 +118,6 @@
   display: block;
   float: left;
   margin: 0 10px 0 0;
-
 }
 
 .navbar .nav.pull-right {
@@ -151,7 +131,7 @@
 
 // Dividers in navbar
 .divider-vertical {
-  height: $navbar-height + 7; /*Fix for the navbar*/
+  height: $navbar-height; /*Fix for the navbar*/
   margin: 0 9px;
   border-left: 1px solid $navbar-border;
 }
@@ -184,4 +164,53 @@
   bottom: 0;
 }
 
+//Search navbar form
+.navbar-form {
+  vertical-align: middle;
+  padding: 10px 15px;
+  margin: 0;
+
+  .form-fields {
+    margin: 0;
+    display: inline-block;
+    vertical-align: middle;
+
+    input {
+      margin: 0;
+    }
+  }
+  input {
+    margin: 0;
+  }
+}
+
+/* Navbar Inverse */
+/* -------------- */
+
+.navbar-inverse {
+  border: 1px solid #BBB;
+
+  .navbar-inner {
+    background: $navbar-inverse-bg-color;
+  }
+
+  .nav > li > a {
+    font-weight: 400;
+    color: $navbar-inverse-text;
+  }
+
+  .brand {
+    color: $navbar-inverse-text;
+    font-weight: 400;
+  }
+
+  .divider-vertical {
+    border-left: 1px solid #EEE;
+  }
+
+  .navbar-text {
+    color: #0088cc;
+  }
+  
+}
 

data/vendor/assets/stylesheets/furatto/_panel.scss

@@ -0,0 +1,277 @@
+.panel-content {
+  position: relative;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: auto;
+  height: auto;
+}
+
+.panels {
+  display: none;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: auto;
+  width: auto;
+}
+
+.panel {
+  position: absolute;
+  top: 0;
+  right: auto;
+  bottom: 0;
+  left: auto;
+  width: 265px;
+  height: auto;
+  overflow: auto;
+  @include transition(width 0.3s ease);
+  display: none;
+}
+
+.panel-left {
+  left: 0;
+  z-index: 1;
+}
+
+.paneljs-left .panel-right,
+.paneljs-right .panel-left {
+  display: none;
+}
+
+.paneljs-expand-left .panel-left,
+.paneljs-expand-right .panel-right {
+  width: 100%;
+}
+
+/* Show "Left" drawer for the "Right" drawer in the demo */
+.paneljs-right .panel-left {
+	display: block;
+	right: 0;
+	left: auto;
+}
+
+/* Hide the actual "Right" drawer in the demo */
+.paneljs-right .panel-right {
+	display: none;
+}
+
+.panel-content {
+  background: $bg-color;
+}
+
+.panel {
+	background: $navbar-bg-color;
+}
+
+
+.panel {
+
+  .nav + .nav {
+    margin-bottom: 15px;
+  }
+
+  .nav {
+    overflow: hidden;
+    padding-left: 0;
+    color: $navbar-text;
+    font-size: $base-font-size;
+    margin-top: 0px;
+    float: none;
+
+    li.dropdown {
+      border-bottom: none;
+    }
+
+    [class^="icon-"], [class*=" icon-"] {
+      margin-right: 5px;
+    }
+
+    .dropdown-toggle {
+      .caret {
+        display: none;
+      }
+    }
+
+    div.dropdown-menu {
+      padding: 0;
+      width: 100%;
+      display: block;
+      margin-left: 13px;
+
+      input[type="text"],
+      input[type="password"],
+      input[type="datetime"],
+      input[type="datetime-local"],
+      input[type="date"],
+      input[type="month"],
+      input[type="time"],
+      input[type="week"],
+      input[type="number"],
+      input[type="email"],
+      input[type="url"],
+      input[type="search"],
+      input[type="tel"],
+      input[type="color"] {
+        width: 80%;
+        display: block;
+
+      }
+
+      input[type="submit"] {
+        width: 85%; 
+      }
+      
+    }
+
+    .dropdown-menu {
+      position: static;
+      background: none;
+      border: none;
+      @include box-shadow(0 0px 0px $navbar-bg-color);
+      width: 100%;
+
+      * {
+        color: #eaeaea;
+        font-weight: 400;
+      }
+
+      li.divider {
+        border-bottom: 1px solid #CCC; 
+      }
+
+      li {
+        a {
+          &:hover {
+            background: none;
+          }
+        }
+      }
+    }
+  }
+
+  .nav > .active,
+  .nav > .active,
+  .nav > .active {
+    background: #FFF;
+    color: #0088cc;
+
+    a {
+      color: #0088cc;
+    }
+
+    &:before {
+      content: ' ';
+      position: relative;
+      width: 0;
+      height: 0px;
+    }
+  }
+  
+
+  li.dropdown {
+    .dropdown-toggle {
+      display: none;
+    }
+  }
+
+  ul.dropdown-menu {
+    display: block;
+
+
+    .divider {
+      display: none;
+    }
+  }
+
+   //Form
+  .search-navbar-form {
+    float: none;
+    margin-bottom: 10px;
+
+    .form-fields {
+      margin: 0 auto 10px auto;
+      display: block;
+      width: 100%;
+
+      input {
+        width: 100%;
+      }
+    }
+
+    input[type="submit"], .btn {
+      display: block;
+      width: 100%;
+      margin: 0 auto;
+    }
+  }
+}
+
+.panel-inverse {
+  .nav {
+    .dropdown-menu {
+      * {
+        color: #0088cc;
+      }
+    }
+  }
+
+  li {
+    border-bottom: 1px solid #CCC;
+  }
+}
+
+// Divider
+.panel .nav > li.divider-vertical {
+  display: none;
+}
+
+.panel li > a {
+  display: block;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  padding: 15px;
+  font-weight: bold;
+  text-decoration: none;
+  color: #FFF;
+  text-indent: 20px;
+}
+
+/* Inverse panel */
+/* ------------- */
+
+.panel-inverse {
+  background: $panel-inverse-bg;
+
+  .nav > li {
+    border-bottom: 1px solid #CCC;
+  }
+
+  .nav > .active {
+    color: $panel-inverse-active-color;
+    background: $panel-inverse-active-bg;
+
+    a {
+      color: $panel-inverse-active-color;
+    }
+  }
+
+  &.panel {
+    background: $panel-inverse-bg;
+  }
+}
+
+.panel-inverse .nav > li > a {
+  color: $panel-inverse-link-color;
+  font-weight: 400;
+}
+
+// Active nav items
+.navbar-inverse .nav > .active > a,
+.navbar-inverse .nav > .active > a:hover,
+.navbar-inverse .nav > .active > a:focus {
+  color: $panel-inverse-active-color;
+  background: $panel-inverse-active-bg;
+}

data/vendor/assets/stylesheets/furatto/_responsive_navbar.scss

@@ -12,19 +12,21 @@
 
 @media (max-width: $nav-bar-collapse-width) {
 
+  .panels {
+    display: block;
+  }
+
+  .panel-content {
+    padding-top: 0 !important;
+  }
+
   /*Unfix top navbar*/
   /*Remove any padding from the body */
   
-  body {
-    padding: 0px;
-  }
-
   .navbar {
     .menu-trigger {
       float: left;
       display: block;
-      /*width: 18px;*/
-      /*padding: 7px 10px;*/
       margin-left: 5px;
       margin-right: 5px;
       color: $navbar-text;
@@ -32,6 +34,8 @@
       line-height: $base-line-height;
       padding-top: $base-line-height - 5;
       margin-bottom: 7px; /*compensate the navbar height*/
+
+      @include touch-callout;
     }
   }
 
@@ -51,17 +55,9 @@
     margin-top: $base-line-height;
   }
 
-  .navbar .container {
-    width: auto;
-    padding: 0;
-  }
-
   // Account for brand name
   .navbar .nav .brand {
     display: block;
-    /*padding-left: 10px;*/
-    /*padding-right: 10px;*/
-    /*margin: 0 0 0 -5px;*/
   }
 
   // COLLAPSIBLE NAVBAR
@@ -76,6 +72,9 @@
     margin: 0 0 ($base-line-height / 2);
     display: none;
   }
+  .nav-collapse .search-navbar-form {
+    display: none;
+  }
   .nav-collapse .nav > li {
     float: none;
   }
@@ -115,16 +114,6 @@
     background-color: $navbar-bg-color;
   }
 
-  .navbar-inverse .nav-collapse .nav > li > a,
-  .navbar-inverse .nav-collapse .dropdown-menu a {
-    /*color: @navbarInverseLinkColor;*/
-  }
-  .navbar-inverse .nav-collapse .nav > li > a:hover,
-  .navbar-inverse .nav-collapse .nav > li > a:focus,
-  .navbar-inverse .nav-collapse .dropdown-menu a:hover,
-  .navbar-inverse .nav-collapse .dropdown-menu a:focus {
-    /*background-color: @navbarInverseBackground;*/
-  }
   // Buttons in the navbar
   .nav-collapse.in .btn-group {
     margin-top: 5px;
@@ -143,8 +132,6 @@
     padding: 0;
     background-color: transparent;
     border: none;
-    /*.border-radius(0);*/
-    /*.box-shadow(none);*/
   }
   .nav-collapse .open > .dropdown-menu { 
     display: block; 
@@ -173,6 +160,30 @@
   
 }
 
+.navbar-inverse {
+  [data-toggle="panel"] {
+    color: $navbar-inverse-text;
+  }
+}
+
+.panel-content, .panel-left, .panel-content {
+  position: absolute;
+}
+
+.panel-content {
+  z-index: 2;
+  overflow: auto;
+
+  backface-visibility:hidden;
+  -webkit-backface-visibility:hidden; /* Chrome and Safari */
+  -moz-backface-visibility:hidden; /* Firefox */
+  -ms-backface-visibility:hidden; /* Internet Explorer 10+ */
+}
+
+.panels {
+  position: absolute;
+}
+
 @media (min-width: $nav-bar-collapse-width-desktop) {
 
   // Required to make the collapsing navbar work on regular desktops