bassy-rails 0.0.8

Sign up to get free protection for your applications and to get access to all the features.
Files changed (62) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +24 -0
  3. data/Gemfile +4 -0
  4. data/LICENSE.txt +22 -0
  5. data/README.md +35 -0
  6. data/Rakefile +10 -0
  7. data/app/assets/stylesheets/basscss/_align.scss +13 -0
  8. data/app/assets/stylesheets/basscss/_background-colors.scss +99 -0
  9. data/app/assets/stylesheets/basscss/_background-images.scss +17 -0
  10. data/app/assets/stylesheets/basscss/_base-buttons.scss +114 -0
  11. data/app/assets/stylesheets/basscss/_base-forms.scss +128 -0
  12. data/app/assets/stylesheets/basscss/_base-reset.scss +10 -0
  13. data/app/assets/stylesheets/basscss/_base-tables.scss +99 -0
  14. data/app/assets/stylesheets/basscss/_base-typography.scss +132 -0
  15. data/app/assets/stylesheets/basscss/_border-colors.scss +99 -0
  16. data/app/assets/stylesheets/basscss/_borders.scss +116 -0
  17. data/app/assets/stylesheets/basscss/_btn-outline.scss +98 -0
  18. data/app/assets/stylesheets/basscss/_btn-primary.scss +97 -0
  19. data/app/assets/stylesheets/basscss/_btn.scss +113 -0
  20. data/app/assets/stylesheets/basscss/_button-blue-outline.scss +46 -0
  21. data/app/assets/stylesheets/basscss/_button-blue.scss +41 -0
  22. data/app/assets/stylesheets/basscss/_button-gray.scss +42 -0
  23. data/app/assets/stylesheets/basscss/_button-light-gray.scss +43 -0
  24. data/app/assets/stylesheets/basscss/_button-link.scss +42 -0
  25. data/app/assets/stylesheets/basscss/_button-nav-dark.scss +23 -0
  26. data/app/assets/stylesheets/basscss/_button-nav-light.scss +26 -0
  27. data/app/assets/stylesheets/basscss/_button-nav-tab.scss +34 -0
  28. data/app/assets/stylesheets/basscss/_button-outline.scss +123 -0
  29. data/app/assets/stylesheets/basscss/_button-red.scss +41 -0
  30. data/app/assets/stylesheets/basscss/_button-sizes.scss +93 -0
  31. data/app/assets/stylesheets/basscss/_button-solid.scss +104 -0
  32. data/app/assets/stylesheets/basscss/_button-transparent.scss +127 -0
  33. data/app/assets/stylesheets/basscss/_color-base.scss +110 -0
  34. data/app/assets/stylesheets/basscss/_color-buttons.scss +196 -0
  35. data/app/assets/stylesheets/basscss/_color-forms-dark.scss +142 -0
  36. data/app/assets/stylesheets/basscss/_color-forms.scss +135 -0
  37. data/app/assets/stylesheets/basscss/_color-input-range.scss +119 -0
  38. data/app/assets/stylesheets/basscss/_color-progress.scss +95 -0
  39. data/app/assets/stylesheets/basscss/_color-tables.scss +85 -0
  40. data/app/assets/stylesheets/basscss/_colors.scss +97 -0
  41. data/app/assets/stylesheets/basscss/_defaults.scss +72 -0
  42. data/app/assets/stylesheets/basscss/_flex-object.scss +104 -0
  43. data/app/assets/stylesheets/basscss/_grid.scss +320 -0
  44. data/app/assets/stylesheets/basscss/_highlight.scss +166 -0
  45. data/app/assets/stylesheets/basscss/_input-range.scss +155 -0
  46. data/app/assets/stylesheets/basscss/_positions.scss +22 -0
  47. data/app/assets/stylesheets/basscss/_progress.scss +101 -0
  48. data/app/assets/stylesheets/basscss/_responsive-states.scss +114 -0
  49. data/app/assets/stylesheets/basscss/_responsive-white-space.scss +194 -0
  50. data/app/assets/stylesheets/basscss/_table-object.scss +58 -0
  51. data/app/assets/stylesheets/basscss/_type-scale.scss +81 -0
  52. data/app/assets/stylesheets/basscss/_ui-utility-groups.scss +21 -0
  53. data/app/assets/stylesheets/basscss/_utility-headings.scss +33 -0
  54. data/app/assets/stylesheets/basscss/_utility-layout.scss +32 -0
  55. data/app/assets/stylesheets/basscss/_utility-typography.scss +33 -0
  56. data/app/assets/stylesheets/basscss/_white-space.scss +128 -0
  57. data/app/assets/stylesheets/basscss/basscss.scss +42 -0
  58. data/bassy-rails.gemspec +23 -0
  59. data/lib/bassy/rails.rb +7 -0
  60. data/lib/bassy/rails/engine.rb +8 -0
  61. data/lib/bassy/rails/version.rb +5 -0
  62. metadata +134 -0
