Modal

Modal

Currently work in progress.

<button class="button" type="button" data-link="modal">Open modal</button>

<div class="modal" id="modal">
    <div class="modal__inner">
        <h2>Modal</h2>
        <p>Donec sed risus nec nulla auctor sodales. Proin iaculis elementum ante. Mauris eu nunc et nunc ullamcorper dapibus in quis lectus. Mauris quis venenatis diam. Vestibulum fringilla lacus dui, at placerat sapien tempor ac. Aenean vitae nunc malesuada,
            vehicula sem sit amet, pellentesque tortor. Integer pretium sodales lacus eget vehicula. Duis in tincidunt enim, quis tempor turpis. Etiam mattis tortor quam, eu consectetur nunc viverra luctus.</p>
    </div>
</div>

<div class="modal-overlay">
</div>
/* No context defined for this component. */
  • Content:
    /*------------------------------------*\
    	Modal
    \*------------------------------------*/
    
    .modal {
    	display: none;
    	width: 600px;
    	max-width: 100%;
    	height: 400px;
    	max-height: 100%;
    	position: fixed;
    	z-index: 100;
    	left: 50%;
    	top: 50%;
    	transform: translate(-50%, -50%);
    	background: $color-white;
    	box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.3);
    	border-radius: 4px;
    }
    
    .modal.is-active {
    	display: flex;
    }
    
    .modal__inner {
    	position: absolute;
    	top: 0;
    	left: 0;
    	width: 100%;
    	height: 100%;
    	overflow: auto;
    	padding: 2rem;
    }
    
    .modal__inner h1,
    .modal__inner h2,
    .modal__inner h3,
    .modal__inner h4,
    .modal__inner h5 {
    	margin-top: 0;
    }
    
    .modal-overlay {
    	position: fixed;
    	top: 0;
    	left: 0;
    	width: 100%;
    	height: 100%;
    	z-index: 50;
    	background: rgba(0, 0, 0, 0.6);
    	display: none;
    }
    
    
    
    
    
  • URL: /components/raw/modal/modal.scss
  • Filesystem Path: components/02-components/modal/modal.scss
  • Size: 792 Bytes