diff --git a/src/cosmoz-tab-card.js b/src/cosmoz-tab-card.js
index 0a7b3d3..b7b0b44 100644
--- a/src/cosmoz-tab-card.js
+++ b/src/cosmoz-tab-card.js
@@ -56,7 +56,7 @@ const CosmozTabCard = (host) => {
>
${collapseIcon}
- `
+ `,
)}
${heading}
@@ -77,15 +77,13 @@ const style = css`
position: relative;
box-sizing: border-box;
background-color: var(--cosmoz-tab-card-bg-color, white);
- border-radius: 3px;
- margin: 15px;
+ border-radius: 10px;
+ border: 1px solid rgb(229, 230, 236);
+ margin: 10px 5px 0;
align-self: flex-start;
padding: var(--cosmoz-tab-card-padding, 0);
+ margin: 10px 5px 0 5px;
width: var(--cosmoz-tab-card-width, 300px);
- box-shadow: var(
- --cosmoz-shadow-2dp,
- var(--shadow-elevation-2dp_-_box-shadow, 0 2px 4px 0 #e5e5e5)
- );
}
.collapse {
@@ -110,9 +108,10 @@ const style = css`
.heading {
font-family: inherit;
- font-size: 17px;
+ font-size: 15px;
font-weight: 400;
flex: 1;
+ color: rgb(0, 0, 0);
}
.collapse-icon {
@@ -137,5 +136,5 @@ customElements.define(
component(CosmozTabCard, {
observedAttributes: ['heading', 'collapsable', 'collapsed'],
styleSheets: [style],
- })
+ }),
);
diff --git a/src/cosmoz-tab.js b/src/cosmoz-tab.js
index a8560f2..ae9b709 100644
--- a/src/cosmoz-tab.js
+++ b/src/cosmoz-tab.js
@@ -1,9 +1,6 @@
// @license Copyright (C) 2015 Neovici AB - Apache 2 License
import './cosmoz-tab-card.js';
-import {
- html,
- component
-} from '@pionjs/pion';
+import { html, component } from '@pionjs/pion';
import { useTab } from './use-tab';
/**
@@ -26,7 +23,7 @@ Custom property | Description | Default
`--cosmoz-tab-header-accordion` | Mixin applied to the header when the tab is in accordion mode | `{}`
`--cosmoz-tab-header-accordion-selected` | Mixin applied to the header when the tab is selected in accordion mode | `{}`
*/
-const CosmozTab = host => {
+const CosmozTab = (host) => {
const { onSlot } = useTab(host);
return html`
-
-`;
+
+ `;
};
-customElements.define('cosmoz-tab', class extends component(CosmozTab, {
- observedAttributes: [
- 'hidden',
- 'disabled',
- 'heading',
- 'badge',
- 'icon',
- 'icon-style',
- 'icon-color',
- 'selected-icon',
- 'is-selected'
- ]
-}) {
- // TODO: drop this when haunted better handles native properties
- set hidden(val) {
- super.hidden = val;
- this._scheduler.update();
- }
- get hidden() {
- return super.hidden;
- }
-});
+customElements.define(
+ 'cosmoz-tab',
+ class extends component(CosmozTab, {
+ observedAttributes: [
+ 'hidden',
+ 'disabled',
+ 'heading',
+ 'badge',
+ 'icon',
+ 'icon-style',
+ 'icon-color',
+ 'selected-icon',
+ 'is-selected',
+ ],
+ }) {
+ // TODO: drop this when haunted better handles native properties
+ set hidden(val) {
+ super.hidden = val;
+ this._scheduler.update();
+ }
+ get hidden() {
+ return super.hidden;
+ }
+ },
+);