/**
* 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)
}
}