styled forms and imput fields

This commit is contained in:
Jorge vitrubio.net 2024-04-02 19:15:43 +02:00
parent 1140149ac9
commit 2a7d702e6f
7 changed files with 82 additions and 13 deletions

View File

@ -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

View File

@ -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;

View File

@ -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;
} }
} }

View File

@ -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