Merge branch 'master' into 0.3

This commit is contained in:
Adam Wathan 2017-11-29 18:46:08 -05:00
commit 45c1c4826f
15 changed files with 99 additions and 81 deletions

View File

@ -1,5 +1,10 @@
<div class="border-t border-b border-grey-light">
<div class="{{ count($rows) > 10 ? 'max-h-sm' : '' }} overflow-y-scroll">
@php
$scroll = isset($scroll) ? $scroll : true;
$scroll = (count($rows) > 10 && ($scroll !== false));
@endphp
<div class="border-t border-b border-grey-light overflow-hidden relative">
<div class="{{ $scroll ? 'max-h-sm pb-10' : '' }} overflow-y-scroll">
<table class="w-full text-left table-collapse">
<thead>
<tr>
@ -19,4 +24,9 @@
</tbody>
</table>
</div>
@if ($scroll)
<div class="bg-white opacity-50 text-center absolute pin-b pin-x py-2 flex justify-center shadow-md-light">
<svg class="h-6 w-6 text-grey-dark" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
</div>
@endif
</div>

View File

@ -1,5 +1,5 @@
<div class="mt-8">
<div class="bg-blue-lightest border-l-4 border-blue-light rounded-b text-blue-darkest px-4 py-3">
<div class="bg-blue-lightest border-l-4 border-blue-light text-blue-darkest px-4 py-3">
<div class="flex">
<div class="py-1">
<svg class="fill-current h-6 w-6 text-blue-light mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm-.5-5h1c.276 0 .5.224.5.5v1c0 .276-.224.5-.5.5h-1c-.276 0-.5-.224-.5-.5v-1c0-.276.224-.5.5-.5zm0-8h1c.276 0 .5.224.5.5V8l-.5 3-1 .5L9 8V5.5c0-.276.224-.5.5-.5z"/></svg>

View File

@ -1,4 +1,4 @@
<div class="bg-blue-lightest border-l-4 border-blue-light rounded-b text-blue-darkest px-4 py-3 mb-4">
<div class="bg-blue-lightest border-l-4 border-blue-light text-blue-darkest px-4 py-3 mb-4">
<div class="flex">
<div class="py-1">
<svg class="fill-current h-6 w-6 text-blue-light mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm-.5-5h1c.276 0 .5.224.5.5v1c0 .276-.224.5-.5.5h-1c-.276 0-.5-.224-.5-.5v-1c0-.276.224-.5.5-.5zm0-8h1c.276 0 .5.224.5.5V8l-.5 3-1 .5L9 8V5.5c0-.276.224-.5.5-.5z"/></svg>

View File

