feat(generalise templating): adjust ccp styles

samply · Feb 19, 2024 · 637f966 · 637f966
1 parent 412bd62
commit 637f966
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 43 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/demo/src/ccp.css b/packages/demo/src/ccp.css
@@ -14,7 +14,7 @@
   --light-gray: #dee2e6;
   --lightest-gray: #efefef;
   --dark-gray: #323232;
-  --blue: #00489c;
+  --blue: #007bff;
   --light-blue: #007bff;
   --lightest-blue: #adc7f3;
   --dark-blue: #002d80;
@@ -83,6 +83,7 @@ header {
 .logo-dkfz {
   justify-self: end;
 }
+
 .logo-dkfz img {
   height: 30px;
 }
@@ -126,7 +127,7 @@ footer {
   border: solid 1px var(--lightest-gray);
   background-color: var(--white);
   grid-row: 1/-1;
-  overflow-y: scroll; 
+  overflow-y: scroll;
   height: 100vh;
   position: sticky;
   top: 40px;
@@ -170,7 +171,7 @@ footer {
 
 }
 
-.chart-age-distribution{
+.chart-age-distribution {
   grid-column: span 2;
 }
 
@@ -184,7 +185,8 @@ footer {
   .charts {
     grid-template-columns: repeat(3, 1fr);
   }
-  .chart-age-distribution{
+
+  .chart-age-distribution {
     grid-row: 3/4;
     grid-column: 2/4;
   }
@@ -215,7 +217,7 @@ footer {
   .charts {
     margin-left: 0px;
   }
-  
+
 }
 
 
@@ -241,6 +243,13 @@ footer {
   text-align: right;
 }
 
+
+.result-table-hint-text {
+  padding-top: 20px;
+  display: flex;
+  align-items: end;
+}
+
 /**
 * Overrides
 */
@@ -251,13 +260,16 @@ footer {
 lens-search-bar-multiple::part(lens-searchbar-chip) {
   background-color: var(--light-blue);
 }
+
 lens-search-bar-multiple::part(query-delete-button) {
   background-color: var(--light-blue);
   border-color: var(--light-blue);
 }
+
 lens-search-bar-multiple::part(query-delete-button-item) {
   border-color: var(--white);
 }
+
 lens-search-bar-multiple::part(query-delete-button-group) {
   background-color: var(--white);
   border-color: var(--white);
@@ -267,7 +279,9 @@ lens-search-button::part(lens-search-button) {
   background-color: var(--light-blue);
 }
 
-lens-search-button::part(lens-search-button):hover {background-color: #006adb}
+lens-search-button::part(lens-search-button):hover {
+  background-color: #006adb
+}
 
 lens-search-button::part(lens-search-button):active {
   background-color: #003d7e;
@@ -285,9 +299,11 @@ lens-catalogue::part(lens-catalogue) {
 lens-catalogue::part(autocomplete-formfield-input):focus {
   border-color: var(--light-blue);
 }
+
 lens-catalogue::part(query-add-button) {
   background-color: var(--light-blue);
 }
+
 lens-catalogue::part(number-input-formfield):focus {
   border-color: var(--light-blue);
   outline: none;
@@ -307,9 +323,9 @@ lens-catalogue::part(number-input-formfield) {
   text-align: center;
   font-size: var(--font-size-s);
   -webkit-appearance: textfield;
-  -moz-appearance:    textfield;
-  appearance:         textfield !important;
- 
+  -moz-appearance: textfield;
+  appearance: textfield !important;
+
 }
 
 lens-catalogue::part(number-input-formfield):focus {
@@ -319,8 +335,8 @@ lens-catalogue::part(number-input-formfield):focus {
 
 lens-catalogue::part(number-input-formfield)::-webkit-outer-spin-button,
 lens-catalogue::part(number-input-formfield)::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
+  -webkit-appearance: none;
+  margin: 0;
 }
 
 lens-catalogue::part(data-tree-element-toggle-icon) {
@@ -358,7 +374,16 @@ lens-info-button::part(info-button-icon) {
   width: 21px;
 }
 
-.catalogue lens-info-button::part(info-button){
+lens-info-button::part(info-button-icon):hover,
+lens-result-summary::part(info-button-icon):hover,
+lens-result-table::part(info-button-icon):hover,
+lens-chart::part(info-button-icon):hover,
+lens-catalogue::part(info-button-icon):hover {
+  transform: scale(1.1);
+}
+
+
+.catalogue lens-info-button::part(info-button) {
   height: 38px;
   padding: 0;
   top: var(--gap-xs);
@@ -367,27 +392,7 @@ lens-info-button::part(info-button-icon) {
   position: absolute;
 }
 
-.catalogue lens-info-button::part(info-button-dialogue){
+.catalogue lens-info-button::part(info-button-dialogue) {
   max-width: 300px;
   text-align: left;
 }
-
-lens-info-button::part(info-button-dialogue):hover {background-color: #b8bfb8}
-
-lens-info-button::part(info-button):hover {background-color: #b8bfb8}
-
-lens-info-button::part(info-button):active {
-  background-color: #585958;
-  transform: translateX(1px);
-}
-
-lens-info-button::part(info-button-dialogue):active {
-  background-color: #585958;
-  transform: translateX(1px);
-}
-
-.result-table-hint-text {
-  padding-top: 20px;
- display: flex;
- align-items: end;
-}
diff --git a/packages/demo/src/fragment-development.css b/packages/demo/src/fragment-development.css
@@ -1,4 +1,5 @@
 @import "../../../node_modules/@samply/lens/dist/style.css";
+@import "../../lib/src/styles/index.css";
 
 /**
 * Demo

diff --git a/packages/demo/src/main.ts b/packages/demo/src/main.ts
@@ -1,10 +1,10 @@
 import "@samply/lens";
 
-import "./fragment-development.css";
-import App from "./AppFragmentDevelopment.svelte";
+// import "./fragment-development.css";
+// import App from "./AppFragmentDevelopment.svelte";
 
-// import "./ccp.css";
-// import App from "./AppCCP.svelte";
+import "./ccp.css";
+import App from "./AppCCP.svelte";
 
 // import App from './AppBBMRI.svelte'
 // import './bbmri.css'

diff --git a/packages/lib/src/styles/searchbars.css b/packages/lib/src/styles/searchbars.css
@@ -102,7 +102,7 @@ lens-search-bar-multiple::part(lens-searchbar-autocomplete-options) {
   max-height: 50vh;
   overflow: scroll;
   list-style-type: none;
-  padding: 0;
+  padding: var(--gap-s);
   margin: 0;
   border: solid 1px var(--blue);
   border-top: none;
@@ -111,7 +111,7 @@ lens-search-bar-multiple::part(lens-searchbar-autocomplete-options) {
   left: -1px;
   right: -1px;
   background-color: white;
-  color: black;
+  color: var(--font-color);
   border-bottom-left-radius: var(--border-radius-small);
   border-bottom-right-radius: var(--border-radius-small);
 }
@@ -126,6 +126,9 @@ lens-search-bar-multiple::part(autocomplete-category-category-name) {
 
   lens-search-bar::part(lens-searchbar-autocomplete-options-item),
 lens-search-bar-multiple::part(lens-searchbar-autocomplete-options-item) {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-xs);
   cursor: pointer;
   padding: var(--gap-xs) var(--gap-m);
 }
@@ -138,11 +141,12 @@ lens-search-bar-multiple::part(lens-searchbar-autocomplete-options-item-focused)
 
 lens-search-bar::part(autocomplete-options-item-description),
 lens-search-bar-multiple::part(autocomplete-options-item-description) {
+  /* border: solid 1px var(--light-gray); */
+  display: flex;
+  align-items: center;
   color: var(--blue);
   font-size: var(--font-size-s);
-  padding-top: var(--gap-xs);
   padding-right: var(--gap-m);
-  /* padding-left: var(--gap-xs); */
 }
 lens-search-bar::part(autocomplete-options-item-description-focused),
 lens-search-bar-multiple::part(autocomplete-options-item-description-focused) {

diff --git a/samply-lens-0.0.3-0.tgz b/samply-lens-0.0.3-0.tgz