bootstrap-bookingsync-sass 0.0.5 → 0.0.6

data/assets/javascripts/bootstrap-bookingsync-sprockets.js

@@ -0,0 +1,2 @@
+//= require ./bookingsync/form
+//= require ./bookingsync/switch

data/assets/stylesheets/_bootstrap-bookingsync-sprockets.scss

@@ -0,0 +1,16 @@
+/*!
+ * Copyright 2015 BookingSync SAS.
+ * Licensed under MIT (https://github.com/BookingSync/bootstrap-bookingsync-sass/blob/master/LICENSE)
+ */
+
+@import "bootstrap-sprockets";
+
+@function bs-font-path($path) {
+  @return font-path($path);
+}
+
+@function bs-image-path($path) {
+  @return image-path($path);
+}
+
+$bootstrap-bookingsync-sass-asset-helper: true;

data/assets/stylesheets/_bootstrap-bookingsync.scss

@@ -0,0 +1,63 @@
+/*!
+ * Copyright 2015 BookingSync SAS.
+ * Licensed under MIT (https://github.com/BookingSync/bootstrap-bookingsync-sass/blob/master/LICENSE)
+ */
+
+// Core variables and mixins
+@import "bootstrap/variables";
+@import "bookingsync/variables";
+@import "bootstrap/mixins";
+
+// Reset and dependencies
+@import "bootstrap/normalize";
+@import "bootstrap/print";
+// @import "bootstrap/glyphicons";
+
+// Core CSS
+@import "bootstrap/scaffolding";
+@import "bootstrap/type";
+@import "bootstrap/code";
+@import "bootstrap/grid";
+@import "bootstrap/tables";
+@import "bootstrap/forms";
+@import "bootstrap/buttons";
+
+// Components
+@import "bootstrap/component-animations";
+@import "bootstrap/dropdowns";
+@import "bootstrap/button-groups";
+@import "bootstrap/input-groups";
+@import "bootstrap/navs";
+@import "bootstrap/navbar";
+@import "bootstrap/breadcrumbs";
+@import "bootstrap/pagination";
+@import "bootstrap/pager";
+@import "bootstrap/labels";
+@import "bootstrap/badges";
+@import "bootstrap/jumbotron";
+@import "bootstrap/thumbnails";
+@import "bootstrap/alerts";
+@import "bootstrap/progress-bars";
+@import "bootstrap/media";
+@import "bootstrap/list-group";
+@import "bootstrap/panels";
+@import "bootstrap/responsive-embed";
+@import "bootstrap/wells";
+@import "bootstrap/close";
+
+// Components w/ JavaScript
+@import "bootstrap/modals";
+@import "bootstrap/tooltip";
+@import "bootstrap/popovers";
+@import "bootstrap/carousel";
+
+// Utility classes
+@import "bootstrap/utilities";
+@import "bootstrap/responsive-utilities";
+
+@import "bookingsync/theme";
+@import "bookingsync/layout";
+@import "bookingsync/form";
+@import "bookingsync/chosen";
+@import "bookingsync/switch";
+@import "bookingsync/smiles";

data/assets/stylesheets/bookingsync/_chosen.scss

