Skip to content

Commit

Permalink
refactor(): use css modules
Browse files Browse the repository at this point in the history
  • Loading branch information
weareoutman committed Oct 31, 2020
1 parent 0495e71 commit b7c56c6
Show file tree
Hide file tree
Showing 16 changed files with 224 additions and 154 deletions.
3 changes: 3 additions & 0 deletions jest.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,9 @@ module.exports = {
collectCoverageFrom: ["src/**/*.{ts,tsx,js,jsx}"],
// setupFilesAfterEnv: ["<rootDir>/__jest__/setup.js"],
// snapshotSerializers: ["enzyme-to-json/serializer"],
moduleNameMapper: {
"\\.module\\.css$": "identity-obj-proxy",
},
// Ref https://github.com/facebook/jest/issues/2070#issuecomment-431706685
// Todo(steve): remove next line when issue fixed.
modulePathIgnorePatterns: ["<rootDir>/.*/__mocks__"],
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@
"eslint-plugin-react": "^7.21.4",
"eslint-plugin-react-hooks": "^4.1.2",
"husky": "^4.3.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^26.5.3",
"lint-staged": "^10.4.1",
"nodejieba": "^2.4.1",
Expand Down
47 changes: 47 additions & 0 deletions src/client/theme/LoadingRing/LoadingRing.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
/* https://loading.io/css/ */
.loadingRing {
display: inline-block;
position: relative;
width: 20px;
height: 20px;
opacity: var(--search-local-loading-icon-opacity, 0.5);
}

.loadingRing div {
box-sizing: border-box;
display: block;
position: absolute;
width: 16px;
height: 16px;
margin: 2px;
border: 2px solid
var(--search-load-loading-icon-color, var(--ifm-navbar-search-input-color));
border-radius: 50%;
animation: loading-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: var(
--search-load-loading-icon-color,
var(--ifm-navbar-search-input-color)
)
transparent transparent transparent;
}

.loadingRing div:nth-child(1) {
animation-delay: -0.45s;
}

.loadingRing div:nth-child(2) {
animation-delay: -0.3s;
}

.loadingRing div:nth-child(3) {
animation-delay: -0.15s;
}

@keyframes loading-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
19 changes: 19 additions & 0 deletions src/client/theme/LoadingRing/LoadingRing.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
// istanbul ignore file
import React from "react";
import clsx from "clsx";
import styles from "./LoadingRing.module.css";

export default function LoadingRing({
className,
}: {
className?: string;
}): React.ReactElement {
return (
<div className={clsx(styles.loadingRing, className)}>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
);
}
File renamed without changes.
9 changes: 9 additions & 0 deletions src/client/theme/SearchBar/EmptyTemplate.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { iconNoResults } from "./icons";
import styles from "./SearchBar.module.css";

export function EmptyTemplate(): string {
if (process.env.NODE_ENV === "production") {
return `<span class="${styles.noResults}"><span class="${styles.noResultsIcon}">${iconNoResults}</span><span>No results.</span></span>`;
}
return `<span class="${styles.noResults}">⚠️ The search index is only available when you run docusaurus build!</span>`;
}
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.doc-search-bar .aa-dropdown-menu {
.searchBar .dropdownMenu {
left: auto !important;
right: 0 !important;

Expand All @@ -17,16 +17,16 @@
}

@media (max-width: 576px) {
.navbar__search-input:not(:focus) {
:global(.navbar__search-input):not(:focus) {
width: 2rem;
}

.doc-search-bar .aa-dropdown-menu {
.searchBar .dropdownMenu {
width: var(--search-local-modal-width-sm, 340px);
}
}

html[data-theme="dark"] .doc-search-bar .aa-dropdown-menu {
html[data-theme="dark"] .searchBar .dropdownMenu {
background: var(--search-local-modal-background, var(--ifm-background-color));
box-shadow: var(
--search-local-modal-shadow,
Expand All @@ -35,7 +35,7 @@ html[data-theme="dark"] .doc-search-bar .aa-dropdown-menu {
);
}

.doc-search-bar .aa-dropdown-menu .aa-suggestion {
.searchBar .dropdownMenu .suggestion {
cursor: pointer;
background: var(--search-local-hit-background, #fff);
border-radius: 4px;
Expand All @@ -50,57 +50,58 @@ html[data-theme="dark"] .doc-search-bar .aa-dropdown-menu {
height: var(--search-local-hit-height, 56px);
}

html[data-theme="dark"] .aa-dropdown-menu .aa-suggestion {
html[data-theme="dark"] .dropdownMenu .suggestion {
background: var(--search-local-hit-background, var(--ifm-color-emphasis-100));
box-shadow: var(--search-local-hit-shadow, none);
color: var(--search-local-hit-color, var(--ifm-font-color-base));
}

.doc-search-bar .aa-dropdown-menu .aa-suggestion:not(:last-child) {
.searchBar .dropdownMenu .suggestion:not(:last-child) {
margin-bottom: 4px;
}

.doc-search-bar .aa-dropdown-menu .aa-suggestion.aa-cursor {
.searchBar .dropdownMenu .suggestion.cursor {
background-color: var(
--search-local-highlight-color,
var(--ifm-color-primary)
);
}

.doc-search-bar .aa-dropdown-menu .aa-suggestion-empty::after {
content: "No results";
}

.doc-search-hit-tree,
.doc-search-hit-icon,
.doc-search-hit-path,
.doc-search-empty-icon,
.doc-search-hit-footer a {
.hitTree,
.hitIcon,
.hitPath,
.noResultsIcon,
.hitFooter a {
color: var(--search-local-muted-color, #969faf);
}

html[data-theme="dark"] .doc-search-hit-tree,
html[data-theme="dark"] .doc-search-hit-icon,
html[data-theme="dark"] .doc-search-hit-path,
html[data-theme="dark"] .doc-search-empty-icon {
html[data-theme="dark"] .hitTree,
html[data-theme="dark"] .hitIcon,
html[data-theme="dark"] .hitPath,
html[data-theme="dark"] .noResultsIcon {
color: var(--search-local-muted-color, var(--ifm-color-secondary-darkest));
}

.doc-search-hit-tree {
.hitTree {
display: flex;
align-items: center;
}

.hitTree > svg {
height: var(--search-local-hit-height, 56px);
opacity: 0.5;
stroke-width: var(--search-local-icon-stroke-width, 1.4);
width: 24px;
}

.doc-search-hit-icon {
.hitIcon {
stroke-width: var(--search-local-icon-stroke-width, 1.4);

height: 20px;
width: 20px;
}

.doc-search-hit-wrapper {
.hitWrapper {
flex: 1 1 auto;
display: flex;
flex-direction: column;
Expand All @@ -111,135 +112,104 @@ html[data-theme="dark"] .doc-search-empty-icon {
width: 80%;
}

.doc-search-hit-wrapper mark {
.hitWrapper mark {
background: none;
color: var(--search-local-highlight-color, var(--ifm-color-primary));
}

.doc-search-hit-title {
.hitTitle {
font-size: 0.9em;
}

.doc-search-hit-path {
.hitPath {
font-size: 0.75em;
}

.doc-search-hit-path,
.doc-search-hit-title {
.hitPath,
.hitTitle {
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
}

.doc-search-hit-action {
.hitAction {
height: 20px;
width: 20px;
}

.doc-search-hit-action-icon {
.hideAction > svg {
display: none;
}

.doc-search-empty {
.noResults {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--search-local-spacing, 12px) 0;
}

.doc-search-empty-icon {
.noResultsIcon {
margin-bottom: var(--search-local-spacing, 12px);
}

.doc-search-hit-footer {
.hitFooter {
text-align: center;
margin-top: var(--search-local-spacing, 12px);
font-size: 0.85em;
}

.doc-search-hit-footer a {
.hitFooter a {
text-decoration: underline;
}

.aa-cursor .doc-search-hit-action-icon {
.cursor .hideAction > svg {
display: block;
}

.aa-suggestion.aa-cursor,
.aa-suggestion.aa-cursor mark,
.aa-suggestion.aa-cursor .doc-search-hit-icon,
.aa-suggestion.aa-cursor .doc-search-hit-path {
.suggestion.cursor,
.suggestion.cursor mark,
.suggestion.cursor .hitTree,
.suggestion.cursor .hitIcon,
.suggestion.cursor .hitPath {
color: var(
--search-local-hit-active-color,
var(--ifm-color-white)
) !important;
}

.aa-suggestion.aa-cursor mark {
.suggestion.cursor mark {
text-decoration: underline;
}

/* Start: pure CSS loaders */
/* https://loading.io/css/ */
.lds-ring {
.searchBarContainer .searchBarLoadingRing {
display: none;
position: absolute;
left: calc(var(--ifm-navbar-padding-horizontal) + 10px);
top: 6px;
width: 20px;
height: 20px;
opacity: var(--search-local-loading-icon-opacity, 0.5);
}

.lds-ring div {
box-sizing: border-box;
display: block;
position: absolute;
width: 16px;
height: 16px;
margin: 2px;
border: 2px solid
var(--search-load-loading-icon-color, var(--ifm-navbar-search-input-color));
border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: var(
--search-load-loading-icon-color,
var(--ifm-navbar-search-input-color)
)
transparent transparent transparent;
:global(.navbar__search) {
position: relative;
}

.lds-ring div:nth-child(1) {
animation-delay: -0.45s;
.searchIndexLoading :global(.navbar__search-input) {
background-image: none;
}

.lds-ring div:nth-child(2) {
animation-delay: -0.3s;
.searchIndexLoading .searchBarLoadingRing {
display: inline-block;
}

.lds-ring div:nth-child(3) {
animation-delay: -0.15s;
/**/
.input {
}

@keyframes lds-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
.hint {
}
/* End: pure CSS loaders */

.navbar__search {
position: relative;
.suggestions {
}

.search-index-loading .navbar__search-input {
background-image: none;
.dataset {
}

.search-index-loading .lds-ring {
display: inline-block;
.empty {
}
/**/

0 comments on commit b7c56c6

Please sign in to comment.