{"version":3,"names":["kdxBlogListingCss","StBlogListing","render","h","class"],"sources":["src/layouts/kdx-blog-listing/kdx-blog-listing.scss?tag=kdx-blog-listing","src/layouts/kdx-blog-listing/kdx-blog-listing.tsx"],"sourcesContent":[".kdx-blog-listing {\r\n    border-top: 1px solid #CCC;\r\n    padding-top: 40px;\r\n        \r\n    .filters {\r\n        \r\n        .kdx-site-search.input-group > .form-control { height: 40px; }\r\n        .kdx-site-search .input-group-text { \r\n            height: 38px;\r\n            top: 1px;\r\n\r\n            svg { transform: translateY(5px); }\r\n        }\r\n        .filter-headline {\r\n            @include text-size(30);\r\n            @include line-height(32);\r\n            font-weight: 600;\r\n            margin: 0 0 16px 0;\r\n            color: $blogFilterHeadline;\r\n        }\r\n        .filter-group { margin-bottom: 40px; }        \r\n        .category-item {\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n            padding-left: 0;\r\n            position: relative;\r\n            margin-bottom: 8px;\r\n            \r\n            label {\r\n                border: 1px solid #DEDEDE;\r\n                border-radius: 4px;\r\n                padding: 9px 40px 9px 12px;\r\n                width: 100%;\r\n                cursor: pointer;\r\n                @include text-size(16);\r\n                @include line-height(20);\r\n                font-weight: 600;\r\n                font-family: $font-family-secondary;\r\n                transition: background .3s ease-in-out, color .3s ease-in-out;\r\n\r\n                &:hover, &:focus {\r\n                    background: $blogFilterHoverBG;\r\n                    color: #FFF;\r\n                }\r\n            }\r\n            .form-check-input {\r\n                position: absolute;\r\n                right: 12px;\r\n                top: calc(50% - 3px);\r\n                z-index: 2;\r\n                background-color: #FFF;\r\n                border: 1px solid #707070;\r\n                border-radius: 2px;\r\n                transform: translateY(-50%);\r\n\r\n                &:hover, &:focus, &:checked {\r\n                    background-color: transparent;\r\n                    border-color: #FFF;\r\n                    outline: none;\r\n                    box-shadow: none;\r\n                    \r\n                    & ~ .form-check-label {\r\n                        background: $blogFilterHoverBG;\r\n                        color: #FFF;\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    }\r\n    .results {\r\n        .total-results {\r\n            color: $blogTotalResultsLabel;\r\n            @include text-size(20);\r\n            @include line-height(32);\r\n            font-family: $font-family-secondary;\r\n            margin-bottom: 24px;\r\n            \r\n            .showing { font-weight: 600; }\r\n            .keyword { font-style: italic; }            \r\n        }\r\n        .results-row {\r\n            & > [class^=\"col-\"] {\r\n                margin-bottom: 32px;\r\n            }\r\n        }\r\n    }    \r\n}\r\n.featured-articles-row {\r\n    & > [class^=\"col-\"] { margin-bottom: 16px; }\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n@include media-breakpoint-down(md) {\r\n    \r\n    .kdx-blog-listing {\r\n        padding-top: 32px;\r\n\r\n        .filters {\r\n\r\n            .filter-headline {\r\n                @include text-size(25);\r\n                @include line-height(30);\r\n            }\r\n        }\r\n        .results {\r\n\r\n            .total-results {\r\n                @include text-size(14);\r\n                @include line-height(32);\r\n            }\r\n            .kdx-card {\r\n\r\n                .card-img-top { display: none; }\r\n            }\r\n        }\r\n    }\r\n    .featured-articles-row {\r\n        & > [class^=\"col-\"]:last-child { margin-bottom: 0; }\r\n    }\r\n    \r\n}","import { Component, h, ComponentInterface } from '@stencil/core';\r\n\r\n@Component({\r\n\ttag: 'kdx-blog-listing',\r\n\tstyleUrl: 'kdx-blog-listing.scss',\r\n\tshadow: false\r\n})\r\nexport class StBlogListing implements ComponentInterface {\r\n\r\n\trender() {\r\n\t\treturn (\r\n\t\t\t<section class=\"kdx-blog-listing\" aria-label=\"blog listing\">\r\n\t\t\t\t<slot />\r\n\t\t\t</section>\r\n\t\t);\r\n\t}\r\n}"],"mappings":"2CAAA,MAAMA,EAAoB,w0G,MCObC,EAAa,M,yBAEzB,MAAAC,GACC,OACCC,EAAA,WAASC,MAAM,mBAAkB,aAAY,gBAC5CD,EAAA,a"}