fustrate-rails 0.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. checksums.yaml +7 -0
  2. data/lib/fustrate-rails.rb +4 -0
  3. data/lib/fustrate/rails/engine.rb +14 -0
  4. data/lib/fustrate/rails/version.rb +6 -0
  5. data/vendor/assets/javascripts/awesomplete.js +402 -0
  6. data/vendor/assets/javascripts/fustrate.coffee +6 -0
  7. data/vendor/assets/javascripts/fustrate/_module.coffee +134 -0
  8. data/vendor/assets/javascripts/fustrate/components/_module.coffee +3 -0
  9. data/vendor/assets/javascripts/fustrate/components/alert_box.coffee +10 -0
  10. data/vendor/assets/javascripts/fustrate/components/autocomplete.coffee +161 -0
  11. data/vendor/assets/javascripts/fustrate/components/disclosure.coffee +12 -0
  12. data/vendor/assets/javascripts/fustrate/components/drop_zone.coffee +9 -0
  13. data/vendor/assets/javascripts/fustrate/components/dropdown.coffee +48 -0
  14. data/vendor/assets/javascripts/fustrate/components/file_picker.coffee +10 -0
  15. data/vendor/assets/javascripts/fustrate/components/flash.coffee +31 -0
  16. data/vendor/assets/javascripts/fustrate/components/modal.coffee +213 -0
  17. data/vendor/assets/javascripts/fustrate/components/pagination.coffee +84 -0
  18. data/vendor/assets/javascripts/fustrate/components/tabs.coffee +28 -0
  19. data/vendor/assets/javascripts/fustrate/components/tooltip.coffee +72 -0
  20. data/vendor/assets/javascripts/fustrate/generic_form.coffee +31 -0
  21. data/vendor/assets/javascripts/fustrate/generic_page.coffee +40 -0
  22. data/vendor/assets/javascripts/fustrate/generic_table.coffee +57 -0
  23. data/vendor/assets/javascripts/fustrate/listenable.coffee +25 -0
  24. data/vendor/assets/javascripts/fustrate/object.coffee +21 -0
  25. data/vendor/assets/javascripts/fustrate/record.coffee +23 -0
  26. data/vendor/assets/stylesheets/_fustrate.sass +7 -0
  27. data/vendor/assets/stylesheets/awesomplete.sass +75 -0
  28. data/vendor/assets/stylesheets/fustrate/_colors.sass +9 -0
  29. data/vendor/assets/stylesheets/fustrate/_settings.sass +20 -0
  30. data/vendor/assets/stylesheets/fustrate/components/_components.sass +36 -0
  31. data/vendor/assets/stylesheets/fustrate/components/_functions.sass +40 -0
  32. data/vendor/assets/stylesheets/fustrate/components/alerts.sass +78 -0
  33. data/vendor/assets/stylesheets/fustrate/components/buttons.sass +103 -0
  34. data/vendor/assets/stylesheets/fustrate/components/disclosures.sass +23 -0
  35. data/vendor/assets/stylesheets/fustrate/components/dropdowns.sass +31 -0
  36. data/vendor/assets/stylesheets/fustrate/components/flash.sass +33 -0
  37. data/vendor/assets/stylesheets/fustrate/components/forms.sass +188 -0
  38. data/vendor/assets/stylesheets/fustrate/components/grid.sass +204 -0
  39. data/vendor/assets/stylesheets/fustrate/components/labels.sass +63 -0
  40. data/vendor/assets/stylesheets/fustrate/components/modals.sass +119 -0
  41. data/vendor/assets/stylesheets/fustrate/components/pagination.sass +57 -0
  42. data/vendor/assets/stylesheets/fustrate/components/panels.sass +49 -0
  43. data/vendor/assets/stylesheets/fustrate/components/popovers.sass +15 -0
  44. data/vendor/assets/stylesheets/fustrate/components/tables.sass +58 -0
  45. data/vendor/assets/stylesheets/fustrate/components/tabs.sass +44 -0
  46. data/vendor/assets/stylesheets/fustrate/components/tooltips.sass +28 -0
  47. data/vendor/assets/stylesheets/fustrate/components/typography.sass +355 -0
  48. metadata +211 -0
