feat(result summary): add style to info button

samply · Jan 23, 2024 · 17451c9 · 17451c9
1 parent 6c5dcf0
commit 17451c9
Showing 1 changed file with 31 additions and 1 deletion.
diff --git a/packages/demo/src/styles/default/results-overview.css b/packages/demo/src/styles/default/results-overview.css
@@ -16,4 +16,34 @@ lens-result-summary {
     align-items: center;
     justify-content: space-around;
     gap: 10px
-  }
+  }
+
+  lens-result-summary::part(info-button) {
+    position: relative;
+    cursor: pointer;
+    height: 100%;
+    border: none;
+    background-color: var(--white);
+    border-radius: var(--border-radius-small);
+}
+  lens-result-summary::part(info-button-icon) {
+    width: 16px;
+}
+
+lens-result-summary::part(info-button-title) {
+    font-family: var(--font-family);
+}
+
+lens-result-summary::part(info-button-dialogue) {
+    position: absolute;
+    border: none;
+    background-color: var(--white);
+    width: max-content;
+    max-width: 30vw;
+    z-index: 100;
+    padding: var(--gap-s);
+    top: 40px;
+    left: 0px;
+    border: solid 1px var(--light-blue);
+    border-radius: var(--border-radius-small);
+}