From 547f68db963f3241b78988fe26618043ca00a3a4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Fri, 5 Feb 2016 10:57:11 +0100 Subject: [PATCH 01/15] Step component --- src/scss/cdb-components/step.scss | 72 +++++++++++++++++++++++++ src/scss/cdb-components/typography.scss | 8 +++ 2 files changed, 80 insertions(+) create mode 100644 src/scss/cdb-components/step.scss diff --git a/src/scss/cdb-components/step.scss b/src/scss/cdb-components/step.scss new file mode 100644 index 0000000..be490c5 --- /dev/null +++ b/src/scss/cdb-components/step.scss @@ -0,0 +1,72 @@ +// Step styles +// ---------------------------------------------- + +/* SG +# Step + +``` +
    +
  1. +
    +
    1
    + +
    +

    Type

    +

    Histogram

    +

    Distribution of a numeric variable in a range

    +
    + +
    +
    +
    +
    +
    2. +
+``` +*/ + +@import '../cdb-utilities/mixins'; +@import '../cdb-variables/sizes'; +@import '../cdb-variables/colors'; + +.CDB-Step-header { + @include display-flex(); + @include flex-direction(row); + @include align-items(flex-start, flex-start); +} + +.CDB-Step-headerNumeration { + width: $baseSize * 3; + height: $baseSize * 3; + border: 1px solid $cMainLine; + border-radius: 4px; + background-color: $cWhite; + color: $cTypo3; + font-size: $sFontSize-small; + line-height: $baseSize * 3; + text-align: center; +} + +.CDB-Step-headerInfo { + width: 100%; +} + +.CDB-Step-headerTitle { + color: $cMainDark; +} + +.CDB-Step-headerDetails { + color: $cTypo3; + + &.is-uppercase { + text-transform: uppercase; + } +} + +.CDB-Step-action { + width: $baseSize * 3; + height: $baseSize * 3; + font-size: 14px; + text-align: center; + cursor: pointer; +} diff --git a/src/scss/cdb-components/typography.scss b/src/scss/cdb-components/typography.scss index b02624d..a9b844b 100644 --- a/src/scss/cdb-components/typography.scss +++ b/src/scss/cdb-components/typography.scss @@ -48,3 +48,11 @@ font-size: $sFontSize-small; line-height: $sLineHeight-small; } + +.CDB-FontSize-small { + font-size: $sFontSize-small; +} + +.CDB-FontSize-medium { + font-size: $sFontSize-medium; +} From 610ef9b3fecb4f3ed3ea0ede64199f62a4bda3dd Mon Sep 17 00:00:00 2001 From: piensaenpixel Date: Fri, 5 Feb 2016 16:10:41 +0100 Subject: [PATCH 02/15] fix assets --- .../cdb-components/shapes/threePoints.scss | 48 +++++++++---------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/src/scss/cdb-components/shapes/threePoints.scss b/src/scss/cdb-components/shapes/threePoints.scss index a2e2c41..48038e3 100644 --- a/src/scss/cdb-components/shapes/threePoints.scss +++ b/src/scss/cdb-components/shapes/threePoints.scss @@ -6,31 +6,31 @@ Description ```

16px

-
- -
+
+
-
- -
+
+
-
- -
+
+

@@ -38,31 +38,31 @@ Description

12px

