Asta Valentaite

Icons 

<div class="o-icon flex items-center justify-center relative">
    <div class="o-icon__bg absolute pin bg-peach"></div>
    <i class="icon icon--ui-prev">
		<svg>
			<use class="no-barba" xlink:href="#ui-prev"></use>
		</svg>
	</i>

</div>
 
{% import '@helpers' as h %}

<div class="o-icon flex items-center justify-center relative" {{ attr|default('') }}>
	<div class="o-icon__bg absolute pin bg-{{ color|default('peach') }}"></div>
	{{ h.symbol(icon|default('ui-prev')) }}
</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"
    }
  ],
  "color": "peach",
  "icon": "ui-prev"
}
  • Content: 
    .o-icon {
	@apply .text-white;

	transition: opacity 300ms ease, transform 300ms ease;
	width: rem(35px);
	height: rem(35px);
}

.o-icon__bg {
	transition: transform 300ms ease;
	transform: rotate(45deg);
	transform-origin: 50% 50%;
	margin: auto;
}

.bg-black-5 .o-line {
	@apply .bg-black-10;
}
  • URL: /components/raw/icons/_icons.scss
  • Filesystem Path: src/templates/02-objects/icons/_icons.scss
  • Size: 297 Bytes

There are no notes for this item.