fix: match new styling changes for tab cards

Neovici · Aug 5, 2024 · 883b608 · 883b608
1 parent 041fa8b
commit 883b608
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 38 deletions.
diff --git a/src/cosmoz-tab-card.js b/src/cosmoz-tab-card.js
@@ -56,7 +56,7 @@ const CosmozTabCard = (host) => {
 					>
 						<slot name="collapse-icon">${collapseIcon}</slot>
 					</div>
-				`
+				`,
 			)}
 			<h1 class="heading" @click=${toggleCollapsed} part="heading">
 				${heading}<slot name="after-title"></slot>
@@ -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
@@ -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`
 		<style>
@@ -35,6 +32,7 @@ const CosmozTab = host => {
 				position: relative;
 				flex-direction: column;
 				flex: 1 1 auto;
+				padding: 0 5px;
 				max-height: 100%;
 			}
 
@@ -48,29 +46,32 @@ const CosmozTab = host => {
 			}
 		</style>
 
-		<slot @slotchange=${ onSlot }></slot>
-`;
+		<slot @slotchange=${onSlot}></slot>
+	`;
 };
 
-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;
+		}
+	},
+);