@zanichelli/albe-web-components 6.6.10-test → 6.7.0

package/dist/collection/components/inputs/z-searchbar/styles.css

@@ -0,0 +1,211 @@
+:host {
+  position: relative;
+  z-index: 5;
+  display: block;
+  width: inherit;
+  height: 44px;
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+}
+
+:host > div {
+  position: absolute;
+  z-index: 10;
+  display: grid;
+  width: 100%;
+  gap: 0 calc(var(--space-unit) * 2);
+  grid-template-columns: auto;
+  grid-template-rows: auto;
+}
+
+:host > div.has-submit {
+  grid-template-columns: auto min-content;
+}
+
+:host > div.has-results {
+  grid-template-rows: auto auto;
+}
+
+:host > div > z-input {
+  width: 100%;
+  grid-column: 1;
+  grid-row: 1;
+}
+
+:host > div > z-button {
+  grid-column: 2;
+  grid-row: 1;
+}
+
+:host > div > div.results-wrapper {
+  overflow: auto;
+  padding: calc(var(--space-unit) / 4);
+  padding-bottom: calc(var(--space-unit) / 4);
+  border: var(--border-size-small) solid var(--color-surface03);
+  border-top: none;
+  margin-top: -1px;
+  background: var(--color-surface01);
+  grid-column: 1;
+  grid-row: 2;
+}
+
+:host > div > div.results-wrapper > div.results {
+  overflow: auto;
+  max-height: var(--z-searchbar-results-height, 540px);
+  padding: var(--space-unit) calc(var(--space-unit) * 1.5);
+  padding-bottom: calc(var(--space-unit) / 2);
+  scrollbar-color: var(--color-primary01) transparent;
+}
+
+:host > div > div.results-wrapper > div.results::-webkit-scrollbar {
+  width: 10px;
+  background: linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);
+  border-radius: var(--border-radius);
+}
+
+:host > div > div.results-wrapper > div.results::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+:host > div > div.results-wrapper > div.results::-webkit-scrollbar-thumb {
+  width: 10px;
+  background-color: var(--color-primary01);
+  border-radius: var(--border-radius);
+}
+
+:host > div > div.results-wrapper > div.results .category-heading {
+  display: block;
+  font-size: var(--font-size-2);
+  font-weight: var(--font-rg);
+  line-height: var(--font-size-3);
+}
+
+:host > div > div.results-wrapper > div.results .category-heading > * {
+  display: block;
+}
+
+:host > div > div.results-wrapper > div.results span.category-heading > span.category {
+  color: var(--color-text05);
+  font-style: italic;
+}
+
+:host > div > div.results-wrapper > div.results span.category-heading > span.subcategory {
+  margin-top: 8px;
+  color: var(--color-text01);
+  text-transform: uppercase;
+}
+
+:host > div > div.results-wrapper > div.results z-list-element {
+  display: block;
+}
+
+:host > div > div.results-wrapper > div.results z-list-element:focus {
+  box-shadow: var(--shadow-focus-primary);
+}
+
+:host > div > div.results-wrapper > div.results .item {
+  --z-icon-height: 12px;
+  --z-icon-width: 12px;
+
+  display: flex;
+  flex-flow: row nowrap;
+  align-content: stretch;
+  align-items: flex-start;
+  justify-content: flex-start;
+  color: var(--color-text01);
+  fill: var(--color-icon02);
+  font-size: var(--font-size-2);
+  line-height: var(--font-size-3);
+}
+
+:host > div > div.results-wrapper > div.results .item.ellipsis > span.item-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+:host > div > div.results-wrapper > div.results .item > span.item-label > mark,
+:host > div > div.results-wrapper > div.results .item > span.item-label > * > mark {
+  background: var(--color-primary03);
+}
+
+:host > div > div.results-wrapper > div.results .item.has-category {
+  padding-left: calc(var(--space-unit) * 3);
+}
+
+:host > div > div.results-wrapper > div.results .item > z-icon.item-icon {
+  padding: 2px 0;
+  margin-right: calc(var(--space-unit) * 1.5);
+}
+
+:host > div > div.results-wrapper > div.results .item.item-search {
+  --z-icon-height: 16px;
+  --z-icon-width: 16px;
+}
+
+:host > div > div.results-wrapper > div.results .item.item-search > z-icon {
+  margin-right: var(--space-unit);
+}
+
+:host > div > div.results-wrapper > div.results .item-show-all {
+  display: block;
+  text-align: center;
+}
+
+:host > div > div.results-wrapper > div.results .item-no-results {
+  display: block;
+  font-size: var(--font-size-2);
+  font-style: italic;
+  line-height: var(--font-size-5);
+}
+
+:host > div > div.results-wrapper > div.results .item-no-results > ul {
+  padding-left: calc(var(--space-unit) * 2);
+  margin: var(--space-unit);
+}
+
+/* Tablet breakpoint */
+@media (min-width: 768px) {
+  :host > div > div.results-wrapper > div.results .category-heading {
+    font-size: var(--font-size-3);
+    line-height: var(--font-size-6);
+  }
+
+  :host > div > div.results-wrapper > div.results .item {
+    --z-icon-height: 12px;
+    --z-icon-width: 12px;
+
+    font-size: var(--font-size-3);
+    line-height: var(--font-size-6);
+  }
+
+  :host > div > div.results-wrapper > div.results .item.item-search {
+    --z-icon-height: 18px;
+    --z-icon-width: 18px;
+  }
+
+  :host > div > div.results-wrapper > div.results .item.item-search > z-icon {
+    margin-top: calc(var(--space-unit) / 4);
+  }
+
+  :host > div > div.results-wrapper > div.results .item.ellipsis > span.item-label {
+    height: 24px;
+  }
+
+  :host > div > div.results-wrapper > div.results .item > z-icon.item-icon {
+    padding: 6px 0;
+  }
+}
+
+/* Desktop breakpoint */
+@media (min-width: 1152px) {
+  :host > div > div.results-wrapper > div.results .item {
+    cursor: pointer;
+  }
+
+  :host > div > div.results-wrapper > div.results .item-no-results {
+    cursor: default;
+    font-size: var(--font-size-3);
+    line-height: var(--font-size-6);
+  }
+}