Aeroporto di Bologna - Design System

Follower 

<div class="c-follower ">

    <div class="c-follower__scheduling">
        <dl class="c-scheduling ">

            <div class="c-scheduling__item">
                <dt>Data</dt>
                <dd class="">8 Maggio

                </dd>

            </div>
            <div class="c-scheduling__item">
                <dt>Numero volo</dt>
                <dd class="">BA 541

                </dd>

            </div>
            <div class="c-scheduling__item">
                <dt>Orario programmato</dt>
                <dd class="">12:05

                </dd>

            </div>
            <div class="c-scheduling__item">
                <dt>Orario stimato</dt>
                <dd class="is-positive">11:55

                </dd>

                <dd><small>(18/03/2019)</small></dd>

            </div>
            <div class="c-scheduling__item">
                <dt>Stato</dt>
                <dd class="">In volo

                </dd>

                <dd><small>(18/03/2019)</small></dd>

            </div>

        </dl>
    </div>

    <div class="c-follower__button">

        <button type="button" class="c-button c-button--messenger">
            <span>Segui volo</span> <svg class="c-icon c-icon--24">
                <use xlink:href="#ic-messenger"></use>
            </svg>
        </button>

    </div>

</div>
 
<div class="c-follower {{ modifier }}">

  {{!-- <div class="c-follower__header">
    {{> @icon header-icon }}
    <p>{{{ header }}}</p>
  </div> --}}

  <div class="c-follower__scheduling">
    {{> @scheduling scheduling }}
  </div>

  <div class="c-follower__button">
    
    {{!-- commentato per possibile ripristino segui volo --}}
    {{!-- {{#if stop-follow}}
      <button type="button" class="c-button c-button--submit">
        <span>Non seguire più</span> {{> @icon class="c-icon c-icon--24" symbol="ic-no-eye-black-24px" }}
      </button>
      <a href="#chatbot-scroll" class=" js-smooth-scroll">Vuoi ricevere notifiche sul volo?</a>
    {{else}} --}}

      <button type="button" class="c-button c-button--messenger">
        <span>Segui volo</span> {{> @icon class="c-icon c-icon--24" symbol="ic-messenger" }}
      </button>

    {{!-- commentato per possibile ripristino segui volo --}}
      {{!-- <a href="#chatbot-scroll" class=" js-smooth-scroll">Vuoi ricevere notifiche sul volo?</a> --}}
    {{!-- {{/if}} --}}
  </div>
 
</div>
 
{
  "header": "Informazioni sul <strong>volo in arrivo</strong>",
  "header-icon": {
    "class": "c-icon c-icon--32",
    "symbol": "ic_flight_land_black_24px"
  },
  "scheduling": {
    "schedulings": [
      {
        "title": "Data",
        "desc": "8 Maggio"
      },
      {
        "title": "Numero volo",
        "title-aria-label": "Numero volo",
        "desc": "BA 541"
      },
      {
        "title": "Orario programmato",
        "title-aria-label": "Orario programmato",
        "desc": "12:05"
      },
      {
        "title": "Orario stimato",
        "desc": "11:55",
        "dd-class": "is-positive",
        "delay": "(18/03/2019)"
      },
      {
        "title": "Stato",
        "desc": "In volo",
        "delay": "(18/03/2019)"
      }
    ]
  },
  "follow-btn": {
    "type": "button",
    "text": "Salva volo",
    "modifier": "c-button--submit"
  }
}
  • Content: 
    .c-follower {
  position: relative;
  z-index: $z-Index-follower;
}

// .c-follower__header {
//   display: flex;
//   align-items: center;
//   justify-content: center;
//   background-color: secondary(page, 100);
//   border-radius: remify(4px) remify(4px) 0 0;
//   padding: remify(32px);

//   svg {
//     display: none;

//     @include min-screen(bp(tablet)) {
//       display: block;
//     }

//   }

//   p {
//     margin-left: remify(16px);

//     @include min-screen(bp(tablet)) {
//       font-size: 150%;
//     }

//   }

// }

.c-follower__scheduling {
  background-color: #fff;
  padding: remify(16px);

  @include min-screen(bp(tablet)) {
    border-radius: remify(4px);
    transform: scale(1.01);
  }

}

.c-follower__button {
  display: flex;
  flex-direction: column;
  position: relative;
  text-align: center;
  width: auto;
  background-color: #fff;
  padding: remify(32px) remify(16px);
  margin-bottom: remify(24px);

  // @include min-screen(bp(tablet)) {
  //   position: absolute;
  //   right: remify(16px);
  //   top: 0;
  //   background-color: initial;
  // }

  .c-button {
    max-width: remify(230px);
    margin: 0 auto;
  }

  svg {
    vertical-align: bottom;
    * {
      fill: currentColor;
    }
  } 

  a {
    margin-top: remify(16px);
  }

}
  • URL: /components/raw/follower/_follower.scss
  • Filesystem Path: src/views/03-organisms/follower/_follower.scss
  • Size: 1.3 KB

No notes defined.