Component Library

C Modal 

<div class="c-modal w-100 h-100 position position-fixed position-z-5 p-4">
    <span class="mask w-100 h-100 position-fixed position-z-2 openmodal"></span>
    <div class="wrapper col-11 col-md-7 col-lg-5 mx-auto position position-50-50 position-absolute position-z-3 p-4 bg bg-color-white">
        <p class="text text-w-bold text-size-1-5 text-size-lg-2 mb-2">Titulo</p>
        <p class="text">Texto</p>
        <form class="c-form">
            <div class="form-group text-center mb-3">
                <input type="text" class="form-control border" placeholder="texto">
            </div>
            <div class="form-group text-center mb-3">
                <input type="text" class="form-control border" placeholder="texto">
            </div>
            <div class="form-group text-center mb-3">
                <input type="submit" class="btn btn-solid btn-solid-primary px-4 py-2 w-100 d-block" value="texto">
            </div>
        </form>
    </div>
</div>
 
<div class="c-modal w-100 h-100 position position-fixed position-z-5 p-4">
    <span class="mask w-100 h-100 position-fixed position-z-2 openmodal"></span>
    <div class="wrapper col-11 col-md-7 col-lg-5 mx-auto position position-50-50 position-absolute position-z-3 p-4 bg bg-color-white">
        <p class="text text-w-bold text-size-1-5 text-size-lg-2 mb-2">Titulo</p>
        <p class="text">Texto</p>
        <form class="c-form">
            <div class="form-group text-center mb-3">
                <input type="text" class="form-control border" placeholder="texto">
            </div>
            <div class="form-group text-center mb-3">
                <input type="text" class="form-control border" placeholder="texto">
            </div>
            <div class="form-group text-center mb-3">
                <input type="submit" class="btn btn-solid btn-solid-primary px-4 py-2 w-100 d-block" value="texto">
            </div>
        </form>
    </div>
</div>
 
/* No context defined. */
  • Content: 
    export function modal() {
    $('.openmodal').on('click', function(){
        if($('.c-modal').hasClass('open-modal')) {
            $('.c-modal').removeClass('open-modal');
        } else {
            $('.c-modal').addClass('open-modal');
        }
    });
}
  • URL: /components/raw/c-modal/c-modal.ts
  • Filesystem Path: src/components/comp/c-modal/c-modal.ts
  • Size: 260 Bytes
  • Content: 
    // modal component
.c-modal {
    @extend %transform_05;
    top: 200vh;
    left: 0;
    .mask {
        pointer-events: none;
        opacity: 0;
        background-color: rgba($color_black, .4);
        top: 0;
        left: 0;
    }
}

.open {
    &-modal {
        &.c-modal {
            top: 0;
            .mask {
                opacity: 1;
                pointer-events: initial;
            }
        }
    }
}
  • URL: /components/raw/c-modal/c_modal.scss
  • Filesystem Path: src/components/comp/c-modal/c_modal.scss
  • Size: 422 Bytes

No notes defined.