@progressiveui/styles 10.30.0

package/scss/components/footer/_footer_external.scss

@@ -0,0 +1,153 @@
+@use "../../config" as *;
+@use "../../spacing" as *;
+@use "../../theme" as *;
+@use "../../type" as *;
+@use "../../breakpoint" as *;
+
+@mixin footer_external {
+  .#{$prefix}--footer-ext {
+    background-color: #1a4262; // TODO: Use the token $brand-dark
+    color: $text-inverse-default;
+    padding: $spacing-07 $spacing-03;
+  }
+
+  .#{$prefix}--footer-ext__content {
+    display: grid;
+    gap: $spacing-07;
+    grid-template-columns: 2fr 3fr;
+    padding-bottom: $spacing-05;
+
+    @media (max-width: 860px) {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .#{$prefix}--footer-ext__branding {
+    align-items: center;
+    display: flex;
+  }
+
+  .#{$prefix}--footer-ext__product-name {
+    @include type-style("expressive-heading-03");
+
+    font-weight: 700;
+    margin-left: $spacing-07;
+    text-transform: uppercase;
+  }
+
+  .#{$prefix}--footer-ext__address {
+    @include type-style("body-short");
+
+    margin-top: $spacing-05;
+  }
+
+  .#{$prefix}--footer-ext__social-wrapper {
+    @include type-style("body-short");
+
+    margin-top: $spacing-06;
+  }
+
+  .#{$prefix}--footer-ext__logo {
+    fill: $text-inverse-default;
+    font-size: 4em;
+  }
+
+  .#{$prefix}--footer-ext__social-icons-list {
+    align-items: center;
+    display: flex;
+    gap: $spacing-04;
+    margin-top: $spacing-03;
+  }
+
+  .#{$prefix}--footer-ext__social-icon {
+    & a {
+      cursor: pointer;
+    }
+
+    // [1] Remove a small gap at the bottom of the svg that extends the <a> height
+    & svg {
+      fill: $text-inverse-default;
+      vertical-align: bottom; // [1]
+    }
+  }
+
+  .#{$prefix}--footer-ext__nav-wrapper {
+    display: flex;
+
+    @include breakpoint-down(md) {
+      flex-direction: column;
+    }
+  }
+
+  /* Block LinksColumn */
+  // Give each column equal width
+  .#{$prefix}--links-column {
+    flex: 1;
+
+    // Apply space between any column
+    & + .#{$prefix}--links-column {
+      margin-left: $spacing-07;
+
+      @include breakpoint-down(md) {
+        margin-left: 0;
+        margin-top: $spacing-07;
+      }
+    }
+  }
+
+  // [1] TODO: Create a token for the all caps title.
+  //     It's used for links titles on the Footer and for bookmarks on the Landing page.
+  .#{$prefix}--links-column__title {
+    color: #36b5c5; // TODO: Use the token
+    font-size: 1rem; // [1]
+    font-weight: 700; // [1]
+    letter-spacing: 0.05rem; // [1]
+    margin-bottom: $spacing-05;
+    text-transform: uppercase; // [1]
+  }
+
+  .#{$prefix}--links-column-link {
+    font-weight: 600;
+
+    & + .#{$prefix}--links-column-link {
+      margin-top: $spacing-04;
+    }
+  }
+  /* End block LinksColumn */
+
+  .#{$prefix}--footer-ext__legal {
+    @include type-style("body-short");
+
+    border-top: 1px solid rgba(255, 255, 255, 0.3); // TODO: use token
+    display: grid;
+    gap: $spacing-03;
+    grid-template-columns: 1fr max-content;
+    padding-top: $spacing-05;
+
+    @include breakpoint-down(md) {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .#{$prefix}--footer-ext__legal-links {
+    gap: $spacing-07;
+    display: flex;
+  }
+
+  .#{$prefix}--footer-ext__legal-link,
+  .#{$prefix}--links-column-link {
+    & > a {
+      color: $text-inverse-default;
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+        color: $text-inverse-default;
+      }
+      &:visited,
+      &:active {
+        color: $text-inverse-default;
+      }
+    }
+  }
+}

package/scss/components/footer/_index.scss

@@ -0,0 +1,14 @@
+//
+// 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 'footer';
+@forward 'footer_external';
+@use 'footer';
+@use 'footer_external';
+
+@include footer.footer;
+@include footer_external.footer_external;

package/scss/components/form/_form.scss

