extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-02-04 04:20:19 +01:00
Code Issues Packages Projects Releases Wiki Activity

[design] improve search input padding

Browse Source
This commit is contained in:
zombieFox 2019-04-04 16:52:29 +01:00
parent 9d49d51268
commit a342f44402
5 changed files with 8 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
css/form.css
View File

@ -14,13 +14,11 @@ input[type="text"] {
height: 2.5em;
width: 100%;
border-width: 0;
/* border-top-width: var(--line-width); */
/* border-bottom-width: var(--line-width); */
border-style: solid;
border-color: transparent;
border-radius: var(--radius);
cursor: text;
transition: all var(--animation-speed-fast) ease-in-out;
transition: background-color var(--animation-speed-fast) ease-in-out, color var(--animation-speed-fast) ease-in-out, border-color var(--animation-speed-fast) ease-in-out, box-shadow var(--animation-speed-fast) ease-in-out;
-moz-appearance: textfield;
}
@ -31,7 +29,6 @@ input[type="search"]:hover,
input[type="tel"]:hover,
input[type="text"]:hover {
background-color: rgb(var(--gray-03));
/* border-bottom-color: rgb(var(--gray-08)); */
color: rgb(var(--form-input-text-hover));
outline: none;
box-shadow: 0 0 0 var(--line-width) rgb(var(--gray-06));
@ -44,8 +41,6 @@ input[type="search"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus {
background-color: rgb(var(--gray-02));
/* border-bottom-color: rgb(var(--accent)); */
/* border-color: transparent; */
color: rgb(var(--form-input-text-focus));
outline: none;
z-index: 2;
@ -62,7 +57,7 @@ input[type="text"][disabled] {
padding: 0 calc(1em - var(--line-width));
color: rgb(var(--form-input-text-disabled));
border-width: var(--line-width);
border-color: rgb(var(--form-input-text-disabled));;
border-color: rgb(var(--form-input-text-disabled));
cursor: default;
box-shadow: none;
}

5
css/header.css
View File

@ -71,8 +71,8 @@
position: relative;
}
.header-search-input[type="text"] {
padding-right: 3em;
.is-header-searching .header-search-input[type="text"] {
padding-right: 3.5em;
}
.header-search-clear {
@ -93,7 +93,6 @@
justify-content: flex-end;
}
.is-layout-width-thin.is-header-search-grow .header-search,
.is-header-search-grow .header-search {
flex-grow: 1;
flex-basis: 100%;

4
css/link.css
View File

@ -31,10 +31,6 @@
grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));
}
.is-layout-width-thin.is-bookmarks-style-list .link-area {
grid-template-columns: 1fr;
}
.link-item {
width: 100%;
height: var(--link-height);

3
js/search.js
View File

@ -17,18 +17,21 @@ var search = (function() {
};
var _toggle = function(input) {
var html = helper.e("html");
if (input.value != "") {
helper.setObject({
object: state.get(),
path: "search",
newValue: true
});
helper.addClass(html, "is-header-searching");
} else {
helper.setObject({
object: state.get(),
path: "search",
newValue: false
});
helper.removeClass(html, "is-header-searching");
};
};

2
js/version.js
View File

@ -1,7 +1,7 @@
var version = (function() {
// version is normally bumped when the state needs changing or any new functionality is added
var current = "2.17.0";
var current = "2.18.0";
var compare = function(a, b) {
var pa = a.split(".");