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

Checking Atoms

Browse Source
This commit is contained in:
reverend 2021-10-18 16:01:28 +02:00
parent e775c11cc2
commit 2ba096e8f0
6 changed files with 21 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/01_Atoms/checkbox/_checkbox.scss
View File

@ -1,12 +1,16 @@
.LP-Form{ .LP-Form{
.LP-Form__Checkbox{ .LP-Form__Checkbox{
display: none; display: none;
&:checked + .LP-Form__CheckBox__CheckMark {
background-color: $-light-brown;
}
} }
.LP-Form__CheckBox__CheckMark{ .LP-Form__CheckBox__CheckMark{
height: 1em; height: 1em;
width: 1em; width: 1em;
border: 1px solid black; border: 1px solid $-grey;
padding: 0 calc(.5em + 2px); padding: 0 calc(.5em + 2px);
margin-right: .7em; margin-right: .7em;
} }

6
components/01_Atoms/checkbox/checkbox.hbs
View File

@ -1,3 +1,7 @@
<form class="LP-Form"> <form class="LP-Form">
<label for="wurstwasser" class="LP-Form__Label"><span class="LP-Form__CheckBox__CheckMark"></span><input id="wurstwasser" type="checkbox" class="LP-Form__Checkbox"/>Check me</label> <label for="wurstwasser" class="LP-Form__Label">
<input id="wurstwasser" type="checkbox" class="LP-Form__Checkbox"/>
<span class="LP-Form__CheckBox__CheckMark"></span>
Check me
</label>
</form> </form>

1
components/01_Atoms/input/input.hbs
View File

@ -4,7 +4,6 @@
{{#if disabled}} {{#if disabled}}
disabled="disabled" disabled="disabled"
{{/if}} {{/if}}
/>
{{#if message}} {{#if message}}
<span class="LP-Input__Message">{{message}}</span> <span class="LP-Input__Message">{{message}}</span>
{{/if}} {{/if}}

6
components/01_Atoms/link/_link.scss
View File

@ -6,8 +6,4 @@
color: $-grey; color: $-grey;
text-decoration: underline; text-decoration: underline;
} }
} }
.LP-Link__IconWrapper{
display: inline;
}

4
components/01_Atoms/link/link.hbs
View File

@ -1,3 +1 @@
<p class="LP-Paragraph"> <a href="{{url}}" class="LP-Link"><span class="LP-Link__Text">{{text}}</span></a>
<a href="{{url}}" class="LP-Link"><span class="LP-Link__Text">{{text}}</span></a>
</p>

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

@ -3,10 +3,17 @@
background-color: $-beige; background-color: $-beige;
border-radius: 2px; border-radius: 2px;
width: max-content; width: max-content;
@include RV-FlexRow__Container; @include RV-Flex;
height: min-content; height: min-content;
gap: 3px; gap: 3px;
transition: background .3s; transition: background .3s;
.LP-Link {
color: $-grey;
&:hover {
text-decoration: none;
}
}
&__Remove { &__Remove {
.RV-Iconized__Icon { .RV-Iconized__Icon {