1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
|
// Alerts
//
// Located in `wyrm_core/_alert.sass`. Alerts can exist as in page notices and as fixed drops.
//
// Markup:
// <div class="wy-alert {$modifiers}">
// <div class="wy-alert-title">Title goes here</div>
// <p>Alert instructions go here.</p>
// </div>
//
// .wy-alert-neutral - Generic alert, extra instruction.
// .wy-alert-success - Hooray, something good happened.
// .wy-alert-warning - Watch out, you might make a mistake.
// .wy-alert-danger - Yep, you made a mistake.
//
// Styleguide 2
.wy-alert
padding: $base-line-height / 2
line-height: $base-line-height
margin-bottom: $base-line-height
background: lighten($blue, 50%)
+font-smooth
.wy-alert-title
color: $white
font-weight: bold
display: block
color: $white
background: lighten($blue,20%)
margin: -$base-line-height / 2
padding: $base-line-height / 4 $base-line-height / 2
margin-bottom: $base-line-height / 2
.wy-alert.wy-alert-danger
background: lighten($red, 40%)
.wy-alert-title
background: lighten($red,20%)
.wy-alert.wy-alert-warning
background: lighten(orange,40%)
.wy-alert-title
background: lighten($orange,20%)
.wy-alert.wy-alert-info
background: lighten($blue, 50%)
.wy-alert-title
background: lighten($blue,20%)
.wy-alert.wy-alert-success
background: lighten($offgreen, 50%)
.wy-alert-title
background: lighten($offgreen,0%)
.wy-alert.wy-alert-neutral
background: $table-stripe-color
.wy-alert-title
color: $text-color
background: $table-border-color
a
color: $link-color
.wy-alert p:last-child
margin-bottom: 0
// System alerts
//
// These alerts should trigger when a form error or something happens.
// Because these docs are auto-generated know that these alerts
// **will not output** below because they are set to
// display: none by default.
//
// Markup:
// <ul class="wy-tray-container">
// <li class="{$modifiers}">Alert instructions go here.</li>
// </ul>
//
// .wy-tray-item-info - Generic alert, extra instruction.
// .wy-tray-item-success - Hooray, something good happened.
// .wy-tray-item-warning - Watch out, you might make a mistake.
// .wy-tray-item-danger - Yep, you made a mistake.
//
// Styleguide 2.1
.wy-tray-container
position: fixed
bottom: 0px
left: 0
z-index: $z-index-alert
li
display: block
width: $nav-desktop-width
background: transparent
color: $white
text-align: center
box-shadow: 0 5px 5px 0 rgba(0,0,0,.1)
padding: 0 $base-line-height
min-width: 20%
opacity: 0
height: 0
line-height: 56px
overflow: hidden
+transition(all .3s ease-in)
&.wy-tray-item-success
background: $green
&.wy-tray-item-info
background: $blue
&.wy-tray-item-warning
background: $orange
&.wy-tray-item-danger
background: $red
&.on
opacity: 1
height: 56px
+media($tablet)
.wy-tray-container
bottom: auto
top: 0
width: 100%
li
width: 100%
|
