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

20
res/css/_common.scss
View file

@ -20,6 +20,7 @@ limitations under the License.
@import "./_font-sizes.scss";
@import "./_font-weights.scss";
@import "./_animations.scss";
@import "./_spacing.scss";
@import url("maplibre-gl/dist/maplibre-gl.css");
$hover-transition: 0.08s cubic-bezier(.46, .03, .52, .96); // quadratic
@ -414,7 +415,8 @@ legend {
}
.mx_Dialog_buttons {
margin-top: 20px;
margin-top: $spacing-20;
margin-inline-start: auto;
text-align: right;
.mx_Dialog_buttons_additive {
@ -423,6 +425,22 @@ legend {
}
}
.mx_Dialog_buttons_row {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
text-align: initial;
margin-inline-start: auto;
// default gap among elements
column-gap: $spacing-8; // See margin-right below inside the button style
row-gap: 5px; // See margin-bottom below inside the button style
button {
margin: 0 !important; // override the margin settings
}
}
/* XXX: Our button style are a mess: buttons that happen to appear in dialogs get special styles applied
* to them that no button anywhere else in the app gets by default. In practice, buttons in other places
* in the app look the same by being AccessibleButtons, or possibly by having explict button classes.