UCI

ucipt slide: Nohighlight 

<div class="ucipt-slide swiper-slide
">

    <div class="ucipt-responsive-bg-image">
        <img class="ucipt-responsive-bg-image__img" src="https://www.viajarmiami.com/img/playas-miami.jpg" alt="Dummy Text">
    </div>

</div>
 
<div class="ucipt-slide swiper-slide
    {{#if noBackground}}
        ucipt-slide__no-margin{{#if noShadow}} no-shadow{{/if}}
    {{/if}}
">

    {{#if bg-video-url}}
    <div class="ucipt-slide__bg-video-holder">
        {{> @ucipt-responsive-bg-video }}
    </div>
    {{else if youtube-video-code}}
        <div class="ucipt-slide__bg-video-holder">{{> @ucipt-responsive-youtube-video }}</div>
    {{else if vimeo-video-code}}
        <div class="ucipt-slide__bg-video-holder">{{> @ucipt-responsive-vimeo-video }}</div>
    {{else if bg-image}}
        {{> @ucipt-responsive-bg-image }}
    {{/if}}

    {{#if showHighlight}}
    <div class="ucipt-slide__text-holder
        {{#if noBackground}}
            ucipt-slide__no-bottom
        {{/if}}
        ">
        <div class="row">
            {{#if isReversed}}
            <div
                class="col-xs-12 col-ms-10 col-ms-offset-1 col-sm-6 col-sm-ml col-sm-offset-right-1 col-md-5 col-lg-4 col">
                {{> @ucipt-slide-highlight }}
            </div>
            {{else}}
            <div class="col-xs-12 col-ms-10 col-sm-6 col-sm-offset-1 col-md-5 col-lg-4 col">
                {{> @ucipt-slide-highlight }}
            </div>
            {{/if}}
        </div>
    </div>
    {{/if}}

</div>
 
{
  "showHighlight": false,
  "hasBg-color": true,
  "bg-color": "bg-accent",
  "bg-image": {
    "alt": "Dummy Text",
    "url": "https://www.viajarmiami.com/img/playas-miami.jpg"
  },
  "title": {
    "text": "Tu quieres una casa y nosotros lo hacemos posible",
    "colorLight": true
  },
  "description": {
    "text": "<p>Visita la casa personalmente antes de pagar, Conocer a quien pertenece la casa en el Registro de la Propiedad y una vez adquirida, registrar la vivienda en el Registro de la Propiedad, son pasos básicos para comprar en España.</p>",
    "colorLight": true
  },
  "buttons": [
    {
      "href": "#",
      "text": "Comprar casa para no residentes"
    },
    {
      "href": "#",
      "text": "Comprar casa para 2"
    }
  ]
}
  • Content: 
    :root {
    --offset: -40px;
    --offset-xs: -60px;
} /* ¿PARA QUE ESTÁ ESTO AQUÍ? NO DEBERÍA ESTAR DENTRO DE UN COMPONENTE - REVISAR (CA) */

.ucipt-slide {
    min-height: 524px;
    margin-bottom: 40px;

    @media (--viewport-xs-max) {
        margin-bottom: 60px;
        min-height: 534px;
    }

    &__no-margin {
        margin-bottom: 0;

        &::before {
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            position: absolute;
            z-index: 2;
            content: "";
            opacity: 0.6;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%);
        }

        @media (--viewport-xs-max) {
            margin-bottom: 0;
        }
        &.no-shadow{
            &::before {
                opacity: 0;
            }
        }
    }

    &__text-holder {
        bottom: var(--offset);
        width: 100%;
        z-index: 3;
        position: absolute;

        .col {
            z-index: 1;
        }

        @media (--viewport-md-min) {
            .col-sm-ml {
                margin-left: auto;
            }

            .col-sm-offset-right-1 {
                margin-right: 8.33333333%;
            }
        }

        @media (--viewport-sm-max) {
            padding-left: 5%;
            padding-right: 5%;
        }

        @media (--viewport-xs-max) {
            bottom: -60px;
        }
    }

    &__no-bottom {
        border-bottom: solid 40px var(--color-white);

        @media (--viewport-xs-max) {
            border-bottom: solid 60px var(--color-white);
        }
    }
}
  • URL: /components/raw/ucipt-slide/ucipt-slide.css
  • Filesystem Path: src/02-molecules/ucipt-slide/ucipt-slide.css
  • Size: 1.6 KB

No notes defined.