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

Using Scope instead of modifier

Browse Source
This commit is contained in:
reverend 2020-08-01 09:29:27 +02:00
parent 71fda3ddbf
commit 6215b8dd7c
7 changed files with 125 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/01_Atoms/headline/_headline.scss
View File

@ -16,12 +16,4 @@
&--inline{ &--inline{
display: inline; display: inline;
} }
&--teaser{
font-family: $-primary-sans-serif-font;
color: $-secondary-color;
font-size: 1rem;
padding: 0px;
margin: 0px;
}
} }

8
components/01_Atoms/headline/headline.config.json
View File

@ -9,12 +9,6 @@
"context": { "context": {
"modifier": "--main" "modifier": "--main"
} }
}, }
{
"name": "teaser",
"context": {
"modifier": "--teaser"
}
}
] ]
} }

8
components/01_Atoms/paragraph/_paragraph.scss
View File

@ -2,12 +2,4 @@
color: black; color: black;
font-family: $-primary-serif-font; font-family: $-primary-serif-font;
font-size: 1.2rem; font-size: 1.2rem;
&--detail{
font-family: $-primary-sans-serif-font;
padding: 0;
margin: 0;
margin-top: 5px;
font-size: 0.9rem;
}
} }

8
components/01_Atoms/paragraph/paragraph.config.json
View File

@ -3,12 +3,6 @@
"text": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet." "text": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
}, },
"variants": [ "variants": [
{
"name": "Detail",
"context":{
"text": "Hamm (Westf)",
"modifier": "--detail"
}
}
] ]
} }

18
components/02_Molecules/placeTeaser/_placeTeaser.scss
View File

@ -10,7 +10,23 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding-bottom: 10px; padding-bottom: 10px;
.LP-Paragraph{
font-family: $-primary-sans-serif-font;
padding: 0;
margin: 0;
margin-top: 5px;
font-size: 0.9rem;
}
.LP-Headline{
font-family: $-primary-sans-serif-font;
color: $-secondary-color;
font-size: 1rem;
padding: 0px;
margin: 0px;
}
} }
.LP-Place__Description{ .LP-Place__Description{

2
components/02_Molecules/placeTeaser/placeTeaser.hbs
View File

@ -5,7 +5,7 @@
<div class="LP-Place__Meta"> <div class="LP-Place__Meta">
<div class="LP-Place__Info"> <div class="LP-Place__Info">
<span class="LP-Place__Title">{{> @headline headline=title modifier='--teaser'}}</span> <span class="LP-Place__Title">{{> @headline headline=title modifier='--teaser'}}</span>
<span class="LP-Place__Detail" >{{> @paragraph text=location modifier='--detail'}}</span> <span class="LP-Place__Detail" >{{> @paragraph text=location}}</span>
</div> </div>
<div class="LP-Place__Description"> <div class="LP-Place__Description">
{{> @paragraph text=description}} {{> @paragraph text=description}}

197
public/components.css
View File

@ -4,7 +4,7 @@
@font-face { @font-face {
font-family: Montserrat; font-family: Montserrat;
src: url("fonts/Montserrat/Montserrat-Regular.ttf"), url("fonts/Montserrat/Montserrat-Bold.ttf"), url("fonts/Montserrat/Montserrat-Italic.ttf"); } src: url("fonts/Montserrat/Montserrat-Regular.otf"), url("fonts/Montserrat/Montserrat-Bold.otf"), url("fonts/Montserrat/Montserrat-Italic.otf"); }
.LP-Link { .LP-Link {
color: #565656; color: #565656;
@ -35,7 +35,7 @@
.LP-Headline--inline { .LP-Headline--inline {
display: inline; } display: inline; }
.LP-Text { .LP-Paragraph {
color: black; color: black;
font-family: Crimson, Times, serif; font-family: Crimson, Times, serif;
font-size: 1.2rem; } font-size: 1.2rem; }
@ -53,8 +53,26 @@
.LP-Icon__List .LP-Icon__Item { .LP-Icon__List .LP-Icon__Item {
padding: 0 3px; } padding: 0 3px; }
.LP-Input:has(.LP-Input__Field:disabled) { .LP-Button {
background-color: red; } background-color: #C09F80;
color: #565656;
border: none;
padding: 8px 14px;
border-radius: 2px;
font-weight: bold; }
.LP-Button:active {
background-color: #76323F;
color: #C09F80; }
.LP-Form .LP-Form__Checkbox {
display: none; }
.LP-Form .LP-Form__CheckBox__CheckMark {
height: 1em;
width: 1em;
border: 1px solid black;
padding: 0 calc(.5em + 2px);
margin-right: .7em; }
.LP-Input { .LP-Input {
display: flex; display: flex;
@ -71,18 +89,9 @@
border-bottom: 2px solid #76323F; border-bottom: 2px solid #76323F;
background-color: #f9f9f9; background-color: #f9f9f9;
border-radius: 3px 3px 0 0; } border-radius: 3px 3px 0 0; }
.LP-Input .LP-Input__Field:disabled {
background-color: transparent;
border-bottom: 1px dashed #565656;
cursor: not-allowed; }
.LP-Input .LP-Input__Field:disabled:active {
margin-bottom: 30px;
border-radius: 0; }
.LP-Input .LP-Input__Field:disabled ~ .LP-Input__Message {
visibility: hidden; }
.LP-Input .LP-Input__Label { .LP-Input .LP-Input__Label {
font-family: Montserrat, Helvetica, sans-serif; font-family: Montserrat, Helvetica, sans-serif;
font-size: 18px; } font-size: 16px; }
.LP-Input .LP-Input__Message { .LP-Input .LP-Input__Message {
font-family: Montserrat, Helvetica, sans-serif; font-family: Montserrat, Helvetica, sans-serif;
font-style: italic; font-style: italic;
@ -98,16 +107,23 @@
margin-bottom: 29px; } margin-bottom: 29px; }
.LP-Input--error .LP-Input__Message { .LP-Input--error .LP-Input__Message {
color: #76323F; } color: #76323F; }
.LP-Input--disabled .LP-Input__Field, .LP-Input--disabled .LP-Input__Field:disabled {
background-color: transparent;
border-bottom: 1px dashed #565656;
cursor: not-allowed; }
label + .LP-Input--disabled .LP-Input__Field, label + .LP-Input--disabled .LP-Input__Field:disabled {
color: red; }
.LP-Input--disabled .LP-Input__Field:focus, .LP-Input--disabled .LP-Input__Field:active, .LP-Input--disabled .LP-Input__Field:disabled:focus, .LP-Input--disabled .LP-Input__Field:disabled:active {
margin-bottom: 30px;
border-radius: 0; }
.LP-Input--disabled .LP-Input__Field ~ .LP-Input__Message, .LP-Input--disabled .LP-Input__Field:disabled ~ .LP-Input__Message {
visibility: hidden; }
.LP-Input--disabled .LP-Input__Label {
color: #565656; }
@media (max-width: 650px) { .LP-Image {
.LP-Input .LP-Input__Label { max-width: 100%;
font-family: Montserrat, Helvetica, sans-serif; max-height: 100%; }
font-size: 2.5vw; } }
@media (max-width: 390px) {
.LP-Input .LP-Input__Label {
font-family: Montserrat, Helvetica, sans-serif;
font-size: 18px; } }
.LP-Logo { .LP-Logo {
max-width: 100%; max-width: 100%;
@ -125,36 +141,32 @@
.LP-TextSection .LP-Text { .LP-TextSection .LP-Text {
line-height: 1.4rem; } line-height: 1.4rem; }
.LP-Place .LP-Place__Image { .LP-Place {
width: 280px; width: 280px; }
height: 165px; .LP-Place .LP-Place__Image {
object-fit: fill; } height: 165px;
object-fit: fill; }
.LP-Place .LP-Place__Assets { .LP-Place .LP-Place__Meta {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin-top: 0.8rem; padding-bottom: 10px; }
padding: 0 10px; .LP-Place .LP-Place__Meta .LP-Paragraph {
padding-bottom: 10px; } font-family: Montserrat, Helvetica, sans-serif;
padding: 0;
.LP-Place .LP-Place__Info .LP-Place__Title { margin: 0;
font-family: Montserrat, Helvetica, sans-serif; margin-top: 5px;
color: #565656; font-size: 0.9rem; }
font-size: 1rem; .LP-Place .LP-Place__Meta .LP-Headline {
padding: 0px; font-family: Montserrat, Helvetica, sans-serif;
margin: 0px; } color: #565656;
font-size: 1rem;
.LP-Place .LP-Place__Info .LP-Place__Description { padding: 0px;
font-family: Roboto, Arial, sans-serif; margin: 0px; }
color: #565656; } .LP-Place .LP-Place__Description {
font-family: Roboto, Arial, sans-serif;
.LP-Place .LP-Place__Info .LP-Place__Detail { color: #565656;
font-family: Montserrat, Helvetica, sans-serif; display: none; }
padding: 0;
margin: 0;
margin-top: 5px;
font-size: 0.9rem; }
.LP-SecurityMeasure__List { .LP-SecurityMeasure__List {
list-style-type: none; list-style-type: none;
@ -170,45 +182,6 @@
font-family: Montserrat, Helvetica, sans-serif; font-family: Montserrat, Helvetica, sans-serif;
font-size: 1.2rem; } font-size: 1.2rem; }
.LP-Form {
max-width: 900px; }
.LP-Form .LP-Form__Fieldset {
border: none; }
.LP-Form .LP-Form__Fieldset .LP-Form__Legend {
margin: 0;
padding: 0; }
.LP-Form .LP-Form__Fieldset .LP-Form__Composition {
display: flex;
flex-direction: row;
justify-content: space-between; }
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field {
flex: 3 1 100px;
padding: 0 15px; }
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--wider {
flex: 5 1 200px; }
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--wide {
flex: 4 1 150px; }
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--narrow {
flex: 2 0 50px; }
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--narrower {
flex: 1 0 25px; }
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field input {
width: 100%; }
@media (max-width: 650px) {
.LP-Form .LP-Form__Fieldset .LP-Form__Composition--breakable {
display: flex;
flex-direction: column;
justify-content: space-between; } }
@media (max-width: 390px) {
.LP-Form .LP-Form__Fieldset .LP-Form__Composition {
display: flex;
flex-direction: column;
justify-content: space-between; }
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field {
flex: 3 1 100px; } }
.LP-Header { .LP-Header {
display: flex; display: flex;
align-items: center; align-items: center;
@ -356,6 +329,46 @@
.LP-Footer .LP-LinkList__List .LP-LinkList__Item .LP-Link:hover { .LP-Footer .LP-LinkList__List .LP-LinkList__Item .LP-Link:hover {
background-color: inherit; } background-color: inherit; }
.LP-Form {
max-width: 900px; }
.LP-Form .LP-Form__Fieldset {
border: none; }
.LP-Form .LP-Form__Fieldset .LP-Form__Legend {
margin: 0;
padding: 0; }
.LP-Form .LP-Form__Fieldset .LP-Form__Composition {
display: flex;
flex-direction: row;
justify-content: space-between; }
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field {
flex: 3 1 100px;
padding: 6px 15px; }
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--wider {
flex: 5 1 200px; }
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--wide {
flex: 4 1 150px; }
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--narrow {
flex: 2 0 50px; }
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--narrower {
flex: 1 0 25px; }
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field input {
width: 100%; }
@media (max-width: 650px) {
.LP-Form .LP-Form__Fieldset .LP-Form__Composition--breakable {
display: flex;
flex-direction: column;
justify-content: space-between; } }
@media (max-width: 450px) {
.LP-Form .LP-Form__Fieldset .LP-Form__Composition {
display: flex;
flex-direction: column;
justify-content: space-between; }
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field {
flex: 3 1 100px;
padding: 12px 15px; } }
.LP-MainContainer { .LP-MainContainer {
margin: 0 auto; margin: 0 auto;
max-width: 1280px; } max-width: 1280px; }