support dark mode and add custom card component

2020-04-09 13:01:06 -04:00
parent 89c53c508b
commit 6e1828ff63
11 changed files with 185 additions and 63 deletions
@@ -0,0 +1,36 @@
+// Import theming functions
+@import '~@angular/material/theming';
+
+@mixin tui-card-theme($theme) {
+    // Extract the palettes you need from the theme definition.
+    $primary: map-get($theme, primary);
+    $accent: map-get($theme, accent);
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+
+    .tui-card {
+        background-color: white;
+        border-radius: 4px;
+        height: 100%;
+    }
+
+    .tui-card-title {
+        padding: 16px 16px 0 16px;
+        font-size: mat-font-size($tech-ui-typography, subheading-2);
+        color: mat-color($primary);
+    }
+
+    .tui-card-content {
+        padding: 16px;
+    }
+
+    .tui-button-toggle .mat-button-toggle-appearance-standard .mat-button-toggle-label-content  {
+        line-height: 34px;
+    }
+
+    @media (prefers-color-scheme: dark) {
+        .tui-card {
+            background-color: map_get($mat-grey, 800);
+        }
+    }
+}