From 1866c573afeff042b2b26567cdc6a5c5adee3946 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Mon, 1 Feb 2016 18:21:22 +0100 Subject: [PATCH 01/18] Carousel css --- src/scss/cdb-components/steps/carousel.scss | 89 +++++++++++++++++++++ src/scss/cdb-components/steps/header.scss | 40 +++++++++ src/scss/cdb-utilities/helpers.scss | 3 + src/scss/cdb-variables/_sizes.scss | 4 +- 4 files changed, 134 insertions(+), 2 deletions(-) create mode 100644 src/scss/cdb-components/steps/carousel.scss create mode 100644 src/scss/cdb-components/steps/header.scss diff --git a/src/scss/cdb-components/steps/carousel.scss b/src/scss/cdb-components/steps/carousel.scss new file mode 100644 index 0000000..ad31662 --- /dev/null +++ b/src/scss/cdb-components/steps/carousel.scss @@ -0,0 +1,89 @@ +// Step carousel styles +// ---------------------------------------------- + +/* SG +# Steps/Carousel + +``` +
+
+
1
+

Aggregation

+
+ +
+
+ None +
+
+
+
+
+
+
+
+
+
+``` +*/ + +@import '../../cdb-utilities/mixins'; +@import '../../cdb-variables/sizes'; +@import '../../cdb-variables/colors'; + +.CDB-Carousel { + width: 300px; + margin-left: 32px; +} + +.CDB-Carousel-selection { + color: $cTypo3; + text-transform: uppercase; +} + +.CDB-CarouselContainer { + width: 300px; + padding: $sMargin-element 0; + overflow-x: scroll; + overflow-y: hidden; + white-space: nowrap; +} + +.CDB-CarouselContainer::-webkit-scrollbar { + width: 100%; + height: 3px; + cursor: pointer; +} + +.CDB-CarouselContainer::-webkit-scrollbar-thumb { + background-color: $cSecondaryLine; + border-radius: 4px; + height: 3px; + + &:hover { + background-color: $cMainLine; + } +} + +.CDB-CarouselContainer::-webkit-scrollbar-track { + height: 1px; + background-color: $cThirdBackground; + border-top: 1px solid $cWhite; + border-bottom: 1px solid $cWhite; +} + +.CDB-CarouselCard { + @include inline-block(); + width: $baseSize * 11; + height: $baseSize * 7; + background: $cThirdBackground; + border: 1px solid $cSecondaryLine; + border-radius: 4px; + margin-right: 10px; + vertical-align: top; + + &:hover { + border: 1px solid $cMainLine; + cursor: pointer; + } +} diff --git a/src/scss/cdb-components/steps/header.scss b/src/scss/cdb-components/steps/header.scss new file mode 100644 index 0000000..4b881ac --- /dev/null +++ b/src/scss/cdb-components/steps/header.scss @@ -0,0 +1,40 @@ +// Step header styles +// ---------------------------------------------- + +/* SG +# Steps/Header + +``` +
+
1
+

Aggregation

