basscss-rails 3.0.0 → 4.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (55) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +1 -1
  3. data/Rakefile +2 -2
  4. data/app/assets/stylesheets/basscss/_align.scss +3 -0
  5. data/app/assets/stylesheets/basscss/_all.scss +14 -0
  6. data/app/assets/stylesheets/basscss/_background-colors.scss +24 -63
  7. data/app/assets/stylesheets/basscss/_background-images.scss +5 -0
  8. data/app/assets/stylesheets/basscss/_border-colors.scss +24 -63
  9. data/app/assets/stylesheets/basscss/_border.scss +51 -0
  10. data/app/assets/stylesheets/basscss/_btn-outline.scss +4 -70
  11. data/app/assets/stylesheets/basscss/_btn-primary.scss +6 -71
  12. data/app/assets/stylesheets/basscss/_btn.scss +5 -71
  13. data/app/assets/stylesheets/basscss/_colors.scss +25 -53
  14. data/app/assets/stylesheets/basscss/_darken.scss +20 -0
  15. data/app/assets/stylesheets/basscss/_flexbox.scss +90 -0
  16. data/app/assets/stylesheets/basscss/_forms.scss +50 -0
  17. data/app/assets/stylesheets/basscss/_grid.scss +4 -73
  18. data/app/assets/stylesheets/basscss/_hide.scss +38 -0
  19. data/app/assets/stylesheets/basscss/_highlight-dark.scss +166 -0
  20. data/app/assets/stylesheets/basscss/_highlight.scss +5 -4
  21. data/app/assets/stylesheets/basscss/_input-range.scss +19 -98
  22. data/app/assets/stylesheets/basscss/{_utility-layout.scss → _layout.scss} +21 -1
  23. data/app/assets/stylesheets/basscss/_lighten.scss +20 -0
  24. data/app/assets/stylesheets/basscss/_margin.scss +96 -0
  25. data/app/assets/stylesheets/basscss/_media-object.scss +55 -0
  26. data/app/assets/stylesheets/basscss/_padding.scss +82 -0
  27. data/app/assets/stylesheets/basscss/{_positions.scss → _position.scss} +17 -5
  28. data/app/assets/stylesheets/basscss/_progress.scss +5 -73
  29. data/app/assets/stylesheets/basscss/{_responsive-white-space.scss → _responsive-margin.scss} +44 -64
  30. data/app/assets/stylesheets/basscss/_responsive-padding.scss +147 -0
  31. data/app/assets/stylesheets/basscss/_type-scale.scss +5 -64
  32. data/app/assets/stylesheets/basscss/_typography.scss +65 -0
  33. data/app/assets/stylesheets/basscss/basscss.scss +8 -33
  34. data/lib/basscss/rails/version.rb +1 -1
  35. metadata +19 -27
  36. data/app/assets/stylesheets/basscss/_base-forms.scss +0 -132
  37. data/app/assets/stylesheets/basscss/_base-reset.scss +0 -10
  38. data/app/assets/stylesheets/basscss/_base-tables.scss +0 -103
  39. data/app/assets/stylesheets/basscss/_base-typography.scss +0 -136
  40. data/app/assets/stylesheets/basscss/_borders.scss +0 -120
  41. data/app/assets/stylesheets/basscss/_btn-sizes.scss +0 -97
  42. data/app/assets/stylesheets/basscss/_color-base.scss +0 -114
  43. data/app/assets/stylesheets/basscss/_color-forms-dark.scss +0 -146
  44. data/app/assets/stylesheets/basscss/_color-forms.scss +0 -139
  45. data/app/assets/stylesheets/basscss/_color-input-range.scss +0 -123
  46. data/app/assets/stylesheets/basscss/_color-progress.scss +0 -99
  47. data/app/assets/stylesheets/basscss/_color-tables.scss +0 -89
  48. data/app/assets/stylesheets/basscss/_defaults.scss +0 -76
  49. data/app/assets/stylesheets/basscss/_flex-object.scss +0 -119
  50. data/app/assets/stylesheets/basscss/_responsive-states.scss +0 -118
  51. data/app/assets/stylesheets/basscss/_table-object.scss +0 -58
  52. data/app/assets/stylesheets/basscss/_ui-utility-groups.scss +0 -21
  53. data/app/assets/stylesheets/basscss/_utility-headings.scss +0 -33
  54. data/app/assets/stylesheets/basscss/_utility-typography.scss +0 -33
  55. data/app/assets/stylesheets/basscss/_white-space.scss +0 -132
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: fbcd85f94a6c4ec9492dc996b9e379edd0db185c
4
- data.tar.gz: 95b1f694b38334c1f7e68860a9b870699ed6ce6c
3
+ metadata.gz: 861a740654e0572b127ded75d15b2e6beda5a319
4
+ data.tar.gz: 761e29a2d81e6f2de7571a56fabf2fe3a9d021b1
5
5
  SHA512:
