PDJ Brandbox

action: icon 

<a href="#" class="action action--icon action--normal action--on-light">
    <span class="action__icon">
        <svg class="icon-search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 57">
            <path fill="currentColor" d="M60 54.93 39.86 34.91a21.74 21.74 0 0 0 4.28-12.97C44.14 9.84 34.24 0 22.07 0S0 9.84 0 21.94s9.9 21.94 22.07 21.94c6.23 0 11.87-2.59 15.88-6.73L57.92 57 60 54.93ZM22.07 40.95c-10.55 0-19.13-8.53-19.13-19.02S11.52 2.92 22.07 2.92 41.2 11.45 41.2 21.94s-8.58 19.02-19.13 19.02Z" />
        </svg>

    </span>

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

  <span class="action__bg"></span>
</a>
 
type: normal
tint: on-light
url: '#'
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.