@ukho/admiralty-core 0.0.0

package/dist/collection/collection-manifest.json

@@ -0,0 +1,53 @@
+{
+  "entries": [
+    "./components/breadcrumb/breadcrumb.js",
+    "./components/breadcrumbs/breadcrumbs.js",
+    "./components/button/button.js",
+    "./components/card/card.js",
+    "./components/checkbox/checkbox.js",
+    "./components/colour-block/colour-block.js",
+    "./components/dialogue/dialogue.js",
+    "./components/expansion/expansion.js",
+    "./components/file-input/file-input.js",
+    "./components/filter/filter.js",
+    "./components/filter-group/filter-group.js",
+    "./components/footer/footer.js",
+    "./components/header/header.js",
+    "./components/header-menu-item/header-menu-item.js",
+    "./components/header-profile/header-profile.js",
+    "./components/header-sub-menu-item/header-sub-menu-item.js",
+    "./components/hint/hint.js",
+    "./components/horizontal-rule/horizontal-rule.js",
+    "./components/icon/icon.js",
+    "./components/input/input.js",
+    "./components/input-error/input-error.js",
+    "./components/label/label.js",
+    "./components/link/link.js",
+    "./components/paginator/paginator.stories.data.js",
+    "./components/paginator/paginator.js",
+    "./components/phase-banner/phase-banner.js",
+    "./components/progress-bar/progress-bar.js",
+    "./components/radio/radio.js",
+    "./components/radio-group/radio-group.js",
+    "./components/select/select.js",
+    "./components/side-nav/side-nav.stories.data.js",
+    "./components/side-nav/side-nav.js",
+    "./components/side-nav-item/side-nav-item.js",
+    "./components/table/table.js",
+    "./components/table-body/table-body.js",
+    "./components/table-cell/table-cell.js",
+    "./components/table-header/table-header.js",
+    "./components/table-header-cell/table-header-cell.js",
+    "./components/table-row/table-row.js",
+    "./components/textarea/textarea.js",
+    "./components/type-ahead/type-ahead.js",
+    "./components/type-ahead-item/type-ahead-item.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "3.2.0",
+    "typescriptVersion": "4.9.5"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/breadcrumb/breadcrumb.css

@@ -0,0 +1,89 @@
+/* Device Sizes - matching layout breakpoints */
+@media (max-width: 1023px) {
+  .desktop-only {
+    display: none;
+  }
+}
+
+@media (min-width: 1024px) {
+  .not-desktop {
+    display: none;
+  }
+}
+
+@media (min-width: 1024px) {
+  .tablet-only {
+    display: none;
+  }
+}
+@media (max-width: 479px) and (min-width: 0px) {
+  .tablet-only {
+    display: none;
+  }
+}
+
+@media (max-width: 479px) and (min-width: 0px) {
+  .tablet-or-desktop {
+    display: none;
+  }
+}
+
+@media (min-width: 1024px) {
+  .phone-or-tablet {
+    display: none;
+  }
+}
+
+@media (min-width: 1024px) {
+  .phone-only {
+    display: none;
+  }
+}
+@media (max-width: 1023px) and (min-width: 480px) {
+  .phone-only {
+    display: none;
+  }
+}
+
+/* Core Palette */
+/* Supporting Palette */
+/* Secondary Palette */
+/* Digital Product Colours */
+/* Utility Colours */
+/* Button Colours */
+/* Primary */
+/* Secondary */
+/* Link Colours */
+/* Nav colours */
+/* Table colours */
+/* Tab colours */
+/* form text input colours */
+/* form textarea colours */
+/* radio button */
+/* checkbox */
+/* code snippet */
+:host {
+  display: flex;
+  align-items: center;
+}
+
+.breadcrumb-icon {
+  margin: 0 10px;
+  font-size: 12px;
+}
+
+a {
+  display: inline-block;
+  font-size: 14px;
+  font-weight: 300;
+  text-decoration: none;
+  color: #333333;
+  margin: 10px 2px;
+}
+a:hover {
+  color: #09315b;
+}
+a.active {
+  color: #09315b;
+  font-weight: normal;
+}

package/dist/collection/components/breadcrumb/breadcrumb.js

@@ -0,0 +1,84 @@
+import { h, Host } from '@stencil/core';
+import { faChevronRight } from '@fortawesome/free-solid-svg-icons';
+export class BreadcrumbComponent {
+  constructor() {
+    this.active = false;
+    this.first = undefined;
+    this.href = undefined;
+  }
+  render() {
+    return (h(Host, null, !this.first && h("admiralty-icon", { class: "breadcrumb-icon", "icon-name": faChevronRight.iconName }), h("a", { class: { active: this.active }, href: this.href || '#' }, h("slot", null))));
+  }
+  static get is() { return "admiralty-breadcrumb"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["breadcrumb.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["breadcrumb.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "active": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When `true` the breadcrumb will by styled to show that it is the\ncurrently active breadcrumb. Defaults to `true` for the\nlast breadcrumb if it is not set on any."
+        },
+        "attribute": "active",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "first": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "When set to `true` the breadcrumb will not be prefixed with a chevron."
+            }],
+          "text": ""
+        },
+        "attribute": "first",
+        "reflect": false
+      },
+      "href": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | undefined",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Contains a URL or a URL fragment that the hyperlink points to."
+        },
+        "attribute": "href",
+        "reflect": false
+      }
+    };
+  }
+}
+//# sourceMappingURL=breadcrumb.js.map

