Revert "experiment search box"
This reverts commit 0e9507228c
.
experiment search box
This commit is contained in:
parent
5267b4e64b
commit
ae1931e477
7 changed files with 41 additions and 200 deletions
|
@ -15,9 +15,5 @@
|
|||
@import 'hyde-hyde/taxonomies';
|
||||
@import 'hyde-hyde/project';
|
||||
@import 'hyde-hyde/responsive';
|
||||
@import 'hyde-hyde/search';
|
||||
@import 'hyde-hyde/misc';
|
||||
@import 'hyde-hyde/theme';
|
||||
|
||||
// font-awesome
|
||||
@import 'font-awesome/assets/stylesheets/font-awesome';
|
||||
|
|
|
@ -8,15 +8,16 @@
|
|||
}
|
||||
.sidebar {
|
||||
li {
|
||||
padding: 0.1rem 0;
|
||||
padding: .1rem 0;
|
||||
}
|
||||
}
|
||||
.hidden-tablet {
|
||||
display: none;
|
||||
}
|
||||
.sidebar-about,
|
||||
.copyright {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.sidebar {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
@ -25,54 +26,39 @@
|
|||
padding: 0 0 0 0px;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
margin-top: 0;
|
||||
}
|
||||
margin-top: 0; }
|
||||
.collapsible-menu {
|
||||
padding: 0px 0px;
|
||||
padding: 0px 0px;
|
||||
}
|
||||
.collapsible-menu ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.collapsible-menu li {
|
||||
display: block;
|
||||
}
|
||||
.collapsible-menu a {
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
cursor: pointer; }
|
||||
.collapsible-menu label {
|
||||
//background: url(/img/menu-open.svg) no-repeat left center;
|
||||
background-repeat: no-repeat;
|
||||
background: url(/img/menu-open.svg) no-repeat left center;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
padding: 10px 0 10px 0px;
|
||||
&:before {
|
||||
content: "\f054";
|
||||
font-family: 'Font Awesome 5 Free';
|
||||
left: 1.667em;
|
||||
position: absolute;
|
||||
top: .667em;
|
||||
}
|
||||
}
|
||||
color: #fff;
|
||||
padding: 10px 0 10px 0px; }
|
||||
|
||||
input#menuToggle {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
input#menuToggle + label {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
input#menuToggle:checked + label {
|
||||
//background-image: url(/img/menu-close.svg);
|
||||
&:before {
|
||||
content: "\f078";
|
||||
font-family: 'Font Awesome 5 Free';
|
||||
left: 20px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
}
|
||||
background-image: url(/img/menu-close.svg);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
input#menuToggle:checked ~ .menu-content {
|
||||
max-height: 100% !important;
|
||||
}
|
||||
|
@ -139,7 +125,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Large devices (laptops/desktops, 992px and up)
|
||||
// Large devices (laptops/desktops, 992px and up)
|
||||
// ~ 62rem/16px ~ 58.3529rem/17px ~ 55.1111rem/18px
|
||||
@media (min-width: 992px) {
|
||||
html,
|
||||
|
|
|
@ -1,130 +0,0 @@
|
|||
// search box styles
|
||||
// generated and adapted from https://shipow.github.io/searchbox
|
||||
.searchbox {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
text-align: center;
|
||||
form {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 12rem;
|
||||
height: 1.65rem;
|
||||
white-space: nowrap;
|
||||
font-size: $searchbox-font-size;
|
||||
}
|
||||
}
|
||||
|
||||
.searchbox__wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.searchbox__input {
|
||||
display: inline-block;
|
||||
transition: box-shadow 0.4s ease, background 0.4s ease;
|
||||
border: 0;
|
||||
border-radius: 17px;
|
||||
box-shadow: inset 0 0 0 1px #e1e8ed;
|
||||
background: #f5f8fa;
|
||||
padding: 0;
|
||||
padding-right: 52px;
|
||||
padding-left: 16px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
white-space: normal;
|
||||
font-size: inherit;
|
||||
appearance: none;
|
||||
&:hover {
|
||||
box-shadow: inset 0 0 0 1px #c1d0da;
|
||||
}
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
&:active {
|
||||
outline: 0;
|
||||
}
|
||||
&:valid ~ .searchbox__reset {
|
||||
display: block;
|
||||
animation-name: sbx-reset-in;
|
||||
animation-duration: 0.15s;
|
||||
}
|
||||
}
|
||||
.searchbox__input::-webkit-search-decoration {
|
||||
display: none;
|
||||
}
|
||||
.searchbox__input::-webkit-search-cancel-button {
|
||||
display: none;
|
||||
}
|
||||
.searchbox__input::-webkit-search-results-button {
|
||||
display: none;
|
||||
}
|
||||
.searchbox__input::-webkit-search-results-decoration {
|
||||
display: none;
|
||||
}
|
||||
.searchbox__input::placeholder {
|
||||
color: #9aaeb5;
|
||||
}
|
||||
|
||||
.searchbox__submit {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: inherit;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
border-radius: 0 16px 16px 0;
|
||||
background-color: rgba(62, 130, 247, 0);
|
||||
padding: 0;
|
||||
width: 33px;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
font-size: inherit;
|
||||
user-select: none;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
&:active {
|
||||
cursor: pointer;
|
||||
}
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
svg {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
vertical-align: middle;
|
||||
fill: #657580;
|
||||
}
|
||||
}
|
||||
.searchbox__submit::before {
|
||||
display: inline-block;
|
||||
margin-right: -4px;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
content: "";
|
||||
}
|
||||
.searchbox__reset {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
right: 33px;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
user-select: none;
|
||||
fill: rgba(0, 0, 0, 0.5);
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
svg {
|
||||
display: block;
|
||||
margin: 4px;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
}
|
||||
}
|
|
@ -72,8 +72,6 @@
|
|||
}
|
||||
|
||||
.copyright {
|
||||
margin-top: 1.5em;
|
||||
text-align: center;
|
||||
font-size: $copyright-font-size;
|
||||
line-height: 1.5;
|
||||
font-size: $copyright-font-size;
|
||||
}
|
||||
|
|
|
@ -102,6 +102,3 @@ $project__subtitle-font-style: italic;
|
|||
$project__subtitle-color: #778492;
|
||||
$ribbon-color: #276582;
|
||||
$ribbon-background-color: #479fc8;
|
||||
|
||||
// search box
|
||||
$searchbox-font-size: .7rem;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue