@inchurch/matcha-theme 20.0.3

package/vendors/charts.scss

@@ -0,0 +1,92 @@
+@mixin vendor-chart($theme) {
+    $primary: map-get($theme, primary);
+    $accent: map-get($theme, accent);
+    $warn: map-get($theme, warn);
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+
+    // Fixer wrappers
+    .matcha-card,
+    .matcha-card-flat,
+    .matcha-section {
+
+        //Google Chart
+        google-chart {
+            width: 100% !important;
+            max-width: 100% !important;
+            min-width: 100% !important;
+            height: 100%;
+        }
+
+        google-chart * {
+            max-width: 100% !important;
+        }
+    }
+
+    #ngxcharts {
+        ngx-charts-chart {
+            svg {
+                height: 400px;
+                width: 400px;
+
+                g {}
+            }
+        }
+    }
+
+    .chart-legend {
+        background-color: transparent;
+        padding: 0;
+        width: 200px !important;
+        min-width: 200px;
+        max-width: 300px;
+        display: -webkit-box;
+        display: flex;
+        right: 0;
+
+        div {
+            width: 100% !important;
+        }
+
+        .legend-labels {
+            background: transparent !important;
+
+            .active {
+                .legend-label-text {
+                    color: map-get($foreground, label);
+                }
+            }
+        }
+
+        .legend-label-color {
+            border-radius: 12px !important;
+        }
+
+        .legend-label-text {
+            font-weight: normal;
+            font-size: 16px !important;
+            line-height: 20px;
+            color: map-get($foreground, foreground);
+        }
+    }
+
+    // Large devices (tablets and small monitors, 1024px and up < 1440px)
+    @media (min-width: 1024px) {
+        .chart-legend {
+            margin: 0 24px 0 0;
+            border-radius: 8px;
+            position: absolute;
+            background-color: map-get($background, background-alpha);
+            @include elevation(1);
+        }
+    }
+
+    .pie-chart {
+        .pie-label {
+            fill: map-get($foreground, label);
+            font-size: 16px !important;
+            line-height: 20px;
+            padding: 8px;
+        }
+    }
+}

package/vendors/ng5-slider.scss

@@ -0,0 +1,56 @@
+@mixin vendor-ng-5-theme($theme) {
+    $accent: map-get($theme, accent);
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+
+    .ng5-slider {
+        &.animate {
+            .ng5-slider-pointer {
+                transition: all 50ms linear !important;
+            }
+        }
+
+        .ng5-slider-bubble {
+            bottom: 20px;
+            padding: 0;
+            margin: 0px auto;
+            background: map-get($background, card);
+            color: map-get($foreground, label);
+            transition: all 50ms linear !important;
+        }
+
+        .ng5-slider-bar {
+            background-color: map-get($background, disabled);
+        }
+
+        .ng5-slider-pointer,
+        .ng5-slider-selection {
+            background-color: map-get($accent, default);
+        }
+
+        .ng5-slider-pointer:after {
+            width: 16px;
+            height: 16px;
+            position: absolute;
+            top: 8px;
+            left: 8px;
+            border-radius: 8px;
+            background-color: map-get($background, card);
+        }
+
+        .ng5-slider-pointer:active:after {
+            background-color: map-get($background, card);
+        }
+
+        .ng5-slider-pointer.ng5-slider-active:after {
+            width: 16px;
+            height: 16px;
+            position: absolute;
+            top: 8px;
+            left: 8px;
+            border-radius: 8px;
+            background: map-get($background, background);
+            background-color: map-get($background, background);
+        }
+    }
+}

package/vendors/ngx-material-timepicker.scss

@@ -0,0 +1,50 @@
+@mixin vendor-ngx-material-timepicker($theme) {
+    $primary: map-get($theme, primary);
+    $accent: map-get($theme, accent);
+    $warn: map-get($theme, warn);
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+
+    ngx-material-timepicker-container {
+        z-index: 10000;
+
+        .timepicker__header,
+        .clock-face__number>span.active {
+            background-color: map-get($accent, default) !important;
+        }
+
+        .timepicker-dial__control {
+            color: map-color($foreground, foreground-inverse, 0.5) !important;
+        }
+
+        .clock-face__number>span.active,
+        .dial__control,
+        .timepicker-dial__item_active,
+        .timepicker-dial__time {
+            color: map-get($foreground, foreground-inverse) !important;
+        }
+
+        .timepicker-button {
+            color: map-get($accent, default) !important;
+        }
+
+        .timepicker__body,
+        .timepicker__actions {
+            background-color: map-get($background, card) !important;
+        }
+
+        .clock-face__clock-hand,
+        .clock-face__clock-hand_minute {
+            background-color: map-get($accent, default) !important;
+        }
+
+        .clock-face__clock-hand_minute::before {
+            border-color: map-get($accent, default) !important;
+            background-color: map-get($background, card) !important;
+        }
+
+        .clock-face {
+            background-color: map-get($background, background) !important;
+        }
+    }
+}