1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
// Lucky generates 3 folders to help you organize your CSS:
//
// - src/css/variables # Files for colors, spacing, etc.
// - src/css/mixins # Put your mixin functions in files here
// - src/css/components # CSS for your components
//
// Remember to import your new CSS files or they won't be loaded:
//
// @import "./variables/colors" # Imports the file in src/css/variables/_colors.scss
//
// Note: importing with `~` tells webpack to look in the installed npm packages
// https://stackoverflow.com/questions/39535760/what-does-a-tilde-in-a-css-url-do
@import 'modern-normalize/modern-normalize.css';
// Add your own components and import them like this:
//
// @import "components/my_new_component";
// Default Lucky styles.
// Delete these when you're ready to bring in your own CSS.
body {
font-family: system-ui, BlinkMacSystemFont, -apple-system, Segoe UI,
Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
sans-serif;
margin: 0 auto;
max-width: 800px;
padding: 20px 40px;
}
label, input {
display: flex;
}
label {
font-weight: 500;
}
[type='color'],
[type='date'],
[type='datetime'],
[type='datetime-local'],
[type='email'],
[type='month'],
[type='number'],
[type='password'],
[type='search'],
[type='tel'],
[type='text'],
[type='time'],
[type='url'],
[type='week'],
input:not([type]),
textarea {
border-radius: 3px;
border: 1px solid #bbb;
margin: 7px 0 14px 0;
max-width: 400px;
padding: 8px 6px;
width: 100%;
}
[type='submit'] {
font-weight: 900;
margin: 9px 0;
padding: 6px 9px;
}
|
