madosel/dist/css/madosel-navigation-tabs.min.css.map

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

{"version":3,"sources":["webpack:///./scss/components/madosel-navigation-tabs.scss","webpack:///./scss/components/base/_variable.scss"],"names":[],"mappings":"AAAA;;;;;;EAAA,CAUA,2BACI,6BACA,gDACI,6BACA,aACA,0EACI,kBACA,gBACA,gCACA,+BACA,eACA,0BACA,gBACA,+EACI,wBCvBM,CDwBN,sFACI,WACA,6BACA,wBC3BE,CDiCd,gFACI,aACA,kCACA,uCACA,kBACA,qFACI,cACA,wBCxCM,CD+CV,8EACI,qBAEI,0FACI,uBACA,uBACA,+BACA,gCAOpB,iCACI,wCACA,sDACI,sBACA,gFACI,qBAEI,4FACI,oBACA,uBACA,8BACA,iCAOpB,kCACI,2CAEI,iFACI,qBAEI,6FACI,oBACA,uBACA,+BACA,gCAOpB,gCACI,aACA,qDACI,sBACA,+EACI,qBAEI,2FACI,qBACA,uBACA,8BACA,iC","file":"css/madosel-navigation-tabs.min.css","sourcesContent":["/*!\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}","$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}"],"sourceRoot":""}