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

data/dist/sass/patternfly/_bootstrap-datepicker.scss

@@ -0,0 +1,132 @@
+//
+// Bootstrap-Datepicker
+// --------------------------------------------------
+
+.bootstrap-datepicker.form-control[readonly] {
+  background-color: $input-bg;
+  border-color: $input-border !important;
+  color: $input-color;
+  @include box-shadow(inset 0 1px 1px rgba($color-pf-black, (7.5/100)));
+  @include form-control-outline();
+  &:focus {
+    // TODO Create global variables for validation box shadows?
+    $input-validation-focus-box-shadow: rgba($color-pf-black, (7.5/100));
+    border-color: $input-border-focus !important;
+    .has-error & {
+      // TODO Create global variables for validation 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%);
+      @include box-shadow($shadow);
+    }
+    .has-success & {
+      // TODO Create global variables for validation 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%);
+      @include box-shadow($shadow);
+    }
+    .has-warning & {
+      // TODO Create global variables for validation 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%);
+      @include box-shadow($shadow);
+    }
+  }
+  &:hover {
+    border-color: $input-border-hover !important;
+    .has-error & {
+      border-color: darken($state-danger-text, 10%) !important;
+    }
+    .has-success & {
+      border-color: darken($state-success-text, 10%) !important;
+    }
+    .has-warning & {
+      border-color: darken($state-warning-text, 10%) !important;
+    }
+  }
+  .has-error & {
+    border-color: $state-danger-text !important;
+  }
+  .has-success & {
+    border-color: $state-success-text !important;
+  }
+  .has-warning & {
+    border-color: $state-warning-text !important;
+  }
+}
+
+.datepicker {
+  border-radius: $border-radius-base;
+  .datepicker-switch,
+  tfoot .clear,
+  tfoot .today {
+    font-size: $font-size-large;
+    font-weight: 500;
+  }
+  .next,
+  .prev {
+    font-weight: 500;
+  }
+  table tr {
+    td,
+    th {
+      border-radius: $border-radius-base;
+    }
+    td {
+      &.active,
+      &.active:hover,
+      &.active.disabled,
+      &.active.disabled:hover {
+        background: $dropdown-link-active-bg !important;
+        color: $color-pf-white !important;
+        text-shadow: none;
+      }
+      &.day:hover,
+      &.day.focused {
+        background: $dropdown-link-hover-bg;
+      }
+      &.selected,
+      &.selected:hover,
+      &.selected.disabled,
+      &.selected.disabled:hover {
+        text-shadow: none;
+      }
+      span {
+        border-radius: $border-radius-base;
+        &.active,
+        &.active:hover,
+        &.active.disabled,
+        &.active.disabled:hover {
+          background: $dropdown-link-active-bg;
+          text-shadow: none;
+        }
+        &:hover {
+          background: $dropdown-link-hover-bg;
+        }
+      }
+    }
+  }
+  thead tr:first-child th,
+  tfoot tr th {
+    &:hover {
+      background: $dropdown-link-hover-bg;
+    }
+  }
+}
+
+.input-daterange {
+  input:first-child {
+    border-radius: $border-radius-base 0 0 $border-radius-base;
+  }
+  input:last-child {
+    border-radius: 0 $border-radius-base $border-radius-base 0;
+  }
+  .input-group-addon {
+    background-color: $input-group-addon-bg;
+    border-color: $input-group-addon-border-color;
+    line-height: $line-height-base;
+    padding: $padding-base-vertical $padding-base-horizontal;
+  }
+}

data/dist/sass/patternfly/_bootstrap-mixin-overrides.scss

@@ -0,0 +1,33 @@
+// 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(unquote("inset 0 1px 1px rgba(3, 3, 3, 0.075), 0 0 8px #{$color-rgba}"));
+  }
+}
+
+// Gradients
+@mixin gradient-striped($color: rgba($color-pf-black, (15/100)), $angle: -45deg){
+    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: $color-pf-black-200, $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; opacity: 1; } // Firefox 19+
+  &:-ms-input-placeholder       { color: $color; font-style: italic; } // Internet Explorer 10+
+  &::-webkit-input-placeholder  { color: $color; font-style: italic; } // Safari and Chrome
+}

