madosel/dist/css/madosel-component.css.map

The most and fast advanced responsive html front-end framework.

{"version":3,"sources":["webpack:///./scss/components/madosel-component.scss","webpack:///./scss/components/madosel-accordion.scss","webpack:///./scss/components/base/_variable.scss","webpack:///./scss/components/madosel-dropdown.scss","webpack:///./scss/components/madosel-modal.scss","webpack:///./scss/components/madosel-navigation-tabs.scss","webpack:///./scss/components/madosel-offcanvas.scss"],"names":[],"mappings":"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","file":"css/madosel-component.css","sourcesContent":["/*!\n * Madosel Component 1.0.0-alpha12\n * Copyright 2020-2021 Kenan Gündoğan\n * https://www.madosel.com\n * Licensed under MIT https://github.com/kenangundogan/madosel/blob/master/LICENSE\n * Released under the MIT License\n */\n\n@import \"madosel-accordion\";\n@import \"madosel-dropdown\";\n@import \"madosel-modal\";\n@import \"madosel-navigation-tabs\";\n@import \"madosel-offcanvas\";","/*!\n * Madosel Accordion 1.0.0-alpha12\n * Copyright 2020-2021 Kenan Gündoğan\n * https://www.madosel.com\n * Licensed under MIT https://github.com/kenangundogan/madosel/blob/master/LICENSE\n * Released under the MIT License\n */\n\n@import \"base/variable\";\n\n.accordion-container{\n    position: relative; width: 100%;\n    .accordion-item{\n        overflow: hidden; min-height: 70px; margin-bottom: 10px;\n        border: dashed 1px #dedede; border-radius: 5px;\n        &.show{\n            background-color: $primary-color-light;\n            .head{\n                i{\n                    @include minus();\n                }\n            }\n            .body{display: block;}\n        }\n        .head{\n            display: flex; align-items: center;\n            border-radius: 5px; padding: 20px;\n            cursor: pointer;\n            i{\n                @include plus();\n                width: 30px; height: 30px; flex:0 0 30px;\n                display: inline-flex; align-items: center; justify-content: center;\n                border-radius: 100%; margin-right: 10px;\n                background-color: #fff;\n            }\n        }\n        .body{\n            display: none; overflow: hidden;\n            height: 0; \n            .wrapper{\n                position:relative; overflow: hidden;\n                padding: 0 20px 20px 60px;\n                border-radius: 5px;\n            }\n        }\n    }\n}","$primary-color-base: #fae898;\n$primary-color-light: lighten(#fae898, 15%);\n\n@mixin plus{\n    background: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 185.04 185.04'%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpath d='M180.41,87.89H97.15V4.63a4.63,4.63,0,0,0-9.26,0V87.89H4.63a4.63,4.63,0,0,0,0,9.26H87.89v83.26a4.63,4.63,0,0,0,9.26,0V97.15h83.26a4.63,4.63,0,0,0,0-9.26Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E\") no-repeat center / 50%;\n}\n\n@mixin minus{\n    background: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 185.04 9.26'%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cg id='path1245-9'%3E%3Cpath d='M180.41,9.26H4.63A4.63,4.63,0,0,1,4.63,0H180.41a4.63,4.63,0,0,1,0,9.26Z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\") no-repeat center / 50%;\n}\n\n@mixin next{\n    background: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 104.52 185.12'%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cg id='Path_2923' data-name='Path 2923'%3E%3Cpath d='M104,94.77c.07-.14.14-.27.2-.41a3.59,3.59,0,0,0,.14-.43,3.39,3.39,0,0,0,.11-.43,3.32,3.32,0,0,0,.06-.44c0-.15,0-.29,0-.44s0-.29,0-.44a3.11,3.11,0,0,0-.06-.44c0-.15-.07-.29-.11-.43s-.09-.29-.14-.43-.13-.27-.2-.41-.15-.26-.23-.39l-.28-.38c-.06-.07-.1-.15-.17-.22l-.14-.12-.12-.14L7.84,1.29A4.63,4.63,0,0,0,1.42,8l.13.12L93.07,92.62,1.55,177.15A4.63,4.63,0,0,0,7.84,184L103,96l.12-.14a.81.81,0,0,0,.14-.12l.17-.22.28-.38A4,4,0,0,0,104,94.77Z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\") no-repeat center / 50%;\n}\n\n@mixin prev{\n    background: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 104.51 185.24'%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cg id='Path_2924' data-name='Path 2924'%3E%3Cpath d='M11.44,92.62,103,8.09a4.63,4.63,0,0,0-6.15-6.92l-.13.12L1.48,89.22a1.79,1.79,0,0,0-.13.14s-.1.07-.13.12-.11.15-.17.22a2.82,2.82,0,0,0-.29.39,5.52,5.52,0,0,0-.42.8,3.88,3.88,0,0,0-.25.85,3.11,3.11,0,0,0-.06.44,3.24,3.24,0,0,0,0,.88,3.11,3.11,0,0,0,.06.44,3.34,3.34,0,0,0,.1.43,3.83,3.83,0,0,0,.35.84,2.88,2.88,0,0,0,.22.38,3.58,3.58,0,0,0,.29.39c.06.07.1.15.17.22a1.42,1.42,0,0,0,.13.12,1.66,1.66,0,0,0,.13.14L96.68,184a4.63,4.63,0,0,0,6.41-6.68l-.13-.12Z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\") no-repeat center / 50%;\n}\n\n@mixin close{\n    background: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 185.15 185.15'%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cg id='Path_2925' data-name='Path 2925'%3E%3Cpath d='M99.1,92.59,183.76,7.94a4.64,4.64,0,0,0-6.49-6.62l-.06.07L92.56,86,7.9,1.39A4.63,4.63,0,0,0,1.36,7.94L86,92.59,1.36,177.24a4.63,4.63,0,0,0,6.54,6.55L92.56,99.14l84.65,84.65a4.63,4.63,0,0,0,6.55-6.55h0Z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\") no-repeat center / 50%;\n}","/*!\n * Madosel Dropdown 1.0.0-alpha12\n * Copyright 2020-2021 Kenan Gündoğan\n * https://www.madosel.com\n * Licensed under MIT https://github.com/kenangundogan/madosel/blob/master/LICENSE\n * Released under the MIT License\n */\n\n@import \"base/variable\";\n\n.dropdown-container{\n    position: relative;\n    display: inline-block;\n    .dropdown-btn{\n        cursor: pointer;\n        padding: 15px;\n        text-align: center;\n        border: solid 1px #dedede; border-radius: 5px;\n        background-color: #fff; outline: none;\n    }\n    .dropdown-list{\n        position: absolute; z-index: 1000;\n        overflow: auto; padding: 7.5px 0;\n        border: solid 1px #dedede; border-radius: 5px;\n        white-space: nowrap;\n        background-color: #fff;\n        &:not(.show){\n            display: none;\n        }\n        .dropdown-item{\n            a{\n                display: block; \n                padding: 7.5px 15px;\n            }\n        }\n    }\n}","/*!\n * Madosel Modal 1.0.0-alpha12\n * Copyright 2020-2021 Kenan Gündoğan\n * https://www.madosel.com\n * Licensed under MIT https://github.com/kenangundogan/madosel/blob/master/LICENSE\n * Released under the MIT License\n */\n\n@import \"base/variable\";\n\n.modal-container{\n    position: fixed; overflow: hidden; \n    z-index: 99999; top: 0; left: 0;\n    width: 100%; height: 100%; padding: 40px;\n    background-color: rgba($color: #000000, $alpha: 0);\n    display: none; transition: ease 300ms;\n\n    // DISPLAY\n    &.show{\n        display: flex;\n    }\n\n    // VISIBILITY\n    &.visible{\n        background-color: rgba($color: #000000, $alpha: 0.6);\n        .modal-wrapper{opacity: 1;}\n    }\n    \n    // POSITION\n    &.center{\n        justify-content: center; align-items: center;\n        .modal-wrapper{transform: translate(0,-50px);}\n    }\n    &.top{\n        justify-content: center; align-items: flex-start;\n        .modal-wrapper{transform: translate(0,-50px);}\n    }\n    &.bottom{\n        justify-content: center; align-items: flex-end;\n        .modal-wrapper{transform: translate(0,50px);}\n    }\n    &.top-left{\n        justify-content: flex-start; align-items: flex-start;\n        .modal-wrapper{transform: translate(-50px,0);}\n    }\n    &.top-right{\n        justify-content: flex-end; align-items: flex-start;\n        .modal-wrapper{transform: translate(50px,0);}\n    }\n    &.bottom-left{\n        justify-content: flex-start; align-items: flex-end;\n        .modal-wrapper{transform: translate(-50px,0);}\n    }\n    &.bottom-right{\n        justify-content: flex-end; align-items: flex-end;\n        .modal-wrapper{transform: translate(50px,0);}\n    }\n\n    // SIZE\n    &.small{\n        .modal-wrapper{max-width: 300px;}\n    }\n    &.medium{\n        .modal-wrapper{max-width: 600px;}\n    }\n    &.large{\n        .modal-wrapper{max-width: 1024px;}\n    }\n    &.xlarge{\n        .modal-wrapper{max-width: 1280px;}\n    }\n    &.full{\n        .modal-wrapper{max-width: 100%;}\n    }\n    &.fullscreen{\n        padding: 0;\n        .modal-wrapper{max-width: 100%; height: 100%;}\n    }\n\n    // TRANSFORM\n    &.transform{\n        .modal-wrapper{transform: none;}\n    }\n\n    .modal-wrapper{\n        position: relative; overflow: hidden;\n        width: 100%; max-width: 300px;\n        border-radius: 5px; padding: 40px;\n        background-color: #fff;\n        opacity: 0;\n        .modal-close{\n            position: absolute; top: 0; right: 0;\n            width: 50px; height: 50px; cursor: pointer;\n            @include close();\n        }\n\n    }\n}","/*!\n * Madosel Navigation Tabs 1.0.0-alpha12\n * Copyright 2020-2021 Kenan Gündoğan\n * https://www.madosel.com\n * Licensed under MIT https://github.com/kenangundogan/madosel/blob/master/LICENSE\n * Released under the MIT License\n */\n\n@import \"base/variable\";\n\n.navigation-tabs-container{\n    position: relative; width: 100%;\n    .navigation-tab-menu{\n        position: relative; width: 100%; \n        display: flex;\n        .navigation-tab-menu-item{\n            position: relative;\n            min-height: 70px;\n            display: flex; align-items: center;\n            border-radius: 5px; padding: 20px;\n            cursor: pointer;\n            border: dashed 1px #dedede; \n            white-space: pre;\n            &.show{\n                background-color: $primary-color-light;\n                &:before{\n                    content: \"\";\n                    position: absolute; z-index: 10;\n                    background-color: $primary-color-light;\n                }\n            }\n        }\n    }\n    .navigation-tab-content{\n        .navigation-tab-content-item{\n            display: none;\n            position:relative; overflow: hidden;\n            padding: 20px; border: dashed 1px #dedede; \n            border-radius: 5px;\n            &.show{\n                display: block;\n                background-color: $primary-color-light;\n            }\n        }\n    }\n\n    &.top{\n        .navigation-tab-menu{\n            .navigation-tab-menu-item{\n                margin: 0 10px 10px 0;\n                &.show{\n                    &:before{\n                        left: -1px; bottom: -12px;\n                        width: 100%; height: 30px;\n                        border-left: dashed 1px #dedede;\n                        border-right: dashed 1px #dedede;\n                    }\n                }\n            }\n        }\n    }\n\n    &.right{\n        display: flex; flex-direction: row-reverse;\n        .navigation-tab-menu{\n            flex-direction: column;\n            .navigation-tab-menu-item{\n                margin: 0 0 10px 10px;\n                &.show{\n                    &:before{\n                        top: -1px; left: -12px;\n                        width: 30px; height: 100%;\n                        border-top: dashed 1px #dedede;\n                        border-bottom: dashed 1px #dedede;\n                    }\n                }\n            }\n        }\n    }\n\n    &.bottom{\n        display: flex; flex-direction: column-reverse;\n        .navigation-tab-menu{\n            .navigation-tab-menu-item{\n                margin: 10px 10px 0 0;\n                &.show{\n                    &:before{\n                        left: -1px; top: -12px;\n                        width: 100%; height: 30px;\n                        border-left: dashed 1px #dedede;\n                        border-right: dashed 1px #dedede;\n                    }\n                }\n            }\n        }\n    }\n\n    &.left{\n        display: flex;\n        .navigation-tab-menu{\n            flex-direction: column;\n            .navigation-tab-menu-item{\n                margin: 0 10px 10px 0;\n                &.show{\n                    &:before{\n                        top: -1px; right: -12px;\n                        width: 30px; height: 100%;\n                        border-top: dashed 1px #dedede;\n                        border-bottom: dashed 1px #dedede;\n                    }\n                }\n            }\n        }\n    }\n\n    \n}","/*!\n * Madosel Offcanvas 1.0.0-alpha12\n * Copyright 2020-2021 Kenan Gündoğan\n * https://www.madosel.com\n * Licensed under MIT https://github.com/kenangundogan/madosel/blob/master/LICENSE\n * Released under the MIT License\n */\n\n@import \"base/variable\";\n\n .offcanvas-container{\n    position: fixed; overflow: hidden; \n    z-index: 99999; top: 0; left: 0;\n    width: 100%; height: 100%;\n    background-color: rgba($color: #000000, $alpha: 0);\n    display: none; transition: ease 300ms;\n\n    // DISPLAY\n    &.show{\n        display: flex;\n    }\n\n    // VISIBILITY\n    &.visible{\n        background-color: rgba($color: #000000, $alpha: 0.6);\n        .offcanvas-wrapper{opacity: 1;}\n    }\n    \n    // POSITION\n    &.top{\n        justify-content: center; align-items: flex-start;\n        .offcanvas-wrapper{transform: translate(0,-50px);}\n    }\n    &.left{\n        justify-content: flex-start;\n        .offcanvas-wrapper{transform: translate(-100%,0);}\n    }\n    &.right{\n        justify-content: flex-end;\n        .offcanvas-wrapper{transform: translate(100%,0);}\n    }\n    &.bottom{\n        justify-content: center; align-items: flex-end;\n        .offcanvas-wrapper{transform: translate(0,50px);}\n    }\n\n    // SIZE\n    &.small{\n        .offcanvas-wrapper{max-width: 300px;}\n    }\n    &.medium{\n        .offcanvas-wrapper{max-width: 600px;}\n    }\n    &.large{\n        .offcanvas-wrapper{max-width: 1024px;}\n    }\n    &.xlarge{\n        .offcanvas-wrapper{max-width: 1280px;}\n    }\n    &.full{\n        .offcanvas-wrapper{max-width: 100%;}\n    }\n    &.fullscreen{\n        .offcanvas-wrapper{\n            max-width: 100%; height: 100%;\n        }\n    }\n\n    // TRANSFORM\n    &.transform{\n        .offcanvas-wrapper{transform: none;}\n    }\n\n    .offcanvas-wrapper{\n        position: relative; overflow: hidden;\n        width: 100%; padding: 40px;\n        background-color: #fff;\n        opacity: 0;\n        .offcanvas-close{\n            position: absolute; top: 0; right: 0;\n            width: 50px; height: 50px; cursor: pointer;\n            display: flex; justify-content: center; align-items: center;\n            @include close();\n        }\n\n    }\n}"],"sourceRoot":""}