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

Fix visual bugs on AccessSecretStorageDialog (#8160)

Browse source 
* Remove duplicate mx_Dialog_buttons

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Group buttons on mx_Dialog with span

- Cancel default styling for elements inside .mx_AccessSecretStorageDialog_primaryContainer

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Move common rules of mx_Dialog_buttons_row to _common.scss

- Set 16px gap between buttons per https://github.com/vector-im/element-web/issues/19426#issuecomment-949778515

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Spacing variables

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Nesting - .mx_AccessSecretStorageDialog_reset

- Fix the reset link color
- Set $spacingStart variable

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Remove unnecessary rule

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara 2022-05-11 12:33:21 +00:00 • committed by GitHub
parent e2a612b070
commit 464eb93a44
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 255 additions and 179 deletions
Download patch file Download diff file Expand all files Collapse all files

73
res/css/views/dialogs/security/_AccessSecretStorageDialog.scss
View file

@ -14,38 +14,14 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_AccessSecretStorageDialog_reset {
position: relative;
padding-left: 24px; // 16px icon + 8px padding
margin-top: 7px; // vertical alignment to buttons
margin-bottom: 7px; // space between the buttons and the text when float is activated
text-align: left;
&::before {
content: "";
display: inline-block;
position: absolute;
height: 16px;
width: 16px;
left: 0;
top: 2px; // alignment
background-image: url("$(res)/img/element-icons/warning-badge.svg");
background-size: contain;
}
.mx_AccessSecretStorageDialog_reset_link {
color: $alert;
}
}
.mx_AccessSecretStorageDialog_titleWithIcon::before {
content: '';
display: inline-block;
width: 24px;
height: 24px;
margin-right: 8px;
margin-inline-end: $spacing-8;
position: relative;
top: 5px;
top: 5px; // TODO: spacing variable
background-color: $primary-content;
}
@ -84,7 +60,7 @@ limitations under the License.
}
.mx_AccessSecretStorageDialog_recoveryKeyEntry_entryControlSeparatorText {
margin: 16px;
margin: $spacing-16;
}
.mx_AccessSecretStorageDialog_recoveryKeyFeedback {
@ -97,7 +73,7 @@ limitations under the License.
mask-repeat: no-repeat;
mask-position: center;
mask-size: 20px;
margin-right: 5px;
margin-inline-end: 5px; // TODO: spacing variable
}
}
@ -120,3 +96,44 @@ limitations under the License.
.mx_AccessSecretStorageDialog_recoveryKeyEntry_fileInput {
display: none;
}
.mx_AccessSecretStorageDialog_primaryContainer {
.mx_Dialog_buttons {
$spacingStart: $spacing-24; // 16px icon + 8px padding
text-align: initial;
display: flex;
flex-flow: column;
gap: 14px; // TODO: spacing variable
.mx_Dialog_buttons_additive {
float: none;
.mx_AccessSecretStorageDialog_reset {
position: relative;
padding-inline-start: $spacingStart;
&::before {
content: "";
display: inline-block;
position: absolute;
height: 16px;
width: 16px;
left: 0;
top: 2px; // alignment
background-image: url("$(res)/img/element-icons/warning-badge.svg");
background-size: contain;
}
.mx_AccessSecretStorageDialog_reset_link {
color: $alert;
}
}
}
.mx_Dialog_buttons_row {
gap: $spacing-16; // TODO: needs normalization
padding-inline-start: $spacingStart;
}
}
}