data/dist/sass/patternfly/_bootstrap-select.scss

@@ -0,0 +1,108 @@
+//
+// Bootstrap-select
+// --------------------------------------------------
+
+.bootstrap-select.btn-group {
+  &.form-control {
+    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();
+    .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%);
+        @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%);
+        @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%);
+        @include box-shadow($shadow);
+      }
+    }
+    @include transition(unquote("border-color ease-in-out .15s, box-shadow ease-in-out .15s"));
+  }
+  .dropdown-menu { // Also see navbar.less
+    > .active > a {
+      &,
+      &:active {
+        background-color: $dropdown-link-hover-bg !important;
+        border-color: $dropdown-link-hover-border-color !important;
+        color: $gray-dark !important;
+        small {
+          color: $gray-light !important;
+        }
+      }
+    }
+    > .disabled > a {
+      color: $gray-light !important;
+    }
+    > .selected > a {
+      background-color: $dropdown-link-active-bg !important;
+      border-color: $dropdown-link-active-border-color !important;
+      color: $color-pf-white !important;
+      small {
+        color: rgba($color-pf-white, (50/100)) !important;
+      }
+    }
+    .divider {
+      background: $dropdown-divider-bg !important;
+      margin: $dropdown-divider-margin !important;
+    }
+    dt {
+      color: $color-pf-black-500;
+      font-weight:normal;
+      padding: 1px 10px;
+    }
+    li {
+      & > a.opt {
+        padding: 1px 10px;
+      }
+      & a {
+        &:active small {
+          color: rgba($color-pf-white, (50/100)) !important;
+        }
+        &:hover,
+        &:focus {
+          small {
+            color: $gray-light;
+          }
+        }
+      }
+      &:not(.disabled) {
+        a:hover,
+        a:focus {
+          small {
+            color: $gray-light;
+          }
+        }
+      }
+    }
+  }
+}

data/dist/sass/patternfly/_bootstrap-slider.scss

@@ -0,0 +1,66 @@
+//
+// Bootstrap slider
+// --------------------------------------------------
+// https://github.com/seiyria/bootstrap-slider
+
+
+// Overwrites and fixes to Bootstrap slider
+
+// https //github.com/seiyria/bootstrap-slider/issues/797
+.slider-tick-label-container {
+  display: flex;
+  justify-content: space-between;
+  margin-left: 0!important;
+}
+
+.slider-tick-label {
+  width: auto !important;
+}
+
+.slider {
+  .tooltip {
+    top: -10px;
+  }
+}
+.slider-track {
+  background-color: $color-pf-black-200;
+  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .1), 0 0px 2px $color-pf-black-200;
+  border: 1px solid $color-pf-black-400;
+}
+
+.slider-selection {
+  @include gradient-vertical($slider-secondary-top, $slider-secondary-bottom);
+}
+
+.slider-handle {
+  width: $slider-line-height;
+  height: $slider-line-height;
+  border: 1px solid $color-pf-black-400; //THIS!
+}
+
+.slider-tick {
+  background-color: transparent !important;
+  background-image:
+    radial-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3) 2px, transparent 2px) !important;
+  @include box-shadow(none);
+}
+
+
+// Styles to create the pf slider
+.slider-pf {
+  display: flex;
+  align-items: center;
+
+  * {
+    margin-right: 10px;
+
+    &:last-child {
+      margin: 0;
+    }
+  }
+
+  .slider {
+    width: auto;
+    flex: 1 1 100%;
+  }
+}

data/dist/sass/patternfly/_bootstrap-switch.scss

@@ -0,0 +1,19 @@
+//
+// Bootstrap Switch
+// --------------------------------------------------
+
+.#{$bootstrap-switch-base} {
+  .#{$bootstrap-switch-base}-handle-off,
+  .#{$bootstrap-switch-base}-handle-on {
+    &.#{$bootstrap-switch-base}-default {
+      background: $bootstrap-switch-handle-default-bg-color;
+    }
+  }
+  .#{$bootstrap-switch-base}-label {
+    background: $bootstrap-switch-bg-color;
+    box-shadow: 0 0 2px rgba($color-pf-black, (40/100));
+    @include gradient-vertical($bootstrap-switch-bg-color-start, $bootstrap-switch-bg-color-stop);
+    position: relative;
+    z-index: 9;
+  }
+}

