412 lines
8.6 KiB
SCSS
412 lines
8.6 KiB
SCSS
.search {
|
|
position: relative;
|
|
border-radius: 0.25rem;
|
|
height: 35px;
|
|
max-width: 928px;
|
|
z-index: z('search');
|
|
margin-bottom: 0.5rem;
|
|
|
|
@include box-shadow(0, 0, 0, 3px, transparent);
|
|
@include transition(all, 0.15s, ease-in);
|
|
@include flexbox();
|
|
@include align-items(center);
|
|
@include themify($themes) {
|
|
border: 2px solid themed('search-border-color');
|
|
background-color: themed("search-background-color");
|
|
&:focus-within {
|
|
border: 2px solid themed('search-border-active-color');
|
|
@include box-shadow(0, 0, 0, 3px, themed('search-border-outline-color'));
|
|
}
|
|
}
|
|
|
|
.icon {
|
|
padding: 0.25rem;
|
|
@include flexbox();
|
|
@include themify($themes) {
|
|
color: themed("search-icon-color");
|
|
}
|
|
}
|
|
|
|
.input {
|
|
width: 100%;
|
|
font-size: 0.9rem;
|
|
border: none;
|
|
outline: none;
|
|
padding-right: 1rem;
|
|
|
|
@include truncate($grid_main_side_width + $grid_main_side_unit);
|
|
@include themify($themes) {
|
|
color: themed("search-color");
|
|
background-color: inherit;
|
|
@include input-placeholder {
|
|
font-family: $title-font;
|
|
color: themed("search-placeholder-color");
|
|
}
|
|
}
|
|
}
|
|
|
|
&-content {
|
|
margin-top: 0.25rem;
|
|
max-height: 350px;
|
|
overflow: auto;
|
|
|
|
a {
|
|
text-decoration: none !important;
|
|
&:not(:last-child) {
|
|
@include themify($themes) {
|
|
font-family: $title-font;
|
|
border-bottom: 2px dashed themed("search-placeholder-color");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&__highlight {
|
|
@include themify($themes) {
|
|
color: themed('search-highlight-color');
|
|
}
|
|
}
|
|
|
|
&-result {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
@include themify($themes) {
|
|
background-color: themed('body-background-color');
|
|
}
|
|
|
|
&[data-display="block"] {
|
|
display: block;
|
|
}
|
|
|
|
&[data-display="none"] {
|
|
display: none;
|
|
}
|
|
|
|
&__header {
|
|
}
|
|
|
|
&__body {
|
|
margin-top: 1rem;
|
|
padding: 0 1rem;
|
|
position: relative;
|
|
display: block;
|
|
overflow: auto;
|
|
height: 100%;
|
|
|
|
@include themify($themes) {
|
|
@include moz-scrollbars(themed('custom-scrollbar-foreground-color'), themed('custom-scrollbar-background-color'));
|
|
@include webkit-scrollbars(themed('custom-scrollbar-foreground-color'), themed('custom-scrollbar-background-color'));
|
|
}
|
|
}
|
|
|
|
&__item {
|
|
&:not(first-child) {
|
|
padding-bottom: 2.25rem;
|
|
}
|
|
|
|
&--title {
|
|
font-family: $title-font;
|
|
font-size: 1.5rem;
|
|
margin: 0.25rem 0;
|
|
|
|
&::before {
|
|
content: "📋 ";
|
|
}
|
|
}
|
|
|
|
&--desc {
|
|
font-size: 1rem;
|
|
margin: 0.25rem 0;
|
|
}
|
|
}
|
|
|
|
&__close {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
|
|
&[data-dir="ltr"] {
|
|
right: 0.5rem;
|
|
top: -1.5rem;
|
|
}
|
|
|
|
&[data-dir="rtl"] {
|
|
left: 0.5rem;
|
|
top: -1.5rem;
|
|
}
|
|
|
|
@include themify($themes) {
|
|
color: themed('social-icon-color');
|
|
|
|
@include on-event {
|
|
color: themed('social-icon-hover-color');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.menu-item {
|
|
padding: 0.25rem;
|
|
|
|
&__title {
|
|
font-size: 1rem;
|
|
|
|
@include themify($themes) {
|
|
color: themed('body-color');
|
|
}
|
|
|
|
&::before {
|
|
content: '📄 ';
|
|
}
|
|
}
|
|
|
|
&__desc {
|
|
font-size: 0.8rem;
|
|
padding: 0.25rem 0.5rem;
|
|
|
|
@include truncate($grid_main_side_width + $grid_main_side_unit);
|
|
@include themify($themes) {
|
|
color: themed('meta-color');
|
|
}
|
|
}
|
|
}
|
|
|
|
#search-results {
|
|
&.dropdown {
|
|
display: none;
|
|
&.is-active {
|
|
display: inline-block;
|
|
margin-top: 0.25rem;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 35px;
|
|
width: 100%;
|
|
border-radius: 0.1rem;
|
|
@include box-shadow(0, 1px, 3px, 0, rgba(0, 0, 0, 0.4));
|
|
@include themify($themes) {
|
|
color: themed('search-content-color');
|
|
background-color: themed('search-content-background-color');
|
|
}
|
|
}
|
|
}
|
|
|
|
.dropdown {
|
|
&-content {
|
|
@include themify($themes) {
|
|
@include moz-scrollbars(themed('custom-scrollbar-foreground-color'), themed('custom-scrollbar-background-color'));
|
|
@include webkit-scrollbars(themed('custom-scrollbar-foreground-color'), themed('custom-scrollbar-background-color'));
|
|
}
|
|
|
|
@include flexbox();
|
|
@include flex-direction(column);
|
|
}
|
|
|
|
&-item {
|
|
font-size: 1rem;
|
|
padding: 0.125rem 0.25rem;
|
|
@include on-event {
|
|
@include themify($themes) {
|
|
background-color: themed('search-hover-background-color');
|
|
}
|
|
border-bottom-left-radius: 0.1rem;
|
|
border-bottom-right-radius: 0.1rem;
|
|
}
|
|
|
|
&.is-active {
|
|
@include themify($themes) {
|
|
background-color: themed('search-hover-background-color');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.mobile-search {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: z('modal');
|
|
width: 100%;
|
|
overflow: hidden;
|
|
|
|
@include themify($themes) {
|
|
@include webkit-scrollbars2(themed('custom-scrollbar-foreground-color'), themed('custom-scrollbar-background-color'));
|
|
}
|
|
|
|
&__top {
|
|
width: 100%;
|
|
height: $grid_navbar_height;
|
|
text-align: right;
|
|
position: relative;
|
|
direction: rtl;
|
|
|
|
@include flexbox();
|
|
@include align-items(center);
|
|
@include themify($themes) {
|
|
border-bottom: 1px solid themed('navbar-border-bottom-color');
|
|
background-color: themed('navbar-background-color');
|
|
}
|
|
|
|
&--icon {
|
|
width: 50px;
|
|
height: $grid_navbar_height;
|
|
cursor: pointer;
|
|
position: absolute;
|
|
top: 0;
|
|
|
|
@include flexbox();
|
|
@include align-items(center);
|
|
@include justify-content(center);
|
|
@include themify($themes) {
|
|
color: themed('burger-menu-color');
|
|
@include on-event {
|
|
color: themed('link-hover');
|
|
}
|
|
}
|
|
}
|
|
|
|
&--input {
|
|
position: absolute;
|
|
width: calc(100% - 50px);
|
|
height: 70%;
|
|
outline: none;
|
|
border: none;
|
|
border-radius: 0.25rem;
|
|
padding: 0 1rem;
|
|
font-size: 1.1rem;
|
|
|
|
@include themify($themes) {
|
|
color: themed('body-color');
|
|
background-color: themed('navbar-background-color');
|
|
|
|
@include input-placeholder {
|
|
font-family: $title-font;
|
|
color: themed("search-placeholder-color");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&__body {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
overflow-y: auto;
|
|
|
|
@include themify($themes) {
|
|
color: themed('body-color');
|
|
background-color: themed('body-background-color');
|
|
|
|
@include moz-scrollbars(themed('custom-scrollbar-foreground-color'), themed('custom-scrollbar-background-color'));
|
|
}
|
|
}
|
|
|
|
&[data-dir="ltr"] {
|
|
.mobile-search__top--icon {
|
|
right: 0;
|
|
}
|
|
|
|
.mobile-search__body {
|
|
direction: ltr;
|
|
}
|
|
|
|
.mobile-search__top--input {
|
|
direction: ltr;
|
|
left: 0;
|
|
}
|
|
}
|
|
|
|
&[data-dir="rtl"] {
|
|
.mobile-search__top--icon {
|
|
left: 0;
|
|
}
|
|
|
|
.mobile-search__body {
|
|
direction: rtl;
|
|
}
|
|
|
|
.mobile-search__top--input {
|
|
direction: rtl;
|
|
right: 0;
|
|
}
|
|
}
|
|
|
|
&__btn {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 35px;
|
|
width: 35px;
|
|
height: $grid_navbar_height;
|
|
padding: 0.25rem;
|
|
cursor: pointer;
|
|
display: none;
|
|
z-index: z('search-btn');
|
|
|
|
&[data-ani="true"] {
|
|
@include animation('slide-in-down .5s .25s 1 ease both');
|
|
}
|
|
|
|
@include themify($themes) {
|
|
color: themed('burger-menu-color');
|
|
background-color: themed('navbar-background-color');
|
|
border-bottom: 1px solid themed('navbar-border-bottom-color');
|
|
@include on-event {
|
|
color: themed('navbar-title-hover-color');
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 769px) {
|
|
@include flexbox();
|
|
@include align-items(center);
|
|
@include justify-content(center);
|
|
}
|
|
}
|
|
|
|
&__content {
|
|
a {
|
|
text-decoration: none !important;
|
|
}
|
|
}
|
|
|
|
&__item {
|
|
padding: 0.5rem;
|
|
list-style-type: none;
|
|
|
|
&:not(first-child) {
|
|
padding-bottom: 0.75rem;
|
|
}
|
|
|
|
&--title {
|
|
font-family: $title-font;
|
|
font-size: 1.2rem;
|
|
margin: 0.25rem 0;
|
|
@include themify($themes) {
|
|
color: themed('body-color');
|
|
}
|
|
|
|
&::before {
|
|
content: "📋 ";
|
|
}
|
|
}
|
|
|
|
&--desc {
|
|
font-size: 0.9rem;
|
|
padding: 0.25rem 0.5rem;
|
|
|
|
@include truncate(960px);
|
|
@include themify($themes) {
|
|
color: themed('search-color');
|
|
}
|
|
}
|
|
|
|
@include on-event {
|
|
@include themify($themes) {
|
|
background-color: themed('search-hover-background-color');
|
|
}
|
|
}
|
|
}
|
|
}
|