patternfly-sass 3.45.3 → 3.46.0

data/dist/sass/patternfly/_rcue-variables.scss

@@ -0,0 +1,57 @@
+//
+// Variables
+// --------------------------------------------------
+
+/* RCUE-specific */
+$img-bg-login:                                                      "bg-login.png" !default;
+$img-bg-login-2:                                                    "bg-login-2.png" !default;
+$login-bg-color:                                                    #1a1a1a !default;
+$login-container-bg-color:                                          transparent !default;
+$login-container-bg-color-rgba:                                     transparent !default;
+$modal-about-pf-bg-img:                                             "bg-login-2.png" !default;
+$navbar-pf-alt-border-width:                                        0 !default;
+$navbar-pf-alt-nav-item-iconic-padding:                             22px 12px !default;
+$navbar-pf-alt-navbar-brand-padding:                                18px 0 22px !default;
+$navbar-pf-alt-navbar-brand-name-breakpoint:                        355px !default;
+$navbar-pf-alt-navbar-toggle-margin:                                14px 15px !default;
+$navbar-pf-bg-color:                                                #393f45 !default;
+$navbar-pf-border-color:                                            #cc0000 !default;
+$navbar-pf-vertical-border-color:                                   #cc0000 !default;
+$navbar-pf-active-color:                                            #fff !default;
+$navbar-pf-color:                                                   #dbdada !default;
+$navbar-pf-icon-bar-bg-color:                                       #fff !default;
+$navbar-pf-navbar-header-border-color:                              #53565b !default;
+$navbar-pf-navbar-nav-active-bg-color:                              #454c53 !default;
+$navbar-pf-navbar-nav-active-active-bg-color:                       #3c434a !default;
+$navbar-pf-navbar-nav-active-active-open-bg-color:                  #424950 !default;
+$navbar-pf-navbar-navbar-brand-min-width:                           300px !default;
+$navbar-pf-navbar-navbar-brand-padding:                             7px 0 8px !default;
+$navbar-pf-navbar-navbar-persistent-bg-color:                       #f6f6f6 !default;
+$navbar-pf-navbar-navbar-persistent-border-color:                   #cecdcd !default;
+$navbar-pf-navbar-primary-active-bg-color-start:                    #72757a !default;
+$navbar-pf-navbar-primary-active-bg-color-stop:                     #64686c !default;
+$navbar-pf-navbar-primary-active-border-color:                      #949699 !default;
+$navbar-pf-navbar-primary-bg-color-start:                           #474c50 !default;
+$navbar-pf-navbar-primary-bg-color-stop:                            #383f43 !default;
+$navbar-pf-navbar-primary-hover-bg-color-start:                     #5c6165 !default;
+$navbar-pf-navbar-primary-hover-bg-color-stop:                      #4b5053 !default;
+$navbar-pf-navbar-primary-hover-border-color:                       #949699 !default;
+$navbar-pf-navbar-primary-context-active-bg-color-start:            #6b7175 !default;
+$navbar-pf-navbar-primary-context-active-bg-color-stop:             #65696d !default;
+$navbar-pf-navbar-primary-context-active-border-color:              #6e7276 !default;
+$navbar-pf-navbar-primary-context-active-border-right-color:        #777a7e !default;
+$navbar-pf-navbar-primary-context-active-border-top-color:          #767a7e !default;
+$navbar-pf-navbar-primary-context-bg-color-start:                   #585d61 !default;
+$navbar-pf-navbar-primary-context-bg-color-stop:                    #505458 !default;
+$navbar-pf-navbar-primary-context-border-color:                     #65696d !default;
+$navbar-pf-navbar-primary-context-border-top-color:                 #64696d !default;
+$navbar-pf-navbar-primary-context-hover-bg-color-start:             #62676b !default;
+$navbar-pf-navbar-primary-context-hover-bg-color-stop:              #5a5e62 !default;
+$navbar-pf-navbar-primary-context-hover-border-color:               #6e7276 !default;
+$navbar-pf-navbar-primary-context-hover-border-top-color:           #6c7276 !default;
+$navbar-pf-navbar-utility-border-color:                             #53565b !default;
+$navbar-pf-navbar-utility-color:                                    #fff !default;
+$navbar-pf-navbar-utility-hover-bg-color:                           #4a5053 !default;
+$navbar-pf-navbar-utility-hover-border-color:                       #636466 !default;
+$navbar-pf-navbar-utility-open-bg-color:                            #5b6165 !default;
+$navbar-pf-navbar-utility-open-border-color:                        #6c6e70 !default;

data/dist/sass/patternfly/_rcue.scss

@@ -0,0 +1,6 @@
+/* Red Hat Common User Experience (RCUE) */
+
+@import 'patternfly';
+
+// RCUE overrides
+@import "rcue-variables";

data/dist/sass/rcue/_about-modal.scss

