rapido-css 0.1.1 → 0.1.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (46) hide show
  1. data/stylesheets/_default-styles.scss +352 -352
  2. data/stylesheets/_functions.scss +77 -50
  3. data/stylesheets/_susy.scss +15 -12
  4. data/stylesheets/components/_alerts.scss +21 -21
  5. data/stylesheets/components/_breadcrumbs.scss +15 -15
  6. data/stylesheets/components/_button-groups.scss +51 -53
  7. data/stylesheets/components/_buttons.scss +94 -97
  8. data/stylesheets/components/_captions.scss +45 -45
  9. data/stylesheets/components/_close.scss +27 -27
  10. data/stylesheets/components/_dropdowns.scss +121 -121
  11. data/stylesheets/components/_forms.scss +246 -248
  12. data/stylesheets/components/_grids.scss +35 -35
  13. data/stylesheets/components/_labels.scss +38 -38
  14. data/stylesheets/components/_modals.scss +242 -248
  15. data/stylesheets/components/_navs.scss +86 -91
  16. data/stylesheets/components/_pager.scss +53 -53
  17. data/stylesheets/components/_pagination.scss +83 -85
  18. data/stylesheets/components/_responsive-navs.scss +84 -84
  19. data/stylesheets/components/_sliders.scss +54 -58
  20. data/stylesheets/components/_tables.scss +69 -74
  21. data/stylesheets/components/_tabs.scss +54 -54
  22. data/stylesheets/components/_type.scss +134 -140
  23. data/stylesheets/{_rapido.scss → rapido.scss} +0 -8
  24. data/stylesheets/settings/_base.scss +23 -23
  25. data/stylesheets/settings/_colors.scss +13 -13
  26. data/stylesheets/settings/_components.scss +43 -42
  27. data/stylesheets/settings/_dimensions.scss +91 -91
  28. data/stylesheets/settings/_effects.scss +28 -14
  29. data/stylesheets/susy/{_susy_background.scss → _background.scss} +0 -0
  30. data/stylesheets/susy/{_susy_functions.scss → _functions.scss} +0 -0
  31. data/stylesheets/susy/{_susy_grid.scss → _grid.scss} +0 -0
  32. data/stylesheets/susy/{_susy_isolation.scss → _isolation.scss} +1 -0
  33. data/stylesheets/susy/{_susy_margin.scss → _margin.scss} +0 -0
  34. data/stylesheets/susy/{_susy_media.scss → _media.scss} +0 -0
  35. data/stylesheets/susy/{_susy_padding.scss → _padding.scss} +0 -0
  36. data/stylesheets/susy/{_susy_settings.scss → _settings.scss} +0 -0
  37. data/stylesheets/susy/{_susy_support.scss → _support.scss} +0 -0
  38. data/stylesheets/susy/{_susy_units.scss → _units.scss} +0 -0
  39. data/stylesheets/utilities/_animations.scss +638 -597
  40. data/stylesheets/utilities/_debug.scss +43 -43
  41. data/stylesheets/utilities/_helper-classes.scss +70 -54
  42. data/stylesheets/utilities/_icon-fonts.scss +90 -90
  43. data/stylesheets/utilities/_mixins.scss +390 -357
  44. metadata +20 -17
  45. checksums.yaml +0 -15
  46. data/stylesheets/config.rb +0 -8
data/stylesheets/components/_buttons.scss CHANGED
@@ -1,4 +1,4 @@
1
- /* ====================================================================================================================
1
+ /*
2
2
 
3
3
  Buttons
4
4
 
@@ -14,36 +14,36 @@ Markup:
14
14
 
15
15
  Styleguide 3
16
16
 
17
- ==================================================================================================================== */
17
+ */
18
18
 
19
19
  @if $buttons {
20
20
 
21
- .btn {
22
- @extend %btn !optional;
23
- @include border-radius($base-border-radius);
24
- border-style: solid;
25
- border-width: $input-border;
26
- cursor: pointer;
27
- display: inline-block;
28
- line-height: 1em;
29
- margin-bottom: 0;
30
- text-align: center;
31
- vertical-align: middle;
32
-
33
- &:hover, &.hover, &:focus { text-decoration: none; }
34
-
35
- &.active, &:active {outline: 0; }
36
-
37
- &.disabled, &.disabled:hover,
38
- &[disabled],&[disabled]:hover {
39
- @include box-shadow(none);
40
- @include opacity(65);
41
- background-image: none;
42
- cursor: default;
43
- }
44
- }
45
-
46
- /* --------------------------------------------------------------------------------------------------------------------
21
+ .btn {
22
+ @extend %btn !optional;
23
+ @include border-radius($base-border-radius);
24
+ border-style: solid;
25
+ border-width: $input-border;
26
+ cursor: pointer;
27
+ display: inline-block;
28
+ line-height: 1em;
29
+ margin-bottom: 0;
30
+ text-align: center;
31
+ vertical-align: middle;
32
+
33
+ &:hover, &.hover, &:focus { text-decoration: none; }
34
+
35
+ &.active, &:active {outline: 0; }
36
+
37
+ &.disabled, &.disabled:hover,
38
+ &[disabled],&[disabled]:hover {
39
+ @include box-shadow(none);
40
+ @include opacity(65);
41
+ background-image: none;
42
+ cursor: default;
43
+ }
44
+ }
45
+
46
+ /*
47
47
 
48
48
  Colors
49
49
 
@@ -54,13 +54,13 @@ Markup:
54
54
 
55
55
  Styleguide 3.1
56
56
 
57
- -------------------------------------------------------------------------------------------------------------------- */
57
+ */
58
58
 
59
- .btn--default { @extend %btn--default !optional; }
60
- .btn--primary { @extend %btn--primary !optional; }
61
- .btn--secondary { @extend %btn--secondary !optional; }
59
+ .btn--default { @extend %btn--default !optional; }
60
+ .btn--primary { @extend %btn--primary !optional; }
61
+ .btn--secondary { @extend %btn--secondary !optional; }
62
62
 
63
- /* --------------------------------------------------------------------------------------------------------------------
63
+ /*
64
64
 
65
65
  Sizes
66
66
 
@@ -72,38 +72,38 @@ Markup:
72
72
 
73
73
  Styleguide 3.2
74
74
 
75
- -------------------------------------------------------------------------------------------------------------------- */
75
+ */
76
76
 
77
77
 
78
- .btn {
79
- padding: $btn-padding;
78
+ .btn {
79
+ padding: $btn-padding;
80
80
 
81
- @if $btn-padding == $input-padding {
82
- height: $input-height;
83
- }
84
- }
81
+ @if $btn-padding == $input-padding {
82
+ height: $input-height;
83
+ }
84
+ }
85
85
 
86
- .btn--large, .btn--small, .btn--mini {
87
- height: auto;
88
- }
86
+ .btn--large, .btn--small, .btn--mini {
87
+ height: auto;
88
+ }
89
89
 
90
- .btn--large {
91
- @include adjust-font-size-to($h5-size);
92
- padding: $btn-large-padding;
93
- }
90
+ .btn--large {
91
+ @include adjust-font-size-to($h5-size);
92
+ padding: $btn-large-padding;
93
+ }
94
94
 
95
- .btn--small {
96
- @include adjust-font-size-to($milli-size);
97
- padding: $btn-small-padding;
98
- }
95
+ .btn--small {
96
+ @include adjust-font-size-to($milli-size);
97
+ padding: $btn-small-padding;
98
+ }
99
99
 
100
- .btn--mini {
101
- @include adjust-font-size-to($micro-size);
102
- padding: $btn-mini-padding;
103
- }
100
+ .btn--mini {
101
+ @include adjust-font-size-to($micro-size);
102
+ padding: $btn-mini-padding;
103
+ }
104
104
 
105
105
 
106
- /* --------------------------------------------------------------------------------------------------------------------
106
+ /*
107
107
 
108
108
  Modifiers
109
109
 
@@ -119,56 +119,53 @@ Markup:
119
119
 
120
120
  Styleguide 3.3
121
121
 
122
- -------------------------------------------------------------------------------------------------------------------- */
122
+ */
123
123
 
124
124
  // Block button
125
- // --------------------------------------------------------------------------------------------------------------------
126
125
 
127
- .btn--block {
128
- display: block;
129
- width: 100%;
130
- padding-left: 0;
131
- padding-right: 0;
126
+ .btn--block {
127
+ display: block;
128
+ width: 100%;
129
+ padding-left: 0;
130
+ padding-right: 0;
132
131
 
133
- + .btn--block {
134
- margin-top: rhythm(.5);
135
- }
132
+ + .btn--block {
133
+ margin-top: rhythm(.5);
134
+ }
136
135
 
137
- }
136
+ }
138
137
 
139
138
  // Pill button
140
- // --------------------------------------------------------------------------------------------------------------------
141
139
 
142
- .btn--pill {
143
- @include border-radius(200px);
144
- }
140
+ .btn--pill {
141
+ @include border-radius(200px);
142
+ }
145
143
 
146
144
  // Link buttons
147
- // --------------------------------------------------------------------------------------------------------------------
148
-
149
- .btn--link {
150
- @include border-radius(0);
151
- border: 0 transparent;
152
- background: none;
153
- color: $link-color;
154
- cursor: pointer;
155
-
156
- &:hover, &:focus {
157
- color: $link-color-hover;
158
- text-decoration: underline;
159
- background-color: transparent;
160
- }
161
-
162
- &:active, &[disabled] {
163
- background-color: transparent;
164
- background-image: none;
165
- @include box-shadow(none);
166
- }
167
-
168
- &[disabled]:hover, &[disabled]:focus {
169
- color: $grayDark;
170
- text-decoration: none;
171
- }
172
- }
145
+
146
+ .btn--link {
147
+ @include border-radius(0);
148
+ border: 0 transparent;
149
+ background: none;
150
+ color: $link-color;
151
+ cursor: pointer;
152
+
153
+ &:hover, &:focus {
154
+ color: $link-color-hover;
155
+ text-decoration: underline;
156
+ background-color: transparent;
157
+ }
158
+
159
+ &:active, &[disabled] {
160
+ background-color: transparent;
161
+ background-image: none;
162
+ @include box-shadow(none);
163
+ }
164
+
165
+ &[disabled]:hover, &[disabled]:focus {
166
+ color: $grayDark;
167
+ text-decoration: none;
168
+ }
169
+ }
173
170
 
174
171
  }
