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

Combine sides and sizes for rounded utilities, like we do with border width

Browse Source
This commit is contained in:
Adam Wathan 2017-11-11 13:19:12 -05:00
parent 5e6bfb2f9e
commit d1deaba4c5
2 changed files with 484 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

530
__tests__/fixtures/tailwind-output.css
View File

@ -2116,40 +2116,120 @@ button,
border-radius: .25rem;
}
.rounded-t {
border-top-right-radius: .25rem;
border-top-left-radius: .25rem;
}
.rounded-r {
border-top-right-radius: .25rem;
border-bottom-right-radius: .25rem;
}
.rounded-b {
border-bottom-right-radius: .25rem;
border-bottom-left-radius: .25rem;
}
.rounded-l {
border-top-left-radius: .25rem;
border-bottom-left-radius: .25rem;
}
.rounded-sm {
border-radius: .125rem;
}
.rounded-t-sm {
border-top-right-radius: .125rem;
border-top-left-radius: .125rem;
}
.rounded-r-sm {
border-top-right-radius: .125rem;
border-bottom-right-radius: .125rem;
}
.rounded-b-sm {
border-bottom-right-radius: .125rem;
border-bottom-left-radius: .125rem;
}
.rounded-l-sm {
border-top-left-radius: .125rem;
border-bottom-left-radius: .125rem;
}
.rounded-lg {
border-radius: .5rem;
}
.rounded-t-lg {
border-top-right-radius: .5rem;
border-top-left-radius: .5rem;
}
.rounded-r-lg {
border-top-right-radius: .5rem;
border-bottom-right-radius: .5rem;
}
.rounded-b-lg {
border-bottom-right-radius: .5rem;
border-bottom-left-radius: .5rem;
}
.rounded-l-lg {
border-top-left-radius: .5rem;
border-bottom-left-radius: .5rem;
}
.rounded-full {
border-radius: 9999px;
}
.rounded-t-full {
border-top-right-radius: 9999px;
border-top-left-radius: 9999px;
}
.rounded-r-full {
border-top-right-radius: 9999px;
border-bottom-right-radius: 9999px;
}
.rounded-b-full {
border-bottom-right-radius: 9999px;
border-bottom-left-radius: 9999px;
}
.rounded-l-full {
border-top-left-radius: 9999px;
border-bottom-left-radius: 9999px;
}
.rounded-none {
border-radius: 0;
}
.rounded-t {
.rounded-t-none {
border-top-right-radius: 0;
border-top-left-radius: 0;
}
.rounded-r-none {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.rounded-b-none {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.rounded-r {
.rounded-l-none {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
.rounded-b {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.rounded-l {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.block {
@ -5076,40 +5156,120 @@ button,
border-radius: .25rem;
}
.sm\:rounded-t {
border-top-right-radius: .25rem;
border-top-left-radius: .25rem;
}
.sm\:rounded-r {
border-top-right-radius: .25rem;
border-bottom-right-radius: .25rem;
}
.sm\:rounded-b {
border-bottom-right-radius: .25rem;
border-bottom-left-radius: .25rem;
}
.sm\:rounded-l {
border-top-left-radius: .25rem;
border-bottom-left-radius: .25rem;
}
.sm\:rounded-sm {
border-radius: .125rem;
}
.sm\:rounded-t-sm {
border-top-right-radius: .125rem;
border-top-left-radius: .125rem;
}
.sm\:rounded-r-sm {
border-top-right-radius: .125rem;
border-bottom-right-radius: .125rem;
}
.sm\:rounded-b-sm {
border-bottom-right-radius: .125rem;
border-bottom-left-radius: .125rem;
}
.sm\:rounded-l-sm {
border-top-left-radius: .125rem;
border-bottom-left-radius: .125rem;
}
.sm\:rounded-lg {
border-radius: .5rem;
}
.sm\:rounded-t-lg {
border-top-right-radius: .5rem;
border-top-left-radius: .5rem;
}
.sm\:rounded-r-lg {
border-top-right-radius: .5rem;
border-bottom-right-radius: .5rem;
}
.sm\:rounded-b-lg {
border-bottom-right-radius: .5rem;
border-bottom-left-radius: .5rem;
}
.sm\:rounded-l-lg {
border-top-left-radius: .5rem;
border-bottom-left-radius: .5rem;
}
.sm\:rounded-full {
border-radius: 9999px;
}
.sm\:rounded-t-full {
border-top-right-radius: 9999px;
border-top-left-radius: 9999px;
}
.sm\:rounded-r-full {
border-top-right-radius: 9999px;
border-bottom-right-radius: 9999px;
}
.sm\:rounded-b-full {
border-bottom-right-radius: 9999px;
border-bottom-left-radius: 9999px;
}
.sm\:rounded-l-full {
border-top-left-radius: 9999px;
border-bottom-left-radius: 9999px;
}
.sm\:rounded-none {
border-radius: 0;
}
.sm\:rounded-t {
.sm\:rounded-t-none {
border-top-right-radius: 0;
border-top-left-radius: 0;
}
.sm\:rounded-r-none {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.sm\:rounded-b-none {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.sm\:rounded-r {
.sm\:rounded-l-none {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
.sm\:rounded-b {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.sm\:rounded-l {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.sm\:block {
@ -8037,40 +8197,120 @@ button,
border-radius: .25rem;
}
.md\:rounded-t {
border-top-right-radius: .25rem;
border-top-left-radius: .25rem;
}
.md\:rounded-r {
border-top-right-radius: .25rem;
border-bottom-right-radius: .25rem;
}
.md\:rounded-b {
border-bottom-right-radius: .25rem;
border-bottom-left-radius: .25rem;
}
.md\:rounded-l {
border-top-left-radius: .25rem;
border-bottom-left-radius: .25rem;
}
.md\:rounded-sm {
border-radius: .125rem;
}
.md\:rounded-t-sm {
border-top-right-radius: .125rem;
border-top-left-radius: .125rem;
}
.md\:rounded-r-sm {
border-top-right-radius: .125rem;
border-bottom-right-radius: .125rem;
}
.md\:rounded-b-sm {
border-bottom-right-radius: .125rem;
border-bottom-left-radius: .125rem;
}
.md\:rounded-l-sm {
border-top-left-radius: .125rem;
border-bottom-left-radius: .125rem;
}
.md\:rounded-lg {
border-radius: .5rem;
}
.md\:rounded-t-lg {
border-top-right-radius: .5rem;
border-top-left-radius: .5rem;
}
.md\:rounded-r-lg {
border-top-right-radius: .5rem;
border-bottom-right-radius: .5rem;
}
.md\:rounded-b-lg {
border-bottom-right-radius: .5rem;
border-bottom-left-radius: .5rem;
}
.md\:rounded-l-lg {
border-top-left-radius: .5rem;
border-bottom-left-radius: .5rem;
}
.md\:rounded-full {
border-radius: 9999px;
}
.md\:rounded-t-full {
border-top-right-radius: 9999px;
border-top-left-radius: 9999px;
}
.md\:rounded-r-full {
border-top-right-radius: 9999px;
border-bottom-right-radius: 9999px;
}
.md\:rounded-b-full {
border-bottom-right-radius: 9999px;
border-bottom-left-radius: 9999px;
}
.md\:rounded-l-full {
border-top-left-radius: 9999px;
border-bottom-left-radius: 9999px;
}
.md\:rounded-none {
border-radius: 0;
}
.md\:rounded-t {
.md\:rounded-t-none {
border-top-right-radius: 0;
border-top-left-radius: 0;
}
.md\:rounded-r-none {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.md\:rounded-b-none {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.md\:rounded-r {
.md\:rounded-l-none {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
.md\:rounded-b {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.md\:rounded-l {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.md\:block {
@ -10998,40 +11238,120 @@ button,
border-radius: .25rem;
}
.lg\:rounded-t {
border-top-right-radius: .25rem;
border-top-left-radius: .25rem;
}
.lg\:rounded-r {
border-top-right-radius: .25rem;
border-bottom-right-radius: .25rem;
}
.lg\:rounded-b {
border-bottom-right-radius: .25rem;
border-bottom-left-radius: .25rem;
}
.lg\:rounded-l {
border-top-left-radius: .25rem;
border-bottom-left-radius: .25rem;
}
.lg\:rounded-sm {
border-radius: .125rem;
}
.lg\:rounded-t-sm {
border-top-right-radius: .125rem;
border-top-left-radius: .125rem;
}
.lg\:rounded-r-sm {
border-top-right-radius: .125rem;
border-bottom-right-radius: .125rem;
}
.lg\:rounded-b-sm {
border-bottom-right-radius: .125rem;
border-bottom-left-radius: .125rem;
}
.lg\:rounded-l-sm {
border-top-left-radius: .125rem;
border-bottom-left-radius: .125rem;
}
.lg\:rounded-lg {
border-radius: .5rem;
}
.lg\:rounded-t-lg {
border-top-right-radius: .5rem;
border-top-left-radius: .5rem;
}
.lg\:rounded-r-lg {
border-top-right-radius: .5rem;
border-bottom-right-radius: .5rem;
}
.lg\:rounded-b-lg {
border-bottom-right-radius: .5rem;
border-bottom-left-radius: .5rem;
}
.lg\:rounded-l-lg {
border-top-left-radius: .5rem;
border-bottom-left-radius: .5rem;
}
.lg\:rounded-full {
border-radius: 9999px;
}
.lg\:rounded-t-full {
border-top-right-radius: 9999px;
border-top-left-radius: 9999px;
}
.lg\:rounded-r-full {
border-top-right-radius: 9999px;
border-bottom-right-radius: 9999px;
}
.lg\:rounded-b-full {
border-bottom-right-radius: 9999px;
border-bottom-left-radius: 9999px;
}
.lg\:rounded-l-full {
border-top-left-radius: 9999px;
border-bottom-left-radius: 9999px;
}
.lg\:rounded-none {
border-radius: 0;
}
.lg\:rounded-t {
.lg\:rounded-t-none {
border-top-right-radius: 0;
border-top-left-radius: 0;
}
.lg\:rounded-r-none {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.lg\:rounded-b-none {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.lg\:rounded-r {
.lg\:rounded-l-none {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
.lg\:rounded-b {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.lg\:rounded-l {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.lg\:block {
@ -13959,40 +14279,120 @@ button,
border-radius: .25rem;
}
.xl\:rounded-t {
border-top-right-radius: .25rem;
border-top-left-radius: .25rem;
}
.xl\:rounded-r {
border-top-right-radius: .25rem;
border-bottom-right-radius: .25rem;
}
.xl\:rounded-b {
border-bottom-right-radius: .25rem;
border-bottom-left-radius: .25rem;
}
.xl\:rounded-l {
border-top-left-radius: .25rem;
border-bottom-left-radius: .25rem;
}
.xl\:rounded-sm {
border-radius: .125rem;
}
.xl\:rounded-t-sm {
border-top-right-radius: .125rem;
border-top-left-radius: .125rem;
}
.xl\:rounded-r-sm {
border-top-right-radius: .125rem;
border-bottom-right-radius: .125rem;
}
.xl\:rounded-b-sm {
border-bottom-right-radius: .125rem;
border-bottom-left-radius: .125rem;
}
.xl\:rounded-l-sm {
border-top-left-radius: .125rem;
border-bottom-left-radius: .125rem;
}
.xl\:rounded-lg {
border-radius: .5rem;
}
.xl\:rounded-t-lg {
border-top-right-radius: .5rem;
border-top-left-radius: .5rem;
}
.xl\:rounded-r-lg {
border-top-right-radius: .5rem;
border-bottom-right-radius: .5rem;
}
.xl\:rounded-b-lg {
border-bottom-right-radius: .5rem;
border-bottom-left-radius: .5rem;
}
.xl\:rounded-l-lg {
border-top-left-radius: .5rem;
border-bottom-left-radius: .5rem;
}
.xl\:rounded-full {
border-radius: 9999px;
}
.xl\:rounded-t-full {
border-top-right-radius: 9999px;
border-top-left-radius: 9999px;
}
.xl\:rounded-r-full {
border-top-right-radius: 9999px;
border-bottom-right-radius: 9999px;
}
.xl\:rounded-b-full {
border-bottom-right-radius: 9999px;
border-bottom-left-radius: 9999px;
}
.xl\:rounded-l-full {
border-top-left-radius: 9999px;
border-bottom-left-radius: 9999px;
}
.xl\:rounded-none {
border-radius: 0;
}
.xl\:rounded-t {
.xl\:rounded-t-none {
border-top-right-radius: 0;
border-top-left-radius: 0;
}
.xl\:rounded-r-none {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.xl\:rounded-b-none {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.xl\:rounded-r {
.xl\:rounded-l-none {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
.xl\:rounded-b {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.xl\:rounded-l {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.xl\:block {

41
src/generators/rounded.js
View File

@ -1,35 +1,32 @@
import _ from 'lodash'
import defineClass from '../util/defineClass'
import defineClasses from '../util/defineClasses'
function sideVariants() {
function sizedBorder(radius, modifier) {
modifier = modifier === 'default' ? '' : `-${modifier}`
return defineClasses({
'rounded-t': {
'border-bottom-right-radius': '0',
'border-bottom-left-radius': '0',
[`rounded${modifier}`]: {
'border-radius': `${radius}`,
},
'rounded-r': {
'border-bottom-left-radius': '0',
'border-top-left-radius': '0',
[`rounded-t${modifier}`]: {
'border-top-right-radius': `${radius}`,
'border-top-left-radius': `${radius}`,
},
'rounded-b': {
'border-top-left-radius': '0',
'border-top-right-radius': '0',
[`rounded-r${modifier}`]: {
'border-top-right-radius': `${radius}`,
'border-bottom-right-radius': `${radius}`,
},
'rounded-l': {
'border-top-right-radius': '0',
'border-bottom-right-radius': '0',
[`rounded-b${modifier}`]: {
'border-bottom-right-radius': `${radius}`,
'border-bottom-left-radius': `${radius}`,
},
[`rounded-l${modifier}`]: {
'border-top-left-radius': `${radius}`,
'border-bottom-left-radius': `${radius}`,
},
})
}
module.exports = function({ borderRadius }) {
return _(borderRadius)
.map((radius, modifier) => {
return defineClass(modifier === 'default' ? 'rounded' : `rounded-${modifier}`, {
'border-radius': radius,
})
})
.concat(sideVariants())
.value()
return _.flatMap(borderRadius, sizedBorder)
}