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

data/dist/sass/patternfly/_layouts.scss

@@ -1,140 +0,0 @@
-//
-// Layouts
-// --------------------------------------------------
-.layout-pf {
-  &,
-  & body {
-    min-height: 100%;
-  }
-  &.layout-pf-fixed {
-    &.transitions .container-pf-nav-pf-vertical {
-      transition: $flyout-transition-pf;
-    }
-    body {
-      padding-top: $navbar-pf-height; // make space for the navbar
-    }
-    .navbar-pf {
-      left: 0;
-      position: fixed;
-      top:0;
-      right: 0;
-      z-index: 1030;
-    }
-    .container-pf-nav-pf-vertical {
-      margin-left: $nav-pf-vertical-width;
-      &.nav-pf-vertical-with-badges {
-        margin-left: $nav-pf-vertical-badges-width;
-      }
-      &.collapsed-nav {
-        margin-left: $nav-pf-vertical-collapsed-width;
-        &.hidden-icons-pf {
-          margin-left: 0;
-        }
-      }
-      &.hidden-nav {
-        margin-left: 0; // remove space as left nav is hidden
-      }
-      &.hide-nav-pf {
-        visibility: hidden !important;
-      }
-      &.collapsed-secondary-nav-pf, &.collapsed-tertiary-nav-pf {
-        margin-left: $nav-pf-vertical-width;
-        &.nav-pf-vertical-with-badges {
-          margin-left: $nav-pf-vertical-badges-width;
-        }
-      }
-      &.nav-pf-persistent-secondary.secondary-visible-pf {
-        @media (min-width: 1200px) {
-          margin-left: ($nav-pf-vertical-width + $nav-pf-vertical-width);
-          &.nav-pf-vertical-with-badges {
-            margin-left: ($nav-pf-vertical-badges-width + $nav-pf-vertical-badges-width);
-          }
-          &.hidden-nav {
-            margin-left: 0; // remove space as left nav is hidden
-          }
-          &.collapsed-secondary-nav-pf {
-            margin-left: $nav-pf-vertical-width;
-            &.nav-pf-vertical-with-badges {
-              margin-left: $nav-pf-vertical-badges-width;
-            }
-          }
-          &.collapsed-tertiary-nav-pf {
-            margin-left: $nav-pf-vertical-width;
-            &.nav-pf-vertical-with-badges {
-              margin-left: $nav-pf-vertical-badges-width;
-            }
-          }
-          &.collapsed-nav {
-            margin-left: ($nav-pf-vertical-collapsed-width + $nav-pf-vertical-width);
-            &.nav-pf-vertical-with-badges {
-              margin-left: ($nav-pf-vertical-collapsed-width + $nav-pf-vertical-badges-width);
-            }
-            &.collapsed-secondary-nav-pf {
-              margin-left: $nav-pf-vertical-width;
-              &.nav-pf-vertical-with-badges {
-                margin-left: $nav-pf-vertical-badges-width;
-              }
-            }
-            &.collapsed-tertiary-nav-pf {
-              margin-left: $nav-pf-vertical-width;
-              &.nav-pf-vertical-with-badges {
-                margin-left: $nav-pf-vertical-badges-width;
-              }
-            }
-            &.hidden-icons-pf {
-              margin-left: 0;
-            }
-          }
-        }
-      }
-    }
-  }
-  &.layout-pf-fixed-with-footer {
-    body {
-      padding-bottom: $footer-pf-height;
-    }
-  }
-}
-.layout-pf-alt {
-  &,
-  & body {
-    min-height: 100%;
-  }
-  &.layout-pf-alt-fixed {
-    &.layout-pf-alt-fixed-inner-scroll {
-      &,
-      & body {
-        height: 100%;
-        min-height: 0;
-      }
-      .container-pf-alt-nav-pf-vertical-alt {
-        height: 100%;
-        overflow: auto;
-        &.container-cards-pf {
-          margin-top: 0;
-          padding-top: ($grid-gutter-width/2);
-        }
-      }
-    }
-    &.transitions .container-pf-alt-nav-pf-vertical-alt {
-      transition: $flyout-transition-pf;
-    }
-    body {
-      padding-top: $navbar-pf-alt-height; // make space for the navbar
-    }
-    .container-pf-alt-nav-pf-vertical-alt {
-      margin-left: ($nav-pf-vertical-alt-width);
-      &.collapsed-nav {
-        margin-left: ($nav-pf-vertical-alt-collapsed-width); // adjust space for the collapsed left nav
-      }
-      &.hidden-nav {
-        margin-left: 0; // remove space as left nav is hidden
-      }
-    }
-  }
-  &.layout-pf-alt-fixed-with-footer {
-    body {
-      padding-bottom: $footer-pf-alt-height;
-    }
-  }
-}

