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

data/dist/sass/rcue/_toolbar.scss

@@ -0,0 +1,190 @@
+//
+// Toolbar (Filter and view options)
+// --------------------------------------------------
+
+.toolbar-pf {
+  background: $color-pf-white;
+  border-bottom: 1px solid $sidebar-pf-border-color;
+  box-shadow: 0 1px 0px rgba($color-pf-black, (4.5/100));
+  padding-top: ($grid-gutter-width/4);
+  .form-group {
+    margin-bottom: ($grid-gutter-width/4);
+    @media (min-width: $grid-float-breakpoint) {
+      border-right: 1px solid $sidebar-pf-border-color;
+      float: left;
+      margin-bottom: 0;
+      padding-left: ($grid-gutter-width/2);
+      padding-right: ($grid-gutter-width/2);
+    }
+    &:last-child {
+      border-right: 0;
+      margin-bottom: 0;
+      padding-right: 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; }
+    }
+    .dropdown-kebab-pf .btn-link {
+      padding: 4px ($grid-gutter-width/4);
+      margin-left: ($grid-gutter-width/(-4));
+      margin-right: ($grid-gutter-width/(-4));
+    }
+  }
+}
+.toolbar-pf-actions {
+  display: table;
+  margin-bottom: 10px;
+  width: 100%;
+  @media (min-width: $grid-float-breakpoint) {
+    .toolbar-pf-filter {
+      padding-left: 0;
+    }
+  }
+}
+.toolbar-pf-view-selector {
+  font-size: ($font-size-base + 4);
+  .btn-link.active {
+    color: $link-color;
+    cursor: default;
+  }
+}
+.toolbar-pf-action-right {
+  float: right;
+  @media (max-width: $grid-float-breakpoint) {
+    float: none;
+  }
+}
+.toolbar-pf-find {
+  font-size: ($font-size-base + 2);
+  position: relative;
+}
+.find-pf-dropdown-container {
+  background: $color-pf-white;
+  border: solid 1px $color-pf-black-400;
+  display: none;
+  right: -20px;
+  padding: 5px;
+  position: absolute;
+  top: 35px;
+  width: 300px;
+  z-index: 10000;
+  @media (max-width: $grid-float-breakpoint) {
+    left: 30px;
+    top: -5px;
+    width: calc(100% - 30px);
+  }
+  &:before,
+  &:after {
+    content: "";
+    position: absolute;
+  }
+  &:before {
+    border-bottom:11px solid $color-pf-black-400;
+    border-left:11px solid transparent;
+    border-right:11px solid transparent;
+    right: 35px;
+    .toolbar-pf-find:last-child & {
+      right: 15px;
+    }
+    top: -12px;
+    @media (max-width: $grid-float-breakpoint) {
+      border-bottom:11px solid transparent;
+      border-right:11px solid $color-pf-black-400;
+      border-top:11px solid transparent;
+      left: -22px;
+      right: initial;
+      top: 8px;
+    }
+  }
+  &:after {
+    border-bottom:10px solid $color-pf-white;
+    border-left:10px solid transparent;
+    border-right:10px solid transparent;
+    right: 36px;
+    .toolbar-pf-find:last-child & {
+      right: 16px;
+    }
+    top: -10px;
+    @media (max-width: $grid-float-breakpoint) {
+      border-bottom:10px solid transparent;
+      border-right:10px solid $color-pf-white;
+      border-top:10px solid transparent;
+      left: -20px;
+      right: initial;
+      top: 9px;
+    }
+  }
+  input {
+    height: 30px;
+    padding: 5px 117px 5px 5px; // 112px (components) + 5px (offset)
+    width: 100%;
+  }
+  .find-pf-buttons {
+    position: absolute;
+    right: 10px;
+    top: 5px;
+    .btn {
+      border: none;
+      cursor: pointer;
+      margin-left: 0 !important;
+      padding: 0;
+      width: 18px;
+      .fa-angle-up,
+      .fa-angle-down {
+        font-weight: bold;
+        font-size: ($font-size-base + 6);
+      }
+      .pficon-close { font-size: ($font-size-base + 2); }
+    }
+    span {
+      height: 30px;
+      line-height: 30px;
+      vertical-align: middle;
+    }
+    .find-pf-nums {
+      color: $color-pf-black-500;
+      margin-right: 3px;
+    }
+  }
+}
+
+.toolbar-pf-results {
+  border-top: 1px solid $sidebar-pf-border-color;
+  margin-top: ($grid-gutter-width/4);
+  h5,
+  p,
+  ul {
+    display: inline-block;
+    line-height: ($grid-gutter-width/1.5);
+    margin-bottom: 0;
+    margin-top: 0;
+    @media (min-width: $screen-sm-min) {
+      line-height: $grid-gutter-width;
+    }
+  }
+  h5 {
+    font-weight: 700;
+    margin-right: 20px;
+  }
+  .label {
+    font-size: ($font-size-base - 1);
+    a {
+      color: $color-pf-white;
+      display: inline-block;
+      margin-left: 5px;
+    }
+  }
+}

