Adjust styling of clear search button

This commit is contained in:
Samuel Georges 2019-03-29 02:34:12 +11:00
parent 6593651331
commit f6a3d10dff
2 changed files with 44 additions and 18 deletions

View File

@ -27,7 +27,7 @@
&:after {
right: -8px;
}
.toolbar-item {
position: relative;
white-space: nowrap;
@ -108,22 +108,43 @@ html.mobile {
}
.clear-input-text {
font-size:large;
color:#666666;
display: inline-block;
position: absolute;
right: 1px;
top: 0;
bottom: 0;
margin: auto;
background-color: #fff;
padding-left:7px;
height:28px;
border: 0;
}
.clear-input-text:focus {
outline:none;
padding: 0 5px;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
font-size: (@font-size-base * 1.5);
font-weight: @close-font-weight;
line-height: 1;
color: @close-color;
text-shadow: @close-text-shadow;
font-family: sans-serif;
display: inline-block;
position: absolute;
right: 3px;
top: 0;
bottom: 0;
margin: auto;
background-color: #fff;
height: 28px;
> i {
.opacity(.2);
}
&:hover,
&:focus {
color: @close-color;
text-decoration: none;
cursor: pointer;
> i {
.opacity(.5);
}
}
&:focus {
outline: none;
}
}
//

View File

@ -3089,7 +3089,12 @@ a.control-status-list >ul li .status-text.danger:hover {color:#843534}
.control-toolbar.toolbar-padded {padding:20px}
[data-control=toolbar] {white-space:nowrap;width:100%;overflow:hidden}
html.mobile [data-control=toolbar].is-native-drag {overflow:auto;-webkit-overflow-scrolling:touch}
.clear-input-text {font-size:large;color:#666;display:inline-block;position:absolute;right:1px;top:0;bottom:0;margin:auto;background-color:#fff;padding-left:7px;height:28px;border:0}
.clear-input-text {padding:0 5px;cursor:pointer;background:transparent;border:0;-webkit-appearance:none;font-size:21px;font-weight:bold;line-height:1;color:#000;text-shadow:0 1px 0 #fff;font-family:sans-serif;display:inline-block;position:absolute;right:3px;top:0;bottom:0;margin:auto;background-color:#fff;height:28px}
.clear-input-text >i {opacity:0.2;filter:alpha(opacity=20)}
.clear-input-text:hover,
.clear-input-text:focus {color:#000;text-decoration:none;cursor:pointer}
.clear-input-text:hover >i,
.clear-input-text:focus >i {opacity:0.5;filter:alpha(opacity=50)}
.clear-input-text:focus {outline:none}
.control-toolbar.editor-toolbar {padding:0;background:#f2f2f2;border-bottom-right-radius:0;border-bottom-left-radius:0;border-bottom:2px solid #d4d8da}
.control-toolbar.editor-toolbar .toolbar-item .btn,