thallada/modmapper-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace unicode sidebar icons with svgs

Browse Source 
Unicode characters weren't rendering reliably on all platforms.
This commit is contained in:
Tyler Hallada
2022-03-14 21:28:08 -04:00
parent 6769b815e7
commit e7e392a7b7
4 changed files with 27 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
styles/Sidebar.module.css
View File

@@ -49,16 +49,14 @@
.hide {
position: fixed;
display: block;
font-size: 16px;
font-size: 0px;
border: none;
background: none;
cursor: pointer;
top: 46%;
left: 299px;
z-index: 4;
background-color: #fbefd5;
padding-top: 12px;
padding-bottom: 12px;
padding: 12px 2px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-top: 2px solid #222222;
@@ -66,27 +64,24 @@
border-right: 2px solid #222222;
}
.hide:after {
content: "🠈";
.hide span {
transform: rotate(180deg);
}
@media only screen and (max-width: 600px) {
.hide {
top: calc(55% - 22px);
top: calc(55% - 21px);
left: 47%;
padding-top: 0px;
padding-bottom: 0px;
padding: 2px 12px;
border-top-right-radius: 8px;
border-bottom-right-radius: 0px;
border-top-left-radius: 8px;
padding-left: 12px;
padding-right: 12px;
border-bottom: none;
border-left: 2px solid #222222;
}
.hide:after {
content: "🠋";
.hide span {
transform: rotate(90deg);
}
}
@@ -97,16 +92,14 @@
.open {
position: fixed;
display: block;
font-size: 16px;
font-size: 0px;
border: none;
background: none;
cursor: pointer;
top: 46%;
left: -1px;
z-index: 3;
background-color: #fbefd5;
padding-top: 12px;
padding-bottom: 12px;
padding: 12px 2px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-top: 2px solid #222222;
@@ -114,28 +107,25 @@
border-right: 2px solid #222222;
}
.open:after {
content: "🠊";
.open span {
transform: rotate(0deg);
}
@media only screen and (max-width: 600px) {
.open {
top: initial;
bottom: 0;
bottom: -1px;
left: 47%;
padding-top: 0px;
padding-bottom: 0px;
padding: 2px 12px;
border-top-right-radius: 8px;
border-bottom-right-radius: 0px;
border-top-left-radius: 8px;
padding-left: 12px;
padding-right: 12px;
border-bottom: none;
border-left: 2px solid #222222;
}
.open:after {
content: "🠉";
.open span {
transform: rotate(270deg);
}
}