@@ -0,0 +1,146 @@
+@use "../../config" as *;
+@use "../../spacing" as *;
+@use "../../theme" as *;
+@use "../../feature-flags" as *;
+@use "../../type" as *;
+@use "../../utilities/convert" as *;
+@use "../../utilities/focus-outline" as *;
+@use "../../utilities/skeleton" as *;
+
+/// @type Number
+/// @access public
+/// @group global-themes
+$input-label-weight: 400 !default;
+
+@mixin form {
+  .#{$prefix}--fieldset {
+    @include reset;
+  }
+
+  .#{$prefix}--form-item {
+    @include font-family("sans");
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    align-items: flex-start;
+  }
+
+  .#{$prefix}--label {
+    @include reset;
+    @include font-family("sans");
+    @include type-style("body-short");
+    color: $text-body-default;
+    font-weight: $input-label-weight;
+    font-weight: 600 !important;
+    display: inline-block;
+    vertical-align: baseline;
+    margin-bottom: $spacing-03;
+  }
+
+  .#{$prefix}--label + .#{$prefix}--form__helper-text {
+    margin-top: -$spacing-03;
+  }
+
+  .#{$prefix}--form-item--inline {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .#{$prefix}--form-long {
+    margin-bottom: -1rem;
+
+    > .#{$prefix}--form-item {
+      margin-bottom: 1.3rem;
+    }
+  }
+  .#{$prefix}--form-item--light input,
+  .#{$prefix}--form-item--light input[type="number"] {
+    background: var(--field-02) !important;
+  }
+
+  .#{$prefix}--label .#{$prefix}--tooltip__trigger {
+    @include type-style("label-02");
+  }
+
+  .#{$prefix}--label--disabled {
+    opacity: 0.5;
+  }
+
+  // Skeleton State
+  .#{$prefix}--label.#{$prefix}--skeleton {
+    @include skeleton;
+    width: calcRem(75px);
+    height: calcRem(14px);
+  }
+
+  input[data-invalid],
+  textarea[data-invalid],
+  select[data-invalid],
+  .#{$prefix}--list-box[data-invalid] {
+    border-color: $support-error-main; //$border-error
+    //box-shadow: 0 2px 0px 0px var(--support-01);
+
+    ~ .#{$prefix}--form-requirement {
+      //max-height: calcRem(200px);
+      display: block;
+    }
+  }
+
+  .#{$prefix}--form-item--invalid {
+    ~ .#{$prefix}--form-requirement {
+      //max-height: calcRem(200px);
+      display: block;
+    }
+  }
+
+  // Fix for red ring when input is marked required in Firefox, refs #744
+  input:not(output):not([data-invalid]):-moz-ui-invalid {
+    box-shadow: none;
+  }
+
+  .#{$prefix}--form-requirement {
+    @include reset;
+    @include type-style("caption");
+    margin: $spacing-01 0 0;
+    font-weight: 600;
+    font-size: 0.8em;
+    max-height: 0;
+    line-height: 1.5;
+    display: none;
+    order: 3;
+    color: $support-error-main;
+    // TODO: check if there is a better auto sizing for icons
+    > svg {
+      width: auto;
+      height: 1em;
+    }
+    &.invalid {
+      max-height: calcRem(200px);
+      display: block;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    &::before {
+      // content: '-';
+      display: inline-block;
+      color: $support-error-main; //$text-error
+    }
+  }
+
+  .#{prefix}--form__helper-text--disabled {
+    opacity: 0.5;
+  }
+
+  .#{$prefix}--form__helper-text {
+    @include type-style("helper");
+    color: $text-field-helper;
+    order: 1;
+    line-height: 1.5;
+    z-index: 0;
+    // max-height: 3rem;
+    // opacity: 1;
+    margin-bottom: $spacing-03;
+  }
+}

package/scss/components/form/_index.scss

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

package/scss/components/form-controls/_form-controls.scss

@@ -0,0 +1,53 @@
+//
+// 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 '../../breakpoint' as *;
+@use '../../type' as *;
+@use '../../utilities/convert' as *;
+
+/// formControls styles
+/// @access public
+/// @group form-controls
+
+
+@mixin form-controls {
+  .#{$prefix}--form-controls {
+    @include breakpoint('md') {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+    }
+    .#{$prefix}--btn {
+      //margin-right: $spacing-xs;
+    }
+    .#{$prefix}--form-controls__submit {
+      margin-right: 0;
+    }
+
+    @include breakpoint('md') {
+      background: none;
+    }
+  }
+
+  .wfp--form-controls__steps {
+    @include breakpoint-down('md') {
+      margin-bottom: $spacing-03;
+    }
+  }
+
+  .#{$prefix}--form-controls__prev {
+    display: inline-flex !important;
+    flex-direction: row-reverse;
+    .#{$prefix}--btn__icon {
+      margin-left: 0;
+      margin-right: 0.5em;
+    }
+  }
+}

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

package/scss/components/form-error/_form-error.scss