@@ -0,0 +1,44 @@
+//
+// About Modal
+// --------------------------------------------------
+
+.about-modal-pf {
+  background-color: $color-pf-black-900;
+  background-image: url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$img-path}#{$modal-about-pf-bg-img}"), "#{$img-path}#{$modal-about-pf-bg-img}"));
+  background-position: right bottom;
+  background-repeat: no-repeat;
+  background-size: 216px auto;
+  @media (min-width: $screen-sm-min) {
+    background-size: auto;
+  }
+  .modal-body {
+    color: $color-pf-white;
+    padding-bottom: 16px;
+    padding-left: $grid-gutter-width;
+    padding-right: $grid-gutter-width;
+    @media (min-width: $screen-sm-min) {
+      padding-left: ($grid-gutter-width * 2);
+      padding-right: ($grid-gutter-width * 2);
+    }
+  }
+  .modal-header {
+    background-color: transparent;
+  }
+  .pficon-close {
+    color: $color-pf-white;
+  }
+}
+
+.product-versions-pf {
+  margin-bottom: 30px;
+  margin-top: 30px;
+  li {
+    strong {
+      margin-right: ($grid-gutter-width / 4);
+    }
+  }
+}
+
+.trademark-pf {
+  font-size: ceil(($font-size-base - 1));
+}

data/dist/sass/rcue/_alerts.scss

@@ -0,0 +1,44 @@
+//
+// Alerts
+// --------------------------------------------------
+
+.alert {
+  border-width: 1px;
+  padding-left: 47px;
+  padding-right: ($alert-padding + 3);
+  position: relative;
+  word-wrap: break-word;
+  .alert-link {
+    color: $link-color;
+    &:hover {
+      color: $link-hover-color;
+    }
+  }
+  > .btn.pull-right {
+    margin-top: -3px;
+  }
+  > .pficon {
+    font-size: 22px;
+    position: absolute;
+    left: 13px;
+    top: 10px;
+  }
+  .close {
+    @include opacity(.85);
+    &:hover,
+    &:focus {
+      @include opacity(1);
+    }
+  }
+  .pficon-info {
+    color: $color-pf-black-700;
+  }
+}
+
+.alert-dismissable {
+  padding-right: ($alert-padding + 17);
+  .close {
+    right: -13px;
+    top: 1px;
+  }
+}

data/dist/sass/rcue/_badges.scss

@@ -0,0 +1,11 @@
+//
+// Badges
+// --------------------------------------------------
+
+.badge {
+  margin-left: 6px;
+}
+
+.nav-pills > li > a > .badge {
+  margin-left: 6px;
+}

data/dist/sass/rcue/_blank-slate.scss

@@ -0,0 +1,35 @@
+//
+// Blank Slate
+// --------------------------------------------------
+
+.blank-slate-pf {
+  @media (min-width: $screen-sm-min) {
+    padding: ($jumbotron-padding * 2) ($jumbotron-padding * 2);
+  }
+  @media (min-width: $screen-md-min) {
+    padding: ($jumbotron-padding * 3) ($jumbotron-padding * 4);
+  }
+  background-color: $well-bg;
+  border: 1px solid $well-border;
+  border-radius: $border-radius-base;
+  margin-bottom: 20px;
+  padding: $jumbotron-padding;
+  text-align: center;
+  .blank-slate-pf-icon {
+    color: $gray-light;
+    font-size: ($font-size-h1 * 2.4);
+    line-height: ($font-size-h1 * 2.4);
+  }
+  .blank-slate-pf-main-action {
+    margin-top: $line-height-computed;
+  }
+  .blank-slate-pf-secondary-action {
+    margin-top: $line-height-computed;
+  }
+  button {
+    margin-right: 5px;
+    &:last-of-type {
+      margin-right: 0;
+    }
+  }
+}

data/dist/sass/rcue/_bootstrap-combobox.scss

@@ -0,0 +1,35 @@
+//
+// Bootstrap-Combobox
+// --------------------------------------------------
+
+.combobox-container {
+  &.combobox-selected .glyphicon-remove {
+    display: inline-block;
+  }
+  .caret {
+    margin-left: 0;
+  }
+  .combobox::-ms-clear {
+    display: none;
+  }
+  .dropdown-menu {
+    margin-top: -1px;
+    width: 100%;
+  }
+  .glyphicon-remove {
+    display: none;
+    top: auto;
+    width: 12px;
+    &:before {
+      content: "\e60b";
+      font-family: $icon-font-name-pf;
+    }
+  }
+  .input-group-addon {
+    @include button-variant($btn-default-color, $btn-default-bg, $btn-default-bg-img-start, $btn-default-bg-img-stop, $btn-default-border);
+    position: relative; // IE8
+    &:active {
+      @include box-shadow(inset 0 2px 8px rgba($color-pf-black, (20/100)));
+    }
+  }
+}

data/dist/sass/rcue/_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/rcue/_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/rcue/_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;
+          }
+        }
+      }
+    }
+  }
+}