//search block size in content article,aside,.omekas-entry-content { .search,.widget_search{ @include xy-grid(); .input-group,.search-form { @include breakpoint(small){ @include xy-cell (12); margin-left: auto; margin-right: auto; } @include breakpoint(medium){ @include xy-cell (6); margin-left: auto; margin-right: auto; } @include breakpoint(large){ @include xy-cell (4); margin-left: auto; margin-right: auto; } } } } // search elements .search { .input-group { position: relative; border-radius: $global-padding*4; overflow: hidden; padding: 0; margin: 0; .appear { right: 0; position: absolute; height: 100%; padding: $global-padding*0.3 $global-padding; } } .input-group * { margin: 0; } .button { // border-color: $primary-color; border: none; } .appear { display:none; } input { border-radius: $global-radius-archive; &:active { border-color: $primary-color; background-color: $input-background-focus; } &:focus,&:focus-within{ border-color: $input-background; 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%); } } &-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,&:hover { + .search-submit { display: inline; position: absolute; right: 0; width: auto; min-width: unset; background-color: scale-color($input-background-focus, $lightness: -20%); } } } } } // wordpress .hero { .search-form { input[type="submit"]{ color: $white; } } } // contact form 7 // [type='text'], [type='password'], [type='date'], [type='datetime'], [type='datetime-local'], [type='month'], [type='week'], [type='email'], [type='number'], [type='search'], [type='tel'], [type='time'], [type='url'], [type='color'], textarea { border: none; } .wpcf7-list-item { width: 100%; }