@@ -0,0 +1,9 @@
1
+ $red: #914141
2
+ $orange: #b26620
3
+ $yellow: #b2a120
4
+ $green: #70a854
5
+ $blue: #3775a8
6
+ $purple: #7857db
7
+ $pink: #a933b1
8
+ $brown: #8b5e36
9
+ $grey: #606060
@@ -0,0 +1,20 @@
1
+ $rem-base: 16px
2
+ $base-line-height: 150%
3
+
4
+ $small-limit: 40em
5
+ // 64 is a bit too wide for half-screening on our monitors
6
+ $medium-limit: 58em
7
+
8
+ $screen: "only screen"
9
+
10
+ $landscape: "#{$screen} and (orientation: landscape)"
11
+ $portrait: "#{$screen} and (orientation: portrait)"
12
+
13
+ $small-up: $screen
14
+ $small-only: "#{$screen} and (max-width: #{$small-limit})"
15
+
16
+ $medium-up: "#{$screen} and (min-width:#{$small-limit + .063em})"
17
+ $medium-only: "#{$screen} and (min-width:#{$small-limit + .063em}) and (max-width:#{$medium-limit})"
18
+
19
+ $large-up: "#{$screen} and (min-width:#{$medium-limit + .063em})"
20
+ $large-only: $large-up
@@ -0,0 +1,36 @@
1
+ @import "functions"
2
+
3
+ @import "typography"
4
+ @import "grid"
5
+ @import "buttons"
6
+ @import "forms"
7
+
8
+ @import "alerts"
9
+ @import "disclosures"
10
+ @import "dropdowns"
11
+ @import "flash"
12
+ @import "labels"
13
+ @import "modals"
14
+ @import "pagination"
15
+ @import "panels"
16
+ @import "popovers"
17
+ @import "tables"
18
+ @import "tabs"
19
+ @import "tooltips"
20
+
21
+ +fustrate-typography
22
+ +fustrate-grid
23
+ +fustrate-buttons
24
+ +fustrate-forms
25
+ +fustrate-alerts
26
+ +fustrate-disclosures
27
+ +fustrate-dropdowns
28
+ +fustrate-flash
29
+ +fustrate-labels
30
+ +fustrate-modals
31
+ +fustrate-pagination
32
+ +fustrate-panels
33
+ +fustrate-popovers
34
+ +fustrate-tables
35
+ +fustrate-tabs
36
+ +fustrate-tooltips
@@ -0,0 +1,40 @@
1
+ $rem-base: 16px !default
2
+
3
+ @function strip-unit($num)
4
+ @return $num / ($num * 0 + 1)
5
+
6
+ @function convert-to-rem($value, $base-value: $rem-base)
7
+ $value: strip-unit($value) / strip-unit($base-value) * 1rem
8
+
9
+ @if ($value == 0rem)
10
+ $value: 0
11
+
12
+ @return $value
13
+
14
+ @function rem-calc($values, $base-value: $rem-base)
15
+ $max: length($values)
16
+
17
+ @if $max == 1
18
+ @return convert-to-rem(nth($values, 1), $base-value)
19
+
20
+ $remValues: ()
21
+
22
+ @for $i from 1 through $max
23
+ $remValues: append($remValues, convert-to-rem(nth($values, $i), $base-value))
24
+
25
+ @return $remValues
26
+
27
+ =font-awesome($unicode, $padding-right: 3px, $spin: false)
28
+ font-family: FontAwesome
29
+ content: $unicode
30
+ font-weight: 100
31
+ text-rendering: auto
32
+ -webkit-font-smoothing: antialiased
33
+ -moz-osx-font-smoothing: grayscale
34
+
35
+ @if $spin
36
+ -webkit-animation: fa-spin 2s infinite linear
37
+ animation: fa-spin 2s infinite linear
38
+ margin-right: $padding-right
39
+ @else
40
+ padding-right: $padding-right
@@ -0,0 +1,78 @@
1
+ $alert-padding: rem-calc(8) rem-calc(24) rem-calc(8) rem-calc(14)
2
+ $alert-font-size: rem-calc(14)
3
+
4
+ =alert-color($bg: #eaeaea)
5
+ background-color: $bg
6
+ border-color: scale-color($bg, $lightness: -14%)
7
+
8
+ text-shadow: 0 1px 1px scale_color($bg, $lightness: if(lightness($bg) < 70%, -70%, 70%))
9
+
10
+ $color: if(lightness($bg) > 70%, #333, #fff)
11
+
12
+ color: $color
13
+
14
+ a,
15
+ a:hover
16
+ color: $color
17
+ text-decoration: underline
18
+
19
+ =fustrate-alerts
20
+ .alert-box
21
+ border-style: solid
22
+ border-width: 1px
23
+ display: block
24
+ font-weight: normal
25
+ margin-bottom: rem-calc(20)
26
+ position: relative
27
+ padding: $alert-padding
28
+ font-size: $alert-font-size
29
+ +transition(opacity 300ms ease-out)
30
+ +alert-color
31
+
32
+ .panel &:last-child
33
+ margin-bottom: 0
34
+
35
+ li, p
36
+ font-size: $alert-font-size
37
+
38
+ & > :last-child
39
+ margin-bottom: 0
40
+
41
+ a.close
42
+ font-size: rem-calc(22)
43
+ padding: 9px 6px 4px
44
+ line-height: 0
45
+ position: absolute
46
+ top: 50%
47
+ margin-top: -(rem-calc(22) / 2)
48
+ right: rem-calc(4)
49
+ opacity: 0.6
50
+ color: #333
51
+ text-decoration: none !important
52
+
53
+ &:hover,
54
+ &:focus
55
+ opacity: 0.8
56
+
57
+ &.radius
58
+ border-radius: 3px
59
+ &.round
60
+ border-radius: 8px
61
+
62
+ &.plain
63
+ +alert-color(lighten($grey, 57%))
64
+ &.success,
65
+ &.good,
66
+ &.birthday
67
+ +alert-color($success-color)
68
+ &.alert
69
+ +alert-color($alert-color)
70
+ &.secondary
71
+ +alert-color($secondary-color)
72
+ &.warning
73
+ +alert-color($warning-color)
74
+ &.danger,
75
+ &.error
76
+ +alert-color($danger-color)
77
+ &.info
78
+ +alert-color($info-color)
@@ -0,0 +1,103 @@
1
+ $button-padding: rem-calc(12)
2
+ $button-font-size: rem-calc(12)
3
+ $button-color: #fff
4
+ $button-alt-color: #333
5
+
6
+ =button-base
7
+ display: inline-block
8
+ border: none
9
+ cursor: pointer
10
+ margin: 0 0 rem-calc(5)
11
+
12
+ font-size: $button-font-size
13
+ font-weight: normal
14
+
15
+ line-height: normal
16
+ position: relative
17
+ text-decoration: none
18
+ text-align: center
19
+ -webkit-appearance: none
20
+ -webkit-border-radius: 0
21
+
22
+ +transition(background .2s linear)
23
+
24
+ =button-size($padding: $button-padding, $sides: $button-padding * 1.5)
25
+ padding-top: $padding
26
+ padding-right: $sides
27
+ padding-bottom: $padding + rem-calc(1)
28
+ padding-left: $sides
29
+
30
+ =button-style($bg: $primary-color, $hover: true)
31
+ $color: if(lightness($bg) < 70%, $button-color, $button-alt-color)
32
+ $shadow-lightness: if(lightness($bg) < 70%, -85%, 85%)
33
+
34
+ background: $bg
35
+ color: $color
36
+ text-shadow: 0 1px 1px scale_color($bg, $lightness: $shadow-lightness)
37
+
38
+ .alert-box &
39
+ color: $color
40
+ text-decoration: none
41
+
42
+ @if $hover
43
+ &:hover,
44
+ &:active
45
+ background: if($hover == true, scale_color($bg, $lightness: -17%), $hover)
46
+ color: $color
47
+
48
+ .alert-box &:hover,
49
+ .alert-box &:active
50
+ color: $color
51
+ text-decoration: none
52
+
53
+ =fustrate-buttons
54
+ button,
55
+ .button
56
+ +button-base
57
+ +button-size
58
+ +button-style
59
+
60
+ &.expand
61
+ width: 100%
62
+
63
+ &.radius
64
+ border-radius: 5px
65
+
66
+ &.xlarge
67
+ +button-size($button-padding * 1.8, $button-padding * 1.2)
68
+ font-size: $button-font-size * 1.4
69
+
70
+ &.large
71
+ +button-size($button-padding * 1.3, $button-padding * 1.1)
72
+ font-size: $button-font-size * 1.15
73
+
74
+ &.small
75
+ +button-size($button-padding * .6, $button-padding)
76
+
77
+ &.tiny
78
+ +button-size($button-padding * .4, $button-padding * .6)
79
+ font-size: $button-font-size * .4
80
+ border-radius: 5px
81
+
82
+ &.danger,
83
+ &.logout,
84
+ &.destroy,
85
+ &.deny,
86
+ &.delete
87
+ +button-style($red)
88
+ &.save,
89
+ &.submit,
90
+ &.create,
91
+ &.approve,
92
+ &.success,
93
+ &.close
94
+ +button-style($green)
95
+ &.plain,
96
+ &.toggle-all,
97
+ &.download,
98
+ &.email,
99
+ &.cancel
100
+ +button-style(#eaeaea)
101
+
102
+ h4 &
103
+ vertical-align: middle
@@ -0,0 +1,23 @@
1
+ $disclosure-title-font-size: rem-calc(12)
2
+
3
+ =fustrate-disclosures
4
+ .disclosure
5
+ .disclosure-title
6
+ +user-select(none)
7
+ cursor: pointer
8
+ font-size: $disclosure-title-font-size
9
+
10
+ &:before
11
+ content: "\25b8"
12
+ width: 12px
13
+ display: inline-block
14
+
15
+ .disclosure-content
16
+ display: none
17
+
18
+ &.open
19
+ .disclosure-title:before
20
+ content: "\25be"
21
+
22
+ .disclosure-content
23
+ display: inherit
@@ -0,0 +1,31 @@
1
+ =fustrate-dropdowns
2
+ .has-dropdown
3
+ &:after
4
+ content: "\25BE"
5
+ padding-left: .5em
6
+
7
+ & + ul.dropdown
8
+ background: white
9
+ border: 1px solid #ccc
10
+ width: auto
11
+ display: inline-block
12
+ border-radius: 4px
13
+ position: absolute
14
+ left: -9999px
15
+ z-index: 1
16
+
17
+ li
18
+ a, span
19
+ padding: 3px 10px
20
+ display: block
21
+ color: black
22
+ font-size: .9rem
23
+ cursor: pointer
24
+
25
+ &:hover
26
+ background: #f4f4f4
27
+
28
+ &.divider
29
+ border-top: 1px solid #ccc
30
+ padding: 0
31
+ margin: 3px 0
@@ -0,0 +1,33 @@
1
+ =fustrate-flash
2
+ #flashes
3
+ bottom: 0
4
+ left: 0
5
+ position: fixed
6
+ width: 100%
7
+ z-index: 9900
8
+ padding: 0.15rem 0.15rem 0
9
+
10
+ .flash
11
+ position: relative
12
+ margin: 0 0 0.15rem
13
+ opacity: 0.98
14
+ box-shadow: 0 0 8px rgba(255, 255, 255, 0.4)
15
+ color: white
16
+ font-size: 1.25em
17
+ line-height: 40px
18
+ min-height: 40px
19
+ padding: 0.2em 0
20
+ text-align: center
21
+ background: $primary-color
22
+ border: 1px solid scale_color($primary-color, $lightness: 20%)
23
+ text-shadow: 0 1px 3px scale_color($primary-color, $lightness: -50%)
24
+
25
+ &.error
26
+ background: $danger-color
27
+ border: 1px solid scale_color($danger-color, $lightness: 20%)
28
+ text-shadow: 0 1px 3px scale_color($danger-color, $lightness: -50%)
29
+
30
+ &.success
31
+ background: $success-color
32
+ border: 1px solid scale_color($success-color, $lightness: 20%)
33
+ text-shadow: 0 1px 3px scale_color($success-color, $lightness: -50%)
@@ -0,0 +1,188 @@
1
+ // We use this to set the base for lots of form spacing and positioning styles
2
+ $form-spacing: rem-calc(16)
3
+ $label-font-size: rem-calc(14)
4
+ $input-font-size: rem-calc(14)
5
+ $form-element-margin: 0 0 ($form-spacing / 2) 0
6
+ $form-disabled-color: #777
7
+
8
+ =fustrate-forms
9
+ form
10
+ margin: 0 0 $form-spacing
11
+
12
+ label
13
+ font-size: $label-font-size
14
+ color: #4d4d4d
15
+ cursor: pointer
16
+ display: block
17
+ font-weight: normal
18
+ line-height: 1.5
19
+ margin-bottom: 0
20
+
21
+ &.inline
22
+ margin: $form-element-margin
23
+ padding: $form-spacing / 2 + rem-calc(1px) rem-calc(5px)
24
+ float: none !important
25
+ text-align: right
26
+ display: inline-block
27
+
28
+ select::-ms-expand
29
+ display: none
30
+
31
+ .prefix,
32
+ .postfix
33
+ display: block
34
+ position: relative
35
+ z-index: 2
36
+ text-align: center
37
+ width: 100%
38
+ padding-top: 0
39
+ padding-bottom: 0
40
+ overflow: hidden
41
+ font-size: $label-font-size
42
+ height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1))
43
+ line-height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1))
44
+ background: scale-color(#fff, $lightness: -5%)
45
+ border: 1px solid scale-color(#fff, $lightness: -20%)
46
+ color: #333
47
+
48
+ .prefix
49
+ border-right: none
50
+
51
+ .postfix
52
+ border-left: none
53
+
54
+ /* We use this to get basic styling on all basic form elements */
55
+ input[type="text"],
56
+ input[type="password"],
57
+ input[type="date"],
58
+ input[type="datetime"],
59
+ input[type="datetime-local"],
60
+ input[type="month"],
61
+ input[type="week"],
62
+ input[type="email"],
63
+ input[type="number"],
64
+ input[type="search"],
65
+ input[type="tel"],
66
+ input[type="time"],
67
+ input[type="url"],
68
+ textarea
69
+ -webkit-appearance: none
70
+ -webkit-border-radius: 0px
71
+ background-color: #fff
72
+ font-family: inherit
73
+ border: 1px solid scale-color(#fff, $lightness: -20%)
74
+ box-shadow: inset 0 1px 2px rgba(0,0,0,0.1)
75
+ color: #000
76
+ display: block
77
+ font-size: $input-font-size
78
+ margin: $form-element-margin
79
+ padding: $form-spacing / 2
80
+ height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1))
81
+ width: 100%
82
+ box-sizing: border-box
83
+ transition: box-shadow 450ms, border-color 450ms ease-in-out
84
+
85
+ &.inline
86
+ width: auto
87
+ display: inline-block
88
+
89
+ &:focus
90
+ background: #fff
91
+ border-color: scale-color(#fff, $lightness: -40%)
92
+ outline: none
93
+ box-shadow: 0 0 5px scale_color(#fff, $lightness: -40%)
94
+
95
+ &:disabled,
96
+ &[disabled],
97
+ &[readonly],
98
+ fieldset[disabled] &
99
+ background-color: #ddd
100
+ cursor: disabled
101
+ color: $form-disabled-color
102
+
103
+ td &:only-child,
104
+ th &:only-child
105
+ margin: 0
106
+
107
+ input[type="submit"]
108
+ -webkit-appearance: none
109
+ -webkit-border-radius: 0px
110
+
111
+ textarea
112
+ height: auto
113
+ min-height: 50px
114
+
115
+ /* Respect enforced amount of rows for textarea */
116
+ textarea[rows]
117
+ height: auto
118
+
119
+ /* Add height value for select elements to match text input height */
120
+ select
121
+ -webkit-appearance: none !important
122
+ -webkit-border-radius: 0px
123
+ background-color: #fff
124
+
125
+ // The custom arrow have some fake horizontal padding so we can align it
126
+ // from the right side of the element without relying on CSS3
127
+ background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+)
128
+ background-position: 100% center
129
+ background-repeat: no-repeat
130
+
131
+ border: 1px solid scale-color(#fff, $lightness: -20%)
132
+ padding: $form-spacing / 2
133
+ padding-right: 24px
134
+ font-size: $input-font-size
135
+ color: #000
136
+ line-height: normal
137
+ border-radius: 0
138
+ width: 100%
139
+
140
+ &.inline
141
+ width: auto
142
+ display: inline-block
143
+
144
+ &:hover
145
+ background-color: #fff
146
+
147
+ height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1))
148
+
149
+ &:disabled,
150
+ &[disabled],
151
+ &[disabled]:hover
152
+ background-color: #ddd
153
+ border-color: scale-color(#fff, $lightness: -20%)
154
+ cursor: disabled
155
+ color: $form-disabled-color
156
+
157
+ &[multiple]
158
+ height: auto
159
+ background-image: none
160
+
161
+ /* Adjust margin for form elements below */
162
+ input[type="file"],
163
+ input[type="checkbox"],
164
+ input[type="radio"],
165
+ select
166
+ margin: $form-element-margin
167
+
168
+ td &:only-child,
169
+ th &:only-child
170
+ margin: 0
171
+
172
+ input[type="checkbox"] + label,
173
+ input[type="radio"] + label
174
+ display: inline-block
175
+ margin-left: $form-spacing * .5
176
+ margin-right: $form-spacing
177
+ margin-bottom: 0
178
+ vertical-align: baseline
179
+
180
+ /* Normalize file input width */
181
+ input[type="file"]
182
+ width: 100%
183
+
184
+ input.error,
185
+ input.error:focus,
186
+ input.error:focus:hover
187
+ background: scale_color($red, $lightness: 90%)
188
+ border-color: scale_color($red, $lightness: 20%)