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,115 @@
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 */
63
+
64
+ .field-light {
65
+ background-color: white;
66
+ -webkit-transition: box-shadow .2s ease;
67
+ transition: box-shadow .2s ease;
68
+ border-style: solid;
69
+ border-width: $border-width;
70
+ border-color: $border-color;
71
+ border-radius: $border-radius;
72
+ }
73
+
74
+ .field-light:focus {
75
+ outline: none;
76
+ border-color: $blue;
77
+ box-shadow: 0 0 0 2px color($blue a(.5));
78
+ }
79
+
80
+ .field-light:disabled {
81
+ background-color: $darken-2;
82
+ opacity: .5;
83
+ }
84
+
85
+ .field-light:read-only:not(select) {
86
+ background-color: $darken-2;
87
+ }
88
+
89
+ .field-light:invalid {
90
+ border-color: $red;
91
+ }
92
+
93
+ .field-light.is-success {
94
+ border-color: $green;
95
+ }
96
+
97
+ .field-light.is-warning {
98
+ border-color: $yellow;
99
+ }
100
+
101
+ .field-light.is-error {
102
+ border-color: $red;
103
+ }
104
+
105
+ /* Basscss Defaults */
106
+
107
+ /*
108
+
109
+ COLOR VARIABLES
110
+
111
+ - Cool
112
+ - Warm
113
+ - Gray Scale
114
+
115
+ */
@@ -0,0 +1,85 @@
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 Tables */
63
+
64
+ .table-light th,
65
+ .table-light td {
66
+ border-bottom-width: $border-width;
67
+ border-bottom-style: solid;
68
+ border-bottom-color: $border-color;
69
+ }
70
+
71
+ .table-light tr:last-child td {
72
+ border-bottom: 0;
73
+ }
74
+
75
+ /* Basscss Defaults */
76
+
77
+ /*
78
+
79
+ COLOR VARIABLES
80
+
81
+ - Cool
82
+ - Warm
83
+ - Gray Scale
84
+
85
+ */
@@ -1,20 +1,156 @@
1
- // Colors
2
-
3
- .white { color: #fff; }
4
- .dark-gray { color: $dark-gray; }
5
- .mid-gray { color: $mid-gray; }
6
- .light-gray { color: $light-gray; }
7
- .blue { color: $blue; }
8
- .green { color: $green; }
9
- .yellow { color: $yellow; }
10
- .red { color: $red; }
11
-
12
- .bg-white { background-color: #fff; }
13
- .bg-dark-gray { background-color: $dark-gray; }
14
- .bg-mid-gray { background-color: $mid-gray; }
15
- .bg-light-gray { background-color: $light-gray; }
16
- .bg-blue { background-color: $blue; }
17
- .bg-green { background-color: $green; }
18
- .bg-yellow { background-color: $yellow; }
19
- .bg-red { background-color: $red; }
20
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 Colors */
63
+
64
+
65
+ /* Color */
66
+
67
+ .black, .dark-gray { color: $black }
68
+ .gray, .mid-gray { color: $gray }
69
+ .silver, .light-gray { color: $silver }
70
+ .white { color: $white }
71
+
72
+ .aqua { color: $aqua }
73
+ .blue { color: $blue }
74
+ .navy { color: $navy }
75
+ .teal { color: $teal }
76
+ .green { color: $green }
77
+ .olive { color: $olive }
78
+ .lime { color: $lime }
79
+
80
+ .yellow { color: $yellow }
81
+ .orange { color: $orange }
82
+ .red { color: $red }
83
+ .fuchsia { color: $fuchsia }
84
+ .purple { color: $purple }
85
+ .maroon { color: $maroon }
86
+
87
+
88
+ /* Background Color */
89
+
90
+ .bg-black, .bg-dark-gray { background-color: $black }
91
+ .bg-gray, .bg-mid-gray { background-color: $gray }
92
+ .bg-silver, .bg-light-gray { background-color: $silver }
93
+ .bg-white { background-color: $white }
94
+
95
+ .bg-aqua { background-color: $aqua }
96
+ .bg-blue { background-color: $blue }
97
+ .bg-navy { background-color: $navy }
98
+ .bg-teal { background-color: $teal }
99
+ .bg-green { background-color: $green }
100
+ .bg-olive { background-color: $olive }
101
+ .bg-lime { background-color: $lime }
102
+
103
+ .bg-yellow { background-color: $yellow }
104
+ .bg-orange { background-color: $orange }
105
+ .bg-red { background-color: $red }
106
+ .bg-fuchsia { background-color: $fuchsia }
107
+ .bg-purple { background-color: $purple }
108
+ .bg-maroon { background-color: $maroon }
109
+
110
+ .bg-darken-1 { background-color: $darken-1 }
111
+ .bg-darken-2 { background-color: $darken-2 }
112
+ .bg-darken-3 { background-color: $darken-3 }
113
+ .bg-darken-4 { background-color: $darken-4 }
114
+
115
+
116
+ /* Border Color */
117
+
118
+ .border-aqua { border-color: $aqua }
119
+ .border-blue { border-color: $blue }
120
+ .border-navy { border-color: $navy }
121
+ .border-teal { border-color: $teal }
122
+ .border-green { border-color: $green }
123
+ .border-olive { border-color: $olive }
124
+ .border-lime { border-color: $lime }
125
+
126
+ .border-yellow { border-color: $yellow }
127
+ .border-orange { border-color: $orange }
128
+ .border-red { border-color: $red }
129
+ .border-fuchsia { border-color: $fuchsia }
130
+ .border-purple { border-color: $purple }
131
+ .border-maroon { border-color: $maroon }
132
+
133
+ .border-black { border-color: $black }
134
+ .border-gray { border-color: $gray }
135
+ .border-silver { border-color: $silver }
136
+ .border-white { border-color: $white }
137
+
138
+ .border-darken-1 { border-color: $darken-1 }
139
+ .border-darken-2 { border-color: $darken-2 }
140
+ .border-darken-3 { border-color: $darken-3 }
141
+ .border-darken-4 { border-color: $darken-4 }
142
+
143
+ /* Opacity */
144
+ .muted { opacity: .5 }
145
+
146
+ /* Basscss Defaults */
147
+
148
+ /*
149
+
150
+ COLOR VARIABLES
151
+
152
+ - Cool
153
+ - Warm
154
+ - Gray Scale
155
+
156
+ */
@@ -0,0 +1,72 @@
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 Defaults */
63
+
64
+ /*
65
+
66
+ COLOR VARIABLES
67
+
68
+ - Cool
69
+ - Warm
70
+ - Gray Scale
71
+
72
+ */