@postnord/pn-marketweb-components 2.0.3-beta4 → 2.0.5

package/umd/modules/@postnord/web-components/collection/components/input/pn-select/pn-select.css

@@ -0,0 +1,320 @@
+pn-select {
+  cursor: pointer;
+  outline: none;
+  position: relative;
+  display: flex;
+  padding: 0.6em 1em;
+  z-index: 0;
+  transition: z-index 0s 0.5s;
+  /* -----------------STATES----------------- */
+  /* -----------------END STATES----------------- */
+}
+pn-select.select-label {
+  padding-top: 1.9em;
+}
+pn-select.select-label .select-content {
+  margin-top: 1.9em;
+}
+pn-select.select-label > label {
+  position: absolute;
+  top: 1.25em;
+  left: 0;
+  transform: translateY(-100%);
+  font-size: 0.875em;
+  color: #5E554A;
+}
+pn-select.select-error {
+  color: #A70707;
+}
+pn-select.select-error.select-error-message {
+  padding-bottom: 1.9em;
+}
+pn-select.select-error.select-error-message .select-content {
+  margin-bottom: 1.9em;
+}
+pn-select.select-error > label {
+  color: #A70707;
+}
+pn-select.select-error .current-selection > pn-option {
+  color: #A70707;
+}
+pn-select.select-error .current-selection > svg.arrow {
+  fill: #A70707;
+}
+pn-select.select-error > small {
+  color: #A70707;
+  font-size: 0.75em;
+  font-size: max(.6em, 1.2rem);
+  position: absolute;
+  bottom: 1.25em;
+  left: 0;
+  transform: translateY(100%);
+}
+pn-select.select-error > small > pn-icon {
+  margin-right: 0.25em;
+}
+pn-select.select-error .select-bg-top,
+pn-select.select-error .select-bg-bottom,
+pn-select.select-error .select-bg {
+  border-color: #A70707;
+}
+pn-select > span {
+  min-height: 1.5em;
+  display: block;
+  width: 100%;
+  white-space: nowrap;
+  opacity: 0;
+  padding-right: 2em;
+}
+pn-select:hover .select-bg,
+pn-select:hover .select-bg-top,
+pn-select:hover .select-bg-bottom {
+  border-color: #00A0D6;
+}
+pn-select:focus .select-bg-top, pn-select:focus-within .select-bg-top, pn-select:not(.search):active .select-bg-top {
+  border-color: #005D92;
+  box-shadow: -0.1rem -0.1rem 0 0 #005D92, 0.1rem -0.1rem 0 0 #005D92;
+}
+pn-select:focus .select-bg, pn-select:focus-within .select-bg, pn-select:not(.search):active .select-bg {
+  border-color: #005D92;
+  box-shadow: -0.1rem 0 0 0 #005D92, -0.1rem 0 0 0 #005D92, 0.1rem 0 0 0 #005D92, 0.1rem 0 0 0 #005D92;
+}
+pn-select:focus .select-bg-bottom, pn-select:focus-within .select-bg-bottom, pn-select:not(.search):active .select-bg-bottom {
+  border-color: #005D92;
+  box-shadow: 0.1rem 0.1rem 0 0 #005D92, -0.1rem 0.1rem 0 0 #005D92;
+}
+
+.current-selection {
+  display: flex;
+  align-items: center;
+  padding: 0 1em;
+  position: relative;
+  z-index: 2;
+  min-height: 1.5em;
+}
+.current-selection pn-checkbox {
+  margin-right: 0.5em;
+}
+.current-selection pn-option {
+  pointer-events: none;
+  color: #005D92;
+  font-weight: 500;
+  overflow: hidden;
+  white-space: nowrap;
+  flex: 1 1;
+}
+.current-selection pn-option .pn-option-content {
+  width: 100%;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+}
+.current-selection > svg.arrow {
+  transition: transform 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s;
+  fill: #005D92;
+  flex-shrink: 0;
+  margin-left: 0.5em;
+}
+
+.select-content {
+  position: absolute;
+  z-index: 3;
+  top: 0;
+  left: 0;
+  margin: 0.6em 0;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  transform-origin: top left;
+  transition: transform 0.2s 0.2s cubic-bezier(0.7, 0, 0.3, 1), border 0.1s, box-shadow 0.1s;
+}
+.select-content[data-flipping] {
+  transition: none;
+}
+
+div.select-options {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  pointer-events: none;
+  padding: 0.1em;
+  z-index: 3;
+  overflow-y: auto;
+  visibility: hidden;
+  transition: visibility 0s 0.2s;
+}
+div.select-options > * {
+  width: 100%;
+}
+div.select-options > hr {
+  border: 0.1rem solid #005D92;
+  border-bottom: 0;
+  margin: 0.6em 0 0;
+  opacity: 0;
+  transition: opacity 0.4s;
+}
+div.select-options input[type=text] {
+  border: 0.1rem solid #5E554A;
+  width: 100%;
+  padding: 0.5em;
+  border-radius: 0.8rem;
+  outline: none;
+  transition: box-shadow 0.1s ease-in-out, border 0.1s;
+}
+div.select-options input[type=text]:hover {
+  border: 0.1rem solid #00A0D6;
+}
+div.select-options input[type=text]:focus {
+  box-shadow: 0 0 0 0.1rem #005D92;
+  border: 0.1rem solid #005D92;
+}
+div.select-options .select-search,
+div.select-options pn-option {
+  transition: transform 0.4s cubic-bezier(0.7, 0, 0.1, 1) 0.2s, opacity 0.4s;
+  opacity: 0;
+  padding: 1em;
+}
+div.select-options .select-search[data-flipping],
+div.select-options pn-option[data-flipping] {
+  transition: transform 0s, opacity 0.4s;
+  transform: translate(calc(-1px * var(--dx)), calc(-1px * var(--dy)));
+}
+div.select-options .select-search {
+  z-index: 2;
+}
+div.select-options .select-search + pn-option {
+  margin-top: 0.1em;
+}
+div.select-options pn-option {
+  z-index: 1;
+}
+div.select-options pn-option + pn-option {
+  margin-top: 0.1em;
+}
+div.select-options[data-hidden=true] pn-option.hidden {
+  position: absolute;
+  top: 1.1em;
+  opacity: 0;
+  width: 100%;
+  z-index: 0;
+  pointer-events: none;
+  background: transparent;
+}
+
+/* -----------------CONTAINER----------------- */
+.select-bg {
+  border-right: 0.1rem solid black;
+  border-left: 0.1rem solid black;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-color: #fff;
+  transition: inherit;
+  transform-origin: top left;
+  pointer-events: none;
+}
+[data-flipping] > .select-bg {
+  transform: scaleY(calc(1 / var(--dh)));
+}
+
+.select-bg-top, .select-bg-bottom {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 1.3em;
+  border: 0.1rem solid black;
+  background-color: white;
+}
+
+.select-bg-top {
+  border-radius: 0.8rem 0.8rem 0 0;
+  top: -0.6em;
+  border-bottom: none;
+  transition: inherit;
+}
+[data-flipping] > .select-bg-top {
+  transform: translateY(calc(-1px * var(--dy)));
+}
+
+.select-bg-bottom {
+  border-radius: 0 0 0.8rem 0.8rem;
+  border-top: none;
+  transition: inherit;
+  bottom: -0.6em;
+  z-index: 2;
+}
+[data-flipping] > .select-bg-bottom {
+  transform: translateY(calc(-1px * var(--dy)));
+}
+
+/* -----------------END CONTAINER----------------- */
+/* -----------------UPWARDS----------------- */
+.pn-select.upwards .select-content {
+  top: unset;
+  bottom: 0;
+  flex-direction: column-reverse;
+}
+.pn-select.upwards .select-content div.select-options {
+  bottom: 100%;
+  top: unset;
+  flex-direction: column-reverse;
+}
+.pn-select.upwards .select-content div.select-options > hr {
+  margin: 0 0 0.6em;
+}
+.pn-select.upwards .select-content div.select-options[data-hidden=true] pn-option.hidden {
+  top: unset;
+  bottom: 1.3em;
+}
+.pn-select.upwards .select-content .select-bg {
+  transform-origin: bottom left;
+}
+.pn-select.upwards .select-content .select-bg-bottom {
+  transition: none;
+}
+.pn-select.upwards pn-option + pn-option {
+  margin-top: 0;
+  margin-bottom: 0.1em;
+}
+
+/* -----------------END UPWARDS----------------- */
+/* ---------------OPEN STATE------------------- */
+.pn-select[data-state=open] {
+  z-index: 5;
+  transition-delay: 0s;
+}
+.pn-select[data-state=open] div.select-options {
+  position: relative;
+  pointer-events: unset;
+  transition: none;
+  visibility: visible;
+}
+.pn-select[data-state=open] div.select-options[data-hidden=true] pn-option {
+  transition: opacity 0.2s, transform 0.2s cubic-bezier(0.7, 0, 0.1, 1), background 0.2s, box-shadow 0.1s;
+}
+.pn-select[data-state=open] div.select-options[data-hidden=true] pn-option + .select-search {
+  margin-top: 0;
+}
+.pn-select[data-state=open] div.select-options[data-hidden=true] pn-option[data-flipping] {
+  transition: transform 0s, opacity 3s;
+}
+.pn-select[data-state=open] pn-option,
+.pn-select[data-state=open] .select-search,
+.pn-select[data-state=open] hr {
+  opacity: 1;
+  transition: opacity 0.4s calc(0.2s + (var(--i) * 0.03s)), transform 0.4s cubic-bezier(0.7, 0, 0.1, 1) 0.2s, background 0.2s, box-shadow 0.2s;
+}
+.pn-select[data-state=open] .select-content {
+  transition-delay: 0s;
+}
+.pn-select[data-state=open] .current-selection svg.arrow {
+  transform: rotate(-180deg);
+  transition-delay: 0s;
+}
+
+/* -----------------END OPEN STATE----------------- */