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

Revert "Implement new toast UI (#10467)" (#10740)

Browse source 
This reverts commit 7632f36624.
This commit is contained in:
Michael Weimann 2023-04-28 16:56:26 +02:00 • committed by GitHub
parent f819853cad
commit 35376996b0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 70 additions and 90 deletions
Download patch file Download diff file Expand all files Collapse all files

77
res/css/structures/_ToastContainer.pcss
View file

@ -16,9 +16,10 @@ limitations under the License.
.mx_ToastContainer {
position: absolute;
top: $spacing-4;
top: 0;
left: 70px;
z-index: 101;
padding: 4px;
display: grid;
grid-template-rows: 1fr 14px 6px;
@ -33,29 +34,25 @@ limitations under the License.
}
.mx_Toast_toast {
background-color: $system;
border-radius: 8px;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
color: $primary-content;
column-gap: $spacing-8;
display: grid;
grid-column: 1;
grid-row: 1 / 3;
grid-template-columns: 24px 1fr;
grid-column: 1;
background-color: $system;
color: $primary-content;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
border-radius: 8px;
overflow: hidden;
padding: $spacing-16;
display: grid;
grid-template-columns: 22px 1fr;
column-gap: 8px;
row-gap: 4px;
padding: 8px;
&.mx_Toast_hasIcon {
.mx_Toast_icon {
grid-column: 1;
grid-row: 1;
}
&::before,
&::after {
content: "";
width: 24px;
height: 24px;
width: 22px;
height: 22px;
grid-column: 1;
grid-row: 1;
mask-size: 100%;
@ -65,6 +62,11 @@ limitations under the License.
background-repeat: no-repeat;
}
&.mx_Toast_icon_verification::after {
mask-image: url("$(res)/img/e2e/normal.svg");
background-color: $primary-content;
}
&.mx_Toast_icon_verification_warning {
/* white infill for the hollow svg mask */
&::before {
@ -94,7 +96,6 @@ limitations under the License.
grid-column: 2;
}
}
&:not(.mx_Toast_hasIcon) {
padding-left: 12px;
@ -103,19 +104,24 @@ limitations under the License.
}
}
.mx_Toast_title,
.mx_Toast_description {
padding-right: 8px;
}
.mx_Toast_title {
align-items: center;
box-sizing: border-box;
column-gap: 8px;
display: flex;
margin-bottom: $spacing-16;
align-items: center;
column-gap: 8px;
width: 100%;
box-sizing: border-box;
h2 {
color: $primary-content;
margin: 0;
font-size: $font-18px;
font-size: $font-15px;
font-weight: var(--font-semi-bold);
display: inline;
width: auto;
}
.mx_Toast_title_countIndicator {
@ -129,21 +135,25 @@ limitations under the License.
.mx_Toast_body {
grid-column: 1 / 3;
grid-row: 2;
position: relative;
}
.mx_Toast_buttons {
column-gap: $spacing-8;
display: flex;
justify-content: flex-end;
margin-top: $spacing-32;
column-gap: 5px;
.mx_AccessibleButton {
min-width: 96px;
box-sizing: border-box;
}
}
.mx_Toast_description {
color: $primary-content;
font-size: $font-15px;
font-weight: var(--font-semi-bold);
max-width: 300px;
max-width: 272px;
overflow: hidden;
text-overflow: ellipsis;
margin: 4px 0 11px 0;
font-size: $font-12px;
a {
text-decoration: none;
@ -151,10 +161,7 @@ limitations under the License.
}
.mx_Toast_detail {
display: block;
font-weight: var(--font-normal);
margin-top: $spacing-4;
max-width: 300px;
color: $secondary-content;
}
.mx_Toast_deviceID {