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

data/dist/sass/patternfly/_cards.scss

@@ -0,0 +1,238 @@
+//
+// Cards
+// --------------------------------------------------
+
+.card-pf {
+  background: $card-pf-bg-color;
+  border-top: 2px solid $card-pf-border-top-color;
+  @include box-shadow(0 1px 1px rgba($color-pf-black, (17.5/100)));
+  margin: 0 (-($grid-gutter-width / 4)) ($grid-gutter-width / 2);
+  padding: 0 ($grid-gutter-width / 2);
+  &.card-pf-accented {
+    border-top-color: $card-pf-accented-border-top-color;
+  }
+  &.card-pf-aggregate-status {
+    .card-pf-aggregate-status-notifications,
+    .card-pf-title {
+      a {
+        color: $text-color;
+        &.add {
+          color: $link-color;
+          &:hover {
+            color: $link-hover-color;
+          }
+        }
+        &:hover {
+          color: $link-hover-color;
+        }
+      }
+    }
+  }
+  &.card-pf-aggregate-status {
+    padding: 0 ($grid-gutter-width / 4);
+    text-align: center;
+  }
+  &.card-pf-aggregate-status-mini {
+    padding-bottom: ($grid-gutter-width / 4);
+    position: relative;
+  }
+  @media (min-width: $grid-float-breakpoint) {
+    &.card-pf-bleed-left {
+      margin-left: (-($grid-gutter-width / 2));
+    }
+    &.card-pf-bleed-right {
+      border-right: 1px solid $card-pf-border-color;
+      margin-right: (-($grid-gutter-width / 2));
+    }
+  }
+}
+
+.card-pf-aggregate-status-notifications {
+  font-size: ($font-size-base * 2); // 24px
+  font-weight: 300;
+  .card-pf-aggregate-status-mini & {
+    line-height: 1;
+  }
+  .card-pf-aggregate-status-notification + .card-pf-aggregate-status-notification {
+    border-left: 1px solid $card-pf-border-color;
+    margin-left: ($grid-gutter-width / 8 - 2);
+    padding-left: ($grid-gutter-width / 4);
+  }
+  .fa, .pficon {
+    font-size: ($font-size-base * 1.5); // 18px
+    margin-right: 7px;
+  }
+}
+
+.card-pf-body {
+  margin: ($grid-gutter-width / 2) 0 0;
+  padding: 0 0 ($grid-gutter-width / 2);
+  .card-pf-aggregate-status & {
+    margin-top: ($grid-gutter-width / 4);
+    padding-bottom: ($grid-gutter-width / 4);
+  }
+  .card-pf-aggregate-status-mini & {
+    margin-bottom: 0;
+    margin-top: 0;
+    padding-bottom: 0;
+    position: absolute;
+    right: ($grid-gutter-width / 2);
+    top: 15px;
+  }
+  .card-pf-utilization .card-pf-title + & {
+    margin-top: -8px;
+  }
+  > *:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.card-pf-footer {
+  background-color: $card-pf-footer-bg-color;
+  border-top: 1px solid $card-pf-border-color;
+  margin: 0 (-($grid-gutter-width / 2)) !important;
+  padding: ($grid-gutter-width / 2) ($grid-gutter-width / 2) ($grid-gutter-width / 4);
+  a > {
+    .fa,
+    .pficon {
+      margin-right: 5px;
+    }
+  }
+  .card-pf-time-frame-filter {
+    margin-top: -2px;
+  }
+}
+
+.card-pf-link-with-icon {
+  padding-left: 21px;
+  position: relative;
+  .fa,
+  .pficon {
+    font-size: 16px;
+    left: 0;
+    position: absolute;
+    top: 0;
+  }
+}
+
+.card-pf-time-frame-filter {
+  .card-pf-heading &,
+  .card-pf-footer & {
+    float: right;
+    margin-left: 20px;
+  }
+}
+
+.card-pf-heading {
+  border-bottom: 1px solid $card-pf-border-color;
+  margin: 0 (-($grid-gutter-width / 2)) ($grid-gutter-width / 2);
+  padding: 0 ($grid-gutter-width / 2) 0;
+  & .card-pf-time-frame-filter {
+    margin-top: -5px;
+  }
+}
+
+.card-pf-heading-details {
+  float: right;
+  font-size: ($font-size-small - 1);
+}
+
+.card-pf-subtitle {
+  font-size: $font-size-h3;
+  margin-top: $line-height-computed;
+  margin-bottom: ($line-height-computed / 2);
+  [class^="col"] & {
+    margin-top: 0;
+  }
+  @media (max-width: $screen-xs-max) {
+    .card-pf-body [class^="col"] + [class^="col"] > & {
+      margin-top: ($grid-gutter-width);
+    }
+  }
+}
+
+.card-pf-title {
+  font-size: $font-size-h3;
+  font-weight: 400;
+  margin: ($grid-gutter-width / 2) 0;
+  padding: 0;
+  .card-pf-aggregate-status & {
+    font-size: $font-size-large;
+    margin: ($grid-gutter-width / 4) 0 0;
+    .fa,
+    .pficon {
+      color: $card-pf-aggregate-status-title-icon-color;
+      font-size: $font-size-h3;
+      margin-right: 7px;
+    }
+  }
+  .card-pf-aggregate-status-count {
+    font-size: $font-size-h3;
+    .card-pf-aggregate-status-mini & {
+      display: block;
+      font-size: ($font-size-base * 2); // 24px
+      font-weight: 300;
+      margin-bottom: 3px;
+    }
+  }
+  .card-pf-aggregate-status-mini & {
+    font-size: $font-size-base;
+    margin-top: ($grid-gutter-width / 8);
+    a {
+      display: inline-block;
+    }
+    .fa,
+    .pficon {
+      font-size: ($font-size-base * 2 + 2); // 26px
+      margin-right: 0;
+      min-width: ($font-size-base * 2 + 2); // 26px
+      position: absolute;
+      left: ($grid-gutter-width / 2);
+      text-align: center;
+      top: 15px;
+    }
+  }
+}
+
+.card-pf-utilization-details {
+  border-bottom: 1px solid $card-pf-border-color;
+  display: table;
+  margin: 12px 0 15px;
+  padding: 0 0 15px;
+  width: 100%;
+  .card-pf-utilization-card-details-count,
+  .card-pf-utilization-card-details-description {
+    float: left;
+    line-height: 1;
+  }
+  .card-pf-utilization-card-details-count {
+    font-size: ($font-size-base * 2 + 2); // 26px
+    font-weight: 300;
+    margin-right: 10px;
+  }
+  .card-pf-utilization-card-details-line-1,
+  .card-pf-utilization-card-details-line-2 {
+    display: block;
+  }
+  .card-pf-utilization-card-details-line-1 {
+    font-size: ($font-size-small - 1);
+    margin-bottom: 2px;
+  }
+}
+
+.cards-pf {
+  background: $card-pf-container-bg-color;
+  .row-cards-pf {
+    padding: 0 20px;
+    &:first-child { padding-top: 20px; }
+  }
+}
+
+.container-cards-pf {
+  margin-top: ($grid-gutter-width / 2);
+}
+
+.row-cards-pf {
+  margin-left: (-($grid-gutter-width / 4));
+  margin-right: (-($grid-gutter-width / 4));
+}

data/dist/sass/patternfly/_charts.scss

@@ -0,0 +1,388 @@
+//
+// Charts
+// --------------------------------------------------
+
+.bullet-chart-pf {
+  display: flex;
+  flex-direction: column;
+
+  &.bullet-chart-pf-vertical {
+    height: 100%;
+    flex-direction: row;
+  }
+}
+
+.bullet-chart-pf-chart {
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  width: 100%;
+  .bullet-chart-pf-vertical & {
+    flex: initial;
+    flex-direction: column-reverse;
+    height: 100%;
+    width: initial;
+  }
+}
+
+.bullet-chart-pf-title-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin: 10px 0 25px;
+  padding-right: 10px;
+  text-align: right;
+  .bullet-chart-pf-vertical & {
+    margin-bottom: 0;
+    padding-right: 0;
+    text-align: center;
+  }
+}
+
+.bullet-chart-pf-title {
+  font-size: ($font-size-base + 2);
+}
+
+.bullet-chart-pf-details {
+  color: $gray-light;
+  font-size: $font-size-base;
+  line-height: 9px;
+}
+
+.bullet-chart-pf-container {
+  display: flex;
+  flex-direction: column;
+  flex: 5;
+  .bullet-chart-pf-vertical & {
+    flex-direction: row-reverse;
+    flex: initial;
+    &.show-axis {
+      margin-left: -25px;
+    }
+  }
+}
+
+.bullet-chart-pf-data-container {
+  flex: 1;
+  position: relative;
+  .bullet-chart-pf-vertical & {
+    height: initial;
+  }
+}
+
+.bullet-chart-pf-vertical-data-container {
+  display: flex;
+  flex: 5;
+  flex-direction: row;
+  justify-content: center;
+  .bullet-chart-pf-data-container {
+    flex: initial;
+  }
+}
+
+.bullet-chart-pf-values-container {
+  height: 20px;
+  margin: 20px 0;
+  position: relative;
+  .bullet-chart-pf-vertical & {
+    height: 100%;
+    margin: 0 20px;
+    width: 20px;
+  }
+}
+
+.bullet-chart-pf-value-bar {
+  height: 100%;
+  position: absolute;
+  transition: left 600ms ease;
+  .bullet-chart-pf-vertical & {
+    bottom: 0;
+    height: initial;
+    top: initial;
+    width: 100%;
+  }
+}
+
+.bullet-chart-pf-value-dot {
+  border-radius: 50%;
+  border-style: solid;
+  border-width: 0;
+  height: 20px;
+  transform: translateX(-50%);
+  position: absolute;
+  transition: left 600ms ease;
+  width: 20px;
+  .bullet-chart-pf-vertical & {
+    top: initial;
+    transform: translateY(50%);
+  }
+}
+
+.bullet-chart-pf-threshold-indicator {
+  border: 0 solid $color-pf-black-600;
+  border-left-width: 1px;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  z-index: 400;
+  .bullet-chart-pf-vertical & {
+    border-left-width: 0;
+    border-top-width: 1px;
+    height: 1px;
+    left: 0;
+    top: initial;
+    width: 100%;
+  }
+  &.error {
+    border-color: $alert-danger-border;
+  }
+  &.warning {
+    border-color: $alert-warning-border;
+  }
+}
+
+.bullet-chart-pf-range-bar {
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  .bullet-chart-pf-vertical & {
+    bottom: 0;
+    height: initial;
+    top: initial;
+    width: 100%;
+  }
+  &.range-1 {
+    background-color: $color-pf-black-150;
+  }
+  &.range-2 {
+    background-color: $color-pf-black-200;
+  }
+  &.range-3 {
+    background-color: #dbdbdb;
+  }
+}
+
+.bullet-chart-pf-axis {
+  border-top: 1px solid $color-pf-black-600;
+  height: 25px;
+  position: relative;
+  .bullet-chart-pf-vertical & {
+    height: initial;
+    width: 25px;
+    border-right: 1px solid $color-pf-black-600;
+    border-top: 0;
+  }
+  .bullet-chart-pf-title-container & {
+    border-top: 0;
+  }
+}
+
+.bullet-chart-pf-axis-tic {
+  padding-top: 5px;
+  position: absolute;
+  text-align: center;
+  width: 30px;
+  .bullet-chart-pf-vertical & {
+    padding-top: 0;
+    padding-right: 5px;
+    width: 100%;
+    text-align: right;
+    line-height: 21px;
+  }
+  &:before {
+    border-left: 1px solid $color-pf-black-600;
+    content: "";
+    height: 3px;
+    left: 50%;
+    position: absolute;
+    top: -1px;
+    .bullet-chart-pf-vertical & {
+      border-left: 0;
+      border-top: 1px solid $color-pf-black-600;
+      height: initial;
+      left: initial;
+      right: -1px;
+      top: calc(50% - 1px);
+      width: 3px;
+    }
+  }
+}
+
+.bullet-chart-pf-overflow {
+  flex: 1;
+}
+
+.bullet-chart-pf-legend {
+  margin-top: 7px;
+  text-align: center;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+
+  .bullet-chart-pf-vertical & {
+    flex-direction: column;
+    margin-left: 10px;
+    margin-top: 0;
+    text-align: left;
+  }
+}
+
+.bullet-chart-pf-legend-item {
+  display: inline-block;
+  margin-right: 10px;
+
+  .bullet-chart-pf-vertical & {
+    margin-right: 0;
+    margin-top: 10px;
+  }
+}
+
+.bullet-chart-pf-legend-item-box {
+  display: inline-block;
+  height: 13px;
+  margin-right: 3px;
+  width: 13px;
+  &.range-1 {
+    background-color: $color-pf-black-150;
+  }
+  &.range-2 {
+    background-color: $color-pf-black-200;
+  }
+  &.range-3 {
+    background-color: #dbdbdb;
+  }
+}
+
+.bullet-chart-pf-legend-item-text {
+  display: inline-block;
+  line-height: 14px;
+  max-width: 150px;
+  overflow: hidden;
+  position: relative;
+  text-overflow: ellipsis;
+  top: 1px;
+  white-space: nowrap;
+  word-wrap: normal;
+}
+
+.c3 {
+  path {
+    stroke: $table-border-color;
+  }
+  svg {
+    font-family: $font-family-base;
+  }
+}
+
+.c3-axis-x .tick line {
+  stroke: $table-border-color;
+}
+
+.c3-axis-y .tick line {
+  display: none;
+}
+
+.c3-chart-arc path {
+  stroke: $color-pf-white;
+}
+
+.c3-grid line {
+  stroke: $table-border-color;
+}
+
+.c3-line {
+  stroke-width: 2px;
+}
+
+.c3-tooltip {
+  background: $tooltip-bg;
+  @include box-shadow(none);
+  @include opacity($tooltip-opacity);
+
+  td {
+    background: transparent;
+    border: 0;
+    color: $tooltip-color;
+    font-size: $font-size-base;
+    padding: 5px 10px;
+  }
+
+  th {
+    background: transparent;
+    font-size: $font-size-base;
+    padding: 5px 10px 0;
+    border-bottom: solid 2px $color-pf-black;
+  }
+
+  tr {
+    border: 0;
+    + tr > td {
+      padding-top: 0;
+    }
+  }
+}
+
+.c3-tooltip-sparkline,
+.donut-tooltip-pf {
+  background: $tooltip-bg;
+  color: $tooltip-color;
+  @include opacity($tooltip-opacity);
+  padding: 2px 6px;
+}
+
+.c3-xgrid,
+.c3-ygrid {
+  stroke-dasharray: 0 0;
+}
+
+.chart-pf-sparkline {
+  margin-left: -5px;
+  margin-right: -5px;
+}
+
+.donut-title-big-pf {
+  font-size: $donut-font-size-big;
+  font-weight: 300;
+}
+
+.donut-title-small-pf {
+  font-size: $font-size-base;
+  font-weight: 400;
+}
+
+.line-chart-pf {
+  .c3-zoom-rect {
+    opacity: 1 !important;
+    fill: $color-pf-black-100;
+    stroke: $table-border-color;
+    stroke-width: 1px;
+  }
+}
+
+.pct-donut-chart-pf {
+
+  .pct-donut-chart-pf-label {
+    display: block;
+  }
+
+  &.pct-donut-chart-pf-left,
+  &.pct-donut-chart-pf-right,
+  .pct-donut-chart-pf-left,
+  .pct-donut-chart-pf-right {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &.pct-donut-chart-pf-left,
+  &.pct-donut-chart-pf-right {
+    display: inline-flex;
+  }
+
+  &.pct-donut-chart-pf-left,
+  .pct-donut-chart-pf-left {
+    flex-direction: row-reverse;
+  }
+}

data/dist/sass/patternfly/_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/patternfly/_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;