From 6215b8dd7cd35ea96051d9e5a33082ac5236d5ff Mon Sep 17 00:00:00 2001 From: reverend Date: Sat, 1 Aug 2020 09:29:27 +0200 Subject: [PATCH] Using Scope instead of modifier --- components/01_Atoms/headline/_headline.scss | 8 - .../01_Atoms/headline/headline.config.json | 8 +- components/01_Atoms/paragraph/_paragraph.scss | 8 - .../01_Atoms/paragraph/paragraph.config.json | 8 +- .../placeTeaser/_placeTeaser.scss | 18 +- .../02_Molecules/placeTeaser/placeTeaser.hbs | 2 +- public/components.css | 197 ++++++++++-------- 7 files changed, 125 insertions(+), 124 deletions(-) diff --git a/components/01_Atoms/headline/_headline.scss b/components/01_Atoms/headline/_headline.scss index 013ddf4..7b22927 100644 --- a/components/01_Atoms/headline/_headline.scss +++ b/components/01_Atoms/headline/_headline.scss @@ -16,12 +16,4 @@ &--inline{ display: inline; } - - &--teaser{ - font-family: $-primary-sans-serif-font; - color: $-secondary-color; - font-size: 1rem; - padding: 0px; - margin: 0px; - } } \ No newline at end of file diff --git a/components/01_Atoms/headline/headline.config.json b/components/01_Atoms/headline/headline.config.json index b998002..7948e9f 100644 --- a/components/01_Atoms/headline/headline.config.json +++ b/components/01_Atoms/headline/headline.config.json @@ -9,12 +9,6 @@ "context": { "modifier": "--main" } - }, - { - "name": "teaser", - "context": { - "modifier": "--teaser" - } - } + } ] } \ No newline at end of file diff --git a/components/01_Atoms/paragraph/_paragraph.scss b/components/01_Atoms/paragraph/_paragraph.scss index 78bef63..5539b03 100644 --- a/components/01_Atoms/paragraph/_paragraph.scss +++ b/components/01_Atoms/paragraph/_paragraph.scss @@ -2,12 +2,4 @@ color: black; font-family: $-primary-serif-font; font-size: 1.2rem; - - &--detail{ - font-family: $-primary-sans-serif-font; - padding: 0; - margin: 0; - margin-top: 5px; - font-size: 0.9rem; - } } \ No newline at end of file diff --git a/components/01_Atoms/paragraph/paragraph.config.json b/components/01_Atoms/paragraph/paragraph.config.json index cb1fb56..564f297 100644 --- a/components/01_Atoms/paragraph/paragraph.config.json +++ b/components/01_Atoms/paragraph/paragraph.config.json @@ -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." }, "variants": [ - { - "name": "Detail", - "context":{ - "text": "Hamm (Westf)", - "modifier": "--detail" - } - } + ] } \ No newline at end of file diff --git a/components/02_Molecules/placeTeaser/_placeTeaser.scss b/components/02_Molecules/placeTeaser/_placeTeaser.scss index a854dc2..b600085 100644 --- a/components/02_Molecules/placeTeaser/_placeTeaser.scss +++ b/components/02_Molecules/placeTeaser/_placeTeaser.scss @@ -10,7 +10,23 @@ display: flex; align-items: center; 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{ diff --git a/components/02_Molecules/placeTeaser/placeTeaser.hbs b/components/02_Molecules/placeTeaser/placeTeaser.hbs index 0f56459..1d39f22 100644 --- a/components/02_Molecules/placeTeaser/placeTeaser.hbs +++ b/components/02_Molecules/placeTeaser/placeTeaser.hbs @@ -5,7 +5,7 @@
{{> @headline headline=title modifier='--teaser'}} - {{> @paragraph text=location modifier='--detail'}} + {{> @paragraph text=location}}
{{> @paragraph text=description}} diff --git a/public/components.css b/public/components.css index 5467557..3eae666 100644 --- a/public/components.css +++ b/public/components.css @@ -4,7 +4,7 @@ @font-face { 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 { color: #565656; @@ -35,7 +35,7 @@ .LP-Headline--inline { display: inline; } -.LP-Text { +.LP-Paragraph { color: black; font-family: Crimson, Times, serif; font-size: 1.2rem; } @@ -53,8 +53,26 @@ .LP-Icon__List .LP-Icon__Item { padding: 0 3px; } -.LP-Input:has(.LP-Input__Field:disabled) { - background-color: red; } +.LP-Button { + 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 { display: flex; @@ -71,18 +89,9 @@ border-bottom: 2px solid #76323F; background-color: #f9f9f9; 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 { font-family: Montserrat, Helvetica, sans-serif; - font-size: 18px; } + font-size: 16px; } .LP-Input .LP-Input__Message { font-family: Montserrat, Helvetica, sans-serif; font-style: italic; @@ -98,16 +107,23 @@ margin-bottom: 29px; } .LP-Input--error .LP-Input__Message { 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-Input .LP-Input__Label { - font-family: Montserrat, Helvetica, sans-serif; - font-size: 2.5vw; } } - -@media (max-width: 390px) { - .LP-Input .LP-Input__Label { - font-family: Montserrat, Helvetica, sans-serif; - font-size: 18px; } } +.LP-Image { + max-width: 100%; + max-height: 100%; } .LP-Logo { max-width: 100%; @@ -125,36 +141,32 @@ .LP-TextSection .LP-Text { line-height: 1.4rem; } -.LP-Place .LP-Place__Image { - width: 280px; - height: 165px; - object-fit: fill; } - -.LP-Place .LP-Place__Assets { - display: flex; - align-items: center; - justify-content: space-between; - margin-top: 0.8rem; - padding: 0 10px; - padding-bottom: 10px; } - -.LP-Place .LP-Place__Info .LP-Place__Title { - font-family: Montserrat, Helvetica, sans-serif; - color: #565656; - font-size: 1rem; - padding: 0px; - margin: 0px; } - -.LP-Place .LP-Place__Info .LP-Place__Description { - font-family: Roboto, Arial, sans-serif; - color: #565656; } - -.LP-Place .LP-Place__Info .LP-Place__Detail { - font-family: Montserrat, Helvetica, sans-serif; - padding: 0; - margin: 0; - margin-top: 5px; - font-size: 0.9rem; } +.LP-Place { + width: 280px; } + .LP-Place .LP-Place__Image { + height: 165px; + object-fit: fill; } + .LP-Place .LP-Place__Meta { + display: flex; + align-items: center; + justify-content: space-between; + padding-bottom: 10px; } + .LP-Place .LP-Place__Meta .LP-Paragraph { + font-family: Montserrat, Helvetica, sans-serif; + padding: 0; + margin: 0; + margin-top: 5px; + font-size: 0.9rem; } + .LP-Place .LP-Place__Meta .LP-Headline { + font-family: Montserrat, Helvetica, sans-serif; + color: #565656; + font-size: 1rem; + padding: 0px; + margin: 0px; } + .LP-Place .LP-Place__Description { + font-family: Roboto, Arial, sans-serif; + color: #565656; + display: none; } .LP-SecurityMeasure__List { list-style-type: none; @@ -170,45 +182,6 @@ font-family: Montserrat, Helvetica, sans-serif; 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 { display: flex; align-items: center; @@ -356,6 +329,46 @@ .LP-Footer .LP-LinkList__List .LP-LinkList__Item .LP-Link:hover { 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 { margin: 0 auto; max-width: 1280px; }