@roadtrip/components 3.11.2 → 3.12.0

package/dist/collection/components/phone-number-input/phone-number-input.css

@@ -2,8 +2,207 @@
   margin-left: -4.5rem;
 }
 
+.is-invalid .form-control.sc-road-input{
+  border-color: var(--road-danger-outline);
+}
 
+.road-phone-input-select {
+  position: relative;
+  display: block;
+  margin-bottom: 1rem;
+  font-family: var(--road-font, sans-serif);
+  color: var(--road-on-surface);
+  background-color: var(--road-surface);
+  border: 1px solid var(--road-input-outline);
+  border-radius: 0.25rem;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  box-shadow: none;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  width: 5rem;
+  height: 3.5rem;
+}
 
-.is-invalid .form-control.sc-road-input{
+:host() .is-error {
   border-color: var(--road-danger-outline);
 }
+
+/* SELECT
+  -------------------- */
+
+  .form-select-area {
+    box-sizing: border-box;
+    display: block;
+    width: 100%;
+    height: 3rem;
+    padding: 0.75rem 3rem 0 1rem;
+    margin: 0;
+    font-size: var(--road-body-medium);
+    line-height: 1.5;
+    color: var(--road-on-surface);
+    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0icmdiYSgyMywgMzAsIDUyLCAwLjcyKSI+PHBhdGggZD0iTTIzIDI2bDkgMTIgOS0xMnoiLz48L3N2Zz4=") no-repeat right 1rem center/1.5rem 2rem;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    z-index: 1;
+    border: 0;
+    opacity: 0;
+    cursor: pointer;
+  }
+
+  .form-select-area:-moz-focusring {
+    color: transparent;
+    text-shadow: 0 0 0 #000000;
+  }
+
+  .form-select-area::-ms-expand { /* IE fix remove native arrow */
+    display: none;
+  }
+
+  /**
+    * Placeholder
+    */
+
+  .form-select-area::placeholder {
+    color: var(--road-on-surface-extra-weak);
+  }
+
+  /**
+    * Hover state
+    */
+
+  @media (hover: hover) {
+
+    .form-select-area:not(:disabled):hover {
+      border-color: var(--road-input-outline-variant);
+    }
+  }
+
+  /**
+    * Focus state
+    */
+
+  .form-select-area:focus ~ .form-select-area-label,
+  .form-select-area[required]:valid ~ .form-select-area-label,
+  .form-select-area.has-value ~ .form-select-area-label {
+    transform: scale(0.625) translateY(-0.625rem);
+  }
+
+  .form-select-area:not(:disabled):focus {
+    border-color: var(--road-input-outline-variant);
+    outline: 0;
+  }
+
+  /**
+    * Disabled state
+    */
+
+  .form-select-area:disabled,
+  .form-select-area[readonly] {
+    color: var(--road-on-surface-disabled);
+    cursor: not-allowed;
+    background-color: var(--road-surface-disabled);
+    opacity: 1;
+  }
+
+  /* LABEL
+    -------------------- */
+
+  .form-select-area-label {
+    position: absolute;
+    top: 0.9rem;
+    left: 1rem;
+    display: block;
+    font-size: var(--road-font-size-18);
+    line-height: 1.5;
+    color: var(--road-on-surface-extra-weak);
+    pointer-events: none;
+    transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+    transform-origin: 0 0;
+  }
+
+  .form-select-area:required ~ .form-select-area-label::after{
+    color: var(--road-on-danger-surface);
+    content: " *";
+  }
+
+  /* Value
+    -------------------- */
+
+  .form-select-area-value {
+    position: absolute;
+    top: 1.4rem;
+    left: 1rem;
+    display: block;
+    font-size: var(--road-label-medium);
+    line-height: 1.5;
+    color: var(--road-on-surface);
+    pointer-events: none;
+    transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+    transform-origin: 0 0;
+  }
+
+
+  /* SIZES
+    -------------------- */
+
+  :host(.select-xl) .form-select-area {
+    height: 3.5rem;
+    padding: 0.75rem 0 0 1rem;
+  }
+
+  :host(.select-xl) .form-select-area-label {
+    top: 1rem;
+  }
+
+  :host(.select-xl) .form-select-area:focus ~ .form-select-area-label,
+  :host(.select-xl) .form-select-area[required]:valid ~ .form-select-area-label,
+  :host(.select-xl) .form-select-area.has-value ~ .form-select-area-label,
+  :host(.select-xl) .form-select-area[type="date"] ~ .form-select-area-label,
+  :host(.select-xl) .form-select-area[type="time"] ~ .form-select-area-label {
+    transform: scale(0.75) translateY(-0.625rem);
+  }
+
+  :host(.select-xl) .form-select-area:placeholder-shown ~ .form-select-area-label {
+    transform: scale(0.75) translateY(-0.625rem);
+  }
+
+  /* ERROR
+    -------------------- */
+
+  .invalid-feedback {
+    display: none;
+    width: 100%;
+    margin-top: 0.5rem;
+    font-size: var(--road-body-small);
+    color: var(--road-on-danger-surface);
+  }
+
+  .form-select-area.is-invalid,
+  .was-validated .form-select-area:invalid {
+    border-color: var(--road-on-danger-surface);
+  }
+
+  .form-select-area.is-invalid ~ .invalid-feedback,
+  .was-validated .form-select-area:invalid ~ .invalid-feedback {
+    display: block;
+  }
+
+
+  .form-select-area option:checked::after {
+    position: absolute;
+    top: 0;
+    left: 0;
+    content: attr(data-content);
+  }
+
+  .form-select-area::after {
+    position: absolute;
+    top: 0;
+    left: 0;
+    content: var(--selected-content, '');
+  }