Merge pull request #5020 from matrix-org/t3chguy/fix/14649
Update crypto event icon to match rest of app stylingpull/21833/head
commit
ee8d885e70
|
@ -15,28 +15,45 @@ limitations under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.mx_cryptoEvent {
|
.mx_cryptoEvent {
|
||||||
|
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 24px minmax(0, 1fr) min-content;
|
grid-template-columns: 24px minmax(0, 1fr) min-content;
|
||||||
|
|
||||||
|
&.mx_cryptoEvent_icon::before,
|
||||||
&.mx_cryptoEvent_icon::after {
|
&.mx_cryptoEvent_icon::after {
|
||||||
grid-column: 1;
|
grid-column: 1;
|
||||||
grid-row: 1 / 3;
|
grid-row: 1 / 3;
|
||||||
width: 16px;
|
width: 16px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
content: "";
|
content: "";
|
||||||
background-image: url("$(res)/img/e2e/normal.svg");
|
top: 0;
|
||||||
background-repeat: no-repeat;
|
bottom: 0;
|
||||||
background-size: 100%;
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
mask-repeat: no-repeat;
|
||||||
|
mask-position: center;
|
||||||
|
mask-size: contain;
|
||||||
|
mask-image: url('$(res)/img/e2e/normal.svg');
|
||||||
|
background-color: $composer-e2e-icon-color;
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// white infill for the transparency
|
||||||
|
&.mx_cryptoEvent_icon::before {
|
||||||
|
background-color: #ffffff;
|
||||||
|
mask-image: url('$(res)/img/e2e/normal.svg');
|
||||||
|
mask-repeat: no-repeat;
|
||||||
|
mask-position: center;
|
||||||
|
mask-size: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
&.mx_cryptoEvent_icon_verified::after {
|
&.mx_cryptoEvent_icon_verified::after {
|
||||||
background-image: url("$(res)/img/e2e/verified.svg");
|
mask-image: url("$(res)/img/e2e/verified.svg");
|
||||||
|
background-color: $accent-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.mx_cryptoEvent_icon_warning::after {
|
&.mx_cryptoEvent_icon_warning::after {
|
||||||
background-image: url("$(res)/img/e2e/warning.svg");
|
mask-image: url("$(res)/img/e2e/warning.svg");
|
||||||
|
background-color: $notice-primary-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_cryptoEvent_title, .mx_cryptoEvent_subtitle, .mx_cryptoEvent_state {
|
.mx_cryptoEvent_title, .mx_cryptoEvent_subtitle, .mx_cryptoEvent_state {
|
||||||
|
|
|
@ -42,7 +42,7 @@ limitations under the License.
|
||||||
// white infill for the transparency
|
// white infill for the transparency
|
||||||
.mx_E2EIcon::before {
|
.mx_E2EIcon::before {
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
mask: url('$(res)/img/e2e/normal.svg');
|
mask-image: url('$(res)/img/e2e/normal.svg');
|
||||||
mask-repeat: no-repeat;
|
mask-repeat: no-repeat;
|
||||||
mask-position: center;
|
mask-position: center;
|
||||||
mask-size: 90%;
|
mask-size: 90%;
|
||||||
|
|
|
@ -355,7 +355,7 @@ $left-gutter: 64px;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
mask: url('$(res)/img/e2e/normal.svg');
|
mask-image: url('$(res)/img/e2e/normal.svg');
|
||||||
mask-repeat: no-repeat;
|
mask-repeat: no-repeat;
|
||||||
mask-position: center;
|
mask-position: center;
|
||||||
mask-size: 90%;
|
mask-size: 90%;
|
||||||
|
|
Loading…
Reference in New Issue