diff --git a/components/01_Atoms/button/_button.scss b/components/01_Atoms/button/_button.scss index 890fd35..d98a86e 100644 --- a/components/01_Atoms/button/_button.scss +++ b/components/01_Atoms/button/_button.scss @@ -1,23 +1,23 @@ .LP-Button{ - background-color: $-light-brown; - color: $-grey; - border: none; - padding: 8px 14px; - border-radius: 2px; - font-weight: bold; - cursor: pointer; + background-color: $-light-brown; + color: $-grey; + border: none; + padding: 8px 14px; + border-radius: 2px; + font-weight: bold; + cursor: pointer; - &:active{ - background-color: $-wine-red; - color:$-almost-white; - } + &:active{ + background-color: $-wine-red; + color:$-almost-white; + } - &--cancel{ - background-color: $-grey; - color: $-almost-white; - &:active{ - color: $-grey; - background-color: $-almost-white; - } - } + &--cancel{ + background-color: $-grey; + color: $-almost-white; + &:active{ + color: $-grey; + background-color: $-almost-white; + } + } } \ No newline at end of file diff --git a/components/01_Atoms/button/button.config.json b/components/01_Atoms/button/button.config.json index 4d8fe77..efc72ee 100644 --- a/components/01_Atoms/button/button.config.json +++ b/components/01_Atoms/button/button.config.json @@ -1,14 +1,14 @@ { - "title": "Button", - "context":{ - "text": "Click me" - }, - "variants": [ - { - "name": "Cancel Button", - "context": { - "modifier": "--cancel" - } - } - ] + "title": "Button", + "context":{ + "text": "Click me" + }, + "variants": [ + { + "name": "Cancel Button", + "context": { + "modifier": "--cancel" + } + } + ] } \ No newline at end of file diff --git a/components/01_Atoms/checkbox/_checkbox.scss b/components/01_Atoms/checkbox/_checkbox.scss index 4b1fe6f..c3fe00c 100644 --- a/components/01_Atoms/checkbox/_checkbox.scss +++ b/components/01_Atoms/checkbox/_checkbox.scss @@ -1,13 +1,13 @@ .LP-Form{ - .LP-Form__Checkbox{ - display: none; - } + .LP-Form__Checkbox{ + display: none; + } - .LP-Form__CheckBox__CheckMark{ - height: 1em; - width: 1em; - border: 1px solid black; - padding: 0 calc(.5em + 2px); - margin-right: .7em; - } + .LP-Form__CheckBox__CheckMark{ + height: 1em; + width: 1em; + border: 1px solid black; + padding: 0 calc(.5em + 2px); + margin-right: .7em; + } } \ No newline at end of file diff --git a/components/01_Atoms/checkbox/checkbox.config.json b/components/01_Atoms/checkbox/checkbox.config.json index 4eb7c3f..544b7b4 100644 --- a/components/01_Atoms/checkbox/checkbox.config.json +++ b/components/01_Atoms/checkbox/checkbox.config.json @@ -1,3 +1,3 @@ { - + } \ No newline at end of file diff --git a/components/01_Atoms/checkbox/checkbox.hbs b/components/01_Atoms/checkbox/checkbox.hbs index bf3543b..0c960cc 100644 --- a/components/01_Atoms/checkbox/checkbox.hbs +++ b/components/01_Atoms/checkbox/checkbox.hbs @@ -1,3 +1,3 @@
- +
\ No newline at end of file diff --git a/components/01_Atoms/headline/_headline.scss b/components/01_Atoms/headline/_headline.scss index d54a145..bdec001 100644 --- a/components/01_Atoms/headline/_headline.scss +++ b/components/01_Atoms/headline/_headline.scss @@ -15,5 +15,5 @@ &--inline{ display: inline; - } + } } \ 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 7948e9f..77be02e 100644 --- a/components/01_Atoms/headline/headline.config.json +++ b/components/01_Atoms/headline/headline.config.json @@ -9,6 +9,6 @@ "context": { "modifier": "--main" } - } + } ] } \ No newline at end of file diff --git a/components/01_Atoms/image/_image.scss b/components/01_Atoms/image/_image.scss index 0498296..2aec236 100644 --- a/components/01_Atoms/image/_image.scss +++ b/components/01_Atoms/image/_image.scss @@ -1,8 +1,8 @@ .LP-Image{ - object-fit: cover; - width: 100%; - height: auto; - vertical-align: top; - margin: 0; - padding: 0; + object-fit: cover; + width: 100%; + height: auto; + vertical-align: top; + margin: 0; + padding: 0; } \ No newline at end of file diff --git a/components/01_Atoms/image/image.config.json b/components/01_Atoms/image/image.config.json index 6696d6f..b73052d 100644 --- a/components/01_Atoms/image/image.config.json +++ b/components/01_Atoms/image/image.config.json @@ -1,5 +1,5 @@ { - "context":{ + "context":{ "source": "/images/photo_2020-05-02_18-11-21.jpg" } } \ No newline at end of file diff --git a/components/01_Atoms/input/_input.scss b/components/01_Atoms/input/_input.scss index 5caff78..b3e6916 100644 --- a/components/01_Atoms/input/_input.scss +++ b/components/01_Atoms/input/_input.scss @@ -3,7 +3,7 @@ display: flex; flex-direction: column; margin-bottom: -$-margin-bottom; - padding: 10px 0; + padding: 10px 0; .LP-Input__Field{ border: none; @@ -15,30 +15,30 @@ margin-bottom: $-margin-bottom - 1px; border-bottom: 2px solid $-wine-red; background-color: $-almost-white; - border-radius: 3px 3px 0 0; - box-shadow: none; - } - - &[type=submit]{ - background-color: $-light-brown; - color: $-grey; - border: none; - padding: 8px 14px; - border-radius: 2px; - font-weight: bold; - cursor: pointer; + border-radius: 3px 3px 0 0; + box-shadow: none; + } + + &[type=submit]{ + background-color: $-light-brown; + color: $-grey; + border: none; + padding: 8px 14px; + border-radius: 2px; + font-weight: bold; + cursor: pointer; - &:active{ - background-color: $-wine-red; - color:$-almost-white; - } + &:active{ + background-color: $-wine-red; + color:$-almost-white; + } - } + } } .LP-Input__Label{ font-family: $-primary-sans-serif-font; - font-size: 16px; + font-size: 16px; } .LP-Input__Message{ @@ -60,30 +60,30 @@ .LP-Input__Message{ color: $-wine-red; } - } - - &--disabled{ - .LP-Input__Field, .LP-Input__Field:disabled{ - background-color: transparent; - border-bottom: 1px dashed $-grey; - cursor: not-allowed; - - label + &{ - color: red; - } + } + + &--disabled{ + .LP-Input__Field, .LP-Input__Field:disabled{ + background-color: transparent; + border-bottom: 1px dashed $-grey; + cursor: not-allowed; + + label + &{ + color: red; + } - &:focus, &:active{ - margin-bottom: $-margin-bottom; - border-radius: 0; - } + &:focus, &:active{ + margin-bottom: $-margin-bottom; + border-radius: 0; + } - ~.LP-Input__Message{ - visibility: hidden; - } - } + ~.LP-Input__Message{ + visibility: hidden; + } + } - .LP-Input__Label{ - color: $-grey; - } - } + .LP-Input__Label{ + color: $-grey; + } + } } \ No newline at end of file diff --git a/components/01_Atoms/input/input.config.json b/components/01_Atoms/input/input.config.json index 71bf134..8654e6c 100644 --- a/components/01_Atoms/input/input.config.json +++ b/components/01_Atoms/input/input.config.json @@ -1,27 +1,27 @@ { "context": { - "label": "Enter your value here", - "placeholder": "A sample value" - }, - "variants": [ - { - "name": "With message", - "context":{ - "message": "Please fill in anything valuable" - } - }, + "label": "Enter your value here", + "placeholder": "A sample value" + }, + "variants": [ + { + "name": "With message", + "context":{ + "message": "Please fill in anything valuable" + } + }, { "name": "disabled", "context": { - "modifier": "--disabled", - "disabled": true - } - }, - { + "modifier": "--disabled", + "disabled": true + } + }, + { "name": "error", "context": { - "modifier": "--error", - "message": "This field is required" + "modifier": "--error", + "message": "This field is required" } } ] diff --git a/components/01_Atoms/input/input.hbs b/components/01_Atoms/input/input.hbs index 6ca9f97..8284c54 100644 --- a/components/01_Atoms/input/input.hbs +++ b/components/01_Atoms/input/input.hbs @@ -1,11 +1,11 @@
- {{#if message}} + {{#if disabled}} + disabled="disabled" + {{/if}} + /> + {{#if message}} {{message}} - {{/if}} + {{/if}}
\ No newline at end of file diff --git a/components/01_Atoms/message/_message.scss b/components/01_Atoms/message/_message.scss index d5c1a36..71d3198 100644 --- a/components/01_Atoms/message/_message.scss +++ b/components/01_Atoms/message/_message.scss @@ -1,69 +1,69 @@ .LP-Message{ - display: flex; - flex-direction: row; - justify-content: center; - align-items: stretch; - background-color: $-almost-white; - font-family: $-primary-sans-serif-font; - border-radius: 3px; - font-weight: bold; - box-shadow: 0 0 2px $-grey; - overflow: hidden; + display: flex; + flex-direction: row; + justify-content: center; + align-items: stretch; + background-color: $-almost-white; + font-family: $-primary-sans-serif-font; + border-radius: 3px; + font-weight: bold; + box-shadow: 0 0 2px $-grey; + overflow: hidden; - &--error{ - .LP-Message__Icon{ - background-color: invert(#fd6861); - background-image: url('icons/error.png'); - } - } + &--error{ + .LP-Message__Icon{ + background-color: invert(#fd6861); + background-image: url('icons/error.png'); + } + } - &--warning{ - .LP-Message__Icon{ - background-color:invert(#ffb818); - background-image: url('icons/error.png'); - } - } + &--warning{ + .LP-Message__Icon{ + background-color:invert(#ffb818); + background-image: url('icons/error.png'); + } + } - &--info{ - .LP-Message__Icon{ - background-color: invert(lightblue); - background-image: url('icons/information.svg'); - } - } + &--info{ + .LP-Message__Icon{ + background-color: invert(lightblue); + background-image: url('icons/information.svg'); + } + } - &--success{ - .LP-Message__Icon{ - background-color: invert(#96c800); - background-image: url('icons/success.svg'); - } - } + &--success{ + .LP-Message__Icon{ + background-color: invert(#96c800); + background-image: url('icons/success.svg'); + } + } - &--debug{ - .LP-Message__Icon{ - background-color: invert(#fb95d0); - background-image: url('icons/debug.png'); - } - } + &--debug{ + .LP-Message__Icon{ + background-color: invert(#fb95d0); + background-image: url('icons/debug.png'); + } + } - .LP-Message__Icon{ - background-size: 40px 40px; - background-repeat: no-repeat; - background-position: center; - height: 100%; - min-height: 50px; - width: 50px; - filter: invert(1); - flex-shrink: 0; - flex-grow: 0; - } + .LP-Message__Icon{ + background-size: 40px 40px; + background-repeat: no-repeat; + background-position: center; + height: 100%; + min-height: 50px; + width: 50px; + filter: invert(1); + flex-shrink: 0; + flex-grow: 0; + } - .LP-Message__Text{ - padding: 0 15px; - flex-grow: 1; - display: flex; - flex-direction: column; - justify-content: center; - padding: 8px; - } + .LP-Message__Text{ + padding: 0 15px; + flex-grow: 1; + display: flex; + flex-direction: column; + justify-content: center; + padding: 8px; + } } \ No newline at end of file diff --git a/components/01_Atoms/message/message.config.json b/components/01_Atoms/message/message.config.json index bf71635..47e4b4a 100644 --- a/components/01_Atoms/message/message.config.json +++ b/components/01_Atoms/message/message.config.json @@ -1,39 +1,39 @@ { - "title": "Message", - "context": { - "messageText": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.", - "modifier": "--info" - }, - "variants": [ - { - "name": "Information", - "context": { - "modifier": "--info" - } - }, - { - "name": "Warning", - "context": { - "modifier": "--warning" - } - }, - { - "name": "Error", - "context": { - "modifier": "--error" - } - }, - { - "name": "Success", - "context": { - "modifier": "--success" - } - }, - { - "name": "Debug", - "context": { - "modifier": "--debug" - } - } - ] + "title": "Message", + "context": { + "messageText": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.", + "modifier": "--info" + }, + "variants": [ + { + "name": "Information", + "context": { + "modifier": "--info" + } + }, + { + "name": "Warning", + "context": { + "modifier": "--warning" + } + }, + { + "name": "Error", + "context": { + "modifier": "--error" + } + }, + { + "name": "Success", + "context": { + "modifier": "--success" + } + }, + { + "name": "Debug", + "context": { + "modifier": "--debug" + } + } + ] } \ No newline at end of file diff --git a/components/01_Atoms/message/message.hbs b/components/01_Atoms/message/message.hbs index 74ebed7..d0e9a4c 100644 --- a/components/01_Atoms/message/message.hbs +++ b/components/01_Atoms/message/message.hbs @@ -1,10 +1,10 @@
-
-
- -
-
-
- {{messageText}} -
+
+
+ +
+
+
+ {{messageText}} +
\ No newline at end of file diff --git a/components/01_Atoms/pagination/_pagination.scss b/components/01_Atoms/pagination/_pagination.scss index 9cb0eb1..56d1fe8 100644 --- a/components/01_Atoms/pagination/_pagination.scss +++ b/components/01_Atoms/pagination/_pagination.scss @@ -8,24 +8,24 @@ .LP-Pagination__List{ list-style-type: none; display: flex; - flex-direction: row; - padding-left: 0; - padding-right: 0; + flex-direction: row; + padding-left: 0; + padding-right: 0; } .LP-Pagination__Item{ margin: 0 4px; - + &--disabled{ - color: rgb(182, 182, 182); - .LP-Link{ - color: rgb(182, 182, 182); - cursor: default; - &:hover{ - background-color: unset; - color: unset; - } - } + color: rgb(182, 182, 182); + .LP-Link{ + color: rgb(182, 182, 182); + cursor: default; + &:hover{ + background-color: unset; + color: unset; + } + } } &--current{ @@ -39,54 +39,54 @@ } } } - } - - .LP-Link{ - padding: 15px 20px; - vertical-align: sub; - border-radius: 2px; + } + + .LP-Link{ + padding: 15px 20px; + vertical-align: sub; + border-radius: 2px; - &:active, &:hover{ - background-color: $-beige; - color: $-grey; - } - } + &:active, &:hover{ + background-color: $-beige; + color: $-grey; + } + } - .LP-Icon{ - font-size: larger; - } + .LP-Icon{ + font-size: larger; + } } @media(max-width: $-viewport-normal){ - .LP-Pagination{ - .LP-Link{ - padding: 10px 15px; - } - .LP-Pagination__Item--other{ - .LP-Text{ - display: none; - } - } - } + .LP-Pagination{ + .LP-Link{ + padding: 10px 15px; + } + .LP-Pagination__Item--other{ + .LP-Text{ + display: none; + } + } + } } @media(max-width: $-viewport-small){ - .LP-Pagination{ - .LP-Pagination__Item{ - margin: 0 1px; - .LP-Link{ - padding: 13px 16px; - } - } - } + .LP-Pagination{ + .LP-Pagination__Item{ + margin: 0 1px; + .LP-Link{ + padding: 13px 16px; + } + } + } } @media(max-width: $-viewport-extra-small){ - .LP-Pagination{ - .LP-Pagination__Item{ - .LP-Link{ - padding: 8px 11px; - } - } - } + .LP-Pagination{ + .LP-Pagination__Item{ + .LP-Link{ + padding: 8px 11px; + } + } + } } \ No newline at end of file diff --git a/components/01_Atoms/pagination/pagination.config.json b/components/01_Atoms/pagination/pagination.config.json index 2fb4153..b8f2778 100644 --- a/components/01_Atoms/pagination/pagination.config.json +++ b/components/01_Atoms/pagination/pagination.config.json @@ -1,3 +1,3 @@ { - "title": "Pagnination" + "title": "Pagnination" } \ No newline at end of file diff --git a/components/01_Atoms/pagination/pagination.hbs b/components/01_Atoms/pagination/pagination.hbs index 9fbb1f8..5bc58bb 100644 --- a/components/01_Atoms/pagination/pagination.hbs +++ b/components/01_Atoms/pagination/pagination.hbs @@ -1,54 +1,54 @@
-
\ No newline at end of file diff --git a/components/01_Atoms/paragraph/_paragraph.scss b/components/01_Atoms/paragraph/_paragraph.scss index a6452ff..de1cdb5 100644 --- a/components/01_Atoms/paragraph/_paragraph.scss +++ b/components/01_Atoms/paragraph/_paragraph.scss @@ -1,7 +1,7 @@ .LP-Paragraph { color: black; font-family: $-primary-serif-font; - font-size: 1.2rem; - padding: 0; - margin: 0; + font-size: 1.2rem; + padding: 0; + margin: 0; } \ 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 564f297..9518196 100644 --- a/components/01_Atoms/paragraph/paragraph.config.json +++ b/components/01_Atoms/paragraph/paragraph.config.json @@ -1,8 +1,8 @@ { "context": { "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": [ - ] + ] } \ No newline at end of file diff --git a/components/01_Atoms/tag/_tag.scss b/components/01_Atoms/tag/_tag.scss index 2fb9ddc..249cb4a 100644 --- a/components/01_Atoms/tag/_tag.scss +++ b/components/01_Atoms/tag/_tag.scss @@ -1,14 +1,14 @@ .LP-Tag{ - padding: 8px 14px; - background-color: #D7CEC7; - border-radius: 2px; - width: max-content; + padding: 8px 14px; + background-color: #D7CEC7; + border-radius: 2px; + width: max-content; - .LP-Paragraph{ - padding: 0; - margin: 0; - font-family: $-primary-sans-serif-font; - font-size: 1em; - display: inline; - } + .LP-Paragraph{ + padding: 0; + margin: 0; + font-family: $-primary-sans-serif-font; + font-size: 1em; + display: inline; + } } \ No newline at end of file diff --git a/components/01_Atoms/tag/tag.config.json b/components/01_Atoms/tag/tag.config.json index b745862..ef5effb 100644 --- a/components/01_Atoms/tag/tag.config.json +++ b/components/01_Atoms/tag/tag.config.json @@ -1,6 +1,6 @@ { - "title": "Tag", - "context": { - "text": "Im a tag" - } + "title": "Tag", + "context": { + "text": "Im a tag" + } } \ No newline at end of file diff --git a/components/01_Atoms/tag/tag.hbs b/components/01_Atoms/tag/tag.hbs index 55cc3e3..a8ded11 100644 --- a/components/01_Atoms/tag/tag.hbs +++ b/components/01_Atoms/tag/tag.hbs @@ -1,3 +1,3 @@
- {{> @paragraph text=text}} + {{> @paragraph text=text}}
\ No newline at end of file diff --git a/components/02_Molecules/messageList/_messageList.scss b/components/02_Molecules/messageList/_messageList.scss index 1c5a839..d9653eb 100644 --- a/components/02_Molecules/messageList/_messageList.scss +++ b/components/02_Molecules/messageList/_messageList.scss @@ -1,15 +1,15 @@ .LP-MessageList{ - padding: 25px; - .LP-MessageList__List{ - padding: 0; - margin: 0; - list-style-type: none; - display: flex; - flex-direction: column; - justify-content: space-between; - } + padding: 25px; + .LP-MessageList__List{ + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + flex-direction: column; + justify-content: space-between; + } - .LP-MessageList__Item{ - margin: 5px 0; - } + .LP-MessageList__Item{ + margin: 5px 0; + } } \ No newline at end of file diff --git a/components/02_Molecules/messageList/messageList.config.json b/components/02_Molecules/messageList/messageList.config.json index 3785d29..32e60b3 100644 --- a/components/02_Molecules/messageList/messageList.config.json +++ b/components/02_Molecules/messageList/messageList.config.json @@ -1,6 +1,6 @@ { - "title": "Message List", - "context": { - "text": "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." - } + "title": "Message List", + "context": { + "text": "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." + } } \ No newline at end of file diff --git a/components/02_Molecules/messageList/messageList.hbs b/components/02_Molecules/messageList/messageList.hbs index ff35dbd..f17d7ab 100644 --- a/components/02_Molecules/messageList/messageList.hbs +++ b/components/02_Molecules/messageList/messageList.hbs @@ -1,9 +1,9 @@
- +
\ No newline at end of file diff --git a/components/02_Molecules/navigation/_navigation.scss b/components/02_Molecules/navigation/_navigation.scss index 0c46135..edd0f15 100644 --- a/components/02_Molecules/navigation/_navigation.scss +++ b/components/02_Molecules/navigation/_navigation.scss @@ -7,8 +7,8 @@ justify-content: space-around; padding: 0; margin: 0; - } - + } + .LP-Menu__Item { margin: 0; text-align: center; @@ -30,12 +30,12 @@ } &--sidebar{ - border-top: 1px solid $-light-brown; - border-left: none; + border-top: 1px solid $-light-brown; + border-left: none; min-width: 60px; background-color: $-almost-white; padding-top: 25px; - + .LP-Menu__List{ flex-direction: column; @@ -44,14 +44,14 @@ margin-bottom: 10px; padding-left: 25px; - &--additional{ - background-color: #ccc; - } + &--additional{ + background-color: #ccc; + } - .LP-Link{ - line-height: 1em; - } - + .LP-Link{ + line-height: 1em; + } + &:last-child{ margin-bottom: 0; } @@ -60,9 +60,9 @@ border-right: 2px solid $-light-brown; position: relative; background-color: $-beige; - color: $-wine-red; + color: $-wine-red; } - } + } } } diff --git a/components/02_Molecules/navigation/navigation.config.json b/components/02_Molecules/navigation/navigation.config.json index 0cdbb35..f7343d5 100644 --- a/components/02_Molecules/navigation/navigation.config.json +++ b/components/02_Molecules/navigation/navigation.config.json @@ -1,10 +1,10 @@ { - "title": "Navigation", - "context": { - "additionalItems": [ - "Hello" - ] - }, + "title": "Navigation", + "context": { + "additionalItems": [ + "Hello" + ] + }, "variants": [ { "name": "Sidebar", diff --git a/components/02_Molecules/navigation/navigation.hbs b/components/02_Molecules/navigation/navigation.hbs index 39fe107..db78758 100644 --- a/components/02_Molecules/navigation/navigation.hbs +++ b/components/02_Molecules/navigation/navigation.hbs @@ -1,8 +1,8 @@