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 @@ +