matcha-theme 18.0.27 → 18.1.28

package/components/matcha-progress-bar.scss

@@ -0,0 +1,107 @@
+/*
+How to use
+@import '~matcha-ds/assets/scss/components/matcha-header.scss';
+@include matcha-progress-bar-theme($theme);
+*/
+// -----------------------------------------------------------------------------------------------------
+// Progress-bar [Theme]
+// -----------------------------------------------------------------------------------------------------
+@mixin matcha-progress-bar-theme($theme) {
+    $accent: map-get($theme, accent);
+    $warn: map-get($theme, warn);
+    $primary: map-get($theme, primary);
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+
+    .matcha-progress-bar {
+
+        // matcha-progress-bar__field
+        &__field {
+            background: map-get($background, disabled);
+            transition: all 300ms linear;
+        }
+
+        // matcha-progress-bar__progress
+        &__progress {
+            transition: all 300ms ease-out;
+
+            &::before {
+                content: '';
+                border-radius: 8px;
+                background-size: 50px 50px;
+                background-image: linear-gradient(-45deg,
+                        rgba(0, 0, 0, 0) 25%,
+                        transparent 25%,
+                        transparent 50%,
+                        rgba(0, 0, 0, 0) 50%,
+                        rgba(0, 0, 0, 0) 75%,
+                        transparent 75%,
+                        transparent);
+                animation: progress-bar-animation 2s linear infinite;
+                width: 100%;
+                display: flex;
+                transition: all 300ms linear;
+
+            }
+        }
+
+        @keyframes progress-bar-animation {
+            0% {
+                background-position: 50px 50px;
+            }
+
+            100% {
+                background-position: 0px 0px;
+            }
+        }
+
+        // matcha-progress-bar__progress
+        &__label {
+            color: map-get($foreground, text-inverse);
+        }
+    }
+}
+
+// -----------------------------------------------------------------------------------------------------
+// Progress-bar [Style]
+// -----------------------------------------------------------------------------------------------------
+.matcha-progress-bar {
+    width: 100%;
+    display: flex;
+
+    // matcha-progress-bar__field
+    &__field {
+        border-radius: 8px;
+        display: flex;
+        width: 100%;
+    }
+
+    // matcha-progress-bar__progress
+    &__progress {
+        line-height: 12px;
+        font-size: 12px;
+        height: 16px;
+        border-radius: 8px;
+        display: flex;
+    }
+
+    // matcha-progress-bar__progress
+    &__label {
+        line-height: 16px;
+        padding-left: 8px;
+        display: flex;
+        position: relative;
+    }
+}
+
+// Medium devices (landscapes and tablets, 600px and up < 1024px )
+@media (min-width: 600px) {}
+
+// Large devices (tablets and small monitors, 1024px and up < 1440px)
+@media (min-width: 1024px) {}
+
+// X-Large devices (big desktops, 1440px and up < 1920)
+@media (min-width: 1440px) {}
+
+// XX-Large devices (larger desktops, 1920px and up)
+@media (min-width: 1920px) {}

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,279 @@
+@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,
+                .mat-sort {
+                    tbody {
+                        @include _matcha-table-theme-shadow-property($theme);
+                    }
+                }
+            }
+        }
+    }
+
+    .table-container {
+        width: 100%;
+
+        .mat-table,
+        .mat-sort {
+            .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,
+            .mat-sort {
+                tbody {
+                    @include _matcha-table-theme-shadow-property($theme);
+                }
+            }
+
+            &.ps--active-x {
+                @include _matcha-table-theme-container-shadow-property($theme);
+
+                .mat-table,
+                .mat-sort {
+                    @include _matcha-table-theme-shadow-property($theme);
+                }
+            }
+        }
+
+        .mat-table,
+        .mat-sort,
+        .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, 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";
+                font-weight: 700;
+                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-sort {
+                .mat-cell {
+                    font-size: 16px;
+                }
+            }
+        }
+    }
+}