Skip to content

G
gitlab-ce
Commit 2421fc7e authored by Kushal Pandya's avatar Kushal Pandya
Browse files
Options

Refactor SCSS: fix SCSSLints, simplify specificity

parent ff0c3fc2
Hide whitespace changes
Inline Side-by-side
Showing with 111 additions and 108 deletions
app/assets/stylesheets/pages/builds.scss
View file @ 2421fc7e
...@@ -3,6 +3,32 @@ ...@@ -3,6 +3,32 @@
100% { opacity: 0; } 100% { opacity: 0; }
} }
@keyframes blinking-dots {
0% {
background-color: rgba($white-light, 1);
box-shadow: 12px 0 0 0 rgba($white-light,0.2),
24px 0 0 0 rgba($white-light,0.2);
}
25% {
background-color: rgba($white-light, 0.4);
box-shadow: 12px 0 0 0 rgba($white-light,2),
24px 0 0 0 rgba($white-light,0.2);
}
75%{
background-color: rgba($white-light, 0.4);
box-shadow: 12px 0 0 0 rgba($white-light,0.2),
24px 0 0 0 rgba($white-light,1);
}
100% {
background-color: rgba($white-light, 1);
box-shadow: 12px 0 0 0 rgba($white-light,0.2),
24px 0 0 0 rgba($white-light,0.2);
}
}
.build-page { .build-page {
pre.trace { pre.trace {
background: $builds-trace-bg; background: $builds-trace-bg;
...@@ -19,109 +45,109 @@ ...@@ -19,109 +45,109 @@
} }
} }
.scroll-controls { .environment-information {
height: 100%; background-color: $gray-light;
border: 1px solid $border-color;
padding: 12px $gl-padding;
border-radius: $border-radius-default;
.scroll-step { svg {
width: 31px; position: relative;
margin: 0 0 0 auto; top: 1px;
margin-right: 5px;
} }
}
}
.scroll-link.sticky, .scroll-controls {
.autoscroll-container { height: 100%;
right: 25px;
z-index: 1;
}
.scroll-link { .scroll-step {
display: block; width: 31px;
margin-bottom: 10px; margin: 0 0 0 auto;
width: 16px; }
height: 33px;
&.scroll-top { .scroll-link.sticky,
background-image: image-url('scroll_up'); .autoscroll-container {
right: 25px;
z-index: 1;
}
&:hover { .scroll-link {
background-image: image-url('scroll_up_hover_active'); display: block;
} margin-bottom: 10px;
} width: 16px;
height: 33px;
&.scroll-bottom { &.scroll-top {
background-image: image-url('scroll_down'); background-image: image-url('scroll_up');
&:hover { &:hover {
background-image: image-url('scroll_down_hover_active'); background-image: image-url('scroll_up_hover_active');
}
} }
}
&.sticky { &.scroll-bottom {
position: fixed; background-image: image-url('scroll_down');
&.scroll-top {
top: 110px;
}
&.scroll-bottom { &:hover {
bottom: -2px; background-image: image-url('scroll_down_hover_active');
}
} }
} }
.autoscroll-container { &.sticky {
position: absolute; position: fixed;
.status-message {
display: inline-block;
color: $white-light;
i { &.scroll-top {
display: inline-block; top: 110px;
width: 16px; }
height: 33px;
background-image: image-url('scroll_down_hover_active');
}
label {
float: left;
opacity: 0;
margin-right: 10px;
font-weight: normal;
line-height: 1.8;
transition: opacity 1s ease-out;
&.animate {
animation: fade-out-status 2s ease;
}
}
&:hover label { &.scroll-bottom {
opacity: 1; bottom: -2px;
}
} }
} }
}
&.sidebar-expanded { .autoscroll-container {
position: absolute;
}
.scroll-link.sticky, &.sidebar-expanded {
.autoscroll-container {
right: #{$gutter_width + ($gl-padding * 2)}; .scroll-link.sticky,
} .autoscroll-container {
right: ($gutter_width + ($gl-padding * 2));
} }
} }
}
.environment-information { .status-message {
background-color: $gray-light; display: inline-block;
border: 1px solid $border-color; color: $white-light;
padding: 12px $gl-padding;
border-radius: $border-radius-default;
svg { .status-icon {
position: relative; display: inline-block;
top: 1px; width: 16px;
margin-right: 5px; height: 33px;
background-image: image-url('scroll_down_hover_active');
}
.status-text {
float: left;
opacity: 0;
margin-right: 10px;
font-weight: normal;
line-height: 1.8;
transition: opacity 1s ease-out;
&.animate {
animation: fade-out-status 2s ease;
} }
} }
&:hover .status-text {
opacity: 1;
}
} }
.build-header { .build-header {
...@@ -179,37 +205,14 @@ ...@@ -179,37 +205,14 @@
display: block; display: block;
} }
.typing_loader{ .build-loader-animation {
width: 6px; position: relative;
height: 6px; width: 6px;
border-radius: 50%; height: 6px;
animation: typing 1s linear infinite; margin-bottom: 12px;
position: relative; margin-left: 2px;
margin-bottom: 12px; border-radius: 50%;
margin-left: 2px; animation: blinking-dots 1s linear infinite;
}
@keyframes typing{
0%{
background-color: rgba(255,255,255, 1);
box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2),
24px 0px 0px 0px rgba(255,255,255,0.2);
}
25%{
background-color: rgba(255,255,255, 0.4);
box-shadow: 12px 0px 0px 0px rgba(255,255,255,2),
24px 0px 0px 0px rgba(255,255,255,0.2);
}
75%{
background-color: rgba(255,255,255, 0.4);
box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2),
24px 0px 0px 0px rgba(255,255,255,1);
}
100%{
background-color: rgba(255,255,255, 1);
box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2),
24px 0px 0px 0px rgba(255,255,255,0.2);
}
} }
} }
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7