%PDF-
%PDF-
Mini Shell
Mini Shell
/**
* Event Tickets - Form styles for Event Tickets.
*
* @since 5.0.0
*/
@import "utilities/_all.pcss";
.event-tickets .tribe-tickets__form {
.tribe-tickets__form-field {
display: block;
width: 100%;
padding-bottom: var(--spacer-2);
}
.tribe-tickets__form-field--required {
header:first-child::after,
label:first-child::after {
content: '';
}
}
.tribe-required {
color: var(--color-icon-error);
margin-left: var(--spacer-0);
}
label,
.tribe-tickets__form-field-label {
color: var(--color-text-primary);
display: block;
font-weight: var(--font-weight-regular);
margin-bottom: var(--spacer-0);
&.tribe-tickets-meta-field-header {
cursor: pointer;
display: inline-block;
margin-bottom: 0;
margin-right: var(--spacer-4);
}
}
.tribe-tickets__form-field-input-wrapper {
width: 100%;
}
.tribe-tickets__form-field-input-helper {
color: var(--color-text-primary-light);
margin-top: var(--spacer-0);
}
.tribe-tickets__form-field-input-helper--error {
color: var(--color-icon-error);
}
@media(--viewport-medium) {
.tribe-tickets__form-field-input-text,
.tribe-tickets__form-field-input-select {
label:not([for*="text-area"]) {
align-self: center;
}
}
}
.tribe-common-form-control-radio__input,
.tribe-common-form-control-checkbox__input {
border-color: var(--color-border-default);
border-width: 1px;
margin-right: var(--spacer-1);
box-shadow: none;
&:hover,
&:focus {
border-color: var(--form-color-border-secondary);
}
&:active {
border-color: var(--form-color-border-primary);
}
&:checked {
background-color: var(--color-icon-focus);
border-color: var(--color-icon-focus);
}
&.tribe-tickets__form-field-input--error {
border-color: var(--color-icon-error);
}
}
.tribe-common-form-control-checkbox__input {
border-radius: var(--border-radius-default);
}
.tribe-common-form-control-checkbox__label {
margin-left: 0;
}
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
select,
textarea {
border: 1px solid var(--color-border-default);
border-radius: var(--border-radius-default);
width: 100%;
&:focus {
border-color: var(--color-accent-secondary-hover);
box-shadow: none;
}
@media(--viewport-medium) {
max-width: 600px;
}
}
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
input[type="checkbox"],
input[type="radio"],
select,
textarea {
&:invalid {
box-shadow: none;
}
&.tribe-tickets__form-field-input--error,
&.tribe-tickets__form-field-input--error:invalid {
border-color: var(--color-icon-error);
}
}
input[type="text"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="email"],
input[type="password"] {
&::placeholder {
color: var(--color-text-secondary);
font-family: var(--font-family-base);
}
}
select {
appearance: none;
background-color: var(--color-background);
background-image: url('../images/select.png');
background-position: right center;
background-repeat: no-repeat;
background-size: 33px 33px;
height: auto;
padding: 10px;
}
.tribe-options {
overflow: hidden;
width: 100%;
}
/* Field-type specific */
.tribe-common-form-control-checkbox-radio-group {
> * {
margin-bottom: var(--spacer-0);
}
label,
.tribe-tickets__form-field-label {
display: inherit;
margin-bottom: 0;
margin-left: 0;
}
}
.tribe-common-form-control-text__input {
padding: var(--spacer-1) var(--spacer-3);
}
/* Date of birth field */
.tribe-tickets__form-field--birth {
select {
min-width: 80px;
width: 100%;
margin: 0 0 var(--spacer-1) 0;
display: inline-block;
@media (--viewport-medium) {
width: calc( ( 100% / 3 ) - var(--spacer-1) - 4px ); /* 4px = safety margin */
margin-right: var(--spacer-1);
}
}
}
.tribe-tickets__button--next {
align-items: center;
border: 1px solid var(--color-border-secondary);
background-color: var(--color-accent-primary);
color: var(--color-background);
display: inline-flex;
justify-content: center;
min-height: 54px;
max-width: 100%;
&:hover {
color: var(--color-background);
}
}
.tribe-tickets__form-message {
display: flex;
align-items: flex-start;
background-color: var(--color-accent-primary-background);
border-radius: var(--border-radius-default);
padding: var(--spacer-4) var(--spacer-3);
margin-bottom: var(--spacer-4);
@media(--viewport-medium) {
padding: var(--spacer-3);
}
}
.tribe-tickets__form-message--error {
background-color: var(--color-background-error);
}
.tribe-tickets__form-message--error-icon {
display: inline-block;
margin-right: var(--spacer-2);
circle {
stroke: var(--color-icon-active);
}
circle#dot {
stroke: transparent;
fill: var(--color-icon-active);
}
path {
stroke: var(--color-icon-active);
}
}
}
Zerion Mini Shell 1.0