Skip to content

Instantly share code, notes, and snippets.

@bklik
Last active Apr 9, 2022
Embed
What would you like to do?
* {
box-sizing: border-box;
font-family: "Segoe UI", Arial, Helvetica, sans-serif;
}
html,
body {
height: 100%;
margin: 0;
overflow: auto;
padding: 0;
position: relative;
}
html {
font-size: 8px;
}
body {
align-items: center;
color: #333;
display: grid;
grid-template-columns: 1fr;
font-size: 2rem;
justify-items: center;
}
input,
button {
color: inherit;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
.card {
box-shadow: 0 0.25rem 0.75rem 0.25rem #0003;
border-radius: 1rem;
header {
border-bottom: 1px solid #eee;
margin: 2rem 2rem 4rem 2rem;
padding: 0 0 2rem 0;
h1 {
font-size: 2.5rem;
font-weight: 500;
margin: 0 0 1rem 0;
padding: 0;
}
h2 {
font-size: 2rem;
font-weight: normal;
margin: 0;
padding: 0;
}
}
footer {
border-top: 1px solid #eee;
display: flex;
gap: 2rem;
justify-content: flex-end;
margin: 4rem 0 0 0;
padding: 2rem;
}
}
.password-criteria {
background-color: #eee;
border-radius: 0.5rem;
padding: 1rem;
margin: 0 2rem;
p {
margin: 0 0 1rem 0;
}
ul {
margin: 0 3rem;
padding: 0;
li {
line-height: 3rem;
}
}
}
/* ************************************************
MATERIAL FORM STYLS
************************************************ */
$primary: #0486ff;
form.material {
.form-content {
display: grid;
gap: 4rem;
grid-template-columns: 1fr;
grid-auto-flow: row;
width: 64rem;
max-width: 100%;
}
.field {
display: grid;
grid-template-columns: 1fr;
grid-auto-flow: row;
overflow: visible;
margin: 0 2rem;
position: relative;
label {
color: #999;
position: absolute;
top: 2rem;
}
input {
background-image: linear-gradient(to bottom, transparent calc(100% - 0.125rem), #ccc 0.125rem);
border: none;
outline: none;
padding: 2.5rem 0 1.5rem 0;
}
.hint {
color: #999;
font-size: 1.75rem;
font-weight: 500;
margin: 1rem 0;
}
}
}
button.material {
border: none;
border-radius: 0.5rem;
box-shadow: 0 0.125rem 0.325rem 0.125rem #0003;
font-weight: 500;
margin: 0;
padding: 1rem 2rem;
text-transform: uppercase;
&.flat {
background: none;
box-shadow: none;
}
&.primary {
background-color: #0486ff;
color: #eee;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment