patternfly-sass 2.2.0 → 2.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 0e4b72a00b7208e692a9e3953cc32fbbbde8a15b
-  data.tar.gz: 54834877b38b7d297c37fb47a0e4eb97b7096469
+  metadata.gz: 54163c28267d3ec34d9452553bbd6ec202478ce0
+  data.tar.gz: 3515f70b4407e627bccdeb5e22026b29b212b2f2
 SHA512:
-  metadata.gz: 7fdb717d9f373174c10a58bf139d5dcd5020fb1a9504263a75365d112f6f552bd56a01f49aeda4494c0429d7c759f74b84aa85684e64ebf2a9fd9b80c78c97fb
-  data.tar.gz: 24d6708a025dca82d5d110a507005f8d6a1b25b6763c14f2c9e4ab2b04341574902f117d6a1f1d0e7a4655607fdccd8eb4a643981c2264117bfd342e85f82bba
+  metadata.gz: c04bedbcdd8ebda1062aee69e9fdd83ca3e36c77446ab06cccdffef4f33275e772cc1da6cece13eb6fbe742719c736a26f5cc7d75395435e375a23a3d73008ce
+  data.tar.gz: e1ce210241067c5de9d8f71e8b91c1a9f9d228dd6c7286d7b2218709e0242008a40350cb07973bcdcb847cf9039acea0acf6ab688eb28f72b7f4922807ef85a3

data/README.md

@@ -19,7 +19,7 @@ Please see the appropriate guide for your environment of choice:
 In your Gemfile you need to add the `patternfly-sass` gem, and ensure that the `sass-rails` gem is present - it is added to new Rails applications by default.
 
 ```ruby
-gem 'patternfly-sass', '~> 2.2.0'
+gem 'patternfly-sass', '~> 2.3.0'
 gem 'sass-rails', '>= 3.2'
 ```
 

data/assets/stylesheets/_patternfly.scss

@@ -84,12 +84,18 @@
 @import "patternfly/ext-bootstrap-datepicker";
 // Bootstrap-Select
 @import "patternfly/ext-bootstrap-select";
+// Bootstrap Switch
+@import "patternfly/ext-bootstrap-switch";
+// Bootstrap Touchspin
+@import "patternfly/ext-bootstrap-touchspin";
 // C3 charts
 @import "patternfly/ext-c3";
 @import "patternfly/blank-slate";
 @import "patternfly/bootstrap-combobox";
 @import "patternfly/bootstrap-datepicker";
 @import "patternfly/bootstrap-select";
+@import "patternfly/bootstrap-switch";
+@import "patternfly/bootstrap-touchspin";
 @import "patternfly/bootstrap-treeview";
 @import "patternfly/cards";
 @import "patternfly/charts";

data/assets/stylesheets/patternfly/_alerts.scss

@@ -12,6 +12,9 @@
       color: $link-hover-color;
     }
   }
+  > .btn.pull-right {
+    margin-top: -3px;
+  }
   > .pficon {
     font-size: 20px;
     position: absolute;
@@ -26,4 +29,4 @@
 .alert-dismissable .close {
   right: -16px;
   top: 1px;
-}
+}

data/assets/stylesheets/patternfly/_bootstrap-switch.scss

@@ -0,0 +1,21 @@
+//
+// Bootstrap Switch
+// --------------------------------------------------
+
+$bootstrap-switch-base: bootstrap-switch;
+
+.#{$bootstrap-switch-base} {
+  .#{$bootstrap-switch-base}-handle-off,
+  .#{$bootstrap-switch-base}-handle-on {
+    &.#{$bootstrap-switch-base}-default {
+      background: $bootstrap-switch-handle-default-bg-color;
+    }
+  }
+  .#{$bootstrap-switch-base}-label {
+    background: $bootstrap-switch-bg-color;
+    box-shadow: 0 0 2px rgba(0,0,0,.4);
+    @include gradient-vertical($bootstrap-switch-bg-color-start, $bootstrap-switch-bg-color-stop);
+    position: relative;
+    z-index: 9;
+  }
+}