6
- metadata.gz: 3615b35cd221c7a0217ac4e78e09ab9a3af5d57bd6f77b0b8887044befbe3a61943b2dd31b4b4ab0a83283833ab7bbabbfcfd16502326a2708683c8659e9b6a8
7
- data.tar.gz: 8619f2840618e9c32ade2a052cc768a5c49cadffab567ed048b6ef3e88c3c9902dc13c7479b9a2a43dc08b47e01ea35c1379f6b1e65f2354b925dea64f638a2e
6
+ metadata.gz: fe32b83f3b220e958050dbdbdb985ed39ef94c3ffa4a302713a021960bd204133c95ea32525421aeab3f5b55557e521a20be41fb69ec6f537c27891313f9f239
7
+ data.tar.gz: 0c01d50f9f1a54615dd87210281b13abff9babda1332059b3ecf74d484fa5e416ec5bb3291b57615fa9eb619030401d4ac4667fa745c7126d95e7c7c900cbaf5
data/README.md CHANGED
@@ -33,7 +33,7 @@ You will then need to require the stylesheet in your application.scss:
33
33
  Or, in your application.css:
34
34
 
35
35
  ```css
36
- *= require basscss/basscss;
36
+ *= require basscss/basscss
37
37
  ```
38
38
 
39
39
  ## Usage
data/Rakefile CHANGED
@@ -3,14 +3,14 @@ require 'fileutils'
3
3
 
4
4
  task :download do
5
5
  puts 'Updating basscss files'
6
- exec 'npm i --save basscss-sass --prefix ./'
6
+ system 'npm i --save basscss-sass --prefix ./'
7
7
  end
8
8
 
9
9
  task :copy do
10
10
  puts 'Installing basscss files'
11
11
  FileUtils.remove_dir 'app/assets/stylesheets/basscss', :force
12
12
  FileUtils.mkdir 'app/assets/stylesheets/basscss'
13
- FileUtils.cp_r Dir.glob('node_modules/basscss-sass/*.scss'), 'app/assets/stylesheets/basscss/'
13
+ FileUtils.cp_r Dir.glob('node_modules/basscss-sass/scss/*.scss'), 'app/assets/stylesheets/basscss/'
14
14
  end
15
15
 
16
16
  task :update => [:download, :copy]
@@ -8,6 +8,9 @@
8
8
  /* Basscss Align */
9
9
 
10
10
  .align-baseline { vertical-align: baseline }
11
+
11
12
  .align-top { vertical-align: top }
13
+
12
14
  .align-middle { vertical-align: middle }
15
+
13
16
  .align-bottom { vertical-align: bottom }
@@ -0,0 +1,14 @@
1
+
2
+ // Converted Variables
3
+
4
+
5
+ // Custom Media Query Variables
6
+
7
+
8
+ /* Basscss All */
9
+
10
+ .all-initial { all: initial }
11
+
12
+ .all-unset { all: unset }
13
+
14
+ .all-inherit { all: inherit }
@@ -18,91 +18,52 @@ $white: #fff !default;
18
18
  $silver: #ddd !default;
19
19
  $gray: #aaa !default;
20
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
- $lighten-1: rgba(255,255,255,.0625) !default;
53
- $lighten-2: rgba(255,255,255,.125) !default;
54
- $lighten-3: rgba(255,255,255,.25) !default;
55
- $lighten-4: rgba(255,255,255,.5) !default;
56
- $border-width: 1px !default;
57
- $border-radius: 3px !default;
58
- $border-color: $darken-2 !default;
59
21
 
60
22
  // Custom Media Query Variables
61
23
 
62
- $breakpoint-sm: '(min-width: 40em)' !default;
63
- $breakpoint-md: '(min-width: 52em)' !default;
64
- $breakpoint-lg: '(min-width: 64em)' !default;
65
24
 
66
25
  /* Basscss Background Colors */
67
26
 
