diff options
Diffstat (limited to 'themes/twentynineteen/sass/forms')
-rw-r--r-- | themes/twentynineteen/sass/forms/_buttons.scss | 37 | ||||
-rw-r--r-- | themes/twentynineteen/sass/forms/_fields.scss | 58 | ||||
-rw-r--r-- | themes/twentynineteen/sass/forms/_forms.scss | 3 |
3 files changed, 98 insertions, 0 deletions
diff --git a/themes/twentynineteen/sass/forms/_buttons.scss b/themes/twentynineteen/sass/forms/_buttons.scss new file mode 100644 index 00000000..f527a088 --- /dev/null +++ b/themes/twentynineteen/sass/forms/_buttons.scss @@ -0,0 +1,37 @@ +.button, +button, +input[type="button"], +input[type="reset"], +input[type="submit"] { + + @include button-transition; + background: $color__background-button; + border: none; + border-radius: 5px; + box-sizing: border-box; + color: $color__background-body; + @include font-family( $font__heading ); + font-size: $font__size-sm; + font-weight: 700; + line-height: $font__line-height-heading; + outline: none; + padding: ( $size__spacing-unit * .76 ) $size__spacing-unit; + text-decoration: none; + vertical-align: bottom; + + &:hover { + background: $color__background-button-hover; + cursor: pointer; + } + + &:visited { + color: $color__background-body; + text-decoration: none; + } + + &:focus { + background: $color__background-button-hover; + outline: thin dotted; + outline-offset: -4px; + } +} diff --git a/themes/twentynineteen/sass/forms/_fields.scss b/themes/twentynineteen/sass/forms/_fields.scss new file mode 100644 index 00000000..448b707a --- /dev/null +++ b/themes/twentynineteen/sass/forms/_fields.scss @@ -0,0 +1,58 @@ +input[type="text"], +input[type="email"], +input[type="url"], +input[type="password"], +input[type="search"], +input[type="number"], +input[type="tel"], +input[type="range"], +input[type="date"], +input[type="month"], +input[type="week"], +input[type="time"], +input[type="datetime"], +input[type="datetime-local"], +input[type="color"], +textarea { + -webkit-backface-visibility: hidden; + background: $color__background-input; + border: solid 1px $color__border; + box-sizing: border-box; + outline: none; + padding: #{.36 * $size__spacing-unit} #{.66 * $size__spacing-unit}; + -webkit-appearance: none; + outline-offset: 0; + border-radius: 0; + + &:focus { + border-color: $color__link; + outline: thin solid rgba( $color__link, 0.15 ); + outline-offset: -4px; + } +} + +input[type="search"] { + &::-webkit-search-decoration { + display: none; + } +} + +select { + +} + +textarea { + box-sizing: border-box; + display: block; + width: 100%; + max-width: 100%; + resize: vertical; +} + +form { + + p { + margin: $size__spacing-unit 0; + } + +}
\ No newline at end of file diff --git a/themes/twentynineteen/sass/forms/_forms.scss b/themes/twentynineteen/sass/forms/_forms.scss new file mode 100644 index 00000000..2036ef92 --- /dev/null +++ b/themes/twentynineteen/sass/forms/_forms.scss @@ -0,0 +1,3 @@ +@import "buttons"; + +@import "fields"; |