Bläddra i källkod

Integration of flash message

AlexiCauvin 7 år sedan
förälder
incheckning
e5760fd358
3 ändrade filer med 80 tillägg och 0 borttagningar
  1. 38 0
      src/container/FlashMessage.jsx
  2. 41 0
      src/css/FlashMessage.styl
  3. 1 0
      src/css/index.styl

+ 38 - 0
src/container/FlashMessage.jsx Visa fil

@@ -0,0 +1,38 @@
1
+import React, { Component } from 'react'
2
+
3
+class FlashMessage extends Component {
4
+  render() {
5
+    return(
6
+      <div className='flashmessage'>
7
+        <div className='flashmessage__wrapper card'>
8
+          <div className='flashmessage__header' />
9
+
10
+          <div className='card-body nopadding'>
11
+
12
+            <div className='flashmessage__close'>
13
+              <i className='fa fa-times' />
14
+            </div>
15
+
16
+            <div className='flashmessage__content'>
17
+              <div className='flashmessage__content__icon'>
18
+                <i className='fa fa-times-circle' />
19
+              </div>
20
+
21
+              <div className='flashmessage__content__text'>
22
+                <div className='flashmessage__content__text__title'>
23
+                  Sorry !
24
+                </div>
25
+                <div className='flashmessage__content__text__paragraph'>
26
+                  Reprehenderit reprehenderit veniam dolore velit dolor velit in occaecat dolor veniam nisi officia velit consequat amet cupidatat.
27
+                  Reprehenderit reprehenderit veniam dolore velit dolor velit in occaecat dolor veniam nisi officia velit consequat amet cupidatat.
28
+                </div>
29
+              </div>
30
+            </div>
31
+          </div>
32
+        </div>
33
+      </div>
34
+    )
35
+  }
36
+}
37
+
38
+export default FlashMessage

+ 41 - 0
src/css/FlashMessage.styl Visa fil

@@ -0,0 +1,41 @@
1
+.flashmessage
2
+  position fixed
3
+  display flex
4
+  justify-content center
5
+  width 100%
6
+  z-index 3
7
+  &__wrapper
8
+    margin-top 120px
9
+    border 0
10
+    border-radius 10px
11
+    width 800px
12
+    background lightGrey
13
+    box-shadow shadow-all
14
+  &__header
15
+    border-top-right-radius 10px
16
+    border-top-left-radius 10px
17
+    width 100%
18
+    height 8px
19
+    background-color calendar
20
+  &__close
21
+    display flex
22
+    justify-content flex-end
23
+    margin 5px
24
+    cursor pointer
25
+  &__content
26
+    display flex
27
+    align-items center
28
+    margin 10px 0 35px 0
29
+    &__icon
30
+      padding 0 30px
31
+      font-size 60px
32
+      color calendar
33
+    &__text
34
+      &__title
35
+        margin-bottom 10px
36
+        font-size 20px
37
+        font-weight 600
38
+        color calendar
39
+      &__paragraph
40
+        padding-right 20px
41
+        font-weight 500

+ 1 - 0
src/css/index.styl Visa fil

@@ -28,3 +28,4 @@ html, body, #content, #content > div
28 28
 @import 'UploadPopup'
29 29
 @import 'ProgressBar'
30 30
 
31
+@import 'FlashMessage'