app/assets/stylesheets/events/rounds/_map.scss
.events-rounds-map {
flex-grow: 1;
margin-bottom: 15px;
position: relative;
}
.events-rounds-map-direction {
display: inline;
margin-right: 5px;
}
.round-map-sidebar {
background-color: $background-main;
border-left: $border-color 1px solid;
flex-grow: 0;
flex-shrink: 0;
max-width: 370px;
min-width: 370px;
}
.round-map-competitors {
padding: 15px;
}
.round-map-list-commands {
margin-bottom: 5px;
}
.round-map-competitor {
font-family: $fallback-fonts;
padding: 5px 7px;
}
.round-map-competitor-row {
display: flex;
justify-content: space-between;
}
.round-map-competitor-title {
display: flex;
width: 80%;
line-height: 22px;
.label {
align-self: baseline;
margin-top: 3px;
}
> * { margin-left: 5px; }
.fa {
font-size: 10px;
line-height: 21px;
}
}
.round-map-competitor-name {
flex-grow: 0;
flex-shrink: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.round-map-competitor-direction {
color: $dark-gray-text;
font-size:12px;
}
.round-map-group {
margin-bottom: 15px;
}
.round-map-group-title {
color: $dark-gray-text;
font-family: $fallback-fonts;
font-size: 16px;
padding: 5px 0;
text-transform: uppercase;
}
.round-map-group-commands {
font: 12px / 16px $fallback-fonts;
margin-left: 5px;
text-transform: initial;
}
.round-map-group-list {
border-left: $gray 2px solid;
}
.round-map-loading {
background-color: rgba(255, 255, 255, 0.87);
width: 100%;
height: 100%;
position: absolute;
z-index: 1142;
text-align: center;
top: 0;
bottom: 0;
padding-top: 200px;
}
.round-map__reference-point {
display: flex;
justify-content: space-between;
font-size: 12px;
color: #777;
line-height: 22px;
& > a {
cursor: pointer;
}
}
.round-competitors__group-row {
font-weight: bold;
color: #666;
cursor: pointer;
}
@keyframes placeHolderShimmer{
0% {
background-position: -820px 0;
}
100% {
background-position: 820px 0;
}
}
.round-map__legend-item {
font-size: 12px;
color: $light-text-color;
}
.round-map__legend-item > i.fa {
font-size: 10px;
}
.round-map--after-exit-color {
color: #124E78;
}
.round-map--start-window-color {
color: #fc235e;
}
.round-map--end-window-color {
color: #60ad42;
}
.round-map__animated-background {
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: placeHolderShimmer;
animation-timing-function: linear;
background: linear-gradient(to right, #fff 8%, #dddddd 18%, #fff 33%);
background-size: 800px 400px;
height: 400px;
width: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0.3;
}
.round-map__animation {
position: relative;
min-height: 400px;
}