+
+``` +*/ + +@import '../../cdb-utilities/mixins'; +@import '../../cdb-variables/sizes'; +@import '../../cdb-variables/colors'; + +.CDB-StepHeader { + width: 300px; +} + +.CDB-StepHeader-numeration { + @include inline-block(); + width: $baseSize * 3; + height: $baseSize * 3; + color: $cTypo3; + margin-right: 1px; + background-color: $cWhite; + border: 1px solid $cMainLine; + border-radius: 4px; + font-size: $sFontSize-small; + text-align: center; + line-height: $baseSize * 3; +} + +.CDB-StepHeader-title { + @include inline-block(); + color: $cMainDark; +} \ No newline at end of file diff --git a/src/scss/cdb-utilities/helpers.scss b/src/scss/cdb-utilities/helpers.scss index cee8ce7..b954334 100644 --- a/src/scss/cdb-utilities/helpers.scss +++ b/src/scss/cdb-utilities/helpers.scss @@ -21,6 +21,9 @@ .u-rSpace--xl { margin-right: 12px; } +.u-bSpace-xxxl { + margin-bottom: 40px; +} .u-lSpace { margin-left: 4px; } diff --git a/src/scss/cdb-variables/_sizes.scss b/src/scss/cdb-variables/_sizes.scss index b657ab2..69230b1 100644 --- a/src/scss/cdb-variables/_sizes.scss +++ b/src/scss/cdb-variables/_sizes.scss @@ -9,8 +9,8 @@ $mobileLayout: 280px; $baseSize: 8px; // Margins -$sMargin-section: 24px; // To separate main section -$sMargin-element: 14px; // To separate elements inside a group +$sMargin-section: 24px; // To separate main section +$sMargin-element: 14px; // To separate elements inside a group // Font sizes $sFontSize-small: 10px; From 9504ac53f39efe542bce0a4188963bdfaae35548 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Tue, 2 Feb 2016 11:47:15 +0100 Subject: [PATCH 02/18] Steps and carousel improvements --- src/scss/cdb-components/carousel.scss | 91 +++++++++++++++++++++ src/scss/cdb-components/step.scss | 64 +++++++++++++++ src/scss/cdb-components/steps/carousel.scss | 89 -------------------- src/scss/cdb-components/steps/header.scss | 40 --------- src/scss/cdb-utilities/helpers.scss | 3 + 5 files changed, 158 insertions(+), 129 deletions(-) create mode 100644 src/scss/cdb-components/carousel.scss create mode 100644 src/scss/cdb-components/step.scss delete mode 100644 src/scss/cdb-components/steps/carousel.scss delete mode 100644 src/scss/cdb-components/steps/header.scss diff --git a/src/scss/cdb-components/carousel.scss b/src/scss/cdb-components/carousel.scss new file mode 100644 index 0000000..338c60a --- /dev/null +++ b/src/scss/cdb-components/carousel.scss @@ -0,0 +1,91 @@ +// Carousel styles +// ---------------------------------------------- + +/* SG +# Carousel + +``` + +``` +*/ + +@import '../cdb-utilities/mixins'; +@import '../cdb-variables/sizes'; +@import '../cdb-variables/colors'; + +.CDB-Carousel { + width: 300px; + margin-left: 32px; +} + +.CDB-Carousel-selection-info { + color: $cTypo3; +} + +.CDB-Carousel-cards { + width: 300px; + padding: $sMargin-element 0; + overflow-x: scroll; + overflow-y: hidden; + white-space: nowrap; +} + +.CDB-Carousel-cards::-webkit-scrollbar { + width: 100%; + height: 3px; + cursor: pointer; +} + +.CDB-Carousel-cards::-webkit-scrollbar-thumb { + background-color: $cSecondaryLine; + border-radius: 4px; + height: 3px; + + &:hover { + background-color: $cMainLine; + } +} + +.CDB-Carousel-cards::-webkit-scrollbar-track { + height: 1px; + background-color: $cThirdBackground; + border-top: 1px solid $cWhite; + border-bottom: 1px solid $cWhite; +} + +.CDB-Carousel-card { + @include inline-block(); + width: $baseSize * 11; + height: $baseSize * 7; + background: $cThirdBackground; + border: 1px solid $cSecondaryLine; + border-radius: 4px; + margin-right: 10px; + vertical-align: top; + + &:hover { + border: 1px solid $cMainLine; + cursor: pointer; + } +} diff --git a/src/scss/cdb-components/step.scss b/src/scss/cdb-components/step.scss new file mode 100644 index 0000000..ffb42cf --- /dev/null +++ b/src/scss/cdb-components/step.scss @@ -0,0 +1,64 @@ +// Step styles +// ---------------------------------------------- + +/* SG +# Step + +``` + +``` +*/ + +@import '../cdb-utilities/mixins'; +@import '../cdb-variables/sizes'; +@import '../cdb-variables/colors'; + +.CDB-Steps { + display: block; +} + +.CDB-Step { + margin-bottom: 40px; +} + +.CDB-Step-header { + width: 300px; +} + +.CDB-Step-header-numeration { + @include inline-block(); + width: $baseSize * 3; + height: $baseSize * 3; + color: $cTypo3; + margin-right: 1px; + background-color: $cWhite; + border: 1px solid $cMainLine; + border-radius: 4px; + font-size: $sFontSize-small; + text-align: center; + line-height: $baseSize * 3; +} + +.CDB-Step-header-title { + @include inline-block(); + color: $cMainDark; +} \ No newline at end of file diff --git a/src/scss/cdb-components/steps/carousel.scss b/src/scss/cdb-components/steps/carousel.scss deleted file mode 100644 index ad31662..0000000 --- a/src/scss/cdb-components/steps/carousel.scss +++ /dev/null @@ -1,89 +0,0 @@ -// Step carousel styles -// ---------------------------------------------- - -/* SG -# Steps/Carousel - -``` -
-
-
1
-

Aggregation

-
- -
-
- None -
-
-
-
-
-
-
-
-
-
-``` -*/ - -@import '../../cdb-utilities/mixins'; -@import '../../cdb-variables/sizes'; -@import '../../cdb-variables/colors'; - -.CDB-Carousel { - width: 300px; - margin-left: 32px; -} - -.CDB-Carousel-selection { - color: $cTypo3; - text-transform: uppercase; -} - -.CDB-CarouselContainer { - width: 300px; - padding: $sMargin-element 0; - overflow-x: scroll; - overflow-y: hidden; - white-space: nowrap; -} - -.CDB-CarouselContainer::-webkit-scrollbar { - width: 100%; - height: 3px; - cursor: pointer; -} - -.CDB-CarouselContainer::-webkit-scrollbar-thumb { - background-color: $cSecondaryLine; - border-radius: 4px; - height: 3px; - - &:hover { - background-color: $cMainLine; - } -} - -.CDB-CarouselContainer::-webkit-scrollbar-track { - height: 1px; - background-color: $cThirdBackground; - border-top: 1px solid $cWhite; - border-bottom: 1px solid $cWhite; -} - -.CDB-CarouselCard { - @include inline-block(); - width: $baseSize * 11; - height: $baseSize * 7; - background: $cThirdBackground; - border: 1px solid $cSecondaryLine; - border-radius: 4px; - margin-right: 10px; - vertical-align: top; - - &:hover { - border: 1px solid $cMainLine; - cursor: pointer; - } -} diff --git a/src/scss/cdb-components/steps/header.scss b/src/scss/cdb-components/steps/header.scss deleted file mode 100644 index 4b881ac..0000000 --- a/src/scss/cdb-components/steps/header.scss +++ /dev/null @@ -1,40 +0,0 @@ -// Step header styles -// ---------------------------------------------- - -/* SG -# Steps/Header - -``` -
-
1
-

Aggregation

-
-``` -*/ - -@import '../../cdb-utilities/mixins'; -@import '../../cdb-variables/sizes'; -@import '../../cdb-variables/colors'; - -.CDB-StepHeader { - width: 300px; -} - -.CDB-StepHeader-numeration { - @include inline-block(); - width: $baseSize * 3; - height: $baseSize * 3; - color: $cTypo3; - margin-right: 1px; - background-color: $cWhite; - border: 1px solid $cMainLine; - border-radius: 4px; - font-size: $sFontSize-small; - text-align: center; - line-height: $baseSize * 3; -} - -.CDB-StepHeader-title { - @include inline-block(); - color: $cMainDark; -} \ No newline at end of file diff --git a/src/scss/cdb-utilities/helpers.scss b/src/scss/cdb-utilities/helpers.scss index b954334..00dca02 100644 --- a/src/scss/cdb-utilities/helpers.scss +++ b/src/scss/cdb-utilities/helpers.scss @@ -39,6 +39,9 @@ .u-showMobile { display: none !important; } +.u-uppercase { + text-transform: uppercase; +} @include media-query-mobile() { .u-showDesktop { From beaee4824b4cc0d4dbe0c7d8a5ced7d61b21a444 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Tue, 2 Feb 2016 17:19:24 +0100 Subject: [PATCH 03/18] Carousel and Step header improvements --- src/scss/cdb-components/carousel.scss | 65 +++++++---------------- src/scss/cdb-components/step.scss | 74 +++++++++++++++------------ src/scss/cdb-utilities/helpers.scss | 16 ++++++ 3 files changed, 77 insertions(+), 78 deletions(-) diff --git a/src/scss/cdb-components/carousel.scss b/src/scss/cdb-components/carousel.scss index 338c60a..c20398e 100644 --- a/src/scss/cdb-components/carousel.scss +++ b/src/scss/cdb-components/carousel.scss @@ -5,24 +5,25 @@ # Carousel ``` -
    -
  • -
    -
    1
    -

    Aggregation

    +
      +
    • +
      +
      1
      + +
      +

      Aggregation

      +

      Histogram

      +

      Distribution of a numeric variable in a range

      +
      -
      -

      Histogram

      -

      Distribution of a numeric variable in a range

      -
      -
        -
      • -
      • -
      • -
      • -
      • +
          +
        • +
        • +
        • +
        • +
      • @@ -39,48 +40,20 @@ margin-left: 32px; } -.CDB-Carousel-selection-info { - color: $cTypo3; -} - -.CDB-Carousel-cards { +.CDB-Carousel-inner { width: 300px; - padding: $sMargin-element 0; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; } -.CDB-Carousel-cards::-webkit-scrollbar { - width: 100%; - height: 3px; - cursor: pointer; -} - -.CDB-Carousel-cards::-webkit-scrollbar-thumb { - background-color: $cSecondaryLine; - border-radius: 4px; - height: 3px; - - &:hover { - background-color: $cMainLine; - } -} - -.CDB-Carousel-cards::-webkit-scrollbar-track { - height: 1px; - background-color: $cThirdBackground; - border-top: 1px solid $cWhite; - border-bottom: 1px solid $cWhite; -} - -.CDB-Carousel-card { +.CDB-Carousel-item { @include inline-block(); width: $baseSize * 11; height: $baseSize * 7; - background: $cThirdBackground; border: 1px solid $cSecondaryLine; border-radius: 4px; + background: $cThirdBackground; margin-right: 10px; vertical-align: top; diff --git a/src/scss/cdb-components/step.scss b/src/scss/cdb-components/step.scss index ffb42cf..84c73e3 100644 --- a/src/scss/cdb-components/step.scss +++ b/src/scss/cdb-components/step.scss @@ -6,22 +6,35 @@ ```
        -
      • +
      • -
        1
        -

        Aggregation

        +
        1
        + +
        +

        Aggregation

        +

        Heatmap

        +
        • -
      • +
      • -
        2
        -

        Select style

        +
        2
        + +
        +

        Select style

        +

        None

        +
        • -
      • +
      • -
        3
        -

        Select template

        +
        3
        + +
        +

        Type

        +

        Histogram

        +

        Distribution of a numeric variable in a range

        +
      @@ -32,33 +45,30 @@ @import '../cdb-variables/sizes'; @import '../cdb-variables/colors'; -.CDB-Steps { - display: block; -} - -.CDB-Step { +.CDB-Step-item { margin-bottom: 40px; -} - -.CDB-Step-header { width: 300px; } -.CDB-Step-header-numeration { - @include inline-block(); - width: $baseSize * 3; - height: $baseSize * 3; - color: $cTypo3; - margin-right: 1px; - background-color: $cWhite; - border: 1px solid $cMainLine; - border-radius: 4px; - font-size: $sFontSize-small; - text-align: center; - line-height: $baseSize * 3; +.CDB-Step-header { + @include display-flex(); + @include flex-direction(row); + @include align-items(flex-start, flex-start); } -.CDB-Step-header-title { - @include inline-block(); +.CDB-Step-headerNumeration { + width: $baseSize * 3; + height: $baseSize * 3; + margin-right: 1px; + 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 { color: $cMainDark; -} \ No newline at end of file +} diff --git a/src/scss/cdb-utilities/helpers.scss b/src/scss/cdb-utilities/helpers.scss index 00dca02..ceff847 100644 --- a/src/scss/cdb-utilities/helpers.scss +++ b/src/scss/cdb-utilities/helpers.scss @@ -2,7 +2,9 @@ // ---------------------------------------------- @import './mixins'; +@import '../cdb-variables/colors'; +/* Margins */ .u-tSpace { margin-top: 4px; } @@ -21,6 +23,12 @@ .u-rSpace--xl { margin-right: 12px; } +.u-bSpace--m { + margin-bottom: 8px; +} +.u-bSpace--xl { + margin-bottom: 12px; +} .u-bSpace-xxxl { margin-bottom: 40px; } @@ -30,6 +38,8 @@ .u-lSpace--xl { margin-left: 12px; } + +/* Displays */ .u-iBlock { @include inline-block(); } @@ -39,10 +49,16 @@ .u-showMobile { display: none !important; } + +/* Text */ .u-uppercase { text-transform: uppercase; } +.u-color-cTypo3 { + color: $cTypo3; +} +/* Media queries*/ @include media-query-mobile() { .u-showDesktop { display: none !important; From 3363b72bad6ab8f393b8ea63ac9d48e151639bae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Tue, 2 Feb 2016 19:13:31 +0100 Subject: [PATCH 04/18] Syntax and structure improvements --- src/scss/cdb-components/carousel.scss | 8 ++-- src/scss/cdb-components/step.scss | 51 ++++++++++++++----------- src/scss/cdb-components/typography.scss | 8 ++++ src/scss/cdb-utilities/helpers.scss | 7 ++++ 4 files changed, 48 insertions(+), 26 deletions(-) diff --git a/src/scss/cdb-components/carousel.scss b/src/scss/cdb-components/carousel.scss index c20398e..9bcbe35 100644 --- a/src/scss/cdb-components/carousel.scss +++ b/src/scss/cdb-components/carousel.scss @@ -11,9 +11,9 @@
      1
      -

      Aggregation

      -

      Histogram

      -

      Distribution of a numeric variable in a range

      +

      Aggregation

      +

      Histogram

      +

      Distribution of a numeric variable in a range

    @@ -51,10 +51,10 @@ @include inline-block(); width: $baseSize * 11; height: $baseSize * 7; + margin-right: 10px; border: 1px solid $cSecondaryLine; border-radius: 4px; background: $cThirdBackground; - margin-right: 10px; vertical-align: top; &:hover { diff --git a/src/scss/cdb-components/step.scss b/src/scss/cdb-components/step.scss index 84c73e3..ac1d7c5 100644 --- a/src/scss/cdb-components/step.scss +++ b/src/scss/cdb-components/step.scss @@ -5,39 +5,45 @@ # Step ``` -
      -
    • -
      +
        +
      1. +
        1
        -

        Aggregation

        -

        Heatmap

        +

        Aggregation

        +

        Heatmap

        + +
        2. -
      2. -
        +
      3. +
        2
        -

        Select style

        -

        None

        +

        Select style

        +

        None

        + +
        4. -
      4. -
        +
      5. +
        3
        -

        Type

        -

        Histogram

        -

        Distribution of a numeric variable in a range

        +

        Type

        +

        Histogram

        +

        Distribution of a numeric variable in a range

        + +
        6. -
    + ``` */ @@ -45,11 +51,6 @@ @import '../cdb-variables/sizes'; @import '../cdb-variables/colors'; -.CDB-Step-item { - margin-bottom: 40px; - width: 300px; -} - .CDB-Step-header { @include display-flex(); @include flex-direction(row); @@ -59,7 +60,6 @@ .CDB-Step-headerNumeration { width: $baseSize * 3; height: $baseSize * 3; - margin-right: 1px; border: 1px solid $cMainLine; border-radius: 4px; background-color: $cWhite; @@ -70,5 +70,12 @@ } .CDB-Step-headerInfo { - color: $cMainDark; + width: 100%; +} + +.CDB-Step-action { + width: $baseSize * 3; + height: $baseSize * 3; + font-size: 14px; + text-align: center; } diff --git a/src/scss/cdb-components/typography.scss b/src/scss/cdb-components/typography.scss index d9ec4aa..a1a7e26 100644 --- a/src/scss/cdb-components/typography.scss +++ b/src/scss/cdb-components/typography.scss @@ -47,3 +47,11 @@ font-size: $sFontSize-small; line-height: $sLineHeight-small; } + +.CDB-FontSize-small { + font-size: $sFontSize-small; +} + +.CDB-FontSize-medium { + font-size: $sFontSize-medium; +} diff --git a/src/scss/cdb-utilities/helpers.scss b/src/scss/cdb-utilities/helpers.scss index ceff847..61f9797 100644 --- a/src/scss/cdb-utilities/helpers.scss +++ b/src/scss/cdb-utilities/helpers.scss @@ -54,10 +54,17 @@ .u-uppercase { text-transform: uppercase; } +.u-color-cBlue { + color: $cBlue; +} .u-color-cTypo3 { color: $cTypo3; } +.u-color-cMainDark { + color: $cMainDark; +} + /* Media queries*/ @include media-query-mobile() { .u-showDesktop { From cf70003e563f2e23a593e6c39a46f1ef45681f71 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Thu, 4 Feb 2016 11:12:40 +0100 Subject: [PATCH 05/18] Carousel & step components improvements --- src/scss/cdb-components/carousel.scss | 11 ++--------- src/scss/cdb-components/step.scss | 1 + 2 files changed, 3 insertions(+), 9 deletions(-) diff --git a/src/scss/cdb-components/carousel.scss b/src/scss/cdb-components/carousel.scss index 9bcbe35..fc4798d 100644 --- a/src/scss/cdb-components/carousel.scss +++ b/src/scss/cdb-components/carousel.scss @@ -18,7 +18,7 @@
    -
      +
      • @@ -36,17 +36,10 @@ @import '../cdb-variables/colors'; .CDB-Carousel { - width: 300px; + width: 100%; margin-left: 32px; } -.CDB-Carousel-inner { - width: 300px; - overflow-x: scroll; - overflow-y: hidden; - white-space: nowrap; -} - .CDB-Carousel-item { @include inline-block(); width: $baseSize * 11; diff --git a/src/scss/cdb-components/step.scss b/src/scss/cdb-components/step.scss index ac1d7c5..8e375dc 100644 --- a/src/scss/cdb-components/step.scss +++ b/src/scss/cdb-components/step.scss @@ -78,4 +78,5 @@ height: $baseSize * 3; font-size: 14px; text-align: center; + cursor: pointer; } From 7ecb73c3fa832e49967617e7edf5b7ccd46d918f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Thu, 4 Feb 2016 11:14:42 +0100 Subject: [PATCH 06/18] Steps list markup minor fix --- src/scss/cdb-components/carousel.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/scss/cdb-components/carousel.scss b/src/scss/cdb-components/carousel.scss index fc4798d..99dfe75 100644 --- a/src/scss/cdb-components/carousel.scss +++ b/src/scss/cdb-components/carousel.scss @@ -5,7 +5,7 @@ # Carousel ``` -
          +
          1. 1
            @@ -27,7 +27,7 @@
    • -
+ ``` */ From 564e8d46a40ab9fc4bc730cc1bf2a33535b3c6eb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Thu, 4 Feb 2016 12:21:33 +0100 Subject: [PATCH 07/18] Added shapes to step --- src/fonts/cartoIcon.eot | Bin 18856 -> 18856 bytes src/fonts/cartoIcon.ttf | Bin 18684 -> 18684 bytes src/fonts/cartoIcon.woff | Bin 11836 -> 11836 bytes src/scss/cdb-components/step.scss | 12 +++++++++--- 4 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/fonts/cartoIcon.eot b/src/fonts/cartoIcon.eot index 3c65c524eaf9ec1fa964a007d428f4db8c59f06b..01650deea1b1d7fe881627da6fa0a256b1dd1372 100644 GIT binary patch delta 55 zcmZ26nQ_Hr#tAme;$HC+?bk6cP?DMWVXAbzmv}tC%~u9)#$OCTaOuW}nJ{|u0!9uG E03%Km2LJ#7 delta 55 zcmZ26nQ_Hr#tAme`)A}%v|qE~%fZ)>AnD;Px;};GO0PwC95&!@I diff --git a/src/fonts/cartoIcon.woff b/src/fonts/cartoIcon.woff index 97c100843805d69e85d6ac43b917bf1766ed9317..1d8fe347a83c47eaf8c7628018099d151e6018f3 100644 GIT binary patch delta 61 zcmV-D0K)&gT)bS6c>|y#9I<@1CMj{c#qs<$Um3U=e*r}pF5UPr6Gp!&|NosUg7FWK T%fY||5(NOC(GR<`TPNWLVD1}_ delta 61 zcmV-D0K)&gT)bS6c>|dG$gzC3CMh{J(((K@Um3U=e*r}pE?tdz52N3d|NqVv!T1Nr TVt diff --git a/src/scss/cdb-components/step.scss b/src/scss/cdb-components/step.scss index 8e375dc..b98f120 100644 --- a/src/scss/cdb-components/step.scss +++ b/src/scss/cdb-components/step.scss @@ -15,7 +15,9 @@

