Merge branch 'master' of github.com:nothingworksinc/tailwindcss
This commit is contained in:
Jonathan Reinink
commit
3e79b19aa1
4 changed files with 18 additions and 267 deletions
|
|
@ -157,18 +157,18 @@
|
|||
</div>
|
||||
<div class="md:ml-80">
|
||||
<div class="fixed w-full z-20">
|
||||
<div class="pin-t bg-white md:hidden relative border-b border-dark h-12 flex items-center">
|
||||
<div class="pin-t bg-white md:hidden relative border-b border-grey-light h-12 flex items-center">
|
||||
<div class="js-open-sidebar absolute pin-l pin-y px-4 flex items-center">
|
||||
<svg class="h-4" fill="#777" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
|
||||
<svg class="h-4 cursor-pointer text-grey" role="button" fill="#777" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
|
||||
</div>
|
||||
<div class="mx-auto inline-flex items-center">
|
||||
<svg class="h-4" viewBox="0 0 60 36" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 12c2-8 7-12 15-12 12 0 13.5 9 19.5 10.5 4 1 7.5-.5 10.5-4.5-2 8-7 12-15 12-12 0-13.5-9-19.5-10.5-4-1-7.5.5-10.5 4.5zM0 30c2-8 7-12 15-12 12 0 13.5 9 19.5 10.5 4 1 7.5-.5 10.5-4.5-2 8-7 12-15 12-12 0-13.5-9-19.5-10.5-4-1-7.5.5-10.5 4.5z" fill="url(#logoGradient)" fill-rule="evenodd"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="js-close-sidebar">
|
||||
<div class="hidden js-close-sidebar">
|
||||
<div class="flex items-center absolute pin-r pin-y px-4">
|
||||
<svg class="h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z"/></svg>
|
||||
<svg class="h-4 cursor-pointer text-grey" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,246 +5,15 @@ title: "Backgrounds"
|
|||
|
||||
# Background Color
|
||||
|
||||
<div class="subnav">
|
||||
<a class="subnav-link" href="#usage">Usage</a>
|
||||
<a class="subnav-link" href="#responsive">Responsive</a>
|
||||
<a class="subnav-link" href="#customizing">Customizing</a>
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling an element's background color.
|
||||
</div>
|
||||
|
||||
<h2 id="colors">Colors</h2>
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => true,
|
||||
'hover' => true,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
|
||||
<div class="flex flex-wrap -mx-4 mb-4">
|
||||
<div class="w-full md:w-1/3 px-4">
|
||||
<div class="rounded overflow-hidden">
|
||||
<div class="text-slate-dark bg-slate-lighter px-6 py-4 text-sm">
|
||||
.bg-slate-lighter
|
||||
</div>
|
||||
<div class="text-white bg-slate-light px-6 py-4 text-sm">
|
||||
.bg-slate-light
|
||||
</div>
|
||||
<div class="text-white bg-slate px-6 py-4 text-sm">
|
||||
.bg-slate
|
||||
</div>
|
||||
<div class="text-white bg-slate-dark px-6 py-4 text-sm">
|
||||
.bg-slate-dark
|
||||
</div>
|
||||
<div class="text-white bg-slate-darker px-6 py-4 text-sm">
|
||||
.bg-slate-darker
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/3 px-4">
|
||||
<div class="rounded overflow-hidden">
|
||||
<div class="text-slate-dark bg-smoke-lighter px-6 py-4 text-sm">
|
||||
.bg-smoke-lighter
|
||||
</div>
|
||||
<div class="text-slate-dark bg-smoke-light px-6 py-4 text-sm">
|
||||
.bg-smoke-light
|
||||
</div>
|
||||
<div class="text-slate-dark bg-smoke px-6 py-4 text-sm">
|
||||
.bg-smoke
|
||||
</div>
|
||||
<div class="text-slate-dark bg-smoke-dark px-6 py-4 text-sm">
|
||||
.bg-smoke-dark
|
||||
</div>
|
||||
<div class="text-white bg-smoke-darker px-6 py-4 text-sm">
|
||||
.bg-smoke-darker
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap -mx-4 mb-4">
|
||||
<div class="w-full md:w-1/3 px-4">
|
||||
<div class="rounded overflow-hidden">
|
||||
<div class="text-red bg-red-lighter px-6 py-4 text-sm">
|
||||
.bg-red-lighter
|
||||
</div>
|
||||
<div class="text-white bg-red-light px-6 py-4 text-sm">
|
||||
.bg-red-light
|
||||
</div>
|
||||
<div class="text-white bg-red px-6 py-4 text-sm">
|
||||
.bg-red
|
||||
</div>
|
||||
<div class="text-white bg-red-dark px-6 py-4 text-sm">
|
||||
.bg-red-dark
|
||||
</div>
|
||||
<div class="text-white bg-red-darker px-6 py-4 text-sm">
|
||||
.bg-red-darker
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/3 px-4">
|
||||
<div class="rounded overflow-hidden">
|
||||
<div class="text-orange-darker bg-orange-lighter px-6 py-4 text-sm">
|
||||
.bg-orange-lighter
|
||||
</div>
|
||||
<div class="text-orange-darker bg-orange-light px-6 py-4 text-sm">
|
||||
.bg-orange-light
|
||||
</div>
|
||||
<div class="text-orange-darker bg-orange px-6 py-4 text-sm">
|
||||
.bg-orange
|
||||
</div>
|
||||
<div class="text-white bg-orange-dark px-6 py-4 text-sm">
|
||||
.bg-orange-dark
|
||||
</div>
|
||||
<div class="text-white bg-orange-darker px-6 py-4 text-sm">
|
||||
.bg-orange-darker
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/3 px-4">
|
||||
<div class="rounded overflow-hidden">
|
||||
<div class="text-yellow-darker bg-yellow-lighter px-6 py-4 text-sm">
|
||||
.bg-yellow-lighter
|
||||
</div>
|
||||
<div class="text-yellow-darker bg-yellow-light px-6 py-4 text-sm">
|
||||
.bg-yellow-light
|
||||
</div>
|
||||
<div class="text-yellow-darker bg-yellow px-6 py-4 text-sm">
|
||||
.bg-yellow
|
||||
</div>
|
||||
<div class="text-yellow-darker bg-yellow-dark px-6 py-4 text-sm">
|
||||
.bg-yellow-dark
|
||||
</div>
|
||||
<div class="text-white bg-yellow-darker px-6 py-4 text-sm">
|
||||
.bg-yellow-darker
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap -mx-4 mb-4">
|
||||
<div class="w-full md:w-1/3 px-4">
|
||||
<div class="rounded overflow-hidden">
|
||||
<div class="text-green-darker bg-green-lighter px-6 py-4 text-sm">
|
||||
.bg-green-lighter
|
||||
</div>
|
||||
<div class="text-green-darker bg-green-light px-6 py-4 text-sm">
|
||||
.bg-green-light
|
||||
</div>
|
||||
<div class="text-white bg-green px-6 py-4 text-sm">
|
||||
.bg-green
|
||||
</div>
|
||||
<div class="text-white bg-green-dark px-6 py-4 text-sm">
|
||||
.bg-green-dark
|
||||
</div>
|
||||
<div class="text-white bg-green-darker px-6 py-4 text-sm">
|
||||
.bg-green-darker
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/3 px-4">
|
||||
<div class="rounded overflow-hidden">
|
||||
<div class="text-teal-darker bg-teal-lighter px-6 py-4 text-sm">
|
||||
.bg-teal-lighter
|
||||
</div>
|
||||
<div class="text-teal-darker bg-teal-light px-6 py-4 text-sm">
|
||||
.bg-teal-light
|
||||
</div>
|
||||
<div class="text-white bg-teal px-6 py-4 text-sm">
|
||||
.bg-teal
|
||||
</div>
|
||||
<div class="text-white bg-teal-dark px-6 py-4 text-sm">
|
||||
.bg-teal-dark
|
||||
</div>
|
||||
<div class="text-white bg-teal-darker px-6 py-4 text-sm">
|
||||
.bg-teal-darker
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/3 px-4">
|
||||
<div class="rounded overflow-hidden">
|
||||
<div class="text-blue-darker bg-blue-lighter px-6 py-4 text-sm">
|
||||
.bg-blue-lighter
|
||||
</div>
|
||||
<div class="text-blue-darker bg-blue-light px-6 py-4 text-sm">
|
||||
.bg-blue-light
|
||||
</div>
|
||||
<div class="text-white bg-blue px-6 py-4 text-sm">
|
||||
.bg-blue
|
||||
</div>
|
||||
<div class="text-white bg-blue-dark px-6 py-4 text-sm">
|
||||
.bg-blue-dark
|
||||
</div>
|
||||
<div class="text-white bg-blue-darker px-6 py-4 text-sm">
|
||||
.bg-blue-darker
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap -mx-4 mb-4">
|
||||
<div class="w-full md:w-1/3 px-4">
|
||||
<div class="rounded overflow-hidden">
|
||||
<div class="text-indigo-darker bg-indigo-lighter px-6 py-4 text-sm">
|
||||
.bg-indigo-lighter
|
||||
</div>
|
||||
<div class="text-indigo-darker bg-indigo-light px-6 py-4 text-sm">
|
||||
.bg-indigo-light
|
||||
</div>
|
||||
<div class="text-white bg-indigo px-6 py-4 text-sm">
|
||||
.bg-indigo
|
||||
</div>
|
||||
<div class="text-white bg-indigo-dark px-6 py-4 text-sm">
|
||||
.bg-indigo-dark
|
||||
</div>
|
||||
<div class="text-white bg-indigo-darker px-6 py-4 text-sm">
|
||||
.bg-indigo-darker
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/3 px-4">
|
||||
<div class="rounded overflow-hidden">
|
||||
<div class="text-purple-darker bg-purple-lighter px-6 py-4 text-sm">
|
||||
.bg-purple-lighter
|
||||
</div>
|
||||
<div class="text-purple-darker bg-purple-light px-6 py-4 text-sm">
|
||||
.bg-purple-light
|
||||
</div>
|
||||
<div class="text-white bg-purple px-6 py-4 text-sm">
|
||||
.bg-purple
|
||||
</div>
|
||||
<div class="text-white bg-purple-dark px-6 py-4 text-sm">
|
||||
.bg-purple-dark
|
||||
</div>
|
||||
<div class="text-white bg-purple-darker px-6 py-4 text-sm">
|
||||
.bg-purple-darker
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/3 px-4">
|
||||
<div class="rounded overflow-hidden">
|
||||
<div class="text-pink-darker bg-pink-lighter px-6 py-4 text-sm">
|
||||
.bg-pink-lighter
|
||||
</div>
|
||||
<div class="text-pink-darker bg-pink-light px-6 py-4 text-sm">
|
||||
.bg-pink-light
|
||||
</div>
|
||||
<div class="text-white bg-pink px-6 py-4 text-sm">
|
||||
.bg-pink
|
||||
</div>
|
||||
<div class="text-white bg-pink-dark px-6 py-4 text-sm">
|
||||
.bg-pink-dark
|
||||
</div>
|
||||
<div class="text-white bg-pink-darker px-6 py-4 text-sm">
|
||||
.bg-pink-darker
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Using the utilities in HTML:
|
||||
|
||||
```html
|
||||
<div class="bg-white"></div>
|
||||
<div class="bg-smoke-lighter"></div>
|
||||
<div class="bg-smoke-light"></div>
|
||||
<div class="bg-smoke"></div>
|
||||
|
||||
<div class="bg-slate-darker"></div>
|
||||
<div class="bg-slate-dark"></div>
|
||||
<div class="bg-slate"></div>
|
||||
<div class="bg-slate-light"></div>
|
||||
```
|
||||
@include('_partials.work-in-progress')
|
||||
|
|
|
|||
|
|
@ -18,9 +18,9 @@ title: "Border Width"
|
|||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
## Usage
|
||||
Add borders to any element using the `.border{-side?}{-width?}` syntax.
|
||||
|
||||
Add borders to any element using the `.border{-side?}{-width?}` syntax. For example, `.border` would add a `1px` border to all sides of the element, where `.border-b-4` would add a `4px` border to the bottom of the element.
|
||||
For example, `.border` would add a `1px` border to all sides of the element, where `.border-b-4` would add a `4px` border to the bottom of the element.
|
||||
|
||||
<div class="flex items-start mt-8 text-sm leading-none">
|
||||
<div class="pr-12">
|
||||
|
|
@ -44,23 +44,3 @@ Add borders to any element using the `.border{-side?}{-width?}` syntax. For exam
|
|||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">8</code> 8px</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### Examples
|
||||
|
||||
```html
|
||||
<!-- Add a 1px border to all sides -->
|
||||
<div class="border"></div>
|
||||
|
||||
<!-- Add a 1px border to the top side -->
|
||||
<div class="border-t"></div>
|
||||
|
||||
<!-- Add a 2px border to all sides -->
|
||||
<div class="border-2"></div>
|
||||
|
||||
<!-- Add a 2px border to the top side -->
|
||||
<div class="border-t-2"></div>
|
||||
```
|
||||
|
||||
## Responsive
|
||||
|
||||
## Customizing
|
||||
|
|
|
|||
|
|
@ -18,7 +18,9 @@ title: "Padding"
|
|||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
The syntax below is combined to create a system for padding and margins. For example, `.pt-2` would add padding to the top of the element to the value of `0.5rem`, `.mx-0` would make the horizontal margin zero, and `.-mb-6` would add negative margin to the bottom of an element.
|
||||
Control an element's padding and margin using the `.p{side?}-{size}`, `.m{side?}-{size}`, and `.-m{side?}-{size}` utilities.
|
||||
|
||||
For example, `.pt-2` would add `.5rem` of padding to the top of the element, `.mx-0` would make the horizontal margin zero, and `.-mb-6` would add a `1.5rem`negative margin to the bottom of an element.
|
||||
|
||||
<div class="flex items-start mt-8 text-sm">
|
||||
<div class="pr-12">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue