<div class="mijn-gent-block">

    <div class="toggle">
        <div class="label">
            <a href='javascript:(void);' class="toggle" title="">Username</a>
        </div>
        <div class="picture">
            <img src="https://via.placeholder.com/32x32" alt="Username" />
        </div>
    </div>

    <div class="content">
        <div class="mijn-gent-component">
            <header>
                <h3>Mijn Bibliotheek Gent</h3>
            </header>

            <section>
                <ul class="no-style">
                    <li><a href='javascript:(void);'>Overzicht</a></li>
                    <li><a href='javascript:(void);'>Leestips</a></li>
                    <li><a href='javascript:(void);'>Mijn profiel</a></li>
                </ul>
            </section>

        </div>
        <div class="mijn-gent-component">
            <header>
                <h3>Mijn Gent</h3>
            </header>

            <section>
                <ul class="no-style">
                    <li><a href='javascript:(void);'>Mijn profiel</a></li>
                    <li><a href='javascript:(void);'>Nieuwsbrieven</a></li>
                    <li><a href='javascript:(void);'>Historiek</a></li>
                </ul>
            </section>

        </div>
        <footer>
            <a href='javascript:(void);' title="">Afmelden</a>
        </footer>
    </div>

</div>
<div class="mijn-gent-block">

  {% if auth == 'false' %}

    {% include '@link' with {
      'modifier': 'login-link',
      'link': 'javascript:(void);',
      'text': 'Aanmelden<i class="icon-user"></i>'
    } %}

  {% else %}

    <div class="toggle">
      <div class="label">
        {% include '@link' with {
          'link': 'javascript:(void);',
          'modifier': 'toggle',
          'text': 'Username'
        } %}
      </div>
      <div class="picture">
        {% include '@image' with { 'src': 'https://via.placeholder.com/32x32', 'alt_text': 'Username' } %}
      </div>
    </div>

    <div class="content">
      <div class="mijn-gent-component">
        <header>
          {% include '@h3' with { 'h3_text': 'Mijn Bibliotheek Gent' } %}
        </header>

        <section>
          {% include '@list' with {
            'modifier': 'no-style',
            'items': [
              "<a href='javascript:(void);'>Overzicht</a>",
              "<a href='javascript:(void);'>Leestips</a>",
              "<a href='javascript:(void);'>Mijn profiel</a>"
            ]
          } %}
        </section>

      </div>
      <div class="mijn-gent-component">
        <header>
          {% include '@h3' with { 'h3_text': 'Mijn Gent' } %}
        </header>

        <section>
          {% include '@list' with {
            'modifier': 'no-style',
            'items': [
              "<a href='javascript:(void);'>Mijn profiel</a>",
              "<a href='javascript:(void);'>Nieuwsbrieven</a>",
              "<a href='javascript:(void);'>Historiek</a>"
            ]
          } %}
        </section>

      </div>
      <footer>
        {% include '@link' with {
          'link': 'javascript:(void);',
          'modifier': '',
          'text': 'Afmelden'
        } %}
      </footer>
    </div>

  {% endif %}

</div>
{
  "auth": "false"
}
  • Content:
    .mijn-gent-block {
      display: inline-block;
      position: relative;
    
      &:hover .content {
        display: inline-block;
      }
    
      .login-link {
        display: inline-block;
        position: relative;
        height: 2rem;
    
        @include tablet {
          padding-right: 2rem;
        }
    
        i {
          display: none;
    
          @include tablet {
            display: inline;
            position: absolute;
            margin-top: -.2rem;
            margin-left: .625rem;
          }
        }
      }
    
      .toggle {
        display: inline-block;
        position: relative;
        height: 2rem;
        overflow: hidden;
      }
    
      .label,
      .picture {
        height: 2rem;
        float: left;
      }
    
      .label {
        display: none;
    
        @include tablet {
          display: inline;
          margin-right: .5rem;
        }
      }
    
      .picture {
        top: 0;
        right: 0;
        bottom: 0;
        width: 2rem;
        margin: auto;
    
        img {
          width: 100%;
          border-radius: $radius-1;
        }
      }
    
      .content {
        display: none;
        position: absolute;
        top: calc(2.4rem - 10px);
        right: 0;
        min-width: 200px;
        margin-top: 10px;
        border-radius: $radius-1;
        background: $color-white;
        box-shadow: 2px 2px 2px 0 rgba(44, 63, 72, .2), -2px 2px 2px 0 rgba(44, 63, 72, .2);
        z-index: 9999;
    
        &::before {
          @include triangle(top, 10px, 10px, $color-white);
          position: absolute;
          top: -10px;
          right: 10px;
        }
    
        h3 {
          margin-bottom: 5px;
          color: $color-dark-gray;
          font-size: .8rem;
        }
    
        li {
          line-height: 1.6rem;
        }
    
        a {
          color: $color-blue;
          font-size: .8rem;
          text-decoration: none;
        }
    
        header,
        section {
          padding-right: .625rem;
          padding-left: .625rem;
        }
    
        header {
          padding-top: .9rem;
        }
    
        section {
          padding-left: 1.25rem;
        }
    
        footer {
          padding: 0 .625rem;
          border-bottom-left-radius: $radius-1;
          border-bottom-right-radius: $radius-1;
          background: $color-lightest-blue;
          text-align: right;
        }
      }
    
      .mijn-gent-component {
        border-bottom: 1px solid $color-light-blue;
      }
    }
    
  • URL: /components/raw/mijn-gent-block/_mijn-gent-block.scss
  • Filesystem Path: components/31-molecules/building-blocks/mijn-gent-block/_mijn-gent-block.scss
  • Size: 2.1 KB

There are no notes for this item.