@progressiveui/styles 10.30.0

package/scss/components/card/_card-external.scss

@@ -0,0 +1,149 @@
+@use "../tag/mixins" as *;
+@use "../../config" as *;
+@use "../../spacing" as *;
+@use "../../theme" as *;
+@use "../../type" as *;
+@use "../../breakpoint" as *;
+
+@mixin card-external {
+  @include reset;
+
+  .#{$prefix}--card-ext {
+    border-radius: 4px;
+    box-shadow: 0 1px 8px rgb(0 0 0 / 15%); // TODO: Create new token
+    display: flex;
+    flex-direction: column;
+    width: 268px;
+    overflow: hidden;
+  }
+
+  .#{$prefix}--card-ext__label {
+    @include type-style("caption-01");
+
+    padding: $spacing-02 $spacing-05;
+
+    &.#{$prefix}--card-ext__label--neutral {
+      background-color: $layer-primary; // Provide its own token
+      color: $text-body-secondary;
+    }
+
+    &.#{$prefix}--card-ext__label--success {
+      background-color: #ccdbcd; // TODO: Create new token
+      color: #3f600f; // TODO: Use $text-success token
+    }
+  }
+
+  .#{$prefix}--card-ext__media {
+    overflow: hidden;
+
+    & .#{$prefix}--card-ext__image {
+      height: 130px;
+      margin: 0;
+      object-fit: cover;
+      width: 100%;
+    }
+  }
+
+  // If the card is interactive, set up the properties for the animation.
+  .#{$prefix}--card-ext--interactive .#{$prefix}--card-ext__image {
+    transition: transform 0.3s ease 0s;
+    will-change: transform;
+  }
+
+  // If the card is interactive, animate the image on hover event.
+  .#{$prefix}--card-ext--interactive:hover .#{$prefix}--card-ext__image {
+    transform: scale(1.15);
+  }
+
+  .#{$prefix}--card-ext__info-wrapper {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    margin: 0 $spacing-05;
+    padding-bottom: $spacing-05;
+
+    // Show the divider only if the card has actions
+    &.#{$prefix}--card-ext__info-wrapper--with-divider {
+      border-bottom: 1px solid $border-subtle;
+    }
+  }
+
+  .#{$prefix}--card-ext__primary-title {
+    padding-top: $spacing-05;
+  }
+
+  .#{$prefix}--card-ext__subheading {
+    @include type-style("caption-01");
+
+    color: $text-body-secondary;
+    font-weight: 700;
+    margin-bottom: $spacing-02;
+    overflow: hidden;
+    text-transform: uppercase;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .#{$prefix}--card-ext__heading {
+    @include type-style("expressive-heading-03");
+
+    color: $text-body-default;
+    font-weight: 700;
+    line-height: 1.25;
+  }
+
+  .#{$prefix}--card-ext__supportive-text {
+    @include type-style("body-short");
+
+    color: $text-body-secondary;
+    flex-grow: 1;
+    padding-top: $spacing-03;
+
+    &.#{$prefix}--card-ext__supportive-text--truncated {
+      & > p {
+        display: -webkit-box;
+        overflow: hidden;
+        -webkit-box-orient: vertical;
+      }
+    }
+  }
+
+  .#{$prefix}--card-ext__tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: $spacing-03;
+    padding-top: $spacing-05;
+
+    & .#{$prefix}--card-ext__tag {
+      @include tag-theme(
+        $layer-primary,
+        $text-body-secondary
+      ); // Provide its own token in replacement of 'layer'
+
+      display: block;
+      min-height: 0;
+      overflow: hidden;
+      padding: $spacing-02 $spacing-03;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  .#{$prefix}--card-ext__actions {
+    align-items: center;
+    display: flex;
+    gap: $spacing-03;
+    padding: $spacing-03;
+  }
+
+  .#{$prefix}--card-ext__action {
+    // Whether the last action is aligned to the right
+    &.#{$prefix}--card-ext__action--align-to-right {
+      margin-left: auto;
+    }
+
+    &.#{$prefix}--btn--icon-only {
+      padding: 0 0.35rem;
+    }
+  }
+}

package/scss/components/card/_card.scss

