basscss-rails 0.0.1 → 1.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (64) hide show
  1. checksums.yaml +4 -4
  2. data/.gitignore +2 -0
  3. data/LICENSE.txt +1 -1
  4. data/README.md +2 -14
  5. data/app/assets/stylesheets/basscss/_background-images.scss +17 -0
  6. data/app/assets/stylesheets/basscss/_base-buttons.scss +110 -0
  7. data/app/assets/stylesheets/basscss/_base-forms.scss +129 -0
  8. data/app/assets/stylesheets/basscss/_base-reset.scss +16 -0
  9. data/app/assets/stylesheets/basscss/_base-tables.scss +99 -0
  10. data/app/assets/stylesheets/basscss/_base-typography.scss +135 -0
  11. data/app/assets/stylesheets/basscss/_borders.scss +82 -3
  12. data/app/assets/stylesheets/basscss/_button-blue-outline.scss +46 -0
  13. data/app/assets/stylesheets/basscss/_button-blue.scss +41 -0
  14. data/app/assets/stylesheets/basscss/_button-gray.scss +42 -0
  15. data/app/assets/stylesheets/basscss/_button-light-gray.scss +43 -0
  16. data/app/assets/stylesheets/basscss/_button-link.scss +42 -0
  17. data/app/assets/stylesheets/basscss/_button-nav-dark.scss +23 -0
  18. data/app/assets/stylesheets/basscss/_button-nav-light.scss +26 -0
  19. data/app/assets/stylesheets/basscss/_button-nav-tab.scss +34 -0
  20. data/app/assets/stylesheets/basscss/_button-outline.scss +135 -0
  21. data/app/assets/stylesheets/basscss/_button-red.scss +41 -0
  22. data/app/assets/stylesheets/basscss/_button-sizes.scss +93 -0
  23. data/app/assets/stylesheets/basscss/_button-transparent.scss +139 -0
  24. data/app/assets/stylesheets/basscss/_color-base.scss +137 -0
  25. data/app/assets/stylesheets/basscss/_color-buttons.scss +196 -0
  26. data/app/assets/stylesheets/basscss/_color-forms-dark.scss +123 -0
  27. data/app/assets/stylesheets/basscss/_color-forms.scss +115 -0
  28. data/app/assets/stylesheets/basscss/_color-tables.scss +85 -0
  29. data/app/assets/stylesheets/basscss/_colors.scss +155 -19
  30. data/app/assets/stylesheets/basscss/_defaults.scss +72 -0
  31. data/app/assets/stylesheets/basscss/_flex-object.scss +109 -0
  32. data/app/assets/stylesheets/basscss/_grid.scss +303 -39
  33. data/app/assets/stylesheets/basscss/_highlight.scss +166 -0
  34. data/app/assets/stylesheets/basscss/_input-range.scss +155 -0
  35. data/app/assets/stylesheets/basscss/_positions.scss +17 -17
  36. data/app/assets/stylesheets/basscss/_progress.scss +101 -0
  37. data/app/assets/stylesheets/basscss/_responsive-states.scss +114 -0
  38. data/app/assets/stylesheets/basscss/_responsive-white-space.scss +194 -0
  39. data/app/assets/stylesheets/basscss/_table-object.scss +40 -8
  40. data/app/assets/stylesheets/basscss/_ui-utility-groups.scss +21 -0
  41. data/app/assets/stylesheets/basscss/_utility-headings.scss +33 -0
  42. data/app/assets/stylesheets/basscss/_utility-layout.scss +31 -0
  43. data/app/assets/stylesheets/basscss/_utility-typography.scss +20 -0
  44. data/app/assets/stylesheets/basscss/_white-space.scss +126 -0
  45. data/app/assets/stylesheets/basscss/basscss.scss +37 -40
  46. data/lib/basscss/rails/version.rb +1 -1
  47. metadata +38 -20
  48. data/app/assets/stylesheets/basscss/_button-themes.scss +0 -32
  49. data/app/assets/stylesheets/basscss/_buttons.scss +0 -33
  50. data/app/assets/stylesheets/basscss/_form-themes.scss +0 -37
  51. data/app/assets/stylesheets/basscss/_forms.scss +0 -68
  52. data/app/assets/stylesheets/basscss/_lists.scss +0 -16
  53. data/app/assets/stylesheets/basscss/_margins.scss +0 -34
  54. data/app/assets/stylesheets/basscss/_nav-themes.scss +0 -130
  55. data/app/assets/stylesheets/basscss/_navs.scss +0 -59
  56. data/app/assets/stylesheets/basscss/_padding.scss +0 -18
  57. data/app/assets/stylesheets/basscss/_reset.scss +0 -10
  58. data/app/assets/stylesheets/basscss/_table-themes.scss +0 -8
  59. data/app/assets/stylesheets/basscss/_tables.scss +0 -23
  60. data/app/assets/stylesheets/basscss/_theme.scss +0 -16
  61. data/app/assets/stylesheets/basscss/_type.scss +0 -43
  62. data/app/assets/stylesheets/basscss/_utilities.scss +0 -30
  63. data/app/assets/stylesheets/basscss/_variables.scss +0 -62
  64. data/app/assets/stylesheets/basscss/basscss-lite.scss +0 -19
