From a37889b4105ce5c621394b21ac6e8b7829ecdd46 Mon Sep 17 00:00:00 2001
From: Sergey Andrievskiy <s.andrievskiy@akveo.com>
Date: Fri, 21 Jun 2019 23:44:15 +0300
Subject: [PATCH] refactor: comment button styles

---
 .../action-groups.component.scss              | 154 ++++++-------
 .../forms/buttons/buttons.component.scss      | 206 +++++++++---------
 .../labeled-actions-group.component.scss      | 120 +++++-----
 .../shape-buttons.component.scss              |  60 ++---
 .../size-buttons/size-buttons.component.scss  |  52 ++---
 5 files changed, 296 insertions(+), 296 deletions(-)

diff --git a/src/app/pages/forms/buttons/action-groups/action-groups.component.scss b/src/app/pages/forms/buttons/action-groups/action-groups.component.scss
index c46dba43..e7d85187 100644
--- a/src/app/pages/forms/buttons/action-groups/action-groups.component.scss
+++ b/src/app/pages/forms/buttons/action-groups/action-groups.component.scss
@@ -1,77 +1,77 @@
-@import '../../../../@theme/styles/themes';
-@import '~@nebular/theme/components/card/card.component.theme';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
-
-@include nb-install-component() {
-
-  nb-card-body {
-    display: flex;
-    align-items: center;
-  }
-
-  .action-groups-header {
-    flex-basis: 20%;
-
-    color: nb-theme(card-header-fg-heading);
-    font-family: nb-theme(card-header-font-family);
-    font-size: nb-theme(card-header-font-size);
-    font-weight: nb-theme(card-header-font-weight);
-  }
-
-  .nb-actions {
-    flex-basis: 80%;
-  }
-
-  @include media-breakpoint-down(sm) {
-    nb-card-body {
-      flex-direction: column;
-      align-items: flex-start;
-      padding: 0.75rem;
-
-      .action-groups-header {
-        @include nb-ltr(margin, 0 0 0.5rem 0.25rem);
-        @include nb-rtl(margin, 0 0.25rem 0.5rem 0);
-      }
-    }
-
-    nb-action {
-      padding: 0 0.5rem;
-      ::ng-deep .control-icon {
-        font-size: 1.75rem;
-      }
-    }
-    nb-user ::ng-deep {
-      .user-container {
-        font-size: 0.875rem;
-      }
-      .user-picture {
-        height: 1.75rem;
-        width: 1.75rem;
-      }
-    }
-  }
-
-  @include media-breakpoint-down(xs) {
-
-    nb-action {
-      padding: 0 0.375rem;
-      ::ng-deep .control-icon {
-        font-size: 1.5rem;
-      }
-    }
-    nb-user ::ng-deep {
-      .user-container {
-        font-size: 0.75rem;
-      }
-      .user-picture {
-        height: 1.5rem;
-        width: 1.5rem;
-      }
-    }
-    nb-card-body {
-      padding-left: 0;
-      padding-right: 0;
-    }
-  }
-}
+//@import '../../../../@theme/styles/themes';
+//@import '~@nebular/theme/components/card/card.component.theme';
+//@import '~bootstrap/scss/mixins/breakpoints';
+//@import '~@nebular/theme/styles/global/breakpoints';
+//
+//@include nb-install-component() {
+//
+//  nb-card-body {
+//    display: flex;
+//    align-items: center;
+//  }
+//
+//  .action-groups-header {
+//    flex-basis: 20%;
+//
+//    color: nb-theme(card-header-fg-heading);
+//    font-family: nb-theme(card-header-font-family);
+//    font-size: nb-theme(card-header-font-size);
+//    font-weight: nb-theme(card-header-font-weight);
+//  }
+//
+//  .nb-actions {
+//    flex-basis: 80%;
+//  }
+//
+//  @include media-breakpoint-down(sm) {
+//    nb-card-body {
+//      flex-direction: column;
+//      align-items: flex-start;
+//      padding: 0.75rem;
+//
+//      .action-groups-header {
+//        @include nb-ltr(margin, 0 0 0.5rem 0.25rem);
+//        @include nb-rtl(margin, 0 0.25rem 0.5rem 0);
+//      }
+//    }
+//
+//    nb-action {
+//      padding: 0 0.5rem;
+//      ::ng-deep .control-icon {
+//        font-size: 1.75rem;
+//      }
+//    }
+//    nb-user ::ng-deep {
+//      .user-container {
+//        font-size: 0.875rem;
+//      }
+//      .user-picture {
+//        height: 1.75rem;
+//        width: 1.75rem;
+//      }
+//    }
+//  }
+//
+//  @include media-breakpoint-down(xs) {
+//
+//    nb-action {
+//      padding: 0 0.375rem;
+//      ::ng-deep .control-icon {
+//        font-size: 1.5rem;
+//      }
+//    }
+//    nb-user ::ng-deep {
+//      .user-container {
+//        font-size: 0.75rem;
+//      }
+//      .user-picture {
+//        height: 1.5rem;
+//        width: 1.5rem;
+//      }
+//    }
+//    nb-card-body {
+//      padding-left: 0;
+//      padding-right: 0;
+//    }
+//  }
+//}
diff --git a/src/app/pages/forms/buttons/buttons.component.scss b/src/app/pages/forms/buttons/buttons.component.scss
index e786b26f..10bda4e9 100644
--- a/src/app/pages/forms/buttons/buttons.component.scss
+++ b/src/app/pages/forms/buttons/buttons.component.scss
@@ -1,103 +1,103 @@
-@import '../../../@theme/styles/themes';
-@import '~@nebular/bootstrap/styles/buttons';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
-
-@include nb-install-component() {
-  ::ng-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);
-
-        @include nb-for-theme(corporate) {
-          border-radius: nb-theme(btn-semi-round-border-radius);
-        }
-      }
-
-      .state-details {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        margin-left: 1rem;
-        margin-right: 1rem;
-        height: $button-size;
-      }
-    }
-
-    .example-container {
-      @include nb-ltr(padding-right, 0);
-      @include nb-rtl(padding-left, 0);
-    }
-
-    .example-container .container-btn {
-      margin-bottom: 1.5rem;
-    }
-
-    .block-level-buttons .btn-group {
-      margin-bottom: 1rem;
-    }
-  }
-
-  @include media-breakpoint-down(is) {
-    ngx-default-buttons ::ng-deep nb-card-header {
-      flex-direction: column;
-      align-items: left;
-
-      span {
-        margin-bottom: 1rem;
-      }
-    }
-  }
-
-  @include media-breakpoint-down(xs) {
-
-    ::ng-deep.icon-buttons .icon-button-examples {
-      button {
-        @include nb-ltr(margin-right, 1rem);
-        @include nb-rtl(margin-left, 1rem);
-      }
-    }
-
-    ngx-default-buttons ::ng-deep nb-card-header {
-      flex-direction: column;
-      margin-bottom: 0.5rem;
-    }
-
-    ngx-block-level-buttons ::ng-deep {
-      .btn-primary {
-        padding: 0.75rem 1rem;
-      }
-    }
-  }
-}
+//@import '../../../@theme/styles/themes';
+//@import '~@nebular/bootstrap/styles/buttons';
+//@import '~bootstrap/scss/mixins/breakpoints';
+//@import '~@nebular/theme/styles/global/breakpoints';
+//
+//@include nb-install-component() {
+//  ::ng-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);
+//
+//        @include nb-for-theme(corporate) {
+//          border-radius: nb-theme(btn-semi-round-border-radius);
+//        }
+//      }
+//
+//      .state-details {
+//        display: flex;
+//        flex-direction: column;
+//        justify-content: center;
+//        margin-left: 1rem;
+//        margin-right: 1rem;
+//        height: $button-size;
+//      }
+//    }
+//
+//    .example-container {
+//      @include nb-ltr(padding-right, 0);
+//      @include nb-rtl(padding-left, 0);
+//    }
+//
+//    .example-container .container-btn {
+//      margin-bottom: 1.5rem;
+//    }
+//
+//    .block-level-buttons .btn-group {
+//      margin-bottom: 1rem;
+//    }
+//  }
+//
+//  @include media-breakpoint-down(is) {
+//    ngx-default-buttons ::ng-deep nb-card-header {
+//      flex-direction: column;
+//      align-items: left;
+//
+//      span {
+//        margin-bottom: 1rem;
+//      }
+//    }
+//  }
+//
+//  @include media-breakpoint-down(xs) {
+//
+//    ::ng-deep.icon-buttons .icon-button-examples {
+//      button {
+//        @include nb-ltr(margin-right, 1rem);
+//        @include nb-rtl(margin-left, 1rem);
+//      }
+//    }
+//
+//    ngx-default-buttons ::ng-deep nb-card-header {
+//      flex-direction: column;
+//      margin-bottom: 0.5rem;
+//    }
+//
+//    ngx-block-level-buttons ::ng-deep {
+//      .btn-primary {
+//        padding: 0.75rem 1rem;
+//      }
+//    }
+//  }
+//}
diff --git a/src/app/pages/forms/buttons/labeled-actions-group/labeled-actions-group.component.scss b/src/app/pages/forms/buttons/labeled-actions-group/labeled-actions-group.component.scss
index cbc998dd..dd5c7295 100644
--- a/src/app/pages/forms/buttons/labeled-actions-group/labeled-actions-group.component.scss
+++ b/src/app/pages/forms/buttons/labeled-actions-group/labeled-actions-group.component.scss
@@ -1,60 +1,60 @@
-@import '../../../../@theme/styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
-
-@include nb-install-component() {
-
-  nb-actions > nb-action {
-    padding: 0;
-  }
-
-  nb-action {
-    i {
-      color: nb-theme(color-fg);
-      font-size: 2.5rem;
-      @include nb-ltr(margin-right, 1rem);
-      @include nb-rtl(margin-left, 1rem);
-
-      @include nb-for-theme(corporate) {
-        color: nb-theme(actions-fg);
-      }
-    }
-
-    span {
-      font-family: nb-theme(font-secondary);
-      font-weight: nb-theme(font-weight-bold);
-      color: nb-theme(color-fg-heading);
-      text-transform: uppercase;
-    }
-  }
-
-  @include media-breakpoint-down(md) {
-    nb-actions nb-action {
-      padding: 0 0.75rem;
-    }
-  }
-  @include media-breakpoint-down(sm) {
-    nb-card-body {
-      padding: 1rem;
-    }
-
-    nb-action {
-      font-size: 0.75rem;
-      i {
-        font-size: 2rem;
-        @include nb-ltr(margin-right, 0.5rem);
-        @include nb-rtl(margin-left, 0.5rem);
-      }
-    }
-  }
-
-  @include media-breakpoint-down(is) {
-    nb-action i {
-      font-size: 1.75rem;
-      margin: 0;
-    }
-    span {
-      display: none;
-    }
-  }
-}
+//@import '../../../../@theme/styles/themes';
+//@import '~bootstrap/scss/mixins/breakpoints';
+//@import '~@nebular/theme/styles/global/breakpoints';
+//
+//@include nb-install-component() {
+//
+//  nb-actions > nb-action {
+//    padding: 0;
+//  }
+//
+//  nb-action {
+//    i {
+//      color: nb-theme(color-fg);
+//      font-size: 2.5rem;
+//      @include nb-ltr(margin-right, 1rem);
+//      @include nb-rtl(margin-left, 1rem);
+//
+//      @include nb-for-theme(corporate) {
+//        color: nb-theme(actions-fg);
+//      }
+//    }
+//
+//    span {
+//      font-family: nb-theme(font-secondary);
+//      font-weight: nb-theme(font-weight-bold);
+//      color: nb-theme(color-fg-heading);
+//      text-transform: uppercase;
+//    }
+//  }
+//
+//  @include media-breakpoint-down(md) {
+//    nb-actions nb-action {
+//      padding: 0 0.75rem;
+//    }
+//  }
+//  @include media-breakpoint-down(sm) {
+//    nb-card-body {
+//      padding: 1rem;
+//    }
+//
+//    nb-action {
+//      font-size: 0.75rem;
+//      i {
+//        font-size: 2rem;
+//        @include nb-ltr(margin-right, 0.5rem);
+//        @include nb-rtl(margin-left, 0.5rem);
+//      }
+//    }
+//  }
+//
+//  @include media-breakpoint-down(is) {
+//    nb-action i {
+//      font-size: 1.75rem;
+//      margin: 0;
+//    }
+//    span {
+//      display: none;
+//    }
+//  }
+//}
diff --git a/src/app/pages/forms/buttons/shape-buttons/shape-buttons.component.scss b/src/app/pages/forms/buttons/shape-buttons/shape-buttons.component.scss
index 996e6821..fb7509b2 100644
--- a/src/app/pages/forms/buttons/shape-buttons/shape-buttons.component.scss
+++ b/src/app/pages/forms/buttons/shape-buttons/shape-buttons.component.scss
@@ -1,30 +1,30 @@
-@import '../../../../@theme/styles/themes';
-@import '~@nebular/bootstrap/styles/buttons';
-
-@include nb-install-component() {
-
-  nb-card-body {
-    padding: 0 0 29px;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-  }
-
-  .shape-container {
-    margin: 1.25rem 1.25rem 0;
-  }
-
-  .container-title {
-    margin-bottom: 0.25rem;
-  }
-
-  .subheader {
-    margin-bottom: 1rem;
-    font-size: 0.875rem;
-
-    span:nth-child(2) {
-      color: nb-theme(color-fg-heading);
-      font-weight: nb-theme(font-weight-bold);
-    }
-  }
-}
+//@import '../../../../@theme/styles/themes';
+//@import '~@nebular/bootstrap/styles/buttons';
+//
+//@include nb-install-component() {
+//
+//  nb-card-body {
+//    padding: 0 0 29px;
+//    display: flex;
+//    flex-wrap: wrap;
+//    justify-content: space-between;
+//  }
+//
+//  .shape-container {
+//    margin: 1.25rem 1.25rem 0;
+//  }
+//
+//  .container-title {
+//    margin-bottom: 0.25rem;
+//  }
+//
+//  .subheader {
+//    margin-bottom: 1rem;
+//    font-size: 0.875rem;
+//
+//    span:nth-child(2) {
+//      color: nb-theme(color-fg-heading);
+//      font-weight: nb-theme(font-weight-bold);
+//    }
+//  }
+//}
diff --git a/src/app/pages/forms/buttons/size-buttons/size-buttons.component.scss b/src/app/pages/forms/buttons/size-buttons/size-buttons.component.scss
index 67d7ae28..245f5219 100644
--- a/src/app/pages/forms/buttons/size-buttons/size-buttons.component.scss
+++ b/src/app/pages/forms/buttons/size-buttons/size-buttons.component.scss
@@ -1,26 +1,26 @@
-@import '../../../../@theme/styles/themes';
-@import '~@nebular/bootstrap/styles/buttons';
-
-@include nb-install-component() {
-
-  nb-card-body {
-    padding: 0 1.25rem 1.25rem 0;
-    display: flex;
-    flex-wrap: wrap;
-  }
-
-  .container-title {
-    margin-bottom: 0.25rem;
-  }
-
-  .size-container {
-    margin: 1.25rem 0 0 1.25rem;
-  }
-
-  .subheader {
-    margin-bottom: 0.75rem;
-    font-size: 0.875rem;
-    font-weight: nb-theme(font-weight-bolder);
-    color: nb-theme(color-fg-heading);
-  }
-}
+//@import '../../../../@theme/styles/themes';
+//@import '~@nebular/bootstrap/styles/buttons';
+//
+//@include nb-install-component() {
+//
+//  nb-card-body {
+//    padding: 0 1.25rem 1.25rem 0;
+//    display: flex;
+//    flex-wrap: wrap;
+//  }
+//
+//  .container-title {
+//    margin-bottom: 0.25rem;
+//  }
+//
+//  .size-container {
+//    margin: 1.25rem 0 0 1.25rem;
+//  }
+//
+//  .subheader {
+//    margin-bottom: 0.75rem;
+//    font-size: 0.875rem;
+//    font-weight: nb-theme(font-weight-bolder);
+//    color: nb-theme(color-fg-heading);
+//  }
+//}