<div style="width:310px">
<section class="acl-tabs acl-tabs--space-between">
<input class="acl-tab__input" id="tab-one" type="radio" name="grp" checked="checked" />
<label class="acl-tab__label" for="tab-one">Tab One</label>
<div class="acl-tab__content">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<input class="acl-tab__input" id="tab-two" type="radio" name="grp" />
<label class="acl-tab__label" for="tab-two">Tab Two</label>
<div class="acl-tab__content">
<img class="acl-tab__responsive-image" src="https://placeimg.com/640/480/arch" alt="Dummy Image" />
</div>
<input class="acl-tab__input" id="tab-three" type="radio" name="grp" />
<label class="acl-tab__label" for="tab-three">Tab Three</label>
<div class="acl-tab__content">
In hac habitasse platea dictumst. Proin non tempor odio. Quisque est mi, fermentum sed suscipit vitae,
imperdiet nec massa. Nullam pulvinar, erat eget porttitor lobortis, nisl ante congue nisi, ut lobortis
turpis metus sed felis.
</div>
</section>
</div>
<div style="margin-top:100px">
<p>To change the colour of the tab links, you can use the following class modifiers in addition to "acl-tabs"</p>
<ul>
<li>acl-tabs--teal</li>
<li>acl-tabs--orange</li>
<li>acl-tabs--blue</li>
<li>acl-tabs--dark-blue</li>
<li>acl-tabs--purple</li>
</ul>
</div>
<div style="width:310px">
<section class="acl-tabs acl-tabs--space-between">
<input class="acl-tab__input" id="tab-one" type="radio" name="grp" checked="checked" />
<label class="acl-tab__label" for="tab-one">Tab One</label>
<div class="acl-tab__content">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<input class="acl-tab__input" id="tab-two" type="radio" name="grp" />
<label class="acl-tab__label" for="tab-two">Tab Two</label>
<div class="acl-tab__content">
<img class="acl-tab__responsive-image" src="https://placeimg.com/640/480/arch" alt="Dummy Image" />
</div>
<input class="acl-tab__input" id="tab-three" type="radio" name="grp" />
<label class="acl-tab__label" for="tab-three">Tab Three</label>
<div class="acl-tab__content">
In hac habitasse platea dictumst. Proin non tempor odio. Quisque est mi, fermentum sed suscipit vitae,
imperdiet nec massa. Nullam pulvinar, erat eget porttitor lobortis, nisl ante congue nisi, ut lobortis
turpis metus sed felis.
</div>
</section>
</div>
<div style="margin-top:100px">
<p>To change the colour of the tab links, you can use the following class modifiers in addition to "acl-tabs"</p>
<ul>
<li>acl-tabs--teal</li>
<li>acl-tabs--orange</li>
<li>acl-tabs--blue</li>
<li>acl-tabs--dark-blue</li>
<li>acl-tabs--purple</li>
</ul>
</div>
/* No context defined. */
.acl-tabs {
display: flex;
flex-wrap: wrap;
padding: 0 5px;
&--center {
justify-content: center;
}
&--space-between {
justify-content: space-between;
}
&--left {
justify-content: left;
}
&--right {
justify-content: right;
}
&--purple {
.acl-tab__input {
&:checked + .acl-tab__label,
&:hover + .acl-tab__label {
border-bottom: 2px solid #2200b7; // Candidate for variable
color: #2200b7; // Candidate for variable
}
}
}
&--orange {
.acl-tab__input {
&:checked + .acl-tab__label,
&:hover + .acl-tab__label {
border-bottom: 2px solid $orange;
color: $orange;
}
}
}
&--teal {
.acl-tab__input {
&:checked + .acl-tab__label,
&:hover + .acl-tab__label {
border-bottom: 2px solid $teal;
color: $teal;
}
}
}
&--dark-blue {
.acl-tab__input {
&:checked + .acl-tab__label,
&:hover + .acl-tab__label {
border-bottom: 2px solid #43749e;
color: #43749e;
}
}
}
&--blue {
.acl-tab__input {
&:checked + .acl-tab__label,
&:hover + .acl-tab__label {
border-bottom: 2px solid $blue;
color: $blue;
}
}
}
}
.acl-tab {
&__input,
&__content {
display: none;
}
&__input {
&:checked + .acl-tab__label,
&:hover + .acl-tab__label {
border-bottom: 2px solid $teal;
color: $teal;
}
}
&__label {
cursor: pointer;
color: #b1b7cd;
text-transform: uppercase;
font-size: 12px;
font-weight: bold;
letter-spacing: 0;
line-height: 17px;
text-align: center;
margin: 0px;
padding: 5px 20px;
&--no-padding {
padding: 0;
}
&--margin-right-small {
margin-right: 15px;
}
&--grey {
color: #b1b7cd;
}
}
&__input:checked + label + div {
display: block;
animation: fadeIn ease 1s;
}
&__content {
width: 100%;
margin-top: 25px;
order: 1;
&--small-margin {
margin-top: 12px;
}
&--small {
color: rgba(0, 0, 0, 0.75);
font-family: 'Open Sans';
font-size: 10px;
letter-spacing: 0;
line-height: 14px;
h2 {
font-size: 12px;
font-weight: 600;
line-height: 17px;
}
}
}
&__responsive-image {
width: 100%;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-o-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-ms-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
No notes defined.