Skip to content

Instantly share code, notes, and snippets.

@Camwyn
Last active Aug 24, 2021
Embed
What would you like to do?
Default values for TEC common custom props
.tribe-common.tribe-events-view--shortcode,
.tribe-common.tribe-events-widget {
--tec-grid-gutter: 48px;
--tec-grid-gutter-negative: calc(var(--tec-grid-gutter)*-1);
--tec-grid-gutter-half: calc(var(--tec-grid-gutter)/2);
--tec-grid-gutter-half-negative: calc(var(--tec-grid-gutter-half)*-1);
--tec-grid-gutter-small: 42px;
--tec-grid-gutter-small-negative: calc(var(--tec-grid-gutter-small)*-1);
--tec-grid-gutter-small-half: calc(var(--tec-grid-gutter-small)/2);
--tec-grid-gutter-small-half-negative: calc(var(--tec-grid-gutter-small-half)*-1);
--tec-grid-gutter-page: 42px;
--tec-grid-gutter-page-small: 19.5px;
--tec-grid-width-default: 1176px;
--tec-grid-width-min: 320px;
--tec-grid-width: calc(var(--tec-grid-width-default) + var(--tec-grid-gutter-page)*2);
--tec-grid-width-1-of-2: 50%;
--tec-grid-width-1-of-3: 33.333%;
--tec-grid-width-1-of-4: 25%;
--tec-grid-width-1-of-5: 20%;
--tec-grid-width-1-of-7: 14.285%;
--tec-grid-width-1-of-8: 12.5%;
--tec-grid-width-1-of-9: 11.111%;
--grid-gutter: var(--tec-grid-gutter);
--grid-gutter-negative: var(--tec-grid-gutter-negative);
--grid-gutter-half: var(--tec-grid-gutter-half);
--grid-gutter-half-negative: var(--tec-grid-gutter-half-negative);
--grid-gutter-small: var(--tec-grid-gutter-small);
--grid-gutter-small-negative: var(--tec-grid-gutter-small-negative);
--grid-gutter-small-half: var(--tec-grid-gutter-small-half);
--grid-gutter-small-half-negative: var(--tec-grid-gutter-small-half-negative);
--grid-gutter-page: var(--tec-grid-gutter-page);
--grid-gutter-page-small: var(--tec-grid-gutter-page-small);
--grid-width-default: var(--tec-grid-width-default);
--grid-width-min: var(--tec-grid-width-min);
--grid-width: var(--tec-grid-width);
--grid-width-1-of-2: var(--tec-grid-width-1-of-2);
--grid-width-1-of-3: var(--tec-grid-width-1-of-3);
--grid-width-1-of-4: var(--tec-grid-width-1-of-4);
--grid-width-1-of-5: var(--tec-grid-width-1-of-5);
--grid-width-1-of-7: var(--tec-grid-width-1-of-7);
--grid-width-1-of-8: var(--tec-grid-width-1-of-8);
--grid-width-1-of-9: var(--tec-grid-width-1-of-9);
--tec-spacer-0: 4px;
--tec-spacer-1: 8px;
--tec-spacer-2: 12px;
--tec-spacer-3: 16px;
--tec-spacer-4: 20px;
--tec-spacer-5: 24px;
--tec-spacer-6: 28px;
--tec-spacer-7: 32px;
--tec-spacer-8: 40px;
--tec-spacer-9: 48px;
--tec-spacer-10: 56px;
--tec-spacer-11: 64px;
--tec-spacer-12: 80px;
--tec-spacer-13: 96px;
--tec-spacer-14: 160px;
--spacer-0: var(--tec-spacer-0);
--spacer-1: var(--tec-spacer-1);
--spacer-2: var(--tec-spacer-2);
--spacer-3: var(--tec-spacer-3);
--spacer-4: var(--tec-spacer-4);
--spacer-5: var(--tec-spacer-5);
--spacer-6: var(--tec-spacer-6);
--spacer-7: var(--tec-spacer-7);
--spacer-8: var(--tec-spacer-8);
--spacer-9: var(--tec-spacer-9);
--spacer-10: var(--tec-spacer-10);
--spacer-11: var(--tec-spacer-11);
--spacer-12: var(--tec-spacer-12);
--spacer-13: var(--tec-spacer-13);
--spacer-14: var(--tec-spacer-14);
--tec-z-index-spinner-container: 100;
--tec-z-index-views-selector: 30;
--tec-z-index-dropdown: 30;
--tec-z-index-events-bar-button: 20;
--tec-z-index-search: 10;
--tec-z-index-filters: 9;
--tec-z-index-scroller: 7;
--tec-z-index-week-event-hover: 5;
--tec-z-index-map-event-hover: 5;
--tec-z-index-map-event-hover-actions: 6;
--tec-z-index-multiday-event: 5;
--tec-z-index-multiday-event-bar: 2;
--z-index-spinner-container: var(--tec-z-index-spinner-container);
--z-index-views-selector: var(--tec-z-index-views-selector);
--z-index-dropdown: var(--tec-z-index-dropdown);
--z-index-events-bar-button: var(--tec-z-index-events-bar-button);
--z-index-search: var(--tec-z-index-search);
--z-index-filters: var(--tec-z-index-filters);
--z-index-scroller: var(--tec-z-index-scroller);
--z-index-week-event-hover: var(--tec-z-index-week-event-hover);
--z-index-map-event-hover: var(--tec-z-index-map-event-hover);
--z-index-map-event-hover-actions: var(--tec-z-index-map-event-hover-actions);
--z-index-multiday-event: var(--tec-z-index-multiday-event);
--z-index-multiday-event-bar: var(--tec-z-index-multiday-event-bar);
--tec-color-text-primary: #141827;
--tec-color-text-primary-light: rgba(20, 24, 39, 0.62);
--tec-color-text-secondary: #5d5d5d;
--tec-color-text-disabled: #d5d5d5;
--tec-color-text-events-title: var(--tec-color-text-primary);
--tec-color-text-event-title: var(--tec-color-text-events-title); /* specifically for the single event */
--tec-color-text-event-date: var(--tec-color-text-primary);
--tec-color-text-secondary-event-date: var(--tec-color-text-secondary);
--tec-color-icon-primary: #5d5d5d;
--tec-color-icon-primary-alt: #757575;
--tec-color-icon-secondary: #bababa;
--tec-color-icon-active: #141827;
--tec-color-icon-disabled: #d5d5d5;
--tec-color-icon-focus: #334aff;
--tec-color-icon-error: #da394d;
--tec-color-event-icon: #141827;
--tec-color-event-icon-hover: #334aff;
--tec-color-accent-primary: #334aff;
--tec-color-accent-primary-hover: rgba(51, 74, 255, 0.8);
--tec-color-accent-primary-active: rgba(51, 74, 255, 0.9);
--tec-color-accent-primary-background: rgba(51, 74, 255, 0.07);
--tec-color-accent-secondary: #141827;
--tec-color-accent-secondary-hover: rgba(20, 24, 39, 0.8);
--tec-color-accent-secondary-active: rgba(20, 24, 39, 0.9);
--tec-color-accent-secondary-background: rgba(20, 24, 39, 0.07);
--tec-color-button-primary: var(--tec-color-accent-primary);
--tec-color-button-primary-hover: var(--tec-color-accent-primary-hover);
--tec-color-button-primary-active: var(--tec-color-accent-primary-active);
--tec-color-button-primary-background: var(--tec-color-accent-primary-background);
--tec-color-button-secondary: var(--tec-color-accent-secondary);
--tec-color-button-secondary-hover: var(--tec-color-accent-secondary-hover);
--tec-color-button-secondary-active: var(--tec-color-accent-secondary-active);
--tec-color-button-secondary-background: var(--tec-color-accent-secondary-background);
--tec-color-link-primary: var(--tec-color-text-primary);
--tec-color-link-accent: var(--tec-color-accent-primary);
--tec-color-link-accent-hover: rgba(51, 74, 255, 0.8);
--tec-color-border-default: #d5d5d5;
--tec-color-border-secondary: #e4e4e4;
--tec-color-border-tertiary: #7d7d7d;
--tec-color-border-hover: #5d5d5d;
--tec-color-border-active: #141827;
--tec-color-background: #fff;
--tec-color-background-events: transparent;
--tec-color-background-transparent: rgba(255, 255, 255, 0.6);
--tec-color-background-secondary: #f7f6f6;
--tec-color-background-messages: rgba(20, 24, 39, 0.07);
--tec-color-background-secondary-hover: #f0eeee;
--tec-color-background-error: rgba(218, 57, 77, 0.08);
--tec-color-box-shadow: rgba(0,0,0, 0.14);
--tec-color-box-shadow-secondary: rgba(0,0,0, 0.1);
--tec-color-scroll-track: rgba(0,0,0, 0.25);
--tec-color-scroll-bar: rgba(0,0,0, 0.5);
--tec-color-background-primary-multiday: rgba(51, 74, 255, 0.24);
--tec-color-background-primary-multiday-hover: rgba(51, 74, 255, 0.34);
--tec-color-background-secondary-multiday: rgba(20, 24, 39, 0.24);
--tec-color-background-secondary-multiday-hover: rgba(20, 24, 39, 0.34);
--tec-color-accent-primary-week-event: rgba(51, 74, 255, 0.1);
--tec-color-accent-primary-week-event-hover: rgba(51, 74, 255, 0.2);
--tec-color-accent-primary-week-event-featured: rgba(51, 74, 255, 0.04);
--tec-color-accent-primary-week-event-featured-hover: rgba(51, 74, 255, 0.14);
--tec-color-background-secondary-datepicker: var(--tec-color-background-secondary);
--tec-color-accent-primary-background-datepicker: var(--tec-color-accent-primary-background);
--color-text-primary: var(--tec-color-text-primary);
--color-text-primary-light: var(--tec-color-text-primary-light);
--color-text-secondary: var(--tec-color-text-secondary);
--color-text-disabled: var(--tec-color-text-disabled);
--color-icon-primary: var(--tec-color-icon-primary);
--color-icon-primary-alt: var(--tec-color-icon-primary);
--color-icon-secondary: var(--tec-color-icon-secondary);
--color-icon-active: var(--tec-color-icon-active);
--color-icon-disabled: var(--tec-color-icon-disabled);
--color-icon-focus: var(--tec-color-icon-focus);
--color-icon-error: var(--tec-color-icon-error);
--color-accent-primary: var(--tec-color-accent-primary);
--color-accent-primary-hover: var(--tec-color-accent-primary-hover);
--color-accent-primary-active: var(--tec-color-accent-primary-active);
--color-accent-primary-background: var(--tec-color-accent-primary-background);
--color-accent-primary-multiday: var(--tec-color-accent-primary-multiday);
--color-accent-primary-multiday-hover: var(--tec-color-accent-primary-multiday-hover);
--color-accent-primary-week-event: var(--tec-color-accent-primary-week-event);
--color-accent-primary-week-event-hover: var(--tec-color-accent-primary-week-event-hover);
--color-accent-primary-week-event-featured: var(--tec-color-accent-primary-week-event-featured);
--color-accent-primary-week-event-featured-hover: var(--tec-color-accent-primary-week-event-featured-hover);
--color-accent-secondary: var(--tec-color-accent-secondary);
--color-accent-secondary-hover: var(--tec-color-accent-secondary-hover);
--color-accent-secondary-active: var(--tec-color-accent-secondary-active);
--color-accent-secondary-background: var(--tec-color-accent-secondary-background);
--color-border-default: var(--tec-color-border-default);
--color-border-secondary: var(--tec-color-border-secondary);
--color-border-tertiary: var(--tec-color-border-tertiary);
--color-border-hover: var(--tec-color-border-hover);
--color-border-active: var(--tec-color-border-active);
--color-background: var(--tec-color-background);
--color-background-transparent: var(--tec-color-background-transparent);
--color-background-secondary: var(--tec-color-background-secondary);
--color-background-messages: var(--tec-color-background-messages);
--color-background-secondary-hover: var(--tec-color-background-secondary-hover);
--color-background-error: var(--tec-color-icon-error);
--color-box-shadow: var(--tec-color-box-shadow);
--color-box-shadow-secondary: var(--tec-color-box-shadow-secondary);
--color-scroll-track: var(--tec-color-scroll-track);
--color-scroll-bar: var(--tec-color-scroll-bar);
--tec-border-radius-default: 4px;
--tec-border-width-week-event: 2px;
--border-radius-default: var(--tec-border-radius-default);
--border-width-week-event: var(--tec-border-width-week-event);
--tec-box-shadow-default: 0 2px 5px 0 var(--tec-color-box-shadow);
--tec-box-shadow-tooltip: 0 2px 12px 0 var(--tec-color-box-shadow);
--tec-box-shadow-card: 0 1px 6px 2px var(--tec-color-box-shadow);
--tec-box-shadow-multiday: 16px 6px 6px -2px var(--tec-color-box-shadow-secondary);
--box-shadow-default: var(--tec-box-shadow-default);
--box-shadow-tooltip: var(--tec-box-shadow-tooltip);
--box-shadow-card: var(--tec-box-shadow-card);
--box-shadow-multiday: var(--tec-box-shadow-multiday);
--tec-form-color-background: var(--tec-color-background);
--tec-form-color-border-default: var(--tec-color-text-primary);
--tec-form-color-border-active: var(--tec-color-accent-secondary);
--tec-form-color-border-secondary: var(--tec-color-border-tertiary);
--tec-form-color-accent-primary: var(--tec-color-accent-primary);
--tec-form-box-shadow-default: var(--tec-box-shadow-default);
--form-color-background: var(--tec-form-color-background);
--form-color-border-default: var(--tec-form-color-border-default);
--form-color-border-active: var(--tec-form-color-border-active);
--form-color-border-secondary: var(--tec-form-color-border-secondary);
--form-color-accent-primary: var(--tec-form-color-accent-primary);
--form-box-shadow-default: var(--tec-form-box-shadow-default);
--tec-opacity-background: 0.07;
--tec-opacity-select-highlighted: 0.3;
--tec-opacity-icon-hover: 0.8;
--tec-opacity-icon-active: 0.9;
--tec-opacity-default: 1;
--opacity-background: var(--tec-opacity-background);
--opacity-select-highlighted: var(--tec-opacity-select-highlighted);
--opacity-icon-hover: var(--tec-opacity-icon-hover);
--opacity-icon-active: var(--tec-opacity-icon-active);
--opacity-default: var(--tec-opacity-default);
--tec-transition: all 0.2s ease;
--tec-transition-background-color: background-color 0.2s ease;
--tec-transition-color-border-color: color 0.2s ease, border-color 0.2s ease;
--tec-transition-transform: transform 0.2s ease;
--tec-transition-border-color: border-color 0.2s ease;
--tec-transition-color: color 0.2s ease;
--tec-transition-opacity: opacity 0.2s ease;
--transition: var(--tec-transition);
--transition-background-color: var(--tec-transition-background-color);
--transition-color-border-color: var(--tec-transition-color-border-color);
--transition-transform: var(--tec-transition-transform);
--transition-border-color: var(--tec-transition-border-color);
--transition-color: var(--tec-transition-color);
--transition-opacity: var(--tec-transition-opacity);
--tec-font-family-sans-serif: "Helvetica Neue", Helvetica, -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
--tec-font-weight-regular: 400;
--tec-font-weight-bold: 700;
--tec-font-size-0: 11px;
--tec-font-size-1: 12px;
--tec-font-size-2: 14px;
--tec-font-size-3: 16px;
--tec-font-size-4: 18px;
--tec-font-size-5: 20px;
--tec-font-size-6: 22px;
--tec-font-size-7: 24px;
--tec-font-size-8: 28px;
--tec-font-size-9: 32px;
--tec-font-size-10: 42px;
--tec-line-height-0: 1.38;
--tec-line-height-1: 1.42;
--tec-line-height-2: 1.5;
--tec-line-height-3: 1.62;
--font-family-sans-serif: var(--tec-font-family-sans-serif);
--font-family-base: var(--tec-font-family-sans-serif);
--font-weight-regular: var(--tec-font-weight-regular);
--font-weight-bold: var(--tec-font-weight-bold);
--font-size-0: var(--tec-font-size-0);
--font-size-1: var(--tec-font-size-1);
--font-size-2: var(--tec-font-size-2);
--font-size-3: var(--tec-font-size-3);
--font-size-4: var(--tec-font-size-4);
--font-size-5: var(--tec-font-size-5);
--font-size-6: var(--tec-font-size-6);
--font-size-7: var(--tec-font-size-7);
--font-size-8: var(--tec-font-size-8);
--font-size-9: var(--tec-font-size-9);
--font-size-10: var(--tec-font-size-10);
--line-height-0: var(--tec-line-height-0);
--line-height-1: var(--tec-line-height-1);
--line-height-2: var(--tec-line-height-2);
--line-height-3: var(--tec-line-height-3);
/* TEC - specific */
--tec-color-text-events-title-day: var(--tec-color-text-events-title);
--tec-color-text-events-title-latest-past: var(--tec-color-text-events-title);
--tec-color-text-event-title-list: var(--tec-color-text-events-title);
--tec-color-text-events-title-month-multiday: var(--tec-color-text-events-title);
--tec-color-text-events-title-widget-list: var(--tec-color-text-events-title);
--tec-color-text-event-date-secondary: var(--tec-color-text-primary);
--tec-color-text-event-date-secondary-month: var(--tec-color-text-event-date-secondary);
--tec-color-text-event-date-secondary-month-mobile: var(--tec-color-text-event-date-secondary-month);
--tec-color-text-day-of-week-month: var(--tec-color-text-secondary);
--tec-color-day-marker-month: var(--tec-color-text-primary);
--tec-color-day-marker-month-hover: var(--tec-color-text-primary-hover);
--tec-color-day-marker-month-active: var(--tec-color-text-primary-active);
--tec-color-day-marker-current-month: var(--tec-color-day-marker-month);
--tec-color-day-marker-current-month-hover: var(--tec-color-day-marker-month-hover);
--tec-color-day-marker-current-month-active: var(--tec-color-day-marker-month-active);
--tec-color-day-marker-past-month: var(--tec-color-text-primary);
--tec-color-day-marker-past-month-hover: var(--tec-color-day-marker-past-month);
--tec-color-day-marker-past-month-active: var(--tec-color-day-marker-past-month);
--tec-color-text-day-of-week-week: var(--tec-color-text-secondary);
--tec-border-radius-month-multiday: 9.5px;
--tec-color-border-secondary-month-grid: var(--tec-color-border-secondary);
--tec-color-border-active-month-grid-hover: var(--tec-color-border-active);
--tec-color-background-month-grid: transparent;
--tec-color-background-tooltip: var(--tec-color-background);
--tec-color-text-events-bar-input: var(--tec-color-text-primary);
--tec-color-text-events-bar-input-placeholder: var(--tec-color-text-secondary);
--tec-opacity-events-bar-input-placeholder: var(--tec-opacity-default);
--tec-color-border-events-bar: var(--tec-color-border-secondary);
--tec-color-background-events-bar: var(--tec-color-background);
--tec-color-background-view-selector: var(--tec-color-background-events-bar);
--tec-color-background-view-selector-tabs: var(--tec-color-background-view-selector);
--tec-color-background-view-selector-list-item-hover: var(--tec-color-background-secondary);
--tec-color-text-view-selector-list-item: var(--tec-color-text-primary);
--tec-color-text-view-selector-list-item-hover: var(--tec-color-accent-secondary-hover);
--tec-color-background-search-container: var(--tec-color-background-events-bar);
--tec-color-text-events-bar-submit-button: var(--tec-color-background);
--tec-color-text-events-bar-submit-button-active: var(--tec-color-text-events-bar-submit-button);
--tec-color-text-events-bar-submit-button-hover: var(--tec-color-text-events-bar-submit-button);
--tec-color-background-events-bar-submit-button: var(--tec-color-button-primary);
--tec-color-background-events-bar-submit-button-hover: var(--tec-color-button-primary-hover);
--tec-color-background-events-bar-submit-button-active: var(--tec-color-button-primary-active);
--tec-color-icon-events-bar: var(--tec-color-icon-primary);
--tec-color-icon-events-bar-active: var(--tec-color-icon-active);
--tec-color-icon-events-bar-hover: var(--tec-color-icon-hover);
/* ECP - specific */
--tec-color-recurring-icon-month: var(--tec-color-text-primary);
--tec-color-recurring-icon-month-hover: var(--tec-color-text-primary);
--tec-color-recurring-icon-month-multiday: var(--tec-color-text-primary);
--tec-color-recurring-icon-month-multiday-hover: var(--tec-color-text-primary);
--tec-color-recurring-icon-list: var(--tec-color-text-primary);
--tec-color-recurring-icon-list-hover: var(--tec-color-text-primary);
--tec-color-recurring-icon-day: var(--tec-color-text-primary);
--tec-color-recurring-icon-day-hover: var(--tec-color-text-primary);
--tec-color-recurring-icon-week: var(--tec-color-text-primary);
--tec-color-recurring-icon-week-hover: var(--tec-color-text-primary);
--tec-color-recurring-icon-week-multiday: var(--tec-color-text-primary);
--tec-color-recurring-icon-week-multiday-hover: var(--tec-color-text-primary);
--tec-color-recurring-icon-photo: var(--tec-color-text-primary);
--tec-color-recurring-icon-photo-hover: var(--tec-color-text-primary);
--tec-color-recurring-icon-map: var(--tec-color-text-primary);
--tec-color-recurring-icon-map-hover: var(--tec-color-text-primary);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment