@rededor/cura 0.3.2 → 0.3.4-alpha.0

package/dist/collection/api/theme-presets/theme-default.js

@@ -19,11 +19,11 @@ export const ThemeDefault = {
       '900': '#292017'
     },
     accent: {
-      '100': '#F9E8D5',
-      '300': '#E4A04F',
-      '500': '#DF8D2C',
-      '700': '#955E1D',
-      '900': '#2D1C09'
+      '100': '#FFC27B',
+      '300': '#FFA84A',
+      '500': '#FF8200',
+      '700': '#D7720A',
+      '900': '#9B5A1A'
     }
   },
   /* Spacing */
@@ -47,3 +47,4 @@ export const ThemeDefault = {
     },
   }
 };
+//# sourceMappingURL=theme-default.js.map

package/dist/collection/api/theme-presets/theme-default.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-default.js","sourceRoot":"","sources":["../../../src/api/theme-presets/theme-default.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG;EAC1B,YAAY;EACZ,KAAK,EAAE;IACL,OAAO,EAAE;MACP,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE,SAAS;KACjB;IACD,SAAS,EAAE;MACT,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE,SAAS;KACjB;IACD,MAAM,EAAE;MACN,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE,SAAS;KACjB;GACF;EACD,aAAa;EACb,OAAO,EAAE;IACP,IAAI,EAAE,CAAC;GACR;EACD,WAAW;EACX,IAAI,EAAE;IACJ,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,SAAS;IAChB,IAAI,EAAE,wCAAwC;IAC9C,OAAO,EAAE,wCAAwC;IACjD,OAAO,EAAE,wCAAwC;IACjD,OAAO,EAAE;MACP,IAAI,EAAE,GAAG;MACT,KAAK,EAAE,GAAG;MACV,OAAO,EAAE,GAAG;MACZ,MAAM,EAAE,GAAG;MACX,IAAI,EAAE,GAAG;MACT,KAAK,EAAE,GAAG;KACX;GACF;CACF,CAAC","sourcesContent":["/**\n * Cura Default Theme\n */\nexport const ThemeDefault = {\n  /* Colors */\n  color: {\n    primary: {\n      '100': '#71C5E8',\n      '300': '#449CD5',\n      '500': '#005EB8',\n      '700': '#004890',\n      '900': '#002855'\n    },\n    secondary: {\n      '100': '#F5ECE3',\n      '300': '#DDC0A2',\n      '500': '#CCA074',\n      '700': '#886B4D',\n      '900': '#292017'\n    },\n    accent: {\n      '100': '#FFC27B',\n      '300': '#FFA84A',\n      '500': '#FF8200',\n      '700': '#D7720A',\n      '900': '#9B5A1A'\n    }\n  },\n  /* Spacing */\n  spacing: {\n    base: 4,\n  },\n  /* Fonts */\n  font: {\n    size: '14px',\n    color: '#4A4A4A',\n    body: \"'Roboto', Arial, Helvetica, sans-serif\",\n    heading: \"'Roboto', Arial, Helvetica, sans-serif\",\n    display: \"'Roboto', Arial, Helvetica, sans-serif\",\n    weights: {\n      thin: 100,\n      light: 300,\n      regular: 400,\n      medium: 500,\n      bold: 700,\n      black: 900\n    },\n  }\n};\n"]}

package/dist/collection/api/theme-presets/theme-maternity.js

@@ -19,6 +19,14 @@ export const ThemeMaternity = Object.assign(Object.assign({}, ThemeDefault), {
       '500': '#189AB4',
       '700': '#001C58',
       '900': '#430E31'
+    },
+    accent: {
+      '100': '#FCEFF6',
+      '300': '#FFBFE5',
+      '500': '#CD4D9A',
+      '700': '#99126C',
+      '900': '#00133B'
     }
   }
 });
+//# sourceMappingURL=theme-maternity.js.map

package/dist/collection/api/theme-presets/theme-maternity.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-maternity.js","sourceRoot":"","sources":["../../../src/api/theme-presets/theme-maternity.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,MAAM,CAAC,MAAM,cAAc,mCAEtB,YAAY;EAEf,YAAY;EACZ,YAAY;EACZ,KAAK,EAAE;IACL,OAAO,EAAE;MACP,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE,SAAS;KACjB;IACD,SAAS,EAAE;MACT,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE,SAAS;KACjB;IACD,MAAM,EAAE;MACN,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE,SAAS;KACjB;GACF,GAEF,CAAC","sourcesContent":["/**\n * Maternity Theme\n */\nimport { ThemeDefault } from \"./theme-default\";\n\nexport const ThemeMaternity = {\n  /* Get default theme */\n  ...ThemeDefault,\n  \n  /* Custom */\n  /* Colors */\n  color: {\n    primary: {\n      '100': '#FCEFF6',\n      '300': '#FFBFE5',\n      '500': '#CD4D9A',\n      '700': '#99126C',\n      '900': '#00133B'\n    },\n    secondary: {\n      '100': '#EDF3FF',\n      '300': '#BDD2FF',\n      '500': '#189AB4',\n      '700': '#001C58',\n      '900': '#430E31'\n    },\n    accent: {\n      '100': '#FCEFF6',\n      '300': '#FFBFE5',\n      '500': '#CD4D9A',\n      '700': '#99126C',\n      '900': '#00133B'\n    }\n  },\n\n};\n"]}

