matcha-theme 1.0.1

package/components/matcha-header.scss

@@ -0,0 +1,326 @@
+/*
+How to use
+@import '~matcha-ds/assets/scss/components/matcha-header.scss';
+@include matcha-headers-theme($theme);
+*/
+// -----------------------------------------------------------------------------------------------------
+// Headers [Theme]
+// -----------------------------------------------------------------------------------------------------
+@mixin matcha-header-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-header {
+
+        // matcha-header__content
+        &__content {
+
+            // matcha-header__content__title
+            &__title {
+
+                // matcha-header__content__title__icon
+                &__icon {
+                    color: map-get($foreground, label);
+                }
+            }
+
+            &__options {
+                background: map-get($background, card);
+                @include elevation(1);
+            }
+        }
+    }
+
+    @media (min-width: 1024px) {
+        .matcha-header {
+
+            // matcha-header__content
+            &__content {
+                background: map-get($background, card);
+                @include elevation(1);
+
+                // matcha-header__content__title
+                &__title {
+
+                    // matcha-header__content__title__icon
+                    &__icon {
+                        color: map-get($foreground, label);
+                    }
+                }
+
+                &__options {
+                    background: transparent;
+                    @include elevation(0);
+                }
+            }
+        }
+
+    }
+
+    // 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) {}
+}
+
+// -----------------------------------------------------------------------------------------------------
+// Headers [Style]
+// -----------------------------------------------------------------------------------------------------
+.matcha-header {
+
+    // matcha-header__content
+    &__content {
+        // align-content: center;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        flex-direction: row;
+        justify-content: space-between;
+        width: 100%;
+        height: auto;
+
+        >div:nth-child(n + 2) {
+            margin-top: 8px;
+        }
+
+
+        // matcha-header__content--few-options
+        &--few-options {
+            .matcha-header__content__options__buttons {
+                display: flex;
+            }
+        }
+
+        // matcha-header__content--full-options
+        &--full-options {
+            .matcha-header__content__options__buttons {
+                display: flex;
+            }
+
+            .main-btn-new {
+                display: none;
+            }
+
+            .float-btn-new {
+                display: inline-block;
+            }
+        }
+
+        // matcha-header__content__title
+        &__title {
+            font-size: 20px;
+            font-family: "CircularStd-Bold", "Helvetica Neue", "Arial", sans-serif;
+            margin: 0 16px 0 0;
+            line-height: 48px;
+            min-height: 48px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: flex;
+            align-items: center;
+
+            // matcha-header__content__title__icon
+            &__icon {
+                font-size: 32px;
+                line-height: 32px;
+                width: 32px;
+                height: 32px;
+                margin: 0px 16px 0 0px;
+            }
+
+            // matcha-header__content__title__label
+            &__label {
+                line-height: 24px;
+                display: -webkit-box;
+                -webkit-line-clamp: 2;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                word-break: break-word;
+                white-space: initial;
+
+                -webkit-box-orient: vertical;
+
+                text-transform: capitalize;
+            }
+
+        }
+
+        // matcha-header__content__options
+        &__options {
+            display: flex;
+            margin: 0;
+            flex-direction: column-reverse;
+            justify-content: flex-end;
+            width: 100%;
+            padding: 16px;
+            border-radius: 8px;
+
+            >div:nth-child(n + 2) {
+                margin-bottom: 8px;
+            }
+
+            // matcha-header__content__options__form
+            &__form {
+                display: flex;
+                width: 100%;
+                height: 48px;
+                margin-top: 0px;
+
+                form {
+                    display: flex;
+                    width: 100%;
+                    height: 48px;
+                    margin-top: 0px !important;
+
+                    // Deprecated warning
+                    // All angular material classes shuld become agnostics
+                    .mat-form-field {
+                        width: 100%;
+                        margin: 0 0 0 0 !important;
+
+                        .mat-form-field-wrapper {
+                            margin: 0
+                        }
+
+                        .mat-form-field-outline-end {
+                            border-radius: 0 0 0 0 !important;
+                        }
+                    }
+                }
+
+                .btn-search-filter {
+                    margin: 0 0 0 -2px !important;
+                    border-radius: 0 8px 8px 0 !important;
+                }
+            }
+
+            // matcha-header__content__options__field
+            &__field {
+                display: flex;
+                width: 100%;
+                height: 48px;
+                margin-top: 0px;
+
+                form {
+                    display: flex;
+                    width: 100%;
+                    height: 48px;
+                    margin-top: 0px !important;
+                }
+
+                // Deprecated warning
+                // All angular material classes shuld become agnostics
+                .mat-form-field {
+                    width: 100%;
+                    margin: 0 0 0 0 !important;
+
+                    .mat-form-field-wrapper {
+                        margin: 0
+                    }
+                }
+
+            }
+
+            // matcha-header__content__options__buttons
+            &__buttons {
+
+                button {
+                    &:nth-child(n):not(.float-btn-new):not(.btn-search-filter) {
+                        margin: 0 8px 0 0;
+                    }
+
+                    &:first-child {
+                        margin: 0 8px 0 0;
+                    }
+                }
+            }
+        }
+
+        .float-btn-new {
+            position: fixed;
+            z-index: 9999;
+            top: calc(100vh - 72px);
+            left: calc(100vw - 72px);
+        }
+    }
+}
+
+// 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) {
+    .matcha-header {
+        &__content {
+            padding: 16px;
+            border-radius: 8px;
+            flex-wrap: nowrap;
+
+            >div:nth-child(n + 2) {
+                margin-top: 0px;
+            }
+
+            &--few-options {
+                .matcha-header__content__options__buttons {
+                    display: flex;
+                }
+            }
+
+            &--full-options {
+                .matcha-header__content__options__buttons {
+                    display: flex;
+                }
+
+                .main-btn-new {
+                    display: inline-block;
+                }
+
+                .float-btn-new {
+                    display: none;
+                }
+            }
+
+            &__options {
+                flex-direction: row;
+                max-width: fit-content;
+                padding: 0px;
+                border-radius: 0px;
+
+                >div:nth-child(n + 2) {
+                    margin-bottom: 0px;
+                }
+
+                &__form,
+                &__field {
+                    min-width: 272px;
+                }
+
+                &__buttons {
+                    margin-bottom: 0px;
+                    display: flex;
+
+                    button {
+                        &:nth-child(n):not(.float-btn-new):not(.btn-search-filter) {
+                            margin: 0 0 0 16px;
+                        }
+
+                        &:first-child {
+                            margin: 0;
+                        }
+                    }
+
+                }
+            }
+        }
+    }
+}
+
+// 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-horizontal-tree.scss

