diff --git a/components/01_Atoms/message/_message.scss b/components/01_Atoms/message/_message.scss index 499bee9..233bbbf 100644 --- a/components/01_Atoms/message/_message.scss +++ b/components/01_Atoms/message/_message.scss @@ -1,11 +1,14 @@ .LP-Message{ display: flex; flex-direction: row; - align-items: center; + 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{ @@ -47,12 +50,19 @@ background-size: 40px 40px; background-repeat: no-repeat; background-position: center; - height: 50px; + 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; } } \ No newline at end of file diff --git a/components/01_Atoms/message/message.hbs b/components/01_Atoms/message/message.hbs index e01956e..74ebed7 100644 --- a/components/01_Atoms/message/message.hbs +++ b/components/01_Atoms/message/message.hbs @@ -1,5 +1,8 @@
-
+
+
+ +
{{messageText}} diff --git a/components/02_Molecules/_molecules.scss b/components/02_Molecules/_molecules.scss index 600a6b0..dfaba7a 100644 --- a/components/02_Molecules/_molecules.scss +++ b/components/02_Molecules/_molecules.scss @@ -1,4 +1,5 @@ @import 'textSection/textSection'; @import 'placeTeaser/placeTeaser'; @import 'tagList/tagList'; -@import 'navigation/navigation'; \ No newline at end of file +@import 'navigation/navigation'; +@import 'messageList/messageList'; \ No newline at end of file diff --git a/public/main.css b/public/main.css index 39dd14b..2367c48 100644 --- a/public/main.css +++ b/public/main.css @@ -208,11 +208,14 @@ body { .LP-Message { display: flex; flex-direction: row; - align-items: center; + justify-content: center; + align-items: stretch; background-color: #f9f9f9; font-family: Montserrat, Helvetica, sans-serif; border-radius: 3px; - font-weight: bold; } + font-weight: bold; + box-shadow: 0 0 2px #565656; + overflow: hidden; } .LP-Message--error .LP-Message__Icon { background-color: #02979e; background-image: url("/icons/error.png"); } @@ -232,11 +235,18 @@ body { background-size: 40px 40px; background-repeat: no-repeat; background-position: center; - height: 50px; + height: 100%; + min-height: 50px; width: 50px; - filter: invert(1); } + filter: invert(1); + flex-shrink: 0; + flex-grow: 0; } .LP-Message .LP-Message__Text { - padding: 0 15px; } + padding: 0 15px; + flex-grow: 1; + display: flex; + flex-direction: column; + justify-content: center; } .LP-Content { padding: 35px; } @@ -382,6 +392,18 @@ body { .LP-Menu .LP-Menu__List { justify-content: space-between; } } +.LP-MessageList { + padding: 25px; } + .LP-MessageList .LP-MessageList__List { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + flex-direction: column; + justify-content: space-between; } + .LP-MessageList .LP-MessageList__Item { + margin: 5px 0; } + .LP-Header { display: flex; align-items: center;