-
- -
+
+
-
- -
+
+
-
- -
+
+ ``` */ From 515112a35a1ac0bd340f02c4467b3debd5d2adbc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javier=20=C3=81lvarez=20Medina?= Date: Fri, 5 Feb 2016 16:24:31 +0100 Subject: [PATCH 03/15] Added gulp instructions for installation --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index cefbc3e..95fb4ff 100644 --- a/README.md +++ b/README.md @@ -4,8 +4,9 @@ ### Installation As easy as: -- ```npm install``` +- ```npm install --global gulp-cli``` [Gulp installation](https://github.com/gulpjs/gulp) - ```npm install -g markdown-styleguide-generator``` [StyleGenerator installation](https://www.npmjs.com/package/markdown-styleguide-generator#install) +- ```npm install``` ### Build If you want to use any of the CartoAssets components, after the installation just run: From 071c568baeaf0057e63681c28f2f408f5cf49f5f Mon Sep 17 00:00:00 2001 From: Javier Arce Date: Fri, 5 Feb 2016 16:43:17 +0100 Subject: [PATCH 04/15] Closes #57 --- src/scss/cdb-utilities/fonts.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/scss/cdb-utilities/fonts.scss b/src/scss/cdb-utilities/fonts.scss index 7684a09..b36e4b9 100644 --- a/src/scss/cdb-utilities/fonts.scss +++ b/src/scss/cdb-utilities/fonts.scss @@ -6,20 +6,20 @@ font-family: 'Open Sans'; font-style: normal; font-weight: 300; - src: local('Open Sans Light'), local('OpenSans-Light'), url('themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'), - url('themes.googleusercontent.com/static/fonts/opensans/v8/DXI1ORHCpsQm3Vp6mXoaTeY5mlVXtdNkpsMpKkrDXP4.woff') format('woff'); + src: local('Open Sans Light'), local('OpenSans-Light'), url('//themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'), + url('//themes.googleusercontent.com/static/fonts/opensans/v8/DXI1ORHCpsQm3Vp6mXoaTeY5mlVXtdNkpsMpKkrDXP4.woff') format('woff'); } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: local('Open Sans'), local('OpenSans'), url('themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'), - url('themes.googleusercontent.com/static/fonts/opensans/v8/u-WUoqrET9fUeobQW7jkRbO3LdcAZYWl9Si6vvxL-qU.woff') format('woff'); + url('//themes.googleusercontent.com/static/fonts/opensans/v8/u-WUoqrET9fUeobQW7jkRbO3LdcAZYWl9Si6vvxL-qU.woff') format('woff'); } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; - src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url('themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'), - url('themes.googleusercontent.com/static/fonts/opensans/v8/MTP_ySUJH_bn48VBG8sNSuY5mlVXtdNkpsMpKkrDXP4.woff') format('woff'); + src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url('//themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'), + url('//themes.googleusercontent.com/static/fonts/opensans/v8/MTP_ySUJH_bn48VBG8sNSuY5mlVXtdNkpsMpKkrDXP4.woff') format('woff'); } From 5151d8c604f7473cca2944ba49bebe0b40a480ea Mon Sep 17 00:00:00 2001 From: saleiva Date: Fri, 5 Feb 2016 16:43:50 +0100 Subject: [PATCH 05/15] Adding is-upper class to typography --- src/scss/cdb-components/typography.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/scss/cdb-components/typography.scss b/src/scss/cdb-components/typography.scss index b02624d..67b7f34 100644 --- a/src/scss/cdb-components/typography.scss +++ b/src/scss/cdb-components/typography.scss @@ -9,6 +9,7 @@

Open Sans 26/34 Light

Open Sans 16/22 Regular

Open Sans 12/16 Semibold

+

Open Sans 12/16 Semibold Uppercase

Open Sans 12/16 Regular

Open Sans 10/14 Semibold

Open Sans 10/14 Regular

@@ -27,6 +28,9 @@ &.is-light { font-weight: $sFontWeight-lighter; } + &.is-upper { + text-transform: uppercase; + } } .CDB-Size-huge { From 5182f60f65be82578efc0ccecc9a284961e0b4f6 Mon Sep 17 00:00:00 2001 From: saleiva Date: Fri, 5 Feb 2016 16:44:06 +0100 Subject: [PATCH 06/15] Revert "Adding is-upper class to typography" This reverts commit 5151d8c604f7473cca2944ba49bebe0b40a480ea. --- src/scss/cdb-components/typography.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/scss/cdb-components/typography.scss b/src/scss/cdb-components/typography.scss index 67b7f34..b02624d 100644 --- a/src/scss/cdb-components/typography.scss +++ b/src/scss/cdb-components/typography.scss @@ -9,7 +9,6 @@

Open Sans 26/34 Light

Open Sans 16/22 Regular

Open Sans 12/16 Semibold

-

Open Sans 12/16 Semibold Uppercase

Open Sans 12/16 Regular

Open Sans 10/14 Semibold

Open Sans 10/14 Regular

@@ -28,9 +27,6 @@ &.is-light { font-weight: $sFontWeight-lighter; } - &.is-upper { - text-transform: uppercase; - } } .CDB-Size-huge { From 9f671180795deeb8f47e15d3aa2c505df3ccaaf5 Mon Sep 17 00:00:00 2001 From: Javier Arce Date: Fri, 5 Feb 2016 16:44:06 +0100 Subject: [PATCH 07/15] Adds // --- src/scss/cdb-utilities/fonts.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/scss/cdb-utilities/fonts.scss b/src/scss/cdb-utilities/fonts.scss index b36e4b9..d201ace 100644 --- a/src/scss/cdb-utilities/fonts.scss +++ b/src/scss/cdb-utilities/fonts.scss @@ -13,7 +13,7 @@ font-family: 'Open Sans'; font-style: normal; font-weight: 400; - src: local('Open Sans'), local('OpenSans'), url('themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'), + src: local('Open Sans'), local('OpenSans'), url('//themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'), url('//themes.googleusercontent.com/static/fonts/opensans/v8/u-WUoqrET9fUeobQW7jkRbO3LdcAZYWl9Si6vvxL-qU.woff') format('woff'); } @font-face { From ecefc7517c17de68370dcd767d7d39dbbe93063b Mon Sep 17 00:00:00 2001 From: saleiva Date: Fri, 5 Feb 2016 16:45:33 +0100 Subject: [PATCH 08/15] is-upper --- src/scss/cdb-components/typography.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/scss/cdb-components/typography.scss b/src/scss/cdb-components/typography.scss index b02624d..67b7f34 100644 --- a/src/scss/cdb-components/typography.scss +++ b/src/scss/cdb-components/typography.scss @@ -9,6 +9,7 @@

Open Sans 26/34 Light

Open Sans 16/22 Regular

Open Sans 12/16 Semibold

+

Open Sans 12/16 Semibold Uppercase

Open Sans 12/16 Regular

Open Sans 10/14 Semibold

Open Sans 10/14 Regular

@@ -27,6 +28,9 @@ &.is-light { font-weight: $sFontWeight-lighter; } + &.is-upper { + text-transform: uppercase; + } } .CDB-Size-huge { From 928663d7e49021f003bf91fe76e9e73b4316d940 Mon Sep 17 00:00:00 2001 From: saleiva Date: Fri, 5 Feb 2016 16:43:50 +0100 Subject: [PATCH 09/15] Adding is-upper class to typography --- src/scss/cdb-components/typography.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/scss/cdb-components/typography.scss b/src/scss/cdb-components/typography.scss index b02624d..67b7f34 100644 --- a/src/scss/cdb-components/typography.scss +++ b/src/scss/cdb-components/typography.scss @@ -9,6 +9,7 @@

Open Sans 26/34 Light

Open Sans 16/22 Regular

Open Sans 12/16 Semibold

+

Open Sans 12/16 Semibold Uppercase

Open Sans 12/16 Regular

Open Sans 10/14 Semibold

Open Sans 10/14 Regular

@@ -27,6 +28,9 @@ &.is-light { font-weight: $sFontWeight-lighter; } + &.is-upper { + text-transform: uppercase; + } } .CDB-Size-huge { From 95278659e99f1bfc498eab0a895f8a9c7bfe06ef Mon Sep 17 00:00:00 2001 From: saleiva Date: Fri, 5 Feb 2016 16:46:20 +0100 Subject: [PATCH 10/15] Revert "Adding is-upper class to typography" This reverts commit 5151d8c604f7473cca2944ba49bebe0b40a480ea. --- src/scss/cdb-components/typography.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/scss/cdb-components/typography.scss b/src/scss/cdb-components/typography.scss index 67b7f34..b02624d 100644 --- a/src/scss/cdb-components/typography.scss +++ b/src/scss/cdb-components/typography.scss @@ -9,7 +9,6 @@

Open Sans 26/34 Light

Open Sans 16/22 Regular

Open Sans 12/16 Semibold

-

Open Sans 12/16 Semibold Uppercase

Open Sans 12/16 Regular

Open Sans 10/14 Semibold

Open Sans 10/14 Regular

@@ -28,9 +27,6 @@ &.is-light { font-weight: $sFontWeight-lighter; } - &.is-upper { - text-transform: uppercase; - } } .CDB-Size-huge { From 6ef85bd46f69ce3d375763bb468d30d5747da08d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Mon, 8 Feb 2016 12:03:45 +0100 Subject: [PATCH 11/15] Step component: syntax minor fix --- src/scss/cdb-components/step.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/scss/cdb-components/step.scss b/src/scss/cdb-components/step.scss index be490c5..50f44a3 100644 --- a/src/scss/cdb-components/step.scss +++ b/src/scss/cdb-components/step.scss @@ -34,7 +34,6 @@ @include flex-direction(row); @include align-items(flex-start, flex-start); } - .CDB-Step-headerNumeration { width: $baseSize * 3; height: $baseSize * 3; @@ -46,15 +45,12 @@ line-height: $baseSize * 3; text-align: center; } - .CDB-Step-headerInfo { width: 100%; } - .CDB-Step-headerTitle { color: $cMainDark; } - .CDB-Step-headerDetails { color: $cTypo3; @@ -62,7 +58,6 @@ text-transform: uppercase; } } - .CDB-Step-action { width: $baseSize * 3; height: $baseSize * 3; From c54528bf6a566c94d03efe6857d5b12d8ced0b3c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Mon, 8 Feb 2016 15:07:25 +0100 Subject: [PATCH 12/15] Step component: flex elements fix --- src/scss/cdb-components/step.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/scss/cdb-components/step.scss b/src/scss/cdb-components/step.scss index 50f44a3..42f29f5 100644 --- a/src/scss/cdb-components/step.scss +++ b/src/scss/cdb-components/step.scss @@ -44,9 +44,10 @@ font-size: $sFontSize-small; line-height: $baseSize * 3; text-align: center; + box-sizing: border-box; } .CDB-Step-headerInfo { - width: 100%; + @include flex-grow(2); } .CDB-Step-headerTitle { color: $cMainDark; From 8bdc4c712b8275d683e026e75f024be7468b7978 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Mon, 8 Feb 2016 15:23:14 +0100 Subject: [PATCH 13/15] Step component: added to headers stylesheet --- src/scss/cdb-components/headers.scss | 53 +++++++++++++++++++++- src/scss/cdb-components/step.scss | 68 ---------------------------- 2 files changed, 52 insertions(+), 69 deletions(-) delete mode 100644 src/scss/cdb-components/step.scss diff --git a/src/scss/cdb-components/headers.scss b/src/scss/cdb-components/headers.scss index 02ca1b2..790850e 100644 --- a/src/scss/cdb-components/headers.scss +++ b/src/scss/cdb-components/headers.scss @@ -47,9 +47,11 @@ +


+
@@ -85,6 +87,7 @@

populates_places

+


@@ -111,6 +114,7 @@

Positron by CartoDB

+


@@ -130,10 +134,28 @@

populates_places

+


+
+
1
+ +
+

Type

+

Histogram

+

Distribution of a numeric variable in a range

+
+ +
+
+
+
+ +
+
+
``` */ @@ -191,5 +213,34 @@ vertical-align: middle; } +/* Steps header */ +.CDB-Step-header { + @include display-flex(); + @include flex-direction(row); + @include align-items(flex-start, flex-start); +} +.CDB-Step-headerNumeration { + width: $baseSize * 3; + height: $baseSize * 3; + border: 1px solid $cMainLine; + border-radius: 4px; + background-color: $cWhite; + color: $cTypo3; + font-size: $sFontSize-small; + line-height: $baseSize * 3; + text-align: center; + box-sizing: border-box; +} +.CDB-Step-headerInfo { + @include flex-grow(2); +} +.CDB-Step-headerTitle { + color: $cMainDark; +} +.CDB-Step-headerDetails { + color: $cTypo3; - + &.is-uppercase { + text-transform: uppercase; + } +} diff --git a/src/scss/cdb-components/step.scss b/src/scss/cdb-components/step.scss deleted file mode 100644 index 42f29f5..0000000 --- a/src/scss/cdb-components/step.scss +++ /dev/null @@ -1,68 +0,0 @@ -// Step styles -// ---------------------------------------------- - -/* SG -# Step - -``` -
    -
  1. -
    -
    1
    - -
    -

    Type

    -

    Histogram

    -

    Distribution of a numeric variable in a range

    -
    - -
    -
    -
    -
    -
    2. -
