ngx-admin/src/app/pages/ui-features/buttons/buttons.component.scss

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

@include nb-install-component() {
  /deep/ {
    $button-size: 50px;

    .container-title {
      color: nb-theme(color-fg);
      font-family: nb-theme(font-secondary);
      margin-bottom: 0.5rem;
    }

    .header {
      color: nb-theme(color-fg-header);
      font-size: 0.875rem;
    }

    .subheader {
      font-size: 0.75rem;
      font-weight: nb-theme(font-weight-light);
      color: nb-theme(color-fg);
    }

    .btn-demo {
      width: 180px;
    }

    .state-container {
      display: flex;

      &:not(:last-child) {
        margin-bottom: 1rem;
      }

      .state-value {
        width: $button-size;
        height: $button-size;
        border-radius: nb-theme(btn-border-radius);
      }

      .state-details {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 1rem;
        height: $button-size;
      }
    }

    .example-container {
      padding-right: 0;
    }

    .example-container .container-btn {
      margin-bottom: 1.5rem;
    }

    .block-level-buttons .btn-group {
      margin-bottom: 1rem;
    }

    .icon-buttons .btn-group:not(:last-child) {
      margin-bottom: 1rem;
    }

    .icon-buttons .icon-button-examples {
      display: flex;
      justify-content: flex-start;

      button {
        margin-right: 2rem;
        min-width: 4rem;
      }
    }

    .icon-buttons .icon-button-examples:not(:last-child) {
      margin-bottom: 1rem;
    }
  }

  @include media-breakpoint-down(xxxl) {
    ngx-default-buttons /deep/ nb-card-header {
      flex-direction: column;
      margin-bottom: 0.5rem;
    }
  }

  @include media-breakpoint-down(sm) {
    ngx-action-groups /deep/ nb-card-body {
      flex-direction: column;
      align-items: flex-start;
      padding: 0.75rem;

      .action-groups-header {
        margin: 0 0 0.5rem 0.25rem;
      }
    }
  }

  @include media-breakpoint-down(is) {

    ngx-action-groups /deep/ nb-card-body {

      nb-action {
        padding: 0.75rem;
      }

      .control-icon, .start-search {
        font-size: 1.75rem;
      }

      .user-container {
        font-size: 1rem;
      }

      .user-picture {
        height: 1.75rem;
        width: 1.75rem;
      }
    }
  }

  @include media-breakpoint-down(xs) {

    /deep/.icon-buttons .icon-button-examples {
      button {
        margin-right: 1rem;
      }
    }

    ngx-action-groups /deep/ nb-card-body {

      nb-action {
        padding: 0.5rem;
      }

      .control-icon, .start-search {
        font-size: 1.5rem;
      }

      .user-container {
        font-size: 0.75rem;
      }

      .user-picture {
        height: 1.5rem;
        width: 1.5rem;
      }
    }

    ngx-labeled-actions-group /deep/ nb-card-body {
      padding-left: 0;
      padding-right: 0;
    }

    ngx-default-buttons /deep/ nb-card-header {
      flex-direction: column;
      margin-bottom: 0.5rem;
    }

    ngx-block-level-buttons /deep/ {
      .btn-primary {
        padding: 0.75rem 1rem;
      }
    }
  }
}