ngx-admin/docs/app/blocks/components/live-example-block/live-example-block.component.scss

@import '../../../@theme/styles/themes';

@include nb-install-component() {

  // TODO: move some variables in Nebular themes
  // colors
  $action-bg: white;
  $action-fg: nb-theme(color-fg-heading-light);
  $block-bg-default: #ebeff5;
  $block-bg-cosmic: #2f296b;
  $block-fg-cosmic: #7d838b;
  $block-bg-corporate: #f1f5f8;

  display: flex;
  flex-direction: column;
  padding: 0.5rem 1rem 2.5rem 1.5rem;
  border-radius: 0.5rem;
  position: relative;

  .header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.875rem;
  }

  .title,
  .actions {
    margin-top: 0.5rem;
  }

  .title {
    margin-right: 1rem;
    font-weight: bold;
    text-transform: capitalize;
  }

  .actions {
    display: flex;
    width: 100%;

    .icon {
      font-size: 0.95rem;
    }
  }

  .action-item {
    background-color: $action-bg;
    border-radius: 0.375rem;
    height: 100%;
    line-height: 1;
    border: none;
    color: $action-fg;
    padding: 0.5rem 1rem;
    margin-left: 0.625rem;
    cursor: pointer;

    &:first-child {
      margin-left: 0;
    }

    &:hover, &:focus {
      text-decoration: none;
    }
  }

  .action-selector {
    position: relative;

    .action-item {
      padding: 0;
      color: transparent;
    }

    .icon {
      color: $action-fg;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    /* Target IE9 - IE11 */
    select::-ms-expand {
      display: none;
    }

    select {
      font-size: 0.875rem;
      appearance: none;
    }
  }

  &.theme-default {
    background-color: $block-bg-default;
  }

  &.theme-cosmic {
    background-color: $block-bg-cosmic;

    .title {
      color: white;
    }
    .action-item {
      color: $block-fg-cosmic;
    }
  }

  &.theme-corporate {
    background-color: $block-bg-corporate;
  }

  .iframe-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  iframe {
    width: 100%;
    border: none;
    transform: translateZ(0);

    &.loading {
      visibility: hidden;
    }
  }

  .icon-loading {
    animation: rotation 2s infinite linear;
    color: $action-fg;
    font-size: 1.5rem;
    font-weight: normal;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  @-webkit-keyframes rotation {
    from {
      -webkit-transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(359deg);
    }
  }

  @media screen and (min-width: 23em) {
    .action-selector {
      .action-item {
        padding: 0.5rem 1rem;
        color: $action-fg;
      }
      select.action-item {
        padding: 0 2.5rem;
      }

      .icon {
        left: 1.25rem;
        transform: translate(0, -50%);
      }
    }

    .actions {
      width: auto;
    }
  }
}