From 4785ba40ca7b01fb57abd318159829643576a8e9 Mon Sep 17 00:00:00 2001 From: Cody Date: Thu, 23 Aug 2018 23:25:27 -0500 Subject: [PATCH 01/10] add column rule style utility --- defaultConfig.stub.js | 1 + src/generators/columnRuleStyle.js | 18 ++++++++++++++++++ src/utilityModules.js | 2 ++ 3 files changed, 21 insertions(+) create mode 100644 src/generators/columnRuleStyle.js diff --git a/defaultConfig.stub.js b/defaultConfig.stub.js index 5d680880c8fb..3640af3b315c 100644 --- a/defaultConfig.stub.js +++ b/defaultConfig.stub.js @@ -871,6 +871,7 @@ module.exports = { borderRadius: ['responsive'], borderStyle: ['responsive'], borderWidths: ['responsive'], + columnRuleStyle: ['responsive'], cursor: ['responsive'], display: ['responsive'], flexbox: ['responsive'], diff --git a/src/generators/columnRuleStyle.js b/src/generators/columnRuleStyle.js new file mode 100644 index 000000000000..d389bb31c4a2 --- /dev/null +++ b/src/generators/columnRuleStyle.js @@ -0,0 +1,18 @@ +import defineClasses from '../util/defineClasses' + +export default function() { + return defineClasses({ + 'column-solid': { + 'column-rule-style': 'solid', + }, + 'column-dashed': { + 'column-rule-style': 'dashed', + }, + 'column-dotted': { + 'column-rule-style': 'dotted', + }, + 'column-none': { + 'column-rule-style': 'none', + }, + }) +} diff --git a/src/utilityModules.js b/src/utilityModules.js index fd5aa154a5b8..08b1eb3c6b24 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -10,6 +10,7 @@ import borderColors from './generators/borderColors' import borderRadius from './generators/borderRadius' import borderStyle from './generators/borderStyle' import borderWidths from './generators/borderWidths' +import columnRuleStyle from './generators/columnRuleStyle' import cursor from './generators/cursor' import display from './generators/display' import flexbox from './generators/flexbox' @@ -60,6 +61,7 @@ export default [ { name: 'borderRadius', generator: borderRadius }, { name: 'borderStyle', generator: borderStyle }, { name: 'borderWidths', generator: borderWidths }, + { name: 'columnRuleStyle', generator: columnRuleStyle }, { name: 'cursor', generator: cursor }, { name: 'display', generator: display }, { name: 'flexbox', generator: flexbox }, From b849c3af136661a25c5caf99adfc597a065d88d4 Mon Sep 17 00:00:00 2001 From: Cody Date: Thu, 23 Aug 2018 23:58:47 -0500 Subject: [PATCH 02/10] add column count utility --- defaultConfig.stub.js | 19 +++++++++++++++++++ src/generators/columnCount.js | 10 ++++++++++ src/utilityModules.js | 2 ++ 3 files changed, 31 insertions(+) create mode 100644 src/generators/columnCount.js diff --git a/defaultConfig.stub.js b/defaultConfig.stub.js index 3640af3b315c..9ea98ee0ce4e 100644 --- a/defaultConfig.stub.js +++ b/defaultConfig.stub.js @@ -839,6 +839,24 @@ module.exports = { 'current': 'currentColor', }, + /* + |----------------------------------------------------------------------------- + | Column Count + |----------------------------------------------------------------------------- + | + | Here is where you define your column count values + | + | Class name: .column-{count} + | + */ + + columnCount : { + '0': 'initial', + '2': '2', + '3': '3', + '4': '4', + }, + /* |----------------------------------------------------------------------------- @@ -871,6 +889,7 @@ module.exports = { borderRadius: ['responsive'], borderStyle: ['responsive'], borderWidths: ['responsive'], + columnCount: ['responsive'], columnRuleStyle: ['responsive'], cursor: ['responsive'], display: ['responsive'], diff --git a/src/generators/columnCount.js b/src/generators/columnCount.js new file mode 100644 index 000000000000..9ae3acaf6cc2 --- /dev/null +++ b/src/generators/columnCount.js @@ -0,0 +1,10 @@ +import _ from 'lodash' +import defineClass from '../util/defineClass' + +export default function({ columnCount }) { + return _.map(columnCount, (value, modifier) => { + return defineClass(`column-${modifier}`, { + 'column-count': `${value}`, + }) + }) +} diff --git a/src/utilityModules.js b/src/utilityModules.js index 08b1eb3c6b24..45cc9709e61f 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -10,6 +10,7 @@ import borderColors from './generators/borderColors' import borderRadius from './generators/borderRadius' import borderStyle from './generators/borderStyle' import borderWidths from './generators/borderWidths' +import columnCount from './generators/columnCount' import columnRuleStyle from './generators/columnRuleStyle' import cursor from './generators/cursor' import display from './generators/display' @@ -61,6 +62,7 @@ export default [ { name: 'borderRadius', generator: borderRadius }, { name: 'borderStyle', generator: borderStyle }, { name: 'borderWidths', generator: borderWidths }, + { name: 'columnCount', generator: columnCount }, { name: 'columnRuleStyle', generator: columnRuleStyle }, { name: 'cursor', generator: cursor }, { name: 'display', generator: display }, From c974471ad677c9b2fa0c5cad81157463eb8ea755 Mon Sep 17 00:00:00 2001 From: Cody Date: Fri, 24 Aug 2018 00:02:11 -0500 Subject: [PATCH 03/10] add column span utility --- defaultConfig.stub.js | 1 + src/generators/columnSpan.js | 12 ++++++++++++ src/utilityModules.js | 2 ++ 3 files changed, 15 insertions(+) create mode 100644 src/generators/columnSpan.js diff --git a/defaultConfig.stub.js b/defaultConfig.stub.js index 9ea98ee0ce4e..c000e82f3f6c 100644 --- a/defaultConfig.stub.js +++ b/defaultConfig.stub.js @@ -891,6 +891,7 @@ module.exports = { borderWidths: ['responsive'], columnCount: ['responsive'], columnRuleStyle: ['responsive'], + columnSpan: ['responsive'], cursor: ['responsive'], display: ['responsive'], flexbox: ['responsive'], diff --git a/src/generators/columnSpan.js b/src/generators/columnSpan.js new file mode 100644 index 000000000000..1f9af3cc11aa --- /dev/null +++ b/src/generators/columnSpan.js @@ -0,0 +1,12 @@ +import defineClasses from '../util/defineClasses' + +export default function() { + return defineClasses({ + 'column-span-all': { + 'column-span': 'all', + }, + 'column-span-none': { + 'column-span': 'none', + }, + }) +} diff --git a/src/utilityModules.js b/src/utilityModules.js index 45cc9709e61f..5f754df98e35 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -12,6 +12,7 @@ import borderStyle from './generators/borderStyle' import borderWidths from './generators/borderWidths' import columnCount from './generators/columnCount' import columnRuleStyle from './generators/columnRuleStyle' +import columnSpan from './generators/columnSpan' import cursor from './generators/cursor' import display from './generators/display' import flexbox from './generators/flexbox' @@ -64,6 +65,7 @@ export default [ { name: 'borderWidths', generator: borderWidths }, { name: 'columnCount', generator: columnCount }, { name: 'columnRuleStyle', generator: columnRuleStyle }, + { name: 'columnSpan', generator: columnSpan }, { name: 'cursor', generator: cursor }, { name: 'display', generator: display }, { name: 'flexbox', generator: flexbox }, From ce70c72849a387c264ec9ada28d03bde3e420db4 Mon Sep 17 00:00:00 2001 From: Cody Date: Fri, 24 Aug 2018 00:15:43 -0500 Subject: [PATCH 04/10] add column fill utility --- defaultConfig.stub.js | 1 + src/generators/columnFill.js | 15 +++++++++++++++ src/utilityModules.js | 2 ++ 3 files changed, 18 insertions(+) create mode 100644 src/generators/columnFill.js diff --git a/defaultConfig.stub.js b/defaultConfig.stub.js index c000e82f3f6c..d9af5faa817b 100644 --- a/defaultConfig.stub.js +++ b/defaultConfig.stub.js @@ -890,6 +890,7 @@ module.exports = { borderStyle: ['responsive'], borderWidths: ['responsive'], columnCount: ['responsive'], + columnFill: ['responsive'], columnRuleStyle: ['responsive'], columnSpan: ['responsive'], cursor: ['responsive'], diff --git a/src/generators/columnFill.js b/src/generators/columnFill.js new file mode 100644 index 000000000000..47a71ce82ba2 --- /dev/null +++ b/src/generators/columnFill.js @@ -0,0 +1,15 @@ +import defineClasses from '../util/defineClasses' + +export default function() { + return defineClasses({ + 'column-auto': { + 'column-fill': 'auto', + }, + 'column-balance': { + 'column-fill': 'balance', + }, + 'column-balance-all': { + 'column-fill': 'balance-all', + }, + }) +} diff --git a/src/utilityModules.js b/src/utilityModules.js index 5f754df98e35..8f9f6e84b48e 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -11,6 +11,7 @@ import borderRadius from './generators/borderRadius' import borderStyle from './generators/borderStyle' import borderWidths from './generators/borderWidths' import columnCount from './generators/columnCount' +import columnFill from './generators/columnFill' import columnRuleStyle from './generators/columnRuleStyle' import columnSpan from './generators/columnSpan' import cursor from './generators/cursor' @@ -64,6 +65,7 @@ export default [ { name: 'borderStyle', generator: borderStyle }, { name: 'borderWidths', generator: borderWidths }, { name: 'columnCount', generator: columnCount }, + { name: 'columnFill', generator: columnFill }, { name: 'columnRuleStyle', generator: columnRuleStyle }, { name: 'columnSpan', generator: columnSpan }, { name: 'cursor', generator: cursor }, From 3fdca1fc514dab97c4ade5720ae5598a38dacede Mon Sep 17 00:00:00 2001 From: Cody Date: Fri, 24 Aug 2018 11:10:49 -0500 Subject: [PATCH 05/10] add column rule color utility --- defaultConfig.stub.js | 16 ++++++++++++++++ src/generators/columnRuleColors.js | 10 ++++++++++ src/utilityModules.js | 2 ++ 3 files changed, 28 insertions(+) create mode 100644 src/generators/columnRuleColors.js diff --git a/defaultConfig.stub.js b/defaultConfig.stub.js index d9af5faa817b..ed4bc27127bd 100644 --- a/defaultConfig.stub.js +++ b/defaultConfig.stub.js @@ -857,6 +857,21 @@ module.exports = { '4': '4', }, + /* + |----------------------------------------------------------------------------- + | Column Rule Colors + |----------------------------------------------------------------------------- + | + | Here is where you define your column rule colors. By default these use + | the color palette we defined above, however you're welcome to set + | these independently if that makes sense for your project. + | + | Class name: .column-{color} + | + */ + + columnRuleColors: colors, + /* |----------------------------------------------------------------------------- @@ -891,6 +906,7 @@ module.exports = { borderWidths: ['responsive'], columnCount: ['responsive'], columnFill: ['responsive'], + columnRuleColors: ['responsive'], columnRuleStyle: ['responsive'], columnSpan: ['responsive'], cursor: ['responsive'], diff --git a/src/generators/columnRuleColors.js b/src/generators/columnRuleColors.js new file mode 100644 index 000000000000..362b4d9ab06c --- /dev/null +++ b/src/generators/columnRuleColors.js @@ -0,0 +1,10 @@ +import _ from 'lodash' +import defineClass from '../util/defineClass' + +export default function({ columnRuleColors }) { + return _.map(columnRuleColors, (color, className) => { + return defineClass(`column-${className}`, { + 'column-rule-color': color, + }) + }) +} diff --git a/src/utilityModules.js b/src/utilityModules.js index 8f9f6e84b48e..d31f4a67383f 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -12,6 +12,7 @@ import borderStyle from './generators/borderStyle' import borderWidths from './generators/borderWidths' import columnCount from './generators/columnCount' import columnFill from './generators/columnFill' +import columnRuleColors from './generators/columnRuleColors' import columnRuleStyle from './generators/columnRuleStyle' import columnSpan from './generators/columnSpan' import cursor from './generators/cursor' @@ -66,6 +67,7 @@ export default [ { name: 'borderWidths', generator: borderWidths }, { name: 'columnCount', generator: columnCount }, { name: 'columnFill', generator: columnFill }, + { name: 'columnRuleColors', generator: columnRuleColors }, { name: 'columnRuleStyle', generator: columnRuleStyle }, { name: 'columnSpan', generator: columnSpan }, { name: 'cursor', generator: cursor }, From fab6efce94457421dc79cae0308a296d6fa88ca8 Mon Sep 17 00:00:00 2001 From: Cody Date: Fri, 24 Aug 2018 11:51:43 -0500 Subject: [PATCH 06/10] add column rule width utility --- defaultConfig.stub.js | 22 ++++++++++++++++++++++ src/generators/columnRuleWidths.js | 10 ++++++++++ src/utilityModules.js | 2 ++ 3 files changed, 34 insertions(+) create mode 100644 src/generators/columnRuleWidths.js diff --git a/defaultConfig.stub.js b/defaultConfig.stub.js index ed4bc27127bd..03612782e44d 100644 --- a/defaultConfig.stub.js +++ b/defaultConfig.stub.js @@ -872,6 +872,27 @@ module.exports = { columnRuleColors: colors, + /* + |----------------------------------------------------------------------------- + | Column Rule Width + |----------------------------------------------------------------------------- + | + | Here is where you define your column rule widths. Take note that column + | rule widths require a special "default" value set as well. This is the + | width that will be used when you do not specify a column rule width. + | + | Class name: .column-rule{-width?} + | + */ + + columnRuleWidths: { + default: '1px', + '0': '0', + '2': '2px', + '4': '4px', + '8': '8px', + }, + /* |----------------------------------------------------------------------------- @@ -908,6 +929,7 @@ module.exports = { columnFill: ['responsive'], columnRuleColors: ['responsive'], columnRuleStyle: ['responsive'], + columnRuleWidths: ['responsive'], columnSpan: ['responsive'], cursor: ['responsive'], display: ['responsive'], diff --git a/src/generators/columnRuleWidths.js b/src/generators/columnRuleWidths.js new file mode 100644 index 000000000000..11f80650f07b --- /dev/null +++ b/src/generators/columnRuleWidths.js @@ -0,0 +1,10 @@ +import _ from 'lodash' +import defineClass from '../util/defineClass' + +export default function({ columnRuleWidths }) { + return _.map(columnRuleWidths, (width, modifier) => { + return defineClass(modifier === 'default' ? 'column-rule' : `column-rule-${modifier}`, { + 'column-rule-width': width, + }) + }) +} diff --git a/src/utilityModules.js b/src/utilityModules.js index d31f4a67383f..04a5ef26101f 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -14,6 +14,7 @@ import columnCount from './generators/columnCount' import columnFill from './generators/columnFill' import columnRuleColors from './generators/columnRuleColors' import columnRuleStyle from './generators/columnRuleStyle' +import columnRuleWidths from './generators/columnRuleWidths' import columnSpan from './generators/columnSpan' import cursor from './generators/cursor' import display from './generators/display' @@ -69,6 +70,7 @@ export default [ { name: 'columnFill', generator: columnFill }, { name: 'columnRuleColors', generator: columnRuleColors }, { name: 'columnRuleStyle', generator: columnRuleStyle }, + { name: 'columnRuleWidths', generator: columnRuleWidths }, { name: 'columnSpan', generator: columnSpan }, { name: 'cursor', generator: cursor }, { name: 'display', generator: display }, From d4f895aae75b17b3ec8d3d00dc949f1223bea518 Mon Sep 17 00:00:00 2001 From: Cody Date: Fri, 24 Aug 2018 12:13:46 -0500 Subject: [PATCH 07/10] add column width utility --- defaultConfig.stub.js | 31 +++++++++++++++++++++++++++++++ src/generators/columnWidth.js | 14 ++++++++++++++ src/utilityModules.js | 2 ++ 3 files changed, 47 insertions(+) create mode 100644 src/generators/columnWidth.js diff --git a/defaultConfig.stub.js b/defaultConfig.stub.js index 03612782e44d..94d5676b0c74 100644 --- a/defaultConfig.stub.js +++ b/defaultConfig.stub.js @@ -857,6 +857,36 @@ module.exports = { '4': '4', }, + + /* + |----------------------------------------------------------------------------- + | Column Widths + |----------------------------------------------------------------------------- + | + | Here is where you define your column width utility sizes. These can be + | percentage based, pixels, rems, or any other units. By default + | we provide a sensible percentage based fraction scale. You + | can, of course, modify these values as needed. + | + | + | It's also worth mentioning that Tailwind automatically escapes + | invalid CSS class name characters, which allows you to have + | awesome classes like .column-w-2/3. + | + | Class name: .column-w-{size} + | + */ + + columnWidth: { + 'auto': 'auto', + '1/2': '50%', + '1/3': '33.33333%', + '1/4': '25%', + '1/5': '20%', + '1/6': '16.66667%', + }, + + /* |----------------------------------------------------------------------------- | Column Rule Colors @@ -927,6 +957,7 @@ module.exports = { borderWidths: ['responsive'], columnCount: ['responsive'], columnFill: ['responsive'], + columnWidth: ['responsive'], columnRuleColors: ['responsive'], columnRuleStyle: ['responsive'], columnRuleWidths: ['responsive'], diff --git a/src/generators/columnWidth.js b/src/generators/columnWidth.js new file mode 100644 index 000000000000..4b035ed20b20 --- /dev/null +++ b/src/generators/columnWidth.js @@ -0,0 +1,14 @@ +import _ from 'lodash' +import defineClass from '../util/defineClass' + +function defineWidths(widths) { + return _.map(widths, (size, modifer) => { + return defineClass(`column-w-${modifer}`, { + 'column-width': `${size}`, + }) + }) +} + +export default function(config) { + return _.flatten([defineWidths(config.columnWidth)]) +} diff --git a/src/utilityModules.js b/src/utilityModules.js index 04a5ef26101f..e3a6f279fb64 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -16,6 +16,7 @@ import columnRuleColors from './generators/columnRuleColors' import columnRuleStyle from './generators/columnRuleStyle' import columnRuleWidths from './generators/columnRuleWidths' import columnSpan from './generators/columnSpan' +import columnWidth from './generators/columnWidth' import cursor from './generators/cursor' import display from './generators/display' import flexbox from './generators/flexbox' @@ -72,6 +73,7 @@ export default [ { name: 'columnRuleStyle', generator: columnRuleStyle }, { name: 'columnRuleWidths', generator: columnRuleWidths }, { name: 'columnSpan', generator: columnSpan }, + { name: 'columnWidth', generator: columnWidth }, { name: 'cursor', generator: cursor }, { name: 'display', generator: display }, { name: 'flexbox', generator: flexbox }, From 12515f846c80c5232448c6978763d9fcd7e3317f Mon Sep 17 00:00:00 2001 From: Cody Date: Fri, 24 Aug 2018 12:15:05 -0500 Subject: [PATCH 08/10] cleanup default config to match core formatting --- defaultConfig.stub.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/defaultConfig.stub.js b/defaultConfig.stub.js index 94d5676b0c74..2f3115b6d36f 100644 --- a/defaultConfig.stub.js +++ b/defaultConfig.stub.js @@ -839,6 +839,7 @@ module.exports = { 'current': 'currentColor', }, + /* |----------------------------------------------------------------------------- | Column Count @@ -887,7 +888,7 @@ module.exports = { }, - /* + /* |----------------------------------------------------------------------------- | Column Rule Colors |----------------------------------------------------------------------------- @@ -902,6 +903,7 @@ module.exports = { columnRuleColors: colors, + /* |----------------------------------------------------------------------------- | Column Rule Width From 662d92d2f7b7aff544bf6fab75488d83f5bfa89b Mon Sep 17 00:00:00 2001 From: Cody Date: Thu, 30 Aug 2018 21:56:47 -0500 Subject: [PATCH 09/10] remove unneeded flatten from columnWidth generator --- src/generators/columnWidth.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/generators/columnWidth.js b/src/generators/columnWidth.js index 4b035ed20b20..85916661663c 100644 --- a/src/generators/columnWidth.js +++ b/src/generators/columnWidth.js @@ -1,14 +1,10 @@ import _ from 'lodash' import defineClass from '../util/defineClass' -function defineWidths(widths) { +export default function({ widths }) { return _.map(widths, (size, modifer) => { return defineClass(`column-w-${modifer}`, { 'column-width': `${size}`, }) }) } - -export default function(config) { - return _.flatten([defineWidths(config.columnWidth)]) -} From 4b5aa4ebe612bad8c6e9a9181d8b7f97f5adeb11 Mon Sep 17 00:00:00 2001 From: Cody Date: Thu, 30 Aug 2018 22:11:50 -0500 Subject: [PATCH 10/10] change css column spec to use the .col shorthand --- __tests__/fixtures/tailwind-output.css | 2116 ++++++++++++++++++++++-- defaultConfig.stub.js | 8 +- src/generators/columnCount.js | 2 +- src/generators/columnFill.js | 6 +- src/generators/columnRuleColors.js | 2 +- src/generators/columnRuleStyle.js | 8 +- src/generators/columnRuleWidths.js | 2 +- src/generators/columnSpan.js | 4 +- src/generators/columnWidth.js | 2 +- 9 files changed, 1985 insertions(+), 165 deletions(-) diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index 7e5cbdb74323..812c28e21db2 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__tests__/fixtures/tailwind-output.css @@ -2794,6 +2794,370 @@ table { border-left-width: 1px; } +.col-0 { + column-count: initial; +} + +.col-2 { + column-count: 2; +} + +.col-3 { + column-count: 3; +} + +.col-4 { + column-count: 4; +} + +.col-auto { + column-fill: auto; +} + +.col-balance { + column-fill: balance; +} + +.col-balance-all { + column-fill: balance-all; +} + +.col-transparent { + column-rule-color: transparent; +} + +.col-black { + column-rule-color: #22292f; +} + +.col-grey-darkest { + column-rule-color: #3d4852; +} + +.col-grey-darker { + column-rule-color: #606f7b; +} + +.col-grey-dark { + column-rule-color: #8795a1; +} + +.col-grey { + column-rule-color: #b8c2cc; +} + +.col-grey-light { + column-rule-color: #dae1e7; +} + +.col-grey-lighter { + column-rule-color: #f1f5f8; +} + +.col-grey-lightest { + column-rule-color: #f8fafc; +} + +.col-white { + column-rule-color: #fff; +} + +.col-red-darkest { + column-rule-color: #3b0d0c; +} + +.col-red-darker { + column-rule-color: #621b18; +} + +.col-red-dark { + column-rule-color: #cc1f1a; +} + +.col-red { + column-rule-color: #e3342f; +} + +.col-red-light { + column-rule-color: #ef5753; +} + +.col-red-lighter { + column-rule-color: #f9acaa; +} + +.col-red-lightest { + column-rule-color: #fcebea; +} + +.col-orange-darkest { + column-rule-color: #462a16; +} + +.col-orange-darker { + column-rule-color: #613b1f; +} + +.col-orange-dark { + column-rule-color: #de751f; +} + +.col-orange { + column-rule-color: #f6993f; +} + +.col-orange-light { + column-rule-color: #faad63; +} + +.col-orange-lighter { + column-rule-color: #fcd9b6; +} + +.col-orange-lightest { + column-rule-color: #fff5eb; +} + +.col-yellow-darkest { + column-rule-color: #453411; +} + +.col-yellow-darker { + column-rule-color: #684f1d; +} + +.col-yellow-dark { + column-rule-color: #f2d024; +} + +.col-yellow { + column-rule-color: #ffed4a; +} + +.col-yellow-light { + column-rule-color: #fff382; +} + +.col-yellow-lighter { + column-rule-color: #fff9c2; +} + +.col-yellow-lightest { + column-rule-color: #fcfbeb; +} + +.col-green-darkest { + column-rule-color: #0f2f21; +} + +.col-green-darker { + column-rule-color: #1a4731; +} + +.col-green-dark { + column-rule-color: #1f9d55; +} + +.col-green { + column-rule-color: #38c172; +} + +.col-green-light { + column-rule-color: #51d88a; +} + +.col-green-lighter { + column-rule-color: #a2f5bf; +} + +.col-green-lightest { + column-rule-color: #e3fcec; +} + +.col-teal-darkest { + column-rule-color: #0d3331; +} + +.col-teal-darker { + column-rule-color: #20504f; +} + +.col-teal-dark { + column-rule-color: #38a89d; +} + +.col-teal { + column-rule-color: #4dc0b5; +} + +.col-teal-light { + column-rule-color: #64d5ca; +} + +.col-teal-lighter { + column-rule-color: #a0f0ed; +} + +.col-teal-lightest { + column-rule-color: #e8fffe; +} + +.col-blue-darkest { + column-rule-color: #12283a; +} + +.col-blue-darker { + column-rule-color: #1c3d5a; +} + +.col-blue-dark { + column-rule-color: #2779bd; +} + +.col-blue { + column-rule-color: #3490dc; +} + +.col-blue-light { + column-rule-color: #6cb2eb; +} + +.col-blue-lighter { + column-rule-color: #bcdefa; +} + +.col-blue-lightest { + column-rule-color: #eff8ff; +} + +.col-indigo-darkest { + column-rule-color: #191e38; +} + +.col-indigo-darker { + column-rule-color: #2f365f; +} + +.col-indigo-dark { + column-rule-color: #5661b3; +} + +.col-indigo { + column-rule-color: #6574cd; +} + +.col-indigo-light { + column-rule-color: #7886d7; +} + +.col-indigo-lighter { + column-rule-color: #b2b7ff; +} + +.col-indigo-lightest { + column-rule-color: #e6e8ff; +} + +.col-purple-darkest { + column-rule-color: #21183c; +} + +.col-purple-darker { + column-rule-color: #382b5f; +} + +.col-purple-dark { + column-rule-color: #794acf; +} + +.col-purple { + column-rule-color: #9561e2; +} + +.col-purple-light { + column-rule-color: #a779e9; +} + +.col-purple-lighter { + column-rule-color: #d6bbfc; +} + +.col-purple-lightest { + column-rule-color: #f3ebff; +} + +.col-pink-darkest { + column-rule-color: #451225; +} + +.col-pink-darker { + column-rule-color: #6f213f; +} + +.col-pink-dark { + column-rule-color: #eb5286; +} + +.col-pink { + column-rule-color: #f66d9b; +} + +.col-pink-light { + column-rule-color: #fa7ea8; +} + +.col-pink-lighter { + column-rule-color: #ffbbca; +} + +.col-pink-lightest { + column-rule-color: #ffebef; +} + +.col-solid { + column-rule-style: solid; +} + +.col-dashed { + column-rule-style: dashed; +} + +.col-dotted { + column-rule-style: dotted; +} + +.col-none { + column-rule-style: none; +} + +.col-rule-0 { + column-rule-width: 0; +} + +.col-rule-2 { + column-rule-width: 2px; +} + +.col-rule-4 { + column-rule-width: 4px; +} + +.col-rule-8 { + column-rule-width: 8px; +} + +.col-rule { + column-rule-width: 1px; +} + +.col-span-all { + column-span: all; +} + +.col-span-none { + column-span: none; +} + .cursor-auto { cursor: auto; } @@ -8379,152 +8743,516 @@ table { border-left-width: 1px; } - .sm\:cursor-auto { - cursor: auto; + .sm\:col-0 { + column-count: initial; } - .sm\:cursor-default { - cursor: default; + .sm\:col-2 { + column-count: 2; } - .sm\:cursor-pointer { - cursor: pointer; + .sm\:col-3 { + column-count: 3; } - .sm\:cursor-wait { - cursor: wait; + .sm\:col-4 { + column-count: 4; } - .sm\:cursor-move { - cursor: move; + .sm\:col-auto { + column-fill: auto; } - .sm\:cursor-not-allowed { - cursor: not-allowed; + .sm\:col-balance { + column-fill: balance; } - .sm\:block { - display: block; + .sm\:col-balance-all { + column-fill: balance-all; } - .sm\:inline-block { - display: inline-block; + .sm\:col-transparent { + column-rule-color: transparent; } - .sm\:inline { - display: inline; + .sm\:col-black { + column-rule-color: #22292f; } - .sm\:table { - display: table; + .sm\:col-grey-darkest { + column-rule-color: #3d4852; } - .sm\:table-row { - display: table-row; + .sm\:col-grey-darker { + column-rule-color: #606f7b; } - .sm\:table-cell { - display: table-cell; + .sm\:col-grey-dark { + column-rule-color: #8795a1; } - .sm\:hidden { - display: none; + .sm\:col-grey { + column-rule-color: #b8c2cc; } - .sm\:flex { - display: flex; + .sm\:col-grey-light { + column-rule-color: #dae1e7; } - .sm\:inline-flex { - display: inline-flex; + .sm\:col-grey-lighter { + column-rule-color: #f1f5f8; } - .sm\:flex-row { - flex-direction: row; + .sm\:col-grey-lightest { + column-rule-color: #f8fafc; } - .sm\:flex-row-reverse { - flex-direction: row-reverse; + .sm\:col-white { + column-rule-color: #fff; } - .sm\:flex-col { - flex-direction: column; + .sm\:col-red-darkest { + column-rule-color: #3b0d0c; } - .sm\:flex-col-reverse { - flex-direction: column-reverse; + .sm\:col-red-darker { + column-rule-color: #621b18; } - .sm\:flex-wrap { - flex-wrap: wrap; + .sm\:col-red-dark { + column-rule-color: #cc1f1a; } - .sm\:flex-wrap-reverse { - flex-wrap: wrap-reverse; + .sm\:col-red { + column-rule-color: #e3342f; } - .sm\:flex-no-wrap { - flex-wrap: nowrap; + .sm\:col-red-light { + column-rule-color: #ef5753; } - .sm\:items-start { - align-items: flex-start; + .sm\:col-red-lighter { + column-rule-color: #f9acaa; } - .sm\:items-end { - align-items: flex-end; + .sm\:col-red-lightest { + column-rule-color: #fcebea; } - .sm\:items-center { - align-items: center; + .sm\:col-orange-darkest { + column-rule-color: #462a16; } - .sm\:items-baseline { - align-items: baseline; + .sm\:col-orange-darker { + column-rule-color: #613b1f; } - .sm\:items-stretch { - align-items: stretch; + .sm\:col-orange-dark { + column-rule-color: #de751f; } - .sm\:self-auto { - align-self: auto; + .sm\:col-orange { + column-rule-color: #f6993f; } - .sm\:self-start { - align-self: flex-start; + .sm\:col-orange-light { + column-rule-color: #faad63; } - .sm\:self-end { - align-self: flex-end; + .sm\:col-orange-lighter { + column-rule-color: #fcd9b6; } - .sm\:self-center { - align-self: center; + .sm\:col-orange-lightest { + column-rule-color: #fff5eb; } - .sm\:self-stretch { - align-self: stretch; + .sm\:col-yellow-darkest { + column-rule-color: #453411; } - .sm\:justify-start { - justify-content: flex-start; + .sm\:col-yellow-darker { + column-rule-color: #684f1d; } - .sm\:justify-end { - justify-content: flex-end; + .sm\:col-yellow-dark { + column-rule-color: #f2d024; } - .sm\:justify-center { - justify-content: center; + .sm\:col-yellow { + column-rule-color: #ffed4a; } - .sm\:justify-between { - justify-content: space-between; + .sm\:col-yellow-light { + column-rule-color: #fff382; } - .sm\:justify-around { - justify-content: space-around; + .sm\:col-yellow-lighter { + column-rule-color: #fff9c2; + } + + .sm\:col-yellow-lightest { + column-rule-color: #fcfbeb; + } + + .sm\:col-green-darkest { + column-rule-color: #0f2f21; + } + + .sm\:col-green-darker { + column-rule-color: #1a4731; + } + + .sm\:col-green-dark { + column-rule-color: #1f9d55; + } + + .sm\:col-green { + column-rule-color: #38c172; + } + + .sm\:col-green-light { + column-rule-color: #51d88a; + } + + .sm\:col-green-lighter { + column-rule-color: #a2f5bf; + } + + .sm\:col-green-lightest { + column-rule-color: #e3fcec; + } + + .sm\:col-teal-darkest { + column-rule-color: #0d3331; + } + + .sm\:col-teal-darker { + column-rule-color: #20504f; + } + + .sm\:col-teal-dark { + column-rule-color: #38a89d; + } + + .sm\:col-teal { + column-rule-color: #4dc0b5; + } + + .sm\:col-teal-light { + column-rule-color: #64d5ca; + } + + .sm\:col-teal-lighter { + column-rule-color: #a0f0ed; + } + + .sm\:col-teal-lightest { + column-rule-color: #e8fffe; + } + + .sm\:col-blue-darkest { + column-rule-color: #12283a; + } + + .sm\:col-blue-darker { + column-rule-color: #1c3d5a; + } + + .sm\:col-blue-dark { + column-rule-color: #2779bd; + } + + .sm\:col-blue { + column-rule-color: #3490dc; + } + + .sm\:col-blue-light { + column-rule-color: #6cb2eb; + } + + .sm\:col-blue-lighter { + column-rule-color: #bcdefa; + } + + .sm\:col-blue-lightest { + column-rule-color: #eff8ff; + } + + .sm\:col-indigo-darkest { + column-rule-color: #191e38; + } + + .sm\:col-indigo-darker { + column-rule-color: #2f365f; + } + + .sm\:col-indigo-dark { + column-rule-color: #5661b3; + } + + .sm\:col-indigo { + column-rule-color: #6574cd; + } + + .sm\:col-indigo-light { + column-rule-color: #7886d7; + } + + .sm\:col-indigo-lighter { + column-rule-color: #b2b7ff; + } + + .sm\:col-indigo-lightest { + column-rule-color: #e6e8ff; + } + + .sm\:col-purple-darkest { + column-rule-color: #21183c; + } + + .sm\:col-purple-darker { + column-rule-color: #382b5f; + } + + .sm\:col-purple-dark { + column-rule-color: #794acf; + } + + .sm\:col-purple { + column-rule-color: #9561e2; + } + + .sm\:col-purple-light { + column-rule-color: #a779e9; + } + + .sm\:col-purple-lighter { + column-rule-color: #d6bbfc; + } + + .sm\:col-purple-lightest { + column-rule-color: #f3ebff; + } + + .sm\:col-pink-darkest { + column-rule-color: #451225; + } + + .sm\:col-pink-darker { + column-rule-color: #6f213f; + } + + .sm\:col-pink-dark { + column-rule-color: #eb5286; + } + + .sm\:col-pink { + column-rule-color: #f66d9b; + } + + .sm\:col-pink-light { + column-rule-color: #fa7ea8; + } + + .sm\:col-pink-lighter { + column-rule-color: #ffbbca; + } + + .sm\:col-pink-lightest { + column-rule-color: #ffebef; + } + + .sm\:col-solid { + column-rule-style: solid; + } + + .sm\:col-dashed { + column-rule-style: dashed; + } + + .sm\:col-dotted { + column-rule-style: dotted; + } + + .sm\:col-none { + column-rule-style: none; + } + + .sm\:col-rule-0 { + column-rule-width: 0; + } + + .sm\:col-rule-2 { + column-rule-width: 2px; + } + + .sm\:col-rule-4 { + column-rule-width: 4px; + } + + .sm\:col-rule-8 { + column-rule-width: 8px; + } + + .sm\:col-rule { + column-rule-width: 1px; + } + + .sm\:col-span-all { + column-span: all; + } + + .sm\:col-span-none { + column-span: none; + } + + .sm\:cursor-auto { + cursor: auto; + } + + .sm\:cursor-default { + cursor: default; + } + + .sm\:cursor-pointer { + cursor: pointer; + } + + .sm\:cursor-wait { + cursor: wait; + } + + .sm\:cursor-move { + cursor: move; + } + + .sm\:cursor-not-allowed { + cursor: not-allowed; + } + + .sm\:block { + display: block; + } + + .sm\:inline-block { + display: inline-block; + } + + .sm\:inline { + display: inline; + } + + .sm\:table { + display: table; + } + + .sm\:table-row { + display: table-row; + } + + .sm\:table-cell { + display: table-cell; + } + + .sm\:hidden { + display: none; + } + + .sm\:flex { + display: flex; + } + + .sm\:inline-flex { + display: inline-flex; + } + + .sm\:flex-row { + flex-direction: row; + } + + .sm\:flex-row-reverse { + flex-direction: row-reverse; + } + + .sm\:flex-col { + flex-direction: column; + } + + .sm\:flex-col-reverse { + flex-direction: column-reverse; + } + + .sm\:flex-wrap { + flex-wrap: wrap; + } + + .sm\:flex-wrap-reverse { + flex-wrap: wrap-reverse; + } + + .sm\:flex-no-wrap { + flex-wrap: nowrap; + } + + .sm\:items-start { + align-items: flex-start; + } + + .sm\:items-end { + align-items: flex-end; + } + + .sm\:items-center { + align-items: center; + } + + .sm\:items-baseline { + align-items: baseline; + } + + .sm\:items-stretch { + align-items: stretch; + } + + .sm\:self-auto { + align-self: auto; + } + + .sm\:self-start { + align-self: flex-start; + } + + .sm\:self-end { + align-self: flex-end; + } + + .sm\:self-center { + align-self: center; + } + + .sm\:self-stretch { + align-self: stretch; + } + + .sm\:justify-start { + justify-content: flex-start; + } + + .sm\:justify-end { + justify-content: flex-end; + } + + .sm\:justify-center { + justify-content: center; + } + + .sm\:justify-between { + justify-content: space-between; + } + + .sm\:justify-around { + justify-content: space-around; } .sm\:content-center { @@ -13949,6 +14677,370 @@ table { border-left-width: 1px; } + .md\:col-0 { + column-count: initial; + } + + .md\:col-2 { + column-count: 2; + } + + .md\:col-3 { + column-count: 3; + } + + .md\:col-4 { + column-count: 4; + } + + .md\:col-auto { + column-fill: auto; + } + + .md\:col-balance { + column-fill: balance; + } + + .md\:col-balance-all { + column-fill: balance-all; + } + + .md\:col-transparent { + column-rule-color: transparent; + } + + .md\:col-black { + column-rule-color: #22292f; + } + + .md\:col-grey-darkest { + column-rule-color: #3d4852; + } + + .md\:col-grey-darker { + column-rule-color: #606f7b; + } + + .md\:col-grey-dark { + column-rule-color: #8795a1; + } + + .md\:col-grey { + column-rule-color: #b8c2cc; + } + + .md\:col-grey-light { + column-rule-color: #dae1e7; + } + + .md\:col-grey-lighter { + column-rule-color: #f1f5f8; + } + + .md\:col-grey-lightest { + column-rule-color: #f8fafc; + } + + .md\:col-white { + column-rule-color: #fff; + } + + .md\:col-red-darkest { + column-rule-color: #3b0d0c; + } + + .md\:col-red-darker { + column-rule-color: #621b18; + } + + .md\:col-red-dark { + column-rule-color: #cc1f1a; + } + + .md\:col-red { + column-rule-color: #e3342f; + } + + .md\:col-red-light { + column-rule-color: #ef5753; + } + + .md\:col-red-lighter { + column-rule-color: #f9acaa; + } + + .md\:col-red-lightest { + column-rule-color: #fcebea; + } + + .md\:col-orange-darkest { + column-rule-color: #462a16; + } + + .md\:col-orange-darker { + column-rule-color: #613b1f; + } + + .md\:col-orange-dark { + column-rule-color: #de751f; + } + + .md\:col-orange { + column-rule-color: #f6993f; + } + + .md\:col-orange-light { + column-rule-color: #faad63; + } + + .md\:col-orange-lighter { + column-rule-color: #fcd9b6; + } + + .md\:col-orange-lightest { + column-rule-color: #fff5eb; + } + + .md\:col-yellow-darkest { + column-rule-color: #453411; + } + + .md\:col-yellow-darker { + column-rule-color: #684f1d; + } + + .md\:col-yellow-dark { + column-rule-color: #f2d024; + } + + .md\:col-yellow { + column-rule-color: #ffed4a; + } + + .md\:col-yellow-light { + column-rule-color: #fff382; + } + + .md\:col-yellow-lighter { + column-rule-color: #fff9c2; + } + + .md\:col-yellow-lightest { + column-rule-color: #fcfbeb; + } + + .md\:col-green-darkest { + column-rule-color: #0f2f21; + } + + .md\:col-green-darker { + column-rule-color: #1a4731; + } + + .md\:col-green-dark { + column-rule-color: #1f9d55; + } + + .md\:col-green { + column-rule-color: #38c172; + } + + .md\:col-green-light { + column-rule-color: #51d88a; + } + + .md\:col-green-lighter { + column-rule-color: #a2f5bf; + } + + .md\:col-green-lightest { + column-rule-color: #e3fcec; + } + + .md\:col-teal-darkest { + column-rule-color: #0d3331; + } + + .md\:col-teal-darker { + column-rule-color: #20504f; + } + + .md\:col-teal-dark { + column-rule-color: #38a89d; + } + + .md\:col-teal { + column-rule-color: #4dc0b5; + } + + .md\:col-teal-light { + column-rule-color: #64d5ca; + } + + .md\:col-teal-lighter { + column-rule-color: #a0f0ed; + } + + .md\:col-teal-lightest { + column-rule-color: #e8fffe; + } + + .md\:col-blue-darkest { + column-rule-color: #12283a; + } + + .md\:col-blue-darker { + column-rule-color: #1c3d5a; + } + + .md\:col-blue-dark { + column-rule-color: #2779bd; + } + + .md\:col-blue { + column-rule-color: #3490dc; + } + + .md\:col-blue-light { + column-rule-color: #6cb2eb; + } + + .md\:col-blue-lighter { + column-rule-color: #bcdefa; + } + + .md\:col-blue-lightest { + column-rule-color: #eff8ff; + } + + .md\:col-indigo-darkest { + column-rule-color: #191e38; + } + + .md\:col-indigo-darker { + column-rule-color: #2f365f; + } + + .md\:col-indigo-dark { + column-rule-color: #5661b3; + } + + .md\:col-indigo { + column-rule-color: #6574cd; + } + + .md\:col-indigo-light { + column-rule-color: #7886d7; + } + + .md\:col-indigo-lighter { + column-rule-color: #b2b7ff; + } + + .md\:col-indigo-lightest { + column-rule-color: #e6e8ff; + } + + .md\:col-purple-darkest { + column-rule-color: #21183c; + } + + .md\:col-purple-darker { + column-rule-color: #382b5f; + } + + .md\:col-purple-dark { + column-rule-color: #794acf; + } + + .md\:col-purple { + column-rule-color: #9561e2; + } + + .md\:col-purple-light { + column-rule-color: #a779e9; + } + + .md\:col-purple-lighter { + column-rule-color: #d6bbfc; + } + + .md\:col-purple-lightest { + column-rule-color: #f3ebff; + } + + .md\:col-pink-darkest { + column-rule-color: #451225; + } + + .md\:col-pink-darker { + column-rule-color: #6f213f; + } + + .md\:col-pink-dark { + column-rule-color: #eb5286; + } + + .md\:col-pink { + column-rule-color: #f66d9b; + } + + .md\:col-pink-light { + column-rule-color: #fa7ea8; + } + + .md\:col-pink-lighter { + column-rule-color: #ffbbca; + } + + .md\:col-pink-lightest { + column-rule-color: #ffebef; + } + + .md\:col-solid { + column-rule-style: solid; + } + + .md\:col-dashed { + column-rule-style: dashed; + } + + .md\:col-dotted { + column-rule-style: dotted; + } + + .md\:col-none { + column-rule-style: none; + } + + .md\:col-rule-0 { + column-rule-width: 0; + } + + .md\:col-rule-2 { + column-rule-width: 2px; + } + + .md\:col-rule-4 { + column-rule-width: 4px; + } + + .md\:col-rule-8 { + column-rule-width: 8px; + } + + .md\:col-rule { + column-rule-width: 1px; + } + + .md\:col-span-all { + column-span: all; + } + + .md\:col-span-none { + column-span: none; + } + .md\:cursor-auto { cursor: auto; } @@ -19371,152 +20463,516 @@ table { border-bottom-left-radius: .25rem; } - .lg\:rounded-tl-lg { - border-top-left-radius: .5rem; + .lg\:rounded-tl-lg { + border-top-left-radius: .5rem; + } + + .lg\:rounded-tr-lg { + border-top-right-radius: .5rem; + } + + .lg\:rounded-br-lg { + border-bottom-right-radius: .5rem; + } + + .lg\:rounded-bl-lg { + border-bottom-left-radius: .5rem; + } + + .lg\:rounded-tl-full { + border-top-left-radius: 9999px; + } + + .lg\:rounded-tr-full { + border-top-right-radius: 9999px; + } + + .lg\:rounded-br-full { + border-bottom-right-radius: 9999px; + } + + .lg\:rounded-bl-full { + border-bottom-left-radius: 9999px; + } + + .lg\:border-solid { + border-style: solid; + } + + .lg\:border-dashed { + border-style: dashed; + } + + .lg\:border-dotted { + border-style: dotted; + } + + .lg\:border-none { + border-style: none; + } + + .lg\:border-0 { + border-width: 0; + } + + .lg\:border-2 { + border-width: 2px; + } + + .lg\:border-4 { + border-width: 4px; + } + + .lg\:border-8 { + border-width: 8px; + } + + .lg\:border { + border-width: 1px; + } + + .lg\:border-t-0 { + border-top-width: 0; + } + + .lg\:border-r-0 { + border-right-width: 0; + } + + .lg\:border-b-0 { + border-bottom-width: 0; + } + + .lg\:border-l-0 { + border-left-width: 0; + } + + .lg\:border-t-2 { + border-top-width: 2px; + } + + .lg\:border-r-2 { + border-right-width: 2px; + } + + .lg\:border-b-2 { + border-bottom-width: 2px; + } + + .lg\:border-l-2 { + border-left-width: 2px; + } + + .lg\:border-t-4 { + border-top-width: 4px; + } + + .lg\:border-r-4 { + border-right-width: 4px; + } + + .lg\:border-b-4 { + border-bottom-width: 4px; + } + + .lg\:border-l-4 { + border-left-width: 4px; + } + + .lg\:border-t-8 { + border-top-width: 8px; + } + + .lg\:border-r-8 { + border-right-width: 8px; + } + + .lg\:border-b-8 { + border-bottom-width: 8px; + } + + .lg\:border-l-8 { + border-left-width: 8px; + } + + .lg\:border-t { + border-top-width: 1px; + } + + .lg\:border-r { + border-right-width: 1px; + } + + .lg\:border-b { + border-bottom-width: 1px; + } + + .lg\:border-l { + border-left-width: 1px; + } + + .lg\:col-0 { + column-count: initial; + } + + .lg\:col-2 { + column-count: 2; + } + + .lg\:col-3 { + column-count: 3; + } + + .lg\:col-4 { + column-count: 4; + } + + .lg\:col-auto { + column-fill: auto; + } + + .lg\:col-balance { + column-fill: balance; + } + + .lg\:col-balance-all { + column-fill: balance-all; + } + + .lg\:col-transparent { + column-rule-color: transparent; + } + + .lg\:col-black { + column-rule-color: #22292f; + } + + .lg\:col-grey-darkest { + column-rule-color: #3d4852; + } + + .lg\:col-grey-darker { + column-rule-color: #606f7b; + } + + .lg\:col-grey-dark { + column-rule-color: #8795a1; + } + + .lg\:col-grey { + column-rule-color: #b8c2cc; + } + + .lg\:col-grey-light { + column-rule-color: #dae1e7; + } + + .lg\:col-grey-lighter { + column-rule-color: #f1f5f8; + } + + .lg\:col-grey-lightest { + column-rule-color: #f8fafc; + } + + .lg\:col-white { + column-rule-color: #fff; + } + + .lg\:col-red-darkest { + column-rule-color: #3b0d0c; + } + + .lg\:col-red-darker { + column-rule-color: #621b18; + } + + .lg\:col-red-dark { + column-rule-color: #cc1f1a; + } + + .lg\:col-red { + column-rule-color: #e3342f; + } + + .lg\:col-red-light { + column-rule-color: #ef5753; + } + + .lg\:col-red-lighter { + column-rule-color: #f9acaa; + } + + .lg\:col-red-lightest { + column-rule-color: #fcebea; + } + + .lg\:col-orange-darkest { + column-rule-color: #462a16; + } + + .lg\:col-orange-darker { + column-rule-color: #613b1f; + } + + .lg\:col-orange-dark { + column-rule-color: #de751f; + } + + .lg\:col-orange { + column-rule-color: #f6993f; + } + + .lg\:col-orange-light { + column-rule-color: #faad63; + } + + .lg\:col-orange-lighter { + column-rule-color: #fcd9b6; + } + + .lg\:col-orange-lightest { + column-rule-color: #fff5eb; + } + + .lg\:col-yellow-darkest { + column-rule-color: #453411; + } + + .lg\:col-yellow-darker { + column-rule-color: #684f1d; + } + + .lg\:col-yellow-dark { + column-rule-color: #f2d024; + } + + .lg\:col-yellow { + column-rule-color: #ffed4a; + } + + .lg\:col-yellow-light { + column-rule-color: #fff382; + } + + .lg\:col-yellow-lighter { + column-rule-color: #fff9c2; + } + + .lg\:col-yellow-lightest { + column-rule-color: #fcfbeb; + } + + .lg\:col-green-darkest { + column-rule-color: #0f2f21; + } + + .lg\:col-green-darker { + column-rule-color: #1a4731; + } + + .lg\:col-green-dark { + column-rule-color: #1f9d55; + } + + .lg\:col-green { + column-rule-color: #38c172; + } + + .lg\:col-green-light { + column-rule-color: #51d88a; + } + + .lg\:col-green-lighter { + column-rule-color: #a2f5bf; + } + + .lg\:col-green-lightest { + column-rule-color: #e3fcec; + } + + .lg\:col-teal-darkest { + column-rule-color: #0d3331; + } + + .lg\:col-teal-darker { + column-rule-color: #20504f; + } + + .lg\:col-teal-dark { + column-rule-color: #38a89d; + } + + .lg\:col-teal { + column-rule-color: #4dc0b5; + } + + .lg\:col-teal-light { + column-rule-color: #64d5ca; + } + + .lg\:col-teal-lighter { + column-rule-color: #a0f0ed; + } + + .lg\:col-teal-lightest { + column-rule-color: #e8fffe; + } + + .lg\:col-blue-darkest { + column-rule-color: #12283a; + } + + .lg\:col-blue-darker { + column-rule-color: #1c3d5a; + } + + .lg\:col-blue-dark { + column-rule-color: #2779bd; } - .lg\:rounded-tr-lg { - border-top-right-radius: .5rem; + .lg\:col-blue { + column-rule-color: #3490dc; } - .lg\:rounded-br-lg { - border-bottom-right-radius: .5rem; + .lg\:col-blue-light { + column-rule-color: #6cb2eb; } - .lg\:rounded-bl-lg { - border-bottom-left-radius: .5rem; + .lg\:col-blue-lighter { + column-rule-color: #bcdefa; } - .lg\:rounded-tl-full { - border-top-left-radius: 9999px; + .lg\:col-blue-lightest { + column-rule-color: #eff8ff; } - .lg\:rounded-tr-full { - border-top-right-radius: 9999px; + .lg\:col-indigo-darkest { + column-rule-color: #191e38; } - .lg\:rounded-br-full { - border-bottom-right-radius: 9999px; + .lg\:col-indigo-darker { + column-rule-color: #2f365f; } - .lg\:rounded-bl-full { - border-bottom-left-radius: 9999px; + .lg\:col-indigo-dark { + column-rule-color: #5661b3; } - .lg\:border-solid { - border-style: solid; + .lg\:col-indigo { + column-rule-color: #6574cd; } - .lg\:border-dashed { - border-style: dashed; + .lg\:col-indigo-light { + column-rule-color: #7886d7; } - .lg\:border-dotted { - border-style: dotted; + .lg\:col-indigo-lighter { + column-rule-color: #b2b7ff; } - .lg\:border-none { - border-style: none; + .lg\:col-indigo-lightest { + column-rule-color: #e6e8ff; } - .lg\:border-0 { - border-width: 0; + .lg\:col-purple-darkest { + column-rule-color: #21183c; } - .lg\:border-2 { - border-width: 2px; + .lg\:col-purple-darker { + column-rule-color: #382b5f; } - .lg\:border-4 { - border-width: 4px; + .lg\:col-purple-dark { + column-rule-color: #794acf; } - .lg\:border-8 { - border-width: 8px; + .lg\:col-purple { + column-rule-color: #9561e2; } - .lg\:border { - border-width: 1px; + .lg\:col-purple-light { + column-rule-color: #a779e9; } - .lg\:border-t-0 { - border-top-width: 0; + .lg\:col-purple-lighter { + column-rule-color: #d6bbfc; } - .lg\:border-r-0 { - border-right-width: 0; + .lg\:col-purple-lightest { + column-rule-color: #f3ebff; } - .lg\:border-b-0 { - border-bottom-width: 0; + .lg\:col-pink-darkest { + column-rule-color: #451225; } - .lg\:border-l-0 { - border-left-width: 0; + .lg\:col-pink-darker { + column-rule-color: #6f213f; } - .lg\:border-t-2 { - border-top-width: 2px; + .lg\:col-pink-dark { + column-rule-color: #eb5286; } - .lg\:border-r-2 { - border-right-width: 2px; + .lg\:col-pink { + column-rule-color: #f66d9b; } - .lg\:border-b-2 { - border-bottom-width: 2px; + .lg\:col-pink-light { + column-rule-color: #fa7ea8; } - .lg\:border-l-2 { - border-left-width: 2px; + .lg\:col-pink-lighter { + column-rule-color: #ffbbca; } - .lg\:border-t-4 { - border-top-width: 4px; + .lg\:col-pink-lightest { + column-rule-color: #ffebef; } - .lg\:border-r-4 { - border-right-width: 4px; + .lg\:col-solid { + column-rule-style: solid; } - .lg\:border-b-4 { - border-bottom-width: 4px; + .lg\:col-dashed { + column-rule-style: dashed; } - .lg\:border-l-4 { - border-left-width: 4px; + .lg\:col-dotted { + column-rule-style: dotted; } - .lg\:border-t-8 { - border-top-width: 8px; + .lg\:col-none { + column-rule-style: none; } - .lg\:border-r-8 { - border-right-width: 8px; + .lg\:col-rule-0 { + column-rule-width: 0; } - .lg\:border-b-8 { - border-bottom-width: 8px; + .lg\:col-rule-2 { + column-rule-width: 2px; } - .lg\:border-l-8 { - border-left-width: 8px; + .lg\:col-rule-4 { + column-rule-width: 4px; } - .lg\:border-t { - border-top-width: 1px; + .lg\:col-rule-8 { + column-rule-width: 8px; } - .lg\:border-r { - border-right-width: 1px; + .lg\:col-rule { + column-rule-width: 1px; } - .lg\:border-b { - border-bottom-width: 1px; + .lg\:col-span-all { + column-span: all; } - .lg\:border-l { - border-left-width: 1px; + .lg\:col-span-none { + column-span: none; } .lg\:cursor-auto { @@ -25089,6 +26545,370 @@ table { border-left-width: 1px; } + .xl\:col-0 { + column-count: initial; + } + + .xl\:col-2 { + column-count: 2; + } + + .xl\:col-3 { + column-count: 3; + } + + .xl\:col-4 { + column-count: 4; + } + + .xl\:col-auto { + column-fill: auto; + } + + .xl\:col-balance { + column-fill: balance; + } + + .xl\:col-balance-all { + column-fill: balance-all; + } + + .xl\:col-transparent { + column-rule-color: transparent; + } + + .xl\:col-black { + column-rule-color: #22292f; + } + + .xl\:col-grey-darkest { + column-rule-color: #3d4852; + } + + .xl\:col-grey-darker { + column-rule-color: #606f7b; + } + + .xl\:col-grey-dark { + column-rule-color: #8795a1; + } + + .xl\:col-grey { + column-rule-color: #b8c2cc; + } + + .xl\:col-grey-light { + column-rule-color: #dae1e7; + } + + .xl\:col-grey-lighter { + column-rule-color: #f1f5f8; + } + + .xl\:col-grey-lightest { + column-rule-color: #f8fafc; + } + + .xl\:col-white { + column-rule-color: #fff; + } + + .xl\:col-red-darkest { + column-rule-color: #3b0d0c; + } + + .xl\:col-red-darker { + column-rule-color: #621b18; + } + + .xl\:col-red-dark { + column-rule-color: #cc1f1a; + } + + .xl\:col-red { + column-rule-color: #e3342f; + } + + .xl\:col-red-light { + column-rule-color: #ef5753; + } + + .xl\:col-red-lighter { + column-rule-color: #f9acaa; + } + + .xl\:col-red-lightest { + column-rule-color: #fcebea; + } + + .xl\:col-orange-darkest { + column-rule-color: #462a16; + } + + .xl\:col-orange-darker { + column-rule-color: #613b1f; + } + + .xl\:col-orange-dark { + column-rule-color: #de751f; + } + + .xl\:col-orange { + column-rule-color: #f6993f; + } + + .xl\:col-orange-light { + column-rule-color: #faad63; + } + + .xl\:col-orange-lighter { + column-rule-color: #fcd9b6; + } + + .xl\:col-orange-lightest { + column-rule-color: #fff5eb; + } + + .xl\:col-yellow-darkest { + column-rule-color: #453411; + } + + .xl\:col-yellow-darker { + column-rule-color: #684f1d; + } + + .xl\:col-yellow-dark { + column-rule-color: #f2d024; + } + + .xl\:col-yellow { + column-rule-color: #ffed4a; + } + + .xl\:col-yellow-light { + column-rule-color: #fff382; + } + + .xl\:col-yellow-lighter { + column-rule-color: #fff9c2; + } + + .xl\:col-yellow-lightest { + column-rule-color: #fcfbeb; + } + + .xl\:col-green-darkest { + column-rule-color: #0f2f21; + } + + .xl\:col-green-darker { + column-rule-color: #1a4731; + } + + .xl\:col-green-dark { + column-rule-color: #1f9d55; + } + + .xl\:col-green { + column-rule-color: #38c172; + } + + .xl\:col-green-light { + column-rule-color: #51d88a; + } + + .xl\:col-green-lighter { + column-rule-color: #a2f5bf; + } + + .xl\:col-green-lightest { + column-rule-color: #e3fcec; + } + + .xl\:col-teal-darkest { + column-rule-color: #0d3331; + } + + .xl\:col-teal-darker { + column-rule-color: #20504f; + } + + .xl\:col-teal-dark { + column-rule-color: #38a89d; + } + + .xl\:col-teal { + column-rule-color: #4dc0b5; + } + + .xl\:col-teal-light { + column-rule-color: #64d5ca; + } + + .xl\:col-teal-lighter { + column-rule-color: #a0f0ed; + } + + .xl\:col-teal-lightest { + column-rule-color: #e8fffe; + } + + .xl\:col-blue-darkest { + column-rule-color: #12283a; + } + + .xl\:col-blue-darker { + column-rule-color: #1c3d5a; + } + + .xl\:col-blue-dark { + column-rule-color: #2779bd; + } + + .xl\:col-blue { + column-rule-color: #3490dc; + } + + .xl\:col-blue-light { + column-rule-color: #6cb2eb; + } + + .xl\:col-blue-lighter { + column-rule-color: #bcdefa; + } + + .xl\:col-blue-lightest { + column-rule-color: #eff8ff; + } + + .xl\:col-indigo-darkest { + column-rule-color: #191e38; + } + + .xl\:col-indigo-darker { + column-rule-color: #2f365f; + } + + .xl\:col-indigo-dark { + column-rule-color: #5661b3; + } + + .xl\:col-indigo { + column-rule-color: #6574cd; + } + + .xl\:col-indigo-light { + column-rule-color: #7886d7; + } + + .xl\:col-indigo-lighter { + column-rule-color: #b2b7ff; + } + + .xl\:col-indigo-lightest { + column-rule-color: #e6e8ff; + } + + .xl\:col-purple-darkest { + column-rule-color: #21183c; + } + + .xl\:col-purple-darker { + column-rule-color: #382b5f; + } + + .xl\:col-purple-dark { + column-rule-color: #794acf; + } + + .xl\:col-purple { + column-rule-color: #9561e2; + } + + .xl\:col-purple-light { + column-rule-color: #a779e9; + } + + .xl\:col-purple-lighter { + column-rule-color: #d6bbfc; + } + + .xl\:col-purple-lightest { + column-rule-color: #f3ebff; + } + + .xl\:col-pink-darkest { + column-rule-color: #451225; + } + + .xl\:col-pink-darker { + column-rule-color: #6f213f; + } + + .xl\:col-pink-dark { + column-rule-color: #eb5286; + } + + .xl\:col-pink { + column-rule-color: #f66d9b; + } + + .xl\:col-pink-light { + column-rule-color: #fa7ea8; + } + + .xl\:col-pink-lighter { + column-rule-color: #ffbbca; + } + + .xl\:col-pink-lightest { + column-rule-color: #ffebef; + } + + .xl\:col-solid { + column-rule-style: solid; + } + + .xl\:col-dashed { + column-rule-style: dashed; + } + + .xl\:col-dotted { + column-rule-style: dotted; + } + + .xl\:col-none { + column-rule-style: none; + } + + .xl\:col-rule-0 { + column-rule-width: 0; + } + + .xl\:col-rule-2 { + column-rule-width: 2px; + } + + .xl\:col-rule-4 { + column-rule-width: 4px; + } + + .xl\:col-rule-8 { + column-rule-width: 8px; + } + + .xl\:col-rule { + column-rule-width: 1px; + } + + .xl\:col-span-all { + column-span: all; + } + + .xl\:col-span-none { + column-span: none; + } + .xl\:cursor-auto { cursor: auto; } diff --git a/defaultConfig.stub.js b/defaultConfig.stub.js index 2f3115b6d36f..e272d13ae5de 100644 --- a/defaultConfig.stub.js +++ b/defaultConfig.stub.js @@ -847,7 +847,7 @@ module.exports = { | | Here is where you define your column count values | - | Class name: .column-{count} + | Class name: .col-{count} | */ @@ -874,7 +874,7 @@ module.exports = { | invalid CSS class name characters, which allows you to have | awesome classes like .column-w-2/3. | - | Class name: .column-w-{size} + | Class name: .col-w-{size} | */ @@ -897,7 +897,7 @@ module.exports = { | the color palette we defined above, however you're welcome to set | these independently if that makes sense for your project. | - | Class name: .column-{color} + | Class name: .col-{color} | */ @@ -913,7 +913,7 @@ module.exports = { | rule widths require a special "default" value set as well. This is the | width that will be used when you do not specify a column rule width. | - | Class name: .column-rule{-width?} + | Class name: .col-rule{-width?} | */ diff --git a/src/generators/columnCount.js b/src/generators/columnCount.js index 9ae3acaf6cc2..36cb2ff5c424 100644 --- a/src/generators/columnCount.js +++ b/src/generators/columnCount.js @@ -3,7 +3,7 @@ import defineClass from '../util/defineClass' export default function({ columnCount }) { return _.map(columnCount, (value, modifier) => { - return defineClass(`column-${modifier}`, { + return defineClass(`col-${modifier}`, { 'column-count': `${value}`, }) }) diff --git a/src/generators/columnFill.js b/src/generators/columnFill.js index 47a71ce82ba2..a208b990c070 100644 --- a/src/generators/columnFill.js +++ b/src/generators/columnFill.js @@ -2,13 +2,13 @@ import defineClasses from '../util/defineClasses' export default function() { return defineClasses({ - 'column-auto': { + 'col-auto': { 'column-fill': 'auto', }, - 'column-balance': { + 'col-balance': { 'column-fill': 'balance', }, - 'column-balance-all': { + 'col-balance-all': { 'column-fill': 'balance-all', }, }) diff --git a/src/generators/columnRuleColors.js b/src/generators/columnRuleColors.js index 362b4d9ab06c..824bbafe6ecd 100644 --- a/src/generators/columnRuleColors.js +++ b/src/generators/columnRuleColors.js @@ -3,7 +3,7 @@ import defineClass from '../util/defineClass' export default function({ columnRuleColors }) { return _.map(columnRuleColors, (color, className) => { - return defineClass(`column-${className}`, { + return defineClass(`col-${className}`, { 'column-rule-color': color, }) }) diff --git a/src/generators/columnRuleStyle.js b/src/generators/columnRuleStyle.js index d389bb31c4a2..5e781bfe06c7 100644 --- a/src/generators/columnRuleStyle.js +++ b/src/generators/columnRuleStyle.js @@ -2,16 +2,16 @@ import defineClasses from '../util/defineClasses' export default function() { return defineClasses({ - 'column-solid': { + 'col-solid': { 'column-rule-style': 'solid', }, - 'column-dashed': { + 'col-dashed': { 'column-rule-style': 'dashed', }, - 'column-dotted': { + 'col-dotted': { 'column-rule-style': 'dotted', }, - 'column-none': { + 'col-none': { 'column-rule-style': 'none', }, }) diff --git a/src/generators/columnRuleWidths.js b/src/generators/columnRuleWidths.js index 11f80650f07b..1b09b2814be9 100644 --- a/src/generators/columnRuleWidths.js +++ b/src/generators/columnRuleWidths.js @@ -3,7 +3,7 @@ import defineClass from '../util/defineClass' export default function({ columnRuleWidths }) { return _.map(columnRuleWidths, (width, modifier) => { - return defineClass(modifier === 'default' ? 'column-rule' : `column-rule-${modifier}`, { + return defineClass(modifier === 'default' ? 'col-rule' : `col-rule-${modifier}`, { 'column-rule-width': width, }) }) diff --git a/src/generators/columnSpan.js b/src/generators/columnSpan.js index 1f9af3cc11aa..ff8159d9cb8f 100644 --- a/src/generators/columnSpan.js +++ b/src/generators/columnSpan.js @@ -2,10 +2,10 @@ import defineClasses from '../util/defineClasses' export default function() { return defineClasses({ - 'column-span-all': { + 'col-span-all': { 'column-span': 'all', }, - 'column-span-none': { + 'col-span-none': { 'column-span': 'none', }, }) diff --git a/src/generators/columnWidth.js b/src/generators/columnWidth.js index 85916661663c..228f247a8ea0 100644 --- a/src/generators/columnWidth.js +++ b/src/generators/columnWidth.js @@ -3,7 +3,7 @@ import defineClass from '../util/defineClass' export default function({ widths }) { return _.map(widths, (size, modifer) => { - return defineClass(`column-w-${modifer}`, { + return defineClass(`col-w-${modifer}`, { 'column-width': `${size}`, }) })