Testpagina voor Enviso ticketing
/* This markup is applied to all enviso-elements */
:host {
--enviso-primary-color: #223D8D;
--enviso-secondary-color: #2B4DB3;
--enviso-btn-hover-color: #1177BB;
color: var(--enviso-primary-color);
font-family: 'Stratos';
}
.enviso-title,
.enviso-basket-header {
font-size: 2.2rem;
line-height: 3rem;
color: var(--enviso-primary-color);
}
.enviso-description {
font-size: 1.6rem;
line-height: 2.4rem;
}
.enviso-basket-offer-description-amount {
font-weight: 700;
}
.enviso-basket-item-description-extra,
.enviso-basket-item-entry-description-name,
.enviso-txt-label,
.enviso-txt-value,
.enviso-select-label,
.enviso-txt-info,
.enviso-select-info,
.enviso-checkbox-label,
.enviso-select-value {
color: var(--enviso-primary-color);
}
.enviso-basket-item-entry-remove {
display: flex;
align-items: center;
}
.enviso-basket-item-entry-remove > * {
height: fit-content;
}
.enviso-discount-open {
padding-top: 1rem;
}
.enviso-checkbox-box label:before {
border-color: var(--enviso-primary-color);
}
.enviso-checkbox-box input:checked+label:after {
top: 33%;
}
.enviso-checkbox-box
[icon-name=info-squared] {
margin-left: 0.5em;
}
.btnNext,
.btnPreviousStep,
.enviso-btnNext,
.enviso-discount-apply-btn,
.enviso-btn.primary {
border-radius: 0;
font-weight: 400;
transition: background-color 0.2s ease-in-out;
}
.btnNext:hover,
.btnNext:focus,
.enviso-btnNext:hover,
.enviso-btnNext:focus {
background-color: var(--enviso-btn-hover-color);
box-shadow: none !important;
}
.btnNext:before,
.enviso-btnNext:before {
display: none !important;
}
.btnNext,
.btnPreviousStep {
display: flex;
align-items: baseline;
}
.btnNext {
padding-right: 1em;
}
.btnNext::after {
flex-shrink: 0;
content: '';
width: 1.2rem;
height: 1.2rem;
background-image: url('/img/small-white-arrow.svg');
background-repeat: no-repeat;
background-size: contain;
}
.btnPreviousStep {
padding-left: 1em;
}
[name=back-arrow] {
display: none;
}
.btnPreviousStep::before {
content: '';
flex-shrink: 0;
width: 1.2rem;
height: 1.2rem;
margin-bottom: 0.1em;
margin-right: 0.6em;
background-image: url('/img/small-arrow.svg');
background-repeat: no-repeat;
background-size: contain;
transform: rotate(180deg);
}
.enviso-ticket-widget-offer-back-link {
margin-bottom: 1.5rem;
}
.enviso-discount-open input {
padding: 0;
border: none;
border-bottom: 2px solid var(--enviso-primary-color);
border-radius: 0;
background: transparent;
font-size: inherit;
color: var(--enviso-primary-color);
transition: none 0.2s ease-in-out;
transition-property: border-color;
}
.enviso-discount-open input:focus {
outline: none;
border-color: var(--enviso-secondary-color);
}
.enviso-steps-header.active {
color: var(--enviso-primary-color);
}
:host {
border-radius: 0;
}
.enviso-name,
.enviso-price-full {
color: var(--enviso-primary-color);
}
.enviso-nud-wrapper > [icon-only] {
color: var(--enviso-secondary-color);
}
input {
color: var(--enviso-primary-color);
font-weight: 700;
}
:host {
border: 2px solid var(--enviso-primary-color);
border-radius: 0;
}
.enviso-day.enviso-currentmonth {
border: 2px solid var(--enviso-primary-color) !important;
}
.enviso-week .enviso-header {
color: var(--enviso-primary-color);
}
.enviso-day.enviso-currentmonth.enviso-disabled {
color: hsl(225deg 10% 65%);
border: 2px solid var(--enviso-primary-color) !important;
background-color: hsl(225deg 10% 90%);
}
.enviso-day.enviso-selected {
color: #fff;
background-color: var(--enviso-primary-color) !important;
}
.enviso-dates .enviso-day.enviso-range-end,
.enviso-dates .enviso-day.enviso-range-start,
.enviso-dates .enviso-day.enviso-selected {
outline: none;
}
.enviso-day.enviso-selected:focus,
.enviso-day.enviso-selected:hover {
background-color: var(--enviso-btn-hover-color) !important;
}
.enviso-month:not(.using-pointer) .enviso-dates .enviso-day {
transition: background-color 0.2s ease-in-out;
}
.enviso-month:not(.using-pointer) .enviso-dates .enviso-day:focus,
.enviso-month:not(.using-pointer) .enviso-dates .enviso-day:hover {
outline: none;
background-color: hsl(225deg 10% 95%);
}
.enviso-timeslot-button {
display: inline-block;
padding: 0.9rem 3.5rem;
font-family: 'Stratos';
font-size: 1.6rem;
line-height: 1.6rem;
text-align: center;
text-decoration: none;
color: var(--enviso-primary-color);
border: 0.2rem solid var(--enviso-primary-color) !important;
border-radius: 2.0rem;
background-color: #FFFFFF;
cursor: pointer;
outline: none;
transition: background-color 0.2s ease-in-out;
}
.enviso-timeslot-button[tabindex="0"]:not(.using-pointer):focus {
box-shadow: none;
background-color: rgba(34, 61, 141, 0.15);
}
:host([selected]) .enviso-timeslot-button {
background-color: var(--enviso-primary-color);
color: #FFFFFF;
}
:host([selected]) .enviso-timeslot-button:after {
display: none;
}
:host {
color: inherit;
}
path {
fill: currentColor;
}
:host([name="starred-ticket"]) {
margin-right: 0.3em;
}
:host([name="expand-arrow"]),
:host([name="collapse-arrow"]) {
margin-left: 0.6em;
}
:host([primary]) {
border-radius: 0;
font-weight: 400;
transition: background-color 0.2s ease-in-out;
box-shadow: none !important;
}
:host([primary]):hover,
:host([primary]):focus,
:host([primary]) button:hover,
:host([primary]) button:focus {
background-color: var(--enviso-btn-hover-color);
box-shadow: none !important;
}
:host([primary]):before {
display: none !important;
}
Testpagina voor Enviso ticketing
