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.
- data/.gitignore +20 -0
- data/Gemfile +4 -0
- data/LICENCE +19 -0
- data/README.md +5 -0
- data/Rakefile +1 -0
- data/lib/prelude/version.rb +3 -0
- data/lib/prelude-framework.rb +8 -0
- data/prelude.gemspec +23 -0
- data/scss/prelude/_abstractions.scss +21 -0
- data/scss/prelude/_all.scss +6 -0
- data/scss/prelude/_base.scss +6 -0
- data/scss/prelude/_core.scss +13 -0
- data/scss/prelude/_debug-mode.scss +125 -0
- data/scss/prelude/_defaults.scss +159 -0
- data/scss/prelude/_functions.scss +8 -0
- data/scss/prelude/_images.scss +9 -0
- data/scss/prelude/_mixins.scss +9 -0
- data/scss/prelude/_modules.scss +7 -0
- data/scss/prelude/_typography.scss +15 -0
- data/scss/prelude/abstractions/_flag.scss +67 -0
- data/scss/prelude/abstractions/_flexbox.scss +29 -0
- data/scss/prelude/abstractions/_island.scss +53 -0
- data/scss/prelude/abstractions/_media.scss +61 -0
- data/scss/prelude/abstractions/_nav.scss +110 -0
- data/scss/prelude/abstractions/_split.scss +26 -0
- data/scss/prelude/base/_border-box.scss +7 -0
- data/scss/prelude/base/_helpers.scss +167 -0
- data/scss/prelude/functions/_contrasty.scss +24 -0
- data/scss/prelude/functions/_is-saturated.scss +14 -0
- data/scss/prelude/functions/_pixels-to-ems.scss +7 -0
- data/scss/prelude/images/_base.scss +36 -0
- data/scss/prelude/images/_cover-image.scss +16 -0
- data/scss/prelude/images/_thumbnails.scss +47 -0
- data/scss/prelude/mixins/_button-style.scss +40 -0
- data/scss/prelude/mixins/_each-grid-breakpoint.scss +21 -0
- data/scss/prelude/mixins/_gradients.scss +12 -0
- data/scss/prelude/mixins/_rem.scss +31 -0
- data/scss/prelude/mixins/_set-font-size.scss +26 -0
- data/scss/prelude/modules/_buttons.scss +126 -0
- data/scss/prelude/modules/_forms.scss +634 -0
- data/scss/prelude/modules/_tables.scss +160 -0
- data/scss/prelude/typography/_base.scss +16 -0
- data/scss/prelude/typography/_brand.scss +19 -0
- data/scss/prelude/typography/_links.scss +14 -0
- data/scss/prelude/typography/_paragraphs.scss +9 -0
- data/scss/prelude/typography/_quotes.scss +31 -0
- data/scss/prelude/typography/_sizes.scss +63 -0
- data/scss/prelude.scss +53 -0
- data/test/config.rb +9 -0
- data/test/index.html +381 -0
- data/test/scss/_prelude-settings.scss +159 -0
- data/test/scss/style.scss +55 -0
- 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
|
+
}
|