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

Using rcss

Browse Source
This commit is contained in:
reverend
2020-08-25 15:55:02 +02:00
parent 313968fafd
commit 823d78a0ae
12 changed files with 1745 additions and 439 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
components/03_Organisms/form/_form.scss
View File

@@ -1,134 +1,58 @@
.LP-Form{
flex-direction: column;
align-items: center;
&--inline{
padding: 0 10px;
.LP-Form__Fieldset{
.LP-Form__Composition{
gap: 10px;
}
}
}
.LP-Form__Fieldset{
border: none;
padding: 0;
margin: 0;
@include RV-Reset;
max-width: 1200px;
min-width: $-viewport-medium;
.LP-Form__Legend{
margin: 0;
padding: 0;
font-family: $-primary-sans-serif-font;
font-size: 21px;
}
}
.LP-Form__Composition{
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 30px;
&--buttons{
gap: 10px;
}
min-width: $-viewport-medium;
.LP-Form__Field{
flex: 3 2 100px;
padding: 6px 0;
@media(max-width: $-viewport-medium){
min-width: unset;
}
}
&--wider{
flex: 5 2;
}
.LP-Form__Legend{
margin: 0;
padding: 0;
font-family: $-primary-sans-serif-font;
font-size: 21px;
}
&--wide{
flex: 4 2;
}
.LP-Form__Composition{
@include RV-FlexRow__Container;
@include RV-Spacing__Inner--small('');
&--narrow{
flex: 2 1;
&--breakable {
@media(max-width: $-viewport-small){
@include RV-FlexRow__Container--multiRow;
}
}
&--narrower{
flex: 1 2;
}
&--static{
flex: 0 0;
}
@media(max-width: $-viewport-extra-small){
@include RV-FlexRow__Container--multiRow;
}
&--buttons{
justify-content: flex-end;
}
.LP-Form__Button{
flex-grow: 0;
padding-left: 0;
min-width: 130px;
.LP-Link{
display:contents;
}
}
.LP-Form__InfoText{
.LP-Paragraph{
font-family: $-primary-sans-serif-font;
color: $-grey;
}
@include RV-Spacing__Inner--small;
}
}
}
@media(max-width: $-viewport-medium){
.LP-Form{
.LP-Form__Fieldset{
min-width: unset;
}
}
}
.LP-Form__Field{
@include RV-FlexRow__Item;
}
@media(max-width: $-viewport-small){
.LP-Form{
.LP-Form__Fieldset{
.LP-Form__Composition--breakable{
display: flex;
flex-direction: column;
justify-content: space-between;
}
}
}
}
.LP-Form__Button{
@include RV-FlexRow__Item--fixedSize(130px);
@media(max-width: $-viewport-extra-small){
.LP-Form :not(.LP-Form--inline){
.LP-Form__Fieldset{
.LP-Form__Composition{
display: flex;
flex-direction: column;
justify-content: space-between;
.LP-Form__Field{
&:not(.LP-Form__Button){
flex: 3 1 100px;
padding: 12px 15px;
}
}
.LP-Form__Button{
padding: 0 15px;
}
&--buttons{
justify-content: flex-end;
}
}
}
}
@media(max-width: $-viewport-extra-small) {
@include RV-FlexRow__Item--fixedSize(100%);
}
}
.LP-Form__InfoText{
.LP-Paragraph{
font-family: $-primary-sans-serif-font;
color: $-grey;
}
}
}

6
components/03_Organisms/form/form.hbs
View File

@@ -30,8 +30,8 @@
<input type="text" id="input123" class="LP-Input__Field"/>
<span class="LP-Input__Message">We won't send any stalkers, promise</span>
</div>
<div class="LP-Form__Field LP-Form__Field--narrow LP-Input">
<label for="input123" class="LP-Input__Label">House no</label>
<div class="LP-Form__Field LP-Form__Field--narrower LP-Input">
<label for="input123" class="LP-Input__Label">No.</label>
<input type="text" id="input123" class="LP-Input__Field"/>
<span class="LP-Input__Message">Field is required</span>
</div>
@@ -45,7 +45,7 @@
<div class="LP-Form__Composition">
<div class="LP-Form__Field LP-Form__Field--narrow LP-Input">
<label for="input123" class="LP-Input__Label">Postal Code</label>
<label for="input123" class="LP-Input__Label">ZIP</label>
<input type="text" id="input123" class="LP-Input__Field"/>
</div>
<div class="LP-Form__Field LP-Form__Field--wide LP-Input">

45
components/03_Organisms/imageGrid/_imageGrid.scss
View File

@@ -1,42 +1,9 @@
.LP-ImageGrid{
@include RV-FlexGrid(290px, 200px);
@include RV-ElementList;
@include RV-Spacing__Inner--small;
.LP-ImageGrid__List{
list-style-type: none;
display: grid;
grid-template-columns: repeat(auto-fit, 300px);
align-content: space-around;
justify-content: center;
margin: 0px;
padding: 0px;
.LP-ImageGrid__Item {
@include RV-ContentCrop;
}
.LP-ImageGrid__Item{
margin-top:10px;
}
.LP-Link{
overflow: hidden;
}
.LP-Image {
box-shadow: 0 0 5px $-grey;
height: 200px;
width: 290px;
object-fit: cover;
}
}
@media(max-width: $-viewport-small){
.LP-ImageGrid{
.LP-ImageGrid__List{
grid-template-columns: 1fr;
.LP-Image{
box-shadow: 0 0 5px $-grey;
height: auto;
width: 100%;
object-fit: cover;
}
}
}
}
}

2
components/03_Organisms/imageGrid/imageGrid.hbs
View File

@@ -1,6 +1,6 @@
<div class="LP-ImageGrid">
<ul class="LP-ImageGrid__List">
<ul class="LP-ImageGrid__Container">
{{#each images}}
<li class="LP-ImageGrid__Item">
<a href="#" class="LP-Link"><img class="LP-Image" src="{{this}}"></a>

106
components/03_Organisms/linkList/_linkList.scss
View File

@@ -1,89 +1,23 @@
.LP-LinkList__List{
list-style-type: none;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
margin: 0;
padding: 0;
.LP-LinkList{
@include RV-FlexGrid(300px, 3em);
@include RV-ElementList;
@include RV-Spacing__Inner--small;
.LP-LinkList__Item{
border-left: 1px solid $-light-brown;
width: calc(100% - 1px);
margin-top: 12px;
position: relative;
border-left: 1px solid $-light-brown;
width: calc(100% - 1px);
overflow: hidden;
&:hover {
background-color: $-almost-white;
}
}
.LP-Link{
height: 100%;
@include RV-Alignment--verticalCenter;
&--add{
.LP-LinkList__AddTrigger{
display: none;
&:checked{
& ~ .LP-LinkList__AddPlaceHolder{
visibility: hidden;
}
& ~ .LP-LinkList__Add{
display: block;
}
}
}
.LP-LinkList__Add{
position: absolute;
top: 3px;
display: none;
width: 100%;
.LP-Form__Fieldset{
min-width:unset;
}
.LP-Form{
display: block;
min-width: 0px;
}
}
}
.LP-Link{
$-link-padding: 1em;
padding: $-link-padding 0 $-link-padding $-link-padding;
width: calc(100% - 1em);
display: block;
color: $-grey;
&--iconized{
padding-top: 0;
padding-bottom: 1.1em;
&:hover{
background-color: #ccc !important;
}
.LP-Text{
padding-top: .1em;
}
}
&:hover{
background-color: $-almost-white;
color: $-wine-red;
}
.LP-Text{
color: inherit;
}
}
}
}
.LP-Link__Icon{
width: 2em;
height: 2em;
fill: $-wine-red;
line-height: 5em;
}
.LP-LinkList__Item .LP-Link__Icon{
position: relative;
top: .7em;
margin-right: .6em;
}
>* {
@include RV-Spacing__Inner--small;
}
}
}

63
components/03_Organisms/linkList/linkList.hbs
View File

@@ -1,43 +1,24 @@
<div class="LP-LinkList">
<ul class="LP-LinkList__List">
<li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">Google Maps</span></a></li>
<li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">OSM</span></a></li>
<li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">TIM Online</span></a></li>
<li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">Google Maps</span></a></li>
<li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">OSM</span></a></li>
<li class="LP-LinkList__Item LP-LinkList__Item--add">
<input type="checkbox" id="wurstwurst" class="LP-LinkList__AddTrigger"/>
<label for="wurstwurst" class="LP-LinkList__AddPlaceHolder">
<span class="LP-Link LP-Link--iconized">
<div class="LP-Link__IconWrapper">
<svg class="LP-Link__Icon" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
xml:space="preserve">
<g>
<path d="M492,236H276V20c0-11.046-8.954-20-20-20c-11.046,0-20,8.954-20,20v216H20c-11.046,0-20,8.954-20,20s8.954,20,20,20h216
v216c0,11.046,8.954,20,20,20s20-8.954,20-20V276h216c11.046,0,20-8.954,20-20C512,244.954,503.046,236,492,236z" />
</g>
</svg>
</div>
<span class="LP-Text">Link hinzufügen</span>
</span>
</label>
<span class="LP-LinkList__Add">
<form class="LP-Form LP-Form--inline">
<fieldset class="LP-Form__Fieldset">
<div class="LP-Form__Composition LP-Form__Composition">
<div class="LP-Form__Field LP-Form__Field--static LP-Input">
<button class="LP-Button">Add</button>
</div>
<div class="LP-Form__Field LP-Form__Field--wide LP-Input">
<input class="LP-Input__Field" type="url"/>
</div>
</div>
</div>
</fieldset>
</form>
</span>
</li>
</ul>
<ul class="LP-LinkList__Container">
<li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">Google Maps</span></a></li>
<li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">OSM</span></a></li>
<li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">TIM Online</span></a></li>
<li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">Google Maps</span></a></li>
<li class="LP-LinkList__Item">
<a href="#" class="LP-Link">
<div class="RV-Iconized__Container RV-Iconized__Container--medium">
<svg class="RV-Iconized__Icon" version="1.1" id="Capa_1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 512 512" xml:space="preserve">
<g>
<path d="M492,236H276V20c0-11.046-8.954-20-20-20c-11.046,0-20,8.954-20,20v216H20c-11.046,0-20,8.954-20,20s8.954,20,20,20h216
v216c0,11.046,8.954,20,20,20s20-8.954,20-20V276h216c11.046,0,20-8.954,20-20C512,244.954,503.046,236,492,236z" />
</g>
</svg>
<span class="RV-Iconized__Text">Link hinzufügen</span>
</div>
</a>
</li>
</ul>
</div>