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/42] 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/42] 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/42] 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/42] 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/42] 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/42] 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/42] 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/42] 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/42] 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 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 10/42] 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 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 11/42] 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 12/42] 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 13/42] 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 14/42] 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 15/42] 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 16/42] 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 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 17/42] 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 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 18/42] 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 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 19/42] 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 20/42] 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 21/42] 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 124aaff389f0a086c8d353ce40b1d01a3d5761ba Mon Sep 17 00:00:00 2001 From: piensaenpixel Date: Mon, 8 Feb 2016 17:01:29 +0100 Subject: [PATCH 22/42] add first commit --- 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/typography.scss | 4 +++- src/scss/cdb-utilities/defaults.css.scss | 4 ++++ src/scss/cdb-utilities/helpers.scss | 12 ++++++++++++ src/scss/cdb-variables/_colors.scss | 1 + 7 files changed, 20 insertions(+), 1 deletion(-) diff --git a/src/fonts/cartoIcon.eot b/src/fonts/cartoIcon.eot index 0b83194ca36ab0569001ad8dc7307df38619af0b..bed146d60ed603d2c89833c2745248449cdfbf44 100644 GIT binary patch delta 55 zcmZ26nQ_Hr#tAme_f0$}+OK0?t+Qj|hpEz@Cimm{ZN4&aGyY-#f=l;GpTp?Q3m7>( E0B30xq5uE@ delta 55 zcmZ26nQ_Hr#tAme+OuOP+OK0?@N?3{4^yRMXKTmv+k9o( E0AHpQY5)KL diff --git a/src/fonts/cartoIcon.ttf b/src/fonts/cartoIcon.ttf index 4caa8b4d390117aeed4eb1655de4da216edbf5a4..b2a25acc7f4c42df0161ecb44568a43fcf8fdc90 100644 GIT binary patch delta 47 wcmew}k@3$&#tDwht95ovbeSscX>vcF-{va=H{&k`Ah>j|^f`>)_=Up*0Ld^D6951J delta 47 wcmew}k@3$&#tDwh3w}Kyc}1ObCqL_=Up*0L?iP6aWAK diff --git a/src/fonts/cartoIcon.woff b/src/fonts/cartoIcon.woff index c80206041e67c10db007e2385d40ab6ab3b63509..7a1125b31a23762222c63368070fe9aec38e71e9 100644 GIT binary patch delta 67 zcmV-J0KEUaT)bS6a|ts5001`ot1P&&e6}Vj9un5^{5D@1xEX%|MHnvKD}4^5-<1FV Z&K1G<2gv1MU;>E(0EZ6`3bR`$;Re7v8}0xA delta 67 zcmV-J0KEUaT)bS6a|tp4001`op!t%qe6}VjF?H?n{5D@1xEX%|MHnvKj0u6!Z_59F Z=Zawb1LSfrFo8q?h|3Oc0JB>s;RgNL9k~Di diff --git a/src/scss/cdb-components/typography.scss b/src/scss/cdb-components/typography.scss index 67b7f34..10ee568 100644 --- a/src/scss/cdb-components/typography.scss +++ b/src/scss/cdb-components/typography.scss @@ -10,7 +10,9 @@

    Open Sans 16/22 Regular

    Open Sans 12/16 Semibold

    Open Sans 12/16 Semibold Uppercase

    -

    Open Sans 12/16 Regular

    +

    Open Sans 12/16 Regular

    +

    Open Sans 12/16 Regular

    +

    Open Sans 12/16 Regular

    Open Sans 10/14 Semibold

    Open Sans 10/14 Regular

    ``` diff --git a/src/scss/cdb-utilities/defaults.css.scss b/src/scss/cdb-utilities/defaults.css.scss index c7998f1..6996513 100644 --- a/src/scss/cdb-utilities/defaults.css.scss +++ b/src/scss/cdb-utilities/defaults.css.scss @@ -3,6 +3,10 @@ @import '../cdb-variables/colors'; +body { + color: $cTypoMain; +} + a { color: $cBlue; text-decoration: none; diff --git a/src/scss/cdb-utilities/helpers.scss b/src/scss/cdb-utilities/helpers.scss index 1cb8a7b..01b7a79 100644 --- a/src/scss/cdb-utilities/helpers.scss +++ b/src/scss/cdb-utilities/helpers.scss @@ -2,6 +2,7 @@ // ---------------------------------------------- @import './mixins'; +@import '../cdb-variables/colors'; .u-tSpace { margin-top: 4px; @@ -36,6 +37,17 @@ .u-bSpace--m { margin-bottom: 8px; } +.u-textSecondary { + color: $cTypo2; +} +.u-textSubtitle { + color: $cTypo3; +} +.u-textDisabled { + color: $cTypo4; +} + + .u-iBlock { @include inline-block(); diff --git a/src/scss/cdb-variables/_colors.scss b/src/scss/cdb-variables/_colors.scss index fc0bc81..bd1a9e4 100644 --- a/src/scss/cdb-variables/_colors.scss +++ b/src/scss/cdb-variables/_colors.scss @@ -18,6 +18,7 @@ $cMainLine: #DDD; $cSecondaryLine: #EEE; //Typography +$cTypoMain: #2E3C43; $cTypo2: #636D72; $cTypo3: #979EA1; $cTypo4: #CBCED0; From f38377fa9eb98802cca82226daf5147fe4835885 Mon Sep 17 00:00:00 2001 From: piensaenpixel Date: Mon, 8 Feb 2016 17:48:03 +0100 Subject: [PATCH 23/42] use helpers --- src/scss/cdb-components/avatars.scss | 3 +-- src/scss/cdb-components/headers.scss | 8 ++------ src/scss/cdb-components/menu.scss | 5 ++--- 3 files changed, 5 insertions(+), 11 deletions(-) diff --git a/src/scss/cdb-components/avatars.scss b/src/scss/cdb-components/avatars.scss index 62a6fe4..c78be1f 100644 --- a/src/scss/cdb-components/avatars.scss +++ b/src/scss/cdb-components/avatars.scss @@ -16,7 +16,7 @@ User Name
  • - +
    • ``` @@ -44,7 +44,6 @@ border-left: 2px solid $cWhite; border-radius: 50px; background: $cSecondaryLine; - color: $cTypo2; } .CDB-AvatarList-itemMedia { diff --git a/src/scss/cdb-components/headers.scss b/src/scss/cdb-components/headers.scss index 02ca1b2..17980ac 100644 --- a/src/scss/cdb-components/headers.scss +++ b/src/scss/cdb-components/headers.scss @@ -43,7 +43,7 @@
  • -

    Published 8 days ago

    +

    Published 8 days ago

    • @@ -108,7 +108,7 @@
    -

    Positron by CartoDB

    +

    Positron by CartoDB


    @@ -159,10 +159,6 @@ } } -.CDB-HeaderInfo-Text { - color: $cTypo3; -} - .CDB-HeaderInfo-Inner { @include flex(1); } diff --git a/src/scss/cdb-components/menu.scss b/src/scss/cdb-components/menu.scss index bcf7e13..3880e39 100644 --- a/src/scss/cdb-components/menu.scss +++ b/src/scss/cdb-components/menu.scss @@ -18,10 +18,10 @@ POP-UP @@ -125,7 +125,6 @@ .CDB-NavSubmenu-Status { margin-left: 2px; - color: $cTypo4; } .CDB-Navmenu.is-dark { 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 24/42] 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

    From 961dc2ef1bcc92f1924fb1fb88c74ad473fb4621 Mon Sep 17 00:00:00 2001 From: piensaenpixel Date: Tue, 9 Feb 2016 14:47:28 +0100 Subject: [PATCH 25/42] add new threePoints --- 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/shapes/add.scss | 4 ++ .../cdb-components/shapes/threePoints.scss | 57 +++++++++++++++++- 5 files changed, 58 insertions(+), 3 deletions(-) diff --git a/src/fonts/cartoIcon.eot b/src/fonts/cartoIcon.eot index 0b83194ca36ab0569001ad8dc7307df38619af0b..28a728f668b7bb6868a5eb55ed54f0c854830ce5 100644 GIT binary patch delta 55 zcmZ26nQ_Hr#tAme(>q-z+OK0?+Y~eL!&GUP>>|HeVUI8GkVV!KM2PcEae*3m7>( E0BOM$ssI20 delta 55 zcmZ26nQ_Hr#tAme+OuOP+OK0?@N?3{4^yRMXKTmv+k9o( E0AHpQY5)KL diff --git a/src/fonts/cartoIcon.ttf b/src/fonts/cartoIcon.ttf index 4caa8b4d390117aeed4eb1655de4da216edbf5a4..cc04eb4e989a4c83cfa7d2cd11882b7f015d57ca 100644 GIT binary patch delta 47 wcmew}k@3$&#tDwhYnx&wx=fXJ>6{+VZ}XLboADO|5L~*yU?+^;_=Up*0Lo(%6951J delta 47 wcmew}k@3$&#tDwh3w}Kyc}1ObCqL_=Up*0L?iP6aWAK diff --git a/src/fonts/cartoIcon.woff b/src/fonts/cartoIcon.woff index c80206041e67c10db007e2385d40ab6ab3b63509..8d1d6c8d8df5c64c4795d13aa825252ca29ed532 100644 GIT binary patch delta 67 zcmV-J0KEUaT)bS6a|ts5001`ot%6*!e6}Vj&N-js`E9;3a5Me_iZEQdzhEbfepCMc ZJ68nbA0U^5fe9oE0JDS;4YOM(;RfrE97+HH delta 67 zcmV-J0KEUaT)bS6a|tp4001`op!t%qe6}VjF?H?n{5D@1xEX%|MHnvKj0u6!Z_59F Z=Zawb1LSfrFo8q?h|3Oc0JB>s;RgNL9k~Di diff --git a/src/scss/cdb-components/shapes/add.scss b/src/scss/cdb-components/shapes/add.scss index 570d5b4..54f4c84 100644 --- a/src/scss/cdb-components/shapes/add.scss +++ b/src/scss/cdb-components/shapes/add.scss @@ -49,6 +49,10 @@ Description width: 16px; height: 16px; text-align: center; + &.is-medium { + width: 24px; + height: 24px; + } &:hover { cursor: pointer; } diff --git a/src/scss/cdb-components/shapes/threePoints.scss b/src/scss/cdb-components/shapes/threePoints.scss index 48038e3..5bb29af 100644 --- a/src/scss/cdb-components/shapes/threePoints.scss +++ b/src/scss/cdb-components/shapes/threePoints.scss @@ -4,6 +4,41 @@ Description ``` +

    24px

    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    +
    +

    16px

    -

    Positron by CartoDB

    +

    Positron by CartoDB

    @@ -155,8 +155,8 @@ -

    Histogram

    -

    Distribution of a numeric variable in a range

    +

    Histogram

    +

    Distribution of a numeric variable in a range

    diff --git a/src/scss/cdb-components/menu.scss b/src/scss/cdb-components/menu.scss index 3880e39..c0c8a04 100644 --- a/src/scss/cdb-components/menu.scss +++ b/src/scss/cdb-components/menu.scss @@ -18,10 +18,10 @@ POP-UP diff --git a/src/scss/cdb-components/typography.scss b/src/scss/cdb-components/typography.scss index 291c0b0..b0ff817 100644 --- a/src/scss/cdb-components/typography.scss +++ b/src/scss/cdb-components/typography.scss @@ -11,8 +11,8 @@

    Open Sans 12/16 Semibold

    Open Sans 12/16 Semibold Uppercase

    Open Sans 12/16 Regular

    -

    Open Sans 12/16 Regular

    -

    Open Sans 12/16 Regular

    +

    Open Sans 12/16 Regular

    +

    Open Sans 12/16 Regular

    Open Sans 10/14 Semibold

    Open Sans 10/14 Regular

    ``` diff --git a/src/scss/cdb-utilities/helpers.scss b/src/scss/cdb-utilities/helpers.scss index 01b7a79..aa9c3ec 100644 --- a/src/scss/cdb-utilities/helpers.scss +++ b/src/scss/cdb-utilities/helpers.scss @@ -37,13 +37,21 @@ .u-bSpace--m { margin-bottom: 8px; } + +// Colors +// Main Text Color is default color +// ---------------------------------------------- + +.u-mainTextColor { + color: $cMainDark; +} .u-textSecondary { color: $cTypo2; } -.u-textSubtitle { +.u-aux1TextColor { color: $cTypo3; } -.u-textDisabled { +.u-aux2TextColor { color: $cTypo4; } From cf97094b8c224e6266bfa193652e7afe8e1f5e8a Mon Sep 17 00:00:00 2001 From: piensaenpixel Date: Tue, 9 Feb 2016 16:54:05 +0100 Subject: [PATCH 27/42] fix pr --- 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/headers.scss | 8 ++++---- src/scss/cdb-components/menu.scss | 4 ++-- src/scss/cdb-components/typography.scss | 4 ++-- src/scss/cdb-utilities/helpers.scss | 4 ++-- 7 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/fonts/cartoIcon.eot b/src/fonts/cartoIcon.eot index 3049b66ca2785f0a99ae49c4cd0f0af8a2b7b327..dcdd55ab0be4f13acd70d48c51d384ce9888cfe3 100644 GIT binary patch delta 54 zcmZ26nQ_Hr#tAme;_sX%+OKE2AT#m9RB7jT;_>`8Um3U=e=z{TrTfQc!syKl7&$xu DL^KrP delta 54 zcmZ26nQ_Hr#tAme%bi>%+OKC?dS&8=snRY^%j5ZNzA|t#{$c=vOZPXG!syKl7&$xu DOXC#A diff --git a/src/fonts/cartoIcon.ttf b/src/fonts/cartoIcon.ttf index 91b115ff9ccf30adb68b3e51f647bbd8446bae74..3fed9de7d31b9b03ed5b3736774c00e57e43f6cc 100644 GIT binary patch delta 46 vcmew}k@3$&#tBYL7i1>7OqF(iCmzpl^Ob>{@fQOST)KaJCXC+rg~I~?tqu}q delta 46 vcmew}k@3$&#tBYLORr3HnJVq#v^<{Q<|_j?<1YpvxO9J0DU9Cug~I~?xY814 diff --git a/src/fonts/cartoIcon.woff b/src/fonts/cartoIcon.woff index d2ad4809e2e495f620c097547fa3305fa8ea897f..bc80aec19be85f7911df131db1f873631099c4de 100644 GIT binary patch delta 60 zcmV-C0K@;hT)bS6dIHcKv3#~BDNYxQ! delta 60 zcmV-C0K@;hT)bS6dIF`?v3#~BDb8xl@%%Pl8MqmL0Yw-t-QQFSqu-SO|IQV`_y@@4 SU|<4?0swYY4s)|xC*cN{@*I@_ diff --git a/src/scss/cdb-components/headers.scss b/src/scss/cdb-components/headers.scss index a449eb5..8c046da 100644 --- a/src/scss/cdb-components/headers.scss +++ b/src/scss/cdb-components/headers.scss @@ -43,7 +43,7 @@
  • -

    Published 8 days ago

    +

    Published 8 days ago

    • @@ -111,7 +111,7 @@ -

    Positron by CartoDB

    +

    Positron by CartoDB

    @@ -155,8 +155,8 @@ -

    Histogram

    -

    Distribution of a numeric variable in a range

    +

    Histogram

    +

    Distribution of a numeric variable in a range

    diff --git a/src/scss/cdb-components/menu.scss b/src/scss/cdb-components/menu.scss index c0c8a04..c2bd83d 100644 --- a/src/scss/cdb-components/menu.scss +++ b/src/scss/cdb-components/menu.scss @@ -18,10 +18,10 @@ POP-UP diff --git a/src/scss/cdb-components/typography.scss b/src/scss/cdb-components/typography.scss index b0ff817..810cf0c 100644 --- a/src/scss/cdb-components/typography.scss +++ b/src/scss/cdb-components/typography.scss @@ -11,8 +11,8 @@

    Open Sans 12/16 Semibold

    Open Sans 12/16 Semibold Uppercase

    Open Sans 12/16 Regular

    -

    Open Sans 12/16 Regular

    -

    Open Sans 12/16 Regular

    +

    Open Sans 12/16 Regular

    +

    Open Sans 12/16 Regular

    Open Sans 10/14 Semibold

    Open Sans 10/14 Regular

    ``` diff --git a/src/scss/cdb-utilities/helpers.scss b/src/scss/cdb-utilities/helpers.scss index aa9c3ec..9a201d8 100644 --- a/src/scss/cdb-utilities/helpers.scss +++ b/src/scss/cdb-utilities/helpers.scss @@ -48,10 +48,10 @@ .u-textSecondary { color: $cTypo2; } -.u-aux1TextColor { +.u-altTextColor { color: $cTypo3; } -.u-aux2TextColor { +.u-hintTextColor { color: $cTypo4; } From f2652106b3bd27185a85bec44d07fff9498890af Mon Sep 17 00:00:00 2001 From: Maria Checa Date: Tue, 9 Feb 2016 16:55:40 +0100 Subject: [PATCH 28/42] 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 45c90f9cd9ef799744ce2c3b3186bc83ff18263e Mon Sep 17 00:00:00 2001 From: piensaenpixel Date: Tue, 9 Feb 2016 17:17:14 +0100 Subject: [PATCH 29/42] change vars --- src/scss/cdb-components/avatars.scss | 2 +- src/scss/cdb-components/colors.scss | 6 +++--- src/scss/cdb-components/forms/toggle.scss | 2 +- src/scss/cdb-components/loader.scss | 4 ++-- src/scss/cdb-components/menu.scss | 6 +++--- src/scss/cdb-components/shapes/add.scss | 8 ++++---- src/scss/cdb-components/shapes/arrow.scss | 6 +++--- src/scss/cdb-components/shapes/check-circle.scss | 6 +++--- src/scss/cdb-components/shapes/close.scss | 4 ++-- src/scss/cdb-components/shapes/dash.scss | 2 +- src/scss/cdb-components/shapes/dataset.scss | 8 ++++---- src/scss/cdb-components/shapes/error-circle.scss | 2 +- src/scss/cdb-components/shapes/hamburguer.scss | 2 +- src/scss/cdb-components/shapes/magnify.scss | 4 ++-- src/scss/cdb-components/shapes/move.scss | 4 ++-- src/scss/cdb-components/shapes/threePoints.scss | 2 +- src/scss/cdb-components/shapes/toogle-arrow.scss | 4 ++-- src/scss/cdb-components/typography.scss | 2 +- src/scss/cdb-utilities/helpers.scss | 4 ++-- src/scss/cdb-variables/_colors.scss | 10 +++++----- 20 files changed, 44 insertions(+), 44 deletions(-) diff --git a/src/scss/cdb-components/avatars.scss b/src/scss/cdb-components/avatars.scss index c78be1f..772a210 100644 --- a/src/scss/cdb-components/avatars.scss +++ b/src/scss/cdb-components/avatars.scss @@ -16,7 +16,7 @@ User Name
  • - +
    • ``` diff --git a/src/scss/cdb-components/colors.scss b/src/scss/cdb-components/colors.scss index 1fac96d..f5d73d4 100644 --- a/src/scss/cdb-components/colors.scss +++ b/src/scss/cdb-components/colors.scss @@ -18,9 +18,9 @@ @import '../cdb-variables/colors'; .box { + display: inline-block; width: 120px; height: 64px; - display: inline-block; margin: 0 24px 24px 0; } @@ -28,15 +28,15 @@ background: $cBlue; } .Color-White { + border: 1px solid #E5E5E5; background: $cWhite; - border: 1px solid #e5e5e5; } .Color-Dark { background: $cBlack; } .Color-MainDark { - background: $cMainDark; + background: $cMainBgColor; } .Color-SecondaryDark { background: $cSecondaryDark; diff --git a/src/scss/cdb-components/forms/toggle.scss b/src/scss/cdb-components/forms/toggle.scss index e6dd65b..81c3670 100644 --- a/src/scss/cdb-components/forms/toggle.scss +++ b/src/scss/cdb-components/forms/toggle.scss @@ -49,7 +49,7 @@ } &:checked + .CDB-ToggleFace { - background: $cMainDark; + background: $cMainBgColor; &::before { right: 2px; diff --git a/src/scss/cdb-components/loader.scss b/src/scss/cdb-components/loader.scss index 07e066b..ae9d543 100644 --- a/src/scss/cdb-components/loader.scss +++ b/src/scss/cdb-components/loader.scss @@ -105,12 +105,12 @@ This is the generic loader for widgets, maps, components, ... background: $cWhite; } &.is-grey { - background: linear-gradient(to right, $cMainDark 10%, rgba($cWhite, 0) 42%); + background: linear-gradient(to right, $cMainBgColor 10%, rgba($cWhite, 0) 42%); &::before { background: $cTypo2; } &::after { - background: $cMainDark; + background: $cMainBgColor; } } } diff --git a/src/scss/cdb-components/menu.scss b/src/scss/cdb-components/menu.scss index c2bd83d..7327574 100644 --- a/src/scss/cdb-components/menu.scss +++ b/src/scss/cdb-components/menu.scss @@ -97,8 +97,8 @@ } .CDB-NavMenu-Item.is-active .CDB-NavMenu-Link { - border-bottom: 1px solid $cMainDark; - color: $cMainDark; + border-bottom: 1px solid $cMainBgColor; + color: $cMainBgColor; } .CDB-NavSubmenu { @@ -119,7 +119,7 @@ .CDB-NavSubmenu-item.is-active { .CDB-NavSubmenu-Link { border-bottom: 1px solid $cTypo3; - color: $cMainDark; + color: $cMainBgColor; } } diff --git a/src/scss/cdb-components/shapes/add.scss b/src/scss/cdb-components/shapes/add.scss index 570d5b4..a172077 100644 --- a/src/scss/cdb-components/shapes/add.scss +++ b/src/scss/cdb-components/shapes/add.scss @@ -65,7 +65,7 @@ Description bottom: 7px; left: 0; height: 1px; - background: $cMainDark; + background: $cMainBgColor; content: ''; } @@ -76,7 +76,7 @@ Description bottom: 0; left: 7px; width: 1px; - background: $cMainDark; + background: $cMainBgColor; content: ''; } } @@ -90,7 +90,7 @@ Description bottom: 7px; left: 4px; height: 1px; - background: $cMainDark; + background: $cMainBgColor; content: ''; } @@ -101,7 +101,7 @@ Description bottom: 3px; left: 8px; width: 1px; - background: $cMainDark; + background: $cMainBgColor; content: ''; } } diff --git a/src/scss/cdb-components/shapes/arrow.scss b/src/scss/cdb-components/shapes/arrow.scss index cb596d0..172fcda 100644 --- a/src/scss/cdb-components/shapes/arrow.scss +++ b/src/scss/cdb-components/shapes/arrow.scss @@ -22,7 +22,7 @@ Description position: relative; width: 1px; height: 8px; - background: $cMainDark; + background: $cMainBgColor; &::before { display: block; @@ -32,7 +32,7 @@ Description width: 5px; height: 1px; transform: rotate(45deg); - background: $cMainDark; + background: $cMainBgColor; content: ''; } @@ -44,7 +44,7 @@ Description width: 5px; height: 1px; transform: rotate(-45deg); - background: $cMainDark; + background: $cMainBgColor; content: ''; } &.is-up { diff --git a/src/scss/cdb-components/shapes/check-circle.scss b/src/scss/cdb-components/shapes/check-circle.scss index f63cb76..4d1ac0c 100644 --- a/src/scss/cdb-components/shapes/check-circle.scss +++ b/src/scss/cdb-components/shapes/check-circle.scss @@ -60,7 +60,7 @@ Description .CDB-Shape-CircleItem { width: 14px; height: 14px; - border: 1px solid $cMainDark; + border: 1px solid $cMainBgColor; border-radius: 50%; &.is-small { @@ -86,7 +86,7 @@ Description position: absolute; width: 1px; transform: rotate(-45deg); - background: $cMainDark; + background: $cMainBgColor; content: ''; } &::after { @@ -94,7 +94,7 @@ Description position: absolute; width: 1px; transform: rotate(45deg); - background: $cMainDark; + background: $cMainBgColor; content: ''; } diff --git a/src/scss/cdb-components/shapes/close.scss b/src/scss/cdb-components/shapes/close.scss index 40b26f6..f25e7bf 100644 --- a/src/scss/cdb-components/shapes/close.scss +++ b/src/scss/cdb-components/shapes/close.scss @@ -55,7 +55,7 @@ Description position: absolute; width: 1px; transform: rotate(-45deg); - background: $cMainDark; + background: $cMainBgColor; content: ''; } &::after { @@ -63,7 +63,7 @@ Description position: absolute; width: 1px; transform: rotate(45deg); - background: $cMainDark; + background: $cMainBgColor; content: ''; } diff --git a/src/scss/cdb-components/shapes/dash.scss b/src/scss/cdb-components/shapes/dash.scss index 409bd20..361a6b8 100644 --- a/src/scss/cdb-components/shapes/dash.scss +++ b/src/scss/cdb-components/shapes/dash.scss @@ -56,7 +56,7 @@ Description bottom: 7px; left: 2px; height: 1px; - background: $cMainDark; + background: $cMainBgColor; content: ''; } } diff --git a/src/scss/cdb-components/shapes/dataset.scss b/src/scss/cdb-components/shapes/dataset.scss index 494918d..8612383 100644 --- a/src/scss/cdb-components/shapes/dataset.scss +++ b/src/scss/cdb-components/shapes/dataset.scss @@ -95,7 +95,7 @@ Description width: 9px; height: 9px; margin-left: -10px; - border: 1px solid $cMainDark; + border: 1px solid $cMainBgColor; border-radius: 50%; background: $cWhite; @@ -132,15 +132,15 @@ Description .CDB-Shape-Dataset.is-white { .CDB-Shape-DatasetItem { border: 1px solid $cHoverLine; - background: $cMainDark; + background: $cMainBgColor; &:first-child { - box-shadow: 3px 0 $cMainDark; + box-shadow: 3px 0 $cMainBgColor; } } } .CDB-Shape-Dataset.is-white.is-small { .CDB-Shape-DatasetItem:first-child { - box-shadow: 2px 0 $cMainDark; + box-shadow: 2px 0 $cMainBgColor; } } diff --git a/src/scss/cdb-components/shapes/error-circle.scss b/src/scss/cdb-components/shapes/error-circle.scss index eebeb92..ee1a4bb 100644 --- a/src/scss/cdb-components/shapes/error-circle.scss +++ b/src/scss/cdb-components/shapes/error-circle.scss @@ -60,7 +60,7 @@ Description .CDB-Shape-CircleItem { width: 13px; height: 13px; - border: 1px solid $cMainDark; + border: 1px solid $cMainBgColor; border-radius: 50%; &.is-small { diff --git a/src/scss/cdb-components/shapes/hamburguer.scss b/src/scss/cdb-components/shapes/hamburguer.scss index 7b8ceff..4bd02e8 100644 --- a/src/scss/cdb-components/shapes/hamburguer.scss +++ b/src/scss/cdb-components/shapes/hamburguer.scss @@ -43,7 +43,7 @@ Description .CDB-Shape-hamburguerItem { height: $baseSize / 4; margin-bottom: $baseSize / 4; - background: $cMainDark; + background: $cMainBgColor; &:last-child { margin-bottom: 0; diff --git a/src/scss/cdb-components/shapes/magnify.scss b/src/scss/cdb-components/shapes/magnify.scss index 7f4f2f0..9bb2128 100644 --- a/src/scss/cdb-components/shapes/magnify.scss +++ b/src/scss/cdb-components/shapes/magnify.scss @@ -58,7 +58,7 @@ Description left: 0; width: 11px; height: 11px; - border: 1px solid $cMainDark; + border: 1px solid $cMainBgColor; border-radius: 50%; content: ''; } @@ -71,7 +71,7 @@ Description width: 1px; height: 7px; transform: rotate(314deg); - background: $cMainDark; + background: $cMainBgColor; content: ''; } } diff --git a/src/scss/cdb-components/shapes/move.scss b/src/scss/cdb-components/shapes/move.scss index e1f423b..d5ea9e1 100644 --- a/src/scss/cdb-components/shapes/move.scss +++ b/src/scss/cdb-components/shapes/move.scss @@ -101,7 +101,7 @@ Description display: inline-block; width: 3px; height: 3px; - background: $cMainDark; + background: $cMainBgColor; content: ''; } @@ -110,7 +110,7 @@ Description width: 3px; height: 3px; margin-left: 2px; - background: $cMainDark; + background: $cMainBgColor; content: ''; } } diff --git a/src/scss/cdb-components/shapes/threePoints.scss b/src/scss/cdb-components/shapes/threePoints.scss index 48038e3..4757bb8 100644 --- a/src/scss/cdb-components/shapes/threePoints.scss +++ b/src/scss/cdb-components/shapes/threePoints.scss @@ -77,7 +77,7 @@ Description width: 2px; height: 2px; margin-bottom: 5px; - background: $cMainDark; + background: $cMainBgColor; &:last-child { margin-bottom: 0; } diff --git a/src/scss/cdb-components/shapes/toogle-arrow.scss b/src/scss/cdb-components/shapes/toogle-arrow.scss index 86f302a..d5b5fde 100644 --- a/src/scss/cdb-components/shapes/toogle-arrow.scss +++ b/src/scss/cdb-components/shapes/toogle-arrow.scss @@ -97,7 +97,7 @@ Description width: 10px; height: 1px; transform: rotate(-45deg); - background: $cMainDark; + background: $cMainBgColor; content: ''; } &::after { @@ -108,7 +108,7 @@ Description width: 10px; height: 1px; transform: rotate(45deg); - background: $cMainDark; + background: $cMainBgColor; content: ''; } } diff --git a/src/scss/cdb-components/typography.scss b/src/scss/cdb-components/typography.scss index 810cf0c..74c0127 100644 --- a/src/scss/cdb-components/typography.scss +++ b/src/scss/cdb-components/typography.scss @@ -10,7 +10,7 @@

    Open Sans 16/22 Regular

    Open Sans 12/16 Semibold

    Open Sans 12/16 Semibold Uppercase

    -

    Open Sans 12/16 Regular

    +

    Open Sans 12/16 Regular

    Open Sans 12/16 Regular

    Open Sans 12/16 Regular

    Open Sans 10/14 Semibold

    diff --git a/src/scss/cdb-utilities/helpers.scss b/src/scss/cdb-utilities/helpers.scss index 9a201d8..b21de94 100644 --- a/src/scss/cdb-utilities/helpers.scss +++ b/src/scss/cdb-utilities/helpers.scss @@ -43,9 +43,9 @@ // ---------------------------------------------- .u-mainTextColor { - color: $cMainDark; + color: $cMainTextColor; } -.u-textSecondary { +.u-secondaryTextColor { color: $cTypo2; } .u-altTextColor { diff --git a/src/scss/cdb-variables/_colors.scss b/src/scss/cdb-variables/_colors.scss index bd1a9e4..fb8f9ee 100644 --- a/src/scss/cdb-variables/_colors.scss +++ b/src/scss/cdb-variables/_colors.scss @@ -5,7 +5,7 @@ $cBlue: #3AA9E3; $cBlack: #000; $cWhite: #FFF; -$cMainDark: #2E3C43; +$cMainBgColor: #2E3C43; //Structure $cSecondaryDark: #282C2F; @@ -18,10 +18,10 @@ $cMainLine: #DDD; $cSecondaryLine: #EEE; //Typography -$cTypoMain: #2E3C43; -$cTypo2: #636D72; -$cTypo3: #979EA1; -$cTypo4: #CBCED0; +$cMainTextColor: #2E3C43; +$cSecondaryTextColor: #636D72; +$cAltTextColor: #979EA1; +$cHintTextColor: #CBCED0; //Others $cHighlight: #9DE0AD; From 1da800ecef7c8793f370ad58a5bf29a1b9d8209a Mon Sep 17 00:00:00 2001 From: piensaenpixel Date: Tue, 9 Feb 2016 17:25:28 +0100 Subject: [PATCH 30/42] fix vars --- src/scss/cdb-components/colors.scss | 2 +- src/scss/cdb-components/forms/toggle.scss | 2 +- src/scss/cdb-components/loader.scss | 4 ++-- src/scss/cdb-components/menu.scss | 6 +++--- src/scss/cdb-components/shapes/add.scss | 8 ++++---- src/scss/cdb-components/shapes/arrow.scss | 6 +++--- src/scss/cdb-components/shapes/check-circle.scss | 6 +++--- src/scss/cdb-components/shapes/close.scss | 4 ++-- src/scss/cdb-components/shapes/dash.scss | 2 +- src/scss/cdb-components/shapes/dataset.scss | 8 ++++---- src/scss/cdb-components/shapes/error-circle.scss | 2 +- src/scss/cdb-components/shapes/hamburguer.scss | 2 +- src/scss/cdb-components/shapes/magnify.scss | 4 ++-- src/scss/cdb-components/shapes/move.scss | 4 ++-- src/scss/cdb-components/shapes/threePoints.scss | 2 +- src/scss/cdb-components/shapes/toogle-arrow.scss | 4 ++-- src/scss/cdb-utilities/helpers.scss | 2 +- src/scss/cdb-variables/_colors.scss | 10 +++++----- 18 files changed, 39 insertions(+), 39 deletions(-) diff --git a/src/scss/cdb-components/colors.scss b/src/scss/cdb-components/colors.scss index f5d73d4..555cb3a 100644 --- a/src/scss/cdb-components/colors.scss +++ b/src/scss/cdb-components/colors.scss @@ -36,7 +36,7 @@ } .Color-MainDark { - background: $cMainBgColor; + background: $cMainBg; } .Color-SecondaryDark { background: $cSecondaryDark; diff --git a/src/scss/cdb-components/forms/toggle.scss b/src/scss/cdb-components/forms/toggle.scss index 81c3670..b37f458 100644 --- a/src/scss/cdb-components/forms/toggle.scss +++ b/src/scss/cdb-components/forms/toggle.scss @@ -49,7 +49,7 @@ } &:checked + .CDB-ToggleFace { - background: $cMainBgColor; + background: $cMainBg; &::before { right: 2px; diff --git a/src/scss/cdb-components/loader.scss b/src/scss/cdb-components/loader.scss index ae9d543..44403cc 100644 --- a/src/scss/cdb-components/loader.scss +++ b/src/scss/cdb-components/loader.scss @@ -105,12 +105,12 @@ This is the generic loader for widgets, maps, components, ... background: $cWhite; } &.is-grey { - background: linear-gradient(to right, $cMainBgColor 10%, rgba($cWhite, 0) 42%); + background: linear-gradient(to right, $cMainBg 10%, rgba($cWhite, 0) 42%); &::before { background: $cTypo2; } &::after { - background: $cMainBgColor; + background: $cMainBg; } } } diff --git a/src/scss/cdb-components/menu.scss b/src/scss/cdb-components/menu.scss index 7327574..0ab42f8 100644 --- a/src/scss/cdb-components/menu.scss +++ b/src/scss/cdb-components/menu.scss @@ -97,8 +97,8 @@ } .CDB-NavMenu-Item.is-active .CDB-NavMenu-Link { - border-bottom: 1px solid $cMainBgColor; - color: $cMainBgColor; + border-bottom: 1px solid $cMainBg; + color: $cMainBg; } .CDB-NavSubmenu { @@ -119,7 +119,7 @@ .CDB-NavSubmenu-item.is-active { .CDB-NavSubmenu-Link { border-bottom: 1px solid $cTypo3; - color: $cMainBgColor; + color: $cMainBg; } } diff --git a/src/scss/cdb-components/shapes/add.scss b/src/scss/cdb-components/shapes/add.scss index a172077..a6b78ec 100644 --- a/src/scss/cdb-components/shapes/add.scss +++ b/src/scss/cdb-components/shapes/add.scss @@ -65,7 +65,7 @@ Description bottom: 7px; left: 0; height: 1px; - background: $cMainBgColor; + background: $cMainBg; content: ''; } @@ -76,7 +76,7 @@ Description bottom: 0; left: 7px; width: 1px; - background: $cMainBgColor; + background: $cMainBg; content: ''; } } @@ -90,7 +90,7 @@ Description bottom: 7px; left: 4px; height: 1px; - background: $cMainBgColor; + background: $cMainBg; content: ''; } @@ -101,7 +101,7 @@ Description bottom: 3px; left: 8px; width: 1px; - background: $cMainBgColor; + background: $cMainBg; content: ''; } } diff --git a/src/scss/cdb-components/shapes/arrow.scss b/src/scss/cdb-components/shapes/arrow.scss index 172fcda..295cd40 100644 --- a/src/scss/cdb-components/shapes/arrow.scss +++ b/src/scss/cdb-components/shapes/arrow.scss @@ -22,7 +22,7 @@ Description position: relative; width: 1px; height: 8px; - background: $cMainBgColor; + background: $cMainBg; &::before { display: block; @@ -32,7 +32,7 @@ Description width: 5px; height: 1px; transform: rotate(45deg); - background: $cMainBgColor; + background: $cMainBg; content: ''; } @@ -44,7 +44,7 @@ Description width: 5px; height: 1px; transform: rotate(-45deg); - background: $cMainBgColor; + background: $cMainBg; content: ''; } &.is-up { diff --git a/src/scss/cdb-components/shapes/check-circle.scss b/src/scss/cdb-components/shapes/check-circle.scss index 4d1ac0c..cf2b1f1 100644 --- a/src/scss/cdb-components/shapes/check-circle.scss +++ b/src/scss/cdb-components/shapes/check-circle.scss @@ -60,7 +60,7 @@ Description .CDB-Shape-CircleItem { width: 14px; height: 14px; - border: 1px solid $cMainBgColor; + border: 1px solid $cMainBg; border-radius: 50%; &.is-small { @@ -86,7 +86,7 @@ Description position: absolute; width: 1px; transform: rotate(-45deg); - background: $cMainBgColor; + background: $cMainBg; content: ''; } &::after { @@ -94,7 +94,7 @@ Description position: absolute; width: 1px; transform: rotate(45deg); - background: $cMainBgColor; + background: $cMainBg; content: ''; } diff --git a/src/scss/cdb-components/shapes/close.scss b/src/scss/cdb-components/shapes/close.scss index f25e7bf..473f7dc 100644 --- a/src/scss/cdb-components/shapes/close.scss +++ b/src/scss/cdb-components/shapes/close.scss @@ -55,7 +55,7 @@ Description position: absolute; width: 1px; transform: rotate(-45deg); - background: $cMainBgColor; + background: $cMainBg; content: ''; } &::after { @@ -63,7 +63,7 @@ Description position: absolute; width: 1px; transform: rotate(45deg); - background: $cMainBgColor; + background: $cMainBg; content: ''; } diff --git a/src/scss/cdb-components/shapes/dash.scss b/src/scss/cdb-components/shapes/dash.scss index 361a6b8..8c3bdeb 100644 --- a/src/scss/cdb-components/shapes/dash.scss +++ b/src/scss/cdb-components/shapes/dash.scss @@ -56,7 +56,7 @@ Description bottom: 7px; left: 2px; height: 1px; - background: $cMainBgColor; + background: $cMainBg; content: ''; } } diff --git a/src/scss/cdb-components/shapes/dataset.scss b/src/scss/cdb-components/shapes/dataset.scss index 8612383..0639597 100644 --- a/src/scss/cdb-components/shapes/dataset.scss +++ b/src/scss/cdb-components/shapes/dataset.scss @@ -95,7 +95,7 @@ Description width: 9px; height: 9px; margin-left: -10px; - border: 1px solid $cMainBgColor; + border: 1px solid $cMainBg; border-radius: 50%; background: $cWhite; @@ -132,15 +132,15 @@ Description .CDB-Shape-Dataset.is-white { .CDB-Shape-DatasetItem { border: 1px solid $cHoverLine; - background: $cMainBgColor; + background: $cMainBg; &:first-child { - box-shadow: 3px 0 $cMainBgColor; + box-shadow: 3px 0 $cMainBg; } } } .CDB-Shape-Dataset.is-white.is-small { .CDB-Shape-DatasetItem:first-child { - box-shadow: 2px 0 $cMainBgColor; + box-shadow: 2px 0 $cMainBg; } } diff --git a/src/scss/cdb-components/shapes/error-circle.scss b/src/scss/cdb-components/shapes/error-circle.scss index ee1a4bb..5ed5ffc 100644 --- a/src/scss/cdb-components/shapes/error-circle.scss +++ b/src/scss/cdb-components/shapes/error-circle.scss @@ -60,7 +60,7 @@ Description .CDB-Shape-CircleItem { width: 13px; height: 13px; - border: 1px solid $cMainBgColor; + border: 1px solid $cMainBg; border-radius: 50%; &.is-small { diff --git a/src/scss/cdb-components/shapes/hamburguer.scss b/src/scss/cdb-components/shapes/hamburguer.scss index 4bd02e8..d5d2bc4 100644 --- a/src/scss/cdb-components/shapes/hamburguer.scss +++ b/src/scss/cdb-components/shapes/hamburguer.scss @@ -43,7 +43,7 @@ Description .CDB-Shape-hamburguerItem { height: $baseSize / 4; margin-bottom: $baseSize / 4; - background: $cMainBgColor; + background: $cMainBg; &:last-child { margin-bottom: 0; diff --git a/src/scss/cdb-components/shapes/magnify.scss b/src/scss/cdb-components/shapes/magnify.scss index 9bb2128..bec21d4 100644 --- a/src/scss/cdb-components/shapes/magnify.scss +++ b/src/scss/cdb-components/shapes/magnify.scss @@ -58,7 +58,7 @@ Description left: 0; width: 11px; height: 11px; - border: 1px solid $cMainBgColor; + border: 1px solid $cMainBg; border-radius: 50%; content: ''; } @@ -71,7 +71,7 @@ Description width: 1px; height: 7px; transform: rotate(314deg); - background: $cMainBgColor; + background: $cMainBg; content: ''; } } diff --git a/src/scss/cdb-components/shapes/move.scss b/src/scss/cdb-components/shapes/move.scss index d5ea9e1..db5a45f 100644 --- a/src/scss/cdb-components/shapes/move.scss +++ b/src/scss/cdb-components/shapes/move.scss @@ -101,7 +101,7 @@ Description display: inline-block; width: 3px; height: 3px; - background: $cMainBgColor; + background: $cMainBg; content: ''; } @@ -110,7 +110,7 @@ Description width: 3px; height: 3px; margin-left: 2px; - background: $cMainBgColor; + background: $cMainBg; content: ''; } } diff --git a/src/scss/cdb-components/shapes/threePoints.scss b/src/scss/cdb-components/shapes/threePoints.scss index 4757bb8..a184921 100644 --- a/src/scss/cdb-components/shapes/threePoints.scss +++ b/src/scss/cdb-components/shapes/threePoints.scss @@ -77,7 +77,7 @@ Description width: 2px; height: 2px; margin-bottom: 5px; - background: $cMainBgColor; + background: $cMainBg; &:last-child { margin-bottom: 0; } diff --git a/src/scss/cdb-components/shapes/toogle-arrow.scss b/src/scss/cdb-components/shapes/toogle-arrow.scss index d5b5fde..90381da 100644 --- a/src/scss/cdb-components/shapes/toogle-arrow.scss +++ b/src/scss/cdb-components/shapes/toogle-arrow.scss @@ -97,7 +97,7 @@ Description width: 10px; height: 1px; transform: rotate(-45deg); - background: $cMainBgColor; + background: $cMainBg; content: ''; } &::after { @@ -108,7 +108,7 @@ Description width: 10px; height: 1px; transform: rotate(45deg); - background: $cMainBgColor; + background: $cMainBg; content: ''; } } diff --git a/src/scss/cdb-utilities/helpers.scss b/src/scss/cdb-utilities/helpers.scss index b21de94..4a0d90c 100644 --- a/src/scss/cdb-utilities/helpers.scss +++ b/src/scss/cdb-utilities/helpers.scss @@ -43,7 +43,7 @@ // ---------------------------------------------- .u-mainTextColor { - color: $cMainTextColor; + color: $cMainText; } .u-secondaryTextColor { color: $cTypo2; diff --git a/src/scss/cdb-variables/_colors.scss b/src/scss/cdb-variables/_colors.scss index fb8f9ee..bc31a89 100644 --- a/src/scss/cdb-variables/_colors.scss +++ b/src/scss/cdb-variables/_colors.scss @@ -5,7 +5,7 @@ $cBlue: #3AA9E3; $cBlack: #000; $cWhite: #FFF; -$cMainBgColor: #2E3C43; +$cMainBg: #2E3C43; //Structure $cSecondaryDark: #282C2F; @@ -18,10 +18,10 @@ $cMainLine: #DDD; $cSecondaryLine: #EEE; //Typography -$cMainTextColor: #2E3C43; -$cSecondaryTextColor: #636D72; -$cAltTextColor: #979EA1; -$cHintTextColor: #CBCED0; +$cMainText: #2E3C43; +$cSecondaryText: #636D72; +$cAltText: #979EA1; +$cHintText: #CBCED0; //Others $cHighlight: #9DE0AD; From 7eec29696335caa943cb6ded7307c1f22309dc97 Mon Sep 17 00:00:00 2001 From: piensaenpixel Date: Tue, 9 Feb 2016 17:48:57 +0100 Subject: [PATCH 31/42] fix cr --- 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/boxes.scss | 4 ++-- src/scss/cdb-components/colors.scss | 6 +++--- src/scss/cdb-components/forms/toggle.scss | 2 +- src/scss/cdb-components/headers.scss | 2 +- src/scss/cdb-components/loader.scss | 4 ++-- src/scss/cdb-components/menu.scss | 14 +++++++------- src/scss/cdb-components/shapes/dots.scss | 2 +- src/scss/cdb-utilities/defaults.css.scss | 2 +- src/scss/cdb-utilities/helpers.scss | 6 +++--- 12 files changed, 21 insertions(+), 21 deletions(-) diff --git a/src/fonts/cartoIcon.eot b/src/fonts/cartoIcon.eot index dcdd55ab0be4f13acd70d48c51d384ce9888cfe3..60e5afa7dded206dbc68f2408afb3f6430b80a3d 100644 GIT binary patch delta 52 zcmZ26nQ_Hr#tAk|)f*?;ZD4wrHSxnVsg2d~{5D@1xEX&j0KujE*ABqw%?lVgJODxR B6@UN$ delta 52 zcmZ26nQ_Hr#tAk|;_oKfZD6_}Gx5VTsdwV>{5D@1xEX&j0KujE$7jOm%?lVgJOCpv B6j}fP diff --git a/src/fonts/cartoIcon.ttf b/src/fonts/cartoIcon.ttf index 3fed9de7d31b9b03ed5b3736774c00e57e43f6cc..4279ce37fc62f7e17efb41b68afa49da758612b6 100644 GIT binary patch delta 45 ucmew}k@3$&#tBYL@3JPkOq1GJ9nWv`m4Tb_7XuJnx_|8ejNbT#!vg@diW4FL delta 45 ucmew}k@3$&#tBYL7i1>7Op|&i9?x&{m4Tb_7XuJnx_^8ojNbT#!vg@GkP;&R diff --git a/src/fonts/cartoIcon.woff b/src/fonts/cartoIcon.woff index bc80aec19be85f7911df131db1f873631099c4de..cf2d67c9cbbd752b885ef2e20854f151ab639848 100644 GIT binary patch delta 59 zcmV-B0L1^iT)bS6dIIihv3$2CC{wP-^V@u7;AZ><6k)h@|Jnf<{igi?cdiJ=KR_-A R0~1IT0KnxClCxVU;RcV995Mg^ delta 59 zcmV-B0L1^iT)bS6dIHcKv3$2CC>M+4`E9;3a5Me_iZEQde|#p4epCMcJ68nbA0U^5 Rfe9oE0I Date: Tue, 9 Feb 2016 18:01:02 +0100 Subject: [PATCH 32/42] 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(); From 3c96d80ae6cf84779fde555de049634c8b56dc00 Mon Sep 17 00:00:00 2001 From: piensaenpixel Date: Tue, 9 Feb 2016 18:04:21 +0100 Subject: [PATCH 33/42] fix cr --- src/fonts/cartoIcon.eot | Bin 18856 -> 18856 bytes src/fonts/cartoIcon.ttf | Bin 18684 -> 18684 bytes src/fonts/cartoIcon.woff | Bin 11836 -> 11836 bytes .../cdb-components/shapes/threePoints.scss | 52 ++++++++---------- 4 files changed, 23 insertions(+), 29 deletions(-) diff --git a/src/fonts/cartoIcon.eot b/src/fonts/cartoIcon.eot index 28a728f668b7bb6868a5eb55ed54f0c854830ce5..747a5fe1b302f08e75e3b48b167411c202181101 100644 GIT binary patch delta 54 zcmZ26nQ_Hr#tAmeo0mFIv|rEk#c$$=snX6%H^=kad}ZKf{KWtSm+s%(1fw@EVC3)s E0Bn~QGXMYp delta 54 zcmZ26nQ_Hr#tAme(>q-z+OKD7ikbLfsS DNjen$ diff --git a/src/fonts/cartoIcon.ttf b/src/fonts/cartoIcon.ttf index cc04eb4e989a4c83cfa7d2cd11882b7f015d57ca..0860a3508a4adce11074a3e92223e532f9f2b3c7 100644 GIT binary patch delta 46 vcmew}k@3$&#tBYLU;HMzOqF(Cx;dWT<|_j?<1YpvxOD&KCK$c(3x@{)#gY?c delta 46 vcmew}k@3$&#tBYLO)(Q)rb@eXPLJoe`O3h}_=^DuF5O?S6Gm_R!r=h`ti=*$ diff --git a/src/fonts/cartoIcon.woff b/src/fonts/cartoIcon.woff index 8d1d6c8d8df5c64c4795d13aa825252ca29ed532..fc3a8b4ee530a74a8bf7d7a52b8dbb02542c1ca8 100644 GIT binary patch delta 60 zcmV-C0K@;hT)bS6dII!Lv3#~BDNddI@%%Pl8MqmL0Yw-t-M_gBM!zZl|D7v>@eh#8 S!N3F(1pu3M52>?TC*cNj^c%ha delta 60 zcmV-C0K@;hT)bS6dIEx6v3#~BDb6{c Date: Tue, 9 Feb 2016 18:19:06 +0100 Subject: [PATCH 34/42] fix nesting --- 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/shapes/add.scss | 15 ++++++++------- 4 files changed, 8 insertions(+), 7 deletions(-) diff --git a/src/fonts/cartoIcon.eot b/src/fonts/cartoIcon.eot index 747a5fe1b302f08e75e3b48b167411c202181101..355a86bcd8465e0e4a7a36d670fd515b2103e0a8 100644 GIT binary patch delta 52 zcmZ26nQ_Hr#tAk|=ci1x+raeaz{C&Jq^6vY=ePOFz|HuJ0SGSLzxx_SZ(hL2;Q;_+ CwHCGj delta 52 zcmZ26nQ_Hr#tAk|o0m?s+rae2Z{mk(QcE|-^V@u7;AZ^A00fur-`oVFH!oo1@Bjcx CmKCf3 diff --git a/src/fonts/cartoIcon.ttf b/src/fonts/cartoIcon.ttf index 0860a3508a4adce11074a3e92223e532f9f2b3c7..53a07ce2e0fa51d8706ab74d951cc7344b00f9db 100644 GIT binary patch delta 45 ucmew}k@3$&#tBYLe-2D^nI<*md_2F+R|amzUkpHS>Hgi7fA{5D@1xEX%|MHnvKzxx_SzbXI!ohyRz50J~j RzyuNn0H`| Date: Tue, 9 Feb 2016 18:22:23 +0100 Subject: [PATCH 35/42] fix cr --- src/scss/cdb-components/shapes/add.scss | 2 +- src/scss/cdb-components/shapes/threePoints.scss | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/scss/cdb-components/shapes/add.scss b/src/scss/cdb-components/shapes/add.scss index a2e80b5..ac5616b 100644 --- a/src/scss/cdb-components/shapes/add.scss +++ b/src/scss/cdb-components/shapes/add.scss @@ -50,7 +50,7 @@ Description height: 16px; text-align: center; } -.CDB-Shape .is-medium { +.CDB-Shape--medium { width: 24px; height: 24px; } diff --git a/src/scss/cdb-components/shapes/threePoints.scss b/src/scss/cdb-components/shapes/threePoints.scss index fe268d6..2eecdf4 100644 --- a/src/scss/cdb-components/shapes/threePoints.scss +++ b/src/scss/cdb-components/shapes/threePoints.scss @@ -6,7 +6,7 @@ Description ```

    24px

    -
    -
    -
    -

    Histogram

    +

    Histogram

    Distribution of a numeric variable in a range

    diff --git a/src/scss/cdb-components/typography.scss b/src/scss/cdb-components/typography.scss index 74c0127..bff3796 100644 --- a/src/scss/cdb-components/typography.scss +++ b/src/scss/cdb-components/typography.scss @@ -9,7 +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 Semibold Uppercase

    Open Sans 12/16 Regular

    Open Sans 12/16 Regular

    Open Sans 12/16 Regular

    @@ -30,9 +30,6 @@ &.is-light { font-weight: $sFontWeight-lighter; } - &.is-upper { - text-transform: uppercase; - } } .CDB-Size-huge { diff --git a/src/scss/cdb-utilities/helpers.scss b/src/scss/cdb-utilities/helpers.scss index 95d2cb4..024830e 100644 --- a/src/scss/cdb-utilities/helpers.scss +++ b/src/scss/cdb-utilities/helpers.scss @@ -73,6 +73,11 @@ display: none !important; } +/* Decoration */ +.u-upperCase { + text-transform: uppercase; +} + /* Media queries*/ @include media-query-mobile() { .u-showDesktop {