@duetds/components 6.0.6 → 6.1.0

package/lib/collection/components/duet-multiselect/duet-multiselect.css

@@ -0,0 +1,261 @@
+@charset "UTF-8";
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+:host {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  margin-right: 16px !important;
+  margin-bottom: 12px !important;
+  display: inline-flex;
+  width: 100%;
+  max-width: 100%;
+  vertical-align: bottom;
+}
+:host:last-child, :host:last-of-type {
+  margin-right: 0 !important;
+}
+@media (min-width: 36em) {
+  :host {
+    width: calc(50% - 16px - 3px);
+  }
+  :host.duet-expand {
+    width: 100% !important;
+  }
+}
+
+:host(.duet-m-0) {
+  margin: 0 !important;
+}
+
+.duet-multiselect-tooltip {
+  position: absolute;
+  top: 12px;
+  right: 0;
+}
+@media (min-width: 48em) {
+  .duet-multiselect-tooltip {
+    position: relative;
+    top: 4px;
+    right: auto;
+  }
+}
+
+.duet-multiselect-placeholder {
+  position: absolute;
+  top: -9px;
+  left: 9px;
+  z-index: 200;
+  display: block;
+  width: auto;
+  max-width: 60%;
+  padding: 0 0.25rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  background: white;
+}
+
+.duet-multiselect-container {
+  position: relative;
+  width: 100%;
+}
+
+.duet-multiselect-wrapper {
+  position: relative;
+  width: 100%;
+  font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.25;
+}
+.duet-theme-turva .duet-multiselect-wrapper {
+  font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+.duet-multiselect-wrapper::after {
+  content: "  ";
+}
+
+.duet-multiselect {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  min-width: 8rem;
+  padding: 12px 14px !important;
+  overflow: hidden;
+  font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-size: 1rem;
+  font-weight: 400;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.5;
+  color: #00294d;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+  background: white;
+  border: 1px solid #909599;
+  border-radius: 4px;
+  transition: 150ms ease;
+}
+.duet-multiselect:hover {
+  border-color: #909599;
+  box-shadow: 0 0 0 1px #909599;
+}
+.duet-theme-turva .duet-multiselect:hover {
+  border-color: #747475;
+  box-shadow: 0 0 0 1px #747475;
+}
+.has-error .duet-multiselect:hover {
+  box-shadow: 0 0 0 1px #de2362;
+}
+.duet-theme-turva.has-error .duet-multiselect:hover {
+  box-shadow: 0 0 0 1px #e02a0d;
+}
+.duet-multiselect:focus, .duet-multiselect.duet-multiselect-active {
+  border-color: #0077b3;
+  outline: 0;
+  box-shadow: 0 0 0 1px #0077b3;
+  transition: none;
+}
+.duet-theme-turva .duet-multiselect:focus, .duet-theme-turva .duet-multiselect.duet-multiselect-active {
+  border-color: #171c3a;
+  box-shadow: 0 0 0 1px #171c3a;
+}
+.has-error .duet-multiselect:focus, .has-error .duet-multiselect.duet-multiselect-active {
+  box-shadow: 0 0 0 1px #de2362;
+}
+.duet-theme-turva.has-error .duet-multiselect:focus, .duet-theme-turva.has-error .duet-multiselect.duet-multiselect-active {
+  box-shadow: 0 0 0 1px #e02a0d;
+}
+.duet-multiselect[disabled] {
+  color: #00294d !important;
+  cursor: default !important;
+  background: #f5f8fa !important;
+  border-color: #f5f8fa !important;
+  box-shadow: none !important;
+  opacity: 1 !important;
+  -webkit-text-fill-color: #00294d !important;
+}
+.duet-theme-turva .duet-multiselect[disabled] {
+  color: #171c3a !important;
+  background: #f5f5f7 !important;
+  border-color: #f5f5f7 !important;
+  -webkit-text-fill-color: #171c3a !important;
+}
+.duet-multiselect > :first-child {
+  flex: 1;
+}
+.duet-multiselect .duet-multiselect-badge {
+  position: absolute;
+  right: 3rem;
+}
+.has-error .duet-multiselect {
+  border-color: #de2362 !important;
+}
+.has-error .duet-multiselect .duet-multiselect-icon {
+  color: #de2362 !important;
+}
+.duet-theme-turva.has-error .duet-multiselect {
+  border-color: #e02a0d !important;
+}
+.duet-theme-turva.has-error .duet-multiselect .duet-multiselect-icon {
+  color: #e02a0d !important;
+}
+.duet-theme-turva .duet-multiselect {
+  font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  color: #171c3a;
+  border-color: #747475;
+}
+.duet-multiselect svg {
+  width: 20px;
+  height: 20px;
+  color: #00294d;
+  pointer-events: none;
+}
+.duet-theme-turva .duet-multiselect svg {
+  color: #171c3a;
+}
+.duet-multiselect svg.duet-multiselect-icon--rotate {
+  transform: rotate(180deg);
+}
+
+.duet-multiselect-checkboxes {
+  position: absolute;
+  z-index: 700;
+  width: 100%;
+  padding: 16px;
+  margin: 8px 0 0;
+  visibility: hidden;
+  background: white;
+  border: 1px solid #e1e3e6;
+  border-radius: 4px;
+  box-shadow: 0 4px 10px 0 rgba(0, 41, 77, 0.15);
+  opacity: 0;
+  transition: transform 300ms ease, opacity 300ms ease, visibility 300ms ease;
+  transform: scale(0.96) translateZ(0) translateY(-20px);
+  transform-origin: top right;
+}
+.duet-theme-turva .duet-multiselect-checkboxes {
+  background: white;
+  border-color: #e4e4e6;
+  box-shadow: 0 4px 10px 0 rgba(23, 28, 58, 0.15);
+}
+.duet-multiselect-checkboxes.duet-multiselect-checkboxes-active {
+  visibility: visible;
+  opacity: 1;
+  transition-property: transform, opacity;
+  transform: scale(1.0001) translateZ(0) translateY(0);
+}
+
+.duet-multiselect-help {
+  display: block;
+  font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25;
+  color: #657787;
+  border-radius: 4px;
+}
+.duet-multiselect-help span {
+  display: block;
+  margin-top: 8px;
+}
+.duet-theme-turva .duet-multiselect-help {
+  color: #747475;
+}
+.has-error .duet-multiselect-help {
+  color: #de2362;
+}
+.duet-theme-turva.has-error .duet-multiselect-help {
+  color: #e02a0d;
+}
+
+.duet-label-hidden duet-label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  border: 0;
+}