ComponentDemo.module.scss

@use '@carbon/react/scss/themes';
@use '@carbon/react/scss/theme';
@use '@carbon/react/scss/components/button/tokens' as button;
@use '@carbon/react/scss/components/notification/tokens' as notification;
@use '@carbon/react/scss/components/tag/tokens' as tag;
@use '@carbon/styles/scss/utilities/button-reset';

@include theme.add-component-tokens(button.$button-tokens);
@include theme.add-component-tokens(notification.$notification-tokens);
@include theme.add-component-tokens(tag.$tag-tokens);

.fullscreen {
  @include breakpoint('md') {
    position: fixed;
    margin: 0;
    z-index: 9999;
    top: 3rem;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background: $background;
    padding: 1rem 2rem;
    overflow: hidden;
  }
}

.fullscreen .preview-container {
  @include breakpoint('md') {
    height: calc(100vh - 8rem);
  }
}

.fullscreen .codeRow {
  @include breakpoint('md') {
    display: none;
  }
}

.fullscreenButton {
  display: none;
  @include breakpoint('md') {
    display: block;
    height: 2rem;
    width: 2rem;
    padding: 0;
    padding-top: 2px;
    background: none;
    outline: none;
    border: none;
    position: absolute;
    top: 0.5rem;
    right: 15.5rem; //TO-DO: figure out better way to position this for responsiveness
  }
}

.exitFullscreenButton {
  display: block;
  height: 2rem;
  width: 2rem;
  padding: 0;
  padding-top: 2px;
  background: none;
  outline: none;
  border: none;
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.knobless-container .fullscreenButton {
  right: 1rem;
}

.fullscreenButton svg {
  fill: var(--cds-icon-02);
}

.exitFullscreenButton svg {
  fill: $icon-01;
}

.fullscreenButton:hover {
  background: var(--cds-ui-03);
}

.exitFullscreenButton:hover {
  background: $ui-03;
}

.fullscreenButton:focus {
  outline: 2px solid var(--cds-focus);
}

.exitFullscreenButton:focus {
  outline: 2px solid $focus;
}

.container {
  position: relative;
  display: grid;
  width: 100%;
  overflow: hidden;
  grid-template-columns: 1fr;
  grid-template-rows: 35rem minmax(1fr, 320px);
  grid-template-areas:
    'preview'
    'editor';
  margin-top: 0;
  @include breakpoint('md') {
    grid-template-columns: 1fr 240px;
    grid-template-areas:
      'preview knobs'
      'editor editor';
  }
}

.container .preview-container,
.container .knob-container {
  scrollbar-width: none;
  &::-webkit-scrollbar {
    width: 0 !important;
  }
}

.knobless-container {
  grid-template-areas:
    'preview preview'
    'editor editor';
}

.icon-button-row {
  display: flex;
  justify-content: flex-end;
  flex-wrap: nowrap;
}

.icon-button {
  border: none;
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-self: flex-end;
  align-items: center;
  padding: $spacing-04;
  outline: none;
}

.icon-button--expand {
  position: absolute;
  top: 0;
  right: 0;
}

.icon-button svg {
  fill: var(--cds-text-01);
}

// specificity
.checkbox-wrapper.checkbox-wrapper:last-of-type {
  margin-bottom: 0;
}

.knob-container {
  --space: 0;
  grid-area: knobs;
  overflow-y: auto;
  background-color: $layer-01;
  border-left: 1px solid $ui-03;
  position: absolute;
  right: 0;
  width: 240px;
  box-shadow: -2px 2px 6px rgba(0, 0, 0, 0.2);
  height: 100%;
  max-height: 35rem;
  transition: transform $duration-moderate-01 motion('entrance');
  @include breakpoint('md') {
    position: static;
    box-shadow: none;
  }
}

// knob container fade-out effect
.zamboni {
  position: absolute;
  pointer-events: none;
  top: 25rem;
  right: 0;
  width: 239px; // 240 - 1px border
  padding-top: 10rem;
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.7) 50%,
    rgba(255, 255, 255, 1) 100%
  );
}

.knob-container--collapsed + .zamboni {
  width: 0;
}

.knob-container--collapsed {
  box-shadow: none;
  transform: translateX(240px);
}

.component-knob-title {
  height: 32px;
  background-color: $ui-03;
  padding-left: $spacing-05;
  width: 100%;
  display: flex;
  align-items: center;
  font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono',
    'Bitstream Vera Sans Mono', Courier, monospace;
  font-size: 12px;
}

.component-knob-wrapper {
  padding-top: $spacing-05;
  padding-bottom: $spacing-06;
}

.component-knob-wrapper > * + * {
  margin-top: $spacing-05;
}

.component-knob-wrapper:last-of-type {
  margin-bottom: 10rem;
}

// custom classnames are being applied to both fieldset and label
// https://github.com/carbon-design-system/carbon/issues/4572
fieldset.form-group,
fieldset[class*='--radio-button-group'] {
  padding: 1rem;
  padding-top: 0;
  margin-bottom: 0;
  border-bottom: 1px solid $ui-03;
}

fieldset.form-group:last-of-type,
fieldset[class*='--radio-button-group']:last-of-type {
  border-bottom: 0;
}

.dropdownRow {
  margin-right: 14rem;
  @include breakpoint-down('md') {
    margin-right: -1rem;
  }
}

.dropdownRow :global {
  [class*='--dropdown--open'] [class*='--list-box__menu'] {
    max-height: 20rem; //shows all theme items w/o scroll
  }

  [class*='--dropdown__wrapper'] {
    width: 50%;
  }

  [class*='--dropdown'] {
    border-color: $ui-03;
  }

  [class*='--list-box--light'][class*='--list-box--expanded'] {
    border-bottom-width: 1px;
  }

  [class*='--label'] {
    margin-left: 1rem;
  }
}

.dropdownRow .variantDropdown :global {
  [class*='--dropdown'] {
    border-left: 1px solid $ui-03;
  }
}

.hiddenDropdown {
  display: none;
  border: none;
}

.preview-container {
  height: 35rem;
  grid-area: preview;
  overflow: auto;
  padding: $spacing-05;
  border: $spacing-03 solid $white;
  background-color: var(--cds-background);
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  // prevents chrome from moving page around the component
  overflow-anchor: none;
}

// aligns our inline components (form inputs)
.preview-container > * {
  justify-content: center;
  align-items: center;
}

.preview-container :global .cds--snippet {
  justify-content: normal;
}

.editor-container {
  margin-top: 0;
  font-size: 14px;
}

.editor-container pre,
.editor-container textarea {
  // important to override react-live inline styles
  font-family: 'IBM Plex Mono', monospace !important;
  white-space: pre !important;
}

// Themes
body[data-live-preview-theme='White'] [class^='cds--tooltip'],
body[data-live-preview-theme='White']
  [class^='flatpickr-calendar'][class*='open'],
body[data-live-preview-theme='White'] ul[class^='cds--overflow-menu-options'],
.white {
  @include theme(themes.$white);
}

body[data-live-preview-theme='Gray 10'] [class^='cds--tooltip'],
body[data-live-preview-theme='Gray 10']
  [class^='flatpickr-calendar'][class*='open'],
body[data-live-preview-theme='Gray 10'] ul[class^='cds--overflow-menu-options'],
.g10 {
  @include theme(themes.$g10);
}

body[data-live-preview-theme='Gray 90'] [class^='cds--tooltip'],
body[data-live-preview-theme='Gray 90']
  [class^='flatpickr-calendar'][class*='open'],
body[data-live-preview-theme='Gray 90'] ul[class^='cds--overflow-menu-options'],
.g90 {
  @include theme(themes.$g90);
}

body[data-live-preview-theme='Gray 100'] [class^='cds--tooltip'],
body[data-live-preview-theme='Gray 100']
  [class^='flatpickr-calendar'][class*='open'],
