Rooba
/
nightTab
mirror of https://github.com/zombieFox/nightTab.git
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[design] improve layout and head area

This commit is contained in:
zombieFox 2018-12-26 10:43:38 -07:00
parent c8c3898608
commit 12b1b1ae7c
9 changed files with 85 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
css/base.css
View File

@ -35,6 +35,12 @@
--font-bold: "Open Sans Bold", sans-serif;
--font-light: "Open Sans Light", sans-serif;
--font-fjalla: "Fjalla One Regular", sans-serif;
/* breakpoint reference */
/* can not be used in @media as of yet */
--breakpoint-sm: 550px;
--breakpoint-md: 700px;
--breakpoint-lg: 900px;
--breakpoint-xl: 1300px;
}
@media (min-width: 700px) {

74
css/button.css
View File

@ -12,8 +12,8 @@ input[type="submit"] {
min-height: 2.5em;
line-height: 1;
border: 0;
border-top-width: 2px;
border-bottom-width: 2px;
border-top-width: 3px;
border-bottom-width: 3px;
border-style: solid;
border-color: transparent;
border-radius: var(--radius);
@ -29,10 +29,44 @@ input[type="submit"] {
align-items: center;
}
.button.active {
border-top-width: 3px;
border-bottom-width: 3px;
button:hover,
button:focus,
.button:hover,
.button:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="reset"]:hover,
input[type="reset"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
background-color: var(--gray-03);
border-bottom-color: rgb(var(--accent));
color: var(--white);
outline: 0;
}
button:active,
.button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
background-color: var(--gray-04);
color: var(--white);
transition: none;
}
button[disabled],
.button[disabled],
button[disabled]:hover,
.button[disabled]:hover,
button[disabled]:focus,
.button[disabled]:focus,
button[disabled]:active,
.button[disabled]:active {
background-color: var(--gray-02);
border-color: transparent;
color: var(--gray-04);
cursor: default;
}
button [class^="icon-"],
@ -43,6 +77,10 @@ button [class*=" icon-"],
line-height: 1;
}
.button.active {
border-bottom-color: rgb(var(--accent));
}
.button-small {
font-size: 0.8em;
}
@ -70,32 +108,6 @@ button [class*=" icon-"],
border-radius: 0 var(--radius) var(--radius) 0;
}
button:hover,
button:focus,
.button:hover,
.button:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="reset"]:hover,
input[type="reset"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
background-color: var(--gray-03);
border-bottom-color: rgb(var(--accent));
color: var(--white);
outline: 0;
}
button:active,
.button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
background-color: var(--gray-04);
color: var(--white);
transition: none;
}
button [class^="button-"],
button [class*=" button-"],
.button [class^="button-"],

12
css/clock.css
View File

@ -1,11 +1,14 @@
.clock {
margin: 0;
padding: 0;
min-width: 6em;
width: 100%;
font-family: var(--font-fjalla);
font-size: 1.5em;
color: var(--white);
text-align: center;
display: flex;
flex-direction: row;
justify-content: center;
transition: all var(--animation-speed-medium) ease-in-out;
}
@ -13,6 +16,13 @@
color: rgb(var(--accent));
}
.clock-hour,
.clock-minutes,
.clock-seconds {
min-width: 1.75em;
display: block;
}
.clock-hour {
color: var(--white);
}

2
css/form.css
View File

@ -4,7 +4,7 @@ input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"] {
background-color: var(--gray-16);
background-color: var(--gray-14);
padding: 0 0.5em;
margin: 0 0 1em 0;
color: var(--black);

26
css/head.css
View File

