67 lines
1.5 KiB
SCSS
67 lines
1.5 KiB
SCSS
// Lucky generates 3 folders to help you organize your CSS:
|
|
//
|
|
// - static/css/variables # Files for colors, spacing, etc.
|
|
// - static/css/mixins # Put your mixin functions in files here
|
|
// - static/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 static/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 "~normalize-scss/sass/normalize/import-now";
|
|
// 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;
|
|
}
|