package/dist/collection/api/theme-presets/theme-oncology.js

@@ -7,11 +7,11 @@ export const ThemeOncology = Object.assign(Object.assign({}, ThemeDefault), {
   /* Colors */
   color: {
     primary: {
-      '100': '#99CFFF',
-      '300': '#47A9FF',
-      '500': '#0083F5',
-      '700': '#006DCC',
-      '900': '#0058A4',
+      '100': '#AABEE1',
+      '300': '#557EC4',
+      '500': '#003DA6',
+      '700': '#00296F',
+      '900': '#000C21'
     },
     secondary: {
       '100': '#CDD7E3',
@@ -20,19 +20,34 @@ export const ThemeOncology = Object.assign(Object.assign({}, ThemeDefault), {
       '700': '#365E8F',
       '900': '#043673',
     },
-    aux1: {
-      '100': '#AABEE1',
-      '300': '#557EC4',
-      '500': '#003DA6',
-      '700': '#00296F',
-      '900': '#000C21',
+    accent: {
+      '100': '#99CFFF',
+      '300': '#47A9FF',
+      '500': '#0083F5',
+      '700': '#006DCC',
+      '900': '#0058A4',
     },
-    aux2: {
+    aux: {
       '100': '#DAF2EF',
       '300': '#84D4CA',
       '500': '#47BFB0',
       '700': '#2F7F75',
       '900': '#0E2623',
     },
+  }, font: {
+    size: '14px',
+    color: '#4A4A4A',
+    body: "'Hanken Grotesk', Arial, Helvetica, sans-serif",
+    heading: "'Hanken Grotesk', Arial, Helvetica, sans-serif",
+    display: "'Hanken Grotesk', Arial, Helvetica, sans-serif",
+    weights: {
+      thin: 100,
+      light: 300,
+      regular: 400,
+      medium: 500,
+      bold: 700,
+      black: 900
+    },
   }
 });
+//# sourceMappingURL=theme-oncology.js.map

package/dist/collection/api/theme-presets/theme-oncology.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-oncology.js","sourceRoot":"","sources":["../../../src/api/theme-presets/theme-oncology.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,MAAM,CAAC,MAAM,aAAa,mCAErB,YAAY;EAEf,YAAY;EACZ,YAAY;EACZ,KAAK,EAAE;IACL,OAAO,EAAE;MACP,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE,SAAS;KACjB;IACD,SAAS,EAAE;MACT,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE,SAAS;KACjB;IACD,MAAM,EAAE;MACN,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE,SAAS;KACjB;IACD,GAAG,EAAE;MACH,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE,SAAS;KACjB;GACF,EACD,IAAI,EAAE;IACJ,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,SAAS;IAChB,IAAI,EAAE,gDAAgD;IACtD,OAAO,EAAE,gDAAgD;IACzD,OAAO,EAAE,gDAAgD;IACzD,OAAO,EAAE;MACP,IAAI,EAAE,GAAG;MACT,KAAK,EAAE,GAAG;MACV,OAAO,EAAE,GAAG;MACZ,MAAM,EAAE,GAAG;MACX,IAAI,EAAE,GAAG;MACT,KAAK,EAAE,GAAG;KACX;GACF,GACF,CAAC","sourcesContent":["/**\n * Oncology Theme\n */\nimport { ThemeDefault } from \"./theme-default\";\n\nexport const ThemeOncology = {\n  /* Get default theme */\n  ...ThemeDefault,\n\n  /* Custom */\n  /* Colors */\n  color: {\n    primary: {\n      '100': '#AABEE1',\n      '300': '#557EC4',\n      '500': '#003DA6',\n      '700': '#00296F',\n      '900': '#000C21'\n    },\n    secondary: {\n      '100': '#CDD7E3',\n      '300': '#9BAFC7',\n      '500': '#6886AB',\n      '700': '#365E8F',\n      '900': '#043673',\n    },\n    accent: {\n      '100': '#99CFFF',\n      '300': '#47A9FF',\n      '500': '#0083F5',\n      '700': '#006DCC',\n      '900': '#0058A4',\n    },\n    aux: {\n      '100': '#DAF2EF',\n      '300': '#84D4CA',\n      '500': '#47BFB0',\n      '700': '#2F7F75',\n      '900': '#0E2623',\n    },\n  },\n  font: {\n    size: '14px',\n    color: '#4A4A4A',\n    body: \"'Hanken Grotesk', Arial, Helvetica, sans-serif\",\n    heading: \"'Hanken Grotesk', Arial, Helvetica, sans-serif\",\n    display: \"'Hanken Grotesk', Arial, Helvetica, sans-serif\",\n    weights: {\n      thin: 100,\n      light: 300,\n      regular: 400,\n      medium: 500,\n      bold: 700,\n      black: 900\n    },\n  }\n};\n"]}

package/dist/collection/api/theme-presets/theme-presets.js

@@ -6,3 +6,4 @@ export const ThemePresets = {
   'maternidade': ThemeMaternity,
   'oncologia': ThemeOncology,
 };
+//# sourceMappingURL=theme-presets.js.map

package/dist/collection/api/theme-presets/theme-presets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-presets.js","sourceRoot":"","sources":["../../../src/api/theme-presets/theme-presets.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,MAAM,CAAC,MAAM,YAAY,GAAG;EAC1B,SAAS,EAAE,YAAY;EACvB,aAAa,EAAE,cAAc;EAC7B,WAAW,EAAE,aAAa;CAC3B,CAAC","sourcesContent":["import { ThemeDefault } from './theme-default';\nimport { ThemeMaternity } from './theme-maternity';\nimport { ThemeOncology } from './theme-oncology';\n\nexport const ThemePresets = {\n  'default': ThemeDefault,\n  'maternidade': ThemeMaternity,\n  'oncologia': ThemeOncology,\n};\n"]}

package/dist/collection/assets/icons/iconset-default-list.js

@@ -1 +1,2 @@
 export default ["360", "accessibility", "alertCircle", "alertTriangle", "arrowDown", "arrowDownCircle", "arrowLeft", "arrowLeftCircle", "arrowRight", "arrowRightCircle", "arrowUp", "arrowUpCircle", "attach", "avatarF", "avatarM", "biometry", "bloodGroup", "calendar", "cam", "camOff", "central", "chatCircle", "check", "checkBadge", "checkCircle", "checkDouble", "clock", "close", "closeCircle", "collapse", "config", "delete", "desktop", "deslike", "download", "duplicate", "edit", "exam", "expand", "facebook", "fileBmp", "fileJpg", "filePdf", "filePng", "fileUpload", "fileXls", "filter", "fullscreen", "gallery", "geotag", "google", "hate", "healthPlan", "height", "height2", "home", "horizontalList", "imageUp", "info2", "infoCircle", "instagram", "key", "language", "language2", "languageEN", "languagePT", "lattes", "like", "likeHand", "link", "linkExternal", "linkedin", "list", "login", "logout", "love", "mail", "mail2", "medical", "menuHamburguer", "menuKebab", "menuMeatballs", "mic", "micOff", "minus", "minusCircle", "minusSquare", "mobile", "neutral", "news", "notification", "order", "partner", "phone", "play", "plus", "plusCircle", "plusSquare", "print", "profile", "profile2", "pulldownG", "pulldownP", "pullupG", "pullupP", "questionCircle", "questionSquare", "range", "reload", "schedule", "search", "secure", "share", "share2", "sound", "soundOff", "subItem", "target", "team", "twitter", "unLink", "unSecure", "unlikeHand", "upload", "verticalList", "viewFalse", "viewTrue", "weight", "whatsapp", "wifi", "youtube", "zoomIn", "zoomOut"];
+//# sourceMappingURL=iconset-default-list.js.map

package/dist/collection/assets/icons/iconset-default-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"iconset-default-list.js","sourceRoot":"","sources":["../../../src/assets/icons/iconset-default-list.ts"],"names":[],"mappings":"AAAA,eAAe,CAAC,KAAK,EAAC,eAAe,EAAC,aAAa,EAAC,eAAe,EAAC,WAAW,EAAC,iBAAiB,EAAC,WAAW,EAAC,iBAAiB,EAAC,YAAY,EAAC,kBAAkB,EAAC,SAAS,EAAC,eAAe,EAAC,QAAQ,EAAC,SAAS,EAAC,SAAS,EAAC,UAAU,EAAC,YAAY,EAAC,UAAU,EAAC,KAAK,EAAC,QAAQ,EAAC,SAAS,EAAC,YAAY,EAAC,OAAO,EAAC,YAAY,EAAC,aAAa,EAAC,aAAa,EAAC,OAAO,EAAC,OAAO,EAAC,aAAa,EAAC,UAAU,EAAC,QAAQ,EAAC,QAAQ,EAAC,SAAS,EAAC,SAAS,EAAC,UAAU,EAAC,WAAW,EAAC,MAAM,EAAC,MAAM,EAAC,QAAQ,EAAC,UAAU,EAAC,SAAS,EAAC,SAAS,EAAC,SAAS,EAAC,SAAS,EAAC,YAAY,EAAC,SAAS,EAAC,QAAQ,EAAC,YAAY,EAAC,SAAS,EAAC,QAAQ,EAAC,QAAQ,EAAC,MAAM,EAAC,YAAY,EAAC,QAAQ,EAAC,SAAS,EAAC,MAAM,EAAC,gBAAgB,EAAC,SAAS,EAAC,OAAO,EAAC,YAAY,EAAC,WAAW,EAAC,KAAK,EAAC,UAAU,EAAC,WAAW,EAAC,YAAY,EAAC,YAAY,EAAC,QAAQ,EAAC,MAAM,EAAC,UAAU,EAAC,MAAM,EAAC,cAAc,EAAC,UAAU,EAAC,MAAM,EAAC,OAAO,EAAC,QAAQ,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,SAAS,EAAC,gBAAgB,EAAC,WAAW,EAAC,eAAe,EAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,aAAa,EAAC,aAAa,EAAC,QAAQ,EAAC,SAAS,EAAC,MAAM,EAAC,cAAc,EAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAC,MAAM,EAAC,MAAM,EAAC,YAAY,EAAC,YAAY,EAAC,OAAO,EAAC,SAAS,EAAC,UAAU,EAAC,WAAW,EAAC,WAAW,EAAC,SAAS,EAAC,SAAS,EAAC,gBAAgB,EAAC,gBAAgB,EAAC,OAAO,EAAC,QAAQ,EAAC,UAAU,EAAC,QAAQ,EAAC,QAAQ,EAAC,OAAO,EAAC,QAAQ,EAAC,OAAO,EAAC,UAAU,EAAC,SAAS,EAAC,QAAQ,EAAC,MAAM,EAAC,SAAS,EAAC,QAAQ,EAAC,UAAU,EAAC,YAAY,EAAC,QAAQ,EAAC,cAAc,EAAC,WAAW,EAAC,UAAU,EAAC,QAAQ,EAAC,UAAU,EAAC,MAAM,EAAC,SAAS,EAAC,QAAQ,EAAC,SAAS,CAAC,CAAC","sourcesContent":["export default [\"360\",\"accessibility\",\"alertCircle\",\"alertTriangle\",\"arrowDown\",\"arrowDownCircle\",\"arrowLeft\",\"arrowLeftCircle\",\"arrowRight\",\"arrowRightCircle\",\"arrowUp\",\"arrowUpCircle\",\"attach\",\"avatarF\",\"avatarM\",\"biometry\",\"bloodGroup\",\"calendar\",\"cam\",\"camOff\",\"central\",\"chatCircle\",\"check\",\"checkBadge\",\"checkCircle\",\"checkDouble\",\"clock\",\"close\",\"closeCircle\",\"collapse\",\"config\",\"delete\",\"desktop\",\"deslike\",\"download\",\"duplicate\",\"edit\",\"exam\",\"expand\",\"facebook\",\"fileBmp\",\"fileJpg\",\"filePdf\",\"filePng\",\"fileUpload\",\"fileXls\",\"filter\",\"fullscreen\",\"gallery\",\"geotag\",\"google\",\"hate\",\"healthPlan\",\"height\",\"height2\",\"home\",\"horizontalList\",\"imageUp\",\"info2\",\"infoCircle\",\"instagram\",\"key\",\"language\",\"language2\",\"languageEN\",\"languagePT\",\"lattes\",\"like\",\"likeHand\",\"link\",\"linkExternal\",\"linkedin\",\"list\",\"login\",\"logout\",\"love\",\"mail\",\"mail2\",\"medical\",\"menuHamburguer\",\"menuKebab\",\"menuMeatballs\",\"mic\",\"micOff\",\"minus\",\"minusCircle\",\"minusSquare\",\"mobile\",\"neutral\",\"news\",\"notification\",\"order\",\"partner\",\"phone\",\"play\",\"plus\",\"plusCircle\",\"plusSquare\",\"print\",\"profile\",\"profile2\",\"pulldownG\",\"pulldownP\",\"pullupG\",\"pullupP\",\"questionCircle\",\"questionSquare\",\"range\",\"reload\",\"schedule\",\"search\",\"secure\",\"share\",\"share2\",\"sound\",\"soundOff\",\"subItem\",\"target\",\"team\",\"twitter\",\"unLink\",\"unSecure\",\"unlikeHand\",\"upload\",\"verticalList\",\"viewFalse\",\"viewTrue\",\"weight\",\"whatsapp\",\"wifi\",\"youtube\",\"zoomIn\",\"zoomOut\"];"]}

package/dist/collection/collection-manifest.json

@@ -1,5 +1,6 @@
 {
   "entries": [
+    "./components/buttons/cura-button/cura-button.js",
     "./components/cura-icon/cura-icon.js",
     "./components/cura-icons-view/cura-icons-view.js",
     "./components/cura-page-template/cura-page-template.js",
@@ -9,8 +10,8 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.18.1",
-    "typescriptVersion": "4.7.4"
+    "version": "3.3.0",
+    "typescriptVersion": "5.0.4"
   },
   "collections": [],
   "bundles": [],

package/dist/collection/components/buttons/cura-button/cura-button.css

@@ -0,0 +1,70 @@
+:host {
+  display: inline-block;
+  vertical-align: middle;
+}
+:host button, :host a {
+  outline: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  padding: calc(var(--base-spacing) * 3.5px) calc(var(--base-spacing) * 4px);
+  min-height: calc(var(--base-spacing) * 13px);
+  display: flex;
+  width: 100%;
+  align-items: center;
+  background-color: var(--color-base);
+  border-width: 1px;
+  border-color: var(--color-dark);
+  border-style: solid;
+  border-radius: 4px;
+  transition: background-color 0.12s linear, box-shadow 0.12s linear, border-color 0.12s linear;
+  cursor: pointer;
+}
+:host button:hover, :host a:hover {
+  background-color: var(--color-light);
+  border-color: var(--color-base);
+  box-shadow: 0 4px 8px 0 var(--neutral-light);
+}
+:host button .label, :host a .label {
+  flex: 1;
+  color: var(--neutral-black);
+}
+:host button.icon-left cura-icon, :host a.icon-left cura-icon {
+  margin-right: calc(var(--base-spacing) * 3px);
+}
+:host button.icon-right, :host a.icon-right {
+  flex-direction: row-reverse;
+}
+:host button.icon-right cura-icon, :host a.icon-right cura-icon {
+  margin-left: calc(var(--base-spacing) * 3px);
+}
+:host button.medium, :host a.medium {
+  padding: calc(var(--base-spacing) * 2.75px) calc(var(--base-spacing) * 4px);
+  min-height: calc(var(--base-spacing) * 11px);
+}
+:host button.medium:hover, :host a.medium:hover {
+  box-shadow: 0 3px 6px 0 var(--neutral-light);
+}
+:host button.small, :host a.small {
+  padding: calc(var(--base-spacing) * 1.5px) calc(var(--base-spacing) * 3px);
+  min-height: calc(var(--base-spacing) * 8px);
+}
+:host button.small:hover, :host a.small:hover {
+  box-shadow: 0 2px 5px 0 var(--neutral-light);
+}
+:host button.small.icon-left cura-icon, :host a.small.icon-left cura-icon {
+  margin-right: calc(var(--base-spacing) * 2.5px);
+}
+:host button.small.icon-right cura-icon, :host a.small.icon-right cura-icon {
+  margin-left: calc(var(--base-spacing) * 2.5px);
+}
+:host button.disabled, :host a.disabled {
+  cursor: not-allowed;
+  background-color: var(--neutral-light);
+  border-color: var(--neutral-base);
+}
+:host button.disabled:hover, :host a.disabled:hover {
+  box-shadow: none;
+}
+:host button.disabled .label, :host a.disabled .label {
+  color: var(--neutral-dark);
+}

package/dist/collection/components/buttons/cura-button/cura-button.js

@@ -0,0 +1,255 @@
+import { Host, h } from '@stencil/core';
+export class CuraButton {
+  constructor() {
+    this.type = 'primary';
+    this.size = 'large';
+    this.disabled = false;
+    this.isLoading = false;
+    this.iconName = undefined;
+    this.iconset = 'default';
+    this.iconPosition = 'left';
+    this.href = undefined;
+    this.target = "_self";
+    this.color = 'accent';
+    this.styles = {};
+  }
+  handleChangeColor() {
+    this.setColors();
+  }
+  connectedCallback() {
+    this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();
+    this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);
+    this.styles['--neutral-light'] = window.CuraAPI.theme.colors.getColor(`neutral-light`);
+    this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);
+    this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor(`neutral-dark`);
+    this.styles['--neutral-black'] = window.CuraAPI.theme.colors.getColor(`neutral-black`);
+    this.setColors();
+  }
+  getClasses() {
+    const classes = {};
+    classes[`button-${this.type.toLowerCase()}`] = true;
+    classes[`${this.size.toLowerCase()}`] = true;
+    classes[`icon-${this.iconPosition.toLowerCase()}`] = true;
+    classes['disabled'] = this.disabled;
+    return classes;
+  }
+  setColors() {
+    this.styles = Object.assign(Object.assign({}, this.styles), { '--color-light': window.CuraAPI.theme.colors.getColor(`${this.color}-light`), '--color-base': window.CuraAPI.theme.colors.getColor(`${this.color}-base`), '--color-dark': window.CuraAPI.theme.colors.getColor(`${this.color}-dark`) });
+  }
+  getIcon() {
+    if (!this.iconName)
+      return '';
+    const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;
+    const color = this.disabled ? 'neutral-dark' : `neutral-black`;
+    return h("cura-icon", { name: this.iconName, iconset: this.iconset, size: iconSize, color: color });
+  }
+  render() {
+    return (h(Host, null, this.href ? (h("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles }, this.getIcon(), h("span", { class: "label" }, h("slot", null)))) : (h("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null }, this.getIcon(), h("span", { class: "label" }, h("slot", null))))));
+  }
+  static get is() { return "cura-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["cura-button.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["cura-button.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Button type: primary (default) | outline | transparent | icon."
+        },
+        "attribute": "type",
+        "reflect": true,
+        "defaultValue": "'primary'"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Button size: small | medium | large (default)"
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "'large'"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Disabled state. Boolean."
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "isLoading": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Loading state. Boolean."
+        },
+        "attribute": "is-loading",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "iconName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Name of the icon to be used from iconset."
+        },
+        "attribute": "icon-name",
+        "reflect": true
+      },
+      "iconset": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Custom iconset if needed."
+        },
+        "attribute": "iconset",
+        "reflect": true,
+        "defaultValue": "'default'"
+      },
+      "iconPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Icon position: left (default) | right."
+        },
+        "attribute": "icon-position",
+        "reflect": true,
+        "defaultValue": "'left'"
+      },
+      "href": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Property href switch button to link."
+        },
+        "attribute": "href",
+        "reflect": true
+      },
+      "target": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set target if link."
+        },
+        "attribute": "target",
+        "reflect": false,
+        "defaultValue": "\"_self\""
+      },
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Color base from color scheme. Default: accent"
+        },
+        "attribute": "color",
+        "reflect": false,
+        "defaultValue": "'accent'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "styles": {}
+    };
+  }
+  static get watchers() {
+    return [{
+        "propName": "color",
+        "methodName": "handleChangeColor"
+      }];
+  }
+}
+//# sourceMappingURL=cura-button.js.map

