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

data/dist/sass/rcue/_close.scss

@@ -0,0 +1,16 @@
+//
+// Close icons
+// --------------------------------------------------
+
+//this should no longer be needed and be replaced with pficon-close. This is here for legacy. For further info see https://github.com/patternfly/patternfly/pull/781
+
+.close {
+  text-shadow: none;
+  z-index: 1;
+  position: relative;
+  @include opacity(.6);
+  &:hover,
+  &:focus {
+    @include opacity(.9);
+  }
+}

data/dist/sass/rcue/_color-variables.scss

@@ -0,0 +1,85 @@
+$color-pf-black-100:             #fafafa !default;
+$color-pf-black-150:             #f5f5f5 !default;
+$color-pf-black-200:             #ededed !default;
+$color-pf-black-300:             #d1d1d1 !default;
+$color-pf-black-400:             #bbb !default;
+$color-pf-black-500:             #8b8d8f !default;
+$color-pf-black-600:             #72767b !default;
+$color-pf-black-700:             #4d5258 !default;
+$color-pf-black-800:             #393f44 !default;
+$color-pf-black-900:             #292e34 !default;
+$color-pf-blue-25:               #edf8ff !default;
+$color-pf-blue-50:               #def3ff !default;
+$color-pf-blue-100:              #bee1f4 !default;
+$color-pf-blue-200:              #7dc3e8 !default;
+$color-pf-blue-300:              #39a5dc !default;
+$color-pf-blue-400:              #0088ce !default;
+$color-pf-blue-500:              #00659c !default;
+$color-pf-blue-600:              #004368 !default;
+$color-pf-blue-700:              #002235 !default;
+$color-pf-cyan-100:              #bedee1 !default;
+$color-pf-cyan-200:              #7dbdc3 !default;
+$color-pf-cyan-300:              #3a9ca6 !default;
+$color-pf-cyan-400:              #007a87 !default;
+$color-pf-cyan-500:              #005c66 !default;
+$color-pf-cyan-600:              #003d44 !default;
+$color-pf-cyan-700:              #001f22 !default;
+$color-pf-gold-100:              #fbeabc !default;
+$color-pf-gold-200:              #f9d67a !default;
+$color-pf-gold-300:              #f5c12e !default;
+$color-pf-gold-400:              #f0ab00 !default;
+$color-pf-gold-500:              #b58100 !default;
+$color-pf-gold-600:              #795600 !default;
+$color-pf-gold-700:              #3d2c00 !default;
+$color-pf-green-100:             #cfe7cd !default;
+$color-pf-green-200:             #9ecf99 !default;
+$color-pf-green-300:             #6ec664 !default;
+$color-pf-green-400:             #3f9c35 !default;
+$color-pf-green-500:             #2d7623 !default;
+$color-pf-green-600:             #1e4f18 !default;
+$color-pf-green-700:             #0f280d !default;
+$color-pf-light-blue-100:        #beedf9 !default;
+$color-pf-light-blue-200:        #7cdbf3 !default;
+$color-pf-light-blue-300:        #35caed !default;
+$color-pf-light-blue-400:        #00b9e4 !default;
+$color-pf-light-blue-500:        #008bad !default;
+$color-pf-light-blue-600:        #005c73 !default;
+$color-pf-light-blue-700:        #002d39 !default;
+$color-pf-light-green-100:       #e4f5bc !default;
+$color-pf-light-green-200:       #c8eb79 !default;
+$color-pf-light-green-300:       #ace12e !default;
+$color-pf-light-green-400:       #92d400 !default;
+$color-pf-light-green-500:       #6ca100 !default;
+$color-pf-light-green-600:       #486b00 !default;
+$color-pf-light-green-700:       #253600 !default;
+$color-pf-orange-100:            #fbdebf !default;
+$color-pf-orange-200:            #f7bd7f !default;
+$color-pf-orange-300:            #f39d3c !default;
+$color-pf-orange-400:            #ec7a08 !default;
+$color-pf-orange-500:            #b35c00 !default;
+$color-pf-orange-600:            #773d00 !default;
+$color-pf-orange-700:            #3b1f00 !default;
+$color-pf-purple-100:            #c7bfff !default;
+$color-pf-purple-200:            #a18fff !default;
+$color-pf-purple-300:            #8461f7 !default;
+$color-pf-purple-400:            #703fec !default;
+$color-pf-purple-500:            #582fc0 !default;
+$color-pf-purple-600:            #40199a !default;
+$color-pf-purple-700:            #1f0066 !default;
+$color-pf-red-100:               #cc0000 !default;
+$color-pf-red-200:               #a30000 !default;
+$color-pf-red-300:               #8b0000 !default;
+$color-pf-red-400:               #470000 !default;
+$color-pf-red-500:               #2c0000 !default;
+
+$color-pf-black:                 #030303 !default;
+$color-pf-blue:                  $color-pf-blue-400 !default;
+$color-pf-cyan:                  $color-pf-cyan-400 !default;
+$color-pf-gold:                  $color-pf-gold-400 !default;
+$color-pf-green:                 $color-pf-green-400 !default;
+$color-pf-light-blue:            $color-pf-light-blue-400 !default;
+$color-pf-light-green:           $color-pf-light-green-400 !default;
+$color-pf-orange:                $color-pf-orange-400 !default;
+$color-pf-purple:                $color-pf-purple-400 !default;
+$color-pf-red:                   $color-pf-red-100 !default;
+$color-pf-white:                 #fff !default;

