fix(style): new arrow and padding for the content

Neovici · Feb 9, 2024 · 0a6ecf3 · 0a6ecf3
1 parent 3e60c20
commit 0a6ecf3
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 15 deletions.
diff --git a/src/cosmoz-tab-card.js b/src/cosmoz-tab-card.js
@@ -59,33 +59,40 @@ const CosmozTabCard = ({ heading, collapsable, isCollapsed, iconPath }) => {
 				font-size: 17px;
 				font-weight: 400;
 				flex: 1;
-				margin: 0.67em 0 0;
+				margin-left: 4px;
 			}
 			.dropdown-arrow {
-				transform: rotate(-90deg);
 				transition-duration: 0.3s;
+				display: block;
+				padding: 8px;
 			}
 			.dropdown-arrow[collapsed] {
 				transition-duration: 0.3s;
-				transform: rotate(0);
+				transform: rotate(90deg);
 			}
 		</style>
 
 		<div id="header" part="header">
 			${when(
 				collapsable,
 				() =>
-					html`<svg
-						width="10"
-						height="6"
-						viewBox="0 0 10 6"
-						class="dropdown-arrow"
-						xmlns="http://www.w3.org/2000/svg"
-						?collapsed=${!collapsed}
-						@click=${() => setCollapsed((c) => !c)}
-					>
-						<path d="M1 1.00002L5 4.33002L9 1.00002" stroke-width="1.5" />
-					</svg>`
+					html`
+						<div
+							?collapsed=${!collapsed}
+							@click=${() => setCollapsed((c) => !c)}
+							class="dropdown-arrow"
+						>
+							<svg
+								width="7"
+								height="16"
+								viewBox="0 0 7 16"
+								fill="none"
+								xmlns="http://www.w3.org/2000/svg"
+							>
+								<path d="M1 1L6 8L1 15" stroke="#101010" stroke-width="1.5" />
+							</svg>
+						</div>
+					`
 			)}
 			<h1 class="heading" part="heading">
 				${heading}<slot name="after-title"></slot>

diff --git a/stories/cosmoz-tab-card.stories.js b/stories/cosmoz-tab-card.stories.js
@@ -21,7 +21,7 @@ const basics = () => html`
   </cosmoz-tab>
   <cosmoz-tab heading="Tab2" name="tab2">
     <cosmoz-tab-card collapsable is-collapsed="false" heading="Card2 - Collapsable!">
-      <p>
+      <p style="padding: 0 8px; font-family: 'Inter' sans-serif;">
         Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce non libero eget lorem interdum lacinia.
         Vivamus eu libero lacus. Vestibulum blandit ornare orci non imperdiet. Aliquam condimentum lacus mauris, id aliquet lectus faucibus vel.
         Aliquam luctus vulputate iaculis. Vestibulum eu sagittis nisi, sed gravida ante.