bootstrap-bookingsync-sass 0.0.16 → 0.0.17

data/assets/stylesheets/bookingsync/_type.scss

@@ -1,7 +1,3 @@
-$line-height: 1.5;
-$dl-horizontal-breakpoint: 768px;
-$dl-horizontal-narrow-offset: 120px;
-
 dl + dl {
   border-top: 1px solid rgba($gray-base, .05);;
   padding-top: 8px;

data/assets/stylesheets/bookingsync/_utilities.scss

@@ -1,4 +1,47 @@
 // Vertical Alignment
-.valign-top             { vertical-align: top; }
-.valign-middle          { vertical-align: middle; }
-.valign-bottom          { vertical-align: bottom; }
+// --------------------------------------------------
+.valign-top {
+  vertical-align: top !important;
+}
+.valign-middle {
+  vertical-align: middle !important;
+}
+.valign-bottom {
+  vertical-align: bottom !important;
+}
+
+// Flex
+// --------------------------------------------------
+.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;
+}

data/assets/stylesheets/bookingsync/_variables.scss

@@ -2,42 +2,40 @@
  * Copyright 2015 BookingSync SAS.
  * Licensed under MIT (https://github.com/BookingSync/bootstrap-bookingsync-sass/blob/master/LICENSE)
  */
-@import 'bootstrap/variables';
-@import 'colors';
 
 $bootstrap-bookingsync-sass-asset-helper: false !default;
 
-$brand-primary:                 $bs-lightblue;
-$brand-success:                 $bs-green;
-$brand-info:                    $bs-lightblue;
-$brand-warning:                 $bs-yellow;
-$brand-danger:                  $bs-red;
+$brand-primary:                 $bs-lightblue !default;
+$brand-success:                 $bs-green !default;
+$brand-info:                    $bs-lightblue !default;
+$brand-warning:                 $bs-yellow !default;
+$brand-danger:                  $bs-red !default;
 
-$gray-base:                     $bs-darkblue;
-$gray-darker:                   $gray-base;
-$gray-dark:                     rgba($gray-base, .75);
-$gray:                          rgba($gray-base, .75);
-$gray-light:                    rgba($gray-base, .5);
-$gray-lighter:                  rgba($gray-base, .25);
-$gray-lightest:                 rgba($gray-base, .15);
+$gray-base:                     $bs-darkblue !default;
+$gray-darker:                   $gray-base !default;
+$gray-dark:                     rgba($gray-base, .75) !default;
+$gray:                          rgba($gray-base, .75) !default;
+$gray-light:                    rgba($gray-base, .5) !default;
+$gray-lighter:                  rgba($gray-base, .25) !default;
+$gray-lightest:                 rgba($gray-base, .15) !default;
 
 //== Scaffolding
 //
 //## Settings for some of the most global styles.
-$text-color:                    $gray-dark;
-$body-bg:                       #edeff4;
+$text-color:                    $gray-dark !default;
+$body-bg:                       #edeff4 !default;
 
 //== Typography
 //
 //## Font, line-height, and color for body text, headings, and more.
-$font-family-sans-serif:        "Open Sans", Helvetica, Arial, sans-serif;
-$font-family-base:              $font-family-sans-serif;
-$font-size-base:                14px;
-$font-size-h1:                  26px;
-$font-size-h2:                  22px;
-$font-size-h3:                  18px;
-$font-size-h4:                  16px;
-$headings-color:                $bs-darkgray;
+$font-family-sans-serif:        "Open Sans", Helvetica, Arial, sans-serif !default;
+$font-family-base:              $font-family-sans-serif !default;
+$font-size-base:                14px !default;
+$font-size-h1:                  26px !default;
+$font-size-h2:                  22px !default;
+$font-size-h3:                  18px !default;
+$font-size-h4:                  16px !default;
+$headings-color:                $bs-darkgray !default;
 
 //== Iconography
 //
@@ -59,122 +57,146 @@ $smiles-font-svg-id:        "bookingsync_smiles" !default;
 //== Components
 //
 //## Define common padding and border radius sizes and more. Values based on 14px
-$border-radius-base:            2px;
-$border-radius-large:           3px;
-$border-radius-small:           1px;
+$padding-base-vertical:         6px !default;
+
+$border-radius-base:            2px !default;
+$border-radius-large:           3px !default;
+$border-radius-small:           1px !default;
 
 
 //== BookingSync
 //
-$menu-color:                    #566da7;
-$menu-bg:                       #1e3264;
-$menu-header-height:            70px;
-$menu-header-color:             #ffffff;
-$menu-header-bg:                $brand-primary;
-$menu-header-link-color:        #ffffff;
-$menu-header-link-hover-color:  $menu-header-link-color;
-$menu-header-link-hover-bg:     #53b4e1;
-$menu-link-color:               #8ea8ea;
-$menu-link-icon-color:          rgba($menu-link-color, 0.5);
-$menu-link-bg:                  $menu-bg;
-$menu-link-hover-color:         #ffffff;
-$menu-link-hover-icon-color:    $menu-color;
-$menu-link-hover-bg:            #263c73;
-$menu-active-color:             #ffffff;
-$menu-active-icon-color:        $brand-primary;
-$menu-active-bg:                #16264e;
-$menu-footer-color:             #ffffff;
-$menu-footer-bg:                $menu-bg;
-$menu-footer-link-color:        $menu-link-color;
-$menu-footer-back-color:        #fff;
-
-$menu-border-radius:              $border-radius-base;
-$menu-default-toggle-icon-bar-bg: $gray-light;
+$menu-color:                    #566da7 !default;
+$menu-bg:                       #1e3264 !default;
+$menu-header-height:            70px !default;
+$menu-header-color:             #ffffff !default;
+$menu-header-bg:                $brand-primary !default;
+$menu-header-link-color:        #ffffff !default;
+$menu-header-link-hover-color:  $menu-header-link-color !default;
+$menu-header-link-hover-bg:     #53b4e1 !default;
+$menu-link-color:               #8ea8ea !default;
+$menu-link-icon-color:          rgba($menu-link-color, 0.5) !default;
+$menu-link-bg:                  $menu-bg !default;
+$menu-link-hover-color:         #ffffff !default;
+$menu-link-hover-icon-color:    $menu-color !default;
+$menu-link-hover-bg:            #263c73 !default;
+$menu-active-color:             #ffffff !default;
+$menu-active-icon-color:        $brand-primary !default;
+$menu-active-bg:                #16264e !default;
+$menu-footer-color:             #ffffff !default;
+$menu-footer-bg:                $menu-bg !default;
+$menu-footer-link-color:        $menu-link-color !default;
+$menu-footer-back-color:        #fff !default;
+
+$menu-border-radius:              $border-radius-base !default;
+$menu-default-toggle-icon-bar-bg: $gray-light !default;
 
 //== Buttons
 //
-$btn-primary-bg:                $brand-success;
-$btn-primary-border:            darken($btn-success-bg, 5%);
-$btn-border-radius-base:        $border-radius-base;
-$btn-border-radius-small:       $border-radius-small;
-$btn-border-radius-large:       $border-radius-large;
+$btn-success-bg:                $brand-success !default;
+
+$btn-primary-bg:                $brand-success !default;
+$btn-primary-border:            darken($btn-success-bg, 5%) !default;
+$btn-border-radius-base:        $border-radius-base !default;
+$btn-border-radius-small:       $border-radius-small !default;
+$btn-border-radius-large:       $border-radius-large !default;
 
 //== Forms
 //
-$input-color:                   rgb(106, 117, 141); // #6a758d
-$input-bg:                      transparent;
-$input-border-radius-base:      0;
-$input-border-radius:           $input-border-radius-base;
-$input-border-radius-small:     $input-border-radius-base;
-$input-border-radius-large:     $input-border-radius-base;
-$input-border:                  rgba(30, 50, 100, 0.5);
-$input-border-focus:            $input-color;
-$input-height-base:             (($padding-base-vertical * 2) + $font-size-base + 1); // 1 for bottom border
-$input-bg-disabled:             transparent;
+$input-color:                   rgb(106, 117, 141) !default; // #6a758d
+$input-bg:                      transparent !default;
+$input-border-radius-base:      0 !default;
+$input-border-radius:           $input-border-radius-base !default;
+$input-border-radius-small:     $input-border-radius-base !default;
+$input-border-radius-large:     $input-border-radius-base !default;
+$input-border:                  rgba(30, 50, 100, 0.5) !default;
+$input-border-focus:            $input-color !default;
+$input-height-base:             (($padding-base-vertical * 2) + $font-size-base + 1) !default; // 1 for bottom border
+$input-bg-disabled:             transparent !default;
+
+$label-color:                   rgba(106, 117, 141, .75) !default;
 
-$label-color:                   rgba(106, 117, 141, .75);
+$label-font-size-focus:         12px !default;
+$label-padding-focus:           ($padding-base-vertical + $label-font-size-focus) !default;
+$label-color-focus:             $brand-primary !default;
+$label-border-focus:            $label-color-focus !default;
 
-$label-font-size-focus:         12px;
-$label-padding-focus:           ($padding-base-vertical + $label-font-size-focus);
-$label-color-focus:             $brand-primary;
-$label-border-focus:            $label-color-focus;
+$label-font-size-filled:        $label-font-size-focus !default;
+$label-color-filled:            rgba(106, 117, 141, 0.6) !default;
+$label-border-filled:           $input-border !default;
 
-$label-font-size-filled:        $label-font-size-focus;
-$label-color-filled:            rgba(106, 117, 141, 0.6);
-$label-border-filled:           $input-border;
+$label-color-disabled:          rgba(106, 117, 141, 0.5) !default;
 
-$label-color-disabled:          rgba(106, 117, 141, 0.5);
+$input-group-addon-bg:          transparent !default;
+$input-group-addon-height:      ($input-height-base + $label-padding-focus) !default;
+$input-group-addon-padding-top: ($label-padding-focus + ($padding-base-vertical / 2)) !default;
 
-$input-group-addon-bg:          transparent;
-$input-group-addon-height:      ($input-height-base + $label-padding-focus);
-$input-group-addon-padding-top: ($label-padding-focus + ($padding-base-vertical / 2));
+$help-text:                     $gray-light !default;
 
-$help-text:                     $gray-light;
+$state-success-text:            #2db859 !default;
+$state-success-bg:              rgba($brand-success, 1) !default;
+$state-success-border:          $state-success-text !default;
 
-$state-success-text:            #2db859;
-$state-success-bg:              rgba($brand-success, 1);
-$state-success-border:          $state-success-text;
+$state-warning-text:            #f39c12 !default;
+$state-warning-bg:              rgba($brand-warning, 1) !default;
+$state-warning-border:          $state-warning-text !default;
 
-$state-warning-text:            #f39c12;
-$state-warning-bg:              rgba($brand-warning, 1);
-$state-warning-border:          $state-warning-text;
+$state-danger-text:             #e74c3c !default;
+$state-danger-bg:               rgba($brand-danger, 1) !default;
+$state-danger-border:           $state-danger-text !default;
 
-$state-danger-text:             #e74c3c;
-$state-danger-bg:               rgba($brand-danger, 1);
-$state-danger-border:           $state-danger-text;
 
+//== Grid system
+//
+$grid-columns:                     12 !default;
+$grid-gutter-width:                30px !default;
 
 //== Navbar
 //
-$navbar-height:                     70px;
-$navbar-default-bg:                 #fff;
-$navbar-default-color:              $gray-dark;
-$navbar-default-border:             $gray-lighter;
-$navbar-default-toggle-icon-bar-bg: $gray-light;
+$navbar-height:                     70px !default;
+$navbar-default-bg:                 #fff !default;
+$navbar-default-color:              $gray-dark !default;
+$navbar-default-border:             $gray-lighter !default;
+$navbar-default-toggle-icon-bar-bg: $gray-light !default;
 
 
 //== Panels
 //
-$panel-footer-bg:                   #fff;
-$panel-default-heading-bg:          #fff;
-$panel-border-radius:               $border-radius-large;
-$panel-inner-border:                $gray-lightest;
-$panel-default-border:              $gray-lighter;
+$panel-footer-bg:                   #fff !default;
+$panel-default-heading-bg:          #fff !default;
+$panel-border-radius:               $border-radius-large !default;
+$panel-inner-border:                $gray-lightest !default;
+$panel-default-border:              $gray-lighter !default;
 
 
 //== Tables
 //
-$table-border-color:                $gray-lightest;
-$table-bg-accent:                   #f4f5f7;
-$table-bg:                          #fff;
-$table-caption-color:               $gray;
+$table-border-color:                $gray-lightest !default;
+$table-bg-accent:                   #f4f5f7 !default;
+$table-bg:                          #fff !default;
+$table-caption-color:               $gray !default;
 
 
 //== Sheet
 //
-$sheet-bg:                          #fff;
-$sheet-border:                      $gray-lighter;
-$sheet-border-radius:               3px;
-$sheet-margin:                      ($grid-gutter-width / 2);
-$sheet-padding:                     $sheet-margin;
-$sheet-inner-border:                $gray-lightest;
+$sheet-bg:                          #fff !default;
+$sheet-border:                      $gray-lighter !default;
+$sheet-border-radius:               3px !default;
+$sheet-margin:                      ($grid-gutter-width / 2) !default;
+$sheet-padding:                     $sheet-margin !default;
+$sheet-inner-border:                $gray-lightest !default;
+
+
+//== Switch
+//
+$switch-label-size: 10px !default;
+$switch-off-border: $gray-lighter !default;
+$switch-off-bg: #fff !default;
+$switch-off-color: $gray-lightest !default;
+
+
+//== Typography
+//
+$line-height: 1.5 !default;
+$dl-horizontal-breakpoint: 768px !default;
+$dl-horizontal-narrow-offset: 120px !default;

data/docs/Gemfile

@@ -0,0 +1,16 @@
+source 'https://rubygems.org'
+
+gem "nanoc", "~> 3.8.0"
+gem "adsf"
+gem "guard-nanoc"
+gem "guard-livereload"
+gem "guard-bundler"
+gem "guard-pow"
+gem "coderay"
+gem "kramdown"
+gem "pygments.rb"
+gem "nokogiri"
+gem 'uglifier'
+gem 'nanoc-sprockets3'
+gem "bootstrap-bookingsync-sass", path: "../"
+gem "coffee-script"

data/docs/Guardfile

@@ -0,0 +1,25 @@
+guard 'bundler' do
+  watch('Gemfile')
+end
+
+guard 'nanoc' do
+  watch('nanoc.yaml') # Change this to config.yaml if you use the old config file name
+  watch('Rules')
+  watch(%r{^(content|layouts|lib|static)/.*$})
+end
+
+guard 'livereload' do
+  watch(%r{/.+\.(html|css|js|less)})
+end
+
+guard 'pow' do
+  watch('.powrc')
+  watch('.powenv')
+  watch('.rvmrc')
+  watch('Gemfile')
+  watch('Gemfile.lock')
+  watch('config/application.rb')
+  watch('config/environment.rb')
+  watch(%r{^config/environments/.*\.rb$})
+  watch(%r{^config/initializers/.*\.rb$})
+end

data/docs/Rakefile

@@ -0,0 +1,53 @@
+require 'nanoc3/tasks'
+require 'fileutils'
+
+desc "Compile the site"
+task :compile do
+  `nanoc compile`
+end
+
+desc "Remove the output dir"
+task :remove_output_dir do
+  FileUtils.rm_r('output') if File.exist?('output')
+end
+
+def commit_message
+  publish_emojis = [':boom:', ':rocket:', ':metal:', ':bulb:', ':zap:',
+    ':sailboat:', ':gift:', ':ship:', ':shipit:', ':sparkles:', ':rainbow:']
+  default_message = "P U B L I S H #{publish_emojis.sample}"
+
+  print "Enter a commit message (default: '#{default_message}'): "
+  STDOUT.flush
+  mesg = STDIN.gets.chomp.strip
+
+  mesg = default_message if mesg == ''
+  mesg.gsub(/'/, '') # Allow this to be handed off via -m '#{message}'
+end
+
+desc "Publish to http://styleguide.bookingsync.com"
+task :publish => [:clean, :remove_output_dir] do
+  mesg = commit_message
+
+  sh "nanoc compile"
+
+  ENV['GIT_DIR'] = File.expand_path(`git rev-parse --git-dir`.chomp)
+  old_sha = `git rev-parse refs/remotes/origin/gh-pages`.chomp
+  Dir.chdir('output') do
+    ENV['GIT_INDEX_FILE'] = gif = '/tmp/dev.gh.i'
+    ENV['GIT_WORK_TREE'] = Dir.pwd
+    File.unlink(gif) if File.file?(gif)
+    `git add -A`
+    tsha = `git write-tree`.strip
+    puts "Created tree   #{tsha}"
+    if old_sha.size == 40
+      csha = `git commit-tree #{tsha} -p #{old_sha} -m '#{mesg}'`.strip
+    else
+      csha = `git commit-tree #{tsha} -m '#{mesg}'`.strip
+    end
+    puts "Created commit #{csha}"
+    puts `git show #{csha} --stat`
+    puts "Updating gh-pages from #{old_sha}"
+    `git update-ref refs/heads/gh-pages #{csha}`
+    `git push origin gh-pages`
+  end
+end