prelude-framework 0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (53) hide show
  1. data/.gitignore +20 -0
  2. data/Gemfile +4 -0
  3. data/LICENCE +19 -0
  4. data/README.md +5 -0
  5. data/Rakefile +1 -0
  6. data/lib/prelude/version.rb +3 -0
  7. data/lib/prelude-framework.rb +8 -0
  8. data/prelude.gemspec +23 -0
  9. data/scss/prelude/_abstractions.scss +21 -0
  10. data/scss/prelude/_all.scss +6 -0
  11. data/scss/prelude/_base.scss +6 -0
  12. data/scss/prelude/_core.scss +13 -0
  13. data/scss/prelude/_debug-mode.scss +125 -0
  14. data/scss/prelude/_defaults.scss +159 -0
  15. data/scss/prelude/_functions.scss +8 -0
  16. data/scss/prelude/_images.scss +9 -0
  17. data/scss/prelude/_mixins.scss +9 -0
  18. data/scss/prelude/_modules.scss +7 -0
  19. data/scss/prelude/_typography.scss +15 -0
  20. data/scss/prelude/abstractions/_flag.scss +67 -0
  21. data/scss/prelude/abstractions/_flexbox.scss +29 -0
  22. data/scss/prelude/abstractions/_island.scss +53 -0
  23. data/scss/prelude/abstractions/_media.scss +61 -0
  24. data/scss/prelude/abstractions/_nav.scss +110 -0
  25. data/scss/prelude/abstractions/_split.scss +26 -0
  26. data/scss/prelude/base/_border-box.scss +7 -0
  27. data/scss/prelude/base/_helpers.scss +167 -0
  28. data/scss/prelude/functions/_contrasty.scss +24 -0
  29. data/scss/prelude/functions/_is-saturated.scss +14 -0
  30. data/scss/prelude/functions/_pixels-to-ems.scss +7 -0
  31. data/scss/prelude/images/_base.scss +36 -0
  32. data/scss/prelude/images/_cover-image.scss +16 -0
  33. data/scss/prelude/images/_thumbnails.scss +47 -0
  34. data/scss/prelude/mixins/_button-style.scss +40 -0
  35. data/scss/prelude/mixins/_each-grid-breakpoint.scss +21 -0
  36. data/scss/prelude/mixins/_gradients.scss +12 -0
  37. data/scss/prelude/mixins/_rem.scss +31 -0
  38. data/scss/prelude/mixins/_set-font-size.scss +26 -0
  39. data/scss/prelude/modules/_buttons.scss +126 -0
  40. data/scss/prelude/modules/_forms.scss +634 -0
  41. data/scss/prelude/modules/_tables.scss +160 -0
  42. data/scss/prelude/typography/_base.scss +16 -0
  43. data/scss/prelude/typography/_brand.scss +19 -0
  44. data/scss/prelude/typography/_links.scss +14 -0
  45. data/scss/prelude/typography/_paragraphs.scss +9 -0
  46. data/scss/prelude/typography/_quotes.scss +31 -0
  47. data/scss/prelude/typography/_sizes.scss +63 -0
  48. data/scss/prelude.scss +53 -0
  49. data/test/config.rb +9 -0
  50. data/test/index.html +381 -0
  51. data/test/scss/_prelude-settings.scss +159 -0
  52. data/test/scss/style.scss +55 -0
  53. metadata +164 -0
@@ -0,0 +1,126 @@
1
+ // =============================================================================
2
+ // Buttons
3
+ //
4
+ // Basic button styles.
5
+ //
6
+ // Table of contents:
7
+ // 1. Button class
8
+ // 2. States
9
+ // 3. Sizes
10
+ // 4. Styles
11
+ // 5. Button groups
12
+ //
13
+ // =============================================================================
14
+
15
+ @import "../mixins/button-style",
16
+ "../mixins/rem";
17
+
18
+ // =============================================================================
19
+ // 1. Button class
20
+ // =============================================================================
21
+
22
+ .btn {
23
+
24
+ @include btn-style($btn-background);
25
+
26
+ // Use a gradient
27
+ @if $btn-use-gradient == true {
28
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
29
+ }
30
+
31
+ // Add a shadow
32
+ @if $btn-use-shadow == true {
33
+ box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 1px rgba(0,0,0,.25);
34
+ }
35
+
36
+ display: inline-block;
37
+ margin-bottom: 0; // For input.btn
38
+ padding: $btn-padding;
39
+ font-weight: $btn-font-weight;
40
+ line-height: 1.25;
41
+ text-align: center;
42
+ text-decoration: none;
43
+ vertical-align: middle;
44
+ border-radius: $btn-border-radius;
45
+ border: 1px solid darken($white,10%);
46
+ cursor: pointer;
47
+ -webkit-tap-highlight-color: rgba(0,0,0,0);
48
+
49
+
50
+ // =============================================================================
51
+ // 2. States
52
+ // =============================================================================
53
+
54
+ &:hover {
55
+ @if $btn-use-gradient == true {
56
+ @include transition(background-position .1s linear);
57
+ background-position: 0 -15px;
58
+ } @else {
59
+ @include transition(background-color .1s linear);
60
+ }
61
+ color: $gray-dark;
62
+ text-decoration: none;
63
+ }
64
+
65
+ &.is-active,
66
+ &:active {
67
+ // Disabled inset shadow as it's a performance hog when having multiple buttons on the same screen on the iPhone 4
68
+ //box-shadow: inset 0 1px 1px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
69
+ box-shadow: inset 0 1px 1px 0 rgba(0,0,0,.5);
70
+ background-image: none !important;
71
+ outline: 0;
72
+ }
73
+
74
+ &.btn--disabled,
75
+ &[disabled] {
76
+ @include opacity(.65);
77
+ box-shadow: none;
78
+ cursor: default;
79
+ background-color: darken($white, 10%);
80
+ background-image: none;
81
+ }
82
+
83
+
84
+ // =============================================================================
85
+ // 3. Sizes
86
+ // =============================================================================
87
+
88
+ &.btn--large { @include rem(font-size, $gamma); }
89
+ &.btn--medium { @include rem(font-size, $delta); }
90
+ &.btn--small { @include rem(font-size, $micro); }
91
+ &.btn--tiny { @include rem(font-size, $nano); }
92
+ &.btn--expand { width: 100%; }
93
+
94
+
95
+ // =============================================================================
96
+ // 4. Styles
97
+ // =============================================================================
98
+
99
+ @if $create-btn-styles == true {
100
+ &.btn--primary { @include btn-style($btn-primary-background); }
101
+ &.btn--info { @include btn-style($btn-info-background); }
102
+ &.btn--success { @include btn-style($btn-success-background); }
103
+ &.btn--warning { @include btn-style($btn-warning-background); }
104
+ &.btn--danger { @include btn-style($btn-danger-background); }
105
+ &.btn--inverse { @include btn-style($btn-inverse-background); }
106
+ }
107
+ }
108
+
109
+
110
+ // =============================================================================
111
+ // 5. Button groups
112
+ // =============================================================================
113
+
114
+ .btn-group {
115
+ .btn {
116
+ padding-left: $half-spacing-unit;
117
+ padding-right: $half-spacing-unit;
118
+ border-radius: 0;
119
+
120
+ @if ($btn-border-radius != none) {
121
+ &:first-child { border-radius: $btn-border-radius 0 0 $btn-border-radius; }
122
+ &:last-child { border-radius: 0 $btn-border-radius $btn-border-radius 0; }
123
+ }
124
+
125
+ }
126
+ }