bootstrap-bookingsync-sass 0.0.16 → 0.0.17

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 23068bbe74b68e86daef2a2324b4b8187409cae4
-  data.tar.gz: 7b97cfea98fd99e182fb8eca5a22cf8cb4b584f1
+  metadata.gz: f67238193f033dfcdbd25291de20c3494be7358d
+  data.tar.gz: 3181386d2a8db828b0fb1346b364f4c47f1cf5ad
 SHA512:
-  metadata.gz: 37b8b121d6e3c5451a60fd368b51ea6c267d7dce16e36af212cb04d9450876a281d35740fdab10f19e7dcbf52f8bbc4a57b5d4ec6e599d11cbe4f001743c1316
-  data.tar.gz: f75633ce6a80325607a8cab28a7715b45ce5568aac165a646b82dfcc2124587feb15775a9df2b9b827f2bbe1a974fb3e144e39ec8d5023893b4a3ea0d87c005c
+  metadata.gz: 838a5db282bac46ce7d9f292b6de5668a4bc75526e5d6f04af159c27676e36901451673c8707a324c9025b65d9265706067104039343037f552046d5738f31ff
+  data.tar.gz: 93427effa40c4b95be828fd692e83ff2f5f9102814f81ea7a681ca7efcc0bbe95bb0b65783157a6f40ac5ee9528d7713c6b803914e1c006d5ac5b3237624210b

data/.gitignore

@@ -1,2 +1,5 @@
-Gemfile.lock
 *.gem
+Gemfile.lock
+docs/output
+docs/tmp
+docs/crash.log

data/CHANGELOG.md

@@ -1,5 +1,16 @@
 ### Unreleased
 
+### 0.0.17 - 2016-04-08
+
+* improvement
+  * add documentation
+  * move the menu and sheet components into separate files
+  * move flex helpers into utilities file
+  * move all variable declarations into one file
+  * add !default to all variable declarations
+  * add !important rule to make the vertical align helpers usable in table cell
+  * provide the fixed position menu as a component variant
+
 ### 0.0.16 - 2015-12-14
 
 * improvement

data/assets/stylesheets/_bootstrap-bookingsync.scss

