@progressiveui/styles 10.30.0

package/scss/components/inline-loading/_inline-loading.scss

@@ -0,0 +1,159 @@
+//
+// Copyright IBM Corp. 2016, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use "./keyframes";
+@use "../../config" as *;
+@use "../../spacing" as *;
+@use "../../theme" as *;
+@use "../../type" as *;
+@use "../../utilities/convert" as *;
+
+/// inline-loading style
+/// @access private
+/// @group inline-loading
+
+/// Inline loading styles
+/// @access public
+/// @group inline-loading
+@mixin inline-loading {
+  .#{$prefix}--inline-loading {
+    display: flex;
+    //width: 100%;
+    align-items: center;
+  }
+
+  .#{$prefix}--inline-loading__text {
+    @include type-style("body-short");
+  }
+
+  .#{$prefix}--inline-loading__animation {
+    position: relative;
+    width: 2rem;
+    height: 2rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .#{$prefix}--inline-loading__checkmark-container {
+    width: 0.75rem;
+    position: absolute;
+    top: 0.75rem;
+
+    &[hidden] {
+      display: none;
+    }
+  }
+
+  .#{$prefix}--inline-loading__checkmark {
+    fill: none;
+    stroke: $action-default-fill-primary-default;
+    transform-origin: 50% 50%;
+    stroke-width: 2.1;
+    stroke-dasharray: 12;
+    stroke-dashoffset: 12;
+    animation-name: stroke;
+    animation-duration: 0.25s;
+    animation-fill-mode: forwards;
+  }
+
+  .#{$prefix}--loading--small .#{$prefix}--inline-loading__svg {
+    stroke: $action-default-fill-primary-default;
+  }
+  /* If IE11 Don't show check animation */
+  @media screen and (-ms-high-contrast: active),
+    screen and (-ms-high-contrast: none) {
+    .#{$prefix}--inline-loading__checkmark-container {
+      top: 1px;
+      right: 0.5rem;
+    }
+
+    .#{$prefix}--inline-loading__checkmark {
+      animation: none;
+      stroke-dashoffset: 0;
+      stroke-dasharray: 0;
+    }
+  }
+}
+
+@mixin inline-loading--x {
+  .#{$prefix}--inline-loading {
+    display: flex;
+    width: 100%;
+    align-items: center;
+
+    .#{$prefix}--loading__svg circle {
+      stroke-width: 10;
+    }
+
+    .#{$prefix}--loading__stroke {
+      stroke-dashoffset: 75;
+    }
+  }
+
+  .#{$prefix}--inline-loading__text {
+    @include type-style("body-short");
+    color: $text-body-secondary;
+  }
+
+  .#{$prefix}--inline-loading__animation {
+    position: relative;
+    width: 2rem;
+    height: 2rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .#{$prefix}--inline-loading__checkmark-container {
+    width: 0.75rem;
+    position: absolute;
+    top: 0.75rem;
+
+    &[hidden] {
+      display: none;
+    }
+  }
+
+  .#{$prefix}--inline-loading__checkmark {
+    fill: none;
+    stroke: $action-default-fill-primary-default;
+    transform-origin: 50% 50%;
+    stroke-width: 2.1;
+    stroke-dasharray: 12;
+    stroke-dashoffset: 12;
+    animation-name: stroke;
+    animation-duration: 0.25s;
+    animation-fill-mode: forwards;
+  }
+
+  .#{$prefix}--loading--small .#{$prefix}--inline-loading__svg {
+    stroke: $action-default-fill-primary-default;
+  }
+  /* If IE11 Don't show check animation */
+  @media screen and (-ms-high-contrast: active),
+    screen and (-ms-high-contrast: none) {
+    .#{$prefix}--inline-loading__checkmark-container {
+      top: 1px;
+      right: 0.5rem;
+    }
+
+    .#{$prefix}--inline-loading__checkmark {
+      animation: none;
+      stroke-dashoffset: 0;
+      stroke-dasharray: 0;
+    }
+  }
+}
+
+// @include exports('inline-loading') {
+//   @if feature-flag-enabled('components-x') {
+//     @include inline-loading--x;
+//   } @else {
+//     @include inline-loading;
+//   }
+// }

