Asta Valentaite

Button: Share 

<button data-share-button class="o-btn o-btn--sm o-btn--share text-blush relative py-4 px-3 justify-around items-center">
	<span class="flex items-center justify-between">
			<i class="icon icon--ui-share">
		<svg>
			<use class="no-barba" xlink:href="#ui-share"></use>
		</svg>
	</i>

		<b class="ml-2">
			Button
		</b>
	</span>
</button>
 
{% import '@helpers' as h %}

<button data-share-button class="o-btn o-btn--sm o-btn--share text-blush relative py-4 px-3 justify-around items-center">
	<span class="flex items-center justify-between">
		{{ h.symbol('ui-share') }}
		<b class="ml-2">
			{{ text|default('Button')}}
		</b>
	</span>
</button>
 
{
  "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"
    }
  ],
  "text": "Button",
  "href": "#0",
  "attributes": null,
  "title": "Lorem, ipsum dolor.",
  "pageUrl": "http://www.asta.mudbank.uk",
  "twitterHandle": "asta",
  "shareDesc": "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam maiores, sed voluptate similique tempore laborum."
}
  • Content: 
    .o-btn {
	@apply .no-underline .inline-flex .leading-none .text-sm .relative .uppercase .tracking-wide;

	& > span {
		transition: transform 300ms ease;
	}
}

.o-btn--sm {
	min-width: rem(120px);

	&:hover {
		&::after {
			transform: scale(1, 5);
			transition-delay: 0ms;
		}

		& > span {
			transform: translate3d(0, rem(-10px), 0);
			transition-delay: 75ms;
		}
	}

	&::after {
		@apply .bg-blush .absolute .pin-l .pin-b .w-full .h-px;

		transition: transform 300ms 75ms ease;
		content: ' ';
	}
}

.o-btn--share {
	min-width: rem(150px);

	&:focus {
		outline: 0;
	}
}

.o-btn--fill {
	transition: box-shadow 300ms ease;
}

.o-btn--center {
	@apply .text-blush .relative .py-4 .px-3 .justify-center;
}
  • URL: /components/raw/button/_button.scss
  • Filesystem Path: src/templates/02-objects/button/_button.scss
  • Size: 710 Bytes

There are no notes for this item.