patternfly-sass 0.0.0.pre.semantically.pre.released → 1.2.0

data/{dist/sass → assets/stylesheets}/patternfly/_bootstrap-select.scss

@@ -7,51 +7,42 @@
     margin-bottom: 0;
   }
   .btn {
-    // TODO Create global variable for validation state box shadows?
-    $input-validation-focus-box-shadow: rgba($color-pf-black, (7.5/100));
     &:hover {
       border-color: $input-border-hover;
     }
     .caret {
       margin-top: -4px;
     }
-    @include form-control-outline();
+    @include form-control-outline;
     .has-error & {
       border-color: $state-danger-text;
       &:focus {
-        // TODO Create global variable for validation state box shadows?
-        $state-danger-input-focus: lighten($state-danger-text, 20%);
-        $shadow: unquote("inset 0 1px 1px #{$input-validation-focus-box-shadow}, 0 0 6px #{$state-danger-input-focus}");
         border-color: darken($state-danger-text, 10%);
+        $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($state-danger-text, 20%);
         @include box-shadow($shadow);
       }
     }
     .has-success & {
       border-color: $state-success-text;
       &:focus {
-        // TODO Create global variable for validation state box shadows?
-        $state-success-input-focus: lighten($state-success-text, 20%);
-        $shadow: unquote("inset 0 1px 1px #{$input-validation-focus-box-shadow}, 0 0 6px #{$state-success-input-focus}");
         border-color: darken($state-success-text, 10%);
+        $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($state-success-text, 20%);
         @include box-shadow($shadow);
       }
     }
     .has-warning & {
       border-color: $state-warning-text;
       &:focus {
-        // TODO Create global variable for validation state box shadows?
-        $state-warning-input-focus: lighten($state-warning-text, 20%);
-        $shadow: unquote("inset 0 1px 1px #{$input-validation-focus-box-shadow}, 0 0 6px #{$state-warning-input-focus}");
         border-color: darken($state-warning-text, 10%);
+        $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($state-warning-text, 20%);
         @include box-shadow($shadow);
       }
     }
-    @include transition(unquote("border-color ease-in-out .15s, box-shadow ease-in-out .15s"));
+    @include transition(border-color ease-in-out .15s, box-shadow ease-in-out .15s);
   }
   .dropdown-menu { // Also see navbar.less
     > .active > a {
-      &,
-      &:active {
+      &, &:active {
         background-color: $dropdown-link-hover-bg !important;
         border-color: $dropdown-link-hover-border-color !important;
         color: $gray-dark !important;
@@ -66,9 +57,10 @@
     > .selected > a {
       background-color: $dropdown-link-active-bg !important;
       border-color: $dropdown-link-active-border-color !important;
-      color: $color-pf-white !important;
+      color: #fff !important;
       small {
-        color: rgba($color-pf-white, (50/100)) !important;
+        color: #70c8e7 !important;
+        color:rgba(225, 255, 255, 0.5) !important;
       }
     }
     .divider {
@@ -76,7 +68,7 @@
       margin: $dropdown-divider-margin !important;
     }
     dt {
-      color: $color-pf-black-500;
+      color: #969696;
       font-weight:normal;
       padding: 1px 10px;
     }
@@ -86,18 +78,17 @@
       }
       & a {
         &:active small {
-          color: rgba($color-pf-white, (50/100)) !important;
+          color: #70c8e7 !important;
+          color:rgba(225, 255, 255, 0.5) !important;
         }
-        &:hover,
-        &:focus {
+        &:hover, &:focus {
           small {
             color: $gray-light;
           }
         }
       }
       &:not(.disabled) {
-        a:hover,
-        a:focus {
+        a:hover, a:focus {
           small {
             color: $gray-light;
           }
@@ -105,4 +96,4 @@
       }
     }
   }
-}
+}

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

@@ -0,0 +1,37 @@
+//
+// Bootstrap Tree View
+// --------------------------------------------------
+
+.treeview {
+  .list-group {
+    border-top: 0;
+  }
+  .list-group-item {
+    background: transparent;
+    border-bottom: 1px solid transparent !important;
+    border-top: 1px solid transparent !important;
+    margin-bottom: 0;
+    padding: 0 10px;
+    &:hover {
+      background: $dropdown-link-hover-bg !important;
+      border-color: $dropdown-link-hover-border-color !important;
+    }
+    &.node-selected {
+      background: $dropdown-link-active-bg !important;
+      border-color: $dropdown-link-active-border-color !important;
+      color: $dropdown-link-active-color !important;
+    }
+  }
+  span.icon {
+    display: inline-block;
+    font-size: $font-size-base + 1;
+    min-width: 10px;
+    text-align: center;
+    > [class*="fa-angle"] {
+      font-size: $font-size-base + 3;
+    }
+  }
+  span.indent {
+    margin-right: 5px;
+  }
+}

data/{dist/sass/rcue → assets/stylesheets/patternfly}/_breadcrumbs.scss

@@ -11,9 +11,9 @@
       display: inline; /* IE8 */
       + li:before {
       color: $gray-light;
-      content: $fa-var-angle-right;
+      content: $fa-var-angle-double-right;
       font-family: $icon-font-name-fa;
-      font-size: ($font-size-base - 1);
+      font-size: $font-size-base - 1;
       padding: 0 9px 0 7px;
     }
   }

data/{dist/sass/rcue → assets/stylesheets/patternfly}/_buttons.scss

@@ -3,17 +3,17 @@
 // --------------------------------------------------
 
 .btn {
-  @include box-shadow(0 2px 3px rgba($color-pf-black, (10/100)));
+  @include box-shadow(0 2px 3px rgba(0,0,0,.1));
   &:active {
-    @include box-shadow(inset 0 2px 8px rgba($color-pf-black, (20/100)));
+    @include box-shadow(inset 0 2px 8px rgba(0,0,0,.2));
   }
   &.disabled,
   &[disabled],
   fieldset[disabled] & {
-    background-color: $color-pf-black-100 !important;
+    background-color: #f8f8f8 !important;
     background-image: none !important;
-    border-color: $color-pf-black-300 !important;
-    color: $color-pf-black-500 !important;
+    border-color: #d1d1d1 !important;
+    color: #969696 !important;
     opacity: 1;
     &:active {
       @include box-shadow(none);
@@ -34,8 +34,7 @@
 }
 
 .btn-link {
-  &,
-  &:active {
+  &, &:active {
     @include box-shadow(none);
   }
 }
@@ -44,7 +43,6 @@
   @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-bg-img-start, $btn-primary-bg-img-stop, $btn-primary-border);
 }
 
-.btn-xs,
-.btn-group-xs .btn {
+.btn-xs, .btn-group-xs .btn {
   font-weight: $btn-xs-font-weight;
-}
+}

data/assets/stylesheets/patternfly/_close.scss

@@ -0,0 +1,13 @@
+//
+// Close icons
+// --------------------------------------------------
+
+
+.close {
+  text-shadow: none;
+  @include opacity(.6);
+  &:hover,
+  &:focus {
+    @include opacity(.9);
+  }
+}

data/{dist/sass/rcue → assets/stylesheets/patternfly}/_datatables.scss

@@ -1,8 +1,7 @@
 //
-// DataTables
+// Datatables
 // --------------------------------------------------
 
-// Deprecated
 .ColVis_Button {
   &:active {
     &:focus {
@@ -11,18 +10,17 @@
   }
 }
 
-// Deprecated
 .ColVis_catcher {
   position: absolute;
   z-index: 999;
 }
 
-// Deprecated
 .ColVis_collection {
   background-color: $dropdown-bg;
+  border: 1px solid $dropdown-fallback-border; // IE8 fallback
   border: 1px solid $dropdown-border;
   border-radius: $border-radius-base;
-  @include box-shadow(0 6px 12px rgba($color-pf-black, (17.5/100)));
+  @include box-shadow(0 6px 12px rgba(0,0,0,.175));
   background-clip: padding-box;
   list-style: none;
   margin: -1px 0 0 0;
@@ -37,9 +35,8 @@
   }
 }
 
-// Deprecated
 .ColVis_collectionBackground {
-  background-color: $color-pf-white;
+  background-color: #fff;
   height: 100%;
   left: 0;
   position: fixed;
@@ -48,9 +45,8 @@
   z-index: 998;
 }
 
-// Note: We won't be using this class with the Patternfly toolbar
 .dataTables_header {
-  background-color: $color-pf-black-150;
+  background-color: #f6f6f6;
   border: 1px solid $table-border-color;
   border-bottom: none;
   padding: 5px;
@@ -59,7 +55,6 @@
   .btn {
     @include box-shadow(none);
   }
-  // Deprecated
   .ColVis {
     position: absolute;
     right: 5px;
@@ -72,7 +67,7 @@
   .dataTables_filter {
     position: absolute;
     input {
-      border: 1px solid $color-pf-black-400;
+      border: 1px solid #bbb;
       height: 24px;
       @media (max-width: $screen-xs-max) {
         width: 100px;
@@ -90,17 +85,15 @@
   }
 }
 
-// Note: We won't be using this class with the table view
 .dataTables_footer {
-  background-color: $color-pf-white;
+  background-color: #fff;
   border: 1px solid $table-border-color;
   border-top: none;
   overflow: hidden;
 }
 
-// Not in use with latest example: May be used with pagination?
 .dataTables_paginate {
-  background: $color-pf-black-100;
+  background: #fafafa;
   float: right;
   margin: 0;
   .pagination {
@@ -108,26 +101,26 @@
     margin: 0;
     > li {
       > span {
-        border-color: $color-pf-white $color-pf-black-300 $color-pf-black-150;
+        border-color: #ffffff #e1e1e1 #f4f4f4;
         border-width: 0 1px;
-        font-size: ($font-size-base + 4);
+        font-size: $font-size-base + 4;
         font-weight: normal;
         padding: 0;
         text-align: center;
         width: 31px;
         &:hover,
         &:focus {
-          @include reset-filter();
+          @include reset-filter;
         }
       }
       &.last > span {
         border-right: none;
       }
       &.disabled > span {
-        background: $color-pf-black-150;
-        border-left-color: $color-pf-black-200;
-        border-right-color: $color-pf-black-200;
-        @include reset-filter();
+        background: #f5f5f5;
+        border-left-color: #ececec;
+        border-right-color: #ececec;
+        @include reset-filter;
       }
     }
   }
@@ -138,8 +131,8 @@
     padding: 4px 15px 0;
     text-align: right;
     .paginate_input {
-      border: 1px solid $color-pf-black-300;
-      @include box-shadow(inset 0 1px 1px rgba($color-pf-black, (7.5/100)));
+      border: 1px solid #d3d3d3;
+      @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
       font-size: $font-size-base;
       font-weight: 600;
       height: 19px;
@@ -157,11 +150,6 @@
   }
 }
 
-.dataTables_empty {
-  background: $table-bg-accent;
-}
-
-/* Might need this for pagination?
 .dataTables_wrapper {
   margin: $line-height-computed 0;
   @media (max-width: $screen-xs-max) {
@@ -170,17 +158,65 @@
     }
   }
 }
-*/
 
-// Not in use with latest example: May be used with column reordering?
 .DTCR_clonedTable {
-  background-color: rgba($color-pf-white, (70/100));
+  background-color: rgba(255, 255, 255, 0.7);
   z-index: 202;
 }
 
-// Not in use with latest example: May be used with column reordering?
 .DTCR_pointer {
   background-color: $link-color;
   width: 1px;
   z-index: 201;
 }
+
+table.datatable {
+  margin-bottom: 0;
+  max-width: none !important;
+  thead {
+    .sorting,
+    .sorting_asc,
+    .sorting_desc,
+    .sorting_asc_disabled,
+    .sorting_desc_disabled {
+      cursor: pointer;
+      *cursor: hand;
+    }
+    .sorting_asc,
+    .sorting_desc {
+      border: 0;
+      color: $link-color !important;
+      display: block;
+      position: relative;
+      &:after {
+        content: $fa-var-angle-down;
+        font-family: $icon-font-name-fa;
+        font-size: $font-size-base - 2;
+        font-weight: normal;
+        height: $font-size-base - 3;
+        left: 7px;
+        line-height: $font-size-base;
+        position: relative;
+        top: 2px;
+        vertical-align: baseline;
+        width: $font-size-base;
+      }
+      &:before {
+        background: $link-color;
+        content: '';
+        height: 2px;
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+      }
+    }
+    .sorting_asc:after {
+      content: $fa-var-angle-up;
+      top: -3px;
+    }
+  }
+  th:active {
+    outline: none;
+  }
+}

data/{dist/sass/rcue → assets/stylesheets/patternfly}/_dropdowns.scss

@@ -8,7 +8,7 @@
 .caret {
   font-family: $icon-font-name-fa;
   font-weight: normal;
-  height: ($font-size-base - 3);
+  height: $font-size-base - 3;
   position: relative;
   vertical-align: baseline;
   width: $font-size-base;
@@ -22,16 +22,6 @@
     top: -1px;
     right: 0;
   }
-  .dropup & {
-    &:before {
-      content: $fa-var-angle-up;
-    }
-  }
-}
-
-// Bootstrap removes the focus ring on dropdowns; this replaces it for better accessibility
-.dropdown-toggle:focus {
-  @include tab-focus();
 }
 
 // The dropdown menu (ul)
@@ -51,16 +41,15 @@
 
 // Hover/Focus state
 .dropdown-menu > li > a {
-  &:hover,
-  &:focus {
+  &:hover, &:focus {
     border-color: $dropdown-link-hover-border-color;
-    @include reset-filter();
+    @include reset-filter;
   }
   &:active {
     background-color: $dropdown-link-focus-bg;
     border-color: $dropdown-link-active-border-color;
     color: $dropdown-link-focus-color !important;
-    @include reset-filter();
+    @include reset-filter;
   }
 }
 
@@ -71,7 +60,7 @@
   &:focus {
     background-color: $dropdown-link-active-bg !important;
     border-color: $dropdown-link-active-border-color !important;
-    @include reset-filter();
+    @include reset-filter;
   }
 }
 
@@ -83,17 +72,6 @@
     border-color: transparent;
   }
 }
-
-// Selected state
-.dropdown-menu > .selected > a {
-  background-color: $dropdown-link-active-bg;
-  border-color: $dropdown-link-active-border-color;
-  color: $color-pf-white;
-  small {
-    color: rgba($color-pf-white, (50/100));
-  }
-}
-
 // Nuke hover/focus effects
 .dropdown-menu > .disabled > a {
   &:hover,
@@ -110,9 +88,7 @@
 }
 
 // Position Menu closer to button
-.btn-group,
-.dropdown,
-.input-group-btn {
+.btn-group, .input-group-btn {
   > .dropdown-menu {
     margin-top: -1px;
   }
@@ -167,69 +143,3 @@
     display: block;
   }
 }
-
-// Kebab dropmenu
-.dropdown-kebab-pf {
-  &.btn-group > .btn:first-child,
-  .btn-link {
-    color: $gray-darker;
-    font-size: ($font-size-base + 4);
-    line-height: 1;
-    padding: 4px ($grid-gutter-width/4);
-    margin-left: ($grid-gutter-width/(-4));
-    margin-right: ($grid-gutter-width/(-4));
-    &:active,
-    &:focus,
-    &:hover {
-      color: $link-color;
-    }
-  }
-  &.btn-group { margin-left: ($grid-gutter-width/4); }
-  .dropdown-menu {
-    left: -15px;
-    margin-top: 11px;
-    &.dropdown-menu-right {
-      left: auto;
-      right: -15px;
-      &:after,
-      &:before {
-        left: auto;
-        right: 6px;
-      }
-    }
-    &:after,
-    &:before {
-      border-bottom-color: $dropdown-border;
-      border-bottom-style: solid;
-      border-bottom-width: 10px;
-      border-left: 10px solid transparent;
-      border-right: 10px solid transparent;
-      content: "";
-      display: inline-block;
-      left: 6px;
-      position: absolute;
-      top: -11px;
-    }
-    &:after {
-      border-bottom-color: $dropdown-bg;
-      top: -10px;
-    }
-  }
-  &.dropup .dropdown-menu {
-    margin-bottom: 11px;
-    margin-top: 0;
-    &:after,
-    &:before {
-      border-bottom: none;
-      border-top-color: $dropdown-border;
-      border-top-style: solid;
-      border-top-width: 10px;
-      bottom: -11px;
-      top: auto;
-    }
-    &:after {
-      border-top-color: $dropdown-bg;
-      bottom: -10px;
-    }
-  }
-}