Steps and carousel improvements
This commit is contained in:
María Checa
@@ -0,0 +1,91 @@
|
|||||||
|
// Carousel styles
|
||||||
|
// ----------------------------------------------
|
||||||
|
|
||||||
|
/* SG
|
||||||
|
# Carousel
|
||||||
|
|
||||||
|
```
|
||||||
|
<ul>
|
||||||
|
<li class="CDB-Step">
|
||||||
|
<div class="CDB-Step-header">
|
||||||
|
<div class="CDB-Step-header-numeration CDB-Text is-semibold">1</div>
|
||||||
|
<p class="CDB-Step-header-title CDB-Text CDB-Size-large">Aggregation</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="CDB-Carousel">
|
||||||
|
<div class="CDB-Carousel-selection-info CDB-Text">
|
||||||
|
<p class="CDB-Size-small u-uppercase">Histogram</p>
|
||||||
|
<p class="CDB-Size-medium">Distribution of a numeric variable in a range</p>
|
||||||
|
</div>
|
||||||
|
<ul class="CDB-Carousel-cards">
|
||||||
|
<li class="CDB-Carousel-card"></li>
|
||||||
|
<li class="CDB-Carousel-card"></li>
|
||||||
|
<li class="CDB-Carousel-card"></li>
|
||||||
|
<li class="CDB-Carousel-card"></li>
|
||||||
|
<li class="CDB-Carousel-card"></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
```
|
||||||
|
*/
|
||||||
|
|
||||||
|
@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;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,64 @@
|
|||||||
|
// Step styles
|
||||||
|
// ----------------------------------------------
|
||||||
|
|
||||||
|
/* SG
|
||||||
|
# Step
|
||||||
|
|
||||||
|
```
|
||||||
|
<ul class="CDB-Steps">
|
||||||
|
<li class="CDB-Step">
|
||||||
|
<div class="CDB-Step-header">
|
||||||
|
<div class="CDB-Step-header-numeration CDB-Text is-semibold">1</div>
|
||||||
|
<p class="CDB-Step-header-title CDB-Text CDB-Size-large">Aggregation</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="CDB-Step">
|
||||||
|
<div class="CDB-Step-header">
|
||||||
|
<div class="CDB-Step-header-numeration CDB-Text is-semibold">2</div>
|
||||||
|
<p class="CDB-Step-header-title CDB-Text CDB-Size-large">Select style</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="CDB-Step">
|
||||||
|
<div class="CDB-Step-header">
|
||||||
|
<div class="CDB-Step-header-numeration CDB-Text is-semibold">3</div>
|
||||||
|
<p class="CDB-Step-header-title CDB-Text CDB-Size-large">Select template</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
```
|
||||||
|
*/
|
||||||
|
|
||||||
|
@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;
|
||||||
|
}
|
||||||
@@ -1,89 +0,0 @@
|
|||||||
// Step carousel styles
|
|
||||||
// ----------------------------------------------
|
|
||||||
|
|
||||||
/* SG
|
|
||||||
# Steps/Carousel
|
|
||||||
|
|
||||||
```
|
|
||||||
<div>
|
|
||||||
<div class="CDB-StepHeader">
|
|
||||||
<div class="CDB-StepHeader-numeration CDB-Text is-semibold">1</div>
|
|
||||||
<p class="CDB-StepHeader-title CDB-Text CDB-Size-large">Aggregation</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="CDB-Carousel">
|
|
||||||
<div class="CDB-Carousel-selection CDB-Text CDB-Size-small">
|
|
||||||
<span>None</span>
|
|
||||||
</div>
|
|
||||||
<div class="CDB-CarouselElements">
|
|
||||||
<div class="CDB-CarouselCard"></div>
|
|
||||||
<div class="CDB-CarouselCard"></div>
|
|
||||||
<div class="CDB-CarouselCard"></div>
|
|
||||||
<div class="CDB-CarouselCard"></div>
|
|
||||||
<div class="CDB-CarouselCard"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
```
|
|
||||||
*/
|
|
||||||
|
|
||||||
@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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,40 +0,0 @@
|
|||||||
// Step header styles
|
|
||||||
// ----------------------------------------------
|
|
||||||
|
|
||||||
/* SG
|
|
||||||
# Steps/Header
|
|
||||||
|
|
||||||
```
|
|
||||||
<div class="CDB-StepHeader">
|
|
||||||
<div class="CDB-StepHeader-numeration CDB-Text is-semibold">1</div>
|
|
||||||
<p class="CDB-StepHeader-title CDB-Text CDB-Size-large">Aggregation</p>
|
|
||||||
</div>
|
|
||||||
```
|
|
||||||
*/
|
|
||||||
|
|
||||||
@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;
|
|
||||||
}
|
|
||||||
@@ -39,6 +39,9 @@
|
|||||||
.u-showMobile {
|
.u-showMobile {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
.u-uppercase {
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
@include media-query-mobile() {
|
@include media-query-mobile() {
|
||||||
.u-showDesktop {
|
.u-showDesktop {
|
||||||
|
|||||||
Reference in New Issue
Block a user