basscss-rails 2.0.1 → 3.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (44) hide show
  1. checksums.yaml +4 -4
  2. data/Rakefile +11 -5
  3. data/app/assets/stylesheets/basscss/_background-colors.scss +9 -0
  4. data/app/assets/stylesheets/basscss/_base-forms.scss +4 -0
  5. data/app/assets/stylesheets/basscss/_base-tables.scss +4 -0
  6. data/app/assets/stylesheets/basscss/_base-typography.scss +4 -0
  7. data/app/assets/stylesheets/basscss/_border-colors.scss +9 -0
  8. data/app/assets/stylesheets/basscss/_borders.scss +4 -0
  9. data/app/assets/stylesheets/basscss/_btn-outline.scss +4 -0
  10. data/app/assets/stylesheets/basscss/_btn-primary.scss +4 -0
  11. data/app/assets/stylesheets/basscss/{_button-sizes.scss → _btn-sizes.scss} +7 -3
  12. data/app/assets/stylesheets/basscss/_btn.scss +4 -0
  13. data/app/assets/stylesheets/basscss/_color-base.scss +4 -0
  14. data/app/assets/stylesheets/basscss/_color-forms-dark.scss +4 -0
  15. data/app/assets/stylesheets/basscss/_color-forms.scss +4 -0
  16. data/app/assets/stylesheets/basscss/_color-input-range.scss +4 -0
  17. data/app/assets/stylesheets/basscss/_color-progress.scss +4 -0
  18. data/app/assets/stylesheets/basscss/_color-tables.scss +4 -0
  19. data/app/assets/stylesheets/basscss/_colors.scss +4 -0
  20. data/app/assets/stylesheets/basscss/_defaults.scss +4 -0
  21. data/app/assets/stylesheets/basscss/_flex-object.scss +16 -1
  22. data/app/assets/stylesheets/basscss/_grid.scss +4 -0
  23. data/app/assets/stylesheets/basscss/_input-range.scss +4 -0
  24. data/app/assets/stylesheets/basscss/_progress.scss +4 -0
  25. data/app/assets/stylesheets/basscss/_responsive-states.scss +4 -0
  26. data/app/assets/stylesheets/basscss/_type-scale.scss +4 -0
  27. data/app/assets/stylesheets/basscss/_white-space.scss +4 -0
  28. data/app/assets/stylesheets/basscss/basscss.scss +1 -7
  29. data/lib/basscss/rails/version.rb +1 -1
  30. metadata +3 -17
  31. data/app/assets/stylesheets/basscss/_base-buttons.scss +0 -114
  32. data/app/assets/stylesheets/basscss/_button-blue-outline.scss +0 -46
  33. data/app/assets/stylesheets/basscss/_button-blue.scss +0 -41
  34. data/app/assets/stylesheets/basscss/_button-gray.scss +0 -42
  35. data/app/assets/stylesheets/basscss/_button-light-gray.scss +0 -43
  36. data/app/assets/stylesheets/basscss/_button-link.scss +0 -42
  37. data/app/assets/stylesheets/basscss/_button-nav-dark.scss +0 -23
  38. data/app/assets/stylesheets/basscss/_button-nav-light.scss +0 -26
  39. data/app/assets/stylesheets/basscss/_button-nav-tab.scss +0 -34
  40. data/app/assets/stylesheets/basscss/_button-outline.scss +0 -123
  41. data/app/assets/stylesheets/basscss/_button-red.scss +0 -41
  42. data/app/assets/stylesheets/basscss/_button-solid.scss +0 -104
  43. data/app/assets/stylesheets/basscss/_button-transparent.scss +0 -127
  44. data/app/assets/stylesheets/basscss/_color-buttons.scss +0 -196
@@ -1,114 +0,0 @@
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-font-family: inherit !default;
56
- $button-font-size: inherit !default;
57
- $button-font-weight: $bold-font-weight /* Fallback value: bold */ !default;
58
- $button-line-height: 1.125rem !default;
59
- $button-padding-y: .5rem !default;
60
- $button-padding-x: 1rem !default;
61
-
62
- // Custom Media Query Variables
63
-
64
- $breakpoint-sm: '(min-width: 40em)' !default;
65
- $breakpoint-md: '(min-width: 52em)' !default;
66
- $breakpoint-lg: '(min-width: 64em)' !default;
67
-
68
- /* Basscss Base Buttons */
69
-
70
- button,
71
- .button {
72
- font-family: $button-font-family;
73
- font-size: $button-font-size;
74
- font-weight: $button-font-weight;
75
- text-decoration: none;
76
- cursor: pointer;
77
- display: inline-block;
78
- line-height: $button-line-height;
79
- padding: $button-padding-y $button-padding-x;
80
- margin: 0;
81
- height: auto;
82
- border: $border-width solid transparent;
83
- vertical-align: middle;
84
- -webkit-appearance: none;
85
- }
86
-
87
- button,
88
- button:after,
89
- button:before,
90
- .button,
91
- .button:after,
92
- .button:before {
93
- box-sizing: border-box;
94
- box-sizing: border-box;
95
- }
96
-
97
- ::-moz-focus-inner {
98
- border: 0;
99
- padding: 0;
100
- }
101
-
102
- .button:hover { text-decoration: none }
103
-
104
- /* Basscss Defaults */
105
-
106
- /*
107
-
108
- COLOR VARIABLES
109
-
110
- - Cool
111
- - Warm
112
- - Gray Scale
113
-
114
- */
@@ -1,46 +0,0 @@
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
- }
@@ -1,41 +0,0 @@
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
- }
@@ -1,42 +0,0 @@
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
- }
@@ -1,43 +0,0 @@
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
- }
@@ -1,42 +0,0 @@
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
- }
@@ -1,23 +0,0 @@
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
- }
@@ -1,26 +0,0 @@
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
- }
@@ -1,34 +0,0 @@
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
- }
@@ -1,123 +0,0 @@
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
- */