-
-
Save Camwyn/f18718b9e2514a47f6e6def0607facb3 to your computer and use it in GitHub Desktop.
Default values for TEC common custom props
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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