styled forms and imput fields
This commit is contained in:
parent
1140149ac9
commit
2a7d702e6f
|
@ -1385,30 +1385,64 @@ Add your custom styles in this file so it is easier to update the theme.
|
||||||
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="color"],
|
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="color"],
|
||||||
.edit-post-visual-editor__content-area .editor-styles-wrapper textarea {
|
.edit-post-visual-editor__content-area .editor-styles-wrapper textarea {
|
||||||
color: #111;
|
color: #111;
|
||||||
background-color: #eee;
|
background-color: transparent;
|
||||||
border: none;
|
border: 0.05rem solid #000;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0.3rem;
|
padding: 0.3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="text"]:focus,
|
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="text"]:focus,
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="text"]:focus-within,
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="text"]:focus-visible,
|
||||||
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="email"]:focus,
|
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="email"]:focus,
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="email"]:focus-within,
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="email"]:focus-visible,
|
||||||
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="url"]:focus,
|
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="url"]:focus,
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="url"]:focus-within,
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="url"]:focus-visible,
|
||||||
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="password"]:focus,
|
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="password"]:focus,
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="password"]:focus-within,
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="password"]:focus-visible,
|
||||||
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="search"]:focus,
|
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="search"]:focus,
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="search"]:focus-within,
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="search"]:focus-visible,
|
||||||
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="number"]:focus,
|
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="number"]:focus,
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="number"]:focus-within,
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="number"]:focus-visible,
|
||||||
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="tel"]:focus,
|
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="tel"]:focus,
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="tel"]:focus-within,
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="tel"]:focus-visible,
|
||||||
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="range"]:focus,
|
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="range"]:focus,
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="range"]:focus-within,
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="range"]:focus-visible,
|
||||||
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="date"]:focus,
|
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="date"]:focus,
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="date"]:focus-within,
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="date"]:focus-visible,
|
||||||
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="month"]:focus,
|
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="month"]:focus,
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="month"]:focus-within,
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="month"]:focus-visible,
|
||||||
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="week"]:focus,
|
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="week"]:focus,
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="week"]:focus-within,
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="week"]:focus-visible,
|
||||||
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="time"]:focus,
|
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="time"]:focus,
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="time"]:focus-within,
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="time"]:focus-visible,
|
||||||
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="datetime"]:focus,
|
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="datetime"]:focus,
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="datetime"]:focus-within,
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="datetime"]:focus-visible,
|
||||||
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="datetime-local"]:focus,
|
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="datetime-local"]:focus,
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="datetime-local"]:focus-within,
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="datetime-local"]:focus-visible,
|
||||||
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="color"]:focus,
|
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="color"]:focus,
|
||||||
.edit-post-visual-editor__content-area .editor-styles-wrapper textarea:focus {
|
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="color"]:focus-within,
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="color"]:focus-visible,
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper textarea:focus,
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper textarea:focus-within,
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper textarea:focus-visible {
|
||||||
color: #000;
|
color: #000;
|
||||||
|
box-shadow: none;
|
||||||
|
outline: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
.edit-post-visual-editor__content-area .editor-styles-wrapper select {
|
.edit-post-visual-editor__content-area .editor-styles-wrapper select {
|
||||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -33,7 +33,7 @@ $color__background-hr: $color__black;
|
||||||
$color__background-button: $color__black;
|
$color__background-button: $color__black;
|
||||||
$color__background-pre: $color__grey-lighter;
|
$color__background-pre: $color__grey-lighter;
|
||||||
$color__background-ins: $color__white-dark;
|
$color__background-ins: $color__white-dark;
|
||||||
$color__background-input: $color__grey-lighter;
|
$color__background-input: transparent;
|
||||||
|
|
||||||
$color__text-screen: $color__black;
|
$color__text-screen: $color__black;
|
||||||
$color__text-input: $color__black-grey;
|
$color__text-input: $color__black-grey;
|
||||||
|
|
|
@ -16,13 +16,14 @@ input[type="color"],
|
||||||
textarea {
|
textarea {
|
||||||
color: $color__text-input;
|
color: $color__text-input;
|
||||||
background-color: $color__background-input;
|
background-color: $color__background-input;
|
||||||
border: none;
|
border: $border__line;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0.3rem;
|
padding: 0.3rem;
|
||||||
|
&:focus,&:focus-within,&:focus-visible {
|
||||||
&:focus {
|
|
||||||
color: $color__text-input-focus;
|
color: $color__text-input-focus;
|
||||||
|
box-shadow: none;
|
||||||
|
outline: unset;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
40
style.css
40
style.css
|
@ -1246,30 +1246,64 @@ input[type="datetime-local"],
|
||||||
input[type="color"],
|
input[type="color"],
|
||||||
textarea {
|
textarea {
|
||||||
color: #111;
|
color: #111;
|
||||||
background-color: #eee;
|
background-color: transparent;
|
||||||
border: none;
|
border: 0.05rem solid #000;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0.3rem;
|
padding: 0.3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="text"]:focus,
|
input[type="text"]:focus,
|
||||||
|
input[type="text"]:focus-within,
|
||||||
|
input[type="text"]:focus-visible,
|
||||||
input[type="email"]:focus,
|
input[type="email"]:focus,
|
||||||
|
input[type="email"]:focus-within,
|
||||||
|
input[type="email"]:focus-visible,
|
||||||
input[type="url"]:focus,
|
input[type="url"]:focus,
|
||||||
|
input[type="url"]:focus-within,
|
||||||
|
input[type="url"]:focus-visible,
|
||||||
input[type="password"]:focus,
|
input[type="password"]:focus,
|
||||||
|
input[type="password"]:focus-within,
|
||||||
|
input[type="password"]:focus-visible,
|
||||||
input[type="search"]:focus,
|
input[type="search"]:focus,
|
||||||
|
input[type="search"]:focus-within,
|
||||||
|
input[type="search"]:focus-visible,
|
||||||
input[type="number"]:focus,
|
input[type="number"]:focus,
|
||||||
|
input[type="number"]:focus-within,
|
||||||
|
input[type="number"]:focus-visible,
|
||||||
input[type="tel"]:focus,
|
input[type="tel"]:focus,
|
||||||
|
input[type="tel"]:focus-within,
|
||||||
|
input[type="tel"]:focus-visible,
|
||||||
input[type="range"]:focus,
|
input[type="range"]:focus,
|
||||||
|
input[type="range"]:focus-within,
|
||||||
|
input[type="range"]:focus-visible,
|
||||||
input[type="date"]:focus,
|
input[type="date"]:focus,
|
||||||
|
input[type="date"]:focus-within,
|
||||||
|
input[type="date"]:focus-visible,
|
||||||
input[type="month"]:focus,
|
input[type="month"]:focus,
|
||||||
|
input[type="month"]:focus-within,
|
||||||
|
input[type="month"]:focus-visible,
|
||||||
input[type="week"]:focus,
|
input[type="week"]:focus,
|
||||||
|
input[type="week"]:focus-within,
|
||||||
|
input[type="week"]:focus-visible,
|
||||||
input[type="time"]:focus,
|
input[type="time"]:focus,
|
||||||
|
input[type="time"]:focus-within,
|
||||||
|
input[type="time"]:focus-visible,
|
||||||
input[type="datetime"]:focus,
|
input[type="datetime"]:focus,
|
||||||
|
input[type="datetime"]:focus-within,
|
||||||
|
input[type="datetime"]:focus-visible,
|
||||||
input[type="datetime-local"]:focus,
|
input[type="datetime-local"]:focus,
|
||||||
|
input[type="datetime-local"]:focus-within,
|
||||||
|
input[type="datetime-local"]:focus-visible,
|
||||||
input[type="color"]:focus,
|
input[type="color"]:focus,
|
||||||
textarea:focus {
|
input[type="color"]:focus-within,
|
||||||
|
input[type="color"]:focus-visible,
|
||||||
|
textarea:focus,
|
||||||
|
textarea:focus-within,
|
||||||
|
textarea:focus-visible {
|
||||||
color: #000;
|
color: #000;
|
||||||
|
box-shadow: none;
|
||||||
|
outline: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
select {
|
select {
|
||||||
|
|
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue