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

Merge pull request #196 from tailwindcss/rounded-to-radius

Browse Source 
[0.2] Rework `rounded` utilities to `radius`, add ability to target corners
This commit is contained in:
Adam Wathan 2017-11-13 15:02:36 -05:00 committed by GitHub
commit cd087c6069
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 931 additions and 521 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because it is too large Load Diff

6
defaultConfig.js
View File

@ -410,16 +410,16 @@ module.exports = {
| is provided, it will be made available as the non-suffixed `.rounded`
| utility.
|
| Class name: .rounded{-radius?}
| Class name: .radius-{size}
|
*/
borderRadius: {
default: '.25rem',
'none': '0',
'sm': '.125rem',
'md': '.25rem',
'lg': '.5rem',
'full': '9999px',
'none': '0',
},

26
src/generators/rounded.js
View File

@ -2,28 +2,38 @@ import _ from 'lodash'
import defineClasses from '../util/defineClasses'
function sizedBorder(radius, modifier) {
modifier = modifier === 'default' ? '' : `-${modifier}`
return defineClasses({
[`rounded${modifier}`]: {
[`radius-${modifier}`]: {
'border-radius': `${radius}`,
},
[`rounded-t${modifier}`]: {
'border-top-right-radius': `${radius}`,
[`radius-t-${modifier}`]: {
'border-top-left-radius': `${radius}`,
'border-top-right-radius': `${radius}`,
},
[`rounded-r${modifier}`]: {
[`radius-r-${modifier}`]: {
'border-top-right-radius': `${radius}`,
'border-bottom-right-radius': `${radius}`,
},
[`rounded-b${modifier}`]: {
[`radius-b-${modifier}`]: {
'border-bottom-right-radius': `${radius}`,
'border-bottom-left-radius': `${radius}`,
},
[`rounded-l${modifier}`]: {
[`radius-l-${modifier}`]: {
'border-top-left-radius': `${radius}`,
'border-bottom-left-radius': `${radius}`,
},
[`radius-tr-${modifier}`]: {
'border-top-right-radius': `${radius}`,
},
[`radius-br-${modifier}`]: {
'border-bottom-right-radius': `${radius}`,
},
[`radius-bl-${modifier}`]: {
'border-bottom-left-radius': `${radius}`,
},
[`radius-tl-${modifier}`]: {
'border-top-left-radius': `${radius}`,
},
})
}