Tailwind Style Guide and Footer Component
progress update done? fix tests Added rows and containers fix PR Fixes
This commit is contained in:
Simon Fessehaye
Родитель
d51a3906fe
Коммит
b1e291142c
|
|
@ -1,78 +1,78 @@
|
|||
{% load settings_value i18n static %}
|
||||
|
||||
{% with wrapper_class="py-5" %}
|
||||
{% with wrapper_class="tw-py-12" %}
|
||||
|
||||
<footer role="contentinfo">
|
||||
{% if skip_donate != True %}
|
||||
{% block footer_donate %}
|
||||
<div class="donate-banner dark-theme d-print-none {{wrapper_class}}">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<p class="h3-heading mb-0">{% trans "We all love the Web. Join Mozilla in defending it." %}</p>
|
||||
<p class="h3-heading mb-4">{% trans "Let’s protect the world’s largest resource for future generations." %}</p>
|
||||
<div>
|
||||
<a href="https://donate.mozilla.org/?utm_source=foundation.mozilla.org&utm_medium=referral&utm_campaign=fmonav&utm_content=footer" target="_blank" rel="noopener noreferrer" class="btn btn-secondary dark-theme" id="donate-banner-cta">{% trans "Donate now" %}</a>
|
||||
{% block footer_donate %}
|
||||
<div class="tw-bg-blue dark-theme print:tw-hidden {{wrapper_class}}">
|
||||
<div class="tw-container tw-mt-6">
|
||||
<div class="tw-row">
|
||||
<div class="tw-w-full tw-px-4">
|
||||
<p class="h3-heading tw-mb-0">{% trans "We all love the Web. Join Mozilla in defending it." %}</p>
|
||||
<p class="h3-heading tw-mb-6">{% trans "Let’s protect the world’s largest resource for future generations." %}</p>
|
||||
<div>
|
||||
<a href="https://donate.mozilla.org/?utm_source=foundation.mozilla.org&utm_medium=referral&utm_campaign=fmonav&utm_content=footer" target="_blank" rel="noopener noreferrer" class="btn btn-secondary dark-theme" id="donate-banner-cta">{% trans "Donate now" %}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
{% endif %}
|
||||
|
||||
<div class="site-footer dark-theme {{wrapper_class}} d-print-none">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="site-footer tw-bg-black dark-theme {{wrapper_class}} print:tw-hidden">
|
||||
<div class="tw-container tw-mt-6">
|
||||
<div class="tw-row">
|
||||
|
||||
{% block left_footer_column %}
|
||||
<div class="col-md-5 col-lg-6 d-flex flex-column justify-content-between">
|
||||
<div class="medium:tw-w-5/12 large:tw-w-6/12 tw-px-4 tw-flex tw-flex-col tw-justify-between">
|
||||
<div class="join-us" data-form-position="footer" data-button-position="side"></div>
|
||||
<a class="logo d-block my-5 my-md-0" href="https://foundation.mozilla.org" aria-label="{% trans 'Return to Homepage' %}"><img src="{% static "_images/mozilla-block-white.svg" %}" alt="{% trans 'Mozilla Foundation' %}" width="96"></a>
|
||||
<a class="logo tw-block tw-my-12 medium:tw-my-0" href="https://foundation.mozilla.org" aria-label="{% trans 'Return to Homepage' %}"><img src="{% static "_images/mozilla-block-white.svg" %}" alt="{% trans 'Mozilla Foundation' %}" width="96"></a>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block right_footer_column %}
|
||||
<div class="col-md-6 col-lg-5 offset-md-1 d-flex flex-column justify-content-between">
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-xl-5">
|
||||
<div class="medium:tw-w-5/12 large:tw-w-6/12 tw-px-4 tw-flex tw-flex-col tw-justify-between">
|
||||
<div class="tw-row">
|
||||
<div class="xlarge:tw-w-5/12 large:tw-w-6/12 tw-px-4">
|
||||
<p class="h5-heading">{% trans "More about us" %}</p>
|
||||
<ul class="d-flex list-unstyled">
|
||||
<ul class="tw-flex tw-list-none">
|
||||
{% block social_links %}
|
||||
<li class="mr-2"><a class="twitter-glyph small d-inline-block" href="https://twitter.com/mozilla"><span class="sr-only">{% trans "Twitter" %}</span></a></li>
|
||||
<li class="mr-2"><a class="instagram-glyph small d-inline-block" href="https://www.instagram.com/mozilla/"><span class="sr-only">{% trans "Instagram" %}</span></a></li>
|
||||
<li class="mr-2"><a class="github-glyph small d-inline-block" href="https://www.github.com/mozilla/foundation.mozilla.org/"><span class="sr-only">{% trans "GitHub" %}</span></a></li>
|
||||
<li class="tw-mr-2"><a class="twitter-glyph small tw-inline-block" href="https://twitter.com/mozilla"><span class="sr-only">{% trans "Twitter" %}</span></a></li>
|
||||
<li class="tw-mr-2"><a class="instagram-glyph small tw-inline-block" href="https://www.instagram.com/mozilla/"><span class="sr-only">{% trans "Instagram" %}</span></a></li>
|
||||
<li class="tw-mr-2"><a class="github-glyph small tw-inline-block" href="https://www.github.com/mozilla/foundation.mozilla.org/"><span class="sr-only">{% trans "GitHub" %}</span></a></li>
|
||||
{% endblock %}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-lg-6 col-xl-7">
|
||||
<ul class="link-list list-unstyled mb-0">
|
||||
<div class="large:tw-w-6/12 xlarge:tw-w-7/12 tw-px-4">
|
||||
<ul class="tw-list-none tw-mb-0 link-list large:tw-col-count-2">
|
||||
{% block general_links %}
|
||||
<li><a id="donate-footer-btn" href="https://donate.mozilla.org/?utm_source=foundation.mozilla.org&utm_medium=referral&utm_campaign=fmonav&utm_content=footer" target="_blank" rel="noopener noreferrer" class="dark-theme">{% trans "Donate" %}</a></li>
|
||||
<li class="tw-mb-2"><a id="donate-footer-btn" href="https://donate.mozilla.org/?utm_source=foundation.mozilla.org&utm_medium=referral&utm_campaign=fmonav&utm_content=footer" target="_blank" rel="noopener noreferrer" class="dark-theme tw-text-white hover:tw-text-blue-light hover:tw-underline">{% trans "Donate" %}</a></li>
|
||||
<!-- the rest of the links should be listed alphabetically -->
|
||||
<li><a href="https://careers.mozilla.org/listings/?team=Mozilla%20Foundation" class="dark-theme">{% trans "Careers" %}</a></li>
|
||||
<li><a href="https://www.mozilla.org/privacy/websites/#cookies" class="dark-theme">{% trans "Cookies" %}</a></li>
|
||||
<li><a href="https://www.mozilla.org/about/legal/terms/mozilla/" class="dark-theme">{% trans "Legal" %}</a></li>
|
||||
<li><a href="https://www.mozilla.org/about/governance/policies/participation/" class="dark-theme">{% trans "Participation Guidelines" %}</a></li>
|
||||
<li><a href="https://foundation.mozilla.org/en/press-center/" class="dark-theme">{% trans "Press Center" %}</a></li>
|
||||
<li><a href="https://mozilla.org/privacy/websites/" class="dark-theme">{% trans "Privacy" %}</a></li>
|
||||
<li class="tw-mb-2"><a href="https://careers.mozilla.org/listings/?team=Mozilla%20Foundation" class="dark-theme tw-text-white hover:tw-text-blue-light hover:tw-underline">{% trans "Careers" %}</a></li>
|
||||
<li class="tw-mb-2"><a href="https://www.mozilla.org/privacy/websites/#cookies" class="dark-theme tw-text-white hover:tw-text-blue-light hover:tw-underline">{% trans "Cookies" %}</a></li>
|
||||
<li class="tw-mb-2"><a href="https://www.mozilla.org/about/legal/terms/mozilla/" class="dark-theme tw-text-white hover:tw-text-blue-light hover:tw-underline">{% trans "Legal" %}</a></li>
|
||||
<li class="tw-mb-2"><a href="https://www.mozilla.org/about/governance/policies/participation/" class="dark-theme tw-text-white hover:tw-text-blue-light hover:tw-underline">{% trans "Participation Guidelines" %}</a></li>
|
||||
<li class="tw-mb-2"><a href="https://foundation.mozilla.org/en/press-center/" class="dark-theme tw-text-white hover:tw-text-blue-light hover:tw-underline">{% trans "Press Center" %}</a></li>
|
||||
<li class=""><a href="https://mozilla.org/privacy/websites/" class="dark-theme tw-text-white hover:tw-text-blue-light hover:tw-underline">{% trans "Privacy" %}</a></li>
|
||||
{% endblock %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{% if exclude_language_switcher != True %}
|
||||
{% block language_switcher %}
|
||||
<div class="row mt-5">
|
||||
<div class="col-12">
|
||||
<div class="tw-row tw-mt-12">
|
||||
<div class="tw-w-full tw-px-4">
|
||||
{% include "../fragments/language_switcher.html" %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% endif %}
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<hr class="mt-5 mb-3" />
|
||||
<p class="dark-theme body-small mb-0">
|
||||
<div class="tw-row">
|
||||
<div class="tw-w-full tw-px-4">
|
||||
<hr class="tw-mt-12 tw-mb-4" />
|
||||
<p class="dark-theme body-small tw-mb-0">
|
||||
{% blocktrans with foundation_website_url='https://foundation.mozilla.org' foundation_website='foundation.mozilla.org' cc_website_url='https://foundation.mozilla.org/about/website-licensing/' %}Mozilla is a global non-profit dedicated to putting you in control of your online experience and shaping the future of the web for the public good. Visit us at <a href="{{foundation_website_url}}">{{foundation_website}}</a>. Most content available under a <a href="{{cc_website_url}}">Creative Commons license</a>.{% endblocktrans %}
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<div class="col-sm-6 col-md-3 mb-3">
|
||||
<div class="color-display d-flex flex-column h-100">
|
||||
<div class="color-block w-100 px-2 py-5 {{classname}}"></div>
|
||||
<div class="p-2"><strong>{{name}}</strong>
|
||||
<div class="color-code small">{{hex}}</div>
|
||||
<div class="tw-w-full small:tw-w-1/2 medium:tw-w-1/4 tw-mb-4 tw-px-4">
|
||||
<div class="tw-border tw-border-gray-20 tw-flex tw-flex-col tw-h-full">
|
||||
<div class="tw-border-b tw-border-gray-20 tw-w-full tw-px-2 tw-py-12 {{classname}}"></div>
|
||||
<div class="tw-p-2"><strong>{{name}}</strong>
|
||||
<div class="tw-text-gray-60 tw-font-normal tw-text-[80%]">{{hex}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,536 +1,536 @@
|
|||
{% extends "../primary_page.html" %}
|
||||
{% load wagtailcore_tags wagtailimages_tags card_tags %}
|
||||
|
||||
{% block body_id %}style-guide{% endblock%}
|
||||
{% block body_id %}style-guide{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container mt-4">
|
||||
<div class="row">
|
||||
<div class="col-12 pb-5">
|
||||
<div class="tw-container tw-mt-6">
|
||||
<div class="tw-row">
|
||||
<div class="tw-w-full tw-px-4 tw-pb-12">
|
||||
<h2 class="h1-heading">Colors</h2>
|
||||
<hr class="hr-emphasis">
|
||||
|
||||
<h3 class="h2-heading mt-5">Side-wide Palette</h3>
|
||||
<h3 class="h2-heading tw-mt-12">Site-wide Palette</h3>
|
||||
<hr />
|
||||
|
||||
<div class="row">
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="white" name="White ($white)" hex="#ffffff" %}
|
||||
<div class="tw-row">
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-white" name="White ($white)" hex="#ffffff" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="gray-05" name="Gray 05 ($gray-05)" hex="#f2f2f2" %}
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-gray-05" name="Gray 05 ($gray-05)" hex="#f2f2f2" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="gray-20" name="Gray 20 ($gray-20)" hex="#cccccc" %}
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-gray-20" name="Gray 20 ($gray-20)" hex="#cccccc" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="gray-40" name="Gray 40 ($gray-40)" hex="#999999" %}
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-gray-40" name="Gray 40 ($gray-40)" hex="#999999" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="gray-60" name="Gray 60 ($gray-60)" hex="#666666" %}
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-gray-60" name="Gray 60 ($gray-60)" hex="#666666" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="gray-80" name="Gray 80 ($gray-80)" hex="#333333" %}
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-gray-80" name="Gray 80 ($gray-80)" hex="#333333" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="black" name="Black ($black)" hex="#000000" %}
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-black" name="Black ($black)" hex="#000000" %}
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="light-red" name="Light Red ($light-red)" hex="#ffe6e8" %}
|
||||
<div class="tw-row">
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-red-light" name="Light Red ($light-red)" hex="#ffe6e8" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="red" name="Red ($red)" hex="#ff4f5e" %}
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-red" name="Red ($red)" hex="#ff4f5e" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="dark-red" name="Dark Red ($dark-red)" hex="#cc0011" %}
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-red-dark" name="Dark Red ($dark-red)" hex="#cc0011" %}
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="lightest-blue" name="Lightest Blue ($lightest-blue)" hex="#e7e7fc" %}
|
||||
<div class="tw-row">
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-blue-lightest" name="Lightest Blue ($lightest-blue)" hex="#e7e7fc" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="light-blue" name="Light Blue ($light-blue)" hex="#b7b9fa" %}
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-blue-light" name="Light Blue ($light-blue)" hex="#b7b9fa" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="blue" name="Blue ($blue)" hex="#595cf3" %}
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-blue" name="Blue ($blue)" hex="#595cf3" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="dark-blue" name="Dark Blue ($dark-blue)" hex="#0d10bf" %}
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-blue-dark" name="Dark Blue ($dark-blue)" hex="#0d10bf" %}
|
||||
</div>
|
||||
|
||||
<h3 class="h2-heading mt-5">Privacy Not Included Palette</h3>
|
||||
<h3 class="h2-heading tw-mt-12">Privacy Not Included Palette</h3>
|
||||
<hr />
|
||||
|
||||
<div class="row">
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="pni-lilac" name="PNI Lilac ($pni-lilac)" hex="#d3d5fc" %}
|
||||
<div class="tw-row">
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-pni-lilac" name="PNI Lilac ($pni-lilac)" hex="#d3d5fc" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="pni-blue" name="PNI Blue ($pni-blue)" hex="#1808f2" %}
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-pni-blue" name="PNI Blue ($pni-blue)" hex="#1808f2" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="pni-blue-purple" name="PNI Blue Purple ($pni-blue-purple)" hex="#4a17d4" %}
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-pni-blue-purple" name="PNI Blue Purple ($pni-blue-purple)" hex="#4a17d4" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="pni-purple" name="PNI Purple ($pni-purple)" hex="#7f28b7" %}
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-pni-purple" name="PNI Purple ($pni-purple)" hex="#7f28b7" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="pni-purple-pink" name="PNI Purple Pink ($pni-purple-pink)" hex="#b0379b" %}
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-pni-purple-pink" name="PNI Purple Pink ($pni-purple-pink)" hex="#b0379b" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="pni-pink" name="PNI Pink ($pni-pink)" hex="#e4487d" %}
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-pni-pink" name="PNI Pink ($pni-pink)" hex="#e4487d" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="pni-gradient" name="PNI Gradient($pni-gradient)" hex="linear-gradient(to right, #1808f2 0%, #e4487d 100%)" %}
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-gradient-to-r tw-from-pni-blue tw-to-pni-pink" name="PNI Gradient ($pni-gradient)" hex="linear-gradient(to right, #1808f2 0%, #e4487d 100%)" %}
|
||||
</div>
|
||||
|
||||
<h3 class="h2-heading mt-5">Festival Palette</h3>
|
||||
<h3 class="h2-heading tw-mt-12">Festival Palette</h3>
|
||||
<hr />
|
||||
|
||||
<div class="row">
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="festival-dark-blue" name="Festival Dark Blue ($festival-dark-blue)" hex="#0e11bf" %}
|
||||
<div class="tw-row">
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-festival-blue" name="Festival Dark Blue ($festival-dark-blue)" hex="#0e11bf" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="festival-purple" name="Festival Purple ($festival-purple)" hex="#8f14fb" %}
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-festival-purple" name="Festival Purple ($festival-purple)" hex="#8f14fb" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="festival-gradient" name="Festival Gradient($festival-gradient)" hex="linear-gradient(120deg, #0e11bf 0%, #8f14fb 100%)" %}
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-gradient-to-r tw-from-festival-blue tw-to-festival-purple" name="Festival Gradient ($festival-gradient)" hex="linear-gradient(120deg, #0e11bf 0%, #8f14fb 100%)" %}
|
||||
</div>
|
||||
|
||||
|
||||
<h2 class="h1-heading mt-5">Grid</h2>
|
||||
<h2 class="h1-heading tw-mt-12">Grid</h2>
|
||||
<hr class="hr-emphasis">
|
||||
|
||||
<h3 class="h2-heading mt-5">Breakpoints</h3>
|
||||
<h3 class="h2-heading tw-mt-12">Breakpoints</h3>
|
||||
<hr />
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<table class="table table-bordered table-striped w-100">
|
||||
<div class="tw-row">
|
||||
<div class="tw-w-full tw-px-4">
|
||||
<table class="tw-table tw-w-full tw-border tw-border-[#dee2e6] tw-overflow-x-auto">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th class="">Extra small</th>
|
||||
<th class="">Small</th>
|
||||
<th class="">Medium</th>
|
||||
<th class="">Large</th>
|
||||
<th class="">Extra large</th>
|
||||
<th class="tw-p-3 tw-border tw-border-[#dee2e6]"></th>
|
||||
<th class="tw-p-3 tw-border tw-border-[#dee2e6]">Extra small</th>
|
||||
<th class="tw-p-3 tw-border tw-border-[#dee2e6]">Small</th>
|
||||
<th class="tw-p-3 tw-border tw-border-[#dee2e6]">Medium</th>
|
||||
<th class="tw-p-3 tw-border tw-border-[#dee2e6]">Large</th>
|
||||
<th class="tw-p-3 tw-border tw-border-[#dee2e6]">Extra large</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th class="text-nowrap" scope="row">Breakpoint</th>
|
||||
<td>None</td>
|
||||
<td>576px</td>
|
||||
<td>768px</td>
|
||||
<td>992px</td>
|
||||
<td>1200px</td>
|
||||
<tr class="tw-bg-black tw-bg-opacity-5">
|
||||
<th class="tw-whitespace-nowrap tw-p-3 tw-border tw-border-[#dee2e6]" scope="row">Breakpoint</th>
|
||||
<td class="tw-p-3 tw-border tw-border-[#dee2e6]">None</td>
|
||||
<td class="tw-p-3 tw-border tw-border-[#dee2e6]">576px</td>
|
||||
<td class="tw-p-3 tw-border tw-border-[#dee2e6]">768px</td>
|
||||
<td class="tw-p-3 tw-border tw-border-[#dee2e6]">992px</td>
|
||||
<td class="tw-p-3 tw-border tw-border-[#dee2e6]">1200px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap" scope="row">Max container width</th>
|
||||
<td>None (auto)</td>
|
||||
<td>540px</td>
|
||||
<td>720px</td>
|
||||
<td>960px</td>
|
||||
<td>1140px</td>
|
||||
<th class="tw-whitespace-nowrap tw-p-3 tw-border tw-border-[#dee2e6]" scope="row">Max container width</th>
|
||||
<td class="tw-p-3 tw-border tw-border-[#dee2e6]">None (auto)</td>
|
||||
<td class="tw-p-3 tw-border tw-border-[#dee2e6]">540px</td>
|
||||
<td class="tw-p-3 tw-border tw-border-[#dee2e6]">720px</td>
|
||||
<td class="tw-p-3 tw-border tw-border-[#dee2e6]">960px</td>
|
||||
<td class="tw-p-3 tw-border tw-border-[#dee2e6]">1140px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap" scope="row">Design alias</th>
|
||||
<td><code>phone</code></td>
|
||||
<td><code>phone</code></td>
|
||||
<td><code>tablet</code></td>
|
||||
<td><code>desktop</code></td>
|
||||
<td><code>wide desktop</code></td>
|
||||
<tr class="tw-bg-black tw-bg-opacity-5">
|
||||
<th class="tw-whitespace-nowrap tw-p-3 tw-border tw-border-[#dee2e6]" scope="row">Design alias</th>
|
||||
<td class="tw-p-3 tw-border tw-border-[#dee2e6]"><code>mobile (potrait)</code></td>
|
||||
<td class="tw-p-3 tw-border tw-border-[#dee2e6]"><code>mobile (landscape)</code></td>
|
||||
<td class="tw-p-3 tw-border tw-border-[#dee2e6]"><code>tablet</code></td>
|
||||
<td class="tw-p-3 tw-border tw-border-[#dee2e6]"><code>desktop</code></td>
|
||||
<td class="tw-p-3 tw-border tw-border-[#dee2e6]"><code>wide desktop</code></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="h2-heading mt-5">Columns</h3>
|
||||
<h3 class="h2-heading tw-mt-12">Columns</h3>
|
||||
<hr />
|
||||
|
||||
<div class="row dark-theme">
|
||||
<div class="col-1"><p class="body-large bg-black text-center mb-2">1</p></div>
|
||||
<div class="col-1"><p class="body-large bg-black text-center mb-2">1</p></div>
|
||||
<div class="col-1"><p class="body-large bg-black text-center mb-2">1</p></div>
|
||||
<div class="col-1"><p class="body-large bg-black text-center mb-2">1</p></div>
|
||||
<div class="col-1"><p class="body-large bg-black text-center mb-2">1</p></div>
|
||||
<div class="col-1"><p class="body-large bg-black text-center mb-2">1</p></div>
|
||||
<div class="col-1"><p class="body-large bg-black text-center mb-2">1</p></div>
|
||||
<div class="col-1"><p class="body-large bg-black text-center mb-2">1</p></div>
|
||||
<div class="col-1"><p class="body-large bg-black text-center mb-2">1</p></div>
|
||||
<div class="col-1"><p class="body-large bg-black text-center mb-2">1</p></div>
|
||||
<div class="col-1"><p class="body-large bg-black text-center mb-2">1</p></div>
|
||||
<div class="col-1"><p class="body-large bg-black text-center mb-2">1</p></div>
|
||||
<div class="tw-row dark-theme">
|
||||
<div class="tw-w-1/12 tw-px-4"><p class="body-large tw-bg-black tw-text-center tw-mb-2">1</p></div>
|
||||
<div class="tw-w-1/12 tw-px-4"><p class="body-large tw-bg-black tw-text-center tw-mb-2">1</p></div>
|
||||
<div class="tw-w-1/12 tw-px-4"><p class="body-large tw-bg-black tw-text-center tw-mb-2">1</p></div>
|
||||
<div class="tw-w-1/12 tw-px-4"><p class="body-large tw-bg-black tw-text-center tw-mb-2">1</p></div>
|
||||
<div class="tw-w-1/12 tw-px-4"><p class="body-large tw-bg-black tw-text-center tw-mb-2">1</p></div>
|
||||
<div class="tw-w-1/12 tw-px-4"><p class="body-large tw-bg-black tw-text-center tw-mb-2">1</p></div>
|
||||
<div class="tw-w-1/12 tw-px-4"><p class="body-large tw-bg-black tw-text-center tw-mb-2">1</p></div>
|
||||
<div class="tw-w-1/12 tw-px-4"><p class="body-large tw-bg-black tw-text-center tw-mb-2">1</p></div>
|
||||
<div class="tw-w-1/12 tw-px-4"><p class="body-large tw-bg-black tw-text-center tw-mb-2">1</p></div>
|
||||
<div class="tw-w-1/12 tw-px-4"><p class="body-large tw-bg-black tw-text-center tw-mb-2">1</p></div>
|
||||
<div class="tw-w-1/12 tw-px-4"><p class="body-large tw-bg-black tw-text-center tw-mb-2">1</p></div>
|
||||
<div class="tw-w-1/12 tw-px-4"><p class="body-large tw-bg-black tw-text-center tw-mb-2">1</p></div>
|
||||
</div>
|
||||
|
||||
<div class="row dark-theme">
|
||||
<div class="col-2"><p class="body-large bg-black text-center mb-2">2</p></div>
|
||||
<div class="col-2"><p class="body-large bg-black text-center mb-2">2</p></div>
|
||||
<div class="col-2"><p class="body-large bg-black text-center mb-2">2</p></div>
|
||||
<div class="col-2"><p class="body-large bg-black text-center mb-2">2</p></div>
|
||||
<div class="col-2"><p class="body-large bg-black text-center mb-2">2</p></div>
|
||||
<div class="col-2"><p class="body-large bg-black text-center mb-2">2</p></div>
|
||||
<div class="tw-row dark-theme">
|
||||
<div class="tw-w-2/12 tw-px-4"><p class="body-large tw-bg-black tw-text-center tw-mb-2">2</p></div>
|
||||
<div class="tw-w-2/12 tw-px-4"><p class="body-large tw-bg-black tw-text-center tw-mb-2">2</p></div>
|
||||
<div class="tw-w-2/12 tw-px-4"><p class="body-large tw-bg-black tw-text-center tw-mb-2">2</p></div>
|
||||
<div class="tw-w-2/12 tw-px-4"><p class="body-large tw-bg-black tw-text-center tw-mb-2">2</p></div>
|
||||
<div class="tw-w-2/12 tw-px-4"><p class="body-large tw-bg-black tw-text-center tw-mb-2">2</p></div>
|
||||
<div class="tw-w-2/12 tw-px-4"><p class="body-large tw-bg-black tw-text-center tw-mb-2">2</p></div>
|
||||
</div>
|
||||
|
||||
<div class="row dark-theme">
|
||||
<div class="col-3"><p class="body-large bg-black text-center mb-2">3</p></div>
|
||||
<div class="col-3"><p class="body-large bg-black text-center mb-2">3</p></div>
|
||||
<div class="col-3"><p class="body-large bg-black text-center mb-2">3</p></div>
|
||||
<div class="col-3"><p class="body-large bg-black text-center mb-2">3</p></div>
|
||||
<div class="tw-row dark-theme">
|
||||
<div class="tw-w-3/12 tw-px-4"><p class="body-large tw-bg-black tw-text-center tw-mb-2">3</p></div>
|
||||
<div class="tw-w-3/12 tw-px-4"><p class="body-large tw-bg-black tw-text-center tw-mb-2">3</p></div>
|
||||
<div class="tw-w-3/12 tw-px-4"><p class="body-large tw-bg-black tw-text-center tw-mb-2">3</p></div>
|
||||
<div class="tw-w-3/12 tw-px-4"><p class="body-large tw-bg-black tw-text-center tw-mb-2">3</p></div>
|
||||
</div>
|
||||
|
||||
<div class="row dark-theme">
|
||||
<div class="col-4"><p class="body-large bg-black text-center mb-2">4</p></div>
|
||||
<div class="col-4"><p class="body-large bg-black text-center mb-2">4</p></div>
|
||||
<div class="col-4"><p class="body-large bg-black text-center mb-2">4</p></div>
|
||||
<div class="tw-row dark-theme">
|
||||
<div class="tw-w-4/12 tw-px-4"><p class="body-large tw-bg-black tw-text-center tw-mb-2">4</p></div>
|
||||
<div class="tw-w-4/12 tw-px-4"><p class="body-large tw-bg-black tw-text-center tw-mb-2">4</p></div>
|
||||
<div class="tw-w-4/12 tw-px-4"><p class="body-large tw-bg-black tw-text-center tw-mb-2">4</p></div>
|
||||
</div>
|
||||
|
||||
<div class="row dark-theme">
|
||||
<div class="col-6"><p class="body-large bg-black text-center mb-2">6</p></div>
|
||||
<div class="col-6"><p class="body-large bg-black text-center mb-2">6</p></div>
|
||||
<div class="tw-row dark-theme">
|
||||
<div class="tw-w-6/12 tw-px-4"><p class="body-large tw-bg-black tw-text-center tw-mb-2">6</p></div>
|
||||
<div class="tw-w-6/12 tw-px-4"><p class="body-large tw-bg-black tw-text-center tw-mb-2">6</p></div>
|
||||
</div>
|
||||
|
||||
<div class="row dark-theme">
|
||||
<div class="col-5"><p class="body-large bg-black text-center mb-2">5</p></div>
|
||||
<div class="col-7"><p class="body-large bg-black text-center mb-2">7</p></div>
|
||||
<div class="tw-row dark-theme">
|
||||
<div class="tw-px-4 tw-w-5/12"><p class="body-large tw-bg-black tw-text-center tw-mb-2">5</p></div>
|
||||
<div class="tw-px-4 tw-w-7/12"><p class="body-large tw-bg-black tw-text-center tw-mb-2">7</p></div>
|
||||
</div>
|
||||
|
||||
<div class="row dark-theme">
|
||||
<div class="col-4"><p class="body-large bg-black text-center mb-2">4</p></div>
|
||||
<div class="col-8"><p class="body-large bg-black text-center mb-2">8</p></div>
|
||||
<div class="tw-row dark-theme">
|
||||
<div class="tw-px-4 tw-w-4/12"><p class="body-large tw-bg-black tw-text-center tw-mb-2">4</p></div>
|
||||
<div class="tw-px-4 tw-w-8/12"><p class="body-large tw-bg-black tw-text-center tw-mb-2">8</p></div>
|
||||
</div>
|
||||
|
||||
<div class="row dark-theme">
|
||||
<div class="col-3"><p class="body-large bg-black text-center mb-2">3</p></div>
|
||||
<div class="col-9"><p class="body-large bg-black text-center mb-2">9</p></div>
|
||||
<div class="tw-row dark-theme">
|
||||
<div class="tw-px-4 tw-w-3/12"><p class="body-large tw-bg-black tw-text-center tw-mb-2">3</p></div>
|
||||
<div class="tw-px-4 tw-w-9/12"><p class="body-large tw-bg-black tw-text-center tw-mb-2">9</p></div>
|
||||
</div>
|
||||
|
||||
<div class="row dark-theme">
|
||||
<div class="col-2"><p class="body-large bg-black text-center mb-2">2</p></div>
|
||||
<div class="col-10"><p class="body-large bg-black text-center mb-2">10</p></div>
|
||||
<div class="tw-row dark-theme">
|
||||
<div class="tw-px-4 tw-w-2/12"><p class="body-large tw-bg-black tw-text-center tw-mb-2">2</p></div>
|
||||
<div class="tw-px-4 tw-w-10/12"><p class="body-large tw-bg-black tw-text-center tw-mb-2">10</p></div>
|
||||
</div>
|
||||
|
||||
<div class="row dark-theme">
|
||||
<div class="col-1"><p class="body-large bg-black text-center mb-2">1</p></div>
|
||||
<div class="col-11"><p class="body-large bg-black text-center mb-2">11</p></div>
|
||||
<div class="tw-row dark-theme">
|
||||
<div class="tw-px-4 tw-w-1/12"><p class="body-large tw-bg-black tw-text-center tw-mb-2">1</p></div>
|
||||
<div class="tw-px-4 tw-w-11/12"><p class="body-large tw-bg-black tw-text-center tw-mb-2">11</p></div>
|
||||
</div>
|
||||
|
||||
<div class="row dark-theme">
|
||||
<div class="col-12"><p class="body-large bg-black text-center m-0">12</p></div>
|
||||
<div class="tw-row dark-theme">
|
||||
<div class="tw-px-4 tw-w-full"><p class="body-large tw-bg-black tw-text-center tw-m-0">12</p></div>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
|
||||
<h2 class="h1-heading mt-5">Typography</h2>
|
||||
<h2 class="h1-heading tw-mt-12">Typography</h2>
|
||||
<hr class="hr-emphasis">
|
||||
|
||||
<h3 class="h2-heading mt-5">Headers</h3>
|
||||
<h3 class="h2-heading tw-mt-12">Headers</h3>
|
||||
<hr />
|
||||
<div class="py-2">
|
||||
<div class="tw-py-2">
|
||||
<h1 class="h1-heading">.h1-heading</h1>
|
||||
</div>
|
||||
<div class="py-2">
|
||||
<div class="tw-py-2">
|
||||
<h2 class="h2-heading">.h2-heading</h2>
|
||||
</div>
|
||||
<div class="py-2">
|
||||
<div class="tw-py-2">
|
||||
<h3 class="h3-heading">.h3-heading</h3>
|
||||
</div>
|
||||
<div class="py-2">
|
||||
<div class="tw-py-2">
|
||||
<h4 class="h4-heading">.h4-heading</h4>
|
||||
</div>
|
||||
<div class="py-2">
|
||||
<div class="tw-py-2">
|
||||
<h5 class="h5-heading">.h5-heading</h5>
|
||||
</div>
|
||||
<div class="py-2">
|
||||
<div class="tw-py-2">
|
||||
<h6 class="h6-heading">.h6-heading</h6>
|
||||
</div>
|
||||
|
||||
<h3 class="h2-heading mt-5">Headers with links</h3>
|
||||
<h3 class="h2-heading tw-mt-12">Headers with links</h3>
|
||||
<hr />
|
||||
<div class="py-2">
|
||||
<div class="tw-py-2">
|
||||
<h1 class="h1-heading">.h1-heading with <a href="">link</a></h1>
|
||||
</div>
|
||||
<div class="py-2">
|
||||
<div class="tw-py-2">
|
||||
<h2 class="h2-heading">.h2-heading with <a href="">link</a></h2>
|
||||
</div>
|
||||
<div class="py-2">
|
||||
<div class="tw-py-2">
|
||||
<h3 class="h3-heading">.h3-heading with <a href="">link</a></h3>
|
||||
</div>
|
||||
<div class="py-2">
|
||||
<div class="tw-py-2">
|
||||
<h4 class="h4-heading">.h4-heading with <a href="">link</a></h4>
|
||||
</div>
|
||||
<div class="py-2">
|
||||
<div class="tw-py-2">
|
||||
<h5 class="h5-heading">.h5-heading with <a href="">link</a></h5>
|
||||
</div>
|
||||
<div class="py-2">
|
||||
<div class="tw-py-2">
|
||||
<h6 class="h6-heading">.h6-heading with <a href="">link</a></h6>
|
||||
</div>
|
||||
|
||||
<h3 class="h2-heading mt-5">Paragraphs</h3>
|
||||
<h3 class="h2-heading tw-mt-12">Paragraphs</h3>
|
||||
<hr />
|
||||
<div class="py-2">
|
||||
<div class="tw-py-2">
|
||||
<p class="body-large">.body-large with <b>bold</b> and <strong>strong</strong> and <i>italic</i> text</p>
|
||||
</div>
|
||||
<div class="py-2">
|
||||
<div class="tw-py-2">
|
||||
<p class="body">.body with <b>bold</b> and <strong>strong</strong> and <i>italic</i> text</p>
|
||||
</div>
|
||||
<div class="py-2">
|
||||
<div class="tw-py-2">
|
||||
<p class="body-small">.body-small with <b>bold</b> and <strong>strong</strong> and <i>italic</i> text</p>
|
||||
</div>
|
||||
<div class="py-2">
|
||||
<div class="tw-py-2">
|
||||
<p class="quote">.quote</p>
|
||||
</div>
|
||||
<div class="py-2">
|
||||
<div class="tw-py-2">
|
||||
<h2 class="type-accent">.type-accent</h2>
|
||||
</div>
|
||||
|
||||
<h3 class="h2-heading mt-5">Paragraphs with links</h3>
|
||||
<h3 class="h2-heading tw-mt-12">Paragraphs with links</h3>
|
||||
<hr />
|
||||
<div class="py-2">
|
||||
<div class="tw-py-2">
|
||||
<p class="body-large">.body-large with <a href="">link</a></p>
|
||||
</div>
|
||||
<div class="py-2">
|
||||
<div class="tw-py-2">
|
||||
<p class="body">.body with <a href="">link</a></p>
|
||||
</div>
|
||||
<div class="py-2">
|
||||
<div class="tw-py-2">
|
||||
<p class="body-small">.body-small with <a href="">link</a></p>
|
||||
</div>
|
||||
|
||||
<h3 class="h2-heading mt-5">Lists</h3>
|
||||
<h3 class="h2-heading tw-mt-12">Lists</h3>
|
||||
<hr />
|
||||
<div class="py-2">
|
||||
<h4>Default <xmp class="d-inline"><ol></xmp> style</h4>
|
||||
<div class="tw-py-2">
|
||||
<h4>Default <xmp class="tw-inline"><ol></xmp> style</h4>
|
||||
<ol>
|
||||
<li>I'm a list item <xmp class="d-inline"><li></xmp> style </li>
|
||||
<li>I'm a list item <xmp class="d-inline"><li></xmp> style with a <a href="https://example.com">link</a></li>
|
||||
<li>I'm a list item <xmp class="tw-inline"><li></xmp> style </li>
|
||||
<li>I'm a list item <xmp class="tw-inline"><li></xmp> style with a <a href="https://example.com">link</a></li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="py-2">
|
||||
<h4>Default <xmp class="d-inline"><ul></xmp> style</h4>
|
||||
<div class="tw-py-2">
|
||||
<h4>Default <xmp class="tw-inline"><ul></xmp> style</h4>
|
||||
<ul>
|
||||
<li>I'm a list item <xmp class="d-inline"><li></xmp> style </li>
|
||||
<li>I'm a list item <xmp class="d-inline"><li></xmp> style with a <a href="https://example.com">link</a></li>
|
||||
<li>I'm a list item <xmp class="tw-inline"><li></xmp> style </li>
|
||||
<li>I'm a list item <xmp class="tw-inline"><li></xmp> style with a <a href="https://example.com">link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3 class="h2-heading mt-5">Anchors</h3>
|
||||
<h3 class="h2-heading tw-mt-12">Anchors</h3>
|
||||
<hr />
|
||||
<div class="py-2"><a class="cta-link" href="https://example.com">.cta-link</a></div>
|
||||
<div class="tw-py-2"><a class="cta-link" href="https://example.com">.cta-link</a></div>
|
||||
|
||||
<h3 class="h2-heading mt-5">Dark Theme Headers</h3>
|
||||
<h3 class="h2-heading tw-mt-12">Dark Theme Headers</h3>
|
||||
<hr />
|
||||
<div class="dark-theme bg-black">
|
||||
<div class="py-2">
|
||||
<div class="dark-theme tw-bg-black">
|
||||
<div class="tw-py-2">
|
||||
<h1 class="h1-heading">.h1-heading</h1>
|
||||
</div>
|
||||
<div class="py-2">
|
||||
<div class="tw-py-2">
|
||||
<h2 class="h2-heading">.h2-heading</h2>
|
||||
</div>
|
||||
<div class="py-2">
|
||||
<div class="tw-py-2">
|
||||
<h3 class="h3-heading">.h3-heading</h3>
|
||||
</div>
|
||||
<div class="py-2">
|
||||
<div class="tw-py-2">
|
||||
<h4 class="h4-heading">.h4-heading</h4>
|
||||
</div>
|
||||
<div class="py-2">
|
||||
<div class="tw-py-2">
|
||||
<h5 class="h5-heading">.h5-heading</h5>
|
||||
</div>
|
||||
<div class="py-2">
|
||||
<div class="tw-py-2">
|
||||
<h6 class="h6-heading">.h6-heading</h6>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="h2-heading mt-5">Dark Theme Headers with links</h3>
|
||||
<h3 class="h2-heading tw-mt-12">Dark Theme Headers with links</h3>
|
||||
<hr />
|
||||
<div class="dark-theme bg-black">
|
||||
<div class="py-2">
|
||||
<div class="dark-theme tw-bg-black">
|
||||
<div class="tw-py-2">
|
||||
<h1 class="h1-heading">.h1-heading with <a href="">link</a></h1>
|
||||
</div>
|
||||
<div class="py-2">
|
||||
<div class="tw-py-2">
|
||||
<h2 class="h2-heading">.h2-heading with <a href="">link</a></h2>
|
||||
</div>
|
||||
<div class="py-2">
|
||||
<div class="tw-py-2">
|
||||
<h3 class="h3-heading">.h3-heading with <a href="">link</a></h3>
|
||||
</div>
|
||||
<div class="py-2">
|
||||
<div class="tw-py-2">
|
||||
<h4 class="h4-heading">.h4-heading with <a href="">link</a></h4>
|
||||
</div>
|
||||
<div class="py-2">
|
||||
<div class="tw-py-2">
|
||||
<h5 class="h5-heading">.h5-heading with <a href="">link</a></h5>
|
||||
</div>
|
||||
<div class="py-2">
|
||||
<div class="tw-py-2">
|
||||
<h6 class="h6-heading">.h6-heading with <a href="">link</a></h6>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="h2-heading mt-5">Dark Theme Paragraphs</h3>
|
||||
<h3 class="h2-heading tw-mt-12">Dark Theme Paragraphs</h3>
|
||||
<hr />
|
||||
<div class="dark-theme bg-black">
|
||||
<div class="py-2">
|
||||
<div class="dark-theme tw-bg-black">
|
||||
<div class="tw-py-2">
|
||||
<p class="body-large">.body-large with <b>bold</b> and <strong>strong</strong> and <i>italic</i> text</p>
|
||||
</div>
|
||||
<div class="py-2">
|
||||
<div class="tw-py-2">
|
||||
<p class="body">.body with <b>bold</b> and <strong>strong</strong> and <i>italic</i> text</p>
|
||||
</div>
|
||||
<div class="py-2">
|
||||
<div class="tw-py-2">
|
||||
<p class="body-small">.body-small with <b>bold</b> and <strong>strong</strong> and <i>italic</i> text</p>
|
||||
</div>
|
||||
<div class="py-2">
|
||||
<div class="tw-py-2">
|
||||
<p class="quote">.quote</p>
|
||||
</div>
|
||||
<div class="py-2">
|
||||
<div class="tw-py-2">
|
||||
<h2 class="type-accent">.type-accent</h2>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<h3 class="h2-heading mt-5">Dark Theme Paragraphs with links</h3>
|
||||
<h3 class="h2-heading tw-mt-12">Dark Theme Paragraphs with links</h3>
|
||||
<hr />
|
||||
<div class="dark-theme bg-black">
|
||||
<div class="py-2">
|
||||
<div class="dark-theme tw-bg-black">
|
||||
<div class="tw-py-2">
|
||||
<p class="body">.body with <a href="">link</a></p>
|
||||
</div>
|
||||
<div class="py-2">
|
||||
<div class="tw-py-2">
|
||||
<p class="body-large">.body-large with <a href="">link</a></p>
|
||||
</div>
|
||||
<div class="py-2">
|
||||
<div class="tw-py-2">
|
||||
<p class="body-small">.body-small with <a href="">link</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="h2-heading mt-5">Dark Theme Lists</h3>
|
||||
<h3 class="h2-heading tw-mt-12">Dark Theme Lists</h3>
|
||||
<hr />
|
||||
<div class="dark-theme bg-black">
|
||||
<div class="py-2">
|
||||
<h4>Default <xmp class="d-inline"><ol></xmp> style</h4>
|
||||
<div class="dark-theme tw-bg-black">
|
||||
<div class="tw-py-2">
|
||||
<h4>Default <xmp class="tw-inline"><ol></xmp> style</h4>
|
||||
<ol>
|
||||
<li>I'm a list item <xmp class="d-inline"><li></xmp> style </li>
|
||||
<li>I'm a list item <xmp class="d-inline"><li></xmp> style with a <a href="https://example.com">link</a></li>
|
||||
<li>I'm a list item <xmp class="tw-inline"><li></xmp> style </li>
|
||||
<li>I'm a list item <xmp class="tw-inline"><li></xmp> style with a <a href="https://example.com">link</a></li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="py-2">
|
||||
<h4>Default <xmp class="d-inline"><ul></xmp> style</h4>
|
||||
<div class="tw-py-2">
|
||||
<h4>Default <xmp class="tw-inline"><ul></xmp> style</h4>
|
||||
<ul>
|
||||
<li>I'm a list item <xmp class="d-inline"><li></xmp> style </li>
|
||||
<li>I'm a list item <xmp class="d-inline"><li></xmp> style with a <a href="https://example.com">link</a></li>
|
||||
<li>I'm a list item <xmp class="tw-inline"><li></xmp> style </li>
|
||||
<li>I'm a list item <xmp class="tw-inline"><li></xmp> style with a <a href="https://example.com">link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="h2-heading mt-5">Dark Theme Anchors</h3>
|
||||
<h3 class="h2-heading tw-mt-12">Dark Theme Anchors</h3>
|
||||
<hr />
|
||||
<div class="dark-theme bg-black">
|
||||
<div class="dark-theme tw-bg-black">
|
||||
<a class="cta-link" href="">.cta-link</a>
|
||||
</div>
|
||||
<div class="dark-theme bg-black">
|
||||
<div class="dark-theme tw-bg-black">
|
||||
<a href="">link</a>
|
||||
</div>
|
||||
|
||||
<h2 class="h1-heading mt-5">Buttons</h2>
|
||||
<h2 class="h1-heading tw-mt-12">Buttons</h2>
|
||||
<hr class="hr-emphasis">
|
||||
|
||||
<h3 class="h2-heading mt-5">Default</h3>
|
||||
<h3 class="h2-heading tw-mt-12">Default</h3>
|
||||
<hr />
|
||||
|
||||
<div class="mb-5">
|
||||
<div class="my-2">
|
||||
<button class="btn btn-primary">.btn-primary on <xmp class="d-inline"><button></xmp></button>
|
||||
<button class="btn btn-primary" disabled>disabled .btn-primary on <xmp class="d-inline"><button></xmp></button>
|
||||
<div class="tw-mb-12">
|
||||
<div class="tw-my-2">
|
||||
<button class="btn btn-primary">.btn-primary on <xmp class="tw-inline"><button></xmp></button>
|
||||
<button class="btn btn-primary" disabled>disabled .btn-primary on <xmp class="tw-inline"><button></xmp></button>
|
||||
</div>
|
||||
<div class="my-2">
|
||||
<a class="btn btn-primary" href="">.btn-primary on <xmp class="d-inline"><a></xmp></a>
|
||||
<a class="btn btn-primary" disabled href="">disabled .btn-primary on <xmp class="d-inline"><a></xmp></a>
|
||||
<div class="tw-my-2">
|
||||
<a class="btn btn-primary" href="">.btn-primary on <xmp class="tw-inline"><a></xmp></a>
|
||||
<a class="btn btn-primary" disabled href="">disabled .btn-primary on <xmp class="tw-inline"><a></xmp></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-5">
|
||||
<div class="my-2">
|
||||
<button class="btn btn-secondary">.btn-secondary on <xmp class="d-inline"><button></xmp></button>
|
||||
<button class="btn btn-secondary" disabled>disabled .btn-secondary on <xmp class="d-inline"><button></xmp></button>
|
||||
<div class="tw-mb-12">
|
||||
<div class="tw-my-2">
|
||||
<button class="btn btn-secondary">.btn-secondary on <xmp class="tw-inline"><button></xmp></button>
|
||||
<button class="btn btn-secondary" disabled>disabled .btn-secondary on <xmp class="tw-inline"><button></xmp></button>
|
||||
</div>
|
||||
<div class="my-2">
|
||||
<a class="btn btn-secondary" href="">.btn-secondary on <xmp class="d-inline"><a></xmp></a>
|
||||
<a class="btn btn-secondary" disabled href="">disabled .btn-secondary on <xmp class="d-inline"><a></xmp></a>
|
||||
<div class="tw-my-2">
|
||||
<a class="btn btn-secondary" href="">.btn-secondary on <xmp class="tw-inline"><a></xmp></a>
|
||||
<a class="btn btn-secondary" disabled href="">disabled .btn-secondary on <xmp class="tw-inline"><a></xmp></a>
|
||||
</div>
|
||||
<div class="my-2">
|
||||
<a class="btn btn-secondary" href="https://example.com">.btn-secondary on <xmp class="d-inline my-0 mx-1"><a></xmp> with external link</a>
|
||||
<a class="btn btn-secondary" disabled href="https://example.com">disabled .btn-secondary on <xmp class="d-inline my-0 mx-1"><a></xmp> with external link</a>
|
||||
<div class="tw-my-2">
|
||||
<a class="btn btn-secondary" href="https://example.com">.btn-secondary on <xmp class="tw-inline tw-my-0 tw-mx-1"><a></xmp> with external link</a>
|
||||
<a class="btn btn-secondary" disabled href="https://example.com">disabled .btn-secondary on <xmp class="tw-inline tw-my-0 tw-mx-1"><a></xmp> with external link</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="my-2">
|
||||
<button class="btn btn-pop">.btn-pop on <xmp class="d-inline"><button></xmp></button>
|
||||
<button class="btn btn-pop" disabled>disabled .btn-pop on <xmp class="d-inline"><button></xmp></button>
|
||||
<div class="tw-my-2">
|
||||
<button class="btn btn-pop">.btn-pop on <xmp class="tw-inline"><button></xmp></button>
|
||||
<button class="btn btn-pop" disabled>disabled .btn-pop on <xmp class="tw-inline"><button></xmp></button>
|
||||
</div>
|
||||
<div class="my-2">
|
||||
<a class="btn btn-pop" href="">.btn-pop on <xmp class="d-inline"><a></xmp></a>
|
||||
<a class="btn btn-pop" href="" disabled>disabled .btn-pop on <xmp class="d-inline"><a></xmp></a>
|
||||
<div class="tw-my-2">
|
||||
<a class="btn btn-pop" href="">.btn-pop on <xmp class="tw-inline"><a></xmp></a>
|
||||
<a class="btn btn-pop" href="" disabled>disabled .btn-pop on <xmp class="tw-inline"><a></xmp></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="h2-heading mt-5">Dark Theme</h3>
|
||||
<h3 class="h2-heading tw-mt-12">Dark Theme</h3>
|
||||
<hr />
|
||||
|
||||
<div class="p-3 dark-theme bg-black">
|
||||
<div class="mb-5">
|
||||
<div class="my-2">
|
||||
<button class="btn btn-primary">.btn-primary on <xmp class="d-inline"><button></xmp></button>
|
||||
<button class="btn btn-primary" disabled>disabled .btn-primary on <xmp class="d-inline"><button></xmp></button>
|
||||
<div class="tw-p-4 dark-theme tw-bg-black">
|
||||
<div class="tw-mb-12">
|
||||
<div class="tw-my-2">
|
||||
<button class="btn btn-primary">.btn-primary on <xmp class="tw-inline"><button></xmp></button>
|
||||
<button class="btn btn-primary" disabled>disabled .btn-primary on <xmp class="tw-inline"><button></xmp></button>
|
||||
</div>
|
||||
<div class="my-2">
|
||||
<a class="btn btn-primary" href="">.btn-primary on <xmp class="d-inline"><a></xmp></a>
|
||||
<a class="btn btn-primary" href="" disabled>disabled .btn-primary on <xmp class="d-inline"><a></xmp></a>
|
||||
<div class="tw-my-2">
|
||||
<a class="btn btn-primary" href="">.btn-primary on <xmp class="tw-inline"><a></xmp></a>
|
||||
<a class="btn btn-primary" href="" disabled>disabled .btn-primary on <xmp class="tw-inline"><a></xmp></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-5">
|
||||
<div class="my-2">
|
||||
<button class="btn btn-secondary">.btn-secondary on <xmp class="d-inline"><button></xmp></button>
|
||||
<button class="btn btn-secondary" disabled>disabled .btn-secondary on <xmp class="d-inline"><button></xmp></button>
|
||||
<div class="tw-mb-12">
|
||||
<div class="tw-my-2">
|
||||
<button class="btn btn-secondary">.btn-secondary on <xmp class="tw-inline"><button></xmp></button>
|
||||
<button class="btn btn-secondary" disabled>disabled .btn-secondary on <xmp class="tw-inline"><button></xmp></button>
|
||||
</div>
|
||||
<div class="my-2">
|
||||
<a class="btn btn-secondary" href="">.btn-secondary on <xmp class="d-inline"><a></xmp></a>
|
||||
<a class="btn btn-secondary" disabled href="">disabled .btn-secondary on <xmp class="d-inline"><a></xmp></a>
|
||||
<div class="tw-my-2">
|
||||
<a class="btn btn-secondary" href="">.btn-secondary on <xmp class="tw-inline"><a></xmp></a>
|
||||
<a class="btn btn-secondary" disabled href="">disabled .btn-secondary on <xmp class="tw-inline"><a></xmp></a>
|
||||
</div>
|
||||
<div class="my-2">
|
||||
<a class="btn btn-secondary" href="https://example.com">.btn-secondary on <xmp class="d-inline my-0 mx-1"><a></xmp> with external link</a>
|
||||
<a class="btn btn-secondary" disabled href="https://example.com">disabled .btn-secondary on <xmp class="d-inline my-0 mx-1"><a></xmp> with external link</a>
|
||||
<div class="tw-my-2">
|
||||
<a class="btn btn-secondary" href="https://example.com">.btn-secondary on <xmp class="tw-inline tw-my-0 tw-mx-1"><a></xmp> with external link</a>
|
||||
<a class="btn btn-secondary" disabled href="https://example.com">disabled .btn-secondary on <xmp class="tw-inline tw-my-0 tw-mx-1"><a></xmp> with external link</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="my-2">
|
||||
<button class="btn btn-pop">.btn-pop on <xmp class="d-inline"><button></xmp></button>
|
||||
<button class="btn btn-pop" disabled>disabled .btn-pop on <xmp class="d-inline"><button></xmp></button>
|
||||
<div class="tw-my-2">
|
||||
<button class="btn btn-pop">.btn-pop on <xmp class="tw-inline"><button></xmp></button>
|
||||
<button class="btn btn-pop" disabled>disabled .btn-pop on <xmp class="tw-inline"><button></xmp></button>
|
||||
</div>
|
||||
<div class="my-2">
|
||||
<a class="btn btn-pop" href="">.btn-pop on <xmp class="d-inline"><a></xmp></a>
|
||||
<a class="btn btn-pop" href="" disabled>disabled .btn-pop on <xmp class="d-inline"><a></xmp></a>
|
||||
<div class="tw-my-2">
|
||||
<a class="btn btn-pop" href="">.btn-pop on <xmp class="tw-inline"><a></xmp></a>
|
||||
<a class="btn btn-pop" href="" disabled>disabled .btn-pop on <xmp class="tw-inline"><a></xmp></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="h1-heading mt-5">Share Button Group</h2>
|
||||
<h2 class="h1-heading tw-mt-12">Share Button Group</h2>
|
||||
<hr class="hr-emphasis">
|
||||
|
||||
<h3 class="h2-heading mt-5">Full version</h3>
|
||||
<h3 class="h2-heading tw-mt-12">Full version</h3>
|
||||
<hr>
|
||||
|
||||
<div class="mb-5">
|
||||
<div class="tw-mb-12">
|
||||
<div class="share-button-group-wrapper"></div>
|
||||
</div>
|
||||
|
||||
<h3 class="h2-heading mt-5">Full Version & Stacked</h3>
|
||||
<h3 class="h2-heading tw-mt-12">Full Version & Stacked</h3>
|
||||
<hr>
|
||||
|
||||
<div class="mb-5">
|
||||
<div class="tw-mb-12">
|
||||
<div class="share-button-group-wrapper" data-layout="stacked"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3 class="h2-heading mt-5">Mini Version</h3>
|
||||
<h3 class="h2-heading tw-mt-12">Mini Version</h3>
|
||||
<hr>
|
||||
|
||||
<div class="mb-5">
|
||||
<div class="tw-mb-12">
|
||||
<div class="share-button-group-wrapper" data-version="mini"></div>
|
||||
</div>
|
||||
|
||||
<h3 class="h2-heading mt-5">Mini Version & Stacked</h3>
|
||||
<h3 class="h2-heading tw-mt-12">Mini Version & Stacked</h3>
|
||||
<hr>
|
||||
|
||||
<div class="mb-5">
|
||||
<div class="tw-mb-12">
|
||||
<div class="share-button-group-wrapper" data-version="mini" data-layout="stacked"></div>
|
||||
</div>
|
||||
|
||||
<h2 class="h1-heading mt-5">Dropdown Field</h2>
|
||||
<h2 class="h1-heading tw-mt-12">Dropdown Field</h2>
|
||||
<hr class="hr-emphasis">
|
||||
|
||||
<h3 class="h2-heading mt-5">Default</h3>
|
||||
<h3 class="h2-heading tw-mt-12">Default</h3>
|
||||
<hr>
|
||||
|
||||
<div class="mb-4">
|
||||
<div class="tw-mb-12">
|
||||
<h4>Regular</h4>
|
||||
<select class="form-control">
|
||||
<option value="">Option 1</option>
|
||||
|
|
@ -540,7 +540,7 @@
|
|||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mb-5">
|
||||
<div class="tw-mb-12">
|
||||
<h4>Large</h4>
|
||||
<select class="form-control form-control-lg">
|
||||
<option value="">Option 1</option>
|
||||
|
|
@ -550,11 +550,11 @@
|
|||
</select>
|
||||
</div>
|
||||
|
||||
<h3 class="h2-heading mt-5">Dark Theme</h3>
|
||||
<h3 class="h2-heading tw-mt-12">Dark Theme</h3>
|
||||
<hr>
|
||||
|
||||
<div class="p-3 dark-theme bg-black">
|
||||
<div class="mb-4">
|
||||
<div class="tw-p-4 dark-theme tw-bg-black">
|
||||
<div class="tw-mb-12">
|
||||
<h4>Regular</h4>
|
||||
<select class="form-control">
|
||||
<option value="">Option 1</option>
|
||||
|
|
|
|||
|
|
@ -417,6 +417,20 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"@fullhuman/postcss-purgecss": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-4.0.3.tgz",
|
||||
"integrity": "sha512-/EnQ9UDWGGqHkn1UKAwSgh+gJHPKmD+Z+5dQ4gWT4qq2NUyez3zqAfZNwFH3eSgmgO+wjTXfhlLchx2M9/K+7Q==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"purgecss": "^4.0.3"
|
||||
}
|
||||
},
|
||||
"@glidejs/glide": {
|
||||
"version": "3.4.1",
|
||||
"resolved": "https://registry.npmjs.org/@glidejs/glide/-/glide-3.4.1.tgz",
|
||||
"integrity": "sha512-C34AEcK1HjSyxilRToUL54I6KAoodojUbeRlXoruobZuG0eGm8xfDL+3kgkWj7AJK4EZtunSOYfoqMp70eDtwg=="
|
||||
},
|
||||
"@hapi/hoek": {
|
||||
"version": "9.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.1.1.tgz",
|
||||
|
|
@ -613,6 +627,23 @@
|
|||
"integrity": "sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==",
|
||||
"dev": true
|
||||
},
|
||||
"acorn-node": {
|
||||
"version": "1.8.2",
|
||||
"resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
|
||||
"integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"acorn": "^7.0.0",
|
||||
"acorn-walk": "^7.0.0",
|
||||
"xtend": "^4.0.2"
|
||||
}
|
||||
},
|
||||
"acorn-walk": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
|
||||
"integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
|
||||
"dev": true
|
||||
},
|
||||
"ajv": {
|
||||
"version": "6.12.6",
|
||||
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
|
||||
|
|
@ -682,6 +713,12 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"arg": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/arg/-/arg-5.0.0.tgz",
|
||||
"integrity": "sha512-4P8Zm2H+BRS+c/xX1LrHw0qKpEhdlZjLCgWy+d78T9vqa2Z2SiD2wMrYuWIAFy5IZUD7nnNXroRttz+0RzlrzQ==",
|
||||
"dev": true
|
||||
},
|
||||
"argparse": {
|
||||
"version": "1.0.10",
|
||||
"resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
|
||||
|
|
@ -1255,6 +1292,12 @@
|
|||
"integrity": "sha1-+PeLdniYiO858gXNY39o5wISKyw=",
|
||||
"dev": true
|
||||
},
|
||||
"bytes": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
|
||||
"integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==",
|
||||
"dev": true
|
||||
},
|
||||
"cacheable-request": {
|
||||
"version": "2.1.4",
|
||||
"resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-2.1.4.tgz",
|
||||
|
|
@ -1320,6 +1363,12 @@
|
|||
"integrity": "sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8=",
|
||||
"dev": true
|
||||
},
|
||||
"camelcase-css": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
|
||||
"integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
|
||||
"dev": true
|
||||
},
|
||||
"camelcase-keys": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
|
||||
|
|
@ -1793,6 +1842,12 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"css-unit-converter": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.2.tgz",
|
||||
"integrity": "sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==",
|
||||
"dev": true
|
||||
},
|
||||
"css-what": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/css-what/-/css-what-4.0.0.tgz",
|
||||
|
|
@ -2152,11 +2207,34 @@
|
|||
"object-keys": "^1.0.12"
|
||||
}
|
||||
},
|
||||
"defined": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
|
||||
"integrity": "sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=",
|
||||
"dev": true
|
||||
},
|
||||
"dependency-graph": {
|
||||
"version": "0.9.0",
|
||||
"resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-0.9.0.tgz",
|
||||
"integrity": "sha512-9YLIBURXj4DJMFALxXw9K3Y3rwb5Fk0X5/8ipCzaN84+gKxoHK43tVKRNakCQbiEx07E8Uwhuq21BpUagFhZ8w=="
|
||||
},
|
||||
"detective": {
|
||||
"version": "5.2.0",
|
||||
"resolved": "https://registry.npmjs.org/detective/-/detective-5.2.0.tgz",
|
||||
"integrity": "sha512-6SsIx+nUUbuK0EthKjv0zrdnajCCXVYGmbYYiYjFVpzcjwEs/JMDZ8tPRG29J/HhN56t3GJp2cGSWDRjjot8Pg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"acorn-node": "^1.6.1",
|
||||
"defined": "^1.0.0",
|
||||
"minimist": "^1.1.1"
|
||||
}
|
||||
},
|
||||
"didyoumean": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
|
||||
"integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
|
||||
"dev": true
|
||||
},
|
||||
"dir-glob": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
|
||||
|
|
@ -2172,6 +2250,12 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"dlv": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
|
||||
"integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
|
||||
"dev": true
|
||||
},
|
||||
"doctrine": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
|
||||
|
|
@ -3907,6 +3991,12 @@
|
|||
"type-check": "~0.4.0"
|
||||
}
|
||||
},
|
||||
"lilconfig": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.3.tgz",
|
||||
"integrity": "sha512-EHKqr/+ZvdKCifpNrJCKxBTgk5XupZA3y/aCPY9mxfgBzmgh93Mt/WqjjQ38oMxXuvDokaKiM3lAgvSH2sjtHg==",
|
||||
"dev": true
|
||||
},
|
||||
"lines-and-columns": {
|
||||
"version": "1.1.6",
|
||||
"resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz",
|
||||
|
|
@ -3991,6 +4081,18 @@
|
|||
"integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=",
|
||||
"dev": true
|
||||
},
|
||||
"lodash.toarray": {
|
||||
"version": "4.4.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.toarray/-/lodash.toarray-4.4.0.tgz",
|
||||
"integrity": "sha1-JMS/zWsvuji/0FlNsRedjptlZWE=",
|
||||
"dev": true
|
||||
},
|
||||
"lodash.topath": {
|
||||
"version": "4.5.2",
|
||||
"resolved": "https://registry.npmjs.org/lodash.topath/-/lodash.topath-4.5.2.tgz",
|
||||
"integrity": "sha1-NhY1Hzu6YZlKCTGYlmC9AyVP0Ak=",
|
||||
"dev": true
|
||||
},
|
||||
"lodash.uniq": {
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
|
||||
|
|
@ -4276,6 +4378,12 @@
|
|||
"minimist": "^1.2.5"
|
||||
}
|
||||
},
|
||||
"modern-normalize": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/modern-normalize/-/modern-normalize-1.1.0.tgz",
|
||||
"integrity": "sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA==",
|
||||
"dev": true
|
||||
},
|
||||
"moment": {
|
||||
"version": "2.29.1",
|
||||
"resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
|
||||
|
|
@ -4303,6 +4411,15 @@
|
|||
"resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
|
||||
"integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ=="
|
||||
},
|
||||
"node-emoji": {
|
||||
"version": "1.10.0",
|
||||
"resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.10.0.tgz",
|
||||
"integrity": "sha512-Yt3384If5H6BYGVHiHwTL+99OzJKHhgp82S8/dktEK73T26BazdgZ4JZh92xSVtGNJvz9UbXdNAc5hcrXV42vw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"lodash.toarray": "^4.4.0"
|
||||
}
|
||||
},
|
||||
"node-releases": {
|
||||
"version": "1.1.69",
|
||||
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.69.tgz",
|
||||
|
|
@ -4488,6 +4605,12 @@
|
|||
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
|
||||
"integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
|
||||
},
|
||||
"object-hash": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.2.0.tgz",
|
||||
"integrity": "sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==",
|
||||
"dev": true
|
||||
},
|
||||
"object-inspect": {
|
||||
"version": "1.7.0",
|
||||
"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.7.0.tgz",
|
||||
|
|
@ -5442,6 +5565,27 @@
|
|||
"htmlparser2": "^3.10.0"
|
||||
}
|
||||
},
|
||||
"postcss-import": {
|
||||
"version": "14.0.2",
|
||||
"resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.0.2.tgz",
|
||||
"integrity": "sha512-BJ2pVK4KhUyMcqjuKs9RijV5tatNzNa73e/32aBVE/ejYPe37iH+6vAu9WvqUkB5OAYgLHzbSvzHnorybJCm9g==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"postcss-value-parser": "^4.0.0",
|
||||
"read-cache": "^1.0.0",
|
||||
"resolve": "^1.1.7"
|
||||
}
|
||||
},
|
||||
"postcss-js": {
|
||||
"version": "3.0.3",
|
||||
"resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-3.0.3.tgz",
|
||||
"integrity": "sha512-gWnoWQXKFw65Hk/mi2+WTQTHdPD5UJdDXZmX073EY/B3BWnYjO4F4t0VneTCnCGQ5E5GsCdMkzPaTXwl3r5dJw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"camelcase-css": "^2.0.1",
|
||||
"postcss": "^8.1.6"
|
||||
}
|
||||
},
|
||||
"postcss-less": {
|
||||
"version": "3.1.4",
|
||||
"resolved": "https://registry.npmjs.org/postcss-less/-/postcss-less-3.1.4.tgz",
|
||||
|
|
@ -5796,6 +5940,27 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"postcss-nested": {
|
||||
"version": "5.0.5",
|
||||
"resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.5.tgz",
|
||||
"integrity": "sha512-GSRXYz5bccobpTzLQZXOnSOfKl6TwVr5CyAQJUPub4nuRJSOECK5AqurxVgmtxP48p0Kc/ndY/YyS1yqldX0Ew==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"postcss-selector-parser": "^6.0.4"
|
||||
},
|
||||
"dependencies": {
|
||||
"postcss-selector-parser": {
|
||||
"version": "6.0.6",
|
||||
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.6.tgz",
|
||||
"integrity": "sha512-9LXrvaaX3+mcv5xkg5kFwqSzSH1JIObIx51PrndZwlmznwXRfxMddDvo9gve3gVR8ZTKgoFDdWkbRFmEhT4PMg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"cssesc": "^3.0.0",
|
||||
"util-deprecate": "^1.0.2"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"postcss-normalize-charset": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-4.0.1.tgz",
|
||||
|
|
@ -6641,6 +6806,26 @@
|
|||
"integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
|
||||
"dev": true
|
||||
},
|
||||
"purgecss": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/purgecss/-/purgecss-4.0.3.tgz",
|
||||
"integrity": "sha512-PYOIn5ibRIP34PBU9zohUcCI09c7drPJJtTDAc0Q6QlRz2/CHQ8ywGLdE7ZhxU2VTqB7p5wkvj5Qcm05Rz3Jmw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"commander": "^6.0.0",
|
||||
"glob": "^7.0.0",
|
||||
"postcss": "^8.2.1",
|
||||
"postcss-selector-parser": "^6.0.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"commander": {
|
||||
"version": "6.2.1",
|
||||
"resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
|
||||
"integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"q": {
|
||||
"version": "1.5.1",
|
||||
"resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
|
||||
|
|
@ -6780,6 +6965,15 @@
|
|||
"util-deprecate": "~1.0.1"
|
||||
}
|
||||
},
|
||||
"readdirp": {
|
||||
"version": "3.6.0",
|
||||
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
|
||||
"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"picomatch": "^2.2.1"
|
||||
}
|
||||
},
|
||||
"rechoir": {
|
||||
"version": "0.6.2",
|
||||
"resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz",
|
||||
|
|
@ -6798,6 +6992,24 @@
|
|||
"strip-indent": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"reduce-css-calc": {
|
||||
"version": "2.1.8",
|
||||
"resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz",
|
||||
"integrity": "sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"css-unit-converter": "^1.1.1",
|
||||
"postcss-value-parser": "^3.3.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"postcss-value-parser": {
|
||||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
|
||||
"integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"regenerator-runtime": {
|
||||
"version": "0.13.5",
|
||||
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz",
|
||||
|
|
@ -8303,6 +8515,339 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"tailwindcss": {
|
||||
"version": "2.2.4",
|
||||
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-2.2.4.tgz",
|
||||
"integrity": "sha512-OdBCPgazNNsknSP+JfrPzkay9aqKjhKtFhbhgxHgvEFdHy/GuRPo2SCJ4w1SFTN8H6FPI4m6qD/Jj20NWY1GkA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@fullhuman/postcss-purgecss": "^4.0.3",
|
||||
"arg": "^5.0.0",
|
||||
"bytes": "^3.0.0",
|
||||
"chalk": "^4.1.1",
|
||||
"chokidar": "^3.5.2",
|
||||
"color": "^3.1.3",
|
||||
"cosmiconfig": "^7.0.0",
|
||||
"detective": "^5.2.0",
|
||||
"didyoumean": "^1.2.1",
|
||||
"dlv": "^1.1.3",
|
||||
"fast-glob": "^3.2.5",
|
||||
"fs-extra": "^10.0.0",
|
||||
"glob-parent": "^6.0.0",
|
||||
"html-tags": "^3.1.0",
|
||||
"is-glob": "^4.0.1",
|
||||
"lodash": "^4.17.21",
|
||||
"lodash.topath": "^4.5.2",
|
||||
"modern-normalize": "^1.1.0",
|
||||
"node-emoji": "^1.8.1",
|
||||
"normalize-path": "^3.0.0",
|
||||
"object-hash": "^2.2.0",
|
||||
"postcss-js": "^3.0.3",
|
||||
"postcss-load-config": "^3.1.0",
|
||||
"postcss-nested": "5.0.5",
|
||||
"postcss-selector-parser": "^6.0.6",
|
||||
"postcss-value-parser": "^4.1.0",
|
||||
"pretty-hrtime": "^1.0.3",
|
||||
"quick-lru": "^5.1.1",
|
||||
"reduce-css-calc": "^2.1.8",
|
||||
"resolve": "^1.20.0",
|
||||
"tmp": "^0.2.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"ansi-styles": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
|
||||
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"color-convert": "^2.0.1"
|
||||
}
|
||||
},
|
||||
"anymatch": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
|
||||
"integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"normalize-path": "^3.0.0",
|
||||
"picomatch": "^2.0.4"
|
||||
}
|
||||
},
|
||||
"chalk": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
|
||||
"integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ansi-styles": "^4.1.0",
|
||||
"supports-color": "^7.1.0"
|
||||
}
|
||||
},
|
||||
"chokidar": {
|
||||
"version": "3.5.2",
|
||||
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.2.tgz",
|
||||
"integrity": "sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"anymatch": "~3.1.2",
|
||||
"braces": "~3.0.2",
|
||||
"fsevents": "~2.3.2",
|
||||
"glob-parent": "~5.1.2",
|
||||
"is-binary-path": "~2.1.0",
|
||||
"is-glob": "~4.0.1",
|
||||
"normalize-path": "~3.0.0",
|
||||
"readdirp": "~3.6.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"glob-parent": {
|
||||
"version": "5.1.2",
|
||||
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
|
||||
"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"is-glob": "^4.0.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"color": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/color/-/color-3.1.3.tgz",
|
||||
"integrity": "sha512-xgXAcTHa2HeFCGLE9Xs/R82hujGtu9Jd9x4NW3T34+OMs7VoPsjwzRczKHvTAHeJwWFwX5j15+MgAppE8ztObQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"color-convert": "^1.9.1",
|
||||
"color-string": "^1.5.4"
|
||||
},
|
||||
"dependencies": {
|
||||
"color-convert": {
|
||||
"version": "1.9.3",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
|
||||
"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"color-name": "1.1.3"
|
||||
}
|
||||
},
|
||||
"color-name": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
|
||||
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"color-convert": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
|
||||
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"color-name": "~1.1.4"
|
||||
}
|
||||
},
|
||||
"color-name": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
|
||||
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
|
||||
"dev": true
|
||||
},
|
||||
"color-string": {
|
||||
"version": "1.5.5",
|
||||
"resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.5.tgz",
|
||||
"integrity": "sha512-jgIoum0OfQfq9Whcfc2z/VhCNcmQjWbey6qBX0vqt7YICflUmBCh9E9CiQD5GSJ+Uehixm3NUwHVhqUAWRivZg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"color-name": "^1.0.0",
|
||||
"simple-swizzle": "^0.2.2"
|
||||
}
|
||||
},
|
||||
"cosmiconfig": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.0.tgz",
|
||||
"integrity": "sha512-pondGvTuVYDk++upghXJabWzL6Kxu6f26ljFw64Swq9v6sQPUL3EUlVDV56diOjpCayKihL6hVe8exIACU4XcA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/parse-json": "^4.0.0",
|
||||
"import-fresh": "^3.2.1",
|
||||
"parse-json": "^5.0.0",
|
||||
"path-type": "^4.0.0",
|
||||
"yaml": "^1.10.0"
|
||||
}
|
||||
},
|
||||
"fast-glob": {
|
||||
"version": "3.2.7",
|
||||
"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.7.tgz",
|
||||
"integrity": "sha512-rYGMRwip6lUMvYD3BTScMwT1HtAs2d71SMv66Vrxs0IekGZEjhM0pcMfjQPnknBt2zeCwQMEupiN02ZP4DiT1Q==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@nodelib/fs.stat": "^2.0.2",
|
||||
"@nodelib/fs.walk": "^1.2.3",
|
||||
"glob-parent": "^5.1.2",
|
||||
"merge2": "^1.3.0",
|
||||
"micromatch": "^4.0.4"
|
||||
},
|
||||
"dependencies": {
|
||||
"glob-parent": {
|
||||
"version": "5.1.2",
|
||||
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
|
||||
"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"is-glob": "^4.0.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"fs-extra": {
|
||||
"version": "10.0.0",
|
||||
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.0.0.tgz",
|
||||
"integrity": "sha512-C5owb14u9eJwizKGdchcDUQeFtlSHHthBk8pbX9Vc1PFZrLombudjDnNns88aYslCyF6IY5SUw3Roz6xShcEIQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"graceful-fs": "^4.2.0",
|
||||
"jsonfile": "^6.0.1",
|
||||
"universalify": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"glob-parent": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.0.tgz",
|
||||
"integrity": "sha512-Hdd4287VEJcZXUwv1l8a+vXC1GjOQqXe+VS30w/ypihpcnu9M1n3xeYeJu5CBpeEQj2nAab2xxz28GuA3vp4Ww==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"is-glob": "^4.0.1"
|
||||
}
|
||||
},
|
||||
"has-flag": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
|
||||
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
|
||||
"dev": true
|
||||
},
|
||||
"import-fresh": {
|
||||
"version": "3.3.0",
|
||||
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
|
||||
"integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"parent-module": "^1.0.0",
|
||||
"resolve-from": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"is-core-module": {
|
||||
"version": "2.4.0",
|
||||
"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.4.0.tgz",
|
||||
"integrity": "sha512-6A2fkfq1rfeQZjxrZJGerpLCTHRNEBiSgnu0+obeJpEPZRUooHgsizvzv0ZjJwOz3iWIHdJtVWJ/tmPr3D21/A==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"has": "^1.0.3"
|
||||
}
|
||||
},
|
||||
"micromatch": {
|
||||
"version": "4.0.4",
|
||||
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
|
||||
"integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"braces": "^3.0.1",
|
||||
"picomatch": "^2.2.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"picomatch": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
|
||||
"integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"parse-json": {
|
||||
"version": "5.2.0",
|
||||
"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
|
||||
"integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/code-frame": "^7.0.0",
|
||||
"error-ex": "^1.3.1",
|
||||
"json-parse-even-better-errors": "^2.3.0",
|
||||
"lines-and-columns": "^1.1.6"
|
||||
}
|
||||
},
|
||||
"path-type": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
|
||||
"integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
|
||||
"dev": true
|
||||
},
|
||||
"postcss-load-config": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.0.tgz",
|
||||
"integrity": "sha512-ipM8Ds01ZUophjDTQYSVP70slFSYg3T0/zyfII5vzhN6V57YSxMgG5syXuwi5VtS8wSf3iL30v0uBdoIVx4Q0g==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"import-cwd": "^3.0.0",
|
||||
"lilconfig": "^2.0.3",
|
||||
"yaml": "^1.10.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"yaml": {
|
||||
"version": "1.10.2",
|
||||
"resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
|
||||
"integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"postcss-selector-parser": {
|
||||
"version": "6.0.6",
|
||||
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.6.tgz",
|
||||
"integrity": "sha512-9LXrvaaX3+mcv5xkg5kFwqSzSH1JIObIx51PrndZwlmznwXRfxMddDvo9gve3gVR8ZTKgoFDdWkbRFmEhT4PMg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"cssesc": "^3.0.0",
|
||||
"util-deprecate": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"quick-lru": {
|
||||
"version": "5.1.1",
|
||||
"resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
|
||||
"integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
|
||||
"dev": true
|
||||
},
|
||||
"resolve": {
|
||||
"version": "1.20.0",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
|
||||
"integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"is-core-module": "^2.2.0",
|
||||
"path-parse": "^1.0.6"
|
||||
}
|
||||
},
|
||||
"resolve-from": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
|
||||
"integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
|
||||
"dev": true
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
|
||||
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"has-flag": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"universalify": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
|
||||
"integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"tar-stream": {
|
||||
"version": "1.6.2",
|
||||
"resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-1.6.2.tgz",
|
||||
|
|
@ -8364,6 +8909,15 @@
|
|||
"resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
|
||||
"integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
|
||||
},
|
||||
"tmp": {
|
||||
"version": "0.2.1",
|
||||
"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
|
||||
"integrity": "sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"rimraf": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"to-buffer": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/to-buffer/-/to-buffer-1.1.1.tgz",
|
||||
|
|
|
|||
10
package.json
10
package.json
|
|
@ -46,6 +46,7 @@
|
|||
"server": "python network-api/manage.py runserver 0.0.0.0:8000",
|
||||
"server:silent": "python network-api/manage.py runserver 0.0.0.0:8000 >> server.log 2>&1",
|
||||
"start": "docker-compose up",
|
||||
"sync": "browser-sync start --proxy \"localhost:8000\" --reload-debounce 2000 --files \"./network-api/networkapi/**/*.html\" \"./network-api/networkapi/frontend/_css/*.css\" ",
|
||||
"test:procfile": "node test/test-procfile.js",
|
||||
"test:eslint:js:pre": "prettier \"cypress/integration/*.js\" \"source/js/**/*.js\" \"source/js/**/*.jsx\" \"network-api/networkapi/wagtailcustomization/**/*.js\" ./*.js --write",
|
||||
"test:eslint:js": "eslint --config ./.eslintrc.json \"cypress/integration/*.js\" \"source/js/**/*.js\" \"source/js/**/*.jsx\" \"network-api/networkapi/wagtailcustomization/**/*.js\" ./*.js",
|
||||
|
|
@ -58,7 +59,9 @@
|
|||
"test": "run-s test:** build",
|
||||
"watch": "wait-on http://backend:8000/cms && run-s build:clean && run-p build:js:dev build:common watch:**",
|
||||
"watch:images": "chokidar \"source/images/**/*\" -c \"npm run build:images\"",
|
||||
"watch:sass": "chokidar \"source/**/*.scss\" -c \"npm run build:sass\""
|
||||
"watch:sass": "chokidar \"source/**/*.scss\" -c \"npm run build:sass\"",
|
||||
"watch:html": "chokidar \"network-api/networkapi/**/*.html\" -c \"npm run build:sass\"",
|
||||
"watch:tailwind": "chokidar \"tailwind.config.js\" -c \"npm run build:sass\""
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
|
|
@ -67,6 +70,7 @@
|
|||
"author": "Mozilla",
|
||||
"license": "MPL-2.0",
|
||||
"dependencies": {
|
||||
"@glidejs/glide": "^3.4.1",
|
||||
"@sentry/browser": "^6.2.1",
|
||||
"autoprefixer": "^10.2.5",
|
||||
"axe-core": "^4.1.4",
|
||||
|
|
@ -84,6 +88,7 @@
|
|||
"npm-run-all": "^4.1.3",
|
||||
"postcss": "^8.2.6",
|
||||
"postcss-cli": "^8.3.1",
|
||||
"postcss-import": "^14.0.2",
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "^17.0.1",
|
||||
"react-axe": "^3.5.4",
|
||||
|
|
@ -92,6 +97,7 @@
|
|||
"sass": "^1.32.8",
|
||||
"shx": "^0.3.3",
|
||||
"swiper": "^6.7.5",
|
||||
"tailwindcss": "^2.2.4",
|
||||
"uuid": "^8.3.2",
|
||||
"whatwg-fetch": "^3.6.2"
|
||||
},
|
||||
|
|
@ -111,4 +117,4 @@
|
|||
"svgo": "^2.2.2",
|
||||
"wait-on": "^5.2.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,8 @@
|
|||
let commonPlugins = [require("autoprefixer")];
|
||||
let commonPlugins = [
|
||||
require("postcss-import"),
|
||||
require("tailwindcss"),
|
||||
require("autoprefixer"),
|
||||
];
|
||||
|
||||
let prodPlugins = [
|
||||
require("cssnano")({
|
||||
|
|
|
|||
|
|
@ -30,10 +30,7 @@ hr {
|
|||
}
|
||||
|
||||
.hr-emphasis {
|
||||
height: 4px;
|
||||
background: $black;
|
||||
border: 0;
|
||||
margin: 30px 0;
|
||||
@apply tw-bg-black tw-border-0 tw-h-1 tw-mx-0 tw-my-8;
|
||||
}
|
||||
|
||||
#hero {
|
||||
|
|
@ -122,37 +119,3 @@ hr {
|
|||
border-bottom: 1px solid $black;
|
||||
border-top: 1px solid $black;
|
||||
}
|
||||
|
||||
.donate-banner {
|
||||
background: $blue;
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
background: $black;
|
||||
|
||||
&.dark-theme {
|
||||
// special override to make sure footer list links appear white (vs default dark theme anchor color $light-blue)
|
||||
.link-list a {
|
||||
@include dark-theme-inline-anchor($white);
|
||||
}
|
||||
}
|
||||
|
||||
.link-list {
|
||||
li {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $bp-lg) {
|
||||
column-count: 2;
|
||||
li {
|
||||
break-inside: avoid;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,17 @@
|
|||
// tailwindCSS
|
||||
|
||||
// @import "../../node_modules/tailwindcss/base";
|
||||
// @import "../../node_modules/tailwindcss/components";
|
||||
// @import "../../node_modules/tailwindcss/utilities";
|
||||
|
||||
// @import "tailwindcss/base";
|
||||
// @import "tailwindcss/components";
|
||||
// @import "tailwindcss/utilities";
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
// mofo-bootstrap
|
||||
|
||||
@import "./mofo-bootstrap/mofo-bootstrap";
|
||||
|
|
|
|||
|
|
@ -22,77 +22,264 @@ a {
|
|||
|
||||
h1,
|
||||
.h1-heading {
|
||||
@include heading("Zilla Slab", 400, 0, $black, $white);
|
||||
@include set-text-size(36px, 40px, 48px, 56px);
|
||||
@apply tw-font-normal tw-mb-4 tw-text-black tw-tracking-normal tw-font-zilla tw-text-[36px] tw-leading-[1.2] medium:tw-text-[48px];
|
||||
|
||||
@at-root .dark-theme & {
|
||||
@apply tw-text-white;
|
||||
|
||||
a:hover,
|
||||
a:focus,
|
||||
a:active {
|
||||
@apply tw-text-blue-light tw-underline;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
@apply tw-text-inherit tw-font-inherit;
|
||||
|
||||
a:hover,
|
||||
a:focus,
|
||||
a:active {
|
||||
@apply tw-text-inherit tw-underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h2,
|
||||
.h2-heading {
|
||||
@include heading("Zilla Slab", 300, 0, $black, $white);
|
||||
@include set-text-size(28px, 32px, 40px, 48px);
|
||||
@apply tw-font-light tw-mb-4 tw-text-black tw-tracking-normal tw-font-zilla tw-text-[28px] tw-leading-[1.2] medium:tw-text-[40px];
|
||||
|
||||
@at-root .dark-theme & {
|
||||
@apply tw-text-white;
|
||||
|
||||
a:hover,
|
||||
a:focus,
|
||||
a:active {
|
||||
@apply tw-text-blue-light tw-underline;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
@apply tw-text-inherit tw-font-inherit;
|
||||
|
||||
a:hover,
|
||||
a:focus,
|
||||
a:active {
|
||||
@apply tw-text-inherit tw-underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h3,
|
||||
.h3-heading {
|
||||
@include heading("Zilla Slab", 400, 0, $black, $white);
|
||||
@include set-text-size(24px, 28px, 28px, 36px);
|
||||
@apply tw-font-normal tw-mb-4 tw-text-black tw-tracking-normal tw-font-zilla tw-text-[24px] tw-leading-[1.2] medium:tw-text-[28px];
|
||||
|
||||
@at-root .dark-theme & {
|
||||
@apply tw-text-white;
|
||||
|
||||
a:hover,
|
||||
a:focus,
|
||||
a:active {
|
||||
@apply tw-text-blue-light tw-underline;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
@apply tw-text-inherit tw-font-inherit;
|
||||
|
||||
a:hover,
|
||||
a:focus,
|
||||
a:active {
|
||||
@apply tw-text-inherit tw-underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h4,
|
||||
.h4-heading {
|
||||
@include heading("Zilla Slab", 400, 0, $black, $white);
|
||||
@include set-text-size(22px, 28px, 24px, 30px);
|
||||
@apply tw-font-normal tw-mb-4 tw-text-black tw-tracking-normal tw-font-zilla tw-text-[22px] tw-leading-[1.3] medium:tw-text-[24px];
|
||||
|
||||
@at-root .dark-theme & {
|
||||
@apply tw-text-white;
|
||||
|
||||
a:hover,
|
||||
a:focus,
|
||||
a:active {
|
||||
@apply tw-text-blue-light tw-underline;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
@apply tw-text-inherit tw-font-inherit;
|
||||
|
||||
a:hover,
|
||||
a:focus,
|
||||
a:active {
|
||||
@apply tw-text-inherit tw-underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h5,
|
||||
.h5-heading {
|
||||
@include heading("Zilla Slab", 600, 0, $black, $white);
|
||||
@include set-text-size(20px, 24px, 22px, 28px);
|
||||
@apply tw-font-semibold tw-mb-4 tw-text-black tw-tracking-normal tw-font-zilla tw-text-[20px] tw-leading-[1.3] medium:tw-text-[22px];
|
||||
|
||||
@at-root .dark-theme & {
|
||||
@apply tw-text-white;
|
||||
|
||||
a:hover,
|
||||
a:focus,
|
||||
a:active {
|
||||
@apply tw-text-blue-light tw-underline;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
@apply tw-text-inherit tw-font-inherit;
|
||||
|
||||
a:hover,
|
||||
a:focus,
|
||||
a:active {
|
||||
@apply tw-text-inherit tw-underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h6,
|
||||
.h6-heading {
|
||||
@include heading($font-family-sans-serif, 400, 0.5px, $gray-60, $gray-40);
|
||||
@include set-text-size(12px, 16px);
|
||||
@apply tw-uppercase tw-font-normal tw-mb-4 tw-text-gray-60 tw-tracking-wide tw-font-sans tw-text-[12px] tw-leading-[1.3];
|
||||
|
||||
text-transform: uppercase;
|
||||
@at-root .dark-theme & {
|
||||
@apply tw-text-gray-40;
|
||||
|
||||
a:hover,
|
||||
a:focus,
|
||||
a:active {
|
||||
@apply tw-text-blue-light tw-underline;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
@apply tw-text-inherit tw-font-inherit;
|
||||
|
||||
a:hover,
|
||||
a:focus,
|
||||
a:active {
|
||||
@apply tw-text-inherit tw-underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.quote {
|
||||
@include text-base-style("Zilla Slab", 300, $black, $white);
|
||||
@include set-text-size(24px, 32px, 30px, 40px);
|
||||
@apply tw-italic tw-font-light tw-text-black tw-font-zilla tw-text-[24px] tw-leading-[1.3] medium:tw-text-[30px];
|
||||
|
||||
font-style: italic;
|
||||
@at-root .dark-theme & {
|
||||
@apply tw-text-white;
|
||||
|
||||
a {
|
||||
@apply tw-text-blue-light;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus,
|
||||
a:active {
|
||||
@apply tw-text-blue-light tw-underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.type-accent {
|
||||
@include text-base-style("Zilla Slab", 400, $gray-20, $gray-20);
|
||||
@include set-text-size(56px, 64px, 72px, 88px);
|
||||
@apply tw-font-normal tw-text-gray-20 tw-font-zilla tw-text-[56px] tw-leading-[1.2] medium:tw-text-[72px];
|
||||
|
||||
@at-root .dark-theme & {
|
||||
@apply tw-text-gray-20;
|
||||
|
||||
a {
|
||||
@apply tw-text-blue-light;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus,
|
||||
a:active {
|
||||
@apply tw-text-blue-light tw-underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.body-large,
|
||||
.body-large p {
|
||||
@include text-base-style($font-family-sans-serif, 300, $black, $white);
|
||||
@include set-text-size(18px, 27px, 20px, 30px);
|
||||
@apply tw-font-light tw-text-black tw-font-sans tw-text-[18px] tw-leading-[1.3] medium:tw-text-[20px];
|
||||
|
||||
@at-root .dark-theme & {
|
||||
@apply tw-text-white;
|
||||
|
||||
a {
|
||||
@apply tw-text-blue-light;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus,
|
||||
a:active {
|
||||
@apply tw-text-blue-light tw-underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul,
|
||||
ol,
|
||||
p,
|
||||
.body {
|
||||
@include body-text-style();
|
||||
@apply tw-font-normal tw-text-black tw-font-sans tw-text-[18px] tw-leading-[1.5];
|
||||
|
||||
@at-root .dark-theme & {
|
||||
@apply tw-text-white;
|
||||
|
||||
a {
|
||||
@apply tw-text-blue-light;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus,
|
||||
a:active {
|
||||
@apply tw-text-blue-light tw-underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.body-small {
|
||||
@include text-base-style($font-family-sans-serif, 400, $gray-60, $gray-40);
|
||||
@include set-text-size(12px, 16px);
|
||||
@apply tw-font-normal tw-text-gray-60 tw-font-sans tw-text-[12px] tw-leading-[1.3];
|
||||
|
||||
@at-root .dark-theme & {
|
||||
@apply tw-text-gray-40;
|
||||
|
||||
a {
|
||||
@apply tw-text-blue-light;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus,
|
||||
a:active {
|
||||
@apply tw-text-blue-light tw-underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cta-link {
|
||||
@include text-base-style(null, 700, null, $light-blue);
|
||||
@include set-text-size(18px, 27px);
|
||||
@apply tw-font-bold tw-inline-block tw-text-[18px] tw-leading-[1.5];
|
||||
|
||||
display: inline-block;
|
||||
@at-root .dark-theme & {
|
||||
@apply tw-text-blue-light;
|
||||
|
||||
a {
|
||||
@apply tw-text-blue-light;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus,
|
||||
a:active {
|
||||
@apply tw-underline;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: " →";
|
||||
|
|
|
|||
|
|
@ -0,0 +1,158 @@
|
|||
const colors = require("tailwindcss/colors");
|
||||
const plugin = require("tailwindcss/plugin");
|
||||
|
||||
module.exports = {
|
||||
purge: ["./source/js/**/*.{js,jsx}", "./network-api/networkapi/**/*.html"],
|
||||
mode: "jit",
|
||||
darkMode: "class", // use tw-dark
|
||||
important: true,
|
||||
corePlugins: {
|
||||
// overriding TW default container
|
||||
container: false,
|
||||
},
|
||||
plugins: [
|
||||
plugin(function ({ addUtilities }) {
|
||||
// Adding Column Count to Tailwind CSS
|
||||
const newUtilities = {
|
||||
".col-count-1": {
|
||||
columnCount: 1,
|
||||
},
|
||||
".col-count-2": {
|
||||
columnCount: 2,
|
||||
},
|
||||
".col-count-3": {
|
||||
columnCount: 3,
|
||||
},
|
||||
};
|
||||
addUtilities(newUtilities);
|
||||
}),
|
||||
plugin(function ({ addComponents }) {
|
||||
addComponents([
|
||||
{
|
||||
"@media (min-width: 576px)": {
|
||||
".container": {
|
||||
maxWidth: "540px",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
"@media (min-width: 768px)": {
|
||||
".container": {
|
||||
maxWidth: "720px",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
"@media (min-width: 992px)": {
|
||||
".container": {
|
||||
maxWidth: "960px",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
"@media (min-width: 1200px)": {
|
||||
".container": {
|
||||
maxWidth: "1140px",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
".container": {
|
||||
width: "100%",
|
||||
paddingRight: "1rem",
|
||||
paddingLeft: "1rem",
|
||||
marginRight: "auto",
|
||||
marginLeft: "auto",
|
||||
},
|
||||
},
|
||||
{
|
||||
".row": {
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
marginRight: "-1rem",
|
||||
marginLeft: "-1rem",
|
||||
},
|
||||
},
|
||||
]);
|
||||
}),
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
fontWeight: {
|
||||
inherit: "inherit",
|
||||
},
|
||||
screens: {
|
||||
print: { raw: "print" },
|
||||
},
|
||||
},
|
||||
// Renaming breakpoints temporary until we remove bootstrap usage
|
||||
screens: {
|
||||
small: "576px",
|
||||
medium: "768px",
|
||||
large: "992px",
|
||||
xlarge: "1200px",
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ["Nunito Sans", "Helvetica", "Arial", "sans-serif"],
|
||||
zilla: ["Zilla Slab", "sans-serif"],
|
||||
},
|
||||
colors: {
|
||||
transparent: "transparent",
|
||||
current: "currentColor",
|
||||
inherit: "inherit",
|
||||
black: colors.black,
|
||||
white: colors.white,
|
||||
gray: {
|
||||
"05": "#f2f2f2",
|
||||
20: "#cccccc",
|
||||
40: "#999999",
|
||||
60: "#666666",
|
||||
80: "#333333",
|
||||
},
|
||||
red: {
|
||||
DEFAULT: "#ff4f5e",
|
||||
light: "#ffe6e8",
|
||||
dark: "#cc0011",
|
||||
},
|
||||
blue: {
|
||||
DEFAULT: "#595cf3",
|
||||
dark: "#0d10bf",
|
||||
light: "#b7b9fa",
|
||||
lightest: "#e7e7fc",
|
||||
},
|
||||
pni: {
|
||||
lilac: "#d3d5fc",
|
||||
blue: "#1808f2",
|
||||
"blue-purple": "#4a17d4",
|
||||
purple: "#7f28b7",
|
||||
"purple-pink": "#b0379b",
|
||||
pink: "#e4487d",
|
||||
yellow: "#fbd545",
|
||||
},
|
||||
pulse: {
|
||||
pink: "#ff506f",
|
||||
purple: "#a66efd",
|
||||
},
|
||||
festival: {
|
||||
blue: "#0e11bf",
|
||||
purple: "#8f14fb",
|
||||
},
|
||||
"dear-internet": {
|
||||
lilac: "#d3d5fc",
|
||||
pink: "#fff0f1",
|
||||
},
|
||||
"youtube-regrets": {
|
||||
red: "#ea0b12",
|
||||
"red-lighter": "#fd6976",
|
||||
"red-light": "#ffdcdc",
|
||||
"red-dark": "#d73027",
|
||||
"gray-dark": "#696969",
|
||||
purple: "#353552",
|
||||
},
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
extend: {},
|
||||
},
|
||||
prefix: "tw-",
|
||||
};
|
||||
Загрузка…
Ссылка в новой задаче