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
data/README.mkdn CHANGED
@@ -17,5 +17,4 @@ It's still a early alpha, when I'll fixed the majority of the bugs I'll write so
17
17
 
18
18
  == Copyright
19
19
 
20
- Copyright (c) 2013 Raffaele Rasini. See LICENSE.txt for
21
- further details.
20
+ Copyright (c) 2013 Raffaele Rasini. See LICENSE.txt for further details.
data/stylesheets/_rapido.scss CHANGED
@@ -1,12 +1,59 @@
1
1
 
2
+ // Normalize
3
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
2
4
  @import "normalize";
5
+
6
+ // Functions
7
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
3
8
  @import "functions";
4
- @import "settings";
5
9
 
10
+ // Settings
11
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
12
+ @import "settings/base";
13
+ @import "settings/colors";
14
+ @import "settings/dimensions";
15
+ @import "settings/components";
16
+ @import "settings/effects";
17
+
18
+ // External Frameworks
19
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
6
20
  @import "compass";
7
21
  @import "susy";
8
22
 
9
- @import "utilities";
10
- @import "components";
23
+ // Utilities
24
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
25
+ @import "utilities/mixins";
26
+ @import "utilities/media-queries";
27
+ @import "utilities/helper-classes";
28
+ @import "utilities/debug";
29
+ @import "utilities/animations";
30
+ @import "utilities/icon-fonts";
31
+
32
+ // Components
33
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
34
+ @import "components/type";
35
+ @import "components/forms";
36
+ @import "components/tables";
37
+ @import "components/captions";
38
+
39
+ @import "components/buttons";
40
+ @import "components/button-groups";
41
+ @import "components/dropdowns";
42
+ @import "components/labels";
43
+ @import "components/close";
44
+
45
+ @import "components/navs";
46
+ @import "components/responsive-navs";
47
+ @import "components/breadcrumbs";
48
+ @import "components/pagination";
49
+ @import "components/pager";
50
+
51
+ @import "components/alerts";
52
+
53
+ @import "components/modals";
54
+ @import "components/sliders";
55
+ @import "components/tabs";
11
56
 
57
+ // Default styles
58
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
12
59
  @import "default-styles";
data/stylesheets/_susy.scss CHANGED
@@ -1,4 +1,4 @@
1
- // ---------------------------------------------------------------------------
1
+ // -----------------------------------------------------------------------------------------------------------------------------
2
2
  // Partials
3
3
 
4
4
  // temporary
data/stylesheets/components/_alerts.scss CHANGED
@@ -1,9 +1,9 @@
1
- //
2
- // Alerts
3
- // --------------------------------------------------
1
+ // ====================================================================================================================
2
+ // ALERTS
3
+ // ====================================================================================================================
4
4
 
5
5
  @if $alerts {
6
- [class^="alert"] {
6
+ .alert {
7
7
  padding: $alerts-padding;
8
8
  margin-bottom: rhythm();
9
9
  @extend %alert;
@@ -15,10 +15,10 @@
15
15
  top: 0;
16
16
  right: 0;
17
17
  }
18
+ }
18
19
 
19
- &[class*="-block"] {
20
- p, ul { margin-bottom: 0; }
21
- p + p { margin-top: 5px; }
22
- }
20
+ .alert--block {
21
+ p, ul { margin-bottom: 0; }
22
+ p + p { margin-top: 5px; }
23
23
  }
24
24
  }
data/stylesheets/components/_breadcrumbs.scss CHANGED
@@ -1,6 +1,6 @@
1
- //
2
- // Breadcrumbs
3
- // --------------------------------------------------
1
+ // ====================================================================================================================
2
+ // BREADCRUMBS
3
+ // ====================================================================================================================
4
4
 