@@ -0,0 +1,138 @@
+@use "../../config" as *;
+@use "../../spacing" as *;
+@use "../../theme" as *;
+@use "../../type" as *;
+@use "../../breakpoint" as *;
+@use "../../utilities/convert" as *;
+@use "../../utilities/skeleton" as *;
+@use "../../utilities/visually-hidden" as *;
+@use "../../utilities/focus-outline" as *;
+
+@mixin card {
+  .#{$prefix}--card-box {
+    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.15);
+
+    a {
+      color: $text-body-default;
+      text-decoration: none;
+    }
+  }
+
+  .#{$prefix}--photo-cardnew--simple-card {
+    .#{$prefix}--header-photo {
+      width: 100%;
+      height: 200px;
+      object-fit: cover;
+      margin: 0;
+    }
+    .#{$prefix}--photo-cardnew__info {
+      background: $background-main;
+      padding: $spacing-05;
+    }
+    .#{$prefix}--photo-cardnew__info__background {
+      display: none;
+    }
+    .#{$prefix}--photo-cardnew__info__title {
+      color: $action-default-fill-primary-default;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .#{$prefix}--photo-cardnew__info__metadata {
+    margin: 0;
+    margin-bottom: $spacing-03;
+    @include type-style("caption");
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    // color: $text-body-default;
+  }
+
+  .#{$prefix}--photo-cardnew__info__subtitle {
+    margin: 0;
+    @include type-style("body-short");
+  }
+
+  .#{$prefix}--photo-cardnew__info__title {
+    margin: 0;
+    & + .#{$prefix}--photo-cardnew__info__subtitle {
+      margin-top: $spacing-03;
+    }
+  }
+
+  .#{$prefix}--photo-cardnew__background {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: inherit;
+    background-size: cover;
+    background-position: 50% 50%;
+    z-index: 100;
+    overflow: hidden;
+  }
+
+  .#{$prefix}--photo-cardnew--overlay {
+    .#{$prefix}--photo-cardnew__info {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: inherit;
+      padding: $spacing-05 * 1.1 $spacing-05;
+      z-index: 100;
+      overflow: hidden;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      color: $text-inverse-default;
+      background: rgba(#0b1923, 0.9); // hex is for $overlay token
+    }
+    // .#{$prefix}--photo-cardnew__info {
+
+    // }
+    .#{$prefix}--photo-cardnew__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-cardnew--overlay {
+    height: calcRem(300px);
+    @include breakpoint("lg") {
+      height: calcRem(500px);
+    }
+    box-shadow: none;
+    .#{$prefix}--photo-cardnew__info {
+      padding: $spacing-06;
+    }
+    .#{$prefix}--photo-cardnew__info__background {
+      height: calcRem(300px);
+      @include breakpoint("lg") {
+        height: calcRem(500px);
+      }
+    }
+  }
+}

package/scss/components/card/_index.scss

@@ -0,0 +1,7 @@
+@forward "card";
+@forward "card-external";
+@use "card";
+@use "card-external";
+
+@include card.card;
+@include card-external.card-external;

package/scss/components/checkbox/_checkbox.scss

