@progressiveui/styles 10.30.0

package/scss/components/modal/_modal.scss

@@ -0,0 +1,224 @@
+//
+// 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 "mixins" as *;
+@use "../../breakpoint" as *;
+@use "../../config" as *;
+@use "../../motion" as *;
+@use "../../spacing" as *;
+@use "../../theme" as *;
+@use "../../type" as *;
+@use "../../utilities/convert" as *;
+@use "../../utilities/component-reset";
+@use "../../utilities/focus-outline" as *;
+@use "../../utilities/high-contrast-mode" as *;
+@use "../../utilities/z-index" as *;
+@use "../../utilities/layer" as *;
+
+@use "../button";
+
+/// Modal styles
+/// @access public
+/// @group modal
+
+// Modal
+$modal-border-top: $background-brand 4px solid !default;
+$modal-border-radius: 6px;
+$modal-footer-background-color: $layer-primary !default; //TODO use $layer token
+
+@mixin modal {
+  .#{$prefix}--modal {
+    @include component-reset.reset;
+    @include font-family("sans");
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: z("hidden");
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: auto;
+    content: "";
+    opacity: 0;
+    //background-color: rgba(var(--ui-07), 0.5);
+    background-color: rgba(#0b1923, 0.8); // using current token of $overlay
+    transition: opacity 200ms, z-index 0s 200ms, visibility 0s 200ms;
+    visibility: hidden;
+
+    /*&.#{$prefix}--modal--tall {
+      align-items: flex;
+    }*/
+
+    &.is-visible {
+      z-index: z("modal");
+      opacity: 1;
+      transition: opacity 200ms;
+      visibility: visible;
+    }
+  }
+
+  .#{$prefix}--modal--danger {
+    @include modal--color($support-error-main);
+  }
+
+  .#{$prefix}--modal__wrapper {
+    display: inline;
+  }
+
+  .#{$prefix}--modal-inner {
+    max-height: 100%;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+
+  .#{$prefix}--modal-container {
+    @include reset;
+    @include layer("pop-out");
+    //box-shadow: 0 20px 30px -10px $box-shadow;
+    position: relative;
+    margin: auto;
+    display: flex;
+    flex-direction: column;
+    background-color: $background-main;
+    overflow: hidden;
+    &:before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 4px;
+      content: "";
+      background: $action-default-fill-primary-default;
+    }
+    //border-top: $modal-border-top;
+    // border-radius: $modal-border-radius;
+    min-width: 100%;
+    //max-height: 100%;
+    height: 100%;
+    padding: $spacing-08 $spacing-05 0rem $spacing-05;
+
+    @include breakpoint("md") {
+      height: auto;
+      min-width: 500px;
+      max-width: 75%;
+
+      .#{$prefix}--modal--wide & {
+        max-width: 100%;
+        width: 100%;
+        min-width: 768px;
+      }
+
+      padding: $spacing-08 $spacing-09 0 $spacing-09;
+    }
+
+    @media (min-width: 1024px) {
+      max-width: 55%;
+      //max-height: 100%;
+
+      .#{$prefix}--modal--wide & {
+        max-width: 90%;
+      }
+      .#{$prefix}--modal--narrow & {
+        max-width: 38rem;
+      }
+    }
+
+    @media (min-width: 1600px) {
+      max-width: 50%;
+      //max-height: 100%;
+
+      .#{$prefix}--modal--wide & {
+        max-width: 80%;
+      }
+      .#{$prefix}--modal--narrow & {
+        max-width: 38rem;
+      }
+    }
+  }
+
+  .#{$prefix}--modal-header {
+    margin-bottom: $spacing-06;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .#{$prefix}--modal-header__label {
+    @include reset;
+    @include type-style("label");
+    color: $text-body-secondary;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: $spacing-03;
+  }
+
+  .#{$prefix}--modal-header__heading {
+    @include reset;
+    @include type-style("productive-heading-04");
+    font-weight: 600;
+    color: $text-body-default;
+  }
+
+  .#{$prefix}--modal-content {
+    //overflow-y: auto;
+    margin-bottom: $spacing-08;
+    color: $text-body-default;
+
+    > * {
+      @include reset;
+    }
+  }
+
+  .#{$prefix}--modal-footer {
+    margin-top: auto;
+    text-align: right;
+    background-color: $modal-footer-background-color;
+    margin-left: -$spacing-05; // calcRem(-24px);
+    margin-right: -$spacing-05; // calcRem(-24px);
+    padding: $spacing-05 $spacing-05;
+    border-radius: 0 0 $modal-border-radius $modal-border-radius;
+    .#{$prefix}--link + .#{$prefix}--btn {
+      margin-left: $spacing-05;
+    }
+
+    @include breakpoint("md") {
+      margin-left: calcRem(-48px);
+      margin-right: calcRem(-48px);
+      padding: $spacing-07 $spacing-09;
+    }
+  }
+
+  .#{$prefix}--modal-close {
+    position: absolute;
+    top: calcRem(16px);
+    right: calcRem(16px);
+    padding: 0;
+    overflow: hidden;
+    cursor: pointer;
+    background-color: transparent;
+    border: none;
+    padding: 0.25rem 0.25rem 0.125rem;
+
+    &:focus {
+      @include focus-outline("border");
+    }
+  }
+
+  .#{$prefix}--modal-close__icon {
+    transition: 200ms;
+    // fill: var(--ui-05); // TODO change $field-border
+    width: calcRem(12px);
+    height: calcRem(12px);
+    color: $text-body-default;
+  }
+
+  .#{$prefix}--modal--background-image {
+    background-size: cover;
+  }
+}

