search form as in omeka style

This commit is contained in:
jorge 2022-04-08 01:10:36 +02:00
parent 0583982e49
commit 04fedfcda2
7 changed files with 181 additions and 27 deletions

File diff suppressed because one or more lines are too long

View File

@ -461,7 +461,7 @@ $select-background: $white;
$select-triangle-color: $dark-gray; $select-triangle-color: $dark-gray;
$select-radius: $global-radius; $select-radius: $global-radius;
$input-color: $black; $input-color: $black;
$input-placeholder-color: $medium-gray; $input-placeholder-color: scale-color($primary-color, $lightness: 35%);//$medium-gray;
$input-font-family: inherit; $input-font-family: inherit;
$input-font-size: rem-calc(16); $input-font-size: rem-calc(16);
$input-font-weight: $global-weight-normal; $input-font-weight: $global-weight-normal;

View File

@ -1,5 +1,5 @@
// search elements // search elements
.search{ .search {
.input-group { .input-group {
position: relative; position: relative;
border-radius: 4rem; border-radius: 4rem;
@ -16,14 +16,14 @@
.input-group * { .input-group * {
margin: 0; margin: 0;
} }
.button{ .button {
border-color: $primary-color; border-color: $primary-color;
} }
.appear{ .appear {
display:none; display:none;
} }
input{ input {
&:active{ &:active {
border-color: $primary-color; border-color: $primary-color;
background-color: $input-background-focus; background-color: $input-background-focus;
} }
@ -51,9 +51,9 @@
.hollow { .hollow {
border-color: $primary-color; border-color: $primary-color;
color: $primary-color; color: $primary-color;
&::after { &:after {
} }
&::placeholder { &:placeholder {
color: scale-color($primary-color, $lightness: -20%); color: scale-color($primary-color, $lightness: -20%);
} }
&:hover { &:hover {
@ -87,7 +87,67 @@ article,.omekas-entry-content {
} }
} }
} }
// wordpress
.search-form {
display: flex;
justify-content: center;
align-content: center;
.search-field {
margin-bottom: 0;
}
label {
width: 40vw;
max-width: 30rem;
}
input[type="search"] {
padding-left: $global-padding;
padding-right: $global-padding;
border: $input-border;
background-color: $input-background-focus;
border-radius: $global-radius-archive;
}
input[type="submit"]{
@extend button;
width:0px;
min-width: unset !important;
height:0px;
background-color: $input-background-focus;
border-radius: $global-radius-archive;
}
&:active,&:focus,&:focus-within{
label {
width: calc(40vw + 10rem);
margin-right: -10rem;
}
input[type="submit"] {
width:auto;
min-width: 10rem !important;
height:auto;
background-color: scale-color($input-background-focus, $lightness: -20%);
}
input[type="search"] {
padding-right: 11rem;
border-color: $primary-color;
background-color: $input-background-focus;
&:not(:placeholder-shown) {
border:none;
background-color: $input-background-focus;
color: $primary-color;
//position: relative;
//padding-right: $global-padding * 9;
//+ .appear {
// display: block;
// background-color: scale-color($input-background-focus, $lightness: -20%);
// z-index: 2;
// &:hover {
// color: $white;
// background-color: $primary-color;
// }
//}
}
}
}
}
// contact form 7 // contact form 7
// //

View File

@ -323,6 +323,23 @@ main {
} }
} }
} }
//&.announcement.top {
&.announcement {
.slide {
width: 100%;
}
.widget_nav_menu,.widget_tag_cloud {
width: auto;
}
.widget_tag_cloud {
h6 {
display:none;
}
a{
display: inline;
}
}
}
&.top.secondary { &.top.secondary {
align-content: center; align-content: center;
justify-content: center; justify-content: center;
@ -330,10 +347,10 @@ main {
margin: 2rem 0; margin: 2rem 0;
} }
a { a {
border: 1px solid black; //border: 1px solid black;
border-radius: 2rem; //border-radius: 2rem;
padding: 1rem; //padding: 1rem;
color:blue; //color:blue;
} }
} }
} }

