Commit 0ebe822b authored by Pat Kira's avatar Pat Kira Committed by Aaron Wells

Bug 1530606 - Styled First and last button on carousel block

behatnotneeded

Change-Id: If377cc507a3ee524ffe28d72b87c3f906a045812
parent e5ca541d
......@@ -16,27 +16,28 @@
{/foreach}
</div>
<a class="left carousel-control" href="#slideshow{$instanceid}" role="button" data-slide="prev">
<span class="icon icon-chevron-left icon-lg" role="presentation" aria-hidden="true" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<div class="left carousel-control">
<a class="carousel-control-prev" href="#slideshow{$instanceid}" role="button" data-slide="prev" title="{str tag=previous}">
<span class="icon icon-angle-left icon-lg" role="presentation" aria-hidden="true" aria-hidden="true"></span>
<span class="sr-only">{str tag=previous}</span>
</a>
<a class="left carousel-control carousel-control-first" href="#slideshow{$instanceid}" role="button" data-slide-to="0">
<span class="icon icon-chevron-left icon-lg" role="presentation" aria-hidden="true" aria-hidden="true"></span>
<span class="icon icon-chevron-left icon-lg" role="presentation" aria-hidden="true" aria-hidden="true"></span>
<span class="sr-only">First</span>
</a>
<a class="right carousel-control carousel-control-last" href="#slideshow{$instanceid}" role="button" data-slide-to="{$k}">
<span class="icon icon-chevron-right icon-lg" role="presentation" aria-hidden="true" aria-hidden="true"></span>
<span class="icon icon-chevron-right icon-lg" role="presentation" aria-hidden="true" aria-hidden="true"></span>
<span class="sr-only">Last</span>
</a>
<a class="carousel-control-first" href="#slideshow{$instanceid}" role="button" data-slide-to="0" title="{str tag=first}">
<span class="icon icon-angle-double-left icon-lg" role="presentation" aria-hidden="true" aria-hidden="true"></span>
<span class="sr-only">{str tag=first}</span>
</a>
</div>
<a class="right carousel-control" href="#slideshow{$instanceid}" role="button" data-slide="next">
<span class="icon icon-chevron-right icon-lg" role="presentation" aria-hidden="true" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<div class="right carousel-control">
<a class="carousel-control-next" href="#slideshow{$instanceid}" role="button" data-slide="next" title="{str tag=next}">
<span class="icon icon-angle-right icon-lg" role="presentation" aria-hidden="true" aria-hidden="true"></span>
<span class="sr-only">{str tag=next}</span>
</a>
<a class="carousel-control-last" href="#slideshow{$instanceid}" role="button" data-slide-to="{$k}" title="{str tag=last}">
<span class="icon icon-angle-double-right icon-lg" role="presentation" aria-hidden="true" aria-hidden="true"></span>
<span class="sr-only">{str tag=last}</span>
</a>
</div>
</div>
{else}
{str tag=noimagesfound section=artefact.file}
......
......@@ -390,19 +390,3 @@
color: #333;
}
}
// Styles for the first and last buttons on the image gallery block
.carousel-control {
&.carousel-control-first {
margin-left: 40px;
span:first-of-type {
margin-right: -10px;
}
}
&.carousel-control-last {
margin-right: 40px;
span:first-of-type {
margin-right: -10px;
}
}
}
......@@ -22,11 +22,31 @@
padding: 10px;
}
.carousel-control {
color: #000;
top: 50%;
bottom: 50%;
width: 10%;
opacity: 1;
&:hover,
&:focus {
opacity: 1;
}
top: 5%;
bottom: 95%;
~ .icon {
vertical-align: middle;
}
.icon-lg {
font-size: 1.6em;
}
a {
display: block;
padding: 3px 0;
color: #000;
opacity: .5;
&:hover,
&:focus {
outline: 0;
text-decoration: none;
opacity: .9;
}
}
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment