signal-desktop/stylesheets/_progress.scss

88 lines
1.9 KiB
SCSS
Raw Normal View History

@keyframes progress-bar-stripes {
from {
background-position: 40px 0;
}
to {
background-position: 0 0;
}
}
.progress-bar-striped {
2018-05-04 20:07:52 +00:00
background-image: -webkit-linear-gradient(
45deg,
2019-10-04 18:06:17 +00:00
$color-white-alpha-60 25%,
2018-05-04 20:07:52 +00:00
transparent 25%,
transparent 50%,
2019-10-04 18:06:17 +00:00
$color-white-alpha-60 50%,
$color-white-alpha-60 75%,
2018-05-04 20:07:52 +00:00
transparent 75%,
transparent
);
background-image: -o-linear-gradient(
45deg,
2019-10-04 18:06:17 +00:00
$color-white-alpha-60 25%,
2018-05-04 20:07:52 +00:00
transparent 25%,
transparent 50%,
2019-10-04 18:06:17 +00:00
$color-white-alpha-60 50%,
$color-white-alpha-60 75%,
2018-05-04 20:07:52 +00:00
transparent 75%,
transparent
);
background-image: linear-gradient(
45deg,
2019-10-04 18:06:17 +00:00
$color-white-alpha-60 25%,
2018-05-04 20:07:52 +00:00
transparent 25%,
transparent 50%,
2019-10-04 18:06:17 +00:00
$color-white-alpha-60 50%,
$color-white-alpha-60 75%,
2018-05-04 20:07:52 +00:00
transparent 75%,
transparent
);
-webkit-background-size: 40px 40px;
2018-05-04 20:07:52 +00:00
background-size: 40px 40px;
}
.progress-bar-striped {
2018-05-04 20:07:52 +00:00
background-image: -webkit-linear-gradient(
45deg,
2019-10-04 18:06:17 +00:00
$color-white-alpha-60 25%,
2018-05-04 20:07:52 +00:00
transparent 25%,
transparent 50%,
2019-10-04 18:06:17 +00:00
$color-white-alpha-60 50%,
$color-white-alpha-60 75%,
2018-05-04 20:07:52 +00:00
transparent 75%,
transparent
);
background-image: -o-linear-gradient(
45deg,
2019-10-04 18:06:17 +00:00
$color-white-alpha-60 25%,
2018-05-04 20:07:52 +00:00
transparent 25%,
transparent 50%,
2019-10-04 18:06:17 +00:00
$color-white-alpha-60 50%,
$color-white-alpha-60 75%,
2018-05-04 20:07:52 +00:00
transparent 75%,
transparent
);
background-image: linear-gradient(
45deg,
2019-10-04 18:06:17 +00:00
$color-white-alpha-60 25%,
2018-05-04 20:07:52 +00:00
transparent 25%,
transparent 50%,
2019-10-04 18:06:17 +00:00
$color-white-alpha-60 50%,
$color-white-alpha-60 75%,
2018-05-04 20:07:52 +00:00
transparent 75%,
transparent
);
}
.progress-bar.active {
-webkit-animation: progress-bar-stripes 2s linear infinite;
2018-05-04 20:07:52 +00:00
-o-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite;
}
.bar-container {
2019-10-04 18:06:17 +00:00
background: $color-ios-blue-tint;
.progress-bar {
height: 100%;
}
}