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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
|
// Buttons
//
// Located in `wyrm_core/_button.sass`. You can also add font icons to any
// button as shown in the third example. Wyrm by default uses the FontAwesome
// library, but any icon set can be substituted.
//
// Markup:
// <a href="#" class="btn {$modifiers}"> Link</a>
// <button class="btn {$modifiers}"> Button</button>
// <input type="submit" class="btn {$modifiers}">
// <button class="btn fa fa-check-circle {$modifiers}"> With icon</button>
//
// :hover - Highlight the button when hovered.
// :visited - Visited link
// :disabled - For disabled buttons.
// .btn-disabled - Class version of disabled.
// :active - Press the button down.
// :focus - Focus
// .btn-neutral - Neutral looking button.
// .btn-info - For imformative, or alternate actions.
// .btn-success - For positive actions.
// .btn-danger - Usually used for delete actions.
// .btn-warning - Beware, you might not want to click me.
// .btn-invert - Dark button to contrast the background.
// .btn-link - Unstyled, link looking button. Useful for secondary actions next to another button.
// .btn-small - Smaller button.
//
// Styleguide 1
button
font-size: 100%
margin: 0
vertical-align: baseline
*vertical-align: middle
cursor: pointer
line-height: normal
-webkit-appearance: button
*overflow: visible
button::-moz-focus-inner, input::-moz-focus-inner
border: 0
padding: 0
button[disabled]
cursor: default
.btn
/* Structure
display: inline-block
border-radius: 2px
line-height: normal
white-space: nowrap
text-align: center
cursor: pointer
font-size: 100%
padding: $base-line-height / 4 $base-line-height / 2 ($base-line-height / 4 + 2) $base-line-height / 2
color: $white
border: 1px solid rgba(0,0,0,0.1)
background-color: $button-background-color
text-decoration: none
font-weight: normal
font-family: $base-font-family
box-shadow: 0px 1px 2px -1px rgba(255, 255, 255, .5) inset, 0px -2px 0px 0px rgba(0,0,0,.1) inset
outline-none: false
vertical-align: middle
*display: inline
zoom: 1
-webkit-user-drag: none
+user-select(none)
+font-smooth
+transition(all 0.1s linear)
.btn-hover
background: lighten($link-color, 5%)
color: $white
.btn
&:hover
background: lighten($button-background-color, 5%)
color: $white
&:focus
background: lighten($button-background-color, 5%)
outline: 0
&:active
box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, .05) inset, 0px 2px 0px 0px rgba(0,0,0,.1) inset
padding: ($base-line-height / 4 + 2) $base-line-height / 2 $base-line-height / 4 $base-line-height / 2
&:visited
color: $white
&:disabled
background-image: none
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false)
filter: alpha(opacity = 40)
opacity: 0.4
cursor: not-allowed
box-shadow: none
.btn-disabled
background-image: none
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false)
filter: alpha(opacity = 40)
opacity: 0.4
cursor: not-allowed
box-shadow: none
&:hover, &:focus, &:active
background-image: none
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false)
filter: alpha(opacity = 40)
opacity: 0.40
cursor: not-allowed
box-shadow: none
// Firefox: Get rid of the inner focus border
.btn::-moz-focus-inner
padding: 0
border: 0
.btn-small
font-size: 80%
.btn-info
background-color: $blue !important
&:hover
background-color: lighten($blue, 5%) !important
.btn-neutral
background-color: $button-neutral-background-color !important
color: $text-color !important
&:hover
background-color: darken($button-neutral-background-color, 5%) !important
color: $text-color
&:visited
color: $text-color !important
.btn-success
background-color: $green !important
&:hover
background-color: darken($green, 5%) !important
.btn-danger
background-color: $red !important
&:hover
background-color: lighten($red, 5%) !important
.btn-warning
background-color: $orange !important
&:hover
background-color: lighten($orange, 5%) !important
.btn-invert
background-color: $gray-darker
&:hover
background-color: lighten($gray-darker, 5%) !important
.btn-link
background-color: transparent !important
color: $link-color
box-shadow: none
border-color: transparent !important
&:hover
background-color: transparent !important
color: lighten($link-color, 10%) !important
box-shadow: none
&:active
background-color: transparent !important
color: lighten($link-color, 10%) !important
box-shadow: none
&:visited
color: $link-color-visited
.wy-btn-group .btn, .wy-control .btn
vertical-align: middle
.wy-btn-group
margin-bottom: $base-line-height
+clearfix
|
