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,135 @@
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 Base Typography */
63
+
64
+ body {
65
+ font-family: $font-family;
66
+ line-height: $line-height;
67
+ font-size: 100%;
68
+ }
69
+
70
+ h1, h2, h3, h4, h5, h6 {
71
+ font-family: $heading-font-family;
72
+ font-weight: $heading-font-weight;
73
+ line-height: $heading-line-height;
74
+ margin-top: 1em;
75
+ margin-bottom: .5em;
76
+ }
77
+
78
+ p, dl, ol, ul {
79
+ font-size: $h4;
80
+ margin-top: 0;
81
+ margin-bottom: $space-2;
82
+ }
83
+
84
+ pre, code, samp {
85
+ font-family: $monospace-font-family;
86
+ font-size: inherit;
87
+ }
88
+
89
+ pre {
90
+ margin-top: 0;
91
+ margin-bottom: $space-2;
92
+ overflow-x: scroll;
93
+ }
94
+
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
+ }
124
+
125
+ /* Basscss Defaults */
126
+
127
+ /*
128
+
129
+ COLOR VARIABLES
130
+
131
+ - Cool
132
+ - Warm
133
+ - Gray Scale
134
+
135
+ */
@@ -1,4 +1,65 @@
1
- // Borders
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 Borders */
2
63
 
3
64
  .border {
4
65
  border-style: solid;
@@ -30,6 +91,24 @@
30
91
  border-left-color: $border-color;
31
92
  }
32
93
 
