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

data/assets/stylesheets/patternfly/_mixin_overrides.scss

@@ -0,0 +1,55 @@
+//
+// Mixins
+// --------------------------------------------------
+// Bootstrap overrides and PatternFly-specific mixins
+
+/* Bootstrap overrides */
+
+
+
+// Form control outline
+@mixin form-control-outline($color: $input-border-focus) {
+  $color-rgba: rgba(red($color), green($color), blue($color), .6);
+  &:focus {
+    border-color: $color;
+    outline: 0 !important;
+    @include box-shadow(#{inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px #{$color-rgba}});
+  }
+}
+
+
+@mixin gradient-striped($color: rgba(0,0,0,.15), $angle: -45deg) {
+  background-image: -webkit-linear-gradient($angle, $color 25%, $color 26%, transparent 27%, transparent 49%, $color 50%, $color 51%, transparent 52%, transparent 74%, $color 75%, $color 76%, transparent 77%);
+  background-image: linear-gradient($angle, $color 25%, $color 26%, transparent 27%, transparent 49%, $color 50%, $color 51%, transparent 52%, transparent 74%, $color 75%, $color 76%, transparent 77%);
+}
+
+// Horizontal dividers
+@mixin nav-divider($color: #e5e5e5, $margin: 4px 1px) {
+  background-color: $color;
+  height: 1px;
+  margin: $margin;
+  overflow: hidden;
+}
+
+// Placeholder text
+@mixin placeholder($color: $input-color-placeholder) {
+  &:-moz-placeholder            { color: $color; font-style: italic; } // Firefox 4-18
+  &::-moz-placeholder           { color: $color; font-style: italic;} // Firefox 19+
+  &:-ms-input-placeholder       { color: $color; font-style: italic; } // Internet Explorer 10+
+  &::-webkit-input-placeholder  { color: $color; font-style: italic; } // Safari and Chrome
+}
+
+/* PatternFly-specific */
+
+@mixin tab-indicator($background: $gray-light-pf, $left: 15px, $right: 15px) {
+  &:before {
+    background: $background;
+    bottom: -1px;
+    content: '';
+    display: block;
+    height: 2px;
+    left: $left;
+    position: absolute;
+    right: $right;
+  }
+}

data/assets/stylesheets/patternfly/_mixins.scss

@@ -0,0 +1,96 @@
+//
+// Mixins
+// --------------------------------------------------
+// Bootstrap overrides and PatternFly-specific mixins
+
+/* Bootstrap overrides */
+
+// Button variants
+@mixin button-variant($color, $background, $background-image-start, $background-image-stop, $border) {
+  background-color: $background;
+  @include gradient-vertical($background-image-start, $background-image-stop);
+  border-color: $border;
+  color: $color;
+
+  &:hover,
+  &:focus,
+  &:active,
+  &.active {
+    background-color: $background;
+    background-image: none;
+    border-color: $border;
+    color: $color;
+  }
+  .open & { &.dropdown-toggle {
+    background-color: $background;
+    background-image: none;
+    border-color: $border;
+    color: $color;
+  } }
+  &:active,
+  &.active {
+    background-image: none;
+  }
+  .open & { &.dropdown-toggle {
+    background-image: none;
+  } }
+  &.disabled,
+  &[disabled],
+  fieldset[disabled] & {
+    &,
+    &:hover,
+    &:focus,
+    &:active,
+    &.active {
+      background-color: $background;
+      border-color: $border
+    }
+  }
+}
+
+// Form control outline
+@mixin form-control-outline($color: $input-border-focus) {
+  $color-rgba: rgba(red($color), green($color), blue($color), .6);
+  &:focus {
+    border-color: $color;
+    outline: 0 !important;
+    @include box-shadow(#{inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px #{$color-rgba}});
+  }
+}
+
+
+@mixin gradient-striped($color: rgba(0,0,0,.15), $angle: -45deg) {
+  background-image: -webkit-linear-gradient($angle, $color 25%, $color 26%, transparent 27%, transparent 49%, $color 50%, $color 51%, transparent 52%, transparent 74%, $color 75%, $color 76%, transparent 77%);
+  background-image: linear-gradient($angle, $color 25%, $color 26%, transparent 27%, transparent 49%, $color 50%, $color 51%, transparent 52%, transparent 74%, $color 75%, $color 76%, transparent 77%);
+}
+
+// Horizontal dividers
+@mixin nav-divider($color: #e5e5e5, $margin: 4px 1px) {
+  background-color: $color;
+  height: 1px;
+  margin: $margin;
+  overflow: hidden;
+}
+
+// Placeholder text
+@mixin placeholder($color: $input-color-placeholder) {
+  &:-moz-placeholder            { color: $color; font-style: italic; } // Firefox 4-18
+  &::-moz-placeholder           { color: $color; font-style: italic;} // Firefox 19+
+  &:-ms-input-placeholder       { color: $color; font-style: italic; } // Internet Explorer 10+
+  &::-webkit-input-placeholder  { color: $color; font-style: italic; } // Safari and Chrome
+}
+
+/* PatternFly-specific */
+
+@mixin tab-indicator($background: $gray-light-pf, $left: 15px, $right: 15px) {
+  &:before {
+    background: $background;
+    bottom: -1px;
+    content: '';
+    display: block;
+    height: 2px;
+    left: $left;
+    position: absolute;
+    right: $right;
+  }
+}

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

@@ -5,7 +5,7 @@
 // Modal header
 // Top section of the modal w/ title and dismiss
 .modal-header {
-  background-color: $color-pf-black-150;
+  background-color: #f8f8f8;
   border-bottom: none;
   padding: $modal-title-padding-vertical $modal-title-padding-horizontal;
 }
@@ -35,15 +35,4 @@
       margin-left: 5px;
     }
   }