package/scss/components/inline-loading/_keyframes.scss

@@ -0,0 +1,12 @@
+//
+// Copyright IBM Corp. 2016, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@keyframes stroke {
+  100% {
+    stroke-dashoffset: 0;
+  }
+}

package/scss/components/input/_index.scss

@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward 'input';
+@use 'input';
+
+@include input.input;

package/scss/components/input/_input.scss

@@ -0,0 +1,87 @@
+//
+// Copyright IBM Corp. 2016, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use "../../config" as *;
+@use "../../spacing" as *;
+@use "../../theme" as *;
+@use "../../type" as *;
+@use "vars" as *;
+@use "../../breakpoint" as *;
+@use "../../utilities/convert" as *;
+@use "../../utilities/placeholder-colors" as *;
+@use "../../utilities/read-only" as *;
+@use "../../utilities/focus-outline" as *;
+@use "../../utilities/skeleton" as *;
+@use "../form";
+
+$input-border: 1px solid var(--neutral-100__color); // TODO
+
+@mixin input {
+  .#{$prefix}--input-wrapper {
+    display: flex;
+    order: 3;
+    width: 100%;
+  }
+  /* .#{$prefix}--input {
+    @include reset;
+    @include font-family('sans');
+    @include type-style('input');
+    display: block;
+    width: 100%;
+    height: $input-height;
+    min-width: 7rem;
+    padding: 0 $spacing-03;
+    color: $text-body-default;
+    appearance: none;
+    background-color: $fill-field;
+    order: 2;
+    //font-size: $typography-body-copy-16px-regular-font-size;
+    border: $input-border;
+    border-radius: $input-border-radius;
+    &::-webkit-input-placeholder {
+      @include placeholder-colors;
+    }
+
+    &:focus {
+      @include focus-outline('border');
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    &:disabled:hover {
+      border: $input-border;
+    }
+
+    &:read-only {
+      @include read-only('border');
+    }
+  }*/
+  .#{$prefix}--input-addon-before,
+  .#{$prefix}--input-addon-after {
+    height: $input-height;
+    line-height: $input-height;
+    padding: 0 $spacing-03;
+    background-color: $layer-primary;
+    //border: $input-border;
+    order: 2;
+  }
+
+  .#{$prefix}--input-addon-after {
+    border-left: 0;
+    margin-left: -2px;
+  }
+
+  .#{$prefix}--input-addon-before {
+    padding: 0 $spacing-03;
+    background-color: $border-strong;
+    border-right: 0;
+    order: 1;
+  }
+}

package/scss/components/input/_vars.scss

@@ -0,0 +1,31 @@
+@use "../../theme" as *;
+
+/// @type Value
+/// @access public
+/// @group input
+$input-label-weight: 600 !default;
+
+/// @type Value
+/// @access public
+/// @group input
+$input-border-radius: 0px !default;
+
+/// @type Value
+/// @access public
+/// @group input
+$input-height: 40px !default;
+
+/// @type Value
+/// @access public
+/// @group input
+$page-padding-mobile: 1em;
+
+/// @type Value
+/// @access public
+/// @group input
+$page-padding: 1em;
+
+/// @type Value
+/// @access public
+/// @group input
+$input-border: 1px solid var(--neutral-100__color);

package/scss/components/item/_index.scss

@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward 'item';
+@use 'item';
+
+@include item.item;

package/scss/components/item/_item.scss

