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

Replace rounded-pill with rounded-full without fucking everything up

Browse Source
This commit is contained in:
Adam Wathan 2017-10-30 19:45:39 -04:00
parent fb896e6e5a
commit fbc693d4c0
7 changed files with 41 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
docs/source/_partials/feature-badges.blade.php
View File

@ -1,14 +1,14 @@
<div class="flex mb-6">
@if ($responsive)
<span class="inline-flex items-center rounded-pill border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
<span class="inline-flex rounded-pill bg-green-light text-white mr-1">
<span class="inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
<span class="inline-flex rounded-full bg-green-light text-white mr-1">
<svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5.8 9.4c-.33-.442-.958-.53-1.4-.2-.442.33-.53.958-.2 1.4l3 4c.38.508 1.134.537 1.553.06l7-8c.363-.417.32-1.05-.094-1.413-.417-.363-1.05-.32-1.413.094L8.06 12.414 5.8 9.4z"/></svg>
</span>
<span>Responsive</span>
</span>
@else
<span class="inline-flex items-center rounded-pill border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
<span class="inline-flex rounded-pill bg-grey text-white mr-1">
<span class="inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
<span class="inline-flex rounded-full bg-grey text-white mr-1">
<svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 8.586L6.707 5.293c-.39-.39-1.024-.39-1.414 0-.39.39-.39 1.024 0 1.414L8.586 10l-3.293 3.293c-.39.39-.39 1.024 0 1.414.39.39 1.024.39 1.414 0L10 11.414l3.293 3.293c.39.39 1.024.39 1.414 0 .39-.39.39-1.024 0-1.414L11.414 10l3.293-3.293c.39-.39.39-1.024 0-1.414-.39-.39-1.024-.39-1.414 0L10 8.586z"/></svg>
</span>
<span>Responsive</span>
@ -16,15 +16,15 @@
@endif
@if ($customizable)
<span class="inline-flex items-center rounded-pill border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
<span class="inline-flex rounded-pill bg-green-light text-white mr-1">
<span class="inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
<span class="inline-flex rounded-full bg-green-light text-white mr-1">
<svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5.8 9.4c-.33-.442-.958-.53-1.4-.2-.442.33-.53.958-.2 1.4l3 4c.38.508 1.134.537 1.553.06l7-8c.363-.417.32-1.05-.094-1.413-.417-.363-1.05-.32-1.413.094L8.06 12.414 5.8 9.4z"/></svg>
</span>
<span>Customizable</span>
</span>
@else
<span class="inline-flex items-center rounded-pill border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
<span class="inline-flex rounded-pill bg-grey text-white mr-1">
<span class="inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
<span class="inline-flex rounded-full bg-grey text-white mr-1">
<svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 8.586L6.707 5.293c-.39-.39-1.024-.39-1.414 0-.39.39-.39 1.024 0 1.414L8.586 10l-3.293 3.293c-.39.39-.39 1.024 0 1.414.39.39 1.024.39 1.414 0L10 11.414l3.293 3.293c.39.39 1.024.39 1.414 0 .39-.39.39-1.024 0-1.414L11.414 10l3.293-3.293c.39-.39.39-1.024 0-1.414-.39-.39-1.024-.39-1.414 0L10 8.586z"/></svg>
</span>
<span>Customizable</span>
@ -32,15 +32,15 @@
@endif
@if ($hover)
<span class="inline-flex items-center rounded-pill border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
<span class="inline-flex rounded-pill bg-green-light text-white mr-1">
<span class="inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
<span class="inline-flex rounded-full bg-green-light text-white mr-1">
<svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5.8 9.4c-.33-.442-.958-.53-1.4-.2-.442.33-.53.958-.2 1.4l3 4c.38.508 1.134.537 1.553.06l7-8c.363-.417.32-1.05-.094-1.413-.417-.363-1.05-.32-1.413.094L8.06 12.414 5.8 9.4z"/></svg>
</span>
<span>Hover</span>
</span>
@else
<span class="inline-flex items-center rounded-pill border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
<span class="inline-flex rounded-pill bg-grey text-white mr-1">
<span class="inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
<span class="inline-flex rounded-full bg-grey text-white mr-1">
<svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 8.586L6.707 5.293c-.39-.39-1.024-.39-1.414 0-.39.39-.39 1.024 0 1.414L8.586 10l-3.293 3.293c-.39.39-.39 1.024 0 1.414.39.39 1.024.39 1.414 0L10 11.414l3.293 3.293c.39.39 1.024.39 1.414 0 .39-.39.39-1.024 0-1.414L11.414 10l3.293-3.293c.39-.39.39-1.024 0-1.414-.39-.39-1.024-.39-1.414 0L10 8.586z"/></svg>
</span>
<span>Hover</span>
@ -48,15 +48,15 @@
@endif
@if ($focus)
<span class="inline-flex items-center rounded-pill border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
<span class="inline-flex rounded-pill bg-green-light text-white mr-1">
<span class="inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
<span class="inline-flex rounded-full bg-green-light text-white mr-1">
<svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5.8 9.4c-.33-.442-.958-.53-1.4-.2-.442.33-.53.958-.2 1.4l3 4c.38.508 1.134.537 1.553.06l7-8c.363-.417.32-1.05-.094-1.413-.417-.363-1.05-.32-1.413.094L8.06 12.414 5.8 9.4z"/></svg>
</span>
<span>Focus</span>
</span>
@else
<span class="inline-flex items-center rounded-pill border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
<span class="inline-flex rounded-pill bg-grey text-white mr-1">
<span class="inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
<span class="inline-flex rounded-full bg-grey text-white mr-1">
<svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 8.586L6.707 5.293c-.39-.39-1.024-.39-1.414 0-.39.39-.39 1.024 0 1.414L8.586 10l-3.293 3.293c-.39.39-.39 1.024 0 1.414.39.39 1.024.39 1.414 0L10 11.414l3.293 3.293c.39.39 1.024.39 1.414 0 .39-.39.39-1.024 0-1.414L11.414 10l3.293-3.293c.39-.39.39-1.024 0-1.414-.39-.39-1.024-.39-1.414 0L10 8.586z"/></svg>
</span>
<span>Focus</span>

