search

TheWebTech / CrankShaft

A framework for building modern websites on the HubSpot Platform.
https://thewebtech.github.io/CrankShaft
MIT License
46 stars 17 forks source link

Does it make sense to include this "unstyled forms" css in CrankShaft? #92

Open TheWebTech opened 5 years ago

TheWebTech commented 5 years ago

lscanlan posted some code for helping with overriding the embedded hubspot forms.

Not certain if this is a good candidate to add to CrankShaft.

https://community.hubspot.com/t5/Share-Your-Work/Over-rideable-default-CSS-for-unstyled-embedded-HubSpot-forms/m-p/275329/highlight/true#M390

CSS pulled from his post

Example of implementing FW form fields

form.hs-form fieldset.form-columns-1 .hs-input {
  width: 95%;
}

to:

form.hs-form fieldset.form-columns-1 .hs-input {
  width: 100%;
}
div.fn-date-picker.pika-single {
  z-index: 9999;
  display: block;
  position: relative;
  color: #333;
  background: #fff;
  border: 1px solid #ccc;
  border-bottom-color: #bbb;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  *zoom: 1;
}

div.fn-date-picker.pika-single.is-hidden {
  display: none;
}

div.fn-date-picker.pika-single.is-bound {
  position: absolute;
  box-shadow: 0 5px 15px -5px rgba(0,0,0,0.5);
}

div.fn-date-picker.pika-single:before,
div.fn-date-picker.pika-single:after {
  content: " ";
  display: table;
}

div.fn-date-picker.pika-single:after {
  clear: both;
}

div.fn-date-picker .pika-lendar {
  float: left;
  width: 240px;
  margin: 8px;
}

div.fn-date-picker .pika-title {
  position: relative;
  text-align: center;
}

div.fn-date-picker .pika-title select {
  cursor: pointer;
  position: absolute;
  z-index: 9998;
  margin: 0;
  left: 0;
  top: 5px;
  filter: alpha(opacity=0);
  opacity: 0;
}

div.fn-date-picker .pika-label {
  display: inline-block;
  *display: inline;
  position: relative;
  z-index: 9999;
  overflow: hidden;
  margin: 0;
  padding: 5px 3px;
  font-size: 14px;
  line-height: 20px;
  font-weight: bold;
  background-color: #fff;
}

div.fn-date-picker .pika-prev,
div.fn-date-picker .pika-next {
  display: block;
  cursor: pointer;
  position: relative;
  outline: none;
  border: 0;
  padding: 0;
  width: 20px;
  height: 30px;
  text-indent: 20px;
  white-space: nowrap;
  overflow: hidden;
  background-color: transparent;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 75% 75%;
  opacity: 0.5;
  *position: absolute;
  *top: 0;
}

div.fn-date-picker .pika-prev:hover,
div.fn-date-picker .pika-next:hover {
  opacity: 1;
}

div.fn-date-picker .pika-prev.is-disabled,
div.fn-date-picker .pika-next.is-disabled {
  cursor: default;
  opacity: 0.2;
}

div.fn-date-picker .pika-prev,
div.fn-date-picker .is-rtl .pika-next {
  float: left;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==");
  *left: 0;
}

div.fn-date-picker .pika-next,
div.fn-date-picker .is-rtl .pika-prev {
  float: right;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=");
  *right: 0;
}

div.fn-date-picker .pika-select {
  display: inline-block;
  *display: inline;
}

div.fn-date-picker .pika-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: 0;
}

div.fn-date-picker .pika-table th,
div.fn-date-picker .pika-table td {
  width: 14.28571%;
  padding: 0;
}

div.fn-date-picker .pika-table th {
  color: #999;
  font-size: 12px;
  line-height: 25px;
  font-weight: bold;
  text-align: center;
}

div.fn-date-picker .pika-table abbr {
  border-bottom: none;
  cursor: help;
}

div.fn-date-picker .pika-button {
  cursor: pointer;
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  outline: none;
  border: 0;
  margin: 0;
  width: 100%;
  padding: 5px;
  color: #666;
  font-size: 12px;
  line-height: 15px;
  text-align: right;
  background: #f5f5f5;
}