@@ -0,0 +1,227 @@
+//-----------------------------
+// List
+//-----------------------------
+
+@use "../../config" as *;
+@use "../../spacing" as *;
+@use "../../theme" as *;
+@use "../../type" as *;
+@use "../../breakpoint" as *;
+@use "../../utilities/convert" as *;
+
+/// List styles
+/// @access public
+/// @group item
+@mixin item {
+  .#{$prefix}--item {
+    padding: $spacing-06;
+    margin: 0;
+    text-decoration: none;
+    display: grid;
+    //grid-template-columns: max-content 2fr auto min-content;
+    grid-template-columns: max-content 2fr minmax(0, min-content) min-content;
+    grid-template-rows: min-content min-content min-content;
+    gap: 0px 0px;
+    grid-template-areas:
+      "photo title additional unread"
+      "photo text hint unread"
+      "photo subcontent hint unread";
+    color: $text-body-default;
+
+    &--section {
+      padding: $spacing-08 0;
+      text-align: left;
+      flex-direction: row;
+      justify-content: space-between;
+      h2 {
+        @include type-style("heading-02");
+      }
+      p {
+        opacity: 0.6;
+        @include type-style("caption-01");
+      }
+    }
+    &--large {
+      min-height: 17rem;
+      padding: 2rem 0;
+      height: 100%;
+      width: 100%;
+      .#{$prefix}--item__text-wrapper {
+        flex-direction: column;
+      }
+      .#{$prefix}--item__image {
+        width: 9em;
+        margin-bottom: 1em;
+      }
+      .#{$prefix}--item__title-wrapper {
+        justify-content: center;
+      }
+    }
+
+    &--sidebar {
+      cursor: pointer;
+      border-bottom: 1px solid $border-subtle;
+      &.#{$prefix}--item--active {
+        background: $layer-primary;
+      }
+    }
+    &--sidebar {
+      cursor: pointer;
+      border-bottom: 1px solid $border-subtle;
+      &.#{$prefix}--item--active {
+        background: $layer-primary;
+      }
+    }
+    &--repeater {
+      cursor: pointer;
+      background: $layer-primary;
+      margin-bottom: 0.3em;
+      &.#{$prefix}--item--active {
+        background: $layer-active;
+      }
+    }
+    &--button {
+      padding: 1em;
+      &:hover {
+        background: $layer-primary;
+      }
+    }
+    &--horizontal {
+      padding: 1em;
+      width: 100%;
+      flex-direction: row;
+
+      text-align: left;
+
+      > div {
+        margin-top: 0rem;
+      }
+
+      .#{$prefix}--item__title-wrapper {
+        justify-content: space-between;
+      }
+      .#{$prefix}--item__image {
+        max-width: 5rem;
+        margin-right: 0.8em;
+      }
+
+      p {
+        color: $text-placeholder;
+      }
+      .#{$prefix}--item__button {
+        .wfp--btn {
+          margin: $spacing-02;
+        }
+      }
+    }
+    .#{$prefix}--item__content {
+      flex: 1;
+    }
+    .#{$prefix}--item__title-wrapper {
+      margin-bottom: 0;
+      font-size: 1em;
+      line-break: anywhere;
+      display: flex;
+      grid-area: title;
+      //justify-content: center;
+
+      align-items: center;
+    }
+    .#{$prefix}--item__additional {
+      font-size: 0.9em;
+      color: $text-body-secondary;
+      margin-left: 1em;
+      grid-area: additional;
+      text-align: right;
+    }
+    .#{$prefix}--item__additional-icon {
+      font-weight: normal;
+      height: 0.9em;
+      width: auto;
+      margin-left: 0.3em;
+      position: relative;
+      top: 0.3em;
+      path {
+        fill: $text-body-secondary;
+      }
+    }
+    .#{$prefix}--item__title {
+      font-size: 1em;
+    }
+    .#{$prefix}--item__hint {
+      font-size: 1em;
+      grid-area: hint;
+      justify-self: flex-end;
+      align-self: flex-end;
+    }
+    .#{$prefix}--item__right {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+      text-align: right;
+      margin-left: 1em;
+    }
+    .#{$prefix}--item__text-wrapper {
+      display: flex;
+      justify-content: space-between;
+      align-items: stretch;
+    }
+    .#{$prefix}--item__text-wrapper__inner {
+      flex: 1;
+    }
+    .#{$prefix}--item__text {
+      grid-area: text;
+      font-size: 0.85em;
+      line-height: 1.5;
+    }
+    .#{$prefix}--item__sub-content {
+      color: $text-body-secondary;
+      grid-area: subcontent;
+      //margin-top: $spacing-3xs;
+      line-height: 1.3;
+      font-size: 0.85em;
+    }
+    &--unread {
+      background-color: $layer-primary;
+      position: relative;
+    }
+  }
+
+  .#{$prefix}--item__unread {
+    width: 1em;
+    height: 1em;
+    grid-area: unread;
+    align-self: center;
+    background: $action-default-fill-primary-default;
+    border-radius: 1em;
+  }
+
+  .#{$prefix}--item__image {
+    grid-area: photo;
+    align-self: center;
+    svg,
+    .svg-inline--fa,
+    img,
+    video {
+      margin: 0;
+      display: block;
+      width: 100%;
+      height: auto;
+    }
+    .#{$prefix}--item--large & {
+      width: 6rem;
+      /*img {
+        width: 35rem;
+        max-width: 100%;
+        max-height: 15rem;
+        height: auto;
+      }
+      svg,
+      .svg-inline--fa {
+        width: 15rem;
+        height: 15rem;
+      }*/
+      margin-bottom: $spacing-08;
+    }
+  }
+}