2
docs/source/docs/examples/buttons.blade.md
View File

@ -48,7 +48,7 @@ Here's a bunch of examples:
### Pill
@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded-pill">
<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded-full">
Button
</button>
@endcomponent

8
docs/source/docs/examples/cards.blade.md
View File

@ -17,9 +17,9 @@ We don't ship alert components because every app has it's own visual style, but
</p>
</div>
<div class="px-6 py-4">
<span class="inline-block bg-smoke-light rounded-pill px-3 py-1 text-sm font-semibold text-slate mr-2">#photography</span>
<span class="inline-block bg-smoke-light rounded-pill px-3 py-1 text-sm font-semibold text-slate mr-2">#travel</span>
<span class="inline-block bg-smoke-light rounded-pill px-3 py-1 text-sm font-semibold text-slate">#winter</span>
<span class="inline-block bg-smoke-light rounded-full px-3 py-1 text-sm font-semibold text-slate mr-2">#photography</span>
<span class="inline-block bg-smoke-light rounded-full px-3 py-1 text-sm font-semibold text-slate mr-2">#travel</span>
<span class="inline-block bg-smoke-light rounded-full px-3 py-1 text-sm font-semibold text-slate">#winter</span>
</div>
</div>
</div>
@ -41,7 +41,7 @@ We don't ship alert components because every app has it's own visual style, but
</p>
</div>
<div class="flex items-center">
<img class="w-10 h-10 rounded-pill mr-4" src="https://pbs.twimg.com/profile_images/885868801232961537/b1F6H4KC_400x400.jpg" alt="">
<img class="w-10 h-10 rounded-full mr-4" src="https://pbs.twimg.com/profile_images/885868801232961537/b1F6H4KC_400x400.jpg" alt="">
<div class="text-sm">
<p class="text-slate-darker leading-none">Jonathan Reinink</p>
<p class="text-slate-light">Aug 18</p>

10
docs/source/docs/opacity.blade.md
View File

@ -79,27 +79,27 @@ For more information about Tailwind's responsive design features, check out the
@component('_partials.responsive-code-sample')
@slot('none')
<div class="text-center">
<div class="px-4 py-2 bg-smoke opacity-100 w-24 h-24 rounded-pill inline-block"></div>
<div class="px-4 py-2 bg-smoke opacity-100 w-24 h-24 rounded-full inline-block"></div>
</div>
@endslot
@slot('sm')
<div class="text-center">
<div class="px-4 py-2 bg-smoke opacity-75 w-24 h-24 rounded-pill inline-block"></div>
<div class="px-4 py-2 bg-smoke opacity-75 w-24 h-24 rounded-full inline-block"></div>
</div>
@endslot
@slot('md')
<div class="text-center">
<div class="px-4 py-2 bg-smoke opacity-50 w-24 h-24 rounded-pill inline-block"></div>
<div class="px-4 py-2 bg-smoke opacity-50 w-24 h-24 rounded-full inline-block"></div>
</div>
@endslot
@slot('lg')
<div class="text-center">
<div class="px-4 py-2 bg-smoke opacity-25 w-24 h-24 rounded-pill inline-block"></div>
<div class="px-4 py-2 bg-smoke opacity-25 w-24 h-24 rounded-full inline-block"></div>
</div>
@endslot
@slot('xl')
<div class="text-center">
<div class="px-4 py-2 bg-smoke opacity-0 w-24 h-24 rounded-pill inline-block"></div>
<div class="px-4 py-2 bg-smoke opacity-0 w-24 h-24 rounded-full inline-block"></div>
</div>
@endslot
@slot('code')

6
docs/source/docs/positioning.blade.md
View File

