File Editor

Edit File: page.php

<?php /** * The Events Calendar Styles kitchen sink. * * Displays all the styles applied to all UI components. * * @link http://evnt.is/1aiy * * @version 4.2 * * @package TribeEventsCalendar * */ tribe_asset_enqueue( 'tribe-common-style' ); ?> <div class="tribe-common tribe-events"> <h1>Kitchen Sink</h1> <br /> <h2>Typography</h2> <br /> <h3>Headings</h3> <br /> <h1 class="tribe-common-h1">Heading 1</h1> <br /> <h2 class="tribe-common-h2">Heading 2</h2> <br /> <h3 class="tribe-common-h3">Heading 3</h3> <br /> <h4 class="tribe-common-h4">Heading 4</h4> <br /> <h5 class="tribe-common-h5">Heading 5</h5> <br /> <h6 class="tribe-common-h6">Heading 6</h6> <br /> <h6 class="tribe-common-h7">Heading 7</h6> <br /> <h6 class="tribe-common-h8">Heading 8</h6> <br /> <h3>Body</h3> <br /> <p class="tribe-common-b1">Body 1, lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p> <br /> <p class="tribe-common-b2">Body 2, lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p> <br /> <p class="tribe-common-b3">Body 3, lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p> <br /> <h3>Base</h3> <br /> <button>I'm a button</button> <br /> <a href="#">I'm a link</a> <br /> <input type="text" /> <br /> <h3>Buttons</h3> <br /> <button class="tribe-common-c-btn">Primary Button</button> <br /> <button class="tribe-common-c-btn-border">Border Button</button> <br /> <button class="tribe-common-c-btn-icon tribe-common-c-btn-icon--caret-left"></button> <button class="tribe-common-c-btn-icon tribe-common-c-btn-icon--caret-right"></button> <button class="tribe-common-c-btn-icon tribe-common-c-btn-icon--filters"></button> <button class="tribe-common-c-btn-icon tribe-common-c-btn-icon--search"></button> <br /> <button class="tribe-common-c-btn-icon tribe-common-c-btn-icon--border tribe-common-c-btn-icon--caret-left"></button> <button class="tribe-common-c-btn-icon tribe-common-c-btn-icon--border tribe-common-c-btn-icon--caret-right"></button> <button class="tribe-common-c-btn-icon tribe-common-c-btn-icon--border tribe-common-c-btn-icon--filters"></button> <button class="tribe-common-c-btn-icon tribe-common-c-btn-icon--border tribe-common-c-btn-icon--search"></button> <br /> <a href="#" class="tribe-common-c-btn">Primary Button</a> <br /> <a href="#" class="tribe-common-c-btn-border">Border Button</a> <br /> <a href="#" class="tribe-common-c-btn-icon tribe-common-c-btn-icon--caret-left"></a> <a href="#" class="tribe-common-c-btn-icon tribe-common-c-btn-icon--caret-right"></a> <a href="#" class="tribe-common-c-btn-icon tribe-common-c-btn-icon--filters"></a> <a href="#" class="tribe-common-c-btn-icon tribe-common-c-btn-icon--search"></a> <br /> <a href="#" class="tribe-common-c-btn-icon tribe-common-c-btn-icon--border tribe-common-c-btn-icon--caret-left"></a> <a href="#" class="tribe-common-c-btn-icon tribe-common-c-btn-icon--border tribe-common-c-btn-icon--caret-right"></a> <a href="#" class="tribe-common-c-btn-icon tribe-common-c-btn-icon--border tribe-common-c-btn-icon--filters"></a> <a href="#" class="tribe-common-c-btn-icon tribe-common-c-btn-icon--border tribe-common-c-btn-icon--search"></a> <h3>CTAs</h3> <br /> <a href="#" class="tribe-common-anchor">Anchor</a> <br /> <a href="#" class="tribe-common-anchor-alt">Anchor</a> <br /> <a href="#" class="tribe-common-anchor-thin">Anchor</a> <br /> <a href="#" class="tribe-common-cta">Call to Action</a> <br /> <a href="#" class="tribe-common-cta tribe-common-cta--alt">Call to Action</a> <br /> <h3>Checkboxes & Radios</h3> <br /> <fieldset> <legend>Legend for Checkboxes</legend> <div class="tribe-common-form-control-checkbox-radio-group"> <div class="tribe-common-form-control-checkbox"> <input class="tribe-common-form-control-checkbox__input" id="checkboxOne" name="checkboxGroup" type="checkbox" value="checkboxOne" /> <label class="tribe-common-form-control-checkbox__label" for="checkboxOne">Checkbox One</label> </div> <div class="tribe-common-form-control-checkbox"> <input class="tribe-common-form-control-checkbox__input" id="checkboxTwo" name="checkboxGroup" type="checkbox" value="checkboxTwo" /> <label class="tribe-common-form-control-checkbox__label" for="checkboxTwo">Checkbox Two</label> </div> </div> </fieldset> <br /> <fieldset> <legend>Legend for Radios</legend> <div class="tribe-common-form-control-checkbox-radio-group"> <div class="tribe-common-form-control-radio"> <input class="tribe-common-form-control-radio__input" id="radioOne" name="radioGroup" type="radio" value="radioOne" /> <label class="tribe-common-form-control-radio__label" for="radioOne">Radio One</label> </div> <div class="tribe-common-form-control-radio"> <input class="tribe-common-form-control-radio__input" id="radioTwo" name="radioGroup" type="radio" value="radioTwo" /> <label class="tribe-common-form-control-radio__label" for="radioTwo">Radio Two</label> </div> </div> </fieldset> <br /> <h3>Toggles & Sliders</h3> <br /> <div class="tribe-common-form-control-toggle"> <input class="tribe-common-form-control-toggle__input" id="toggleHorizontal" name="toggleGroup" type="checkbox" value="toggleHorizontal" /> <label class="tribe-common-form-control-toggle__label" for="toggleHorizontal">Toggle Horizontal</label> </div> <br /> <div class="tribe-common-form-control-toggle tribe-common-form-control-toggle--vertical"> <label class="tribe-common-form-control-toggle__label" for="toggleVertical">Toggle Vertical</label> <input class="tribe-common-form-control-toggle__input" id="toggleVertical" name="toggleGroup" type="checkbox" value="toggleVertical" /> </div> <br /> <div class="tribe-common-form-control-slider"> <input class="tribe-common-form-control-slider__input" id="sliderOne" type="range" min="0" max="100" value="50" /> <label class="tribe-common-form-control-slider__label" for="sliderOne">Slider One</label> </div> <br /> <div class="tribe-common-form-control-slider tribe-common-form-control-slider--vertical"> <label class="tribe-common-form-control-slider__label" for="sliderTwo">Slider Two</label> <input class="tribe-common-form-control-slider__input" id="sliderTwo" type="range" min="0" max="100" value="50" /> </div> <br /> <h3>Tabs & Selects</h3> <br /> <div class="tribe-events-c-view-selector" style="margin-left: 200px"> <button class="tribe-events-c-view-selector__button" aria-controls="container-id-1" aria-expanded="false" aria-selected="false" data-js="tribe-events-accordion-trigger" > <span class="tribe-events-c-view-selector__button-icon tribe-common-svgicon tribe-common-svgicon--month"></span> <span class="tribe-events-c-view-selector__button-text"> Month </span> </button> <div class="tribe-events-c-view-selector__content" id="container-id-1" aria-hidden="true" > <ul class="tribe-events-c-view-selector__list"> <li class="tribe-events-c-view-selector__list-item"> <a href="#" class="tribe-events-c-view-selector__list-item-link"> <span class="tribe-events-c-view-selector__list-item-icon tribe-common-svgicon tribe-common-svgicon--month"></span> <span class="tribe-events-c-view-selector__list-item-text"> Month </span> </a> </li> <li class="tribe-events-c-view-selector__list-item tribe-events-c-view-selector__list-item--active"> <a href="#" class="tribe-events-c-view-selector__list-item-link"> <span class="tribe-events-c-view-selector__list-item-icon tribe-common-svgicon tribe-common-svgicon--list"></span> <span class="tribe-events-c-view-selector__list-item-text"> List </span> </a> </li> <li class="tribe-events-c-view-selector__list-item"> <a href="#" class="tribe-events-c-view-selector__list-item-link"> <span class="tribe-events-c-view-selector__list-item-icon tribe-common-svgicon tribe-common-svgicon--day"></span> <span class="tribe-events-c-view-selector__list-item-text"> Day </span> </a> </li> </ul> </div> </div> <br /> <div class="tribe-events-c-view-selector tribe-events-c-view-selector--tabs" style="margin-top: 150px; margin-left: 200px"> <button class="tribe-events-c-view-selector__button" aria-controls="container-id-2" aria-expanded="false" aria-selected="false" data-js="tribe-events-accordion-trigger" > <span class="tribe-events-c-view-selector__button-icon tribe-common-svgicon tribe-common-svgicon--month"></span> <span class="tribe-events-c-view-selector__button-text"> Month </span> </button> <div class="tribe-events-c-view-selector__content" id="container-id-2" aria-hidden="true" > <ul class="tribe-events-c-view-selector__list"> <li class="tribe-events-c-view-selector__list-item"> <a href="#" class="tribe-events-c-view-selector__list-item-link"> <span class="tribe-events-c-view-selector__list-item-icon tribe-common-svgicon tribe-common-svgicon--month"></span> <span class="tribe-events-c-view-selector__list-item-text"> Month </span> </a> </li> <li class="tribe-events-c-view-selector__list-item tribe-events-c-view-selector__list-item--active"> <a href="#" class="tribe-events-c-view-selector__list-item-link"> <span class="tribe-events-c-view-selector__list-item-icon tribe-common-svgicon tribe-common-svgicon--list"></span> <span class="tribe-events-c-view-selector__list-item-text"> List </span> </a> </li> <li class="tribe-events-c-view-selector__list-item"> <a href="#" class="tribe-events-c-view-selector__list-item-link"> <span class="tribe-events-c-view-selector__list-item-icon tribe-common-svgicon tribe-common-svgicon--day"></span> <span class="tribe-events-c-view-selector__list-item-text"> Day </span> </a> </li> </ul> </div> </div> <br /> <h3>Search</h3> <br /> <form action="#" method="post" class="tribe-events-c-search" style="margin-top: 100px" > <div class="tribe-events-c-search__input-group"> <div class="tribe-common-form-control-text tribe-events-c-search__input-control tribe-events-c-search__input-control--keyword" data-js="tribe-events-events-bar-input-control" > <em class="tribe-events-c-search__input-control-icon" aria-label="Search" title="Search" > <?php $this->template( 'components/icons/search', [ 'classes' => [ 'tribe-events-c-search__input-control-icon-svg' ] ] ); ?> </em> <label class="tribe-common-form-control-text__label" for="tribe-events-events-bar-keyword"> Keyword </label> <input class="tribe-common-form-control-text__input tribe-events-c-search__input" data-js="tribe-events-events-bar-input-control-input" type="text" id="tribe-events-events-bar-keyword" name="tribe-events-views[tribe-bar-search]" value="" placeholder="<?php esc_attr_e( 'Search for events', 'the-events-calendar' ); ?>" /> </div> <div class="tribe-common-form-control-text tribe-events-c-search__input-control tribe-events-c-search__input-control--location" data-js="tribe-events-events-bar-input-control" > <em class="tribe-events-c-search__input-control-icon" aria-label="Search" title="Search" > <?php $this->template( 'components/icons/search', [ 'classes' => [ 'tribe-events-c-search__input-control-icon-svg' ] ] ); ?> </em> <label class="tribe-common-form-control-text__label" for="tribe-events-events-bar-location"> Location </label> <input class="tribe-common-form-control-text__input tribe-events-c-search__input" data-js="tribe-events-events-bar-input-control-input" type="text" id="tribe-events-events-bar-location" name="tribe-events-views[tribe-bar-search]" value="" placeholder="<?php esc_attr_e( 'In a location', 'the-events-calendar' ); ?>" /> </div> </div> <button class="tribe-common-c-btn tribe-events-c-search__button" type="submit" name="submit-bar" > Find Events </button> </form> </div> Save Changes

Rename File

Rename