diff --git a/components/01_Atoms/_atoms.scss b/components/01_Atoms/_atoms.scss index 9e7bb7f..f1438fd 100644 --- a/components/01_Atoms/_atoms.scss +++ b/components/01_Atoms/_atoms.scss @@ -7,4 +7,5 @@ @import 'input/input'; @import 'image/image'; @import 'logo/logo'; -@import 'tag/tag'; \ No newline at end of file +@import 'tag/tag'; +@import 'message/message'; \ No newline at end of file diff --git a/components/01_Atoms/message/_message.scss b/components/01_Atoms/message/_message.scss new file mode 100644 index 0000000..499bee9 --- /dev/null +++ b/components/01_Atoms/message/_message.scss @@ -0,0 +1,58 @@ +.LP-Message{ + display: flex; + flex-direction: row; + align-items: center; + background-color: $-almost-white; + font-family: $-primary-sans-serif-font; + border-radius: 3px; + font-weight: bold; + + &--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'); + } + } + + + &--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'); + } + } + + &--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: 50px; + width: 50px; + filter: invert(1); + } + + .LP-Message__Text{ + padding: 0 15px; + } +} \ No newline at end of file diff --git a/components/01_Atoms/message/message.config.json b/components/01_Atoms/message/message.config.json new file mode 100644 index 0000000..bf71635 --- /dev/null +++ b/components/01_Atoms/message/message.config.json @@ -0,0 +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" + } + } + ] +} \ No newline at end of file diff --git a/components/01_Atoms/message/message.hbs b/components/01_Atoms/message/message.hbs new file mode 100644 index 0000000..e01956e --- /dev/null +++ b/components/01_Atoms/message/message.hbs @@ -0,0 +1,7 @@ +
+
+
+
+ {{messageText}} +
+
\ No newline at end of file diff --git a/public/main.css b/public/main.css index 40aa8ea..39dd14b 100644 --- a/public/main.css +++ b/public/main.css @@ -205,6 +205,39 @@ body { font-size: 1em; display: inline; } +.LP-Message { + display: flex; + flex-direction: row; + align-items: center; + background-color: #f9f9f9; + font-family: Montserrat, Helvetica, sans-serif; + border-radius: 3px; + font-weight: bold; } + .LP-Message--error .LP-Message__Icon { + background-color: #02979e; + background-image: url("/icons/error.png"); } + .LP-Message--warning .LP-Message__Icon { + background-color: #0047e7; + background-image: url("/icons/error.png"); } + .LP-Message--info .LP-Message__Icon { + background-color: #522719; + background-image: url("/icons/information.svg"); } + .LP-Message--success .LP-Message__Icon { + background-color: #6937ff; + background-image: url("/icons/success.svg"); } + .LP-Message--debug .LP-Message__Icon { + background-color: #046a2f; + background-image: url("/icons/debug.png"); } + .LP-Message .LP-Message__Icon { + background-size: 40px 40px; + background-repeat: no-repeat; + background-position: center; + height: 50px; + width: 50px; + filter: invert(1); } + .LP-Message .LP-Message__Text { + padding: 0 15px; } + .LP-Content { padding: 35px; }