← Back to branch summary

~stephen-stewart/ulysses/flat-buttons

« back to all changes in this revision

Viewing changes to public/buttons.css

  • Committer: Tarmac
  • Author(s): Stephen Stewart
  • Date: 2014-09-25 09:26:43 UTC
  • mfrom: (43.1.14 gulpify-and-update)
  • Revision ID: tarmac-20140925092643-jzluuaboybxm4q73
[r=james-w] update to version 1.0.0

* update grids to pure 0.5
* default to border-box
* default to minified css
* switch to gulp
* remove bower dep
* svg symbols

Show diffs side-by-side

added added

removed removed

Lines of Context:
public/buttons.css
1
 
.ues-button {
2
 
  background-color: #dedede;
3
 
  background-image: -o-linear-gradient(to bottom, #f7f7f7 0%, #e6e6e6 100%);
4
 
  background-image: -ms-linear-gradient(to bottom, #f7f7f7 0%, #e6e6e6 100%);
5
 
  background-image: -moz-linear-gradient(to bottom, #f7f7f7 0%, #e6e6e6 100%);
6
 
  background-image: -webkit-linear-gradient(to bottom, #f7f7f7 0%, #e6e6e6 100%);
7
 
  background-image: linear-gradient(to bottom, #f7f7f7 0%, #e6e6e6 100%);
8
 
  display: inline-block;
9
 
  font-weight: 300;
10
 
  font-size: 13px;
11
 
  line-height: 20px;
12
 
  padding: 5px 19px;
13
 
  text-align: center;
14
 
  vertical-align: baseline;
15
 
  text-transform: uppercase;
16
 
  border: 1px solid #ccc;
17
 
  -o-border-radius: 3px;
18
 
  -ms-border-radius: 3px;
19
 
  -moz-border-radius: 3px;
20
 
  -webkit-border-radius: 3px;
21
 
  border-radius: 3px;
22
 
}
23
 
 
24
 
.ues-button:hover {
25
 
  background-color: #e6e6e6;
26
 
  background-image: -o-linear-gradient(to bottom, #fff 0%, #e6e6e6 100%);
27
 
  background-image: -ms-linear-gradient(to bottom, #fff 0%, #e6e6e6 100%);
28
 
  background-image: -moz-linear-gradient(to bottom, #fff 0%, #e6e6e6 100%);
29
 
  background-image: -webkit-linear-gradient(to bottom, #fff 0%, #e6e6e6 100%);
30
 
  background-image: linear-gradient(to bottom, #fff 0%, #e6e6e6 100%);
31
 
}
32
 
 
33
 
.ues-button:focus {
34
 
  -o-box-shadow: #f7f6f5 0 0 0 1px;
35
 
  -ms-box-shadow: #f7f6f5 0 0 0 1px;
36
 
  -moz-box-shadow: #f7f6f5 0 0 0 1px;
37
 
  -webkit-box-shadow: #f7f6f5 0 0 0 1px;
38
 
  box-shadow: #f7f6f5 0 0 0 1px;
39
 
}
40
 
 
41
 
.ues-button:focus,
42
 
.ues-button:active {
43
 
  background-color: #e6e6e6;
44
 
  background-image: -o-linear-gradient(to bottom, #e6e6e6 0%, #cdcdcd 90%, #fff 100%);
45
 
  background-image: -ms-linear-gradient(to bottom, #e6e6e6 0%, #cdcdcd 90%, #fff 100%);
46
 
  background-image: -moz-linear-gradient(to bottom, #e6e6e6 0%, #cdcdcd 90%, #fff 100%);
47
 
  background-image: -webkit-linear-gradient(to bottom, #e6e6e6 0%, #cdcdcd 90%, #fff 100%);
48
 
  background-image: linear-gradient(to bottom, #e6e6e6 0%, #cdcdcd 90%, #fff 100%);
49
 
}
50
 
 
51
 
.ues-button-primary {
52
 
  background-color: #dd4814;
53
 
  background-image: -o-linear-gradient(to bottom, #f39455 0%, #ef5e1f 5%, #dd4814 100%);
54
 
  background-image: -ms-linear-gradient(to bottom, #f39455 0%, #ef5e1f 5%, #dd4814 100%);
55
 
  background-image: -moz-linear-gradient(to bottom, #f39455 0%, #ef5e1f 5%, #dd4814 100%);
56
 
  background-image: -webkit-linear-gradient(to bottom, #f39455 0%, #ef5e1f 5%, #dd4814 100%);
57
 
  background-image: linear-gradient(to bottom, #f39455 0%, #ef5e1f 5%, #dd4814 100%);
58
 
  color: #fff;
59
 
  border-color: #ad2e03;
60
 
}
61
 
 
62
 
.ues-button-primary:hover {
63
 
  background-color: #f28a45;
64
 
  background-image: -o-linear-gradient(to bottom, #f39455 0%, #f28a45 5%, #dd4814 100%);
65
 
  background-image: -ms-linear-gradient(to bottom, #f39455 0%, #f28a45 5%, #dd4814 100%);
66
 
  background-image: -moz-linear-gradient(to bottom, #f39455 0%, #f28a45 5%, #dd4814 100%);
67
 
  background-image: -webkit-linear-gradient(to bottom, #f39455 0%, #f28a45 5%, #dd4814 100%);
68
 
  background-image: linear-gradient(to bottom, #f39455 0%, #f28a45 5%, #dd4814 100%);
69
 
}
70
 
 
71
 
.ues-button-primary:focus,
72
 
.ues-button-primary:active {
73
 
  background-color: #dd4814;
74
 
  background-image: -o-linear-gradient(to bottom, #dd4814 0%, #bf3b0d 5%, #f39455 100%);
75
 
  background-image: -ms-linear-gradient(to bottom, #dd4814 0%, #bf3b0d 5%, #f39455 100%);
76
 
  background-image: -moz-linear-gradient(to bottom, #dd4814 0%, #bf3b0d 5%, #f39455 100%);
77
 
  background-image: -webkit-linear-gradient(to bottom, #dd4814 0%, #bf3b0d 5%, #f39455 100%);
78
 
  background-image: linear-gradient(to bottom, #dd4814 0%, #bf3b0d 5%, #f39455 100%);
79
 
  border-color: #333;
80
 
}
81
 
 
82
 
.ues-button-tertiary {
83
 
  background-color: white;
84
 
  background-image: none;
85
 
  border: 1px solid #c8c8c8;
86
 
}
87
 
 
88
 
.ues-button-tertiary:hover {
89
 
  background-color: #e6e6e6;
90
 
  background-image: none;
91
 
  border-color: #cdcdcd;
92
 
}
93
 
 
94
 
.ues-button-tertiary:focus,
95
 
.ues-button-tertiary:active {
96
 
  background-color: #e6e6e6;
97
 
  background-image: none;
98
 
  border-color: #dd4814;
99
 
}
100
 
 
101
 
.ues-button-search {
102
 
  background-color: transparent;
103
 
  background-image: none;
104
 
  border: none;
105
 
  border-left: 1px solid #eee;
106
 
}
107
 
 
108
 
.ues-button-search:hover {
109
 
  background-color: #f0f0f0;
110
 
  border-color: #dedede;
111
 
}
112
 
 
113
 
.ues-button-search:focus,
114
 
.ues-button-search:active {
115
 
  border-color: #c8c8c8;
116
 
  background-color: #dedede;
117
 
}
118
 
 
119
 
a.ues-button {
120
 
  color: inherit;
121
 
}
122
 
 
123
 
.ues-button-small {
124
 
  font-size: 11px;
125
 
  padding: 0 5px;
126
 
  font-weight: 400;
127
 
  -o-border-radius: 3px;
128
 
  -ms-border-radius: 3px;
129
 
  -moz-border-radius: 3px;
130
 
  -webkit-border-radius: 3px;
131
 
  border-radius: 3px;
132
 
}
133
 
 
134
 
.ues-button-large {
135
 
  font-size: 16px;
136
 
  padding: 14px 38px;
137
 
  -o-border-radius: 7px;
138
 
  -ms-border-radius: 7px;
139
 
  -moz-border-radius: 7px;
140
 
  -webkit-border-radius: 7px;
141
 
  border-radius: 7px;
142
 
}
143
 
 
144
 
.ues-button-block {
145
 
  margin: 0.5em 0;
146
 
  display: block;
147
 
  width: 100%;
148
 
}
149
 
 
150
 
/** a non text button needs less padding */
151
 
 
152
 
.ues-button-icon {
153
 
  padding-left: 7px;
154
 
  padding-right: 7px;
155
 
}
156
 
 
157
 
.ues-button-group {
158
 
  position: relative;
159
 
  display: inline-block;
160
 
  vertical-align: middle;
161
 
}
162
 
 
163
 
.ues-button-group:before,
164
 
.ues-button-group:after {
165
 
  content: ' ';
166
 
  display: table;
167
 
}
168
 
 
169
 
.ues-button-group:after {
170
 
  clear: both;
171
 
}
172
 
 
173
 
.ues-button-group .ues-button,
174
 
.ues-button-group input[type="search"] {
175
 
  float: left;
176
 
}
177
 
 
178
 
/** first child of >1 buttons **/
179
 
 
180
 
.ues-button-group > input[type="search"]:first-child:not(:last-child):not(.ues-dropdown-toggle),
181
 
.ues-button-group > .ues-button:first-child:not(:last-child):not(.ues-dropdown-toggle) {
182
 
  border-top-right-radius: 0px;
183
 
  border-bottom-right-radius: 0px;
184
 
  border-right: none;
185
 
}
186
 
 
187
 
/** last child of >1 buttons **/
188
 
 
189
 
.ues-button-group > input[type="search"]:last-child:not(:first-child),
190
 
.ues-button-group > .ues-button:last-child:not(:first-child),
191
 
.ues-button-group > .ues-dropdown-toggle:not(:first-child) {
192
 
  border-top-left-radius: 0px;
193
 
  border-bottom-left-radius: 0px;
194
 
}
195
 
 
196
 
/** any button surrounded by other buttons **/
197
 
 
198
 
.ues-button-group > .ues-button:not(:first-child):not(:last-child):not(.ues-dropdown-toggle) {
199
 
  border-right: none;
200
 
  -o-border-radius: 0px;
201
 
  -ms-border-radius: 0px;
202
 
  -moz-border-radius: 0px;
203
 
  -webkit-border-radius: 0px;
204
 
  border-radius: 0px;
205
 
}
 
 
b'\\ No newline at end of file'
 
1
.ues-button{background-color:#dedede;background-image:-webkit-linear-gradient(top,#f7f7f7 0%,#e6e6e6 100%);background-image:linear-gradient(to bottom,#f7f7f7 0%,#e6e6e6 100%);border-radius:3px;display:inline-block;font-weight:300;font-size:13px;line-height:20px;padding:5px 19px;text-align:center;vertical-align:baseline;text-transform:uppercase;border:1px solid #ccc}.ues-button:hover{background-color:#e6e6e6;background-image:-webkit-linear-gradient(top,#fff 0%,#e6e6e6 100%);background-image:linear-gradient(to bottom,#fff 0%,#e6e6e6 100%)}.ues-button:focus{box-shadow:#f7f6f5 0 0 0 1px}.ues-button:focus,.ues-button:active{background-color:#e6e6e6;background-image:-webkit-linear-gradient(top,#e6e6e6 0%,#cdcdcd 90%,#fff 100%);background-image:linear-gradient(to bottom,#e6e6e6 0%,#cdcdcd 90%,#fff 100%)}.ues-button-primary{background-color:#dd4814;background-image:-webkit-linear-gradient(top,#f39455 0%,#ef5e1f 5%,#dd4814 100%);background-image:linear-gradient(to bottom,#f39455 0%,#ef5e1f 5%,#dd4814 100%);color:#fff;border-color:#ad2e03}.ues-button-primary:hover{background-color:#f28a45;background-image:-webkit-linear-gradient(top,#f39455 0%,#f28a45 5%,#dd4814 100%);background-image:linear-gradient(to bottom,#f39455 0%,#f28a45 5%,#dd4814 100%)}.ues-button-primary:focus,.ues-button-primary:active{background-color:#dd4814;background-image:-webkit-linear-gradient(top,#dd4814 0%,#bf3b0d 5%,#f39455 100%);background-image:linear-gradient(to bottom,#dd4814 0%,#bf3b0d 5%,#f39455 100%);border-color:#333}.ues-button-tertiary{background-color:#fff;background-image:none;border:1px solid #c8c8c8}.ues-button-tertiary:hover{background-color:#e6e6e6;background-image:none;border-color:#cdcdcd}.ues-button-tertiary:focus,.ues-button-tertiary:active{background-color:#e6e6e6;background-image:none;border-color:#dd4814}.ues-button-search{background-color:transparent;background-image:none;border:none;border-left:1px solid #eee}.ues-button-search:hover{background-color:#f0f0f0;border-color:#dedede}.ues-button-search:focus,.ues-button-search:active{border-color:#c8c8c8;background-color:#dedede}a.ues-button{color:inherit}.ues-button-small{border-radius:3px;font-size:11px;padding:0 5px;font-weight:400}.ues-button-large{font-size:16px;padding:14px 38px;border-radius:7px}.ues-button-block{margin:.5em 0;display:block;width:100%}.ues-button-icon{padding-left:7px;padding-right:7px}.ues-button-group{position:relative;display:inline-block;vertical-align:middle}.ues-button-group:before,.ues-button-group:after{content:' ';display:table}.ues-button-group:after{clear:both}.ues-button-group .ues-button,.ues-button-group input[type="search"]{float:left}.ues-button-group>input[type="search"]:first-child:not(:last-child):not(.ues-dropdown-toggle),.ues-button-group>.ues-button:first-child:not(:last-child):not(.ues-dropdown-toggle){border-top-right-radius:0;border-bottom-right-radius:0;border-right:none}.ues-button-group>input[type="search"]:last-child:not(:first-child),.ues-button-group>.ues-button:last-child:not(:first-child),.ues-button-group>.ues-dropdown-toggle:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.ues-button-group>.ues-button:not(:first-child):not(:last-child):not(.ues-dropdown-toggle){border-radius:0;border-right:none}
 
 
b'\\ No newline at end of file'