Commander1024/lostplaces-frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Delete button for tags

Browse Source
This commit is contained in:
reverend 2020-09-01 22:27:32 +02:00
parent ec0ba2f9c7
commit 97eaedd85f
4 changed files with 44 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
components/01_Atoms/tag/_tag.scss
View File

@ -3,6 +3,19 @@
background-color: $-beige; background-color: $-beige;
border-radius: 2px; border-radius: 2px;
width: max-content; width: max-content;
@include RV-FlexRow__Container;
height: min-content;
gap: 3px;
&__Remove {
.RV-Iconized__Icon {
fill: $-wine-red;
&:hover {
fill: $-grey;
}
}
}
&:hover { &:hover {
background-color: #bdbdbd; background-color: #bdbdbd;

12
components/01_Atoms/tag/tag.hbs
View File

@ -1,3 +1,13 @@
<div class="LP-Tag"> <div class="LP-Tag">
{{> @paragraph text=text}} {{> @link text=text url="#"}}
<a href="#" class="LP-Link">
<span class="LP-Tag__Remove RV-Iconized__Container RV-Iconized__Container--extraSmall">
<svg class="RV-Iconized__Icon" height="24" viewBox="0 0 24 24" width="24"
xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none"></path>
<path d="M19 6.4L17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z">
</path>
</svg>
</span>
</a>
</div> </div>

3
components/_tagify.scss
View File

@ -43,12 +43,13 @@
position: relative; position: relative;
white-space: pre-wrap; white-space: pre-wrap;
margin-left: 15px; margin-left: 15px;
height: 1em;
} }
.tagify__tag__removeBtn { .tagify__tag__removeBtn {
order: 5; order: 5;
cursor: pointer; cursor: pointer;
font: 1em/1 Arial; font: 1.5em/1 Arial;
transition: .2s ease-out; transition: .2s ease-out;
color: $-wine-red; color: $-wine-red;
} }

21
public/main.css
View File

@ -692,7 +692,21 @@ body {
padding: 8px 14px; padding: 8px 14px;
background-color: #D7CEC7; background-color: #D7CEC7;
border-radius: 2px; border-radius: 2px;
width: max-content; } width: max-content;
display: flex;
flex-direction: row;
height: 100%;
height: min-content;
gap: 3px; }
.LP-Tag--multiRow {
flex-wrap: wrap; }
.LP-Tag--column {
display: flex;
flex-direction: column; }
.LP-Tag__Remove .RV-Iconized__Icon {
fill: #76323F; }
.LP-Tag__Remove .RV-Iconized__Icon:hover {
fill: #565656; }
.LP-Tag:hover, .tagify__tag:hover { .LP-Tag:hover, .tagify__tag:hover {
background-color: #bdbdbd; } background-color: #bdbdbd; }
.LP-Tag .LP-Paragraph, .tagify__tag .LP-Paragraph { .LP-Tag .LP-Paragraph, .tagify__tag .LP-Paragraph {
@ -1472,12 +1486,13 @@ body {
line-height: inherit; line-height: inherit;
position: relative; position: relative;
white-space: pre-wrap; white-space: pre-wrap;
margin-left: 15px; } margin-left: 15px;
height: 1em; }
.tagify__tag__removeBtn { .tagify__tag__removeBtn {
order: 5; order: 5;
cursor: pointer; cursor: pointer;
font: 1em/1 Arial; font: 1.5em/1 Arial;
transition: .2s ease-out; transition: .2s ease-out;
color: #76323F; } color: #76323F; }