styles.scss

/*
 Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
*/

@use '../internal/styles' as styles;
@use '../internal/styles/tokens' as awsui;
@use '../internal/styles/foundation' as foundation;
@use '../internal/hooks/focus-visible' as focus-visible;
@use './background-inline-svg.scss' as utils;
@use './ace-editor';
@use './pane';

.code-editor {
  @include styles.styles-reset;
  display: inline-block;
  border: awsui.$border-item-width solid awsui.$color-border-code-editor-default;
  border-radius: awsui.$border-radius-code-editor;
  width: 100%;
}

.resizable-box {
  position: relative;
  width: 100%;
}

.resizable-box-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 10; // above editor, when editor is overflowing

  width: awsui.$space-l;
  height: awsui.$space-l;

  background-repeat: no-repeat;
  background-origin: content-box;
  box-sizing: border-box;
  background-position: bottom right;
  background-size: awsui.$space-l;
  @include utils.background-inline-svg(
    $path: './assets/resize-handler.svg',
    $stroke: 'colorStrokeCodeEditorResizeHandler'
  );

  cursor: ns-resize;
}

.editor {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  &:focus {
    @include styles.focus-highlight(3px);
    position: absolute;
    overflow: visible;
  }
}

.code-editor-refresh > .resizable-box > .editor {
  border-top-left-radius: calc(awsui.$border-radius-code-editor - awsui.$border-item-width);
  border-top-right-radius: calc(awsui.$border-radius-code-editor - awsui.$border-item-width);
}

.status-bar {
  display: flex;
  vertical-align: middle;

  border-top: awsui.$border-item-width solid awsui.$color-border-code-editor-default;
  background-color: awsui.$color-background-code-editor-status-bar;
  &-with-hidden-pane {
    border-bottom-left-radius: awsui.$border-radius-code-editor;
    border-bottom-right-radius: awsui.$border-radius-code-editor;
  }

  @include styles.text-wrapping;

  &__left {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    padding-left: awsui.$space-l;
    border-right: awsui.$border-item-width solid awsui.$color-border-code-editor-default;
  }

  &__left-virtual {
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  &__right {
    display: flex;
    align-items: center;
  }

  &__language-mode,
  &__cursor-position {
    display: inline-block;
    color: awsui.$color-text-body-default;
    padding: awsui.$space-scaled-xs awsui.$space-s;
  }

  &__cog-button {
    padding: calc(#{awsui.$space-scaled-xxs} - 1px) calc(#{awsui.$space-xs} - 2px);
  }
}

.status-bar-virtual {
  @include styles.awsui-util-hide;
}

.tab-button {
  position: relative;
  display: inline-block;
  padding: awsui.$space-scaled-xs awsui.$space-s;
  line-height: inherit;
  color: awsui.$color-text-status-error;
  background: none;
  border: none;
  font-weight: bold;
  outline: none;
  cursor: pointer;
  z-index: 1;

  &--refresh {
    padding-bottom: calc(#{awsui.$space-scaled-xs} + #{awsui.$border-active-width} - 2px);
  }

  &::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: awsui.$border-active-width;
    border-radius: awsui.$border-radius-tabs-focus-ring;
    background: awsui.$color-text-status-error;
    opacity: 0;
  }

  &--active::after {
    opacity: 1;
  }

  &--refresh::after {
    @include styles.with-motion {
      transition: opacity awsui.$motion-duration-refresh-only-medium awsui.$motion-easing-refresh-only-c;
    }
  }

  &:hover {
    color: awsui.$color-text-code-editor-tab-button-error;
    background: awsui.$color-text-status-error;
  }

  &--disabled {
    font-weight: normal;
    color: awsui.$color-text-code-editor-status-bar-disabled;
    cursor: default;

    &:hover {
      color: awsui.$color-text-code-editor-status-bar-disabled;
      background: transparent;
    }

    &::after {
      display: none;
    }
  }

  @include focus-visible.when-visible {
    @include styles.focus-highlight(awsui.$space-code-editor-status-focus-outline-gutter);
  }

  &--divider {
    display: inline-block;
    height: awsui.$font-body-m-line-height;
    width: awsui.$border-code-editor-status-divider-width;
    background: awsui.$color-border-tabs-divider;
    vertical-align: middle;
  }

  &--errors,
  &--warnings {
    /* used in test-utils */
  }
}

$default-height: 480px;
.loading-screen,
.error-screen {
  display: flex;
  align-items: center;
  justify-content: center;

  height: $default-height;

  color: awsui.$color-text-body-secondary;
  background: awsui.$color-background-code-editor-loading;
  border-radius: awsui.$border-radius-code-editor;
}

.error-screen {
  color: awsui.$color-text-status-error;
}