@@ -0,0 +1,195 @@
+//
+// 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 *;
+@use "../../utilities/visually-hidden" as *;
+@use "../../utilities/focus-outline" as *;
+
+@use "../form";
+
+@mixin checkbox {
+  .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper {
+    margin-bottom: $spacing-05;
+
+    .#{$prefix}--fieldset__inline & {
+      margin-right: $spacing-05;
+      margin-top: $spacing-03;
+      margin-bottom: $spacing-03;
+      flex: none;
+    }
+  }
+
+  .#{$prefix}--checkbox {
+    @include visually-hidden;
+    display: none;
+  }
+
+  .#{$prefix}--checkbox-label {
+    @include reset;
+    @include font-family("sans");
+    // @include font-smoothing;
+    @include type-style("label-02");
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    position: relative;
+    padding-left: $spacing-06 + 0.1;
+    min-height: calcRem(18px);
+  }
+
+  .#{$prefix}--checkbox-label::before {
+    box-sizing: border-box;
+    content: "";
+    position: absolute;
+    left: 0;
+    top: calc(50% - 9px);
+    height: calcRem(18px);
+    width: calcRem(18px);
+    border: 2px solid $field-background-disabled;
+    border-radius: 4px;
+    background-color: $background-main;
+  }
+
+  // Checkmark
+  .#{$prefix}--checkbox-label::after {
+    content: "";
+    width: 10px;
+    height: 5px;
+    background: none;
+    border-left: 2px solid $background-main;
+    border-bottom: 2px solid $background-main;
+    transform: scale(0) rotate(-45deg);
+    position: absolute;
+    left: calcRem(3px);
+    top: 50%;
+    margin-top: calcRem(-5px);
+    box-sizing: content-box;
+  }
+
+  .#{$prefix}--checkbox:checked + .#{$prefix}--checkbox-label::before,
+  .#{$prefix}--checkbox:indeterminate + .#{$prefix}--checkbox-label::before,
+  .#{$prefix}--checkbox-label[data-contained-checkbox-state="true"]::before,
+  .#{$prefix}--checkbox-label[data-contained-checkbox-state="mixed"]::before {
+    background-color: $field-background-enabled;
+    border-color: $action-default-fill-primary-default;
+  }
+
+  .#{$prefix}--checkbox:checked + .#{$prefix}--checkbox-label::after,
+  .#{$prefix}--checkbox-label[data-contained-checkbox-state="true"]::after {
+    opacity: 1;
+    transform: scale(1) rotate(-45deg);
+  }
+
+  .#{$prefix}--checkbox:not(:checked) + .#{$prefix}--checkbox-label::after {
+    opacity: 0;
+    transform: scale(0) rotate(-45deg);
+  }
+
+  .#{$prefix}--checkbox:focus + .#{$prefix}--checkbox-label::before,
+  .#{$prefix}--checkbox-label__focus::before {
+    @include focus-outline("blurred");
+  }
+
+  // Indeterminate dash
+  .#{$prefix}--checkbox:indeterminate + .#{$prefix}--checkbox-label::after,
+  .#{$prefix}--checkbox-label[data-contained-checkbox-state="mixed"]::after {
+    transform: scale(1) rotate(0deg);
+    border-left: 0 solid $background-main;
+    border-bottom: 2px solid $background-main;
+    opacity: 1;
+    width: calcRem(12px);
+    margin-top: calcRem(-6px);
+  }
+
+  //Disabled
+  .#{$prefix}--checkbox:disabled + .#{$prefix}--checkbox-label,
+  .#{$prefix}--checkbox:disabled ~ .#{$prefix}--checkbox-label-text,
+  .#{$prefix}--checkbox-label[data-contained-checkbox-disabled="true"] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .#{$prefix}--checkbox-appearance {
+    position: absolute;
+    left: 0;
+    top: calc(50% - 9px);
+    display: inline-block;
+    height: calcRem(18px);
+    width: calcRem(18px);
+    margin-right: $spacing-03;
+    background-color: $fill-field;
+    border: 2px solid $field-border-color;
+    min-width: calcRem(18px);
+  }
+
+  // Backwards compatibilty for old checkbox html using .#{$prefix}--checkbox-appearance
+  .#{$prefix}--checkbox:checked
+    + .#{$prefix}--checkbox-label
+    .#{$prefix}--checkbox-appearance {
+    top: calcRem(-1px);
+  }
+
+  .#{$prefix}--checkbox:checked + .#{$prefix}--checkbox-appearance,
+  .#{$prefix}--checkbox:checked
+    + .#{$prefix}--checkbox-label
+    .#{$prefix}--checkbox-appearance {
+    display: flex;
+    align-items: baseline;
+    background-color: $action-default-fill-primary-default;
+    border-color: $field-background-enabled;
+  }
+
+  .#{$prefix}--checkbox:focus
+    + .#{$prefix}--checkbox-label
+    .#{$prefix}--checkbox-appearance,
+  .#{$prefix}--checkbox:focus + .#{$prefix}--checkbox-appearance {
+    @include focus-outline("blurred");
+  }
+
+  .#{$prefix}--checkbox:disabled + .#{$prefix}--checkbox-appearance {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .#{$prefix}--checkbox-checkmark {
+    display: none;
+    fill: $icon-inverse;
+    width: 100%;
+    height: 100%;
+  }
+
+  .#{$prefix}--checkbox-wrapper--invalid {
+    .#{$prefix}--checkbox-label::before {
+      border-color: $support-error-main;
+    }
+    .#{$prefix}--checkbox:checked + .#{$prefix}--checkbox-label::before {
+      background-color: $support-error-main;
+      border-color: $support-error-main;
+    }
+  }
+
+  .#{$prefix}--checkbox:checked
+    + .#{$prefix}--checkbox-appearance
+    .#{$prefix}--checkbox-checkmark,
+  .#{$prefix}--checkbox:checked
+    + .#{$prefix}--checkbox-label
+    .#{$prefix}--checkbox-appearance
+    .#{$prefix}--checkbox-checkmark {
+    display: block;
+
+    @-moz-document url-prefix() {
+      & {
+        stroke: $action-default-fill-primary-default;
+      }
+    }
+  }
+}

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