basscss-rails 1.0.0 → 2.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (31) hide show
  1. checksums.yaml +4 -4
  2. data/Rakefile +9 -1
  3. data/app/assets/stylesheets/basscss/_align.scss +13 -0
  4. data/app/assets/stylesheets/basscss/_background-colors.scss +99 -0
  5. data/app/assets/stylesheets/basscss/_base-buttons.scss +5 -1
  6. data/app/assets/stylesheets/basscss/_base-forms.scss +12 -13
  7. data/app/assets/stylesheets/basscss/_base-reset.scss +1 -7
  8. data/app/assets/stylesheets/basscss/_base-typography.scss +36 -39
  9. data/app/assets/stylesheets/basscss/_border-colors.scss +99 -0
  10. data/app/assets/stylesheets/basscss/_borders.scss +2 -0
  11. data/app/assets/stylesheets/basscss/_btn-outline.scss +98 -0
  12. data/app/assets/stylesheets/basscss/_btn-primary.scss +97 -0
  13. data/app/assets/stylesheets/basscss/_btn.scss +113 -0
  14. data/app/assets/stylesheets/basscss/_button-link.scss +9 -9
  15. data/app/assets/stylesheets/basscss/_button-outline.scss +0 -12
  16. data/app/assets/stylesheets/basscss/_button-solid.scss +104 -0
  17. data/app/assets/stylesheets/basscss/_button-transparent.scss +0 -12
  18. data/app/assets/stylesheets/basscss/_color-base.scss +16 -43
  19. data/app/assets/stylesheets/basscss/_color-forms-dark.scss +25 -6
  20. data/app/assets/stylesheets/basscss/_color-forms.scss +37 -17
  21. data/app/assets/stylesheets/basscss/_color-input-range.scss +119 -0
  22. data/app/assets/stylesheets/basscss/_color-progress.scss +95 -0
  23. data/app/assets/stylesheets/basscss/_colors.scss +5 -64
  24. data/app/assets/stylesheets/basscss/_flex-object.scss +2 -7
  25. data/app/assets/stylesheets/basscss/_type-scale.scss +81 -0
  26. data/app/assets/stylesheets/basscss/_utility-layout.scss +3 -2
  27. data/app/assets/stylesheets/basscss/_utility-typography.scss +14 -1
  28. data/app/assets/stylesheets/basscss/_white-space.scss +2 -0
  29. data/app/assets/stylesheets/basscss/basscss.scss +27 -25
  30. data/lib/basscss/rails/version.rb +1 -1
  31. metadata +14 -3
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: d9f9901ec7a855ceac897385e585c3a958177690
4
- data.tar.gz: 9a1f3aef00e7cebe3965d1ea3457c38aab87e47f
3
+ metadata.gz: c850263322c05ef2020eee48915b123a27476694
4
+ data.tar.gz: 41f1beb95456b9144551d48d1ce7795ec740215f
5
5
  SHA512:
6
- metadata.gz: dcc314f85efd9fc5ece452688719778f734a3f81d8b2ec642bd68d6ab09cf14f463a6233e44b2e170b184fc0ffaf853bbb1152261247be88167e925ff84cc05f
7
- data.tar.gz: db8320885ff2a28c01ded6078e517abc5f4bc04a9f6f8f6475b5cb87d7bd2fb4dd6e23259e65c7a02078db7e1a650793d17d209455f25745cf7b22af3d06200e
6
+ metadata.gz: bada0af36bf48cd748ea1977193169f6e0febc8c29ce3471f74c3dd397d119bcd098b958a5cd1769392ce6c4203c9497a2352a155d56d337307070d7c001afa8
7
+ data.tar.gz: b2ad0a185cafa200267c55089eeb140ab71955ccc7fe7c985a6f4da119d9d89be097424649a4c563c8cef675c7b998e44d7a38a1523782350ac2d42c74481fb3
data/Rakefile CHANGED
@@ -1,2 +1,10 @@
1
- require "bundler/gem_tasks"
1
+ require 'bundler/gem_tasks'
2
+ require 'fileutils'
2
3
 
4
+ task :update do
5
+ puts 'Updating basscss files'
6
+ # exec('npm i --save basscss-sass --prefix ./')
7
+ FileUtils.remove_dir('app/assets/stylesheets/basscss')
8
+ FileUtils.mkdir('app/assets/stylesheets/basscss')
9
+ exec('cp node_modules/basscss-sass/*.scss app/assets/stylesheets/basscss')
10
+ end
@@ -0,0 +1,13 @@
1
+
2
+ // Converted Variables
3
+
4
+
5
+ // Custom Media Query Variables
6
+
7
+
8
+ /* Basscss Align */
9
+
10
+ .align-baseline { vertical-align: baseline }
11
+ .align-top { vertical-align: top }
12
+ .align-middle { vertical-align: middle }
13
+ .align-bottom { vertical-align: bottom }
@@ -0,0 +1,99 @@
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 Background Colors */
63
+
64
+ .bg-black { background-color: $black }
65
+ .bg-gray { background-color: $gray }
66
+ .bg-silver { background-color: $silver }
67
+ .bg-white { background-color: $white }
68
+
69
+ .bg-aqua { background-color: $aqua }
70
+ .bg-blue { background-color: $blue }
71
+ .bg-navy { background-color: $navy }
72
+ .bg-teal { background-color: $teal }
73
+ .bg-green { background-color: $green }
74
+ .bg-olive { background-color: $olive }
75
+ .bg-lime { background-color: $lime }
76
+
77
+ .bg-yellow { background-color: $yellow }
78
+ .bg-orange { background-color: $orange }
79
+ .bg-red { background-color: $red }
80
+ .bg-fuchsia { background-color: $fuchsia }
81
+ .bg-purple { background-color: $purple }
82
+ .bg-maroon { background-color: $maroon }
83
+
84
+ .bg-darken-1 { background-color: $darken-1 }
85
+ .bg-darken-2 { background-color: $darken-2 }
86
+ .bg-darken-3 { background-color: $darken-3 }
87
+ .bg-darken-4 { background-color: $darken-4 }
88
+
89
+ /* Basscss Defaults */
90
+
91
+ /*
92
+
93
+ COLOR VARIABLES
94
+
95
+ - Cool
96
+ - Warm
97
+ - Gray Scale
98
+
99
+ */
@@ -52,6 +52,7 @@ $darken-4: rgba(0,0,0,.5) !default;
52
52
  $border-width: 1px !default;
53
53
  $border-radius: 3px !default;
54
54
  $border-color: $darken-2 !default;
55
+ $button-font-family: inherit !default;
55
56
  $button-font-size: inherit !default;
56
57
  $button-font-weight: $bold-font-weight /* Fallback value: bold */ !default;
57
58
  $button-line-height: 1.125rem !default;
@@ -68,12 +69,12 @@ $breakpoint-lg: '(min-width: 64em)' !default;
68
69
 
69
70
  button,
70
71
  .button {
72
+ font-family: $button-font-family;
71
73
  font-size: $button-font-size;
72
74
  font-weight: $button-font-weight;
73
75
  text-decoration: none;
74
76
  cursor: pointer;
75
77
  display: inline-block;
76
- box-sizing: border-box;
77
78
  line-height: $button-line-height;
78
79
  padding: $button-padding-y $button-padding-x;
79
80
  margin: 0;
@@ -83,11 +84,14 @@ button,
83
84
  -webkit-appearance: none;
84
85
  }
85
86
 
87
+ button,
86
88
  button:after,
87
89
  button:before,
90
+ .button,
88
91
  .button:after,
89
92
  .button:before {
90
93
  box-sizing: border-box;
94
+ box-sizing: border-box;
91
95
  }
92
96
 
