updated hooks error and flash message styles

This commit is contained in:
Lisa P 2016-03-09 16:18:11 +01:00 committed by lislis
parent 5a4f6e7c21
commit 67b15de301
6 changed files with 52 additions and 27 deletions

View File

@ -185,16 +185,15 @@ p.profile-user-last
+linkStyle +linkStyle
.hooks-error .hooks-error
width: 100%; width: 100%
padding: 0 $column-gutter/2; margin-top: 1.3rem
margin-top: 3.3rem;
p p
position: relative position: relative
padding: $column-gutter/2 $column-gutter*2 $column-gutter/2 $column-gutter/2; padding: .7em 1.5em .7em 0.5em
color: #de4248 color: $brick-red
background-color: #f1b6ad background-color: $quartz-red
a a
color: #de4248 color: $brick-red
text-decoration: underline text-decoration: underline
&:after &:after
content: "" content: ""
@ -203,14 +202,14 @@ p.profile-user-last
left: 1.5em left: 1.5em
width: 1.2em width: 1.2em
height: 1.2em height: 1.2em
background: #f1b6ad background: $quartz-red
transform: rotate(45deg) transform: rotate(45deg)
.close .close
@extend .icon @extend .icon
@extend %icon-line-cross-red
position: absolute position: absolute
top: 1em top: 1em
right: 1em right: 1em
@extend .icon--dismiss-red
.profile-token-toggle .profile-token-toggle
.icon-eye .icon-eye

View File

@ -1,6 +1,5 @@
.flash .flash
@include resetul @include resetul
font-size: 18px
text-align: center text-align: center
height: 0 height: 0
li li
@ -12,8 +11,6 @@
height: 0 height: 0
animation: comeIn 7s 1 ease animation: comeIn 7s 1 ease
z-index: 90 z-index: 90
li.broadcast
height: auto
.close .close
@extend .icon @extend .icon
@ -27,21 +24,18 @@
padding: .4em 0 padding: .4em 0
margin: 0 margin: 0
li.broadcast p
padding: .7em 5em
.success, .success,
.notice .notice
color: $turf-green color: $turf-green
background-color: $seed-green background-color: $seed-green
.close .close
@extend .icon--dismiss-green @extend .icon-line-cross-green
.error .error
color: $brick-red color: $brick-red
background-color: $quartz-red background-color: $quartz-red
.close .close
@extend .icon--dismiss-red @extend .icon-line-cross-red
@keyframes comeIn @keyframes comeIn
0% 0%

View File

@ -29,16 +29,6 @@
.icon--search .icon--search
background-image: inline-image('stroke-icons/icon-search.svg') background-image: inline-image('stroke-icons/icon-search.svg')
.icon--dismiss-yellow
background-image: inline-image('ui/icon-warning-dismiss.svg')
.icon--dismiss-green
background-image: inline-image('ui/icon-success-dismiss.svg')
.icon--dismiss-red
background-image: inline-image('ui/icon-error-dismiss.svg')
.icon--dismiss-grey
background-image: inline-image('ui/dismiss.svg')
%icon-line-trashcan %icon-line-trashcan
background-image: inline-image('stroke-icons/icon-trash.svg') background-image: inline-image('stroke-icons/icon-trash.svg')
%icon-line-trashcan-red %icon-line-trashcan-red
@ -178,6 +168,12 @@
background-image: inline-image('stroke-icons/icon-failed-white.svg') background-image: inline-image('stroke-icons/icon-failed-white.svg')
%icon-line-cross-teal %icon-line-cross-teal
background-image: inline-image('stroke-icons/icon-failed-teal.svg') background-image: inline-image('stroke-icons/icon-failed-teal.svg')
%icon-line-cross-red
background-image: inline-image('stroke-icons/icon-failed-red.svg')
%icon-line-cross-green
background-image: inline-image('stroke-icons/icon-failed-green.svg')
%icon-line-cross-yellow
background-image: inline-image('stroke-icons/icon-failed-yellow.svg')
.icon-deactivate .icon-deactivate
@extend .icon @extend .icon

View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="icon-failed" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 15 15" style="enable-background:new 0 0 15 15;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#39aa56;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<g id="failed">
<line class="st0" x1="0.5" y1="0.5" x2="14.5" y2="14.5"/>
<line class="st0" x1="14.5" y1="0.5" x2="0.5" y2="14.5"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 625 B

View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="icon-failed" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 15 15" style="enable-background:new 0 0 15 15;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#db4545;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<g id="failed">
<line class="st0" x1="0.5" y1="0.5" x2="14.5" y2="14.5"/>
<line class="st0" x1="14.5" y1="0.5" x2="0.5" y2="14.5"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 625 B

View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="icon-failed" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 15 15" style="enable-background:new 0 0 15 15;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:cdb62c;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<g id="failed">
<line class="st0" x1="0.5" y1="0.5" x2="14.5" y2="14.5"/>
<line class="st0" x1="14.5" y1="0.5" x2="0.5" y2="14.5"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 624 B