data/dist/sass/rcue/_context-selector.scss

@@ -0,0 +1,125 @@
+//
+// Context Selector
+// --------------------------------------------------
+
+.contextselector-pf {
+  float: left;
+  .bootstrap-select {
+    width: $contextselector-pf-bootstrap-select-width-mobile !important;
+    @media (min-width: $screen-xs-min) {
+      width: $contextselector-pf-bootstrap-select-width-desktop !important;
+    }
+    &.open {
+      > .dropdown-toggle {
+        &,
+        &:hover,
+        &:focus {
+          background: $navbar-pf-item-open-bg-color;
+          color: $navbar-pf-item-active-color;
+        }
+        &:focus {
+          outline: 0 !important; // don't show restored focus ring when open
+        }
+      }
+    }
+    > .dropdown-toggle {
+      background: none;
+      border: 0;
+      box-shadow: none !important;
+      color: $navbar-pf-vertical-color;
+      font-weight: normal;
+      padding-bottom: $contextselector-pf-dropdown-toggle-padding-bottom;
+      padding-left: $contextselector-pf-dropdown-toggle-padding-left;
+      padding-top: $contextselector-pf-dropdown-toggle-padding-top;
+      &:focus {
+        // restore the focus ring
+        // Default
+        outline: thin dotted !important;
+        // WebKit
+        outline: 5px auto -webkit-focus-ring-color !important;
+        outline-offset: -2px !important;
+      }
+      &:hover {
+        outline: 0 !important; // don't show restored focus ring when open
+      }
+      &:focus,
+      &:hover {
+        background-color: $navbar-pf-item-hover-bg-color;
+      }
+      .filter-option {
+        text-overflow: ellipsis;
+        position: relative;
+      }
+    }
+    .dropdown-menu li a span.text {
+      display: block;
+      overflow-x: hidden;
+      text-overflow: ellipsis;
+      width: 100%;
+    }
+  }
+}
+.layout-pf-fixed .navbar-pf-vertical.navbar-pf-contextselector {
+  z-index: $zindex-modal-background;
+}
+.navbar-pf-vertical .nav.contextselector-pf {
+  @media (min-width: $screen-md-min) {
+    margin-left: $contextselector-pf-margin-left;
+  }
+}
+
+// the following rules are deprecated
+.contextselector-pf {
+  float:left;
+  &-title {
+    display: inline-block;
+    line-height: normal;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: $contextselector-title-width-mobile;
+    @media (min-width: $screen-xs-min) {
+      width: $contextselector-title-width-desktop;
+    }
+  }
+  .contextselector-pf-list {
+    @media (min-width: $screen-sm-min) {
+      max-height: $contextselector-pf-list-max-height;
+      overflow-y: auto;
+    }
+    a {
+      color: $color-pf-black-800;
+      display: block;
+    }
+    li {
+      border-color: transparent;
+      border-style: solid;
+      border-width: $contextselector-pf-list-li-border-width;
+      padding: $contextselector-pf-list-li-padding;
+      &:hover {
+        background: $color-pf-blue-50;
+        border-color: $dropdown-link-hover-border-color;
+        a {
+          text-decoration: none;
+        }
+      }
+    }
+  }
+  .dropdown {
+    &.open, &:hover {
+      background-color: $navbar-pf-navbar-primary-active-bg-color-stop;
+    }
+  }
+  .dropdown-menu {
+    margin-top: 0;
+    width: 100%;
+  }
+  .form-group {
+    margin: $contextselector-pf-form-group-margin;
+  }
+}
+.navbar-pf-vertical .nav.contextselector-pf .nav-item-iconic {
+  align-items: center;
+  display: flex;
+  padding: $contextselector-pf-nav-item-iconic-padding;
+}