Heatmap

- +
+
+
  • @@ -27,7 +29,9 @@

    None

    - +
    +
    +
  • @@ -40,7 +44,9 @@

    Distribution of a numeric variable in a range

    - +
    +
    +
    • From 0d571acf3f95e398ae80666f90f0261fa87b325c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Thu, 4 Feb 2016 12:44:58 +0100 Subject: [PATCH 08/18] Fixed toggle arrows shape relative size and naming --- .../cdb-components/shapes/toogle-arrow.scss | 40 ++++++++++--------- src/scss/cdb-components/step.scss | 6 +-- 2 files changed, 25 insertions(+), 21 deletions(-) diff --git a/src/scss/cdb-components/shapes/toogle-arrow.scss b/src/scss/cdb-components/shapes/toogle-arrow.scss index 86f302a..df2911a 100644 --- a/src/scss/cdb-components/shapes/toogle-arrow.scss +++ b/src/scss/cdb-components/shapes/toogle-arrow.scss @@ -1,5 +1,5 @@ /* SG -# Shapes/Toogle Arrows +# Shapes/Toggle Arrows Description @@ -7,17 +7,17 @@ Description

    16px

    -
    +
    -
    +
    -
    +

    @@ -27,17 +27,17 @@ Description

    12px

    -
    +
    -
    +
    -
    +

    @@ -47,17 +47,17 @@ Description

    16px

    -
    +
    -
    +
    -
    +

    @@ -67,25 +67,26 @@ Description

    12px

    -
    +
    -
    +
    -
    +
    ``` */ @import '../../cdb-variables/colors'; +@import '../../cdb-variables/sizes'; -.CDB-ArrowToogle { +.CDB-ArrowToggle { position: relative; height: 100%; @@ -113,11 +114,14 @@ Description } } -.CDB-ArrowToogle.is-down { +.CDB-ArrowToggle.is-down { transform: rotate(180deg); } -.CDB-ArrowToogle.is-small { +.CDB-ArrowToggle.is-small { + width: $baseSize * 2; + height: $baseSize * 2; + &::before { left: 2px; width: 8px; @@ -128,7 +132,7 @@ Description } } -.CDB-ArrowToogle.is-blue { +.CDB-ArrowToggle.is-blue { &::before { background: $cBlue; } @@ -137,7 +141,7 @@ Description } } -.CDB-ArrowToogle.is-white { +.CDB-ArrowToggle.is-white { &::before { background: $cWhite; } diff --git a/src/scss/cdb-components/step.scss b/src/scss/cdb-components/step.scss index b98f120..460edc7 100644 --- a/src/scss/cdb-components/step.scss +++ b/src/scss/cdb-components/step.scss @@ -16,7 +16,7 @@
    -
    +
    @@ -30,7 +30,7 @@
    -
    +
    @@ -45,7 +45,7 @@
    -
    +
    From b0166e9cadc0306c9cf06fe9bf10021db5dddd3d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Fri, 5 Feb 2016 10:42:47 +0100 Subject: [PATCH 09/18] Several improvements, reduced PR to just carousel component --- src/scss/cdb-components/carousel.scss | 52 +++++------ .../cdb-components/shapes/toogle-arrow.scss | 36 ++++---- src/scss/cdb-components/step.scss | 88 ------------------- src/scss/cdb-utilities/helpers.scss | 18 ---- src/scss/cdb-variables/_sizes.scss | 4 +- 5 files changed, 47 insertions(+), 151 deletions(-) delete mode 100644 src/scss/cdb-components/step.scss diff --git a/src/scss/cdb-components/carousel.scss b/src/scss/cdb-components/carousel.scss index 99dfe75..651c82d 100644 --- a/src/scss/cdb-components/carousel.scss +++ b/src/scss/cdb-components/carousel.scss @@ -5,29 +5,15 @@ # Carousel ``` -
      -
    1. -
      -
      1
      - -
      -

      Aggregation

      -

      Histogram

      -

      Distribution of a numeric variable in a range

      -
      -
      - -
      -
        -
      • -
      • -
      • -
      • -
      • -
      -
      -
      2. -
    +
    +
      +
    • +
    • +
    • +
    • +
    • +
    +
    ``` */ @@ -37,21 +23,37 @@ .CDB-Carousel { width: 100%; - margin-left: 32px; + font-size: 0; } .CDB-Carousel-item { @include inline-block(); width: $baseSize * 11; height: $baseSize * 7; - margin-right: 10px; border: 1px solid $cSecondaryLine; border-radius: 4px; background: $cThirdBackground; vertical-align: top; + box-sizing: border-box; + + &:not(:last-child) { + margin-right: 8px; + } &:hover { border: 1px solid $cMainLine; cursor: pointer; } + + &.is-selected { + border: 2px solid $cBlue; + } +} + +.CDB-Carousel-headerDetails { + color: $cTypo3; + + &.is-uppercase { + text-transform: uppercase; + } } diff --git a/src/scss/cdb-components/shapes/toogle-arrow.scss b/src/scss/cdb-components/shapes/toogle-arrow.scss index df2911a..b0c22cd 100644 --- a/src/scss/cdb-components/shapes/toogle-arrow.scss +++ b/src/scss/cdb-components/shapes/toogle-arrow.scss @@ -1,5 +1,5 @@ /* SG -# Shapes/Toggle Arrows +# Shapes/Toogle Arrows Description @@ -7,17 +7,17 @@ Description

    16px

    -
    +
    -
    +
    -
    +

    @@ -27,17 +27,17 @@ Description

    12px

    -
    +
    -
    +
    -
    +

    @@ -47,17 +47,17 @@ Description

    16px

    -
    +
    -
    +
    -
    +

    @@ -67,17 +67,17 @@ Description

    12px

    -
    +
    -
    +
    -
    +
    ``` @@ -86,7 +86,7 @@ Description @import '../../cdb-variables/colors'; @import '../../cdb-variables/sizes'; -.CDB-ArrowToggle { +.CDB-ArrowToogle { position: relative; height: 100%; @@ -114,11 +114,11 @@ Description } } -.CDB-ArrowToggle.is-down { +.CDB-ArrowToogle.is-down { transform: rotate(180deg); } -.CDB-ArrowToggle.is-small { +.CDB-ArrowToogle.is-small { width: $baseSize * 2; height: $baseSize * 2; @@ -132,7 +132,7 @@ Description } } -.CDB-ArrowToggle.is-blue { +.CDB-ArrowToogle.is-blue { &::before { background: $cBlue; } @@ -141,7 +141,7 @@ Description } } -.CDB-ArrowToggle.is-white { +.CDB-ArrowToogle.is-white { &::before { background: $cWhite; } diff --git a/src/scss/cdb-components/step.scss b/src/scss/cdb-components/step.scss deleted file mode 100644 index 460edc7..0000000 --- a/src/scss/cdb-components/step.scss +++ /dev/null @@ -1,88 +0,0 @@ -// Step styles -// ---------------------------------------------- - -/* SG -# Step - -``` -
      -
    1. -
      -
      1
      - -
      -

      Aggregation

      -

      Heatmap

      -
      - -
      -
      -
      -
      -
      2. -
    2. -
      -
      2
      - -
      -

      Select style

      -

      None

      -
      - -
      -
      -
      -
      -
      3. -
    3. -
      -
      3
      - -
      -

      Type

      -

      Histogram

      -

      Distribution of a numeric variable in a range

      -
      - -
      -
      -
      -
      -
      4. -
    -``` -*/ - -@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-action { - width: $baseSize * 3; - height: $baseSize * 3; - font-size: 14px; - text-align: center; - cursor: pointer; -} diff --git a/src/scss/cdb-utilities/helpers.scss b/src/scss/cdb-utilities/helpers.scss index c5895d8..062c420 100644 --- a/src/scss/cdb-utilities/helpers.scss +++ b/src/scss/cdb-utilities/helpers.scss @@ -35,9 +35,6 @@ .u-bSpace--xl { margin-bottom: 12px; } -.u-bSpace-xxxl { - margin-bottom: 40px; -} .u-lSpace { margin-left: 4px; } @@ -56,21 +53,6 @@ display: none !important; } -/* Text */ -.u-uppercase { - text-transform: uppercase; -} -.u-color-cBlue { - color: $cBlue; -} -.u-color-cTypo3 { - color: $cTypo3; -} - -.u-color-cMainDark { - color: $cMainDark; -} - /* Media queries*/ @include media-query-mobile() { .u-showDesktop { diff --git a/src/scss/cdb-variables/_sizes.scss b/src/scss/cdb-variables/_sizes.scss index 69230b1..b657ab2 100644 --- a/src/scss/cdb-variables/_sizes.scss +++ b/src/scss/cdb-variables/_sizes.scss @@ -9,8 +9,8 @@ $mobileLayout: 280px; $baseSize: 8px; // Margins -$sMargin-section: 24px; // To separate main section -$sMargin-element: 14px; // To separate elements inside a group +$sMargin-section: 24px; // To separate main section +$sMargin-element: 14px; // To separate elements inside a group // Font sizes $sFontSize-small: 10px; From 93dde16d987c7e654721014b490db6d385bb9f50 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Fri, 5 Feb 2016 10:57:50 +0100 Subject: [PATCH 10/18] Minor fix --- src/scss/cdb-components/typography.scss | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/scss/cdb-components/typography.scss b/src/scss/cdb-components/typography.scss index a9b844b..b02624d 100644 --- a/src/scss/cdb-components/typography.scss +++ b/src/scss/cdb-components/typography.scss @@ -48,11 +48,3 @@ font-size: $sFontSize-small; line-height: $sLineHeight-small; } - -.CDB-FontSize-small { - font-size: $sFontSize-small; -} - -.CDB-FontSize-medium { - font-size: $sFontSize-medium; -} From 927584918e0641b9f5cf5c630ea93f024bfeea96 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Fri, 5 Feb 2016 11:12:55 +0100 Subject: [PATCH 11/18] Minor fix --- src/scss/cdb-components/shapes/toogle-arrow.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/scss/cdb-components/shapes/toogle-arrow.scss b/src/scss/cdb-components/shapes/toogle-arrow.scss index b0c22cd..9df580f 100644 --- a/src/scss/cdb-components/shapes/toogle-arrow.scss +++ b/src/scss/cdb-components/shapes/toogle-arrow.scss @@ -119,9 +119,6 @@ Description } .CDB-ArrowToogle.is-small { - width: $baseSize * 2; - height: $baseSize * 2; - &::before { left: 2px; width: 8px; From f12ee38ca054c43acffe7d5d583bdedaf7dc02b7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Mon, 8 Feb 2016 10:52:18 +0100 Subject: [PATCH 12/18] Carousel component: syntax minor fixes --- src/scss/cdb-components/carousel.scss | 16 +++------------- src/scss/cdb-components/shapes/toogle-arrow.scss | 1 - src/scss/cdb-utilities/helpers.scss | 1 - 3 files changed, 3 insertions(+), 15 deletions(-) diff --git a/src/scss/cdb-components/carousel.scss b/src/scss/cdb-components/carousel.scss index 651c82d..e34aaf7 100644 --- a/src/scss/cdb-components/carousel.scss +++ b/src/scss/cdb-components/carousel.scss @@ -25,7 +25,6 @@ width: 100%; font-size: 0; } - .CDB-Carousel-item { @include inline-block(); width: $baseSize * 11; @@ -44,16 +43,7 @@ border: 1px solid $cMainLine; cursor: pointer; } - - &.is-selected { - border: 2px solid $cBlue; - } -} - -.CDB-Carousel-headerDetails { - color: $cTypo3; - - &.is-uppercase { - text-transform: uppercase; - } } +.CDB-Carousel-item.is-selected { + border: 2px solid $cBlue; +} \ No newline at end of file diff --git a/src/scss/cdb-components/shapes/toogle-arrow.scss b/src/scss/cdb-components/shapes/toogle-arrow.scss index 9df580f..86f302a 100644 --- a/src/scss/cdb-components/shapes/toogle-arrow.scss +++ b/src/scss/cdb-components/shapes/toogle-arrow.scss @@ -84,7 +84,6 @@ Description */ @import '../../cdb-variables/colors'; -@import '../../cdb-variables/sizes'; .CDB-ArrowToogle { position: relative; diff --git a/src/scss/cdb-utilities/helpers.scss b/src/scss/cdb-utilities/helpers.scss index 062c420..57626c0 100644 --- a/src/scss/cdb-utilities/helpers.scss +++ b/src/scss/cdb-utilities/helpers.scss @@ -2,7 +2,6 @@ // ---------------------------------------------- @import './mixins'; -@import '../cdb-variables/colors'; /* Margins */ .u-tSpace { From 8ee48342f273002f895b95971c5e7e451ddcbb51 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Mon, 8 Feb 2016 11:15:56 +0100 Subject: [PATCH 13/18] Carousel component: minor fix --- src/scss/cdb-components/carousel.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/scss/cdb-components/carousel.scss b/src/scss/cdb-components/carousel.scss index e34aaf7..91e2549 100644 --- a/src/scss/cdb-components/carousel.scss +++ b/src/scss/cdb-components/carousel.scss @@ -46,4 +46,4 @@ } .CDB-Carousel-item.is-selected { border: 2px solid $cBlue; -} \ No newline at end of file +} From 6e4ba3fe3195746b0182b31558d702bfcd2622de Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Mon, 8 Feb 2016 11:27:14 +0100 Subject: [PATCH 14/18] Carousel component: CartoIcon fix --- src/fonts/cartoIcon.eot | Bin 18856 -> 18856 bytes src/fonts/cartoIcon.ttf | Bin 18684 -> 18684 bytes src/fonts/cartoIcon.woff | Bin 11836 -> 11836 bytes 3 files changed, 0 insertions(+), 0 deletions(-) diff --git a/src/fonts/cartoIcon.eot b/src/fonts/cartoIcon.eot index 01650deea1b1d7fe881627da6fa0a256b1dd1372..0b83194ca36ab0569001ad8dc7307df38619af0b 100644 GIT binary patch delta 54 zcmZ26nQ_Hr#tAme+OuOP+OKE&IcegDsnW5twd471zA|t#{$c=vOE+UeVD#n%j2s>S DL0c2b delta 54 zcmZ26nQ_Hr#tAme;$HC+?bkCY$xQq(RXW~FJf7d?D+4#s;RgNL9k~Di delta 67 zcmV-J0KEUaT)bS6a|ts5001`opduWxe6}Vjak|Cv{5D@1xEX%|MHnvK_%IVjzbXI! ZohyRz50J~jzyuNn0H4thyR%y-;ReD79P Date: Mon, 8 Feb 2016 11:41:46 +0100 Subject: [PATCH 15/18] Carousel component: syntax fix --- src/scss/cdb-components/carousel.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/scss/cdb-components/carousel.scss b/src/scss/cdb-components/carousel.scss index 91e2549..be22b9d 100644 --- a/src/scss/cdb-components/carousel.scss +++ b/src/scss/cdb-components/carousel.scss @@ -47,3 +47,4 @@ .CDB-Carousel-item.is-selected { border: 2px solid $cBlue; } + From e8e7ebe04ae3bf8c2e00c7b41e1a50c081cc9f31 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Mon, 8 Feb 2016 14:36:03 +0100 Subject: [PATCH 16/18] Carousel component: css fixes --- src/scss/cdb-components/carousel.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/scss/cdb-components/carousel.scss b/src/scss/cdb-components/carousel.scss index be22b9d..30f5256 100644 --- a/src/scss/cdb-components/carousel.scss +++ b/src/scss/cdb-components/carousel.scss @@ -29,14 +29,14 @@ @include inline-block(); width: $baseSize * 11; height: $baseSize * 7; + margin-right: 8px; border: 1px solid $cSecondaryLine; border-radius: 4px; background: $cThirdBackground; - vertical-align: top; box-sizing: border-box; - &:not(:last-child) { - margin-right: 8px; + &:last-child { + margin-right: 0; } &:hover { From f2652106b3bd27185a85bec44d07fff9498890af Mon Sep 17 00:00:00 2001 From: Maria Checa Date: Tue, 9 Feb 2016 16:55:40 +0100 Subject: [PATCH 17/18] Carousel component: inside elements horizontal and vertically centered --- src/scss/cdb-components/carousel.scss | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/src/scss/cdb-components/carousel.scss b/src/scss/cdb-components/carousel.scss index 30f5256..0db7835 100644 --- a/src/scss/cdb-components/carousel.scss +++ b/src/scss/cdb-components/carousel.scss @@ -7,11 +7,11 @@ ```
      -
    • -
    • -
    • -
    • -
    • +
    • +
    • +
    • +
    • +
    ``` @@ -22,11 +22,15 @@ @import '../cdb-variables/colors'; .CDB-Carousel { + @include display-flex(); + @include justify-content(flex-start); width: 100%; font-size: 0; } -.CDB-Carousel-item { - @include inline-block(); +.CDB-CarouselItem { + @include display-flex(); + @include align-items(center); + @include justify-content(center); width: $baseSize * 11; height: $baseSize * 7; margin-right: 8px; @@ -38,13 +42,11 @@ &:last-child { margin-right: 0; } - &:hover { border: 1px solid $cMainLine; cursor: pointer; } } -.CDB-Carousel-item.is-selected { +.CDB-CarouselItem.is-selected { border: 2px solid $cBlue; } - From bddf751f04946d735cb075723ee279ae0ebf2e83 Mon Sep 17 00:00:00 2001 From: Maria Checa Date: Tue, 9 Feb 2016 18:01:02 +0100 Subject: [PATCH 18/18] Carousel component: minor fix --- src/scss/cdb-components/carousel.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/scss/cdb-components/carousel.scss b/src/scss/cdb-components/carousel.scss index 0db7835..7342266 100644 --- a/src/scss/cdb-components/carousel.scss +++ b/src/scss/cdb-components/carousel.scss @@ -25,7 +25,6 @@ @include display-flex(); @include justify-content(flex-start); width: 100%; - font-size: 0; } .CDB-CarouselItem { @include display-flex();