mirror of
https://github.com/Rnhmjoj/solarized-dark-ui
synced 2025-01-10 09:24:21 +01:00
77 lines
1.7 KiB
Plaintext
77 lines
1.7 KiB
Plaintext
@import "ui-variables";
|
|
@import "ui-mixins";
|
|
|
|
.loading-spinner(@size) {
|
|
width: @size;
|
|
height: @size;
|
|
display: block;
|
|
|
|
background-image: url(images/octocat-spinner-128.gif);
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
|
|
&.inline-block {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
.loading-spinner-large {
|
|
.loading-spinner(64px);
|
|
}
|
|
|
|
.loading-spinner-medium {
|
|
.loading-spinner(50px);
|
|
}
|
|
|
|
.loading-spinner-small {
|
|
.loading-spinner(32px);
|
|
}
|
|
|
|
.loading-spinner-tiny {
|
|
.loading-spinner(20px);
|
|
}
|
|
|
|
// Much learning from:
|
|
// http://css-tricks.com/html5-progress-element/
|
|
|
|
@progress-height: 16px;
|
|
@progress-shine-gradient: -webkit-linear-gradient(top, rgba(255, 255, 255, .15), rgba(0, 0, 0, .15));
|
|
|
|
progress {
|
|
height: @progress-height;
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
progress::-webkit-progress-bar {
|
|
height: @progress-height;
|
|
border-radius: @component-border-radius;
|
|
|
|
background-color: #666;
|
|
|
|
background-image:
|
|
-webkit-linear-gradient(-30deg,
|
|
transparent 33%, rgba(0, 0, 0, .1) 33%,
|
|
rgba(0,0, 0, .1) 66%, transparent 66%),
|
|
@progress-shine-gradient;
|
|
|
|
border-radius: 2px;
|
|
background-size: 25px @progress-height, 100% 100%, 100% 100%;
|
|
-webkit-animation: animate-stripes 5s linear infinite;
|
|
animation: animate-stripes 5s linear infinite;
|
|
}
|
|
|
|
progress::-webkit-progress-value {
|
|
border-radius: @component-border-radius;
|
|
background-image: @progress-shine-gradient;
|
|
background-color: @background-color-success;
|
|
}
|
|
|
|
progress[value]::-webkit-progress-bar {
|
|
background-image: @progress-shine-gradient;
|
|
animation: none;
|
|
}
|
|
|
|
@-webkit-keyframes animate-stripes {
|
|
100% { background-position: 100px 0px; }
|
|
}
|