patternfly-sass 3.6.0 → 3.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 09a5e52d0bae89b947708b4bed5e1a93e57e42a0
-  data.tar.gz: 5c2ab66cb773b56ed09e4dd73d796955ab39f736
+  metadata.gz: d80af50b669703d875be1d2920cc020c881b1473
+  data.tar.gz: fc28f2f1cc8fffa2ac65fa5d9804ff4621c90c8a
 SHA512:
-  metadata.gz: 0a8b87e1810838a77667f3f80818d48dd850284f39de58dcf5e6794a1406d90232925e6c8c83a5e1f9f3c868016e48873fa7e71c9d875696b319755e4b65361b
-  data.tar.gz: efa021aa0202e606763849880139cd10cb2847dc1dce8daa7c5fbf0b7226fcf3d4d37f9c576e435efc4d0b5826d2762348eb4bc4c5358d900875f9ffb53df3e6
+  metadata.gz: 9d7e1b06ada7c1f2a37b43e99738c985e6dada18abe53201b80da5ef6ffaea9f84b633c6ebb4e7bd7c1ddcef4fbddf0580d58e15a1014633a62eabe3d8649059
+  data.tar.gz: 7ef42014ce24c89039a6824ac7c96c76cdc98ef2629fa9ba37fbffe55c174b97601781cb23c974ae9c02c17e9514eb288b96b65f04c14d95ec25aab209e71598

data/.travis.yml

@@ -23,8 +23,8 @@ after_script:
   - sleep 2
 env:
   matrix:
-    - "TOLERANCE=0.000001"
-    - "TOLERANCE=0.000000"
+    - "BROWSER=firefox TOLERANCE=0.000001"
+    - "BROWSER=firefox TOLERANCE=0.000000"
 matrix:
   fast_finish: true
   allow_failures:

data/Rakefile

@@ -44,28 +44,23 @@ end
 desc "Start a web server with both the less and the sass version"
 task :serve => :compile do
   require 'webrick'
-  server = WEBrick::HTTPServer.new :Port => 9000, :DirectoryIndex => []
+  server = WEBrick::HTTPServer.new :Port => 9000
   {
-    '/'                                     => 'spec/main.html',
-    '/less/dist/css'                        => 'spec/html/dist/css',
-    '/less/dist/fonts'                      => 'assets/fonts/patternfly',
-    '/less/dist/img'                        => 'assets/images/patternfly',
-    '/less/dist/js'                         => 'assets/javascripts',
-    '/less/components'                      => 'bower_components',
-    '/less/components/bootstrap/dist/js'    => gem_asset_path('bootstrap-sass', 'assets/javascripts'),
-    '/less/components/bootstrap/dist/fonts' => gem_asset_path('bootstrap-sass', 'assets/fonts/bootstrap'),
-    '/less/components/font-awesome/fonts'   => gem_asset_path('font-awesome-sass', 'assets/fonts/font-awesome'),
-    '/less/patternfly'                      => 'spec/html',
-    '/sass/dist/fonts'                      => 'assets/fonts',
-    '/sass/dist/fonts/bootstrap'            => gem_asset_path('bootstrap-sass', 'assets/fonts/bootstrap'),
-    '/sass/dist/img'                        => 'assets/images/patternfly',
-    '/sass/dist/images'                     => 'assets/images',
-    '/sass/dist/js'                         => 'assets/javascripts',
-    '/sass/dist/css'                        => 'tmp',
-    '/sass/components'                      => 'bower_components',
-    '/sass/components/bootstrap/dist/js'    => gem_asset_path('bootstrap-sass', 'assets/javascripts'),
-    '/sass/dist/fonts/font-awesome'         => gem_asset_path('font-awesome-sass', 'assets/fonts/font-awesome'),
-    '/sass/patternfly'                      => 'spec/html'
+    '/'                             => 'spec/main.html',
+    '/less/dist/css'                => 'spec/html/dist/css',
+    '/less/dist/fonts'              => 'assets/fonts/patternfly',
+    '/less/dist/img'                => 'assets/images/patternfly',
+    '/less/dist/js'                 => 'assets/javascripts',
+    '/less/pages/patternfly'        => 'spec/html',
+    '/sass/dist/fonts'              => 'assets/fonts',
+    '/sass/dist/fonts/bootstrap'    => gem_asset_path('bootstrap-sass', 'assets/fonts/bootstrap'),
+
+    '/sass/dist/img'                => 'assets/images/patternfly',
+    '/sass/dist/images'             => 'assets/images',
+    '/sass/dist/js'                 => 'assets/javascripts',
+    '/sass/dist/css'                => 'tmp',
+    '/sass/dist/fonts/font-awesome' => gem_asset_path('font-awesome-sass', 'assets/fonts/font-awesome'),
+    '/sass/pages/patternfly'        => 'spec/html',
   }.each { |http, local| server.mount http, WEBrick::HTTPServlet::FileHandler, local }
 
   trap('INT') { server.stop }