package/dist/collection/components/buttons/cura-button/cura-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-button.js","sourceRoot":"","sources":["../../../../src/components/buttons/cura-button/cura-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Watch, State } from '@stencil/core';\n\n@Component({\n  tag: 'cura-button',\n  styleUrl: 'cura-button.scss',\n  shadow: true,\n})\nexport class CuraButton {\n\n  /**\n   * Button type: primary (default) | outline | transparent | icon.\n   */\n  @Prop({reflect: true}) type = 'primary';\n  /**\n   * Button size: small | medium | large (default)\n   */\n  @Prop({reflect: true}) size = 'large';\n\n  /**\n   * Disabled state. Boolean.\n   */\n  @Prop({reflect: true}) disabled = false;\n  /**\n   * Loading state. Boolean.\n   */\n  @Prop({reflect: true}) isLoading = false;\n  \n  /**\n   * Name of the icon to be used from iconset.\n   */\n  @Prop({reflect: true}) iconName: string;\n  /**\n   * Custom iconset if needed.\n   */\n  @Prop({reflect: true}) iconset = 'default';\n  /**\n   * Icon position: left (default) | right.\n   */\n  @Prop({reflect: true}) iconPosition = 'left';\n\n  /**\n   * Property href switch button to link.\n   */\n  @Prop({reflect: true}) href: string;\n  /**\n   * Set target if link.\n   */\n  @Prop() target = \"_self\";\n\n  /**\n   * Color base from color scheme. Default: accent\n   */\n  @Prop() color = 'accent';\n  @Watch('color')\n  handleChangeColor() {\n    this.setColors();\n  }\n\n  @State() styles = {};\n\n  connectedCallback() {\n    this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\n    this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);\n    this.styles['--neutral-light'] = window.CuraAPI.theme.colors.getColor(`neutral-light`);\n    this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);\n    this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor(`neutral-dark`);\n    this.styles['--neutral-black'] = window.CuraAPI.theme.colors.getColor(`neutral-black`);\n    this.setColors();\n  }\n  \n  getClasses() {\n    const classes = {};\n    classes[`button-${this.type.toLowerCase()}`] = true;\n    classes[`${this.size.toLowerCase()}`] = true;\n    classes[`icon-${this.iconPosition.toLowerCase()}`] = true;\n    classes['disabled'] = this.disabled;\n    return classes;\n  }\n\n  setColors() {\n    this.styles = {\n      ...this.styles,\n      '--color-light': window.CuraAPI.theme.colors.getColor(`${this.color}-light`),\n      '--color-base': window.CuraAPI.theme.colors.getColor(`${this.color}-base`),\n      '--color-dark': window.CuraAPI.theme.colors.getColor(`${this.color}-dark`)\n    };\n  }\n\n  getIcon() {\n    if (!this.iconName) return '';\n    const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;\n    const color = this.disabled ? 'neutral-dark' : `neutral-black`;\n    return <cura-icon name={this.iconName} iconset={this.iconset} size={iconSize} color={color}></cura-icon>;\n  }\n\n  render() {\n    return (\n      <Host>\n      { this.href ? (\n        <a href={this.disabled ? '' : this.href} target={this.target} class={this.getClasses()} style={this.styles}>\n          { this.getIcon() }\n          <span class=\"label\"><slot></slot></span>\n        </a>\n      ) : (\n        <button class={this.getClasses()} style={this.styles} disabled={this.disabled || null}>\n          { this.getIcon() }\n          <span class=\"label\"><slot></slot></span>\n        </button>\n      )}\n      </Host>\n    );\n  }\n\n}\n"]}