@@ -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
+ background-size: 100% .25em;
16
+ background-repeat: repeat-x;
17
+ background-position: 0 1.5rem;
18
+ border-radius: 0;
19
+ }
20
+
21
+ .button-link:hover,
22
+ .button-link:focus {
23
+ box-shadow: none;
24
+ background-image: -webkit-linear-gradient(transparent 50%, currentcolor 50%);
25
+ background-image: linear-gradient(transparent 50%, currentcolor 50%);
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 2px $darken-3;
37
+ }
38
+
39
+ .button-link:disabled,
40
+ .button-link.is-disabled {
41
+ opacity: .5;
42
+ }
@@ -0,0 +1,23 @@
1
+
2
+ // Converted Variables
3
+
4
+ $darken-2: rgba(#000,.125) !default;
5
+
6
+ // Custom Media Query Variables
7
+
8
+
9
+ /* Basscss Button Nav Dark */
10
+
11
+ .button-nav-dark {
12
+ color: white;
13
+ background-color: transparent;
14
+ }
15
+
16
+ .button-nav-dark:hover {
17
+ background-color: $darken-2;
18
+ }
19
+
20
+ .button-nav-dark:active,
21
+ .button-nav-dark.is-active {
22
+ background-color: $darken-2;
23
+ }
@@ -0,0 +1,26 @@
1
+
2
+ // Converted Variables
3
+
4
+ $dark-gray: #333 !default;
5
+ $darken-1: rgba(#000,.0625) !default;
6
+ $button-nav-light-color: $blue /* Fallback value: inherit */ !default;
7
+ $hover-background-color: $darken-1 !default;
8
+ $border-radius: 3px !default;
9
+
10
+ // Custom Media Query Variables
11
+
12
+
13
+ /* Basscss Button Nav Light */
14
+
15
+ .button-nav-light {
16
+ color: $button-nav-light-color;
17
+ background-color: transparent;
18
+ }
19
+
20
+ .button-nav-light:hover {
21
+ background-color: $hover-background-color;
22
+ }
23
+ .button-nav-light:active,
24
+ .button-nav-light.is-active {
25
+ color: $dark-gray;
26
+ }
@@ -0,0 +1,34 @@
1
+
2
+ // Converted Variables
3
+
4
+ $dark-gray: #333 !default;
5
+ $light-gray: #ccc !default;
6
+ $darken-1: rgba(#000,.0625) !default;
7
+ $hover-background-color: $darken-1 !default;
8
+ $border-color: $light-gray !default;
9
+ $border-radius: 3px !default;
10
+
11
+ // Custom Media Query Variables
12
+
13
+
14
+ /* Basscss Button Nav Tab */
15
+
16
+ .button-nav-tab {
17
+ margin-bottom: -1px;
18
+ border-radius: $border-radius $border-radius 0 0;
19
+ border-bottom: 1px solid $border-color;
20
+ color: $dark-gray;
21
+ background-color: transparent;
22
+ }
23
+
24
+ .button-nav-tab:hover {
25
+ background-color: $hover-background-color;
26
+ }
27
+
28
+ .button-nav-tab.is-active {
29
+ background-color: white;
30
+ border-bottom: 1px solid white;
31
+ border-top: 1px solid $border-color;
32
+ border-left: 1px solid $border-color;
33
+ border-right: 1px solid $border-color;
34
+ }
@@ -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 Button Outline */
63
+
64
+ .button-outline {
65
+ position: relative;
66
+ z-index: 2;
67
+ color: inherit;
68
+ background-color: transparent;
69
+ border-radius: $border-radius;
70
+ border: $border-width solid currentcolor;
71
+ }
72
+
73
+ .button-outline:before {
74
+ content: '';
75
+ display: block;
76
+ position: absolute;
77
+ z-index: -1;
78
+ top: -$border-width;
79
+ right: -$border-width;
80
+ bottom: -$border-width;
81
+ left: -$border-width;
82
+ border: $border-width solid transparent;
83
+ background-color: currentcolor;
84
+ border-radius: $border-radius;
85
+ opacity: 0;
86
+ }
87
+
88
+ .button-outline:hover {
89
+ box-shadow: none;
90
+ }
91
+
92
+ .button-outline:hover:before,
93
+ .button-outline:focus:before {
94
+ opacity: .125;
95
+ }
96
+
97
+ .button-outline:focus {
98
+ outline: none;
99
+ border: $border-width solid currentcolor;
100
+ box-shadow: 0 0 0 2px;
101
+ }
102
+
103
+ .button-outline:active,
104
+ .button-outline.is-active {
105
+ box-shadow: inset 0 1px 5px 0, 0 0 1px;
106
+ }
107
+
108
+ .button-outline:disabled,
109
+ .button-outline.is-disabled {
110
+ opacity: .5;
111
+ }
112
+
113
+ /* Basscss Defaults */
114
+
115
+ /*
116
+
117
+ COLOR VARIABLES
118
+
119
+ - Cool
120
+ - Warm
121
+ - Gray Scale
122
+
123
+ */
@@ -0,0 +1,41 @@
1
+
2
+ // Converted Variables
3
+
4
+ $red: #f95020 !default;
5
+ $border-radius: 3px !default;
6
+
7
+ // Custom Media Query Variables
8
+
9
+
10
+ /* Basscss Button Red */
11
+
12
+ .button-red {
13
+ color: white;
14
+ background-color: $red;
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-red:hover {
25
+ opacity: .875;
26
+ }
27
+
28
+ .button-red:active,
29
+ .button-red.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-red:focus {
34
+ outline: none;
35
+ box-shadow: 0 0 0 2px rgba(white, .5), 0 0 1px 4px rgba($red, .5);
36
+ }
37
+
38
+ .button-red:disabled,
39
+ .button-red.is-disabled {
40
+ opacity: .5;
41
+ }
@@ -0,0 +1,93 @@
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
+ $button-small-padding-y: .25rem !default;
56
+ $button-small-padding-x: .5rem !default;
57
+ $button-big-padding-y: 1rem !default;
58
+ $button-big-padding-x: 1.25rem !default;
59
+ $button-narrow-padding-x: $space-1 !default;
60
+
61
+ // Custom Media Query Variables
62
+
63
+ $breakpoint-sm: '(min-width: 40em)' !default;
64
+ $breakpoint-md: '(min-width: 52em)' !default;
65
+ $breakpoint-lg: '(min-width: 64em)' !default;
66
+
67
+ /* Basscss UI Utility Button Sizes */
68
+
69
+ .button-small {
70
+ padding: $button-small-padding-y $button-small-padding-x;
71
+ }
72
+
73
+ .button-big {
74
+ padding: $button-big-padding-y $button-big-padding-x;
75
+ }
76
+
77
+ .button-narrow {
78
+ padding-left: $button-narrow-padding-x;
79
+ padding-right: $button-narrow-padding-x;
80
+ }
81
+
82
+
83
+ /* Basscss Defaults */
84
+
85
+ /*
86
+
87
+ COLOR VARIABLES
88
+
89
+ - Cool
90
+ - Warm
91
+ - Gray Scale
92
+
93
+ */
@@ -0,0 +1,104 @@
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
+ $button-color: white !default;
56
+ $button-background-color: $blue !default;
57
+
58
+ // Custom Media Query Variables
59
+
60
+ $breakpoint-sm: '(min-width: 40em)' !default;
61
+ $breakpoint-md: '(min-width: 52em)' !default;
62
+ $breakpoint-lg: '(min-width: 64em)' !default;
63
+
64
+ /* Basscss Button Solid */
65
+
66
+ .button {
67
+ color: $button-color;
68
+ background-color: $button-background-color;
69
+ border-radius: $border-radius;
70
+ }
71
+
72
+ .button:hover {
73
+ box-shadow: inset 0 0 0 20rem $darken-1;
74
+ }
75
+
76
+ .button:focus {
77
+ outline: none;
78
+ border-color: $darken-2;
79
+ box-shadow: 0 0 0 3px $darken-3;
80
+ }
81
+
82
+ .button:active,
83
+ .button.is-active {
84
+ box-shadow: inset 0 0 0 20rem $darken-2,
85
+ inset 0 3px 4px 0 $darken-3,
86
+ 0 0 1px $darken-2;
87
+ }
88
+
89
+ .button:disabled,
90
+ .button.is-disabled {
91
+ opacity: .5;
92
+ }
93
+
94
+ /* Basscss Defaults */
95
+
96
+ /*
97
+
98
+ COLOR VARIABLES
99
+
100
+ - Cool
101
+ - Warm
102
+ - Gray Scale
103
+
104
+ */