93
97
  ::-moz-focus-inner {
@@ -52,6 +52,11 @@ $darken-4: rgba(0,0,0,.5) !default;
52
52
  $border-width: 1px !default;
53
53
  $border-radius: 3px !default;
54
54
  $border-color: $darken-2 !default;
55
+ $form-field-font-family: inherit !default;
56
+ $form-field-font-size: 1rem !default;
57
+ $form-field-height: 2.25rem !default;
58
+ $form-field-padding-y: .5rem !default;
59
+ $form-field-padding-x: .5rem !default;
55
60
 
56
61
  // Custom Media Query Variables
57
62
 
@@ -65,12 +70,19 @@ input,
65
70
  select,
66
71
  textarea,
67
72
  fieldset {
73
+ font-family: $form-field-font-family;
68
74
  font-size: $form-field-font-size;
75
+ box-sizing: border-box;
69
76
  margin-top: 0;
70
77
  margin-bottom: 0;
71
78
  }
72
79
 
80
+ label {
81
+ vertical-align: middle;
82
+ }
83
+
73
84
  input[type=text],
85
+ input[type=date],
74
86
  input[type=datetime],
75
87
  input[type=datetime-local],
76
88
  input[type=email],
@@ -82,7 +94,6 @@ input[type=tel],
82
94
  input[type=time],
83
95
  input[type=url],
84
96
  input[type=week] {
85
- box-sizing: border-box;
86
97
  height: $form-field-height;
87
98
  padding: $form-field-padding-y $form-field-padding-x;
88
99
  vertical-align: middle;
@@ -90,7 +101,6 @@ input[type=week] {
90
101
  }
91
102
 
92
103
  select {
93
- box-sizing: border-box;
94
104
  line-height: 1.75;
95
105
  padding: $form-field-padding-y $form-field-padding-x;
96
106
  }
@@ -101,21 +111,10 @@ select:not([multiple]) {
101
111
  }
102
112
 
103
113
  textarea {
104
- box-sizing: border-box;
105
114
  line-height: 1.75;
106
115
  padding: $form-field-padding-y $form-field-padding-x;
107
116
  }
108
117
 
109
- .fieldset-reset {
110
- padding: 0;
111
- margin-left: 0;
112
- margin-right: 0;
113
- border: 0;
114
- }
115
- .fieldset-reset legend {
116
- padding: 0;
117
- }
118
-
119
118
  /* Basscss Defaults */
120
119
 
121
120
  /*
@@ -5,12 +5,6 @@
5
5
  // Custom Media Query Variables
6
6
 
7
7
 
8
- body, button { margin: 0 }
9
-
10
- button, input, select, textarea {
11
- font-family: inherit;
12
- font-size: 100%;
13
- }
14
-
8
+ body { margin: 0 }
15
9
  img { max-width: 100% }
16
10
  svg { max-height: 100% }
@@ -1,6 +1,22 @@
1
1
 
2
2
  // Converted Variables
3
3
 
4
+ $font-family: 'Helvetica Neue', Helvetica, sans-serif !default;
5
+ $line-height: 1.5 !default;
6
+ $body-font-size: 100% !default;
7
+ $heading-font-family: $font-family !default;
8
+ $heading-font-weight: bold !default;
9
+ $heading-line-height: 1.25 !default;
10
+ $heading-margin-top: 1em !default;
11
+ $heading-margin-bottom: .5em !default;
12
+ $paragraph-margin-top: 0 !default;
13
+ $paragraph-margin-bottom: $space-2 !default;
14
+ $list-margin-top: 0 !default;
15
+ $list-margin-bottom: $space-2 !default;
16
+ $monospace-font-family: 'Source Code Pro', Consolas, monospace !default;
17
+ $pre-font-size: inherit !default;
18
+ $pre-margin-top: 0 !default;
19
+ $pre-margin-bottom: $space-2 !default;
4
20
  $aqua: #7fdbff !default;
5
21
  $blue: #0074d9 !default;
6
22
  $navy: #001f3f !default;
@@ -64,63 +80,44 @@ $breakpoint-lg: '(min-width: 64em)' !default;
64
80
  body {
65
81
  font-family: $font-family;
66
82
  line-height: $line-height;
67
- font-size: 100%;
83
+ font-size: $body-font-size;
68
84
  }
69
85
 
70
86
  h1, h2, h3, h4, h5, h6 {
71
87
  font-family: $heading-font-family;
72
88
  font-weight: $heading-font-weight;
73
89
  line-height: $heading-line-height;
74
- margin-top: 1em;
75
- margin-bottom: .5em;
90
+ margin-top: $heading-margin-top;
91
+ margin-bottom: $heading-margin-bottom;
76
92
  }
77
93
 
78
- p, dl, ol, ul {
79
- font-size: $h4;
80
- margin-top: 0;
81
- margin-bottom: $space-2;
94
+ p {
95
+ margin-top: $paragraph-margin-top;
96
+ margin-bottom: $paragraph-margin-bottom;
97
+ }
98
+
99
+ dl, ol, ul {
100
+ margin-top: $list-margin-top;
101
+ margin-bottom: $list-margin-bottom;
82
102
  }
83
103
 
84
104
  pre, code, samp {
85
105
  font-family: $monospace-font-family;
86
- font-size: inherit;
106
+ font-size: $pre-font-size;
87
107
  }
88
108
 
89
109
  pre {
90
- margin-top: 0;
91
- margin-bottom: $space-2;
110
+ margin-top: $pre-margin-top;
111
+ margin-bottom: $pre-margin-bottom;
92
112
  overflow-x: scroll;
93
113
  }
94
114
 
95
- hr {
96
- margin-top: $space-3;
97
- margin-bottom: $space-3;
98
- }
99
-
100
- blockquote {
101
- margin-top: $space-3;
102
- margin-bottom: $space-3;
103
- margin-left: 0;
104
- padding-left: $space-2;
105
- padding-right: $space-2;
106
- }
107
- blockquote,
108
- blockquote p {
109
- font-size: $h3;
110
- font-style: italic;
111
- }
112
-
113
- h1, .h1 { font-size: $h1 }
114
- h2, .h2 { font-size: $h2 }
115
- h3, .h3 { font-size: $h3 }
116
- h4, .h4 { font-size: $h4 }
117
- h5, .h5 { font-size: $h5 }
118
- h6, .h6 { font-size: $h6 }
119
-
120
- .list-reset {
121
- list-style: none;
122
- padding-left: 0;
123
- }
115
+ h1 { font-size: $h1 }
116
+ h2 { font-size: $h2 }
117
+ h3 { font-size: $h3 }
118
+ h4 { font-size: $h4 }
119
+ h5 { font-size: $h5 }
120
+ h6 { font-size: $h6 }
124
121
 
125
122
  /* Basscss Defaults */
126
123
 
@@ -0,0 +1,99 @@
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 Border Colors */
63
+
64
+ .border-black { border-color: $black }
65
+ .border-gray { border-color: $gray }
66
+ .border-silver { border-color: $silver }
67
+ .border-white { border-color: $white }
68
+
69
+ .border-aqua { border-color: $aqua }
70
+ .border-blue { border-color: $blue }
71
+ .border-navy { border-color: $navy }
72
+ .border-teal { border-color: $teal }
73
+ .border-green { border-color: $green }
74
+ .border-olive { border-color: $olive }
75
+ .border-lime { border-color: $lime }
76
+
77
+ .border-yellow { border-color: $yellow }
78
+ .border-orange { border-color: $orange }
79
+ .border-red { border-color: $red }
80
+ .border-fuchsia { border-color: $fuchsia }
81
+ .border-purple { border-color: $purple }
82
+ .border-maroon { border-color: $maroon }
83
+
84
+ .border-darken-1 { border-color: $darken-1 }
85
+ .border-darken-2 { border-color: $darken-2 }
86
+ .border-darken-3 { border-color: $darken-3 }
87
+ .border-darken-4 { border-color: $darken-4 }
88
+
89
+ /* Basscss Defaults */
90
+
91
+ /*
92
+
93
+ COLOR VARIABLES
94
+
95
+ - Cool
96
+ - Warm
97
+ - Gray Scale
98
+
99
+ */