@@ -0,0 +1,137 @@
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
+ $link-color: $blue !default;
56
+ $button-background-color: $blue !default;
57
+ $pre-background-color: transparent !default;
58
+
59
+ // Custom Media Query Variables
60
+
61
+ $breakpoint-sm: '(min-width: 40em)' !default;
62
+ $breakpoint-md: '(min-width: 52em)' !default;
63
+ $breakpoint-lg: '(min-width: 64em)' !default;
64
+
65
+ /* Basscss Color Base */
66
+
67
+ body {
68
+ color: $black;
69
+ background-color: white;
70
+ }
71
+
72
+ a {
73
+ color: $link-color;
74
+ text-decoration: none;
75
+ }
76
+
77
+ a:hover {
78
+ text-decoration: underline;
79
+ }
80
+
81
+ pre, code {
82
+ background-color: $pre-background-color;
83
+ border-radius: $border-radius;
84
+ }
85
+
86
+ hr {
87
+ border: 0;
88
+ border-bottom-style: solid;
89
+ border-bottom-width: $border-width;
90
+ border-bottom-color: $border-color;
91
+ }
92
+
93
+ .button {
94
+ color: white;
95
+ background-color: $button-background-color;
96
+ border-radius: $border-radius;
97
+ -webkit-transition-duration: .05s;
98
+ transition-duration: .05s;
99
+ -webkit-transition-timing-function: ease-out;
100
+ transition-timing-function: ease-out;
101
+ -webkit-transition-property: box-shadow, background-color;
102
+ transition-property: box-shadow, background-color;
103
+ }
104
+
105
+ .button:hover {
106
+ box-shadow: inset 0 0 0 20rem $darken-1;
107
+ }
108
+
109
+ .button:focus {
110
+ outline: none;
111
+ border-color: $darken-2;
112
+ box-shadow: 0 0 0 3px $darken-3;
113
+ }
114
+
115
+ .button:active,
116
+ .button.is-active {
117
+ box-shadow: inset 0 0 0 20rem $darken-2,
118
+ inset 0 3px 4px 0 $darken-3,
119
+ 0 0 1px $darken-2;
120
+ }
121
+
122
+ .button:disabled,
123
+ .button.is-disabled {
124
+ opacity: .5;
125
+ }
126
+
127
+ /* Basscss Defaults */
128
+
129
+ /*
130
+
131
+ COLOR VARIABLES
132
+
133
+ - Cool
134
+ - Warm
135
+ - Gray Scale
136
+
137
+ */
@@ -0,0 +1,196 @@
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
+ }
@@ -0,0 +1,123 @@
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 Color Forms Dark */
63
+
64
+ .field-dark {
65
+ color: white;
66
+ background-color: $darken-3;
67
+ border: 1px solid $darken-1;
68
+ border-radius: $border-radius /* Fallback value: 3px */;
69
+ }
70
+
71
+ .field-dark::-webkit-input-placeholder {
72
+ color: rgba(255,255,255,.75);
73
+ }
74
+
75
+ .field-dark::-moz-placeholder {
76
+ color: rgba(255,255,255,.75);
77
+ }
78
+
79
+ .field-dark:-ms-input-placeholder {
80
+ color: rgba(255,255,255,.75);
81
+ }
82
+
83
+ .field-dark::placeholder {
84
+ color: rgba(255,255,255,.75);
85
+ }
86
+
87
+ .field-dark:focus {
88
+ outline: 0;
89
+ border: 1px solid rgba(255,255,255,.5);
90
+ box-shadow: 0 0 0 2px rgba(255,255,255,.25);
91
+ }
92
+
93
+ .field-dark:read-only:not(select) {
94
+ background-color: rgba(255,255,255,.25);
95
+ }
96
+
97
+ .field-dark:invalid {
98
+ border-color: $red;
99
+ }
100
+
101
+ .field-dark.is-success {
102
+ border-color: $green;
103
+ }
104
+
105
+ .field-dark.is-warning {
106
+ border-color: $yellow;
107
+ }
108
+
109
+ .field-dark.is-error {
110
+ border-color: $red;
111
+ }
112
+
113
+ /* Basscss Defaults */
114
+
115
+ /*
116
+
117
+ COLOR VARIABLES
118
+
119
+ - Cool
120
+ - Warm
121
+ - Gray Scale
122
+
123
+ */