matcha-theme 1.0.1

package/components/matcha-scrollbar.scss

@@ -0,0 +1,36 @@
+@mixin matcha-scrollbar-theme($theme) {
+    $is-dark: map-get($theme, is-dark);
+    $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);
+
+    :not(.is-mobile) {
+        ::-webkit-scrollbar {
+            width: 16px;
+            height: 16px;
+            background-color: rgba(0, 0, 0, 0);
+        }
+
+        ::-webkit-scrollbar:hover {
+            background-color: rgba(0, 0, 0, 0.12);
+        }
+
+        ::-webkit-scrollbar-thumb {
+            border: 4px solid transparent;
+            box-shadow: inset 0 0 0 12px #88888833;
+            border-radius: 12px;
+        }
+
+        ::-webkit-scrollbar-thumb:active {
+            box-shadow: inset 0 0 0 12px #88888844;
+            border-radius: 12px;
+        }
+
+        ::-webkit-scrollbar-corner {
+            background: rgba(0, 0, 0, 0);
+        }
+    }
+
+}

package/components/matcha-scrollbox-shadow.scss

@@ -0,0 +1,127 @@
+@mixin matcha-scrollbox-shadow($theme) {
+    $is-dark: map-get($theme, is-dark);
+    $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);
+
+    // Drop shadow inside of area when scrolled vertically
+    .scrollbox,
+    .scrollbox-vertical,
+    .scrollbox-v,
+    .scrollbox-y {
+        overflow: overlay;
+        background:
+            /* Shadow covers */
+            linear-gradient(map-get($background, card) 30%, rgba(255, 255, 255, 0)),
+            linear-gradient(rgba(255, 255, 255, 0), map-get($background, card) 70%) 0 100%,
+            /* Shadows */
+            linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 50%),
+            linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 50%) 0 100%;
+
+        background-repeat: no-repeat;
+        background-color: map-get($background, card);
+        background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
+
+        /* Opera doesn't support this in the shorthand */
+        background-attachment: local, local, scroll, scroll;
+    }
+
+    // Drop shadow inside of area when scrolled horizontally
+    .scrollbox-horizontal,
+    .scrollbox-h,
+    .scrollbox-x {
+        box-shadow: 0px -16px 0px 0px inset map-get($background, card), 20px 0 16px -24px inset #000000,
+            -20px 0 16px -24px inset #000000, 0px 2px 2px 0px #00000009, 0px 2px 2px 0px #00000009,
+            0px 2px 2px 0px #00000009;
+        overflow: auto;
+        background: linear-gradient(90deg,
+                rgba(0, 0, 0, 0.1),
+                rgba(0, 0, 0, 0) calc(0% + 10px),
+                rgba(0, 0, 0, 0) calc(100% - 10px),
+                rgba(0, 0, 0, 0.1));
+
+        background: -moz-linear-gradient(90deg,
+                rgba(0, 0, 0, 0.1),
+                rgba(0, 0, 0, 0) calc(0% + 10px),
+                rgba(0, 0, 0, 0) calc(100% - 10px),
+                rgba(0, 0, 0, 0.1));
+
+        background: -webkit-linear-gradient(0deg,
+                rgba(0, 0, 0, 0.1),
+                rgba(0, 0, 0, 0) calc(0% + 10px),
+                rgba(0, 0, 0, 0) calc(100% - 10px),
+                rgba(0, 0, 0, 0.1));
+    }
+
+    .scrollbox-horizontal-content,
+    .scrollbox-h-content,
+    .scrollbox-x-content {
+        background: map-get($background, card);
+        background: linear-gradient(90deg,
+                map-get($background, card) 10px,
+                map-get($background, card),
+                rgba(255, 255, 255, 0) calc(0% + 10px),
+                rgba(255, 255, 255, 0) calc(100% - 10px),
+                map-get($background, card) 10px,
+                map-get($background, card));
+        background: -moz-linear-gradient(90deg,
+                map-get($background, card) 10px,
+                map-get($background, card),
+                rgba(255, 255, 255, 0) calc(0% + 10px),
+                rgba(255, 255, 255, 0) calc(100% - 10px),
+                map-get($background, card) 10px,
+                map-get($background, card));
+        background: -webkit-linear-gradient(0deg,
+                map-get($background, card) 10px,
+                map-get($background, card),
+                rgba(255, 255, 255, 0) calc(0% + 10px),
+                rgba(255, 255, 255, 0) calc(100% - 10px),
+                map-get($background, card) 10px,
+                map-get($background, card));
+    }
+
+    .scrollbox-horizontal-content-background,
+    .scrollbox-h-content-background,
+    .scrollbox-x-content-background {
+        background: map-get($background, background);
+        background: linear-gradient(90deg,
+                map-get($background, background) 10px,
+                map-get($background, background),
+                rgba(255, 255, 255, 0) calc(0% + 10px),
+                rgba(255, 255, 255, 0) calc(100% - 10px),
+                map-get($background, background) 10px,
+                map-get($background, background));
+        background: -moz-linear-gradient(90deg,
+                map-get($background, background) 10px,
+                map-get($background, background),
+                rgba(255, 255, 255, 0) calc(0% + 10px),
+                rgba(255, 255, 255, 0) calc(100% - 10px),
+                map-get($background, background) 10px,
+                map-get($background, background));
+        background: -webkit-linear-gradient(0deg,
+                map-get($background, background) 10px,
+                map-get($background, background),
+                rgba(255, 255, 255, 0) calc(0% + 10px),
+                rgba(255, 255, 255, 0) calc(100% - 10px),
+                map-get($background, background) 10px,
+                map-get($background, background));
+    }
+
+    .scrollbox-background {
+        overflow: overlay;
+        background:
+            /* Shadow covers */
+            linear-gradient(map-get($background, background) 30%, rgba(255, 255, 255, 0)),
+            linear-gradient(rgba(255, 255, 255, 0), map-get($background, background) 70%) 0 100%,
+            /* Shadows */
+            linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 50%),
+            linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 50%) 0 100%;
+        background-repeat: no-repeat;
+        background-color: map-get($background, background);
+        background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
+        /* Opera doesn't support this in the shorthand */
+        background-attachment: local, local, scroll, scroll;
+    }
+}