package/dist/collection/components/cura-icon/cura-icon.js

@@ -1,10 +1,6 @@
 import { Host, h } from '@stencil/core';
 export class CuraIcon {
   constructor() {
-    this.name = '';
-    this.color = 'neutral-base';
-    this.iconset = 'default';
-    this.disabled = false;
     this.sizes = {
       "128": { size: 128, stroke: 5.25 },
       "72": { size: 72, stroke: 3.5 },
@@ -17,6 +13,11 @@ export class CuraIcon {
       "16": { size: 16, stroke: 1.5 },
       "default": { size: 24, stroke: 2 }
     };
+    this.name = '';
+    this.color = 'neutral-base';
+    this.size = undefined;
+    this.iconset = 'default';
+    this.disabled = false;
   }
   sizeHandler(size) {
     const scaledStroke = (iconSize) => {
@@ -158,3 +159,4 @@ export class CuraIcon {
       }];
   }
 }
+//# sourceMappingURL=cura-icon.js.map

package/dist/collection/components/cura-icon/cura-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-icon.js","sourceRoot":"","sources":["../../../src/components/cura-icon/cura-icon.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Element, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'cura-icon',\n  styleUrl: 'cura-icon.scss',\n  shadow: true\n})\nexport class CuraIcon {\n\n  @Prop({reflect: true}) name = '';\n  @Prop() color = 'neutral-base';\n  @Prop() size: string | number;\n  @Prop({reflect: true}) iconset = 'default';\n  @Prop() disabled = false;\n\n  @Element() host: HTMLElement;\n\n  sizes = {\n    \"128\": {size: 128, stroke: 5.25},\n    \"72\": {size: 72, stroke: 3.5},\n    \"64\": {size: 64, stroke: 3.25},\n    \"48\": {size: 48, stroke: 2.75},\n    \"40\": {size: 40, stroke: 2.5},\n    \"32\": {size: 32, stroke: 2.25},\n    \"24\": {size: 24, stroke: 2},\n    \"20\": {size: 20, stroke: 1.75},\n    \"16\": {size: 16, stroke: 1.5},\n    \"default\": {size: 24, stroke: 2}\n  };\n\n  @Watch('size')\n  sizeHandler(size: string | number) {\n    const scaledStroke = (iconSize: string | number) => {\n      return `${this.sizes[iconSize].stroke * (this.sizes.default.size / this.sizes[iconSize].size)}px`;\n    }\n    this.setHostProperty('--size', this.sizes[`${size}`] ? `${this.sizes[size].size}px` : `${this.sizes.default.size}px`);\n    this.setHostProperty('--stroke', this.sizes[`${size}`] ? scaledStroke(size) : scaledStroke(\"default\"));\n  }\n\n  @Watch('color')\n  @Watch('disabled')\n  colorHandler() {\n    this.setHostProperty('--color', window.CuraAPI.theme.colors.getColor(this.disabled ? 'neutral-light' : this.color));\n  }\n\n  assetsPath: string;\n\n  connectedCallback() {\n    this.assetsPath = window.CuraAPI.localAssetsPath;\n    this.sizeHandler(this.size);\n    this.colorHandler();\n  }\n\n  setHostProperty(prop: string, value: string) {\n    this.host.style.setProperty(prop, value);\n  }\n\n  render() {\n    return (\n      <Host>\n        <svg\n          version=\"1.1\"\n          viewBox=\"0 0 24 24\"\n          preserveAspectRatio=\"xMidYMid meet\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <use\n            xlinkHref={`${this.assetsPath}/icons/iconset-${this.iconset}.svg#${this.name}`}>\n          </use>\n        </svg>\n      </Host>\n    );\n  }\n\n}\n"]}

