rapido-css 0.0.1 → 0.0.2.1

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 (40) hide show
  1. data/README.mkdn +1 -2
  2. data/stylesheets/_rapido.scss +50 -3
  3. data/stylesheets/_susy.scss +1 -1
  4. data/stylesheets/components/_alerts.scss +8 -8
  5. data/stylesheets/components/_breadcrumbs.scss +3 -3
  6. data/stylesheets/components/_button-groups.scss +6 -9
  7. data/stylesheets/components/_buttons.scss +75 -74
  8. data/stylesheets/components/_captions.scss +4 -0
  9. data/stylesheets/components/_close.scss +3 -3
  10. data/stylesheets/components/_dropdowns.scss +10 -57
  11. data/stylesheets/components/_forms.scss +279 -439
  12. data/stylesheets/components/_labels.scss +39 -0
  13. data/stylesheets/components/_modals.scss +29 -13
  14. data/stylesheets/components/_navs.scss +55 -57
  15. data/stylesheets/components/_pager.scss +13 -10
  16. data/stylesheets/components/_pagination.scss +29 -24
  17. data/stylesheets/components/_responsive-navs.scss +5 -0
  18. data/stylesheets/components/_sliders.scss +40 -35
  19. data/stylesheets/components/_tables.scss +29 -31
  20. data/stylesheets/components/_tabs.scss +4 -0
  21. data/stylesheets/components/_type.scss +76 -60
  22. data/stylesheets/settings/_base.scss +17 -10
  23. data/stylesheets/settings/_colors.scss +4 -4
  24. data/stylesheets/settings/_components.scss +7 -8
  25. data/stylesheets/settings/_dimensions.scss +9 -7
  26. data/stylesheets/settings/_effects.scss +8 -5
  27. data/stylesheets/utilities/_animations.scss +15 -7
  28. data/stylesheets/utilities/_debug.scss +4 -0
  29. data/stylesheets/utilities/_helper-classes.scss +14 -1
  30. data/stylesheets/utilities/_icon-fonts.scss +33 -8
  31. data/stylesheets/utilities/_media-queries.scss +5 -0
  32. data/stylesheets/utilities/_mixins.scss +78 -103
  33. data/stylesheets/utilities/_sprites.scss +5 -9
  34. metadata +3 -8
  35. data/stylesheets/_components.scss +0 -24
  36. data/stylesheets/_settings.scss +0 -5
  37. data/stylesheets/_utilities.scss +0 -8
  38. data/stylesheets/components/_images.scss +0 -0
  39. data/stylesheets/components/_pills.scss +0 -91
  40. data/stylesheets/utilities/_retina-sprites.scss +0 -70
@@ -1,21 +1,18 @@
1
- //
2
- // Tables
3
- // --------------------------------------------------
1
+ // ====================================================================================================================
2
+ // TABLES
3
+ // ====================================================================================================================
4
4
 
5
5
  @if $tables {
6
6
 
7
- // BASE TABLES
8
- // -----------------
9
-
7
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
8
+ // Base
9
+ // --------------------------------------------------------------------------------------------------------------------
10
10
  table {
11
11
  max-width: 100%;
12
12
  border-collapse: collapse;
13
13
  border-spacing: 0;
14
14
  }
15
15
 
16
- // BASELINE STYLES
17
- // ---------------
18
-
19
16
  .table {
20
17
  width: 100%;
21
18
  margin-bottom: rhythm(1);
@@ -46,19 +43,20 @@
46
43
 
47
44
  }
48
45
 
46
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
47
+ // Condensed Table w/ Half Padding
48
+ // --------------------------------------------------------------------------------------------------------------------
49
+ .table--condensed {
50
+ $half-top: nth($tables-padding, 1) / 2;
51
+ $half-side: nth($tables-padding, 2) / 2;
49
52
 
50
-
51
- // CONDENSED TABLE W/ HALF PADDING
52
- // -------------------------------
53
- .table-condensed {
54
- th,
55
- td { padding: em(4px) em(5px); }
53
+ th, td { padding: $half-top $half-side; }
56
54
  }
57
55
 
58
- // ZEBRA-STRIPING
59
- // --------------
60
- .table-striped {
61
- @extend .table;
56
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
57
+ // Zebra-striping
58
+ // --------------------------------------------------------------------------------------------------------------------
59
+ .table--striped {
62
60
  tbody {
63
61
  > tr:nth-child(odd) > td,
64
62
  > tr:nth-child(odd) > th {
@@ -67,19 +65,19 @@
67
65
  }
68
66
  }
69
67
 
70
-
71
- // BORDERED VERSION
72
- // ----------------
73
-
74
- .table-bordered {
68
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
69
+ // Bordered Version
70
+ // --------------------------------------------------------------------------------------------------------------------
71
+ .table--bordered {
75
72
  @extend .table;
76
73
  @extend %table-bordered !optional;
77
74
  }
78
75
 
76
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
77
+ // Hover effect
78
+ // --------------------------------------------------------------------------------------------------------------------
79
79
 
80
- // HOVER EFFECT
81
- // ------------
82
- .table-hover {
80
+ .table--hover {
83
81
  @extend .table;
84
82
  tbody {
85
83
  tr:hover > td,
@@ -89,10 +87,10 @@
89
87
  }
90
88
  }
91
89
 
92
- // STUPID TABLE
93
- // ---------------
94
- .table-sortable {
95
- @extend .table;
90
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
91
+ // Sortable w/ StupidTable (https://github.com/joequery/Stupid-Table-Plugin)
92
+ // --------------------------------------------------------------------------------------------------------------------
93
+ .table--sortable {
96
94
  @extend %table-sortable !optional;
97
95
 
98
96
  thead {
@@ -1,3 +1,7 @@
1
+ // ====================================================================================================================
2
+ // TABS w/ EasyTabs (https://github.com/JangoSteve/jQuery-EasyTabs)
3
+ // ====================================================================================================================
4
+
1
5
  @if $tabs {
2
6
 
3
7
  .tab-container {
@@ -1,15 +1,21 @@
1
- // Scaffolding
2
- // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
1
+ // ====================================================================================================================
2
+ // SCAFFOLDING
3
+ // ====================================================================================================================
4
+
5
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
6
+ // Base
7
+ // --------------------------------------------------------------------------------------------------------------------
8
+
3
9
  *, *:before, *:after {@include box-sizing(border-box); outline: none;}
4
10
 
5
11
  html {
6
12
  @if $responsive-font-size {
7
13
 
8
- @each $step in $responsive-font-size {
9
- @include media(nth($step, 1)) {
10
- font-size: 100% * nth($step, 2) / 16px;
11
- }
12
- }
14
+ @each $step in $responsive-font-size {
15
+ @include media(nth($step, 1)) {
16
+ font-size: 100% * nth($step, 2) / 16px;
17
+ }
18
+ }
13
19
 
14
20
  } @else {
15
21
  font-size: 100% * $base-font-size / 16px;
@@ -28,9 +34,9 @@ img {max-width: 100%;}
28
34
 
29
35
  a, button, textarea, input { outline: none; }
30
36
 
31
-
37
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
32
38
  // Links
33
- // -------------------------
39
+ // --------------------------------------------------------------------------------------------------------------------
34
40
  a {
35
41
  color: $link-color;
36
42
  text-decoration: none;
@@ -42,37 +48,39 @@ a:focus {
42
48
  }
43
49
 
44
50
 
45
-
51
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
46
52
  // Body text
47
- // -------------------------
53
+ // --------------------------------------------------------------------------------------------------------------------
48
54
 
49
- p {
50
- margin: 0 0 rhythm(1);
51
- }
55
+ p { margin: 0 0 rhythm(1);}
52
56
 
53
- .lead { @include adjust-font-size-to($h4-size); }
57
+ .lead { @include adjust-font-size-to($h4-size); }
54
58
 
55
- .muted { color: $gray;}
59
+ .muted { color: $gray; }
56
60
 
57
- .pull-left {float: left;}
58
- .pull-right {float: right;}
59
- .clearfix { @include clearfix;}
61
+ .pull-left { float: left; }
62
+ .pull-right { float: right; }
63
+ .clearfix { @include clearfix; }
60
64
 
65
+
66
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
61
67
  // Emphasis & misc
62
- // -------------------------
63
- small { @include adjust-font-size-to($milli-size); }
68
+ // --------------------------------------------------------------------------------------------------------------------
69
+
70
+ small { @include adjust-font-size-to($milli-size); }
64
71
 
65
- strong { font-weight: bold; }
66
- em { font-style: italic; }
67
- cite { font-style: normal; }
72
+ strong { font-weight: bold; }
73
+ em { font-style: italic; }
74
+ cite { font-style: normal; }
68
75
 
69
- .text-left { text-align: left; }
70
- .text-right { text-align: right; }
71
- .text-center { text-align: center; }
76
+ .text-left { text-align: left; }
77
+ .text-right { text-align: right; }
78
+ .text-center { text-align: center; }
72
79
 
73
80
 
81
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
74
82
  // Headings
75
- // -------------------------
83
+ // --------------------------------------------------------------------------------------------------------------------
76
84
 
77
85
  h1,
78
86
  h2,
@@ -80,13 +88,13 @@ h3,
80
88
  h4,
81
89
  h5,
82
90
  h6 {
83
- margin: 0 0 1em;
91
+ margin: 0 0 rhythm();
84
92
  text-rendering: optimizelegibility;
85
93
  @if $titles-font-family { font-family: $titles-font-family; }
86
94
 
87
95
  small {
88
96
  font-weight: normal;
89
- line-height: 1;
97
+ line-height: rhythm();
90
98
  color: $grayLight;
91
99
  }
92
100
  }
@@ -128,8 +136,10 @@ h2 small { @include adjust-font-size-to($h4-size); }
128
136
  h3 small { @include adjust-font-size-to($h5-size); }
129
137
  h4 small { @include adjust-font-size-to($h6-size); }
130
138
 
139
+
140
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
131
141
  // Lists
132
- // --------------------------------------------------
142
+ // --------------------------------------------------------------------------------------------------------------------
133
143
 
134
144
  .list_style_none, .list-style-none {
135
145
  padding-left: 0;
@@ -138,6 +148,7 @@ h4 small { @include adjust-font-size-to($h6-size); }
138
148
  }
139
149
 
140
150
  // Unordered and Ordered lists
151
+ // --------------------------------------------------------------------------------------------------------------------
141
152
  ul, ol {
142
153
  padding: 0;
143
154
  margin: 0 0 rhythm(1) 25px;
@@ -161,14 +172,14 @@ ol.inline {
161
172
  margin-left: 0;
162
173
  list-style: none;
163
174
  > li {
164
- @include inline-block();
165
- padding-left: 5px;
166
- padding-right: 5px;
175
+ @include inline-block();
176
+ padding-left: 5px;
177
+ padding-right: 5px;
167
178
  }
168
179
  }
169
180
 
170
181
  // Description lists
171
-
182
+ // --------------------------------------------------------------------------------------------------------------------
172
183
  dl { margin-bottom: rhythm(1); }
173
184
  dt,
174
185
  dd { line-height: rhythm(1); }
@@ -179,18 +190,19 @@ dd { margin-left: rhythm(.5); }
179
190
  .dl-horizontal {
180
191
  @extend .clearfix;
181
192
  dt {
182
- float: left;
183
- width: em($horizontal-offset) - 20;
184
- clear: left;
185
- text-align: right;
186
- @include text-overflow();
193
+ float: left;
194
+ width: em($horizontal-offset) - 20;
195
+ clear: left;
196
+ text-align: right;
197
+ @include text-overflow();
187
198
  }
188
199
 
189
200
  dd { margin-left: em($horizontal-offset); }
190
201
  }
191
202
 
203
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
192
204
  // MISC
193
- // ----
205
+ // --------------------------------------------------------------------------------------------------------------------
194
206
 
195
207
  hr {
196
208
  margin: rhythm(1) 0;
@@ -199,6 +211,7 @@ hr {
199
211
  }
200
212
 
201
213
  // Abbreviations and acronyms
214
+ // --------------------------------------------------------------------------------------------------------------------
202
215
  abbr[title],
203
216
  abbr[data-original-title] {
204
217
  cursor: help;
@@ -210,6 +223,7 @@ abbr.initialism {
210
223
  }
211
224
 
212
225
  // Blockquotes
226
+ // --------------------------------------------------------------------------------------------------------------------
213
227
  blockquote {
214
228
  padding: 0 0 0 rhythm(1);
215
229
  margin: 0;
@@ -218,7 +232,7 @@ blockquote {
218
232
 
219
233
  p {
220
234
  margin-bottom: 0;
221
- font-weight: 300;
235
+ font-weight: 300;
222
236
  }
223
237
 
224
238
  small {
@@ -229,27 +243,28 @@ blockquote {
229
243
  }
230
244
  }
231
245
 
232
- // Float right with text-align: right
233
- &.pull-right {
234
- float: right;
235
- padding-right: 15px;
236
- padding-left: 0;
237
- border-right: 5px solid $grayLighter;
238
- border-left: 0;
239
-
240
- p,
241
- small {
242
- text-align: right;
243
- }
244
-
245
- small {
246
- &:before { content: ''; }
247
- &:after { content: '\00A0 \2014'; }
248
- }
249
- }
246
+ &.pull-right {
247
+ float: right;
248
+ padding-right: 15px;
249
+ padding-left: 0;
250
+ border-right: 5px solid $grayLighter;
251
+ border-left: 0;
252
+
253
+ p,
254
+ small {
255
+ text-align: right;
256
+ }
257
+
258
+ small {
259
+ &:before { content: ''; }
260
+ &:after { content: '\00A0 \2014'; }
261
+ }
262
+ }
250
263
  }
251
264
 
252
265
  // Quotes
266
+ // --------------------------------------------------------------------------------------------------------------------
267
+
253
268
  q:before,
254
269
  q:after,
255
270
  blockquote:before,
@@ -258,6 +273,7 @@ blockquote:after {
258
273
  }
259
274
 
260
275
  // Addresses
276
+ // --------------------------------------------------------------------------------------------------------------------
261
277
  address {
262
278
  display: block;
263
279
  margin-bottom: rhythm(1);
@@ -1,22 +1,29 @@
1
+ // ====================================================================================================================
2
+ // BASE Settings
3
+ // ====================================================================================================================
4
+
5
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
6
+ // Debug Mode
7
+ // --------------------------------------------------------------------------------------------------------------------
1
8
 
2
- // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
3
- // DEBUG MODE
4
- // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
5
9
  $debug-mode: false !default;
6
10
  $default-styles: true !default;
7
11
 
8
- // FONTS
12
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
13
+ // Text body size
9
14
  // --------------------------------------------------------------------------------------------------------------------
15
+
10
16
  $base-font-size: 14px !default;
11
17
  $base-line-height: 20px !default;
12
18
  $round-to-nearest-half-line: true !default;
13
19
 
14
- // Cambia dimension dispositivi
15
- // --------------------------------------------------------------------------------------------------------------------
20
+ // Change text size with media query
16
21
  $responsive-font-size: lap-and-up $base-font-size, palm 16px !default;
17
22
 
18
- // Font-families di default
23
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
24
+ // Font families
19
25
  // --------------------------------------------------------------------------------------------------------------------
26
+
20
27
  $font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
21
28
  $font-serif: Georgia, "Times New Roman", Times, serif !default;
22
29
  $font-mono: Monaco, Menlo, Consolas, "Courier New", monospace !default;
@@ -24,9 +31,9 @@ $font-mono: Monaco, Menlo, Consolas, "Courier New", monospace !
24
31
  $base-font-family: $font-sans !default;
25
32
  $titles-font-family: '' !default;
26
33
 
27
- // Calcolo EM
34
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
35
+ // Convert to Ems
28
36
  // --------------------------------------------------------------------------------------------------------------------
29
37
  @function em($to-size, $from-size: $base-font-size) {
30
38
  @return ($to-size / $from-size) + 0em;
31
- }
32
-
39
+ }
@@ -1,7 +1,7 @@
1
+ // ====================================================================================================================
2
+ // BASE COLORS
3
+ // ====================================================================================================================
1
4
 
2
- // ********************************************************************************************************************
3
- // COLORI BASE
4
- // ********************************************************************************************************************
5
5
  $black: #000;
6
6
  $grayDarker: lighten($black, 15);
7
7
  $grayDark: lighten($black, 30);
@@ -11,6 +11,6 @@ $grayLighter: lighten($black, 95);
11
11
  $white: lighten($black, 100);
12
12
 
13
13
  $text-color: #333 !default;
14
-
14
+
15
15
  $link-color: #0066cc !default;
16
16
  $link-color-hover: darken($link-color, 10%) !default;
@@ -1,7 +1,6 @@
1
-
2
- // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
3
- // Enable Components
4
- // --------------------------------------------------------------------------------------------------------------------
1
+ // ====================================================================================================================
2
+ // ENABLE COMPONENTS
3
+ // ====================================================================================================================
5
4
 
6
5
  $alerts: true !default;
7
6
  $breadcrumbs: true !default;
@@ -13,15 +12,15 @@ $dropdowns: true !default;
13
12
 
14
13
  $forms: true !default;
15
14
  $forms-append: true !default;
16
- $forms-inline: true !default;
17
- $forms-horizontal: true !default;
15
+ $forms-inline: true !default;
16
+ $forms-aligned: true !default;
18
17
  $forms-columns: true !default;
19
18
 
20
19
  $modals: true !default;
21
20
  $navs: true !default;
22
21
  $pager: true !default;
23
22
  $pagination: true !default;
24
- $pills: true !default;
23
+ $labels: true !default;
25
24
  $responsive-navs: true !default;
26
25
  $tables: true !default;
27
26
 
@@ -31,7 +30,7 @@ $modal: true !default;
31
30
  $modal-buttons: true !default;
32
31
  $modal-thumbs: true !default;
33
32
 
34
-
33
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
35
34
  // Icon Fonts
36
35
  // --------------------------------------------------------------------------------------------------------------------
37
36
  $use-fontawesome: true !default;