basscss-rails 2.0.1 → 3.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (44) hide show
  1. checksums.yaml +4 -4
  2. data/Rakefile +11 -5
  3. data/app/assets/stylesheets/basscss/_background-colors.scss +9 -0
  4. data/app/assets/stylesheets/basscss/_base-forms.scss +4 -0
  5. data/app/assets/stylesheets/basscss/_base-tables.scss +4 -0
  6. data/app/assets/stylesheets/basscss/_base-typography.scss +4 -0
  7. data/app/assets/stylesheets/basscss/_border-colors.scss +9 -0
  8. data/app/assets/stylesheets/basscss/_borders.scss +4 -0
  9. data/app/assets/stylesheets/basscss/_btn-outline.scss +4 -0
  10. data/app/assets/stylesheets/basscss/_btn-primary.scss +4 -0
  11. data/app/assets/stylesheets/basscss/{_button-sizes.scss → _btn-sizes.scss} +7 -3
  12. data/app/assets/stylesheets/basscss/_btn.scss +4 -0
  13. data/app/assets/stylesheets/basscss/_color-base.scss +4 -0
  14. data/app/assets/stylesheets/basscss/_color-forms-dark.scss +4 -0
  15. data/app/assets/stylesheets/basscss/_color-forms.scss +4 -0
  16. data/app/assets/stylesheets/basscss/_color-input-range.scss +4 -0
  17. data/app/assets/stylesheets/basscss/_color-progress.scss +4 -0
  18. data/app/assets/stylesheets/basscss/_color-tables.scss +4 -0
  19. data/app/assets/stylesheets/basscss/_colors.scss +4 -0
  20. data/app/assets/stylesheets/basscss/_defaults.scss +4 -0
  21. data/app/assets/stylesheets/basscss/_flex-object.scss +16 -1
  22. data/app/assets/stylesheets/basscss/_grid.scss +4 -0
  23. data/app/assets/stylesheets/basscss/_input-range.scss +4 -0
  24. data/app/assets/stylesheets/basscss/_progress.scss +4 -0
  25. data/app/assets/stylesheets/basscss/_responsive-states.scss +4 -0
  26. data/app/assets/stylesheets/basscss/_type-scale.scss +4 -0
  27. data/app/assets/stylesheets/basscss/_white-space.scss +4 -0
  28. data/app/assets/stylesheets/basscss/basscss.scss +1 -7
  29. data/lib/basscss/rails/version.rb +1 -1
  30. metadata +3 -17
  31. data/app/assets/stylesheets/basscss/_base-buttons.scss +0 -114
  32. data/app/assets/stylesheets/basscss/_button-blue-outline.scss +0 -46
  33. data/app/assets/stylesheets/basscss/_button-blue.scss +0 -41
  34. data/app/assets/stylesheets/basscss/_button-gray.scss +0 -42
  35. data/app/assets/stylesheets/basscss/_button-light-gray.scss +0 -43
  36. data/app/assets/stylesheets/basscss/_button-link.scss +0 -42
  37. data/app/assets/stylesheets/basscss/_button-nav-dark.scss +0 -23
  38. data/app/assets/stylesheets/basscss/_button-nav-light.scss +0 -26
  39. data/app/assets/stylesheets/basscss/_button-nav-tab.scss +0 -34
  40. data/app/assets/stylesheets/basscss/_button-outline.scss +0 -123
  41. data/app/assets/stylesheets/basscss/_button-red.scss +0 -41
  42. data/app/assets/stylesheets/basscss/_button-solid.scss +0 -104
  43. data/app/assets/stylesheets/basscss/_button-transparent.scss +0 -127
  44. data/app/assets/stylesheets/basscss/_color-buttons.scss +0 -196
