verne 0.1.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA1:
3
+ metadata.gz: 462cd882eeb9d82b72ecc1342a05931e7d691d77
4
+ data.tar.gz: d28a32731742e28fbe0a93d26d68783df0938fff
5
+ SHA512:
6
+ metadata.gz: 138dbc651285368342646d4abbadf9c94a71969b3b6cacc76df9ae93c0f87866458c990535203a28e9368330ce533327d7a2550384919f027e9b88bb58c88fa5
7
+ data.tar.gz: f4c1dd775ca2620022a7bbd6b2d1f6ae93a8c1cde3ed639deb7fcf46b58c5238cefbd64a5ff8c963a93fb6e2f26ece3c883a0f5bae46abe65dcc2be0ca5eb9b9
@@ -0,0 +1,2 @@
1
+ demo/*
2
+ *.gem
data/LICENSE ADDED
@@ -0,0 +1,23 @@
1
+ LICENSE
2
+
3
+ The MIT License
4
+
5
+ Copyright (c) 2014 Monospace, Ltd.
6
+
7
+ Permission is hereby granted, free of charge, to any person obtaining a copy
8
+ of this software and associated documentation files (the "Software"), to deal
9
+ in the Software without restriction, including without limitation the rights
10
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
11
+ copies of the Software, and to permit persons to whom the Software is
12
+ furnished to do so, subject to the following conditions:
13
+
14
+ The above copyright notice and this permission notice shall be included in
15
+ all copies or substantial portions of the Software.
16
+
17
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
18
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
19
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
20
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
21
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
22
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
23
+ THE SOFTWARE.
@@ -0,0 +1,4 @@
1
+ # Verne
2
+ A set of simple and semantic UI elements.
3
+ ### License
4
+ Verne is Copyright © 2014 Monospace, Ltd. It is free software, and may be redistributed under the terms specified in the LICENSE file.
@@ -0,0 +1,23 @@
1
+ $.rails.hideDropdowns = ->
2
+ count = $("ul.dropdown-menu.open").length
3
+ $("ul.dropdown-menu").fadeOut(150).removeClass("open")
4
+ !count
5
+
6
+ $ ->
7
+ $(document).mouseup (e) ->
8
+ container = $("dropdown-menu")
9
+ if (container.has(e.target).length == 0)
10
+ $.rails.hideDropdowns()
11
+
12
+ $(window).resize -> $.rails.hideDropdowns()
13
+
14
+ $("[data-toggle=dropdown]").click ->
15
+ if $(this).siblings("ul.dropdown-menu").hasClass("open")
16
+ $.rails.hideDropdowns()
17
+ else
18
+ $.rails.hideDropdowns()
19
+ dropdown = $(this).siblings("ul.dropdown-menu")
20
+ dropdown.fadeIn(150).addClass("open")
21
+ offset = ($(this).outerWidth(false) - $(dropdown).outerWidth(false)) / 2
22
+ dropdown.css { 'margin-left' : offset + "px"}
23
+ false
@@ -0,0 +1,18 @@
1
+ $ ->
2
+ $("input[type=checkbox]").each ->
3
+ $(this).click (event) ->
4
+ $(this).parent().toggleClass("checked")
5
+
6
+ $("input[type=file]").each ->
7
+ cancel = $("<div>", { class: "input-wrapper", text: "Remove File" })
8
+ file = $(this)
9
+ cancel.click (event) ->
10
+ file.val("")
11
+ file.parent().toggleClass("hidden")
12
+ cancel.remove()
13
+ file.parent().prepend("Upload File")
14
+ file.change (event) ->
15
+ if file.val() != ""
16
+ file.parent().toggleClass("hidden")
17
+ cancel.insertAfter(file.parent())
18
+
@@ -0,0 +1,32 @@
1
+ configureCheckbox = (checkbox) ->
2
+ if checkbox.is(':checked')
3
+ checkbox.parent().addClass("selected")
4
+ else
5
+ checkbox.parent().removeClass("selected")
6
+
7
+ $ ->
8
+ # Make rows of tables selectable
9
+ $("tr[data-target]").click(->
10
+ Turbolinks.visit $(this).attr("data-target")
11
+ ).find("a").hover (->
12
+ $(this).parents("tr").unbind "click"
13
+ ), ->
14
+ $(this).parents("tr").click ->
15
+ Turbolinks.visit $(this).attr("data-target")
16
+
17
+ # Add selection states to radio buttons
18
+ $("input[type=radio]").each ->
19
+ if $(this).is(':checked')
20
+ $(this).parent().addClass("selected")
21
+ $("input[type=radio]").change ->
22
+ selected = $(this)
23
+ $('input[type=radio][name="' + selected.attr('name') + '"]').each ->
24
+ if $(this).attr('id') != selected.attr('id')
25
+ $(this).parent().removeClass("selected")
26
+ selected.parent().addClass("selected")
27
+
28
+ # Add selection states to check boxes
29
+ $('input[type=checkbox]').each ->
30
+ configureCheckbox $(this)
31
+ $('input[type=checkbox]').change ->
32
+ configureCheckbox $(this)
@@ -0,0 +1,55 @@
1
+ $ ->
2
+ $(document).on "click", "a[data-toggle=modal]", ->
3
+ target = $($(this).attr("data-target"))
4
+ $.rails.toggleModal(target)
5
+
6
+ $.rails.toggleModal = (target) ->
7
+ target.toggleClass("active")
8
+ if target.hasClass("active")
9
+ overlay = $("<div class=\"overlay\"></div>")
10
+ target.appendTo(overlay)
11
+ $("body").append(overlay)
12
+ else
13
+ target.parent().remove()
14
+ $("body").append(target)
15
+
16
+ $.rails.allowAction = (link) ->
17
+ return true unless link.attr('data-confirm')
18
+ $.rails.hideDropdowns()
19
+ $.rails.showConfirmDialog(link)
20
+ false # Always stops the action since code runs asynchronously
21
+
22
+ $.rails.confirmed = (link, should_continue) ->
23
+
24
+ $('.overlay').fadeOut 300, ->
25
+ $(this).remove()
26
+
27
+ if should_continue
28
+ link.removeAttr('data-confirm')
29
+ link.trigger('click.rails')
30
+
31
+ $.rails.showConfirmDialog = (link) ->
32
+ message = link.attr 'data-confirm'
33
+ header = "Notice"
34
+ html = """
35
+ <div class="overlay">
36
+ <div class="modal-wrapper">
37
+ <div class="modal">
38
+ <h2>#{ header }</h2>
39
+ <div class="content">
40
+ <p>#{ message }</p>
41
+ </div>
42
+ <div class="toolbar">
43
+ <a href="#" class="button" data-action="cancel">Cancel</a>
44
+ <a href="#" class="button" data-action="continue">Continue</a>
45
+ </div>
46
+ </div>
47
+ </div>
48
+ </div>
49
+ """
50
+ $("body").append(html)
51
+
52
+ # $('.overlay a').on 'click', (event) ->
53
+ # event.preventDefault()
54
+ # should_continue = $(this).attr("data-action") == "continue"
55
+ # $.rails.confirmed(link, should_continue)
@@ -0,0 +1,13 @@
1
+ @import verne/settings
2
+ @import verne/reset
3
+ @import verne/typography
4
+ @import verne/button
5
+ @import verne/table
6
+ @import verne/alert
7
+ @import verne/code
8
+ @import verne/form
9
+ @import verne/progress
10
+ // @import verne/dropdown
11
+ // @import verne/link
12
+ // @import verne/list
13
+ // @import verne/modal
@@ -0,0 +1,21 @@
1
+ @import settings
2
+
3
+ // Elements
4
+ %alert
5
+ display: inline-block
6
+ background: $highlight-color
7
+ color: white
8
+ border: none
9
+ border-radius: $border-radius
10
+ position: relative
11
+ font-weight: 600
12
+ width: 100%
13
+ margin-bottom: $rhythm * 3
14
+ padding: $rhythm * 2 $rhythm * 3
15
+
16
+ // Modifiers
17
+ %alert-is-success
18
+ background: $success-color
19
+
20
+ %alert-is-error
21
+ background: $error-color
@@ -0,0 +1,60 @@
1
+ // Settings
2
+ $offset: $rhythm / 2
3
+
4
+ // Mixins
5
+ @mixin button-is-colored($color)
6
+ @include box-shadow(0 0 0 1px $color)
7
+ color: $color
8
+ &:hover
9
+ background: transparentize($color, 0.9)
10
+ &:active
11
+ background: $color
12
+ color: white
13
+
14
+ // Elements
15
+ %button
16
+ font-size: $rhythm * 4 / 1.5
17
+ line-height: $rhythm * 3
18
+ font-weight: 400
19
+ text-decoration: none
20
+ text-align: center
21
+ padding:
22
+ top: $rhythm + $offset
23
+ bottom: $rhythm * 2 - $offset
24
+ left: $rhythm * 3
25
+ right: $rhythm * 3
26
+ margin: 0 0 $rhythm * 2 0
27
+ outline: none
28
+ display: inline-block
29
+ // color: white
30
+ border: none
31
+ transition: 0.1s all linear
32
+ border-radius: $border-radius
33
+ cursor: pointer
34
+ position: relative
35
+ -webkit-appearance: none
36
+ @include button-is-colored($primary-color)
37
+
38
+ // Modifiers
39
+ %button-is-disabled
40
+ &, &:hover, &:active
41
+ @include box-shadow(0 0 0 1px $disabled-color)
42
+ color: $disabled-color
43
+ cursor: default
44
+ background: none
45
+
46
+ %button-is-selected
47
+ &, &:hover
48
+ @include box-shadow(0 0 0 1px $highlight-color)
49
+ color: white
50
+ background: $highlight-color
51
+
52
+ %button-is-large
53
+ font-size: $rhythm * 5 / 1.5
54
+ line-height: $rhythm * 5
55
+
56
+ %button-is-success
57
+ @include button-is-colored($success-color)
58
+
59
+ %button-is-highlight
60
+ @include button-is-colored($highlight-color)
@@ -0,0 +1,14 @@
1
+ %pre, %code
2
+ background: transparentize($primary-color, 0.9)
3
+ font-family: "Courier Prime", "Courier New", "Courier", sans-serif
4
+ border-radius: $border-radius
5
+ font-weight: 300
6
+
7
+ %pre
8
+ font-size: $rhythm * 4 / 1.6
9
+ padding: $rhythm * 3
10
+ line-height: $rhythm * 4
11
+ margin-bottom: $rhythm * 3
12
+
13
+ %code
14
+ padding: $rhythm / 2
@@ -0,0 +1,59 @@
1
+ $dropdown-border-color: rgba(0, 0, 0, 0.4)
2
+
3
+ .dropdown
4
+ position: relative
5
+ display: inline-block
6
+
7
+ ul.dropdown-menu
8
+ display: none
9
+ position: absolute
10
+ background: white
11
+ list-style: none
12
+ margin: $rhythm 0 0 0
13
+ padding: 0
14
+ border: 1px solid $dropdown-border-color
15
+ background: white
16
+ left: 0
17
+ top: 100%
18
+ z-index: 1000
19
+ border-radius: 3px
20
+ box-shadow: 0px 0px $rhythm rgba(0, 0, 0, 0.2)
21
+
22
+ &:after
23
+ content: " "
24
+ position: absolute
25
+ width: 0
26
+ border: $rhythm solid transparent
27
+ border-bottom-color: white
28
+ bottom: 100%
29
+ left: 50%
30
+ margin-left: - $rhythm
31
+
32
+ &:before
33
+ content: " "
34
+ position: absolute
35
+ width: 0
36
+ border: $rhythm + 0.1 solid transparent
37
+ border-bottom-color: $dropdown-border-color
38
+ bottom: 100%
39
+ left: 50%
40
+ margin-left: - $rhythm - 0.1
41
+
42
+ li
43
+ margin: 0
44
+ a
45
+ white-space: nowrap
46
+ text-align: center
47
+ display: block
48
+ margin: 0
49
+ padding: $rhythm / 2 $rhythm * 2
50
+ color: black
51
+ transition: 0.1s all linear
52
+ width: 100%
53
+ border-bottom: none
54
+ &:hover
55
+ background: rgba(0, 0, 0, 0.08)
56
+ li:first-child a
57
+ border-radius: 2px 2px 0 0
58
+ li:last-child a
59
+ border-radius: 0 0 2px 2px
@@ -0,0 +1,277 @@
1
+ @import settings
2
+
3
+ // Settings
4
+ $border-width: 1px
5
+
6
+ // Elements
7
+ %form
8
+ margin-bottom: $rhythm * 3
9
+
10
+ %input
11
+ @include clearfix
12
+ @include user-select(none)
13
+ position: relative
14
+ margin-bottom: $rhythm * 3
15
+ display: block
16
+ label
17
+ display: block
18
+ font-weight: 700
19
+ line-height: $rhythm * 4 // 24px
20
+ margin-bottom: $rhythm
21
+ font-size: $rhythm * 4 / 1.5 // 16px
22
+ span
23
+ line-height: $rhythm * 3
24
+ margin-bottom: $rhythm * 2
25
+ font-size: $rhythm * 2
26
+ font-weight: 500
27
+ display: none
28
+ div + span
29
+ display: block
30
+ input[type=text], input[type=url], input[type=number], input[type=email], input[type=password], select, textarea
31
+ font-weight: 500
32
+ line-height: $rhythm * 3
33
+ height: $rhythm * 7
34
+ margin-bottom: $rhythm
35
+ font-size: $rhythm * 4 / 1.5 // 16px
36
+ -webkit-appearance: none
37
+ background: transparentize($primary-color, 0.9)
38
+ box-sizing: border-box
39
+ margin:
40
+ left: 0
41
+ right: 0
42
+ top: 0
43
+ border-radius: $border-radius
44
+ border: none
45
+ @include box-shadow(0 0 0 1px $primary-color)
46
+ padding: 0 $rhythm * 2
47
+ height: $rhythm * 8
48
+ display: block
49
+ width: 100%
50
+ &, &:focus
51
+ outline: 0
52
+ &:focus
53
+ @include box-shadow(0 0 0 1px $highlight-color)
54
+ background: transparentize($highlight-color, 0.9)
55
+ textarea
56
+ height: $rhythm * 24
57
+ margin-bottom: $rhythm
58
+ padding-top: $rhythm * 1.5
59
+ padding-bottom: $rhythm * 1.5
60
+ resize: none
61
+
62
+ %input-is-invalid
63
+ input[type=text], input[type=url], input[type=number], input[type=email], input[type=password], select, textarea
64
+ &, &:focus
65
+ @include box-shadow(0 0 0 1px $error-color)
66
+ background: transparentize($error-color, 0.9)
67
+ div + span
68
+ color: $error-color
69
+
70
+ // Modifiers
71
+ %input-is-radio-buttons, %input-is-check-boxes
72
+ margin-bottom: $rhythm * 2
73
+ span
74
+ display: block
75
+ float: left
76
+ margin: 0 $rhythm * 4 $rhythm 0
77
+ label
78
+ display: inline
79
+ font-weight: 400
80
+ input
81
+ margin: 0 $rhythm 0 0
82
+ &:disabled + label
83
+ color: $disabled-color
84
+
85
+ %input-is-buttons
86
+ @extend %input-is-radio-buttons
87
+ span
88
+ margin: 0 $rhythm * 2 $rhythm * 2 0
89
+ label
90
+ @extend %button
91
+ display: block
92
+ margin: 0
93
+ input
94
+ display: none
95
+ &:checked + label
96
+ @extend %button-is-selected
97
+ display: block
98
+ margin: 0
99
+ &:disabled + label
100
+ @extend %button-is-disabled
101
+
102
+ %input-is-select
103
+ div
104
+ position: relative
105
+ &:after
106
+ content: "\25BE"
107
+ position: absolute
108
+ right: $rhythm * 2.5
109
+ top: $rhythm * 2.25
110
+ color: $primary-color
111
+ z-index: 1000
112
+
113
+ %input-is-white
114
+ border-color: rgba(255, 255, 255, 1.0)
115
+ color: rgba(255, 255, 255, 1.0)
116
+ &::-webkit-input-placeholder
117
+ color: rgba(255, 255, 255, 0.7)
118
+
119
+ .form-old
120
+ .input.file
121
+ .input-wrapper
122
+ width: 100%
123
+ // .input.checkbox, .input.boolean
124
+ // position: relative
125
+ // overflow: hidden
126
+ // label
127
+ // margin-left: $checkbox-size + $rhythm * 2
128
+ // line-height: $checkbox-size
129
+ // .input-wrapper
130
+ // position: absolute
131
+ // top: 0
132
+ // left: 0
133
+ // margin-left: 0
134
+ // width: $checkbox-size
135
+ // height: $checkbox-size
136
+ // border: $border-radius $highlight-color solid
137
+ // border-radius: $border-radius
138
+ // margin-bottom: $rhythm
139
+ // text-align: center
140
+ // &.checked
141
+ // border-color: $emrald
142
+ // color: $emrald
143
+ // &:after
144
+ // @include ss-standard
145
+ // content: "check"
146
+ // position: absolute
147
+ // top: -1px
148
+ // left: 0
149
+ // right: 0
150
+ // bottom: 0
151
+ // line-height: $checkbox-size
152
+ // pointer-events: none
153
+ // input
154
+ // margin: 0
155
+ // padding: 0
156
+ // cursor: pointer
157
+ // width: 100%
158
+ // height: 100%
159
+ // opacity: 0
160
+
161
+
162
+ // span.required, span.error
163
+ // top: - $line-height * 0.1
164
+ // position: relative
165
+ // font-family: $secondary-font-family
166
+ // background: $highlight-color
167
+ // border-radius: 2px
168
+ // color: white
169
+ // display: inline-block
170
+ // line-height: $line-height * 0.7
171
+ // font-size: $secondary-font-size * 0.7
172
+ // font-weight: bold
173
+ // text-transform: uppercase
174
+ // padding: 0 $line-height * 0.2
175
+ // margin: 0
176
+ // margin-right: $line-height * 0.2
177
+ // .input &
178
+ // margin-left: $line-height * 0.2
179
+
180
+ // form
181
+ // span.hint
182
+ // display: block
183
+ // font-family: $secondary-font-family
184
+ // line-height: $line-height
185
+
186
+ // .input
187
+ // position: relative
188
+ // margin-bottom: $line-height
189
+ // overflow: hidden
190
+
191
+ // &.hidden
192
+ // margin: 0
193
+
194
+ // &.date
195
+ // margin-right: $line-height
196
+ // label
197
+ // margin-left: $line-height
198
+ // > .input_wrapper > .select_wrapper
199
+ // @include span-columns(4)
200
+ // select
201
+ // width: 100%
202
+ // margin: 0
203
+
204
+ // > label.control-label
205
+ // display: inline-block
206
+ // margin-bottom: $line-height * 0.5
207
+ // text-align: left
208
+
209
+ // > .input_wrapper
210
+ // > .select_wrapper
211
+ // position: relative
212
+ // overflow: hidden
213
+ // &:after
214
+ // content: "descend"
215
+ // position: absolute
216
+ // top: 2px
217
+ // line-height: $line-height * 2
218
+ // font-size: $font-size * 0.7
219
+ // bottom: $line-height
220
+ // color: rgba(0, 0, 0, 0.3)
221
+ // right: $line-height * 0.5
222
+ // z-index: 1000
223
+ // select
224
+ // width: 100%
225
+ // display: block
226
+ // height: $line-height * 2.0
227
+ // padding: $line-height * 0.5
228
+ // border: none
229
+ // border-bottom: 3px solid rgba(0, 0, 0, 0.4)
230
+ // background: rgba(0, 0, 0, 0.07)
231
+ // outline: none
232
+ // box-sizing: border-box
233
+ // -webkit-appearance: none
234
+ // border-radius: 0
235
+ // position: relative
236
+
237
+ // > input, > textarea
238
+ // display: block
239
+ // height: $line-height * 2.0
240
+ // padding: $line-height * 0.5
241
+ // width: 100%
242
+ // border: none
243
+ // border-bottom: 3px solid rgba(0, 0, 0, 0.2)
244
+ // background: rgba(0, 0, 0, 0.07)
245
+ // outline: none
246
+ // resize: none
247
+ // box-sizing: border-box
248
+
249
+ // > textarea
250
+ // height: $line-height * 8.0
251
+
252
+
253
+ // &.check_boxes, &.radio_buttons, &.boolean
254
+ // > label.control-label
255
+ // margin-left: $line-height
256
+ // margin-right: $line-height
257
+ // user-select: none
258
+ // -webkit-user-select: none
259
+ // label.checkbox, label.radio
260
+ // @include span-columns(6)
261
+ // background: rgba(0, 0, 0, 0.05)
262
+ // display: block
263
+ // line-height: $line-height
264
+ // text-align: left
265
+ // padding: $line-height * 0.5
266
+ // box-sizing: border-box
267
+ // border-bottom: 3px solid rgba(0, 0, 0, 0.2)
268
+ // margin-bottom: $line-height
269
+ // font-weight: 400
270
+ // &:hover
271
+ // cursor: pointer
272
+ // &.selected
273
+ // background: $highlight-color
274
+ // border-bottom-color: $highlight-color
275
+ // font-weight: 700
276
+ // input
277
+ // display: none
@@ -0,0 +1,39 @@
1
+ @import "variables"
2
+
3
+ ol, ul
4
+ margin: 0 0 $rhythm * 3 0
5
+ padding: 0
6
+ list-style-type: none
7
+ li
8
+ margin: 0 0 $rhythm 0
9
+ padding: 0
10
+
11
+ %ol
12
+ counter-reset: li
13
+ li
14
+ padding-left: $rhythm * 4
15
+ position: relative
16
+ &:before
17
+ content: counter(li)
18
+ counter-increment: li
19
+ height: 100%
20
+ font-weight: 700
21
+ display: block
22
+ position: absolute
23
+ left: 0
24
+ top: 0
25
+ bottom: 0
26
+ color: $highlight-color
27
+ %ul
28
+ li
29
+ position: relative
30
+ padding-left: $rhythm * 4
31
+ &:before
32
+ @include ss-standard
33
+ content: "directright"
34
+ font-size: 9px
35
+ color: $highlight-color
36
+ display: inline-block
37
+ position: absolute
38
+ top: 2px
39
+ left: 0
@@ -0,0 +1,45 @@
1
+ .modal
2
+ display: none
3
+
4
+ .overlay
5
+ position: fixed
6
+ width: auto
7
+ height: auto
8
+ margin: 0
9
+ padding: 0
10
+ background: rgba(0, 0, 0, 0.6)
11
+ top: 0
12
+ left: 0
13
+ right: 0
14
+ bottom: 0
15
+ z-index: 2000
16
+ text-align: center
17
+
18
+ &:before
19
+ content: ""
20
+ display: inline-block
21
+ height: 100%
22
+ vertical-align: middle
23
+
24
+ .modal
25
+ text-align: left
26
+ display: inline-block
27
+ vertical-align: middle
28
+ box-shadow: 0 0 $rhythm rgba(0, 0, 0, 0.3)
29
+ border-radius: $border-radius
30
+ width: $rhythm * 72
31
+ min-height: $rhythm * 32
32
+ background: white
33
+ padding: $rhythm * 3
34
+ overflow: hidden
35
+ h2
36
+ margin-bottom: $rhythm * 3
37
+ .modal-toolbar
38
+ text-align: right
39
+ padding-top: $rhythm * 3
40
+ .button
41
+ display: inline-block
42
+ margin: 0 0 0 $rhythm
43
+ .modal-content
44
+ max-height: $rhythm * 64
45
+ overflow: scroll
@@ -0,0 +1,22 @@
1
+ // Elements
2
+ %progress
3
+ width: 100%
4
+ border-radius: $border-radius
5
+ position: relative
6
+ text-align: left
7
+ margin-bottom: $rhythm * 4
8
+ background: transparentize($highlight-color, 0.6)
9
+ padding: $rhythm 0
10
+ > span
11
+ font-weight: 600
12
+ position: relative
13
+ z-index: 1000
14
+ margin-left: $rhythm * 2
15
+ color: white
16
+ > div
17
+ background: $highlight-color
18
+ height: $rhythm * 6
19
+ position: absolute
20
+ top: 0
21
+ border-radius: $border-radius
22
+ transition: 0.3s all ease-in-out
@@ -0,0 +1,12 @@
1
+ *
2
+ box-sizing: border-box
3
+
4
+ html, body
5
+ margin: 0
6
+ padding: 0
7
+ width: 100%
8
+ height: 100%
9
+ background: $background-color
10
+
11
+ html
12
+ font-size: $scale
@@ -0,0 +1,11 @@
1
+ $rhythm: 0.5rem !default
2
+ $scale: 75% !default
3
+ $border-radius: $rhythm / 2 !default
4
+ $font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
5
+
6
+ $primary-color: rgb(44, 62, 80) !default
7
+ $highlight-color: rgb(52, 152, 219) !default
8
+ $background-color: rgb(236, 240, 241) !default
9
+ $disabled-color: transparentize($primary-color, 0.7) !default
10
+ $success-color: rgb(39, 174, 96) !default
11
+ $error-color: rgb(231, 76, 60) !default
@@ -0,0 +1,55 @@
1
+ @import settings
2
+
3
+ // Elements
4
+ %table
5
+ width: 100%
6
+ margin-bottom: $rhythm * 4
7
+ border-collapse: collapse
8
+ border-radius: $border-radius
9
+ border-top: 1px solid $highlight-color
10
+ border-bottom: 1px solid $highlight-color
11
+ &.sortable
12
+ tr.item
13
+ cursor: row-resize
14
+ tr
15
+ &[data-target]:hover
16
+ transition: 0.1s all linear
17
+ cursor: pointer
18
+ td, th
19
+ background: $highlight-color
20
+ img
21
+ border-color: white
22
+ &, i
23
+ color: white
24
+ td, th
25
+ padding: $rhythm 0
26
+ padding-right: $rhythm * 2
27
+ text-align: center
28
+ &:last-child
29
+ text-align: right
30
+ padding-right: 0
31
+ &:first-child
32
+ text-align: left
33
+ a
34
+ text-decoration: none
35
+ border: none
36
+ .ss-icon
37
+ position: relative
38
+ top: 3px
39
+ &.center
40
+ text-align: center
41
+ &.right
42
+ text-align: right
43
+ &.icon
44
+ width: 100px
45
+ &.bold
46
+ font-weight: 600
47
+ th
48
+ border-top: 1px solid $highlight-color
49
+ border-bottom: 1px solid $highlight-color
50
+ &.ui-sortable-helper
51
+ box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2)
52
+ &.placeholder
53
+ height: 48px
54
+ *
55
+ background: rgba(0, 0, 0, 0.1)
@@ -0,0 +1,110 @@
1
+ @mixin baseline-adjust($offset)
2
+ position: relative
3
+ top: $offset
4
+
5
+ @mixin ss-standard
6
+ font-family: "SSStandard"
7
+ font-style: normal
8
+ font-weight: normal
9
+ text-decoration: none
10
+ text-rendering: optimizeLegibility
11
+ white-space: nowrap
12
+ -moz-font-feature-settings: "liga=1"
13
+ -moz-font-feature-settings: "liga"
14
+ -ms-font-feature-settings: "liga" 1
15
+ -o-font-feature-settings: "liga"
16
+ font-feature-settings: "liga"
17
+ -webkit-font-smoothing: antialiased
18
+
19
+ body, input, select, textarea, button
20
+ font-family: $font-family
21
+ color: $primary-color
22
+ text-align: left
23
+
24
+ h1, h2, h3, h4, h5, h6, p, span, label, input, blockquote, li
25
+ margin: 0
26
+ padding: 0
27
+
28
+ *
29
+ line-height: $rhythm * 4
30
+ font-size: $rhythm * 4 / 1.5 // 16px
31
+ font-weight: 300
32
+ color: $primary-color
33
+
34
+ b, strong
35
+ font-weight: 600
36
+
37
+ a
38
+ color: $highlight-color
39
+ text-decoration: none
40
+ border-bottom: 1px solid $highlight-color
41
+
42
+ .dropdown-menu
43
+ a
44
+ line-height: $rhythm * 4
45
+ font-size: 14px
46
+
47
+ cite
48
+ line-height: $rhythm * 3
49
+ font-size: $rhythm * 3 / 1.5 // 12px
50
+ text-transform: uppercase
51
+ display: block
52
+ font-style: normal
53
+ font-weight: 600
54
+
55
+ p, li, h4, h5
56
+ margin-bottom: $rhythm * 2
57
+
58
+ blockquote, q
59
+ color: $primary-color
60
+ $offset: $rhythm / 2
61
+ line-height: $rhythm * 6 // 36px
62
+ font-size: ($rhythm * 5) * 0.8 // 24px
63
+ border-left: $rhythm solid $highlight-color
64
+ font-style: italic
65
+ font-weight: 300
66
+ display: block
67
+ margin: 0 0 $rhythm * 2 0
68
+ padding:
69
+ top: $rhythm * 2 + $offset
70
+ bottom: $rhythm * 3 - $offset
71
+ left: $rhythm * 4
72
+ right: $rhythm * 12
73
+
74
+ h1
75
+ &, & *
76
+ line-height: $rhythm * 12 // 72px
77
+ margin-bottom: $rhythm * 3
78
+ font-size: $rhythm * 12 // 72px
79
+ font-weight: 900
80
+ color: $primary-color
81
+
82
+ h2
83
+ line-height: $rhythm * 8 // 48px
84
+ margin-bottom: $rhythm * 5
85
+ font-size: ($rhythm * 8) * 0.8 // 40px
86
+ font-weight: 300
87
+ color: $highlight-color
88
+
89
+ h3
90
+ &, & *
91
+ line-height: $rhythm * 5 // 30px
92
+ margin-bottom: $rhythm * 2
93
+ font-size: ($rhythm * 5) * 0.8 // 24px
94
+ font-weight: 700
95
+ color: $primary-color
96
+
97
+ h4
98
+ font-weight: 700
99
+ color: $highlight-color
100
+
101
+ h5
102
+ &, & *
103
+ line-height: $rhythm * 5 // 30px
104
+ font-size: ($rhythm * 5) / 1.5 // 20px
105
+
106
+ table
107
+ th
108
+ font-weight: 700
109
+ td
110
+ font-weight: 300
@@ -0,0 +1,3 @@
1
+ #!/usr/bin/env ruby
2
+ require File.dirname(__FILE__) + '/../lib/verne.rb'
3
+ Verne::Generator.start
@@ -0,0 +1,19 @@
1
+ dir = File.dirname(__FILE__)
2
+ $LOAD_PATH.unshift dir unless $LOAD_PATH.include?(dir)
3
+
4
+ require "bourbon"
5
+ require "verne/generator"
6
+
7
+ unless defined?(Sass)
8
+ require "sass"
9
+ end
10
+
11
+ module Verne
12
+ if defined?(Rails) and defined?(Rails::Engine)
13
+ class Engine < ::Rails::Engine
14
+ require "verne/engine"
15
+ end
16
+ else
17
+ Sass.load_paths << File.expand_path("../../app/assets/stylesheets", __FILE__)
18
+ end
19
+ end
@@ -0,0 +1,5 @@
1
+ module Verne
2
+ class Engine < Rails::Engine
3
+ # Automatically configure the asset pipeline
4
+ end
5
+ end
@@ -0,0 +1,78 @@
1
+ require "verne/version"
2
+ require "fileutils"
3
+ require "thor"
4
+
5
+ module Verne
6
+ class Generator < Thor
7
+ map ['-v', '--version'] => :version
8
+
9
+ desc 'install', 'Install Verne into your project'
10
+ method_options path: :string, force: :boolean
11
+ def install
12
+ if verne_files_already_exist? and !options[:force]
13
+ puts "Verne files already installed. No action taken."
14
+ else
15
+ install_files
16
+ puts "Verne files installed to #{install_path}/"
17
+ end
18
+ end
19
+
20
+ desc 'update', 'Update Verne'
21
+ method_options path: :string
22
+ def update
23
+ if verne_files_already_exist?
24
+ remove_verne_directory
25
+ install_files
26
+ puts "Verne files updated."
27
+ else
28
+ puts "No existing Verne installation. No action taken."
29
+ end
30
+ end
31
+
32
+ desc 'remove', 'Remove Verne from your project'
33
+ method_options path: :string
34
+ def remove
35
+ if verne_files_already_exist?
36
+ remove_verne_directory
37
+ puts "Verne was successfully removed."
38
+ else
39
+ puts "No existing verne installation. No action taken."
40
+ end
41
+ end
42
+
43
+ private
44
+
45
+ def install_path
46
+ @install_path ||= if options[:path]
47
+ Pathname.new(File.join(options[:path], 'verne'))
48
+ else
49
+ Pathname.new('verne')
50
+ end
51
+ end
52
+
53
+ def verne_files_already_exist?
54
+ install_path.exist?
55
+ end
56
+
57
+ def remove_verne_directory
58
+ FileUtils.rm_rf(install_path)
59
+ end
60
+
61
+ def install_files
62
+ FileUtils.mkdir_p(install_path)
63
+ FileUtils.cp_r(all_stylesheets, install_path)
64
+ end
65
+
66
+ def all_stylesheets
67
+ Dir["#{stylesheets_directory}/*"]
68
+ end
69
+
70
+ def stylesheets_directory
71
+ File.join(top_level_directory, "app", "assets", "stylesheets")
72
+ end
73
+
74
+ def top_level_directory
75
+ File.dirname(File.dirname(File.dirname(__FILE__)))
76
+ end
77
+ end
78
+ end
@@ -0,0 +1,3 @@
1
+ module Verne
2
+ VERSION = '0.1.0'
3
+ end
@@ -0,0 +1,23 @@
1
+ $:.push File.expand_path("../lib", __FILE__)
2
+ require 'verne/version'
3
+
4
+ Gem::Specification.new do |s|
5
+ s.name = 'verne'
6
+ s.version = Verne::VERSION
7
+ s.platform = Gem::Platform::RUBY
8
+ s.date = '2014-04-23'
9
+ s.summary = 'A set of simple and semantic UI elements'
10
+ s.authors = ["Devon Tivona"]
11
+ s.email = 'devon@tivona.me'
12
+ s.files = ["lib/verne.rb"]
13
+ s.homepage = 'http://verne.tivona.me'
14
+ s.license = "MIT"
15
+
16
+ s.files = `git ls-files`.split("\n")
17
+ s.executables = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
18
+ s.require_paths = ["lib"]
19
+
20
+ s.add_dependency('sass', '>= 3.2')
21
+ s.add_dependency('bourbon', '>= 2.1')
22
+ s.add_dependency('thor')
23
+ end
metadata ADDED
@@ -0,0 +1,112 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: verne
3
+ version: !ruby/object:Gem::Version
4
+ version: 0.1.0
5
+ platform: ruby
6
+ authors:
7
+ - Devon Tivona
8
+ autorequire:
9
+ bindir: bin
10
+ cert_chain: []
11
+ date: 2014-04-23 00:00:00.000000000 Z
12
+ dependencies:
13
+ - !ruby/object:Gem::Dependency
14
+ name: sass
15
+ requirement: !ruby/object:Gem::Requirement
16
+ requirements:
17
+ - - '>='
18
+ - !ruby/object:Gem::Version
19
+ version: '3.2'
20
+ type: :runtime
21
+ prerelease: false
22
+ version_requirements: !ruby/object:Gem::Requirement
23
+ requirements:
24
+ - - '>='
25
+ - !ruby/object:Gem::Version
26
+ version: '3.2'
27
+ - !ruby/object:Gem::Dependency
28
+ name: bourbon
29
+ requirement: !ruby/object:Gem::Requirement
30
+ requirements:
31
+ - - '>='
32
+ - !ruby/object:Gem::Version
33
+ version: '2.1'
34
+ type: :runtime
35
+ prerelease: false
36
+ version_requirements: !ruby/object:Gem::Requirement
37
+ requirements:
38
+ - - '>='
39
+ - !ruby/object:Gem::Version
40
+ version: '2.1'
41
+ - !ruby/object:Gem::Dependency
42
+ name: thor
43
+ requirement: !ruby/object:Gem::Requirement
44
+ requirements:
45
+ - - '>='
46
+ - !ruby/object:Gem::Version
47
+ version: '0'
48
+ type: :runtime
49
+ prerelease: false
50
+ version_requirements: !ruby/object:Gem::Requirement
51
+ requirements:
52
+ - - '>='
53
+ - !ruby/object:Gem::Version
54
+ version: '0'
55
+ description:
56
+ email: devon@tivona.me
57
+ executables:
58
+ - verne
59
+ extensions: []
60
+ extra_rdoc_files: []
61
+ files:
62
+ - .gitignore
63
+ - LICENSE
64
+ - README.md
65
+ - app/assets/javascripts/verne.dropdown.js.coffee
66
+ - app/assets/javascripts/verne.form.js.coffee
67
+ - app/assets/javascripts/verne.js.coffee
68
+ - app/assets/javascripts/verne.modal.js.coffee
69
+ - app/assets/stylesheets/_verne.sass
70
+ - app/assets/stylesheets/verne/_alert.sass
71
+ - app/assets/stylesheets/verne/_button.sass
72
+ - app/assets/stylesheets/verne/_code.sass
73
+ - app/assets/stylesheets/verne/_dropdown.sass
74
+ - app/assets/stylesheets/verne/_form.sass
75
+ - app/assets/stylesheets/verne/_list.sass
76
+ - app/assets/stylesheets/verne/_modal.sass
77
+ - app/assets/stylesheets/verne/_progress.sass
78
+ - app/assets/stylesheets/verne/_reset.sass
79
+ - app/assets/stylesheets/verne/_settings.sass
80
+ - app/assets/stylesheets/verne/_table.sass
81
+ - app/assets/stylesheets/verne/_typography.sass
82
+ - bin/verne
83
+ - lib/verne.rb
84
+ - lib/verne/engine.rb
85
+ - lib/verne/generator.rb
86
+ - lib/verne/version.rb
87
+ - verne.gemspec
88
+ homepage: http://verne.tivona.me
89
+ licenses:
90
+ - MIT
91
+ metadata: {}
92
+ post_install_message:
93
+ rdoc_options: []
94
+ require_paths:
95
+ - lib
96
+ required_ruby_version: !ruby/object:Gem::Requirement
97
+ requirements:
98
+ - - '>='
99
+ - !ruby/object:Gem::Version
100
+ version: '0'
101
+ required_rubygems_version: !ruby/object:Gem::Requirement
102
+ requirements:
103
+ - - '>='
104
+ - !ruby/object:Gem::Version
105
+ version: '0'
106
+ requirements: []
107
+ rubyforge_project:
108
+ rubygems_version: 2.0.3
109
+ signing_key:
110
+ specification_version: 4
111
+ summary: A set of simple and semantic UI elements
112
+ test_files: []