body[data-live-preview-theme='Gray 100']
  ul[class^='cds--overflow-menu-options'],
.g100 {
  @include theme(themes.$g100);
}

//---------------------------------------
// Some style overrides for theming
//---------------------------------------
.container :global {
  // Modal within demo
  [class*='--modal'] {
    z-index: 99999;
  }

  // ClickableTile padding issue
  [class*='--tile--clickable'] {
    padding: 1rem;
  }

  [class*='accordion__content'],
  [class*='--pagination__left'],
  [class*='--pagination__text'],
  [class*='--radio-button__label'] {
    color: var(--cds-text-primary, #161616);
  }

  [class*='--snippet--multi'],
  [class*='--snippet--single'] {
    background: var(--cds-layer-01, #f4f4f4);
    color: var(--cds-text-primary, #161616);
  }

  [class*='--data-table--zebra'] tbody tr:nth-child(even) td {
    background-color: var(--cds-layer-accent-01, #e0e0e0);
    border-bottom: var(--cds-layer-accent-01, #e0e0e0);
    border-top: var(--cds-layer-accent-01, #e0e0e0);
  }

  [class*='--data-table--zebra'] tbody tr:nth-child(odd) td {
    background-color: var(--cds-layer-01, #f4f4f4);
    border-bottom: var(--cds-layer-01, #f4f4f4);
    border-top: var(--cds-layer-01, #f4f4f4);
  }

  [class*='--content-switcher-btn'] {
    height: 100%;
  }

  [class*='--loading-overlay'] {
    position: static;
  }

  [class*='--overflow-menu__icon'] {
    fill: var(--cds-icon-01, #161616);
  }

  [class$='--overflow-menu']:hover {
    background-color: var(--cds-hover-ui, #e5e5e5);
  }

  [class*='--overflow-menu'][class*='--overflow-menu--open'] {
    background-color: var(--cds-layer-01, #f4f4f4);
  }

  [class*='--search--sm'],
  [class*='--search--md'],
  [class*='--search--xl'],
  .cds--select {
    width: 50%;
  }

  [class*='--table-sort']:hover {
    background-color: var(--cds-layer-selected-hover, #cacaca);
  }

  // Checkbox uses body text
  :global(.cds--checkbox-label) {
    color: var(--cds-text-primary, #161616);
  }

  :global(.cds--checkbox:disabled + .cds--checkbox-label) {
    color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
  }
}

body {
  [class$='cds--tooltip'] {
    background-color: var(--cds-inverse-02, #393939);

    button {
      @inclue button-reset.reset();

      display: flex;
      align-items: center;
      justify-content: center;
      width: 2rem;
      height: 2rem;
      border: 1px solid theme.$border-subtle;

      svg {
        fill: theme.$background-inverse;
      }
    }
  }

  .flatpickr-calendar.open {
    background-color: var(--cds-layer-01, #ffffff);
  }

  [class*='--overflow-menu-options'][class*='--overflow-menu-options--open'] {
    background-color: var(--cds-layer-01, #f4f4f4);

    &::after {
      background-color: var(--cds-layer-01, #f4f4f4);
    }
  }

  [class$='--overflow-menu-options__option']:hover,
  [class*='--overflow-menu-options__option'][class$='--overflow-menu--divider']:hover {
    background-color: var(--cds-hover-ui, #e5e5e5);
  }

  [class$='--overflow-menu-options__option']:hover
    [class*='--overflow-menu-options'] {
    background-color: transparent;
  }

  [class*='--overflow-menu-options__btn'] {
    color: var(--cds-text-02, #525252);

    &:hover {
      color: var(--cds-text-01, #161616);
    }

    &:focus {
      outline: 2px solid var(--cds-focus, #0f62fe);
    }
  }
}

:global(.live-editor-label) {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  margin: -1px;
  clip: rect(0, 0, 0, 0);
  visibility: inherit;
  white-space: nowrap;
}