data/dist/sass/patternfly/_bootstrap-touchspin.scss

@@ -0,0 +1,31 @@
+//
+// Bootstrap Touchspin
+// --------------------------------------------------
+
+.bootstrap-touchspin .input-group-btn-vertical {
+  > .btn {
+    padding-bottom: 6px;
+    padding-top: 6px;
+  }
+  .bootstrap-touchspin-down {
+    border-bottom-right-radius: $border-radius-base;
+  }
+  .bootstrap-touchspin-up {
+    border-top-right-radius: $border-radius-base;
+  }
+  i {
+    font-size: ($font-size-base - 4);
+    left: 6px;
+    top: 2px;
+    &.fa-angle-down,
+    &.fa-angle-up {
+      font-size: $font-size-base;
+      line-height: $font-size-base;
+      top: 0;
+    }
+    &.fa-angle-down,
+    &.fa-angle-up {
+      left: 7px;
+    }
+  }
+}

data/dist/sass/patternfly/_bootstrap-treeview.scss

@@ -0,0 +1,89 @@
+//
+// 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;
+    cursor: default !important;
+    margin-bottom: 0;
+    overflow: hidden;
+    padding: 0 10px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    &:hover {
+      background: none !important;
+    }
+    &.node-selected {
+      background: none !important;
+      border-color: transparent !important;
+      color: inherit !important;
+    }
+    &.node-check-changed {
+      span.node-icon,
+      span.text {
+        color: $bootstrap-treeview-highlight-color;
+      }
+    }
+  }
+  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);
+    }
+    &.check-icon {
+      margin-right: 10px;
+    }
+    &.expand-icon {
+      cursor: pointer !important;
+    }
+  }
+  span.image {
+    background-repeat: no-repeat;
+    background-size: contain;
+    display: inline-block;
+    height: 1.19em;
+    line-height: 1em;
+    margin-right: 5px;
+    vertical-align: middle;
+    width: 12px;
+  }
+  span.indent {
+    margin-right: 5px;
+  }
+  .node-disabled {
+    color: $color-pf-black-300;
+    cursor: not-allowed;
+    span.expand-icon {
+      cursor: default !important;
+    }
+  }
+  .node-hidden {
+    display:none;
+  }
+}
+
+.treeview-pf-hover .list-group-item {
+  cursor: pointer !important;
+  &:hover {
+    background-color: $dropdown-link-hover-bg !important;
+    border-color: $dropdown-link-hover-border-color !important;
+  }
+}
+
+.treeview-pf-select .list-group-item {
+  cursor: pointer !important;
+  &.node-selected {
+    background: $dropdown-link-active-bg !important;
+    border-color: $dropdown-link-active-border-color !important;
+    color: $dropdown-link-active-color !important;
+  }
+}

data/dist/sass/patternfly/_breadcrumbs.scss

@@ -0,0 +1,20 @@
+//
+// Breadcrumbs
+// --------------------------------------------------
+
+.breadcrumb {
+  padding-left: 0;
+  > .active strong {
+    font-weight: 600;
+  }
+  > li {
+      display: inline; /* IE8 */
+      + li:before {
+      color: $gray-light;
+      content: $fa-var-angle-right;
+      font-family: $icon-font-name-fa;
+      font-size: ($font-size-base - 1);
+      padding: 0 9px 0 7px;
+    }
+  }
+}

data/dist/sass/patternfly/_buttons.scss