-``` -*/ - -@import '../cdb-utilities/mixins'; -@import '../cdb-variables/sizes'; -@import '../cdb-variables/colors'; - -.CDB-Step-header { - @include display-flex(); - @include flex-direction(row); - @include align-items(flex-start, flex-start); -} -.CDB-Step-headerNumeration { - width: $baseSize * 3; - height: $baseSize * 3; - border: 1px solid $cMainLine; - border-radius: 4px; - background-color: $cWhite; - color: $cTypo3; - font-size: $sFontSize-small; - line-height: $baseSize * 3; - text-align: center; - box-sizing: border-box; -} -.CDB-Step-headerInfo { - @include flex-grow(2); -} -.CDB-Step-headerTitle { - color: $cMainDark; -} -.CDB-Step-headerDetails { - color: $cTypo3; - - &.is-uppercase { - text-transform: uppercase; - } -} -.CDB-Step-action { - width: $baseSize * 3; - height: $baseSize * 3; - font-size: 14px; - text-align: center; - cursor: pointer; -} From 2024f616ec19ed859ad5710a372607f23057dbdb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Mon, 8 Feb 2016 16:57:27 +0100 Subject: [PATCH 14/15] Step component: improvements --- src/scss/cdb-components/headers.scss | 60 ++++++++++------------------ 1 file changed, 22 insertions(+), 38 deletions(-) diff --git a/src/scss/cdb-components/headers.scss b/src/scss/cdb-components/headers.scss index 790850e..48662fc 100644 --- a/src/scss/cdb-components/headers.scss +++ b/src/scss/cdb-components/headers.scss @@ -139,17 +139,24 @@

-
-
1
+
+
1
-
-

Type

-

Histogram

-

Distribution of a numeric variable in a range

-
+
+
+

Type

+ +
+ +
+
+
+ +
+
-
-
+

Histogram

+

Distribution of a numeric variable in a range

@@ -170,7 +177,6 @@ display: block; } } - .CDB-HeaderInfo-ListItem { display: inline-block; margin-right: 8px; @@ -180,24 +186,23 @@ margin-right: 0; } } - .CDB-HeaderInfo-Text { color: $cTypo3; + + &.is-uppercase { + text-transform: uppercase; + } } - .CDB-HeaderInfo-Inner { @include flex(1); } - .CDB-HeaderInfo-Back { margin-top: 7px; } - .CDB-HeaderInfo-Title { @include display-flex(); @include align-items(center); } - .CDB-HeaderInfo-TitleText { @include flex(1); width: 0; @@ -206,20 +211,12 @@ white-space: nowrap; overflow: hidden; } - .CDB-HeaderInfo-ActionsItem { display: inline-block; margin-left: 4px; vertical-align: middle; } - -/* Steps header */ -.CDB-Step-header { - @include display-flex(); - @include flex-direction(row); - @include align-items(flex-start, flex-start); -} -.CDB-Step-headerNumeration { +.CDB-HeaderNumeration { width: $baseSize * 3; height: $baseSize * 3; border: 1px solid $cMainLine; @@ -227,20 +224,7 @@ background-color: $cWhite; color: $cTypo3; font-size: $sFontSize-small; - line-height: $baseSize * 3; + line-height: 23px; text-align: center; box-sizing: border-box; } -.CDB-Step-headerInfo { - @include flex-grow(2); -} -.CDB-Step-headerTitle { - color: $cMainDark; -} -.CDB-Step-headerDetails { - color: $cTypo3; - - &.is-uppercase { - text-transform: uppercase; - } -} From d81f93054328266e62ce5d48e5bf7c7defb4cf32 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Mon, 8 Feb 2016 17:54:20 +0100 Subject: [PATCH 15/15] Step component: minor fix --- src/scss/cdb-components/headers.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/scss/cdb-components/headers.scss b/src/scss/cdb-components/headers.scss index 48662fc..00a72b9 100644 --- a/src/scss/cdb-components/headers.scss +++ b/src/scss/cdb-components/headers.scss @@ -156,7 +156,7 @@

Histogram

-

Distribution of a numeric variable in a range

+

Distribution of a numeric variable in a range