@@ -0,0 +1,83 @@
+.chosen-container {
+  font-size: inherit;
+
+  .chosen-single,
+  .chosen-choices {
+    background: none;
+    background-color: $input-bg;
+    border: none;
+    border-bottom: 1px solid $input-border;
+    border-radius: $input-border-radius;
+    @include box-shadow(none);
+    padding: 0 $grid-gutter-width 0 0;
+    height: $input-height-base;
+
+    &.chosen-default span {
+      visibility: hidden;
+    }
+
+    div b {
+      background-position: 0 (($input-height-base - 18) / 2);
+    }
+  }
+
+  .chosen-drop {
+    @include box-shadow(none);
+    border-radius: 0 0 ($border-radius-base * 2) ($border-radius-base * 2);
+    border: 2px solid $gray-lighter;
+    border-top: 0;
+    padding-top: 10px;
+  }
+
+  .chosen-results {
+    padding: 0;
+    margin: 0;
+
+    li {
+      line-height: 34px;
+      padding: 0 ceil($grid-gutter-width / 2);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    li.highlighted {
+      background: none;
+      background-color: $gray-lightest;
+      color: $input-color;
+    }
+  }
+}
+
+.chosen-container-active.chosen-with-drop .chosen-single,
+.chosen-container-active.chosen-with-drop .chosen-choices {
+  background: none;
+  @include box-shadow(none);
+  border-radius: ($border-radius-base * 2) ($border-radius-base * 2) 0 0;
+  border: 2px solid $gray-lighter;
+  border-bottom: 0;
+  padding: 5px ceil($grid-gutter-width / 2);
+
+  div b {
+    background-position: 0 (($input-height-base - 18 + 10) / 2);
+  }
+}
+
+.chosen-container-multi .chosen-choices {
+  li.search-choice {
+    background: none;
+    background-color: $input-bg;
+    border: 0;
+    @include box-shadow(none);
+    margin: 0 10px 0 0;
+    padding: 5px 20px 5px 0;
+
+    .search-choice-close {
+      top: floor((($input-height-base - 12) / 2));
+    }
+  }
+
+  li.search-field input[type="text"] {
+    height: $input-height-base;
+  }
+}

data/assets/stylesheets/bookingsync/_form.scss

@@ -0,0 +1,265 @@
+/*!
+ * Copyright 2015 BookingSync SAS.
+ * Licensed under MIT (https://github.com/BookingSync/bootstrap-bookingsync-sass/blob/master/LICENSE)
+ */
+
+//
+// Forms
+// --------------------------------------------------
+
+// Form groups
+//
+// Designed to help with the organization and spacing of vertical forms. For
+// horizontal forms, use the predefined grid classes.
+
+.form-group {
+  position: relative;
+  display: block;
+  box-sizing: border-box;
+  max-width: 100%;
+  margin: 0;
+  padding: $label-padding-focus 0 $padding-base-vertical;
+
+  label {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    top: 20px;
+    overflow: hidden;
+    white-space: nowrap;
+    display: inline-block;
+    width: 100%;
+    max-width: 100%; // Force IE8 to wrap long content
+                     // (see https://github.com/twbs/bootstrap/issues/13141)
+    margin-bottom: 0;
+    font-weight: normal;
+    text-align: left;
+    color: $input-color;
+    pointer-events: none;
+    transition-duration: .2s;
+    -webkit-transition-timing-function: cubic-bezier(.4,0,.2,1);
+    transition-timing-function: cubic-bezier(.4,0,.2,1);
+  }
+
+  .label-lg {
+    font-size: 18px;
+    top: 28px;
+  }
+
+  .input-group-addon {
+    transition-duration: .2s;
+    -webkit-transition-timing-function: cubic-bezier(.4,0,.2,1);
+    transition-timing-function: cubic-bezier(.4,0,.2,1);
+  }
+
+  &.filled label {
+    color: $label-color-filled;
+    font-size: $label-font-size-filled;
+    top: 0;
+    visibility: visible;
+  }
+
+  &.focused {
+    label {
+      color: $label-color-focus;
+      font-size: $label-font-size-focus;
+      top: 0;
+      visibility: visible;
+
+      &:after {
+        left: 0;
+        visibility: visible;
+        width: 100%;
+      }
+    }
+
+    .input-group label:after {
+      visibility: hidden;
+    }
+
+    .input-group-addon {
+      box-shadow: 0 1px 0 $label-border-focus;
+      border-color: $label-color-focus;
+    }
+  }
+}
+
+// FIXME: :not(.readonly) should be used
+.form-group label:after {
+  background-color: $label-border-focus;
+  bottom: 5px;
+  content: '';
+  height: 2px;
+  left: 45%;
+  position: absolute;
+  visibility: hidden;
+  width: 10%;
+  transition-duration: .2s;
+  -webkit-transition-timing-function: cubic-bezier(.4,0,.2,1);
+  transition-timing-function: cubic-bezier(.4,0,.2,1);
+}
+
+.form-group.disabled label,
+.form-group.readonly label,
+.checkbox.disabled label,
+.radio.disabled label,
+fieldset[disabled] label {
+  color: $label-color-disabled;
+}
+
+.form-control[disabled],
+.form-control[readonly],
+fieldset[disabled] .form-control {
+  opacity: .5;
+}
+
+// Common form controls
+//
+// Shared size and type resets for form controls. Apply `.form-control` to any
+// of the following form controls:
+//
+// select
+// textarea
+// 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"]
+.form-control {
+  padding: 0;
+  border: none;
+  border-bottom: 1px solid $input-border;
+  box-shadow: none;
+  transition-duration: .3s;
+  -webkit-transition-timing-function: cubic-bezier(.4,0,.2,1);
+  transition-timing-function: cubic-bezier(.4,0,.2,1);
+
+  &:focus {
+    border-color: $label-border-focus;
+    box-shadow: 0 1px 0 $label-border-focus;
+  }
+
+  // read-only inputs
+  &[readonly] {
+    box-shadow: none;
+  }
+}
+
+// Input group
+.input-group {
+  margin-top: (-1 * ($padding-base-vertical + $label-font-size-focus));
+
+  label {
+    left: auto;
+    right: auto;
+    padding-left: $padding-base-horizontal;
+    z-index: 1000;
+    top: 17px;
+  }
+
+  .form-control {
+    padding-left: $padding-base-horizontal;
+    margin-top: ($label-padding-focus - ($padding-base-vertical / 2));
+  }
+}
+
+.input-group-addon {
+  border-top: 0;
+  padding-top: $input-group-addon-padding-top;
+}
+
+.input-group-addon:first-child {
+  border-left: 0;
+  border-right: 1px solid $input-group-addon-border-color;
+}
+
+.input-group-addon:last-child {
+  border-right: 0;
+  border-left: 1px solid $input-group-addon-border-color;
+}
+
+.help-block {
+  color: $help-text;
+}
+
+// Feedback states
+.has-success,
+.has-warning,
+.has-error {
+  &.focused {
+    label:after {
+      visibility: hidden;
+    }
+
+    .form-control:focus {
+      box-shadow: 0 1px 0 $label-border-focus;
+      border-color: $label-border-focus;
+    }
+  }
+
+  .form-control {
+    box-shadow: none;
+
+    &:focus {
+      box-shadow: none;
+    }
+  }
+
+  .help-block {
+    color: $help-text;
+  }
+}
+
+.has-success .input-group-addon {
+  border-color: $state-success-border;
+}
+
+.has-warning .input-group-addon {
+  border-color: $state-warning-border;
+}
+
+.has-error {
+  .input-group-addon {
+    border-color: $state-danger-border;
+  }
+
+  .error-message {
+    color: $state-danger-text;
+  }
+}
+
+.has-feedback label {
+  & ~ .form-control-feedback {
+    top: ($line-height-computed - 2);
+  }
+}
+
+.has-feedback .input-group ~ .form-control-feedback {
+  top: $label-font-size-focus;
+}
+
+.form-inline .has-feedback .form-control-feedback {
+  top: ($label-font-size-focus + ($padding-base-vertical / 2));
+}
+
+.has-feedback label.sr-only ~ .form-control-feedback {
+  top: $label-font-size-focus;
+}
+
+
+// Navbar form
+//
+.navbar-form {
+  margin-top: 4.5px;
+  margin-bottom: 4.5px;
+}

data/assets/stylesheets/bookingsync/_layout.scss

@@ -0,0 +1,99 @@
+/*!
+ * Copyright 2015 BookingSync SAS.
+ * Licensed under MIT (https://github.com/BookingSync/bootstrap-bookingsync-sass/blob/master/LICENSE)
+ */
+
+body {
+  height: 100vh;
+  padding-top: $navbar-height;
+}
+
+.navbar.navbar-fixed-top {
+  margin-bottom: 0;
+
+  & > .container {
+    .navbar-brand {
+      margin: 0 15px 0 0;
+      padding: 0;
+    }
+  }
+
+  .navbar-nav > li > a {
+    line-height: 40px;
+  }
+
+  h1,
+  .navbar-brand {
+    font-size: 18px;
+    line-height: $navbar-height;
+    padding: 0;
+    margin: 0;
+  }
+
+  @media (max-width: $screen-xs-max) {
+    .navbar-header > div {
+      padding: 0 60px;
+    }
+
+    &.navbar-bs-core .navbar-header > div {
+      padding: 0 40px;
+    }
+
+    div > .navbar-brand {
+      text-align: center;
+      width: 100%;
+    }
+  }
+}
+
+#content {
+  overflow: auto;
+  height: 100vh;
+  font-size: 12px; // FIXME: Temporary fix for easier migration
+
+  &.with-navbar {
+    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: absolute;
+    left: 0;
+    top: $navbar-height;
+    width: 100%;
+    height: calc(100vh - 70px);
+
+    &:hover {
+      width: 100%;
+    }
+  }
+}
+
+@media (min-width: $screen-sm-min) {
+  .menu {
+    height: 100vh;
+    position: fixed;
+    top: 0;
+    left: 0;
+
+    &.collapse {
+      visibility: visible;
+    }
+  }
+
+  body.accounts.index .navbar.navbar-fixed-top,
+  body.accounts.index #container {
+    margin-left: 0;
+  }
+}