From 68e36458986def82d703120e77b96d5b80a7ca41 Mon Sep 17 00:00:00 2001 From: Ian Storm Taylor Date: Fri, 13 Jan 2012 12:59:56 -0500 Subject: [PATCH 1/4] Added sizing convenience methods for margin, padding and border. They let you set vertical and horizontal values for all three in one line instead of always setting "top" and "bottom" or "left" and "right" values. --- lib/nib/index.styl | 1 + lib/nib/sizing.styl | 94 +++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 95 insertions(+) create mode 100644 lib/nib/sizing.styl diff --git a/lib/nib/index.styl b/lib/nib/index.styl index 85710d45..7b4eca4e 100644 --- a/lib/nib/index.styl +++ b/lib/nib/index.styl @@ -10,3 +10,4 @@ @import 'buttons' @import 'box' @import 'color-image' +@import 'sizing' diff --git a/lib/nib/sizing.styl b/lib/nib/sizing.styl new file mode 100644 index 00000000..2de20bd7 --- /dev/null +++ b/lib/nib/sizing.styl @@ -0,0 +1,94 @@ + +/* + * Box sizing utility. Convenience methods for vertical and horizontal sizing. + * + * Synopsis: + * + * padding-vertical: + * padding-horizontal: + * + * margin-vertical: + * margin-horizontal: + * + * border-vertical: + * border-horizontal: + * + * border-width-vertical: + * border-width-horizontal: + * border-style-vertical: + * border-style-horizontal: + * border-color-vertical: + * border-color-horizontal: + * + * Examples: + * + * margin-vertical: 2px + * padding-horizontal: 5em + * border-vertical: 2px solid green + * + */ + + +/* + * Margin utilities + */ +margin-vertical() + margin-top: arguments + margin-bottom: arguments + +margin-horizontal() + margin-right: arguments + margin-left: arguments + + +/* + * Padding utilities + */ +padding-vertical() + padding-top: arguments + padding-bottom: arguments + +padding-horizontal() + padding-right: arguments + padding-left: arguments + + +/* + * Border utilities + */ +border-vertical() + border-top: arguments + border-bottom: arguments + +border-horizontal() + border-right: arguments + border-left: arguments + + +border-vertical-width() + border-top-width: arguments + border-bottom-width: arguments + +border-horizontal-width() + border-right-width: arguments + border-left-width: arguments + + +border-vertical-color() + border-top-color: arguments + border-bottom-color: arguments + +border-horizontal-color() + border-right-color: arguments + border-left-color: arguments + + +border-vertical-style() + border-top-style: arguments + border-bottom-style: arguments + +border-horizontal-style() + border-right-style: arguments + border-left-style: arguments + + From be71d18d1d735d14ecd77eb7fbb24a54ceb78dc8 Mon Sep 17 00:00:00 2001 From: Ian Storm Taylor Date: Tue, 24 Jan 2012 13:36:20 -0500 Subject: [PATCH 2/4] added ability to pass in pairs to specifiy two different values --- lib/nib/sizing.styl | 40 ++++++++++++++++++++++++++++++---------- 1 file changed, 30 insertions(+), 10 deletions(-) diff --git a/lib/nib/sizing.styl b/lib/nib/sizing.styl index 2de20bd7..690a6a4b 100644 --- a/lib/nib/sizing.styl +++ b/lib/nib/sizing.styl @@ -2,6 +2,10 @@ /* * Box sizing utility. Convenience methods for vertical and horizontal sizing. * + * Margin and padding utilities also allow for a pair of values that specify + * different sizes in both directions. + * + * * Synopsis: * * padding-vertical: @@ -22,8 +26,8 @@ * * Examples: * - * margin-vertical: 2px - * padding-horizontal: 5em + * margin-horizontal: 2px + * padding-veritcal: 5em 10px * border-vertical: 2px solid green * */ @@ -33,24 +37,40 @@ * Margin utilities */ margin-vertical() - margin-top: arguments - margin-bottom: arguments + if length(arguments) == 2 + margin-top: arguments[0] + margin-bottom: arguments[1] + else + margin-top: arguments + margin-bottom: arguments margin-horizontal() - margin-right: arguments - margin-left: arguments + if length(arguments) == 2 + margin-right: arguments[0] + margin-left: arguments[1] + else + margin-right: arguments + margin-left: arguments /* * Padding utilities */ padding-vertical() - padding-top: arguments - padding-bottom: arguments + if length(arguments) == 2 + padding-top: arguments[0] + padding-bottom: arguments[1] + else + padding-top: arguments + padding-bottom: arguments padding-horizontal() - padding-right: arguments - padding-left: arguments + if length(arguments) == 2 + padding-right: arguments[0] + padding-left: arguments[1] + else + padding-right: arguments + padding-left: arguments /* From f31ea0b80f0e209137668a34bf5244f58eac15ee Mon Sep 17 00:00:00 2001 From: Ian Storm Taylor Date: Fri, 13 Jan 2012 12:59:56 -0500 Subject: [PATCH 3/4] Added sizing convenience methods for margin, padding and border. They let you set vertical and horizontal values for all three in one line instead of always setting "top" and "bottom" or "left" and "right" values. --- lib/nib/index.styl | 1 + lib/nib/sizing.styl | 94 +++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 95 insertions(+) create mode 100644 lib/nib/sizing.styl diff --git a/lib/nib/index.styl b/lib/nib/index.styl index 85710d45..7b4eca4e 100644 --- a/lib/nib/index.styl +++ b/lib/nib/index.styl @@ -10,3 +10,4 @@ @import 'buttons' @import 'box' @import 'color-image' +@import 'sizing' diff --git a/lib/nib/sizing.styl b/lib/nib/sizing.styl new file mode 100644 index 00000000..2de20bd7 --- /dev/null +++ b/lib/nib/sizing.styl @@ -0,0 +1,94 @@ + +/* + * Box sizing utility. Convenience methods for vertical and horizontal sizing. + * + * Synopsis: + * + * padding-vertical: + * padding-horizontal: + * + * margin-vertical: + * margin-horizontal: + * + * border-vertical: + * border-horizontal: + * + * border-width-vertical: + * border-width-horizontal: + * border-style-vertical: + * border-style-horizontal: + * border-color-vertical: + * border-color-horizontal: + * + * Examples: + * + * margin-vertical: 2px + * padding-horizontal: 5em + * border-vertical: 2px solid green + * + */ + + +/* + * Margin utilities + */ +margin-vertical() + margin-top: arguments + margin-bottom: arguments + +margin-horizontal() + margin-right: arguments + margin-left: arguments + + +/* + * Padding utilities + */ +padding-vertical() + padding-top: arguments + padding-bottom: arguments + +padding-horizontal() + padding-right: arguments + padding-left: arguments + + +/* + * Border utilities + */ +border-vertical() + border-top: arguments + border-bottom: arguments + +border-horizontal() + border-right: arguments + border-left: arguments + + +border-vertical-width() + border-top-width: arguments + border-bottom-width: arguments + +border-horizontal-width() + border-right-width: arguments + border-left-width: arguments + + +border-vertical-color() + border-top-color: arguments + border-bottom-color: arguments + +border-horizontal-color() + border-right-color: arguments + border-left-color: arguments + + +border-vertical-style() + border-top-style: arguments + border-bottom-style: arguments + +border-horizontal-style() + border-right-style: arguments + border-left-style: arguments + + From 0f85e714cc86992528e565b79243828879fbab5f Mon Sep 17 00:00:00 2001 From: Ian Storm Taylor Date: Tue, 24 Jan 2012 13:36:20 -0500 Subject: [PATCH 4/4] added ability to pass in pairs to specifiy two different values --- lib/nib/sizing.styl | 40 ++++++++++++++++++++++++++++++---------- 1 file changed, 30 insertions(+), 10 deletions(-) diff --git a/lib/nib/sizing.styl b/lib/nib/sizing.styl index 2de20bd7..690a6a4b 100644 --- a/lib/nib/sizing.styl +++ b/lib/nib/sizing.styl @@ -2,6 +2,10 @@ /* * Box sizing utility. Convenience methods for vertical and horizontal sizing. * + * Margin and padding utilities also allow for a pair of values that specify + * different sizes in both directions. + * + * * Synopsis: * * padding-vertical: @@ -22,8 +26,8 @@ * * Examples: * - * margin-vertical: 2px - * padding-horizontal: 5em + * margin-horizontal: 2px + * padding-veritcal: 5em 10px * border-vertical: 2px solid green * */ @@ -33,24 +37,40 @@ * Margin utilities */ margin-vertical() - margin-top: arguments - margin-bottom: arguments + if length(arguments) == 2 + margin-top: arguments[0] + margin-bottom: arguments[1] + else + margin-top: arguments + margin-bottom: arguments margin-horizontal() - margin-right: arguments - margin-left: arguments + if length(arguments) == 2 + margin-right: arguments[0] + margin-left: arguments[1] + else + margin-right: arguments + margin-left: arguments /* * Padding utilities */ padding-vertical() - padding-top: arguments - padding-bottom: arguments + if length(arguments) == 2 + padding-top: arguments[0] + padding-bottom: arguments[1] + else + padding-top: arguments + padding-bottom: arguments padding-horizontal() - padding-right: arguments - padding-left: arguments + if length(arguments) == 2 + padding-right: arguments[0] + padding-left: arguments[1] + else + padding-right: arguments + padding-left: arguments /*