add new flash message styles
This commit is contained in:
Lisa Passing
parent
63dff660ea
commit
59ac99778c
|
|
@ -10,7 +10,7 @@
|
|||
@import "app/auth";
|
||||
@import "app/caches";
|
||||
@import "app/charm";
|
||||
@import "app/flash";
|
||||
// @import "app/flash";
|
||||
@import "app/forms";
|
||||
@import "app/getting_started";
|
||||
@import "app/github";
|
||||
|
|
@ -49,6 +49,7 @@
|
|||
@import "app/modules/dropdown";
|
||||
@import "app/modules/tabs";
|
||||
@import "app/modules/tooltips";
|
||||
@import "app/modules/flash";
|
||||
|
||||
@import "app/layout";
|
||||
@import "app/layouts/dashboard";
|
||||
|
|
|
|||
|
|
@ -96,56 +96,56 @@
|
|||
a
|
||||
margin-left: 5px
|
||||
|
||||
@media screen and (max-width: 1400px)
|
||||
#left .duration_label
|
||||
display: inline-block
|
||||
width: 11px
|
||||
height: 11px
|
||||
margin-right: 1px
|
||||
text-indent: 10px
|
||||
overflow: hidden
|
||||
background: inline-image('ui/clock.svg') no-repeat 0px 0px
|
||||
background-size: contain
|
||||
// @media screen and (max-width: 1400px)
|
||||
// #left .duration_label
|
||||
// display: inline-block
|
||||
// width: 11px
|
||||
// height: 11px
|
||||
// margin-right: 1px
|
||||
// text-indent: 10px
|
||||
// overflow: hidden
|
||||
// background: inline-image('ui/clock.svg') no-repeat 0px 0px
|
||||
// background-size: contain
|
||||
|
||||
@media screen and (max-width: 1400px)
|
||||
#left .finished_at_label
|
||||
display: none
|
||||
// @media screen and (max-width: 1400px)
|
||||
// #left .finished_at_label
|
||||
// display: none
|
||||
|
||||
@media screen and (max-width: 1400px)
|
||||
table#builds .committer
|
||||
display: none
|
||||
// @media screen and (max-width: 1400px)
|
||||
// table#builds .committer
|
||||
// display: none
|
||||
|
||||
@media handheld, only screen and (max-device-width: 980px)
|
||||
#left
|
||||
display: none
|
||||
#main
|
||||
min-width: 99%
|
||||
max-width: 99%
|
||||
padding: 0px
|
||||
// @media handheld, only screen and (max-device-width: 980px)
|
||||
// #left
|
||||
// display: none
|
||||
// #main
|
||||
// min-width: 99%
|
||||
// max-width: 99%
|
||||
// padding: 0px
|
||||
|
||||
.tabs
|
||||
margin-top: 5px
|
||||
// .tabs
|
||||
// margin-top: 5px
|
||||
|
||||
p.description
|
||||
margin: 5px 0px
|
||||
// p.description
|
||||
// margin: 5px 0px
|
||||
|
||||
#repo
|
||||
padding: 15px 10px
|
||||
width: 95%
|
||||
// #repo
|
||||
// padding: 15px 10px
|
||||
// width: 95%
|
||||
|
||||
#top
|
||||
width: 100%
|
||||
min-width: 960px
|
||||
#tools
|
||||
display: none
|
||||
// #top
|
||||
// width: 100%
|
||||
// min-width: 960px
|
||||
// #tools
|
||||
// display: none
|
||||
|
||||
a
|
||||
text-decoration : none
|
||||
// a
|
||||
// text-decoration : none
|
||||
|
||||
.application,
|
||||
.dashboard
|
||||
height: 100%
|
||||
// .application,
|
||||
// .dashboard
|
||||
// height: 100%
|
||||
|
||||
|
||||
.no-padding
|
||||
padding : 0
|
||||
// .no-padding
|
||||
// padding : 0
|
||||
|
|
|
|||
52
app/styles/app/modules/flash.sass
Normal file
52
app/styles/app/modules/flash.sass
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
.flash
|
||||
@include resetul
|
||||
font-size: 18px
|
||||
text-align: center
|
||||
li
|
||||
opacity: 0
|
||||
position: relative
|
||||
max-height: 3.5rem
|
||||
height: 0
|
||||
animation: comeIn 7s 1 ease
|
||||
|
||||
.close
|
||||
@extend .icon
|
||||
position: absolute
|
||||
top: 1em
|
||||
right: 1em
|
||||
width: 1.1rem
|
||||
height: 1.1rem
|
||||
|
||||
p
|
||||
padding: .7em 0
|
||||
margin: 0
|
||||
|
||||
.success,
|
||||
.notice
|
||||
color: #3ba85b
|
||||
background-color: #deebdd
|
||||
.close
|
||||
@extend .icon--dismiss-green
|
||||
|
||||
.error
|
||||
color: #de4248
|
||||
background-color: #f1b6ad
|
||||
.close
|
||||
@extend .icon--dismiss-red
|
||||
|
||||
@keyframes comeIn
|
||||
0%
|
||||
opacity: 1
|
||||
height: 0
|
||||
top: -10em
|
||||
5%
|
||||
height: 3.5rem
|
||||
top: 0
|
||||
95%
|
||||
height: 3.5rem
|
||||
opacity: 1
|
||||
99%
|
||||
height: 3.5em
|
||||
100%
|
||||
height: 0
|
||||
opacity: 0
|
||||
|
|
@ -135,6 +135,12 @@
|
|||
.icon--search
|
||||
background-image: inline-image('svg/search.svg')
|
||||
|
||||
.icon--dismiss-green
|
||||
background-image: inline-image('svg/icon-success-dismiss.svg')
|
||||
.icon--dismiss-red
|
||||
background-image: inline-image('svg/icon-error-dismiss.svg')
|
||||
|
||||
|
||||
.icon--plus
|
||||
&:after
|
||||
content: "+"
|
||||
|
|
|
|||
|
|
@ -5,4 +5,4 @@
|
|||
background-color: $white
|
||||
|
||||
.section--maxheight
|
||||
height: 3.3em
|
||||
height: 3.3em
|
||||
|
|
|
|||
|
|
@ -4,9 +4,10 @@
|
|||
{{render "top"}}
|
||||
</header>
|
||||
|
||||
{{render "flash"}}
|
||||
|
||||
<div class="wrapper-main">
|
||||
<div id="main" role="main">
|
||||
{{render "flash"}}
|
||||
{{yield}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,9 +3,10 @@
|
|||
{{render "top"}}
|
||||
</header>
|
||||
|
||||
{{render "flash"}}
|
||||
|
||||
<div class="wrapper-main">
|
||||
<div id="main" role="main">
|
||||
{{render "flash"}}
|
||||
{{yield}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,8 @@
|
|||
{{render "top"}}
|
||||
</div>
|
||||
|
||||
{{render "flash"}}
|
||||
|
||||
<div id="main">
|
||||
{{render "flash"}}
|
||||
{{yield}}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
View = BasicView.extend
|
||||
classNames: ['flash']
|
||||
tagname: 'ul'
|
||||
tagName: 'ul'
|
||||
templateName: 'layouts/flash'
|
||||
|
||||
`export default View`
|
||||
|
|
|
|||
8
public/images/svg/icon-error-dismiss.svg
Normal file
8
public/images/svg/icon-error-dismiss.svg
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="14px" height="14px" viewBox="0 0 14 14" enable-background="new 0 0 14 14" xml:space="preserve">
|
||||
<polygon fill="#E16C5E" points="10.914,0 6.998,3.913 3.088,0 0,3.085 3.912,7 0,10.915 3.092,14 6.998,10.088 10.914,14 14,10.915
|
||||
10.092,7 14,3.085 "/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 631 B |
8
public/images/svg/icon-success-dismiss.svg
Normal file
8
public/images/svg/icon-success-dismiss.svg
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="14px" height="14px" viewBox="0 0 14 14" enable-background="new 0 0 14 14" xml:space="preserve">
|
||||
<polygon fill="#6CB578" points="10.914,0 6.998,3.913 3.088,0 0,3.085 3.912,7 0,10.915 3.092,14 6.998,10.088 10.914,14 14,10.915
|
||||
10.092,7 14,3.085 "/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 631 B |
Loading…
Reference in New Issue
Block a user