183 lines
4.4 KiB
Text
Executable file
183 lines
4.4 KiB
Text
Executable file
/**
|
|
* This file provides the design styles for the quick search.
|
|
*
|
|
* @author Jana Deutschlaender <deutschlaender@cosmocode.de>
|
|
*/
|
|
|
|
.search.main-sidebar {
|
|
@main-ico-dummy: @font-size-big + @margin-small*2; //FIXME copied from area_main-sidebar-nav
|
|
@icon-size: @page-header_height;
|
|
@icon-search_font-size: @font-size-big;
|
|
|
|
p.toggleSearch a,
|
|
button[type="submit"] {
|
|
.fontello();
|
|
.hide-text-show-before();
|
|
.icon-search();
|
|
|
|
position: relative;
|
|
width: @icon-size;
|
|
min-height: @icon-size;
|
|
overflow: visible;
|
|
background-image: none;
|
|
background-color: transparent; // fix
|
|
border: solid 1px transparent;
|
|
color: @ini_nav_menu_color;
|
|
padding: 0;
|
|
transition: @transition color, @transition background-color, @transition border-color;
|
|
|
|
&:hover,
|
|
&:focus,
|
|
&:active {
|
|
min-height: @icon-size;
|
|
background-color: @ini_button_color;
|
|
border: solid 1px @ini_button_background;
|
|
color: @ini_button_background;
|
|
|
|
&::after {
|
|
background-color: @ini_button_background;
|
|
}
|
|
}
|
|
|
|
&::before {
|
|
width: 100%;
|
|
color: inherit;
|
|
font-size: @icon-search_font-size;
|
|
text-align: center;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
p.toggleSearch {
|
|
display: none;
|
|
margin: -2px 0 0; // reverse transparent border and box-sizing of a child
|
|
padding: 0;
|
|
|
|
@media @screen_max-xxlg {
|
|
margin-top: -1px;
|
|
}
|
|
|
|
a {
|
|
min-width: (@toggle-showsidebar_width + 0.1); /* must be a bit a wider than @toggle-showsidebar_width to hide right border */
|
|
width: @main-ico-dummy;
|
|
border-radius: @fix_border-radius;
|
|
text-decoration: none;
|
|
box-sizing: border-box;
|
|
|
|
&::before {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
color: inherit;
|
|
text-align: center;
|
|
margin-top: -(@icon-search_font-size / 2);
|
|
}
|
|
|
|
&:hover,
|
|
&:focus,
|
|
&:active {
|
|
background-color: @ini_nav_menu_hover_bg;
|
|
border-color: @ini_nav_menu_hover_color;
|
|
color: @ini_nav_menu_hover_color;
|
|
}
|
|
}
|
|
}
|
|
|
|
button[type="submit"] {
|
|
position: absolute;
|
|
top: 1px;
|
|
bottom: 1px;
|
|
right: 0;
|
|
height: auto;
|
|
min-height: (@icon-size - .2);
|
|
|
|
&:hover,
|
|
&:focus,
|
|
&:active {
|
|
top: 0;
|
|
bottom: 0;
|
|
min-height: @icon-size;
|
|
background-color: @ini_button_color;
|
|
border: solid 1px @ini_button_background;
|
|
color: @ini_button_background;
|
|
}
|
|
}
|
|
|
|
|
|
/* + + + form + + + */
|
|
form {
|
|
position: relative;
|
|
display: block;
|
|
margin: 0 0 @margin-default;
|
|
|
|
.no {
|
|
display: block;
|
|
|
|
#qsearch__in {
|
|
width: 100%;
|
|
padding-left: 10px;
|
|
padding-right: @icon-size;
|
|
}
|
|
}
|
|
|
|
input {
|
|
min-height: @icon-size;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
button[type="submit"] {
|
|
border: solid 1px transparent;
|
|
border-right-color: @ini_border;
|
|
margin-left: -(@icon-size);
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 15%;
|
|
bottom: 15%;
|
|
width: 1px;
|
|
left: -1px;
|
|
background-color: @ini_border;
|
|
transition: @transition background-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
#qsearch__out {
|
|
left: auto;
|
|
top: auto;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
|
|
/* + + + + + wide page content + + + + + */
|
|
.wide-content {
|
|
.search.main-sidebar {
|
|
p.toggleSearch {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: block;
|
|
float: left;
|
|
width: 100%;
|
|
}
|
|
|
|
form {
|
|
input {
|
|
border: 0 none;
|
|
}
|
|
|
|
.no {
|
|
#qsearch__in {
|
|
width: 0;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
button[type="submit"] {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|