bootstrap-bookingsync-sass 1.0.2 → 3.0.0

data/assets/stylesheets/bookingsync/_menu.scss

@@ -37,7 +37,7 @@ $menu-submenu-width: $menu-width - $menu-collapsed-width;
     }
 
     a {
-      display: block;
+      display: flex;
       text-decoration: none;
       white-space: nowrap;
       line-height: $menu-link-height;
@@ -73,9 +73,11 @@ $menu-submenu-width: $menu-width - $menu-collapsed-width;
 }
 
 .menu-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   width: $menu-collapsed-width;
   min-width: $menu-collapsed-width;
-  text-align: center;
 
   * {
     width: $menu-icon-size;
@@ -94,10 +96,26 @@ $menu-submenu-width: $menu-width - $menu-collapsed-width;
 }
 
 .menu-link-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   color: $menu-link-icon-color;
+
+  i {
+    width: auto;
+    height: auto;
+  }
+
+  .icon-inbox,
+  .icon-envelope {
+    font-size: 1em;
+  }
 }
 
 .menu-link-body {
+  display: flex;
+  align-items: center;
+  font-size: 12px;
   font-weight: 600;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -137,9 +155,10 @@ $menu-submenu-width: $menu-width - $menu-collapsed-width;
   }
 }
 
-
-
 .menu-header {
+  display: flex;
+  flex: 0 0 $menu-header-height;
+  align-items: center;
   background-color: $menu-header-bg;
   color: $menu-header-color;
   z-index: $zindex-navbar;
@@ -172,6 +191,8 @@ $menu-submenu-width: $menu-width - $menu-collapsed-width;
 }
 
 .menu-header-body {
+  display: flex;
+  align-items: center;
   height: $menu-header-height;
   position: relative;
   color: $menu-header-color;

data/assets/stylesheets/bookingsync/_modals.scss

@@ -1,7 +1,3 @@
-.ember-modal-wrapper .modal.in {
-  display: block;
-}
-
 .modal-content {
   border-radius: $modal-border-radius;
   @include box-shadow(0 3px 30px $gray-lightest);

data/assets/stylesheets/bookingsync/_variables.scss

@@ -51,42 +51,106 @@ $bs-icon-winktongue:        "\e608" !default;
 //** File name for icons font files.
 $icons-font-name:           "bookingsync-icons" !default;
 
-$icon-trash:                "\e903" !default;
-$icon-clone:                "\e905" !default;
-$icon-translations:         "\e902" !default;
-$icon-external:             "\e901" !default;
-$icon-invoice:              "\e900" !default;
-$icon-rental:               "\e904" !default;
-$icon-photo:                "\e93b" !default;
-$icon-video:                "\e965" !default;
-$icon-categories:           "\e995" !default;
-$icon-description:          "\e9ae" !default;
-$icon-contract:             "\e9eb" !default;
-$icon-reservation:          "\e9f9" !default;
-$icon-rates:                "\ea12" !default;
-$icon-payments:             "\ea16" !default;
-$icon-help:                 "\ea1b" !default;
-$icon-map:                  "\ea38" !default;
-$icon-navigation:           "\ea44" !default;
-$icon-calendar:             "\ea62" !default;
-$icon-inbox:                "\ea80" !default;
-$icon-clients:              "\eb0c" !default;
-$icon-owner:                "\eb0d" !default;
-$icon-search:               "\eb36" !default;
-$icon-checkin:              "\eb4a" !default;
-$icon-settings:             "\eb5f" !default;
-$icon-maintenance:          "\eb6c" !default;
-$icon-reports:              "\eb8b" !default;
-$icon-cleaning:             "\ebfb" !default;
-$icon-notifications:        "\ec09" !default;
-$icon-instant:              "\ec49" !default;
-$icon-amenities:            "\ec5a" !default;
-$icon-applications:         "\ec5d" !default;
-$icon-website:              "\ec97" !default;
-$icon-reviews:              "\ece2" !default;
-$icon-template:             "\eeb0" !default;
-$icon-widget:               "\eecd" !default;
-
+$icon-ban: "\e911";
+$icon-external: "\e901";
+$icon-rental: "\e904";
+$icon-pencil: "\e914";
+$icon-photo: "\e93b";
+$icon-video: "\e965";
+$icon-categories: "\e995";
+$icon-file: "\e9ad";
+$icon-description: "\e9ae";
+$icon-contract: "\e9eb";
+$icon-reservation: "\e9f9";
+$icon-rates: "\ea12";
+$icon-payments: "\ea16";
+$icon-help: "\ea1b";
+$icon-map: "\ea38";
+$icon-navigation: "\ea44";
+$icon-calendar: "\ea62";
+$icon-inbox: "\e928";
+$icon-bubble-dots: "\eace";
+$icon-clients: "\eb0c";
+$icon-owner: "\eb0d";
+$icon-search: "\eb36";
+$icon-checkin: "\eb4a";
+$icon-settings: "\eb5f";
+$icon-maintenance: "\eb6c";
+$icon-reports: "\eb8b";
+$icon-cleaning: "\ebfb";
+$icon-notifications: "\ec09";
+$icon-instant: "\ec49";
+$icon-amenities: "\ec5a";
+$icon-applications: "\ec5d";
+$icon-download: "\ec83";
+$icon-website: "\ec97";
+$icon-star-half: "\ece1";
+$icon-reviews: "\ece2";
+$icon-warning: "\ed50";
+$icon-error: "\ed51";
+$icon-question-circle: "\ed56";
+$icon-plus: "\ed5d";
+$icon-minus: "\ed5e";
+$icon-minus-circle: "\ed62";
+$icon-cross: "\ed6c";
+$icon-checkmark: "\ed6f";
+$icon-circle-empty: "\ee73";
+$icon-circle: "\ee78";
+$icon-template: "\eeb0";
+$icon-widget: "\eecd";
+$icon-trash: "\e903";
+$icon-clone: "\e905";
+$icon-inline: "\e906";
+$icon-calendar-empty: "\e907";
+$icon-lock: "\e908";
+$icon-bars: "\e909";
+$icon-calendar-planning: "\e90a";
+$icon-activity: "\e90b";
+$icon-child: "\e90c";
+$icon-couple: "\e90d";
+$icon-print: "\e90e";
+$icon-eye: "\e90f";
+$icon-short-arrow-right: "\e921";
+$icon-long-arrow-right: "\e910";
+$icon-users-group: "\e912";
+$icon-user: "\e913";
+$icon-invoice: "\e900";
+$icon-translations: "\e902";
+$icon-angle-up: "\edb9";
+$icon-angle-right: "\edbd";
+$icon-angle-down: "\edc1";
+$icon-angle-left: "\edc5";
+$icon-sort-up: "\edc7";
+$icon-sort-right: "\edc8";
+$icon-sort-down: "\edc9";
+$icon-sort-left: "\edca";
+$icon-arrow-up: "\eddc";
+$icon-arrow-right: "\edde";
+$icon-arrow-down: "\ede0";
+$icon-arrow-left: "\ede2";
+$icon-small-arrow-up: "\edd4";
+$icon-small-arrow-right: "\edd6";
+$icon-small-arrow-down: "\edd8";
+$icon-small-arrow-left: "\edda";
+$icon-megaphone: "\e915";
+$icon-calendars: "\e916";
+$icon-guests: "\e917";
+$icon-envelope: "\e918";
+$icon-rentals: "\e919";
+$icon-reservations: "\e91a";
+$icon-bubble-dots: "\e91b";
+$icon-add-note: "\e91c";
+$icon-reply: "\e91d";
+$icon-info-emptystate: "\e926";
+$icon-star-empty: "\e91e";
+$icon-star: "\e91f";
+$icon-star-half: "\e920";
+$icon-tripadvisor: "\e922";
+$icon-airbnb: "\e923";
+$icon-booking-com: "\e924";
+$icon-homeaway: "\e925";
+$icon-contacts: "\e927";
+$icon-browser-errorstate: "\e929";
 
 //== Components
 //

data/docs/Gemfile

@@ -11,6 +11,7 @@ gem "kramdown"
 gem "pygments.rb"
 gem "nokogiri"
 gem 'uglifier'
+gem 'sass'
+gem 'coffee-script'
 gem 'nanoc-sprockets3'
-gem "bootstrap-bookingsync-sass", path: "../"
-gem "coffee-script"
+gem "bootstrap-bookingsync-sass"

data/docs/content/assets/stylesheets/_icons.scss

@@ -22,11 +22,6 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.styleguide-icon-ember {
-  &:before {
-    content: $styleguide-icon-ember;
-  }
-}
 .styleguide-icon-forms {
   &:before {
     content: $styleguide-icon-forms;

data/docs/content/assets/stylesheets/_variables.scss

@@ -13,7 +13,6 @@ $list-group-link-hover-color:   darken($brand-primary, 10%);
 
 $pre-bg:                        #f4f4f4;
 
-$styleguide-icon-ember:         "\e100";
 $styleguide-icon-forms:         "\e101";
 $styleguide-icon-utilities:     "\e102";
 $styleguide-icon-compositions:  "\e103";

data/docs/content/brand/iconography.md

@@ -39,6 +39,20 @@
       <li><i class="icon-widget"></i> widget</li>
       <li><i class="icon-trash"></i> trash</li>
       <li><i class="icon-clone"></i> clone</li>
+      <li><i class="icon-calendar-empty"></i> calendar-empty</li>
+      <li><i class="icon-lock"></i> lock</li>
+      <li><i class="icon-bars"></i> bars</li>
+      <li><i class="icon-calendar-planning"></i> calendar-planning</li>
+      <li><i class="icon-activity"></i> activity</li>
+      <li><i class="icon-child"></i> child</li>
+      <li><i class="icon-couple"></i> couple</li>
+      <li><i class="icon-print"></i> print</li>
+      <li><i class="icon-eye"></i> eye</li>
+      <li><i class="icon-user"></i> user</li>
+      <li><i class="icon-checkmark"></i> checkmark</li>
+      <li><i class="icon-circle"></i> circle</li>
+      <li><i class="icon-inline"></i> inline</li>
+      <li><i class="icon-cross"></i> cross</li>
     </ul>
   </div>
 </div>
@@ -71,6 +85,20 @@
   <li><i class="icon-website"></i> website</li>
   <li><i class="icon-reviews"></i> reviews</li>
   <li><i class="icon-widget"></i> widget</li>
+  <li><i class="icon-calendar-empty"></i> calendar-empty</li>
+  <li><i class="icon-lock"></i> lock</li>
+  <li><i class="icon-bars"></i> bars</li>
+  <li><i class="icon-calendar-planning"></i> calendar-planning</li>
+  <li><i class="icon-activity"></i> activity</li>
+  <li><i class="icon-child"></i> child</li>
+  <li><i class="icon-couple"></i> couple</li>
+  <li><i class="icon-print"></i> print</li>
+  <li><i class="icon-eye"></i> eye</li>
+  <li><i class="icon-user"></i> user</li>
+  <li><i class="icon-checkmark"></i> checkmark</li>
+  <li><i class="icon-circle"></i> circle</li>
+  <li><i class="icon-inline"></i> inline</li>
+  <li><i class="icon-cross"></i> cross</li>
 </ul>
 ~~~
 

data/docs/content/forms/forms.md

@@ -1210,6 +1210,56 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a blandit quam
 </form>
 ~~~
 
+<div class="example">
+  <div class="sheet-header">
+    <h3 id="input-group-with-icon">Input group with icon</h3>
+  </div>
+
+  <p>Add icon to input field adding class <code>.has-icon</code> to the <code>.form-group</code>. 
+  Create bigger or smaller icons using classes like <code>.icon--lg</code>. Use these classes 
+  in conjunction with <code>.input-lg</code> for the input field for example to match its height.</p>
+
+  <div class="bs-example bs-sheet" data-example-id="input-group-with-icon">
+    <form>
+      <div class="form-group has-icon">
+        <label for="inputGroupLarge">Large input group</label>
+        <i class="icon-notifications icon--lg"></i>
+        <input class="form-control input-lg" type="text" id="inputGroupLarge">
+      </div>
+      <div class="form-group has-icon">
+        <label for="inputGroupDefault">Default input group</label>
+        <i class="icon-notifications"></i>
+        <input class="form-control" type="text" id="inputGroupDefault">
+      </div>
+      <div class="form-group has-icon">
+        <label for="inputGroupSmall">Small input group</label>
+        <i class="icon-notifications icon--sm"></i>
+        <input class="form-control input-sm" type="text" id="inputGroupSmall">
+      </div>
+    </form>
+  </div>
+</div>
+
+~~~ html
+<form>
+  <div class="form-group has-icon">
+    <label for="inputGroupLarge">Large input group</label>
+    <i class="icon-notifications icon--lg"></i>
+    <input class="form-control input-lg" type="text" id="inputGroupLarge">
+  </div>
+  <div class="form-group has-icon">
+    <label for="inputGroupDefault">Default input group</label>
+    <i class="icon-notifications"></i>
+    <input class="form-control" type="text" id="inputGroupDefault">
+  </div>
+  <div class="form-group has-icon">
+    <label for="inputGroupSmall">Small input group</label>
+    <i class="icon-notifications icon--sm"></i>
+    <input class="form-control input-sm" type="text" id="inputGroupSmall">
+  </div>
+</form>
+~~~
+
 <div class="example">
   <div class="sheet-header">
     <h3 id="height-sizing">Height sizing</h3>

data/docs/content/utilities/_navbar.html

@@ -3,4 +3,6 @@
                   class: "list-group-item") %></li>
   <li><%= link_to("Vertical table alignment", "#vertical-table-alignment",
                   class: "list-group-item") %></li>
+  <li><%= link_to("Text Utils", "#text-utils",
+    class: "list-group-item") %></li>
 </ul>

data/docs/content/utilities/helpers.md

@@ -55,3 +55,18 @@
   </tr>
 </table>
 ~~~
+
+<div class="example">
+  <div class="sheet-header">
+    <h3 id="text-utils">Text Utils</h3>
+  </div>
+  
+  <p>`.text-nowrap`</p>
+
+  <div class="bs-example bs-sheet" data-example-id="vertical-alignment">
+    <span class="text-nowrap">Don't wrap text, Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
+  </div>
+</div>
+~~~ html
+<span class="text-nowrap">Don't wrap text, Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
+~~~

data/docs/layouts/sidebar.html

@@ -42,12 +42,5 @@
         <%= items["/compositions/_navbar.*"].compiled_content %>
       <% end %>
     </li>
-    <li class="<%= "expanded active" if @item_rep.path.start_with?("/ember") %>">
-      <%= link_to('<i class="styleguide-icon-ember icon-fw"></i>&nbsp; <span>Ember Addon</span>',
-        "/ember/", { class: "list-group-item" }) %>
-      <% if @item_rep.path.start_with?("/ember") %>
-        <%= items["/ember/_navbar.*"].compiled_content %>
-      <% end %>
-    </li>
   </ul>
 </div>

data/lib/bootstrap-bookingsync-sass.rb

@@ -1,4 +1,5 @@
 require "bootstrap/bookingsync/version"
+
 module Bootstrap
   module BookingSync
     class << self
@@ -10,9 +11,16 @@ module Bootstrap
           register_rails_engine
         elsif sprockets?
           register_sprockets
+        elsif defined?(::Sass) && ::Sass.respond_to?(:load_paths)
+          # The deprecated `sass` gem:
+          ::Sass.load_paths << stylesheets_path
         end
 
-        configure_sass
+        if defined?(::Sass::Script::Value::Number)
+          # Set precision to 6 as per:
+          # https://github.com/twbs/bootstrap/blob/da717b03e6e72d7a61c007acb9223b9626ae5ee5/package.json#L28
+          ::Sass::Script::Number.precision = [6, ::Sass::Script::Number.precision].max
+        end
       end
 
       # Paths
@@ -51,15 +59,6 @@ module Bootstrap
 
       private
 
-      def configure_sass
-        require 'sass'
-
-        ::Sass.load_paths << stylesheets_path
-
-        # bootstrap requires minimum precision of 8, see https://github.com/twbs/bootstrap-sass/issues/409
-        ::Sass::Script::Number.precision = [8, ::Sass::Script::Number.precision].max
-      end
-
       def register_compass_extension
         ::Compass::Frameworks.register(
             'bootstrap-bookinsync',

data/lib/bootstrap/bookingsync/engine.rb

@@ -8,8 +8,10 @@ module Bootstrap
           %w(stylesheets javascripts fonts images).each do |sub|
             app.config.assets.paths << root.join('assets', sub).to_s
           end
-          app.config.assets.precompile << %r(bookingsync/bookingsync-smiles\.(?:eot|svg|ttf|woff2?)$)
-          app.config.assets.precompile << %r(bookingsync/bookingsync-icons\.(?:eot|svg|ttf|woff2?)$)
+          %w(eot svg ttf woff2).each do |format|
+            app.config.assets.precompile << "bookingsync/bookingsync-smiles.#{format}"
+            app.config.assets.precompile << "bookingsync/bookingsync-icons.#{format}"
+          end
         end
       end
     end

data/lib/bootstrap/bookingsync/version.rb

@@ -1,5 +1,5 @@
 module Bootstrap
   module BookingSync
-    VERSION = "1.0.2"
+    VERSION = "3.0.0"
   end
 end