@ -1,32 +1,22 @@
.head {
margin: 0;
--gutter: 0.5em;
margin: 0 calc(var(--gutter) * -1);
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
}
.head-item {
margin-left: 0.5em;
margin-right: 0.5em;
margin-left: var(--gutter);
margin-right: var(--gutter);
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}
.head-item:first-child {
margin-left: 0;
}
.head-item:last-child {
margin-right: 0;
}
.head-item-shrink {
flex-shrink: 0;
}
.head-item-grow {
.head-search {
flex-grow: 1;
}

3
css/links.css
View File

@ -71,7 +71,6 @@
bottom: 0;
left: 0.25em;
z-index: -1;
transition: all var(--animation-speed-medium) ease-in-out;
}
.link-control {
@ -152,7 +151,6 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: all var(--animation-speed-medium) ease-in-out;
}
.link-item:hover .link-letter,
@ -170,7 +168,6 @@
overflow: hidden;
opacity: 1;
text-overflow: ellipsis;
transition: all var(--animation-speed-medium) ease-in-out;
}
.link-item:hover .link-name,

16
css/utilities.css
View File

@ -1,19 +1,3 @@
.margin-top-0 {
margin-top: 0 !important;
}
.margin-right-0 {
margin-right: 0 !important;
}
.margin-bottom-0 {
margin-bottom: 0 !important;
}
.margin-left-0 {
margin-left: 0 !important;
}
.is-hidden {
display: none !important;
}

25
index.html
View File

@ -6,13 +6,14 @@
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>New Tab</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/fonts.css">
<link rel="stylesheet" href="css/icons.css">
<link rel="stylesheet" href="css/utilities.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/theme.css">
<link rel="stylesheet" href="css/typography.css">
<link rel="stylesheet" href="css/grid.css">
<link rel="stylesheet" href="css/spacing.css">
<link rel="stylesheet" href="css/button.css">
<link rel="stylesheet" href="css/form.css">
<link rel="stylesheet" href="css/shade.css">
@ -29,33 +30,31 @@
<div class="grid-item-head">
<div class="head">
<div class="head-item">
<div class="head-item mb-3 mb-md-0">
<p class="clock"></p>
</div>
<div class="head-item head-item-grow">
<div class="head-item head-search mb-3 mb-md-0">
<form class="search" action="http://www.google.com/search" method="get">
<input class="search-input margin-bottom-0" type="text" placeholder="Find bookmarks or search" tabindex="1" name="q" autocomplete="off" tabindex="1">
<input class="search-input mb-0" type="text" placeholder="Find bookmarks or search" tabindex="1" name="q" autocomplete="off" tabindex="1">
<input type="submit" value="Search" class="is-hidden">
</form>
</div>
<div class="head-item search-clear is-hidden">
<button class="button margin-bottom-0" tabindex="1">
<button class="button mb-0 ml-3 search-clear" tabindex="1" disabled>
<span class="icon-close"></span>
</button>
</div>
<div class="head-item">
<button class="button margin-bottom-0 control-add" tabindex="1">
<div class="head-item mb-3 mb-md-0">
<button class="button mb-0 control-add" tabindex="1">
<span class="button-text">Add</span>
</button>
</div>
<div class="head-item">
<button class="button margin-bottom-0 control-edit" tabindex="1">
<div class="head-item mb-3 mb-md-0">
<button class="button mb-0 control-edit" tabindex="1">
<span class="button-text">Edit</span>
</button>
</div>
<div class="head-item">
<div class="head-item mb-3 mb-md-0">
<form class="theme">
<label class="button margin-bottom-0 theme-label" for="accent-picker">
<label class="button mb-0 theme-label" for="accent-picker">
<span class="button-text">Accent</span>
</label>
<input id="accent-picker" type="color" class="theme-input" value="#ffaa33" tabindex="1">

7
js/search.js
View File

@ -24,10 +24,11 @@ var search = (function() {
var searchInput = helper.e(".search-input");
var searchClear = helper.e(".search-clear");
if (searchInput.value != "") {
helper.removeClass(searchClear, "is-hidden");
console.log(1);
searchClear.removeAttribute("disabled");
} else {
helper.addClass(searchClear, "is-hidden");
}
searchClear.setAttribute("disabled", "");
};
};
var _findResults = function(string) {