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