primordial 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- data/.gitignore +17 -0
- data/Gemfile +4 -0
- data/LICENSE.txt +25 -0
- data/README.md +29 -0
- data/Rakefile +1 -0
- data/app/assets/stylesheets/primordial.css.sass +24 -0
- data/app/assets/stylesheets/primordial/components/_alerts.css.sass +57 -0
- data/app/assets/stylesheets/primordial/components/_breadcrumbs.css.sass +21 -0
- data/app/assets/stylesheets/primordial/components/_button-groups.css.sass +212 -0
- data/app/assets/stylesheets/primordial/components/_buttons.css.sass +114 -0
- data/app/assets/stylesheets/primordial/components/_close.css.sass +30 -0
- data/app/assets/stylesheets/primordial/components/_forms.css.sass +332 -0
- data/app/assets/stylesheets/primordial/components/_input-groups.css.sass +119 -0
- data/app/assets/stylesheets/primordial/components/_labels.css.sass +48 -0
- data/app/assets/stylesheets/primordial/components/_lists.css.sass +44 -0
- data/app/assets/stylesheets/primordial/components/_media-object.css.sass +47 -0
- data/app/assets/stylesheets/primordial/components/_nav.css.sass +80 -0
- data/app/assets/stylesheets/primordial/components/_navbar.css.sass +274 -0
- data/app/assets/stylesheets/primordial/components/_pagination.css.sass +58 -0
- data/app/assets/stylesheets/primordial/components/_tables.css.sass +78 -0
- data/app/assets/stylesheets/primordial/core/_base.css.sass +59 -0
- data/app/assets/stylesheets/primordial/core/_mixins.css.sass +754 -0
- data/app/assets/stylesheets/primordial/core/_normalize.css.sass +365 -0
- data/app/assets/stylesheets/primordial/core/_typography.css.sass +198 -0
- data/app/assets/stylesheets/primordial/core/_variables.css.sass +563 -0
- data/lib/primordial.rb +14 -0
- data/lib/primordial/engine.rb +4 -0
- data/lib/primordial/version.rb +3 -0
- data/primordial.gemspec +26 -0
- metadata +139 -0
data/.gitignore
ADDED
data/Gemfile
ADDED
data/LICENSE.txt
ADDED
@@ -0,0 +1,25 @@
|
|
1
|
+
Copyright (c) 2013 Twitter, Inc
|
2
|
+
Copyright (c) 2013 John Koht
|
3
|
+
|
4
|
+
|
5
|
+
|
6
|
+
MIT License
|
7
|
+
|
8
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
9
|
+
a copy of this software and associated documentation files (the
|
10
|
+
"Software"), to deal in the Software without restriction, including
|
11
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
12
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
13
|
+
permit persons to whom the Software is furnished to do so, subject to
|
14
|
+
the following conditions:
|
15
|
+
|
16
|
+
The above copyright notice and this permission notice shall be
|
17
|
+
included in all copies or substantial portions of the Software.
|
18
|
+
|
19
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
20
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
21
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
22
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
23
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
24
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
25
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,29 @@
|
|
1
|
+
# Primordial
|
2
|
+
|
3
|
+
TODO: Write a gem description
|
4
|
+
|
5
|
+
## Installation
|
6
|
+
|
7
|
+
Add this line to your application's Gemfile:
|
8
|
+
|
9
|
+
gem 'primordial'
|
10
|
+
|
11
|
+
And then execute:
|
12
|
+
|
13
|
+
$ bundle
|
14
|
+
|
15
|
+
Or install it yourself as:
|
16
|
+
|
17
|
+
$ gem install primordial
|
18
|
+
|
19
|
+
## Usage
|
20
|
+
|
21
|
+
TODO: Write usage instructions here
|
22
|
+
|
23
|
+
## Contributing
|
24
|
+
|
25
|
+
1. Fork it
|
26
|
+
2. Create your feature branch (`git checkout -b my-new-feature`)
|
27
|
+
3. Commit your changes (`git commit -am 'Add some feature'`)
|
28
|
+
4. Push to the branch (`git push origin my-new-feature`)
|
29
|
+
5. Create new Pull Request
|
data/Rakefile
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
require "bundler/gem_tasks"
|
@@ -0,0 +1,24 @@
|
|
1
|
+
// Core
|
2
|
+
@import primordial/core/variables
|
3
|
+
@import primordial/core/normalize
|
4
|
+
@import primordial/core/mixins
|
5
|
+
@import primordial/core/base
|
6
|
+
@import primordial/core/typography
|
7
|
+
|
8
|
+
|
9
|
+
// Components
|
10
|
+
@import primordial/components/alerts
|
11
|
+
@import primordial/components/breadcrumbs
|
12
|
+
@import primordial/components/buttons
|
13
|
+
@import primordial/components/button-groups
|
14
|
+
@import primordial/components/close
|
15
|
+
@import primordial/components/forms
|
16
|
+
@import primordial/components/input-groups
|
17
|
+
@import primordial/components/labels
|
18
|
+
@import primordial/components/lists
|
19
|
+
@import primordial/components/media-object
|
20
|
+
@import primordial/components/nav
|
21
|
+
@import primordial/components/navbar
|
22
|
+
@import primordial/components/pagination
|
23
|
+
@import primordial/components/tables
|
24
|
+
|
@@ -0,0 +1,57 @@
|
|
1
|
+
//
|
2
|
+
// Alerts
|
3
|
+
// --------------------------------------------------
|
4
|
+
|
5
|
+
@if $use-alerts == true
|
6
|
+
|
7
|
+
// Base styles
|
8
|
+
// -------------------------
|
9
|
+
|
10
|
+
.alert
|
11
|
+
padding: $alert-padding
|
12
|
+
margin-bottom: $line-height-computed
|
13
|
+
border: 1px solid transparent
|
14
|
+
border-radius: $alert-border-radius
|
15
|
+
// Headings for larger alerts
|
16
|
+
h4
|
17
|
+
margin-top: 0
|
18
|
+
// Specified for the h4 to prevent conflicts of changing $headingsColor
|
19
|
+
color: inherit
|
20
|
+
// Provide class for links that match alerts
|
21
|
+
.alert-link
|
22
|
+
font-weight: $alert-link-font-weight
|
23
|
+
// Improve alignment and spacing of inner content
|
24
|
+
> p,
|
25
|
+
> ul
|
26
|
+
margin-bottom: 0
|
27
|
+
> p + p
|
28
|
+
margin-top: 5px
|
29
|
+
|
30
|
+
// Dismissable alerts
|
31
|
+
//
|
32
|
+
// Expand the right padding and account for the close button's positioning.
|
33
|
+
|
34
|
+
.alert-dismissable
|
35
|
+
padding-right: $alert-padding + 20
|
36
|
+
// Adjust close link position
|
37
|
+
.close
|
38
|
+
position: relative
|
39
|
+
top: -2px
|
40
|
+
right: -21px
|
41
|
+
color: inherit
|
42
|
+
|
43
|
+
// Alternate styles
|
44
|
+
//
|
45
|
+
// Generate contextual modifier classes for colorizing the alert.
|
46
|
+
|
47
|
+
.alert-success
|
48
|
+
+alert-variant($alert-success-bg, $alert-success-border, $alert-success-text)
|
49
|
+
|
50
|
+
.alert-info
|
51
|
+
+alert-variant($alert-info-bg, $alert-info-border, $alert-info-text)
|
52
|
+
|
53
|
+
.alert-warning
|
54
|
+
+alert-variant($alert-warning-bg, $alert-warning-border, $alert-warning-text)
|
55
|
+
|
56
|
+
.alert-danger
|
57
|
+
+alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text)
|
@@ -0,0 +1,21 @@
|
|
1
|
+
//
|
2
|
+
// Breadcrumbs
|
3
|
+
// --------------------------------------------------
|
4
|
+
|
5
|
+
@if $use-breadcrumbs == true
|
6
|
+
|
7
|
+
.breadcrumb
|
8
|
+
padding: 8px 15px
|
9
|
+
margin-bottom: $line-height-computed
|
10
|
+
list-style: none
|
11
|
+
background-color: $breadcrumb-bg
|
12
|
+
border-radius: $border-radius-base
|
13
|
+
> li
|
14
|
+
display: inline-block
|
15
|
+
& + li:before
|
16
|
+
content: "/\00a0"
|
17
|
+
// Unicode space added since inline-block means non-collapsing white-space
|
18
|
+
padding: 0 5px
|
19
|
+
color: $breadcrumb-color
|
20
|
+
> .active
|
21
|
+
color: $breadcrumb-active-color
|
@@ -0,0 +1,212 @@
|
|
1
|
+
//
|
2
|
+
// Button groups
|
3
|
+
// --------------------------------------------------
|
4
|
+
|
5
|
+
@if $use-button-groups == true
|
6
|
+
|
7
|
+
// Button carets
|
8
|
+
//
|
9
|
+
// Match the button text color to the arrow/caret for indicating dropdown-ness.
|
10
|
+
|
11
|
+
.caret
|
12
|
+
.btn-default &
|
13
|
+
border-top-color: $btn-default-color
|
14
|
+
.btn-primary &,
|
15
|
+
.btn-success &,
|
16
|
+
.btn-warning &,
|
17
|
+
.btn-danger &,
|
18
|
+
.btn-info &
|
19
|
+
border-top-color: #fff
|
20
|
+
|
21
|
+
.dropup
|
22
|
+
& .btn-default .caret
|
23
|
+
border-bottom-color: $btn-default-color
|
24
|
+
.btn-primary,
|
25
|
+
.btn-success,
|
26
|
+
.btn-warning,
|
27
|
+
.btn-danger,
|
28
|
+
.btn-info
|
29
|
+
.caret
|
30
|
+
border-bottom-color: #fff
|
31
|
+
|
32
|
+
// Make the div behave like a button
|
33
|
+
|
34
|
+
.btn-group,
|
35
|
+
.btn-group-vertical
|
36
|
+
position: relative
|
37
|
+
display: inline-block
|
38
|
+
vertical-align: middle
|
39
|
+
// match .btn alignment given font-size hack above
|
40
|
+
> .btn
|
41
|
+
position: relative
|
42
|
+
float: left
|
43
|
+
// Bring the "active" button to the front
|
44
|
+
&:hover,
|
45
|
+
&:focus,
|
46
|
+
&:active,
|
47
|
+
&.active
|
48
|
+
z-index: 2
|
49
|
+
&:focus
|
50
|
+
// Remove focus outline when dropdown JS adds it after closing the menu
|
51
|
+
outline: none
|
52
|
+
|
53
|
+
// Prevent double borders when buttons are next to each other
|
54
|
+
.btn-group
|
55
|
+
.btn + .btn,
|
56
|
+
.btn + .btn-group,
|
57
|
+
.btn-group + .btn,
|
58
|
+
.btn-group + .btn-group
|
59
|
+
margin-left: -1px
|
60
|
+
|
61
|
+
// Optional: Group multiple button groups together for a toolbar
|
62
|
+
.btn-toolbar
|
63
|
+
+clearfix
|
64
|
+
.btn-group
|
65
|
+
float: left
|
66
|
+
// Space out series of button groups
|
67
|
+
> .btn,
|
68
|
+
> .btn-group
|
69
|
+
+ .btn,
|
70
|
+
+ .btn-group
|
71
|
+
margin-left: 5px
|
72
|
+
|
73
|
+
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle)
|
74
|
+
border-radius: 0
|
75
|
+
|
76
|
+
// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
|
77
|
+
.btn-group > .btn:first-child
|
78
|
+
margin-left: 0
|
79
|
+
&:not(:last-child):not(.dropdown-toggle)
|
80
|
+
+border-right-radius(0)
|
81
|
+
|
82
|
+
// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
|
83
|
+
|
84
|
+
.btn-group > .btn:last-child:not(:first-child),
|
85
|
+
.btn-group > .dropdown-toggle:not(:first-child)
|
86
|
+
+border-left-radius(0)
|
87
|
+
|
88
|
+
// Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group)
|
89
|
+
.btn-group > .btn-group
|
90
|
+
float: left
|
91
|
+
|
92
|
+
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn
|
93
|
+
border-radius: 0
|
94
|
+
|
95
|
+
.btn-group > .btn-group:first-child
|
96
|
+
> .btn:last-child,
|
97
|
+
> .dropdown-toggle
|
98
|
+
+border-right-radius(0)
|
99
|
+
|
100
|
+
.btn-group > .btn-group:last-child > .btn:first-child
|
101
|
+
+border-left-radius(0)
|
102
|
+
|
103
|
+
// On active and open, don't show outline
|
104
|
+
|
105
|
+
.btn-group .dropdown-toggle:active,
|
106
|
+
.btn-group.open .dropdown-toggle
|
107
|
+
outline: 0
|
108
|
+
|
109
|
+
// Sizing
|
110
|
+
//
|
111
|
+
// Remix the default button sizing classes into new ones for easier manipulation.
|
112
|
+
|
113
|
+
.btn-group-xs > .btn
|
114
|
+
@extend .btn-xs
|
115
|
+
|
116
|
+
.btn-group-sm > .btn
|
117
|
+
@extend .btn-sm
|
118
|
+
|
119
|
+
.btn-group-lg > .btn
|
120
|
+
@extend .btn-lg
|
121
|
+
|
122
|
+
// Split button dropdowns
|
123
|
+
// ----------------------
|
124
|
+
|
125
|
+
// Give the line between buttons some depth
|
126
|
+
.btn-group > .btn + .dropdown-toggle
|
127
|
+
padding-left: 8px
|
128
|
+
padding-right: 8px
|
129
|
+
|
130
|
+
.btn-group > .btn-lg + .dropdown-toggle
|
131
|
+
padding-left: 12px
|
132
|
+
padding-right: 12px
|
133
|
+
|
134
|
+
// The clickable button for toggling the menu
|
135
|
+
// Remove the gradient and set the same inset shadow as the :active state
|
136
|
+
.btn-group.open .dropdown-toggle
|
137
|
+
+box-shadow(inset 0 3px 5px rgba(0, 0, 0, 0.125))
|
138
|
+
|
139
|
+
// Reposition the caret
|
140
|
+
.btn .caret
|
141
|
+
margin-left: 0
|
142
|
+
|
143
|
+
// // Carets in other button sizes
|
144
|
+
// .btn-lg .caret
|
145
|
+
// border-width: $caret-width-large $caret-width-large 0
|
146
|
+
// border-bottom-width: 0
|
147
|
+
|
148
|
+
// // Upside down carets for .dropup
|
149
|
+
// .dropup .btn-lg .caret
|
150
|
+
// border-width: 0 $caret-width-large $caret-width-large
|
151
|
+
|
152
|
+
// Vertical button groups
|
153
|
+
// ----------------------
|
154
|
+
|
155
|
+
.btn-group-vertical
|
156
|
+
> .btn,
|
157
|
+
> .btn-group
|
158
|
+
display: block
|
159
|
+
float: none
|
160
|
+
width: 100%
|
161
|
+
max-width: 100%
|
162
|
+
// Clear floats so dropdown menus can be properly placed
|
163
|
+
> .btn-group
|
164
|
+
+clearfix
|
165
|
+
> .btn
|
166
|
+
float: none
|
167
|
+
> .btn + .btn,
|
168
|
+
> .btn + .btn-group,
|
169
|
+
> .btn-group + .btn,
|
170
|
+
> .btn-group + .btn-group
|
171
|
+
margin-top: -1px
|
172
|
+
margin-left: 0
|
173
|
+
|
174
|
+
.btn-group-vertical > .btn
|
175
|
+
&:not(:first-child):not(:last-child)
|
176
|
+
border-radius: 0
|
177
|
+
&:first-child:not(:last-child)
|
178
|
+
border-top-right-radius: $border-radius-base
|
179
|
+
+border-bottom-radius(0)
|
180
|
+
&:last-child:not(:first-child)
|
181
|
+
border-bottom-left-radius: $border-radius-base
|
182
|
+
+border-top-radius(0)
|
183
|
+
|
184
|
+
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn
|
185
|
+
border-radius: 0
|
186
|
+
|
187
|
+
.btn-group-vertical > .btn-group:first-child
|
188
|
+
> .btn:last-child,
|
189
|
+
> .dropdown-toggle
|
190
|
+
+border-bottom-radius(0)
|
191
|
+
|
192
|
+
.btn-group-vertical > .btn-group:last-child > .btn:first-child
|
193
|
+
+border-top-radius(0)
|
194
|
+
|
195
|
+
// Justified button groups
|
196
|
+
// ----------------------
|
197
|
+
|
198
|
+
.btn-group-justified
|
199
|
+
display: table
|
200
|
+
width: 100%
|
201
|
+
table-layout: fixed
|
202
|
+
border-collapse: separate
|
203
|
+
.btn
|
204
|
+
float: none
|
205
|
+
display: table-cell
|
206
|
+
width: 1%
|
207
|
+
|
208
|
+
// Checkbox and radio options
|
209
|
+
|
210
|
+
[data-toggle="buttons"] > .btn > input[type="radio"],
|
211
|
+
[data-toggle="buttons"] > .btn > input[type="checkbox"]
|
212
|
+
display: none
|
@@ -0,0 +1,114 @@
|
|
1
|
+
//
|
2
|
+
// Buttons
|
3
|
+
// --------------------------------------------------
|
4
|
+
|
5
|
+
@if $use-buttons == true
|
6
|
+
|
7
|
+
// Base styles
|
8
|
+
// --------------------------------------------------
|
9
|
+
|
10
|
+
// Core styles
|
11
|
+
.btn
|
12
|
+
+user-select(none)
|
13
|
+
display: inline-block
|
14
|
+
padding: 6px 12px
|
15
|
+
margin-bottom: 0
|
16
|
+
// For input.btn
|
17
|
+
font-size: $font-size-base
|
18
|
+
font-weight: normal
|
19
|
+
line-height: $line-height-base
|
20
|
+
text-align: center
|
21
|
+
vertical-align: middle
|
22
|
+
cursor: pointer
|
23
|
+
border: 1px solid transparent
|
24
|
+
border-radius: $border-radius-base
|
25
|
+
white-space: nowrap
|
26
|
+
|
27
|
+
&:hover,
|
28
|
+
&:focus
|
29
|
+
text-decoration: none
|
30
|
+
|
31
|
+
&:active,
|
32
|
+
&.active
|
33
|
+
background-image: none
|
34
|
+
outline: 0
|
35
|
+
|
36
|
+
&.disabled,
|
37
|
+
&[disabled],
|
38
|
+
fieldset[disabled] &
|
39
|
+
// Future-proof disabling of clicks
|
40
|
+
+opacity(0.65)
|
41
|
+
+box-shadow(none)
|
42
|
+
cursor: not-allowed
|
43
|
+
pointer-events: none
|
44
|
+
|
45
|
+
|
46
|
+
// // Alternate buttons
|
47
|
+
// // --------------------------------------------------
|
48
|
+
|
49
|
+
.btn-primary
|
50
|
+
background
|
51
|
+
|
52
|
+
.btn-default
|
53
|
+
+button-variant($btn-default-color, $btn-default-bg, $btn-default-border)
|
54
|
+
|
55
|
+
.btn-primary
|
56
|
+
+button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border)
|
57
|
+
|
58
|
+
// Warning appears as orange
|
59
|
+
.btn-warning
|
60
|
+
+button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border)
|
61
|
+
|
62
|
+
// Danger and error appear as red
|
63
|
+
.btn-danger
|
64
|
+
+button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border)
|
65
|
+
|
66
|
+
// Success appears as green
|
67
|
+
.btn-success
|
68
|
+
+button-variant($btn-success-color, $btn-success-bg, $btn-success-border)
|
69
|
+
|
70
|
+
// Info appears as blue-green
|
71
|
+
.btn-info
|
72
|
+
+button-variant($btn-info-color, $btn-info-bg, $btn-info-border)
|
73
|
+
|
74
|
+
|
75
|
+
|
76
|
+
// // Button Sizes
|
77
|
+
// // --------------------------------------------------
|
78
|
+
|
79
|
+
.btn-lg
|
80
|
+
padding: 10px 20px
|
81
|
+
font-size: $font-size-large
|
82
|
+
line-height: $line-height-large
|
83
|
+
|
84
|
+
.btn-sm,
|
85
|
+
.btn-xs
|
86
|
+
padding: 4px 6px
|
87
|
+
font-size: $font-size-small
|
88
|
+
line-height: $line-height-small
|
89
|
+
|
90
|
+
.btn-xs
|
91
|
+
padding: 1px 5px
|
92
|
+
|
93
|
+
|
94
|
+
|
95
|
+
// // Block button
|
96
|
+
// // --------------------------------------------------
|
97
|
+
|
98
|
+
.btn-block
|
99
|
+
display: block
|
100
|
+
width: 100%
|
101
|
+
padding-left: 0
|
102
|
+
padding-right: 0
|
103
|
+
|
104
|
+
// Vertically space out multiple block buttons
|
105
|
+
.btn-block + .btn-block
|
106
|
+
margin-top: 5px
|
107
|
+
|
108
|
+
// Specificity overrides
|
109
|
+
|
110
|
+
input[type="submit"],
|
111
|
+
input[type="reset"],
|
112
|
+
input[type="button"]
|
113
|
+
&.btn-block
|
114
|
+
width: 100%
|