<section class="splitter splitter_bg-color_white splitter_padding_bottom_40-60 ">
<div class="container">
<div class="splitter__wrapper">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="row">
<div class="col-xs-12 col-ms-10_5 col-ms-ml col-sm-11 col-lg-11 col">
<div class="blog-categories
">
<div class="
blog-categories__wrapper
sticky-clone__wrapper
">
<ul class="blog-categories__list">
<li class="blog-categories__item
">
<a class="link
link_hidden-line
" href="#">
<span>Actualidad de HXX</span>
</a>
</li>
<li class="blog-categories__item
">
<a class="link
link_hidden-line
" href="#">
<span>Actualidad de Hipotecas</span>
</a>
</li>
<li class="blog-categories__item
">
<a class="link
link_hidden-line
" href="#">
<span>OVERFLOW 1</span>
</a>
</li>
<li class="blog-categories__item
">
<a class="link
link_hidden-line
" href="#">
<span>Curiosidades inmobiliarias</span>
</a>
</li>
<li class="blog-categories__item
">
<a class="link
link_hidden-line
" href="#">
<span>Tu casa y tú</span>
</a>
</li>
<li class="blog-categories__item
">
<a class="link
link_hidden-line
" href="#">
<span>Tu casa y tú</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div class="row">
<div class="col-xs-12 col-ms-10_5 col-ms-ml col-sm-11 col-lg-11 col">
<div {{#if hasID}}id="{{idComponent}}"{{/if}} class="blog-categories
{{#if isHidden}}
blog-categories_hidden
{{/if}}"
>
<div class="
blog-categories__wrapper
{{#if isSticky}}sticky-clone__wrapper{{/if}}
">
<ul class="blog-categories__list">
{{#each category}}
<li class="blog-categories__item
{{#if isActive}}
active
{{/if}}"
>
{{> @link this.link }}
</li>
{{/each}}
</ul>
</div>
</div>
</div>
</div>
{{/content}}
{{/extend}}
{
"hasID": false,
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingBottom4060": true
},
"isSticky": true,
"category": [
{
"link": {
"isHiddenLine": true,
"href": "#",
"text": "Actualidad de HXX"
}
},
{
"link": {
"isHiddenLine": true,
"href": "#",
"text": "Actualidad de Hipotecas"
}
},
{
"link": {
"isHiddenLine": true,
"href": "#",
"text": "OVERFLOW 1"
}
},
{
"link": {
"isHiddenLine": true,
"href": "#",
"text": "Curiosidades inmobiliarias"
}
},
{
"link": {
"isHiddenLine": true,
"href": "#",
"text": "Tu casa y tú"
}
},
{
"link": {
"isHiddenLine": true,
"href": "#",
"text": "Tu casa y tú"
}
}
]
}
.blog-categories {
overflow-x: scroll;
scrollbar-width: none; /* Hide the scrollbar in Mozilla Firefox */
-ms-overflow-style: none; /* Hide the scrollbar in IE and Edge */
display: flex;
flex-flow: column wrap;
margin-right: -19px;
&::-webkit-scrollbar {
display: none; /* Hide the scrollbar in Chromium */
}
@media (--viewport-ms-min) {
margin-right: -31px;
}
@media (--viewport-md-min) {
margin-right: -32px;
}
@media (--viewport-lg-min) {
margin-right: -50px;
}
&_hidden {
position: absolute;
top: 0;
left: -9999px;
}
&.sticky-clone {
padding: 19px 0 18px;
@media (--viewport-sm-min) {
padding: 39px 0 27px;
}
.blog-categories {
&__wrapper {
margin: 0 auto;
}
&__item {
&:last-child {
padding-right: 0;
margin-right: 0;
}
}
}
}
&__wrapper {
flex-shrink: 0;
}
&__list {
display: inline-flex;
flex-wrap: wrap;
row-gap: 10px;
}
&__item {
flex-shrink: 0;
margin-right: 25px;
@media (--viewport-ms-min) {
margin-right: 60px;
}
@media (--viewport-sm-min) {
margin-right: 171.67px;
}
&:last-child {
padding-right: 19px;
margin-right: 0;
@media (--viewport-ms-min) {
padding-right: 31px;
}
@media (--viewport-md-min) {
padding-right: 32px;
}
@media (--viewport-lg-min) {
padding-right: 50px;
}
}
&.active {
.link {
&:hover,
&:focus {
color: var(--color-accent);
}
span {
&::after {
width: 100%;
}
}
}
}
}
}
No notes defined.