package/dist/collection/components/cura-icons-view/cura-icons-view.js

@@ -4,10 +4,10 @@ export class CuraIconsView {
   constructor() {
     this.sizes = [16, 20, 24, 32, 40, 48, 64, 72, 128];
     this.colors = ['primary', 'secondary', 'accent', 'info', 'warning', 'error', 'success', 'neutral'];
-    this.selected = '360';
     this.setSelected = (icon) => {
       this.selected = icon;
     };
+    this.selected = '360';
   }
   render() {
     return (h(Host, null, h("div", { class: "iconDetail" }, h("h4", null, this.selected), h("div", { class: "iconSizes" }, this.sizes.map(size => h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size }), h("span", null, size)))), h("div", { class: "iconSizes invert" }, this.sizes.map(size => h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size, color: "neutral-white" }), h("span", null, size)))), h("div", { class: "iconSizes" }, this.colors.map(color => h("div", { class: "size" }, h("cura-icon", { name: this.selected, color: color }), h("span", null, color))), h("div", { class: "size" }, h("cura-icon", { name: this.selected, disabled: true }), h("span", null, "Disabled")))), h("div", { class: "icons" }, iconsetdefaulticons.map(icon => h("div", { class: "icon", onClick: () => this.setSelected(icon) }, h("cura-icon", { name: icon }), h("span", null, icon))))));
