rapido-css 0.0.2.1 → 0.0.3

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