data/dist/sass/rcue/_datatables.scss

@@ -0,0 +1,186 @@
+//
+// DataTables
+// --------------------------------------------------
+
+// Deprecated
+.ColVis_Button {
+  &:active {
+    &:focus {
+      outline: none;
+    }
+  }
+}
+
+// Deprecated
+.ColVis_catcher {
+  position: absolute;
+  z-index: 999;
+}
+
+// Deprecated
+.ColVis_collection {
+  background-color: $dropdown-bg;
+  border: 1px solid $dropdown-border;
+  border-radius: $border-radius-base;
+  @include box-shadow(0 6px 12px rgba($color-pf-black, (17.5/100)));
+  background-clip: padding-box;
+  list-style: none;
+  margin: -1px 0 0 0;
+  padding: 5px 10px;
+  width: 150px;
+  z-index: $zindex-dropdown;
+  label {
+    font-weight: normal;
+    margin-bottom: 5px;
+    margin-top: 5px;
+    padding-left: 20px;
+  }
+}
+
+// Deprecated
+.ColVis_collectionBackground {
+  background-color: $color-pf-white;
+  height: 100%;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 998;
+}
+
+// Note: We won't be using this class with the Patternfly toolbar
+.dataTables_header {
+  background-color: $color-pf-black-150;
+  border: 1px solid $table-border-color;
+  border-bottom: none;
+  padding: 5px;
+  position: relative;
+  text-align: center;
+  .btn {
+    @include box-shadow(none);
+  }
+  // Deprecated
+  .ColVis {
+    position: absolute;
+    right: 5px;
+    text-align: left;
+    top: 5px;
+    + .dataTables_info {
+      padding-right: 30px;
+    }
+  }
+  .dataTables_filter {
+    position: absolute;
+    input {
+      border: 1px solid $color-pf-black-400;
+      height: 24px;
+      @media (max-width: $screen-xs-max) {
+        width: 100px;
+      }
+    }
+  }
+  .dataTables_info {
+    padding: 2px 0;
+    @media (max-width: $screen-xs) {
+     text-align: right;
+    }
+    b {
+      font-weight: bold;
+    }
+  }
+}
+
+// Note: We won't be using this class with the table view
+.dataTables_footer {
+  background-color: $color-pf-white;
+  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;
+  float: right;
+  margin: 0;
+  .pagination {
+    float: left;
+    margin: 0;
+    > li {
+      > span {
+        border-color: $color-pf-white $color-pf-black-300 $color-pf-black-150;
+        border-width: 0 1px;
+        font-size: ($font-size-base + 4);
+        font-weight: normal;
+        padding: 0;
+        text-align: center;
+        width: 31px;
+        &:hover,
+        &:focus {
+          @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();
+      }
+    }
+  }
+  .pagination-input {
+    float: left;
+    font-size: $font-size-base;
+    line-height: 1em;
+    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)));
+      font-size: $font-size-base;
+      font-weight: 600;
+      height: 19px;
+      margin-right: 8px;
+      padding-right: 3px;
+      text-align: right;
+      width: 30px;
+    }
+    .paginate_of {
+      position: relative;
+      b {
+        margin-left: 3px;
+      }
+    }
+  }
+}
+
+.dataTables_empty {
+  background: $table-bg-accent;
+}
+
+/* Might need this for pagination?
+.dataTables_wrapper {
+  margin: $line-height-computed 0;
+  @media (max-width: $screen-xs-max) {
+    .table-responsive {
+      margin-bottom: 0;
+    }
+  }
+}
+*/
+
+// Not in use with latest example: May be used with column reordering?
+.DTCR_clonedTable {
+  background-color: rgba($color-pf-white, (70/100));
+  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;
+}