@@ -30,3 +30,4 @@ export class CuraIconsView {
     };
   }
 }
+//# sourceMappingURL=cura-icons-view.js.map

package/dist/collection/components/cura-icons-view/cura-icons-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-icons-view.js","sourceRoot":"","sources":["../../../src/components/cura-icons-view/cura-icons-view.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,mBAAmB,MAAM,yCAAyC,CAAC;AAO1E,MAAM,OAAO,aAAa;;IAExB,UAAK,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC;IAC9C,WAAM,GAAG,CAAC,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;IAG9F,gBAAW,GAAG,CAAC,IAAI,EAAE,EAAE;MACrB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IACvB,CAAC,CAAA;oBAJmB,KAAK;;EAMzB,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAC,YAAY;QACrB,cAAM,IAAI,CAAC,QAAQ,CAAO;QAC1B,WAAK,KAAK,EAAC,WAAW,IAClB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAE,IAAI,CAAC,EAAE,CAEvB,WAAK,KAAK,EAAC,MAAM;UACf,iBAAW,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,GAAc;UACxD,gBAAQ,IAAI,CAAS,CACjB,CACP,CACG;QACN,WAAK,KAAK,EAAC,kBAAkB,IACzB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAE,IAAI,CAAC,EAAE,CAEvB,WAAK,KAAK,EAAC,MAAM;UACf,iBAAW,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAC,eAAe,GAAa;UAC9E,gBAAQ,IAAI,CAAS,CACjB,CACP,CACG;QACN,WAAK,KAAK,EAAC,WAAW;UAClB,IAAI,CAAC,MAAM,CAAC,GAAG,CAAE,KAAK,CAAC,EAAE,CACzB,WAAK,KAAK,EAAC,MAAM;YACf,iBAAW,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,GAAc;YAC1D,gBAAQ,KAAK,CAAS,CAClB,CACP;UACD,WAAK,KAAK,EAAC,MAAM;YACf,iBAAW,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,QAAQ,SAAa;YACrD,2BAAqB,CACjB,CACF,CACF;MACN,WAAK,KAAK,EAAC,OAAO,IACd,mBAAmB,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAC/B,WAAK,KAAK,EAAC,MAAM,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;QACrD,iBAAW,IAAI,EAAE,IAAI,GAAc;QACnC,gBAAO,IAAI,CAAQ,CACf,CACP,CACG,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, h, State } from '@stencil/core';\nimport iconsetdefaulticons from '../../assets/icons/iconset-default-list';\n\n@Component({\n  tag: 'cura-icons-view',\n  styleUrl: 'cura-icons-view.scss',\n  shadow: true,\n})\nexport class CuraIconsView {\n\n  sizes = [16, 20, 24, 32, 40, 48, 64, 72, 128];\n  colors = ['primary', 'secondary', 'accent', 'info', 'warning', 'error', 'success', 'neutral'];\n  @State() selected = '360';\n\n  setSelected = (icon) => {\n    this.selected = icon;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"iconDetail\">\n          <h4>{ this.selected }</h4>\n          <div class=\"iconSizes\">\n            { this.sizes.map( size =>\n\n              <div class=\"size\">\n                <cura-icon name={this.selected} size={size}></cura-icon>\n                <span>{ size }</span>\n              </div>\n            )}\n          </div>\n          <div class=\"iconSizes invert\">\n            { this.sizes.map( size =>\n\n              <div class=\"size\">\n                <cura-icon name={this.selected} size={size} color=\"neutral-white\"></cura-icon>\n                <span>{ size }</span>\n              </div>\n            )}\n          </div>\n          <div class=\"iconSizes\">\n            { this.colors.map( color =>\n              <div class=\"size\">\n                <cura-icon name={this.selected} color={color}></cura-icon>\n                <span>{ color }</span>\n              </div>\n            )}\n            <div class=\"size\">\n              <cura-icon name={this.selected} disabled></cura-icon>\n              <span>Disabled</span>\n            </div>\n          </div>\n        </div>\n        <div class=\"icons\">\n          { iconsetdefaulticons.map(icon =>\n            <div class=\"icon\" onClick={() => this.setSelected(icon)}>\n              <cura-icon name={icon}></cura-icon>\n              <span>{icon}</span>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n\n}\n"]}

