fixed missing styles partly #2

Juchar · Sep 24, 2019 · 9c5e66a · 9c5e66a
1 parent 85c82de
commit 9c5e66a
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 9 deletions.
diff --git a/demo/color-picker-basic-demos.js b/demo/color-picker-basic-demos.js
@@ -63,10 +63,8 @@ class ColorPickerBasicDemos extends window.DemoReadyEventEmitter(ColorPickerDemo
       </code>
     </p>
     <vaadin-demo-snippet id="color-picker-palettes" when-defined="color-picker">
-      <template preserve-content>
         <color-picker palettes='[["hsl(0,100%,50%)","hsl(45,100%,50%)","hsl(90,100%,50%)","hsl(135,100%,50%)","hsl(180,100%,50%)","hsl(225,100%,50%)","hsl(270,100%,50%)","hsl(315,100%,50%)"],
                       ["hsla(0,100%,50%,0.5)","hsla(45,100%,50%,0.5)","hsla(90,100%,50%,0.5)","hsla(135,100%,50%,0.5)","hsla(180,100%,50%,0.5)","hsla(225,100%,50%,0.5)","hsla(270,100%,50%,0.5)","hsla(315,100%,50%,0.5)"]]'></color-picker>
-      </template>
     </vaadin-demo-snippet>
  `;
   }

diff --git a/src/components/color-picker-responsive-canvas.js b/src/components/color-picker-responsive-canvas.js
@@ -17,7 +17,7 @@ import {IronResizableBehavior} from '@polymer/iron-resizable-behavior';
 class ResponsiveCanvasElement extends ElementMixin(ThemableMixin(Vaadin.DisabledPropertyMixin(mixinBehaviors([IronResizableBehavior], PolymerElement)))) {
 
   static get template() {
-    return html`<style include="color-picker-responsive-canvas">
+    return html`<style include="color-picker-responsive-canvas-styles">
       :host {
         position: relative;
         background: #fff;

diff --git a/src/slider/color-picker-color-slider.js b/src/slider/color-picker-color-slider.js
@@ -28,9 +28,6 @@ class ColorSliderElement extends ElementMixin(ControlStateMixin(ThemableMixin(mi
       :host {
         position: relative;
         box-sizing: border-box;
-        height: 100%;
-        width: 100%;
-
         display: flex;
         justify-content: center;
         align-items: center;

diff --git a/theme/lumo/components/color-picker-responsive-canvas-styles.js b/theme/lumo/components/color-picker-responsive-canvas-styles.js
@@ -4,7 +4,7 @@ import '@vaadin/vaadin-button/theme/lumo/vaadin-button-styles.js';
 const $_documentContainer = document.createElement('template');
 
 $_documentContainer.innerHTML = `
-<dom-module id="color-picker-responsive-canvas" theme-for="responsive-canvas">
+<dom-module id="color-picker-responsive-canvas-styles" theme-for="responsive-canvas">
   <template>
     <style>
       :host([disabled]),

diff --git a/theme/lumo/palette/color-picker-color-checkbox-styles.js b/theme/lumo/palette/color-picker-color-checkbox-styles.js
@@ -1,7 +1,7 @@
 const $_documentContainer = document.createElement('template');
 
 $_documentContainer.innerHTML = `
-<dom-module id="color-checkbox" theme-for="color-checkbox">
+<dom-module id="color-checkbox-styles" theme-for="color-checkbox">
   <template>
     <style>
       :host([checked]) {

diff --git a/theme/lumo/slider/color-picker-color-slider-styles.js b/theme/lumo/slider/color-picker-color-slider-styles.js
@@ -131,3 +131,20 @@ $_documentContainer.innerHTML = `
 `;
 
 document.head.appendChild($_documentContainer.content);
+
+const $_documentContainer2 = document.createElement('template');
+
+$_documentContainer2.innerHTML = `
+<dom-module id="color-picker-sl-slider" theme-for="sl-slider">
+  <template>
+  <style>
+  :host {
+    height: calc(var(--color-slider-size) * 8);
+    width: 100%;
+  }
+</style>
+</template>
+</dom-module>
+`;
+
+document.head.appendChild($_documentContainer2.content);
diff --git a/theme/material/slider/color-picker-color-slider-styles.js b/theme/material/slider/color-picker-color-slider-styles.js
@@ -8,7 +8,7 @@ const $_documentContainer = html`
         --color-slider-size: calc(36px / 2);
         --color-slider-handle-size: var(--color-slider-size);
 
-        height: var(--color-slider-size);
+        height: var(--color-slider-size); 
         margin: calc(4px / 2) 0;
       }