label { display: block; margin: 2em auto .5em; font-size: 1.2em; } input, textarea, select { transition: all 0.1s ease-in; display: block; width: 100%; margin: auto; padding: 1em; box-sizing: border-box; -webkit-appearance: textarea; background: $form-input-background; color: $black; border: none; border: solid $lightgray thin; font-size: 1.2em; font-weight: 400; &:focus { border-color: $purple; } } form input[type="submit"] { margin: 2em auto; -webkit-appearance: none; } textarea { resize: vertical; font-family: $lora; font-size: 1.1em; line-height: 1.5; } input[type="checkbox"] { display: inline; margin: initial; min-width: initial; width: initial; -webkit-appearance: checkbox; } /** Inline forms (containing only CSRF token and a , for protected links) **/ form.inline { display: inline; margin: 0px; padding: 0px; width: auto; input[type="submit"] { display: inline-block; color: $purple; cursor: pointer; font-size: 1em; width: auto; -webkit-appearance: none; &:not(.button) { margin: 0; padding: 0; border: none; background: transparent; color: $purple; } } } .button, input[type="submit"], button { transition: all 0.1s ease-in; display: inline-block; -webkit-appearance: none; border-radius: 0.5em; margin: 0.5em auto; padding: 0.75em 1em; background: transparent; color: $purple; border: 1px solid $purple; cursor: pointer; &:hover { background: transparentize($purple, 0.6); color: white; } &.destructive { color: $red; border-color: $red; &:hover { background: transparentize($red, 0.6); color: $white; } } } input[type="submit"] { display: block; -webkit-appearance: none; } // Writing page form.new-post { max-width: 60em; .title { margin: 0 auto; padding: 0.75em 0; background: none; border: none; font-family: $playfair; font-size: 2em; text-align: left; } textarea { min-height: 20em; overflow-y: hidden; resize: none; -webkit-appearance: textarea; } input[type="submit"] { background: $lightgray; color: $black; border: none; -webkit-appearance: none; font-family: $playfair; font-size: 1.5em; } input[type="submit"]:hover { background: $lightgray;} -webkit-appearance: none; } .button + .button { margin-left: 1em; } .split { display: flex; justify-content: space-between; & > * { flex-grow: 1; max-width: 40%; } } header.center { display: flex; flex-direction: column; align-items: center; background: transparent; opacity: 1; font-weight: normal; text-align: left; > * { margin-left: 0; margin-right: 0; } }