Commit ba63e4f1 authored by Kushal Pandya's avatar Kushal Pandya

Updated styles to use scroll icons

parent 16ad6ed0
......@@ -22,26 +22,44 @@
margin: 0 0 0 auto;
}
.btn.sticky,
.scroll-link.sticky,
.autoscroll-container {
right: 25px;
z-index: 1;
}
.btn {
.scroll-link {
display: block;
margin-bottom: 10px;
color: $white-light;
border-color: $white-light;
background-color: rgba($ci-output-bg, .5);
width: 16px;
height: 33px;
&.scroll-top {
background-image: image-url('scroll_up');
&:hover {
background-image: image-url('scroll_up_hover_active');
}
}
&.scroll-bottom {
background-image: image-url('scroll_down');
&:hover {
background-image: image-url('scroll_down_hover_active');
}
}
&.sticky {
position: fixed;
&.scroll-top {
top: 110px;
}
&:hover{
color: $ci-output-bg;
background-color: $white-light;
&.scroll-bottom {
bottom: -2px;
}
}
}
......@@ -49,33 +67,41 @@
position: absolute;
.status-message {
display: inline-block;
color: $white-light;
i {
display: inline-block;
width: 16px;
height: 33px;
background-image: image-url('scroll_down_hover_active');
}
label {
margin-left: 5px;
float: left;
opacity: 0;
margin-right: 10px;
font-weight: normal;
}
}
line-height: 1.8;
transition: opacity 1s ease-out;
}
#scroll-top.btn.sticky {
top: 110px;
&:hover label {
opacity: 1;
}
}
#scroll-bottom.btn.sticky {
bottom: -2px;
}
&.sidebar-expanded {
.btn.sticky,
.scroll-link.sticky,
.autoscroll-container {
right: #{$gutter_width + ($gl-padding * 2)};
}
}
@media (max-width: $screen-sm-max) {
.btn {
.scroll-link {
padding: 6px 13px;
}
......@@ -322,8 +348,6 @@
margin-top: -17px;
}
@media (min-width: $screen-md-min) {
.sub-nav.build {
width: calc(100% + #{$gutter_width});
......
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