data/assets/stylesheets/patternfly/_bootstrap-touchspin.scss

@@ -0,0 +1,31 @@
+//
+// Bootstrap Touchspin
+// --------------------------------------------------
+
+.bootstrap-touchspin .input-group-btn-vertical {
+  > .btn {
+    padding-bottom: 6px;
+    padding-top: 6px;
+  }
+  .bootstrap-touchspin-down {
+    border-bottom-right-radius: $border-radius-base;
+  }
+  .bootstrap-touchspin-up {
+    border-top-right-radius: $border-radius-base;
+  }
+  i {
+    font-size: ($font-size-base - 4);
+    left: 6px;
+    top: 2px;
+    &.fa-angle-down,
+    &.fa-angle-up {
+      font-size: $font-size-base;
+      line-height: $font-size-base;
+      top: 0;
+    }
+    &.fa-angle-down,
+    &.fa-angle-up {
+      left: 7px;
+    }
+  }
+}

data/assets/stylesheets/patternfly/_dropdowns.scss

@@ -88,7 +88,7 @@
 }
 
 // Position Menu closer to button
-.btn-group, .input-group-btn {
+.btn-group, .dropdown, .input-group-btn {
   > .dropdown-menu {
     margin-top: -1px;
   }

data/assets/stylesheets/patternfly/_ext-bootstrap-switch.scss

@@ -0,0 +1,193 @@
+$bootstrap-switch-base: bootstrap-switch;
+
+.#{$bootstrap-switch-base} {
+  display: inline-block;
+  direction: ltr;
+  cursor: pointer;
+  border-radius: $border-radius-base;
+  border: 1px solid;
+  border-color: $btn-default-border;
+  position: relative;
+  text-align: left;
+  overflow: hidden;
+  line-height: 8px;
+  z-index: 0;
+  @include user-select(none);
+  vertical-align: middle;
+  @include transition(border-color ease-in-out .15s, box-shadow ease-in-out .15s);
+
+  .#{$bootstrap-switch-base}-container {
+    display: inline-block;
+    top: 0;
+    border-radius: $border-radius-base;
+    @include translate3d(0, 0, 0);
+  }
+
+  .#{$bootstrap-switch-base}-handle-on,
+  .#{$bootstrap-switch-base}-handle-off,
+  .#{$bootstrap-switch-base}-label {
+    @include box-sizing(border-box);
+    cursor: pointer;
+    display: inline-block !important;
+    height: 100%;
+    padding: $padding-base-vertical $padding-base-horizontal;
+    font-size: $font-size-base;
+    line-height: $line-height-computed;
+  }
+
+  .#{$bootstrap-switch-base}-handle-on,
+  .#{$bootstrap-switch-base}-handle-off {
+    text-align: center;
+    z-index: 1;
+
+    &.#{$bootstrap-switch-base}-primary {
+      color: #fff;
+      background: $btn-primary-bg;
+    }
+
+    &.#{$bootstrap-switch-base}-info {
+      color: #fff;
+      background: $btn-info-bg;
+    }
+
+    &.#{$bootstrap-switch-base}-success {
+      color: #fff;
+      background: $btn-success-bg;
+    }
+
+    &.#{$bootstrap-switch-base}-warning {
+      background: $btn-warning-bg;
+      color: #fff;
+    }
+
+    &.#{$bootstrap-switch-base}-danger {
+      color: #fff;
+      background: $btn-danger-bg;
+    }
+
+    &.#{$bootstrap-switch-base}-default {
+      color: #000;
+      background: $gray-lighter;
+    }
+  }
+
+  .#{$bootstrap-switch-base}-label {
+    text-align: center;
+    margin-top: -1px;
+    margin-bottom: -1px;
+    z-index: 100;
+    color: $btn-default-color;
+    background: $btn-default-bg;
+  }
+
+  .#{$bootstrap-switch-base}-handle-on {
+    @include border-left-radius($border-radius-base - 1);
+  }
+
+  .#{$bootstrap-switch-base}-handle-off {
+    @include border-right-radius($border-radius-base - 1);
+  }
+
+  input[type='radio'],
+  input[type='checkbox'] {
+    position: absolute !important;
+    top: 0;
+    left: 0;
+    @include opacity(0);
+    z-index: -1;
+
+    &.form-control {
+      height: auto;
+    }
+  }
+
+  &.#{$bootstrap-switch-base}-mini {
+
+    .#{$bootstrap-switch-base}-handle-on,
+    .#{$bootstrap-switch-base}-handle-off,
+    .#{$bootstrap-switch-base}-label {
+      padding: $padding-xs-vertical $padding-xs-horizontal;
+      font-size: $font-size-small;
+      line-height: $line-height-small;
+    }
+  }
+
+  &.#{$bootstrap-switch-base}-small {
+
+    .#{$bootstrap-switch-base}-handle-on,
+    .#{$bootstrap-switch-base}-handle-off,
+    .#{$bootstrap-switch-base}-label {
+      padding: $padding-small-vertical $padding-small-horizontal;
+      font-size: $font-size-small;
+      line-height: $line-height-small;
+    }
+  }
+
+  &.#{$bootstrap-switch-base}-large {
+
+    .#{$bootstrap-switch-base}-handle-on,
+    .#{$bootstrap-switch-base}-handle-off,
+    .#{$bootstrap-switch-base}-label {
+      padding: $padding-base-vertical $padding-large-horizontal;
+      font-size: $font-size-large;
+      line-height: $line-height-large;
+    }
+  }
+
+  &.#{$bootstrap-switch-base}-disabled,
+  &.#{$bootstrap-switch-base}-readonly,
+  &.#{$bootstrap-switch-base}-indeterminate {
+    cursor: default !important;
+
+    .#{$bootstrap-switch-base}-handle-on,
+    .#{$bootstrap-switch-base}-handle-off,
+    .#{$bootstrap-switch-base}-label {
+      @include opacity(.5);
+      cursor: default !important;
+    }
+  }
+
+  &.#{$bootstrap-switch-base}-animate {
+
+    .#{$bootstrap-switch-base}-container {
+      @include transition(margin-left .5s);
+    }
+  }
+
+  &.#{$bootstrap-switch-base}-inverse {
+
+    .#{$bootstrap-switch-base}-handle-on {
+      @include border-left-radius(0);
+      @include border-right-radius($border-radius-base - 1);
+    }
+
+    .#{$bootstrap-switch-base}-handle-off {
+      @include border-right-radius(0);
+      @include border-left-radius($border-radius-base - 1);
+    }
+  }
+
+  &.#{$bootstrap-switch-base}-focused {
+    $color-rgba: rgba(red($input-border-focus), green($input-border-focus), blue($input-border-focus), .6);
+    border-color: $input-border-focus;
+    outline: 0;
+    @include box-shadow(#{inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px #{$color-rgba}});
+  }
+
+  &.#{$bootstrap-switch-base}-on,
+  &.#{$bootstrap-switch-base}-inverse.#{$bootstrap-switch-base}-off {
+
+    .#{$bootstrap-switch-base}-label {
+      @include border-right-radius($border-radius-base - 1);
+    }
+  }
+
+  &.#{$bootstrap-switch-base}-off,
+  &.#{$bootstrap-switch-base}-inverse.#{$bootstrap-switch-base}-on {
+
+
+    .#{$bootstrap-switch-base}-label {
+      @include border-left-radius($border-radius-base - 1);
+    }
+  }
+}

data/assets/stylesheets/patternfly/_ext-bootstrap-touchspin.scss

@@ -0,0 +1,45 @@
+/*
+ *  Bootstrap TouchSpin - v3.0.1
+ *  A mobile and touch friendly input spinner component for Bootstrap 3.
+ *  http://www.virtuosoft.eu/code/bootstrap-touchspin/
+ *
+ *  Made by István Ujj-Mészáros
+ *  Under Apache License v2.0 License
+ */
+
+.bootstrap-touchspin .input-group-btn-vertical {
+  position: relative;
+  white-space: nowrap;
+  width: 1%;
+  vertical-align: middle;
+  display: table-cell;
+}
+
+.bootstrap-touchspin .input-group-btn-vertical > .btn {
+  display: block;
+  float: none;
+  width: 100%;
+  max-width: 100%;
+  padding: 8px 10px;
+  margin-left: -1px;
+  position: relative;
+}
+
+.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up {
+  border-radius: 0;
+  border-top-right-radius: 4px;
+}
+
+.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down {
+  margin-top: -2px;
+  border-radius: 0;
+  border-bottom-right-radius: 4px;
+}
+
+.bootstrap-touchspin .input-group-btn-vertical i {
+  position: absolute;
+  top: 3px;
+  left: 5px;
+  font-size: 9px;
+  font-weight: normal;
+}

data/assets/stylesheets/patternfly/_toolbar.scss

@@ -6,22 +6,82 @@
   background: #fff;
   border-bottom: 1px solid $sidebar-pf-border-color;
   box-shadow: 0 1px 0px rgba(0,0,0,0.045);
-  padding-top: $grid-gutter-width/4;
+  padding-top: ($grid-gutter-width/4);
   .form-group {
-    margin-bottom: 0;
-    width: 200px;
-    @media (min-width: $screen-sm-min){
-      width: 300px;
+    margin-bottom: ($grid-gutter-width/4);
+    @media (min-width: $grid-float-breakpoint){
+      border-right: 1px solid $sidebar-pf-border-color;
+      display: table-cell;
+      float: left;
+      margin-bottom: 0;
+      padding-left: ($grid-gutter-width/2);
+      padding-right: ($grid-gutter-width/2);
+    }
+    &:last-child {
+      margin-bottom: 0;
+    }
+    .btn,
+    .btn-group {
+      + .btn,
+      + .btn-group {
+        margin-left: 5px;
+      }
+      + .btn-link,
+      + .dropdown {
+        margin-left: 10px;
+      }
+    }
+    .btn-link {
+      color: $gray-darker;
+      font-size: ($font-size-base + 4);
+      line-height: 1;
+      padding: 4px 0;
+      &:active,
+      &:focus,
+      &:hover {
+        color: $link-color;
+      }
+    }
+  }
+}
+.toolbar-pf-actions {
+  display: table;
+  width: 100%;
+  @media (min-width: $grid-float-breakpoint) {
+    .toolbar-pf-filter {
+      padding-left: 0;
+      width: 25%;
+    }
+  }
+  .toolbar-pf-view-selector {
+    font-size: ($font-size-base + 4);
+    @media (min-width: $grid-float-breakpoint) {
+      border-right: 0;
+      float: right;
+      padding-right: 0;
+    }
+    .active a {
+      color: $link-color;
+      cursor: default;
+    }
+    a {
+      color: $gray-darker;
+      &:hover{
+        color: $link-color;
+      }
+    }
+    .list-inline {
+      margin-bottom: 0;
     }
   }
 }
 .toolbar-pf-results {
   border-top: 1px solid $sidebar-pf-border-color;
-  margin-top: $grid-gutter-width/4;
+  margin-top: ($grid-gutter-width/4);
   h5, p, ul {
     display: inline-block;
-    line-height: $grid-gutter-width/1.5;
-    margin-bottom: 0; 
+    line-height: ($grid-gutter-width/1.5);
+    margin-bottom: 0;
     margin-top: 0;
     @media (min-width: $screen-sm-min){
       line-height: $grid-gutter-width;
@@ -32,7 +92,7 @@
     margin-right: 20px;
   }
   .label {
-    font-size: $font-size-base - 1;
+    font-size: ($font-size-base - 1);
     a {
       color: #fff;
       display: inline-block;
@@ -43,20 +103,7 @@
     margin: 0 10px 0 5px;
     li {
       padding-left: 0;
-      padding-right: 0;  
+      padding-right: 0;
     }
   }
 }
-.toolbar-pf-view-selector {
-  font-size: $font-size-base + 4;
-  .active a {
-    color: $link-color;
-    cursor: default;
-  }
-  a {
-    color: $gray-darker;
-    &:hover{
-      color: $link-color;
-    }
-  }
-}