data/dist/sass/patternfly/_links.scss

@@ -1,5 +0,0 @@
-a.disabled {
-  color: $color-pf-black-500;
-  cursor: $cursor-disabled;
-  text-decoration: none;
-}

data/dist/sass/patternfly/_list-pf.scss

@@ -1,178 +0,0 @@
-//
-// PatternFly List
-// --------------------------------------------------
-
-.list-pf {
-  border-bottom: 1px solid $list-pf-border-color;
-}
-
-.list-pf-item {
-  border-color: $list-pf-border-color;
-  border-left-color: $color-pf-white;
-  border-right-color: $color-pf-white;
-  border-style: solid;
-  border-width: 1px;
-  border-bottom: none;
-  &:hover {
-    background-color: $list-pf-hover-background-color;
-  }
-  &.active {
-    background-color: $list-pf-header-background-color;
-    border-color: $list-pf-active-border-color;
-    border-bottom-width: 1px;
-    border-bottom-style: solid;
-    box-shadow: 0 2px 6px rgba(3, 3, 3, .2);
-  }
-}
-
-.list-pf-expansion {
-  background-color: $color-pf-white;
-}
-
-.list-pf-container {
-  align-items: flex-start;
-  display: flex;
-  padding: $list-pf-padding;
-  .list-pf-expansion & {
-    border-top: 1px solid $list-pf-active-border-color;
-  }
-  // when wide enough, if the list is not stacked, then center items vertically
-  @media (min-width: $screen-md-min) {
-    .list-pf:not(.list-pf-stacked) & {
-      align-items: center;
-    }
-  }
-}
-
-.list-pf-chevron {
-  min-width: 1.2em; // ensures that the width does not shift when the chevron is sideways
-}
-
-.list-pf-chevron,
-.list-pf-select {
-  margin-right: 10px;
-  //add the divider line if there is a chevron or a select
-  + .list-pf-content {
-    border-left: 1px solid $color-pf-black-300;
-    padding-left: ($grid-gutter-width/2);
-  }
-  .fa {
-    font-size: 22px;
-  }
-}
-
-// add this class to manage flexed contents in the list item content
-.list-pf-content-flex {
-  align-items: flex-start;
-  display:flex;
-  flex-grow: 1;
-  flex-wrap: nowrap;
-  justify-content: flex-start;
-  min-width: 0;
-  // when wide enough, if the list is not stacked, then center items vertically
-  @media (min-width: $screen-md-min) {
-    .list-pf:not(.list-pf-stacked) & {
-      align-items: center;
-    }
-  }
-}
-
-.list-pf-left {
-  flex-grow: 0;
-  margin-left: 0;
-  margin-right: ($grid-gutter-width/2);
-}
-.list-pf-icon {
-  align-items: center;
-  display:flex;
-  justify-content: center;
-}
-.list-pf-icon-bordered {
-  border-radius: 50%;
-  border: 2px solid $list-view-accented-border;
-}
-.list-pf-icon-small {
-  font-size: 1.4em;
-  height: 30px;
-  line-height: 30px;
-  width: 30px;
-}
-
-
-.list-pf-content-wrapper {
-  align-items: center;
-  display:flex;
-  flex-grow: 1;
-  flex-wrap: wrap;
-  min-width: 0;
-  // when at larger breakpoints, don't stack the contents and add some space between the children
-  @media (min-width: $screen-md-min) {
-    flex-wrap: nowrap;
-    & > * + * {
-      margin-left: $grid-gutter-width;
-    }
-  }
-  // if the list is stacked, then align the contents to the top
-  .list-pf-stacked & {
-    align-items: flex-start;
-  }
-
-}
-
-.list-pf-main-content {
-  align-items: center;
-  display: flex;
-  flex-basis: $list-pf-main-content-width;
-  flex-grow: 1;
-  flex-shrink: 1;
-  flex-wrap: wrap;
-  min-width: 0;
-}
-
-// at larger breakpoints, if the list is not stacked, then don't wrap the main contents and add some space between them
-.list-pf:not(.list-pf-stacked) .list-pf-main-content {
-  @media (min-width: $screen-md-min) {
-      flex-wrap: nowrap;
-      width: auto;
-      & > * + * {
-        margin-left: $grid-gutter-width;
-      }
-  }
-}
-
-// Title and description are break-word wrapped; add .text-overflow-pf to truncate and ellipse instead
-.list-pf-title {
-  flex-grow: 1;
-  flex-shrink: 1;
-  flex-basis: 100%;
-  font-weight: bold;
-  min-width: 0;
-  word-wrap: break-word;
-}
-.list-pf-description {
-  flex-grow: 1;
-  flex-shrink: 1;
-  flex-basis: 100%;
-  min-width: 0;
-  word-wrap: break-word;
-}
-
-.list-pf-additional-content {
-  display: flex;
-  flex-basis: ((100% - $list-pf-main-content-width) + 1%); // this adjusts the proportions but adding up to > 100% allows for proper wrapping
-  flex-grow: 1;
-  flex-shrink: 1;
-  flex-wrap: wrap;
-  justify-content: space-between;
-}
-.list-pf-actions {
-  display: flex;
-  align-items: flex-start;
-  flex-grow: 0;
-  margin-left: $grid-gutter-width;
-  //by default, space contents apart
-  & > * + * {
-    margin-left: ($grid-gutter-width / 4);
-  }
-
-}

