From 7a953563efb92e469a0e72806b9d23189fc65147 Mon Sep 17 00:00:00 2001 From: David Menendez Date: Fri, 25 Oct 2024 12:37:03 -0500 Subject: [PATCH] fix: try no styles --- .../src/components/side-panel/side-panel.scss | 301 ------------------ 1 file changed, 301 deletions(-) diff --git a/packages/ibm-products-web-components/src/components/side-panel/side-panel.scss b/packages/ibm-products-web-components/src/components/side-panel/side-panel.scss index e29a7765f4..6dbd02dd68 100644 --- a/packages/ibm-products-web-components/src/components/side-panel/side-panel.scss +++ b/packages/ibm-products-web-components/src/components/side-panel/side-panel.scss @@ -4,304 +4,3 @@ * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. */ - -$css--plex: true !default; - -/* Other Carbon settings. */ -@use '@carbon/styles/scss/reset'; -@use '@carbon/styles/scss/config' as *; -@use '@carbon/styles/scss/motion' as *; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/utilities/ai-gradient' as *; -@use '@carbon/styles/scss/utilities/convert' as *; -@use 'sass:map'; - -$prefix: 'c4p'; -$carbon-prefix: 'cds'; -// @use '@carbon/ibm-products-styles/scss/components/ActionSet/_index.scss' as *; -// @use '@carbon/ibm-products-styles/scss/components/SidePanel/_index.scss' as *; -// @use '@carbon/ibm-products-styles/scss/components/SidePanel/side-panel-variables' -// as spv; - -@use '../../../../ibm-products-styles/scss/components/ActionSet/index' as *; -@use '../../../../ibm-products-styles/scss/components/SidePanel/index' as *; -@use '../../../../ibm-products-styles/scss/componentsSidePanel/side-panel-variables' - as spv; - -$block-class: #{$prefix}--side-panel; -$block-class-action-set: #{$prefix}--action-set; - -:host(#{$prefix}-side-panel) { - /* Replaces use of Framer for slide in / out animation */ - --#{$block-class}--displaced: 100%; - - * { - /* not sure why things are coming out as content-box */ - box-sizing: border-box; - } - - .#{$block-class} { - @extend .#{$block-class}; - - /* for actions container query - note this changes the size calculation */ - container-name: side-panel; - container-type: inline-size; - - &[placement='left'] { - --#{$block-class}--displaced: -100%; - } - - &[opening] { - transform: translateX(var(--#{$block-class}--displaced)); - } - - &[open] { - transform: translateX(0); - transition: all $duration-moderate-02 motion(standard, productive); - } - - @media screen and (prefers-reduced-motion: reduce) { - &[open] { - transition: none; - } - } - - &[closing] { - transform: translateX(var(--#{$block-class}--displaced)); - transition: all $duration-moderate-01 motion(exit, productive); - } - - @media screen and (prefers-reduced-motion: reduce) { - &[closing] { - transition: none; - } - } - - &[placement='right'] { - @extend .#{$block-class}--right-placement; - - /* remove if https://github.com/carbon-design-system/ibm-products/pull/3983 merged */ - border-inline-end: 1px solid $border-subtle-02; - inset-inline-end: 0; - } - - /* stylelint-disable-next-line no-duplicate-selectors -- disabled to keep close to 'right' setting */ - &[placement='left'] { - @extend .#{$block-class}--left-placement; - - /* remove if https://github.com/carbon-design-system/ibm-products/pull/3983 merged */ - border-inline-end: 1px solid $border-subtle-02; - inset-inline-start: 0; - } - - @each $size, $size_value in spv.$side-panel-sizes { - &[size='#{$size}'] { - @extend .#{$block-class}--#{$size}; - } - } - - &[condensed-actions] { - @extend .#{$block-class}--condensed-actions; - } - } - - #{$prefix}-layer { - display: contents; - } - - .#{$block-class}__overlay { - &[opening] { - opacity: 0; - } - - @media screen and (prefers-reduced-motion: reduce) { - &[open] { - opacity: 1; - transition: none; - } - } - - &[open] { - opacity: 1; - transition: all $duration-moderate-02 motion(standard, productive); - } - @media screen and (prefers-reduced-motion: reduce) { - &[closing] { - opacity: 0; - transition: none; - } - } - - &[closing] { - opacity: 0; - transition: all $duration-moderate-01 motion(exit, productive); - } - } - - .#{$block-class}__header { - &::before { - z-index: 99; /* must be higher than action toolbar */ - } - - &[detail-step] { - @extend .#{$block-class}__header--on-detail-step; - } - - &[no-title-animation] { - @extend .#{$block-class}__header--no-title-animation; - // inset-block-start: 0; - } - - &[reduced-motion] { - @extend .#{$block-class}__header--reduced-motion; - } - - &[has-action-toolbar] { - margin-block-end: $spacing-03; - padding-block-end: 0; - } - } - - .#{$block-class} .#{$block-class}__header[has-action-toolbar]::before { - content: initial; /* remove border below */ - } - - .#{$block-class}__subtitle-text { - &[hidden] { - @extend .#{$carbon-prefix}--visually-hidden !optional; - } - } - - .#{$block-class}__action-toolbar { - margin-block-end: 0; - padding-inline-start: 0; - - &[hidden] { - @extend .#{$carbon-prefix}--visually-hidden !optional; - } - } - - .#{$block-class} .#{$block-class}__action-toolbar[hidden] { - @extend .#{$carbon-prefix}--visually-hidden !optional; - } - - .#{$block-class}[has-slug] { - @extend .#{$block-class}--has-slug; - } - - [scrolls] { - @extend .#{$block-class}--scrolls; - } - - .#{$block-class}__body-content { - @extend .#{$block-class}__body-content; - } - - @mixin actions-placement() { - --flex-direction: row; - /* non carbon for IBM Products adjustment */ - flex-direction: var(--flex-direction); - - ::slotted(#{$prefix}-button) { - flex: 0 1 25%; - max-inline-size: to-rem(232px); - } - - ::slotted(#{$prefix}-button[kind='ghost']) { - flex: 1 1 25%; - max-inline-size: none; - } - - ::slotted(#{$prefix}-button[hidden]) { - @extend .#{$carbon-prefix}--visually-hidden !optional; - - display: none; - } - - // -1 in @container query is for 1px left border - @container (width <= #{map.get(spv.$side-panel-sizes, lg)}) { - &:not([actions-multiple='triple']) ::slotted(#{$carbon-prefix}-button) { - // double and single on lg use 50% - flex: 0 1 50%; - max-inline-size: none; - } - } - - // -1 in @container query is for 1px left border - @container (width <= #{map.get(spv.$side-panel-sizes, md)}) { - // md is 50% for two and 100% for one - // column for triple - &[actions-multiple] ::slotted(#{$carbon-prefix}-button) { - flex: 0 0 100%; - max-inline-size: none; - } - - &[actions-multiple='double'] ::slotted(#{$carbon-prefix}-button) { - flex: 0 1 50%; - max-inline-size: none; - } - - &[actions-multiple='triple'] { - --flex-direction: column; - - ::slotted(#{$carbon-prefix}-button) { - flex: initial; - inline-size: 100%; - max-inline-size: none; - } - } - } - - // -1 in @container query is for 1px left border - @container (width <= #{map.get(spv.$side-panel-sizes, sm)}) { - --flex-direction: column; - - ::slotted(#{$carbon-prefix}-button) { - flex: initial; - inline-size: 100%; - max-inline-size: none; - } - } - } - - .#{$block-class}__actions-container { - @extend .#{$block-class-action-set}; - @include actions-placement(); - - display: flex; - inline-size: 100%; - - ::slotted(#{$carbon-prefix}-button) { - @extend .#{$block-class-action-set}__action-button; - } - - &[hidden] { - @extend .#{$carbon-prefix}--visually-hidden !optional; - - display: none; - } - - $multiples: 'single' 'double' 'triple'; - @each $m in $multiples { - &[actions-multiple='#{$m}'] { - @extend .#{$carbon-prefix}--action-set--row-#{$m} !optional; - } - } - - $sizes: 'xs' 'sm'; - @each $s in $sizes { - &[size='#{$s}'] { - @extend .#{$block-class-action-set}--#{$s} !optional; - } - } - } - - .sentinel { - @extend .#{$carbon-prefix}--visually-hidden !optional; - } - - .#{$block-class}__close-button { - width: 2rem; - } -}