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

data/dist/sass/patternfly/_login.scss

@@ -0,0 +1,341 @@
+//
+// Login
+// --------------------------------------------------
+
+.login-pf {
+  height: 100%;
+  background: $login-bg-color url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$img-path}#{$img-bg-login}"), "#{$img-path}#{$img-bg-login}")) repeat-x 50% 0;
+  background-size: auto;
+  @media (min-width: $screen-sm-min) {
+    background-size: 100% auto;
+  }
+  #brand {
+    position: relative;
+    top: -70px;
+    img {
+      display: block;
+      height: 18px;
+      margin: 0 auto;
+      max-width: 100%;
+      @media (min-width: $screen-sm-min) {
+        margin: 0;
+        text-align: left;
+      }
+    }
+  }
+  #badge {
+    display: block;
+    margin: 20px auto 70px;
+    position: relative;
+    text-align: center;
+    @media (min-width: $screen-sm-min) {
+      float: right;
+      margin-right: 64px;
+      margin-top: 50px;
+    }
+  }
+  body {
+    background: $login-bg-color url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$img-path}#{$img-bg-login}"), "#{$img-path}#{$img-bg-login}")) repeat-x 50% 0;
+    background-size: auto;
+    @media (min-width: $screen-sm-min) {
+      background-size: 100% auto;
+    }
+  }
+  .container {
+    background-color: $login-container-bg-color-rgba;
+    clear: right;
+    color: $color-pf-white;
+    padding-bottom: 40px;
+    padding-top: 20px;
+    width: auto;
+    @media (min-width: $screen-sm-min) {
+      bottom: 13%;
+      padding-left: 80px;
+      position: absolute;
+      width: 100%;
+    }
+    .details {
+      p:first-child {
+        border-top: 1px solid rgba($color-pf-white, (30/100));
+        padding-top: 25px;
+        margin-top: 25px;
+      }
+      @media (min-width: $screen-sm-min) {
+        p:first-child {
+          border-top: 0;
+          padding-top: 0;
+          margin-top: 0;
+        }
+        border-left: 1px solid rgba($color-pf-white, (30/100));
+        padding-left: 40px;
+      }
+      p {
+        margin-bottom: 2px;
+      }
+    }
+    .form-horizontal {
+      .control-label {
+        font-size: ($font-size-base + 1);
+        font-weight: 400;
+        text-align: left;
+      }
+      .form-group:last-child {
+        &,
+        .help-block:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+    .help-block {
+      color: $color-pf-white;
+    }
+    .login {
+      @media (min-width: $screen-sm-min) {
+        padding-right: 40px;
+      }
+    }
+    .submit {
+      text-align: right;
+    }
+  }
+}
+
+//
+// Login
+// The following styles are for the new login
+// --------------------------------------------------
+.login-pf-page {
+  padding-top: $login-pf-page-padding-top;
+
+  .login-pf-brand {
+    margin-top: $login-pf-brand-margin-top;
+    max-width:360px;
+    width: 70%;
+    @media (min-width: $screen-sm-min) {
+      margin-top: $login-pf-brand-desktop-margin-top;
+    }
+  }
+  .login-pf-page-header {
+    margin-bottom: $login-pf-page-header-margin-bottom;
+      @media (min-width: $screen-sm-min) {
+        margin-bottom: $login-pf-page-header-desktop-margin-bottom;
+      }
+    text-align: center;
+    p {
+      color: $color-pf-white;
+      font-size: $font-size-large;
+      margin-left: auto;
+      margin-right: auto;
+      margin-top: $login-pf-page-header-paragraph-margin-top;
+    }
+  }
+  .card-pf {
+    padding: $login-pf-card-pf-padding;
+    margin-bottom: 0;
+    @media (min-width: $screen-sm-min) {
+      padding: $login-pf-card-pf-desktop-padding;
+    }
+    p {
+      color: $color-pf-black-600;
+    }
+  }
+  .form-control {
+    height: ceil(($input-height-base + 10px ));
+  }
+  .checkbox-label {
+    color: $color-pf-black-600;
+    font-weight: 300;
+    margin-bottom: $login-pf-checkbox-label-margin-bottom;
+    @media (min-width: $screen-sm-min) {
+      margin: 0;
+    }
+  }
+  .btn-primary {
+    margin-top: $login-pf-btn-primary-margin-top;
+  }
+  .login-pf-header {
+    margin-bottom: $login-pf-header-margin-bottom;
+    @media (min-width: $screen-sm-min) {
+      margin-bottom:$login-pf-header-desktop-margin-bottom;
+    }
+    display:flex;
+    flex-direction: column;
+    h1 {
+      text-align: center;
+    }
+    h1 {
+      font-size: $font-size-h3;
+      @media (min-width: $screen-sm-min) {
+        font-size: $font-size-h1;
+      }
+    }
+    //this is ugly but neccessary to get the desired style :(
+    .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
+      width: auto;
+      align-self: flex-end;
+      .dropdown-toggle {
+        color: $color-pf-black-700;
+        background: none;
+        padding:0 $login-pf-dropdown-toggle-padding-right 0 0;
+        font-weight: 300;
+        &:not(:focus) {
+          box-shadow: none;
+          border: 1px solid transparent;
+        }
+          .caret {
+            right: 0;
+          }
+      }
+    }
+  }
+
+  .login-pf-signup {
+    margin: $login-pf-signup-margin-top 0 0;
+    font-size: ceil(($font-size-base * 1.25));
+    text-align: center;
+    a {
+      margin-left: $login-pf-signup-a-margin-left;
+    }
+  }
+  .login-pf-settings {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+  }
+  .login-pf-page-footer {
+    display: flex;
+    justify-content: center;
+    flex-wrap:wrap;
+    padding-bottom: $login-pf-page-footer-padding-bottom-mobile;
+      @media (min-width: $screen-sm-min) {
+        padding-bottom: $login-pf-page-footer-padding-bottom-desktop;
+      }
+    &-links {
+      display: flex;
+      margin: $login-pf-page-footer-links-margin-top 0 0 0;
+        li:not(:last-of-type) {
+          position: relative;
+          margin: 0 $login-pf-page-footer-links-li-margin-right 0 0;
+            &:after {
+              content:".";
+              color: $color-pf-white;
+              position: absolute;
+              top: 0px;
+              right: -10px;
+            }
+        }
+    }
+    &-link {
+      color: $color-pf-white;
+      font-size: $font-size-large;
+    }
+    &-sso-services {
+      flex: 1 0 100%;
+      margin-top: $login-pf-page-footer-sso-margin-top;
+      text-align: center;
+      color: $color-pf-white;
+      &-logos {
+        display: flex;
+        flex-wrap: wrap;
+        padding: 0;
+        margin: 0;
+        list-style: none;
+        justify-content: center;
+          li {
+            margin: 0 $login-pf-page-footer-sso-logos-li-margin $login-pf-page-footer-sso-logos-li-margin;
+          }
+      }
+    }
+  }//login-pf-footer
+
+
+  // The following styles are for the login page with different account options
+  // --------------------------------------------------------------------------
+
+  &.login-pf-page-accounts {
+    margin-left: $login-pf-page-accounts-margin;
+    margin-right: $login-pf-page-accounts-margin;
+  }
+  .login-pf-accounts {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    .login-pf-header, .login-pf-signup {
+      flex-basis: 100%;
+    }
+    max-width: $login-pf-card-pf-max-width;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  .login-pf-social-section {
+    flex-basis: 100%;
+    padding:0;
+    @media (min-width: $screen-sm-min) {
+    flex:0 1 50%;
+    max-width:50%;// this is for IE10/11 that doesn't consider padding with box-sizing on flex-children.
+    }
+    @media (min-width: $screen-sm-min) {
+      &:first-of-type {
+        padding-right: $login-pf-accounts-section-heading-desktop-padding-right;
+      }
+      &:last-of-type {
+        padding-left: ceil(($login-pf-accounts-section-heading-desktop-padding-left - 1px));
+        border-left: 1px solid $color-pf-black-300;
+      }
+    }
+  }//social-section
+  .login-pf-social {
+    margin: $login-pf-social-margin;
+    @media (min-width: $screen-sm-min) {
+      margin: 0;
+      &-double-col {
+        flex-wrap: wrap;
+        display: flex;
+        justify-content: space-between;
+        .login-pf-social-link {
+          flex-basis: 48%;
+        }
+      }
+    }
+
+    &:not(.login-pf-social-all) {
+      .login-pf-social-link-more {
+        display: none;
+      }
+    }
+
+    &-link {
+        margin-bottom: $login-pf-accounts-link-margin-bottom;
+      a {
+        display: block;
+        padding: $login-pf-accounts-link-a-padding 0;
+        font-size: $font-size-large;
+        background: $color-pf-black-150;
+        text-align: center;
+        color: $color-pf-black-600;
+          img {
+            margin: 0 $login-pf-accounts-link-img-margin-right 0 0;
+            width: 20px;
+            height: 20px;
+          }
+          &:hover {
+            text-decoration: none;
+            background: $color-pf-black-200;
+          }
+      }
+    }
+    &-toggle {
+      float: right;
+      padding: 0;
+      .caret {
+        margin-left: $login-pf-accounts-more-caret-margin-left;
+      }
+      &-active {
+        .caret {
+          transform: rotate(-180deg);
+        }
+      }
+    }
+  }
+
+}//login-pf-page

data/dist/sass/patternfly/_mixins.scss

@@ -0,0 +1,81 @@
+//
+// Patternfly Mixins
+// --------------------------------------------------
+// PatternFly-specific mixins
+
+// Patternfly button variants.
+@mixin button-variant($color, $background, $background-image-start, $background-image-stop, $border){
+  background-color: $background;
+  @include gradient-vertical($background-image-start, $background-image-stop);
+  border-color: $border;
+  color: $color;
+
+  &:hover,
+  &:focus,
+  &:active,
+  &.active,
+  .open .dropdown-toggle#{&} {
+    background-color: $background;
+    background-image: none;
+    border-color: $border;
+    color: $color;
+  }
+  &:active,
+  &.active,
+  .open .dropdown-toggle#{&} {
+    background-image: none;
+    &:hover,
+    &:focus,
+    &.focus {
+      background-color: darken($background, 5%);
+          border-color: darken($border, 7%);
+    }
+  }
+  &.disabled,
+  &[disabled],
+  fieldset[disabled] & {
+    &,
+    &:hover,
+    &:focus,
+    &:active,
+    &.active {
+      background-color: $background;
+      border-color: $border;
+    }
+  }
+}
+
+// SASS CONVERSION FIX.
+// Allows inclusion of sr-only rules in nested media queries where @extends .sr-only
+// will not work.
+@mixin sr-only-pf(){
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+@mixin tab-indicator($background: $gray-light-pf, $left: 15px, $right: 15px){
+  &:before {
+    background: $background;
+    bottom: -1px;
+    content: "";
+    display: block;
+    height: 2px;
+    left: $left;
+    position: absolute;
+    right: $right;
+  }
+}
+
+// Ellipse overflow text
+.text-overflow-pf {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-wrap: normal;
+}

data/dist/sass/patternfly/_modals.scss

@@ -0,0 +1,49 @@
+//
+// Modals
+// --------------------------------------------------
+
+// Modal header
+// Top section of the modal w/ title and dismiss
+.modal-header {
+  background-color: $color-pf-black-150;
+  border-bottom: none;
+  padding: $modal-title-padding-vertical $modal-title-padding-horizontal;
+}
+// Close icon
+.modal-header .close {
+  margin-top: 2px;
+}
+
+// Title text within header
+.modal-title {
+  font-size: 13px;
+  font-weight: 700;
+}
+
+// Footer (for actions)
+.modal-footer {
+  border-top: none;
+  margin-top: 15px;
+  padding: ($modal-inner-padding - 1) $modal-inner-padding $modal-inner-padding;
+  > .btn {
+    padding-left: 10px;
+    padding-right: 10px;
+    > .fa-angle-left {
+      margin-right: 5px;
+    }
+    > .fa-angle-right {
+      margin-left: 5px;
+    }
+  }
+}
+
+// message-dialog pattern
+.message-dialog-pf .modal-body {
+  display: flex;
+
+  .fa,
+  .pficon {
+    font-size: 30px;
+    margin-right: 15px;
+  }
+}

data/dist/sass/patternfly/_nav-vertical-alt.scss

@@ -0,0 +1,168 @@
+//
+// Nav Vertical Alt
+// --------------------------------------------------
+
+.layout-pf-alt-fixed.transitions .nav-pf-vertical-alt {
+  transition: $flyout-transition-pf;
+
+  &.collapsed .list-group-item .list-group-item-value {
+    transition: opacity 0ms 100ms, opacity 100ms linear;
+  }
+
+  .list-group-item {
+    .badge {
+      transition: $flyout-transition-pf;
+    }
+
+    .list-group-item-value {
+      transition: opacity 500ms ease-out;
+      transition-delay: 150ms;
+    }
+  }
+}
+
+.nav-pf-vertical-alt {
+  background: $nav-pf-vertical-alt-bg-color;
+
+  .ie9.layout-pf-alt-fixed & {
+    box-sizing: content-box; // IE9 incorrectly sizes the width if using padding-box
+  }
+
+  .layout-pf-alt-fixed & {
+    border-right: 1px solid $nav-pf-vertical-alt-border-color;
+    bottom: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    left: 0;
+    position: fixed;
+    top: $navbar-pf-alt-height; // move out of way of navbar-pf-alt
+    width: $nav-pf-vertical-alt-width;
+    z-index: $zindex-navbar-fixed;
+
+    &.collapsed {
+      width: $nav-pf-vertical-alt-collapsed-width !important;
+
+      .list-group-item {
+        .badge {
+          padding: 2px 3px;
+          right: 21px;
+          top: 36px;
+        }
+
+        .list-group-item-value {
+          opacity: 0;
+        }
+      }
+    }
+
+    &.hidden {
+      display: none;
+
+      &.show-mobile-nav {
+        box-shadow: 0 0 3px rgba($color-pf-black, (15/100));
+        display: block !important;
+      }
+    }
+  }
+
+  .layout-pf-alt-fixed-with-footer & {
+    bottom: $footer-pf-alt-height;
+  }
+
+  .list-group {
+    border-top: 0;
+    margin-bottom: 0;
+  }
+
+  .list-group-item {
+    padding: 0;
+
+    a {
+      color: $gray-dark;
+      display: block;
+      font-size: ($font-size-base + 2);
+      height: $nav-pf-vertical-alt-link-height;
+      padding: $nav-pf-vertical-alt-link-padding;
+      position: relative;
+      white-space: nowrap;
+
+      &:focus {
+        color: $gray-dark;
+        text-decoration: none;
+      }
+
+      &:hover {
+        color: $nav-pf-vertical-alt-active-color;
+        text-decoration: none;
+      }
+    }
+
+    &.active {
+      background-color: $nav-pf-vertical-alt-bg-color;
+      border-color: $list-group-border;
+
+      &:before {
+        background: $nav-pf-vertical-alt-active-color;
+        content: " ";
+        display: block;
+        height: 100%;
+        left: 0;
+        position: absolute;
+        top: 0;
+        width: 5px;
+      }
+
+      a {
+        color: $nav-pf-vertical-alt-active-color;
+      }
+    }
+
+    .badge {
+      background: $gray-dark;
+      border: 1px solid $nav-pf-vertical-alt-bg-color;
+      border-radius: 3px;
+      color: $nav-pf-vertical-alt-badge-color;
+      font-weight: 700;
+      font-size: ($font-size-base - 3);
+      padding: 5px;
+      position: absolute;
+      right: 15px;
+      text-align: center;
+      top: 21px;
+
+      &.notifications {
+        background: $notification-badge-color;
+      }
+    }
+
+    .fa,
+    .glyphicon,
+    .pficon {
+      float: left;
+      font-size: 18px;
+      line-height: 30px;
+      margin-right: 10px;
+      text-align: center;
+      width: 18px;
+    }
+
+    .list-group-item-value {
+      display: inline-block;
+      line-height: 30px;
+      opacity: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      width: 140px;
+    }
+
+  }
+
+  .list-group-item-separator {
+    border-top-width: 5px;
+  }
+
+  .sidebar-pf & {
+    margin-left: (-($grid-gutter-width / 2));
+    margin-right: (-($grid-gutter-width / 2));
+  }
+}