mc-react-header 0.2.0 → 0.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.github/workflows/release_and_publish.yml +41 -0
- package/README.md +21 -78
- package/dist/Breadcrumbs.css +101 -96
- package/dist/Navbar.css +129 -129
- package/dist/index.css +14 -15
- package/package.json +57 -54
- package/src/App.js +23 -23
- package/src/MaterialsCloudHeader/Breadcrumbs.css +101 -96
- package/src/MaterialsCloudHeader/Breadcrumbs.js +19 -19
- package/src/MaterialsCloudHeader/Navbar.css +129 -129
- package/src/MaterialsCloudHeader/Navbar.js +131 -131
- package/src/MaterialsCloudHeader/index.css +14 -15
- package/src/MaterialsCloudHeader/index.js +25 -25
package/package.json
CHANGED
|
@@ -1,54 +1,57 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "mc-react-header",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"author": "Kristjan Eimre <kristjan.eimre@epfl.ch>",
|
|
5
|
-
"main": "dist/index.js",
|
|
6
|
-
"module": "dist/index.js",
|
|
7
|
-
"babel": {
|
|
8
|
-
"presets": [
|
|
9
|
-
"@babel/preset-react",
|
|
10
|
-
"@babel/preset-env"
|
|
11
|
-
]
|
|
12
|
-
},
|
|
13
|
-
"dependencies": {
|
|
14
|
-
"@testing-library/jest-dom": "^5.16.5",
|
|
15
|
-
"@testing-library/react": "^13.4.0",
|
|
16
|
-
"@testing-library/user-event": "^13.5.0",
|
|
17
|
-
"font-awesome": "^4.7.0",
|
|
18
|
-
"react": "^18.2.0",
|
|
19
|
-
"react-dom": "^18.2.0",
|
|
20
|
-
"react-scripts": "5.0.1",
|
|
21
|
-
"web-vitals": "^2.1.4"
|
|
22
|
-
},
|
|
23
|
-
"scripts": {
|
|
24
|
-
"start": "react-scripts start",
|
|
25
|
-
"
|
|
26
|
-
"
|
|
27
|
-
"
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
"react-app
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
"
|
|
39
|
-
"not
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
"last 1
|
|
44
|
-
"last 1
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
"@babel/
|
|
50
|
-
"@babel/
|
|
51
|
-
"@babel/preset-
|
|
52
|
-
"babel-
|
|
53
|
-
|
|
54
|
-
|
|
1
|
+
{
|
|
2
|
+
"name": "mc-react-header",
|
|
3
|
+
"version": "0.3.1",
|
|
4
|
+
"author": "Kristjan Eimre <kristjan.eimre@epfl.ch>",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"module": "dist/index.js",
|
|
7
|
+
"babel": {
|
|
8
|
+
"presets": [
|
|
9
|
+
"@babel/preset-react",
|
|
10
|
+
"@babel/preset-env"
|
|
11
|
+
]
|
|
12
|
+
},
|
|
13
|
+
"dependencies": {
|
|
14
|
+
"@testing-library/jest-dom": "^5.16.5",
|
|
15
|
+
"@testing-library/react": "^13.4.0",
|
|
16
|
+
"@testing-library/user-event": "^13.5.0",
|
|
17
|
+
"font-awesome": "^4.7.0",
|
|
18
|
+
"react": "^18.2.0",
|
|
19
|
+
"react-dom": "^18.2.0",
|
|
20
|
+
"react-scripts": "5.0.1",
|
|
21
|
+
"web-vitals": "^2.1.4"
|
|
22
|
+
},
|
|
23
|
+
"scripts": {
|
|
24
|
+
"start": "react-scripts start",
|
|
25
|
+
"prebuild": "rimraf dist",
|
|
26
|
+
"build": "cross-env NODE_ENV=production npx babel src/MaterialsCloudHeader --out-dir dist --copy-files",
|
|
27
|
+
"test": "react-scripts test",
|
|
28
|
+
"eject": "react-scripts eject"
|
|
29
|
+
},
|
|
30
|
+
"eslintConfig": {
|
|
31
|
+
"extends": [
|
|
32
|
+
"react-app",
|
|
33
|
+
"react-app/jest"
|
|
34
|
+
]
|
|
35
|
+
},
|
|
36
|
+
"browserslist": {
|
|
37
|
+
"production": [
|
|
38
|
+
">0.2%",
|
|
39
|
+
"not dead",
|
|
40
|
+
"not op_mini all"
|
|
41
|
+
],
|
|
42
|
+
"development": [
|
|
43
|
+
"last 1 chrome version",
|
|
44
|
+
"last 1 firefox version",
|
|
45
|
+
"last 1 safari version"
|
|
46
|
+
]
|
|
47
|
+
},
|
|
48
|
+
"devDependencies": {
|
|
49
|
+
"@babel/cli": "^7.19.3",
|
|
50
|
+
"@babel/core": "^7.20.2",
|
|
51
|
+
"@babel/preset-env": "^7.20.2",
|
|
52
|
+
"@babel/preset-react": "^7.18.6",
|
|
53
|
+
"babel-loader": "^9.1.0",
|
|
54
|
+
"cross-env": "^7.0.3",
|
|
55
|
+
"rimraf": "^4.3.1"
|
|
56
|
+
}
|
|
57
|
+
}
|
package/src/App.js
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
import "./App.css";
|
|
2
|
-
|
|
3
|
-
import MaterialsCloudHeader from "./MaterialsCloudHeader";
|
|
4
|
-
|
|
5
|
-
function App() {
|
|
6
|
-
return (
|
|
7
|
-
<div className="App">
|
|
8
|
-
<MaterialsCloudHeader
|
|
9
|
-
activeSection={"discover"} // see the corresponding key in MaterialsCloudHeader/Navbar.js
|
|
10
|
-
breadcrumbsPath={[
|
|
11
|
-
{ name: "Discover", link: "https://www.materialscloud.org/discover" },
|
|
12
|
-
{ name: "Materials Cloud three-dimensional crystals database", link: "https://www.materialscloud.org/discover/mc3d" },
|
|
13
|
-
{ name: "test", link: null },
|
|
14
|
-
]}
|
|
15
|
-
>
|
|
16
|
-
<h3>Test content</h3>
|
|
17
|
-
<p>Test content</p>
|
|
18
|
-
</MaterialsCloudHeader>
|
|
19
|
-
</div>
|
|
20
|
-
);
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
export default App;
|
|
1
|
+
import "./App.css";
|
|
2
|
+
|
|
3
|
+
import MaterialsCloudHeader from "./MaterialsCloudHeader";
|
|
4
|
+
|
|
5
|
+
function App() {
|
|
6
|
+
return (
|
|
7
|
+
<div className="App">
|
|
8
|
+
<MaterialsCloudHeader
|
|
9
|
+
activeSection={"discover"} // see the corresponding key in MaterialsCloudHeader/Navbar.js
|
|
10
|
+
breadcrumbsPath={[
|
|
11
|
+
{ name: "Discover", link: "https://www.materialscloud.org/discover" },
|
|
12
|
+
{ name: "Materials Cloud three-dimensional crystals database", link: "https://www.materialscloud.org/discover/mc3d" },
|
|
13
|
+
{ name: "test", link: null },
|
|
14
|
+
]}
|
|
15
|
+
>
|
|
16
|
+
<h3>Test content</h3>
|
|
17
|
+
<p>Test content</p>
|
|
18
|
+
</MaterialsCloudHeader>
|
|
19
|
+
</div>
|
|
20
|
+
);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
export default App;
|
|
@@ -1,96 +1,101 @@
|
|
|
1
|
-
/* Style the list */
|
|
2
|
-
ul.mc-breadcrumb {
|
|
3
|
-
padding: 7px 10px 7px 20px;
|
|
4
|
-
list-style: none;
|
|
5
|
-
background-color: #f5f5f5;
|
|
6
|
-
border-radius: 2px;
|
|
7
|
-
border: 1px solid #d6d6d6;
|
|
8
|
-
font-size: 16px;
|
|
9
|
-
font-weight: 300;
|
|
10
|
-
font-family: "Open Sans", sans-serif;
|
|
11
|
-
text-align: left;
|
|
12
|
-
margin: 6px;
|
|
13
|
-
margin-bottom: 20px;
|
|
14
|
-
/* margin-top: 20px; */
|
|
15
|
-
overflow: hidden;
|
|
16
|
-
display: flex;
|
|
17
|
-
flex-direction: row;
|
|
18
|
-
/* flex-wrap: wrap; */
|
|
19
|
-
/* gap: 40px; */
|
|
20
|
-
justify-content: start;
|
|
21
|
-
align-items: center;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
/* Display list items side by side */
|
|
26
|
-
ul.mc-breadcrumb li {
|
|
27
|
-
display: inline;
|
|
28
|
-
line-height: 1.0;
|
|
29
|
-
margin-right: 46px;
|
|
30
|
-
position: relative;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
/* Add a color to all links inside the list */
|
|
34
|
-
ul.mc-breadcrumb li a {
|
|
35
|
-
color: #303f9f;
|
|
36
|
-
text-decoration: none;
|
|
37
|
-
/* position: relative; */
|
|
38
|
-
/* padding: 0px 5px 0px 50px; */
|
|
39
|
-
/* padding: 10px 0 10px 65px; */
|
|
40
|
-
/* z-index: 3; */
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
/* Add a color on mouse-over, if the <a> has href defined */
|
|
45
|
-
ul.mc-breadcrumb li a[href]:hover {
|
|
46
|
-
text-decoration: underline;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
.
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
}
|
|
96
|
-
|
|
1
|
+
/* Style the list */
|
|
2
|
+
ul.mc-breadcrumb {
|
|
3
|
+
padding: 7px 10px 7px 20px;
|
|
4
|
+
list-style: none;
|
|
5
|
+
background-color: #f5f5f5;
|
|
6
|
+
border-radius: 2px;
|
|
7
|
+
border: 1px solid #d6d6d6;
|
|
8
|
+
font-size: 16px;
|
|
9
|
+
font-weight: 300;
|
|
10
|
+
font-family: "Open Sans", sans-serif;
|
|
11
|
+
text-align: left;
|
|
12
|
+
margin: 6px;
|
|
13
|
+
margin-bottom: 20px;
|
|
14
|
+
/* margin-top: 20px; */
|
|
15
|
+
overflow: hidden;
|
|
16
|
+
display: flex;
|
|
17
|
+
flex-direction: row;
|
|
18
|
+
/* flex-wrap: wrap; */
|
|
19
|
+
/* gap: 40px; */
|
|
20
|
+
justify-content: start;
|
|
21
|
+
align-items: center;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
/* Display list items side by side */
|
|
26
|
+
ul.mc-breadcrumb li {
|
|
27
|
+
display: inline;
|
|
28
|
+
line-height: 1.0;
|
|
29
|
+
margin-right: 46px;
|
|
30
|
+
position: relative;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
/* Add a color to all links inside the list */
|
|
34
|
+
ul.mc-breadcrumb li a {
|
|
35
|
+
color: #303f9f;
|
|
36
|
+
text-decoration: none;
|
|
37
|
+
/* position: relative; */
|
|
38
|
+
/* padding: 0px 5px 0px 50px; */
|
|
39
|
+
/* padding: 10px 0 10px 65px; */
|
|
40
|
+
/* z-index: 3; */
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
/* Add a color on mouse-over, if the <a> has href defined */
|
|
45
|
+
ul.mc-breadcrumb li a[href]:hover {
|
|
46
|
+
text-decoration: underline;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
/* prevent _reboot.scss from bootstrap to override this */
|
|
50
|
+
ul.mc-breadcrumb li a:not([href]):hover {
|
|
51
|
+
color: #303f9f;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.mc-breadcrumb li a::after {
|
|
55
|
+
content: " ";
|
|
56
|
+
display: block;
|
|
57
|
+
width: 0;
|
|
58
|
+
height: 0;
|
|
59
|
+
border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
|
|
60
|
+
border-bottom: 50px solid transparent;
|
|
61
|
+
border-left: 30px solid #f5f5f5;
|
|
62
|
+
position: absolute;
|
|
63
|
+
top: 50%;
|
|
64
|
+
margin-top: -50px;
|
|
65
|
+
/* left: 100%; */
|
|
66
|
+
z-index: 2;
|
|
67
|
+
right: 0;
|
|
68
|
+
z-index: 2;
|
|
69
|
+
transform: translate(30px, 0);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.mc-breadcrumb li a::before {
|
|
73
|
+
content: " ";
|
|
74
|
+
display: block;
|
|
75
|
+
width: 0;
|
|
76
|
+
height: 0;
|
|
77
|
+
border-top: 50px solid transparent;
|
|
78
|
+
border-bottom: 50px solid transparent;
|
|
79
|
+
border-left: 30px solid #d6d6d6;
|
|
80
|
+
position: absolute;
|
|
81
|
+
top: 50%;
|
|
82
|
+
margin-top: -50px;
|
|
83
|
+
margin-left: 2px;
|
|
84
|
+
/* left: 100%; */
|
|
85
|
+
right: 0;
|
|
86
|
+
z-index: 1;
|
|
87
|
+
transform: translate(32px, 0);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.mc-breadcrumb li:last-child a {
|
|
91
|
+
background: transparent !important;
|
|
92
|
+
color: #303f9f;
|
|
93
|
+
/* pointer-events: none;
|
|
94
|
+
cursor: default; */
|
|
95
|
+
}
|
|
96
|
+
.mc-breadcrumb li:last-child a::after,
|
|
97
|
+
.mc-breadcrumb li:last-child a::before {
|
|
98
|
+
border: 0;
|
|
99
|
+
display: none;
|
|
100
|
+
}
|
|
101
|
+
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
|
|
3
|
-
import "./Breadcrumbs.css";
|
|
4
|
-
|
|
5
|
-
function Breadcrumbs(props) {
|
|
6
|
-
return (
|
|
7
|
-
<ul className="mc-breadcrumb">
|
|
8
|
-
{props.breadcrumbsPath.map((el, i) => {
|
|
9
|
-
return (
|
|
10
|
-
<li key={i}>
|
|
11
|
-
<a href={el.link}>{el.name}</a>
|
|
12
|
-
</li>
|
|
13
|
-
);
|
|
14
|
-
})}
|
|
15
|
-
</ul>
|
|
16
|
-
);
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
export default Breadcrumbs;
|
|
1
|
+
import React from "react";
|
|
2
|
+
|
|
3
|
+
import "./Breadcrumbs.css";
|
|
4
|
+
|
|
5
|
+
function Breadcrumbs(props) {
|
|
6
|
+
return (
|
|
7
|
+
<ul className="mc-breadcrumb">
|
|
8
|
+
{props.breadcrumbsPath.map((el, i) => {
|
|
9
|
+
return (
|
|
10
|
+
<li key={i}>
|
|
11
|
+
<a href={el.link}>{el.name}</a>
|
|
12
|
+
</li>
|
|
13
|
+
);
|
|
14
|
+
})}
|
|
15
|
+
</ul>
|
|
16
|
+
);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
export default Breadcrumbs;
|
|
@@ -1,129 +1,129 @@
|
|
|
1
|
-
.mc-navbar {
|
|
2
|
-
background-color: rgb(255, 255, 255);
|
|
3
|
-
overflow: hidden;
|
|
4
|
-
border-bottom: 3px solid #dee6e6;
|
|
5
|
-
z-index: 10;
|
|
6
|
-
font-family: "Open Sans", sans-serif;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
.mc-navbar .mc-navbrand {
|
|
10
|
-
float: left;
|
|
11
|
-
display: block;
|
|
12
|
-
text-align: center;
|
|
13
|
-
font-size: 0px;
|
|
14
|
-
padding: 7px 15px 5px 20px;
|
|
15
|
-
/* border: 1px solid green; */
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
.mc-navbar .mc-navlink {
|
|
19
|
-
float: left;
|
|
20
|
-
display: block;
|
|
21
|
-
color: #455860;
|
|
22
|
-
font-size: 16px;
|
|
23
|
-
line-height: 32px;
|
|
24
|
-
font-weight: 700;
|
|
25
|
-
text-align: center;
|
|
26
|
-
padding: 14px 15px;
|
|
27
|
-
text-decoration: none;
|
|
28
|
-
/* border: 1px solid green; */
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
/* Change the color of links on hover */
|
|
32
|
-
.mc-navbar a:hover {
|
|
33
|
-
color: #8fa5af;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
/* Add an active class to highlight the current page */
|
|
37
|
-
.mc-navbar a.active {
|
|
38
|
-
background-color: #fbfcfc;
|
|
39
|
-
color: #cc1b30;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.more-dropdown {
|
|
43
|
-
padding: 14px 0px;
|
|
44
|
-
float: right;
|
|
45
|
-
/* border: 1px solid rgb(128, 0, 0); */
|
|
46
|
-
/* overflow: hidden; */
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
.more-btn {
|
|
50
|
-
color: #455860;
|
|
51
|
-
font-size: 16px;
|
|
52
|
-
line-height: 32px;
|
|
53
|
-
/* display: block; */
|
|
54
|
-
text-decoration: none;
|
|
55
|
-
font-weight: 700;
|
|
56
|
-
cursor: pointer;
|
|
57
|
-
text-align: center;
|
|
58
|
-
padding: 21px 20px;
|
|
59
|
-
/* border: 1px solid green; */
|
|
60
|
-
/* margin: 0; Important for vertical align on mobile phones */
|
|
61
|
-
user-select: none;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
.dropdown-content {
|
|
65
|
-
display: none;
|
|
66
|
-
position: absolute;
|
|
67
|
-
right: 0;
|
|
68
|
-
background-color: #ffffff;
|
|
69
|
-
min-width: 220px;
|
|
70
|
-
border-radius: 6px;
|
|
71
|
-
border: 2px solid #dee6e6;
|
|
72
|
-
z-index: 100;
|
|
73
|
-
padding: 5px 0px;
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
.dropdown-content a {
|
|
77
|
-
float: none;
|
|
78
|
-
color: #455860;
|
|
79
|
-
font-weight: 300;
|
|
80
|
-
padding: 10px 14px;
|
|
81
|
-
text-decoration: none;
|
|
82
|
-
display: block;
|
|
83
|
-
text-align: left;
|
|
84
|
-
font-size: 16px;
|
|
85
|
-
line-height: 10px;
|
|
86
|
-
z-index: 100;
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
.dropdown-content a:hover {
|
|
90
|
-
background-color: #fbfcfc;
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
.dropdown-open {
|
|
94
|
-
display: block;
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
/* Show the dropdown menu on hover */
|
|
98
|
-
/* .more-dropdown:hover .dropdown-content {
|
|
99
|
-
display: block;
|
|
100
|
-
} */
|
|
101
|
-
|
|
102
|
-
@media screen and (max-width: 680px) {
|
|
103
|
-
/* .mc-navbar a.menu {
|
|
104
|
-
float: right;
|
|
105
|
-
display: block;
|
|
106
|
-
border: 2px solid #455860;
|
|
107
|
-
} */
|
|
108
|
-
/* .mc-navbar {
|
|
109
|
-
position: relative;
|
|
110
|
-
} */
|
|
111
|
-
.mc-navbar .mc-navlink {
|
|
112
|
-
position: relative;
|
|
113
|
-
float: none;
|
|
114
|
-
display: block;
|
|
115
|
-
text-align: left;
|
|
116
|
-
padding: 2px 20px 2px;
|
|
117
|
-
z-index: 10;
|
|
118
|
-
}
|
|
119
|
-
.mc-navbar .mc-navbrand {
|
|
120
|
-
float: none;
|
|
121
|
-
display: block;
|
|
122
|
-
text-align: left;
|
|
123
|
-
}
|
|
124
|
-
.mc-navbar .more-dropdown {
|
|
125
|
-
position: absolute;
|
|
126
|
-
top: 0;
|
|
127
|
-
right: 0;
|
|
128
|
-
}
|
|
129
|
-
}
|
|
1
|
+
.mc-navbar {
|
|
2
|
+
background-color: rgb(255, 255, 255);
|
|
3
|
+
overflow: hidden;
|
|
4
|
+
border-bottom: 3px solid #dee6e6;
|
|
5
|
+
z-index: 10;
|
|
6
|
+
font-family: "Open Sans", sans-serif;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.mc-navbar .mc-navbrand {
|
|
10
|
+
float: left;
|
|
11
|
+
display: block;
|
|
12
|
+
text-align: center;
|
|
13
|
+
font-size: 0px;
|
|
14
|
+
padding: 7px 15px 5px 20px;
|
|
15
|
+
/* border: 1px solid green; */
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.mc-navbar .mc-navlink {
|
|
19
|
+
float: left;
|
|
20
|
+
display: block;
|
|
21
|
+
color: #455860;
|
|
22
|
+
font-size: 16px;
|
|
23
|
+
line-height: 32px;
|
|
24
|
+
font-weight: 700;
|
|
25
|
+
text-align: center;
|
|
26
|
+
padding: 14px 15px;
|
|
27
|
+
text-decoration: none;
|
|
28
|
+
/* border: 1px solid green; */
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
/* Change the color of links on hover */
|
|
32
|
+
.mc-navbar a:hover {
|
|
33
|
+
color: #8fa5af;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
/* Add an active class to highlight the current page */
|
|
37
|
+
.mc-navbar a.active {
|
|
38
|
+
background-color: #fbfcfc;
|
|
39
|
+
color: #cc1b30;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.more-dropdown {
|
|
43
|
+
padding: 14px 0px;
|
|
44
|
+
float: right;
|
|
45
|
+
/* border: 1px solid rgb(128, 0, 0); */
|
|
46
|
+
/* overflow: hidden; */
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.more-btn {
|
|
50
|
+
color: #455860;
|
|
51
|
+
font-size: 16px;
|
|
52
|
+
line-height: 32px;
|
|
53
|
+
/* display: block; */
|
|
54
|
+
text-decoration: none;
|
|
55
|
+
font-weight: 700;
|
|
56
|
+
cursor: pointer;
|
|
57
|
+
text-align: center;
|
|
58
|
+
padding: 21px 20px;
|
|
59
|
+
/* border: 1px solid green; */
|
|
60
|
+
/* margin: 0; Important for vertical align on mobile phones */
|
|
61
|
+
user-select: none;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.dropdown-content {
|
|
65
|
+
display: none;
|
|
66
|
+
position: absolute;
|
|
67
|
+
right: 0;
|
|
68
|
+
background-color: #ffffff;
|
|
69
|
+
min-width: 220px;
|
|
70
|
+
border-radius: 6px;
|
|
71
|
+
border: 2px solid #dee6e6;
|
|
72
|
+
z-index: 100;
|
|
73
|
+
padding: 5px 0px;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.dropdown-content a {
|
|
77
|
+
float: none;
|
|
78
|
+
color: #455860;
|
|
79
|
+
font-weight: 300;
|
|
80
|
+
padding: 10px 14px;
|
|
81
|
+
text-decoration: none;
|
|
82
|
+
display: block;
|
|
83
|
+
text-align: left;
|
|
84
|
+
font-size: 16px;
|
|
85
|
+
line-height: 10px;
|
|
86
|
+
z-index: 100;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.dropdown-content a:hover {
|
|
90
|
+
background-color: #fbfcfc;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.dropdown-open {
|
|
94
|
+
display: block;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
/* Show the dropdown menu on hover */
|
|
98
|
+
/* .more-dropdown:hover .dropdown-content {
|
|
99
|
+
display: block;
|
|
100
|
+
} */
|
|
101
|
+
|
|
102
|
+
@media screen and (max-width: 680px) {
|
|
103
|
+
/* .mc-navbar a.menu {
|
|
104
|
+
float: right;
|
|
105
|
+
display: block;
|
|
106
|
+
border: 2px solid #455860;
|
|
107
|
+
} */
|
|
108
|
+
/* .mc-navbar {
|
|
109
|
+
position: relative;
|
|
110
|
+
} */
|
|
111
|
+
.mc-navbar .mc-navlink {
|
|
112
|
+
position: relative;
|
|
113
|
+
float: none;
|
|
114
|
+
display: block;
|
|
115
|
+
text-align: left;
|
|
116
|
+
padding: 2px 20px 2px;
|
|
117
|
+
z-index: 10;
|
|
118
|
+
}
|
|
119
|
+
.mc-navbar .mc-navbrand {
|
|
120
|
+
float: none;
|
|
121
|
+
display: block;
|
|
122
|
+
text-align: left;
|
|
123
|
+
}
|
|
124
|
+
.mc-navbar .more-dropdown {
|
|
125
|
+
position: absolute;
|
|
126
|
+
top: 0;
|
|
127
|
+
right: 0;
|
|
128
|
+
}
|
|
129
|
+
}
|