Asta Valentaite

Modal 

<div class="c-modal">
    <div class="c-modal__inner">
        <div class="c-modal__content" id="modal-content"></div>
        <button class="c-modal__closer">
			
<div class="o-icon flex items-center justify-center relative" data-modal-close>
	<div class="o-icon__bg absolute pin bg-white"></div>
		<i class="icon icon--ui-close">
		<svg>
			<use class="no-barba" xlink:href="#ui-close"></use>
		</svg>
	</i>

</div>
		</button>
    </div>
</div>
 
<div class="c-modal">
	<div class="c-modal__inner">
		<div class="c-modal__content" id="modal-content"></div>
		<button class="c-modal__closer">
			{% include '@icons' with { icon: 'ui-close', color: 'white', attr: 'data-modal-close'} %}
		</button>
	</div>
</div>
 
{
  "siteTitle": "Asta Valentaite",
  "copyright": "© 2017 Asta Valentaite. All rights reserved.",
  "craft": {
    "app": {
      "config": {
        "general": {
          "custom": {
            "objects": "/02-objects/",
            "global": "../03-global/",
            "components": "/04-components/",
            "pages": "/05-pages/",
            "macros": "/macros/",
            "wrapper": "/wrapper/"
          }
        }
      }
    }
  },
  "sitemenu": [
    {
      "title": "About",
      "slug": "/components/preview/about"
    },
    {
      "title": "Fashion",
      "slug": "/components/preview/press"
    },
    {
      "title": "Beauty",
      "slug": "/components/preview/post"
    },
    {
      "title": "Lifestyle",
      "slug": "/components/preview/vertical"
    },
    {
      "title": "Collaborations",
      "slug": "/components/preview/collaborations"
    },
    {
      "title": "Press",
      "slug": "/components/preview/press"
    }
  ]
}
  • Content: 
    .c-modal {
	display: none;
}

.c-modal {
	@apply .flex .items-center .justify-center .fixed .pin .z--1 .opacity-0 .text-center;

	background: rgba(255, 255, 255, 0.8);
	transition: opacity 200ms, z-index 0s 200ms;
	overflow: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.is-modal-visible {
	overflow: hidden;

	.c-modal {
		z-index: 99;
		opacity: 1;
		transition: opacity 200ms;
	}
}

.c-modal__inner {
	@apply .relative .bg-white .opacity-0 .z--1;

	height: rem(660px);
	max-width: 95%;
	max-height: 80%;
	background: #fff;
	transform: scale(0);
	transition: opacity 200ms, transform 200ms, z-index 0s 200ms;
}

.c-modal__content {
	@apply .relative .h-full;

	transition: opacity 300ms ease;
}

.is-modal-visible .c-modal__inner {
	z-index: 100;
	opacity: 1;
	transform: scale(1);
	transition: opacity 200ms, transform 200ms;
}

.c-modal__closer {
	position: absolute;
	left: 50%;
	bottom: rem(-60px);
	transform: translateX(-50%);

	&:focus {
		outline: 0;
	}

	.o-icon__bg {
		@apply .shadow;
	}

	.icon {
		@apply .text-black-50;
	}
}
  • URL: /components/raw/modal/_modal.scss
  • Filesystem Path: src/templates/04-components/modal/_modal.scss
  • Size: 1.1 KB

There are no notes for this item.