86 lines
1.7 KiB
SCSS
86 lines
1.7 KiB
SCSS
@mixin visibleRegexButton {
|
|
opacity: 1;
|
|
padding: 1px 3px;
|
|
min-width: 24px;
|
|
}
|
|
|
|
.c-search {
|
|
@include wrappedInput();
|
|
padding-top: 2px;
|
|
padding-bottom: 2px;
|
|
|
|
&:before {
|
|
// Mag glass icon
|
|
content: $glyph-icon-magnify;
|
|
}
|
|
|
|
&__use-regex {
|
|
// Button
|
|
$c: $colorBodyFg;
|
|
background: rgba($c, 0.2);
|
|
border: 1px solid rgba($c, 0.3);
|
|
color: $c;
|
|
border-radius: $controlCr;
|
|
font-weight: bold;
|
|
letter-spacing: 1px;
|
|
font-size: 0.8em;
|
|
margin-left: $interiorMarginSm;
|
|
min-width: 0;
|
|
opacity: 0;
|
|
order: 2;
|
|
overflow: hidden;
|
|
padding: 1px 0;
|
|
transform-origin: left;
|
|
@include transition($prop: min-width, $dur: $transOutTime);
|
|
width: 0;
|
|
|
|
&.is-active {
|
|
$c: $colorBtnActiveBg;
|
|
@include visibleRegexButton();
|
|
background: rgba($c, 0.3);
|
|
border-color: $c;
|
|
color: $c;
|
|
}
|
|
}
|
|
|
|
&__clear-input {
|
|
display: none;
|
|
order: 99;
|
|
padding: 1px 0;
|
|
}
|
|
|
|
&.is-active {
|
|
.c-search__use-regex {
|
|
margin-left: 0;
|
|
}
|
|
|
|
&:before {
|
|
width: 0;
|
|
}
|
|
|
|
input[type='text'],
|
|
input[type='search'] {
|
|
margin-left: 0;
|
|
}
|
|
|
|
@include hover {
|
|
.c-search__clear-input {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type='text'],
|
|
input[type='search'] {
|
|
margin-left: $interiorMargin;
|
|
order: 3;
|
|
text-align: left;
|
|
}
|
|
|
|
@include hover {
|
|
.c-search__use-regex {
|
|
@include visibleRegexButton();
|
|
}
|
|
}
|
|
}
|