View File

@ -461,7 +461,7 @@ $select-background: $white;
$select-triangle-color: $dark-gray; $select-triangle-color: $dark-gray;
$select-radius: $global-radius; $select-radius: $global-radius;
$input-color: $black; $input-color: $black;
$input-placeholder-color: $medium-gray; $input-placeholder-color: scale-color($primary-color, $lightness: 35%);//$medium-gray;
$input-font-family: inherit; $input-font-family: inherit;
$input-font-size: rem-calc(16); $input-font-size: rem-calc(16);
$input-font-weight: $global-weight-normal; $input-font-weight: $global-weight-normal;

View File

@ -1,5 +1,5 @@
// search elements // search elements
.search{ .search {
.input-group { .input-group {
position: relative; position: relative;
border-radius: 4rem; border-radius: 4rem;
@ -16,14 +16,14 @@
.input-group * { .input-group * {
margin: 0; margin: 0;
} }
.button{ .button {
border-color: $primary-color; border-color: $primary-color;
} }
.appear{ .appear {
display:none; display:none;
} }
input{ input {
&:active{ &:active {
border-color: $primary-color; border-color: $primary-color;
background-color: $input-background-focus; background-color: $input-background-focus;
} }
@ -51,9 +51,9 @@
.hollow { .hollow {
border-color: $primary-color; border-color: $primary-color;
color: $primary-color; color: $primary-color;
&::after { &:after {
} }
&::placeholder { &:placeholder {
color: scale-color($primary-color, $lightness: -20%); color: scale-color($primary-color, $lightness: -20%);
} }
&:hover { &:hover {
@ -87,7 +87,67 @@ article,.omekas-entry-content {
} }
} }
} }
// wordpress
.search-form {
display: flex;
justify-content: center;
align-content: center;
.search-field {
margin-bottom: 0;
}
label {
width: 40vw;
max-width: 30rem;
}
input[type="search"] {
padding-left: $global-padding;
padding-right: $global-padding;
border: $input-border;
background-color: $input-background-focus;
border-radius: $global-radius-archive;
}
input[type="submit"]{
@extend button;
width:0px;
min-width: unset !important;
height:0px;
background-color: $input-background-focus;
border-radius: $global-radius-archive;
}
&:active,&:focus,&:focus-within{
label {
width: calc(40vw + 10rem);
margin-right: -10rem;
}
input[type="submit"] {
width:auto;
min-width: 10rem !important;
height:auto;
background-color: scale-color($input-background-focus, $lightness: -20%);
}
input[type="search"] {
padding-right: 11rem;
border-color: $primary-color;
background-color: $input-background-focus;
&:not(:placeholder-shown) {
border:none;
background-color: $input-background-focus;
color: $primary-color;
//position: relative;
//padding-right: $global-padding * 9;
//+ .appear {
// display: block;
// background-color: scale-color($input-background-focus, $lightness: -20%);
// z-index: 2;
// &:hover {
// color: $white;
// background-color: $primary-color;
// }
//}
}
}
}
}
// contact form 7 // contact form 7
// //

View File

@ -323,6 +323,23 @@ main {
} }
} }
} }
//&.announcement.top {
&.announcement {
.slide {
width: 100%;
}
.widget_nav_menu,.widget_tag_cloud {
width: auto;
}
.widget_tag_cloud {
h6 {
display:none;
}
a{
display: inline;
}
}
}
&.top.secondary { &.top.secondary {
align-content: center; align-content: center;
justify-content: center; justify-content: center;
@ -330,10 +347,10 @@ main {
margin: 2rem 0; margin: 2rem 0;
} }
a { a {
border: 1px solid black; //border: 1px solid black;
border-radius: 2rem; //border-radius: 2rem;
padding: 1rem; //padding: 1rem;
color:blue; //color:blue;
} }
} }
} }