mirror of
https://github.com/nasa/openmct.git
synced 2025-02-04 18:20:43 +00:00
50173a4413
* Separate Vue component styles out from SFCs. * Added 'MCT.prototype.getAssetPath' and using 'openmct.setAssetPath' to get relative path for assets. * Re-implements `openmct.plugins.Snow()`, and `openmct.plugins.Espresso()` (as well as a new theme `openmct.plugins.Maelstron()`)
44 lines
1.0 KiB
SCSS
44 lines
1.0 KiB
SCSS
/******************************************************** PROGRESS BAR */
|
|
@keyframes progress {
|
|
100% { background-position: $progressAnimW center; }
|
|
}
|
|
|
|
@mixin progressAnim($c1, $c2, $size) {
|
|
$edge: 20%;
|
|
background-image: linear-gradient(-90deg,
|
|
$c1 0%, $c2 $edge,
|
|
$c2 $edge, $c1 100%
|
|
);
|
|
background-position: 0 center;
|
|
background-repeat: repeat-x;
|
|
background-size: $size 100%;
|
|
}
|
|
|
|
.c-progress-bar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
|
|
> * + * {
|
|
margin-top: $interiorMargin;
|
|
}
|
|
|
|
&__holder {
|
|
background: $colorProgressBarHolder;
|
|
box-shadow: inset rgba(black, 0.4) 0 0.25px 3px;
|
|
flex: 1 1 auto;
|
|
padding: 1px;
|
|
}
|
|
|
|
&__bar {
|
|
@include progressAnim($colorProgressBar, lighten($colorProgressBar, 10%), $progressAnimW);
|
|
animation: progress 1000ms linear infinite;
|
|
min-height: $progressBarMinH;
|
|
height: 100%;
|
|
|
|
&.--indeterminate {
|
|
width: 100% !important;
|
|
}
|
|
}
|
|
}
|