@@ -0,0 +1,25 @@
+//
+// 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 '../../utilities/convert' as *;
+
+/// @type Number
+/// @access public
+/// @group global-themes
+
+@mixin form-error {
+  .#{$prefix}--form-error__title {
+    margin-bottom: $spacing-03;
+  }
+
+  .#{$prefix}--form-error__list {
+    list-style-type: disc;
+    margin-left: 1.3rem;
+  }
+}

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

package/scss/components/form-group/_form-group.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 '../../spacing' as *;
+@use '../../theme' as *;
+@use '../../type' as *;
+@use '../../breakpoint' as *;
+@use '../../utilities/convert' as *;
+@use '../../utilities/focus-outline' as *;
+@use '../../utilities/skeleton' as *;
+
+@mixin formgroup-breakpoint($breakpoint) {
+  .#{$prefix}--fieldset__content {
+    @include breakpoint($breakpoint) {
+      display: flex;
+    }
+    @include breakpoint-down($breakpoint) {
+      &.#{$prefix}--fieldset__content {
+        > * {
+          margin-right: 0;
+        }
+      }
+    }
+  }
+}
+
+@mixin form-group {
+  .#{$prefix}--form-group__title {
+    @include type-style('productive-heading-03');
+    @include font-family('sans');
+    font-weight: 600;
+    margin-bottom: $spacing-05 !important;
+  }
+
+  .#{$prefix}--fieldset__inline {
+    display: flex;
+  }
+
+  .#{$prefix}--fieldset__content {
+    > * {
+      margin-bottom: $spacing-05;
+    }
+  }
+
+  .#{$prefix}--fieldset__align-horizontal {
+    &.wfp--fieldset__input-spacing-md {
+      .#{$prefix}--fieldset__content {
+        > * {
+          margin-right: $spacing-05;
+          &:last-child {
+            margin-right: 0;
+          }
+        }
+      }
+    }
+    &.wfp--fieldset__input-spacing-lg {
+      .#{$prefix}--fieldset__content {
+        > * {
+          margin-right: $spacing-06;
+          &:last-child {
+            margin-right: 0;
+          }
+        }
+      }
+    }
+  }
+
+  .#{$prefix}--fieldset__align-horizontal {
+    &.#{$prefix}--fieldset__breakpoint-lg {
+      @include formgroup-breakpoint('xlg');
+    }
+    &.#{$prefix}--fieldset__breakpoint-md {
+      @include formgroup-breakpoint('lg');
+    }
+    &.#{$prefix}--fieldset__breakpoint-sm {
+      @include formgroup-breakpoint('md');
+    }
+  }
+
+  @include breakpoint('md') {
+    .#{$prefix}--fieldset__align-horizontal {
+      &.wfp--fieldset__input-spacing-md {
+        .#{$prefix}--fieldset__content {
+          > * {
+            margin-right: $spacing-04;
+            &:last-child {
+              margin-right: 0;
+            }
+          }
+        }
+      }
+      &.wfp--fieldset__input-spacing-lg {
+        .#{$prefix}--fieldset__content {
+          > * {
+            margin-right: $spacing-05;
+            &:last-child {
+              margin-right: 0;
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

package/scss/components/form-hint/_form-hint.scss

@@ -0,0 +1,28 @@
+//
+// 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 "../../utilities/convert" as *;
+@use "../../utilities/skeleton" as *;
+
+@mixin form-hint {
+  .#{$prefix}--form-hint {
+    display: inline;
+    vertical-align: middle;
+    margin: 0 $spacing-02;
+    user-select: none;
+    svg {
+      fill: $action-default-fill-primary-default;
+    }
+    &:hover {
+      box-shadow: 0 1px 0 $action-default-fill-primary-default;
+    }
+  }
+}

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

package/scss/components/form-wizard/_form-wizard.scss

@@ -0,0 +1,48 @@
+//
+// 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 "../../breakpoint" as *;
+@use "../../type" as *;
+@use "../../utilities/convert" as *;
+
+/// Formwizard styles
+/// @access public
+/// @group form-wizard
+
+@mixin form-wizard {
+  .#{$prefix}--form-wizard {
+    display: flex;
+    @include breakpoint("md") {
+      background: none;
+    }
+    &--sticky {
+      .#{$prefix}--step-navigation {
+        @include breakpoint("md") {
+          position: sticky;
+          top: 0;
+        }
+      }
+    }
+  }
+
+  .#{$prefix}--form-wizard__sidebar {
+    width: calcRem(300px);
+    margin-top: $spacing-05;
+    margin-right: $spacing-06;
+  }
+
+  .#{$prefix}--form-wizard__content {
+    flex-grow: 1;
+    width: 100%;
+  }
+  .#{$prefix}--form-controls {
+    margin: $spacing-04 0;
+  }
+}

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