wip: refactor browser related CSS
This commit is contained in:
Yohan Boniface
parent
b92695dd7f
commit
5b78d6f0ff
9 changed files with 345 additions and 1106 deletions
|
|
@ -547,7 +547,6 @@ i.info {
|
|||
.umap-layer-properties-container,
|
||||
.umap-browse-data,
|
||||
.umap-facet-search,
|
||||
.umap-browse-datalayers,
|
||||
.umap-tilelayer-switcher-container {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
|
@ -678,13 +677,13 @@ input[type=hidden].blur + [type="button"] {
|
|||
.leaflet-ui-container {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
#umap-ui-container {
|
||||
#umap-panel {
|
||||
/* Added for playwright to consider the element as non visible */
|
||||
/* as being out of the visible viewport is not enough */
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
padding: 0 10px;
|
||||
padding: 10px;
|
||||
border-left: 1px solid var(--color-lightGray);
|
||||
overflow-x: auto;
|
||||
z-index: 1010;
|
||||
|
|
@ -692,23 +691,19 @@ input[type=hidden].blur + [type="button"] {
|
|||
opacity: 0.98;
|
||||
cursor: initial;
|
||||
}
|
||||
#umap-ui-container.login-panel {
|
||||
position: fixed; /* Should not scroll when used in content pages (like home page) */
|
||||
z-index: 1011; /* Above a map panel if any */
|
||||
}
|
||||
#umap-ui-container.dark {
|
||||
#umap-panel.dark {
|
||||
border-left: 1px solid #222;
|
||||
background-color: var(--color-darkGray);
|
||||
color: #efefef;
|
||||
}
|
||||
#umap-ui-container.fullwidth {
|
||||
#umap-panel.fullwidth {
|
||||
width: 100%;
|
||||
right: -100%;
|
||||
z-index: 10000;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
.umap-caption-bar-enabled #umap-ui-container {
|
||||
.umap-caption-bar-enabled #umap-panel {
|
||||
bottom: 46px;
|
||||
}
|
||||
.leaflet-top,
|
||||
|
|
@ -718,25 +713,25 @@ input[type=hidden].blur + [type="button"] {
|
|||
.umap-ui .leaflet-right {
|
||||
right: 400px;
|
||||
}
|
||||
#umap-ui-container,
|
||||
#umap-panel,
|
||||
#umap-alert-container,
|
||||
#umap-tooltip-container {
|
||||
-moz-box-sizing:border-box;
|
||||
-webkit-box-sizing:border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#umap-ui-container .umap-popup-content img {
|
||||
#umap-panel .umap-popup-content img {
|
||||
/* See https://github.com/Leaflet/Leaflet/commit/61d746818b99d362108545c151a27f09d60960ee#commitcomment-6061847 */
|
||||
max-width: 99% !important;
|
||||
}
|
||||
#umap-ui-container .umap-popup-content {
|
||||
#umap-panel .umap-popup-content {
|
||||
max-height: inherit;
|
||||
}
|
||||
#umap-ui-container .body {
|
||||
#umap-panel .body {
|
||||
clear: both;
|
||||
height: calc(100% - 54px); /* Minus size of toolbox */
|
||||
}
|
||||
#umap-ui-container .toolbox {
|
||||
#umap-panel .toolbox {
|
||||
padding: 5px 10px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
|
|
@ -745,7 +740,7 @@ input[type=hidden].blur + [type="button"] {
|
|||
justify-content: flex-start;
|
||||
gap: 5px;
|
||||
}
|
||||
#umap-ui-container .toolbox li {
|
||||
#umap-panel .toolbox li {
|
||||
color: #2e3436;
|
||||
line-height: 32px;
|
||||
cursor: pointer;
|
||||
|
|
@ -755,15 +750,15 @@ input[type=hidden].blur + [type="button"] {
|
|||
border: 1px solid #b6b6b3;
|
||||
border-radius: 2px;
|
||||
}
|
||||
#umap-ui-container.dark .toolbox li {
|
||||
#umap-panel.dark .toolbox li {
|
||||
color: #d3dfeb;
|
||||
border: 1px solid #202425;
|
||||
}
|
||||
#umap-ui-container .toolbox li:hover {
|
||||
#umap-panel .toolbox li:hover {
|
||||
color: #2e3436;
|
||||
background-color: #d4d4d2;
|
||||
}
|
||||
#umap-ui-container.dark .toolbox li:hover {
|
||||
#umap-panel.dark .toolbox li:hover {
|
||||
color: #eeeeec;
|
||||
background-color: #353c3e;
|
||||
}
|
||||
|
|
@ -897,6 +892,7 @@ input:invalid {
|
|||
/* *********** */
|
||||
/* Close link */
|
||||
/* *********** */
|
||||
.umap-resize-icon,
|
||||
.umap-close-icon {
|
||||
background-repeat: no-repeat;
|
||||
background-image: url('./img/16.svg');
|
||||
|
|
@ -905,6 +901,10 @@ input:invalid {
|
|||
padding: 0 10px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.umap-resize-icon {
|
||||
background-position: -76px -150px;
|
||||
}
|
||||
.dark .umap-resize-icon,
|
||||
.dark .umap-close-icon {
|
||||
background-image: url('./img/16-white.svg');
|
||||
}
|
||||
|
|
@ -963,35 +963,36 @@ input:invalid {
|
|||
/* Mobile */
|
||||
/* *********** */
|
||||
@media all and (orientation:landscape) {
|
||||
.umap-edit-enabled #umap-ui-container {
|
||||
.umap-edit-enabled #umap-panel {
|
||||
top: 46px;
|
||||
}
|
||||
#umap-ui-container {
|
||||
#umap-panel {
|
||||
width: 400px;
|
||||
right: -400px;
|
||||
top: 0;
|
||||
}
|
||||
.umap-ui #umap-ui-container {
|
||||
.umap-ui #umap-panel {
|
||||
right: 0;
|
||||
visibility: visible;
|
||||
}
|
||||
#umap-ui-container.condensed {
|
||||
#umap-panel.condensed {
|
||||
margin-top: 10px;
|
||||
margin-right: 10px;
|
||||
max-height: 300px;
|
||||
max-height: 500px;
|
||||
bottom: initial;
|
||||
width: 390px;
|
||||
border-radius: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
@media all and (orientation:portrait) {
|
||||
#umap-ui-container {
|
||||
#umap-panel {
|
||||
height: 50%;
|
||||
max-height: 400px;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
right: -100%;
|
||||
}
|
||||
.umap-ui #umap-ui-container {
|
||||
.umap-ui #umap-panel {
|
||||
right: 0;
|
||||
visibility: visible;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -186,5 +186,7 @@
|
|||
</g>
|
||||
<path id="path1286" d="m24.352 6.3088h0.03307v-3.6125h-3.7796v3.6125h0.03307zm-3.9787-4.1591h4.2439c0.06157 0 0.12062 0.024461 0.16417 0.068002s0.068 0.1026 0.068 0.16417v4.2439c0 0.061569-0.02445 0.12062-0.068 0.16417-0.04355 0.04355-0.1026 0.067998-0.16417 0.067998h-4.2439c-0.06158 0-0.12063-0.024447-0.16417-0.067998-0.04354-0.04355-0.068-0.10261-0.068-0.16417v-4.2439c0-0.061577 0.02446-0.12063 0.068-0.16417 0.04354-0.043541 0.1026-0.068002 0.16417-0.068002z" fill="#f2f2f2" stroke="#999" stroke-width=".065719"/>
|
||||
</g>
|
||||
<path id="path3-5" d="m80 967.11v4.75h4.75v-1.5h-3.25v-3.25z" color="#000000" fill="#f2f2f2" fill-rule="evenodd" stroke="#999" stroke-width=".25"/>
|
||||
<path id="path4-3" d="m82.75 964.36v1.5h3.25v3.25h1.5v-4.75z" color="#000000" fill="#f2f2f2" fill-rule="evenodd" stroke="#999" stroke-width=".25"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 34 KiB |
|
|
@ -178,5 +178,7 @@
|
|||
<path id="path16669" d="m36 963.88v8.3163" fill="none" marker-end="url(#Arrow1)" stroke="#464646" stroke-width="1.5"/>
|
||||
</g>
|
||||
<path id="copy" d="m58.25 962.61v3.5h4v4h3.5v-7.5zm-4 4v7.5h7.5v-7.5z" fill="#4d4d4d" style="paint-order:fill markers stroke"/>
|
||||
<path id="path3" d="m80.25 967.36v4.75h4.75v-1.5h-3.25v-3.25z" color="#000000" fill="#4d4d4d" fill-rule="evenodd" style="-inkscape-stroke:none"/>
|
||||
<path id="path4" d="m83 964.61v1.5h3.25v3.25h1.5v-4.75z" color="#000000" fill="#4d4d4d" fill-rule="evenodd" style="-inkscape-stroke:none"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
File diff suppressed because it is too large
Load diff
|
Before Width: | Height: | Size: 72 KiB After Width: | Height: | Size: 66 KiB |
|
|
@ -10,7 +10,7 @@
|
|||
<path d="M 16.0401,2.3158 H 2.005 v 14.0351 h 14.0351 z" fill="#ffffff" id="path2351" />
|
||||
</mask>
|
||||
</defs>
|
||||
<sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="17.305658" inkscape:cx="54.779771" inkscape:cy="162.69245" inkscape:document-units="px" inkscape:current-layer="layer1" showgrid="true" inkscape:window-width="1920" inkscape:window-height="1011" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="1" showguides="true" inkscape:guide-bbox="true" inkscape:snap-grids="true" inkscape:snap-to-guides="true" inkscape:showpageshadow="2" inkscape:pagecheckerboard="0" inkscape:deskcolor="#d1d1d1">
|
||||
<sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="30.569587" inkscape:cx="81.895121" inkscape:cy="155.43226" inkscape:document-units="px" inkscape:current-layer="layer1" showgrid="true" inkscape:window-width="1920" inkscape:window-height="1011" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="1" showguides="true" inkscape:guide-bbox="true" inkscape:snap-grids="true" inkscape:snap-to-guides="true" inkscape:showpageshadow="2" inkscape:pagecheckerboard="0" inkscape:deskcolor="#d1d1d1">
|
||||
<inkscape:grid type="xygrid" id="grid3004" empspacing="4" visible="true" enabled="true" snapvisiblegridlinesonly="true" originx="0" originy="0" spacingy="1" spacingx="1" units="px" />
|
||||
<sodipodi:guide orientation="-1,0" position="24,168" id="guide3084" inkscape:locked="false" inkscape:label="" inkscape:color="rgb(0,134,229)" />
|
||||
<sodipodi:guide orientation="0,1" position="0,120" id="guide3086" inkscape:locked="false" inkscape:label="" inkscape:color="rgb(0,134,229)" />
|
||||
|
|
@ -197,5 +197,7 @@
|
|||
<path style="fill:none;fill-rule:evenodd;stroke:#464646;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#Arrow1)" d="m 36,963.87832 v 8.3163" id="path16669" sodipodi:nodetypes="cc" />
|
||||
</g>
|
||||
<path id="copy" style="fill:#4d4d4d;paint-order:fill markers stroke" d="m 58.25,962.61218 v 3.5 h 4 v 4 h 3.5 v -7.5 z m -4,4 v 7.5 h 7.5 v -7.5 z" />
|
||||
<path style="color:#000000;fill:#4d4d4d;fill-rule:evenodd;-inkscape-stroke:none" d="m 80.25,967.36133 v 4.75 h 4.75 v -1.5 h -3.25 v -3.25 z" id="path3" />
|
||||
<path style="color:#000000;fill:#4d4d4d;fill-rule:evenodd;-inkscape-stroke:none" d="m 83,964.61133 v 1.5 h 3.25 v 3.25 h 1.5 v -4.75 z" id="path4" />
|
||||
</g>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 43 KiB |
|
|
@ -72,9 +72,10 @@ export default class Browser {
|
|||
}
|
||||
|
||||
addDataLayer(datalayer, parent) {
|
||||
let className = `orderable datalayer ${datalayer.getHidableClass()}`
|
||||
const container = DomUtil.create(
|
||||
'div',
|
||||
`orderable ${datalayer.getHidableClass()}`,
|
||||
className,
|
||||
parent
|
||||
),
|
||||
headline = DomUtil.create('h5', '', container)
|
||||
|
|
@ -133,15 +134,14 @@ export default class Browser {
|
|||
open() {
|
||||
// Get once but use it for each feature later
|
||||
this.filterKeys = this.map.getFilterKeys()
|
||||
const container = DomUtil.create('div', 'umap-browse-data')
|
||||
const container = DomUtil.create('div')
|
||||
// HOTFIX. Remove when this is released:
|
||||
// https://github.com/Leaflet/Leaflet/pull/9052
|
||||
DomEvent.disableClickPropagation(container)
|
||||
|
||||
const title = DomUtil.add('h3', 'umap-browse-title', container, translate('Browse data'))
|
||||
|
||||
const title = DomUtil.add('h3', '', container, translate('Browse data'))
|
||||
const formContainer = DomUtil.create('div', '', container)
|
||||
const dataContainer = DomUtil.create('div', 'umap-browse-features', container)
|
||||
const dataContainer = DomUtil.create('div', '', container)
|
||||
|
||||
const fields = [
|
||||
['options.filter', { handler: 'Input', placeholder: translate('Filter') }],
|
||||
|
|
@ -153,10 +153,11 @@ export default class Browser {
|
|||
})
|
||||
formContainer.appendChild(builder.build())
|
||||
|
||||
let className = 'umap-browser'
|
||||
if (this.map.editEnabled) className += ' dark'
|
||||
this.map.ui.openPanel({
|
||||
data: { html: container },
|
||||
actions: [this.map._aboutLink()],
|
||||
className: 'condensed'
|
||||
className: className
|
||||
})
|
||||
|
||||
this.map.eachBrowsableDataLayer((datalayer) => {
|
||||
|
|
|
|||
|
|
@ -500,7 +500,7 @@ L.Control.Button = L.Control.extend({
|
|||
U.DataLayersControl = L.Control.Button.extend({
|
||||
options: {
|
||||
position: 'topright',
|
||||
className: 'leaflet-control-browse',
|
||||
className: 'umap-control-browse',
|
||||
title: L._('Show datalayers'),
|
||||
},
|
||||
|
||||
|
|
@ -512,7 +512,7 @@ U.DataLayersControl = L.Control.Button.extend({
|
|||
U.CaptionControl = L.Control.Button.extend({
|
||||
options: {
|
||||
position: 'topright',
|
||||
className: 'leaflet-control-caption',
|
||||
className: 'umap-control-caption',
|
||||
title: L._('About'),
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ U.UI = L.Evented.extend({
|
|||
L.DomEvent.on(this.container, 'wheel', L.DomEvent.stopPropagation)
|
||||
L.DomEvent.on(this.container, 'MozMousePixelScroll', L.DomEvent.stopPropagation)
|
||||
this._panel = L.DomUtil.create('div', '', this.container)
|
||||
this._panel.id = 'umap-ui-container'
|
||||
this._panel.id = 'umap-panel'
|
||||
this._alert = L.DomUtil.create('div', 'with-transition', this.container)
|
||||
this._alert.id = 'umap-alert-container'
|
||||
this._tooltip = L.DomUtil.create('div', '', this.container)
|
||||
|
|
|
|||
|
|
@ -317,7 +317,6 @@ ul.photon-autocomplete {
|
|||
background-position: -36px -72px;
|
||||
}
|
||||
.permissions-panel h3:before,
|
||||
.umap-browse-datalayers h3:before,
|
||||
.umap-edit-container h3:before,
|
||||
.umap-feature-properties:before,
|
||||
.umap-layer-properties-container h3:before,
|
||||
|
|
@ -836,59 +835,6 @@ ul.photon-autocomplete {
|
|||
}
|
||||
|
||||
|
||||
|
||||
/* ********************************* */
|
||||
/* Datalayers Control */
|
||||
/* ********************************* */
|
||||
|
||||
.leaflet-control-caption [type="button"],
|
||||
.leaflet-control-browse [type="button"] {
|
||||
background-image: url('./img/24.svg');
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-position: -34px -70px;
|
||||
background-size: 180px;
|
||||
}
|
||||
.leaflet-control-caption [type="button"] {
|
||||
background-position: -70px -70px;
|
||||
}
|
||||
.umap-edit-enabled .leaflet-control-caption [type="button"],
|
||||
.umap-edit-enabled .leaflet-control-browse [type="button"] {
|
||||
background-image: url('./img/24-white.svg');
|
||||
background-color: var(--color-darkGray);
|
||||
}
|
||||
.search-result-tools i,
|
||||
.leaflet-inplace-toolbar a,
|
||||
.umap-browse-features i,
|
||||
.umap-caption i,
|
||||
.umap-browse-datalayers i {
|
||||
background-repeat: no-repeat;
|
||||
background-image: url('./img/16.svg');
|
||||
display: inline;
|
||||
padding: 0 10px;
|
||||
cursor: pointer;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.dark .umap-browse-datalayers i {
|
||||
background-image: url('./img/16-white.svg');
|
||||
}
|
||||
.umap-browse-features ul {
|
||||
display: none;
|
||||
}
|
||||
.show-list ul {
|
||||
display: initial;
|
||||
}
|
||||
[draggable] .drag-handle {
|
||||
display: none;
|
||||
}
|
||||
.umap-edit-enabled [draggable] .drag-handle {
|
||||
background-position: -72px -72px;
|
||||
margin-right: 5px;
|
||||
cursor: move;
|
||||
display: initial;
|
||||
}
|
||||
.leaflet-inplace-toolbar a {
|
||||
background-image: url('./img/16-white.svg');
|
||||
background-color: var(--color-darkGray)!important;
|
||||
|
|
@ -962,12 +908,12 @@ ul.photon-autocomplete {
|
|||
.umap-extract-shape-from-multi{
|
||||
background-position: -119px 2px;
|
||||
}
|
||||
.umap-browse-features .feature-title {
|
||||
.umap-browser .feature-title {
|
||||
width: inherit;
|
||||
cursor: inherit;
|
||||
padding-left: 6px;
|
||||
}
|
||||
.umap-browse-features .feature-title {
|
||||
.umap-browser .feature-title {
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -987,79 +933,6 @@ a.add-datalayer:before {
|
|||
a.add-datalayer:hover {
|
||||
background-color: rgb(99, 99, 99);
|
||||
}
|
||||
.umap-browse-data .off .feature {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/* ********************************* */
|
||||
/* Features browser panel */
|
||||
/* ********************************* */
|
||||
|
||||
.umap-facet-search .formbox,
|
||||
.umap-browse-features > div {
|
||||
border: 1px solid #d3d3d3;
|
||||
margin-bottom: 14px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.umap-browse-features h5, .umap-facet-search h5 {
|
||||
margin-bottom: 0;
|
||||
overflow: hidden;
|
||||
padding-left: 5px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
background-color: var(--color-lightGray);
|
||||
color: #666;
|
||||
}
|
||||
.dark .umap-browse-features h5 {
|
||||
background-color: initial;
|
||||
color: white;
|
||||
}
|
||||
.umap-browse-features h5 span {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.umap-browse-features li, .umap-facet-search li {
|
||||
padding: 2px 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.umap-facet-search li:nth-child(even),
|
||||
.umap-browse-features li:nth-child(even) {
|
||||
background-color: #f8f8f3;
|
||||
}
|
||||
.umap-browse-features .feature-color {
|
||||
box-shadow: 0 0 2px 0 black inset;
|
||||
cursor: inherit;
|
||||
-moz-box-sizing:border-box;
|
||||
-webkit-box-sizing:border-box;
|
||||
box-sizing: border-box;
|
||||
background: none;
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
width: 24px;
|
||||
text-align: center;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.umap-browse-features .feature-color img {
|
||||
width: 24px;
|
||||
}
|
||||
.umap-browse-features .feature-color span {
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
}
|
||||
.umap-browse-features .polygon .feature-color,
|
||||
.umap-browse-features .polyline .feature-color {
|
||||
box-shadow: 0 0 2px 0 black inset;
|
||||
background-image: url('./img/24.svg');
|
||||
background-size: 500%;
|
||||
}
|
||||
.umap-browse-features .polyline .feature-color {
|
||||
background-position: -72px -23px;
|
||||
}
|
||||
.umap-browse-features .polygon .feature-color {
|
||||
background-position: -48px -25px;
|
||||
}
|
||||
.show-on-edit {
|
||||
display: none!important;
|
||||
}
|
||||
|
|
@ -1072,16 +945,140 @@ a.add-datalayer:hover {
|
|||
.umap-edit-enabled .show-on-edit.block {
|
||||
display: block!important;
|
||||
}
|
||||
.umap-browse-description {
|
||||
font-size: 0.9em;
|
||||
margin-bottom: 14px;
|
||||
|
||||
|
||||
/* ********************************* */
|
||||
/* Browser panel */
|
||||
/* ********************************* */
|
||||
.umap-control-caption [type="button"],
|
||||
.umap-control-browse [type="button"] {
|
||||
background-image: url('./img/24.svg');
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-position: -34px -70px;
|
||||
background-size: 180px;
|
||||
}
|
||||
.datalayer-toggle-list {
|
||||
.umap-control-caption [type="button"] {
|
||||
background-position: -70px -70px;
|
||||
}
|
||||
.umap-edit-enabled .umap-control-caption [type="button"],
|
||||
.umap-edit-enabled .umap-control-browse [type="button"] {
|
||||
background-image: url('./img/24-white.svg');
|
||||
background-color: var(--color-darkGray);
|
||||
}
|
||||
.search-result-tools i,
|
||||
.leaflet-inplace-toolbar a,
|
||||
.umap-browser i,
|
||||
.umap-caption i {
|
||||
background-repeat: no-repeat;
|
||||
background-image: url('./img/16.svg');
|
||||
display: inline;
|
||||
padding: 0 10px;
|
||||
cursor: pointer;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.umap-browser.dark .datalayer i {
|
||||
background-image: url('./img/16-white.svg');
|
||||
}
|
||||
.umap-browser ul {
|
||||
display: none;
|
||||
}
|
||||
.show-list ul {
|
||||
display: block;
|
||||
}
|
||||
i.drag-handle {
|
||||
display: none;
|
||||
background-position: -72px -73px;
|
||||
cursor: move;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.umap-edit-enabled [draggable] .drag-handle {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.umap-browser .off .feature {
|
||||
display: none;
|
||||
}
|
||||
.umap-facet-search .formbox,
|
||||
.umap-browser .datalayer {
|
||||
margin-bottom: 2px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.umap-browser .datalayer ul {
|
||||
border: 1px solid #d3d3d3;
|
||||
}
|
||||
.umap-browser.dark .datalayer ul {
|
||||
border: 1px solid #2c3233;
|
||||
}
|
||||
.umap-browser h5, .umap-facet-search h5 {
|
||||
margin-bottom: 0;
|
||||
overflow: hidden;
|
||||
padding-left: 5px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
background-color: var(--color-lightGray);
|
||||
color: #666;
|
||||
}
|
||||
.umap-browser.dark h5 {
|
||||
background-color: #2c3233;
|
||||
color: white;
|
||||
}
|
||||
.umap-browser h5 span {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.umap-browser li, .umap-facet-search li {
|
||||
padding: 2px 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.umap-facet-search li:nth-child(even),
|
||||
.umap-browser .datalayer li:nth-child(even) {
|
||||
background-color: #efefef;
|
||||
}
|
||||
.umap-browser.dark .datalayer li:nth-child(even) {
|
||||
background-color: #2c3233;
|
||||
}
|
||||
.umap-browser .datalayer i.feature-color {
|
||||
box-shadow: 0 0 2px 0 black inset;
|
||||
cursor: inherit;
|
||||
-moz-box-sizing:border-box;
|
||||
-webkit-box-sizing:border-box;
|
||||
box-sizing: border-box;
|
||||
background: none;
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
width: 24px;
|
||||
text-align: center;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.umap-browser .datalayer .feature-color img {
|
||||
width: 24px;
|
||||
}
|
||||
.umap-browser .datalayer .feature-color span {
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
}
|
||||
.umap-browser .polygon .feature-color,
|
||||
.umap-browser .polyline .feature-color {
|
||||
box-shadow: 0 0 2px 0 black inset;
|
||||
background-image: url('./img/24.svg');
|
||||
background-size: 500%;
|
||||
}
|
||||
.umap-browser .polyline .feature-color {
|
||||
background-position: -72px -23px;
|
||||
}
|
||||
.umap-browser .polygon .feature-color {
|
||||
background-position: -48px -25px;
|
||||
}
|
||||
.umap-browser .datalayer-toggle-list {
|
||||
float: right;
|
||||
margin-right: 5px;
|
||||
background-position: -145px -70px;
|
||||
}
|
||||
.show-list .datalayer-toggle-list {
|
||||
.umap-browser .show-list .datalayer-toggle-list {
|
||||
background-position: -145px -45px;
|
||||
}
|
||||
.datalayer-name {
|
||||
|
|
@ -1092,11 +1089,11 @@ a.add-datalayer:hover {
|
|||
/* ********************************* */
|
||||
/* Table Editor */
|
||||
/* ********************************* */
|
||||
#umap-ui-container.umap-table-editor {
|
||||
#umap-panel.umap-table-editor {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
#umap-ui-container.umap-table-editor .toolbox li {
|
||||
#umap-panel.umap-table-editor .toolbox li {
|
||||
float: left;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue