NOT MERGE Add tabs to Crayons and to the notifications page (#7737)
* tabs * frontned * notifications tabs * ntofiications * . * doc * names instead of slugs * flare tag line height * . * js
This commit is contained in:
ludwiczakpawel
GitHub
parent
a49ae729a0
commit
e17cbd3efb
13 changed files with 349 additions and 177 deletions
|
|
@ -129,23 +129,14 @@ function listenForNotificationsBellClick() {
|
|||
}
|
||||
|
||||
function initFilter() {
|
||||
var navFilterMenu = document.getElementsByClassName("notifications-filter__dropdown__menu");
|
||||
var navFilterSelect = document.getElementById("notifications-filter__select");
|
||||
|
||||
for (var i = 0; i < navFilterMenu.length; i++) {
|
||||
document.getElementById("notifications-filter__menu-overlay").classList.remove("showing");
|
||||
}
|
||||
|
||||
if (navFilterSelect) {
|
||||
navFilterSelect.onclick = function(){
|
||||
document.getElementById("notifications-filter__menu-overlay").classList.add("showing");
|
||||
}
|
||||
}
|
||||
|
||||
for (var i = 0; i < navFilterMenu.length; i++) {
|
||||
navFilterMenu[i].onclick = function(event){
|
||||
document.getElementById("notifications-filter__menu-overlay").classList.remove("showing");
|
||||
}
|
||||
const notificationsFilterSelect = document.getElementById(
|
||||
'notifications-filter__select',
|
||||
);
|
||||
const changeNotifications = (event) => {
|
||||
window.location.href = event.target.value;
|
||||
};
|
||||
if (notificationsFilterSelect) {
|
||||
notificationsFilterSelect.addEventListener('change', changeNotifications);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -114,7 +114,7 @@
|
|||
// Selects
|
||||
.crayons-select {
|
||||
line-height: var(--lh-base);
|
||||
padding: 0.5em;
|
||||
padding: calc(0.5em - var(--border-width)) 0.5em;
|
||||
padding-right: var(--su-7);
|
||||
font-family: inherit;
|
||||
font-size: var(--fs-base);
|
||||
|
|
|
|||
|
|
@ -117,48 +117,3 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.crayons-tabs {
|
||||
display: flex;
|
||||
|
||||
.crayons-link {
|
||||
padding: 0 0.5em;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
&--current {
|
||||
background: transparent;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
left: 0.5em;
|
||||
right: 0.5em;
|
||||
bottom: -2px;
|
||||
height: 2px;
|
||||
content: '';
|
||||
background-color: var(--accent-brand);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--item {
|
||||
padding: var(--su-3);
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
|
||||
&--current {
|
||||
border-bottom: 4px solid var(--accent-brand);
|
||||
|
||||
.crayons-tabs__label {
|
||||
color: var(--link-color);
|
||||
font-size: var(--fs-base);
|
||||
font-weight: var(--fw-bold);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: var(--base-10);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
136
app/assets/stylesheets/components/tabs.scss
Normal file
136
app/assets/stylesheets/components/tabs.scss
Normal file
|
|
@ -0,0 +1,136 @@
|
|||
@import '../config/import';
|
||||
|
||||
.crayons-tabs {
|
||||
// Setup
|
||||
--border-width: 3px;
|
||||
--tab-vertical-padding: var(--su-3);
|
||||
--tab-horizontal-padding: var(--su-2);
|
||||
--font-size: var(--fs-base);
|
||||
display: flex;
|
||||
|
||||
@media (min-width: $breakpoint-s) {
|
||||
--tab-vertical-padding: var(--su-2);
|
||||
}
|
||||
|
||||
&--scrollable {
|
||||
overflow-y: auto;
|
||||
flex-wrap: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
&__item {
|
||||
padding: var(--tab-vertical-padding) var(--tab-horizontal-padding);
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
outline: none;
|
||||
font-size: var(--font-size);
|
||||
line-height: var(--su-6);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
color: var(--tab-color);
|
||||
position: relative;
|
||||
border-radius: var(--radius);
|
||||
transition: all var(--transition-props);
|
||||
width: 100%;
|
||||
|
||||
@media (min-width: $breakpoint-s) {
|
||||
width: auto;
|
||||
margin: 0 var(--su-1);
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: var(--border-width);
|
||||
content: '';
|
||||
background: var(--tab-bg-current);
|
||||
border-radius: var(--radius);
|
||||
transition: all var(--transition-props);
|
||||
|
||||
@media (min-width: $breakpoint-s) {
|
||||
left: var(--tab-horizontal-padding);
|
||||
right: var(--tab-horizontal-padding);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--tab-bg-hover);
|
||||
color: var(--tab-color-hover);
|
||||
|
||||
&:after {
|
||||
left: 0;
|
||||
right: 0;
|
||||
border-radius: 0 0 var(--radius) var(--radius);
|
||||
}
|
||||
}
|
||||
|
||||
&--current {
|
||||
font-weight: var(--fw-medium);
|
||||
color: var(--tab-color-current);
|
||||
|
||||
&::after {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--pills {
|
||||
.crayons-tabs__item--current {
|
||||
background: var(--tab-bg-current);
|
||||
color: var(--tab-pill-color-current);
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--stacked {
|
||||
flex-direction: column;
|
||||
@media (min-width: $breakpoint-s) {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.crayons-tabs__item {
|
||||
margin: 0;
|
||||
|
||||
@media (min-width: $breakpoint-s) {
|
||||
margin: 0 var(--su-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--wrapped {
|
||||
flex-wrap: wrap;
|
||||
|
||||
.crayons-tabs__item {
|
||||
margin: var(--su-1);
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&--muted {
|
||||
.crayons-tabs__item {
|
||||
color: var(--tab-muted-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--tab-muted-color-hover);
|
||||
background: var(--tab-muted-bg-hover);
|
||||
}
|
||||
|
||||
&:after {
|
||||
background: var(--tab-muted-bg-current);
|
||||
}
|
||||
}
|
||||
|
||||
&.crayons-tabs--pills {
|
||||
.crayons-tabs__item--current {
|
||||
color: var(--tab-muted-color-current);
|
||||
background: var(--tab-muted-bg-current);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -190,6 +190,19 @@
|
|||
--indicator-default-bg: var(--button-secondary-bg);
|
||||
--indicator-default-color: var(--button-secondary-color);
|
||||
|
||||
// Tabs
|
||||
--tab-color: var(--base-80);
|
||||
--tab-color-hover: var(--accent-brand);
|
||||
--tab-color-current: var(--base-100);
|
||||
--tab-bg-hover: var(--accent-brand-a10);
|
||||
--tab-bg-current: var(--accent-brand);
|
||||
--tab-muted-color: var(--base-80);
|
||||
--tab-muted-color-hover: var(--base-90);
|
||||
--tab-muted-color-current: var(--base-100);
|
||||
--tab-muted-bg-hover: var(--base-a10);
|
||||
--tab-muted-bg-current: var(--base-20);
|
||||
--tab-pill-color-current: var(--base-inverted);
|
||||
|
||||
// Tags
|
||||
--tag-color: var(--base-70);
|
||||
--tag-color-hover: var(--base-100);
|
||||
|
|
|
|||
|
|
@ -20,4 +20,5 @@
|
|||
@import 'components/notices';
|
||||
@import 'components/snackbars';
|
||||
@import 'components/stories';
|
||||
@import 'components/tabs';
|
||||
@import 'components/tags';
|
||||
|
|
|
|||
|
|
@ -432,20 +432,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Notifications filtering on mobile.
|
||||
.notifications-filter__tabs {
|
||||
display: none;
|
||||
|
||||
// @media screen and (min-width: 950px) {
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
&.showing {
|
||||
display: flex;
|
||||
}
|
||||
background: var(--base-inverted);
|
||||
}
|
||||
|
||||
.notifications-filter__list {
|
||||
li {
|
||||
margin-bottom: var(--su-1);
|
||||
|
|
|
|||
|
|
@ -180,6 +180,19 @@
|
|||
--indicator-default-bg: var(--button-secondary-bg);
|
||||
--indicator-default-color: var(--button-secondary-color);
|
||||
|
||||
// Tabs
|
||||
--tab-color: var(--base-80);
|
||||
--tab-color-hover: var(--accent-brand);
|
||||
--tab-color-current: var(--base-100);
|
||||
--tab-bg-hover: var(--accent-brand-a10);
|
||||
--tab-bg-current: var(--accent-brand);
|
||||
--tab-muted-color: var(--base-80);
|
||||
--tab-muted-color-hover: var(--base-90);
|
||||
--tab-muted-color-current: var(--base-100);
|
||||
--tab-muted-bg-hover: var(--base-a10);
|
||||
--tab-muted-bg-current: var(--base-20);
|
||||
--tab-pill-color-current: var(--base-inverted);
|
||||
|
||||
// Tags
|
||||
--tag-color: var(--base-70);
|
||||
--tag-color-hover: var(--base-100);
|
||||
|
|
|
|||
|
|
@ -178,6 +178,19 @@
|
|||
--indicator-default-bg: var(--button-secondary-bg);
|
||||
--indicator-default-color: var(--button-secondary-color);
|
||||
|
||||
// Tabs
|
||||
--tab-color: var(--base-80);
|
||||
--tab-color-hover: var(--accent-brand);
|
||||
--tab-color-current: var(--base-100);
|
||||
--tab-bg-hover: var(--accent-brand-a10);
|
||||
--tab-bg-current: var(--accent-brand);
|
||||
--tab-muted-color: var(--base-80);
|
||||
--tab-muted-color-hover: var(--base-90);
|
||||
--tab-muted-color-current: var(--base-100);
|
||||
--tab-muted-bg-hover: var(--base-a10);
|
||||
--tab-muted-bg-current: var(--base-20);
|
||||
--tab-pill-color-current: var(--base-inverted);
|
||||
|
||||
// Tags
|
||||
--tag-color: var(--base-70);
|
||||
--tag-color-hover: var(--base-100);
|
||||
|
|
|
|||
|
|
@ -36,10 +36,10 @@
|
|||
--base-inverted: #000;
|
||||
|
||||
// Accent colors
|
||||
--accent-brand: #3b49df;
|
||||
--accent-brand-darker: #1827ce;
|
||||
--accent-brand-lighter: #8d95f2;
|
||||
--accent-brand-a10: #{rgba(#3b49df, 0.1)};
|
||||
--accent-brand: #7b78ff;
|
||||
--accent-brand-darker: #5855f3;
|
||||
--accent-brand-lighter: #9896ff;
|
||||
--accent-brand-a10: #{rgba(#7b78ff, 0.1)};
|
||||
|
||||
// Success
|
||||
--accent-success: #26d9ca;
|
||||
|
|
@ -104,13 +104,13 @@
|
|||
--link-bg-current: var(--base-inverted);
|
||||
|
||||
// Primary buttons
|
||||
--button-primary-bg: var(--accent-success);
|
||||
--button-primary-bg-hover: var(--accent-success-darker);
|
||||
--button-primary-color: var(--base-0);
|
||||
--button-primary-bg: var(--accent-brand);
|
||||
--button-primary-bg-hover: var(--accent-brand-darker);
|
||||
--button-primary-color: var(--base-inverted);
|
||||
--button-primary-color-hover: var(--base-inverted);
|
||||
//-- Inverted
|
||||
--button-primary-inverted-bg: var(--accent-success);
|
||||
--button-primary-inverted-bg-hover: var(--accent-success-darker);
|
||||
--button-primary-inverted-bg: var(--accent-brand);
|
||||
--button-primary-inverted-bg-hover: var(--accent-brand-darker);
|
||||
--button-primary-inverted-color: var(--base-0);
|
||||
--button-primary-inverted-color-hover: var(--base-0);
|
||||
|
||||
|
|
@ -180,6 +180,19 @@
|
|||
--indicator-default-bg: var(--button-secondary-bg);
|
||||
--indicator-default-color: var(--button-secondary-color);
|
||||
|
||||
// Tabs
|
||||
--tab-color: var(--base-80);
|
||||
--tab-color-hover: var(--accent-brand-lighter);
|
||||
--tab-color-current: var(--base-100);
|
||||
--tab-bg-hover: var(--accent-brand-a10);
|
||||
--tab-bg-current: var(--accent-brand);
|
||||
--tab-muted-color: var(--base-80);
|
||||
--tab-muted-color-hover: var(--base-90);
|
||||
--tab-muted-color-current: var(--base-100);
|
||||
--tab-muted-bg-hover: var(--base-a10);
|
||||
--tab-muted-bg-current: var(--base-20);
|
||||
--tab-pill-color-current: var(--base-inverted);
|
||||
|
||||
// Tags
|
||||
--tag-color: var(--base-70);
|
||||
--tag-color-hover: var(--base-100);
|
||||
|
|
|
|||
|
|
@ -178,6 +178,19 @@
|
|||
--indicator-dimmed-bg: var(--base-30);
|
||||
--indicator-dimmed-color: var(--base-70);
|
||||
|
||||
// Tabs
|
||||
--tab-color: var(--base-80);
|
||||
--tab-color-hover: var(--accent-brand);
|
||||
--tab-color-current: var(--base-100);
|
||||
--tab-bg-hover: var(--accent-brand-a10);
|
||||
--tab-bg-current: var(--accent-brand);
|
||||
--tab-muted-color: var(--base-80);
|
||||
--tab-muted-color-hover: var(--base-90);
|
||||
--tab-muted-color-current: var(--base-100);
|
||||
--tab-muted-bg-hover: var(--base-a10);
|
||||
--tab-muted-bg-current: var(--base-20);
|
||||
--tab-pill-color-current: var(--base-inverted);
|
||||
|
||||
// Tags
|
||||
--tag-color: var(--base-70);
|
||||
--tag-color-hover: var(--base-100);
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
<% if @organizations.present? %>
|
||||
<header class="crayons-card__subheader">
|
||||
<h4 class="crayons-card__subheader__title">
|
||||
@<%= @user.username %>
|
||||
<%= @user.name %>
|
||||
</h4>
|
||||
</header>
|
||||
<% end %>
|
||||
|
|
@ -66,7 +66,7 @@
|
|||
<% @organizations.each do |org| %>
|
||||
<header class="crayons-card__subheader">
|
||||
<h4 class="crayons-card__subheader__title">
|
||||
@<%= org.slug %>
|
||||
<%= org.name %>
|
||||
</h4>
|
||||
</header>
|
||||
<ul class="notifications-filter__list">
|
||||
|
|
@ -95,95 +95,43 @@
|
|||
</div>
|
||||
<div class="articles-list" id="articles-list">
|
||||
|
||||
<section class="notifications-filter__dropdown">
|
||||
<section class="notifications-filter__dropdown s:flex-col">
|
||||
<% if @organizations.present? %>
|
||||
<% if @selected_organization %>
|
||||
<div aria-label="notifications-filter-menu">
|
||||
<button type="button" id="notifications-filter__select" class="notifications-filter__dropdown__select">
|
||||
@<%= @selected_organization.slug %>
|
||||
<%= inline_svg_tag("arrow-down-fill.svg", aria: true, class: "crayons-icon", title: "Arrow Down") %>
|
||||
</button>
|
||||
</div>
|
||||
<% else %>
|
||||
<div aria-label="notifications-filter-menu">
|
||||
<button type="button" id="notifications-filter__select" class="notifications-filter__dropdown__select">
|
||||
@<%= current_user.username %>
|
||||
<%= inline_svg_tag("arrow-down-fill.svg", aria: true, class: "crayons-icon", title: "Arrow Down") %>
|
||||
</button>
|
||||
</div>
|
||||
<% end %>
|
||||
<div class="notifications-filter__dropdown__menu-overlay" id="notifications-filter__menu-overlay">
|
||||
<nav class="notifications-filter__dropdown__menu" aria-label="notifications-filter-menu">
|
||||
<header class="notifications-filter__dropdown__header">
|
||||
<h3 class="notifications-filter__dropdown__title">
|
||||
Filter
|
||||
</h3>
|
||||
</header>
|
||||
<a href="/notifications" class="notifications-filter__dropdown__option <%= "selected" if params[:org_id].blank? %>">
|
||||
<div class="notifications-filter__dropdown__label">
|
||||
<span class="notifications-filter__dropdown__label--title">
|
||||
<%= @user.name %>
|
||||
</span>
|
||||
<span class="notifications-filter__dropdown__label--subtitle">
|
||||
@<%= @user.username %> · Personal
|
||||
</span>
|
||||
</div>
|
||||
<div class="notifications-filter__icon">
|
||||
<%= inline_svg_tag("checkmark.svg", aria: true, class: "crayons-icon", title: "Checkmark") %>
|
||||
</div>
|
||||
</a>
|
||||
<div class="p-2 s:inline-flex">
|
||||
<select id="notifications-filter__select" class="crayons-select">
|
||||
<option value="/notifications"><%= @user.name %></option>
|
||||
<% @organizations.each do |org| %>
|
||||
<a href="/notifications/org/<%= org.id %>" class="notifications-filter__dropdown__option <%= "selected" if params[:org_id].to_i == org.id %>">
|
||||
<div class="notifications-filter__dropdown__label">
|
||||
<span class="notifications-filter__dropdown__label--title">
|
||||
<%= org.name %>
|
||||
</span>
|
||||
<span class="notifications-filter__dropdown__label--subtitle">
|
||||
@<%= org.slug %> · Organization
|
||||
</span>
|
||||
</div>
|
||||
<div class="notifications-filter__icon">
|
||||
<%= inline_svg_tag("checkmark.svg", aria: true, class: "crayons-icon", title: "Checkmark") %>
|
||||
</div>
|
||||
</a>
|
||||
<option value="/notifications/org/<%= org.id %>" <%= "selected" if params[:org_id].to_i == org.id %>><%= org.name %></option>
|
||||
<% end %>
|
||||
</nav>
|
||||
</select>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<div class="crayons-tabs notifications-filter__tabs <%= "showing" if params[:org_id].blank? %>">
|
||||
<a class="crayons-tabs--item <%= "crayons-tabs--item--current" if params[:filter].blank? %>" href="/notifications">
|
||||
<span class="crayons-tabs__label">
|
||||
<div class="s:inline-flex">
|
||||
<nav class="crayons-tabs notifications-filter__tabs <%= "hidden" if params[:org_id].present? %>">
|
||||
<a class="crayons-tabs__item <%= "crayons-tabs__item--current" if params[:filter].blank? %>" href="/notifications">
|
||||
All
|
||||
</span>
|
||||
</a>
|
||||
<a class="crayons-tabs--item <%= "crayons-tabs--item--current" if params[:filter].to_s.casecmp("comments").zero? && params[:org_id].blank? %>" href="/notifications/comments">
|
||||
<span class="crayons-tabs__label">
|
||||
</a>
|
||||
<a class="crayons-tabs__item <%= "crayons-tabs__item--current" if params[:filter].to_s.casecmp("comments").zero? && params[:org_id].blank? %>" href="/notifications/comments">
|
||||
Comments
|
||||
</span>
|
||||
</a>
|
||||
<a class="crayons-tabs--item <%= "crayons-tabs--item--current" if params[:filter].to_s.casecmp("posts").zero? && params[:org_id].blank? %>" href="/notifications/posts">
|
||||
<span class="crayons-tabs__label">
|
||||
</a>
|
||||
<a class="crayons-tabs__item <%= "crayons-tabs__item--current" if params[:filter].to_s.casecmp("posts").zero? && params[:org_id].blank? %>" href="/notifications/posts">
|
||||
Posts
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<% if @organizations.present? %>
|
||||
<% @organizations.each do |org| %>
|
||||
<div class="crayons-tabs notifications-filter__tabs <%= "showing" if params[:org_id].to_i == org.id %>">
|
||||
<a class="crayons-tabs--item <%= "crayons-tabs--item--current" if params[:filter].to_s.casecmp("org").zero? && params[:org_id].to_i == org.id %>" href="/notifications/org/<%= org.id %>">
|
||||
<span class="crayons-tabs__label">
|
||||
</a>
|
||||
</nav>
|
||||
<% if @organizations.present? %>
|
||||
<% @organizations.each do |org| %>
|
||||
<nav class="crayons-tabs notifications-filter__tabs <%= "hidden" unless params[:org_id].to_i == org.id %>">
|
||||
<a class="crayons-tabs__item <%= "crayons-tabs__item--current" if params[:filter].to_s.casecmp("org").zero? && params[:org_id].to_i == org.id %>" href="/notifications/org/<%= org.id %>">
|
||||
All
|
||||
</span>
|
||||
</a>
|
||||
<a class="crayons-tabs--item <%= "crayons-tabs--item--current" if params[:filter].to_s.casecmp("comments").zero? && params[:org_id].to_i == org.id %>" href="/notifications/comments/<%= org.id %>">
|
||||
<span class="crayons-tabs__label">
|
||||
</a>
|
||||
<a class="crayons-tabs__item <%= "crayons-tabs__item--current" if params[:filter].to_s.casecmp("comments").zero? && params[:org_id].to_i == org.id %>" href="/notifications/comments/<%= org.id %>">
|
||||
Comments
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</a>
|
||||
</nav>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
</section>
|
||||
<%= render "notifications_list", params: params %>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1101,22 +1101,112 @@
|
|||
|
||||
<div class="container">
|
||||
<div class="body">
|
||||
<h2>Navigation: Tabs</h2>
|
||||
<p>Use tabs as 2nd level navigation or filtering options.</p>
|
||||
<p>Tabs can be created by also using <code>.crayons-link</code> elements but wrapped with extra container <code>.crayons-tabs</code>.</p>
|
||||
<h2>Tabs</h2>
|
||||
<p>...</p>
|
||||
</div>
|
||||
<div class="crayons-tabs">
|
||||
<a href="#" class="crayons-link crayons-link--current">Feed</a>
|
||||
<a href="#" class="crayons-link">Popular</a>
|
||||
<a href="#" class="crayons-link">Latest</a>
|
||||
|
||||
<div>
|
||||
<nav class="crayons-tabs mb-9">
|
||||
<a href="#" class="crayons-tabs__item">Week</a>
|
||||
<a href="#" class="crayons-tabs__item crayons-tabs__item--current">Month</a>
|
||||
<a href="#" class="crayons-tabs__item">Year</a>
|
||||
<a href="#" class="crayons-tabs__item">Infinity</a>
|
||||
</nav>
|
||||
|
||||
<nav class="crayons-tabs crayons-tabs--pills mb-9">
|
||||
<a href="#" class="crayons-tabs__item">Week</a>
|
||||
<a href="#" class="crayons-tabs__item crayons-tabs__item--current">Month</a>
|
||||
<a href="#" class="crayons-tabs__item">Year</a>
|
||||
<a href="#" class="crayons-tabs__item">Infinity</a>
|
||||
</nav>
|
||||
|
||||
<nav class="crayons-tabs crayons-tabs--muted mb-9">
|
||||
<a href="#" class="crayons-tabs__item">Week</a>
|
||||
<a href="#" class="crayons-tabs__item crayons-tabs__item--current">Month</a>
|
||||
<a href="#" class="crayons-tabs__item">Year</a>
|
||||
<a href="#" class="crayons-tabs__item">Infinity</a>
|
||||
</nav>
|
||||
|
||||
<nav class="crayons-tabs crayons-tabs--pills crayons-tabs--muted mb-9">
|
||||
<a href="#" class="crayons-tabs__item">Week</a>
|
||||
<a href="#" class="crayons-tabs__item crayons-tabs__item--current">Month</a>
|
||||
<a href="#" class="crayons-tabs__item">Year</a>
|
||||
<a href="#" class="crayons-tabs__item">Infinity</a>
|
||||
</nav>
|
||||
|
||||
<nav class="crayons-tabs crayons-tabs--scrollable mb-9">
|
||||
<a href="#" class="crayons-tabs__item">Feed</a>
|
||||
<a href="#" class="crayons-tabs__item">Week</a>
|
||||
<a href="#" class="crayons-tabs__item crayons-tabs__item--current">Month</a>
|
||||
<a href="#" class="crayons-tabs__item">Year</a>
|
||||
<a href="#" class="crayons-tabs__item">Infinity</a>
|
||||
<a href="#" class="crayons-tabs__item">Latest</a>
|
||||
</nav>
|
||||
|
||||
<nav class="crayons-tabs crayons-tabs--stacked crayons-tabs--pills mb-9">
|
||||
<a href="#" class="crayons-tabs__item">Week</a>
|
||||
<a href="#" class="crayons-tabs__item crayons-tabs__item--current">Month</a>
|
||||
<a href="#" class="crayons-tabs__item">Year</a>
|
||||
<a href="#" class="crayons-tabs__item">Infinity</a>
|
||||
</nav>
|
||||
|
||||
<nav class="crayons-tabs crayons-tabs--wrapped crayons-tabs--pills mb-9">
|
||||
<a href="#" class="crayons-tabs__item">Feed</a>
|
||||
<a href="#" class="crayons-tabs__item">Week</a>
|
||||
<a href="#" class="crayons-tabs__item crayons-tabs__item--current">Month</a>
|
||||
<a href="#" class="crayons-tabs__item">Year</a>
|
||||
<a href="#" class="crayons-tabs__item">Infinity</a>
|
||||
<a href="#" class="crayons-tabs__item">Latest</a>
|
||||
<a href="#" class="crayons-tabs__item">Year</a>
|
||||
<a href="#" class="crayons-tabs__item">Infinity</a>
|
||||
<a href="#" class="crayons-tabs__item">Latest</a>
|
||||
<a href="#" class="crayons-tabs__item">Year</a>
|
||||
<a href="#" class="crayons-tabs__item">Infinity</a>
|
||||
<a href="#" class="crayons-tabs__item">Latest</a>
|
||||
<a href="#" class="crayons-tabs__item">Year</a>
|
||||
<a href="#" class="crayons-tabs__item">Infinity</a>
|
||||
<a href="#" class="crayons-tabs__item">Latest</a>
|
||||
<a href="#" class="crayons-tabs__item">Year</a>
|
||||
<a href="#" class="crayons-tabs__item">Infinity</a>
|
||||
<a href="#" class="crayons-tabs__item">Latest</a>
|
||||
<a href="#" class="crayons-tabs__item">Year</a>
|
||||
<a href="#" class="crayons-tabs__item">Infinity</a>
|
||||
<a href="#" class="crayons-tabs__item">Latest</a>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
<pre><%= '
|
||||
<div class="crayons-tabs">
|
||||
<a href="#" class="crayons-link crayons-link--current">Feed</a>
|
||||
<a href="#" class="crayons-link">Popular</a>
|
||||
<a href="#" class="crayons-link">Latest</a>
|
||||
</div>
|
||||
<nav class="crayons-tabs">
|
||||
<a href="#" class="crayons-tabs__item">Week</a>
|
||||
<a href="#" class="crayons-tabs__item crayons-tabs__item--current">Month</a>
|
||||
<a href="#" class="crayons-tabs__item">Year</a>
|
||||
<a href="#" class="crayons-tabs__item">Infinity</a>
|
||||
</nav>
|
||||
|
||||
<nav class="crayons-tabs crayons-tabs--pills">
|
||||
...
|
||||
</nav>
|
||||
|
||||
<nav class="crayons-tabs crayons-tabs--muted">
|
||||
...
|
||||
</nav>
|
||||
|
||||
<nav class="crayons-tabs crayons-tabs--pills crayons-tabs--pills">
|
||||
...
|
||||
</nav>
|
||||
|
||||
<nav class="crayons-tabs crayons-tabs--scrollable">
|
||||
...
|
||||
</nav>
|
||||
|
||||
<nav class="crayons-tabs crayons-tabs--stacked">
|
||||
...
|
||||
</nav>
|
||||
|
||||
<nav class="crayons-tabs crayons-tabs--wrapped">
|
||||
...
|
||||
</nav>
|
||||
'.rstrip %></pre>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue