whiskers 0.0.2
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.
- checksums.yaml +7 -0
- data/Gemfile +3 -0
- data/Gemfile.lock +34 -0
- data/LICENSE.md +12 -0
- data/README.md +116 -0
- data/bin/whiskers +4 -0
- data/core/whiskers/base/index.html +180 -0
- data/core/whiskers/base/scripts/src/app.coffee +8 -0
- data/core/whiskers/base/scripts/src/layouts/home.coffee +3 -0
- data/core/whiskers/base/scripts/src/modules/header.coffee +11 -0
- data/core/whiskers/base/stylesheets/app.sass +6 -0
- data/core/whiskers/base/stylesheets/layouts/home.sass +8 -0
- data/core/whiskers/base/stylesheets/layouts/layouts.sass +1 -0
- data/core/whiskers/base/stylesheets/modules/comment.scss +65 -0
- data/core/whiskers/base/stylesheets/modules/device.scss +87 -0
- data/core/whiskers/base/stylesheets/modules/footer.scss +104 -0
- data/core/whiskers/base/stylesheets/modules/grid-item.scss +97 -0
- data/core/whiskers/base/stylesheets/modules/header.scss +268 -0
- data/core/whiskers/base/stylesheets/modules/modules.sass +6 -0
- data/core/whiskers/base/stylesheets/modules/sample-box.sass +9 -0
- data/core/whiskers/base/stylesheets/plugins/plugins.sass +5 -0
- data/core/whiskers/base/stylesheets/plugins/sticky-footer.sass +11 -0
- data/core/whiskers/blog/index.html +97 -0
- data/core/whiskers/blog/scripts/src/app.coffee +8 -0
- data/core/whiskers/blog/scripts/src/layouts/home.coffee +3 -0
- data/core/whiskers/blog/scripts/src/modules/header.coffee +13 -0
- data/core/whiskers/blog/stylesheets/app.sass +6 -0
- data/core/whiskers/blog/stylesheets/layouts/home.sass +10 -0
- data/core/whiskers/blog/stylesheets/layouts/layouts.sass +1 -0
- data/core/whiskers/blog/stylesheets/modules/article.scss +90 -0
- data/core/whiskers/blog/stylesheets/modules/footer.scss +104 -0
- data/core/whiskers/blog/stylesheets/modules/header.scss +262 -0
- data/core/whiskers/blog/stylesheets/modules/hero.scss +62 -0
- data/core/whiskers/blog/stylesheets/modules/modules.sass +4 -0
- data/core/whiskers/blog/stylesheets/plugins/plugins.sass +5 -0
- data/core/whiskers/blog/stylesheets/plugins/sticky-footer.sass +11 -0
- data/core/whiskers/store/index.html +245 -0
- data/core/whiskers/store/scripts/src/app.coffee +8 -0
- data/core/whiskers/store/scripts/src/layouts/home.coffee +3 -0
- data/core/whiskers/store/scripts/src/modules/header.coffee +11 -0
- data/core/whiskers/store/stylesheets/app.sass +6 -0
- data/core/whiskers/store/stylesheets/layouts/home.sass +12 -0
- data/core/whiskers/store/stylesheets/layouts/layouts.sass +1 -0
- data/core/whiskers/store/stylesheets/modules/button-group.scss +92 -0
- data/core/whiskers/store/stylesheets/modules/card.scss +86 -0
- data/core/whiskers/store/stylesheets/modules/footer.scss +104 -0
- data/core/whiskers/store/stylesheets/modules/header.scss +339 -0
- data/core/whiskers/store/stylesheets/modules/hero.scss +55 -0
- data/core/whiskers/store/stylesheets/modules/modules.sass +6 -0
- data/core/whiskers/store/stylesheets/modules/pagination.scss +63 -0
- data/core/whiskers/store/stylesheets/plugins/plugins.sass +5 -0
- data/core/whiskers/store/stylesheets/plugins/sticky-footer.sass +11 -0
- data/lib/whiskers.rb +1 -0
- data/lib/whiskers/generator.rb +235 -0
- data/lib/whiskers/version.rb +3 -0
- data/ruby.version +1 -0
- data/whiskers.gemspec +26 -0
- data/whiskers.png +0 -0
- metadata +173 -0
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
.hero {
|
|
2
|
+
$base-border-radius: 3px !default;
|
|
3
|
+
$action-color: #477DCA !default;
|
|
4
|
+
$large-screen: em(860) !default;
|
|
5
|
+
$hero-background-top: #7F99BE;
|
|
6
|
+
$hero-background-bottom: #20392B;
|
|
7
|
+
$hero-color: white;
|
|
8
|
+
$gradient-angle: 10deg;
|
|
9
|
+
$hero-image: 'https://raw.githubusercontent.com/thoughtbot/refills/b7c61c133f568cd044b708d099d8144cc3ce2b66/source/images/mountains.png';
|
|
10
|
+
|
|
11
|
+
@include background(url($hero-image), linear-gradient($gradient-angle, $hero-background-bottom, $hero-background-top), no-repeat $hero-background-top scroll);
|
|
12
|
+
background-color: #324766;
|
|
13
|
+
background-position: top;
|
|
14
|
+
background-repeat: no-repeat;
|
|
15
|
+
background-size: cover;
|
|
16
|
+
padding-bottom: 0;
|
|
17
|
+
|
|
18
|
+
.hero-logo img {
|
|
19
|
+
height: 4em;
|
|
20
|
+
margin-bottom: 1em;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.hero-inner {
|
|
24
|
+
@include outer-container;
|
|
25
|
+
@include clearfix;
|
|
26
|
+
margin: auto;
|
|
27
|
+
padding: 3.5em 3.5em 1em 3.5em;
|
|
28
|
+
text-align: center;
|
|
29
|
+
|
|
30
|
+
.hero-copy {
|
|
31
|
+
text-align: center;
|
|
32
|
+
|
|
33
|
+
h1 {
|
|
34
|
+
color: $hero-color;
|
|
35
|
+
font-size: 2.4em;
|
|
36
|
+
margin: 1.2em 0 0 0;
|
|
37
|
+
|
|
38
|
+
@include media($large-screen) {
|
|
39
|
+
font-size: 3.4em;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
p {
|
|
44
|
+
color: $hero-color;
|
|
45
|
+
line-height: 1.4em;
|
|
46
|
+
margin: 0 auto 3em auto;
|
|
47
|
+
|
|
48
|
+
@include media($large-screen) {
|
|
49
|
+
font-size: 1.1em;
|
|
50
|
+
max-width: 40%;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
hr {
|
|
55
|
+
display: inline-block;
|
|
56
|
+
width: 8em;
|
|
57
|
+
border-bottom: 5px #FFF solid;
|
|
58
|
+
margin-bottom: 0.4em;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
}
|
|
@@ -0,0 +1,245 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<title>Web Template</title>
|
|
5
|
+
<link type="text/css" href="stylesheets/app.css" rel="stylesheet">
|
|
6
|
+
<script type="text/javascript" src="scripts/lib/plugins/jquery.min.js"></script>
|
|
7
|
+
<script type="text/javascript" src="scripts/lib/plugins/require.min.js"></script>
|
|
8
|
+
<script type="text/javascript" src="scripts/lib/app.js"></script>
|
|
9
|
+
<script type="text/javascript" src="scripts/lib/layouts/home.js"></script>
|
|
10
|
+
</head>
|
|
11
|
+
<body>
|
|
12
|
+
<header class="navigation" role="banner">
|
|
13
|
+
<div class="navigation-wrapper">
|
|
14
|
+
<a href="javascript:void(0)" class="logo">
|
|
15
|
+
<img src="https://raw.githubusercontent.com/thoughtbot/refills/b7c61c133f568cd044b708d099d8144cc3ce2b66/source/images/placeholder_logo_1.png" alt="Logo Image">
|
|
16
|
+
</a>
|
|
17
|
+
<a href="javascript:void(0)" class="navigation-menu-button" id="js-mobile-menu">MENU</a>
|
|
18
|
+
<nav role="navigation">
|
|
19
|
+
<ul id="js-navigation-menu" class="navigation-menu show">
|
|
20
|
+
<li class="nav-link"><a href="javascript:void(0)">Products</a></li>
|
|
21
|
+
<li class="nav-link"><a href="javascript:void(0)">About Us</a></li>
|
|
22
|
+
<li class="nav-link"><a href="javascript:void(0)">Contact</a></li>
|
|
23
|
+
<li class="nav-link more"><a href="javascript:void(0)">More</a>
|
|
24
|
+
<ul class="submenu">
|
|
25
|
+
<li><a href="javascript:void(0)">Submenu Item</a></li>
|
|
26
|
+
<li><a href="javascript:void(0)">Another Item</a></li>
|
|
27
|
+
<li class="more"><a href="javascript:void(0)">Item with submenu</a>
|
|
28
|
+
<ul class="submenu">
|
|
29
|
+
<li><a href="javascript:void(0)">Sub-submenu Item</a></li>
|
|
30
|
+
<li><a href="javascript:void(0)">Another Item</a></li>
|
|
31
|
+
</ul>
|
|
32
|
+
</li>
|
|
33
|
+
<li class="more"><a href="javascript:void(0)">Another submenu</a>
|
|
34
|
+
<ul class="submenu">
|
|
35
|
+
<li><a href="javascript:void(0)">Sub-submenu</a></li>
|
|
36
|
+
<li><a href="javascript:void(0)">An Item</a></li>
|
|
37
|
+
</ul>
|
|
38
|
+
</li>
|
|
39
|
+
</ul>
|
|
40
|
+
</li>
|
|
41
|
+
</ul>
|
|
42
|
+
</nav>
|
|
43
|
+
<div class="navigation-tools">
|
|
44
|
+
<div class="search-bar">
|
|
45
|
+
<form role="search">
|
|
46
|
+
<input type="search" placeholder="Enter Search" />
|
|
47
|
+
<button type="submit">
|
|
48
|
+
<img src="https://raw.githubusercontent.com/thoughtbot/refills/b7c61c133f568cd044b708d099d8144cc3ce2b66/source/images/search-icon.png" alt="Search Icon">
|
|
49
|
+
</button>
|
|
50
|
+
</form>
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
53
|
+
</div>
|
|
54
|
+
</header>
|
|
55
|
+
|
|
56
|
+
<main>
|
|
57
|
+
<!-- This is a hero section, you could use it to talk about your coompany or
|
|
58
|
+
any promotions you have going on -->
|
|
59
|
+
<div class="hero">
|
|
60
|
+
<div class="hero-inner">
|
|
61
|
+
<a href="" class="hero-logo"><img src="https://raw.githubusercontent.com/thoughtbot/refills/b7c61c133f568cd044b708d099d8144cc3ce2b66/source/images/placeholder_logo_1.png
|
|
62
|
+
" alt="Logo Image"></a>
|
|
63
|
+
<div class="hero-copy">
|
|
64
|
+
<h1>Short description of Product</h1>
|
|
65
|
+
<p>A few reasons why this product is worth using, who it's for and why they need it.</p>
|
|
66
|
+
</div>
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
69
|
+
|
|
70
|
+
<!-- Here is a button group for sorting --><br>
|
|
71
|
+
<div class="button-wrapper">
|
|
72
|
+
<div class="button-group">
|
|
73
|
+
<label>
|
|
74
|
+
<input type="radio" name="button-group" value="item" checked>
|
|
75
|
+
<span class="button-group-item">Item</span>
|
|
76
|
+
</label>
|
|
77
|
+
<label>
|
|
78
|
+
<input type="radio" name="button-group" value="other-item">
|
|
79
|
+
<span class="button-group-item">Other But Longer Item</span>
|
|
80
|
+
</label>
|
|
81
|
+
<label>
|
|
82
|
+
<input type="radio" name="button-group" value="other-item">
|
|
83
|
+
<span class="button-group-item">Third</span>
|
|
84
|
+
</label>
|
|
85
|
+
<label>
|
|
86
|
+
<input type="radio" name="button-group" value="third">
|
|
87
|
+
<span class="button-group-item">Last Item</span>
|
|
88
|
+
</label>
|
|
89
|
+
</div>
|
|
90
|
+
</div>
|
|
91
|
+
|
|
92
|
+
<!-- Here are some cards, you could put products and prices in here --><br>
|
|
93
|
+
<div class="cards">
|
|
94
|
+
<div class="card">
|
|
95
|
+
<div class="card-image">
|
|
96
|
+
<img src="https://raw.githubusercontent.com/thoughtbot/refills/b7c61c133f568cd044b708d099d8144cc3ce2b66/source/images/mountains.png" alt="">
|
|
97
|
+
</div>
|
|
98
|
+
<div class="card-header">
|
|
99
|
+
First Card
|
|
100
|
+
</div>
|
|
101
|
+
<div class="card-copy">
|
|
102
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, officiis sunt neque facilis culpa molestiae necessitatibus delectus veniam provident.</p>
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
|
|
106
|
+
<div class="card">
|
|
107
|
+
<div class="card-image">
|
|
108
|
+
<img src="https://raw.githubusercontent.com/thoughtbot/refills/b7c61c133f568cd044b708d099d8144cc3ce2b66/source/images/mountains-4.png" alt="">
|
|
109
|
+
</div>
|
|
110
|
+
<div class="card-header">
|
|
111
|
+
Another Card
|
|
112
|
+
</div>
|
|
113
|
+
<div class="card-copy">
|
|
114
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, officiis sunt neque facilis culpa molestiae necessitatibus delectus veniam provident.</p>
|
|
115
|
+
</div>
|
|
116
|
+
</div>
|
|
117
|
+
|
|
118
|
+
<div class="card">
|
|
119
|
+
<div class="card-image">
|
|
120
|
+
<img src="https://raw.githubusercontent.com/thoughtbot/refills/b7c61c133f568cd044b708d099d8144cc3ce2b66/source/images/mountains-3.png" alt="">
|
|
121
|
+
</div>
|
|
122
|
+
<div class="card-header">
|
|
123
|
+
The Last Card
|
|
124
|
+
</div>
|
|
125
|
+
<div class="card-copy">
|
|
126
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
|
|
127
|
+
</div>
|
|
128
|
+
</div>
|
|
129
|
+
|
|
130
|
+
<div class="card">
|
|
131
|
+
<div class="card-image">
|
|
132
|
+
<img src="https://raw.githubusercontent.com/thoughtbot/refills/b7c61c133f568cd044b708d099d8144cc3ce2b66/source/images/mountains.png" alt="">
|
|
133
|
+
</div>
|
|
134
|
+
<div class="card-header">
|
|
135
|
+
First Card
|
|
136
|
+
</div>
|
|
137
|
+
<div class="card-copy">
|
|
138
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, officiis sunt neque facilis culpa molestiae necessitatibus delectus veniam provident.</p>
|
|
139
|
+
</div>
|
|
140
|
+
</div>
|
|
141
|
+
|
|
142
|
+
<div class="card">
|
|
143
|
+
<div class="card-image">
|
|
144
|
+
<img src="https://raw.githubusercontent.com/thoughtbot/refills/b7c61c133f568cd044b708d099d8144cc3ce2b66/source/images/mountains-4.png" alt="">
|
|
145
|
+
</div>
|
|
146
|
+
<div class="card-header">
|
|
147
|
+
Another Card
|
|
148
|
+
</div>
|
|
149
|
+
<div class="card-copy">
|
|
150
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, officiis sunt neque facilis culpa molestiae necessitatibus delectus veniam provident.</p>
|
|
151
|
+
</div>
|
|
152
|
+
</div>
|
|
153
|
+
|
|
154
|
+
<div class="card">
|
|
155
|
+
<div class="card-image">
|
|
156
|
+
<img src="https://raw.githubusercontent.com/thoughtbot/refills/b7c61c133f568cd044b708d099d8144cc3ce2b66/source/images/mountains-3.png" alt="">
|
|
157
|
+
</div>
|
|
158
|
+
<div class="card-header">
|
|
159
|
+
The Last Card
|
|
160
|
+
</div>
|
|
161
|
+
<div class="card-copy">
|
|
162
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
|
|
163
|
+
</div>
|
|
164
|
+
</div>
|
|
165
|
+
|
|
166
|
+
<div class="card">
|
|
167
|
+
<div class="card-image">
|
|
168
|
+
<img src="https://raw.githubusercontent.com/thoughtbot/refills/b7c61c133f568cd044b708d099d8144cc3ce2b66/source/images/mountains-3.png" alt="">
|
|
169
|
+
</div>
|
|
170
|
+
<div class="card-header">
|
|
171
|
+
The Last Card
|
|
172
|
+
</div>
|
|
173
|
+
<div class="card-copy">
|
|
174
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
|
|
175
|
+
</div>
|
|
176
|
+
</div>
|
|
177
|
+
|
|
178
|
+
<div class="card">
|
|
179
|
+
<div class="card-image">
|
|
180
|
+
<img src="https://raw.githubusercontent.com/thoughtbot/refills/b7c61c133f568cd044b708d099d8144cc3ce2b66/source/images/mountains-3.png" alt="">
|
|
181
|
+
</div>
|
|
182
|
+
<div class="card-header">
|
|
183
|
+
The Last Card
|
|
184
|
+
</div>
|
|
185
|
+
<div class="card-copy">
|
|
186
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
|
|
187
|
+
</div>
|
|
188
|
+
</div>
|
|
189
|
+
</div>
|
|
190
|
+
|
|
191
|
+
<!-- Here is some buttons for pagination --><br>
|
|
192
|
+
<div class="pagination">
|
|
193
|
+
<ul>
|
|
194
|
+
<li class="page-prev"><a href="javascript:void(0)">Prev</a></li>
|
|
195
|
+
<li>
|
|
196
|
+
<ul>
|
|
197
|
+
<li><a href="javascript:void(0)">1</a></li>
|
|
198
|
+
<li><a href="javascript:void(0)">2</a></li>
|
|
199
|
+
<li><a href="javascript:void(0)">3</a></li>
|
|
200
|
+
<li><a href="javascript:void(0)">4</a></li>
|
|
201
|
+
<li><a href="javascript:void(0)">5</a></li>
|
|
202
|
+
<li><a href="javascript:void(0)">6</a></li>
|
|
203
|
+
<li><a href="javascript:void(0)">7</a></li>
|
|
204
|
+
</ul>
|
|
205
|
+
</li>
|
|
206
|
+
<li class="page-next"><a href="javascript:void(0)">Next</a></li>
|
|
207
|
+
</ul>
|
|
208
|
+
</div>
|
|
209
|
+
<br>
|
|
210
|
+
|
|
211
|
+
</main>
|
|
212
|
+
|
|
213
|
+
<footer role="contentinfo">
|
|
214
|
+
<!-- Last, here is the footer. You can chop out the footer tag's content if you
|
|
215
|
+
just want a sticky footer without anything else. -->
|
|
216
|
+
<div class="footer-logo">
|
|
217
|
+
<img src="https://raw.githubusercontent.com/thoughtbot/refills/b7c61c133f568cd044b708d099d8144cc3ce2b66/source/images/placeholder_logo_1.png" alt="Logo image">
|
|
218
|
+
</div>
|
|
219
|
+
<ul>
|
|
220
|
+
<li><a href="javascript:void(0)">About</a></li>
|
|
221
|
+
<li><a href="javascript:void(0)">Contact</a></li>
|
|
222
|
+
<li><a href="javascript:void(0)">Products</a></li>
|
|
223
|
+
</ul>
|
|
224
|
+
|
|
225
|
+
<div class="footer-secondary-links">
|
|
226
|
+
<ul>
|
|
227
|
+
<li><a href="javascript:void(0)">Terms and Conditions</a></li>
|
|
228
|
+
<li><a href="javascript:void(0)">Privacy Policy</a></li>
|
|
229
|
+
</ul>
|
|
230
|
+
|
|
231
|
+
<ul class="footer-social">
|
|
232
|
+
<li><a href="javascript:void(0)">
|
|
233
|
+
<img src="https://raw.githubusercontent.com/thoughtbot/refills/b7c61c133f568cd044b708d099d8144cc3ce2b66/source/images/facebook-logo-circle.png" alt="Facebook">
|
|
234
|
+
</a></li>
|
|
235
|
+
<li><a href="javascript:void(0)">
|
|
236
|
+
<img src="https://raw.githubusercontent.com/thoughtbot/refills/b7c61c133f568cd044b708d099d8144cc3ce2b66/source/images/twitter-logo-circle.png" alt="Twitter">
|
|
237
|
+
</a></li>
|
|
238
|
+
<li><a href="javascript:void(0)">
|
|
239
|
+
<img src="https://raw.githubusercontent.com/thoughtbot/refills/b7c61c133f568cd044b708d099d8144cc3ce2b66/source/images/youtube-logo-circle.png" alt="YouTube">
|
|
240
|
+
</a></li>
|
|
241
|
+
</ul>
|
|
242
|
+
</div>
|
|
243
|
+
</footer>
|
|
244
|
+
</body>
|
|
245
|
+
</html>
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
$(document).ready ->
|
|
2
|
+
menuToggle = $('#js-mobile-menu').unbind()
|
|
3
|
+
$('#js-navigation-menu').removeClass 'show'
|
|
4
|
+
menuToggle.on 'click', (e) ->
|
|
5
|
+
e.preventDefault()
|
|
6
|
+
$('#js-navigation-menu').slideToggle ->
|
|
7
|
+
if $('#js-navigation-menu').is(':hidden')
|
|
8
|
+
$('#js-navigation-menu').removeAttr 'style'
|
|
9
|
+
return
|
|
10
|
+
return
|
|
11
|
+
return
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import 'home'
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
.button-group {
|
|
2
|
+
$base-border-color: gainsboro !default;
|
|
3
|
+
$base-border-radius: 3px !default;
|
|
4
|
+
$base-line-height: 1.5em !default;
|
|
5
|
+
$base-spacing: 1.5em !default;
|
|
6
|
+
$base-font-size: 1em !default;
|
|
7
|
+
$base-background-color: white !default;
|
|
8
|
+
$action-color: #477DCA !default;
|
|
9
|
+
$dark-gray: #333 !default;
|
|
10
|
+
$large-screen: em(860) !default;
|
|
11
|
+
$base-font-color: $dark-gray !default;
|
|
12
|
+
$button-group-background: $base-background-color;
|
|
13
|
+
$button-group-color: lighten($base-font-color, 30%);
|
|
14
|
+
$button-group-border: 1px solid silver;
|
|
15
|
+
$button-group-inner-border: 1px solid lighten(silver, 18%);
|
|
16
|
+
$button-group-background-checked: $action-color;
|
|
17
|
+
$button-group-color-checked: white;
|
|
18
|
+
$button-group-border-checked: darken($button-group-background-checked, 15%);
|
|
19
|
+
|
|
20
|
+
input {
|
|
21
|
+
display: none;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
label {
|
|
25
|
+
margin-bottom: 0;
|
|
26
|
+
|
|
27
|
+
@include media($large-screen) {
|
|
28
|
+
float: left;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.button-group-item {
|
|
32
|
+
background: $button-group-background;
|
|
33
|
+
border-left: $button-group-border;
|
|
34
|
+
border-radius: 0;
|
|
35
|
+
border-right: $button-group-border;
|
|
36
|
+
color: $button-group-color;
|
|
37
|
+
cursor: pointer;
|
|
38
|
+
display: inline-block;
|
|
39
|
+
font-size: $base-font-size;
|
|
40
|
+
font-weight: normal;
|
|
41
|
+
line-height: 1;
|
|
42
|
+
padding: 0.75em 1em;
|
|
43
|
+
width: 100%;
|
|
44
|
+
|
|
45
|
+
@include media($large-screen) {
|
|
46
|
+
border-bottom: $button-group-border;
|
|
47
|
+
border-left: 0;
|
|
48
|
+
border-right: $button-group-inner-border;
|
|
49
|
+
border-top: $button-group-border;
|
|
50
|
+
width: auto;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
&:focus,
|
|
54
|
+
&:hover {
|
|
55
|
+
background-color: darken($button-group-background, 3%);
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
&:first-child .button-group-item {
|
|
60
|
+
border-top-left-radius: $base-border-radius;
|
|
61
|
+
border-top-right-radius: $base-border-radius;
|
|
62
|
+
border-top: $button-group-border;
|
|
63
|
+
|
|
64
|
+
@include media($large-screen) {
|
|
65
|
+
border-bottom-left-radius: $base-border-radius;
|
|
66
|
+
border-left: $button-group-border;
|
|
67
|
+
border-top-left-radius: $base-border-radius;
|
|
68
|
+
border-top-right-radius: 0;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
&:last-child .button-group-item {
|
|
73
|
+
border-bottom-left-radius: $base-border-radius;
|
|
74
|
+
border-bottom-right-radius: $base-border-radius;
|
|
75
|
+
border-bottom: $button-group-border;
|
|
76
|
+
|
|
77
|
+
@include media($large-screen) {
|
|
78
|
+
border-bottom-left-radius: 0;
|
|
79
|
+
border-bottom-right-radius: $base-border-radius;
|
|
80
|
+
border-right: $button-group-border;
|
|
81
|
+
border-top-right-radius: $base-border-radius;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
input:checked + .button-group-item {
|
|
86
|
+
background: $button-group-background-checked;
|
|
87
|
+
border: 1px solid $button-group-border-checked;
|
|
88
|
+
box-shadow: inset 0 1px 2px darken($button-group-background-checked, 10%);
|
|
89
|
+
color: $button-group-color-checked;
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
}
|