diff --git a/css/area_sidebar-search.less b/css/area_sidebar-search.less index b1a5b4e..d11bc69 100755 --- a/css/area_sidebar-search.less +++ b/css/area_sidebar-search.less @@ -4,14 +4,58 @@ * @author Jana Deutschlaender */ -.search.main-sidebar{ - form{ - white-space: nowrap; - .no{ - border: 1px solid ; - padding-right: 1.5rem; - #qsearch__in{ + +.search.main-sidebar { + form { + @icon-size: 40px; + + display: block; + margin: @margin-default 0; + + .no { + #qsearch__in { width: 100%; + padding-left: 10px; + padding-right: (@icon-size + 10); + } + } + + input { + min-height: @icon-size; + box-sizing: border-box; + border-color: @color-link; + border-radius: 0; + } + + button[type="submit"] { + .fontello(); + .hide-text-show-before(); + .icon-search(); + + width: @icon-size; + min-height: @icon-size; + background-image: none; + background-color: @color-link; + border: solid 1px @color-link; + border-radius: 0; + color: #fff; + margin-left: -(@icon-size); + padding: 0; + transition: @transition color, @transition background-color; + + &:hover, + &:focus, + &:active { + background-color: #fff; + color: @color-link; + } + + &::before { + width: 100%; + color: inherit; + font-size: 25px; + text-align: center; + margin: 0; } } } diff --git a/css/base.less b/css/base.less index b39a285..dae1223 100755 --- a/css/base.less +++ b/css/base.less @@ -25,15 +25,17 @@ @color-link: __existing__; -@margin-small: .5rem; -@margin-default: 1.5rem; -@margin-big: 2.5rem; - /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* global vars */ /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ +@margin-small: .5rem; +@margin-default: 1.5rem; +@margin-big: 2.5rem; + +@transition: ease-out .30s; + /* + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* fonts */ diff --git a/css/base_fonts.less b/css/base_fonts.less index 24e9e1f..1c65fea 100755 --- a/css/base_fonts.less +++ b/css/base_fonts.less @@ -158,6 +158,12 @@ } } +.icon-search() { + &::before { + content: '\e81f'; + } +} + .icon-puzzle-1{ &::before { content: '\e817';