mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
Add PostCSS rounded utilities
.pill is now .rounded-pill by default; we could bake this in as a mandatory utility but using it as a modifier makes it easier for people to exclude or change. Not opposed to hard-coding it though.
This commit is contained in:
Adam Wathan
parent
ccc9edf605
commit
c20d971bfa
520
dist/tailwind.css
vendored
520
dist/tailwind.css
vendored
@ -491,6 +491,110 @@ body {
|
||||
border-color: #fdf2f5;
|
||||
}
|
||||
|
||||
.border-dashed {
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
.border-dotted {
|
||||
border-style: dotted;
|
||||
}
|
||||
|
||||
.rounded {
|
||||
border-radius: .25rem;
|
||||
}
|
||||
|
||||
.rounded-t {
|
||||
border-top-left-radius: .25rem;
|
||||
border-top-right-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-bottom-left-radius: .25rem;
|
||||
border-top-left-radius: .25rem;
|
||||
}
|
||||
|
||||
.rounded-sm {
|
||||
border-radius: .125rem;
|
||||
}
|
||||
|
||||
.rounded-t-sm {
|
||||
border-top-left-radius: .125rem;
|
||||
border-top-right-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-bottom-left-radius: .125rem;
|
||||
border-top-left-radius: .125rem;
|
||||
}
|
||||
|
||||
.rounded-lg {
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
.rounded-t-lg {
|
||||
border-top-left-radius: .5rem;
|
||||
border-top-right-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-bottom-left-radius: .5rem;
|
||||
border-top-left-radius: .5rem;
|
||||
}
|
||||
|
||||
.rounded-pill {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.rounded-t-pill {
|
||||
border-top-left-radius: 9999px;
|
||||
border-top-right-radius: 9999px;
|
||||
}
|
||||
|
||||
.rounded-r-pill {
|
||||
border-top-right-radius: 9999px;
|
||||
border-bottom-right-radius: 9999px;
|
||||
}
|
||||
|
||||
.rounded-b-pill {
|
||||
border-bottom-right-radius: 9999px;
|
||||
border-bottom-left-radius: 9999px;
|
||||
}
|
||||
|
||||
.rounded-l-pill {
|
||||
border-bottom-left-radius: 9999px;
|
||||
border-top-left-radius: 9999px;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
}
|
||||
@ -1241,6 +1345,110 @@ body {
|
||||
border-color: #fdf2f5;
|
||||
}
|
||||
|
||||
.sm\:border-dashed {
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
.sm\:border-dotted {
|
||||
border-style: dotted;
|
||||
}
|
||||
|
||||
.sm\:rounded {
|
||||
border-radius: .25rem;
|
||||
}
|
||||
|
||||
.sm\:rounded-t {
|
||||
border-top-left-radius: .25rem;
|
||||
border-top-right-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-bottom-left-radius: .25rem;
|
||||
border-top-left-radius: .25rem;
|
||||
}
|
||||
|
||||
.sm\:rounded-sm {
|
||||
border-radius: .125rem;
|
||||
}
|
||||
|
||||
.sm\:rounded-t-sm {
|
||||
border-top-left-radius: .125rem;
|
||||
border-top-right-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-bottom-left-radius: .125rem;
|
||||
border-top-left-radius: .125rem;
|
||||
}
|
||||
|
||||
.sm\:rounded-lg {
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
.sm\:rounded-t-lg {
|
||||
border-top-left-radius: .5rem;
|
||||
border-top-right-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-bottom-left-radius: .5rem;
|
||||
border-top-left-radius: .5rem;
|
||||
}
|
||||
|
||||
.sm\:rounded-pill {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.sm\:rounded-t-pill {
|
||||
border-top-left-radius: 9999px;
|
||||
border-top-right-radius: 9999px;
|
||||
}
|
||||
|
||||
.sm\:rounded-r-pill {
|
||||
border-top-right-radius: 9999px;
|
||||
border-bottom-right-radius: 9999px;
|
||||
}
|
||||
|
||||
.sm\:rounded-b-pill {
|
||||
border-bottom-right-radius: 9999px;
|
||||
border-bottom-left-radius: 9999px;
|
||||
}
|
||||
|
||||
.sm\:rounded-l-pill {
|
||||
border-bottom-left-radius: 9999px;
|
||||
border-top-left-radius: 9999px;
|
||||
}
|
||||
|
||||
.sm\:fixed {
|
||||
position: fixed;
|
||||
}
|
||||
@ -1992,6 +2200,110 @@ body {
|
||||
border-color: #fdf2f5;
|
||||
}
|
||||
|
||||
.md\:border-dashed {
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
.md\:border-dotted {
|
||||
border-style: dotted;
|
||||
}
|
||||
|
||||
.md\:rounded {
|
||||
border-radius: .25rem;
|
||||
}
|
||||
|
||||
.md\:rounded-t {
|
||||
border-top-left-radius: .25rem;
|
||||
border-top-right-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-bottom-left-radius: .25rem;
|
||||
border-top-left-radius: .25rem;
|
||||
}
|
||||
|
||||
.md\:rounded-sm {
|
||||
border-radius: .125rem;
|
||||
}
|
||||
|
||||
.md\:rounded-t-sm {
|
||||
border-top-left-radius: .125rem;
|
||||
border-top-right-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-bottom-left-radius: .125rem;
|
||||
border-top-left-radius: .125rem;
|
||||
}
|
||||
|
||||
.md\:rounded-lg {
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
.md\:rounded-t-lg {
|
||||
border-top-left-radius: .5rem;
|
||||
border-top-right-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-bottom-left-radius: .5rem;
|
||||
border-top-left-radius: .5rem;
|
||||
}
|
||||
|
||||
.md\:rounded-pill {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.md\:rounded-t-pill {
|
||||
border-top-left-radius: 9999px;
|
||||
border-top-right-radius: 9999px;
|
||||
}
|
||||
|
||||
.md\:rounded-r-pill {
|
||||
border-top-right-radius: 9999px;
|
||||
border-bottom-right-radius: 9999px;
|
||||
}
|
||||
|
||||
.md\:rounded-b-pill {
|
||||
border-bottom-right-radius: 9999px;
|
||||
border-bottom-left-radius: 9999px;
|
||||
}
|
||||
|
||||
.md\:rounded-l-pill {
|
||||
border-bottom-left-radius: 9999px;
|
||||
border-top-left-radius: 9999px;
|
||||
}
|
||||
|
||||
.md\:fixed {
|
||||
position: fixed;
|
||||
}
|
||||
@ -2743,6 +3055,110 @@ body {
|
||||
border-color: #fdf2f5;
|
||||
}
|
||||
|
||||
.lg\:border-dashed {
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
.lg\:border-dotted {
|
||||
border-style: dotted;
|
||||
}
|
||||
|
||||
.lg\:rounded {
|
||||
border-radius: .25rem;
|
||||
}
|
||||
|
||||
.lg\:rounded-t {
|
||||
border-top-left-radius: .25rem;
|
||||
border-top-right-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-bottom-left-radius: .25rem;
|
||||
border-top-left-radius: .25rem;
|
||||
}
|
||||
|
||||
.lg\:rounded-sm {
|
||||
border-radius: .125rem;
|
||||
}
|
||||
|
||||
.lg\:rounded-t-sm {
|
||||
border-top-left-radius: .125rem;
|
||||
border-top-right-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-bottom-left-radius: .125rem;
|
||||
border-top-left-radius: .125rem;
|
||||
}
|
||||
|
||||
.lg\:rounded-lg {
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
.lg\:rounded-t-lg {
|
||||
border-top-left-radius: .5rem;
|
||||
border-top-right-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-bottom-left-radius: .5rem;
|
||||
border-top-left-radius: .5rem;
|
||||
}
|
||||
|
||||
.lg\:rounded-pill {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.lg\:rounded-t-pill {
|
||||
border-top-left-radius: 9999px;
|
||||
border-top-right-radius: 9999px;
|
||||
}
|
||||
|
||||
.lg\:rounded-r-pill {
|
||||
border-top-right-radius: 9999px;
|
||||
border-bottom-right-radius: 9999px;
|
||||
}
|
||||
|
||||
.lg\:rounded-b-pill {
|
||||
border-bottom-right-radius: 9999px;
|
||||
border-bottom-left-radius: 9999px;
|
||||
}
|
||||
|
||||
.lg\:rounded-l-pill {
|
||||
border-bottom-left-radius: 9999px;
|
||||
border-top-left-radius: 9999px;
|
||||
}
|
||||
|
||||
.lg\:fixed {
|
||||
position: fixed;
|
||||
}
|
||||
@ -3494,6 +3910,110 @@ body {
|
||||
border-color: #fdf2f5;
|
||||
}
|
||||
|
||||
.xl\:border-dashed {
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
.xl\:border-dotted {
|
||||
border-style: dotted;
|
||||
}
|
||||
|
||||
.xl\:rounded {
|
||||
border-radius: .25rem;
|
||||
}
|
||||
|
||||
.xl\:rounded-t {
|
||||
border-top-left-radius: .25rem;
|
||||
border-top-right-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-bottom-left-radius: .25rem;
|
||||
border-top-left-radius: .25rem;
|
||||
}
|
||||
|
||||
.xl\:rounded-sm {
|
||||
border-radius: .125rem;
|
||||
}
|
||||
|
||||
.xl\:rounded-t-sm {
|
||||
border-top-left-radius: .125rem;
|
||||
border-top-right-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-bottom-left-radius: .125rem;
|
||||
border-top-left-radius: .125rem;
|
||||
}
|
||||
|
||||
.xl\:rounded-lg {
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
.xl\:rounded-t-lg {
|
||||
border-top-left-radius: .5rem;
|
||||
border-top-right-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-bottom-left-radius: .5rem;
|
||||
border-top-left-radius: .5rem;
|
||||
}
|
||||
|
||||
.xl\:rounded-pill {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.xl\:rounded-t-pill {
|
||||
border-top-left-radius: 9999px;
|
||||
border-top-right-radius: 9999px;
|
||||
}
|
||||
|
||||
.xl\:rounded-r-pill {
|
||||
border-top-right-radius: 9999px;
|
||||
border-bottom-right-radius: 9999px;
|
||||
}
|
||||
|
||||
.xl\:rounded-b-pill {
|
||||
border-bottom-right-radius: 9999px;
|
||||
border-bottom-left-radius: 9999px;
|
||||
}
|
||||
|
||||
.xl\:rounded-l-pill {
|
||||
border-bottom-left-radius: 9999px;
|
||||
border-top-left-radius: 9999px;
|
||||
}
|
||||
|
||||
.xl\:fixed {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
2
dist/tailwind.css.map
vendored
2
dist/tailwind.css.map
vendored
File diff suppressed because one or more lines are too long
@ -112,6 +112,14 @@ export default {
|
||||
'4': '4px',
|
||||
'8': '8px',
|
||||
},
|
||||
rounded: {
|
||||
default: '.25rem',
|
||||
modifiers: {
|
||||
sm: '.125rem',
|
||||
lg: '.5rem',
|
||||
pill: '9999px',
|
||||
}
|
||||
},
|
||||
colors: [
|
||||
{
|
||||
'light': 'white',
|
||||
|
||||
57
src/generators/rounded.js
Normal file
57
src/generators/rounded.js
Normal file
@ -0,0 +1,57 @@
|
||||
import _ from 'lodash'
|
||||
import defineClasses from '../util/defineClasses'
|
||||
|
||||
function defaultRounded(radius) {
|
||||
return defineClasses({
|
||||
'rounded': {
|
||||
'border-radius': `${radius}`,
|
||||
},
|
||||
'rounded-t': {
|
||||
'border-top-left-radius': `${radius}`,
|
||||
'border-top-right-radius': `${radius}`,
|
||||
},
|
||||
'rounded-r': {
|
||||
'border-top-right-radius': `${radius}`,
|
||||
'border-bottom-right-radius': `${radius}`,
|
||||
},
|
||||
'rounded-b': {
|
||||
'border-bottom-right-radius': `${radius}`,
|
||||
'border-bottom-left-radius': `${radius}`,
|
||||
},
|
||||
'rounded-l': {
|
||||
'border-bottom-left-radius': `${radius}`,
|
||||
'border-top-left-radius': `${radius}`,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
function roundedVariant(modifier, radius) {
|
||||
return defineClasses({
|
||||
[`rounded-${modifier}`]: {
|
||||
'border-radius': `${radius}`,
|
||||
},
|
||||
[`rounded-t-${modifier}`]: {
|
||||
'border-top-left-radius': `${radius}`,
|
||||
'border-top-right-radius': `${radius}`,
|
||||
},
|
||||
[`rounded-r-${modifier}`]: {
|
||||
'border-top-right-radius': `${radius}`,
|
||||
'border-bottom-right-radius': `${radius}`,
|
||||
},
|
||||
[`rounded-b-${modifier}`]: {
|
||||
'border-bottom-right-radius': `${radius}`,
|
||||
'border-bottom-left-radius': `${radius}`,
|
||||
},
|
||||
[`rounded-l-${modifier}`]: {
|
||||
'border-bottom-left-radius': `${radius}`,
|
||||
'border-top-left-radius': `${radius}`,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
module.exports = function({borders}) {
|
||||
return _.flatten([
|
||||
defaultRounded(borders.rounded.default),
|
||||
..._.map(borders.rounded.modifiers, (radius, modifier) => roundedVariant(modifier, radius)),
|
||||
])
|
||||
}
|
||||
@ -4,6 +4,7 @@ import backgroundColors from '../generators/backgroundColors'
|
||||
import backgroundSize from '../generators/backgroundSize'
|
||||
import borderWidths from '../generators/borderWidths'
|
||||
import borderColors from '../generators/borderColors'
|
||||
import rounded from '../generators/rounded'
|
||||
import position from '../generators/position'
|
||||
import overflow from '../generators/overflow'
|
||||
import constrain from '../generators/constrain'
|
||||
@ -19,6 +20,7 @@ export default function(options) {
|
||||
backgroundSize(options),
|
||||
borderWidths(options),
|
||||
borderColors(options),
|
||||
rounded(options),
|
||||
position(options),
|
||||
overflow(options),
|
||||
constrain(options),
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user