<commit_before>/* ==========================================================
 * focus.scss
 * Focus style
 *
 * Author: Yann, <EMAIL>
 * Date:   2014-05-15 10:44:38
 *
 * Copyright 2014 Federal Chancellery of Switzerland
 * Licensed under MIT
 ========================================================== */

@charset "UTF-8";

/*doc
---
title: Focus
name: a-focus
category: Content Modules - Teaser
---

<span class="label label-admin">FLEX</span>

The focus teaser contains two to four articles selected by the editorial team and of topical interest which are to be placed in a prominent position. The position of the focus teaser is normally at the top of the home page. It consists of a large image, a headline, a brief teaser text, and a "more" link. The various topics are highlighted in turn in a slideshow presentation. The user can choose a particular article via a tab. This automatically stops the slideshow.

On tablets and smartphones, the tab bar is replaced by a series of dots.

Please be careful about the length of the text in the tabs, the height is fixed.

```html_example
 <div class="col-sm-10 col-sm-offset-1">

  <!-- focus panes -->
  <div class="tab-content tab-border tab-focus">
    <div class="tab-pane active in" id="home">
      <div class="row">
        <div class="col-sm-7"><img src="http://placehold.it/588x368" alt="image description"></div>
        <div class="col-sm-5">
          <h4>Lorem ispum title 1</h4>
          <p>
            1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Occultum facinus esse potuerit.
          </p>
          <br>
          <a href="#" class="icon icon--after icon--external">An external link</a>
        </div>
      </div>
    </div>
    <div class="tab-pane" id="profile">
      <div class="row">
        <div class="col-sm-7"><img src="http://placehold.it/588x368" alt="image description"></div>
        <div class="col-sm-5">
          <h4>Lorem ispum title 2</h4>
          <p>
            2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Occultum facinus esse potuerit.
          </p>
          <br>
          <a href="#" class="icon icon--after icon--external">An external link</a>
        </div>
      </div>
    </div>
    <div class="tab-pane" id="messages">
      <div class="row">
        <div class="col-sm-7"><img src="http://placehold.it/588x368" alt="image description"></div>
        <div class="col-sm-5">
          <h4>Lorem ispum title 3</h4>
          <p>
            3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Occultum facinus esse potuerit.
          </p>
          <br>
          <a href="#" class="icon icon--after icon--external">An external link</a>
        </div>
      </div>
    </div>
    <div class="tab-pane" id="settings">
      <div class="row">
        <div class="col-sm-7"><img src="http://placehold.it/588x368" alt="image description"></div>
        <div class="col-sm-5">
          <h4>Lorem ispum title 4</h4>
          <p>
            4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Occultum facinus esse potuerit.
          </p>
          <br>
          <a href="#" class="icon icon--after icon--external">An external link</a>
        </div>
      </div>
    </div>
  </div>

  <!-- focus tabs -->
  <ul class="nav nav-tabs nav-tabs-focus nav-justified">
    <li class="active"><a href="#home" data-toggle="tab">Title longer than usual</a></li>
    <li><a href="#profile" data-toggle="tab">Title 2</a></li>
    <li><a href="#messages" data-toggle="tab">Das ist der Megateaser</a></li>
    <li><a href="#settings" data-toggle="tab">Lorem ipsum dolor sit amet</a></li>
  </ul>

</div>
```
*/