@ -24,7 +24,7 @@ features:
[
'.rounded',
'border-radius: .25rem;',
"Apply a medium border radius to all corners of an element.",
"Apply the default border radius to all corners of an element.",
],
[
'.rounded-lg',
@ -79,22 +79,22 @@ features:
[
'.rounded-t',
"border-top-left-radius: .25rem;\nborder-top-right-radius: .25rem;",
"Apply a medium border radius to the top corners of an element.",
"Apply the default border radius to the top corners of an element.",
],
[
'.rounded-r',
"border-top-right-radius: .25rem;\nborder-bottom-right-radius: .25rem;",
"Apply a medium border radius to the right corners of an element.",
"Apply the default border radius to the right corners of an element.",
],
[
'.rounded-b',
"border-bottom-right-radius: .25rem;\nborder-bottom-left-radius: .25rem;",
"Apply a medium border radius to the bottom corners of an element.",
"Apply the default border radius to the bottom corners of an element.",
],
[
'.rounded-l',
"border-top-left-radius: .25rem;\nborder-bottom-left-radius: .25rem;",
"Apply a medium border radius to the left corners of an element.",
"Apply the default border radius to the left corners of an element.",
],
[
'.rounded-t-lg',
@ -179,22 +179,22 @@ features:
[
'.rounded-tl',
'border-top-left-radius: .25rem;',
"Apply a medium border radius to the top left corner of an element.",
"Apply the default border radius to the top left corner of an element.",
],
[
'.rounded-tr',
'border-top-right-radius: .25rem;',
"Apply a medium border radius to the top right corner of an element.",
"Apply the default border radius to the top right corner of an element.",
],
[
'.rounded-br',
'border-bottom-right-radius: .25rem;',
"Apply a medium border radius to the bottom right corner of an element.",
"Apply the default border radius to the bottom right corner of an element.",
],
[
'.rounded-bl',
'border-bottom-left-radius: .25rem;',
"Apply a medium border radius to the bottom left corner of an element.",
"Apply the default border radius to the bottom left corner of an element.",
],
[
'.rounded-tl-lg',

View File

@ -12,91 +12,92 @@ features:
@include('_partials.work-in-progress')
@include('_partials.class-table', [
'scroll' => false,
'rows' => [
[
'.h-1',
'height: 0.25rem;',
"Set the element's height to <code>0.25rem</code>.",
"Set the element's height to 0.25rem.",
],
[
'.h-2',
'height: 0.5rem;',
"Set the element's height to <code>0.5rem</code>.",
"Set the element's height to 0.5rem.",
],
[
'.h-3',
'height: 0.75rem;',
"Set the element's height to <code>0.75rem</code>.",
"Set the element's height to 0.75rem.",
],
[
'.h-4',
'height: 1rem;',
"Set the element's height to <code>1rem</code>.",
"Set the element's height to 1rem.",
],
[
'.h-6',
'height: 1.5rem;',
"Set the element's height to <code>1.5rem</code>.",
"Set the element's height to 1.5rem.",
],
[
'.h-8',
'height: 2rem;',
"Set the element's height to <code>2rem</code>.",
"Set the element's height to 2rem.",
],
[
'.h-10',
'height: 2.5rem;',
"Set the element's height to <code>2.5rem</code>.",
"Set the element's height to 2.5rem.",
],
[
'.h-12',
'height: 3rem;',
"Set the element's height to <code>3rem</code>.",
"Set the element's height to 3rem.",
],
[
'.h-16',
'height: 4rem;',
"Set the element's height to <code>4rem</code>.",
"Set the element's height to 4rem.",
],
[
'.h-24',
'height: 6rem;',
"Set the element's height to <code>6rem</code>.",
"Set the element's height to 6rem.",
],
[
'.h-32',
'height: 8rem;',
"Set the element's height to <code>8rem</code>.",
"Set the element's height to 8rem.",
],
[
'.h-48',
'height: 12rem;',
"Set the element's height to <code>12rem</code>.",
"Set the element's height to 12rem.",
],
[
'.h-64',
'height: 16rem;',
"Set the element's height to <code>16rem</code>.",
"Set the element's height to 16rem.",
],
[
'.h-auto',
'height: auto;',
"Set the element's height to <code>auto</code>.",
"Set the element's height to auto.",
],
[
'.h-px',
'height: 1px;',
"Set the element's height to <code>1px</code>.",
"Set the element's height to 1px.",
],
[
'.h-full',
'height: 100%;',
"Set the element's height to <code>100%</code>.",
"Set the element's height to 100%.",
],
[
'.h-screen',
'height: 100vh;',
"Set the element's height to <code>100vh</code>.",
"Set the element's height to 100vh.",
],
]
])

View File

@ -12,16 +12,17 @@ features:
@include('_partials.work-in-progress')
@include('_partials.class-table', [
'scroll' => false,
'rows' => [
[
'.max-h-full',
'max-height: 100%;',
"Set the element's maximum height to <code>100%</code>.",
"Set the element's maximum height to 100%.",
],
[
'.max-h-screen',
'max-height: 100vh;',
"Set the element's maximum height to <code>100vh</code>.",
"Set the element's maximum height to 100vh.",
],
]
])

View File

@ -12,56 +12,57 @@ features:
@include('_partials.work-in-progress')
@include('_partials.class-table', [
'scroll' => false,
'rows' => [
[
'.max-w-xs',
'max-width: 20rem;',
"Set the element's maximum width to <code>20rem</code>.",
"Set the element's maximum width to 20rem.",
],
[
'.max-w-sm',
'max-width: 30rem;',
"Set the element's maximum width to <code>30rem</code>.",
"Set the element's maximum width to 30rem.",
],
[
'.max-w-md',
'max-width: 40rem;',
"Set the element's maximum width to <code>40rem</code>.",
"Set the element's maximum width to 40rem.",
],
[
'.max-w-lg',
'max-width: 50rem;',
"Set the element's maximum width to <code>50rem</code>.",
"Set the element's maximum width to 50rem.",
],
[
'.max-w-xl',
'max-width: 60rem;',
"Set the element's maximum width to <code>60rem</code>.",
"Set the element's maximum width to 60rem.",
],
[
'.max-w-2xl',
'max-width: 70rem;',
"Set the element's maximum width to <code>70rem</code>.",
"Set the element's maximum width to 70rem.",
],
[
'.max-w-3xl',
'max-width: 80rem;',
"Set the element's maximum width to <code>80rem</code>.",
"Set the element's maximum width to 80rem.",
],
[
'.max-w-4xl',
'max-width: 90rem;',
"Set the element's maximum width to <code>90rem</code>.",
"Set the element's maximum width to 90rem.",
],
[
'.max-w-5xl',
'max-width: 100rem;',
"Set the element's maximum width to <code>100rem</code>.",
"Set the element's maximum width to 100rem.",
],
[
'.max-w-full',
'max-width: 100%;',
"Set the element's maximum width to <code>100%</code>.",
"Set the element's maximum width to 100%.",
],
]
])

View File

@ -12,21 +12,22 @@ features:
@include('_partials.work-in-progress')
@include('_partials.class-table', [
'scroll' => false,
'rows' => [
[
'.min-h-0',
'min-height: 0;',
"Set the element's minimum height to <code>0</code>.",
"Set the element's minimum height to 0.",
],
[
'.min-h-full',
'min-height: 100%;',
"Set the element's minimum height to <code>100%</code>.",
"Set the element's minimum height to 100%.",
],
[
'.min-h-screen',
'min-height: 100vh;',
"Set the element's minimum height to <code>100vh</code>.",
"Set the element's minimum height to 100vh.",
],
]
])

View File

@ -12,16 +12,17 @@ features:
@include('_partials.work-in-progress')
@include('_partials.class-table', [
'scroll' => false,
'rows' => [
[
'.min-w-0',
'min-width: 0;',
"Set the element's minimum width to <code>0</code>.",
"Set the element's minimum width to 0.",
],
[
'.min-w-full',
'min-width: 100%;',
"Set the element's minimum width to <code>100%</code>.",
"Set the element's minimum width to 100%.",
],
]
])

View File

@ -12,146 +12,147 @@ features:
@include('_partials.work-in-progress')
@include('_partials.class-table', [
'scroll' => false,
'rows' => [
[
'.w-1',
'width: 0.25rem;',
"Set the element's width to <code>0.25rem</code>.",
"Set the element's width to 0.25rem.",
],
[
'.w-2',
'width: 0.5rem;',
"Set the element's width to <code>0.5rem</code>.",
"Set the element's width to 0.5rem.",
],
[
'.w-3',
'width: 0.75rem;',
"Set the element's width to <code>0.75rem</code>.",
"Set the element's width to 0.75rem.",
],
[
'.w-4',
'width: 1rem;',
"Set the element's width to <code>1rem</code>.",
"Set the element's width to 1rem.",
],
[
'.w-6',
'width: 1.5rem;',
"Set the element's width to <code>1.5rem</code>.",
"Set the element's width to 1.5rem.",
],
[
'.w-8',
'width: 2rem;',
"Set the element's width to <code>2rem</code>.",
"Set the element's width to 2rem.",
],
[
'.w-10',
'width: 2.5rem;',
"Set the element's width to <code>2.5rem</code>.",
"Set the element's width to 2.5rem.",
],
[
'.w-12',
'width: 3rem;',
"Set the element's width to <code>3rem</code>.",
"Set the element's width to 3rem.",
],
[
'.w-16',
'width: 4rem;',
"Set the element's width to <code>4rem</code>.",
"Set the element's width to 4rem.",
],
[
'.w-24',
'width: 6rem;',
"Set the element's width to <code>6rem</code>.",
"Set the element's width to 6rem.",
],
[
'.w-32',
'width: 8rem;',
"Set the element's width to <code>8rem</code>.",
"Set the element's width to 8rem.",
],
[
'.w-48',
'width: 12rem;',
"Set the element's width to <code>12rem</code>.",
"Set the element's width to 12rem.",
],
[
'.w-64',
'width: 16rem;',
"Set the element's width to <code>16rem</code>.",
"Set the element's width to 16rem.",
],
[
'.w-auto',
'width: auto;',
"Set the element's width to <code>auto</code>.",
"Set the element's width to auto.",
],
[
'.w-px',
'width: 1px;',
"Set the element's width to <code>1px</code>.",
"Set the element's width to 1px.",
],
[
'.w-1/2',
'width: 50%;',
"Set the element's width to <code>50%</code>.",
"Set the element's width to 50%.",
],
[
'.w-1/3',
'width: 33.33333%;',
"Set the element's width to <code>33.33333%</code>.",
"Set the element's width to 33.33333%.",
],
[
'.w-2/3',
'width: 66.66667%;',
"Set the element's width to <code>66.66667%</code>.",
"Set the element's width to 66.66667%.",
],
[
'.w-1/4',
'width: 25%;',
"Set the element's width to <code>25%</code>.",
"Set the element's width to 25%.",
],
[
'.w-3/4',
'width: 75%;',
"Set the element's width to <code>75%</code>.",
"Set the element's width to 75%.",
],
[
'.w-1/5',
'width: 20%;',
"Set the element's width to <code>20%</code>.",
"Set the element's width to 20%.",
],
[
'.w-2/5',
'width: 40%;',
"Set the element's width to <code>40%</code>.",
"Set the element's width to 40%.",
],
[
'.w-3/5',
'width: 60%;',
"Set the element's width to <code>60%</code>.",
"Set the element's width to 60%.",
],
[
'.w-4/5',
'width: 80%;',
"Set the element's width to <code>80%</code>.",
"Set the element's width to 80%.",
],
[
'.w-1/6',
'width: 16.66667%;',
"Set the element's width to <code>16.66667%</code>.",
"Set the element's width to 16.66667%.",
],
[
'.w-5/6',
'width: 83.33333%;',
"Set the element's width to <code>83.33333%</code>.",
"Set the element's width to 83.33333%.",
],
[
'.w-full',
'width: 100%;',
"Set the element's width to <code>100%</code>.",
"Set the element's width to 100%.",
],
[
'.w-screen',
'width: 100vw;',
"Set the element's width to <code>100vw</code>.",
"Set the element's width to 100vw.",
],
]
])

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

View File

@ -5,13 +5,13 @@
<meta name="twitter:site" content="@tailwindcss">
<meta name="twitter:title" content="Tailwind CSS">
<meta name="twitter:description" content="A utility-first CSS framework for rapidly building custom user interfaces.">
<meta name="twitter:image" content="https://tailwindcss.com/img/launch-card-optimized.png">
<meta name="twitter:image" content="https://tailwindcss.com/img/twitter-large-card.png">
<meta name="twitter:creator" content="@tailwindcss">
<meta property="og:url" content="https://tailwindcss.com/" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Tailwind CSS" />
<meta property="og:description" content="A utility-first CSS framework for rapidly building custom user interfaces." />
<meta property="og:image" content="https://tailwindcss.com/img/twitter-card.png" />
<meta property="og:image" content="https://tailwindcss.com/img/twitter-large-card.png" />
@endsection
@section('body')

View File

@ -93,4 +93,8 @@ config.margin = Object.assign(config.margin, {
config.negativeMargin = config.margin
config.shadows = Object.assign({
'md-light': '0 0 12px 8px rgb(255,255,255)'
}, config.shadows)
module.exports = config

View File

@ -2,12 +2,10 @@ import _ from 'lodash'
import functions from 'postcss-functions'
export default function(config) {
const options = config()
return functions({
functions: {
config: (path, defaultValue) => {
return _.get(options, _.trim(path, `'"`), defaultValue)
return _.get(config(), _.trim(path, `'"`), defaultValue)
},
},
})

View File

@ -24,7 +24,7 @@ function findMixin(css, mixin, onError) {
if (_.isEmpty(matches)) {
// prettier-ignore
onError(`\`@apply\` cannot be used with ${mixin} because ${mixin} either does not exist, or it's actual definition includes a pseudo-class like :hover, :active, etc.`)
onError(`\`@apply\` cannot be used with \`${mixin}\` because \`${mixin}\` either cannot be found, or it's actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that \`${mixin}\` exists, make sure that any \`@import\` statements are being properly processed *before* Tailwind CSS sees your CSS, as \`@apply\` can only be used for classes in the same CSS tree.`)
}
if (matches.length > 1) {