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

@import '../../../@theme/styles/variables';
@import '~@akveo/nga-theme/styles/global/bootstrap/buttons';

@include nga-install-component() {
  /deep/ {
    $button-size: 50px;
    $button-border-radius: 12px;

    .btn-demo {
      width: 180px;
    }

    .state-container {
      display: flex;

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

      .state-value {
        width: $button-size;
        height: $button-size;
        border-radius: $button-border-radius;
      }

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

        .header {
          color: white;
        }

        .subheader {
          font-size: 0.875rem;
          line-height: 1rem;
          font-weight: 300;
        }
      }
    }

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

    .example-container .container-title {
      font-family: nga-theme(font-secondary);
      margin-bottom: 1rem;
    }

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

    .actions-groups {
      display: flex !important;
    }

    .actions-groups .container-title {
      font-family: nga-theme(font-secondary);
      display: flex;
      flex: 1;
      flex-direction: column;
      justify-content: center;
      color: white;
    }

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

    .button-groups .toolbars-container {
      display: flex;
    }

    .button-groups .pagination-container {
      flex: 1;
      margin-right: 1rem;
    }

    .button-groups .icon-toolbar-container {
      flex: 1;
    }

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

    .icon-buttons .icon-button-examples {
      display: flex;
      justify-content: space-between;
    }

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