div.fn-date-picker .pika-button:hover {
  color: #fff !important;
  background: #ff8000 !important;
  box-shadow: none !important;
  border-radius: 3px !important;
}

div.fn-date-picker .is-today .pika-button {
  color: #3af;
  font-weight: bold;
}

div.fn-date-picker .is-selected .pika-button {
  color: #fff;
  font-weight: bold;
  background: #3af;
  box-shadow: inset 0 1px 3px #178fe5;
  border-radius: 3px;
}

div.fn-date-picker .is-disabled .pika-button {
  pointer-events: none;
  cursor: default;
  color: #999;
  opacity: 0.3;
}

div.fn-date-picker .pika-week {
  font-size: 11px;
  color: #999;
}

form.hs-form .inputs-list.inline-list li {
  vertical-align: top;
  display: inline-block;
  word-wrap: break-word;
  padding-right: 16px;
}

form.hs-form .inputs-list.inline-list li:after {
  clear: both;
}

form.hs-form .inputs-list.inline-list li input {
  float: left;
}

form.hs-form .inputs-list.inline-list.inline-list-2 li {
  width: 50%;
}

form.hs-form .inputs-list.inline-list.inline-list-2 li:nth-child(2n) {
  padding-right: 0;
}

form.hs-form .inputs-list.inline-list.inline-list-3 li {
  width: 33%;
}

form.hs-form .inputs-list.inline-list.inline-list-3 li:nth-child(3n) {
  width: 34%;
  padding-right: 0;
}

div.hs-fieldtype-intl-phone.hs-input {
  padding: 0;
  background: none;
  border: none;
  height: auto;
}

div.hs-fieldtype-intl-phone.hs-input:after {
  clear: both;
  content: " ";
  display: table;
}

div.hs-fieldtype-intl-phone.hs-input .hs-input {
  margin-bottom: 0;
}

div.hs-fieldtype-intl-phone.hs-input input {
  width: 68% !important;
  float: right;
}

div.hs-fieldtype-intl-phone.hs-input select {
  float: left;
  width: 30% !important;
}

@media (max-width: 400px), (max-device-width: 480px) and (min-device-width: 320px) {
  form.hs-form > .hs-phone > .input > .hs-fieldtype-intl-phone.hs-input > input.hs-input {
    width: 68% !important;
  }

  form.hs-form > .hs-phone > .input > .hs-fieldtype-intl-phone.hs-input > select.hs-input {
    width: 30% !important;
  }
}

div.hs-input-range-container {
  width: 95%;
}

div.hs-input-range-container div {
  display: inline-block;
  line-height: 50px;
}

div.hs-input-range-container .hs-input-range {
  width: 90%;
  height: 40px;
}

div.hs-input-range-container .hs-input-range>* {
  vertical-align: middle;
}

div.hs-input-range-container .hs-input-range input {
  margin: 0 5px;
  width: 85%;
}

div.hs-input-range-container .hs-input-range-value-container {
  width: 10%;
}

div.hs-input-range-container .hs-input {
  width: 100% !important;
  margin-right: 1px;
  background-color: #fff;
  text-align: center;
}

input.hs-input-range__slider {
  appearance: none;
  margin: 0;
  height: 30px;
  overflow: hidden;
  cursor: pointer;
}

input.hs-input-range__slider:focus {
  outline: none;
}

input.hs-input-range__slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 30px;
  background: linear-gradient(to bottom, #0199ff,#0199ff) 100% 50%/100% 3px no-repeat transparent;
}

input.hs-input-range__slider::-webkit-slider-thumb {
  position: relative;
  appearance: none;
  height: 13px;
  width: 13px;
  background: #0199ff;
  border-radius: 100%;
  border: 0;
  top: 50%;
  margin-top: -7.5px;
  /* removed box-shadow value due to character limit */
  box-shadow: ;
  transition: background-color 150ms;
}

input.hs-input-range__slider::-moz-range-track,
input.hs-input-range__slider::-moz-range-progress {
  width: 100%;
  height: 30px;
  background: linear-gradient(to bottom, #cfcfcf,#cfcfcf) 100% 50%/100% 3px no-repeat transparent;
}

input.hs-input-range__slider::-moz-range-progress {
  background: linear-gradient(to bottom, #0199ff,#0199ff) 100% 50%/100% 3px no-repeat transparent;
}

input.hs-input-range__slider::-moz-range-thumb {
  appearance: none;
  margin: 0;
  height: 13px;
  width: 13px;
  background: #0199ff;
  border-radius: 100%;
  border: 0;
  transition: background-color 150ms;
}

input.hs-input-range__slider::-ms-track {
  width: 100%;
  height: 30px;
  border: 0;
  color: transparent;
  background: transparent;
}

input.hs-input-range__slider::-ms-fill-lower {
  background: linear-gradient(to bottom, #0199ff,#0199ff) 100% 50%/100% 3px no-repeat transparent;
}

input.hs-input-range__slider::-ms-fill-upper {
  background: linear-gradient(to bottom, #cfcfcf,#cfcfcf) 100% 50%/100% 3px no-repeat transparent;
}

input.hs-input-range__slider::-ms-thumb {
  appearance: none;
  height: 13px;
  width: 13px;
  background: #0199ff;
  border-radius: 100%;
  border: 0;
  transition: background-color 150ms;
  top: 0;
  margin: 0;
  box-shadow: none;
}

input.hs-input-range__slider:hover::-webkit-slider-thumb,
input.hs-input-range__slider:focus::-webkit-slider-thumb {
  background-color: #55c2ff;
}

input.hs-input-range__slider:hover::-moz-range-thumb,
input.hs-input-range__slider:focus::-moz-range-thumb {
  background-color: #55c2ff;
}

input.hs-input-range__slider:hover::-ms-thumb,
input.hs-input-range__slider:focus::-ms-thumb {
  background-color: #55c2ff;
}

div.hs-input-rating__container {
  width: 95%;
  margin-bottom: 30px;
  display: table;
  table-layout: fixed;
}

div.hs-input-rating__container section {
  display: table-row;
}

label.hs-input-rating__label {
  position: relative;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

label.hs-input-rating__label input,
label.hs-input-rating__label svg {
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  display: block;
  cursor: pointer;
}

label.hs-input-rating__label svg {
  position: absolute;
  width: 45px;
  height: 45px;
  fill: #fff;
  stroke: #ccc;
  transform: scale(0.6);
  transition: transform 200ms ease-in-out;
}

label.hs-input-rating__label path {
  transition: fill 200ms ease-in-out,stroke 100ms ease-in-out;
}

div.hs-input-rating__is-star input {
  display: none;
}

svg.hs-input-rating__svg-is-selected {
  transform: scale(0.7);
}

svg.hs-input-rating__svg-is-selected path {
  fill: #f7e31b;
  stroke: #d7c508;
}

form.hs-form .hs-richtext {
  word-break: break-word;
}

form.hs-form.submitted-message {
  overflow: auto;
}

form.hs-form fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  max-width: 500px;
}

form.hs-form fieldset.form-columns-1 .hs-input {
  width: 95%;
}

form.hs-form fieldset.form-columns-1 .input {
  margin-right: 8px;
}

form.hs-form fieldset.form-columns-1 input[type="checkbox"],
form.hs-form fieldset.form-columns-1 input[type="radio"] {
  width: auto;
}

form.hs-form fieldset.form-columns-2 .hs-form-field {
  width: 50%;
  float: left;
}

form.hs-form fieldset.form-columns-2 .input {
  margin-right: 8px;
}

form.hs-form fieldset.form-columns-3 .hs-form-field {
  width: 32.7%;
  float: left;
}

form.hs-form fieldset.form-columns-3 .input {
  margin-right: 8px;
}

form.hs-form label.hs-hidden {
  visibility: hidden;
}

form.hs-form .hs-field-desc {
  width: 100%;
}

form.hs-custom-style fieldset,
form.hs-custom-style .hs-input {
  max-width: 100%;
}

form.hs-custom-style fieldset.form-columns-3 .hs-form-field,
form.hs-custom-style > div.form-columns-3 .hs-form-field {
  width: 33.3%;
}

form.hs-custom-style fieldset > div:last-of-type .hs-input:not([type=checkbox]):not([type=radio]),
form.hs-custom-style > div > div:last-of-type .hs-input:not([type=checkbox]):not([type=radio]) {
  width: 100%;
  max-width: 100%;
}

form.hs-custom-style fieldset input:not([type="image"]):not([type="submit"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]):not([type="file"]),
form.hs-custom-style>div input:not([type="image"]):not([type="submit"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]):not([type="file"]) {
  box-sizing: border-box;
  padding: 0 15px;
  min-height: 27px;
}

@media (max-width: 400px), (min-device-width: 320px) and (max-device-width: 480px) {
  form.hs-custom-style fieldset,
  form.hs-custom-style .hs-input:not([type=checkbox]):not([type=radio]) {
    margin-right: 0 !important;
    width: 100% !important;
  }

  form.hs-form:not(.hs-video-form) .form-columns-2 div.hs-form-field,
  form.hs-form:not(.hs-video-form) .form-columns-3 div.hs-form-field {
    float: none;
    width: 100%;
  }

  form.hs-form:not(.hs-video-form) .form-columns-2 .hs-form-field input.hs-input,
  form.hs-form:not(.hs-video-form) .form-columns-3 .hs-form-field input.hs-input {
    width: 95%;
  }

  form.hs-form:not(.hs-video-form) .form-columns-2 div.hs-form-field input[type="checkbox"],
  form.hs-form:not(.hs-video-form) .form-columns-2 div.hs-form-field input[type="radio"],
  form.hs-form:not(.hs-video-form) .form-columns-3 div.hs-form-field input[type="checkbox"],
  form.hs-form-:not(.hs-video-form) .form-columns-3 div.hs-form-field input[type="radio"] {
    width: auto;
  }
}

div.legal-consent-container .field.hs-form-field {
  margin-bottom: 8px;
}

div.legal-consent-container .hs-field-desc.checkbox-desc {
  margin: -12px 0 0 21px;
}

div.legal-consent-container .hs-form-booleancheckbox-display input {
  float: left;
}

div.legal-consent-container .hs-form-booleancheckbox-display>span {
  display: block;
  margin-left: 20px;
}

div.legal-consent-container .hs-form-booleancheckbox-display p {
  margin: 0;
  display: inline;
}

div.legal-consent-container .hs-error-msgs label {
  color: #f2545b;
}

div.legal-consent-container ~ .hs_recaptcha {
  margin-top: 18px;
}

div.cookie-reset-container {
  font-size: 14px;
  margin-bottom: 10px;
  text-align: right;
}

form #hs-outer-captcha-target,
form #hs-outer-captcha-target * {
  display: none;
  height: 0;
  width: 0;
}

div.hubspot-link__container {
  font-size: 14px;
  padding-bottom: 40px;
  position: relative;
  color: #9fa0a2;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

span.hubspot-link-text {
  color: #00a4bd;
  font-weight: 400;
}

div.hubspot-link__container.sproket {
  color: #9fa0a2;
}

a.hubspot-link {
  text-decoration: none;
  color: #9fa0a2;
}

a.hubspot-link:hover {
  text-decoration: none;
}

a.hubspot-link:hover .hubspot-link-text {
  text-decoration: underline;
}

img.hubspot-link__icon {
  margin-bottom: -1px;
  margin-right: 5px;
}

div.hubspot-link__container.sproket .hubspot-link__icon {
  width: 30px;
  margin-right: 0px;
  float: left;
  margin-top: -9px;
  margin-left: -5px;
}
johnsfuller commented 5 years ago

Maybe have the code available, but not included / "turned off" in the master styles sheet? Thoughts? I'd just hate to bloat up the code right off the bat.

TheWebTech commented 5 years ago

I kinda agree on the sentiment it kinda bloats things up a bit. If you're not needing it on every site, or not sure what it's for, it would be excess bloat. May make sense to let it be what Dennis has moved towards doing, let it be in it's own repository, if you want to use it you can copy and paste it into your own.

johnsfuller commented 5 years ago

yeah, I agree.