@media only screen and (min-width: $screen-sm-min) {

.nav-tabs.nav-tabs-focus {
  position: relative;
  border-top: 1px solid $silver;
  border-right: 1px solid $silver;
  border-left: 1px solid $silver;
  margin-top: 0;
}

.nav-tabs.nav-tabs-focus:after {
  content: '';
  display: block;
  clear: both;
}

.nav-tabs.nav-justified.nav-tabs-focus>.active>a,
.nav-tabs.nav-justified.nav-tabs-focus>.active>a:hover {
  border-bottom: 3px solid $venetian-red;
}

.nav-tabs.nav-tabs-focus li {
  border: none;
  border-left: 1px solid $silver;
  border-bottom: none !important;
  position: relative;
  &:first-child, &:first-child:not(.active):hover a {border-left: none;}
  a {
    background: $smoke;
    height: 69px;
    display: block;
    border: none;
    box-sizing: border-box !important;
    border-bottom: 1px solid $silver;
    padding-bottom: 10px;
    font-size: 15px;
    line-height: 1.1em;
    text-align: center;
    border-radius: 0;
    color: $night-rider;
    overflow: hidden;
  }
  a:hover  {
    height: 69px;
    border: none;
    border-bottom: 3px solid $venetian-red;
    color: $black;
  }
  &.active a, &.active a:hover {
    border: none;
    padding-bottom: 10px !important;
    border-bottom: 3px solid $venetian-red;
    background: $gainsboro;
    color: $black;
  }
  &.active a:focus, a:focus {
    outline: none;
    border-left: none;
    border-right: none;
    border-top: none;
  }
  &:hover a {
    padding-top: 10px !important; // override nav-tabs behaviour<commit_msg>fix focus effect on tab elements (focus)<commit_after>/* ==========================================================
 * focus.scss
 * Focus style
 *
 * Author: Yann, <EMAIL>
 * Date:   2014-05-15 10:44:38
 *
 * Copyright 2014 Federal Chancellery of Switzerland
 * Licensed under MIT
 ========================================================== */

@charset "UTF-8";

/*doc
---
title: Focus
name: a-focus
category: Content Modules - Teaser
---

<span class="label label-admin">FLEX</span>

The focus teaser contains two to four articles selected by the editorial team and of topical interest which are to be placed in a prominent position. The position of the focus teaser is normally at the top of the home page. It consists of a large image, a headline, a brief teaser text, and a "more" link. The various topics are highlighted in turn in a slideshow presentation. The user can choose a particular article via a tab. This automatically stops the slideshow.

On tablets and smartphones, the tab bar is replaced by a series of dots.

Please be careful about the length of the text in the tabs, the height is fixed.

```html_example
 <div class="col-sm-10 col-sm-offset-1">

  <!-- focus panes -->
  <div class="tab-content tab-border tab-focus">
    <div class="tab-pane active in" id="home">
      <div class="row">
        <div class="col-sm-7"><img src="http://placehold.it/588x368" alt="image description"></div>
        <div class="col-sm-5">
          <h4>Lorem ispum title 1</h4>
          <p>
            1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Occultum facinus esse potuerit.
          </p>
          <br>
          <a href="#" class="icon icon--after icon--external">An external link</a>
        </div>
      </div>
    </div>
    <div class="tab-pane" id="profile">
      <div class="row">
        <div class="col-sm-7"><img src="http://placehold.it/588x368" alt="image description"></div>
        <div class="col-sm-5">
          <h4>Lorem ispum title 2</h4>
          <p>
            2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Occultum facinus esse potuerit.
          </p>
          <br>
          <a href="#" class="icon icon--after icon--external">An external link</a>
        </div>
      </div>
    </div>
    <div class="tab-pane" id="messages">
      <div class="row">
        <div class="col-sm-7"><img src="http://placehold.it/588x368" alt="image description"></div>
        <div class="col-sm-5">
          <h4>Lorem ispum title 3</h4>
          <p>
            3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Occultum facinus esse potuerit.
          </p>
          <br>
          <a href="#" class="icon icon--after icon--external">An external link</a>
        </div>
      </div>
    </div>
    <div class="tab-pane" id="settings">
      <div class="row">
        <div class="col-sm-7"><img src="http://placehold.it/588x368" alt="image description"></div>
        <div class="col-sm-5">
          <h4>Lorem ispum title 4</h4>
          <p>
            4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Occultum facinus esse potuerit.
          </p>
          <br>
          <a href="#" class="icon icon--after icon--external">An external link</a>
        </div>
      </div>
    </div>
  </div>

  <!-- focus tabs -->
  <ul class="nav nav-tabs nav-tabs-focus nav-justified">
    <li class="active"><a href="#home" data-toggle="tab">Title longer than usual</a></li>
    <li><a href="#profile" data-toggle="tab">Title 2</a></li>
    <li><a href="#messages" data-toggle="tab">Das ist der Megateaser</a></li>
    <li><a href="#settings" data-toggle="tab">Lorem ipsum dolor sit amet</a></li>
  </ul>

</div>
```
*/


@media only screen and (min-width: $screen-sm-min) {

.nav-tabs.nav-tabs-focus {
  position: relative;
  border-top: 1px solid $silver;
  border-right: 1px solid $silver;
  border-left: 1px solid $silver;
  margin-top: 0;
}

.nav-tabs.nav-tabs-focus:after {
  content: '';
  display: block;
  clear: both;
}

.nav-tabs.nav-justified.nav-tabs-focus>.active>a,
.nav-tabs.nav-justified.nav-tabs-focus>.active>a:hover {
  border-bottom: 3px solid $venetian-red;
}

.nav-tabs.nav-tabs-focus li {
  border: none;
  border-left: 1px solid $silver;
  border-bottom: none !important;
  position: relative;
  &:first-child, &:first-child:not(.active):hover a {border-left: none;}
  a {
    background: $smoke;
    height: 69px;
    display: block;
    border: none;
    box-sizing: border-box !important;
    border-bottom: 1px solid $silver;
    padding-bottom: 10px;
    font-size: 15px;
    line-height: 1.1em;
    text-align: center;
    border-radius: 0;
    color: $night-rider;
    overflow: hidden;
  }
  a:hover, a:focus  {
    height: 69px;
    border: none;
    border-bottom: 3px solid $venetian-red;
    color: $black;
  }
  &.active a, &.active a:hover, &.active a:focus {
    border: none;
    padding-bottom: 10px !important;
    border-bottom: 3px solid $venetian-red;
    background: $gainsboro;
    color: $black;
  }
  &:hover a {
    padding-top: 10px !important; // override nav-tabs behaviour
{'fraction_non_alphanumeric': 0.17023763147643164, 'fraction_numerical': 0.018504090377873005, 'mean_word_length': 2.736899563318777, 'pattern_counts': {'":': 0, '<': 185, '<?xml version=': 0, '>': 193, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 10, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '907436', 'n_tokens_mistral': 3586, 'n_tokens_neox': 3407, 'n_words': 977}