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 1/6] 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 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 2/6] 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 3/6] 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 4/6] 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 5/6] 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 6/6] 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