data/assets/stylesheets/_patternfly.scss

@@ -101,3 +101,4 @@
 @import "patternfly/toast";
 @import "patternfly/toolbar";
 @import "patternfly/vertical-nav";
+@import "patternfly/wizard";

data/assets/stylesheets/patternfly/_list-view.scss

@@ -111,6 +111,7 @@
   display: table-cell; //IE9 fallback
   -ms-flex: 1; // IE10 prefix
   flex:     1;
+  min-width: 0;
   vertical-align: top; //IE9 fallback
   width: 100%; // IE9 fallback, it extends the cell to size of the container
   @media (min-width: $screen-md-min) {
@@ -205,6 +206,7 @@
   display: flex;
   -ms-flex: 1; // IE10 prefix
   flex:     1;
+  min-width: 0;
   padding-bottom: ($grid-gutter-width/2);
   padding-top: ($grid-gutter-width/2);
   @media (min-width: $screen-md-min) {

data/assets/stylesheets/patternfly/_wizard.scss

@@ -0,0 +1,242 @@
+//
+// Wizard
+// --------------------------------------------------
+
+// Wizard header
+// Top section of the wizard w/ title and dismiss
+
+.wizard-pf-body {
+    padding: 0;
+}
+/* styles the sidebard containing the sub-steps */
+.wizard-pf-sidebar {
+  background: $color-pf-black-100;
+  border-right: 1px solid $color-pf-black-300;
+  bottom: 0;
+  display: table-cell;
+  left: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  position: relative;
+  top: 0;
+  vertical-align: top;
+
+  .list-group {
+    border-top: 0;
+    margin-bottom: 0;
+  }
+    .list-group-item {
+      background-color: transparent;
+      border-color: $color-pf-black-200;
+      padding: 0;
+      > a {
+        color: $color-pf-black;
+        cursor: pointer;
+        display: block;
+        font-size: 14px;
+        font-weight: 700;
+        height: 50px;
+        outline: 0;
+        padding-top: 11px;
+        padding-left: 20px;
+        position: relative;
+        white-space: nowrap;
+        width: 18em;
+        &:hover {
+          text-decoration: none;
+        }
+      }
+      &.active {
+        background-color: $color-pf-black-200;
+
+        //override default behavior
+        &:hover {
+          border-color: $color-pf-black-200;
+        }
+        > a {
+          color: $color-pf-blue-300;
+          cursor: default;
+        }
+        // line to left side showing active substep
+        > a:before {
+          background: $color-pf-blue-300;
+          content: " ";
+          height: 100%;
+          left: 0;
+          position: absolute;
+          top: 0;
+          width: 3px;
+        }
+        // caret to right showing active substep
+        > a:after {
+          color: $color-pf-blue-300;
+          content: "\f105"; // right caret
+          display: block;
+          font-family: FontAwesome;
+          font-size: 24px;
+          font-weight: 500;
+          line-height: 30px;
+          padding-top: 10px;
+          position: absolute;
+          right: 23px;
+          top: 0;
+        }
+      }
+    }
+}
+.wizard-pf-substep-number {
+  display:inline-block;
+  margin-right: 5px;
+  vertical-align: middle;
+  width: 25px;
+}
+.wizard-pf-substep-title {
+  display:inline-block;
+  margin-right: 5px;
+  text-align: left;
+  vertical-align: middle;
+}
+/* styles the steps indicator across the top of the wizard */
+.wizard-pf-steps {
+  border-bottom: solid 1px $color-pf-black-300;
+  text-align:center;
+}
+.wizard-pf-steps-indicator {
+  font-size: ceil(($font-size-base * 1.3333));
+  display:inline-block;
+  display: -ms-flexbox; /* for IE 10 */
+  display:flex;
+  height: 120px;
+  justify-content: space-around;
+  list-style: none;
+  padding: 38px 0 0 0;
+  li {
+    counter-increment: section;
+    float:left; /* float for IE9 since it doesn't support flex. If items wrap, they overlap */
+    -ms-flex: 1; /* for IE 10 */
+    flex-grow: 1;
+    flex-basis: 0;
+    line-height: 15px;
+    margin: 0;
+    padding: 0;
+    position: relative;
+    text-align: center;
+    /* draw the line between the circles */
+    &:before {
+      background-color: $color-pf-black-400;
+      content: '';
+      height: 2px;
+      left: 0;
+      position: absolute;
+      right: 0;
+      top: 40px; // needed for IE9/10 calculate 50% of just the li, others calc 50% of the entire thing including the a:before
+      //otherwise, use top: calc(50% - 1px);
+    }
+    /* don't draw the line between the circles on the ends */
+    &:first-child:before {
+      left: 50%;
+      right: 0;
+    }
+    &:last-child:before {
+      left: 0;
+      right: 50%;
+    }
+    &:only-of-type:before {
+      background-color: transparent;
+    }
+    a {
+      color: $color-pf-black;
+      font-size: 16px;
+      cursor: pointer;
+      margin-left:1em;
+      margin-right:1em;
+      text-decoration: none;
+      &:hover {
+        .wizard-pf-step-number {
+          background-color: $color-pf-black-400;
+          border-color: $color-pf-black-400;
+          color: $color-pf-white;
+        }
+      }
+
+    }
+  }
+  /* draw the step number in the circle */
+  .wizard-pf-step-number {
+    background-color: $color-pf-white;
+    border-radius: 50%;
+    border: solid 2px $color-pf-black-400;
+    color: $color-pf-black-400;
+    font-size: $font-size-base;
+    font-weight: 700;
+    height: 25px;
+    left: calc(50% - 13px);
+    line-height: 22px;
+    position: absolute;
+    top: 27px;
+    width: 25px;
+  }
+  .active .wizard-pf-step-number {
+    cursor: default;
+      background-color: $color-pf-blue-300;
+      border-color: $color-pf-blue-300;
+      color: $color-pf-white;
+  }
+
+  .viewed-pf .wizard-pf-step-number {
+      background-color: $color-pf-white;
+      border-color: $color-pf-blue-300;
+      color: $color-pf-black;
+  }
+}
+
+/* styles the main content portion of the wizard */
+.wizard-pf-main {
+  display: table-cell;
+  padding: 3em;
+  vertical-align: top;
+  width: 10000px;
+  .blank-slate-pf {
+    background-color: transparent;
+    border: none;
+    left: 0;
+    right: 0;
+  }
+}
+
+/* styles the content of a review page */
+.wizard-pf-review-page {
+  .treeview .list-group-item {
+    color: $color-pf-black;
+    cursor: pointer;
+    font-size: 16px;
+    margin-left: 20px;
+    padding: .5em .5em;
+    text-decoration: none;
+    a {
+      color: $color-pf-black;
+      text-decoration: none;
+    }
+  }
+  .treeview span.icon {
+    font-size: 24px;
+    font-weight: 500;
+  }
+}
+
+.wizard-pf-success-icon {
+  color: $color-pf-green-400;
+  font-size: ($font-size-base * 5.6);
+  line-height: ($font-size-base * 5.6);
+}
+
+/* styles the footer */
+.wizard-pf-footer {
+  border-top: 1px solid $color-pf-black-300;
+  margin-top: 0;
+  padding-bottom: 17px;
+
+  .btn-cancel {
+    margin-right:25px;
+  }
+}

data/bower.json

@@ -1,6 +1,6 @@
 {
   "name": "patternfly-sass",
-  "version": "3.6.0",
+  "version": "3.7.0",
   "license": "Apache-2.0",
   "homepage": "https://www.patternfly.org",
   "authors": [

data/lib/patternfly-sass/version.rb

@@ -1,4 +1,4 @@
 module Patternfly
-  VERSION = '3.6.0'
-  PATTERNFLY_SHA = 'b9e28afcc76eac2f7c07ff4948e21bcd53b6f0b4'
+  VERSION = '3.7.0'
+  PATTERNFLY_SHA = '1bcef08c25f021e58481847c805cba4886056b89'
 end

data/patternfly-sass.gemspec

@@ -20,6 +20,7 @@ Gem::Specification.new do |s|
   s.add_development_dependency 'term-ansicolor'
   s.add_development_dependency 'rugged', '~> 0.23.2'
   # Testing dependencies
+  s.add_development_dependency 'jekyll', '~> 3.1.6'
   s.add_development_dependency 'rspec', '~> 3.2'
   s.add_development_dependency 'nokogiri', '~> 1.6'
   s.add_development_dependency 'rmagick', '~> 2.15'

data/spec/compare_spec.rb

@@ -7,8 +7,9 @@ RSpec.describe "compare SASS with LESS screenshots" do
   RESOLUTIONS = [[320, 480], [768, 1024], [1280, 1024]]
   CONTEXTS = %w(less sass)
   TOLERANCE = ENV['TOLERANCE'].to_f || 0.00
+  BROWSER = (ENV['BROWSER'] || :chrome).to_sym
 
-  before(:all) { @browser = Selenium::WebDriver.for(:firefox) }
+  before(:all) { @browser = Selenium::WebDriver.for(BROWSER) }
 
   puts "Starting tests with TOLERANCE=#{TOLERANCE}"
   html = File.read('spec/html/index.html')
@@ -22,10 +23,10 @@ RSpec.describe "compare SASS with LESS screenshots" do
         it "#{w}x#{h}" do
           @browser.manage.window.resize_to(w, h)
           CONTEXTS.each do |ctx|
-            @browser.navigate.to("#{BASEURL}/#{ctx}/patternfly/#{file}")
+            @browser.navigate.to("#{BASEURL}/#{ctx}/pages/patternfly/#{file}")
             @browser.execute_script("
               var style = document.createElement('style');
-              style.innerHTML = '* { -moz-animation: none !important; -moz-transition: none !important;';
+              style.innerHTML = '* { -moz-animation: none !important; -moz-transition: none !important; -webkit-animation: none !important; -webkit-transition: none !important; }';
               document.body.appendChild(style);
             ")
             sleep(1)

data/spec/html/about-modal.html

@@ -8,27 +8,26 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=Edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="shortcut icon" href="../dist/img/favicon.ico">
+    <link rel="shortcut icon" href="../../dist/img/favicon.ico">
     <!-- iPad retina icon -->
-    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../dist/img/apple-touch-icon-precomposed-152.png">
+    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../../dist/img/apple-touch-icon-precomposed-152.png">
     <!-- iPad retina icon (iOS < 7) -->
-    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../dist/img/apple-touch-icon-precomposed-144.png">
+    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../dist/img/apple-touch-icon-precomposed-144.png">
     <!-- iPad non-retina icon -->
-    <link rel="apple-touch-icon-precomposed" sizes="76x76" href="../dist/img/apple-touch-icon-precomposed-76.png">
+    <link rel="apple-touch-icon-precomposed" sizes="76x76" href="../../dist/img/apple-touch-icon-precomposed-76.png">
     <!-- iPad non-retina icon (iOS < 7) -->
-    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../dist/img/apple-touch-icon-precomposed-72.png">
+    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/img/apple-touch-icon-precomposed-72.png">
     <!-- iPhone 6 Plus icon -->
-    <link rel="apple-touch-icon-precomposed" sizes="120x120" href="../dist/img/apple-touch-icon-precomposed-180.png">
+    <link rel="apple-touch-icon-precomposed" sizes="120x120" href="../../dist/img/apple-touch-icon-precomposed-180.png">
     <!-- iPhone retina icon (iOS < 7) -->
-    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../dist/img/apple-touch-icon-precomposed-114.png">
+    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/img/apple-touch-icon-precomposed-114.png">
     <!-- iPhone non-retina icon (iOS < 7) -->
-    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="../dist/img/apple-touch-icon-precomposed-57.png">
-    <link rel="stylesheet" href="../dist/css/patternfly.min.css" >
-    <link rel="stylesheet" href="../dist/css/patternfly-additions.min.css" >
-    <link href="tests.css" rel="stylesheet" media="screen, print">
+    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/img/apple-touch-icon-precomposed-57.png">
+    <link rel="stylesheet" href="../../dist/css/patternfly.min.css" >
+    <link rel="stylesheet" href="../../dist/css/patternfly-additions.min.css" >
     <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
-    <script src="../dist/js/patternfly.min.js"></script>
+    <script src="../../dist/js/patternfly.min.js"></script>
   </head>
 
   <body>
@@ -67,11 +66,12 @@
               </div>
             </div>
             <div class="modal-footer">
-              <img src="../dist/img/logo-alt.svg" alt="Patternfly Symbol">
+              <img src="../../dist/img/logo-alt.svg" alt="Patternfly Symbol">
             </div>
           </div>
         </div>
       </div>
+
     </div><!-- /container -->
   </body>
 </html>

data/spec/html/accordions.html

@@ -8,27 +8,26 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=Edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="shortcut icon" href="../dist/img/favicon.ico">
+    <link rel="shortcut icon" href="../../dist/img/favicon.ico">
     <!-- iPad retina icon -->
-    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../dist/img/apple-touch-icon-precomposed-152.png">
+    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../../dist/img/apple-touch-icon-precomposed-152.png">
     <!-- iPad retina icon (iOS < 7) -->
-    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../dist/img/apple-touch-icon-precomposed-144.png">
+    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../dist/img/apple-touch-icon-precomposed-144.png">
     <!-- iPad non-retina icon -->
-    <link rel="apple-touch-icon-precomposed" sizes="76x76" href="../dist/img/apple-touch-icon-precomposed-76.png">
+    <link rel="apple-touch-icon-precomposed" sizes="76x76" href="../../dist/img/apple-touch-icon-precomposed-76.png">
     <!-- iPad non-retina icon (iOS < 7) -->
-    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../dist/img/apple-touch-icon-precomposed-72.png">
+    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/img/apple-touch-icon-precomposed-72.png">
     <!-- iPhone 6 Plus icon -->
-    <link rel="apple-touch-icon-precomposed" sizes="120x120" href="../dist/img/apple-touch-icon-precomposed-180.png">
+    <link rel="apple-touch-icon-precomposed" sizes="120x120" href="../../dist/img/apple-touch-icon-precomposed-180.png">
     <!-- iPhone retina icon (iOS < 7) -->
-    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../dist/img/apple-touch-icon-precomposed-114.png">
+    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/img/apple-touch-icon-precomposed-114.png">
     <!-- iPhone non-retina icon (iOS < 7) -->
-    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="../dist/img/apple-touch-icon-precomposed-57.png">
-    <link rel="stylesheet" href="../dist/css/patternfly.min.css" >
-    <link rel="stylesheet" href="../dist/css/patternfly-additions.min.css" >
-    <link href="tests.css" rel="stylesheet" media="screen, print">
+    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/img/apple-touch-icon-precomposed-57.png">
+    <link rel="stylesheet" href="../../dist/css/patternfly.min.css" >
+    <link rel="stylesheet" href="../../dist/css/patternfly-additions.min.css" >
     <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
-    <script src="../dist/js/patternfly.min.js"></script>
+    <script src="../../dist/js/patternfly.min.js"></script>
   </head>
 
   <body>