archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Color docs styling

Browse Source
This commit is contained in:
Adam Wathan 2017-12-13 14:22:44 -05:00
parent 44d3154010
commit 27f3135d32
1 changed files with 35 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
docs/source/docs/colors.blade.md
View File

@ -13,48 +13,48 @@ To get you started, we've provided a generous palette of great looking colors th
<div class="flex flex-wrap -mx-4">
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
<div class="rounded overflow-hidden">
<div class="text-white bg-grey px-6 py-4 text-sm font-semibold relative shadow z-10">
<div class="tracking-wide uppercase mb-6">Proposed Greys</div>
<div class="text-black bg-grey px-6 py-4 text-sm font-semibold relative shadow z-10">
<div class="uppercase mb-6">Grey</div>
<div class="flex justify-between">
<span class="opacity-0">Base</span>
<span class="font-normal opacity-0 lowercase truncate">{{ strtoupper($page->config['colors']['grey']) }}</span>
<span>Base</span>
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['grey']) }}</span>
</div>
</div>
<div class="text-black bg-white px-6 py-3 text-sm font-semibold flex justify-between">
<span class="-opacity-0">White</span>
<span class="font-normal opacity-0 lowercase truncate">{{ strtoupper($page->config['colors']['white']) }}</span>
<span>White</span>
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['white']) }}</span>
</div>
<div class="text-grey-darkest bg-grey-lightest px-6 py-3 text-sm font-semibold flex justify-between">
<span class="-opacity-0">Lightest</span>
<span class="font-normal opacity-0 lowercase truncate">{{ strtoupper($page->config['colors']['grey-lightest']) }}</span>
<div class="text-black bg-grey-lightest px-6 py-3 text-sm font-semibold flex justify-between">
<span>Lightest</span>
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['grey-lightest']) }}</span>
</div>
<div class="text-grey-darkest bg-grey-lighter px-6 py-3 text-sm font-semibold flex justify-between">
<span class="-opacity-0">Lighter</span>
<span class="font-normal opacity-0 lowercase truncate">{{ strtoupper($page->config['colors']['grey-lighter']) }}</span>
<div class="text-black bg-grey-lighter px-6 py-3 text-sm font-semibold flex justify-between">
<span>Lighter</span>
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['grey-lighter']) }}</span>
</div>
<div class="text-grey-darkest bg-grey-light px-6 py-3 text-sm font-semibold flex justify-between">
<span class="-opacity-0">Light</span>
<span class="font-normal opacity-0 lowercase truncate">{{ strtoupper($page->config['colors']['grey-light']) }}</span>
<div class="text-black bg-grey-light px-6 py-3 text-sm font-semibold flex justify-between">
<span>Light</span>
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['grey-light']) }}</span>
</div>
<div class="text-white bg-grey px-6 py-3 text-sm font-semibold flex justify-between flex justify-between">
<span class="-opacity-0">Base</span>
<span class="font-normal opacity-0 lowercase truncate">{{ strtoupper($page->config['colors']['grey']) }}</span>
<div class="text-black bg-grey px-6 py-3 text-sm font-semibold flex justify-between flex justify-between">
<span>Base</span>
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['grey']) }}</span>
</div>
<div class="text-white bg-grey-dark px-6 py-3 text-sm font-semibold flex justify-between">
<span class="-opacity-0">Dark</span>
<span class="font-normal opacity-0 lowercase truncate">{{ strtoupper($page->config['colors']['grey-dark']) }}</span>
<span>Dark</span>
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['grey-dark']) }}</span>
</div>
<div class="text-white bg-grey-darker px-6 py-3 text-sm font-semibold flex justify-between">
<span class="-opacity-0">Darker</span>
<span class="font-normal opacity-0 lowercase truncate">{{ strtoupper($page->config['colors']['grey-darker']) }}</span>
<span>Darker</span>
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['grey-darker']) }}</span>
</div>
<div class="text-white bg-grey-darkest px-6 py-3 text-sm font-semibold flex justify-between">
<span class="-opacity-0">Darkest</span>
<span class="font-normal opacity-0 lowercase truncate">{{ strtoupper($page->config['colors']['grey-darkest']) }}</span>
<span>Darkest</span>
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['grey-darkest']) }}</span>
</div>
<div class="text-white bg-black px-6 py-3 text-sm font-semibold flex justify-between">
<span class="-opacity-0">Black</span>
<span class="font-normal opacity-0 lowercase truncate">{{ strtoupper($page->config['colors']['black']) }}</span>
<span>Black</span>
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['black']) }}</span>
</div>
</div>
</div>
@ -64,7 +64,7 @@ To get you started, we've provided a generous palette of great looking colors th
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
<div class="rounded overflow-hidden">
<div class="text-white bg-red px-6 py-4 text-sm font-semibold relative shadow z-10">
<div class="tracking-wide uppercase mb-6">Red</div>
<div class="uppercase mb-6">Red</div>
<div class="flex justify-between">
<span>Base</span>
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['red']) }}</span>
@ -103,7 +103,7 @@ To get you started, we've provided a generous palette of great looking colors th
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
<div class="rounded overflow-hidden">
<div class="text-white bg-orange px-6 py-4 text-sm font-semibold relative shadow z-10">
<div class="tracking-wide uppercase mb-6">Orange</div>
<div class="uppercase mb-6">Orange</div>
<div class="flex justify-between">
<span>Base</span>
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['orange']) }}</span>
@ -142,7 +142,7 @@ To get you started, we've provided a generous palette of great looking colors th
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
<div class="rounded overflow-hidden">
<div class="text-yellow-darkest bg-yellow px-6 py-4 text-sm font-semibold relative shadow z-10">
<div class="tracking-wide uppercase mb-6">Yellow</div>
<div class="uppercase mb-6">Yellow</div>
<div class="flex justify-between">
<span>Base</span>
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['yellow']) }}</span>
@ -181,7 +181,7 @@ To get you started, we've provided a generous palette of great looking colors th
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
<div class="rounded overflow-hidden">
<div class="text-white bg-green px-6 py-4 text-sm font-semibold relative shadow z-10">
<div class="tracking-wide uppercase mb-6">Green</div>
<div class="uppercase mb-6">Green</div>
<div class="flex justify-between">
<span>Base</span>
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['green']) }}</span>
@ -220,7 +220,7 @@ To get you started, we've provided a generous palette of great looking colors th
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
<div class="rounded overflow-hidden">
<div class="text-white bg-teal px-6 py-4 text-sm font-semibold relative shadow z-10">
<div class="tracking-wide uppercase mb-6">Teal</div>
<div class="uppercase mb-6">Teal</div>
<div class="flex justify-between">
<span>Base</span>
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['teal']) }}</span>
@ -259,7 +259,7 @@ To get you started, we've provided a generous palette of great looking colors th
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
<div class="rounded overflow-hidden">
<div class="text-white bg-blue px-6 py-4 text-sm font-semibold relative shadow z-10">
<div class="tracking-wide uppercase mb-6">Blue</div>
<div class="uppercase mb-6">Blue</div>
<div class="flex justify-between">
<span>Base</span>
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['blue']) }}</span>
@ -298,7 +298,7 @@ To get you started, we've provided a generous palette of great looking colors th
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
<div class="rounded overflow-hidden">
<div class="text-white bg-indigo px-6 py-4 text-sm font-semibold relative shadow z-10">
<div class="tracking-wide uppercase mb-6">Indigo</div>
<div class="uppercase mb-6">Indigo</div>
<div class="flex justify-between">
<span>Base</span>
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['indigo']) }}</span>
@ -337,7 +337,7 @@ To get you started, we've provided a generous palette of great looking colors th
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
<div class="rounded overflow-hidden">
<div class="text-white bg-purple px-6 py-4 text-sm font-semibold relative shadow z-10">
<div class="tracking-wide uppercase mb-6">Purple</div>
<div class="uppercase mb-6">Purple</div>
<div class="flex justify-between">
<span>Base</span>
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['purple']) }}</span>
@ -376,7 +376,7 @@ To get you started, we've provided a generous palette of great looking colors th
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
<div class="rounded overflow-hidden">
<div class="text-white bg-pink px-6 py-4 text-sm font-semibold relative shadow z-10">
<div class="tracking-wide uppercase mb-6">Pink</div>
<div class="uppercase mb-6">Pink</div>
<div class="flex justify-between">
<span>Base</span>
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['pink']) }}</span>