67 lines
1.5 KiB
SCSS
67 lines
1.5 KiB
SCSS
// 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 "~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;
|
|
}
|