feat(stark-ui): expose single file (src/assets/stark-ui-bundle.scss) …

…to import all component styles/theming

  - updated showcase/starter
    - import `stark-ui-bundle.scss`
    - remove `_stark-styles.scss`
    - remove `~@angular/material/theming` from `_theme.scss` (imported with stark-ui/.../theming)
    - remove additional themes
  - refactor stark-ui/assets/*.scss
  - added documentation

ISSUES CLOSED: #103

docs/stark-ui/GETTING_STARTED.md

@@ -0,0 +1,10 @@
+# Getting started
+
+The recommended way to get started with **Stark** is to download the [starter](../../starter) and run `npm install`.
+
+## Modules
+
+The starter comes with most things preconfigured and all styling needed for stark-ui is imported by default.
+
+In `src/styles/styles.scss` all the styles and theming of the components is imported via `"~@nationalbankbelgium/stark-ui/assets/stark-ui-bundle";`.
+If you want to change the styling of a component you will need to copy all the imports from `stark-ui-bundle.scss` and replace the ones you want to change with your own implementation.

packages/stark-ui/README.md

@@ -9,3 +9,5 @@
 
 Stark's UI module (aka stark-ui) provides the UI related features of the Stark framework.
 It includes the UI component kit of Stark as well as other services and utilities.
+
+**[Getting Started](../../docs/stark-ui/GETTING_STARTED.md)**

packages/stark-ui/assets/stark-ui-bundle.scss

@@ -0,0 +1,49 @@
+/* Stark styles */
+@import "../assets/theming/base-theme";
+@import "../assets/styles/base";
+@import "../assets/styles/components/button-theme";
+@import "../assets/styles/components/button";
+@import "../assets/styles/components/icon";
+@import "../assets/styles/components/card-theme";
+@import "../assets/styles/components/card";
+@import "../assets/styles/components/header-theme";
+@import "../assets/styles/components/header";
+/* Stark components */
+@import "../src/modules/app-logo/components/app-logo-theme";
+@import "../src/modules/app-logo/components/app-logo.component";
+@import "../src/modules/app-data/components/app-data-theme";
+@import "../src/modules/app-data/components/app-data.component";
+@import "../src/modules/app-footer/components/app-footer-theme";
+@import "../src/modules/app-footer/components/app-footer.component";
+@import "../src/modules/app-menu/components/app-menu-theme";
+@import "../src/modules/app-menu/components/app-menu.component";
+@import "../src/modules/action-bar/components/action-bar-theme";
+@import "../src/modules/action-bar/components/action-bar.component";
+@import "../src/modules/app-sidebar/components/app-sidebar-theme";
+@import "../src/modules/app-sidebar/components/app-sidebar.component";
+@import "../src/modules/breadcrumb/components/breadcrumb.component";
+@import "../src/modules/collapsible/components/collapsible-theme";
+@import "../src/modules/collapsible/components/collapsible.component";
+@import "../src/modules/date-range-picker/components/date-range-picker.component";
+@import "../src/modules/language-selector/components/language-selector.component";
+@import "../src/modules/message-pane/components/message-pane-theme";
+@import "../src/modules/message-pane/components/message-pane.component";
+@import "../src/modules/minimap/components/minimap-theme";
+@import "../src/modules/minimap/components/minimap.component";
+@import "../src/modules/slider/components/slider-theme";
+@import "../src/modules/pagination/components/pagination-theme";
+@import "../src/modules/pagination/components/pagination.component";
+@import "../src/modules/pretty-print/components/pretty-print.component";
+@import "../src/modules/table/components/table-theme";
+@import "../src/modules/table/components/table.component";
+@import "../src/modules/table/components/dialogs/multisort.component";
+@import "../src/modules/dropdown/components/dropdown-theme";
+@import "../src/modules/toast-notification/components/toast-notification-theme";
+@import "../src/modules/toast-notification/components/toast-notification.component";
+@import "../src/modules/dropdown/components/dropdown.component";
+/* Stark session-ui pages */
+@import "../src/modules/session-ui/pages/session-ui-pages";
+@import "../src/modules/session-ui/pages/login/login-page.component";
+@import "../src/modules/session-ui/pages/preloading/preloading-page.component";
+@import "../src/modules/session-ui/pages/session-expired/session-expired-page.component";
+@import "../src/modules/session-ui/pages/session-logout/session-logout-page.component";

packages/stark-ui/assets/styles/_base.scss

@@ -17,59 +17,33 @@ body {
   margin-bottom: 64px;
 }
 
-.stark-header-container {
-  padding: 0 15px;
-}
-
 .stark-main-container {
   align-self: stretch;
   min-height: 670px;
   padding: 64px 15px;
 }
 
