fix(table): make styles accessable for angular & vue applications

baloise · Aug 6, 2021 · f5b5de5 · f5b5de5
1 parent f6efce9
commit f5b5de5
Show file tree

Hide file tree

Showing 5 changed files with 126 additions and 126 deletions.
diff --git a/examples/.gitignore b/examples/.gitignore
@@ -0,0 +1 @@
+/ng
diff --git a/packages/components/src/components/bal-table/bal-table.scss b/packages/components/src/components/bal-table/bal-table.scss
@@ -9,127 +9,3 @@ bal-table.is-fullwidth {
   display: flex;
   width: 100%;
 }
-
-@import 'node_modules/ag-grid-community/src/styles/ag-grid.scss';
-@import 'node_modules/ag-grid-community/dist/styles/mixins/_ag-theme-params.scss';
-@import 'node_modules/ag-grid-community/src/styles/ag-theme-alpine/sass/ag-theme-alpine-mixin';
-
-bal-table,
-bal-table.ag-theme-alpine {
-  @include ag-theme-alpine(
-    (
-      header-background-color: $white-bis,
-      borders: false,
-      borders-critical: true,
-      border-color: $blue,
-      header-foreground-color: $blue,
-      header-column-separator: false,
-      row-border-color: $blue-light-line,
-      selected-row-background-color: $blue-light-hover,
-      odd-row-background-color: null,
-      row-hover-color: $white-bis,
-      range-selection-border-color: $primary,
-      checkbox-border-radius: 0,
-      checkbox-checked-color: $primary,
-      checkbox-unchecked-color: $blue-line,
-    )
-  );
-
-  .ag-cell {
-    font-family: $body-family;
-
-    .bal-table-cell-text > bal-icon,
-    .bal-table-cell-text > bal-text {
-      display: inline-block;
-    }
-    .bal-table-cell-text > bal-icon {
-      vertical-align: sub;
-      margin-top: -6px;
-      margin-left: 0px;
-      margin-right: 4px;
-
-      svg {
-        margin-bottom: 1px;
-      }
-    }
-
-    .bal-table-cell-text {
-      vertical-align: baseline;
-
-      bal-text + bal-icon {
-        margin-left: 4px;
-        margin-right: 0px;
-      }
-    }
-
-    > bal-tag {
-      margin-top: -10px;
-    }
-
-    > bal-button:not(.is-fullwidth) {
-      margin-top: -2px;
-    }
-
-    > bal-button.is-fullwidth {
-      margin-top: 4px;
-    }
-
-    > bal-icon {
-      display: inline-block;
-      vertical-align: middle;
-      margin-top: -6px;
-      margin-left: 0px;
-      margin-right: 4px;
-
-      &.is-right {
-        margin-left: 4px;
-        margin-right: 0px;
-      }
-    }
-  }
-
-  .ag-checkbox-input-wrapper {
-    outline: none !important;
-    box-shadow: none !important;
-
-    &::before,
-    &::after {
-      display: inline-block;
-      position: absolute;
-      background-color: transparent;
-      background-position: center;
-      background-repeat: no-repeat;
-      background-size: 16px 16px;
-    }
-
-    &::before {
-      content: '';
-      left: 0;
-      top: 0;
-      height: 16px;
-      width: 16px;
-      border: 1px solid $blue-line;
-    }
-
-    &::after {
-      content: none;
-      left: 5px !important;
-      top: 2px !important;
-      width: 6px;
-      height: 9px;
-      border-bottom: 2px solid $blue;
-      border-right: 2px solid $blue;
-      border-top: 0;
-      border-left: 0;
-      -moz-transform: rotate(45deg);
-      -ms-transform: rotate(45deg);
-      -o-transform: rotate(45deg);
-      -webkit-transform: rotate(45deg);
-      transform: rotate(45deg);
-    }
-
-    &.ag-checked::after {
-      content: '';
-    }
-  }
-}
diff --git a/packages/components/src/components/bal-table/index.html b/packages/components/src/components/bal-table/index.html
@@ -22,7 +22,7 @@ <h2 class="title is-size-2">Basic</h2>
       <p>[Go to the Bulma documentation](https://bulma.io/documentation/elements/table/)</p>
       <section>
         <bal-card>
-          <table class="table is-fullwidth is-striped is-hoverable">
+          <table class="table is-fullwidth is-striped is-hoverable p-0">
             <thead>
               <th>Selected</th>
               <th>Name</th>
@@ -82,7 +82,7 @@ <h2 class="title is-size-2">Advanced with AG-Grid</h2>
       <p>For the advanced tables with sorting and filtering we use the library [AG Grid](https://www.ag-grid.com/)</p>
       <section>
         <bal-card>
-          <bal-table id="myGrid" style="height: 250px; width: 100%"></bal-table>
+          <bal-table class="p-0" id="myGrid" style="height: 250px; width: 100%"></bal-table>
         </bal-card>
       </section>
       <script>

diff --git a/packages/components/src/styles/elements/table.scss b/packages/components/src/styles/elements/table.scss
@@ -64,3 +64,124 @@ table.table {
     }
   }
 }
+
+@import 'node_modules/ag-grid-community/src/styles/ag-grid.scss';
+
+.ag-theme-alpine {
+  @include ag-theme-alpine(
+    (
+      header-background-color: $white-bis,
+      borders: false,
+      borders-critical: true,
+      border-color: $blue,
+      header-foreground-color: $blue,
+      header-column-separator: false,
+      row-border-color: $blue-light-line,
+      selected-row-background-color: $blue-light-hover,
+      odd-row-background-color: null,
+      row-hover-color: $white-bis,
+      range-selection-border-color: $primary,
+      checkbox-border-radius: 0,
+      checkbox-checked-color: $primary,
+      checkbox-unchecked-color: $blue-line,
+    )
+  );
+
+  .ag-cell {
+    font-family: $body-family;
+
+    .bal-table-cell-text > bal-icon,
+    .bal-table-cell-text > bal-text {
+      display: inline-block;
+    }
+    .bal-table-cell-text > bal-icon {
+      vertical-align: sub;
+      margin-top: -6px;
+      margin-left: 0px;
+      margin-right: 4px;
+
+      svg {
+        margin-bottom: 1px;
+      }
+    }
+
+    .bal-table-cell-text {
+      vertical-align: baseline;
+
+      bal-text + bal-icon {
+        margin-left: 4px;
+        margin-right: 0px;
+      }
+    }
+
+    > bal-tag {
+      margin-top: -10px;
+    }
+
+    > bal-button:not(.is-fullwidth) {
+      margin-top: -2px;
+    }
+
+    > bal-button.is-fullwidth {
+      margin-top: 4px;
+    }
+
+    > bal-icon {
+      display: inline-block;
+      vertical-align: middle;
+      margin-top: -6px;
+      margin-left: 0px;
+      margin-right: 4px;
+
+      &.is-right {
+        margin-left: 4px;
+        margin-right: 0px;
+      }
+    }
+  }
+
+  .ag-checkbox-input-wrapper {
+    outline: none !important;
+    box-shadow: none !important;
+
+    &::before,
+    &::after {
+      display: inline-block;
+      position: absolute;
+      background-color: transparent;
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: 16px 16px;
+    }
+
+    &::before {
+      content: '';
+      left: 0;
+      top: 0;
+      height: 16px;
+      width: 16px;
+      border: 1px solid $blue-line;
+    }
+
+    &::after {
+      content: none;
+      left: 5px !important;
+      top: 2px !important;
+      width: 6px;
+      height: 9px;
+      border-bottom: 2px solid $blue;
+      border-right: 2px solid $blue;
+      border-top: 0;
+      border-left: 0;
+      -moz-transform: rotate(45deg);
+      -ms-transform: rotate(45deg);
+      -o-transform: rotate(45deg);
+      -webkit-transform: rotate(45deg);
+      transform: rotate(45deg);
+    }
+
+    &.ag-checked::after {
+      content: '';
+    }
+  }
+}
diff --git a/packages/components/src/styles/global.scss b/packages/components/src/styles/global.scss
@@ -2,6 +2,8 @@
 @import 'node_modules/@baloise/design-system-fonts/scss/fonts.scss';
 @import './elements/notices.scss';
 @import './layout/sticky-footer.scss';
+@import 'node_modules/ag-grid-community/dist/styles/mixins/_ag-theme-params.scss';
+@import 'node_modules/ag-grid-community/src/styles/ag-theme-alpine/sass/ag-theme-alpine-mixin.scss';
 
 .bal-app {
   position: relative;