33
- .rounded { border-radius: $border-radius; }
34
- .circle { border-radius: 50%; }
94
+ .rounded { border-radius: $border-radius }
95
+ .circle { border-radius: 50% }
96
+
97
+ .rounded-top { border-radius: $border-radius $border-radius 0 0 }
98
+ .rounded-right { border-radius: 0 $border-radius $border-radius 0 }
99
+ .rounded-bottom { border-radius: 0 0 $border-radius $border-radius }
100
+ .rounded-left { border-radius: $border-radius 0 0 $border-radius }
101
+
102
+ .not-rounded { border-radius: 0 }
103
+
104
+ /* Basscss Defaults */
105
+
106
+ /*
107
+
108
+ COLOR VARIABLES
109
+
110
+ - Cool
111
+ - Warm
112
+ - Gray Scale
35
113
 
114
+ */
@@ -0,0 +1,46 @@
1
+
2
+ // Converted Variables
3
+
4
+ $blue: #0076df !default;
5
+ $border-radius: 3px !default;
6
+ $border-width: 1px !default;
7
+
8
+ // Custom Media Query Variables
9
+
10
+
11
+ /* Basscss Button Blue Outline */
12
+
13
+ .button-blue-outline {
14
+ color: $blue;
15
+ background-color: transparent;
16
+ border-radius: $border-radius;
17
+ border: $border-width solid $blue;
18
+ -webkit-transition-duration: .1s;
19
+ transition-duration: .1s;
20
+ -webkit-transition-timing-function: ease-out;
21
+ transition-timing-function: ease-out;
22
+ -webkit-transition-property: box-shadow, background-color;
23
+ transition-property: box-shadow, background-color;
24
+ }
25
+
26
+ .button-blue-outline:hover,
27
+ .button-blue-outline.is-active {
28
+ color: white;
29
+ background-color: $blue;
30
+ }
31
+
32
+ .button-blue-outline:active {
33
+ box-shadow: inset 0 3px 3px 0 rgba(#000,.25);
34
+ }
35
+
36
+ .button-blue-outline:focus {
37
+ outline: none;
38
+ box-shadow: 0 0 0 2px rgba(white, .5), 0 0 1px 4px rgba($blue, .5);
39
+ }
40
+
41
+ .button-blue-outline:disabled,
42
+ .button-blue-outline.is-disabled {
43
+ color: $blue;
44
+ background-color: transparent;
45
+ opacity: .5;
46
+ }
@@ -0,0 +1,41 @@
1
+
2
+ // Converted Variables
3
+
4
+ $blue: #0076df !default;
5
+ $border-radius: 3px !default;
6
+
7
+ // Custom Media Query Variables
8
+
9
+
10
+ /* Basscss Button Blue */
11
+
12
+ .button-blue {
13
+ color: white;
14
+ background-color: $blue;
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-blue:hover {
25
+ opacity: .875;
26
+ }
27
+
28
+ .button-blue:active,
29
+ .button-blue.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-blue:focus {
34
+ outline: none;
35
+ box-shadow: 0 0 0 2px rgba(white, .5), 0 0 1px 4px rgba($blue, .5);
36
+ }
37
+
38
+ .button-blue:disabled,
39
+ .button-blue.is-disabled {
40
+ opacity: .5;
41
+ }
@@ -0,0 +1,42 @@
1
+
2
+ // Converted Variables
3
+
4
+ $mid-gray: #777 !default;
5
+ $blue: #0076df !default;
6
+ $border-radius: 3px !default;
7
+
8
+ // Custom Media Query Variables
9
+
10
+
11
+ /* Basscss Button Gray */
12
+
13
+ .button-gray {
14
+ color: white;
15
+ background-color: $mid-gray;
16
+ border-radius: $border-radius;
17
+ -webkit-transition-duration: .1s;
18
+ transition-duration: .1s;
19
+ -webkit-transition-timing-function: ease-out;
20
+ transition-timing-function: ease-out;
21
+ -webkit-transition-property: box-shadow, background-color;
22
+ transition-property: box-shadow, background-color;
23
+ }
24
+
25
+ .button-gray:hover {
26
+ opacity: .875;
27
+ }
28
+
29
+ .button-gray:active,
30
+ .button-gray:is-active {
31
+ box-shadow: inset 0 0 0 32px rgba(#000,.125), inset 0 2px 3px 0 rgba(#000,.25);
32
+ }
33
+
34
+ .button-gray:focus {
35
+ outline: none;
36
+ box-shadow: 0 0 0 2px white, 0 0 1px 4px rgba($blue, .5);
37
+ }
38
+
39
+ .button-gray:disabled,
40
+ .button-gray.is-disabled {
41
+ opacity: .5;
42
+ }
@@ -0,0 +1,43 @@
1
+
2
+ // Converted Variables
3
+
4
+ $blue: #0076df !default;
5
+ $light-gray: #ccc !default;
6
+ $dark-gray: #333 !default;
7
+ $border-radius: 3px !default;
8
+
9
+ // Custom Media Query Variables
10
+
11
+
12
+ /* Basscss Button Light Gray */
13
+
14
+ .button-light-gray {
15
+ color: $dark-gray;
16
+ background-color: $light-gray;
17
+ border-radius: $border-radius;
18
+ -webkit-transition-duration: .1s;
19
+ transition-duration: .1s;
20
+ -webkit-transition-timing-function: ease-out;
21
+ transition-timing-function: ease-out;
22
+ -webkit-transition-property: box-shadow, background-color;
23
+ transition-property: box-shadow, background-color;
24
+ }
25
+
26
+ .button-light-gray:hover {
27
+ opacity: .875;
28
+ }
29
+
30
+ .button-light-gray:active,
31
+ .button-light-gray:is-active {
32
+ box-shadow: inset 0 0 0 32px rgba(#000,.125), inset 0 2px 3px 0 rgba(#000,.25);
33
+ }
34
+
35
+ .button-light-gray:focus {
36
+ outline: none;
37
+ box-shadow: 0 0 0 2px white, 0 0 1px 4px rgba($blue, .5);
38
+ }
39
+
40
+ .button-light-gray:disabled,
41
+ .button-light-gray.is-disabled {
42
+ opacity: .5;
43
+ }
@@ -0,0 +1,42 @@
1
+
2
+ // Converted Variables
3
+
4
+
5
+ // Custom Media Query Variables
6
+
7
+
8
+ /* Basscss Button Link */
9
+
10
+ .button-link {
11
+ padding-right: 0;
12
+ padding-left: 0;
13
+ color: inherit;
14
+ background-color: transparent;
15
+ border-radius: 0;
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;
21
+ transition-property: box-shadow;
22
+ }
23
+
24
+ .button-link:hover {
25
+ box-shadow: inset 0 -.125em;
26
+ }
27
+
28
+ .button-link:active,
29
+ .button-link.is-active {
30
+ box-shadow: inset 0 -.125em;
31
+ }
32
+
33
+ .button-link:focus {
34
+ outline: none;
35
+ border-color: transparent;
36
+ box-shadow: 0 0 0 3px $darken-3, inset 0 -.125em;
37
+ }
38
+
39
+ .button-link:disabled,
40
+ .button-link.is-disabled {
41
+ opacity: .5;
42
+ }