nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Rough style for new upload bar

Browse Source 
This repurposes ProgressBar which was not used anywhere in code.
This commit is contained in:
Travis Ralston
2021-03-05 14:14:43 -07:00
parent bb80cfb9a6
commit 711181cc69
8 changed files with 42 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
res/css/_common.scss
View File

@@ -606,6 +606,13 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
}
}
@define-mixin ProgressBarBgColour $colour {
background-color: $colour;
&::-webkit-progress-bar {
background-color: $colour;
}
}
@define-mixin ProgressBarBorderRadius $radius {
border-radius: $radius;
&::-moz-progress-bar {

26
res/css/structures/_UploadBar.scss
View File

@@ -1,5 +1,5 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2015, 2016, 2021 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -15,24 +15,15 @@ limitations under the License.
*/
.mx_UploadBar {
position: relative;
}
padding-left: 65px; // line up with the shield area in the composer
.mx_UploadBar_uploadProgressOuter {
height: 5px;
margin-left: 63px;
margin-top: -1px;
padding-bottom: 5px;
}
.mx_UploadBar_uploadProgressInner {
background-color: $accent-color;
height: 5px;
.mx_ProgressBar {
width: calc(100% - 40px); // cheating at a right margin
}
}
.mx_UploadBar_uploadFilename {
margin-top: 5px;
margin-left: 65px;
opacity: 0.5;
color: $primary-fg-color;
}
@@ -52,10 +43,3 @@ limitations under the License.
cursor: pointer;
z-index: 1;
}
.mx_UploadBar_uploadBytes {
float: right;
margin-top: 5px;
margin-right: 30px;
color: $accent-color;
}

13
res/css/views/elements/_ProgressBar.scss
View File

@@ -1,5 +1,5 @@
/*
Copyright 2020 The Matrix.org Foundation C.I.C.
Copyright 2020, 2021 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -15,15 +15,16 @@ limitations under the License.
*/
progress.mx_ProgressBar {
height: 4px;
height: 6px;
width: 60px;
border-radius: 10px;
border-radius: 6px;
overflow: hidden;
appearance: none;
border: 0;
border: none;
@mixin ProgressBarBorderRadius "10px";
@mixin ProgressBarColour $accent-color;
@mixin ProgressBarBorderRadius "6px";
@mixin ProgressBarColour $progressbar-fg-color;
@mixin ProgressBarBgColour $progressbar-bg-color;
::-webkit-progress-value {
transition: width 1s;
}