ngx-admin/src/app/pages/e-commerce/slide-out/slide-out.component.scss

@import '../../../@theme/styles/themes';
@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/breakpoints';

@include nb-install-component() {
  $slide-out-container-width: 40%;

  .show-hide-toggle {
    display: block;
    position: absolute;
    top: 1.5rem;
    @include nb-ltr(right, 1.5rem);
    @include nb-rtl(left, 1.5rem);
    cursor: pointer;
    background-color: transparent;
    z-index: 2;
  }

  .slide-out-container {
    @include nb-ltr {
      border-top-right-radius: nb-theme(card-border-radius);
      border-bottom-right-radius: nb-theme(card-border-radius);
    }
    @include nb-rtl {
      border-top-left-radius: nb-theme(card-border-radius);
      border-bottom-left-radius: nb-theme(card-border-radius);
    }
    position: absolute;
    padding: 1.5rem;
    width: $slide-out-container-width;
  }

  .slide-out-container,
  .slide-out-container::before {
    display: block;
    height: 100%;
    top: 0;
    overflow: hidden;
    transition: all 0.2s ease-out;
  }

  .slide-out-container::before {
    content: '';
    @include nb-ltr(right, 0);
    @include nb-rtl(left, 0);
    width: 100%;
    position: absolute;
    background: nb-theme(slide-out-background);
    box-shadow: nb-theme(slide-out-shadow-color);
    @include nb-rtl(box-shadow, nb-theme(slide-out-shadow-color-rtl));
    opacity: 0.9;
    z-index: 1;
  }

  .slide-out-container.collapsed {
    @include nb-ltr(left, calc(100% - 6rem));
    @include nb-rtl(right, calc(100% - 6rem));
  }

  .slide-out-container.expanded {
    left: calc(100% + 1px - #{$slide-out-container-width});
    @include nb-rtl(left, auto);
    @include nb-rtl(right, calc(100% - #{$slide-out-container-width}));
  }

  .content-wrapper {
    z-index: 1;
    position: relative;
    width: 100%;
    margin: 0 6rem;
    transition: all 0.2s ease-out;
  }

  .expanded .content-wrapper {
    margin: 0;
  }

  @include media-breakpoint-down(md) {
    $slide-out-container-width: 50%;

    .slide-out-container {
      width: $slide-out-container-width;
    }

    .slide-out-container.expanded {
      left: calc(100% + 1px - #{$slide-out-container-width});
      @include nb-rtl(right, calc(100% + 1px - #{$slide-out-container-width}));
    }
  }

  @include media-breakpoint-down(is) {
    $slide-out-container-width: 100%;

    .show-hide-toggle {
      right: 0.5rem;
    }

    .slide-out-container {
      width: $slide-out-container-width;
    }

    .slide-out-container.collapsed {
      left: calc(100% + 1px - 3rem);
      @include nb-rtl(right, calc(100% - 3rem));
    }

    .slide-out-container.expanded {
      left: calc(100% + 1px - #{$slide-out-container-width});
      @include nb-rtl(right, calc(100% - #{$slide-out-container-width}));
    }
  }
}