@progressiveui/styles 10.30.0

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

package/scss/components/file-uploader/_file-uploader.scss

@@ -0,0 +1,321 @@
+//
+// 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 "../../spacing" as *;
+@use "../../theme" as *;
+@use "../../type" as *;
+@use "../../utilities/convert" as *;
+@use "../../utilities/focus-outline" as *;
+@use "../../utilities/high-contrast-mode" as *;
+@use "../../utilities/visually-hidden" as *;
+
+@use "../button";
+@use "../form";
+@use "../loading";
+
+/// File uploader styles
+/// @access public
+/// @group file-uploader
+@mixin file-uploader {
+  .#{$prefix}--file {
+    width: 100%;
+  }
+
+  .#{$prefix}--file--invalid {
+    margin-right: $spacing-05;
+    fill: $support-error-main;
+  }
+
+  // TODO: sync with type
+  .#{$prefix}--file--label {
+    @include reset;
+    // @include type-style('productive-heading-01');
+
+    margin-bottom: $spacing-05;
+    color: $text-body-default;
+  }
+
+  // .#{$prefix}--file--label--disabled {
+  //   color: $text-disabled;
+  // }
+
+  .#{$prefix}--file-input {
+    @include visually-hidden;
+  }
+
+  // This class is of old markup with "select file" button
+  // New code should use link-style "select file" UI (`.bx--file-browse-btn`)
+  // TODO: deprecate this block
+  .#{$prefix}--file-btn {
+    display: inline-flex;
+    padding-right: calcRem(64px);
+    margin: 0;
+  }
+
+  .#{$prefix}--file-browse-btn {
+    display: inline-block;
+    width: 100%;
+    max-width: calcRem(320px);
+    margin-bottom: $spacing-05;
+    cursor: pointer;
+    outline: 2px solid transparent;
+    outline-offset: -2px;
+
+    &:focus,
+    &:hover {
+      // outline: 2px solid $focus;
+    }
+
+    &:hover,
+    &:focus,
+    &:active,
+    &:active:visited {
+      text-decoration: underline;
+    }
+
+    &:active {
+      color: $text-body-default;
+    }
+  }
+
+  .#{$prefix}--file-browse-btn--disabled {
+    color: $text-disabled;
+    cursor: no-drop;
+    text-decoration: none;
+
+    &:hover,
+    &:focus {
+      color: $text-disabled;
+      outline: none;
+      text-decoration: none;
+    }
+  }
+
+  .#{$prefix}--file-browse-btn--disabled .#{$prefix}--file__drop-container {
+    border: 1px dashed $button-disabled;
+  }
+
+  .#{$prefix}--label-description {
+    @include reset;
+    // @include type-style('body-short');
+
+    margin-bottom: $spacing-05;
+    color: $text-body-secondary;
+  }
+
+  // .#{$prefix}--label-description--disabled {
+  //   color: $text-disabled;
+  // }
+
+  // For backwards compatibility
+  .#{$prefix}--file-btn ~ .#{$prefix}--file-container {
+    margin-top: $spacing-03;
+  }
+
+  .#{$prefix}--btn ~ .#{$prefix}--file-container {
+    margin-top: $spacing-05;
+  }
+
+  .#{$prefix}--file .#{$prefix}--file-container,
+  .#{$prefix}--file ~ .#{$prefix}--file-container {
+    margin-top: $spacing-05;
+  }
+
+  .#{$prefix}--file__selected-file {
+    display: grid;
+    max-width: calcRem(320px);
+    min-height: $spacing-05;
+    align-items: center;
+    margin-bottom: $spacing-05;
+    background-color: $fill-field;
+    gap: calcRem(12px) $spacing-05;
+    grid-auto-rows: auto;
+    grid-template-columns: 1fr auto;
+    word-break: break-word;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    .#{$prefix}--form-requirement {
+      display: block;
+      max-height: none;
+      margin: 0;
+      grid-column: 1 / -1;
+    }
+
+    .#{$prefix}--loading {
+      width: calcRem(32px);
+      height: calcRem(32px);
+      margin-right: -$spacing-05;
+    }
+
+    .#{$prefix}--inline-loading__animation .#{$prefix}--loading {
+      // Vanilla markup has `.bx--inline-loading__animation` which is used for `margin-right` adjustment
+      margin-right: 0;
+    }
+
+    .#{$prefix}--file-filename {
+      // @include type-style('body-short');
+
+      overflow: hidden;
+      margin-left: $spacing-05;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  // TODO: deprecate this block
+  .#{$prefix}--file__selected-file--invalid__wrapper {
+    @include focus-outline("invalid");
+
+    max-width: calcRem(320px);
+    margin-bottom: $spacing-05;
+    background-color: $fill-field;
+    outline-width: 1px;
+  }
+
+  .#{$prefix}--file__selected-file--invalid {
+    @include focus-outline("invalid");
+
+    padding: $spacing-05 0;
+  }
+
+  // .#{$prefix}--file__selected-file--invalid.#{$prefix}--file__selected-file--sm {
+  //   padding: $spacing-02 0;
+  // }
+  .#{$prefix}--file__selected-file--invalid .#{$prefix}--form-requirement {
+    border-top: 1px solid $border-subtle;
+    padding-top: $spacing-05;
+  }
+
+  .#{$prefix}--file__selected-file--invalid
+    .#{$prefix}--form-requirement__title,
+  .#{$prefix}--file__selected-file--invalid
+    .#{$prefix}--form-requirement__supplement {
+    // @include type-style('label');
+
+    padding: 0 $spacing-05;
+  }
+
+  // .#{$prefix}--file__selected-file--invalid
+  //   .#{$prefix}--form-requirement__title {
+  //   color: $text-error;
+  // }
+
+  .#{$prefix}--file__selected-file--invalid
+    .#{$prefix}--form-requirement__supplement {
+    color: $text-body-default;
+  }
+
+  // TODO: deprecate
+  .#{$prefix}--file__selected-file--invalid + .#{$prefix}--form-requirement {
+    // @include type-style('caption-01');
+
+    display: block;
+    overflow: visible;
+    max-height: calcRem(200px);
+    padding: $spacing-05 $spacing-05;
+    color: $text-error;
+    font-weight: 400;
+  }
+
+  .#{$prefix}--file__selected-file--invalid
+    + .#{$prefix}--form-requirement
+    .#{$prefix}--form-requirement__supplement {
+    padding-bottom: $spacing-05;
+    color: $text-body-default;
+  }
+
+  .#{$prefix}--file__state-container {
+    display: flex;
+    min-width: 1.5rem;
+    align-items: center;
+    justify-content: center;
+    padding-right: $spacing-05;
+
+    .#{$prefix}--loading__svg {
+      stroke: $icon-primary;
+    }
+  }
+
+  .#{$prefix}--file__state-container .#{$prefix}--file-complete {
+    cursor: pointer;
+    // fill: $action-default-fill-primary-default;
+
+    &:focus {
+      @include focus-outline("border");
+    }
+
+    // for checkmark contrast
+    [data-icon-path="inner-path"] {
+      // fill: $icon-on-color;
+      opacity: 1;
+    }
+  }
+
+  .#{$prefix}--file__state-container .#{$prefix}--file-invalid {
+    width: $spacing-05;
+    height: $spacing-05;
+    fill: $support-error-main;
+    margin-right: $spacing-05;
+  }
+
+  .#{$prefix}--file__state-container .#{$prefix}--file-close {
+    display: flex;
+    width: $spacing-06;
+    height: $spacing-06;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: none;
+    background-color: transparent;
+    cursor: pointer;
+    // fill: $icon-primary;
+
+    &:focus {
+      @include focus-outline("outline");
+    }
+  }
+
+  .#{$prefix}--file__state-container .#{$prefix}--file-close svg path {
+    // fill: $icon-primary;
+  }
+
+  .#{$prefix}--file__state-container .#{$prefix}--inline-loading__animation {
+    margin-right: -$spacing-05;
+  }
+
+  .#{$prefix}--file__drop-container {
+    display: flex;
+    overflow: hidden;
+    height: calcRem(96px);
+    align-items: flex-start;
+    justify-content: space-between;
+    padding: $spacing-05;
+    border: 1px dashed $border-strong;
+  }
+
+  .#{$prefix}--file__drop-container--drag-over {
+    background: none;
+    // outline: 2px solid $focus;
+    outline-offset: -2px;
+  }
+
+  // Windows HCM fix
+  /* stylelint-disable */
+  .#{$prefix}--file__selected-file {
+    @include high-contrast-mode("outline");
+  }
+
+  .#{$prefix}--file__state-container .#{$prefix}--file-close svg path {
+    @include high-contrast-mode("icon-fill");
+  }
+  /* stylelint-enable */
+}

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

package/scss/components/footer/_footer.scss

@@ -0,0 +1,258 @@
+//
+// 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";
+@use "../../utilities/rtl" as *;
+@use "../../utilities/high-contrast-mode" as *;
+@use "../../utilities/skeleton" as *;
+@use "../../utilities/visually-hidden" as *;
+@use "../../utilities/z-index" as *;
+
+@mixin footer {
+  .#{$prefix}--footer--bottom-fixed {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+  }
+
+  .#{$prefix}--footer {
+    @include reset;
+    @include font-family("sans");
+    color: $neutral-neutral100-white;
+    background-color: $brand-dark-blue-dark-blue20;
+    z-index: z("footer");
+    padding: calcRem(20px) 0;
+    @media print {
+      display: none;
+    }
+  }
+
+  .#{$prefix}--footer__content {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    min-height: 3.5rem;
+    width: 100%;
+    border-bottom: 1px solid $border-subtle;
+  }
+
+  .#{$prefix}--footer__info {
+    display: flex;
+
+    @media screen and (max-width: 600px) {
+      flex-direction: column;
+      text-align: center;
+    }
+  }
+
+  .#{$prefix}--footer__sdg {
+    //margin-top: 0.45rem;
+    margin-left: $spacing-01; //$spacing-xl;
+    width: 50px;
+    height: 50px;
+  }
+
+  .#{$prefix}--footer__meta {
+    @include type-style("body-short");
+    font-size: calcRem(12px);
+    margin-top: calcRem(10px);
+    // font-style: italic;
+    font-weight: 600;
+    @include breakpoint-down(lg) {
+      // display: none;
+    }
+  }
+
+  .#{$prefix}--footer__info__item {
+    line-height: 1.5;
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    margin-right: calcRem(64px);
+    @include rtl {
+      margin-left: calcRem(64px);
+      margin-right: 0;
+    }
+
+    @media screen and (max-width: 600px) {
+      margin-right: 0;
+      margin-bottom: calcRem(20px);
+    }
+  }
+
+  .#{$prefix}--footer__info__item > .#{$prefix}--link {
+    font-weight: 600;
+  }
+
+  .#{$prefix}--footer__info__item > .#{$prefix}--footer__label {
+    // @include typescale('zeta');
+    // @include line-height('body');
+    @include type-style("label-02");
+    font-weight: 600;
+    margin: 0;
+    color: $brand-wfp-blue-wfp-blue70;
+  }
+
+  .#{$prefix}--footer__cta {
+    margin-left: auto;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    align-items: flex-end;
+
+    @include rtl {
+      margin-left: 0;
+      margin-right: auto;
+    }
+    .#{$prefix}--footer__cta-logo {
+      fill: $text-inverse-default; // TODO: use new text color white token;
+      width: calcRem(90px);
+      height: calcRem(90px);
+
+      @media screen and (max-width: 600px) {
+        width: calcRem(120px);
+      }
+    }
+  }
+
+  .#{$prefix}--footer__secondary {
+    font-size: calc(10px);
+    text-align: end;
+
+    @include breakpoint-down("md") {
+      margin-bottom: calcRem(10px);
+      display: inline;
+    }
+  }
+
+  .#{$prefix}--theme-dark {
+    .#{$prefix}--footer__cta-logo,
+    .#{$prefix}--footer__cta-logo-small {
+      filter: invert(1);
+    }
+  }
+
+  @include breakpoint-down("md") {
+    .#{$prefix}--footer__content {
+      flex-direction: column;
+    }
+    .#{$prefix}--footer__cta {
+      margin: auto;
+      align-items: center;
+    }
+    .#{$prefix}--footer__meta {
+      text-align: center;
+    }
+    .#{$prefix}--footer__cta-logo-small {
+      display: none;
+    }
+    .#{$prefix}--footer__sdg {
+      display: none;
+    }
+  }
+
+  //breakpoint
+
+  @include breakpoint("md") {
+    .#{$prefix}--footer__cta-logo-small {
+      display: none;
+    }
+  }
+
+  .#{$prefix}--footer__info {
+    display: flex;
+  }
+
+  /* External */
+
+  .#{$prefix}--footer--external {
+    @include breakpoint-down("md") {
+      .#{$prefix}--footer__content {
+        flex-direction: column;
+      }
+    }
+
+    .#{$prefix}--footer__info {
+      order: 1;
+      @include breakpoint("md") {
+        width: 40%;
+      }
+      // @include line-height('body');
+      line-height: 1.5;
+    }
+
+    .#{$prefix}--footer__cta {
+      margin-left: inherit;
+      @include breakpoint-down("md") {
+        display: flex;
+        width: 100%;
+        margin-bottom: calcRem(20px);
+        justify-content: space-between;
+        > img {
+          margin-right: calcRem(30px);
+        }
+      }
+      @include breakpoint("md") {
+        margin-right: auto;
+      }
+    }
+
+    .#{$prefix}--footer__info__item {
+      @include typescale("delta");
+      // @include line-height('body');
+      line-height: 1.5;
+      display: block;
+      margin: 0;
+      margin-right: calcRem(64px);
+      @include rtl {
+        margin-left: calcRem(64px);
+        margin-right: 0;
+      }
+    }
+
+    .#{$prefix}--footer__info__item > .#{$prefix}--link {
+      font-weight: 600;
+      margin-right: calcRem(10px);
+      // @include typescale('zeta');
+      @include breakpoint-down(lg) {
+        display: block;
+      }
+    }
+
+    .#{$prefix}--footer__secondary {
+      margin-top: calcRem(20px);
+      font-weight: 600 !important;
+      @include type-style("caption-01");
+      @include breakpoint(lg) {
+        width: 100%;
+      }
+    }
+
+    .#{$prefix}--footer__meta {
+      @include typescale("zeta");
+      font-size: calcRem(12px);
+      // border-top: 1px solid $color__navy-gray-8;
+      margin-top: $spacing-03;
+      padding-top: $spacing-03;
+      display: flex;
+      justify-content: space-between;
+      font-style: normal;
+    }
+
+    .#{$prefix}--footer__meta__links {
+      .#{$prefix}--link {
+        font-weight: 400;
+      }
+    }
+  }
+}