bootstrap-bookingsync-sass 0.0.19 → 1.0.0.beta1

data/assets/stylesheets/bookingsync/_form.scss

@@ -7,6 +7,12 @@
 // Forms
 // --------------------------------------------------
 
+.form-inline {
+  .form-group {
+    margin-top: 0;
+  }
+}
+
 // Form groups
 //
 // Designed to help with the organization and spacing of vertical forms. For
@@ -17,9 +23,13 @@
   display: block;
   box-sizing: border-box;
   max-width: 100%;
-  margin: 0;
+  margin: 25px 0 0 0;
   padding: $label-padding-focus 0 $padding-base-vertical;
 
+  &:first-of-type {
+    margin-top: 0;
+  }
+
   label {
     position: absolute;
     bottom: 0;
@@ -85,6 +95,17 @@
   }
 }
 
+.select {
+  margin-top: 25px;
+
+  label {
+    color: $label-color-filled;
+    font-size: $label-font-size-filled;
+    font-weight: normal;
+    pointer-events: none;
+  }
+}
+
 // FIXME: :not(.readonly) should be used
 .form-group label:after {
   background-color: $label-border-focus;

data/assets/stylesheets/bookingsync/_icons.scss

@@ -0,0 +1,119 @@
+/*!
+ * Copyright 2016 BookingSync SAS.
+ * Licensed under MIT (https://github.com/BookingSync/bootstrap-bookingsync-sass/blob/master/LICENSE)
+ */
+
+ @font-face {
+  font-family: '#{$icons-font-name}';
+  src: url(if($bootstrap-bookingsync-sass-asset-helper, bs-font-path('#{$icons-font-path}#{$icons-font-name}.eot'), '#{$icons-font-path}#{$icons-font-name}.eot'));
+  src: url(if($bootstrap-bookingsync-sass-asset-helper, bs-font-path('#{$icons-font-path}#{$icons-font-name}.eot?#iefix'), '#{$icons-font-path}#{$icons-font-name}.eot?#iefix')) format('embedded-opentype'),
+       url(if($bootstrap-bookingsync-sass-asset-helper, bs-font-path('#{$icons-font-path}#{$icons-font-name}.woff2'), '#{$icons-font-path}#{$icons-font-name}.woff2')) format('woff2'),
+       url(if($bootstrap-bookingsync-sass-asset-helper, bs-font-path('#{$icons-font-path}#{$icons-font-name}.woff'), '#{$icons-font-path}#{$icons-font-name}.woff')) format('woff'),
+       url(if($bootstrap-bookingsync-sass-asset-helper, bs-font-path('#{$icons-font-path}#{$icons-font-name}.ttf'), '#{$icons-font-path}#{$icons-font-name}.ttf')) format('truetype'),
+       url(if($bootstrap-bookingsync-sass-asset-helper, bs-font-path('#{$icons-font-path}#{$icons-font-name}.svg##{$icons-font-svg-id}'), '#{$icons-font-path}#{$icons-font-name}.svg##{$icons-font-svg-id}')) format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+[class^="icon-"], [class*=" icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: '#{$icons-font-name}' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  display: inline-block;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-fw {
+  width: (18em / 14);
+  text-align: center;
+}
+
+.icon-invoice:before {
+  content: $icon-invoice;
+}
+.icon-rental:before {
+  content: $icon-rental;
+}
+.icon-photo:before {
+  content: $icon-photo;
+}
+.icon-video:before {
+  content: $icon-video;
+}
+.icon-description:before {
+  content: $icon-description;
+}
+.icon-contract:before {
+  content: $icon-contract;
+}
+.icon-reservation:before {
+  content: $icon-reservation;
+}
+.icon-rates:before {
+  content: $icon-rates;
+}
+.icon-payments:before {
+  content: $icon-payments;
+}
+.icon-help:before {
+  content: $icon-help;
+}
+.icon-map:before {
+  content: $icon-map;
+}
+.icon-calendar:before {
+  content: $icon-calendar;
+}
+.icon-inbox:before {
+  content: $icon-inbox;
+}
+.icon-clients:before {
+  content: $icon-clients;
+}
+.icon-owner:before {
+  content: $icon-owner;
+}
+.icon-search:before {
+  content: $icon-search;
+}
+.icon-checkin:before {
+  content: $icon-checkin;
+}
+.icon-settings:before {
+  content: $icon-settings;
+}
+.icon-maintenance:before {
+  content: $icon-maintenance;
+}
+.icon-reports:before {
+  content: $icon-reports;
+}
+.icon-cleaning:before {
+  content: $icon-cleaning;
+}
+.icon-notifications:before {
+  content: $icon-notifications;
+}
+.icon-instant:before {
+  content: $icon-instant;
+}
+.icon-applications:before {
+  content: $icon-applications;
+}
+.icon-website:before {
+  content: $icon-website;
+}
+.icon-reviews:before {
+  content: $icon-reviews;
+}
+.icon-widget:before {
+  content: $icon-widget;
+}

data/assets/stylesheets/bookingsync/_layout.scss

@@ -5,7 +5,7 @@
 
 body {
   min-height: 100vh;
-  padding-top: $navbar-height;
+  padding-top: $navbar-height + 1; // for the navbar-fixed-top border
 }
 
 .navbar.navbar-fixed-top {
@@ -19,10 +19,11 @@ body {
   }
 
   .navbar-nav > li > a {
-    line-height: 40px;
+    line-height: 20px;
   }
 
   h1,
+  .h1,
   .navbar-brand {
     font-size: 18px;
     line-height: $navbar-height;
@@ -30,8 +31,14 @@ body {
     margin: 0;
   }
 
+  a.h1:focus,
+  a.h1:hover {
+    text-decoration: none;
+    color: $headings-color;
+  }
+
   @media (max-width: $screen-xs-max) {
-    .navbar-header > div {
+    .navbar-brand-container {
       padding: 0 60px;
     }
 
@@ -39,18 +46,20 @@ body {
       padding: 0 40px;
     }
 
-    div > .navbar-brand {
+    .navbar-brand {
       text-align: center;
       width: 100%;
     }
   }
 }
 
-#content {
-  min-height: 100vh;
-  font-size: 12px; // FIXME: Temporary fix for easier migration
+.main-content {
+  overflow: auto;
+}
 
-  &.with-navbar {
-    padding-top: $navbar-height + 1; // navbar border
+.sided-content {
+  & > .navbar,
+  & > .main-content {
+    margin-left: $menu-width;
   }
 }

data/assets/stylesheets/bookingsync/_list-group.scss

@@ -0,0 +1,37 @@
+.list-group {
+  .active {
+    .list-group-item {
+      background-color: $list-group-active-bg;
+    }
+
+    .list-group .list-group-item {
+      background-color: $list-group-active-child-bg;
+
+      &:hover {
+        background-color: $list-group-active-child-hover-bg;
+      }
+    }
+  }
+
+  .list-group {
+    margin-bottom: 0;
+
+    .list-group-item {
+      padding-left: 30px;
+    }
+  }
+
+  &.list-group-with-icon .list-group .list-group-item {
+    padding-left: 59px;
+  }
+}
+
+.panel-default {
+  .expanded .list-group-item {
+    border-left: 2px solid $list-group-active-child-border;
+  }
+
+  .expanded > .list-group-item {
+    font-weight: 600;
+  }
+}

data/assets/stylesheets/bookingsync/_menu.scss

@@ -2,281 +2,301 @@
 // Menu
 // --------------------------------------------------
 
+.caret-right {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  margin-left: 2px;
+  vertical-align: middle;
+  border-left:    $caret-width-base dashed;
+  border-top:     $caret-width-base solid transparent;
+  border-bottom:  $caret-width-base solid transparent;
+}
+
 .menu {
   background-color: $menu-bg;
   color: $menu-color;
-  border-radius: $menu-border-radius;
-  width: 60px;
-  height: 100%;
-  overflow: hidden;
+  width: $menu-width;
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
   z-index: 9000;
   transition: width 0.2s cubic-bezier(.4,0,.2,1);
-  border-radius: 0;
 
-  .body {
-    overflow: hidden;
+  ol {
+    padding-left: 0;
+    margin: 0;
   }
 
-  @media (max-width: $screen-xs-max) {
-    .body,
-    .menu-dropdown ol,
-    .menu-dropright {
-      overflow-y: auto;
-      -webkit-overflow-scrolling: touch;
+  li {
+    display: block;
+
+    &.divider {
+      border-top: 1px solid $menu-divider-border-color;
+    }
+
+    a {
+      display: block;
+      text-decoration: none;
+      white-space: nowrap;
+      line-height: $menu-link-height;
     }
   }
 
+  a:not(.collapsed) .caret {
+    transform: rotate(180deg);
+  }
+}
 
-  &:hover {
-    width: 230px;
+.menu-collapsed {
+  width: $menu-collapsed-width;
 
-    .body,
-    .menu-dropdown ol,
-    .menu-dropright {
-      overflow-y: auto;
-      -webkit-overflow-scrolling: touch;
-    }
+  &.menu-hovered {
+    width: $menu-width;
   }
+}
 
-  header,
-  footer {
-    .bar {
-      height: $menu-header-height;
-      position: relative;
-    }
+.menu-fixed {
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+}
 
-    .brand,
-    .avatar {
-      height: 24px;
-      width: 24px;
-      font-size: 24px;
-      position: absolute;
-      top: 18px;
-      left: 18px;
-    }
+.menu-icon,
+.menu-body,
+.menu-caret {
+  display: table-cell;
+  vertical-align: middle;
+}
 
-    .brand {
-      font-size: 24px;
-      padding-top: 5px;
-    }
+.menu-icon {
+  width: $menu-collapsed-width;
+  min-width: $menu-collapsed-width;
+  text-align: center;
 
-    p {
-      margin: 0;
-      margin-left: 60px;
-      padding-top: 17.5px;
-      line-height: 1.24em;
-      white-space: nowrap;
-    }
+  * {
+    width: $menu-icon-size;
+    height: $menu-icon-size;
+    font-size: $menu-icon-size;
+    line-height: 1;
   }
+}
 
-  header {
-    background-color: $menu-header-bg;
-    color: $menu-header-color;
-    z-index: 1000;
-    position: static;
+.menu-body {
+  width: 100%;
+}
 
-    a {
-      color: $menu-header-link-color;
-    }
+.menu-caret {
+  padding-right: 15px;
+}
 
-    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;
-      }
-    }
+.menu-link-icon {
+  color: $menu-link-icon-color;
+}
 
-    .bar {
-      background-color: $menu-header-bg;
-      z-index: 2000;
-    }
+.menu-link-body {
+  font-weight: 600;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
 
-    #menu-header-submenu {
-      width: 100%;
+.menu-link {
+  background-color: $menu-link-bg;
+  color: $menu-link-color;
 
-      &.open {
-        top: $menu-header-height;
-        bottom: 0;
-        @media (max-width: $screen-xs-max) {
-          position: fixed;
-          top: $menu-header-height + $navbar-height;
-        }
-      }
-    }
-  }
+  &:hover,
+  &:focus {
+    background-color: $menu-link-hover-bg;
+    color: $menu-link-hover-color;
 
-  footer {
-    background-color: $menu-footer-bg;
-    color: $menu-footer-color;
-
-    a {
-      color: $menu-footer-link-color;
+    .menu-link-icon {
+      color: $menu-link-hover-icon-color;
     }
+  }
 
-    .back {
-      i {
-        color: $menu-footer-back-color;
-      }
+  .active &,
+  .active:hover &,
+  .active:focus & {
+    background-color: $menu-active-bg;
+    color: $menu-active-color;
 
-      a:hover i {
-        color: $menu-footer-back-color;
-      }
+    .menu-link-icon {
+      color: $menu-active-icon-color;
     }
+  }
 
-    i {
-      margin-left: 2px;
-    }
+  & > .menu-body {
+    padding-left: 15px;
+  }
+}
 
-    #menu-footer-submenu {
-      top: 0;
-      width: 100%;
-      height: 100%;
+.menu-header {
+  background-color: $menu-header-bg;
+  color: $menu-header-color;
+  z-index: 1000;
+  position: static;
 
-      ol {
-        margin-top: $menu-header-height;
-        margin-bottom: 0;
-      }
+  a {
+    color: $menu-header-link-color;
 
-      &.open {
-        ol {
-          background-color: $menu-footer-bg;
-        }
-      }
+    &:hover {
+      background-color: $menu-header-link-hover-bg;
+      color: $menu-header-link-hover-color;
     }
   }
 
-  ol {
-    // No need to set list-style: none; since li is block level
-    padding-left: 0; // reset padding because ul and ol
+  & > .menu-body {
+    padding-left: 15px;
   }
+}
 
-  li {
-    display: block;
+.menu-header-icon {
+  * {
+    width: $menu-header-icon-size;
+    height: $menu-header-icon-size;
+    font-size: $menu-header-icon-size;
+  }
+}
 
-    a {
-      display: block;
-      padding: 10px 22px;
-      text-decoration: none;
-      white-space: nowrap;
-      line-height: 30px;
-    }
+.menu-header-body {
+  height: $menu-header-height;
+  position: relative;
+  color: $menu-header-color;
+}
 
-    i {
-      width: 16px;
-      height: 16px;
+.menu-header-heading {
+  font-size: $menu-header-heading-size;
+  margin-top: 0;
+  margin-bottom: 0;
+  color: $menu-header-color;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.menu-header-submenu {
+  position: absolute;
+  width: 100%;
+  top: $menu-header-height;
+  background-color: $menu-header-submenu-bg;
+  color: $menu-header-submenu-color;
+  border-top: 1px solid $menu-header-submenu-border-color;
+
+  a {
+    color: $menu-header-submenu-link-color;
+    padding-left: 22px;
+
+    &:hover {
+      background-color: $menu-header-submenu-link-hover-bg;
+      color: $menu-header-submenu-link-hover-color;
     }
   }
+}
 
-  .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;
-          }
-        }
-      }
+.menu-footer {
+  background-color: $menu-footer-bg;
+  color: $menu-footer-color;
+  z-index: 1000;
+  position: static;
 
-      &.active a,
-      &.active:hover a,
-      &.active:focus a {
-        background-color: $menu-active-bg;
-        color: $menu-active-color;
+  a {
+    color: $menu-footer-link-color;
 
-        i {
-          color: $menu-active-icon-color;
-        }
-      }
+    &:hover {
+      background-color: $menu-footer-link-hover-bg;
+      color: $menu-footer-link-hover-color;
+    }
+
+    &.collapsed .caret {
+      transform: rotate(180deg);
+    }
+
+    &:not(.collapsed) .caret {
+      transform: rotate(0deg);
     }
   }
 }
 
-.menu-toggle {
-  height: $menu-header-height;
-
-  .icon-bar {
-    background-color: $menu-default-toggle-icon-bar-bg;
+.menu-footer-icon {
+  * {
+    width: $menu-footer-icon-size;
+    height: $menu-footer-icon-size;
+    font-size: $menu-footer-icon-size;
   }
 }
 
-.menu-fixed {
-  height: 100vh;
-  position: fixed;
-  top: 0;
-  left: 0;
+.menu-footer-body {
+  height: $menu-footer-height;
+  position: relative;
+  color: $menu-footer-color;
 }
 
-@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-footer-heading {
+  font-size: $menu-footer-heading-size;
+  margin-top: 0;
+  margin-bottom: 0;
+  color: $menu-footer-color;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.menu-footer-submenu {
+  position: absolute;
+  width: 100%;
+  bottom: $menu-footer-height;
+  background-color: $menu-footer-submenu-bg;
+  color: $menu-footer-submenu-color;
+  border-top: 1px solid $menu-footer-submenu-border-color;
+  border-bottom: 1px solid $menu-footer-submenu-border-color;
 
-  .menu {
-    position: fixed;
-    left: 0;
-    top: $navbar-height;
-    width: 100%;
-    height: calc(100% - 70px);
+  a {
+    color: $menu-footer-submenu-link-color;
+    padding-left: $menu-collapsed-width;
 
     &:hover {
-      width: 100%;
+      background-color: $menu-footer-submenu-link-hover-bg;
+      color: $menu-footer-submenu-link-hover-color;
     }
   }
 }
 
-@media (min-width: $screen-sm-min) {
-  .menu {
-    height: 100vh;
-    position: fixed;
-    top: 0;
-    left: 0;
+.menu-submenu {
+  width: $menu-width - $menu-collapsed-width;
+  margin-left: $menu-collapsed-width;
+  color: $menu-submenu-color;
+  background-color: $menu-submenu-bg;
+  z-index: 8000;
+
+  .menu-header {
+    color: $menu-submenu-header-color;
+    background-color: $menu-submenu-header-bg;
+  }
+
+  .menu-link {
+    background-color: $menu-submenu-link-bg;
+    color: $menu-submenu-link-color;
 
-    &.collapse {
-      visibility: visible;
+    &:hover,
+    &:focus {
+      background-color: $menu-submenu-link-hover-bg;
+      color: $menu-submenu-link-hover-color;
 
-      &.flex-col {
-        display: flex;
+      .menu-link-icon {
+        color: $menu-submenu-link-hover-icon-color;
       }
     }
-  }
-}
 
-// Kill scroll on the body when the mobile menu is opened
-body.menu-open {
-  position: fixed;
-  overflow: hidden;
-  width: 100%;
-  height: 100%;
+    .active &,
+    .active:hover &,
+    .active:focus & {
+      background-color: $menu-submenu-active-bg;
+      color: $menu-submenu-active-color;
+
+      .menu-link-icon {
+        color: $menu-submenu-active-icon-color;
+      }
+    }
+  }
 }