ScarletPonytail

-webkit-transform: perspective(1px) translateZ(0) translateY(-4px);
transform: perspective(1px) translateZ(0) translateY(-4px);

ScarletPonytail

@if($fields['button_position'])
	{{ $fields['button_text'] }}
	{!! $fields['button_text'] !!}
@endif

ScarletPonytail

/* https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements */

h2::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 800;
	content: "\f007";
}

ScarletPonytail

animation-name: zoom;
animation-fill-mode: forwards;
animation-duration: 10s;
animation-timing-function: ease-in-out;

@keyframes zoom {
  0% {
    transform: scale(1);
  }

ScarletPonytail

// Multi-use?

@mixin ease {
	-webkit-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;	
}

a {
	@include ease;

ScarletPonytail

@mixin slider-track {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  width: 100%;
  background: #fff !important;
  border-color: transparent !important;
  color: transparent !important;
}

ScarletPonytail

// Edge
// ---------------------------------------
@mixin edge-only(){
  @supports (-ms-accelerator:true) {
    & {
      @content;
    }
  }
}

ScarletPonytail

// Quick Example
@mixin underline($width) {
	width: #{$width};
}

h2 {
	@include underline('50%');
}

// Full Example

ScarletPonytail

background-image: url(../icons/stack/svg/sprite.stack.svg#facebook);

ScarletPonytail

<div class="formatted-text">
  {{ items }}
</div>