rapido-css 0.0.2.1 → 0.0.3

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 (24) hide show
  1. data/README.md +13 -0
  2. data/stylesheets/_default-styles.scss +72 -91
  3. data/stylesheets/components/_button-groups.scss +22 -29
  4. data/stylesheets/components/_buttons.scss +16 -7
  5. data/stylesheets/components/_dropdowns.scss +39 -64
  6. data/stylesheets/components/_forms.scss +232 -202
  7. data/stylesheets/components/_labels.scss +10 -8
  8. data/stylesheets/components/_navs.scss +25 -17
  9. data/stylesheets/components/_pager.scss +3 -1
  10. data/stylesheets/components/_pagination.scss +18 -10
  11. data/stylesheets/components/_responsive-navs.scss +53 -104
  12. data/stylesheets/components/_tables.scss +0 -2
  13. data/stylesheets/components/_type.scss +1 -1
  14. data/stylesheets/components/config.rb +8 -0
  15. data/stylesheets/config.rb +8 -0
  16. data/stylesheets/settings/_base.scss +1 -1
  17. data/stylesheets/settings/_components.scss +3 -4
  18. data/stylesheets/settings/_dimensions.scss +15 -10
  19. data/stylesheets/settings/config.rb +8 -0
  20. data/stylesheets/utilities/_helper-classes.scss +10 -5
  21. data/stylesheets/utilities/_mixins.scss +0 -5
  22. data/stylesheets/utilities/config.rb +8 -0
  23. metadata +9 -6
  24. data/README.mkdn +0 -20
data/stylesheets/components/_labels.scss CHANGED
@@ -1,11 +1,11 @@
1
1
  // ====================================================================================================================
2
- // LABELS & BADGES
2
+ // BADGE & PILLS
3
3
  // ====================================================================================================================
4
4
 
5
5
  @if $labels {
6
6
 
7
- .label,
8
- .badge {
7
+ .badge,
8
+ .pill {
9
9
  @extend %pill !optional;
10
10
  display: inline-block;
11
11
  padding: $pills-padding;
@@ -13,10 +13,10 @@
13
13
  white-space: nowrap;
14
14
  }
15
15
 
16
- .label { @include border-radius($base-border-radius); }
17
- .badge { @include border-radius(20px); }
16
+ .badge { @include border-radius($base-border-radius); }
17
+ .pill { @include border-radius(20px); }
18
18
 
19
- .label, .badge {
19
+ .badge, .pill {
20
20
  &:empty { display: none; }
21
21
  }
22
22
 
@@ -32,8 +32,10 @@
32
32
  }
33
33
 
34
34
  .btn {
35
- .label, .badge {
36
- margin: -.2em -.35em 0 .35em ;
35
+ .badge,
36
+ .pill {
37
+ margin: -(nth($pills-padding, 1)) -(nth($pills-padding, 2)) 0 0 ;
37
38
  }
38
39
  }
40
+
39
41
  }
data/stylesheets/components/_navs.scss CHANGED
@@ -10,10 +10,15 @@
10
10
 
11
11
  .nav {
12
12
  @extend .clearfix;
13
- list-style: none;
14
- margin-bottom: rhythm();
15
- margin-left: 0;
16
- padding-left: 0;
13
+ position: relative;
14
+ display: inline-block;
15
+
16
+ &, > ul {
17
+ list-style: none;
18
+ margin-bottom: rhythm();
19
+ margin-left: 0;
20
+ padding-left: 0;
21
+ }
17
22
 
18
23
  li {
19
24
  > a {
@@ -36,27 +41,30 @@
36
41
  }
37
42
  }
38
43
 
44
+ .nav__title {
45
+ @include adjust-font-size-to($milli-size);
46
+ color: $gray;
47
+ display: block;
48
+ font-weight: bold;
49
+ padding: $navs-padding;
50
+ padding-left: 0;
51
+ text-transform: uppercase;
52
+ }
53
+
39
54
  // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
40
55
  // Horizontal nav
41
56
  // --------------------------------------------------------------------------------------------------------------------
42
57
  .nav--inline {
43
- li { float: left;}
58
+ & > li,
59
+ ul > li { float: left;}
44
60
  }
45
61
 
62
+
46
63
  // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
47
64
  // Vertical nav
48
65
  // --------------------------------------------------------------------------------------------------------------------
49
66
  .nav--vertical {
50
- .title {
51
- @include adjust-font-size-to($milli-size);
52
- color: $gray;
53
- display: block;
54
- font-weight: bold;
55
- padding: $input-padding;
56
- text-transform: uppercase;
57
- }
58
-
59
- .divider { @include nav-divider(); }
67
+ width: 100%;
60
68
  }
61
69
 
62
70
  // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
@@ -90,10 +98,10 @@
90
98
  .nav--pills {
91
99
  > li > a {
92
100
  @include border-radius($base-border-radius);
93
- margin-right: em(4px);
101
+ margin-right: .25em;
94
102
  }
95
103
 
96
- &[class*="vertical"] > li > a { margin-bottom: em(4px); }
104
+ &[class*="vertical"] > li > a { margin-bottom: .25em; }
97
105
  &[class*="vertical"] > li:last-child > a { margin-bottom: 0; }
98
106
  }
99
107
 
data/stylesheets/components/_pager.scss CHANGED
@@ -30,9 +30,11 @@
30
30
 
31
31
  a:hover,
32
32
  a:focus {
33
- text-decoration: none;
34
33
  @extend %pager-btn_hover !optional;
35
34
  }
35
+ a:active {
36
+ @extend %pager-btn_active !optional;
37
+ }
36
38
  }
37
39
 
38
40
  [rel="next"],
data/stylesheets/components/_pagination.scss CHANGED
@@ -12,32 +12,41 @@
12
12
  margin: rhythm() 0;
13
13
 
14
14
  > * {
15
+ @extend .clearfix;
15
16
  @include border-radius($base-border-radius);
16
- @include inline-block();
17
+ @include inline-block;
17
18
  margin-bottom: 0;
18
19
  margin-left: $input-border;
19
- margin-left: 0;
20
20
 
21
21
  li {
22
- display: inline-block;
22
+ float: left;
23
+ list-style-type: none;
23
24
 
24
- a, span {
25
+ a,
26
+ span {
25
27
  display: inline-block;
26
28
  padding: $pagination-padding;
27
29
  line-height: 1em;
28
30
  text-decoration: none;
29
31
  border-width: $input-border;
30
- border-left-width: 0;
31
32
  border-style: solid;
32
33
  margin-left: -$input-border;
33
- @extend %pagination_btn !optional;
34
+ @extend %pagination-btn !optional;
34
35
  }
35
36
  }
36
37
 
38
+ li:first-child > a,
39
+ li:first-child > span {
40
+ border-left-width: 1px;
41
+ }
37
42
 
38
43
  li > a:hover,
39
44
  li > a:focus {
40
- @extend %pagination_btn-hover !optional;
45
+ @extend %pagination-btn_hover !optional;
46
+ }
47
+
48
+ li > a:active {
49
+ @extend %pagination-btn_active !optional;
41
50
  }
42
51
 
43
52
  // Bootstrap
@@ -49,14 +58,14 @@
49
58
  // WP Paginate
50
59
  .current,
51
60
  .current:hover {
52
- @extend %pagination_btn-active !optional;
61
+ @extend %pagination-btn_current !optional;
53
62
  }
54
63
 
55
64
  .disabled > span,
56
65
  .disabled > a,
57
66
  .disabled > a:hover,
58
67
  .disabled > a:focus {
59
- @extend %pagination_btn-disabled !optional;
68
+ @extend %pagination-btn_disabled !optional;
60
69
  }
61
70
 
62
71
  .active > a,
@@ -82,7 +91,6 @@
82
91
  .pagination--rounded {
83
92
  li:first-child > a,
84
93
  li:first-child > span {
85
- border-left-width: 1px;
86
94
  @include border-left-radius($base-border-radius);
87
95
  }
88
96
 
data/stylesheets/components/_responsive-navs.scss CHANGED
@@ -1,166 +1,115 @@
1
1
  // ====================================================================================================================
2
- // RESPONSIVE NAVS w/ ResposnivNav,js (https://github.com/raffone/responsive-nav.js)
2
+ // RESPONSIVE NAVS w/ responsive-nav.js (https://github.com/raffone/responsive-nav.js)
3
3
  // ====================================================================================================================
4
4
 
5
5
 
6
- @if $responsive-navs {
7
- .responsive-nav {
8
- position: relative;
9
- // max-height: none;
10
- ul {margin-left: 0;}
11
- }
12
-
13
-
14
- // Stile navigazione desktop
15
- .responsive-nav.notactive {
16
- @extend %nav-big !optional;
17
-
18
- ul > .dropdown:hover{
19
- @extend .open;
20
- }
21
- }
22
-
23
- // Stile navigazione piccola
24
- .responsive-nav.active {
25
- @extend %nav-small !optional;
26
-
27
- .dropdown-submenu:hover > .dropdown-menu {
28
- // @include experimental(animation, 0);
29
- }
30
- }
6
+ @if $navs-responsive {
31
7
 
32
8
  #nav-toggle {
33
- display: none;
34
9
  @extend %nav-toggle !optional;
10
+ display: none;
11
+ float: $navs-responsive-dropdown-pos;
35
12
  }
36
13
 
37
- @include media($responsive-nav-breakpoint) {
38
14
 
39
- // Stili generici per la nav
40
- #nav-toggle {
41
- display: inline-block;
42
- }
15
+ .nav--responsive {}
16
+ .nav--responsive.notactive { @extend %nav-big !optional; }
17
+ .nav--responsive.active { @extend %nav-small !optional; }
18
+ .nav--responsive.close { max-height: none; }
43
19
 
44
- .responsive-nav {
45
- // ul, li, a {margin: 0;}
46
20
 
47
- ul {
48
- li {
49
- // margin: 0;
50
- a {
51
- // padding: $input-padding;
52
- // &:after { display: none;}
53
- }
21
+ @include media($navs-responsive-breakpoint) {
54
22
 
55
- // li a {padding-left: $input-padding-side*4;}
56
- // li li a {padding-left: $input-padding-side*6 ;}
57
- }
58
- }
23
+ #nav-toggle { display: block; }
59
24
 
60
- .dropdown-menu {
61
- li a {
62
- @include border-radius(0);
63
- }
25
+ .nav--responsive {
26
+ display: block;
27
+ margin: 0;
28
+ zoom: 1;
29
+ overflow: hidden;
64
30
 
31
+ > ul {
32
+ padding: $wrapper-padding;
65
33
  }
66
34
 
35
+ ul, ul * {
36
+ @include border-radius(0);
37
+ background: transparent;
38
+ border: 0;
39
+ display: block;
40
+ float: none;
41
+ margin: 0;
42
+ position: static;
43
+ text-align: left;
44
+ width: 100%;
45
+ }
67
46
 
68
47
  }
69
48
 
70
49
  // SLIDE
71
50
  // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
72
- @if $responsive-nav-type == slide {
73
- .responsive-nav {
51
+ @if $navs-responsive-type == 'slide' {
52
+
53
+ .nav--responsive {
74
54
  clip: rect(0 0 0 0);
75
55
  max-height: 0;
76
- display: block;
77
- overflow: hidden;
78
- zoom: 1;
79
-
80
-
81
- &.opened {max-height: 9999px;}
82
- }
83
- }
84
-
85
- // DROPDOWN
86
- // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
87
- @if $responsive-nav-type == dropdown {
56
+ width: 100%;
88
57
 
89
- #nav-origin {
90
- position: relative;
91
- }
58
+ &.opened {
59
+ max-height: 9999px;
60
+ }
92
61
 
93
- #nav-toggle {
94
- float: $responsive-nav-dropdown-pos;
95
62
  }
96
63
 
97
-
98
- .responsive-nav {
99
- position: absolute;
100
- max-height: 0;
101
- display: block;
102
- overflow: hidden;
103
- zoom: 1;
104
- top: $responsive-nav-toggle-size;
105
- left: 0;
106
- right: 0;
107
-
108
- &.opened {max-height: 9999px;}
109
- }
110
64
  }
111
65
 
112
66
  // OFFCANVAS
113
67
  // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
114
- @if $responsive-nav-type == off-canvas {
68
+ @if $navs-responsive-type == 'off-canvas' {
115
69
 
116
70
  // Wrappers
117
71
  // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
118
- #{$responsive-nav-outside-wrapper},
119
- #{$responsive-nav-inside-wrapper} {
72
+ #{$navs-responsive-outside-wrapper},
73
+ #{$navs-responsive-inside-wrapper} {
120
74
  position: relative;
121
75
  width: 100%;
122
76
  }
123
77
 
124
- #{$responsive-nav-outside-wrapper} {
78
+ #{$navs-responsive-outside-wrapper} {
125
79
  overflow-x: hidden;
126
80
  }
127
81
 
128
82
  // Transitions
129
83
  // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
130
- #{$responsive-nav-inside-wrapper},
131
- .responsive-nav {
132
- @include transition(500ms);
84
+ #{$navs-responsive-inside-wrapper},
85
+ .nav--responsive {
86
+ @include transition();
133
87
  @include backface-visibility(hidden);
134
88
  }
135
89
 
136
90
 
137
91
  // Animations
138
92
  // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
139
- #{$responsive-nav-inside-wrapper} {
93
+ #{$navs-responsive-inside-wrapper} {
140
94
  @include transform(translate3d(0,0,0));
141
95
  left: 0;
142
96
  }
143
97
 
144
- .responsive-nav {
145
- width: $responsive-nav-offset;
146
- position: absolute;
98
+ .nav--responsive {
99
+ @include position(absolute, 0px 0px 0px 0);
100
+ @include transform(translate3d(100%,0,0));
147
101
  height: 100%;
148
- bottom: 0;
149
- left: 0;
150
- top: 0;
151
- opacity: 0;
152
- @include transform(translate3d(-100%,0,0));
153
- // left: -$responsive-nav-offset;
102
+ width: $navs-responsive-offset;
154
103
  }
155
104
 
156
105
  .nav-open {
157
- #{$responsive-nav-inside-wrapper} {
158
- @include transform(translate3d($responsive-nav-offset,0,0));
159
- // left: $responsive-nav-offset;
106
+ #{$navs-responsive-inside-wrapper} {
107
+ @include transform(translate3d((0 - $navs-responsive-offset),0,0));
108
+ position: relative;
160
109
  }
161
- .responsive-nav {
162
- @include transform(translate3d(-100%,0,0));
163
- opacity: 1;
110
+
111
+ .nav--responsive {
112
+ @include transform(translate3d(0,0,0));
164
113
  }
165
114
  }
166
115
 
data/stylesheets/components/_tables.scss CHANGED
@@ -69,7 +69,6 @@
69
69
  // Bordered Version
70
70
  // --------------------------------------------------------------------------------------------------------------------
71
71
  .table--bordered {
72
- @extend .table;
73
72
  @extend %table-bordered !optional;
74
73
  }
75
74
 
@@ -78,7 +77,6 @@
78
77
  // --------------------------------------------------------------------------------------------------------------------
79
78
 
80
79
  .table--hover {
81
- @extend .table;
82
80
  tbody {
83
81
  tr:hover > td,
84
82
  tr:hover > th {
data/stylesheets/components/_type.scss CHANGED
@@ -90,7 +90,7 @@ h5,
90
90
  h6 {
91
91
  margin: 0 0 rhythm();
92
92
  text-rendering: optimizelegibility;
93
- @if $titles-font-family { font-family: $titles-font-family; }
93
+ font-family: $titles-font-family;
94
94
 
95
95
  small {
96
96
  font-weight: normal;