@travlrcom/uikit
Version:
TRAVLR UiKit
402 lines (353 loc) • 20.1 kB
HTML
<html lang="en">
<head>
<base href="/">
<meta charset="<%= htmlWebpackPlugin.options.contentManagement.head.meta.charset %>"/>
<meta name="theme-color" content="<%= htmlWebpackPlugin.options.contentManagement.head.meta.themeColor %>"/>
<meta name="viewport" content="<%= htmlWebpackPlugin.options.contentManagement.head.meta.viewport %>"/>
<meta name="robots" content="<%= htmlWebpackPlugin.options.contentManagement.head.meta.robots %>">
<meta http-equiv="X-UA-Compatible" content="<%= htmlWebpackPlugin.options.contentManagement.head.meta.httpEquiv %>">
<link rel="canonical" href="<%= htmlWebpackPlugin.options.contentManagement.head.meta.canonical %>">
<link rel="manifest" href="<%= htmlWebpackPlugin.options.contentManagement.head.meta.manifest %>">
<title><%= htmlWebpackPlugin.options.titlePage %></title>
<meta name="description" content="<%= htmlWebpackPlugin.options.contentManagement.head.meta.description %>">
<!-- Facebook -->
<meta property="og:title" content="<%= htmlWebpackPlugin.options.contentManagement.head.meta.title %>">
<meta property="og:description" content="<%= htmlWebpackPlugin.options.contentManagement.head.meta.description %>">
<meta property="og:type" content="<%= htmlWebpackPlugin.options.contentManagement.head.meta.markup.facebook.type %>" />
<meta property="og:url" content="<%= htmlWebpackPlugin.options.contentManagement.head.meta.markup.facebook.url %>">
<meta property="og:image" content="<%= htmlWebpackPlugin.options.contentManagement.head.meta.markup.facebook.image %>">
<meta property="fb:app_id" content="<%= htmlWebpackPlugin.options.contentManagement.head.meta.markup.facebook.appId %>" />
<meta property="og:site_name" content="<%= htmlWebpackPlugin.options.contentManagement.head.meta.title %>">
<!-- Twitter -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="<%= htmlWebpackPlugin.options.contentManagement.head.meta.markup.twitter.site %>" />
<meta name="twitter:title" content="<%= htmlWebpackPlugin.options.contentManagement.head.meta.title %>">
<meta name="twitter:description" content="<%= htmlWebpackPlugin.options.contentManagement.head.meta.description %>">
<meta property="twitter:image" content="<%= htmlWebpackPlugin.options.contentManagement.head.meta.markup.twitter.image %>">
<!-- Favicon -->
<link rel="shortcut icon" href="<%= htmlWebpackPlugin.options.contentManagement.head.favicon %>">
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700">
<!-- Vendors -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/color-brewer.min.css" rel="stylesheet"/>
<!-- Google Tag Manager -->
</head>
<body class="travlr-ui">
<div id="app">
<!-- core nav top -->
<header class="t-navbar-top t-background-white t-position-fixed">
<div class="t-container t-clearfix">
<div class="t-navbar-top-left t-float-left t-display-table">
<div class="t-navbar-top-left-logo t-display-table-cell t-v-align-middle t-p-r-16">
<a href="/">
<img
src="<%= require('./../../src/assets/images/statics/travlr-uikit-logo.svg') %>"
alt="TRAVLR Logo"
title="TRAVLR Logo"
class="t-navbar-top-left-logo-image">
</a>
</div>
<nav class="t-navbar-top-left-menus t-display-table-cell t-v-align-middle t-hidden-mobile">
<ul class="t-navbar-top-left-menus-list t-no-margin t-clearfix">
<% for (itemMenu of htmlWebpackPlugin.options.listMenu) { %>
<li class="t-navbar-top-left-menus-list-item t-float-left">
<a
href="<%= itemMenu.url %>"
class="t-navbar-top-left-menus-list-item-link t-color-grey-darkest t-text-callout"
title="<%= itemMenu.label %>">
<%= itemMenu.label %>
</a>
<%
if (Array.isArray(itemMenu.child)) {
%>
<!-- Begin Has Child -->
<ul class="t-navbar-top-left-menus-list-item-child t-background-white t-position-absolute t-primary-box-shadow">
<% for (itemChild of itemMenu.child) { %>
<li class="t-navbar-top-left-menus-list-item-child-item">
<a
href="<%= itemChild.url %>"
class="t-navbar-top-left-menus-list-item-child-item-link t-color-grey-darkest t-display-block t-body-text"
title="<%= itemChild.label %>">
<%= itemChild.label %>
<i class="t-icon icon-angle-right-small"></i>
</a>
<%
if (Array.isArray(itemChild.child)) {
%>
<!-- Begin Has Second Child -->
<ul class="t-navbar-top-left-menus-list-item-child-item-grandchild t-background-white t-position-absolute t-primary-box-shadow">
<% for (itemSecondChild of itemChild.child) { %>
<li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
<a
href="<%= itemSecondChild.url %>"
class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
title="<%= itemSecondChild.label %>">
<%= itemSecondChild.label %>
</a>
</li>
<% } %>
</ul>
<!-- End Has Second Child -->
<%
}
%>
</li>
<% } %>
</ul>
<!-- End Has Child -->
<%
}
%>
</li>
<% } %>
</ul>
</nav>
</div>
<div class="t-navbar-top-right t-float-right t-display-table">
<nav class="t-navbar-top-right-auth-container t-display-table-cell t-v-align-middle">
<ul class="t-navbar-top-right-menus-list t-clearfix t-no-margin t-display-table t-p-l-20">
<li class="t-navbar-top-right-menus-list-item t-display-table-cell t-hidden-mobile">
<a
href="http://"
class="t-btn t-btn-small t-btn-tertiary"
title="Download v1.0.0">Download v1.0.0
</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
<!-- core nav top end -->
<!-- Begin Main Content -->
<main class="t-main-content">
<!-- section hero main -->
<section class=" t-section-small">
<div class="t-container">
<div class="t-columns t-columns-with-gap">
<div class="t-col-12">
<ul class="t-breadcrumb">
<% for (itemBreadcrumbIndex in htmlWebpackPlugin.options.breadcrumbs) { %>
<% if (parseInt(itemBreadcrumbIndex) === htmlWebpackPlugin.options.breadcrumbs.length -1) { %>
<li class="t-breadcrumb-item">
<a href="<%= htmlWebpackPlugin.options.breadcrumbs[itemBreadcrumbIndex].url %>">
<%= htmlWebpackPlugin.options.breadcrumbs[itemBreadcrumbIndex].label %>
</a>
</li>
<% } else { %>
<li class="t-breadcrumb-item active">
<a href="<%= htmlWebpackPlugin.options.breadcrumbs[itemBreadcrumbIndex].url %>">
<%= htmlWebpackPlugin.options.breadcrumbs[itemBreadcrumbIndex].label %>
</a>
</li>
<% } %>
<% } %>
</ul>
</div>
</div>
</div>
</section>
<!-- section hero main end -->
<!-- Begin Getting Started -->
<section class="t-p-b-32">
<div class="t-container">
<div class="t-columns t-columns-with-gap">
<!-- Begin Left Description -->
<div class="t-col-4 t-col-mobile-12 t-col-with-gap">
<% for (itemMenuSidebar of htmlWebpackPlugin.options.listMenu[0].child) { %>
<div class="t-box t-box-with-shadow">
<h2 class="t-heading-4 t-m-b-16 t-color-grey-darkest"><%= itemMenuSidebar.label %></h2>
<ul class="t-accordion t-no-padding">
<% for (itemMenuSidebarChild of itemMenuSidebar.child) { %>
<li class="t-accordion-item">
<div class="t-accordion-item-header">
<a
href="<%= itemMenuSidebarChild.url %>"
class="t-accordion-title"
title="Theme Colours"><%= itemMenuSidebarChild.label %></a>
<i class="t-accordion-icon t-icon icon-angle-right-small"></i>
</div>
</li>
<% } %>
</ul>
</div>
<% } %>
</div>
<!-- End Left Description -->
<!-- Begin Right Description -->
<div class="t-col-8 t-col-mobile-12">
<div class="t-box t-box-with-shadow">
<h2 class="t-heading-4 t-color-grey-darkest">Loading Spinners</h2>
<p class="t-body-text t-m-t-32 t-m-b-32">
TRAVLR UI Kit uses Loading Spinners font icons which are composed of some 250+ icons. Easily style icons using border color classes, background color classes and size classes. Highlight icons using the <span class="t-label-code">.t-icon</span> class.
</p>
<div class="t-panel t-primary-box-shadow t-no-margin">
<div class="t-panel-header t-p-t-0 t-background-grey-lightest">
<div class="t-panel-header-title">
Example
</div>
</div>
<div class="t-panel-body">
<div class="t-columns t-columns-with-gap">
<div class="t-col-10">
<pre>
<code class="xml hljs" id="loadingSpinners-1">
<span class="t-icon icon-spinner-1"></span>
</code>
</pre>
</div>
<div class="t-col-2 t-text-align-right">
<button data-clipboard-action="copy" data-clipboard-target="#loadingSpinners-1" class="copyText t-btn t-btn-tertiary t-btn-small t-hidden-mobile">Copy</button>
</div>
</div>
</div>
</div>
<div class="t-m-t-32 t-color-grey-darkest">
<span class="t-icon icon-spinner-1"></span>
</div>
<div class="t-separator t-m-t-32 t-m-b-32"></div>
<h2 class="t-heading-4 t-color-grey-darkest">Icon Colour</h2>
<p class="t-body-text t-m-t-32 t-m-b-32">
Add color classes in combination with the feature icon class to draw attention to an icon. <span class="t-label-code">.icon-color-primary</span>
</p>
<div class="t-panel t-primary-box-shadow t-no-margin">
<div class="t-panel-header t-p-t-0 t-background-grey-lightest">
<div class="t-panel-header-title">
Example
</div>
</div>
<div class="t-panel-body">
<div class="t-columns t-columns-with-gap">
<div class="t-col-10">
<pre>
<code class="xml hljs" id="loadingSpinners-2">
<span class="t-icon icon-spinner-1 t-color-primary"></span>
<span class="t-icon icon-spinner-1 t-color-secondary"></span>
<span class="t-icon icon-spinner-1 t-color-tertiary"></span>
</code>
</pre>
</div>
<div class="t-col-2 t-text-align-right">
<button data-clipboard-action="copy" data-clipboard-target="#loadingSpinners-2" class="copyText t-btn t-btn-tertiary t-btn-small t-hidden-mobile">Copy</button>
</div>
</div>
</div>
</div>
<div class="t-m-t-32 t-color-grey-darkest">
<span class="t-icon icon-spinner-1 t-color-primary t-m-r-16"></span>
<span class="t-icon icon-spinner-1 t-color-secondary t-m-r-16"></span>
<span class="t-icon icon-spinner-1 t-color-tertiary "></span>
</div>
<div class="t-separator t-m-t-32 t-m-b-32"></div>
<h2 class="t-heading-4 t-color-grey-darkest">Icon Size</h2>
<p class="t-body-text t-m-t-32 t-m-b-32">
To alter size use one of the four existing size classes: <span class="t-label-code">.icon-small</span> , <span class="t-label-code">.icon-medium</span>
</p>
<div class="t-panel t-primary-box-shadow t-no-margin">
<div class="t-panel-header t-p-t-0 t-background-grey-lightest">
<div class="t-panel-header-title">
Example
</div>
</div>
<div class="t-panel-body">
<div class="t-columns t-columns-with-gap">
<div class="t-col-10">
<pre>
<code class="xml hljs" id="loadingSpinners-3">
<span class="t-icon icon-spinner-1 icon-small"></span>
<span class="t-icon icon-spinner-1"></span>
<span class="t-icon icon-spinner-1 icon-large"></span>
</code>
</pre>
</div>
<div class="t-col-2 t-text-align-right">
<button data-clipboard-action="copy" data-clipboard-target="#loadingSpinners-3" class="copyText t-btn t-btn-tertiary t-btn-small t-hidden-mobile">Copy</button>
</div>
</div>
</div>
</div>
<div class="t-m-t-32 t-color-grey-darkest">
<span class="t-icon icon-spinner-1 icon-small t-m-r-16"></span>
<span class="t-icon icon-spinner-1 t-m-r-16"></span>
<span class="t-icon icon-spinner-1 icon-large"></span>
</div>
<div class="t-separator t-m-t-32 t-m-b-32"></div>
<h2 class="t-heading-4 t-color-grey-darkest">Icon Type</h2>
<p class="t-body-text t-m-t-32 t-m-b-32">
To alter size use one of the four existing size classes: <span class="t-label-code">.t-icon-is-spinning</span> , <span class="t-label-code">.t-icon-rotate-90</span> , <span class="t-label-code">.t-icon-rotate-180</span> , <span class="t-label-code">.t-icon-rotate-270</span> , <span class="t-label-code">.t-icon-flip-y</span> , <span class="t-label-code">.t-icon-flip-x</span>
</p>
<div class="t-panel t-primary-box-shadow t-no-margin">
<div class="t-panel-header t-p-t-0 t-background-grey-lightest">
<div class="t-panel-header-title">
Example
</div>
</div>
<div class="t-panel-body">
<div class="t-columns t-columns-with-gap">
<div class="t-col-10">
<pre>
<code class="xml hljs" id="loadingSpinners-3">
<span class="t-icon icon-spinner-1 t-icon-is-spinning"></span>
<span class="t-icon icon-spinner-1 t-icon-rotate-90"></span>
<span class="t-icon icon-spinner-1 t-icon-rotate-180"></span>
<span class="t-icon icon-spinner-1 t-icon-rotate-270"></span>
<span class="t-icon icon-spinner-1 t-icon-flip-y"></span>
<span class="t-icon icon-spinner-1 t-icon-flip-x"></span>
</code>
</pre>
</div>
<div class="t-col-2 t-text-align-right">
<button data-clipboard-action="copy" data-clipboard-target="#loadingSpinners-3" class="copyText t-btn t-btn-tertiary t-btn-small t-hidden-mobile">Copy</button>
</div>
</div>
</div>
</div>
<div class="t-m-t-32 t-color-grey-darkest">
<span class="t-icon icon-spinner-1 t-icon-is-spinning t-m-r-16"></span>
<span class="t-icon icon-spinner-1 t-icon-rotate-90 t-m-r-16"></span>
<span class="t-icon icon-spinner-1 t-icon-rotate-180 t-m-r-16"></span>
<span class="t-icon icon-spinner-1 t-icon-rotate-270 t-m-r-16"></span>
<span class="t-icon icon-spinner-1 t-icon-flip-y t-m-r-16"></span>
<span class="t-icon icon-spinner-1 t-icon-flip-x"></span>
</div>
<div class="t-separator t-m-t-32 t-m-b-32"></div>
<h2 class="t-heading-4 t-color-grey-darkest">Loading Spinners List</h2>
<p class="t-body-text t-m-t-32 t-m-b-32">
Rollover any icon to see icon class name.
</p>
<div class="t-columns t-columns-with-gap t-m-t-32 t-color-grey-darkest">
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-spinner-1" flow="down">
<i class="t-icon icon-spinner-1 t-icon-is-spinning"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-spinner-2" flow="down">
<i class="t-icon icon-spinner-2 t-icon-is-spinning"></i>
</span>
</div>
</div>
</div>
<%= require('html-loader!./../components/footer-documentation.html') %>
</div>
</div>
<!-- End Right Description -->
</div>
</div>
</section>
<!-- End Getting Started -->
</main>
<!-- End Main Content -->
<!-- core nav bottom -->
<%= require('html-loader!./../components/footer.html') %>
<!-- core nav bottom -->
</div>
<!-- core nav bottom script -->
<%= require('html-loader!./../components/footer-script.html') %>
<!-- core nav bottom script -->
</body>
</html>