@carbon/ibm-products-styles 2.76.0 → 2.77.0-rc.0

package/scss/components/Nav/_nav.scss

@@ -1,254 +0,0 @@
-//
-// Copyright IBM Corp. 2024, 2024
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-// Standard imports.
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/layout/scss/convert' as *;
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/motion' as *;
-@use '@carbon/styles/scss/type';
-@use '@carbon/type/scss/font-family';
-@use '../../global/styles/project-settings' as c4p-settings;
-@use '../../global/styles/mixins';
-@use '@carbon/styles/scss/utilities';
-
-$block-class: #{c4p-settings.$pkg-prefix}--nav;
-$nav-list-block-class: #{c4p-settings.$pkg-prefix}--nav-list;
-$nav-item-block-class: #{c4p-settings.$pkg-prefix}--nav-item;
-
-$nav__heading: '#{&}__heading';
-$nav__wrapper: '#{&}__wrapper';
-
-/// Icon position.
-/// @type Length
-$nav__icon__position: translate3d(-50%, 0, 0);
-
-@mixin rtl {
-  $rtl: '[dir="rtl"]';
-
-  &#{$rtl},
-  #{$rtl} & {
-    @content;
-  }
-}
-
-.#{$block-class} {
-  position: relative;
-}
-
-.#{$block-class}:not(:first-of-type) {
-  padding-block-start: $spacing-05;
-}
-
-.#{$block-class}:not(:last-of-type) {
-  padding-block-end: $spacing-05;
-}
-
-.#{$block-class}:last-of-type {
-  padding-block-end: $spacing-07;
-}
-
-.#{$block-class} + .#{$block-class} > .#{$nav__heading} {
-  padding-block-start: $spacing-02;
-}
-
-.#{$block-class}::before {
-  position: absolute;
-  display: inline-block;
-  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
-  border-block-end: to-rem(1px) solid $layer-02;
-  content: '';
-  inline-size: auto;
-  inset-block-end: 0;
-  inset-inline: $spacing-07;
-}
-
-.#{$block-class}:last-of-type::before {
-  border-width: 0;
-}
-
-.#{$block-class}__wrapper {
-  list-style: none;
-  margin-block: initial;
-  padding-inline-start: initial;
-
-  @include rtl {
-    padding-inline-end: initial;
-  }
-}
-
-.#{$block-class}__heading {
-  @include type.type-style('caption-01');
-
-  padding: $spacing-04 $spacing-08;
-  color: $text-secondary;
-  margin-block: initial;
-}
-
-// Navigation lists.
-.#{$nav-list-block-class} {
-  @include type.type-style('body-short-01');
-
-  display: flex;
-  flex-direction: column;
-  list-style: none;
-  margin-block-end: $spacing-01;
-}
-
-.#{$nav-list-block-class}:focus {
-  outline: 0;
-  outline-width: 0;
-
-  > .#{$nav-item-block-class}__link {
-    @include utilities.focus-outline('outline');
-  }
-}
-
-.#{$nav-list-block-class}__icon {
-  margin-block-start: $spacing-01;
-  margin-inline-start: auto;
-  transform: $nav__icon__position rotate(0deg);
-  transition-duration: $duration-moderate-02;
-  transition-property: transform;
-  transition-timing-function: $standard-easing;
-  @include rtl {
-    inset-inline-end: $spacing-02;
-    transform: $nav__icon__position rotate(180deg);
-  }
-}
-
-.#{$nav-list-block-class}--nested {
-  overflow: hidden;
-  margin-block-end: 0;
-  max-block-size: 0;
-  opacity: 0;
-  padding-inline-start: 0;
-  transition-duration: $duration-moderate-02;
-  $transition-property: (max-height, opacity);
-  @include rtl {
-    padding-inline: initial 0;
-  }
-
-  > .#{$nav-item-block-class}:last-of-type {
-    margin-block-end: $spacing-03;
-  }
-}
-
-// Navigation items.
-.#{$nav-item-block-class} {
-  @include type.type-style('body-short-01');
-
-  position: relative;
-  margin-block-end: $spacing-01;
-}
-
-// Content including text and sometimes a product icon.
-.#{$nav-item-block-class}__content {
-  display: flex;
-}
-
-.#{$nav-item-block-class}::before {
-  position: absolute;
-  display: inline-block;
-  background-color: transparent;
-  block-size: 100%;
-  content: '';
-  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
-  inline-size: to-rem(4px);
-  inset-block-start: 0;
-  inset-inline-start: 0;
-  transform: translate3d(-100%, 0, 0);
-  transition-property: transform;
-}
-
-.#{$nav-item-block-class}--disabled {
-  pointer-events: none;
-
-  > #{$nav-item-block-class}__link {
-    color: $text-on-color-disabled;
-  }
-}
-
-.#{$nav-item-block-class}--active {
-  @include font-family.font-weight('semibold');
-
-  @include rtl {
-    &::before {
-      transform: translate3d(0, 0, 0);
-    }
-  }
-}
-
-.#{$nav-item-block-class}--active::before {
-  z-index: 100;
-  background-color: $background-brand;
-  transform: translate3d(0, 0, 0);
-}
-
-// Expanded navigation list.
-.#{$nav-item-block-class}--expanded {
-  margin-block-end: $spacing-03;
-
-  > .#{$nav-list-block-class}--nested {
-    /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
-    max-block-size: to-rem(320px);
-    opacity: 1;
-    transition-timing-function: $ease-in;
-  }
-
-  > .#{$nav-item-block-class}__link > .#{$nav-list-block-class}__icon {
-    transform: $nav__icon__position rotate(180deg);
-
-    @include rtl {
-      transform: $nav__icon__position rotate(0);
-    }
-  }
-}
-
-// Navigation item link.
-.#{$nav-item-block-class}__link {
-  position: relative;
-  display: flex;
-  padding: $spacing-03 $spacing-02 $spacing-03 $spacing-08;
-  color: $text-primary;
-  cursor: pointer;
-  text-decoration: none;
-  transition-property: background-color;
-}
-
-.#{$nav-item-block-class}__link:hover,
-.#{$nav-item-block-class}__link:focus {
-  background-color: $layer-02;
-}
-
-.#{$nav-item-block-class}__link:focus {
-  @include utilities.focus-outline('outline');
-}
-
-.#{$nav-item-block-class}__img {
-  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
-  block-size: to-rem(20px);
-  margin-inline: -$spacing-07 $spacing-04;
-}
-
-//nav-item__link--external__icon
-
-// External link icon selector.
-.#{$nav-item-block-class}__link--external__icon {
-  flex-shrink: 0;
-  align-self: center;
-  fill: $text-primary;
-  margin-inline-start: $spacing-02;
-  opacity: 0;
-}
-
-.#{$nav-item-block-class}__link--external:hover,
-.#{$nav-item-block-class}__link--external:focus {
-  > .#{$nav-item-block-class}__link--external__icon {
-    opacity: 1;
-  }
-}

package/scss/components/NonLinearReading/_carbon-imports.scss

@@ -1,6 +0,0 @@
-//
-// Copyright IBM Corp. 2020, 2021
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//

package/scss/components/NonLinearReading/_index-with-carbon.scss

@@ -1,9 +0,0 @@
-//
-// Copyright IBM Corp. 2022, 2022
-//
-// 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 './carbon-imports';
-@use './_non-linear-reading';

package/scss/components/NonLinearReading/_index.scss

@@ -1,8 +0,0 @@
-//
-// Copyright IBM Corp. 2023, 2023
-//
-// 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 './non-linear-reading';

package/scss/components/NonLinearReading/_non-linear-reading.scss

@@ -1,126 +0,0 @@
-//
-// Copyright IBM Corp. 2023, 2023
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-/* stylelint-disable carbon/layout-use */
-/* stylelint-disable function-no-unknown */
-
-// Standard imports.
-@use '@carbon/layout/scss/convert' as *;
-@use '@carbon/styles/scss/colors' as *;
-@use '@carbon/styles/scss/components/button/tokens' as *;
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/themes';
-@use '@carbon/styles/scss/type';
-@use '../../global/styles/project-settings' as c4p-settings;
-
-@keyframes fade {
-  0% {
-    opacity: 0;
-  }
-
-  15% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-
-// The block part of our conventional BEM class names (blockClass__E--M).
-$block-class: #{c4p-settings.$pkg-prefix}--non-linear-reading;
-
-.#{$block-class}__dark {
-  @include theme(themes.$g100, true);
-}
-
-// CLOSED/COLLAPSED STATE, DEFAULT
-.#{$block-class} .#{$block-class}__keyword {
-  border-width: to-rem(1px);
-  border-style: solid;
-  border-color: $button-tertiary;
-  border-radius: $spacing-04;
-  background-color: transparent;
-  block-size: to-rem(20px);
-  color: $button-tertiary;
-  padding-block-start: 0;
-  padding-inline-end: to-rem(3px);
-  white-space: nowrap;
-}
-.#{$block-class} .#{$block-class}__keyword:hover {
-  border-color: $button-tertiary;
-  background-color: $button-tertiary;
-  color: $text-inverse;
-}
-// Disable browser's default focus outline.
-// We will provide all the focus/outline styling below.
-.#{$block-class} .#{$block-class}__keyword:focus-visible {
-  outline: none;
-}
-.#{$block-class} .#{$block-class}__keyword:focus {
-  border-color: $text-inverse;
-  background-color: $button-tertiary;
-  box-shadow:
-    0 0 0 1px $text-inverse,
-    0 0 0 3px $button-tertiary;
-  color: $text-inverse;
-}
-// The "up" chevron
-.#{$block-class} .#{$block-class}__keyword svg {
-  margin: to-rem(1px) 0 0;
-  vertical-align: text-top;
-}
-
-// OPEN/EXPANDED STATE
-.#{$block-class} .#{$block-class}__keyword-open {
-  border-color: $button-tertiary;
-  background-color: $button-tertiary;
-  color: $text-inverse;
-}
-.#{$block-class} .#{$block-class}__keyword-open:hover {
-  border-color: $button-tertiary;
-  background-color: transparent;
-  color: $button-tertiary;
-}
-.#{$block-class} .#{$block-class}__keyword-open:focus {
-  border-color: $text-inverse;
-  background-color: transparent;
-  box-shadow:
-    inset 0 0 0 1px $button-tertiary,
-    0 0 0 1px $text-inverse,
-    0 0 0 3px $button-tertiary;
-  color: $button-tertiary;
-}
-// The "up" chevron, flipped
-.#{$block-class} .#{$block-class}__keyword-open svg {
-  transform: rotate(180deg);
-}
-
-.#{$block-class} .#{$block-class}__body {
-  @include type.type-style('body-01');
-
-  display: block;
-  padding: $spacing-03 $spacing-04;
-  margin: $spacing-02 0;
-  // Onboarding does not always use Carbon defaults/tokens
-  // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
-  animation: fade 600ms;
-  border-inline-start: to-rem(1.25px) solid $text-primary;
-
-  /* stylelint-disable-next-line max-nesting-depth */
-  @media (prefers-reduced-motion: reduce) {
-    animation: none;
-  }
-}
-// The body has an id that must be visible to the button's "aria-controls" property.
-// We *must* render the body with the id to avoid breaking accessibility.
-// When closed: we render but don't display the body and we don't render the "content".
-// When open: we display the body and render the content.
-.#{$block-class} .#{$block-class}__keyword-closed + .#{$block-class}__body {
-  display: none;
-}

package/scss/components/NotificationsPanel/_carbon-imports.scss

@@ -1,12 +0,0 @@
-//
-// Copyright IBM Corp. 2022, 2022
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-// NotificationsPanel uses the following Carbon components:
-// Button, Link, Toggle
-@use '@carbon/styles/scss/components/button';
-@use '@carbon/styles/scss/components/link';
-@use '@carbon/styles/scss/components/toggle';

package/scss/components/NotificationsPanel/_index-with-carbon.scss

@@ -1,9 +0,0 @@
-//
-// Copyright IBM Corp. 2022, 2022
-//
-// 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 './carbon-imports';
-@use './notifications-panel';

package/scss/components/NotificationsPanel/_index.scss

@@ -1,8 +0,0 @@
-//
-// Copyright IBM Corp. 2020, 2021
-//
-// 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 './notifications-panel';