Styling map containers
ALS wraps Leaflet maps into the div with als-map-container
class. Style it the way you style Leaflet maps.
To make a map fullscreen, set SystemOptions.makeMapFullscreen
property to true
. Don't style the container yourself, use that option!
ALS classes
ALS sets following classes to the body
if:
als-dark
- dark theme is selected.mobile
- user's device is a phone, i.e. whenL.ALS.Helpers.isMobile
istrue
.not-mobile
- user's device is a desktop, i.e. whenL.ALS.Helpers.isMobile
isfalse
.ie-lte-9
- user's browser is IE9 or less, i.e. whenL.ALS.Helpers.isIElte9
istrue
.als-fullscreen-map
-SystemOptions.makeMapFullscreen
istrue
.als-electron-toolbar-as-frame
-SystemOptions.makeMapFullscreen
andElectronIntegration.useToolbarAsFrame
are true.als-no-scroll
-L.ALS.WidgetableWindow
is open.
Global styles
ALS sets following global styles to match aesthetics and normalize elements' behavior:
body {
padding: 0;
margin: 0;
font-family: arial, sans-serif;
background: var(--background);
color: var(--text-color);
}
* {
outline: none;
}
input, select {
font-size: 1rem;
padding: 0;
background: var(--background);
color: var(--text-color);
border: var(--border);
}
input, select {
font-size: 1rem;
padding: 0;
background: var(--background);
color: var(--text-color);
border: var(--border);
}
input:invalid {
box-shadow: none;
}
input:disabled {
background: var(--fixed-element-bg);
}
input[type="color"] {
padding: 0;
height: 1.3rem;
}
select {
height: 1.5rem;
}
select > * {
background: var(--background);
}
ALS will set :root {font-size: 16pt;}
for mobile devices. To prevent it, pass false
as the L.ALS.System.initializeSystem
argument.