package/dist/collection/components/breadcrumb/breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAOnE,MAAM,OAAO,mBAAmB;;kBAMb,KAAK;;;;EAatB,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACF,CAAC,IAAI,CAAC,KAAK,IAAI,sBAAgB,KAAK,EAAC,iBAAiB,eAAY,cAAc,CAAC,QAAQ,GAAmB;MAC7G,SAAG,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,GAAG;QACvD,eAAa,CACX,CACC,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\nimport { faChevronRight } from '@fortawesome/free-solid-svg-icons';\n\n@Component({\n  tag: 'admiralty-breadcrumb',\n  styleUrl: 'breadcrumb.scss',\n  shadow: true,\n})\nexport class BreadcrumbComponent {\n  /**\n   * When `true` the breadcrumb will by styled to show that it is the\n   * currently active breadcrumb. Defaults to `true` for the\n   * last breadcrumb if it is not set on any.\n   */\n  @Prop() active = false;\n\n  /**\n   * @internal\n   * When set to `true` the breadcrumb will not be prefixed with a chevron.\n   */\n  @Prop() first!: boolean;\n\n  /**\n   * Contains a URL or a URL fragment that the hyperlink points to.\n   */\n  @Prop() href: string | undefined;\n\n  render() {\n    return (\n      <Host>\n        {!this.first && <admiralty-icon class=\"breadcrumb-icon\" icon-name={faChevronRight.iconName}></admiralty-icon>}\n        <a class={{ active: this.active }} href={this.href || '#'}>\n          <slot></slot>\n        </a>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/breadcrumbs/breadcrumbs.css

@@ -0,0 +1,25 @@
+/* Core Palette */
+/* Supporting Palette */
+/* Secondary Palette */
+/* Digital Product Colours */
+/* Utility Colours */
+/* Button Colours */
+/* Primary */
+/* Secondary */
+/* Link Colours */
+/* Nav colours */
+/* Table colours */
+/* Tab colours */
+/* form text input colours */
+/* form textarea colours */
+/* radio button */
+/* checkbox */
+/* code snippet */
+.breadcrumbs {
+  width: 100%;
+  box-sizing: border-box;
+  display: inline-flex;
+  border-bottom: 1px solid #d8d8d8;
+  background-color: #ffffff;
+  padding: 0 20px;
+}

package/dist/collection/components/breadcrumbs/breadcrumbs.js

@@ -0,0 +1,48 @@
+import { h } from '@stencil/core';
+export class BreadcrumbsComponent {
+  constructor() {
+    this.breadcrumbsInit = () => {
+      this.setActiveBreadcrumb();
+    };
+    this.setActiveBreadcrumb = () => {
+      const breadcrumbs = this.getBreadcrumbs();
+      // Check if an active breadcrumb exists already
+      const active = breadcrumbs.find(breadcrumb => breadcrumb.active);
+      // Set the active status
+      for (const breadcrumb of breadcrumbs) {
+        const isFirst = breadcrumb === breadcrumbs[0];
+        const isLast = breadcrumb === breadcrumbs[breadcrumbs.length - 1];
+        if (isFirst) {
+          breadcrumb.first = true;
+        }
+        // When no active breadcrumb, set the last one to active
+        if (!active && isLast) {
+          breadcrumb.active = true;
+        }
+      }
+    };
+    this.getBreadcrumbs = () => {
+      return Array.from(this.el.querySelectorAll('admiralty-breadcrumb'));
+    };
+  }
+  componentWillLoad() {
+    this.breadcrumbsInit();
+  }
+  render() {
+    return (h("nav", { class: "breadcrumbs", "aria-label": "breadcrumbs" }, h("slot", null)));
+  }
+  static get is() { return "admiralty-breadcrumbs"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["breadcrumbs.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["breadcrumbs.css"]
+    };
+  }
+  static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=breadcrumbs.js.map

package/dist/collection/components/breadcrumbs/breadcrumbs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.js","sourceRoot":"","sources":["../../../src/components/breadcrumbs/breadcrumbs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOtD,MAAM,OAAO,oBAAoB;EALjC;IAYU,oBAAe,GAAG,GAAG,EAAE;MAC7B,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC,CAAC;IAEM,wBAAmB,GAAG,GAAG,EAAE;MACjC,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;MAE1C,+CAA+C;MAC/C,MAAM,MAAM,GAAG,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;MAEjE,wBAAwB;MACxB,KAAK,MAAM,UAAU,IAAI,WAAW,EAAE;QACpC,MAAM,OAAO,GAAG,UAAU,KAAK,WAAW,CAAC,CAAC,CAAC,CAAC;QAC9C,MAAM,MAAM,GAAG,UAAU,KAAK,WAAW,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QAElE,IAAI,OAAO,EAAE;UACX,UAAU,CAAC,KAAK,GAAG,IAAI,CAAC;SACzB;QAED,wDAAwD;QACxD,IAAI,CAAC,MAAM,IAAI,MAAM,EAAE;UACrB,UAAU,CAAC,MAAM,GAAG,IAAI,CAAC;SAC1B;OACF;IACH,CAAC,CAAC;IAEM,mBAAc,GAAG,GAAqC,EAAE;MAC9D,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,sBAAsB,CAAC,CAAC,CAAC;IACtE,CAAC,CAAC;GASH;EAzCC,iBAAiB;IACf,IAAI,CAAC,eAAe,EAAE,CAAC;EACzB,CAAC;EAgCD,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAC,aAAa,gBAAY,aAAa;MAC/C,eAAa,CACT,CACP,CAAC;EACJ,CAAC;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h } from '@stencil/core';\n\n@Component({\n  tag: 'admiralty-breadcrumbs',\n  styleUrl: 'breadcrumbs.scss',\n  shadow: true,\n})\nexport class BreadcrumbsComponent {\n  @Element() el!: HTMLElement;\n\n  componentWillLoad() {\n    this.breadcrumbsInit();\n  }\n\n  private breadcrumbsInit = () => {\n    this.setActiveBreadcrumb();\n  };\n\n  private setActiveBreadcrumb = () => {\n    const breadcrumbs = this.getBreadcrumbs();\n\n    // Check if an active breadcrumb exists already\n    const active = breadcrumbs.find(breadcrumb => breadcrumb.active);\n\n    // Set the active status\n    for (const breadcrumb of breadcrumbs) {\n      const isFirst = breadcrumb === breadcrumbs[0];\n      const isLast = breadcrumb === breadcrumbs[breadcrumbs.length - 1];\n\n      if (isFirst) {\n        breadcrumb.first = true;\n      }\n\n      // When no active breadcrumb, set the last one to active\n      if (!active && isLast) {\n        breadcrumb.active = true;\n      }\n    }\n  };\n\n  private getBreadcrumbs = (): HTMLAdmiraltyBreadcrumbElement[] => {\n    return Array.from(this.el.querySelectorAll('admiralty-breadcrumb'));\n  };\n\n  render() {\n    return (\n      <nav class=\"breadcrumbs\" aria-label=\"breadcrumbs\">\n        <slot></slot>\n      </nav>\n    );\n  }\n}\n"]}

package/dist/collection/components/button/button.css

@@ -0,0 +1,384 @@
+/* Device Sizes - matching layout breakpoints */
+@media (max-width: 1023px) {
+  .desktop-only {
+    display: none;
+  }
+}
+
+@media (min-width: 1024px) {
+  .not-desktop {
+    display: none;
+  }
+}
+
+@media (min-width: 1024px) {
+  .tablet-only {
+    display: none;
+  }
+}
+@media (max-width: 479px) and (min-width: 0px) {
+  .tablet-only {
+    display: none;
+  }
+}
+
+@media (max-width: 479px) and (min-width: 0px) {
+  .tablet-or-desktop {
+    display: none;
+  }
+}
+
+@media (min-width: 1024px) {
+  .phone-or-tablet {
+    display: none;
+  }
+}
+
+@media (min-width: 1024px) {
+  .phone-only {
+    display: none;
+  }
+}
+@media (max-width: 1023px) and (min-width: 480px) {
+  .phone-only {
+    display: none;
+  }
+}
+
+/* Core Palette */
+/* Supporting Palette */
+/* Secondary Palette */
+/* Digital Product Colours */
+/* Utility Colours */
+/* Button Colours */
+/* Primary */
+/* Secondary */
+/* Link Colours */
+/* Nav colours */
+/* Table colours */
+/* Tab colours */
+/* form text input colours */
+/* form textarea colours */
+/* radio button */
+/* checkbox */
+/* code snippet */
+/* Primary Buttons */
+button.primary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: "JohnstonITC", Helvetica, sans-serif;
+  font-size: 18px;
+  line-height: 24px;
+  font-size: 21px;
+  font-weight: normal;
+  background-color: unset;
+  cursor: pointer;
+  height: 60px;
+  padding: 15px 18px;
+  white-space: nowrap;
+  min-width: 200px;
+  background-color: #09315b;
+  color: #ffffff;
+  border: 2px solid #09315b;
+}
+button.primary:focus {
+  outline: 3px solid #ffdd00;
+}
+button.primary:disabled {
+  cursor: default;
+}
+button.primary:disabled * {
+  pointer-events: none;
+}
+button.primary i {
+  display: inline-block;
+  font-size: 24px;
+  color: #ffffff;
+  padding-left: 15px;
+}
+@media (max-width: 1023px) {
+  button.primary {
+    min-width: unset;
+    max-width: 200px;
+    width: 100%;
+    height: 50px;
+    padding: 10px 18px;
+  }
+}
+button.primary i {
+  display: inline-block;
+  font-size: 24px;
+  color: #ffffff;
+  padding-left: 15px;
+}
+button.primary:hover {
+  background-color: #03284f;
+  border: 2px solid #03284f;
+}
+button.primary:enabled:active {
+  background-color: #ffffff;
+  border: 2px solid #09315b;
+  color: #09315b;
+}
+button.primary:enabled:active i {
+  color: #09315b;
+}
+button.primary:enabled:active p {
+  color: #09315b;
+}
+button.primary:disabled {
+  background-color: #adadad;
+  border: 2px solid #adadad;
+}
+
+/* Secondary Buttons */
+button.secondary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: "JohnstonITC", Helvetica, sans-serif;
+  font-size: 18px;
+  line-height: 24px;
+  font-size: 21px;
+  font-weight: normal;
+  background-color: unset;
+  cursor: pointer;
+  height: 60px;
+  padding: 15px 18px;
+  white-space: nowrap;
+  min-width: 200px;
+  background-color: #ffffff;
+  color: #05284e;
+  border: 2px solid #05284e;
+}
+button.secondary:focus {
+  outline: 3px solid #ffdd00;
+}
+button.secondary:disabled {
+  cursor: default;
+}
+button.secondary:disabled * {
+  pointer-events: none;
+}
+button.secondary i {
+  display: inline-block;
+  font-size: 24px;
+  color: #ffffff;
+  padding-left: 15px;
+}
+@media (max-width: 1023px) {
+  button.secondary {
+    min-width: unset;
+    max-width: 200px;
+    width: 100%;
+    height: 50px;
+    padding: 10px 18px;
+  }
+}
+button.secondary i {
+  display: inline-block;
+  font-size: 24px;
+  color: #ffffff;
+  padding-left: 15px;
+}
+button.secondary:hover {
+  background-color: #eeeeee;
+  border: 2px solid #05284e;
+}
+button.secondary:enabled:active {
+  background-color: #05284e;
+  border: 2px solid #05284e;
+  color: #ffffff;
+}
+button.secondary:enabled:active i {
+  color: #ffffff;
+}
+button.secondary:enabled:active p {
+  color: #ffffff;
+}
+button.secondary:disabled {
+  background-color: #adadad;
+  border: 2px solid #adadad;
+}
+button.secondary i {
+  color: #05284e;
+}
+
+/* Warning Buttons */
+button.warning {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: "JohnstonITC", Helvetica, sans-serif;
+  font-size: 18px;
+  line-height: 24px;
+  font-size: 21px;
+  font-weight: normal;
+  background-color: unset;
+  cursor: pointer;
+  height: 60px;
+  padding: 15px 18px;
+  white-space: nowrap;
+  min-width: 200px;
+  background-color: #e20d0d;
+  color: #ffffff;
+  border: 2px solid #e20d0d;
+}
+button.warning:focus {
+  outline: 3px solid #ffdd00;
+}
+button.warning:disabled {
+  cursor: default;
+}
+button.warning:disabled * {
+  pointer-events: none;
+}
+button.warning i {
+  display: inline-block;
+  font-size: 24px;
+  color: #ffffff;
+  padding-left: 15px;
+}
+@media (max-width: 1023px) {
+  button.warning {
+    min-width: unset;
+    max-width: 200px;
+    width: 100%;
+    height: 50px;
+    padding: 10px 18px;
+  }
+}
+button.warning i {
+  display: inline-block;
+  font-size: 24px;
+  color: #ffffff;
+  padding-left: 15px;
+}
+button.warning:hover {
+  background-color: #bd0404;
+  border: 2px solid #bd0404;
+}
+button.warning:enabled:active {
+  background-color: #ffffff;
+  border: 2px solid #e20d0d;
+  color: #e20d0d;
+}
+button.warning:enabled:active i {
+  color: #e20d0d;
+}
+button.warning:enabled:active p {
+  color: #e20d0d;
+}
+button.warning:disabled {
+  background-color: #adadad;
+  border: 2px solid #adadad;
+}
+button.warning:disabled > * {
+  opacity: 0.5;
+}
+button.warning i {
+  color: #ffffff;
+}
+
+/* Text Buttons */
+button.text {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: "JohnstonITC", Helvetica, sans-serif;
+  font-size: 18px;
+  line-height: 24px;
+  font-size: 21px;
+  font-weight: normal;
+  background-color: unset;
+  cursor: pointer;
+  color: #05284e;
+}
+button.text:focus {
+  outline: 3px solid #ffdd00;
+}
+button.text:disabled {
+  cursor: default;
+}
+button.text:disabled * {
+  pointer-events: none;
+}
+button.text i {
+  display: inline-block;
+  font-size: 24px;
+  color: #ffffff;
+  padding-left: 15px;
+}
+button.text:enabled:active {
+  color: #05284e;
+}
+button.text:enabled:active i {
+  color: #05284e;
+}
+button.text:enabled:active p {
+  color: #05284e;
+}
+button.text:disabled {
+  color: #adadad;
+}
+button.text:disabled > * {
+  opacity: 0.5;
+}
+button.text:focus {
+  outline-offset: 3px;
+}
+button.text i {
+  color: #05284e;
+}
+
+/* Icon Buttons */
+button.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: "JohnstonITC", Helvetica, sans-serif;
+  font-size: 18px;
+  line-height: 24px;
+  font-size: 21px;
+  font-weight: normal;
+  background-color: unset;
+  cursor: pointer;
+  min-height: 50px;
+  min-width: 50px;
+  padding: 10px 10px;
+  background-color: var(--button-icon-background-colour, #eeeeee);
+  color: #09315b;
+  border: 2px solid #09315b;
+}
+button.icon:focus {
+  outline: 3px solid #ffdd00;
+}
+button.icon:disabled {
+  cursor: default;
+}
+button.icon:disabled * {
+  pointer-events: none;
+}
+button.icon i {
+  display: inline-block;
+  font-size: 24px;
+  color: #ffffff;
+  padding-left: 15px;
+}
+button.icon:enabled:active {
+  background-color: #09315b;
+  color: #ffffff;
+}
+button.icon:disabled {
+  opacity: 0.3;
+}
+button.icon:active:disabled {
+  background-color: #eeeeee;
+}
+button.icon i {
+  margin: auto;
+  font-size: unset;
+  color: unset;
+  padding-left: unset;
+}