data/stylesheets/components/_captions.scss CHANGED
@@ -1,4 +1,4 @@
1
- /* ====================================================================================================================
1
+ /*
2
2
 
3
3
  Captions
4
4
 
@@ -17,61 +17,61 @@ float - Add fade-in and slide-in animation for the caption
17
17
 
18
18
  Styleguide 5
19
19
 
20
- ==================================================================================================================== */
20
+ */
21
21
 
22
22
  @if $captions {
23
23
 
24
- .caption {
25
- position: relative;
26
- display: inline-block;
27
- width: auto;
28
- overflow: hidden;
29
- line-height: 0;
30
-
31
- &:after {
32
- @extend %caption !optional;
33
- display: inline-block;
34
- content: attr(data-content);
35
- position: absolute;
36
- line-height: rhythm();
37
- }
38
-
39
- &[data-position*="top"]:after { top:0; }
40
- &[data-position*="bottom"]:after { bottom:0; }
41
- &[data-position*="left"]:after { left:0; }
42
- &[data-position*="right"]:after { right:0; }
43
-
44
- &[data-position$="top"]:after,
45
- &[data-position$="bottom"]:after { left: 0; right: 0; }
24
+ .caption {
25
+ position: relative;
26
+ display: inline-block;
27
+ width: auto;
28
+ overflow: hidden;
29
+ line-height: 0;
30
+
31
+ &:after {
32
+ @extend %caption !optional;
33
+ display: inline-block;
34
+ content: attr(data-content);
35
+ position: absolute;
36
+ line-height: rhythm();
37
+ }
38
+
39
+ &[data-position*="top"]:after { top:0; }
40
+ &[data-position*="bottom"]:after { bottom:0; }
41
+ &[data-position*="left"]:after { left:0; }
42
+ &[data-position*="right"]:after { right:0; }
43
+
44
+ &[data-position$="top"]:after,
45
+ &[data-position$="bottom"]:after { left: 0; right: 0; }
46
46
 
47
47
  // Animations
48
- &[data-animation*="fade"],
49
- &[data-animation*="float"] {
48
+ &[data-animation*="fade"],
49
+ &[data-animation*="float"] {
50
50
 
51
- &:after {
52
- @include transition();
53
- @include opacity(0);
54
- visibility: hidden;
55
- }
51
+ &:after {
52
+ @include transition();
53
+ @include opacity(0);
54
+ visibility: hidden;
55
+ }
56
56
 
57
- &:hover:after {
58
- @include opacity(1);
59
- visibility: visible;
60
- }
61
- }
57
+ &:hover:after {
58
+ @include opacity(1);
59
+ visibility: visible;
60
+ }
61
+ }
62
62
 
63
63
 
64
64
  // Float animation
65
- &[data-animation*="float"][data-position*="top"] {
66
- &:after { top: -10px; }
67
- &:hover:after { top: 0; }
68
- }
65
+ &[data-animation*="float"][data-position*="top"] {
66
+ &:after { top: -10px; }
67
+ &:hover:after { top: 0; }
68
+ }
69
69
 
70
- &[data-animation*="float"][data-position*="bottom"] {
71
- &:after { bottom: -10px; }
72
- &:hover:after { bottom: 0; }
73
- }
70
+ &[data-animation*="float"][data-position*="bottom"] {
71
+ &:after { bottom: -10px; }
72
+ &:hover:after { bottom: 0; }
73
+ }
74
74
 
75
- }
75
+ }
76
76
 
77
77
  }
