@itcenteratunihelsinki/huds-lib 0.8.76 → 0.8.78-alpha.0

package/dist/collection/components/hy-site-header/site-search/site-search.css

@@ -1,62 +1,11 @@
-:root {
-  --brand-main: #0e688b;
-  --brand-main-soft: #b1e7ff;
-  --brand-main-bright: #48c5f8;
-  --brand-main-light: #107eab;
-  --brand-main-active: #005379;
-  --brand-main-dark: #003146;
-  --brand-main-nearly-black: #000222;
-  --link-blue: #0479a4;
-  --link-disabled: #767676;
-  --grayscale-white: #fff;
-  --grayscale-slightly-gray: #fefefe;
-  --grayscale-light: #f8f8f8;
-  --grayscale-medium: #d2d2d2;
-  --grayscale-background-box: #f5f5f5;
-  --grayscale-tabs-border: #e6e6e6;
-  --grayscale-background-arrow: #dfdfdf;
-  --grayscale-medium-dark: #979797;
-  --grayscale-dark: #555555;
-  --grayscale-dark-text: #222222;
-  --grayscale-black: #000000;
-  --additional-red-light: #e5053a;
-  --additional-red-dark: #a31621;
-  --additional-purple-light: #420039;
-  --additional-yellow-light: #f9a21a;
-  --additional-yellow: #c47f1b;
-  --additional-skyblue: #48c5f8;
-  --additional-orange: #d14600;
-  --additional-green-light: #96ba3c;
-  --additional-green-dark: #006400;
-  --hover-gray: #eaeaea;
-}
-
-* {
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-:root {
-  --gutter-mobile: 16px;
-  --gutter-narrow: 24px;
-  --gutter-medium: 24px;
-  --gutter-wide: 24px;
-  --gutter-extrawide: 32px;
-}
-
 /**
  * Mixin for fluid type.
  * Example usage: @include fluid-type(font-size, 320px, 1600px, 32px, 80px);
  */
-
-:root {
-  --breakpoint-extrawide: 75.0625rem;
-  --breakpoint-max-width: 75.0625rem;
-  --breakpoint-medium: 48rem;
-  --breakpoint-narrow: 30rem;
-  --breakpoint-wide: 60rem;
-}
-
+* {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
 .button--search {
   font-size: 0.75rem;
   line-height: 24px;
@@ -82,7 +31,6 @@
   letter-spacing: -0.5px;
   width: 44px;
 }
-
 @media (min-width: 75.0625rem) {
   .button--search {
     display: inline-grid;
@@ -91,32 +39,26 @@
     width: auto;
   }
 }
-
 @media (min-width: 1601px) {
   .button--search {
     font-size: 0.875rem;
     line-height: 24px;
   }
 }
-
 .button--search:hover:not([disabled]) {
   color: var(--brand-main);
   cursor: pointer;
 }
-
 .button--search:hover:not([disabled]) svg {
   fill: var(--brand-main);
 }
-
 .button--search:focus:not([disabled]) {
   outline: solid 2px var(--additional-yellow);
   outline-offset: 2px;
 }
-
 .button--search.is-active, .button--search[aria-expanded=true] {
   position: relative;
 }
-
 .button--search.is-active:after, .button--search[aria-expanded=true]:after {
   content: "";
   position: absolute;
@@ -126,32 +68,26 @@
   left: 0;
   background-color: var(--grayscale-black);
 }
-
 .is-group .button--search {
   color: var(--grayscale-white);
 }
-
 .is-group .button--search:hover:not([disabled]) {
   color: var(--grayscale-medium);
   cursor: pointer;
 }
-
 .is-group .button--search:hover:not([disabled]) svg {
   fill: var(--grayscale-medium);
 }
-
 .button--search.is-open--menu {
   position: absolute;
   right: 50px;
   top: 15px;
   z-index: 101;
 }
-
 .button--search__label {
   display: none;
   visibility: hidden;
 }
-
 @media (min-width: 75.0625rem) {
   .button--search__label {
     display: block;
@@ -161,15 +97,12 @@
     order: 2;
   }
 }
-
 .site-search {
   height: 100%;
 }
-
 .site-search__panel {
   display: none;
 }
-
 .site-search__panel__is-open {
   background-color: rgba(0, 0, 0, 0.5);
   border-top: 1px solid rgba(0, 0, 0, 0.1);
@@ -187,7 +120,6 @@
   width: 100%;
   z-index: 520;
 }
-
 .site-search__panel__title__group {
   -webkit-box-align: baseline;
   -ms-flex-align: baseline;
@@ -200,7 +132,6 @@
   -ms-flex-direction: column;
   flex-direction: column;
 }
-
 @media (min-width: 60rem) {
   .site-search__panel__title__group {
     -webkit-box-align: baseline;
@@ -215,7 +146,6 @@
     justify-content: flex-start;
   }
 }
-
 .site-search__panel__title .panel-title {
   font-size: 2rem;
   line-height: 32px;
@@ -226,7 +156,6 @@
   margin-top: 20px;
   text-transform: uppercase;
 }
-
 @media (min-width: 30rem) {
   .site-search__panel__title .panel-title {
     font-size: 2.875rem;
@@ -235,7 +164,6 @@
     margin-top: 24px;
   }
 }
-
 @media (min-width: 1601px) {
   .site-search__panel__title .panel-title {
     font-size: 3.25rem;
@@ -243,7 +171,6 @@
     letter-spacing: -1.6px;
   }
 }
-
 .site-search__panel__title .description {
   font-size: 0.75rem;
   line-height: 16px;
@@ -252,7 +179,6 @@
   margin-bottom: 16px;
   padding: 0;
 }
-
 @media (min-width: 30rem) {
   .site-search__panel__title .description {
     font-size: 1rem;
@@ -261,7 +187,6 @@
     margin-bottom: 18px;
   }
 }
-
 @media (min-width: 60rem) {
   .site-search__panel__title .description {
     font-size: 1.125rem;
@@ -270,7 +195,6 @@
     padding-left: 8px;
   }
 }
-
 @media (min-width: 1601px) {
   .site-search__panel__title .description {
     font-size: 1.25rem;
@@ -279,37 +203,31 @@
     padding-left: 12px;
   }
 }
-
 .site-search__panel__content {
   background-color: #f8f8f8;
   width: 100%;
 }
-
 .site-search__panel__space-box {
   height: 100%;
   width: 100%;
 }
-
 .site-search__panel__wrapper {
   margin: 0 auto;
   max-width: 100%;
   padding: 0 1rem 2rem;
   width: 100%;
 }
-
 @media (min-width: 30rem) {
   .site-search__panel__wrapper {
     max-width: 1216px;
     padding: 0 0 2rem;
   }
 }
-
 @media (min-width: 1601px) {
   .site-search__panel__wrapper {
     padding: 0 0 4rem;
   }
 }
-
 .site-search__panel__panel-toggle {
   background-color: transparent;
   border: none;
@@ -317,20 +235,17 @@
   right: 1rem;
   top: 25px;
 }
-
 @media (min-width: 30rem) {
   .site-search__panel__panel-toggle {
     right: 2rem;
     top: 36px;
   }
 }
-
 @media (min-width: 1601px) {
   .site-search__panel__panel-toggle {
     top: 45px;
   }
 }
-
 .site-search__panel__panel-toggle__label {
   font-size: 0.875rem;
   line-height: 22px;
@@ -345,11 +260,9 @@
   letter-spacing: -0.44px;
   text-transform: uppercase;
 }
-
 .site-search__panel__panel-toggle__label__title {
   padding-right: 8px;
 }
-
 @media (min-width: 1601px) {
   .site-search__panel__panel-toggle__label {
     font-size: 1.125rem;
@@ -357,19 +270,15 @@
     letter-spacing: -0.56px;
   }
 }
-
 .site-search__panel__panel-toggle:focus:not([disabled]), .site-search__panel__panel-toggle:hover:not([disabled]) {
   cursor: pointer;
 }
-
 .site-search__panel__panel-toggle:focus:not([disabled]) span, .site-search__panel__panel-toggle:hover:not([disabled]) span {
   color: var(--brand-main);
 }
-
 .site-search__panel__panel-toggle:focus:not([disabled]) svg, .site-search__panel__panel-toggle:hover:not([disabled]) svg {
   fill: var(--brand-main);
 }
-
 .site-search__panel__tools .title {
   font-size: 1rem;
   line-height: 20px;
@@ -378,7 +287,6 @@
   letter-spacing: -0.5px;
   text-transform: uppercase;
 }
-
 @media (min-width: 30rem) {
   .site-search__panel__tools .title {
     font-size: 1.125rem;
@@ -387,7 +295,6 @@
     margin: 32px 0 16px;
   }
 }
-
 .site-search__panel__tools .list a.search-special-tool {
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -399,7 +306,6 @@
   margin-bottom: 8px;
   text-decoration: none;
 }
-
 .site-search__panel__tools .list a.search-special-tool .label {
   font-size: 0.875rem;
   line-height: 16px;
@@ -408,7 +314,6 @@
   letter-spacing: -0.44px;
   padding-left: 8px;
 }
-
 @media (min-width: 30rem) {
   .site-search__panel__tools .list a.search-special-tool .label {
     font-size: 1rem;
@@ -417,11 +322,9 @@
     padding-left: 12px;
   }
 }
-
 .site-search__panel__tools .list a.search-special-tool .description {
   display: none;
 }
-
 @media (min-width: 60rem) {
   .site-search__panel__tools .list a.search-special-tool .description {
     font-size: 0.875rem;
@@ -434,7 +337,6 @@
     padding-left: 12px;
   }
 }
-
 @media (min-width: 1601px) {
   .site-search__panel__tools .list a.search-special-tool .description {
     font-size: 1rem;
@@ -447,16 +349,324 @@
     padding-left: 12px;
   }
 }
-
 .site-search__panel__tools .list a.search-special-tool hy-icon {
   height: 40px;
   width: 40px;
 }
-
 .site-search__panel__tools .list a.search-special-tool hy-icon svg {
   background-color: var(--brand-main-light);
   fill: var(--grayscale-white);
   height: 40px;
-  padding: 8px;
+  padding: 7px;
   width: 40px;
+}
+/*
+  Cludo autocomplete
+*/
+#search_autocomplete .cludo-sayt__no-result-text p a:focus,
+#search_autocomplete .cludo-sayt__no-result-text p a:hover,
+#search_autocomplete .cludo-sayt__results-tophit a:focus h3,
+#search_autocomplete .cludo-sayt__results-tophit a:hover h3,
+#search_autocomplete .cludo-sayt__results-tophit-title-link:focus,
+#search_autocomplete .cludo-sayt__results-tophit-title-link:hover,
+#search_autocomplete .cludo-sayt__results-tophit.active h3,
+#search_autocomplete .cludo-sayt__results-tophit.people-result a:focus h3,
+#search_autocomplete .cludo-sayt__results-tophit.people-result a:hover h3 {
+  text-decoration: underline;
+}
+#search_autocomplete {
+  position: absolute;
+  width: 100%;
+  top: 100%;
+  left: 0;
+  padding: 0;
+  z-index: 5;
+}
+#search_autocomplete * {
+  font-family: "Open Sans", Helvetica, Arial, sans-serif;
+}
+#search_autocomplete h3 {
+  font-size: 0.875rem;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+#search_autocomplete .cludo-sayt {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  width: 100%;
+  background-color: #fff;
+  -webkit-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
+  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
+  margin: 0;
+  padding: 12px 15px;
+  border: 1px solid #d2d2d2;
+}
+#search_autocomplete .cludo-sayt h3 {
+  line-height: 1.25rem;
+}
+#search_autocomplete .cludo-sayt__suggestions {
+  border-bottom: 1px solid #d2d2d2;
+}
+#search_autocomplete .cludo-sayt__suggestions > h3 {
+  margin: 0;
+  white-space: nowrap;
+}
+#search_autocomplete .cludo-sayt__suggestions::-webkit-scrollbar {
+  height: 8px;
+}
+#search_autocomplete .cludo-sayt__suggestions::-webkit-scrollbar:empty {
+  display: none;
+}
+#search_autocomplete .cludo-sayt__suggestions::-webkit-scrollbar-thumb {
+  background: #c7c7c7;
+  border-radius: 20px;
+  cursor: pointer;
+}
+#search_autocomplete .cludo-sayt__suggestions::-webkit-scrollbar-thumb:hover {
+  background: #878787;
+}
+#search_autocomplete .cludo-sayt__suggestions-list {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 12px;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  padding: 8px 0 12px;
+  margin: 0;
+  list-style-type: none;
+}
+#search_autocomplete .cludo-sayt__suggestion {
+  white-space: nowrap;
+  background-color: #f5f5f5;
+  padding: 10.05px 18.76px;
+  border-radius: 16.75px;
+  font-size: 0.813rem;
+  cursor: pointer;
+}
+#search_autocomplete .cludo-sayt__suggestion.active,
+#search_autocomplete .cludo-sayt__suggestion:focus,
+#search_autocomplete .cludo-sayt__suggestion:hover {
+  color: #107eab;
+  text-decoration: underline;
+}
+#search_autocomplete .cludo-sayt__results {
+  padding: 1rem 0;
+}
+#search_autocomplete .cludo-sayt__people-search-categories > div {
+  margin-top: 24px;
+}
+#search_autocomplete .cludo-sayt__results-tophit-container:not(:last-child) {
+  margin-bottom: 24px;
+}
+#search_autocomplete .cludo-sayt__results-tophit-title {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 8px;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0 0 16px;
+  color: #000;
+}
+#search_autocomplete .cludo-sayt__results-tophit-title-link {
+  color: #107eab;
+  font-weight: 600;
+  cursor: pointer;
+}
+#search_autocomplete .cludo-sayt__results-tophit-title-no-link {
+  color: #107eab;
+  font-weight: 600;
+}
+#search_autocomplete .cludo-sayt__no-result-text p {
+  margin: 0;
+  padding: 0;
+  color: #222;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+#search_autocomplete .cludo-sayt__no-result-text p a {
+  color: #107eab;
+  text-decoration: none;
+  cursor: pointer;
+}
+#search_autocomplete .cludo-sayt__results-tophits {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+#search_autocomplete .cludo-sayt__results-tophit:not(:last-of-type) {
+  margin-bottom: 16px;
+}
+#search_autocomplete .cludo-sayt__results-tophit.tool a {
+  display: -webkit-box !important;
+  display: -ms-flexbox !important;
+  display: flex !important;
+  gap: 8px;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+#search_autocomplete .cludo-sayt__results-tophit.tool a .cludo-sayt__tool {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  border-radius: 5px;
+  background-color: #107eab;
+  color: #fff;
+  font-size: 14px;
+  font-weight: 600;
+}
+#search_autocomplete .cludo-sayt__results-tophit a {
+  display: block;
+  font-weight: 600;
+  font-size: 0.875rem;
+  text-decoration: none;
+  cursor: pointer;
+}
+#search_autocomplete .cludo-sayt__results-tophit a h3 {
+  font-weight: 600;
+  color: #222;
+  margin: 0;
+}
+#search_autocomplete .cludo-sayt__results-tophit a span {
+  color: #979797;
+  font-size: 0.688rem;
+}
+#search_autocomplete .cludo-sayt__results-tophit.people-result a {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 8px;
+  color: #222;
+}
+#search_autocomplete .cludo-sayt__results-tophit.people-result .people-result__image {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: 48px;
+  min-width: 48px;
+  height: 48px;
+  min-height: 48px;
+  border-radius: 100%;
+  background-color: var(--brand-main-light);
+  background-size: cover;
+  color: var(--grayscale-white);
+  font-size: 1rem;
+  line-height: 32px;
+  font-weight: 700;
+  letter-spacing: 0.48px;
+  overflow: hidden;
+}
+#search_autocomplete .cludo-sayt__results-tophit.people-result .people-result__image img {
+  width: 100%;
+}
+#search_autocomplete .cludo-sayt__results-tophit.people-result .people-result__content h3 {
+  font-size: 1rem;
+  font-weight: 700;
+}
+#search_autocomplete .cludo-sayt__results-tophit.people-result .people-result__content p {
+  margin: 0;
+  font-weight: 400;
+}
+#search_autocomplete .cludo-sayt__all-results {
+  border-top: 1px solid #d2d2d2;
+  padding-top: 16px;
+}
+@media (min-width: 931px) {
+  #search_autocomplete .cludo-sayt {
+    width: 100%;
+    background-color: #fff;
+    -webkit-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
+    margin: 0;
+    padding: 0 16px;
+    border: 1px solid #d2d2d2;
+  }
+  #search_autocomplete .cludo-sayt__suggestions {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    gap: 12px;
+    overflow-x: scroll;
+    overflow-y: hidden;
+  }
+  #search_autocomplete .cludo-sayt__suggestions-list {
+    overflow: visible;
+    padding: 12px 0;
+  }
+  #search_autocomplete .cludo-sayt__results {
+    padding: 0;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+  #search_autocomplete .cludo-sayt__main-search-categories {
+    padding: 1rem;
+  }
+  #search_autocomplete .cludo-sayt__people-search-categories {
+    border-left: 1px solid #d2d2d2;
+    padding: 1rem;
+  }
+  #search_autocomplete .cludo-sayt__people-search-categories > div {
+    margin-top: 0;
+  }
+  #search_autocomplete .cludo-sayt__all-results {
+    padding: 16px 0;
+  }
+}
+#search_autocomplete .cludo-sayt__all-results a {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  gap: 8px;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  margin: 0 auto;
+  border: none;
+  background-color: #107eab;
+  color: #fff;
+  font-weight: 700;
+  font-size: 1rem;
+  padding: 13px 16px;
+  cursor: pointer;
+}
+#search_autocomplete .cludo-sayt__all-results a:focus,
+#search_autocomplete .cludo-sayt__all-results a:hover {
+  background: #005379;
+}
+#search_autocomplete .cludo-sayt__other {
+  padding: 22px 0;
+}
+#search_autocomplete .cludo-sayt__other h3 {
+  font-size: 18px;
+  letter-spacing: -0.56px;
+  margin-bottom: 7.5px;
 }