@hubspot/cms-component-library 0.3.11 → 0.3.13

package/components/componentLibrary/Form/islands/legacyForm.module.css

@@ -1,251 +0,0 @@
-.legacyFormStyles {
-  /* Form container */
-  :global(.hs-form) {
-    padding: 32px;
-    border-color: #ff00ff;
-    border-radius: 8px;
-    border-style: solid;
-    border-width: 4px;
-    background: #ffe0f0;
-
-    /* Form field spacing */
-    :global(.hs-form-field) {
-      margin-block-end: 24px;
-    }
-
-    /* Textarea */
-    :global(textarea) {
-      position: relative;
-      height: 160px;
-      border-radius: 3px;
-
-      &::-webkit-resizer {
-        display: none;
-      }
-    }
-
-    /* Textarea drag icon */
-    :global(.hs_multi_line_field .input) {
-      position: relative;
-
-      &::after {
-        position: absolute;
-        right: 8px;
-        bottom: 8px;
-        content: url("data:image/svg+xml,%3Csvg width='11' height='12' viewBox='0 0 22 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline y1='-1' x2='29.5206' y2='-1' transform='matrix(-0.666795 0.745241 -0.806754 -0.590888 19.6843 0)' stroke='%23303F59' stroke-width='2'/%3E%3Cpath d='M21.0005 9.99756L10.5005 21.9976' stroke='%23303F59' stroke-width='2'/%3E%3C/svg%3E%0A");
-        pointer-events: none;
-      }
-    }
-
-    /* Select dropdown - remove native appearance */
-    :global(select) {
-      -webkit-appearance: none;
-      -moz-appearance: none;
-      appearance: none;
-    }
-
-    /* Select dropdown icon */
-    :global(.hs-fieldtype-select .input) {
-      position: relative;
-
-      &::after {
-        position: absolute;
-        top: 50%;
-        right: 16px;
-        content: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.9407 19.5595C11.5267 20.1454 12.4782 20.1454 13.0642 19.5595L22.0642 10.5595C22.6501 9.97354 22.6501 9.02197 22.0642 8.43604C21.4782 7.8501 20.5267 7.8501 19.9407 8.43604L12.0001 16.3767L4.05947 8.44072C3.47354 7.85478 2.52197 7.85478 1.93604 8.44072C1.3501 9.02666 1.3501 9.97822 1.93604 10.5642L10.936 19.5642L10.9407 19.5595Z' fill='%2309152B'/%3E%3C/svg%3E%0A");
-        pointer-events: none;
-        transform: translateY(-50%);
-      }
-    }
-
-    /* Datepicker icon */
-    :global(.hs-dateinput) {
-      position: relative;
-
-      &::before {
-        position: absolute;
-        top: 50%;
-        right: 16px;
-        content: url("data:image/svg+xml,%3Csvg width='24' height='29' viewBox='0 0 24 29' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_3812_12272)'%3E%3Cpath d='M8.14286 2.07136C8.14286 1.35886 7.56964 0.785645 6.85714 0.785645C6.14464 0.785645 5.57143 1.35886 5.57143 2.07136V4.21422H3.42857C1.5375 4.21422 0 5.75172 0 7.64279V8.49993V11.0714V24.7856C0 26.6767 1.5375 28.2142 3.42857 28.2142H20.5714C22.4625 28.2142 24 26.6767 24 24.7856V11.0714V8.49993V7.64279C24 5.75172 22.4625 4.21422 20.5714 4.21422H18.4286V2.07136C18.4286 1.35886 17.8554 0.785645 17.1429 0.785645C16.4304 0.785645 15.8571 1.35886 15.8571 2.07136V4.21422H8.14286V2.07136ZM2.57143 11.0714H21.4286V24.7856C21.4286 25.2571 21.0429 25.6428 20.5714 25.6428H3.42857C2.95714 25.6428 2.57143 25.2571 2.57143 24.7856V11.0714Z' fill='%2309152B'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3812_12272'%3E%3Crect width='24' height='27.4286' fill='white' transform='translate(0 0.785645)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
-        pointer-events: none;
-        transform: translateY(-50%);
-      }
-    }
-
-    /* Placeholder text color */
-    :global(::-moz-placeholder) {
-      color: #ff6600;
-    }
-
-    :global(::placeholder) {
-      color: #ff6600;
-    }
-
-    /* Checkbox and radio list reset */
-    :global(.inputs-list) {
-      padding: 0;
-      margin: 0;
-      list-style: none;
-
-      :global(li) {
-        display: block;
-        margin-block-end: 16px;
-
-        &:last-of-type {
-          margin-block-end: 0;
-        }
-      }
-
-      :global(:is(input, span)) {
-        vertical-align: middle;
-      }
-    }
-
-    /* Help text / legend */
-    :global(legend) {
-      color: #ff6600;
-      margin-block-end: 8px;
-    }
-
-    /* Rich text within form */
-    :global(.hs-richtext) {
-      color: #9900cc;
-
-      :global(img) {
-        height: auto;
-        max-width: 100% !important;
-      }
-    }
-
-    /* Error state - input border */
-    :global(.hs-input.error) {
-      border-color: #ff0000;
-    }
-
-    /* Error messages */
-    :global(.hs-error-msg),
-    :global(.hs-error-msgs) {
-      color: #ff0000;
-      margin-block-start: 4px;
-    }
-
-    /* File upload and fieldset max width */
-    :global(.hs-form-field.hs-fieldtype-file .hs-input),
-    :global(fieldset) {
-      max-width: 100% !important;
-    }
-  }
-
-  /* Labels - targets both form types */
-  :global(:is(.hs-form, .hs-elevate-system-form)) :global(label) {
-    display: block;
-    color: #cc0066;
-    font-family: sans-serif;
-    font-size: 0.875rem;
-    font-weight: 600;
-    margin-block-end: 8px;
-  }
-
-  /* Text inputs, selects, textareas - targets both form types */
-  :global(:is(.hs-form, .hs-elevate-system-form)) :global(input[type='text']),
-  :global(:is(.hs-form, .hs-elevate-system-form)) :global(input[type='email']),
-  :global(:is(.hs-form, .hs-elevate-system-form)) :global(input[type='password']),
-  :global(:is(.hs-form, .hs-elevate-system-form)) :global(input[type='tel']),
-  :global(:is(.hs-form, .hs-elevate-system-form)) :global(input[type='number']),
-  :global(:is(.hs-form, .hs-elevate-system-form)) :global(input[type='search']),
-  :global(:is(.hs-form, .hs-elevate-system-form)) :global(select),
-  :global(:is(.hs-form, .hs-elevate-system-form)) :global(textarea) {
-    width: 100% !important;
-    border-radius: 6px;
-    border-top: 3px solid #00ccff;
-    border-right: 3px solid #00ccff;
-    border-bottom: 3px solid #00ccff;
-    border-left: 3px solid #00ccff;
-    background-color: #e0ffff;
-    color: #003300;
-    padding-block: 12px;
-    padding-inline: 16px;
-  }
-
-  /* Checkbox and radio sizing + fill - targets both form types */
-  :global(:is(.hs-form, .hs-elevate-system-form)) :global(input[type='checkbox']),
-  :global(:is(.hs-form, .hs-elevate-system-form)) :global(input[type='radio']) {
-    height: 24px;
-    width: 24px !important;
-    accent-color: #00cc00;
-    cursor: pointer;
-    margin-inline-end: 12px;
-  }
-
-  /* Submit button - targets both form types */
-  :global(:is(.hs-form, .hs-elevate-system-form)) :global(:is(.hs-button, input[type='submit'])) {
-    display: inline-block;
-    width: 100%;
-    border-color: #ff6600;
-    border-radius: 6px;
-    border-style: solid;
-    border-width: 3px;
-    background-color: #ff6600;
-    color: #ffffff;
-    cursor: pointer;
-    font-family: sans-serif;
-    font-size: 1rem;
-    font-weight: 600;
-    padding-block: 12px;
-    padding-inline: 24px;
-    text-align: center;
-    text-decoration: none;
-    transition: all 0.15s linear;
-    white-space: normal !important;
-
-    &:hover,
-    &:focus {
-      border-color: #cc5200;
-      background-color: #cc5200;
-      color: #ffffff;
-      text-decoration: none;
-    }
-  }
-
-  /* International phone field layout */
-  :global(.hs-input.hs-fieldtype-intl-phone) {
-    display: flex;
-    width: 100% !important;
-    flex-direction: row;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: flex-start;
-    gap: 8px;
-
-    > :global(input) {
-      flex: 1 0 calc(70% - 8px) !important;
-    }
-
-    > :global(select) {
-      flex: 1 0 30% !important;
-    }
-
-    @media (width <= 600px) {
-      display: flex;
-      width: 100%;
-      flex-direction: column;
-      gap: 8px;
-
-      > :global(select),
-      > :global(input) {
-        min-width: 100%;
-        flex: 1 1 100%;
-      }
-
-      > :global(select) {
-        padding-inline: 16px;
-      }
-    }
-  }
-
-
-  :global(.grecaptcha-badge) {
-    margin-block: 0 !important;
-    margin-inline: auto !important;
-  }
-}