PDJ Brandbox

action: icon left 

<a href="#" class="action action--ghost action--on-light">
    <span class="action__icon">
        <svg class="icon-marker" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 28">
            <path fill="currentColor" d="M10,0c5.5,0,10,4.4,10,9.8c0,1.8-0.5,3.5-1.4,5l0,0l-7.7,12.7c-0.1,0.2-0.4,0.4-0.7,0.4l0,0c-0.3,0-0.6-0.1-0.7-0.4l0,0L1.5,15C0.5,13.5,0,11.7,0,9.8C0,4.4,4.5,0,10,0z M10,1.6c-4.6,0-8.3,3.7-8.3,8.2c0,1.5,0.4,3,1.3,4.3l0,0l7.2,11.4l7-11.6c0.8-1.3,1.2-2.7,1.2-4.2C18.3,5.3,14.6,1.6,10,1.6z M10,5c2.8,0,5,2.2,5,5c0,2.7-2.2,5-5,5c-2.8,0-5-2.3-5-5C5,7.2,7.2,5,10,5z M10,6.7c-1.8,0-3.3,1.5-3.3,3.3c0,1.8,1.5,3.3,3.3,3.3c1.9,0,3.3-1.5,3.3-3.3C13.3,8.2,11.8,6.7,10,6.7z" />
        </svg>
    </span>

    <span class="action__label">Find a store</span>

    <span class="action__bg"></span>
</a>
 
<a href="{{ url }}"{{#if target}} target="{{ target }}"{{/if}} class="action action--{{ type }} action--{{ tint }}{{#if disabled}} action--disabled{{/if}}"{{#if disabled}} disabled{{/if}}>
  <span class="action__icon">
    {{> @icon-marker }}
  </span>

  <span class="action__label">{{ label }}</span>

  <span class="action__bg"></span>
</a>
 
type: ghost
tint: on-light
url: '#'
label: Find a store
disabled: false
class: ''
target: false
  • Content: 
    button {
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  border: none;
  outline: none;
  background: none;
  cursor: pointer;
}

.action {
  transition: color 250ms, border-color 250ms;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--atom-height);
  padding: 0 var(--gap--8);
  overflow: hidden;
  color: white;
  text-decoration: none;
  border-radius: 0;
  background-color: transparent;
  cursor: pointer;

  @media (min-width: 750px) {
    min-width: 160px !important;
  }

  & > *:not(.action__bg) {
    flex: 0 0 auto;
    margin-left: var(--gap--2);

    &:first-child {
      margin-left: 0;
    }
  }

  &:hover,
  &:focus {
    text-decoration: none;
  }

  &.action--icon {
    width: var(--atom-height);
    min-width: 0;
    padding: 0;
  }
}

.action__bg {
  transition: background-color 250ms;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: block;
  margin: 0;
  border: 1px solid transparent;
}

.action__icon {
  position: relative;
  z-index: 2;
  display: block;
}

.action__label {
  position: relative;
  z-index: 2;
  color: inherit;
  font-family: var(--font--special);
  font-size: var(--p--1);

  .action--disabled &,
  .action[disabled]:not([disabled='false']) & {
    opacity: .2;
  }
}
  • URL: /components/raw/action/action.scss
  • Filesystem Path: ../src/02_atoms/action/action.scss
  • Size: 1.3 KB

No notes defined.