changes in resources search, menu and tags
This commit is contained in:
parent
735709757b
commit
d36c307f52
File diff suppressed because one or more lines are too long
|
|
@ -1,74 +1,8 @@
|
||||||
// search elements
|
|
||||||
.search {
|
|
||||||
.input-group {
|
|
||||||
position: relative;
|
|
||||||
border-radius: 4rem;
|
|
||||||
overflow: hidden;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
.appear {
|
|
||||||
right: 0;
|
|
||||||
position: absolute;
|
|
||||||
height: 100%;
|
|
||||||
padding: 0.3rem 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.input-group * {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.button {
|
|
||||||
border-color: $primary-color;
|
|
||||||
}
|
|
||||||
.appear {
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
input {
|
|
||||||
&:active {
|
|
||||||
border-color: $primary-color;
|
|
||||||
background-color: $input-background-focus;
|
|
||||||
}
|
|
||||||
&:focus,&:focus-within{
|
|
||||||
border-color: $primary-color;
|
|
||||||
background-color: $input-background;
|
|
||||||
}
|
|
||||||
&:not(:placeholder-shown) {
|
|
||||||
border:none;
|
|
||||||
background-color: $input-background-focus;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.hollow {
|
|
||||||
border-color: $primary-color;
|
|
||||||
color: $primary-color;
|
|
||||||
&:after {
|
|
||||||
}
|
|
||||||
&:placeholder {
|
|
||||||
color: scale-color($primary-color, $lightness: -20%);
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
background-color: scale-color($primary-color, $lightness: 95%);
|
|
||||||
}
|
|
||||||
&:active {
|
|
||||||
background-color: scale-color($primary-color, $lightness: 85%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
//search block size in content
|
//search block size in content
|
||||||
article,.omekas-entry-content {
|
article,aside,.omekas-entry-content {
|
||||||
.search{
|
.search,.widget_search{
|
||||||
@include xy-grid();
|
@include xy-grid();
|
||||||
.input-group {
|
.input-group,.search-form {
|
||||||
@include breakpoint(small){
|
@include breakpoint(small){
|
||||||
@include xy-cell (12);
|
@include xy-cell (12);
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
|
|
@ -87,67 +21,188 @@ article,.omekas-entry-content {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// wordpress
|
// search elements
|
||||||
.search-form {
|
.search {
|
||||||
display: flex;
|
.input-group {
|
||||||
justify-content: center;
|
position: relative;
|
||||||
align-content: center;
|
border-radius: $global-padding*4;
|
||||||
.search-field {
|
overflow: hidden;
|
||||||
margin-bottom: 0;
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
.appear {
|
||||||
|
right: 0;
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
padding: $global-padding*0.3 $global-padding;
|
||||||
}
|
}
|
||||||
label {
|
|
||||||
width: 40vw;
|
|
||||||
max-width: 30rem;
|
|
||||||
}
|
}
|
||||||
input[type="search"] {
|
.input-group * {
|
||||||
padding-left: $global-padding;
|
margin: 0;
|
||||||
padding-right: $global-padding;
|
}
|
||||||
border: $input-border;
|
.button {
|
||||||
background-color: $input-background-focus;
|
border-color: $primary-color;
|
||||||
|
}
|
||||||
|
.appear {
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
input {
|
||||||
border-radius: $global-radius-archive;
|
border-radius: $global-radius-archive;
|
||||||
}
|
&:active {
|
||||||
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;
|
border-color: $primary-color;
|
||||||
background-color: $input-background-focus;
|
background-color: $input-background-focus;
|
||||||
|
}
|
||||||
|
&:focus,&:focus-within{
|
||||||
|
border-color: $input-background;
|
||||||
|
background-color: $input-background;
|
||||||
|
}
|
||||||
&:not(:placeholder-shown) {
|
&:not(:placeholder-shown) {
|
||||||
border:none;
|
border:none;
|
||||||
background-color: $input-background-focus;
|
background-color: $input-background-focus;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.hollow {
|
||||||
|
border-color: $primary-color;
|
||||||
color: $primary-color;
|
color: $primary-color;
|
||||||
//position: relative;
|
&:after {
|
||||||
//padding-right: $global-padding * 9;
|
}
|
||||||
//+ .appear {
|
&::placeholder {
|
||||||
// display: block;
|
color: scale-color($primary-color, $lightness: -20%);
|
||||||
// background-color: scale-color($input-background-focus, $lightness: -20%);
|
}
|
||||||
// z-index: 2;
|
&:hover {
|
||||||
// &:hover {
|
background-color: scale-color($primary-color, $lightness: 95%);
|
||||||
// color: $white;
|
}
|
||||||
// background-color: $primary-color;
|
&:active {
|
||||||
// }
|
background-color: scale-color($primary-color, $lightness: 85%);
|
||||||
//}
|
}
|
||||||
|
}
|
||||||
|
&-form {
|
||||||
|
@extend .search;
|
||||||
|
position: relative;
|
||||||
|
min-width: 40vw;
|
||||||
|
input:not(:placeholder-shown) {
|
||||||
|
padding: $global-padding/2 $global-padding;
|
||||||
|
}
|
||||||
|
.search-submit {
|
||||||
|
@extend button;
|
||||||
|
padding: $global-padding/2 $global-padding;
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
.search-field {
|
||||||
|
&:active,&:focus,&:not(:placeholder-shown) {
|
||||||
|
padding-right: $global-padding * 8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
label {
|
||||||
|
width:100%;
|
||||||
|
&:active,&:focus,&:focus-within {
|
||||||
|
+ .search-submit {
|
||||||
|
display: inline;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
width: auto;
|
||||||
|
min-width: unset;
|
||||||
|
background-color: scale-color($input-background-focus, $lightness: -20%);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// wordpress
|
||||||
|
.search-form {
|
||||||
|
// display: flex;
|
||||||
|
// justify-content: center;
|
||||||
|
// align-content: center;
|
||||||
|
// .search-field {
|
||||||
|
// margin-bottom: 0;
|
||||||
|
// }
|
||||||
|
// label {
|
||||||
|
// width: 40vw;
|
||||||
|
// max-width: 30rem;
|
||||||
|
// }
|
||||||
|
// input {
|
||||||
|
// border: $input-border;
|
||||||
|
// &:active,&:focus,&:focus-within {
|
||||||
|
// border: $input-border;
|
||||||
|
// }
|
||||||
|
// &.search-field {
|
||||||
|
// border-color: $primary-color;
|
||||||
|
// color: $primary-color;
|
||||||
|
// &::after {
|
||||||
|
// }
|
||||||
|
// &::placeholder {
|
||||||
|
// color: scale-color($primary-color, $lightness: -20%);
|
||||||
|
// }
|
||||||
|
// &:hover {
|
||||||
|
// background-color: scale-color($primary-color, $lightness: 95%);
|
||||||
|
// }
|
||||||
|
// &:active {
|
||||||
|
// background-color: scale-color($primary-color, $lightness: 85%);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// input[type="search"] {
|
||||||
|
// padding-left: $global-padding;
|
||||||
|
// padding-right: $global-padding;
|
||||||
|
// border: $input-border;
|
||||||
|
// border-radius: $global-radius-archive;
|
||||||
|
// background-color: $input-background;
|
||||||
|
// }
|
||||||
|
// input[type="submit"]{
|
||||||
|
// @extend button;
|
||||||
|
// // width:0px;
|
||||||
|
// min-width: unset !important;
|
||||||
|
// // height:0px;
|
||||||
|
// color: $white;
|
||||||
|
// background-color: $input-background-focus;
|
||||||
|
// border-radius: $global-radius-archive;
|
||||||
|
// }
|
||||||
|
// &:active{
|
||||||
|
// input[type="submit"] {
|
||||||
|
// background-color: scale-color($input-background-focus, $lightness: -20%);
|
||||||
|
// }
|
||||||
|
// input[type="search"] {
|
||||||
|
// background-color: $input-background-focus;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// &:focus,&:focus-within{
|
||||||
|
// input[type="submit"] {
|
||||||
|
// // width:auto;
|
||||||
|
// // min-width: 10rem !important;
|
||||||
|
// // height:auto;
|
||||||
|
// background-color: $input-background;
|
||||||
|
// }
|
||||||
|
// input[type="search"] {
|
||||||
|
// padding-right: 11rem;
|
||||||
|
// border:$input-border;
|
||||||
|
// // border-color: $primary-color;
|
||||||
|
// background-color: $input-background;
|
||||||
|
// &:not(:placeholder-shown) {
|
||||||
|
// border:none;
|
||||||
|
// background-color: $input-background-focus;
|
||||||
|
// color: $primary-color;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
.hero {
|
||||||
|
.search-form {
|
||||||
|
input[type="submit"]{
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// contact form 7
|
// contact form 7
|
||||||
//
|
//
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -362,7 +362,6 @@ main {
|
||||||
}
|
}
|
||||||
.widget_tag_cloud {
|
.widget_tag_cloud {
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: visible;
|
|
||||||
margin-left: $global-margin;
|
margin-left: $global-margin;
|
||||||
$tags-background-color: scale-color($anchor-color, $lightness: 95%);
|
$tags-background-color: scale-color($anchor-color, $lightness: 95%);
|
||||||
a {
|
a {
|
||||||
|
|
@ -386,25 +385,40 @@ main {
|
||||||
}
|
}
|
||||||
&:hover{
|
&:hover{
|
||||||
.tagcloud {
|
.tagcloud {
|
||||||
top: 0;
|
top: 1.6rem;
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: translateY(0px);
|
transform: translateY(0px);
|
||||||
|
background-color: rgba(255,255,255,0.1);
|
||||||
|
@include breakpoint(small){
|
||||||
|
width: 80vw;
|
||||||
|
right: -1rem;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
@include breakpoint(medium){
|
||||||
|
width: 90vw;
|
||||||
|
right: -15vw;
|
||||||
|
}
|
||||||
|
@include breakpoint(large){
|
||||||
|
width: 90vw;
|
||||||
|
right: -25vw;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.tagcloud {
|
.tagcloud {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
visibility:hidden;
|
visibility:hidden;
|
||||||
opacity:0;
|
opacity:0;
|
||||||
transition: transform 0.5s;
|
transition: transform 0.5s,background-color 0.5s;
|
||||||
transform: translateY(-$global-padding);
|
transform: translateY(-$global-padding);
|
||||||
padding: $global-padding*3;
|
background-color: $tags-background-color;
|
||||||
height:0;
|
padding: $global-padding;
|
||||||
width:50vw;
|
|
||||||
a {
|
a {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
background-color: $tags-background-color;
|
background-color: $tags-background-color;
|
||||||
padding:$global-padding/4 $global-padding/2;
|
padding:$global-padding/4 $global-padding/2;
|
||||||
|
font-size: $global-font-size * 0.7 !important;
|
||||||
&:before {
|
&:before {
|
||||||
content: '#';
|
content: '#';
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
|
||||||
|
|
@ -60,39 +60,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// .widget_tag_cloud {
|
|
||||||
// h6 {
|
|
||||||
// display:none;
|
|
||||||
// }
|
|
||||||
// .tagcloud {
|
|
||||||
// display: none;
|
|
||||||
// padding: $global-padding*3;
|
|
||||||
// width:50vw;
|
|
||||||
// // max-width: 20rem;
|
|
||||||
// a {
|
|
||||||
// display: inline-block;
|
|
||||||
// background-color: scale-color($anchor-color, $lightness: 90%);
|
|
||||||
// padding:$global-padding/4 $global-padding/2;
|
|
||||||
// &:before {
|
|
||||||
// content: '#';
|
|
||||||
// display: inline-block;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// &:before {
|
|
||||||
// content: '#tags';
|
|
||||||
// color: $primary-color;
|
|
||||||
// background-color: scale-color($anchor-color, $lightness: 90%);
|
|
||||||
// padding:$global-padding/4 $global-padding/2;
|
|
||||||
// }
|
|
||||||
// &:hover{
|
|
||||||
// .tagcloud {
|
|
||||||
// display: inline-block;
|
|
||||||
// position: absolute;
|
|
||||||
// top: 0;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
@include breakpoint(small){
|
@include breakpoint(small){
|
||||||
}
|
}
|
||||||
@include breakpoint(medium){
|
@include breakpoint(medium){
|
||||||
|
|
|
||||||
|
|
@ -1,74 +1,8 @@
|
||||||
// search elements
|
|
||||||
.search {
|
|
||||||
.input-group {
|
|
||||||
position: relative;
|
|
||||||
border-radius: 4rem;
|
|
||||||
overflow: hidden;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
.appear {
|
|
||||||
right: 0;
|
|
||||||
position: absolute;
|
|
||||||
height: 100%;
|
|
||||||
padding: 0.3rem 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.input-group * {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.button {
|
|
||||||
border-color: $primary-color;
|
|
||||||
}
|
|
||||||
.appear {
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
input {
|
|
||||||
&:active {
|
|
||||||
border-color: $primary-color;
|
|
||||||
background-color: $input-background-focus;
|
|
||||||
}
|
|
||||||
&:focus,&:focus-within{
|
|
||||||
border-color: $primary-color;
|
|
||||||
background-color: $input-background;
|
|
||||||
}
|
|
||||||
&:not(:placeholder-shown) {
|
|
||||||
border:none;
|
|
||||||
background-color: $input-background-focus;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.hollow {
|
|
||||||
border-color: $primary-color;
|
|
||||||
color: $primary-color;
|
|
||||||
&:after {
|
|
||||||
}
|
|
||||||
&:placeholder {
|
|
||||||
color: scale-color($primary-color, $lightness: -20%);
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
background-color: scale-color($primary-color, $lightness: 95%);
|
|
||||||
}
|
|
||||||
&:active {
|
|
||||||
background-color: scale-color($primary-color, $lightness: 85%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
//search block size in content
|
//search block size in content
|
||||||
article,.omekas-entry-content {
|
article,aside,.omekas-entry-content {
|
||||||
.search{
|
.search,.widget_search{
|
||||||
@include xy-grid();
|
@include xy-grid();
|
||||||
.input-group {
|
.input-group,.search-form {
|
||||||
@include breakpoint(small){
|
@include breakpoint(small){
|
||||||
@include xy-cell (12);
|
@include xy-cell (12);
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
|
|
@ -87,67 +21,188 @@ article,.omekas-entry-content {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// wordpress
|
// search elements
|
||||||
.search-form {
|
.search {
|
||||||
display: flex;
|
.input-group {
|
||||||
justify-content: center;
|
position: relative;
|
||||||
align-content: center;
|
border-radius: $global-padding*4;
|
||||||
.search-field {
|
overflow: hidden;
|
||||||
margin-bottom: 0;
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
.appear {
|
||||||
|
right: 0;
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
padding: $global-padding*0.3 $global-padding;
|
||||||
}
|
}
|
||||||
label {
|
|
||||||
width: 40vw;
|
|
||||||
max-width: 30rem;
|
|
||||||
}
|
}
|
||||||
input[type="search"] {
|
.input-group * {
|
||||||
padding-left: $global-padding;
|
margin: 0;
|
||||||
padding-right: $global-padding;
|
}
|
||||||
border: $input-border;
|
.button {
|
||||||
background-color: $input-background-focus;
|
border-color: $primary-color;
|
||||||
|
}
|
||||||
|
.appear {
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
input {
|
||||||
border-radius: $global-radius-archive;
|
border-radius: $global-radius-archive;
|
||||||
}
|
&:active {
|
||||||
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;
|
border-color: $primary-color;
|
||||||
background-color: $input-background-focus;
|
background-color: $input-background-focus;
|
||||||
|
}
|
||||||
|
&:focus,&:focus-within{
|
||||||
|
border-color: $input-background;
|
||||||
|
background-color: $input-background;
|
||||||
|
}
|
||||||
&:not(:placeholder-shown) {
|
&:not(:placeholder-shown) {
|
||||||
border:none;
|
border:none;
|
||||||
background-color: $input-background-focus;
|
background-color: $input-background-focus;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.hollow {
|
||||||
|
border-color: $primary-color;
|
||||||
color: $primary-color;
|
color: $primary-color;
|
||||||
//position: relative;
|
&:after {
|
||||||
//padding-right: $global-padding * 9;
|
}
|
||||||
//+ .appear {
|
&::placeholder {
|
||||||
// display: block;
|
color: scale-color($primary-color, $lightness: -20%);
|
||||||
// background-color: scale-color($input-background-focus, $lightness: -20%);
|
}
|
||||||
// z-index: 2;
|
&:hover {
|
||||||
// &:hover {
|
background-color: scale-color($primary-color, $lightness: 95%);
|
||||||
// color: $white;
|
}
|
||||||
// background-color: $primary-color;
|
&:active {
|
||||||
// }
|
background-color: scale-color($primary-color, $lightness: 85%);
|
||||||
//}
|
}
|
||||||
|
}
|
||||||
|
&-form {
|
||||||
|
@extend .search;
|
||||||
|
position: relative;
|
||||||
|
min-width: 40vw;
|
||||||
|
input:not(:placeholder-shown) {
|
||||||
|
padding: $global-padding/2 $global-padding;
|
||||||
|
}
|
||||||
|
.search-submit {
|
||||||
|
@extend button;
|
||||||
|
padding: $global-padding/2 $global-padding;
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
.search-field {
|
||||||
|
&:active,&:focus,&:not(:placeholder-shown) {
|
||||||
|
padding-right: $global-padding * 8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
label {
|
||||||
|
width:100%;
|
||||||
|
&:active,&:focus,&:focus-within {
|
||||||
|
+ .search-submit {
|
||||||
|
display: inline;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
width: auto;
|
||||||
|
min-width: unset;
|
||||||
|
background-color: scale-color($input-background-focus, $lightness: -20%);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// wordpress
|
||||||
|
.search-form {
|
||||||
|
// display: flex;
|
||||||
|
// justify-content: center;
|
||||||
|
// align-content: center;
|
||||||
|
// .search-field {
|
||||||
|
// margin-bottom: 0;
|
||||||
|
// }
|
||||||
|
// label {
|
||||||
|
// width: 40vw;
|
||||||
|
// max-width: 30rem;
|
||||||
|
// }
|
||||||
|
// input {
|
||||||
|
// border: $input-border;
|
||||||
|
// &:active,&:focus,&:focus-within {
|
||||||
|
// border: $input-border;
|
||||||
|
// }
|
||||||
|
// &.search-field {
|
||||||
|
// border-color: $primary-color;
|
||||||
|
// color: $primary-color;
|
||||||
|
// &::after {
|
||||||
|
// }
|
||||||
|
// &::placeholder {
|
||||||
|
// color: scale-color($primary-color, $lightness: -20%);
|
||||||
|
// }
|
||||||
|
// &:hover {
|
||||||
|
// background-color: scale-color($primary-color, $lightness: 95%);
|
||||||
|
// }
|
||||||
|
// &:active {
|
||||||
|
// background-color: scale-color($primary-color, $lightness: 85%);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// input[type="search"] {
|
||||||
|
// padding-left: $global-padding;
|
||||||
|
// padding-right: $global-padding;
|
||||||
|
// border: $input-border;
|
||||||
|
// border-radius: $global-radius-archive;
|
||||||
|
// background-color: $input-background;
|
||||||
|
// }
|
||||||
|
// input[type="submit"]{
|
||||||
|
// @extend button;
|
||||||
|
// // width:0px;
|
||||||
|
// min-width: unset !important;
|
||||||
|
// // height:0px;
|
||||||
|
// color: $white;
|
||||||
|
// background-color: $input-background-focus;
|
||||||
|
// border-radius: $global-radius-archive;
|
||||||
|
// }
|
||||||
|
// &:active{
|
||||||
|
// input[type="submit"] {
|
||||||
|
// background-color: scale-color($input-background-focus, $lightness: -20%);
|
||||||
|
// }
|
||||||
|
// input[type="search"] {
|
||||||
|
// background-color: $input-background-focus;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// &:focus,&:focus-within{
|
||||||
|
// input[type="submit"] {
|
||||||
|
// // width:auto;
|
||||||
|
// // min-width: 10rem !important;
|
||||||
|
// // height:auto;
|
||||||
|
// background-color: $input-background;
|
||||||
|
// }
|
||||||
|
// input[type="search"] {
|
||||||
|
// padding-right: 11rem;
|
||||||
|
// border:$input-border;
|
||||||
|
// // border-color: $primary-color;
|
||||||
|
// background-color: $input-background;
|
||||||
|
// &:not(:placeholder-shown) {
|
||||||
|
// border:none;
|
||||||
|
// background-color: $input-background-focus;
|
||||||
|
// color: $primary-color;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
.hero {
|
||||||
|
.search-form {
|
||||||
|
input[type="submit"]{
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// contact form 7
|
// contact form 7
|
||||||
//
|
//
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -362,7 +362,6 @@ main {
|
||||||
}
|
}
|
||||||
.widget_tag_cloud {
|
.widget_tag_cloud {
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: visible;
|
|
||||||
margin-left: $global-margin;
|
margin-left: $global-margin;
|
||||||
$tags-background-color: scale-color($anchor-color, $lightness: 95%);
|
$tags-background-color: scale-color($anchor-color, $lightness: 95%);
|
||||||
a {
|
a {
|
||||||
|
|
@ -386,25 +385,40 @@ main {
|
||||||
}
|
}
|
||||||
&:hover{
|
&:hover{
|
||||||
.tagcloud {
|
.tagcloud {
|
||||||
top: 0;
|
top: 1.6rem;
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: translateY(0px);
|
transform: translateY(0px);
|
||||||
|
background-color: rgba(255,255,255,0.1);
|
||||||
|
@include breakpoint(small){
|
||||||
|
width: 80vw;
|
||||||
|
right: -1rem;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
@include breakpoint(medium){
|
||||||
|
width: 90vw;
|
||||||
|
right: -15vw;
|
||||||
|
}
|
||||||
|
@include breakpoint(large){
|
||||||
|
width: 90vw;
|
||||||
|
right: -25vw;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.tagcloud {
|
.tagcloud {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
visibility:hidden;
|
visibility:hidden;
|
||||||
opacity:0;
|
opacity:0;
|
||||||
transition: transform 0.5s;
|
transition: transform 0.5s,background-color 0.5s;
|
||||||
transform: translateY(-$global-padding);
|
transform: translateY(-$global-padding);
|
||||||
padding: $global-padding*3;
|
background-color: $tags-background-color;
|
||||||
height:0;
|
padding: $global-padding;
|
||||||
width:50vw;
|
|
||||||
a {
|
a {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
background-color: $tags-background-color;
|
background-color: $tags-background-color;
|
||||||
padding:$global-padding/4 $global-padding/2;
|
padding:$global-padding/4 $global-padding/2;
|
||||||
|
font-size: $global-font-size * 0.7 !important;
|
||||||
&:before {
|
&:before {
|
||||||
content: '#';
|
content: '#';
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
|
||||||
|
|
@ -60,39 +60,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// .widget_tag_cloud {
|
|
||||||
// h6 {
|
|
||||||
// display:none;
|
|
||||||
// }
|
|
||||||
// .tagcloud {
|
|
||||||
// display: none;
|
|
||||||
// padding: $global-padding*3;
|
|
||||||
// width:50vw;
|
|
||||||
// // max-width: 20rem;
|
|
||||||
// a {
|
|
||||||
// display: inline-block;
|
|
||||||
// background-color: scale-color($anchor-color, $lightness: 90%);
|
|
||||||
// padding:$global-padding/4 $global-padding/2;
|
|
||||||
// &:before {
|
|
||||||
// content: '#';
|
|
||||||
// display: inline-block;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// &:before {
|
|
||||||
// content: '#tags';
|
|
||||||
// color: $primary-color;
|
|
||||||
// background-color: scale-color($anchor-color, $lightness: 90%);
|
|
||||||
// padding:$global-padding/4 $global-padding/2;
|
|
||||||
// }
|
|
||||||
// &:hover{
|
|
||||||
// .tagcloud {
|
|
||||||
// display: inline-block;
|
|
||||||
// position: absolute;
|
|
||||||
// top: 0;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
@include breakpoint(small){
|
@include breakpoint(small){
|
||||||
}
|
}
|
||||||
@include breakpoint(medium){
|
@include breakpoint(medium){
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue