guestbell-forms 3.0.38 → 3.0.40

package/src/lib/scss/components/money/money.scss

@@ -0,0 +1,51 @@
+.input__base.money-input {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+  position: relative; // border-bottom: none !important;
+  max-width: 37.5rem;
+  min-height: 40px;
+  input,
+  select {
+    padding: 10px 10px 5px 5px !important;
+    color: $input-text-color;
+    outline: 0;
+    border: none;
+  }
+  .select-input {
+    .bar {
+      display: none;
+    }
+  }
+  .text-input {
+    .bar {
+      display: none;
+    }
+  }
+  .money-input__select {
+    border: none !important;
+    display: inline-block;
+    text-align: center;
+    width: initial;
+    select {
+      padding-right: 20px;
+      min-width: 4rem;
+      width: initial !important;
+    }
+    .select-input__select__wrapper::after {
+      right: 4px;
+    }
+  }
+  .money-input__text {
+    border: none;
+    display: inline-block;
+    width: initial;
+    input {
+      min-width: 40px;
+      width: 100px;
+      &::placeholder {
+        color: $input-label-color;
+      }
+    }
+  }
+}

package/src/lib/scss/components/numberInput/index.scss

@@ -0,0 +1 @@
+@import './numberInput.scss';

package/src/lib/scss/components/numberInput/numberInput.scss

@@ -0,0 +1,116 @@
+.number-input {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  margin-right: 0.5rem;
+  > div,
+  > span {
+    display: inline-block;
+    position: relative;
+    align-self: baseline;
+  }
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+  border-bottom: none !important;
+  width: initial !important;
+  .input-padding {
+    margin: 10px 5px 10px 5px;
+    position: relative;
+  }
+  input {
+    padding: 0;
+    color: $input-text-color;
+    outline: 0;
+    border: none;
+    width: 100%;
+    text-align: center;
+    border: 1px solid $input-border-color;
+    height: 26px;
+    line-height: 0;
+    background-color: transparent;
+  }
+  .highlight {
+    position: absolute;
+    left: 3px;
+    right: 3px;
+    top: 3px;
+    bottom: 3px;
+    width: initial;
+    height: initial;
+    pointer-events: none;
+    opacity: 0.5;
+  }
+  input[type='number'] {
+    -webkit-appearance: textfield;
+    -moz-appearance: textfield;
+    appearance: textfield;
+  }
+  input[type='number']::-webkit-inner-spin-button,
+  input[type='number']::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+  }
+  .number-input__arrows__container {
+    position: relative;
+    display: inline-block;
+  }
+  input:focus ~ label,
+  input.filled ~ label,
+  select:focus ~ label,
+  select.filled ~ label,
+  label.label--focused {
+    top: -17px;
+    font-size: 14px;
+    color: $primary-color;
+  }
+  button {
+    &.plus {
+      top: -12px;
+      svg {
+        transform: rotate(180deg);
+      }
+    }
+    &.minus {
+      bottom: -12px;
+    }
+    padding: 0 5px;
+    line-height: 0;
+    overflow: hidden;
+    border: none;
+    background: transparent;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    /* Styling the down arrow */
+    border: none;
+    cursor: pointer;
+    &:focus {
+      outline: 0;
+    }
+    &:focus-visible {
+      outline: 1px dotted;
+      outline: 5px auto -webkit-focus-ring-color;
+    }
+    svg {
+      transition: 0.2s all;
+      fill: $input-label-color;
+    }
+    &:hover,
+    &:active,
+    &:focus {
+      svg {
+        fill: $primary-color;
+      }
+    }
+  }
+  .number-input__time {
+    width: 26px;
+    display: inline-block;
+  }
+  .number-input__time--ms {
+    width: 40px;
+    display: inline-block;
+  }
+  .number-input__am-pm {
+    color: $input-label-color;
+  }
+}

package/src/lib/scss/components/openingHours/index.scss

@@ -0,0 +1,3 @@
+@import './openingHoursDay/index.scss';
+@import './openingHoursWeek/index.scss';
+@import './openingHoursSpecial/index.scss';

package/src/lib/scss/components/openingHours/openingHoursDay/index.scss

@@ -0,0 +1 @@
+@import './openingHoursDay.scss';

package/src/lib/scss/components/openingHours/openingHoursDay/openingHoursDay.scss

@@ -0,0 +1,127 @@
+.input__group__openingHoursDay {
+  /*.inputGroup__header {
+  }*/
+  &:hover {
+    background-color: $hover-color;
+  }
+}
+
+.openingHoursDay-input {
+  padding-top: 2.5rem;
+  position: relative;
+  min-height: 77px;
+  border-bottom: none !important;
+  width: 100%;
+  .openingHoursDay-input__container {
+    flex-direction: column;
+    display: flex;
+    flex-wrap: wrap;
+    height: 100%;
+  }
+  .time-input {
+    .bar {
+      display: none;
+    }
+    display: inline-block;
+    position: relative;
+    border: none;
+    border-width: 0px;
+    width: auto;
+  }
+  .openingHoursDay-input__time__container {
+    display: flex;
+    align-items: center;
+    margin-bottom: 1rem;
+    margin-top: 0.5rem;
+    > * {
+      margin-right: 1rem;
+    }
+  }
+  input:focus ~ label,
+  input.filled ~ label,
+  select:focus ~ label,
+  span.filled ~ label,
+  span.label-classname.label--focused {
+    top: 0;
+  }
+  .openingHoursDay-input__button--remove {
+    flex-shrink: 0;
+    svg {
+      transform: rotate(45deg);
+    }
+  }
+  .label-classname.label--focused.label--closed {
+    color: $input-label-color;
+  }
+  .openingHoursDay-input__label {
+    color: $input-label-color;
+  }
+  &.input__base > input:focus ~ label,
+  &.input__base > .filled ~ label,
+  &.input__base > select:focus ~ label,
+  &.input__base > textarea:focus ~ label,
+  &.input__base > label.label--focused,
+  &.input__base > span.label-classname.label--focused {
+    font-size: 18px;
+    left: 0;
+  }
+  /*&.input__base input:focus ~ label,
+  &.input__base .filled ~ label,
+  &.input__base select:focus ~ label,
+  &.input__base textarea:focus ~ label,
+  &.input__base label.label--focused,
+  &.input__base span.label-classname.label--focused {
+    left: 0;
+  }*/
+  &.openingHoursDay-input--closed {
+    &.input__base input:focus ~ label,
+    &.input__base .filled ~ label,
+    &.input__base select:focus ~ label,
+    &.input__base textarea:focus ~ label,
+    &.input__base label.label--focused,
+    &.input__base span.label-classname.label--focused {
+      color: $error-color;
+    }
+  }
+}
+
+.openingHoursDay-input__bottom-border {
+  display: inline-block;
+  height: 0px;
+  width: 0;
+  transition: 0.5s all;
+}
+
+.openingHoursDay-input__bottom-border__container {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin-top: -1px;
+  height: 2px;
+  line-height: 0;
+  display: flex;
+}
+
+.openingHoursDay-input__bottom-border--open {
+  height: 2px;
+  background-color: $primary-color;
+}
+
+.openingHoursDay-input__bottom-border--closed {
+  background-color: $input-border-color;
+}
+
+.openingHoursDay-input__bottom-border--midnight {
+  position: absolute;
+  width: 2px;
+  height: 4px;
+  bottom: 0;
+  background-color: $primary-color;
+  transform: translateX(-50%);
+  transition: 0.5s all;
+}
+
+.openingHoursDay-input__button-open-close {
+  align-self: flex-start;
+}

package/src/lib/scss/components/openingHours/openingHoursSpecial/index.scss

@@ -0,0 +1 @@
+@import './openingHoursSpecial.scss';

package/src/lib/scss/components/openingHours/openingHoursSpecial/openingHoursSpecial.scss