@@ -0,0 +1,275 @@
+@mixin matcha-horizontal-tree($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);
+
+    .svg-line {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: -1;
+
+        line {
+            stroke-width: 4px;
+            stroke: map-get($foreground, placeholder);
+        }
+    }
+
+    .child {
+        display: flex;
+        position: relative;
+
+        .the-line-connect-first,
+        .the-line-connect,
+        .the-line-connect-last,
+        .the-line-connect-first-modal,
+        .the-line-connect-second-modal,
+        .the-line-connect-last-modal {}
+
+        .the-line-connect-first {
+            width: 56px;
+            height: 4px;
+            margin: 56px -16px 56px -40px;
+            display: flex;
+            position: absolute;
+            z-index: -1;
+            background: transparent;
+            box-shadow: inset 2px -2px 0px 2px map-get($foreground, placeholder);
+        }
+
+        .the-line-connect {
+            width: 56px;
+            margin: -90px -16px 56px -40px;
+            height: 150px;
+            display: flex;
+            position: absolute;
+            z-index: -1;
+            background: transparent;
+            border-radius: 0 0 0 40px;
+            box-shadow: inset 2px -2px 0px 2px map-get($foreground, placeholder);
+        }
+
+        .the-line-connect-last {
+            width: 56px;
+            height: 136px;
+            margin: -80px -16px 56px -40px;
+            display: flex;
+            position: absolute;
+            z-index: -1;
+            border-radius: 0 0 0 40px;
+            background: transparent;
+            box-shadow: inset 2px -2px 0px 2px map-get($foreground, placeholder);
+        }
+
+        .the-line-connect-first-modal {
+            width: 56px;
+            height: 4px;
+            margin: 56px -16px 56px -40px;
+            display: flex;
+            position: absolute;
+            z-index: -1;
+            background: transparent;
+            box-shadow: inset 2px -2px 0px 2px map-get($background, lime-alpha);
+        }
+
+        .the-line-connect-second-modal {
+            width: 56px;
+            border-radius: 0 0 0 40px;
+            z-index: 1;
+            margin: -16px -16px 56px -40px;
+            height: 72px;
+            display: flex;
+            position: absolute;
+            background: transparent;
+            box-shadow: inset 2px -2px 0px 2px map-get($background, lime-alpha);
+        }
+
+        .the-line-connect-last-modal {
+            width: 56px;
+            height: 150px;
+            margin: -90px -16px 56px -40px;
+            display: flex;
+            position: absolute;
+            border-radius: 0 0 0 40px;
+            z-index: 1;
+            background: transparent;
+            box-shadow: inset 2px -2px 0px 2px map-get($background, lime-alpha);
+        }
+
+        .the-line-connect-start-modal {
+            height: 92px;
+            margin: -34px -16px 56px -40px;
+            width: 56px;
+            border-radius: 0 0 0 40px;
+            z-index: 1;
+            display: flex;
+            position: absolute;
+            background: transparent;
+            box-shadow: inset 2px -2px 0px 2px map-get($background, lime-alpha);
+        }
+
+        .the-line-connect {
+            height: 92px !important;
+            margin: -34px -16px 56px -40px !important;
+        }
+
+        .the-line-connect-middle {
+            height: 92px;
+            margin: -34px -16px 56px -40px;
+            width: 56px;
+            border-radius: 0 0 0 40px;
+            z-index: 0;
+            display: flex;
+            position: absolute;
+            background: transparent;
+            box-shadow: inset 2px -2px 0px 2px #223744;
+        }
+    }
+
+    .tree-node {
+        min-width: 264px;
+        max-width: 264px;
+        width: 264px;
+        height: 80px;
+
+        &-header {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 4px;
+
+            &-title {
+                font-size: 12px;
+                line-height: 12px;
+                display: flex;
+                margin: 0 0 4px 0;
+                align-items: center;
+                letter-spacing: 0.08em;
+                text-transform: uppercase;
+                font-family: "CircularStd-Bold";
+
+                &-bullet {
+                    height: 16px;
+                    width: 8px;
+                    margin: 0px 8px 0 0;
+                    display: inline-block;
+                    position: relative;
+                    border-radius: 10px;
+                }
+            }
+        }
+
+        &-content {
+            display: flex;
+            justify-content: space-between;
+
+            &-profile {
+                display: flex;
+                align-items: center;
+                width: 100%;
+
+                &-avatar {
+                    border-radius: 50px;
+                    min-width: 24px;
+                    min-height: 24px;
+                    width: 24px;
+                    height: 24px;
+                    max-width: 24px;
+                    max-height: 24px;
+                }
+
+                &-name {
+                    width: calc(100% - 48px);
+                    display: flex;
+                    line-height: 20px;
+                    font-size: 16px;
+                    margin: 0 0 0 8px;
+                    -webkit-line-clamp: 2;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    word-break: break-word;
+                    white-space: nowrap;
+                    -webkit-box-orient: vertical;
+                }
+            }
+
+            &-btn-add-node {
+                position: absolute;
+                margin: 24px 0px 0 236px;
+                width: 24px;
+                height: 24px;
+                background: map-get($background, card);
+                box-shadow: inset 0px 0px 0px 3px map-get($accent, default);
+
+                &-i {
+                    line-height: 12px;
+                    color: map-get($accent, default);
+                    border-radius: 50px;
+                }
+            }
+        }
+    }
+
+    .tree-first-node {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        min-width: 264px;
+        max-width: 264px;
+        width: 264px;
+        height: 80px;
+        margin: 16px 16px -10px 16px;
+        border-radius: 8px;
+
+        &-begin {
+            font-size: 16px;
+            font-family: "CircularStd-Bold";
+            line-height: 16px;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            word-break: break-word;
+            white-space: initial;
+            -webkit-box-orient: vertical;
+            text-transform: capitalize;
+            text-overflow: ellipsis;
+
+            &-btn-add-node {
+                width: 24px;
+                height: 24px;
+                display: block;
+                margin: 0 auto;
+                position: relative;
+                background: map-get($background, card);
+                box-shadow: inset 0px 0px 0px 3px map-get($accent, default);
+
+                &-i {
+                    line-height: 12px;
+                    color: map-get($accent, default);
+                    border-radius: 50px;
+                }
+            }
+        }
+    }
+
+    .matcha-horizontal-tree {
+        overflow: auto;
+        // cursor: grab;
+        -webkit-touch-callout: none;
+        /* iOS Safari */
+        -webkit-user-select: none;
+        /* Safari */
+        -khtml-user-select: none;
+        /* Konqueror HTML */
+        -moz-user-select: none;
+        /* Old versions of Firefox */
+        -ms-user-select: none;
+        /* Internet Explorer/Edge */
+        user-select: none;
+        /* Non-prefixed version, currently */
+    }
+}

package/components/matcha-icons.scss

@@ -0,0 +1,11 @@
+@font-face {
+    font-family  : 'MatchaIcons';
+    src:  url('~matcha-icons/fonts/matcha-icons.eot');
+    src:  url('~matcha-icons/fonts/matcha-icons.eot?#iefix') format('embedded-opentype'),
+            url('~matcha-icons/fonts/matcha-icons.ttf') format('truetype'),
+            url('~matcha-icons/fonts/matcha-icons.woff') format('woff'),
+            url('~matcha-icons/fonts/matcha-icons.svg') format('svg');
+    font-weight  : normal;
+    font-style   : normal;
+    font-display : block;
+}

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) {}