@@ -1,41 +0,0 @@
1
-
2
- // Converted Variables
3
-
4
- $red: #f95020 !default;
5
- $border-radius: 3px !default;
6
-
7
- // Custom Media Query Variables
8
-
9
-
10
- /* Basscss Button Red */
11
-
12
- .button-red {
13
- color: white;
14
- background-color: $red;
15
- border-radius: $border-radius;
16
- -webkit-transition-duration: .1s;
17
- transition-duration: .1s;
18
- -webkit-transition-timing-function: ease-out;
19
- transition-timing-function: ease-out;
20
- -webkit-transition-property: box-shadow, background-color;
21
- transition-property: box-shadow, background-color;
22
- }
23
-
24
- .button-red:hover {
25
- opacity: .875;
26
- }
27
-
28
- .button-red:active,
29
- .button-red.is-active {
30
- box-shadow: inset 0 0 0 32px rgba(#000,.125), inset 0 2px 3px 0 rgba(#000,.25);
31
- }
32
-
33
- .button-red:focus {
34
- outline: none;
35
- box-shadow: 0 0 0 2px rgba(white, .5), 0 0 1px 4px rgba($red, .5);
36
- }
37
-
38
- .button-red:disabled,
39
- .button-red.is-disabled {
40
- opacity: .5;
41
- }
@@ -1,104 +0,0 @@
1
-
2
- // Converted Variables
3
-
4
- $aqua: #7fdbff !default;
5
- $blue: #0074d9 !default;
6
- $navy: #001f3f !default;
7
- $teal: #39cccc !default;
8
- $green: #2ecc40 !default;
9
- $olive: #3d9970 !default;
10
- $lime: #01ff70 !default;
11
- $yellow: #ffdc00 !default;
12
- $orange: #ff851b !default;
13
- $red: #ff4136 !default;
14
- $fuchsia: #f012be !default;
15
- $purple: #b10dc9 !default;
16
- $maroon: #85144b !default;
17
- $white: #fff !default;
18
- $silver: #ddd !default;
19
- $gray: #aaa !default;
20
- $black: #111 !default;
21
- $font-family: 'Helvetica Neue', Helvetica, sans-serif !default;
22
- $line-height: 1.5 !default;
23
- $heading-font-family: $font-family !default;
24
- $heading-font-weight: bold !default;
25
- $heading-line-height: 1.25 !default;
26
- $monospace-font-family: 'Source Code Pro', Consolas, monospace !default;
27
- $h1: 2rem !default;
28
- $h2: 1.5rem !default;
29
- $h3: 1.25rem !default;
30
- $h4: 1rem !default;
31
- $h5: .875rem !default;
32
- $h6: .75rem !default;
33
- $bold-font-weight: bold !default;
34
- $space-1: .5rem !default;
35
- $space-2: 1rem !default;
36
- $space-3: 2rem !default;
37
- $space-4: 4rem !default;
38
- $form-field-font-size: 1rem !default;
39
- $form-field-height: 2.25rem !default;
40
- $form-field-padding-y: .5rem !default;
41
- $form-field-padding-x: .5rem !default;
42
- $button-font-size: inherit !default;
43
- $button-font-weight: bold !default;
44
- $button-line-height: 1.125rem !default;
45
- $button-padding-y: .5rem !default;
46
- $button-padding-x: 1rem !default;
47
- $container-width: 64em !default;
48
- $darken-1: rgba(0,0,0,.0625) !default;
49
- $darken-2: rgba(0,0,0,.125) !default;
50
- $darken-3: rgba(0,0,0,.25) !default;
51
- $darken-4: rgba(0,0,0,.5) !default;
52
- $border-width: 1px !default;
53
- $border-radius: 3px !default;
54
- $border-color: $darken-2 !default;
55
- $button-color: white !default;
56
- $button-background-color: $blue !default;
57
-
58
- // Custom Media Query Variables
59
-
60
- $breakpoint-sm: '(min-width: 40em)' !default;
61
- $breakpoint-md: '(min-width: 52em)' !default;
62
- $breakpoint-lg: '(min-width: 64em)' !default;
63
-
64
- /* Basscss Button Solid */
65
-
66
- .button {
67
- color: $button-color;
68
- background-color: $button-background-color;
69
- border-radius: $border-radius;
70
- }
71
-
72
- .button:hover {
73
- box-shadow: inset 0 0 0 20rem $darken-1;
74
- }
75
-
76
- .button:focus {
77
- outline: none;
78
- border-color: $darken-2;
79
- box-shadow: 0 0 0 3px $darken-3;
80
- }
81
-
82
- .button:active,
83
- .button.is-active {
84
- box-shadow: inset 0 0 0 20rem $darken-2,
85
- inset 0 3px 4px 0 $darken-3,
86
- 0 0 1px $darken-2;
87
- }
88
-
89
- .button:disabled,
90
- .button.is-disabled {
91
- opacity: .5;
92
- }
93
-
94
- /* Basscss Defaults */
95
-
96
- /*
97
-
98
- COLOR VARIABLES
99
-
100
- - Cool
101
- - Warm
102
- - Gray Scale
103
-
104
- */
@@ -1,127 +0,0 @@
1
-
2
- // Converted Variables
3
-
4
- $aqua: #7fdbff !default;
5
- $blue: #0074d9 !default;
6
- $navy: #001f3f !default;
7
- $teal: #39cccc !default;
8
- $green: #2ecc40 !default;
9
- $olive: #3d9970 !default;
10
- $lime: #01ff70 !default;
11
- $yellow: #ffdc00 !default;
12
- $orange: #ff851b !default;
13
- $red: #ff4136 !default;
14
- $fuchsia: #f012be !default;
15
- $purple: #b10dc9 !default;
16
- $maroon: #85144b !default;
17
- $white: #fff !default;
18
- $silver: #ddd !default;
19
- $gray: #aaa !default;
20
- $black: #111 !default;
21
- $font-family: 'Helvetica Neue', Helvetica, sans-serif !default;
22
- $line-height: 1.5 !default;
23
- $heading-font-family: $font-family !default;
24
- $heading-font-weight: bold !default;
25
- $heading-line-height: 1.25 !default;
26
- $monospace-font-family: 'Source Code Pro', Consolas, monospace !default;
27
- $h1: 2rem !default;
28
- $h2: 1.5rem !default;
29
- $h3: 1.25rem !default;
30
- $h4: 1rem !default;
31
- $h5: .875rem !default;
32
- $h6: .75rem !default;
33
- $bold-font-weight: bold !default;
34
- $space-1: .5rem !default;
35
- $space-2: 1rem !default;
36
- $space-3: 2rem !default;
37
- $space-4: 4rem !default;
38
- $form-field-font-size: 1rem !default;
39
- $form-field-height: 2.25rem !default;
40
- $form-field-padding-y: .5rem !default;
41
- $form-field-padding-x: .5rem !default;
42
- $button-font-size: inherit !default;
43
- $button-font-weight: bold !default;
44
- $button-line-height: 1.125rem !default;
45
- $button-padding-y: .5rem !default;
46
- $button-padding-x: 1rem !default;
47
- $container-width: 64em !default;
48
- $darken-1: rgba(0,0,0,.0625) !default;
49
- $darken-2: rgba(0,0,0,.125) !default;
50
- $darken-3: rgba(0,0,0,.25) !default;
51
- $darken-4: rgba(0,0,0,.5) !default;
52
- $border-width: 1px !default;
53
- $border-radius: 3px !default;
54
- $border-color: $darken-2 !default;
55
-
56
- // Custom Media Query Variables
57
-
58
- $breakpoint-sm: '(min-width: 40em)' !default;
59
- $breakpoint-md: '(min-width: 52em)' !default;
60
- $breakpoint-lg: '(min-width: 64em)' !default;
61
-
62
- /* Basscss Button Transparent */
63
-
64
- .button-transparent {
65
- position: relative;
66
- z-index: 2;
67
- color: inherit;
68
- background-color: transparent;
69
- border-radius: 0;
70
- border: $border-width solid transparent;
71
- }
72
-
73
- .button-transparent:before {
74
- content: '';
75
- display: block;
76
- position: absolute;
77
- z-index: -1;
78
- top: -$border-width;
79
- right: -$border-width;
80
- bottom: -$border-width;
81
- left: -$border-width;
82
- border: $border-width solid transparent;
83
- background-color: currentcolor;
84
- opacity: 0;
85
- }
86
-
87
- .button-transparent:hover {
88
- box-shadow: none;
89
- }
90
-
91
- .button-transparent:hover:before,
92
- .button-transparent:focus:before {
93
- opacity: .09375;
94
- }
95
-
96
- .button-transparent:focus {
97
- outline: none;
98
- border-color: transparent;
99
- box-shadow: 0 0 0 2px;
100
- }
101
-
102
- .button-transparent:active,
103
- .button-transparent.is-active {
104
- box-shadow: none;
105
- }
106
-
107
- .button-transparent:active:before,
108
- .button-transparent.is-active:before {
109
- opacity: .0625;
110
- }
111
-
112
- .button-transparent:disabled,
113
- .button-transparent.is-disabled {
114
- opacity: .5;
115
- }
116
-
117
- /* Basscss Defaults */
118
-
119
- /*
120
-
121
- COLOR VARIABLES
122
-
123
- - Cool
124
- - Warm
125
- - Gray Scale
126
-
127
- */
@@ -1,196 +0,0 @@
1
-
2
- // Converted Variables
3
-
4
- $blue: #0076df !default;
5
- $border-radius: 3px !default;
6
- $blue: #0076df !default;
7
- $border-radius: 3px !default;
8
- $red: #f95020 !default;
9
- $border-radius: 3px !default;
10
- $blue: #0076df !default;
11
- $light-gray: #ccc !default;
12
- $dark-gray: #333 !default;
13
- $border-radius: 3px !default;
14
- $dark-gray: #333 !default;
15
- $darken-1: rgba(#000,.0625) !default;
16
- $hover-background-color: $darken-1 !default;
17
- $border-radius: 3px !default;
18
- $darken-2: rgba(#000,.125) !default;
19
- $blue: #0076df !default;
20
- $red: #f95020 !default;
21
- $green: #00cf26 !default;
22
- $yellow: #efcc00 !default;
23
- $dark-gray: #333 !default;
24
- $mid-gray: #777 !default;
25
- $light-gray: #ccc !default;
26
- $lighter-gray: #eee !default;
27
- $darken-1: rgba(#000,.0625) !default;
28
- $darken-2: rgba(#000,.125) !default;
29
- $darken-3: rgba(#000,.25) !default;
30
- $darken-4: rgba(#000,.5) !default;
31
- $hover-background-color: $darken-1 !default;
32
- $border-color: $light-gray !default;
33
- $border-width: 1px !default;
34
- $border-radius: 3px !default;
35
-
36
- // Custom Media Query Variables
37
-
38
-
39
- /* Basscss Color Buttons */
40
-
41
- /* Basscss Button Blue */
42
-
43
- .button-blue {
44
- color: white;
45
- background-color: $blue;
46
- border-radius: $border-radius;
47
- -webkit-transition-duration: .1s;
48
- transition-duration: .1s;
49
- -webkit-transition-timing-function: ease-out;
50
- transition-timing-function: ease-out;
51
- -webkit-transition-property: box-shadow, background-color;
52
- transition-property: box-shadow, background-color;
53
- }
54
-
55
- .button-blue:hover {
56
- opacity: .875;
57
- }
58
-
59
- .button-blue:active,
60
- .button-blue.is-active {
61
- box-shadow: inset 0 0 0 32px rgba(#000,.125), inset 0 2px 3px 0 rgba(#000,.25);
62
- }
63
-
64
- .button-blue:focus {
65
- outline: none;
66
- box-shadow: 0 0 0 2px rgba(white, .5), 0 0 1px 4px rgba($blue, .5);
67
- }
68
-
69
- .button-blue:disabled,
70
- .button-blue.is-disabled {
71
- opacity: .5;
72
- }
73
- /* Basscss Button Blue Outline */
74
-
75
- .button-blue-outline {
76
- color: $blue;
77
- background-color: transparent;
78
- border-radius: $border-radius;
79
- border: 1px solid $blue;
80
- -webkit-transition-duration: .1s;
81
- transition-duration: .1s;
82
- -webkit-transition-timing-function: ease-out;
83
- transition-timing-function: ease-out;
84
- -webkit-transition-property: box-shadow, background-color;
85
- transition-property: box-shadow, background-color;
86
- }
87
-
88
- .button-blue-outline:hover,
89
- .button-blue-outline.is-active {
90
- color: white;
91
- background-color: $blue;
92
- }
93
-
94
- .button-blue-outline:active {
95
- box-shadow: inset 0 3px 3px 0 rgba(#000,.25);
96
- }
97
-
98
- .button-blue-outline:focus {
99
- outline: none;
100
- box-shadow: 0 0 0 2px rgba(white, .5), 0 0 1px 4px rgba($blue, .5);
101
- }
102
-
103
- .button-blue-outline:disabled,
104
- .button-blue-outline.is-disabled {
105
- color: $blue;
106
- background-color: transparent;
107
- opacity: .5;
108
- }
109
- /* Basscss Button Red */
110
-
111
- .button-red {
112
- color: white;
113
- background-color: $red;
114
- border-radius: $border-radius;
115
- -webkit-transition-duration: .1s;
116
- transition-duration: .1s;
117
- -webkit-transition-timing-function: ease-out;
118
- transition-timing-function: ease-out;
119
- -webkit-transition-property: box-shadow, background-color;
120
- transition-property: box-shadow, background-color;
121
- }
122
-
123
- .button-red:hover {
124
- opacity: .875;
125
- }
126
-
127
- .button-red:active,
128
- .button-red.is-active {
129
- box-shadow: inset 0 0 0 32px rgba(#000,.125), inset 0 2px 3px 0 rgba(#000,.25);
130
- }
131
-
132
- .button-red:focus {
133
- outline: none;
134
- box-shadow: 0 0 0 2px rgba(white, .5), 0 0 1px 4px rgba($red, .5);
135
- }
136
-
137
- .button-red:disabled,
138
- .button-red.is-disabled {
139
- opacity: .5;
140
- }
141
- /* Basscss Button Light Gray */
142
-
143
- .button-light-gray {
144
- color: $dark-gray;
145
- background-color: $light-gray;
146
- border-radius: $border-radius;
147
- -webkit-transition-duration: .1s;
148
- transition-duration: .1s;
149
- -webkit-transition-timing-function: ease-out;
150
- transition-timing-function: ease-out;
151
- -webkit-transition-property: box-shadow, background-color;
152
- transition-property: box-shadow, background-color;
153
- }
154
-
155
- .button-light-gray:hover {
156
- opacity: .875;
157
- }
158
-
159
- .button-light-gray:active,
160
- .button-light-gray:is-active {
161
- box-shadow: inset 0 0 0 32px rgba(#000,.125), inset 0 2px 3px 0 rgba(#000,.25);
162
- }
163
-
164
- .button-light-gray:focus {
165
- outline: none;
166
- box-shadow: 0 0 0 2px white, 0 0 1px 4px rgba($blue, .5);
167
- }
168
-
169
- .button-light-gray:disabled,
170
- .button-light-gray.is-disabled {
171
- opacity: .5;
172
- }
173
-
174
- /* Basscss Button Nav Light */
175
-
176
- .button-nav-light:hover {
177
- background-color: $hover-background-color;
178
- }
179
- .button-nav-light:active,
180
- .button-nav-light.is-active {
181
- color: $dark-gray;
182
- }
183
- /* Basscss Button Nav Dark */
184
-
185
- .button-nav-dark {
186
- color: white;
187
- }
188
-
189
- .button-nav-dark:hover {
190
- background-color: $darken-2;
191
- }
192
-
193
- .button-nav-dark:active,
194
- .button-nav-dark.is-active {
195
- background-color: $darken-2;
196
- }