package/dist/collection/components/cura-page-template/cura-page-template.css

@@ -53,23 +53,11 @@
   :host .grid-template {
     padding: 0px;
   }
-  :host .grid-template #pre-content,
-:host .grid-template #content-container,
-:host .grid-template #post-body,
-:host .grid-template #footer {
-    margin-top: calc(var(--spacing) * 4px);
-  }
 }
 @media (min-width: 768px) and (max-width: 1365px) {
   :host .grid-template {
     padding: 0px;
   }
-  :host .grid-template #pre-content,
-:host .grid-template #content-container,
-:host .grid-template #post-body,
-:host .grid-template #footer {
-    margin-top: calc(var(--spacing) * 5px);
-  }
 }
 @media (min-width: 1366px) and (max-width: 1919px) {
   :host .grid-template {
@@ -81,15 +69,12 @@
   :host .grid-template #content-container #sidebar-right ::slotted(div[slot=sidebar-right]) {
     margin-left: calc(var(--spacing) * 5px);
   }
-  :host .grid-template #pre-content,
-:host .grid-template #content-container,
-:host .grid-template #post-body,
-:host .grid-template #footer {
-    margin-top: calc(var(--spacing) * 5px);
-  }
   :host .grid-template #content-container {
     display: flex;
   }
+  :host .grid-template #content-container #content {
+    flex-grow: 1;
+  }
   :host .grid-template #content-container #sidebar-left, :host .grid-template #content-container #sidebar-right {
     max-width: 20%;
   }
@@ -104,15 +89,12 @@
   :host .grid-template #content-container #sidebar-right ::slotted(div[slot=sidebar-right]) {
     margin-left: calc(var(--spacing) * 7px);
   }
-  :host .grid-template #pre-content,
-:host .grid-template #content-container,
-:host .grid-template #post-body,
-:host .grid-template #footer {
-    margin-top: calc(var(--spacing) * 7px);
-  }
   :host .grid-template #content-container {
     display: flex;
   }
+  :host .grid-template #content-container #content {
+    flex-grow: 1;
+  }
   :host .grid-template #content-container #sidebar-left, :host .grid-template #content-container #sidebar-right {
     max-width: 20%;
   }

package/dist/collection/components/cura-page-template/cura-page-template.js

@@ -52,3 +52,4 @@ export class CuraPageTemplate {
   }
   static get elementRef() { return "host"; }
 }
+//# sourceMappingURL=cura-page-template.js.map