@@ -0,0 +1,93 @@
+.inputGroup {
+  .inputGroup__header {
+    .DayPickerInput > input {
+      text-align: right;
+    }
+  }
+}
+
+.input__base.openingHoursSpecial-input {
+  /*.input__group__openingHoursDay {
+    .inputGroup__header {
+      margin-top: 3.10rem;
+    }
+  }*/
+  /* VALIDATION ======================================= */
+  .validation__container {
+    bottom: 0;
+    top: initial;
+    right: 0.25rem;
+  }
+  .validation__ul {
+    transform: translateY(100%);
+    transition: 0.5s;
+    margin-bottom: 0;
+  }
+  &.validation__error {
+    .validation__ul {
+      transform: translateY(0);
+    }
+  }
+  > .input__group__border:first-child {
+    border-top: none;
+  }
+  border: none !important;
+  position: relative;
+  margin: 0;
+  .label__checkbox {
+    display: inline-block;
+    top: 3px;
+  }
+  .label-classname.label--focused {
+    pointer-events: auto;
+    width: 100%;
+  }
+  .openingHoursSpecial-input__button {
+    padding: 0;
+    line-height: 0;
+    margin: auto;
+    position: relative;
+    display: table;
+    opacity: 0.5;
+    transition: 0.2s all;
+    img {
+      vertical-align: top;
+    }
+    &:hover {
+      opacity: 1;
+    }
+    &.openingHoursSpecial-input__button--remove {
+      svg {
+        transform: rotate(45deg);
+      }
+    }
+  }
+  .react-datepicker__input-container {
+    width: 100%;
+    > input {
+      width: 100%;
+      padding: 0;
+      border: none;
+      color: $input-label-color;
+      text-align: right;
+    }
+  }
+  input:focus ~ label,
+  input.filled ~ label,
+  select:focus ~ label,
+  select.filled ~ label,
+  .label-classname.label--focused {
+    top: 0;
+    font-size: 14px;
+    .DayPickerInput > input {
+      width: 70px;
+      color: $primary-color;
+      background-color: transparent;
+    }
+  }
+  .label-classname.label--focused.label--closed {
+    .DayPickerInput > input {
+      color: $input-label-color;
+    }
+  }
+}

package/src/lib/scss/components/openingHours/openingHoursWeek/index.scss

@@ -0,0 +1 @@
+@import './openingHoursWeek.scss';

package/src/lib/scss/components/openingHours/openingHoursWeek/openingHoursWeek.scss

@@ -0,0 +1,23 @@
+.openingHoursWeek-input {
+  border: none;
+  position: relative;
+  .label__checkbox {
+    display: inline-block !important;
+    border-bottom: none !important;
+    margin: 0 0 0 0.5rem !important;
+    width: initial !important;
+  }
+  .label-classname.label--focused {
+    pointer-events: auto;
+    width: 100%;
+  }
+  .openingHoursWeek__is-standard-day {
+    color: $primary-color;
+    position: absolute;
+    right: 0;
+  }
+}
+
+.openingHoursWeek__standard-day {
+  background-color: $hover-color;
+}

package/src/lib/scss/components/radio/index.scss

@@ -0,0 +1 @@
+@import './radio.scss';

package/src/lib/scss/components/radio/radio.scss

@@ -0,0 +1,68 @@
+$baseFontSize: 16;
+@function rem($val) {
+  @return #{$val / $baseFontSize}rem;
+}
+
+.radio-input {
+  display: inline-block;
+  border: none;
+  &:last-child {
+    margin-right: 0;
+  }
+  &.validation__error {
+    border: none;
+  }
+  input {
+    position: relative;
+    padding: 10px 10px 10px 5px;
+    color: $input-text-color;
+    &:focus {
+      outline: 0;
+    }
+    &:focus-visible {
+      outline: 1px dotted;
+      outline: 5px auto -webkit-focus-ring-color;
+    }
+    border: none;
+    width: auto;
+    margin-right: 10px;
+    top: 0;
+    &:before {
+      transition: transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
+      transform: scale(0, 0);
+      content: '';
+      position: absolute;
+      top: 1px;
+      left: 1px;
+      z-index: 1;
+      width: 10px;
+      height: 10px;
+      background: $primary-color;
+      border-radius: 50%;
+    }
+    &:checked {
+      &:before {
+        transform: scale(1, 1);
+      }
+    }
+    &:after {
+      content: '';
+      position: absolute;
+      top: -2px;
+      left: -2px;
+      width: 16px;
+      height: 16px;
+      background: #fff;
+      border: 2px solid $input-border-color;
+      border-radius: 50%;
+    }
+  }
+  label {
+    top: 0;
+    user-select: none;
+    pointer-events: auto;
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+  }
+}

