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

Document appearance-none

Browse Source 
Also create appearance-none lol
This commit is contained in:
Adam Wathan 2017-10-31 21:48:57 -04:00
parent 0ff468c54c
commit 3ffe2a5077
3 changed files with 42 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
__tests__/fixtures/tailwind.css
View File

@ -586,7 +586,7 @@ button,
}
}
.input-reset {
.appearance-none {
appearance: none;
}
@ -3525,7 +3525,7 @@ button,
}
@media (min-width: 576px) {
.sm\:input-reset {
.sm\:appearance-none {
appearance: none;
}
@ -6465,7 +6465,7 @@ button,
}
@media (min-width: 768px) {
.md\:input-reset {
.md\:appearance-none {
appearance: none;
}
@ -9405,7 +9405,7 @@ button,
}
@media (min-width: 992px) {
.lg\:input-reset {
.lg\:appearance-none {
appearance: none;
}
@ -12345,7 +12345,7 @@ button,
}
@media (min-width: 1200px) {
.xl\:input-reset {
.xl\:appearance-none {
appearance: none;
}

49
docs/source/docs/forms.blade.md
View File

@ -5,18 +5,41 @@ title: "Forms"
# Forms
<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="flex">
<div class="py-1">
<svg class="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>
</div>
<div>
<p class="font-semibold">Work in progress!</p>
<p class="text-sm">More detailed documentation is coming soon.</p>
</div>
</div>
</div>
<div class="text-xl text-slate-light mb-4">
Utilities for styling form controls.
</div>
@include('_partials.feature-badges', [
'responsive' => true,
'customizable' => false,
'hover' => false,
'focus' => false
])
@include('_partials.work-in-progress')
<div class="border-t border-grey-lighter">
<table class="w-full text-left" style="border-collapse: collapse;">
<colgroup>
<col class="w-1/5">
<col class="w-1/3">
<col>
</colgroup>
<thead>
<tr>
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
</tr>
</thead>
<tbody class="align-baseline">
<tr>
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.appearance-none</td>
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">appearance: none;</td>
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Remove any special styling applied to an element by the browser.</td>
</tr>
</tbody>
</table>
</div>
### Custom Select
@ -25,7 +48,7 @@ Form controls are great candidates for component classes, but just for fun, here
@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
<div class="inline-block relative w-64">
<select class="block input-reset w-full bg-white border border-smoke-dark hover:border-slate-light px-4 py-2 pr-8 rounded shadow">
<select class="block appearance-none w-full bg-white border border-grey-light hover:border-grey px-4 py-2 pr-8 rounded shadow">
<option>Really long option that will likely overlap the chevron</option>
<option>Option 2</option>
<option>Option 3</option>

2
src/generators/forms.js
View File

@ -2,6 +2,6 @@ import defineClasses from '../util/defineClasses'
export default function() {
return defineClasses({
'input-reset': { 'appearance': 'none' },
'appearance-none': { 'appearance': 'none' },
})
}