imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #4846 from matrix-org/t3chguy/notifications0

Browse source 
Fix Room Custom Sounds regression and make ProgressBar relevant again
This commit is contained in:
Michael Telatynski 2020-06-30 16:56:57 +01:00 • committed by GitHub
commit 446f3e35e9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 75 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

20
res/css/views/auth/_PassphraseField.scss
View file

@ -18,16 +18,6 @@ $PassphraseStrengthHigh: $accent-color;
$PassphraseStrengthMedium: $username-variant5-color;
$PassphraseStrengthLow: $notice-primary-color;
@define-mixin ProgressBarColour $colour {
color: $colour;
&::-moz-progress-bar {
background-color: $colour;
}
&::-webkit-progress-value {
background-color: $colour;
}
}
progress.mx_PassphraseField_progress {
appearance: none;
width: 100%;
@ -36,15 +26,7 @@ progress.mx_PassphraseField_progress {
position: absolute;
top: -12px;
border-radius: 2px;
&::-moz-progress-bar {
border-radius: 2px;
}
&::-webkit-progress-bar,
&::-webkit-progress-value {
border-radius: 2px;
}
@mixin ProgressBarBorderRadius "2px";
@mixin ProgressBarColour $PassphraseStrengthLow;
&[value="2"], &[value="3"] {
@mixin ProgressBarColour $PassphraseStrengthMedium;

30
res/css/views/elements/_ProgressBar.scss
View file

@ -1,5 +1,5 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2020 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.
@ -14,12 +14,26 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_ProgressBar {
height: 5px;
border: 1px solid $progressbar-color;
}
progress.mx_ProgressBar {
height: 4px;
width: 60px;
border-radius: 10px;
overflow: hidden;
appearance: none;
border: 0;
.mx_ProgressBar_fill {
height: 100%;
background-color: $progressbar-color;
@mixin ProgressBarBorderRadius "10px";
@mixin ProgressBarColour $accent-color;
::-webkit-progress-value {
transition: width 1s;
}
::-moz-progress-bar {
transition: padding-bottom 1s;
padding-bottom: var(--value);
transform-origin: 0 0;
transform: rotate(-90deg) translateX(-15px);
padding-left: 15px;
height: 0;
}
}