facilmap/frontend/src/map/search-box/search-box.scss

160 wiersze
2.3 KiB
SCSS

.fm-search-box.fm-search-box {
&:not(.isNarrow) {
position: absolute;
top: 10px !important; /* Override drag position from narrow mode */
left: 52px;
max-height: calc(100% - 25px);
min-width: 19rem;
min-height: 6rem;
width: 29rem;
transition: opacity .7s,background-color .7s,border-color .7s;
opacity: .7;
&:hover,&.hasFocus {
opacity: 1;
}
.nav-tabs .nav-item a {
padding: 0.1rem 0.3rem;
}
}
&.isNarrow {
min-height: 45px;
flex-basis: 45px;
overflow: hidden;
height: auto !important; /* Override resize height from non-narrow mode */
width: auto !important; /* Override resize width from non-narrow mode */
}
.tabs, .tab-content, .vue-portal-target {
display: flex;
flex-direction: column;
min-height: 0;
}
.tabs, .tab-content, .tab-pane {
flex-grow: 1;
}
.card-header {
display: flex;
flex-direction: column;
flex-shrink: 0;
padding: 0.3rem 0.3rem 0 0.3rem;
}
.nav-tabs {
display: grid;
grid-auto-columns: 1fr;
grid-auto-flow: column;
text-align: center;
gap: 5px;
margin: 0;
.nav-item {
min-width: 0;
}
.nav-item a {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
font-size: 14px;
}
}
.tab-pane.active {
display: flex;
flex-direction: column;
overflow: auto;
}
.fm-search-box-collapse-point {
overflow: auto;
}
hr {
width: 100%;
}
.list-group-item {
padding: 0.5rem;
}
h2 {
margin-top: 0;
font-size: 1.6em;
display: flex;
align-items: center;
}
h3 {
font-size: 1.2em;
}
* + h3 {
margin-top: 15px;
}
dl {
display: grid;
grid-template-columns: 150px auto;
gap: 5px;
* {
min-width: 0;
}
dd {
margin-bottom: 0;
}
}
.pos,.distance,.elevation {
color: #888;
}
}
.fm-search-box-resize {
position: absolute;
bottom: 0;
right: 0;
transform: translate(30%,30%) rotate(45deg);
cursor: nwse-resize;
border: 1px solid #ddd;
border-radius: 1000px;
box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
background: #fff;
color: #666;
padding: 2px;
display: flex;
align-items: center;
justify-content: center;
.fm-icon {
display: flex;
}
svg {
width: 20px;
height: 20px;
}
opacity: 0.5;
transition: opacity .7s;
/* .fm-search-box:not(:hover):not(.fm-hasResults):not(.fm-hasFocus) & {
opacity: 0;
} */
.fm-search-box:hover &,.fm-search-box.hasFocus & {
opacity: 1;
}
}