@dnncommunity/dnn-elements 0.13.0-beta.1

package/dist/collection/components/dnn-chevron/dnn-chevron.js

@@ -0,0 +1,107 @@
+import { Component, Host, h, Prop, Event } from '@stencil/core';
+import { Watch } from '@stencil/core';
+export class DnnChevron {
+  constructor() {
+    /** Expand text for screen readers */
+    this.expandText = "expand";
+    /** Collapse text for screen readers */
+    this.collapseText = "collapse";
+    /** Is the chevron expanded */
+    this.expanded = false;
+  }
+  handleExpandedChanged(newValue) {
+    this.changed.emit(newValue);
+  }
+  render() {
+    return (h(Host, null,
+      h("button", { "aria-label": this.expanded ? this.collapseText : this.expandText, onClick: () => this.expanded = !this.expanded },
+        h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" },
+          h("path", { d: "M0 0h24v24H0z", fill: "none" }),
+          h("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" })))));
+  }
+  static get is() { return "dnn-chevron"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["dnn-chevron.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["dnn-chevron.css"]
+  }; }
+  static get properties() { return {
+    "expandText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Expand text for screen readers"
+      },
+      "attribute": "expand-text",
+      "reflect": false,
+      "defaultValue": "\"expand\""
+    },
+    "collapseText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Collapse text for screen readers"
+      },
+      "attribute": "collapse-text",
+      "reflect": false,
+      "defaultValue": "\"collapse\""
+    },
+    "expanded": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Is the chevron expanded"
+      },
+      "attribute": "expanded",
+      "reflect": true,
+      "defaultValue": "false"
+    }
+  }; }
+  static get events() { return [{
+      "method": "changed",
+      "name": "changed",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fires up when the expanded status changes"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get watchers() { return [{
+      "propName": "expanded",
+      "methodName": "handleExpandedChanged"
+    }]; }
+}
+//# sourceMappingURL=dnn-chevron.js.map

package/dist/collection/components/dnn-chevron/dnn-chevron.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dnn-chevron.js","sourceRoot":"","sources":["../../../src/components/dnn-chevron/dnn-chevron.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEhE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAOtC,MAAM,OAAO,UAAU;EALvB;IAOE,qCAAqC;IAC7B,eAAU,GAAY,QAAQ,CAAC;IAEvC,uCAAuC;IAC/B,iBAAY,GAAY,UAAU,CAAC;IAE3C,8BAA8B;IACQ,aAAQ,GAAa,KAAK,CAAC;GAsBlE;EAhBC,qBAAqB,CAAC,QAAiB;IACrC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;EAC9B,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,4BAAoB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,EACrE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ;QAE7C,WAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS;UAAC,YAAM,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAE;UAAA,YAAM,CAAC,EAAC,gDAAgD,GAAE,CAAM,CACpM,CACJ,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, h, Prop, Event } from '@stencil/core';\r\nimport { EventEmitter } from '@stencil/core';\r\nimport { Watch } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dnn-chevron',\r\n  styleUrl: 'dnn-chevron.scss',\r\n  shadow: true\r\n})\r\nexport class DnnChevron {\r\n\r\n  /** Expand text for screen readers */\r\n  @Prop() expandText?: string = \"expand\";\r\n\r\n  /** Collapse text for screen readers */\r\n  @Prop() collapseText?: string = \"collapse\";\r\n\r\n  /** Is the chevron expanded */\r\n  @Prop({mutable: true, reflect: true}) expanded?: boolean = false;\r\n\r\n  /** Fires up when the expanded status changes */\r\n  @Event() changed: EventEmitter;\r\n\r\n  @Watch('expanded')\r\n  handleExpandedChanged(newValue: boolean) {\r\n    this.changed.emit(newValue);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <button aria-label={this.expanded ? this.collapseText : this.expandText}\r\n          onClick={() => this.expanded = !this.expanded}\r\n        >\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"/></svg>\r\n        </button>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n}\r\n"]}

package/dist/collection/components/dnn-collapsible/dnn-collapsible.css

@@ -0,0 +1,8 @@
+:host {
+  display: block;
+}
+:host #container {
+  height: 0;
+  overflow: hidden;
+  transition: height 300ms ease-in-out;
+}

package/dist/collection/components/dnn-collapsible/dnn-collapsible.js

@@ -0,0 +1,188 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Component, Host, h, Prop, Element, Watch, State, Method, Event, Listen } from '@stencil/core';
+import { Debounce } from '../../utilities/debounce';
+export class DnnCollapsible {
+  constructor() {
+    /** Defines if the panel is expanded or not. */
+    this.expanded = false;
+    /** Defines the transition time in ms, defaults to 100ms */
+    this.transitionDuration = 150;
+    this.animating = false;
+  }
+  handleExpandedChanged(newValue) {
+    this.animating = true;
+    requestAnimationFrame(() => {
+      const container = this.el.shadowRoot.querySelector("#container");
+      if (newValue) {
+        container.style.height = container.scrollHeight + "px";
+      }
+      else {
+        container.style.height = "0px";
+      }
+    });
+    requestAnimationFrame(() => {
+      this.animating = false;
+      this.dnnCollapsibleHeightChanged.emit();
+    });
+  }
+  /** Updates the component height, use to update after a slot content changes. */
+  async updateSize() {
+    this.updateComponentSize();
+  }
+  updateComponentSize() {
+    if (this.expanded) {
+      this.animating = true;
+      requestAnimationFrame(() => {
+        const container = this.el.shadowRoot.querySelector("#container");
+        let newHeight = 0;
+        container.querySelector('slot').assignedElements().forEach(node => {
+          newHeight += node.scrollHeight;
+        });
+        container.style.height = newHeight + "px";
+      });
+    }
+  }
+  handleOtherCollapsibleHeightChanged() {
+    setTimeout(() => {
+      this.updateComponentSize();
+    }, this.transitionDuration);
+  }
+  handleMutation(mutationList) {
+    mutationList.forEach(mutation => {
+      requestAnimationFrame(() => {
+        mutation.target.closest('dnn-collapsible').updateSize();
+      });
+    });
+  }
+  componentWillLoad() {
+    this.mutationObserver = new MutationObserver((mutationList) => {
+      this.handleMutation(mutationList);
+    });
+  }
+  componentDidLoad() {
+    const container = this.el.shadowRoot.querySelector('#container');
+    container.style.transitionDuration = this.transitionDuration + 'ms';
+    // Monitor for content changes and update own height
+    const childNodes = [this.el];
+    childNodes.forEach(element => {
+      this.mutationObserver.observe(element, { attributes: true, characterData: true, childList: true, subtree: true });
+    });
+    const slot = this.el.shadowRoot.querySelector('slot');
+    slot.addEventListener("slotchange", () => {
+      this.updateSize();
+    });
+  }
+  disconnectedCallback() {
+    this.mutationObserver.disconnect();
+  }
+  /*eslint-enable @stencil/own-methods-must-be-private */
+  render() {
+    return (h(Host, null,
+      h("div", { id: "container" },
+        h("slot", null))));
+  }
+  static get is() { return "dnn-collapsible"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["dnn-collapsible.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["dnn-collapsible.css"]
+  }; }
+  static get properties() { return {
+    "expanded": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Defines if the panel is expanded or not."
+      },
+      "attribute": "expanded",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "transitionDuration": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Defines the transition time in ms, defaults to 100ms"
+      },
+      "attribute": "transition-duration",
+      "reflect": false,
+      "defaultValue": "150"
+    }
+  }; }
+  static get states() { return {
+    "animating": {}
+  }; }
+  static get events() { return [{
+      "method": "dnnCollapsibleHeightChanged",
+      "name": "dnnCollapsibleHeightChanged",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fires whenever the collapsible height has changed"
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "updateSize": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Updates the component height, use to update after a slot content changes.",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "expanded",
+      "methodName": "handleExpandedChanged"
+    }]; }
+  static get listeners() { return [{
+      "name": "dnnCollapsibleHeightChanged",
+      "method": "handleOtherCollapsibleHeightChanged",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}
+__decorate([
+  Debounce()
+], DnnCollapsible.prototype, "updateSize", null);
+//# sourceMappingURL=dnn-collapsible.js.map

package/dist/collection/components/dnn-collapsible/dnn-collapsible.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dnn-collapsible.js","sourceRoot":"","sources":["../../../src/components/dnn-collapsible/dnn-collapsible.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Element, Watch, State, Method, Event, EventEmitter, Listen } from '@stencil/core';\r\nimport { Debounce } from '../../utilities/debounce';\r\n\r\n@Component({\r\n  tag: \"dnn-collapsible\",\r\n  styleUrl: \"dnn-collapsible.scss\",\r\n  shadow: true\r\n})\r\nexport class DnnCollapsible {\r\n\r\n  @Element() el: HTMLDnnCollapsibleElement;\r\n\r\n  /** Defines if the panel is expanded or not. */\r\n  @Prop({reflect: true}) expanded: boolean = false;\r\n\r\n  /** Defines the transition time in ms, defaults to 100ms */\r\n  @Prop() transitionDuration?: number = 150;\r\n\r\n  @State() animating: boolean = false;\r\n\r\n  @Watch(\"expanded\")\r\n  handleExpandedChanged(newValue: boolean){\r\n    this.animating = true;\r\n    requestAnimationFrame(() => {\r\n      const container = this.el.shadowRoot.querySelector(\"#container\") as HTMLDivElement;\r\n      if (newValue){\r\n        container.style.height = container.scrollHeight + \"px\";\r\n      }\r\n      else{\r\n        container.style.height = \"0px\";\r\n      }\r\n    });\r\n    \r\n    requestAnimationFrame(() => {\r\n      this.animating = false;\r\n      this.dnnCollapsibleHeightChanged.emit();\r\n    });\r\n  }\r\n\r\n  /** Updates the component height, use to update after a slot content changes. */\r\n  @Debounce()\r\n  @Method()\r\n  async updateSize() {\r\n    this.updateComponentSize();\r\n  }\r\n\r\n  private updateComponentSize(){\r\n    if (this.expanded){\r\n      this.animating = true;\r\n      requestAnimationFrame(() => {\r\n        const container = this.el.shadowRoot.querySelector(\"#container\") as HTMLDivElement;\r\n        let newHeight = 0;\r\n        container.querySelector('slot').assignedElements().forEach(node => {\r\n          newHeight += node.scrollHeight;\r\n        });\r\n        container.style.height = newHeight + \"px\";\r\n      });\r\n    }\r\n  }\r\n\r\n  /** Fires whenever the collapsible height has changed */\r\n  @Event() dnnCollapsibleHeightChanged: EventEmitter<void>;\r\n\r\n  @Listen('dnnCollapsibleHeightChanged')\r\n  handleOtherCollapsibleHeightChanged(){\r\n    setTimeout(() => {\r\n      this.updateComponentSize();\r\n    }, this.transitionDuration);\r\n  }\r\n\r\n  private mutationObserver: MutationObserver;\r\n\r\n  private handleMutation(mutationList){\r\n    mutationList.forEach(mutation => {\r\n      requestAnimationFrame(() => {\r\n        mutation.target.closest('dnn-collapsible').updateSize();\r\n      });\r\n    });\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.mutationObserver = new MutationObserver((mutationList) => {\r\n      this.handleMutation(mutationList);\r\n    });\r\n  }\r\n\r\n  componentDidLoad(){\r\n    const container = this.el.shadowRoot.querySelector('#container') as HTMLDivElement;\r\n    container.style.transitionDuration = this.transitionDuration + 'ms';\r\n\r\n    // Monitor for content changes and update own height\r\n    const childNodes = [this.el];\r\n    childNodes.forEach(element => {\r\n      this.mutationObserver.observe(element, {attributes: true, characterData: true, childList: true, subtree: true});\r\n    });\r\n\r\n    const slot = this.el.shadowRoot.querySelector('slot');\r\n    slot.addEventListener(\"slotchange\", () => {\r\n      this.updateSize();\r\n    });\r\n  }\r\n\r\n  disconnectedCallback(){\r\n    this.mutationObserver.disconnect();\r\n  }\r\n  /*eslint-enable @stencil/own-methods-must-be-private */\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div id=\"container\">\r\n            <slot></slot>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n}\r\n"]}

package/dist/collection/components/dnn-color-picker/dnn-color-picker.css

@@ -0,0 +1,225 @@
+.dnn-color-picker {
+  padding: 15px;
+  max-width: 400px;
+}
+.dnn-color-picker .dnn-color-sliders {
+  display: flex;
+  flex-direction: column;
+  min-width: 200px;
+}
+.dnn-color-picker .dnn-color-sliders .dnn-color-s-b {
+  border: 1px solid #ccc;
+  padding-bottom: var(--color-box-height, 50%);
+  position: relative;
+  background-color: red;
+}
+.dnn-color-picker .dnn-color-sliders .dnn-color-s-b:before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  background: linear-gradient(to right, white, red);
+  mix-blend-mode: saturation;
+}
+.dnn-color-picker .dnn-color-sliders .dnn-color-s-b:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+  background: linear-gradient(to bottom, white, black);
+  mix-blend-mode: luminosity;
+}
+.dnn-color-picker .dnn-color-sliders .dnn-color-s-b button {
+  position: absolute;
+  bottom: calc(50% - 4px);
+  left: calc(50% - 4px);
+  width: 8px;
+  height: 8px;
+  z-index: 3;
+  display: block;
+  background: none;
+  border: none;
+  margin-left: -4px;
+  margin-bottom: -4px;
+  padding: 7px;
+  background-color: #fff;
+  border-radius: 50%;
+}
+.dnn-color-picker .dnn-color-sliders .dnn-color-s-b button:before {
+  content: "";
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  border-radius: 50%;
+}
+.dnn-color-picker .dnn-color-sliders .dnn-color-s-b button:after {
+  content: "";
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  border-radius: 50%;
+  width: 10px;
+  height: 10px;
+  border: 2px solid #ccc;
+}
+.dnn-color-picker .dnn-color-sliders .dnn-color-bar {
+  display: flex;
+  align-items: center;
+  margin-top: 15px;
+}
+.dnn-color-picker .dnn-color-sliders .dnn-color-bar .dnn-color-result {
+  flex-direction: column;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background: red;
+}
+.dnn-color-picker .dnn-color-sliders .dnn-color-bar .dnn-color-hue {
+  flex: auto;
+  margin-left: 10px;
+  height: 16px;
+  border: 1px solid #ccc;
+  position: relative;
+  background: linear-gradient(to right, #f00 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 84%, #f00 100%);
+}
+.dnn-color-picker .dnn-color-sliders .dnn-color-bar .dnn-color-hue button {
+  width: 10px;
+  height: 20px;
+  position: absolute;
+  top: -2px;
+  left: calc(50% - 4px);
+  border: 0;
+  padding: 0;
+  background-color: transparent;
+  padding-left: -8px;
+}
+.dnn-color-picker .dnn-color-sliders .dnn-color-bar .dnn-color-hue button:before {
+  content: "";
+  position: absolute;
+  top: -2px;
+  left: 0px;
+  border-radius: 3px;
+  width: 100%;
+  height: 100%;
+  border: 1px solid #ccc;
+  background-color: #fff;
+}
+.dnn-color-picker .dnn-color-fields {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.dnn-color-picker .dnn-color-fields .dnn-color-mode-switch {
+  display: flex;
+  align-items: flex-end;
+  padding: 0.5em;
+}
+.dnn-color-picker .dnn-color-fields .dnn-color-mode-switch button {
+  background-color: transparent;
+  border: none;
+}
+.dnn-color-picker .dnn-color-fields .dnn-color-mode-switch button svg {
+  width: 3em;
+  height: 3em;
+  pointer-events: none;
+  outline: none;
+}
+.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields {
+  display: flex;
+  justify-content: space-evenly;
+}
+.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields .dnn-rgb-color-field {
+  display: flex;
+  flex-direction: column;
+  flex: auto;
+  text-align: center;
+  padding: 0.5em;
+}
+.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields .dnn-rgb-color-field label {
+  padding-bottom: 0.25em;
+}
+.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields .dnn-rgb-color-field input {
+  border-radius: var(--dnn-button-radius, 3px);
+  border: 1px solid #ccc;
+  padding: 0.5em;
+  padding-left: 1.3em;
+  text-align: center;
+}
+.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields .dnn-rgb-color-field input.red {
+  border-color: red;
+}
+.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields .dnn-rgb-color-field input.green {
+  border-color: green;
+}
+.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields .dnn-rgb-color-field input.blue {
+  border-color: blue;
+}
+.dnn-color-picker .dnn-color-fields .dnn-hsl-color-fields {
+  display: flex;
+  justify-content: space-evenly;
+}
+.dnn-color-picker .dnn-color-fields .dnn-hsl-color-fields .dnn-hsl-color-field {
+  display: flex;
+  flex-direction: column;
+  flex: auto;
+  text-align: center;
+  padding: 0.5em;
+}
+.dnn-color-picker .dnn-color-fields .dnn-hsl-color-fields .dnn-hsl-color-field label {
+  padding-bottom: 0.25em;
+}
+.dnn-color-picker .dnn-color-fields .dnn-hsl-color-fields .dnn-hsl-color-field input {
+  border-radius: var(--dnn-button-radius, 3px);
+  border: 1px solid #ccc;
+  padding: 0.5em;
+  padding-left: 1.3em;
+  text-align: center;
+}
+.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields {
+  display: flex;
+  justify-content: space-evenly;
+}
+.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields .dnn-hex-color-field {
+  display: flex;
+  flex-direction: column;
+  flex: auto;
+  text-align: center;
+  padding: 0.5em;
+}
+.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields .dnn-hex-color-field label {
+  padding-bottom: 0.25em;
+}
+.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields .dnn-hex-color-field .hex-input {
+  position: relative;
+  border-radius: var(--dnn-button-radius, 3px);
+  border: 1px solid #ccc;
+  padding: 0.323em;
+  text-align: center;
+}
+.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields .dnn-hex-color-field .hex-input input {
+  border: 0;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+}
+.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields .dnn-hex-color-field .hex-input button {
+  position: absolute;
+  height: 100%;
+  top: 0;
+  right: 1em;
+  background-color: transparent;
+  border: 0;
+  padding: 0;
+  margin: 0;
+}
+.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields .dnn-hex-color-field .hex-input button svg {
+  min-width: 1em;
+}