rapido-css 0.0.1 → 0.0.2.1

Sign up to get free protection for your applications and to get access to all the features.
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
  }