matcha-theme 1.0.25 → 18.0.27

package/components/matcha-header.scss

@@ -1,327 +0,0 @@
-/*
-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", "Helvetica Neue", "Arial", sans-serif;
-            font-weight: 700;
-            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

@@ -1,277 +0,0 @@
-@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";
-                font-weight: 700;
-
-                &-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";
-            font-weight: 700;
-            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-progress-bar.scss

@@ -1,107 +0,0 @@
-/*
-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) {}