data/stylesheets/components/_close.scss CHANGED
@@ -1,38 +1,38 @@
1
- /* ====================================================================================================================
1
+ /*
2
2
 
3
3
  Close buttons
4
4
 
5
5
  Markup:
6
- <a href="#" class="close">&times;</button>
6
+ <a href="#" class="close">&times;</a>
7
7
  <button type="button" class="close">&times;</button>
8
8
 
9
9
  Styleguide 6
10
10
 
11
- ==================================================================================================================== */
11
+ */
12
12
 
13
13
  @if $close {
14
14
 
15
- .close {
16
- float: right;
17
- font-size: 1em;
18
- font-weight: bold;
19
- color: $black;
20
- @include opacity(20);
21
- &:hover,
22
- &:focus {
23
- color: $black;
24
- text-decoration: none;
25
- cursor: pointer;
26
- @include opacity(40);
27
- }
28
- }
29
-
30
- button.close {
31
- padding: 0;
32
- cursor: pointer;
33
- background: transparent;
34
- border: 0;
35
- -webkit-appearance: none;
36
- }
37
-
38
- }
15
+ .close {
16
+ float: right;
17
+ font-size: 1em;
18
+ font-weight: bold;
19
+ color: $black;
20
+ @include opacity(20);
21
+ &:hover,
22
+ &:focus {
23
+ color: $black;
24
+ text-decoration: none;
25
+ cursor: pointer;
26
+ @include opacity(40);
27
+ }
28
+ }
29
+
30
+ button.close {
31
+ padding: 0;
32
+ cursor: pointer;
33
+ background: transparent;
34
+ border: 0;
35
+ -webkit-appearance: none;
36
+ }
37
+
38
+ }