Fix ol.css for some examples

- es2015-custom-element needs css variables declared in :host
- external-map-map still does not work when editing in codesandbox,
  though that neither worked before.
This commit is contained in:
Maximilian Krög
2022-08-13 16:39:28 +02:00
parent 839e1d1c65
commit 259e3fe1c9
5 changed files with 6 additions and 5 deletions

View File

@@ -9,7 +9,7 @@ class OLComponent extends HTMLElement {
this.shadow = this.attachShadow({mode: 'open'});
const link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('href', 'css/ol.css');
link.setAttribute('href', 'theme/ol.css');
this.shadow.appendChild(link);
const style = document.createElement('style');
style.innerText = `

View File

@@ -13,7 +13,7 @@ cloak:
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>Mobile full screen example</title>
<link rel="stylesheet" href="../css/ol.css" type="text/css">
<link rel="stylesheet" href="../theme/ol.css" type="text/css">
<style type="text/css">
html, body, .map {
margin: 0;

View File

@@ -1,7 +1,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/ol.css" type="text/css">
<link rel="stylesheet" href="../theme/ol.css" type="text/css">
<style>
body {
margin: 0;

View File

@@ -18,7 +18,7 @@ layout: default.hbs
<p>
If you want to try out OpenLayers without downloading anything (<b>not recommended for production</b>), include the following in the head of your html page:
<pre><code class="language-html">&lt;script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/{{ version }}/build/ol.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/{{ version }}/css/ol.css"&gt;
&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/{{ version }}/theme/ol.css"&gt;
</code></pre>
</p>
</div>

View File

@@ -1,4 +1,5 @@
:root {
:root,
:host {
--ol-background-color: white;
--ol-accent-background-color: #F5F5F5;
--ol-subtle-background-color: rgba(128, 128, 128, 0.25);