27
+ /*
28
+
29
+ COLOR VARIABLES
30
+
31
+ - Cool
32
+ - Warm
33
+ - Gray Scale
34
+
35
+ */
36
+
68
37
  .bg-black { background-color: $black }
38
+
69
39
  .bg-gray { background-color: $gray }
40
+
70
41
  .bg-silver { background-color: $silver }
42
+
71
43
  .bg-white { background-color: $white }
72
44
 
73
45
  .bg-aqua { background-color: $aqua }
46
+
74
47
  .bg-blue { background-color: $blue }
48
+
75
49
  .bg-navy { background-color: $navy }
50
+
76
51
  .bg-teal { background-color: $teal }
52
+
77
53
  .bg-green { background-color: $green }
54
+
78
55
  .bg-olive { background-color: $olive }
56
+
79
57
  .bg-lime { background-color: $lime }
80
58
 
81
59
  .bg-yellow { background-color: $yellow }
82
- .bg-orange { background-color: $orange }
83
- .bg-red { background-color: $red }
84
- .bg-fuchsia { background-color: $fuchsia }
85
- .bg-purple { background-color: $purple }
86
- .bg-maroon { background-color: $maroon }
87
-
88
- .bg-darken-1 { background-color: $darken-1 }
89
- .bg-darken-2 { background-color: $darken-2 }
90
- .bg-darken-3 { background-color: $darken-3 }
91
- .bg-darken-4 { background-color: $darken-4 }
92
60
 
93
- .bg-lighten-1 { background-color: $lighten-1 }
94
- .bg-lighten-2 { background-color: $lighten-2 }
95
- .bg-lighten-3 { background-color: $lighten-3 }
96
- .bg-lighten-4 { background-color: $lighten-4 }
97
-
98
- /* Basscss Defaults */
61
+ .bg-orange { background-color: $orange }
99
62
 
100
- /*
63
+ .bg-red { background-color: $red }
101
64
 
102
- COLOR VARIABLES
65
+ .bg-fuchsia { background-color: $fuchsia }
103
66
 
104
- - Cool
105
- - Warm
106
- - Gray Scale
67
+ .bg-purple { background-color: $purple }
107
68
 
108
- */
69
+ .bg-maroon { background-color: $maroon }
@@ -8,10 +8,15 @@
8
8
  /* Basscss Background Images */
9
9
 
10
10
  .bg-cover { background-size: cover }
11
+
11
12
  .bg-contain { background-size: contain }
12
13
 
13
14
  .bg-center { background-position: center }
15
+
14
16
  .bg-top { background-position: top }
17
+
15
18
  .bg-right { background-position: right }
19
+
16
20
  .bg-bottom { background-position: bottom }
21
+
17
22
  .bg-left { background-position: left }
@@ -18,91 +18,52 @@ $white: #fff !default;
18
18
  $silver: #ddd !default;
19
19
  $gray: #aaa !default;
20
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
- $lighten-1: rgba(255,255,255,.0625) !default;
53
- $lighten-2: rgba(255,255,255,.125) !default;
54
- $lighten-3: rgba(255,255,255,.25) !default;
55
- $lighten-4: rgba(255,255,255,.5) !default;
56
- $border-width: 1px !default;
57
- $border-radius: 3px !default;
58
- $border-color: $darken-2 !default;
59
21
 
60
22
  // Custom Media Query Variables
61
23
 
62
- $breakpoint-sm: '(min-width: 40em)' !default;
63
- $breakpoint-md: '(min-width: 52em)' !default;
64
- $breakpoint-lg: '(min-width: 64em)' !default;
65
24
 
66
25
  /* Basscss Border Colors */
67
26
 
27
+ /*
28
+
29
+ COLOR VARIABLES
30
+
31
+ - Cool
32
+ - Warm
33
+ - Gray Scale
34
+
35
+ */
36
+
68
37
  .border-black { border-color: $black }
38
+
69
39
  .border-gray { border-color: $gray }
40
+
70
41
  .border-silver { border-color: $silver }
42
+
71
43
  .border-white { border-color: $white }
72
44
 
73
45
  .border-aqua { border-color: $aqua }
46
+
74
47
  .border-blue { border-color: $blue }
48
+
75
49
  .border-navy { border-color: $navy }
50
+
76
51
  .border-teal { border-color: $teal }
52
+
77
53
  .border-green { border-color: $green }
54
+
78
55
  .border-olive { border-color: $olive }
56
+
79
57
  .border-lime { border-color: $lime }