@@ -3,9 +3,10 @@
  * Licensed under MIT (https://github.com/BookingSync/bootstrap-bookingsync-sass/blob/master/LICENSE)
  */
 
-// Core variables and mixins
-@import "bootstrap/variables";
+ // Core variables and mixins
+@import 'bookingsync/colors';
 @import "bookingsync/variables";
+@import "bootstrap/variables";
 @import "bootstrap/mixins";
 
 // Reset and dependencies
@@ -58,8 +59,10 @@
 @import "bookingsync/theme";
 @import "bookingsync/type";
 @import "bookingsync/layout";
+@import "bookingsync/menu";
 @import "bookingsync/form";
 @import "bookingsync/chosen";
+@import "bookingsync/sheet";
 @import "bookingsync/switch";
 @import "bookingsync/smiles";
 @import "bookingsync/utilities";

data/assets/stylesheets/bookingsync/_layout.scss

@@ -6,14 +6,6 @@
 body {
   min-height: 100vh;
   padding-top: $navbar-height;
-
-  // Kill scroll on the body when the mobile menu is opened
-  &.menu-open {
-    position: fixed;
-    overflow: hidden;
-    width: 100%;
-    height: 100%;
-  }
 }
 
 .navbar.navbar-fixed-top {
@@ -62,44 +54,3 @@ body {
     padding-top: $navbar-height + 1; // navbar border
   }
 }
-
-@media (max-width: $screen-xs-max) {
-  .menu-toggle {
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 2000;
-    margin-top: 0;
-    margin-bottom: 0;
-    margin-left: 5px;
-  }
-
-  .menu {
-    position: fixed;
-    left: 0;
-    top: $navbar-height;
-    width: 100%;
-    height: calc(100% - 70px);
-
-    &:hover {
-      width: 100%;
-    }
-  }
-}
-
-@media (min-width: $screen-sm-min) {
-  .menu {
-    height: 100vh;
-    position: fixed;
-    top: 0;
-    left: 0;
-
-    &.collapse {
-      visibility: visible;
-
-      &.flex-col {
-        display: flex;
-      }
-    }
-  }
-}

data/assets/stylesheets/bookingsync/_menu.scss

@@ -0,0 +1,282 @@
+//
+// Menu
+// --------------------------------------------------
+
+.menu {
+  background-color: $menu-bg;
+  color: $menu-color;
+  border-radius: $menu-border-radius;
+  width: 60px;
+  height: 100%;
+  overflow: hidden;
+  z-index: 9000;
+  transition: width 0.2s cubic-bezier(.4,0,.2,1);
+  border-radius: 0;
+
+  .body {
+    overflow: hidden;
+  }
+
+  @media (max-width: $screen-xs-max) {
+    .body,
+    .menu-dropdown ol,
+    .menu-dropright {
+      overflow-y: auto;
+      -webkit-overflow-scrolling: touch;
+    }
+  }
+
+
+  &:hover {
+    width: 230px;
+
+    .body,
+    .menu-dropdown ol,
+    .menu-dropright {
+      overflow-y: auto;
+      -webkit-overflow-scrolling: touch;
+    }
+  }
+
+  header,
+  footer {
+    .bar {
+      height: $menu-header-height;
+      position: relative;
+    }
+
+    .brand,
+    .avatar {
+      height: 24px;
+      width: 24px;
+      font-size: 24px;
+      position: absolute;
+      top: 18px;
+      left: 18px;
+    }
+
+    .brand {
+      font-size: 24px;
+      padding-top: 5px;
+    }
+
+    p {
+      margin: 0;
+      margin-left: 60px;
+      padding-top: 17.5px;
+      line-height: 1.24em;
+      white-space: nowrap;
+    }
+  }
+
+  header {
+    background-color: $menu-header-bg;
+    color: $menu-header-color;
+    z-index: 1000;
+    position: static;
+
+    a {
+      color: $menu-header-link-color;
+    }
+
+    ol {
+      margin-bottom: 0;
+      border-top: 1px solid $menu-header-link-hover-bg;
+      background-color: $menu-header-bg;
+      width: 100%;
+      position: absolute;
+      max-height: 100%;
+      overflow: hidden;
+
+      a:hover {
+        background-color: $menu-header-link-hover-bg;
+        color: $menu-header-link-hover-color;
+      }
+    }
+
+    .bar {
+      background-color: $menu-header-bg;
+      z-index: 2000;
+    }
+
+    #menu-header-submenu {
+      width: 100%;
+
+      &.open {
+        top: $menu-header-height;
+        bottom: 0;
+        @media (max-width: $screen-xs-max) {
+          position: fixed;
+          top: $menu-header-height + $navbar-height;
+        }
+      }
+    }
+  }
+
+  footer {
+    background-color: $menu-footer-bg;
+    color: $menu-footer-color;
+
+    a {
+      color: $menu-footer-link-color;
+    }
+
+    .back {
+      i {
+        color: $menu-footer-back-color;
+      }
+
+      a:hover i {
+        color: $menu-footer-back-color;
+      }
+    }
+
+    i {
+      margin-left: 2px;
+    }
+
+    #menu-footer-submenu {
+      top: 0;
+      width: 100%;
+      height: 100%;
+
+      ol {
+        margin-top: $menu-header-height;
+        margin-bottom: 0;
+      }
+
+      &.open {
+        ol {
+          background-color: $menu-footer-bg;
+        }
+      }
+    }
+  }
+
+  ol {
+    // No need to set list-style: none; since li is block level
+    padding-left: 0; // reset padding because ul and ol
+  }
+
+  li {
+    display: block;
+
+    a {
+      display: block;
+      padding: 10px 22px;
+      text-decoration: none;
+      white-space: nowrap;
+      line-height: 30px;
+    }
+
+    i {
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+  .body,
+  footer {
+    li {
+      a {
+        background-color: $menu-link-bg;
+        color: $menu-link-color;
+
+        i {
+          color: $menu-link-icon-color;
+        }
+
+        span {
+          padding-left: 18px;
+          font-weight: 600;
+          -webkit-font-smoothing: antialiased;
+          -moz-osx-font-smoothing: grayscale;
+        }
+
+        &:hover {
+          background-color: $menu-link-hover-bg;
+          color: $menu-link-hover-color;
+
+          i {
+            color: $menu-link-hover-icon-color;
+          }
+        }
+      }
+
+      &.active a,
+      &.active:hover a,
+      &.active:focus a {
+        background-color: $menu-active-bg;
+        color: $menu-active-color;
+
+        i {
+          color: $menu-active-icon-color;
+        }
+      }
+    }
+  }
+}
+
+.menu-toggle {
+  height: $menu-header-height;
+
+  .icon-bar {
+    background-color: $menu-default-toggle-icon-bar-bg;
+  }
+}
+
+.menu-fixed {
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+
+@media (max-width: $screen-xs-max) {
+  .menu-toggle {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 2000;
+    margin-top: 0;
+    margin-bottom: 0;
+    margin-left: 5px;
+  }
+
+  .menu {
+    position: fixed;
+    left: 0;
+    top: $navbar-height;
+    width: 100%;
+    height: calc(100% - 70px);
+
+    &:hover {
+      width: 100%;
+    }
+  }
+}
+
+@media (min-width: $screen-sm-min) {
+  .menu {
+    height: 100vh;
+    position: fixed;
+    top: 0;
+    left: 0;
+
+    &.collapse {
+      visibility: visible;
+
+      &.flex-col {
+        display: flex;
+      }
+    }
+  }
+}
+
+// Kill scroll on the body when the mobile menu is opened
+body.menu-open {
+  position: fixed;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+}

data/assets/stylesheets/bookingsync/_sheet.scss

@@ -0,0 +1,27 @@
+// Sheet
+//
+// Custom wrapper to simulate a paper sheet container
+
+.sheet {
+  width: auto;
+  position: relative;
+  border: 1px solid $sheet-border;
+  background-color: $sheet-bg;
+  border-radius: $sheet-border-radius;
+  margin: $sheet-margin;
+  padding: $sheet-padding;
+}
+
+.sheet-header {
+  margin: (-1 * $sheet-padding);
+  margin-bottom: $sheet-padding;
+  padding: $sheet-padding;
+  border-bottom: 1px solid $sheet-inner-border;
+
+  h1, h2, h3, h4, h5, h6,
+  .h1, .h2, .h3, .h4, .h5, .h6,
+  p {
+    padding: 0;
+    margin: 0;
+  }
+}

data/assets/stylesheets/bookingsync/_switch.scss

@@ -15,10 +15,6 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  * ============================================================ */
-$switch-label-size: 10px;
-$switch-off-border: $gray-lighter;
-$switch-off-bg: #fff;
-$switch-off-color: $gray-lightest;
 
 .has-switch {
   display: inline-block;

data/assets/stylesheets/bookingsync/_theme.scss

@@ -24,242 +24,6 @@ h1, h2, h3, h4, h5, h6,
   white-space: nowrap;
 }
 
-//
-// Menu
-// --------------------------------------------------
-
-// Recommended addition
-//
-// .menu {
-//   height: 100vh;
-//   position: fixed;
-//   top: 0;
-//   left: 0;
-// }
-//
-.menu {
-  background-color: $menu-bg;
-  color: $menu-color;
-  border-radius: $menu-border-radius;
-  width: 60px;
-  height: 100%;
-  overflow: hidden;
-  z-index: 9000;
-  transition: width 0.2s cubic-bezier(.4,0,.2,1);
-  border-radius: 0;
-
-  .body {
-    overflow: hidden;
-  }
-
-  @media (max-width: $screen-xs-max) {
-    .body,
-    .menu-dropdown ol,
-    .menu-dropright {
-      overflow-y: auto;
-      -webkit-overflow-scrolling: touch;
-    }
-  }
-
-
-  &:hover {
-    width: 230px;
-
-    .body,
-    .menu-dropdown ol,
-    .menu-dropright {
-      overflow-y: auto;
-      -webkit-overflow-scrolling: touch;
-    }
-  }
-
-  header,
-  footer {
-    .bar {
-      height: $menu-header-height;
-      position: relative;
-    }
-
-    .brand,
-    .avatar {
-      height: 24px;
-      width: 24px;
-      font-size: 24px;
-      position: absolute;
-      top: 18px;
-      left: 18px;
-    }
-
-    .brand {
-      font-size: 24px;
-      padding-top: 5px;
-    }
-
-    p {
-      margin: 0;
-      margin-left: 60px;
-      padding-top: 17.5px;
-      line-height: 1.24em;
-      white-space: nowrap;
-    }
-  }
-
-  header {
-    background-color: $menu-header-bg;
-    color: $menu-header-color;
-    z-index: 1000;
-    position: static;
-
-    a {
-      color: $menu-header-link-color;
-    }
-
-    ol {
-      margin-bottom: 0;
-      border-top: 1px solid $menu-header-link-hover-bg;
-      background-color: $menu-header-bg;
-      width: 100%;
-      position: absolute;
-      max-height: 100%;
-      overflow: hidden;
-
-      a:hover {
-        background-color: $menu-header-link-hover-bg;
-        color: $menu-header-link-hover-color;
-      }
-    }
-
-    .bar {
-      background-color: $menu-header-bg;
-      z-index: 2000;
-    }
-
-    #menu-header-submenu {
-      width: 100%;
-
-      &.open {
-        top: $menu-header-height;
-        bottom: 0;
-        @media (max-width: $screen-xs-max) {
-          position: fixed;
-          top: $menu-header-height + $navbar-height;
-        }
-      }
-    }
-  }
-
-  footer {
-    background-color: $menu-footer-bg;
-    color: $menu-footer-color;
-
-    a {
-      color: $menu-footer-link-color;
-    }
-
-    .back {
-      i {
-        color: $menu-footer-back-color;
-      }
-
-      a:hover i {
-        color: $menu-footer-back-color;
-      }
-    }
-
-    i {
-      margin-left: 2px;
-    }
-
-    #menu-footer-submenu {
-      top: 0;
-      width: 100%;
-      height: 100%;
-
-      ol {
-        margin-top: $menu-header-height;
-        margin-bottom: 0;
-      }
-
-      &.open {
-        ol {
-          background-color: $menu-footer-bg;
-        }
-      }
-    }
-  }
-
-  ol {
-    // No need to set list-style: none; since li is block level
-    padding-left: 0; // reset padding because ul and ol
-  }
-
-  li {
-    display: block;
-
-    a {
-      display: block;
-      padding: 10px 22px;
-      text-decoration: none;
-      white-space: nowrap;
-      line-height: 30px;
-    }
-
-    i {
-      width: 16px;
-      height: 16px;
-    }
-  }
-
-  .body,
-  footer {
-    li {
-      a {
-        background-color: $menu-link-bg;
-        color: $menu-link-color;
-
-        i {
-          color: $menu-link-icon-color;
-        }
-
-        span {
-          padding-left: 18px;
-          font-weight: 600;
-          -webkit-font-smoothing: antialiased;
-          -moz-osx-font-smoothing: grayscale;
-        }
-
-        &:hover {
-          background-color: $menu-link-hover-bg;
-          color: $menu-link-hover-color;
-
-          i {
-            color: $menu-link-hover-icon-color;
-          }
-        }
-      }
-
-      &.active a,
-      &.active:hover a,
-      &.active:focus a {
-        background-color: $menu-active-bg;
-        color: $menu-active-color;
-
-        i {
-          color: $menu-active-icon-color;
-        }
-      }
-    }
-  }
-}
-
-.menu-toggle {
-  height: $menu-header-height;
-
-  .icon-bar {
-    background-color: $menu-default-toggle-icon-bar-bg;
-  }
-}
-
 
 //
 // Label
