freeCodeCamp/client/src/components/Map/map.css
Oliver Eyton-Williams 0c68f6a605 fix: improve map responsiveness (#36827)
* fix: improve map responsiveness

* fix: update SuperBlock tests
2019-09-20 23:52:03 +05:30

89 lines
1.4 KiB
CSS

.map-ui {
height: 100%;
}
.map-ui ul {
list-style: none;
color: var(--secondary-color);
}
.map-ui > ul {
padding: 0;
}
button.map-title {
display: flex;
align-items: center;
cursor: pointer;
padding-top: 18px;
padding-bottom: 18px;
background: transparent;
border: none;
text-align: left;
}
button.map-title:hover {
color: var(--tertiary-color);
background-color: var(--tertiary-background);
}
.map-title > h4 {
margin-bottom: 0;
}
.map-title-completed {
margin-left: auto;
width: 100px;
padding-left: 20px;
}
.superblock .map-title svg {
width: 14px;
margin-right: 5px;
flex-shrink: 0;
fill: var(--color-quaternary) !important;
stroke: var(--color-quaternary);
}
li.open > .map-title svg:first-child {
transform: rotate(90deg);
}
.map-challenge-title {
display: flex;
margin-bottom: 0.25rem;
max-width: calc(100% - 105px);
}
@media (max-width: 640px) {
.map-ui .block ul {
padding-inline-start: 6px;
font-size: 0.9rem;
}
button.map-title {
width: 100%;
}
.map-ui ul {
padding-inline-start: 15px;
}
.map-ui > ul {
padding-inline-start: 0;
}
.map-challenge-title {
max-width: 100%;
}
.map-title-completed {
flex-shrink: 0;
padding-left: 15px;
}
}
.block a {
text-decoration: none;
}
/* 14px is the width of the expansion arrow */
.superblock {
max-width: calc(100% - 14px);
}