hkk Frontend 2017

Mitglied Werden Link: Chatbot 

<a class="sticky-link sticky-link--chatbot js-chatbox" href="#">
    <svg class="icon sticky-link__icon icon--chat" id="icon-42f7" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-chat"></use>
</svg><span class="sticky-link__text">Chatbot</span>
</a>
 
#{tag || 'a'}.sticky-link(
  class=chatbot && 'sticky-link--chatbot js-chatbox', href=link && link
)

  if icon
    != include('@icon', { icon: icon, attr: { class: 'sticky-link__icon'} })

  if text
    span.sticky-link__text #{text}
 
{
  "link": "#",
  "text": "Chatbot",
  "icon": "chat",
  "chatbot": true
}
  • Content: 
    .sticky-link {
  align-items: center;
  background-color: #0c8336;
  color: #fff;
  display: inline-flex;
  flex-wrap: wrap;
  font-size: 1.5rem;
  font-weight: bold;
  justify-content: center;
  line-height: 1.6em;
  padding: 1.5rem;
  width: 100%;

  @include mq($from: l) {
    display: flex;
    line-height: 1.2;
    text-align: center;
  }
}

.sticky-link--chatbot {
  background-color: $color-blue;
}

.sticky-link__icon {
  font-size: 3rem;
  margin-right: 1.6rem;

  @include mq($from: l) {
    margin-bottom: 1rem;
    margin-right: 0;
  }
}
  • URL: /components/raw/sticky-link/sticky-link.scss
  • Filesystem Path: src/components/atoms/sticky-link/sticky-link.scss
  • Size: 553 Bytes

There are no notes for this item.