matrix/matrix-react-sdk
1
0
Fork 0
mirror of https://github.com/matrix-org/matrix-react-sdk.git synced 2025-08-09 08:42:50 +03:00
Code Activity

Extract Tag to its own component (#8309)

Browse Source
This commit is contained in:
Germain
2022-04-19 09:52:20 +01:00
committed by GitHub
parent c68515ae0a
commit 949b3cc650
3 changed files with 92 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
res/css/views/elements/_TagComposer.scss
View File

@@ -29,7 +29,9 @@ limitations under the License.
margin-left: 16px; // distance from <Field>
}
.mx_Field, .mx_Field input, .mx_AccessibleButton {
.mx_Field,
.mx_Field input,
.mx_AccessibleButton {
// So they look related to each other by feeling the same
border-radius: 8px;
}
@@ -39,39 +41,48 @@ limitations under the License.
display: flex;
flex-wrap: wrap;
margin-top: 12px; // this plus 12px from the tags makes 24px from the input
}
.mx_TagComposer_tag {
padding: 6px 8px 8px 12px;
position: relative;
margin-right: 12px;
margin-top: 12px;
.mx_Tag {
margin-right: 12px;
margin-top: 12px;
}
}
// Cheaty way to get an opacified variable colour background
&::before {
content: '';
border-radius: 20px;
background-color: $tertiary-content;
opacity: 0.15;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
.mx_Tag {
// Pass through the pointer otherwise we have effectively put a whole div
// on top of the component, which makes it hard to interact with buttons.
pointer-events: none;
}
}
font-size: $font-15px;
.mx_AccessibleButton {
background-image: url('$(res)/img/subtract.svg');
width: 16px;
height: 16px;
margin-left: 8px;
display: inline-block;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px;
border-radius: 8px;
color: $primary-content;
background: $quinary-content;
>svg:first-child {
width: 1em;
color: $secondary-content;
transform: scale(1.25);
transform-origin: center;
}
.mx_Tag_delete {
border-radius: 50%;
text-align: center;
width: 1.066666em; // 16px;
height: 1.066666em;
line-height: 1em;
color: $secondary-content;
background: $system;
position: relative;
svg {
width: .5em;
vertical-align: middle;
cursor: pointer;
}
}
}