@@ -0,0 +1,50 @@
+//
+// Buttons
+// --------------------------------------------------
+
+.btn {
+  @include box-shadow(0 2px 3px rgba($color-pf-black, (10/100)));
+  &:active {
+    @include box-shadow(inset 0 2px 8px rgba($color-pf-black, (20/100)));
+  }
+  &.disabled,
+  &[disabled],
+  fieldset[disabled] & {
+    background-color: $color-pf-black-100 !important;
+    background-image: none !important;
+    border-color: $color-pf-black-300 !important;
+    color: $color-pf-black-500 !important;
+    opacity: 1;
+    &:active {
+      @include box-shadow(none);
+    }
+    &.btn-link {
+      background-color: transparent !important;
+      border: 0;
+    }
+  }
+}
+
+.btn-danger {
+  @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-bg-img-start, $btn-danger-bg-img-stop, $btn-danger-border);
+}
+
+.btn-default {
+  @include button-variant($btn-default-color, $btn-default-bg, $btn-default-bg-img-start, $btn-default-bg-img-stop, $btn-default-border);
+}
+
+.btn-link {
+  &,
+  &:active {
+    @include box-shadow(none);
+  }
+}
+
+.btn-primary {
+  @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 {
+  font-weight: $btn-xs-font-weight;
+}

data/dist/sass/patternfly/_card-view.scss

@@ -0,0 +1,105 @@
+//
+// Card View
+// --------------------------------------------------
+
+.card-pf-view {
+  border: 2px solid transparent;
+  .card-pf-heading-kebab {
+    .dropdown-kebab-pf {
+      margin-top: -3px;
+    }
+    + .progress-pf-legend {
+      p { margin-bottom: 0; }
+      .progress {
+        margin-bottom: 7px;
+        margin-top: 16px;
+      }
+    }
+  }
+  .card-pf-info {
+    margin-top: 15px;
+    strong {
+      font-size: ceil(($font-size-base + 1));
+      margin-right: 10px;
+    }
+  }
+  .card-pf-item {
+    display: inline-block;
+    font-size: $font-size-h3;
+    padding: 0 13px 0 15px;
+    &:first-child { padding-left: 0; }
+    &:last-child { padding-right: 0; }
+    + .card-pf-item { border-left: 1px solid $card-pf-border-color; }
+    .fa-check { color: $brand-success; }
+    .fa,
+    .pficon {
+      + .card-pf-item-text { margin-left: 10px; }
+    }
+  }
+  .card-pf-items { margin-top: 15px; }
+  .card-pf-title {
+    font-size: ceil(($font-size-base * 1.6666));
+    font-weight: 300;
+    margin-bottom: 0;
+    margin-top: 15px;
+    .fa,
+    .pficon {
+      font-size: ceil(($font-size-base * 1.5));
+      margin-right: 2px;
+    }
+    .col-lg-2 & { font-size: $font-size-h3; }
+  }
+  .card-pf-top-element .card-pf-icon-circle {
+    border: 2px solid $color-pf-blue-300;
+    border-radius: 50%;
+    display: block;
+    font-size: 46px;
+    height: 106px;
+    line-height: 102px;
+    margin: 0 auto;
+    text-align: center;
+    width: 106px;
+    .col-lg-2 & {
+      font-size: 23px;
+      height: 54px;
+      line-height: 50px;
+      width: 54px;
+    }
+  }
+  .card-pf-view-checkbox {
+    position: absolute;
+    top: 11px;
+    left: 15px;
+    input[type=checkbox] { display: none; }
+  }
+  &.card-pf-view-multi-select {
+    .card-pf-view-checkbox {
+      input[type=checkbox] {
+        display: block;
+        @media(min-width:$screen-sm-min) {
+          visibility: hidden;
+          &:checked { visibility: visible; }
+        }
+      }
+    }
+    &:hover .card-pf-view-checkbox input[type=checkbox] { visibility: visible; }
+  }
+  &.card-pf-view-select {
+    position: relative;
+    &:hover { @include box-shadow(0 1px 6px rgba($color-pf-black, (35/100))); }
+    &.active { border: 2px solid $card-pf-selected-border-color; }
+  }
+  &.card-pf-view-single-select { cursor: pointer; }
+  &.card-pf-view-xs {
+    .card-pf-title {
+      font-size: 16px;
+      font-weight: normal;
+      margin-bottom: 10px;
+      .fa,
+      .pficon {
+        font-size: 14px;
+        margin-right: 5px;
+      }
+    }
+  }
+}