@@ -291,43 +55,6 @@ h1, h2, h3, h4, h5, h6,
   left: 0;
 }
 
-//
-// Utilities
-// --------------------------------------------------
-.flex-col {
-  display: flex;
-  flex-direction: column;
-
-  &.collapse {
-    display: none;
-  }
-
-  &.collapse.in {
-    display: flex;
-  }
-}
-
-.flex-row {
-  display: flex;
-
-  &.collapse {
-    display: none;
-  }
-
-  &.collapse.in {
-    display: flex;
-  }
-}
-
-.flex-1 {
-  flex: 1;
-}
-
-.flex-middle {
-  margin-top: auto;
-  margin-bottom: auto;
-}
-
 @media (max-width: $screen-xs-max) {
   .navbar-form {
     border-top: none;
@@ -364,34 +91,6 @@ h1, h2, h3, h4, h5, h6,
   }
 }
 
-// Sheet
-//
-// Custom wrapper to simulate a paper sheet container
-
-.sheet {
-  width: auto;
-  position: relative;
-  border: 1px solid $sheet-border;
-  background-color: $sheet-bg;
-  border-radius: $sheet-border-radius;
-  margin: $sheet-margin;
-  padding: $sheet-padding;
-}
-
-.sheet-header {
-  margin: (-1 * $sheet-padding);
-  margin-bottom: $sheet-padding;
-  padding: $sheet-padding;
-  border-bottom: 1px solid $sheet-inner-border;
-
-  h1, h2, h3, h4, h5, h6,
-  .h1, .h2, .h3, .h4, .h5, .h6,
-  p {
-    padding: 0;
-    margin: 0;
-  }
-}
-
 // Tables
 //
 caption {