Browse Source

fix css bug on flash message close icon

AlexiCauvin 6 years ago
parent
commit
95c34bdaea
2 changed files with 7 additions and 3 deletions
  1. 4 2
      src/component/FlashMessage.jsx
  2. 3 1
      src/css/FlashMessage.styl

+ 4 - 2
src/component/FlashMessage.jsx View File

9
           <div className={classnames('flashmessage__container__header', props.flashMessage[0].type)} />
9
           <div className={classnames('flashmessage__container__header', props.flashMessage[0].type)} />
10
 
10
 
11
           <div className='card-body nopadding'>
11
           <div className='card-body nopadding'>
12
-            <div className='flashmessage__container__close' onClick={() => props.removeFlashMessage(props.flashMessage[0].message)}>
13
-              <i className='fa fa-times' />
12
+            <div className='flashmessage__container__close'>
13
+              <div className='flashmessage__container__close__icon' onClick={() => props.removeFlashMessage(props.flashMessage[0].message)}>
14
+                <i className='fa fa-times' />
15
+              </div>
14
             </div>
16
             </div>
15
 
17
 
16
             <div className='flashmessage__container__content'>
18
             <div className='flashmessage__container__content'>

+ 3 - 1
src/css/FlashMessage.styl View File

26
       display flex
26
       display flex
27
       justify-content flex-end
27
       justify-content flex-end
28
       margin 5px
28
       margin 5px
29
-      cursor pointer
29
+      &__icon
30
+        padding-right 10px
31
+        cursor pointer
30
     &__content
32
     &__content
31
       display flex
33
       display flex
32
       align-items center
34
       align-items center