data/dist/sass/patternfly/_list-view-dnd.scss

@@ -1,53 +0,0 @@
-//
-// List View Drag and Drop
-// See: https://github.com/marceljuenemann/angular-drag-and-drop-lists
-// --------------------------------------------------
-
-.list-view-pf-dnd {
-  // Override dnd styles
-  .dndDragging {
-    &.drag-original {
-      display: none;
-      // Show when dragging original list items
-      .list-view-pf-dnd-original-items {
-        display: block;
-      }
-    }
-    // Show dragable list items during move operation
-    .list-view-pf-dnd-drag-items {
-      display: inline-block;
-    }
-    // Hide original list items during dnd move operation
-    .list-view-pf-dnd-original-items {
-      display: none;
-    }
-  }
-  // Override dnd placeholder element for dragging list items to
-  .dndPlaceholder {
-    background-color: $color-pf-black-200;
-    padding: 20px 0;
-  }
-  // A handle decoration shown to left of each list items row
-  .list-group-item-header {
-    margin-left: -10px;
-    &:before {
-      background-image: linear-gradient(to bottom, $color-pf-blue-400 60%, $color-pf-white 0%);
-      background-position: left;
-      background-repeat: repeat-y;
-      background-size: 2px 5px;
-      border: 4px solid $color-pf-blue-400;
-      border-color: $color-pf-blue-500;
-      content: "";
-      height: 55px;
-      left: 4px;
-      position: absolute;
-      top: 5px;
-      width: 10px;
-    }
-  }
-}
-
-// Always hide dragable list items until shown during dnd move operation
-.list-view-pf-dnd-drag-items {
-  display: none;
-}

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

@@ -1,390 +0,0 @@
-//
-// List View
-// --------------------------------------------------
-
-
-.list-view-pf {
-  .list-group-item {
-    align-items: flex-start;
-    background-clip: padding-box;
-    border-color: transparent #fff;
-    border-style: solid;
-    border-width: 1px;
-    @include clearfix(); //IE9 fallback
-    display: flex;
-    flex-wrap: wrap;
-    padding-bottom: 0;
-    padding-top: 0;
-    &.list-view-pf-expand-active {
-      background-color: $list-view-active-bg;
-      box-shadow: 0 2px 6px rgba(3, 3, 3, .2);
-      z-index: 1;
-    }
-    &.active {
-      color: $list-group-link-color;
-      background-color: $list-view-active-bg;
-      background-clip: border-box;
-      border-color: $list-view-active-border transparent transparent;
-      z-index:auto;
-    }
-    &:hover {
-      background-color: $list-view-hover-bg;
-      border-left-color: transparent;
-      border-right-color: transparent;
-    }
-    &.list-view-pf-expand-active {
-      border: solid 1px $list-view-active-border;
-      &:first-child {
-        border-top-color: $list-view-active-border;
-      }
-    }
-    &:first-child {
-      border-top: 1px solid transparent;
-    }
-    @media (min-width: $screen-md-min) {
-      align-items: center;
-    }
-  }
-  .list-group-item-heading {
-    font-size: $font-size-h3;
-    small {
-      display: block;
-      font-size: ($font-size-base * .8);
-      font-weight: 400;
-    }
-    @media (min-width: $screen-md-min) {
-      flex:     1 0 unquote("calc(25% - 20px)");
-      float: left; // IE9 fallback
-      font-size: $font-size-base;
-      margin: 0 ($grid-gutter-width/2) 0 0;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      width: unquote("calc(25% - 20px)"); // IE9 fallback
-    }
-  }
-  .list-group-item-text {
-    color: currentColor !important; // to overwrite color change when active.
-    margin-bottom: 10px;
-    @media (min-width: $screen-md-min) {
-      flex:     1 0 auto; // it covers whats left from the title
-      float: left; // IE9 fallback
-      margin: 0 $grid-gutter-width 0 0;
-      width: unquote("calc(75% - 40px)") // IE9 fallback
-    }
-  }
-  .close {
-    float: none;
-    position: absolute;
-    right: 15px;
-  }
-}
-.list-view-pf-actions {
-  float: right; // IE9 fallback
-  margin-bottom: ($grid-gutter-width/2);
-  margin-left: ($grid-gutter-width/2);
-  margin-top: ($grid-gutter-width/2);
-  order: 2;
-  button,
-  > a,
-  .dropdown-kebab-pf {
-    margin-left: ($grid-gutter-width/4);
-  }
-  .list-view-pf-top-align & {
-    align-self: flex-start;
-  }
-}
-.list-view-pf-additional-info {
-  align-items: center;
-  display: flex;
-  flex-wrap: wrap;
-  @media (min-width: $screen-md-min) {
-    flex: 1 0 auto; // it covers whats left from summary
-    float: left; // IE9 fallback
-    width: 50%; // IE9 fallback
-  }
-}
-.list-view-pf-additional-info-item {
-  align-items: center;
-  display: inline-block;
-  display: flex;
-  margin-right: ($grid-gutter-width/2);
-  max-width:100%;
-  text-align: center;
-  &.list-view-pf-additional-info-item-stacked {
-    text-align: center;
-    flex-direction: column;
-    strong {
-      font-size: $font-size-h5;
-      line-height: 1em;
-    }
-  }
-  .pficon, .fa {
-    font-size: $font-size-h3;
-    margin-right: ($grid-gutter-width/4);
-  }
-  strong {
-    font-size: $font-size-h3;
-    font-weight: 600;
-    margin-right: 5px;
-  }
-  &:last-child {
-    margin-right: 0;
-  }
-}
-.list-view-pf-additional-info-item-donut-chart { width: 60px; }
-.list-view-pf-body {
-  align-items: center;
-  display: table-cell; //IE9 fallback
-  flex:     1;
-  min-width: 0;
-  vertical-align: top; //IE9 fallback
-  width: 100%; // IE9 fallback, it extends the cell to size of the container
-  @media (min-width: $screen-md-min) {
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-  }
-}
-.list-view-pf-checkbox {
-  border-right: 1px solid $list-view-divider;
-  float: left; //IE9 fallback
-  margin-bottom: ($grid-gutter-width/2);
-  margin-right: 15px;
-  margin-top: ($grid-gutter-width/2);
-  padding: 3px ($grid-gutter-width/4) 3px 0;
-  .list-view-pf-top-align & {
-    align-self: flex-start;
-  }
-}
-.list-view-pf-description {
-  flex:     1 0 50%;
-  .list-view-pf-stacked & {
-    display: block;
-    flex: none; // Fix FF
-  }
-  @media (min-width: $screen-md-min) {
-    align-items: center;
-    display: flex;
-    float: left; //IE9 fallback
-    width: 50%; //IE9 fallback
-  }
-}
-.list-view-pf-left {
-  display: table-cell; //IE9 fallback
-  padding-right: ($grid-gutter-width/2);
-  text-align: center;
-  vertical-align: top; //IE9 fallback
-  .list-view-pf-calendar {
-    font-size: $font-size-small;
-    line-height: 1em;
-    strong {
-      display: block;
-      font-size: ($font-size-h2 * 2);
-      font-weight: 300;
-      line-height: 1em;
-    }
-  }
-  .pficon, .fa {
-    border-radius: 50%;
-    font-size: 2em;
-    // -md is out of alpha order to get correct bg on -danger
-    &.list-view-pf-icon-md {
-      background-color: $alert-info-bg;
-      height: 50px;
-      line-height: 50px;
-      width: 50px;
-    }
-    &.list-view-pf-icon-danger {
-      background-color: $alert-danger-bg;
-      color: $alert-danger-border;
-    }
-    &.list-view-pf-icon-info {
-      color: $alert-info-border;
-    }
-    &.list-view-pf-icon-lg {
-      background-color: $alert-info-bg;
-      height: 60px;
-      line-height: 60px;
-      width: 60px;
-    }
-    &.list-view-pf-icon-sm {
-      border: 2px solid $list-view-accented-border;
-      font-size: 1.4em;
-      height: 30px;
-      line-height: 30px;
-      width: 30px;
-      &:before {
-        display: block;
-        line-height: 26px;
-      }
-    }
-    &.list-view-pf-icon-success {
-      background-color: $alert-success-bg;
-      color: $alert-success-border;
-    }
-    &.list-view-pf-icon-warning {
-      background-color: $alert-warning-bg;
-      color: $alert-warning-border;
-    }
-  }
-}
-.list-view-pf-main-info {
-  align-items: flex-start;
-  display: flex;
-  flex: 1;
-  min-width: 0;
-  padding-bottom: ($grid-gutter-width/2);
-  padding-top: ($grid-gutter-width/2);
-  @media (min-width: $screen-md-min) {
-    align-items: center;
-    .list-view-pf-top-align & {
-      align-items: flex-start;
-    }
-  }
-}
-.list-view-pf-stacked {
-  .list-group-item-heading {
-    float: none; // IE9 fallback
-    font-size: $font-size-h3;
-    line-height: 1.2em;
-    margin-bottom: 5px;
-    margin-right: $grid-gutter-width;
-    width: auto; // IE9 fallback
-  }
-  .list-group-item-text {
-    float: none;
-    width: auto;
-  }
-}
-.list-view-pf-view {
-  background: $list-group-top-border;
-  border: none;
-  margin-top: 30px;
-}
-.list-group-item-header {
-  box-sizing: content-box;
-  cursor: pointer;
-  margin: 0 -15px;
-  padding: 0 15px; //filling the width of the list item
-  width: 100%;
-}
-.list-view-pf-expand {
-  cursor: pointer;
-  float: left; //IE9 fallback
-  margin-bottom: ($grid-gutter-width/2);
-  margin-right: 2px;
-  margin-top: ($grid-gutter-width/2);
-  padding: 3px 0;
-  &.active,
-  &:hover {
-    color: $link-color;
-  }
-  .list-view-pf-additional-info-item & {
-    margin: 0;
-    padding: 0;
-  }
-  .fa-angle-right {
-    cursor: pointer;
-    font-size: ($font-size-large+3);
-    margin-right: 5px;
-    margin-top: 2px;
-    width: 10px;
-  }
-}
-.list-group-item-container {
-  background: #fff;
-  border-top: solid 1px $list-view-active-border;
-  box-sizing: content-box;
-  margin: -1px -15px 0;
-  order: 3;
-  padding: 15px;
-  position: relative;
-  width: 100%;
-}
-.list-view-pf-editable {
-  &.active,
-  &.list-view-pf-create {
-    .list-view-pf-editor,
-    .list-view-pf-editor.bootstrap-select,
-    .bootstrap-switch,
-    .list-view-pf-actions .list-view-pf-save,
-    .list-view-pf-actions .list-view-pf-cancel {
-      display: initial;
-    }
-    .list-view-pf-edit,
-    .list-view-pf-value:not(.list-view-pf-readonly),
-    .dropdown-kebab-pf {
-      display: none;
-    }
-  }
-  .list-view-pf-editor,
-  .list-view-pf-editor.bootstrap-select,
-  .bootstrap-switch,
-  .list-view-pf-actions .list-view-pf-save,
-  .list-view-pf-actions .list-view-pf-cancel {
-    display: none;
-  }
-  &.active {
-    .list-view-pf-additional-info {
-      @media (min-width: $screen-sm-min) {
-        margin-top: ($grid-gutter-width/2);
-      }
-      @media (min-width: $screen-md-min) {
-        margin-top: 0;
-      }
-      .list-view-pf-additional-info-item {
-        margin-top: ($grid-gutter-width/2);
-        @media (min-width: $screen-sm-min) {
-          margin-top: 0;
-        }
-      }
-    }
-  }
-  .list-view-pf-textbox {
-    margin-right: ($grid-gutter-width/2);
-    width: 100%;
-  }
-  .list-view-pf-readonly {
-    color: $color-pf-black-500;
-  }
-  .list-view-pf-actions {
-    margin: ($grid-gutter-width/4) 0;
-    width: 100px;
-    text-align: right;
-    .list-view-pf-save,
-    .list-view-pf-cancel {
-      font-size: $font-size-h1;
-      @media (max-width: $screen-sm-min) {
-        margin-left: 0;
-      }
-    }
-  }
-  .list-view-pf-description {
-    flex: 100%;
-    @media (min-width: $screen-sm-min) {
-      flex: 100%;
-    }
-    @media (min-width: $screen-md-min) {
-      flex: 25%;
-    }
-  }
-  .list-view-pf-additional-info {
-    flex: 100%;
-    .list-view-pf-additional-info-item {
-      flex: 100%;
-    }
-    @media (min-width: $screen-sm-min) {
-      flex: 100%;
-      .list-view-pf-additional-info-item {
-        flex: 1;
-      }
-    }
-    @media (min-width: $screen-md-min) {
-      flex: 75%;
-      .list-view-pf-additional-info-item {
-        flex: 1;
-      }
-    }
-  }
-}