80
58
 
81
59
  .border-yellow { border-color: $yellow }
82
- .border-orange { border-color: $orange }
83
- .border-red { border-color: $red }
84
- .border-fuchsia { border-color: $fuchsia }
85
- .border-purple { border-color: $purple }
86
- .border-maroon { border-color: $maroon }
87
-
88
- .border-darken-1 { border-color: $darken-1 }
89
- .border-darken-2 { border-color: $darken-2 }
90
- .border-darken-3 { border-color: $darken-3 }
91
- .border-darken-4 { border-color: $darken-4 }
92
60
 
93
- .border-lighten-1 { border-color: $lighten-1 }
94
- .border-lighten-2 { border-color: $lighten-2 }
95
- .border-lighten-3 { border-color: $lighten-3 }
96
- .border-lighten-4 { border-color: $lighten-4 }
97
-
98
- /* Basscss Defaults */
61
+ .border-orange { border-color: $orange }
99
62
 
100
- /*
63
+ .border-red { border-color: $red }
101
64
 
102
- COLOR VARIABLES
65
+ .border-fuchsia { border-color: $fuchsia }
103
66
 
104
- - Cool
105
- - Warm
106
- - Gray Scale
67
+ .border-purple { border-color: $purple }
107
68
 
108
- */
69
+ .border-maroon { border-color: $maroon }
@@ -0,0 +1,51 @@
1
+
2
+ // Converted Variables
3
+
4
+ $border-width: 1px !default;
5
+ $border-radius: 3px !default;
6
+
7
+ // Custom Media Query Variables
8
+
9
+
10
+ /* Basscss Border */
11
+
12
+ .border {
13
+ border-style: solid;
14
+ border-width: $border-width;
15
+ }
16
+
17
+ .border-top {
18
+ border-top-style: solid;
19
+ border-top-width: $border-width;
20
+ }
21
+
22
+ .border-right {
23
+ border-right-style: solid;
24
+ border-right-width: $border-width;
25
+ }
26
+
27
+ .border-bottom {
28
+ border-bottom-style: solid;
29
+ border-bottom-width: $border-width;
30
+ }
31
+
32
+ .border-left {
33
+ border-left-style: solid;
34
+ border-left-width: $border-width;
35
+ }
36
+
37
+ .border-none { border: 0 }
38
+
39
+ .rounded { border-radius: $border-radius }
40
+
41
+ .circle { border-radius: 50% }
42
+
43
+ .rounded-top { border-radius: $border-radius $border-radius 0 0 }
44
+
45
+ .rounded-right { border-radius: 0 $border-radius $border-radius 0 }
46
+
47
+ .rounded-bottom { border-radius: 0 0 $border-radius $border-radius }
48
+
49
+ .rounded-left { border-radius: $border-radius 0 0 $border-radius }
50
+
51
+ .not-rounded { border-radius: 0 }
@@ -1,67 +1,13 @@
1
1
 
2
2
  // Converted Variables
3
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
- $lighten-1: rgba(255,255,255,.0625) !default;
53
- $lighten-2: rgba(255,255,255,.125) !default;
54
- $lighten-3: rgba(255,255,255,.25) !default;
55
- $lighten-4: rgba(255,255,255,.5) !default;
56
- $border-width: 1px !default;
57
4
  $border-radius: 3px !default;
58
- $border-color: $darken-2 !default;
5
+ $darken-1: rgba(0, 0, 0, .0625) !default;
6
+ $darken-2: rgba(0, 0, 0, .125) !default;
7
+ $darken-3: rgba(0, 0, 0, .25) !default;
59
8
 
60
9
  // Custom Media Query Variables
61
10
 
62
- $breakpoint-sm: '(min-width: 40em)' !default;
63
- $breakpoint-md: '(min-width: 52em)' !default;
64
- $breakpoint-lg: '(min-width: 64em)' !default;
65
11
 
66
12
  /* Basscss Btn Outline */
67
13
 
@@ -87,16 +33,4 @@ $breakpoint-lg: '(min-width: 64em)' !default;
87
33
  .btn-outline:disabled,
88
34
  .btn-outline.is-disabled {
89
35
  opacity: .5;
90
- }
91
-
92
- /* Basscss Defaults */
93
-
94
- /*
95
-
96
- COLOR VARIABLES
97
-
98
- - Cool
99
- - Warm
100
- - Gray Scale
101
-
102
- */
36
+ }