p5.js-web-editor/client/styles/components/_asset-size.scss

52 lines
993 B
SCSS
Raw Normal View History

.asset-size {
2019-11-25 11:15:10 +01:00
position: relative;
flex: 1;
margin-bottom: #{18 / $base-font-size}rem;
2019-11-25 11:15:10 +01:00
font-size: #{14 / $base-font-size}rem;
}
.asset-size-bar {
position: relative;
content: ' ';
display: block;
width: 200px;
height: 20px;
2019-11-25 11:15:10 +01:00
border-radius: #{3 / $base-font-size}rem;
border: 1px solid transparent;
overflow: hidden;
@include themify() {
background-color: getThemifyVariable('progress-bar-background-color');
}
}
.asset-size-bar::before {
content: ' ';
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
2019-11-25 11:15:10 +01:00
width: calc(var(--percent) * 100%);
@include themify() {
background-color: getThemifyVariable('progress-bar-active-color');
}
}
.asset-current {
position: absolute;
top: 28px;
2019-11-25 11:15:10 +01:00
left: calc(200px * var(--percent));
margin-left: -8px;
}
.asset-max {
position: absolute;
2019-11-25 11:15:10 +01:00
top: 0;
left: 0;
transform: translate(210%); // align max label to right of asset-size-bar
padding-left: #{8 / $base-font-size}rem;
}