package/scss/components/module/_index.scss

@@ -0,0 +1,4 @@
+@forward 'module';
+@use 'module';
+
+@include module.module;

package/scss/components/module/_module.scss

@@ -0,0 +1,199 @@
+//
+// 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.
+//
+
+//-----------------------------
+// Search
+//-----------------------------
+
+@use "../../config" as *;
+@use "../../spacing" as *;
+@use "../../theme" as *;
+@use "../../motion" as *;
+@use "../../type" as *;
+@use "../../breakpoint" as *;
+@use "../../utilities/convert" as *;
+@use "../../utilities/focus-outline";
+@use "../../utilities/button-reset";
+@use "../../utilities/layer" as *;
+
+/// Module styles
+/// @access public
+/// @group module
+
+@mixin module {
+  .#{$prefix}--module__background {
+    background-color: $background-main;
+  }
+
+  .#{$prefix}--module {
+    @include reset;
+    @include font-family("sans");
+    display: flex;
+    flex-direction: column;
+    padding: calcRem(16px);
+    //flex: 1 0 auto;
+    margin: 0;
+
+    .#{$prefix}--module__inner {
+      @include layer("raised");
+      box-shadow: 0px 1px 4px rgba(#000000, 0.05),
+        0px 25px 30px -15px rgba(#000000, 0.1);
+      background-color: $background-main;
+      border-radius: 3px;
+      width: 100%;
+    }
+
+    .#{$prefix}--module__header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0.9rem 1.2rem 0.8rem;
+      border-bottom: 1px solid $border-strong;
+    }
+
+    .#{$prefix}--module__filter {
+      display: flex;
+    }
+
+    .#{$prefix}--module__footer {
+      display: flex;
+      align-items: center;
+      padding: 0.7rem 1.2rem;
+      border-top: 1px solid $border-strong;
+      @include type-style("caption-01");
+    }
+
+    .#{$prefix}--module__title {
+      @include type-style("heading-02");
+      // @include font-smoothing;
+      letter-spacing: 0;
+      font-weight: 600;
+      color: $text-body-default;
+    }
+
+    .#{$prefix}--module__content {
+      /*display: flex;
+      flex-direction: column;
+      align-items: flex-start;*/
+      flex: 3;
+      padding: 0.8rem 1.2rem;
+
+      > * {
+        &:first-child {
+          margin-top: 0;
+        }
+        &:last-child {
+          margin-top: 0;
+        }
+      }
+      /*p {
+        @include typescale('zeta');
+      }*/
+    }
+
+    // > IE11 TODO: Remove when IE11 support dropped
+    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+      //_:-ms-fullscreen,
+      //:root  {
+    }
+
+    // Edge
+    /*@supports (-ms-accelerator:true) {
+      .#{$prefix}--module__content {
+        flex: 3;
+      }
+    }*/
+
+    .#{$prefix}--module__content--centered {
+      align-items: center;
+      justify-content: center;
+      padding: 5rem;
+    }
+
+    .#{$prefix}--module__content--no-padding {
+      padding: 0;
+    }
+
+    .#{$prefix}--module__content--scrollable {
+      max-height: calcRem(300px);
+      overflow-y: scroll;
+      margin-bottom: 2rem;
+    }
+  }
+
+  .#{$prefix}--module--light {
+    .#{$prefix}--module__inner {
+      box-shadow: none;
+      border: 2px solid rgba(#000, 0.1);
+    }
+
+    &.#{$prefix}--module--with-hover {
+      cursor: pointer;
+      &:hover {
+        .#{$prefix}--module__inner {
+          border-color: $border-interactive;
+        }
+      }
+    }
+  }
+
+  .#{$prefix}--module--full-height {
+    height: 100%;
+    .#{$prefix}--module__inner {
+      height: 100%;
+    }
+  }
+
+  .#{$prefix}--module--dark {
+    .#{$prefix}--module__inner {
+      box-shadow: none;
+      background: $background-brand;
+      color: $text-inverse-default;
+    }
+
+    .#{$prefix}--module__header {
+      border-bottom-color: $border-subtle;
+    }
+
+    .#{$prefix}--module__footer {
+      border-top-color: $border-subtle;
+    }
+
+    .#{$prefix}--module__title {
+      color: $text-inverse-default;
+    }
+  }
+}
+
+.#{$prefix}--module--no-margin {
+  padding: 0;
+}
+
+// > IE11 TODO: Remove when IE11 support dropped
+_:-ms-fullscreen,
+:root {
+  .#{$prefix}--module__inner {
+    position: relative;
+  }
+
+  .#{$prefix}--module__content {
+    padding-bottom: 4rem;
+    overflow: hidden;
+  }
+
+  // Footer at bottom
+  .#{$prefix}--module__footer {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  .#{$prefix}--module__content {
+    flex: inherit;
+  }
+}

package/scss/components/multiselect/_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 'multiselect';
+@use 'multiselect';
+
+@include multiselect.multiselect;

package/scss/components/multiselect/_multiselect.scss

@@ -0,0 +1,103 @@
+//
+// 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 "../list-box";
+@use "../../config" as *;
+@use "../../motion" as *;
+@use "../../spacing" as *;
+@use "../../theme" as *;
+@use "../../utilities/convert" as *;
+@use "../../utilities/focus-outline" as *;
+
+/// Multi select styles
+/// @access public
+/// @group multi-select
+@mixin multiselect {
+  .#{$prefix}--multi-select .#{$prefix}--tag {
+    min-width: auto;
+    margin: 0 $spacing-03 0 0;
+  }
+
+  .#{$prefix}--multi-select--filterable .#{$prefix}--tag {
+    margin: 0 $spacing-03 0 $spacing-05;
+  }
+
+  .#{$prefix}--multi-select .#{$prefix}--list-box__menu {
+    min-width: auto;
+  }
+
+  .#{$prefix}--multi-select
+    .#{$prefix}--list-box__menu-item__option
+    .#{$prefix}--checkbox-wrapper {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+  }
+
+  .#{$prefix}--multi-select
+    .#{$prefix}--list-box__menu-item__option
+    .#{$prefix}--checkbox-label {
+    display: inline-block;
+    overflow: hidden;
+    width: 100%;
+    padding-left: calcRem(28px);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .#{$prefix}--multi-select
+    .#{$prefix}--list-box__menu-item__option
+    > .#{$prefix}--form-item {
+    flex-direction: row;
+    margin: 0;
+  }
+
+  .#{$prefix}--multi-select
+    .#{$prefix}--list-box__menu-item
+    .#{$prefix}--checkbox:checked
+    ~ .#{$prefix}--checkbox-label-text {
+    color: $text-body-default;
+  }
+
+  .#{$prefix}--multi-select--filterable {
+    transition: outline-color $duration-fast-01 motion(standard, productive);
+  }
+
+  .#{$prefix}--multi-select--filterable.#{$prefix}--combo-box
+    .#{$prefix}--text-input {
+    border: calcRem(2px) solid transparent;
+    background-clip: padding-box;
+    outline: none;
+  }
+
+  .#{$prefix}--multi-select--filterable--input-focused {
+    @include focus-outline("outline");
+  }
+
+  .#{$prefix}--multi-select--filterable.#{$prefix}--multi-select--selected
+    .#{$prefix}--text-input {
+    padding-left: 0;
+  }
+
+  .#{$prefix}--multi-select--filterable.#{$prefix}--list-box--disabled:hover
+    .#{$prefix}--text-input {
+    background-color: $fill-field;
+  }
+
+  .#{$prefix}--multi-select--filterable
+    .#{$prefix}--list-box__selection--multi {
+    margin: 0 0 0 $spacing-05;
+  }
+
+  .#{$prefix}--multi-select--filterable.#{$prefix}--multi-select--inline,
+  .#{$prefix}--multi-select--filterable.#{$prefix}--multi-select--inline
+    .#{$prefix}--text-input {
+    border-bottom: 0;
+    background-color: transparent;
+  }
+}

package/scss/components/notification/_index.scss

@@ -0,0 +1,21 @@
+//
+// 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 './tokens';
+/*@forward 'inline-notification';
+@forward 'toast-notification';
+
+@use 'inline-notification';
+@use 'toast-notification';
+
+@include inline-notification.inline-notification;
+@include toast-notification.toast-notification;
+*/
+@forward 'notification';
+@use 'notification';
+
+@include notification.notification;