package/scss/components/link/_index.scss

@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward 'link';
+@use 'link';
+
+@include link.link;

package/scss/components/link/_link.scss

@@ -0,0 +1,109 @@
+//
+// Copyright IBM Corp. 2016, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use "../../config" as *;
+@use "../../motion" as *;
+@use "../../theme" as *;
+@use "../../type" as *;
+@use "../../utilities/focus-outline" as *;
+@use "../../utilities/convert" as *;
+@use "../../utilities/placeholder-colors" as *;
+
+/// Link styles
+/// @access public
+/// @group link
+@mixin link {
+  .#{$prefix}--link {
+    //@include reset;
+    @include font-family("sans");
+    //@include font-smoothing;
+    cursor: pointer;
+    color: $action-default-link-default;
+    text-decoration: none;
+    transition: $transition--base;
+
+    &:hover,
+    &.#{$prefix}--link--hover {
+      text-decoration: underline;
+      color: $action-default-link-hover;
+    }
+    &:visited {
+      color: $action-default-link-default;
+    }
+    &:active {
+      color: $action-default-link-active;
+    }
+
+    &:active,
+    &:hover,
+    &:focus,
+    &.#{$prefix}--link--active {
+      color: $action-default-link-hover;
+    }
+
+    &:focus,
+    &.#{$prefix}--link--focus {
+      @include focus-outline("border-small");
+    }
+
+    &:disabled,
+    &[aria-disabled="true"] {
+      //opacity: 0.5;
+      color: $action-default-link-disable;
+      pointer-events: none;
+    }
+  }
+  .#{$prefix}--link--inline {
+    text-decoration: underline;
+  }
+  .#{$prefix}--link--icon {
+    display: inline-flex;
+  }
+  .#{$prefix}--link__icon {
+    margin-left: var(--spacing-50);
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .#{$prefix}--link--solid {
+    //@include reset;
+    @include font-family("sans");
+    //@include font-smoothing;
+    cursor: pointer;
+    color: $action-solid-link-default;
+    text-decoration: none;
+    transition: $transition--base;
+
+    &:hover,
+    &.#{$prefix}--link--solid--hover {
+      text-decoration: underline;
+      color: $action-solid-link-hover;
+    }
+    &:visited {
+      color: $action-solid-link-active;
+    }
+
+    &:active,
+    &:hover,
+    &:focus,
+    &.#{$prefix}--link--solid--active {
+      color: $action-solid-link-active;
+    }
+
+    &:focus,
+    &.#{$prefix}--link--solid--focus {
+      @include focus-outline("border-small");
+    }
+
+    &[aria-disabled="true"] {
+      //opacity: 0.5;
+      color: $action-solid-link-disable;
+      pointer-events: none;
+      cursor: not-allowed;
+    }
+  }
+}

package/scss/components/list/_index.scss

@@ -0,0 +1,4 @@
+@forward "list";
+@use "list";
+
+@include list.list;