File Editor
Directories:
.. (Back)
app
tickets-commerce
Files:
attendees.css
attendees.min.css
common-responsive.css
common-responsive.min.css
details.css
details.min.css
my-tickets.css
my-tickets.min.css
rsvp-v1.css
rsvp-v1.min.css
rsvp.css
rsvp.min.css
tickets-admin-attendees.css
tickets-admin-attendees.min.css
tickets-admin-blocks.css
tickets-admin-blocks.min.css
tickets-admin-settings.css
tickets-admin-settings.min.css
tickets-admin-wp.css
tickets-admin-wp.min.css
tickets-admin.css
tickets-admin.min.css
tickets-commerce.css
tickets-commerce.min.css
tickets-common.css
tickets-common.min.css
tickets-embed.css
tickets-embed.min.css
tickets-forms.css
tickets-forms.min.css
tickets-registration-page.css
tickets-registration-page.min.css
tickets-report-print.css
tickets-report-print.min.css
tickets-report.css
tickets-report.min.css
tickets-tables.css
tickets-tables.min.css
tickets-v1.css
tickets-v1.min.css
tickets.css
tickets.min.css
tpp.css
tpp.min.css
Create New File
Create
Edit File: tickets-forms.css
/** * This CSS file was auto-generated via PostCSS * * Contributors should avoid editing this file, but instead edit the associated * src/resources/postcss/ file. For more information, check out our engineering * docs on how we handle CSS in our engineering docs. * * @see: https://the-events-calendar.github.io/products-engineering/docs/code-standards/css/ */ /** * Event Tickets - Form styles for Event Tickets. * * @since 5.0.0 */ .event-tickets .tribe-tickets__form .tribe-tickets__form-field { display: block; padding-bottom: var(--tec-spacer-2); width: 100%; } .event-tickets .tribe-tickets__form .tribe-tickets__form-field--required header:first-child:after, .event-tickets .tribe-tickets__form .tribe-tickets__form-field--required label:first-child:after { content: ''; } .event-tickets .tribe-tickets__form .tribe-required { color: var(--tec-color-icon-error); margin-left: var(--tec-spacer-0); } .event-tickets .tribe-tickets__form label, .event-tickets .tribe-tickets__form .tribe-tickets__form-field-label { color: var(--tec-color-text-primary); display: block; font-size: inherit; font-weight: var(--tec-font-weight-regular); margin-bottom: var(--tec-spacer-0); } .event-tickets .tribe-tickets__form label.tribe-tickets-meta-field-header, .event-tickets .tribe-tickets__form .tribe-tickets__form-field-label.tribe-tickets-meta-field-header { cursor: pointer; display: inline-block; margin-bottom: 0; margin-right: var(--tec-spacer-4); } .event-tickets .tribe-tickets__form .tribe-tickets__form-field-input-wrapper { width: 100%; } .event-tickets .tribe-tickets__form .tribe-tickets__form-field-input-helper { color: var(--tec-color-text-primary-light); margin-top: var(--tec-spacer-0); } .event-tickets .tribe-tickets__form .tribe-tickets__form-field-input-helper--error { color: var(--tec-color-icon-error); } .event-tickets .tribe-tickets__form .tribe-common-form-control-radio__input, .event-tickets .tribe-tickets__form .tribe-common-form-control-checkbox__input { border-color: var(--tec-color-border-default); border-width: 1px; box-shadow: none; margin-right: var(--tec-spacer-1); } .event-tickets .tribe-tickets__form .tribe-common-form-control-radio__input:hover, .event-tickets .tribe-tickets__form .tribe-common-form-control-radio__input:focus, .event-tickets .tribe-tickets__form .tribe-common-form-control-checkbox__input:hover, .event-tickets .tribe-tickets__form .tribe-common-form-control-checkbox__input:focus { border-color: var(--tec-form-color-border-secondary); } .event-tickets .tribe-tickets__form .tribe-common-form-control-radio__input:active, .event-tickets .tribe-tickets__form .tribe-common-form-control-checkbox__input:active { border-color: var(--tec-form-color-border-primary); } .event-tickets .tribe-tickets__form .tribe-common-form-control-radio__input:checked, .event-tickets .tribe-tickets__form .tribe-common-form-control-checkbox__input:checked { background-color: var(--tec-color-icon-focus); border-color: var(--tec-color-icon-focus); } .event-tickets .tribe-tickets__form .tribe-common-form-control-radio__input.tribe-tickets__form-field-input--error, .event-tickets .tribe-tickets__form .tribe-common-form-control-checkbox__input.tribe-tickets__form-field-input--error { border-color: var(--tec-color-icon-error); } .event-tickets .tribe-tickets__form .tribe-common-form-control-checkbox__input { border-radius: var(--tec-border-radius-default); } .event-tickets .tribe-tickets__form .tribe-common-form-control-checkbox__label { margin-left: 0; } .event-tickets .tribe-tickets__form input[type='text'], .event-tickets .tribe-tickets__form input[type='email'], .event-tickets .tribe-tickets__form input[type='url'], .event-tickets .tribe-tickets__form input[type='password'], .event-tickets .tribe-tickets__form input[type='search'], .event-tickets .tribe-tickets__form input[type='number'], .event-tickets .tribe-tickets__form input[type='tel'], .event-tickets .tribe-tickets__form input[type='range'], .event-tickets .tribe-tickets__form input[type='date'], .event-tickets .tribe-tickets__form input[type='month'], .event-tickets .tribe-tickets__form input[type='week'], .event-tickets .tribe-tickets__form input[type='time'], .event-tickets .tribe-tickets__form input[type='datetime'], .event-tickets .tribe-tickets__form input[type='datetime-local'], .event-tickets .tribe-tickets__form input[type='color'], .event-tickets .tribe-tickets__form select, .event-tickets .tribe-tickets__form textarea { border: 1px solid var(--tec-color-border-default); border-radius: var(--tec-border-radius-default); width: 100%; } .event-tickets .tribe-tickets__form input[type='text']:focus, .event-tickets .tribe-tickets__form input[type='email']:focus, .event-tickets .tribe-tickets__form input[type='url']:focus, .event-tickets .tribe-tickets__form input[type='password']:focus, .event-tickets .tribe-tickets__form input[type='search']:focus, .event-tickets .tribe-tickets__form input[type='number']:focus, .event-tickets .tribe-tickets__form input[type='tel']:focus, .event-tickets .tribe-tickets__form input[type='range']:focus, .event-tickets .tribe-tickets__form input[type='date']:focus, .event-tickets .tribe-tickets__form input[type='month']:focus, .event-tickets .tribe-tickets__form input[type='week']:focus, .event-tickets .tribe-tickets__form input[type='time']:focus, .event-tickets .tribe-tickets__form input[type='datetime']:focus, .event-tickets .tribe-tickets__form input[type='datetime-local']:focus, .event-tickets .tribe-tickets__form input[type='color']:focus, .event-tickets .tribe-tickets__form select:focus, .event-tickets .tribe-tickets__form textarea:focus { border-color: var(--tec-color-accent-secondary-hover); box-shadow: none; } .event-tickets .tribe-tickets__form input[type='text']:invalid, .event-tickets .tribe-tickets__form input[type='email']:invalid, .event-tickets .tribe-tickets__form input[type='url']:invalid, .event-tickets .tribe-tickets__form input[type='password']:invalid, .event-tickets .tribe-tickets__form input[type='search']:invalid, .event-tickets .tribe-tickets__form input[type='number']:invalid, .event-tickets .tribe-tickets__form input[type='tel']:invalid, .event-tickets .tribe-tickets__form input[type='range']:invalid, .event-tickets .tribe-tickets__form input[type='date']:invalid, .event-tickets .tribe-tickets__form input[type='month']:invalid, .event-tickets .tribe-tickets__form input[type='week']:invalid, .event-tickets .tribe-tickets__form input[type='time']:invalid, .event-tickets .tribe-tickets__form input[type='datetime']:invalid, .event-tickets .tribe-tickets__form input[type='datetime-local']:invalid, .event-tickets .tribe-tickets__form input[type='color']:invalid, .event-tickets .tribe-tickets__form input[type='checkbox']:invalid, .event-tickets .tribe-tickets__form input[type='radio']:invalid, .event-tickets .tribe-tickets__form select:invalid, .event-tickets .tribe-tickets__form textarea:invalid { box-shadow: none; } .event-tickets .tribe-tickets__form input[type='text'].tribe-tickets__form-field-input--error, .event-tickets .tribe-tickets__form input[type='text'].tribe-tickets__form-field-input--error:invalid, .event-tickets .tribe-tickets__form input[type='email'].tribe-tickets__form-field-input--error, .event-tickets .tribe-tickets__form input[type='email'].tribe-tickets__form-field-input--error:invalid, .event-tickets .tribe-tickets__form input[type='url'].tribe-tickets__form-field-input--error, .event-tickets .tribe-tickets__form input[type='url'].tribe-tickets__form-field-input--error:invalid, .event-tickets .tribe-tickets__form input[type='password'].tribe-tickets__form-field-input--error, .event-tickets .tribe-tickets__form input[type='password'].tribe-tickets__form-field-input--error:invalid, .event-tickets .tribe-tickets__form input[type='search'].tribe-tickets__form-field-input--error, .event-tickets .tribe-tickets__form input[type='search'].tribe-tickets__form-field-input--error:invalid, .event-tickets .tribe-tickets__form input[type='number'].tribe-tickets__form-field-input--error, .event-tickets .tribe-tickets__form input[type='number'].tribe-tickets__form-field-input--error:invalid, .event-tickets .tribe-tickets__form input[type='tel'].tribe-tickets__form-field-input--error, .event-tickets .tribe-tickets__form input[type='tel'].tribe-tickets__form-field-input--error:invalid, .event-tickets .tribe-tickets__form input[type='range'].tribe-tickets__form-field-input--error, .event-tickets .tribe-tickets__form input[type='range'].tribe-tickets__form-field-input--error:invalid, .event-tickets .tribe-tickets__form input[type='date'].tribe-tickets__form-field-input--error, .event-tickets .tribe-tickets__form input[type='date'].tribe-tickets__form-field-input--error:invalid, .event-tickets .tribe-tickets__form input[type='month'].tribe-tickets__form-field-input--error, .event-tickets .tribe-tickets__form input[type='month'].tribe-tickets__form-field-input--error:invalid, .event-tickets .tribe-tickets__form input[type='week'].tribe-tickets__form-field-input--error, .event-tickets .tribe-tickets__form input[type='week'].tribe-tickets__form-field-input--error:invalid, .event-tickets .tribe-tickets__form input[type='time'].tribe-tickets__form-field-input--error, .event-tickets .tribe-tickets__form input[type='time'].tribe-tickets__form-field-input--error:invalid, .event-tickets .tribe-tickets__form input[type='datetime'].tribe-tickets__form-field-input--error, .event-tickets .tribe-tickets__form input[type='datetime'].tribe-tickets__form-field-input--error:invalid, .event-tickets .tribe-tickets__form input[type='datetime-local'].tribe-tickets__form-field-input--error, .event-tickets .tribe-tickets__form input[type='datetime-local'].tribe-tickets__form-field-input--error:invalid, .event-tickets .tribe-tickets__form input[type='color'].tribe-tickets__form-field-input--error, .event-tickets .tribe-tickets__form input[type='color'].tribe-tickets__form-field-input--error:invalid, .event-tickets .tribe-tickets__form input[type='checkbox'].tribe-tickets__form-field-input--error, .event-tickets .tribe-tickets__form input[type='checkbox'].tribe-tickets__form-field-input--error:invalid, .event-tickets .tribe-tickets__form input[type='radio'].tribe-tickets__form-field-input--error, .event-tickets .tribe-tickets__form input[type='radio'].tribe-tickets__form-field-input--error:invalid, .event-tickets .tribe-tickets__form select.tribe-tickets__form-field-input--error, .event-tickets .tribe-tickets__form select.tribe-tickets__form-field-input--error:invalid, .event-tickets .tribe-tickets__form textarea.tribe-tickets__form-field-input--error, .event-tickets .tribe-tickets__form textarea.tribe-tickets__form-field-input--error:invalid { border-color: var(--tec-color-icon-error); } .event-tickets .tribe-tickets__form input[type="text"]:placeholder, .event-tickets .tribe-tickets__form input[type="search"]:placeholder, .event-tickets .tribe-tickets__form input[type="url"]:placeholder, .event-tickets .tribe-tickets__form input[type="tel"]:placeholder, .event-tickets .tribe-tickets__form input[type="email"]:placeholder, .event-tickets .tribe-tickets__form input[type="password"]:placeholder { color: var(--tec-color-text-secondary); font-family: var(--tec-font-family-sans-serif); } .event-tickets .tribe-tickets__form select { -webkit-appearance: none; appearance: none; background-color: var(--tec-color-background); background-image: url('../images/select.png'); background-position: right center; background-repeat: no-repeat; background-size: 33px 33px; height: auto; padding: 10px; } .event-tickets .tribe-tickets__form .tribe-options { overflow: hidden; width: 100%; } /* Field-type specific */ .event-tickets .tribe-tickets__form .tribe-common-form-control-checkbox-radio-group > * { margin-bottom: var(--tec-spacer-0); } .event-tickets .tribe-tickets__form .tribe-common-form-control-checkbox-radio-group label, .event-tickets .tribe-tickets__form .tribe-common-form-control-checkbox-radio-group .tribe-tickets__form-field-label { display: inherit; margin-bottom: 0; margin-left: 0; } .event-tickets .tribe-tickets__form .tribe-common-form-control-text__input { padding: var(--tec-spacer-1) var(--tec-spacer-3); } /* Date of birth field */ .event-tickets .tribe-tickets__form .tribe-tickets__form-field--birth select { display: inline-block; margin: 0 0 var(--tec-spacer-1) 0; min-width: 80px; width: 100%; } .event-tickets .tribe-tickets__form .tribe-tickets__button--next { align-items: center; background-color: var(--tec-color-accent-primary); border: 1px solid var(--tec-color-border-secondary); color: var(--tec-color-background); display: inline-flex; justify-content: center; max-width: 100%; min-height: 54px; } .event-tickets .tribe-tickets__form .tribe-tickets__button--next:hover { color: var(--tec-color-background); } .event-tickets .tribe-tickets__form .tribe-tickets__form-message { align-items: flex-start; background-color: var(--tec-color-accent-primary-background); border-radius: var(--tec-border-radius-default); display: flex; margin-bottom: var(--tec-spacer-4); padding: var(--tec-spacer-4) var(--tec-spacer-3); } .event-tickets .tribe-tickets__form .tribe-tickets__form-message--error { background-color: var(--tec-color-background-error); } .event-tickets .tribe-tickets__form .tribe-tickets__form-message--error-icon { display: inline-block; margin-right: var(--tec-spacer-2); } .event-tickets .tribe-tickets__form .tribe-tickets__form-message--error-icon circle { stroke: var(--tec-color-icon-active); } .event-tickets .tribe-tickets__form .tribe-tickets__form-message--error-icon circle#dot { fill: var(--tec-color-icon-active); stroke: transparent; } .event-tickets .tribe-tickets__form .tribe-tickets__form-message--error-icon path { stroke: var(--tec-color-icon-active); } @media (min-width: 768px) { .event-tickets .tribe-tickets__form .tribe-tickets__form-field-input-text label:not([for*='text-area']), .event-tickets .tribe-tickets__form .tribe-tickets__form-field-input-select label:not([for*='text-area']) { align-self: center; } .event-tickets .tribe-tickets__form input[type='text'], .event-tickets .tribe-tickets__form input[type='email'], .event-tickets .tribe-tickets__form input[type='url'], .event-tickets .tribe-tickets__form input[type='password'], .event-tickets .tribe-tickets__form input[type='search'], .event-tickets .tribe-tickets__form input[type='number'], .event-tickets .tribe-tickets__form input[type='tel'], .event-tickets .tribe-tickets__form input[type='range'], .event-tickets .tribe-tickets__form input[type='date'], .event-tickets .tribe-tickets__form input[type='month'], .event-tickets .tribe-tickets__form input[type='week'], .event-tickets .tribe-tickets__form input[type='time'], .event-tickets .tribe-tickets__form input[type='datetime'], .event-tickets .tribe-tickets__form input[type='datetime-local'], .event-tickets .tribe-tickets__form input[type='color'], .event-tickets .tribe-tickets__form select, .event-tickets .tribe-tickets__form textarea { max-width: 600px } .event-tickets .tribe-tickets__form .tribe-tickets__form-field--birth select { margin-right: var(--tec-spacer-1); width: calc(33.33333% - var(--tec-spacer-1) - 4px) /* 4px = safety margin */ } .event-tickets .tribe-tickets__form .tribe-tickets__form-message { padding: var(--tec-spacer-3) } }
Save Changes
Rename File
Rename