spuit 0.0.14.2 → 0.1.0
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 +4 -4
- data/.npmignore +10 -6
- data/Gemfile.lock +1 -1
- data/README.md +20 -1
- data/assets/html/index.ejs +328 -0
- data/assets/javascripts/scripts.js +3 -3
- data/assets/stylesheets/styles.scss +8 -3
- data/dist/favicon.ico +0 -0
- data/dist/index.html +1 -323
- data/dist/javascripts/scripts.js +1 -1
- data/dist/stylesheets/styles.css +2 -2
- data/lib/spuit/version.rb +1 -1
- data/package.json +19 -18
- data/scss/{components → _}/_body.sass +0 -0
- data/scss/{components → _}/_form.sass +0 -0
- data/scss/{components → _}/_gist.sass +0 -0
- data/scss/{components → _}/_grids.sass +0 -0
- data/scss/{components → _}/_markdown.sass +0 -0
- data/scss/components/_button.scss +140 -0
- data/scss/components/_messages.scss +23 -0
- data/scss/components/{_shoulder.sass → _shoulder.scss} +6 -5
- data/scss/components/_split.scss +45 -0
- data/scss/components/_triangle.scss +50 -0
- data/scss/components/_wordwrap-fadeout.scss +22 -0
- data/scss/components/_wrap.scss +27 -0
- data/scss/elements/_dl.scss +40 -0
- data/scss/elements/_fieldset.scss +63 -0
- data/scss/elements/_hr.scss +39 -0
- data/scss/elements/_input.scss +35 -0
- data/scss/elements/_table.scss +102 -0
- data/scss/{components → includes}/_icon.scss +0 -0
- data/scss/spuit.scss +1 -4
- data/scss/variables/_timing-functions.scss +37 -0
- data/spuit.scss +1 -46
- data/webpack/css.webpack.config.js +37 -5
- data/webpack/js.webpack.config.js +13 -8
- data/yarn.lock +3390 -4480
- metadata +23 -22
- data/.editorconfig +0 -11
- data/scss/components/_button.sass +0 -116
- data/scss/components/_messages.sass +0 -18
- data/scss/components/_split.sass +0 -32
- data/scss/components/_triangle.sass +0 -40
- data/scss/components/_wordwrap-fadeout.sass +0 -19
- data/scss/components/_wrap.sass +0 -22
- data/scss/elements/_dl.sass +0 -30
- data/scss/elements/_fieldset.sass +0 -46
- data/scss/elements/_hr.sass +0 -36
- data/scss/elements/_input.sass +0 -27
- data/scss/elements/_table.sass +0 -58
- data/scss/variables/_timing-functions.sass +0 -37
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: d80b998757779fda873941f2410da3de6308dfb6a13dcde8e6e435dfd622ee09
|
|
4
|
+
data.tar.gz: 57f7468acf97e636863c4d593bd3b7c9547be98b6a012458d3949351c7f09c9b
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 43eed2a2826712cf0604b53eb41688f54424da3c3cc6920f35a7725b1363b025699bc6011c8dcec1b202e3b244b97ef9373280e3c6d70699a08e3c40b18b3531
|
|
7
|
+
data.tar.gz: c2584433838ca64b11f27f82d3c7937dfef3490058441e2f2a7f83b2df8c04915fb8e893b65a484f30a16f37ff6796dcc66af945b44906b2d9a17bde710ac750
|
data/.npmignore
CHANGED
data/Gemfile.lock
CHANGED
data/README.md
CHANGED
|
@@ -17,9 +17,20 @@ import:
|
|
|
17
17
|
``` styles.scss
|
|
18
18
|
@import "node_modules/spuit/spuit";
|
|
19
19
|
```
|
|
20
|
+
ore
|
|
21
|
+
|
|
22
|
+
``` styles.scss
|
|
23
|
+
@import "~spuit";
|
|
24
|
+
```
|
|
20
25
|
|
|
21
26
|
## rails
|
|
22
27
|
|
|
28
|
+
import:
|
|
29
|
+
|
|
30
|
+
``` styles.scss
|
|
31
|
+
@import "spuit";
|
|
32
|
+
```
|
|
33
|
+
|
|
23
34
|
---
|
|
24
35
|
|
|
25
36
|
For Development
|
|
@@ -33,6 +44,14 @@ $ yarn run dev
|
|
|
33
44
|
|
|
34
45
|
## deploy
|
|
35
46
|
|
|
47
|
+
npm:
|
|
48
|
+
|
|
49
|
+
```
|
|
50
|
+
$ npm publish
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
gem:
|
|
54
|
+
|
|
36
55
|
```
|
|
37
|
-
$
|
|
56
|
+
$ rake release
|
|
38
57
|
```
|
|
@@ -0,0 +1,328 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="ja">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
7
|
+
<title></title>
|
|
8
|
+
|
|
9
|
+
<link href="/stylesheets/styles.css" rel="stylesheet">
|
|
10
|
+
</head>
|
|
11
|
+
<body>
|
|
12
|
+
|
|
13
|
+
<div class="container">
|
|
14
|
+
<div class="row">
|
|
15
|
+
<div class="col-12">
|
|
16
|
+
<p>Spuit</p>
|
|
17
|
+
</div>
|
|
18
|
+
</div>
|
|
19
|
+
</div>
|
|
20
|
+
|
|
21
|
+
<div class="container">
|
|
22
|
+
<div class="row">
|
|
23
|
+
<div class="col-md-4">
|
|
24
|
+
<section class="demo-styles">
|
|
25
|
+
<h2>Text Styles</h2>
|
|
26
|
+
<h1>heading 1</h1>
|
|
27
|
+
<h2>heading 2</h2>
|
|
28
|
+
<h3>heading 3</h3>
|
|
29
|
+
<h4>heading 4</h4>
|
|
30
|
+
<h5>heading 5</h5>
|
|
31
|
+
<h6>heading 6</h6>
|
|
32
|
+
<p>paragraf <a href="#">link</a> <b>bold</b></p>
|
|
33
|
+
</section>
|
|
34
|
+
</div>
|
|
35
|
+
<div class="col-md-4">
|
|
36
|
+
<section class="demo-styles">
|
|
37
|
+
<h2>Utilities</h2>
|
|
38
|
+
<h3>word break</h3>
|
|
39
|
+
<p class="word-break">.word-break</p>
|
|
40
|
+
<br>
|
|
41
|
+
<p class="word-break-none">.word-break-none</p>
|
|
42
|
+
<h3>text-overflow</h3>
|
|
43
|
+
<p class="text-overflow">.text-overflow</p>
|
|
44
|
+
|
|
45
|
+
<h3>wordwrap-fadeout</h3>
|
|
46
|
+
<div class="wordwrap-fadeout">
|
|
47
|
+
<p>.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout</p>
|
|
48
|
+
</div>
|
|
49
|
+
</section>
|
|
50
|
+
</div>
|
|
51
|
+
<div class="col-md-4">
|
|
52
|
+
<section class="demo-styles">
|
|
53
|
+
<h2>button styles</h2>
|
|
54
|
+
<a href="#" class="button">Button</a>
|
|
55
|
+
<input type="submit" class="button" value="Button" />
|
|
56
|
+
<button type="button" class="button">Button</button>
|
|
57
|
+
<a href="#" class="button is-loading">Button</a>
|
|
58
|
+
<a href="#" class="button-semiflat">Button</a>
|
|
59
|
+
<a href="#" class="button-border">Button</a>
|
|
60
|
+
<a href="#" class="button-emboss">Button</a>
|
|
61
|
+
</section>
|
|
62
|
+
|
|
63
|
+
<section class="demo-styles">
|
|
64
|
+
<h2>icon styles</h2>
|
|
65
|
+
<i class="icon-hamburger"></i>
|
|
66
|
+
<i class="icon-twitter"></i>
|
|
67
|
+
<i class="icon-facebook"></i>
|
|
68
|
+
<i class="icon-hatena"></i>
|
|
69
|
+
</section>
|
|
70
|
+
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
|
|
74
|
+
<div class="row">
|
|
75
|
+
<div class="col-md-4">
|
|
76
|
+
<section class="demo-styles">
|
|
77
|
+
<h2>Form styles</h2>
|
|
78
|
+
|
|
79
|
+
<form>
|
|
80
|
+
<div class="fieldset">
|
|
81
|
+
<legend>お名前</legend>
|
|
82
|
+
<div>
|
|
83
|
+
<input id="field-text" placeholder="お名前" type="text">
|
|
84
|
+
</div>
|
|
85
|
+
</div>
|
|
86
|
+
<div class="fieldset">
|
|
87
|
+
<legend>お問い合わせ内容</legend>
|
|
88
|
+
<textarea cols="50" id="field-textarea" placeholder="お問い合わせ内容を入力下さい" rows="10"></textarea>
|
|
89
|
+
</div>
|
|
90
|
+
<div class="fieldset">
|
|
91
|
+
<legend>ラジオボタン（並列）</legend>
|
|
92
|
+
<ul class="reset-ul">
|
|
93
|
+
<li class="radio">
|
|
94
|
+
<input id="field-radio-0" name="field-radio" type="radio" value="0">
|
|
95
|
+
<label for="field-radio-0">
|
|
96
|
+
ラジオボタン 0
|
|
97
|
+
</label>
|
|
98
|
+
</li>
|
|
99
|
+
<li class="radio">
|
|
100
|
+
<input id="field-radio-1" name="field-radio" type="radio" value="1">
|
|
101
|
+
<label for="field-radio-1">
|
|
102
|
+
ラジオボタン 1
|
|
103
|
+
</label>
|
|
104
|
+
</li>
|
|
105
|
+
<li class="radio">
|
|
106
|
+
<input id="field-radio-2" name="field-radio" type="radio" value="2">
|
|
107
|
+
<label for="field-radio-2">
|
|
108
|
+
ラジオボタン 2
|
|
109
|
+
</label>
|
|
110
|
+
</li>
|
|
111
|
+
</ul>
|
|
112
|
+
</div>
|
|
113
|
+
<div class="fieldset">
|
|
114
|
+
<legend>ラジオボタン（入れ子）</legend>
|
|
115
|
+
<ul class="reset-ul">
|
|
116
|
+
<li class="radio-inside">
|
|
117
|
+
<label for="field-radio-inside-0">
|
|
118
|
+
<input id="field-radio-inside-0" name="field-radio-inside" type="radio" value="0">
|
|
119
|
+
<span>
|
|
120
|
+
ラジオボタン 0
|
|
121
|
+
</span>
|
|
122
|
+
</label>
|
|
123
|
+
</li>
|
|
124
|
+
<li class="radio-inside">
|
|
125
|
+
<label for="field-radio-inside-1">
|
|
126
|
+
<input id="field-radio-inside-1" name="field-radio-inside" type="radio" value="1">
|
|
127
|
+
<span>
|
|
128
|
+
ラジオボタン 1
|
|
129
|
+
</span>
|
|
130
|
+
</label>
|
|
131
|
+
</li>
|
|
132
|
+
<li class="radio-inside">
|
|
133
|
+
<label for="field-radio-inside-2">
|
|
134
|
+
<input id="field-radio-inside-2" name="field-radio-inside" type="radio" value="2">
|
|
135
|
+
<span>
|
|
136
|
+
ラジオボタン 2
|
|
137
|
+
</span>
|
|
138
|
+
</label>
|
|
139
|
+
</li>
|
|
140
|
+
</ul>
|
|
141
|
+
</div>
|
|
142
|
+
<div class="fieldset">
|
|
143
|
+
<legend>チェックボックス（並列）</legend>
|
|
144
|
+
<ul class="reset-ul">
|
|
145
|
+
<li class="checkbox">
|
|
146
|
+
<input id="field-checkbox-0" type="checkbox" value="0">
|
|
147
|
+
<label for="field-checkbox-0">
|
|
148
|
+
チェックボックス 0
|
|
149
|
+
</label>
|
|
150
|
+
</li>
|
|
151
|
+
<li class="checkbox">
|
|
152
|
+
<input id="field-checkbox-1" type="checkbox" value="1">
|
|
153
|
+
<label for="field-checkbox-1">
|
|
154
|
+
チェックボックス 1
|
|
155
|
+
</label>
|
|
156
|
+
</li>
|
|
157
|
+
<li class="checkbox">
|
|
158
|
+
<input id="field-checkbox-2" type="checkbox" value="2">
|
|
159
|
+
<label for="field-checkbox-2">
|
|
160
|
+
チェックボックス 2
|
|
161
|
+
</label>
|
|
162
|
+
</li>
|
|
163
|
+
</ul>
|
|
164
|
+
</div>
|
|
165
|
+
<div class="fieldset">
|
|
166
|
+
<legend>チェックボックス（入れ子）</legend>
|
|
167
|
+
<ul class="reset-ul">
|
|
168
|
+
<li class="checkbox-inside">
|
|
169
|
+
<label for="field-checkbox-inside-0">
|
|
170
|
+
<input id="field-checkbox-inside-0" type="checkbox" value="0">
|
|
171
|
+
<span>
|
|
172
|
+
チェックボックス 0
|
|
173
|
+
</span>
|
|
174
|
+
</label>
|
|
175
|
+
</li>
|
|
176
|
+
<li class="checkbox-inside">
|
|
177
|
+
<label for="field-checkbox-inside-1">
|
|
178
|
+
<input id="field-checkbox-inside-1" type="checkbox" value="1">
|
|
179
|
+
<span>
|
|
180
|
+
チェックボックス 1
|
|
181
|
+
</span>
|
|
182
|
+
</label>
|
|
183
|
+
</li>
|
|
184
|
+
<li class="checkbox-inside">
|
|
185
|
+
<label for="field-checkbox-inside-2">
|
|
186
|
+
<input id="field-checkbox-inside-2" type="checkbox" value="2">
|
|
187
|
+
<span>
|
|
188
|
+
チェックボックス 2
|
|
189
|
+
</span>
|
|
190
|
+
</label>
|
|
191
|
+
</li>
|
|
192
|
+
</ul>
|
|
193
|
+
</div>
|
|
194
|
+
<div class="fieldset">
|
|
195
|
+
<legend>スイッチ（チェックボックス）</legend>
|
|
196
|
+
<ul class="reset-ul">
|
|
197
|
+
<li>
|
|
198
|
+
<div class="switch">
|
|
199
|
+
<input id="field-checkbox-switch-0" type="checkbox" value="0">
|
|
200
|
+
<label for="field-checkbox-switch-0"></label>
|
|
201
|
+
</div>
|
|
202
|
+
</li>
|
|
203
|
+
</ul>
|
|
204
|
+
</div>
|
|
205
|
+
<div class="fieldset">
|
|
206
|
+
<legend>セレクトボックス</legend>
|
|
207
|
+
<div class="select">
|
|
208
|
+
<select id="field-select">
|
|
209
|
+
<option value="1">選択肢1</option>
|
|
210
|
+
<option value="2">選択肢2</option>
|
|
211
|
+
<option value="3">選択肢3</option>
|
|
212
|
+
</select>
|
|
213
|
+
</div>
|
|
214
|
+
</div>
|
|
215
|
+
<!-- <div class="fieldset">
|
|
216
|
+
<legend>ファイルアップロード</legend>
|
|
217
|
+
<div class="file-upload">
|
|
218
|
+
<input type="file" name="file-upload" id="file-upload">
|
|
219
|
+
<label for="file-upload">ファイルを選択する</label>
|
|
220
|
+
<span class="selected"></span>
|
|
221
|
+
</div>
|
|
222
|
+
</div> -->
|
|
223
|
+
<div class="fieldset">
|
|
224
|
+
<div class="button-group">
|
|
225
|
+
<input class="button" type="submit" value="送信">
|
|
226
|
+
<input class="button-border" type="reset" value="リセット">
|
|
227
|
+
</div>
|
|
228
|
+
</div>
|
|
229
|
+
</form>
|
|
230
|
+
</section>
|
|
231
|
+
</div>
|
|
232
|
+
<div class="col-md-4">
|
|
233
|
+
<section class="demo-styles">
|
|
234
|
+
<h2>Table styles</h2>
|
|
235
|
+
<table class="table">
|
|
236
|
+
<thead>
|
|
237
|
+
<tr>
|
|
238
|
+
<th>xxx</th>
|
|
239
|
+
<th>xxx</th>
|
|
240
|
+
<th>xxx</th>
|
|
241
|
+
</tr>
|
|
242
|
+
</thead>
|
|
243
|
+
<tbody>
|
|
244
|
+
<tr>
|
|
245
|
+
<td>xxx</td>
|
|
246
|
+
<td>xxx</td>
|
|
247
|
+
<td>xxx</td>
|
|
248
|
+
</tr>
|
|
249
|
+
<tr>
|
|
250
|
+
<td>xxx</td>
|
|
251
|
+
<td>xxx</td>
|
|
252
|
+
<td>xxx</td>
|
|
253
|
+
</tr>
|
|
254
|
+
<tr>
|
|
255
|
+
<td>xxx</td>
|
|
256
|
+
<td>xxx</td>
|
|
257
|
+
<td>xxx</td>
|
|
258
|
+
</tr>
|
|
259
|
+
</tbody>
|
|
260
|
+
</table>
|
|
261
|
+
<table class="table-line">
|
|
262
|
+
<thead>
|
|
263
|
+
<tr>
|
|
264
|
+
<th>xxx</th>
|
|
265
|
+
<th>xxx</th>
|
|
266
|
+
<th>xxx</th>
|
|
267
|
+
</tr>
|
|
268
|
+
</thead>
|
|
269
|
+
<tbody>
|
|
270
|
+
<tr>
|
|
271
|
+
<td>xxx</td>
|
|
272
|
+
<td>xxx</td>
|
|
273
|
+
<td>xxx</td>
|
|
274
|
+
</tr>
|
|
275
|
+
<tr>
|
|
276
|
+
<td>xxx</td>
|
|
277
|
+
<td>xxx</td>
|
|
278
|
+
<td>xxx</td>
|
|
279
|
+
</tr>
|
|
280
|
+
<tr>
|
|
281
|
+
<td>xxx</td>
|
|
282
|
+
<td>xxx</td>
|
|
283
|
+
<td>xxx</td>
|
|
284
|
+
</tr>
|
|
285
|
+
</tbody>
|
|
286
|
+
</table>
|
|
287
|
+
<table class="table-stripe">
|
|
288
|
+
<thead>
|
|
289
|
+
<tr>
|
|
290
|
+
<th>xxx</th>
|
|
291
|
+
<th>xxx</th>
|
|
292
|
+
<th>xxx</th>
|
|
293
|
+
</tr>
|
|
294
|
+
</thead>
|
|
295
|
+
<tbody>
|
|
296
|
+
<tr>
|
|
297
|
+
<td>xxx</td>
|
|
298
|
+
<td>xxx</td>
|
|
299
|
+
<td>xxx</td>
|
|
300
|
+
</tr>
|
|
301
|
+
<tr>
|
|
302
|
+
<td>xxx</td>
|
|
303
|
+
<td>xxx</td>
|
|
304
|
+
<td>xxx</td>
|
|
305
|
+
</tr>
|
|
306
|
+
<tr>
|
|
307
|
+
<td>xxx</td>
|
|
308
|
+
<td>xxx</td>
|
|
309
|
+
<td>xxx</td>
|
|
310
|
+
</tr>
|
|
311
|
+
</tbody>
|
|
312
|
+
</table>
|
|
313
|
+
</section>
|
|
314
|
+
</div>
|
|
315
|
+
</div>
|
|
316
|
+
</div>
|
|
317
|
+
|
|
318
|
+
<div class="container pt-3">
|
|
319
|
+
<div class="row">
|
|
320
|
+
<div class="col-12">
|
|
321
|
+
<p><a href="https://github.com/is8r/spuit" target="_blank">github</a></p>
|
|
322
|
+
</div>
|
|
323
|
+
</div>
|
|
324
|
+
</div>
|
|
325
|
+
|
|
326
|
+
<script src="/javascripts/scripts.js"></script>
|
|
327
|
+
</body>
|
|
328
|
+
</html>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const $ = require('jquery')
|
|
1
|
+
// const $ = require('jquery')
|
|
2
2
|
|
|
3
|
-
$(function() {
|
|
4
|
-
})
|
|
3
|
+
// $(function() {
|
|
4
|
+
// })
|
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
@import '../../spuit';
|
|
2
2
|
@import '../../scss/includes/grid';
|
|
3
|
+
@import '../../scss/components/wrap';
|
|
4
|
+
@import '../../scss/components/wordwrap-fadeout';
|
|
3
5
|
|
|
4
6
|
@import 'styles/config/variables';
|
|
5
7
|
@import 'styles/config/mixins';
|
|
6
8
|
|
|
7
|
-
@include include-animations
|
|
8
|
-
@include include-normalize
|
|
9
|
-
@include include-grid
|
|
9
|
+
@include include-animations;
|
|
10
|
+
@include include-normalize;
|
|
11
|
+
@include include-grid;
|
|
10
12
|
|
|
11
13
|
// basic styles
|
|
12
14
|
|
|
@@ -165,4 +167,7 @@ body {
|
|
|
165
167
|
@include icon-hatena;
|
|
166
168
|
}
|
|
167
169
|
|
|
170
|
+
.wordwrap-fadeout {
|
|
171
|
+
@include wordwrap-fadeout;
|
|
172
|
+
}
|
|
168
173
|
}
|
data/dist/favicon.ico
ADDED
|
Binary file
|
data/dist/index.html
CHANGED
|
@@ -1,323 +1 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="ja">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8">
|
|
5
|
-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
7
|
-
<title></title>
|
|
8
|
-
|
|
9
|
-
<link href="/stylesheets/styles.css" rel="stylesheet">
|
|
10
|
-
</head>
|
|
11
|
-
<body>
|
|
12
|
-
|
|
13
|
-
<div class="container">
|
|
14
|
-
<div class="row">
|
|
15
|
-
<div class="col-12">
|
|
16
|
-
<p>Spuit</p>
|
|
17
|
-
</div>
|
|
18
|
-
</div>
|
|
19
|
-
</div>
|
|
20
|
-
|
|
21
|
-
<div class="container">
|
|
22
|
-
<div class="row">
|
|
23
|
-
<div class="col-md-4">
|
|
24
|
-
<section class="demo-styles">
|
|
25
|
-
<h2>Text Styles</h2>
|
|
26
|
-
<h1>heading 1</h1>
|
|
27
|
-
<h2>heading 2</h2>
|
|
28
|
-
<h3>heading 3</h3>
|
|
29
|
-
<h4>heading 4</h4>
|
|
30
|
-
<h5>heading 5</h5>
|
|
31
|
-
<h6>heading 6</h6>
|
|
32
|
-
<p>paragraf <a href="#">link</a> <b>bold</b></p>
|
|
33
|
-
</section>
|
|
34
|
-
</div>
|
|
35
|
-
<div class="col-md-4">
|
|
36
|
-
<section class="demo-styles">
|
|
37
|
-
<h2>Utilities</h2>
|
|
38
|
-
<h3>word break</h3>
|
|
39
|
-
<p class="word-break">.word-break</p>
|
|
40
|
-
<br>
|
|
41
|
-
<p class="word-break-none">.word-break-none</p>
|
|
42
|
-
<h3>text-overflow</h3>
|
|
43
|
-
<p class="text-overflow">.text-overflow</p>
|
|
44
|
-
</section>
|
|
45
|
-
</div>
|
|
46
|
-
<div class="col-md-4">
|
|
47
|
-
<section class="demo-styles">
|
|
48
|
-
<h2>button styles</h2>
|
|
49
|
-
<a href="#" class="button">Button</a>
|
|
50
|
-
<input type="submit" class="button" value="Button" />
|
|
51
|
-
<button type="button" class="button">Button</button>
|
|
52
|
-
<a href="#" class="button is-loading">Button</a>
|
|
53
|
-
<a href="#" class="button-semiflat">Button</a>
|
|
54
|
-
<a href="#" class="button-border">Button</a>
|
|
55
|
-
<a href="#" class="button-emboss">Button</a>
|
|
56
|
-
</section>
|
|
57
|
-
|
|
58
|
-
<section class="demo-styles">
|
|
59
|
-
<h2>icon styles</h2>
|
|
60
|
-
<i class="icon-hamburger"></i>
|
|
61
|
-
<i class="icon-twitter"></i>
|
|
62
|
-
<i class="icon-facebook"></i>
|
|
63
|
-
<i class="icon-hatena"></i>
|
|
64
|
-
</section>
|
|
65
|
-
|
|
66
|
-
</div>
|
|
67
|
-
</div>
|
|
68
|
-
|
|
69
|
-
<div class="row">
|
|
70
|
-
<div class="col-md-4">
|
|
71
|
-
<section class="demo-styles">
|
|
72
|
-
<h2>Form styles</h2>
|
|
73
|
-
|
|
74
|
-
<form>
|
|
75
|
-
<div class="fieldset">
|
|
76
|
-
<legend>お名前</legend>
|
|
77
|
-
<div>
|
|
78
|
-
<input id="field-text" placeholder="お名前" type="text">
|
|
79
|
-
</div>
|
|
80
|
-
</div>
|
|
81
|
-
<div class="fieldset">
|
|
82
|
-
<legend>お問い合わせ内容</legend>
|
|
83
|
-
<textarea cols="50" id="field-textarea" placeholder="お問い合わせ内容を入力下さい" rows="10"></textarea>
|
|
84
|
-
</div>
|
|
85
|
-
<div class="fieldset">
|
|
86
|
-
<legend>ラジオボタン（並列）</legend>
|
|
87
|
-
<ul class="reset-ul">
|
|
88
|
-
<li class="radio">
|
|
89
|
-
<input id="field-radio-0" name="field-radio" type="radio" value="0">
|
|
90
|
-
<label for="field-radio-0">
|
|
91
|
-
ラジオボタン 0
|
|
92
|
-
</label>
|
|
93
|
-
</li>
|
|
94
|
-
<li class="radio">
|
|
95
|
-
<input id="field-radio-1" name="field-radio" type="radio" value="1">
|
|
96
|
-
<label for="field-radio-1">
|
|
97
|
-
ラジオボタン 1
|
|
98
|
-
</label>
|
|
99
|
-
</li>
|
|
100
|
-
<li class="radio">
|
|
101
|
-
<input id="field-radio-2" name="field-radio" type="radio" value="2">
|
|
102
|
-
<label for="field-radio-2">
|
|
103
|
-
ラジオボタン 2
|
|
104
|
-
</label>
|
|
105
|
-
</li>
|
|
106
|
-
</ul>
|
|
107
|
-
</div>
|
|
108
|
-
<div class="fieldset">
|
|
109
|
-
<legend>ラジオボタン（入れ子）</legend>
|
|
110
|
-
<ul class="reset-ul">
|
|
111
|
-
<li class="radio-inside">
|
|
112
|
-
<label for="field-radio-inside-0">
|
|
113
|
-
<input id="field-radio-inside-0" name="field-radio-inside" type="radio" value="0">
|
|
114
|
-
<span>
|
|
115
|
-
ラジオボタン 0
|
|
116
|
-
</span>
|
|
117
|
-
</label>
|
|
118
|
-
</li>
|
|
119
|
-
<li class="radio-inside">
|
|
120
|
-
<label for="field-radio-inside-1">
|
|
121
|
-
<input id="field-radio-inside-1" name="field-radio-inside" type="radio" value="1">
|
|
122
|
-
<span>
|
|
123
|
-
ラジオボタン 1
|
|
124
|
-
</span>
|
|
125
|
-
</label>
|
|
126
|
-
</li>
|
|
127
|
-
<li class="radio-inside">
|
|
128
|
-
<label for="field-radio-inside-2">
|
|
129
|
-
<input id="field-radio-inside-2" name="field-radio-inside" type="radio" value="2">
|
|
130
|
-
<span>
|
|
131
|
-
ラジオボタン 2
|
|
132
|
-
</span>
|
|
133
|
-
</label>
|
|
134
|
-
</li>
|
|
135
|
-
</ul>
|
|
136
|
-
</div>
|
|
137
|
-
<div class="fieldset">
|
|
138
|
-
<legend>チェックボックス（並列）</legend>
|
|
139
|
-
<ul class="reset-ul">
|
|
140
|
-
<li class="checkbox">
|
|
141
|
-
<input id="field-checkbox-0" type="checkbox" value="0">
|
|
142
|
-
<label for="field-checkbox-0">
|
|
143
|
-
チェックボックス 0
|
|
144
|
-
</label>
|
|
145
|
-
</li>
|
|
146
|
-
<li class="checkbox">
|
|
147
|
-
<input id="field-checkbox-1" type="checkbox" value="1">
|
|
148
|
-
<label for="field-checkbox-1">
|
|
149
|
-
チェックボックス 1
|
|
150
|
-
</label>
|
|
151
|
-
</li>
|
|
152
|
-
<li class="checkbox">
|
|
153
|
-
<input id="field-checkbox-2" type="checkbox" value="2">
|
|
154
|
-
<label for="field-checkbox-2">
|
|
155
|
-
チェックボックス 2
|
|
156
|
-
</label>
|
|
157
|
-
</li>
|
|
158
|
-
</ul>
|
|
159
|
-
</div>
|
|
160
|
-
<div class="fieldset">
|
|
161
|
-
<legend>チェックボックス（入れ子）</legend>
|
|
162
|
-
<ul class="reset-ul">
|
|
163
|
-
<li class="checkbox-inside">
|
|
164
|
-
<label for="field-checkbox-inside-0">
|
|
165
|
-
<input id="field-checkbox-inside-0" type="checkbox" value="0">
|
|
166
|
-
<span>
|
|
167
|
-
チェックボックス 0
|
|
168
|
-
</span>
|
|
169
|
-
</label>
|
|
170
|
-
</li>
|
|
171
|
-
<li class="checkbox-inside">
|
|
172
|
-
<label for="field-checkbox-inside-1">
|
|
173
|
-
<input id="field-checkbox-inside-1" type="checkbox" value="1">
|
|
174
|
-
<span>
|
|
175
|
-
チェックボックス 1
|
|
176
|
-
</span>
|
|
177
|
-
</label>
|
|
178
|
-
</li>
|
|
179
|
-
<li class="checkbox-inside">
|
|
180
|
-
<label for="field-checkbox-inside-2">
|
|
181
|
-
<input id="field-checkbox-inside-2" type="checkbox" value="2">
|
|
182
|
-
<span>
|
|
183
|
-
チェックボックス 2
|
|
184
|
-
</span>
|
|
185
|
-
</label>
|
|
186
|
-
</li>
|
|
187
|
-
</ul>
|
|
188
|
-
</div>
|
|
189
|
-
<div class="fieldset">
|
|
190
|
-
<legend>スイッチ（チェックボックス）</legend>
|
|
191
|
-
<ul class="reset-ul">
|
|
192
|
-
<li>
|
|
193
|
-
<div class="switch">
|
|
194
|
-
<input id="field-checkbox-switch-0" type="checkbox" value="0">
|
|
195
|
-
<label for="field-checkbox-switch-0"></label>
|
|
196
|
-
</div>
|
|
197
|
-
</li>
|
|
198
|
-
</ul>
|
|
199
|
-
</div>
|
|
200
|
-
<div class="fieldset">
|
|
201
|
-
<legend>セレクトボックス</legend>
|
|
202
|
-
<div class="select">
|
|
203
|
-
<select id="field-select">
|
|
204
|
-
<option value="1">選択肢1</option>
|
|
205
|
-
<option value="2">選択肢2</option>
|
|
206
|
-
<option value="3">選択肢3</option>
|
|
207
|
-
</select>
|
|
208
|
-
</div>
|
|
209
|
-
</div>
|
|
210
|
-
<!-- <div class="fieldset">
|
|
211
|
-
<legend>ファイルアップロード</legend>
|
|
212
|
-
<div class="file-upload">
|
|
213
|
-
<input type="file" name="file-upload" id="file-upload">
|
|
214
|
-
<label for="file-upload">ファイルを選択する</label>
|
|
215
|
-
<span class="selected"></span>
|
|
216
|
-
</div>
|
|
217
|
-
</div> -->
|
|
218
|
-
<div class="fieldset">
|
|
219
|
-
<div class="button-group">
|
|
220
|
-
<input class="button" type="submit" value="送信">
|
|
221
|
-
<input class="button-border" type="reset" value="リセット">
|
|
222
|
-
</div>
|
|
223
|
-
</div>
|
|
224
|
-
</form>
|
|
225
|
-
</section>
|
|
226
|
-
</div>
|
|
227
|
-
<div class="col-md-4">
|
|
228
|
-
<section class="demo-styles">
|
|
229
|
-
<h2>Table styles</h2>
|
|
230
|
-
<table class="table">
|
|
231
|
-
<thead>
|
|
232
|
-
<tr>
|
|
233
|
-
<th>xxx</th>
|
|
234
|
-
<th>xxx</th>
|
|
235
|
-
<th>xxx</th>
|
|
236
|
-
</tr>
|
|
237
|
-
</thead>
|
|
238
|
-
<tbody>
|
|
239
|
-
<tr>
|
|
240
|
-
<td>xxx</td>
|
|
241
|
-
<td>xxx</td>
|
|
242
|
-
<td>xxx</td>
|
|
243
|
-
</tr>
|
|
244
|
-
<tr>
|
|
245
|
-
<td>xxx</td>
|
|
246
|
-
<td>xxx</td>
|
|
247
|
-
<td>xxx</td>
|
|
248
|
-
</tr>
|
|
249
|
-
<tr>
|
|
250
|
-
<td>xxx</td>
|
|
251
|
-
<td>xxx</td>
|
|
252
|
-
<td>xxx</td>
|
|
253
|
-
</tr>
|
|
254
|
-
</tbody>
|
|
255
|
-
</table>
|
|
256
|
-
<table class="table-line">
|
|
257
|
-
<thead>
|
|
258
|
-
<tr>
|
|
259
|
-
<th>xxx</th>
|
|
260
|
-
<th>xxx</th>
|
|
261
|
-
<th>xxx</th>
|
|
262
|
-
</tr>
|
|
263
|
-
</thead>
|
|
264
|
-
<tbody>
|
|
265
|
-
<tr>
|
|
266
|
-
<td>xxx</td>
|
|
267
|
-
<td>xxx</td>
|
|
268
|
-
<td>xxx</td>
|
|
269
|
-
</tr>
|
|
270
|
-
<tr>
|
|
271
|
-
<td>xxx</td>
|
|
272
|
-
<td>xxx</td>
|
|
273
|
-
<td>xxx</td>
|
|
274
|
-
</tr>
|
|
275
|
-
<tr>
|
|
276
|
-
<td>xxx</td>
|
|
277
|
-
<td>xxx</td>
|
|
278
|
-
<td>xxx</td>
|
|
279
|
-
</tr>
|
|
280
|
-
</tbody>
|
|
281
|
-
</table>
|
|
282
|
-
<table class="table-stripe">
|
|
283
|
-
<thead>
|
|
284
|
-
<tr>
|
|
285
|
-
<th>xxx</th>
|
|
286
|
-
<th>xxx</th>
|
|
287
|
-
<th>xxx</th>
|
|
288
|
-
</tr>
|
|
289
|
-
</thead>
|
|
290
|
-
<tbody>
|
|
291
|
-
<tr>
|
|
292
|
-
<td>xxx</td>
|
|
293
|
-
<td>xxx</td>
|
|
294
|
-
<td>xxx</td>
|
|
295
|
-
</tr>
|
|
296
|
-
<tr>
|
|
297
|
-
<td>xxx</td>
|
|
298
|
-
<td>xxx</td>
|
|
299
|
-
<td>xxx</td>
|
|
300
|
-
</tr>
|
|
301
|
-
<tr>
|
|
302
|
-
<td>xxx</td>
|
|
303
|
-
<td>xxx</td>
|
|
304
|
-
<td>xxx</td>
|
|
305
|
-
</tr>
|
|
306
|
-
</tbody>
|
|
307
|
-
</table>
|
|
308
|
-
</section>
|
|
309
|
-
</div>
|
|
310
|
-
</div>
|
|
311
|
-
</div>
|
|
312
|
-
|
|
313
|
-
<div class="container pt-3">
|
|
314
|
-
<div class="row">
|
|
315
|
-
<div class="col-12">
|
|
316
|
-
<p><a href="https://github.com/is8r/spuit" target="_blank">github</a></p>
|
|
317
|
-
</div>
|
|
318
|
-
</div>
|
|
319
|
-
</div>
|
|
320
|
-
|
|
321
|
-
<script src="/javascripts/scripts.js"></script>
|
|
322
|
-
</body>
|
|
323
|
-
</html>
|
|
1
|
+
<!DOCTYPE html><html lang=ja><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><title></title><link href=/stylesheets/styles.css rel=stylesheet></head><body><div class=container><div class=row><div class=col-12><p>Spuit</p></div></div></div><div class=container><div class=row><div class=col-md-4><section class=demo-styles><h2>Text Styles</h2><h1>heading 1</h1><h2>heading 2</h2><h3>heading 3</h3><h4>heading 4</h4><h5>heading 5</h5><h6>heading 6</h6><p>paragraf <a href=#>link</a> <b>bold</b></p></section></div><div class=col-md-4><section class=demo-styles><h2>Utilities</h2><h3>word break</h3><p class=word-break>.word-break</p><br><p class=word-break-none>.word-break-none</p><h3>text-overflow</h3><p class=text-overflow>.text-overflow</p><h3>wordwrap-fadeout</h3><div class=wordwrap-fadeout><p>.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout</p></div></section></div><div class=col-md-4><section class=demo-styles><h2>button styles</h2><a href=# class=button>Button</a> <input type=submit class=button value=Button> <button type=button class=button>Button</button> <a href=# class="button is-loading">Button</a> <a href=# class=button-semiflat>Button</a> <a href=# class=button-border>Button</a> <a href=# class=button-emboss>Button</a></section><section class=demo-styles><h2>icon styles</h2><i class=icon-hamburger></i> <i class=icon-twitter></i> <i class=icon-facebook></i> <i class=icon-hatena></i></section></div></div><div class=row><div class=col-md-4><section class=demo-styles><h2>Form styles</h2><form><div class=fieldset><legend>お名前</legend><div><input id=field-text placeholder=お名前 type=text></div></div><div class=fieldset><legend>お問い合わせ内容</legend><textarea cols=50 id=field-textarea placeholder=お問い合わせ内容を入力下さい rows=10></textarea></div><div class=fieldset><legend>ラジオボタン（並列）</legend><ul class=reset-ul><li class=radio><input id=field-radio-0 name=field-radio type=radio value=0> <label for=field-radio-0>ラジオボタン 0</label></li><li class=radio><input id=field-radio-1 name=field-radio type=radio value=1> <label for=field-radio-1>ラジオボタン 1</label></li><li class=radio><input id=field-radio-2 name=field-radio type=radio value=2> <label for=field-radio-2>ラジオボタン 2</label></li></ul></div><div class=fieldset><legend>ラジオボタン（入れ子）</legend><ul class=reset-ul><li class=radio-inside><label for=field-radio-inside-0><input id=field-radio-inside-0 name=field-radio-inside type=radio value=0> <span>ラジオボタン 0</span></label></li><li class=radio-inside><label for=field-radio-inside-1><input id=field-radio-inside-1 name=field-radio-inside type=radio value=1> <span>ラジオボタン 1</span></label></li><li class=radio-inside><label for=field-radio-inside-2><input id=field-radio-inside-2 name=field-radio-inside type=radio value=2> <span>ラジオボタン 2</span></label></li></ul></div><div class=fieldset><legend>チェックボックス（並列）</legend><ul class=reset-ul><li class=checkbox><input id=field-checkbox-0 type=checkbox value=0> <label for=field-checkbox-0>チェックボックス 0</label></li><li class=checkbox><input id=field-checkbox-1 type=checkbox value=1> <label for=field-checkbox-1>チェックボックス 1</label></li><li class=checkbox><input id=field-checkbox-2 type=checkbox value=2> <label for=field-checkbox-2>チェックボックス 2</label></li></ul></div><div class=fieldset><legend>チェックボックス（入れ子）</legend><ul class=reset-ul><li class=checkbox-inside><label for=field-checkbox-inside-0><input id=field-checkbox-inside-0 type=checkbox value=0> <span>チェックボックス 0</span></label></li><li class=checkbox-inside><label for=field-checkbox-inside-1><input id=field-checkbox-inside-1 type=checkbox value=1> <span>チェックボックス 1</span></label></li><li class=checkbox-inside><label for=field-checkbox-inside-2><input id=field-checkbox-inside-2 type=checkbox value=2> <span>チェックボックス 2</span></label></li></ul></div><div class=fieldset><legend>スイッチ（チェックボックス）</legend><ul class=reset-ul><li><div class=switch><input id=field-checkbox-switch-0 type=checkbox value=0> <label for=field-checkbox-switch-0></label></div></li></ul></div><div class=fieldset><legend>セレクトボックス</legend><div class=select><select id=field-select><option value=1>選択肢1</option><option value=2>選択肢2</option><option value=3>選択肢3</option></select></div></div><div class=fieldset><div class=button-group><input class=button type=submit value=送信> <input class=button-border type=reset value=リセット></div></div></form></section></div><div class=col-md-4><section class=demo-styles><h2>Table styles</h2><table class=table><thead><tr><th>xxx</th><th>xxx</th><th>xxx</th></tr></thead><tbody><tr><td>xxx</td><td>xxx</td><td>xxx</td></tr><tr><td>xxx</td><td>xxx</td><td>xxx</td></tr><tr><td>xxx</td><td>xxx</td><td>xxx</td></tr></tbody></table><table class=table-line><thead><tr><th>xxx</th><th>xxx</th><th>xxx</th></tr></thead><tbody><tr><td>xxx</td><td>xxx</td><td>xxx</td></tr><tr><td>xxx</td><td>xxx</td><td>xxx</td></tr><tr><td>xxx</td><td>xxx</td><td>xxx</td></tr></tbody></table><table class=table-stripe><thead><tr><th>xxx</th><th>xxx</th><th>xxx</th></tr></thead><tbody><tr><td>xxx</td><td>xxx</td><td>xxx</td></tr><tr><td>xxx</td><td>xxx</td><td>xxx</td></tr><tr><td>xxx</td><td>xxx</td><td>xxx</td></tr></tbody></table></section></div></div></div><div class="container pt-3"><div class=row><div class=col-12><p><a href=https://github.com/is8r/spuit target=_blank>github</a></p></div></div></div><script src=/javascripts/scripts.js></script><script type=text/javascript src=javascripts/scripts.js></script></body></html>
|