5
5
  @if $breadcrumbs {
6
6
  .breadcrumb {
data/stylesheets/components/_button-groups.scss CHANGED
@@ -1,6 +1,6 @@
1
- //
2
- // Button groups
3
- // --------------------------------------------------
1
+ // ====================================================================================================================
2
+ // BUTTON GROUPS
3
+ // ====================================================================================================================
4
4
  @if $button-groups {
5
5
  .btn-group {
6
6
  @extend .clearfix;
@@ -15,11 +15,12 @@
15
15
  display: inline-block;
16
16
  }
17
17
 
18
-
19
18
  // Space multiple inline groups
19
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
20
20
  + .btn-group { margin-left: em(5px); }
21
21
 
22
22
  // Float button and reapply border radius
23
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
23
24
  > .btn,
24
25
  > li .btn {
25
26
  @include border-radius(0);
@@ -49,6 +50,7 @@
49
50
 
50
51
 
51
52
  // On hover/focus/active, bring the proper btn to front
53
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
52
54
  > .btn:hover,
53
55
  > .btn:focus,
54
56
  > .btn:active,
@@ -56,10 +58,5 @@
56
58
  z-index: 2;
57
59
  }
58
60
 
59
- // // On active and open, don't show outline
60
- // .dropdown-toggle:active,
61
- // &.open .dropdown-toggle {
62
- // outline: 0;
63
- // }
64
61
  }
65
62
  }
data/stylesheets/components/_buttons.scss CHANGED
@@ -1,16 +1,14 @@
1
- //
2
- // Buttons
3
- // --------------------------------------------------
1
+ // ====================================================================================================================
2
+ // BUTTONS
3
+ // ====================================================================================================================
4
4
 
5
+ @if $buttons {
5
6
 
6
- // Base styles
7
- // --------------------------------------------------
7
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
8
+ // Base
9
+ // --------------------------------------------------------------------------------------------------------------------
8
10
 
9
- @if $buttons {
10
- // Core
11
- // .btn, a[class*="btn"], button[class*="btn"], input[class*="btn"] {
12
- // [class^="btn"] {
13
- [class*="btn"] {
11
+ .btn {
14
12
  @include border-radius($base-border-radius);
15
13
  border-style: solid;
16
14
  border-width: $input-border;
@@ -33,89 +31,92 @@
33
31
  @include opacity(65);
34
32
  @include box-shadow(none);
35
33
  }
34
+ }
36
35
 
37
36
 
38
- // Button Colors
39
- // --------------------------------------------------
40
- & { @extend %btn !optional; }
41
- &[class*="-primary"] { @extend %btn-primary !optional; }
42
- &[class*="-secondary"] { @extend %btn-secondary !optional; }
43
- &[class*="-warning"] { @extend %btn-warning !optional; }
44
- &[class*="-danger"] { @extend %btn-danger !optional; }
45
- &[class*="-info"] { @extend %btn-info !optional; }
46
- &[class*="-success"] { @extend %btn-success !optional; }
47
- &[class*="-inverse"] { @extend %btn-inverse !optional; }
48
-
49
- // Button Sizes
50
- // --------------------------------------------------
51
- & {
52
- height: $input-height;
53
- padding: $btn-padding;
54
- }
37
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
38
+ // Button Colors
39
+ // --------------------------------------------------------------------------------------------------------------------
55
40
 
56
- &[class*="-large"],
57
- &[class*="-small"],
58
- &[class*="-mini"] {
59
- height: auto;
60
- }
41
+ .btn { @extend %btn !optional; }
42
+ .btn--primary { @extend %btn-primary !optional; }
43
+ .btn--secondary { @extend %btn-secondary !optional; }
44
+ .btn--warning { @extend %btn-warning !optional; }
45
+ .btn--danger { @extend %btn-danger !optional; }
46
+ .btn--info { @extend %btn-info !optional; }
47
+ .btn--success { @extend %btn-success !optional; }
48
+ .btn--inverse { @extend %btn-inverse !optional; }
61
49
 
62
- &[class*="-large"] {
63
- @include adjust-font-size-to($h5-size);
64
- padding: $btn-large-padding;
65
- }
50
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
51
+ // Button Sizes
52
+ // --------------------------------------------------------------------------------------------------------------------
66
53
 
67
- &[class*="-small"] {
68
- @include adjust-font-size-to($milli-size);
69
- padding: $btn-small-padding;
70
- }
54
+ .btn {
55
+ height: $input-height;
56
+ padding: $btn-padding;
57
+ }
71
58
 
72
- &[class*="-mini"] {
73
- @include adjust-font-size-to($micro-size);
74
- padding: $btn-mini-padding;
75
- }
59
+ .btn--large, .btn--small, .btn--mini {
60
+ height: auto;
61
+ }
76
62
 
77
- // Block button
78
- // -------------------------
63
+ .btn--large {
64
+ @include adjust-font-size-to($h5-size);
65
+ padding: $btn-large-padding;
66
+ }
79
67
 
80
- &[class*="-block"] {
81
- display: block;
82
- width: 100%;
83
- padding-left: 0;
84
- padding-right: 0;
85
- }
68
+ .btn--small {
69
+ @include adjust-font-size-to($milli-size);
70
+ padding: $btn-small-padding;
71
+ }
86
72
 
87
- &[class*="-block"] + [class^="btn"][class*="-block"] {
73
+ .btn--mini {
74
+ @include adjust-font-size-to($micro-size);
75
+ padding: $btn-mini-padding;
76
+ }
77
+
78
+
79
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
80
+ // Block button
81
+ // --------------------------------------------------------------------------------------------------------------------
82
+ .button--block {
83
+ display: block;
84
+ width: 100%;
85
+ padding-left: 0;
86
+ padding-right: 0;
87
+
88
+ + .button--block {
88
89
  margin-top: rhythm(.5);
89
90
  }
90
91
 
91
- // Link buttons
92
- // --------------------------------------------------
93
- &[class*="-link"],
94
- &[class*="-link"]:active,
95
- &[class*="-link"][disabled] {
96
- background-color: transparent;
97
- background-image: none;
98
- @include box-shadow(none);
99
- }
100
- &[class*="-link"] {
101
- border-color: transparent;
102
- cursor: pointer;
103
- color: $link-color;
104
- @include border-radius(0);
105
- }
106
- &[class*="-link"]:hover,
107
- &[class*="-link"]:focus {
92
+ }
93
+
94
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
95
+ // Link buttons
96
+ // --------------------------------------------------------------------------------------------------------------------
97
+
98
+ .btn--link {
99
+ @include border-radius(0);
100
+ border-color: transparent;
101
+ color: $link-color;
102
+ cursor: pointer;
103
+
104
+ &:hover, &:focus {
108
105
  color: $link-color-hover;
109
106
  text-decoration: underline;
110
107
  background-color: transparent;
111
108
  }
112
- &[class*="-link"][disabled]:hover,
113
- &[class*="-link"][disabled]:focus {
109
+
110
+ &:active, &[disabled] {
111
+ background-color: transparent;
112
+ background-image: none;
113
+ @include box-shadow(none);
114
+ }
115
+
116
+ &[disabled]:hover, &[disabled]:focus {
114
117
  color: $grayDark;
115
118
  text-decoration: none;
116
119
  }
117
-
118
-
119
120
  }
120
121
 
121
122
  }
data/stylesheets/components/_captions.scss CHANGED
@@ -1,3 +1,7 @@
1
+ // ====================================================================================================================
2
+ // CAPTIONS
3
+ // ====================================================================================================================
4
+
1
5
  @if $captions {
2
6
  [class^="caption-"] {
3
7
  position: relative;
data/stylesheets/components/_close.scss CHANGED
@@ -1,6 +1,6 @@
1
- //
2
- // Close icons
3
- // --------------------------------------------------
1
+ // ====================================================================================================================
2
+ // CLOSE ICONS
3
+ // ====================================================================================================================
4
4
  @if $close {
5
5
  .close {
6
6
  float: right;
data/stylesheets/components/_dropdowns.scss CHANGED
@@ -1,14 +1,14 @@
1
- //
2
- // Dropdown menus
3
- // --------------------------------------------------
1
+ // ====================================================================================================================
2
+ // DROPDOWN MENUS
3
+ // ====================================================================================================================
4
4
 
5
5
  @if $dropdowns {
6
- // Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
6
+
7
7
  .dropdown {
8
8
  position: relative;
9
9
  display: inline-block;
10
-
11
10
  }
11
+
12
12
  .dropdown-toggle {
13
13
  line-height: 1em;
14
14
  }
@@ -19,7 +19,7 @@
19
19
  }
20
20
 
21
21
  // Dropdown arrow/caret
22
- // --------------------
22
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
23
23
  .caret {
24
24
  display: inline-block;
25
25
  @extend %caret !optional;
@@ -27,7 +27,7 @@
27
27
  }
28
28
 
29
29
  // The dropdown menu (ul)
30
- // ----------------------
30
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
31
31
  .dropdown-menu {
32
32
  @extend %dropdown !optional;
33
33
  @include border-bottom-radius($base-border-radius);
@@ -52,7 +52,7 @@
52
52
  }
53
53
 
54
54
 
55
- // Semplice lista di links dentro al dropdown
55
+ // Links list inside the dropdown
56
56
  > li > a {
57
57
  @include adjust-font-size-to($base-font-size);
58
58
  display: block;
@@ -100,8 +100,7 @@
100
100
  .dropdown-menu > .disabled > a:focus {
101
101
  text-decoration: none;
102
102
  background-color: transparent;
103
- background-image: none; // Remove CSS gradient
104
- // @include reset-filter();
103
+ background-image: none;
105
104
  cursor: default;
106
105
  }
107
106
 
@@ -127,44 +126,8 @@
127
126
  & > .dropdown-menu {}
128
127
  }
129
128
 
130
- // Right aligned dropdowns
131
- // ---------------------------
132
- .pull-right > .dropdown-menu {
133
- right: 0;
134
- left: auto;
135
- }
136
-
137
-
138
- // Stili per tutti gli allineamenti
139
- // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
140
-
141
-
142
- // // Sub menus
143
- // // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
144
- // .dropdown-submenu {
145
- // position: relative;
146
- // }
147
-
148
- // .dropdown-submenu > .dropdown-menu {
149
- // top: 0;
150
- // left: 100%;
151
- // @include border-radius(0 $base-border-radius $base-border-radius $base-border-radius);
152
- // }
153
-
154
- // .dropdown-submenu:hover > .dropdown-menu {
155
- // // display: block;
156
- // // @extend %fadeIn;
157
- // }
158
-
159
- // .dropdown-submenu > a {
160
- // @extend %caret-side !optional;
161
- // &:after {margin-left: em(10px);}
162
- // }
163
-
164
-
165
- // Animazione Apertura / Chiusura
129
+ // Open/Close Animations
166
130
  // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
167
-
168
131
  .dropdown-menu {
169
132
  @include transition();
170
133
  opacity: 0;
@@ -172,19 +135,9 @@
172
135
  max-height: 0;
173
136
  }
174
137
 
175
- // .dropdown-submenu:hover > .dropdown-menu,
176
138
  .open > .dropdown-menu {
177
139
  opacity: 1;
178
140
  max-height: 600px;
179
141
  }
180
142
 
181
- // Apertura on hover per dropdown se dentro <nav>
182
- // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
183
- // nav {
184
- // .dropdown:hover > .dropdown-menu {
185
- // // display: block;
186
- // // @extend .open > .dropdown-menu;
187
- // opacity: 1;
188
- // }
189
- // }
190
143
  }