data/dist/sass/rcue/_date-and-time.scss

@@ -0,0 +1,35 @@
+//
+// Date and Time
+// --------------------------------------------------
+.date-time-picker-pf .input-group-addon {
+  .fa,
+  .pficon {
+    width: 12px;
+  }
+}
+
+.date-time-range-picker-pf {
+  .form-control,
+  .form-control:not(:first-child):not(:last-child) {
+    border-radius: $border-radius-base;
+  }
+  .form-control:first-child {
+    border-bottom-right-radius: $border-radius-base;
+    border-top-right-radius: $border-radius-base;
+  }
+  .form-control:last-child {
+    border-bottom-left-radius: $border-radius-base;
+    border-top-left-radius: $border-radius-base;
+  }
+  .input-group-addon {
+    background-color: transparent;
+    border: none;
+    line-height: $line-height-base;
+    padding: $padding-base-vertical $padding-base-horizontal;
+  }
+  .dropdown-kebab-pf {
+    float: right;
+    margin-left: 0;
+    margin-right: -15px;
+  }
+}

data/dist/sass/rcue/_dropdowns.scss

@@ -0,0 +1,235 @@
+//
+// Dropdowns
+// --------------------------------------------------
+
+
+// Dropdown arrow/caret
+// Modified to use Font Awesome's angle-down icon
+.caret {
+  font-family: $icon-font-name-fa;
+  font-weight: normal;
+  height: ($font-size-base - 3);
+  position: relative;
+  vertical-align: baseline;
+  width: $font-size-base;
+  &:before {
+    bottom: 0;
+    content: $fa-var-angle-down;
+    left: 0;
+    line-height: $font-size-base;
+    position: absolute;
+    text-align: center;
+    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)
+.dropdown-menu {
+  // Dividers (basically an hr) within the dropdown
+  .divider {
+    @include nav-divider($dropdown-divider-bg, $dropdown-divider-margin);
+  }
+  // Links within the dropdown menu
+  > li > a {
+    border-color: transparent;
+    border-style: solid;
+    border-width: 1px 0;
+    padding: 1px 10px;
+  }
+}
+
+// Hover/Focus state
+.dropdown-menu > li > a {
+  &:hover,
+  &:focus {
+    border-color: $dropdown-link-hover-border-color;
+    @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();
+  }
+}
+
+// Active state
+.dropdown-menu > .active > a {
+  &,
+  &:hover,
+  &:focus {
+    background-color: $dropdown-link-active-bg !important;
+    border-color: $dropdown-link-active-border-color !important;
+    @include reset-filter();
+  }
+}
+
+// Disabled state
+.dropdown-menu > .disabled > a {
+  &,
+  &:hover,
+  &:focus {
+    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,
+  &:focus {
+    border-color: transparent;
+  }
+}
+
+// Dropdown section headers
+.dropdown-header {
+  padding-left: 10px;
+  padding-right: 10px;
+  text-transform: uppercase;
+}
+
+// Position Menu closer to button
+.btn-group,
+.dropdown,
+.input-group-btn {
+  > .dropdown-menu {
+    margin-top: -1px;
+  }
+}
+
+// Position Menu closer to button (dropup-menu)
+.dropup .dropdown-menu {
+  margin-bottom: -1px;
+}
+
+// Add back styles for dropdown-submenu
+.dropdown-submenu {
+  position:relative;
+  &:hover {
+    > a {
+      background-color: $dropdown-link-hover-bg;
+      border-color: $dropdown-link-hover-border-color;
+    }
+    > .dropdown-menu {
+      display: block;
+    }
+  }
+  &.pull-left {
+    float: none !important;
+    > .dropdown-menu {
+      left: auto;
+      margin-left: 10px;
+      right: 100%;
+    }
+  }
+  > a {
+    padding-right: 20px !important;
+    &:after {
+      content: $fa-var-angle-right;
+      font-family: $icon-font-name-fa;
+      display: block;
+      position: absolute;
+      right: 10px;
+      top: 2px;
+    }
+  }
+  > .dropdown-menu {
+    left: 100%;
+    margin-top: 0;
+    top: -6px;
+  }
+  .dropup & > .dropdown-menu {
+    bottom: -5px;
+    top: auto;
+  }
+  .open &.active > .dropdown-menu {
+    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;
+    }
+  }
+}