// vf-button @import 'package.variables.scss'; // Debug information from component's `package.json`: // --- /*! * Component: #{map-get($componentInfo, 'name')} * Version: #{map-get($componentInfo, 'version')} * Location: #{map-get($componentInfo, 'location')} */ // vf-button $button-hover-fix: -5px -5px rgba(0, 0, 0, 0); .vf-button { --vf-button__color__background--default: var(--vf-color--grey); --vf-button__color__background--default-dark: var(--vf-color--grey--darkest); --vf-button__color__border--default-visited: var(--vf-color--grey--lightest); @include set-type(text-button--1, $color: ignore); align-self: center; /* stylelint-disable */ -webkit-appearance: none; appearance: none; /* stylelint-enable */ backface-visibility: hidden; background-color: ui-color(black); background-color: var(--vf-button-background-color, var(--vf-button__color__background--default)); border: 4px solid ui-color(black); border: 4px solid var(--vf-button-border-color, var(--vf-button__color__background--default)); box-shadow: 8px 8px 0 var(--vf-button-shadow-background-color, var(--vf-button__color__background--default-dark)), $button-hover-fix; color: ui-color(white); // fallback, IE color: var(--vf-button-text-color, ui-color(white)); cursor: pointer; display: inline-block; margin: 0 16px 16px 0; outline: 0; padding: 12px 24px; position: relative; text-align: center; text-decoration: none; transform: translate(0, 0); transition: all linear 125ms; // Ideally we want this to be 50ms but there's an issue in Webkit/Safari on box-shadow animations // additionally we can't do a pseudo :before/:after as we need to support