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] 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;