@progressiveui/styles 10.30.0

package/scss/components/grid/_grid.scss

@@ -0,0 +1,80 @@
+//-----------------------------
+// Grid
+//-----------------------------
+
+// @use 'vars' as *;
+// @use 'mixins' as *;
+// @use '../../config' as *;
+// @use '../../spacing' as *;
+// @use '../../theme' as *;
+// @use '../../type' as *;
+@use "sass:math";
+@use '../../grid' as *;
+@use '../../breakpoint' as *;
+@use '../../config' as *;
+@use '../../spacing' as *;
+// @use '../../utilities/focus-outline';
+// @use '../../utilities/high-contrast-mode' as *;
+// @use '../../utilities/skeleton' as *;
+// @use '../../utilities/rtl' as *;
+// @use '../../utilities/tooltip' as *;
+// @use '../../utilities/visually-hidden' as *;
+
+@mixin grid {
+  .#{$prefix}--grid {
+    display: flex;
+    flex-wrap: wrap;
+    height: 100%;
+    -webkit-box-pack: start;
+    justify-content: flex-start;
+    -webkit-box-align: stretch;
+    align-items: stretch;
+  }
+  .#{$prefix}--grid--grow {
+    .#{$prefix}--grid-col {
+      flex-grow: 1;
+      max-width: unset;
+    }
+  }
+
+  .#{$prefix}--grid--spacing-none {
+    margin: 0;
+    > * {
+      padding: 0;
+    }
+  }
+
+  .#{$prefix}--grid--spacing-xs {
+    margin: -$spacing-02;
+    > * {
+      padding: $spacing-02;
+    }
+  }
+  .#{$prefix}--grid--spacing-sm {
+    margin: -0.375rem;
+    > * {
+      padding: 0.375rem;
+    }
+  }
+
+  .#{$prefix}--grid--spacing-md {
+    margin: -$spacing-03;
+    > * {
+      padding: $spacing-03;
+    }
+  }
+
+  .#{$prefix}--grid--spacing-lg {
+    margin: -$spacing-04;
+    > * {
+      padding: $spacing-04;
+    }
+  }
+
+  .#{$prefix}--grid--spacing-xl {
+    margin: -$spacing-05;
+    > * {
+      padding: $spacing-05;
+    }
+  }
+}

package/scss/components/grid/_index.scss

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

package/scss/components/hero/_hero-external.scss

@@ -0,0 +1,84 @@
+@use "../tag/mixins" as *;
+@use "../../config" as *;
+@use "../../spacing" as *;
+@use "../../theme" as *;
+@use "../../type" as *;
+@use "../../breakpoint" as *;
+
+@mixin hero-external {
+  @include reset;
+
+  .#{$prefix}--hero-ext {
+    background-size: cover;
+    padding: $spacing-12 $spacing-07;
+
+    @include breakpoint-down(lg) {
+      padding: $spacing-10 $spacing-07;
+    }
+
+    @include breakpoint-down(md) {
+      padding: $spacing-09 $spacing-03;
+    }
+  }
+
+  // [1] TODO: Create new type-style token for the Hero heading
+  .#{$prefix}--hero-ext__heading {
+    color: $text-inverse-default;
+    font-size: 48px; // [1]
+    font-weight: 800; // [1]
+    line-height: 1.15; // [1]
+    text-align: center;
+    text-transform: uppercase; // [1]
+
+    @include breakpoint-down(lg) {
+      font-size: 36px; // [1]
+
+      & > br {
+        display: none;
+      }
+    }
+
+    @include breakpoint-down(md) {
+      font-size: 30px; // [1]
+      text-align: left;
+    }
+  }
+
+  .#{$prefix}--hero-ext__body-copy {
+    color: $text-inverse-default;
+    margin-top: $spacing-05;
+    text-align: center;
+
+    @include breakpoint-down(md) {
+      text-align: left;
+    }
+
+    & > b,
+    strong {
+      font-weight: 700;
+    }
+
+    & > a {
+      color: $text-inverse-default;
+      cursor: pointer;
+      text-decoration: underline;
+    }
+  }
+
+  .#{$prefix}--hero-ext__actions {
+    align-items: center;
+    display: flex;
+    gap: $spacing-07;
+    justify-content: center;
+    margin-top: $spacing-07;
+
+    @include breakpoint-down(lg) {
+      gap: $spacing-06;
+    }
+
+    @include breakpoint-down(md) {
+      gap: $spacing-05;
+      justify-content: flex-start;
+    }
+  }
+}

