England Football

Goal Scorers: Invert 

<div class="goal-scorers  goal-scorers--invert " data-behaviour="away-team">
    <div class="goal-scorers__group player-scored">
        <ul>
            <li>
                <span class="scorer-firstname">Sterling</span>Sterling
                <span class="goal-time">(19&prime;)</span>
            </li>
            <li>
                <span class="scorer-firstname">Sterling</span>Sterling
                <span class="goal-time">(46&prime;)</span>
            </li>
        </ul>
    </div>
    <div class="goal-scorers__group player-sent-off">
        <ul>
            <li>
                <span class="scorer-firstname">Sterling</span>Sterling
                <span class="goal-time">(65&prime;)</span>
            </li>
            <li class="yellowcard">
                <span class="scorer-firstname">Sterling</span>Sterling
                <span class="goal-time">(64&prime;)</span>
            </li>
            <li class="yellowredcard">
                <span class="scorer-firstname">Sterling</span>Sterling
                <span class="goal-time">(64&prime;)</span>
            </li>
        </ul>
    </div>
</div>

No notes defined.

{
  "goal-scorers": [
    {
      "score-type": "player-scored",
      "scorer-details": [
        {
          "firstname": "Sterling",
          "surname": "Sterling",
          "goals": [
            {
              "time": "19",
              "copy": ""
            }
          ]
        },
        {
          "firstname": "Sterling",
          "surname": "Sterling",
          "goals": [
            {
              "time": "46",
              "copy": ""
            }
          ]
        }
      ]
    },
    {
      "score-type": "player-sent-off",
      "scorer-details": [
        {
          "firstname": "Sterling",
          "surname": "Sterling",
          "goals": [
            {
              "time": "65",
              "copy": ""
            }
          ]
        },
        {
          "firstname": "Sterling",
          "surname": "Sterling",
          "yellowcard": true,
          "goals": [
            {
              "time": "64",
              "copy": ""
            }
          ]
        },
        {
          "firstname": "Sterling",
          "surname": "Sterling",
          "yellowredcard": true,
          "goals": [
            {
              "time": "64",
              "copy": ""
            }
          ]
        }
      ]
    }
  ],
  "invert-layout": true
}
  • Content: 
    .goal-scorers {
  @include text-xs;

  letter-spacing: 0.01em;

  &__group {
    margin: 0 1.3rem;
    margin-top: 1.6rem;
    border-bottom: 0.1rem solid #eceef3;
    &:last-child {
      border: 0;
    }
  }
  li {
    margin-bottom: 1.2rem;
    padding-left: 1rem;
    font-weight: bold;
    text-transform: uppercase;

    .scorer-firstname {
      margin-right: 1rem;
      display: none;
    }
    .goal-time {
      font-weight: normal;
      text-transform: unset;
    }
  }
  li::before {
    content: '';
    width: 1.6rem;
    height: 1.6rem;
    display: inline-block;
    position: relative;
    top: 3px;
    left: -1rem;
  }

  &--invert {
    li {
      padding-left: 0;
      padding-right: 1px;
      text-align: right;
      margin-right: 1.3rem;
    }
    li::before {
      content: '';
      display: none;
    }
    li::after {
      content: '';
      width: 1.6rem;
      height: 1.6rem;
      display: inline-block;
      position: relative;
      top: 3px;
      right: -1rem;
    }
  }
  .player-scored li::before,
  .player-scored li::after {
    background: url('./assets/images/football-icon.svg') no-repeat center center;
    background-size: contain;
  }
  .player-sent-off li::before,
  .player-sent-off li::after {
    background: url('./assets/images/redcard-icon.svg') no-repeat center center;
    background-size: contain;
  }
  .missed-a-penalty li::before,
  .missed-a-penalty li::after {
    background: url('./assets/images/missedpenalty-icon.svg') no-repeat center
      center;
    background-size: contain;
    width: 2rem;
    height: 1.6rem;
  }
  .player-sent-off li.yellowcard::before,
  .player-sent-off li.yellowcard::after {
    background: url('./assets/images/yellowcard-icon.svg') no-repeat center
      center;
    background-size: contain;
  }
  .player-sent-off li.yellowredcard::before,
  .player-sent-off li.yellowredcard::after {
    background: url('./assets/images/yellowred-icon.svg') no-repeat center
      center;
    background-size: contain;
  }

  @media (min-width: $mq-medium) {
    font-size: 1.6rem;
    line-height: 1.6rem;

    li {
      margin-bottom: 1.5rem;
      padding-left: 0;
      padding-right: 1px;
      text-align: right;
      .scorer-firstname {
        display: none;
      }
    }
    li::before {
      content: '';
      display: none;
    }
    li::after {
      content: '';
      width: 1.6rem;
      height: 1.6rem;
      display: inline-block;
      position: relative;
      top: 3px;
      right: -1rem;
    }
    &--invert {
      li {
        text-align: left;
      }
      li::before {
        content: '';
        display: inline-block;
      }
      li::after {
        content: '';
        display: none;
      }
    }
  }
}
  • URL: /components/raw/goal-scorers/goal-scorers.scss
  • Filesystem Path: src/library/components/goal-scorers/goal-scorers.scss
  • Size: 2.7 KB 
<div class="goal-scorers {{#if invert-layout}} goal-scorers--invert {{/if}}"
data-behaviour="{{#if invert-layout}}away-team{{else}}home-team{{/if}}" >
    {{#each goal-scorers}}
    <div class="goal-scorers__group {{score-type}}">
        <ul>
            {{#each scorer-details}}
            <li {{#if yellowcard}} class="yellowcard"{{/if}} {{#if yellowredcard}} class="yellowredcard"{{/if}}>
                <span class="scorer-firstname">{{firstname}}</span>{{surname}}
                {{#each goals}}
                <span class="goal-time">({{time}}&prime;{{#if copy}} {{copy}}{{/if}})</span>
                {{/each}}
            </li>
            {{/each}}
        </ul>
    </div>
    {{/each}}
</div>