package/src/lib/scss/components/radioContainer/index.scss

@@ -0,0 +1 @@
+@import './radioContainer.scss';

package/src/lib/scss/components/radioContainer/radioContainer.scss

@@ -0,0 +1,15 @@
+.radio-input__container {
+  border-bottom: none !important;
+  display: inline-flex;
+  flex-direction: column;
+  .radio-input {
+    margin: 0;
+  }
+}
+
+.radio-input__container--horizontal {
+  flex-direction: row !important;
+  > div {
+    margin-right: 1rem !important;
+  }
+}

package/src/lib/scss/components/select/index.scss

@@ -0,0 +1 @@
+@import './select.scss';

package/src/lib/scss/components/select/select.scss

@@ -0,0 +1,64 @@
+.select-input {
+  display: inline-block;
+  border: none;
+  max-width: 37.5rem;
+  border-bottom: 1px solid transparent;
+  .select-input__select__wrapper {
+    .select-input__select {
+      color: $input-text-color;
+      display: inline-block;
+      outline: 0;
+      border: none;
+      width: 100%;
+      max-height: 100px;
+      appearance: none;
+      padding: 7px 10px 5px 5px;
+      background-color: transparent;
+    }
+    span.select-input__select {
+      min-height: calc(1rem + 13px);
+    }
+  }
+  &.input__base.multiple {
+    select:focus ~ label,
+    .filled ~ label {
+      bottom: 4px;
+      top: initial;
+      font-size: 18px;
+    }
+    select.filled:focus ~ label {
+      color: $primary-color !important;
+    }
+    .filled ~ label {
+      color: $input-label-color !important;
+    }
+  }
+  &:not(.readonly) {
+    border-bottom: 1px solid $input-border-color;
+    .select-input__select__wrapper {
+      &::after {
+        position: absolute;
+        bottom: 15px;
+        right: 10px;
+        /* Styling the down arrow */
+        width: 0;
+        height: 0;
+        padding: 0;
+        content: '';
+        border-left: 6px solid transparent;
+        border-right: 6px solid transparent;
+        border-top: 6px solid $input-text-color;
+        pointer-events: none;
+      }
+    }
+  }
+  .select-input__selectedValue {
+    display: inline-flex;
+    align-items: center;
+    padding: 7px 10px 5px 5px;
+  }
+  .select-input__selectedValue__wrapper {
+    display: flex;
+    flex-wrap: wrap;
+  }
+}

package/src/lib/scss/components/submit/index.scss

@@ -0,0 +1 @@
+@import './submitValidationSummary.scss';

package/src/lib/scss/components/submit/submitValidationSummary.scss

@@ -0,0 +1,35 @@
+.tippy-tooltip.validation-theme {
+  /*background-color: $background-color;
+    border-top: 2px solid $input-validation-color;
+    color: $input-validation-color;*/
+  /*background-color: $input-validation-color;
+  color: $input-text-color--white;*/
+  min-width: 14rem;
+}
+
+.submitValidationSummary__header {
+  text-align: center;
+  font-size: 110%;
+  margin-bottom: 0.5rem;
+}
+
+.submitValidationSummary__footer {
+  text-align: right;
+  font-size: 110%;
+  margin-top: 0.5rem;
+}
+
+.submitValidationSummary__item {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap; // padding-right: 1.5rem;
+  // padding-left: 1.5rem;
+}
+
+.submitValidationSummary__item__locate-button {
+  margin-left: 0.5rem;
+  svg {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+}

package/src/lib/scss/components/tags/index.scss

@@ -0,0 +1 @@
+@import './tags.scss';