orchidmap-front/src/styles/dialogs.less
2018-12-06 16:05:20 +07:00

85 lines
1.6 KiB
Text

.dialog {
// background: #222222;
// background: linear-gradient(130deg, #320523, #020d2b);
background: #271535;
position: fixed;
left: 0;
top: 0;
width: 360px;
height: 100%;
z-index: 3;
box-shadow: @dialog_shadow;
padding: 10px 10px 72px 10px;
overflow: hidden;
box-sizing: border-box;
transform: translate3d(-100%, 0, 0);
pointer-events: none;
transition: transform 500ms;
&.active {
transform: translate3d(0, 0, 0);
pointer-events: all;
}
&::after {
content: ' ';
height: 100px;
width: 100%;
left: 0;
bottom: 0;
// background: linear-gradient(0deg, rgba(2, 13, 43, 1) 50%, rgba(2,13,43,0));
// background: linear-gradient(0deg, rgba(34, 34, 34, 1) 50%, rgba(34, 34, 34, 0));
background: linear-gradient(0deg, rgba(39, 21, 53, 1) 50%, rgba(39, 21, 53, 1));
position: absolute;
z-index: 5;
}
}
.route-row {
margin-bottom: 10px;
background: rgba(255, 255, 255, 0.05);
padding: 10px 10px 5px 10px;
color: white;
user-select: none;
cursor: pointer;
transition: background-color 250ms;
&:hover {
background: rgba(255, 255, 255, 0.1);
}
}
.route-title {
margin-bottom: 5px;
font-weight: bold;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.route-description {
font-size: 0.9em;
opacity: 0.3;
margin-bottom: 5px;
display: grid;
grid-template-columns: 2fr 1fr 1fr;
svg {
width: 20px;
height: 20px;
fill: white;
vertical-align: text-bottom;
margin-bottom: -2px;
}
span {
padding-right: 10px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
}