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

+
+ + +
+``` +*/ + +@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;