diff options
| -rw-r--r-- | _scss/components/theme/_form.scss | 67 | 
1 files changed, 67 insertions, 0 deletions
| diff --git a/_scss/components/theme/_form.scss b/_scss/components/theme/_form.scss new file mode 100644 index 0000000..6efcdcf --- /dev/null +++ b/_scss/components/theme/_form.scss @@ -0,0 +1,67 @@ +@import 'utilities/appearance'; +@import 'utilities/boxshadow'; + +input:not([type]), +input[type='color'], +input[type='date'], +input[type='datetime'], +input[type='datetime-local'], +input[type='email'], +input[type='month'], +input[type='number'], +input[type='password'], +input[type='search'], +input[type='tel'], +input[type='text'], +input[type='url'], +input[type='week'], +select, +textarea { +  background-color: transparent; +  border: .1rem solid $color-quaternary; +  border-radius: .4rem; +  box-sizing: inherit; +  height: 3.8rem; +  padding: .6rem 1rem; +  width: 100%; + +  @include appearance(none); +  @include boxshadow(none); + +  &:focus { +    border-color: $color-primary; +    outline: 0; +  } +} + +select { +  padding-right: 3rem; +} + +textarea { +  min-height: 6.5rem; +} + +label, +legend { +  display: block; +  font-size: 1.6rem; +  font-weight: 700; +  margin-bottom: .5rem; +} + +fieldset { +  border-width: 0; +  padding: 0; +} + +input[type='checkbox'], +input[type='radio'] { +  display: inline; +} + +.label-inline { +  display: inline-block; +  font-weight: normal; +  margin-left: .5rem; +} | 
