From 9cc852b072b223bc9ffa7e4d956235a7ba800b38 Mon Sep 17 00:00:00 2001 From: Thierry Date: Thu, 5 Mar 2015 17:35:39 -0800 Subject: [PATCH 1/3] Add border-radius for corners + border-color/width/style --- src/rules.js | 115 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 115 insertions(+) diff --git a/src/rules.js b/src/rules.js index 420afe6e..1490b9dc 100644 --- a/src/rules.js +++ b/src/rules.js @@ -110,6 +110,121 @@ module.exports = [ allowCustom: true, allowSuffixToValue: true }, + // top-right + { + type: 'pattern', + id: 'border-top-right-radius', + name: 'Border radius top right', + prefix: '.Bdrstend-', + properties: ['border-top-$END-radius'], + allowCustom: true, + allowSuffixToValue: true + }, + // bottom-right + { + type: 'pattern', + id: 'border-bottom-right-radius', + name: 'Border radius bottom right', + prefix: '.Bdrsbend-', + properties: ['border-bottom-$END-radius'], + allowCustom: true, + allowSuffixToValue: true + }, + // bottom-left + { + type: 'pattern', + id: 'border-bottom-left-radius', + name: 'Border radius bottom left', + prefix: '.Bdrsbstart-', + properties: ['border-bottom-$START-radius'], + allowCustom: true, + allowSuffixToValue: true + }, + // top-left + { + type: 'pattern', + id: 'border-top-left-radius', + name: 'Border radius top left', + prefix: '.Bdrststart-', + properties: ['border-top-$START-radius'], + allowCustom: true, + allowSuffixToValue: true + }, + + /** + ================================================================== + BORDER COLOR + ================================================================== + */ + + /* border-color */ + { + type: 'pattern', + id: 'border-color', + name: 'Border color', + prefix: '.Bdc-', + properties: ['border-color'], + allowCustom: true, + allowCustomAutoSuffix: true, + allowSuffixToValue: true, + rules: [ + {suffix: 't', values: ['transparent']}, + {suffix: 'cc', values: ['currentColor']} + ] + }, + + /** + ================================================================== + BORDER STYLE + ================================================================== + */ + + /* border-style */ + { + type: 'pattern', + id: 'border-style', + name: 'Border style', + prefix: '.Bds-', + properties: ['border-style'], + allowCustom: true, + allowCustomAutoSuffix: false, + allowSuffixToValue: false, + rules: [ + {suffix: 'd', values: ['dotted']}, + {suffix: 'da', values: ['dashed']}, + {suffix: 'do', values: ['double']}, + {suffix: 'g', values: ['groove']}, + {suffix: 'h', values: ['hidden']}, + {suffix: 'i', values: ['inset']}, + {suffix: 'n', values: ['none']}, + {suffix: 'o', values: ['outset']}, + {suffix: 'r', values: ['ridge']}, + {suffix: 's', values: ['solid']} + ] + }, + + /** + ================================================================== + BORDER WIDTH + ================================================================== + */ + + /* border-width */ + { + type: 'pattern', + id: 'border-width', + name: 'Border width', + prefix: '.Bdw-', + properties: ['border-width'], + allowCustom: true, + allowCustomAutoSuffix: true, + allowSuffixToValue: true, + rules: [ + {suffix: 'm', values: ['medium']}, + {suffix: 't', values: ['thin']}, + {suffix: 'th', values: ['thick']} + ] + }, /** ================================================================== From 20b791c5f2ac77c47fe43361d127596be5158e9d Mon Sep 17 00:00:00 2001 From: Thierry Date: Tue, 10 Mar 2015 10:10:08 -0700 Subject: [PATCH 2/3] Add border styling (width/style/color) for each edge --- src/rules.js | 314 +++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 264 insertions(+), 50 deletions(-) diff --git a/src/rules.js b/src/rules.js index 1490b9dc..c5dee02a 100644 --- a/src/rules.js +++ b/src/rules.js @@ -96,74 +96,79 @@ module.exports = [ allowCustomAutoSuffix: true, allowSuffixToValue: false, }, + /** ================================================================== - BORDER RADIUS + BORDER COLOR ================================================================== */ + // all edges { type: 'pattern', - id: 'border-radius', - name: 'Border radius', - prefix: '.Bdrs-', - properties: ['border-radius'], - allowCustom: true, - allowSuffixToValue: true - }, - // top-right - { - type: 'pattern', - id: 'border-top-right-radius', - name: 'Border radius top right', - prefix: '.Bdrstend-', - properties: ['border-top-$END-radius'], + id: 'border-color', + name: 'Border color', + prefix: '.Bdc-', + properties: ['border-color'], allowCustom: true, - allowSuffixToValue: true + allowCustomAutoSuffix: true, + allowSuffixToValue: true, + rules: [ + {suffix: 't', values: ['transparent']}, + {suffix: 'cc', values: ['currentColor']} + ] }, - // bottom-right + // top { type: 'pattern', - id: 'border-bottom-right-radius', - name: 'Border radius bottom right', - prefix: '.Bdrsbend-', - properties: ['border-bottom-$END-radius'], + id: 'border-top-color', + name: 'Border top color', + prefix: '.Bdtc-', + properties: ['border-top-color'], allowCustom: true, - allowSuffixToValue: true + allowCustomAutoSuffix: true, + allowSuffixToValue: true, + rules: [ + {suffix: 't', values: ['transparent']}, + {suffix: 'cc', values: ['currentColor']} + ] }, - // bottom-left + // end { type: 'pattern', - id: 'border-bottom-left-radius', - name: 'Border radius bottom left', - prefix: '.Bdrsbstart-', - properties: ['border-bottom-$START-radius'], + id: 'border-end-color', + name: 'Border end color', + prefix: '.Bdendc-', + properties: ['border-$END-color'], allowCustom: true, - allowSuffixToValue: true + allowCustomAutoSuffix: true, + allowSuffixToValue: true, + rules: [ + {suffix: 't', values: ['transparent']}, + {suffix: 'cc', values: ['currentColor']} + ] }, - // top-left + // bottom { type: 'pattern', - id: 'border-top-left-radius', - name: 'Border radius top left', - prefix: '.Bdrststart-', - properties: ['border-top-$START-radius'], + id: 'border-bottom-color', + name: 'Border bottom color', + prefix: '.Bdbc-', + properties: ['border-bottom-color'], allowCustom: true, - allowSuffixToValue: true + allowCustomAutoSuffix: true, + allowSuffixToValue: true, + rules: [ + {suffix: 't', values: ['transparent']}, + {suffix: 'cc', values: ['currentColor']} + ] }, - - /** - ================================================================== - BORDER COLOR - ================================================================== - */ - - /* border-color */ + // start { type: 'pattern', - id: 'border-color', - name: 'Border color', - prefix: '.Bdc-', - properties: ['border-color'], + id: 'border-start-color', + name: 'Border start color', + prefix: '.Bdstartc-', + properties: ['border-$START-color'], allowCustom: true, allowCustomAutoSuffix: true, allowSuffixToValue: true, @@ -178,8 +183,7 @@ module.exports = [ BORDER STYLE ================================================================== */ - - /* border-style */ + // all edges { type: 'pattern', id: 'border-style', @@ -202,14 +206,105 @@ module.exports = [ {suffix: 's', values: ['solid']} ] }, + // top + { + type: 'pattern', + id: 'border-top-style', + name: 'Border top style', + prefix: '.Bdts-', + properties: ['border-top-style'], + allowCustom: true, + allowCustomAutoSuffix: true, + allowSuffixToValue: false, + rules: [ + {suffix: 'd', values: ['dotted']}, + {suffix: 'da', values: ['dashed']}, + {suffix: 'do', values: ['double']}, + {suffix: 'g', values: ['groove']}, + {suffix: 'h', values: ['hidden']}, + {suffix: 'i', values: ['inset']}, + {suffix: 'n', values: ['none']}, + {suffix: 'o', values: ['outset']}, + {suffix: 'r', values: ['ridge']}, + {suffix: 's', values: ['solid']} + ] + }, + // end + { + type: 'pattern', + id: 'border-end-style', + name: 'Border end style', + prefix: '.Bdends-', + properties: ['border-$END-style'], + allowCustom: true, + allowCustomAutoSuffix: true, + allowSuffixToValue: false, + rules: [ + {suffix: 'd', values: ['dotted']}, + {suffix: 'da', values: ['dashed']}, + {suffix: 'do', values: ['double']}, + {suffix: 'g', values: ['groove']}, + {suffix: 'h', values: ['hidden']}, + {suffix: 'i', values: ['inset']}, + {suffix: 'n', values: ['none']}, + {suffix: 'o', values: ['outset']}, + {suffix: 'r', values: ['ridge']}, + {suffix: 's', values: ['solid']} + ] + }, + // bottom + { + type: 'pattern', + id: 'border-bottom-style', + name: 'Border bottom style', + prefix: '.Bdbs-', + properties: ['border-bottom-style'], + allowCustom: true, + allowCustomAutoSuffix: true, + allowSuffixToValue: false, + rules: [ + {suffix: 'd', values: ['dotted']}, + {suffix: 'da', values: ['dashed']}, + {suffix: 'do', values: ['double']}, + {suffix: 'g', values: ['groove']}, + {suffix: 'h', values: ['hidden']}, + {suffix: 'i', values: ['inset']}, + {suffix: 'n', values: ['none']}, + {suffix: 'o', values: ['outset']}, + {suffix: 'r', values: ['ridge']}, + {suffix: 's', values: ['solid']} + ] + }, + // start + { + type: 'pattern', + id: 'border-start-style', + name: 'Border start style', + prefix: '.Bdstarts-', + properties: ['border-$START-style'], + allowCustom: true, + allowCustomAutoSuffix: true, + allowSuffixToValue: false, + rules: [ + {suffix: 'd', values: ['dotted']}, + {suffix: 'da', values: ['dashed']}, + {suffix: 'do', values: ['double']}, + {suffix: 'g', values: ['groove']}, + {suffix: 'h', values: ['hidden']}, + {suffix: 'i', values: ['inset']}, + {suffix: 'n', values: ['none']}, + {suffix: 'o', values: ['outset']}, + {suffix: 'r', values: ['ridge']}, + {suffix: 's', values: ['solid']} + ] + }, /** ================================================================== BORDER WIDTH ================================================================== */ - - /* border-width */ + // all edges { type: 'pattern', id: 'border-width', @@ -225,6 +320,125 @@ module.exports = [ {suffix: 'th', values: ['thick']} ] }, + // top + { + type: 'pattern', + id: 'border-top-width', + name: 'Border top width', + prefix: '.Bdtw-', + properties: ['border-top-width'], + allowCustom: true, + allowCustomAutoSuffix: true, + allowSuffixToValue: true, + rules: [ + {suffix: 'm', values: ['medium']}, + {suffix: 't', values: ['thin']}, + {suffix: 'th', values: ['thick']} + ] + }, + // end + { + type: 'pattern', + id: 'border-end-width', + name: 'Border end width', + prefix: '.Bdendw-', + properties: ['border-$END-width'], + allowCustom: true, + allowCustomAutoSuffix: true, + allowSuffixToValue: true, + rules: [ + {suffix: 'm', values: ['medium']}, + {suffix: 't', values: ['thin']}, + {suffix: 'th', values: ['thick']} + ] + }, + // bottom + { + type: 'pattern', + id: 'border-bottom-width', + name: 'Border bottom width', + prefix: '.Bdbw-', + properties: ['border-bottom-width'], + allowCustom: true, + allowCustomAutoSuffix: true, + allowSuffixToValue: true, + rules: [ + {suffix: 'm', values: ['medium']}, + {suffix: 't', values: ['thin']}, + {suffix: 'th', values: ['thick']} + ] + }, + // start + { + type: 'pattern', + id: 'border-start-width', + name: 'Border start width', + prefix: '.Bdsw-', + properties: ['border-$START-width'], + allowCustom: true, + allowCustomAutoSuffix: true, + allowSuffixToValue: true, + rules: [ + {suffix: 'm', values: ['medium']}, + {suffix: 't', values: ['thin']}, + {suffix: 'th', values: ['thick']} + ] + }, + + /** + ================================================================== + BORDER RADIUS + ================================================================== + */ + { + type: 'pattern', + id: 'border-radius', + name: 'Border radius', + prefix: '.Bdrs-', + properties: ['border-radius'], + allowCustom: true, + allowSuffixToValue: true + }, + // top-right + { + type: 'pattern', + id: 'border-top-right-radius', + name: 'Border radius top right', + prefix: '.Bdrstend-', + properties: ['border-top-$END-radius'], + allowCustom: true, + allowSuffixToValue: true + }, + // bottom-right + { + type: 'pattern', + id: 'border-bottom-right-radius', + name: 'Border radius bottom right', + prefix: '.Bdrsbend-', + properties: ['border-bottom-$END-radius'], + allowCustom: true, + allowSuffixToValue: true + }, + // bottom-left + { + type: 'pattern', + id: 'border-bottom-left-radius', + name: 'Border radius bottom left', + prefix: '.Bdrsbstart-', + properties: ['border-bottom-$START-radius'], + allowCustom: true, + allowSuffixToValue: true + }, + // top-left + { + type: 'pattern', + id: 'border-top-left-radius', + name: 'Border radius top left', + prefix: '.Bdrststart-', + properties: ['border-top-$START-radius'], + allowCustom: true, + allowSuffixToValue: true + }, /** ================================================================== From 799a55d0e47383ba614a08c5b523c37fe9e26839 Mon Sep 17 00:00:00 2001 From: Thierry Date: Tue, 10 Mar 2015 11:07:45 -0700 Subject: [PATCH 3/3] Remove helper classes --- src/rules.js | 28 ---------------------------- 1 file changed, 28 deletions(-) diff --git a/src/rules.js b/src/rules.js index c5dee02a..d994fa60 100644 --- a/src/rules.js +++ b/src/rules.js @@ -2085,33 +2085,5 @@ module.exports = [ {suffix: 'a', values: ['auto']}, {suffix: 'inh', values: ['inherit']} ] - }, - /** - ================================================================== - RULES (Helpers) - ================================================================== - */ - { - type: 'rule', - id: 'reset', - name: 'Reset', - rule: { - '.Reset,.ResetChildren > *': { - 'margin': 0, - 'padding': 0 - } - } - }, - // TODO: BLEED AS PATTERN - { - type: 'rule', - id: 'bfc', - name: 'Block formatting context', - rule: { - '.Bfc': { - 'overflow': 'hidden', - 'zoom': 1 - } - } } ];