Commit ba63e4f1 authored by Kushal Pandya's avatar Kushal Pandya

Updated styles to use scroll icons

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