sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Merge pull request #4613 from matrix-org/t3chguy/toasts1

Browse Source 
Improve style of toasts to match Figma
This commit is contained in:
Michael Telatynski
2020-05-26 11:59:58 +01:00
committed by GitHub
parent f4d69a9844 f539a960e1
commit c00fd326c5
3 changed files with 65 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
res/css/structures/_ToastContainer.scss
+56 -14
View File
@@ -28,8 +28,8 @@ limitations under the License.
margin: 0 4px;
grid-row: 2 / 4;
grid-column: 1;
background-color: white;
box-shadow: 0px 4px 12px $menu-box-shadow-color;
background-color: $dark-panel-bg-color;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
border-radius: 8px;
}
@@ -37,16 +37,15 @@ limitations under the License.
grid-row: 1 / 3;
grid-column: 1;
color: $primary-fg-color;
background-color: $primary-bg-color;
box-shadow: 0px 4px 12px $menu-box-shadow-color;
background-color: $dark-panel-bg-color;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
border-radius: 8px;
overflow: hidden;
display: grid;
grid-template-columns: 20px 1fr;
column-gap: 10px;
grid-template-columns: 22px 1fr;
column-gap: 8px;
row-gap: 4px;
padding: 8px;
padding-right: 16px;
&.mx_Toast_hasIcon {
&::after {
@@ -68,17 +67,45 @@ limitations under the License.
background-image: url("$(res)/img/e2e/warning.svg");
}
h2, .mx_Toast_body {
.mx_Toast_title, .mx_Toast_body {
grid-column: 2;
}
}
&:not(.mx_Toast_hasIcon) {
padding-left: 12px;
h2 {
grid-column: 1 / 3;
grid-row: 1;
margin: 0;
font-size: $font-15px;
font-weight: 600;
.mx_Toast_title {
grid-column: 1 / -1;
}
}
.mx_Toast_title,
.mx_Toast_description {
padding-right: 8px;
}
.mx_Toast_title {
width: 100%;
box-sizing: border-box;
h2 {
grid-column: 1 / 3;
grid-row: 1;
margin: 0;
font-size: $font-15px;
font-weight: 600;
display: inline;
width: auto;
vertical-align: middle;
}
span {
padding-left: 8px;
float: right;
font-size: $font-12px;
line-height: $font-22px;
color: $muted-fg-color;
}
}
.mx_Toast_body {
@@ -87,7 +114,13 @@ limitations under the License.
}
.mx_Toast_buttons {
float: right;
display: flex;
.mx_FormButton {
min-width: 96px;
box-sizing: border-box;
}
}
.mx_Toast_description {
@@ -96,6 +129,15 @@ limitations under the License.
text-overflow: ellipsis;
margin: 4px 0 11px 0;
font-size: $font-12px;
.mx_AccessibleButton_kind_link {
font-size: inherit;
padding: 0;
}
a {
text-decoration: none;
}
}
.mx_Toast_deviceID {