@ -212,9 +212,9 @@ Offsets are calculated relative to the viewport and the element *will* act as a
<div class="rounded-b overflow-hidden max-w-md mx-auto mt-4 mb-4">
<div class="rounded-t border-t border-l border-r border-smoke bg-smoke-light flex px-4 py-3">
<div class="mr-6">
<span class="inline-block rounded-pill bg-smoke-dark h-3 w-3 mr-1"></span>
<span class="inline-block rounded-pill bg-smoke-dark h-3 w-3 mr-1"></span>
<span class="inline-block rounded-pill bg-smoke-dark h-3 w-3"></span>
<span class="inline-block rounded-full bg-smoke-dark h-3 w-3 mr-1"></span>
<span class="inline-block rounded-full bg-smoke-dark h-3 w-3 mr-1"></span>
<span class="inline-block rounded-full bg-smoke-dark h-3 w-3"></span>
</div>
<div class="flex-1 bg-white border border-smoke rounded mr-4"></div>
</div>

10
docs/source/docs/shadows.blade.md
View File

@ -110,27 +110,27 @@ For more information about Tailwind's responsive design features, check out the
@component('_partials.responsive-code-sample')
@slot('none')
<div class="flex justify-center">
<div class="shadow px-4 py-2 bg-smoke-lighter opacity-100 w-24 h-24 rounded-pill"></div>
<div class="shadow px-4 py-2 bg-smoke-lighter opacity-100 w-24 h-24 rounded-full"></div>
</div>
@endslot
@slot('sm')
<div class="flex justify-center">
<div class="shadow-md px-4 py-2 bg-smoke-lighter opacity-100 w-24 h-24 rounded-pill"></div>
<div class="shadow-md px-4 py-2 bg-smoke-lighter opacity-100 w-24 h-24 rounded-full"></div>
</div>
@endslot
@slot('md')
<div class="flex justify-center">
<div class="shadow-lg px-4 py-2 bg-smoke-lighter opacity-100 w-24 h-24 rounded-pill"></div>
<div class="shadow-lg px-4 py-2 bg-smoke-lighter opacity-100 w-24 h-24 rounded-full"></div>
</div>
@endslot
@slot('lg')
<div class="flex justify-center">
<div class="shadow-inner px-4 py-2 bg-smoke-lighter opacity-100 w-24 h-24 rounded-pill"></div>
<div class="shadow-inner px-4 py-2 bg-smoke-lighter opacity-100 w-24 h-24 rounded-full"></div>
</div>
@endslot
@slot('xl')
<div class="flex justify-center">
<div class="shadow-none px-4 py-2 bg-smoke-lighter opacity-100 w-24 h-24 rounded-pill"></div>
<div class="shadow-none px-4 py-2 bg-smoke-lighter opacity-100 w-24 h-24 rounded-full"></div>
</div>
@endslot
@slot('code')

14
docs/source/docs/visibility.blade.md
View File

@ -52,7 +52,7 @@ title: "Visibility"
Use `.visible` to make an element visible. This will typically be used as a reset when using the `.invisible` utility.
@component('_partials.code-sample', ['class' => 'flex justify-center'])
<div class="visible bg-smoke w-24 h-24 rounded-pill"></div>
<div class="visible bg-smoke w-24 h-24 rounded-full"></div>
@endcomponent
### Invisible
@ -60,7 +60,7 @@ Use `.visible` to make an element visible. This will typically be used as a rese
Use `.invisible` to hide an element, but still maintain it's space.
@component('_partials.code-sample', ['class' => 'flex justify-center'])
<div class="invisible bg-smoke w-24 h-24 rounded-pill"></div>
<div class="invisible bg-smoke w-24 h-24 rounded-full"></div>
@endcomponent
@ -73,27 +73,27 @@ For more information about Tailwind's responsive design features, check out the
@component('_partials.responsive-code-sample')
@slot('none')
<div class="flex justify-center">
<div class="visible bg-smoke w-24 h-24 rounded-pill"></div>
<div class="visible bg-smoke w-24 h-24 rounded-full"></div>
</div>
@endslot
@slot('sm')
<div class="flex justify-center">
<div class="invisible bg-smoke w-24 h-24 rounded-pill"></div>
<div class="invisible bg-smoke w-24 h-24 rounded-full"></div>
</div>
@endslot
@slot('md')
<div class="flex justify-center">
<div class="visible bg-smoke w-24 h-24 rounded-pill"></div>
<div class="visible bg-smoke w-24 h-24 rounded-full"></div>
</div>
@endslot
@slot('lg')
<div class="flex justify-center">
<div class="invisible bg-smoke w-24 h-24 rounded-pill"></div>
<div class="invisible bg-smoke w-24 h-24 rounded-full"></div>
</div>
@endslot
@slot('xl')
<div class="flex justify-center">
<div class="visible bg-smoke w-24 h-24 rounded-pill"></div>
<div class="visible bg-smoke w-24 h-24 rounded-full"></div>
</div>
@endslot
@slot('code')