package/scss/components/hero/_hero.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 "../../spacing" as *;
+@use "../../theme" as *;
+@use "../../type";
+@use "../../breakpoint" as *;
+@use "../../utilities/convert" as *;
+@use "../../utilities/skeleton" as *;
+@use "../../utilities/visually-hidden" as *;
+@use "../../utilities/focus-outline" as *;
+@use "../../utilities/component-reset";
+@use "../../utilities/layer" as *;
+@use "../../utilities/text-gradient" as *;
+
+@mixin hero {
+  .#{$prefix}--photo-card {
+    @include component-reset.reset;
+    position: relative;
+    display: block;
+    width: 100%;
+    text-decoration: none;
+    height: calcRem(200px);
+    @include breakpoint("lg") {
+      height: calcRem(260px);
+    }
+    transition: all 0.1s;
+    @include layer(pop-out);
+    &.#{$prefix}--photo-card--link:hover {
+      @include layer(pop-out--hover);
+    }
+    color: $text-body-default;
+    background-size: cover;
+    background-position: 50% 50%;
+    overflow: hidden;
+    .#{$prefix}--photo-card__info__title {
+      margin-top: 0;
+    }
+  }
+
+  .#{$prefix}--photo-card__background {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    background-size: cover;
+    background-position: 50% 50%;
+    z-index: 100;
+    overflow: hidden;
+  }
+
+  .#{$prefix}--photo-card--no-background {
+    background: $action-default-link-default-hover; //interactive-02 new token name
+  }
+
+  .#{$prefix}--photo-card__info {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    padding: $spacing-05 * 1.1 $spacing-05;
+    z-index: 100;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .#{$prefix}--photo-card__info__more {
+    margin-right: $spacing-05;
+  }
+
+  .#{$prefix}--photo-card__info__metadata {
+    margin: 0;
+    margin-bottom: $spacing-02;
+    @include type.typescale("omega");
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .#{$prefix}--photo-card__info__subtitle {
+    margin: 0;
+    @include type.typescale("zeta");
+  }
+
+  .#{$prefix}--photo-card__info__title {
+    margin: 0;
+    @include type.typescale("beta");
+    /*text-transform: uppercase;
+    letter-spacing: 0.05em; */
+    & + .#{$prefix}--photo-card__info__subtitle {
+      margin-top: $spacing-03;
+    }
+  }
+
+  .#{$prefix}--photo-card--light {
+    .#{$prefix}--photo-card__info {
+      background: rgba(#ffffff, 0.8);
+    }
+  }
+
+  .#{$prefix}--photo-card--landscape,
+  .#{$prefix}--photo-card--hero {
+    .#{$prefix}--photo-card__info {
+      color: $text-inverse-default;
+      background: rgba(#000000, 0.5);
+    }
+    .#{$prefix}--photo-card__info__background {
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      filter: blur(6px);
+      background-size: cover;
+      transform: scale(1.05);
+      z-index: -1;
+      height: calcRem(200px);
+      @include breakpoint("lg") {
+        height: calcRem(260px);
+      }
+      &:after {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        transition: all 0.1s;
+        background: #000000;
+        opacity: 0.6;
+      }
+    }
+    &.#{$prefix}--photo-card--link:hover {
+      .#{$prefix}--photo-card__info__title {
+        text-decoration: underline;
+      }
+      .#{$prefix}--photo-card__info__background {
+        &:after {
+          background: $action-default-fill-primary-default;
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  .#{$prefix}--photo-card--hero {
+    height: calcRem(300px);
+    @include breakpoint("lg") {
+      height: calcRem(500px);
+    }
+    box-shadow: none;
+    &.#{$prefix}--photo-card--link:hover {
+      box-shadow: none;
+    }
+    .#{$prefix}--photo-card__info {
+      padding: $spacing-06;
+    }
+    .#{$prefix}--photo-card__info__background {
+      height: calcRem(300px);
+      @include breakpoint("lg") {
+        height: calcRem(500px);
+      }
+    }
+  }
+
+  .#{$prefix}--photo-card--emergencies,
+  .#{$prefix}--photo-card--splash,
+  .#{$prefix}--photo-card--splash-image,
+  .#{$prefix}--photo-card--splash-compact {
+    height: calcRem(300px);
+    display: flex;
+    align-items: center;
+    color: $text-inverse-default;
+    a {
+      color: $text-inverse-default;
+    }
+    @include breakpoint("lg") {
+      height: calcRem(500px);
+    }
+    box-shadow: none;
+    &.#{$prefix}--photo-card--link:hover {
+      box-shadow: none;
+    }
+    .#{$prefix}--photo-card__info {
+      position: relative;
+      text-align: center;
+      padding: $spacing-08;
+      @include breakpoint("lg") {
+        padding: $spacing-10;
+      }
+    }
+  }
+
+  .#{$prefix}--photo-card--splash {
+    .#{$prefix}--photo-card__info__title {
+      @include type.type-style("productive-heading-04");
+    }
+  }
+
+  .#{$prefix}--photo-card--splash-image {
+    .#{$prefix}--photo-card__info {
+      text-align: right;
+      align-items: flex-end;
+    }
+    .#{$prefix}--photo-card__info__more {
+      margin-top: $spacing-05;
+      margin-right: 0;
+    }
+    .#{$prefix}--photo-card__background {
+      &:after {
+        content: "";
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 3;
+        background: rgba(#000000, 0.4);
+      }
+    }
+    .#{$prefix}--photo-card__info {
+      flex-direction: column;
+    }
+  }
+
+  .#{$prefix}--photo-card--splash-compact,
+  .#{$prefix}--photo-card--emergencies {
+    height: calcRem(70px);
+    .#{$prefix}--photo-card__info {
+      justify-content: center;
+    }
+    .#{$prefix}--photo-card__info__title {
+      margin-bottom: 0;
+      display: flex;
+      align-items: center;
+    }
+    .#{$prefix}--photo-card__info__more {
+      margin-left: $spacing-07;
+    }
+  }
+
+  .#{$prefix}--photo-card--emergencies {
+    background: $support-error-main;
+    .#{$prefix}--photo-card__info__title {
+      font-weight: normal;
+      @include type.type-style("heading-02");
+    }
+  }
+
+  .#{$prefix}--photo-card--landscape-light {
+    .#{$prefix}--photo-card__info {
+      background: $background-main;
+    }
+    .#{$prefix}--photo-card__info__background {
+      display: none;
+    }
+    .#{$prefix}--photo-card__info__title {
+      color: $action-default-fill-primary-default;
+    }
+    &.#{$prefix}--photo-card--link:hover {
+      .#{$prefix}--photo-card__info__title {
+        text-decoration: underline;
+      }
+      .#{$prefix}--photo-card__info__background {
+        &:after {
+          background: $overlay;
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  .#{$prefix}--photo-card--split {
+    .#{$prefix}--photo-card__background {
+      width: 30%;
+      @include breakpoint("md") {
+        width: 50%;
+      }
+    }
+    .#{$prefix}--photo-card__info {
+      width: 70%;
+      @include breakpoint("md") {
+        width: 50%;
+      }
+      left: inherit;
+      bottom: 0;
+      top: 0;
+      right: 0;
+      @include text-gradient();
+    }
+    .#{$prefix}--photo-card__info__title {
+      color: $action-default-fill-primary-default;
+    }
+    .#{$prefix}--photo-card__info__background {
+      filter: blur(40px);
+      transform: scale(-1.2, 1.2);
+    }
+    &.#{$prefix}--photo-card--link:hover {
+      .#{$prefix}--photo-card__info__title {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .#{$prefix}--photo-card--related {
+    display: flex;
+    img {
+      height: 100%;
+      width: auto;
+    }
+    .#{$prefix}--photo-card__info {
+      position: relative;
+    }
+  }
+}

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

package/scss/components/icon/_icon.scss

@@ -0,0 +1,19 @@
+//
+// 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 '../form';
+@use '../../config' as *;
+@use '../../spacing' as *;
+@use '../../theme' as *;
+@use '../../type' as *;
+@use '../../utilities/convert' as *;
+@use '../../utilities/skeleton' as *;
+@use '../../utilities/visually-hidden' as *;
+
+@mixin icon {
+  
+}

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

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

package/scss/components/info-bar/_info-bar.scss

@@ -0,0 +1,21 @@
+@use "../../config" as *;
+@use "../../spacing" as *;
+@use "../../theme" as *;
+@use "../../type" as *;
+@use "../../breakpoint" as *;
+@use "../../utilities/convert" as *;
+
+/// Link styles
+/// @access public
+/// @group info-bar
+@mixin info-bar {
+  .#{$prefix}--info-bar {
+    background: $semantic-alert-alert80;
+    color: $semantic-alert-alert10;
+    @include reset;
+    display: flex;
+    padding: $spacing-100 0;
+    font-size: var(--desktop-subtext-m-regular__fontSize); // TODO: Add px
+    line-height: 1.5;
+  }
+}

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