data/dist/sass/rcue/_tooltip.scss

@@ -0,0 +1,15 @@
+//
+// Tooltips
+// --------------------------------------------------
+
+// Base class
+.tooltip {
+  font-size: $tooltip-font-size;
+  line-height: 1.4;
+}
+
+// Wrapper for the tooltip content
+.tooltip-inner {
+  padding: 7px 12px;
+  text-align: left;
+}

data/dist/sass/rcue/_tree-list-view.scss

@@ -0,0 +1,83 @@
+//
+// Tree List View
+// --------------------------------------------------
+
+
+.tree-list-view-pf {
+  background-color: $list-group-top-border;
+  border: none;
+  margin-top: 30px;
+  overflow-x: hidden;
+  > .list-group-item:first-child {
+    border-top: 1px solid transparent;
+  }
+  .list-group-item {
+    display: flex;
+    flex-wrap: wrap;
+    &.active {
+      background-color: $color-pf-white;
+      color: currentColor;
+      z-index: auto;
+      &:hover {
+        border-color: $list-group-top-border;
+      }
+      > .list-group-item-header {
+        background-color: $list-view-active-bg;
+        color: $list-group-link-color;
+        &:before {
+          background-color: $list-view-active-bg;
+        }
+        &:hover {
+          background-color: $list-view-hover-bg;
+          &:before {
+            background-color: $list-view-hover-bg;
+          }
+        }
+        .list-group-item-text {
+          color: $list-group-link-color;
+        }
+      }
+      .list-group-item-text {
+        color: currentColor;
+      }
+    }
+    border-color: $list-group-top-border;
+    padding: 0;
+    background-clip: padding-box;
+    .list-group-item {
+      border-bottom: none;
+      padding-left: $tree-list-view-pf-padding-left;
+      .list-group-item-header:before {
+        border-bottom: solid 1px $list-group-top-border;
+        content: "";
+        height: unquote("calc(100% + 1px)");
+        left: -100%;
+        position: absolute;
+        width: 100%;
+      }
+    }
+  }
+  .list-group-item-container {
+    border-top-color: $list-group-top-border;
+    margin: 0;
+    padding: 0;
+  }
+  .list-group-item-header {
+    box-sizing: border-box;
+    margin: 0;
+    position: inherit;
+    &:hover {
+      background-color: $list-view-hover-bg;
+      border-left-color: transparent;
+      border-right-color: transparent;
+      &:before {
+        background-color: $list-view-hover-bg;
+      }
+    }
+  }
+  .list-group-item-heading {
+    @media (min-width: $screen-md-min) {
+      width: unquote("calc(25% - 20px)"); // IE9 fallback
+    }
+  }
+}

data/dist/sass/rcue/_type.scss

@@ -0,0 +1,29 @@
+//
+// Typography
+// --------------------------------------------------
+
+h1,
+.h1,
+h2,
+.h2 {
+  font-weight: 300;
+}
+
+.page-header .actions {
+  margin-top: 8px;
+  a > .pficon {
+    margin-right: 4px;
+  }
+}
+
+@media (min-width: $grid-float-breakpoint-max) {
+  .page-header-bleed-left {
+    margin-left: (-($grid-gutter-width / 2));
+  }
+  .page-header-bleed-right {
+    margin-right: ((-$grid-gutter-width / 2));
+    .actions {
+      margin-right: ($grid-gutter-width / 2);
+    }
+  }
+}