package/components/matcha-table.scss

@@ -0,0 +1,259 @@
+@mixin _matcha-table-theme-container-shadow-property($theme) {
+    $background: map-get($theme, background);
+
+    box-shadow: 0px -16px 0px 0px inset map-get($background, card), 20px 0 16px -24px inset #000000,
+        -20px 0 16px -24px inset #000000, 0px 2px 2px 0px #00000009, 0px 2px 2px 0px #00000009,
+        0px 2px 2px 0px #00000009;
+}
+
+@mixin _matcha-table-theme-shadow-property($theme) {
+    $background: map-get($theme, background);
+
+    background: map-get($background, card);
+    background: linear-gradient(90deg,
+            map-get($background, card) 0px,
+            map-get($background, card) 0px,
+            rgba(255, 255, 255, 0) calc(0% + 40px),
+            rgba(255, 255, 255, 0) calc(100% - 40px),
+            map-get($background, card) calc(100% - 0px));
+    background: -moz-linear-gradient(90deg,
+            map-get($background, card) 0px,
+            map-get($background, card) 0px,
+            rgba(255, 255, 255, 0) calc(0% + 40px),
+            rgba(255, 255, 255, 0) calc(100% - 40px),
+            map-get($background, card) calc(100% - 0px));
+    background: -webkit-linear-gradient(0deg,
+            map-get($background, card) 0px,
+            map-get($background, card) 0px,
+            rgba(255, 255, 255, 0) calc(0% + 40px),
+            rgba(255, 255, 255, 0) calc(100% - 40px),
+            map-get($background, card) calc(100% - 0px));
+}
+
+@mixin matcha-table-theme($theme) {
+    $is-dark-theme: map-get($theme, is-dark);
+    $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);
+
+    // Vai direto na tag body
+    body.is-mobile {
+        .table-container {
+            .table-container-shadow {
+                overflow: auto;
+                @include _matcha-table-theme-container-shadow-property($theme);
+
+                .mat-table {
+                    tbody {
+                        @include _matcha-table-theme-shadow-property($theme);
+                    }
+                }
+            }
+        }
+    }
+
+    .table-container {
+        width: 100%;
+
+        .mat-table {
+            .published {
+                color: map-get($foreground, green);
+                // margin-top: 5px;
+            }
+
+            .notPublished {
+                color: map-get($foreground, amber);
+                // margin-top: 5px;
+            }
+        }
+
+        .table-container-shadow {
+            overflow: auto;
+            background: map-get($background, card);
+            border-radius: 8px;
+            box-shadow: 0px 2px 2px 0px #00000009, 0px 2px 2px 0px #00000009, 0px 2px 2px 0px #00000009;
+            @include _matcha-table-theme-container-shadow-property($theme);
+
+            .mat-table {
+                tbody {
+                    @include _matcha-table-theme-shadow-property($theme);
+                }
+            }
+
+            &.ps--active-x {
+                @include _matcha-table-theme-container-shadow-property($theme);
+
+                .mat-table {
+                    @include _matcha-table-theme-shadow-property($theme);
+                }
+            }
+        }
+
+        .mat-table,
+        .mat-expansion-panel {
+            thead {
+                background: map-get($background, card);
+
+                th {
+                    height: 64px;
+                }
+            }
+
+            tr {
+                &.mat-row {
+
+                    // &:nth-child(even){background: map-get($background, card);}
+                    &:nth-child(odd) {
+                        background: map-get($background, table-row-hover);
+                    }
+                }
+
+                td,
+                th {
+                    touch-action: unset !important;
+                    font-size: 14px;
+
+                    &:first-child {
+                        padding-left: 24px;
+                    }
+
+                    &:last-child {}
+
+                    .clickable {
+                        cursor: pointer;
+                    }
+                }
+            }
+
+            .td-duble-line {
+                height: 48px;
+            }
+
+            .td-with-image,
+            .td-with-checkbox,
+            .td-with-icon,
+            .td-duble-line {
+                display: flex;
+                align-items: center;
+
+                .td-text-aside {
+                    display: inline-block;
+                    width: calc(100% - 48px);
+                }
+
+                .avatar {
+                    width: 48px;
+                    min-width: 48px;
+                    height: 48px;
+                    line-height: 48px;
+                    border-width: 0;
+                    margin-right: 24px;
+                }
+
+                .thumbnail {
+                    width: 72px;
+                    min-width: 72px;
+                    height: 48px;
+                    border-radius: 8px;
+                    margin: 0 8px 0 0;
+
+                    &-portrait {
+                        width: 56px;
+                        min-width: 56px;
+                        height: 72px;
+                        border-radius: 8px;
+                        margin: 0 8px 0 0;
+                    }
+                }
+            }
+
+            .mat-header-cell {
+                color: map-get($foreground, text);
+                font-family: "CircularStd-Bold";
+                font-size: 16px;
+                padding-left: 8px;
+                padding-right: 8px;
+                border-bottom-width: 0px;
+            }
+
+            .mat-cell {
+                color: map-get($foreground, label);
+                font-size: 14px;
+                padding-left: 8px;
+                padding-right: 8px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                text-align: start;
+                border-bottom-width: 0px;
+
+                &.cdk-column-menu {
+                    text-align: left;
+                }
+            }
+
+            .last {
+                display: flex;
+                justify-content: space-between;
+                width: 100%;
+                align-items: center;
+
+                span {
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
+
+                mat-menu {
+                    display: none;
+                }
+            }
+        }
+
+        table {
+            width: 100%;
+        }
+
+        .badge {
+            border-radius: 8px;
+            padding: 8px;
+            color: map-get($foreground, text-inverse);
+
+            &.live-badge {
+                background-color: map-get($background, cyan);
+                font-size: 14px;
+            }
+
+            &.cell-badge {
+                background-color: map-get($background, purple);
+                font-size: 14px;
+            }
+
+            &.cult-badge {
+                background-color: map-get($background, blue);
+                font-size: 14px;
+            }
+
+            &.new-visitor-badge {
+                background-color: map-get($primary, default);
+                color: map-get($primary, default-contrast);
+                font-size: 14px;
+                line-height: 14px;
+                display: inline-block;
+                width: auto;
+            }
+        }
+    }
+
+    // X-Large devices (big desktops, 1440px and up < 1920)
+    @media (min-width: 1440px) {
+        .table-container {
+            .mat-table {
+                .mat-cell {
+                    font-size: 16px;
+                }
+            }
+        }
+    }
+}