-.stark-basic-table {
-  border-collapse: collapse;
-  border-radius: 2px;
-  border-spacing: 0;
-  margin: 0 0 32px;
-  width: 100%;
-  box-shadow: $elevation-4;
-
-  th {
-    font-size: mat-font-size($typography-config, subheading-2);
-    font-weight: mat-font-weight($typography-config, subheading-2);
-    line-height: mat-line-height($typography-config, subheading-2);
-    padding: 13px 32px;
-    text-align: left;
-  }
-
-  td {
-    padding: 8px 16px;
-  }
-}
-
 @media screen {
   .stark-app {
     display: flex;
     flex-direction: column;
     height: 100%;
-    & .content-wrapper {
+
+    .content-wrapper {
       flex: 1;
       display: flex;
       overflow-y: hidden;
       position: relative;
     }
-    & .stark-app-menu {
-      display: flex;
-      flex-direction: column;
-    }
-    & main {
+
+    main {
       flex: 1;
       display: flex;
       flex-direction: column;
       overflow-y: auto;
       -webkit-overflow-scrolling: touch;
-      & > ui-view {
+
+      > ui-view {
         flex: 1 0 auto;
       }
     }
@@ -91,73 +65,6 @@ body {
   }
 }
 
-/********** COLORS **********/
-body {
-  background-color: $offwhite;
-  color: $primary-dark-text-color;
-}
-
-a {
-  color: $md-primary-700;
-}
-
-/* utility class to fill to max. size in flex systems */
-.flex-fill {
-  flex: 1;
-}
-
-td {
-  background: #fff;
-  border-bottom: solid 1px #fafafa;
-}
-
-@media screen and (max-width: 1230px) {
-  .stark-header-extra,
-  .stark-page-header-actions {
-    margin-right: 15px;
-  }
-
-  .stark-header-container,
-  .stark-fixed-header-container .stark-generic-search .stark-generic-search-container .stark-header-container,
-  .stark-table-action-bar-container {
-    box-sizing: border-box;
-    padding-left: 15px;
-    padding-right: 15px;
-  }
-}
-
-/* stark session ui pages */
-.stark-session-ui-page {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  box-sizing: border-box;
-  max-width: 100%;
-  width: 500px;
-  overflow: hidden;
-  border: solid 1px $divider-color;
-  box-shadow: $elevation-2;
-  & header {
-    padding: 16px;
-    background: mat-color(map-get($base-theme, primary-palette), 900) url(/assets/images/app-header.png) top right no-repeat;
-    border-radius: 2px 2px 0 0;
-    & i {
-      margin: auto;
-      display: block;
-      width: 200px;
-      height: 60px;
-      background: url("/assets/stark-core/logo/stark_logo_transparent.svg") no-repeat;
-      background-size: 100% 100%;
-    }
-  }
-  & content {
-    display: block;
-    padding: 16px;
-    background: #fff;
-  }
-}
-
 .stark-loading {
   margin: 16px auto;
   box-sizing: border-box;
@@ -187,3 +94,8 @@ td {
     }
   }
 }
+
+/* utility class to fill to max. size in flex systems */
+.flex-fill {
+  flex: 1;
+}

packages/stark-ui/assets/styles/components/_button-theme.scss

@@ -0,0 +1,53 @@
+@mixin stark-button-color($color, $contrast) {
+  &.mat-button,
+  &.mat-icon-button,
+  &.mat-stroked-button {
+    color: $color;
+
+    .mat-button-focus-overlay {
+      background-color: rgba($color: $color, $alpha: 0.12);
+    }
+
+    .mat-ripple-element {
+      background-color: rgba($color: $color, $alpha: 0.1);
+    }
+  }
+  &.mat-flat-button,
+  &.mat-raised-button,
+  &.mat-fab,
+  &.mat-mini-fab {
+    color: $contrast;
+    background-color: $color;
+
+    .mat-ripple-element {
+      background-color: rgba($color: $contrast, $alpha: 0.1);
+    }
+  }
+  .mat-icon-button {
+    .mat-ripple-element {
+      background-color: rgba($color: $color, $alpha: 0.2);
+    }
+  }
+}
+
+button {
+  &.mat-success {
+    @include stark-button-color(mat-color($success-palette, 500), mat-contrast($success-palette, 500));
+  }
+
+  &.mat-alert {
+    @include stark-button-color(mat-color($alert-palette, 500), mat-contrast($alert-palette, 500));
+  }
+
+  &.mat-alt {
+    @include stark-button-color(mat-color($grey-palette, 900), mat-contrast($grey-palette, 900));
+  }
+
+  &.mat-neutral {
+    @include stark-button-color(mat-color($grey-palette, 400), mat-contrast($grey-palette, 400));
+  }
+
+  &.mat-white {
+    @include stark-button-color(#fff, $dark-primary-text);
+  }
+}

packages/stark-ui/assets/styles/components/_button.scss

@@ -0,0 +1,9 @@
+.mat-button,
+.mat-icon-button,
+.mat-stroked-button,
+.mat-flat-button,
+.mat-raised-button,
+.mat-fab,
+.mat-mini-fab {
+  text-transform: uppercase;
+}

packages/stark-ui/assets/styles/components/_card.scss

@@ -0,0 +1,66 @@
+.mat-card {
+  &.stark-card {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 32px;
+    padding: 0;
+    .mat-card-header {
+      align-items: center;
+      background-color: mat-color(map-get($base-theme, primary-palette), 800);
+      color: mat-contrast(map-get($base-theme, primary-palette), 800);
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 16px;
+      padding: 8px 16px;
+      .mat-card-header-text {
+        flex-grow: 1;
+        margin: 0;
+      }
+      .mat-card-title,
+      .mat-card-title > * {
+        color: inherit;
+        margin: 0;
+      }
+      .mat-card-subtitle,
+      .mat-card-subtitle > * {
+        color: inherit;
+        margin: 0;
+        opacity: 0.7;
+      }
+    }
+    .mat-card-content,
+    .mat-card-actions {
+      margin: 0 16px 16px;
+      padding: 0;
+      &:last-child {
+        margin-bottom: 16px;
+      }
+      > div.stark-full-width {
+        margin-left: -16px;
+        margin-right: -16px;
+      }
+    }
+  }
+}
+
+@media #{$tablet-query} {
+  .mat-card {
+    &.stark-card {
+      .mat-card-header {
+        padding: 8px 24px;
+        margin-bottom: 24px;
+      }
+      .mat-card-content,
+      .mat-card-actions {
+        margin: 0 24px 24px;
+        &:last-child {
+          margin-bottom: 24px;
+        }
+        > div.stark-full-width {
+          margin-left: -24px;
+          margin-right: -24px;
+        }
+      }
+    }
+  }
+}