-}
-
-// message-dialog pattern
-.message-dialog-pf .modal-body {
-  display: flex;
-
-  .fa,
-  .pficon {
-    font-size: 30px;
-    margin-right: 15px;
-  }
-}
+}

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

@@ -14,8 +14,16 @@
     height: auto;
     padding: 12px 0;
     margin: 0 0 0 20px;
+    .ie8 & {
+      background: url('#{$img-path}/#{$img-brand-ie8}') no-repeat 0 49%;
+      min-width: $navbar-pf-navbar-navbar-brand-min-width;
+    }
     img {
       display: block;
+      .ie8 & {
+        height: 10px;
+        width: 0;
+      }
     }
   }
   .navbar-collapse {
@@ -29,88 +37,36 @@
   }
   .navbar-nav {
     margin: 0;
-    > .active {
-      > a,
-      > button {
-        &,
-        &:hover,
-        &:focus {
-          background-color: $navbar-pf-item-open-bg-color;
-          color: $navbar-pf-active-color;
-        }
-      }
+    > .active > a, > .active > a:hover, > .active > a:focus {
+      background-color: $navbar-pf-navbar-nav-active-bg-color;
+      color: $navbar-pf-active-color;
     }
-    > li {
-      > a,
-      > button {
-        color: $navbar-pf-color;
-        line-height: 1;
-        padding: 10px 20px;
-        text-shadow: none;
-        &:hover,
-        &:focus {
-          color: $navbar-pf-active-color;
-          text-decoration: none;
-        }
-        > .dropdown-title,
-        > .pficon-user {
-          position: relative;
-        }
-        > .pficon-user {
-          padding-right: $navbar-pf-item-icon-padding-right;
-        }
+    > li > a {
+      color: $navbar-pf-color;
+      line-height: 1;
+      padding: 10px 20px;
+      text-shadow: none;
+      &:hover, &:focus {
+        color: $navbar-pf-active-color;
       }
     }
     > .open {
-      > a,
-      > button {
-        &,
-        &:hover,
-        &:focus {
-          background-color: $navbar-pf-item-open-bg-color;
+      > a {
+        &, &:hover, &:focus {
+          background-color: $navbar-pf-navbar-nav-active-bg-color;
           color: $navbar-pf-active-color;
-          outline: 0;
         }
       }
     }
- .badge {
-    background-color: $notification-badge-color;
-    border-radius: 20px;
-    color: $navbar-pf-item-active-color;
-    cursor: pointer;
-    font-size: ($font-size-base - 3);
-    font-weight: 700;
-    left: 26px;
-    margin: 0;
-    padding: 2px 4px;
-    position: absolute;
-    min-width: 10px;
-    min-height: 10px;
-    top: 6px;
-    @media(min-width: $screen-sm-min) {
-      left: auto;
-      right: 6px;
-      top: 3px;
-    }
-    &.badge-pf-bordered {
-      border: 1px solid $navbar-pf-bg-color;
-    }
-}
-
     @media (max-width: $grid-float-breakpoint-max) {
-      .active .dropdown-menu,
-      .active .navbar-persistent,
-      .open .dropdown-menu {
+      .active .navbar-persistent, .active .dropdown-menu, .open .dropdown-menu {
         background-color: $navbar-pf-navbar-nav-active-active-bg-color !important;
         margin-left: 0;
         padding-bottom: 0;
         padding-top: 0;
-        > .active > a,
-        .dropdown-submenu.open > a {
-          &,
-          &:hover,
-          &:focus {
-            background-color: $navbar-pf-item-open-bg-color !important;
+        > .active > a, .dropdown-submenu.open > a {
+          &, &:hover, &:focus {
+            background-color: $navbar-pf-navbar-nav-active-active-open-bg-color !important;
             color: $navbar-pf-active-color;
           }
         }
@@ -189,10 +145,9 @@
       }
       .context-bootstrap-select { // Also see bootstrap-select.less
         .open > .dropdown-menu {
-          background-color: $color-pf-white !important;
+          background-color: #fff !important;
           > .active > a {
-            &,
-            &:active {
+            &, &:active {
               background-color: $dropdown-link-hover-bg !important;
               border-color: $dropdown-link-hover-border-color !important;
               color: $gray-dark !important;
@@ -205,13 +160,13 @@
             color: $gray-light !important;
           }
           > .selected > a {
-            &,
-            &:active {
+            &, &:active {
               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;
               }
             }
           }
@@ -225,10 +180,10 @@
             }
             & 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;
                 }
@@ -254,8 +209,7 @@
     .context {
       border-bottom: 1px solid $navbar-pf-navbar-header-border-color;
       &.context-bootstrap-select .bootstrap-select.btn-group {
-        &,
-        &[class*="span"] {
+        &, &[class*="span"] {
           margin: 8px 20px 9px;
           width: auto; // known bug:  IE8 will make it as wide as the longest string
         }
@@ -280,12 +234,11 @@
     border: 0;
     margin: 0;
     padding: 10px 20px;
-    &:hover,
-    &:focus {
+    &:hover, &:focus {
       background-color: transparent;
       outline: none;
       .icon-bar {
-        @include box-shadow(0 0 3px $color-pf-white);
+        @include box-shadow(0 0 3px rgba(255,255,255,1));
       }
     }
     .icon-bar {
@@ -294,17 +247,13 @@
   }
   .navbar-utility {
     border-bottom: 1px solid $navbar-pf-navbar-header-border-color;
-    li.dropdown {
-      > a,
-      > button {
-        &:hover {
-          outline: 0!important;
-        }
-        position: relative;
-        > .fa,
-        .pficon {
-          line-height: 0;
-        }
+    li.dropdown > .dropdown-toggle {
+      padding-left: 36px;
+      position: relative;
+      .pficon-user {
+        left: 20px;
+        position: absolute;
+        top: 10px;
       }
     }
     @media (max-width: $grid-float-breakpoint-max) {
@@ -320,12 +269,9 @@
     .navbar-brand {
       padding: $navbar-pf-navbar-navbar-brand-padding;
     }
-    .navbar-nav > li {
-      > a,
-      > button {
-        padding-bottom: 14px;
-        padding-top: 14px;
-      }
+    .navbar-nav > li > a {
+      padding-bottom: 14px;
+      padding-top: 14px;
     }
     .navbar-persistent {
       font-size: $font-size-large;
@@ -363,16 +309,13 @@
             }
             > li {
               &.active {
-                &,
-                &:hover {
+                &, &:hover {
                   @include tab-indicator($background: $nav-tabs-active-link-hover-color, $left: 20px, $right: 20px);
                 }
-                > a,
-                > a:hover,
-                &:hover > a {
+                > a, > a:hover, &:hover > a {
                   color: $link-color !important;
                 }
-                .active > a {
+                .active > a { 
                   color: $navbar-pf-active-color;
                 }
               }
@@ -403,8 +346,7 @@
                   }
                 }
               }
-              &:hover,
-              &.open {
+              &:hover, &.open {
                 @include tab-indicator($left: 20px, $right: 20px);
                 > a {
                   color: $gray-darker;
@@ -421,7 +363,7 @@
                 &.dropdown-toggle {
                   padding-right: 35px;
                   &:after {
-                    font-size: ($font-size-large + 1);
+                    font-size: $font-size-large + 1;
                     position: absolute;
                     right: 20px;
                     top: 9px;
@@ -438,47 +380,38 @@
           }
         }
       }
-      > li {
-        > a,
-        > button {
-          border-bottom: 1px solid transparent;
-          border-top: 1px solid transparent;
-          position: relative;
-          margin: -1px 0 0;
-          &:hover {
-            background-color: $navbar-pf-item-hover-bg-color;
-            border-top-color: $navbar-pf-navbar-primary-hover-border-color;
-            color: $navbar-pf-color;
-            @include gradient-vertical($navbar-pf-navbar-primary-hover-bg-color-start, $navbar-pf-navbar-primary-hover-bg-color-stop);
-          }
+      > li > a {
+        border-bottom: 1px solid transparent;
+        border-top: 1px solid transparent;
+        position: relative;
+        margin: -1px 0 0;
+        &:hover {
+          background-color: $navbar-pf-navbar-primary-hover-bg-color-stop;
+          border-top-color: $navbar-pf-navbar-primary-hover-border-color;
+          color: $navbar-pf-color;
+          @include gradient-vertical($navbar-pf-navbar-primary-hover-bg-color-start, $navbar-pf-navbar-primary-hover-bg-color-stop);
         }
       }
-      > .active,
-      .open {
-        > a,
-        > button {
-          &,
-          &:hover,
-          &:focus {
-            background-color: $navbar-pf-item-open-bg-color;
-            border-bottom-color: $navbar-pf-navbar-primary-active-bg-color-stop;
-            border-top-color: $navbar-pf-navbar-primary-active-border-color;
-            @include box-shadow(none);
-            color: $navbar-pf-active-color;
-            @include gradient-vertical($navbar-pf-navbar-primary-active-bg-color-start, $navbar-pf-navbar-primary-active-bg-color-stop);
-          }
-        }
+      > .active > a, > .active > a:hover, > .active > a:focus, > .open > a, > .open > a:hover, > .open > a:focus {
+        background-color: $navbar-pf-navbar-primary-active-bg-color-stop;
+        border-bottom-color: $navbar-pf-navbar-primary-active-bg-color-stop;
+        border-top-color: $navbar-pf-navbar-primary-active-border-color;
+        @include box-shadow(none);
+        color: $navbar-pf-active-color;
+        @include gradient-vertical($navbar-pf-navbar-primary-active-bg-color-start, $navbar-pf-navbar-primary-active-bg-color-stop);
       }
       li.context {
         &.context-bootstrap-select .filter-option {
           max-width: 160px;
           text-overflow: ellipsis;
+          .ie8 & {
+            max-width: none;
+          }
         }
         &.dropdown {
           border-bottom: 0;
         }
-        > a,
-        &.context-bootstrap-select {
+        > a, &.context-bootstrap-select {
           background-color: $navbar-pf-navbar-primary-context-bg-color-stop;
           border-bottom-color: $navbar-pf-navbar-primary-context-border-color;
           border-right: 1px solid $navbar-pf-navbar-primary-context-border-color;
@@ -504,42 +437,32 @@
     }
     .navbar-utility {
       border-bottom: 0;
+      font-size: $font-size-small;
       position: absolute;
       right: 0;
       top: 0;
-      > .active,
-      > .open {
-        > a,
-        > button {
-          &,
-          &:hover,
-          &:focus {
-            background: $navbar-pf-item-open-bg-color;
-            color: $navbar-pf-active-color;
-          }
-        }
+      > .active > a, > .active > a:hover, > .active > a:focus, > .open > a, > .open > a:hover, > .open > a:focus {
+        background: $navbar-pf-navbar-utility-open-bg-color;
+        color: $navbar-pf-navbar-utility-color;
       }
-      > li {
-        > a,
-        > button {
-          border: solid $navbar-pf-navbar-utility-border-color;
-          border-width: 0 0 0 1px;
-          color: $navbar-pf-navbar-utility-color !important;
-          padding: 7px 10px;
-          font-size: $font-size-small;
-          margin: 0;
-          &:hover {
-            background: $navbar-pf-item-hover-bg-color;
-            border-left-color: $navbar-pf-navbar-utility-hover-border-color;
-            outline: 0;
-          }
+      > li > a {
+        border-left: 1px solid $navbar-pf-navbar-utility-border-color;
+        color: $navbar-pf-navbar-utility-color !important;
+        padding: 7px 10px;
+        &:hover {
+          background: $navbar-pf-navbar-utility-hover-bg-color;
+          border-left-color: $navbar-pf-navbar-utility-hover-border-color;
         }
       }
-      > li.open {
-        > a,
-        > button {
-          border-left-color: $navbar-pf-navbar-utility-open-border-color;
-          color: $navbar-pf-active-color !important;
+      > li.open > a {
+        border-left-color: $navbar-pf-navbar-utility-open-border-color;
+        color: $navbar-pf-active-color !important;
+      }
+      li.dropdown > .dropdown-toggle {
+        padding-left: 26px;
+        .pficon-user {
+          left: 10px;
+          top: 7px;
         }
       }
       .open .dropdown-menu {
@@ -551,12 +474,11 @@
         }
       }
     }
-    .navbar-utility .open .dropdown-menu {
-        border-top-width: 0;
-    }
     .open {
-      &.bootstrap-select .dropdown-menu,
-      .dropdown-submenu > .dropdown-menu {
+      .dropdown-menu {
+        border-top-width: 0 !important;
+      }
+      &.bootstrap-select .dropdown-menu, .dropdown-submenu > .dropdown-menu {
         border-top-width: 1px !important;
       }
     }
@@ -576,4 +498,4 @@
       padding-left: 0;
     }
   }
-}
+}