cartodb4/CartoAssets
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Carousel and Step header improvements

Browse Source
This commit is contained in:
María Checa
2016-02-02 17:19:24 +01:00
parent 9504ac53f3
commit beaee4824b
3 changed files with 77 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/scss/cdb-components/carousel.scss
View File

@@ -5,24 +5,25 @@
# 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>
<ul class="CDB-Steps">
<li class="CDB-Step-item">
<div class="CDB-Step-header u-bSpace--xl">
<div class="CDB-Step-headerNumeration CDB-Text is-semibold u-rSpace--m">1</div>
<div class="CDB-Step-headerInfo CDB-Text">
<p class="CDB-Step-headerTitle CDB-Text CDB-Size-large u-bSpace--m">Aggregation</p>
<p class="CDB-Size-small u-uppercase u-color-cTypo3">Histogram</p>
<p class="CDB-Size-medium u-color-cTypo3">Distribution of a numeric variable in a range</p>
</div>
</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 class="CDB-Carousel-inner">
<li class="CDB-Carousel-item"></li>
<li class="CDB-Carousel-item"></li>
<li class="CDB-Carousel-item"></li>
<li class="CDB-Carousel-item"></li>
<li class="CDB-Carousel-item"></li>
</ul>
</div>
</li>
@@ -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;

74
src/scss/cdb-components/step.scss
View File

@@ -6,22 +6,35 @@
```
<ul class="CDB-Steps">
<li class="CDB-Step">
<li class="CDB-Step-item">
<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 class="CDB-Step-headerNumeration CDB-Text is-semibold u-rSpace--m">1</div>
<div class="CDB-Step-headerInfo CDB-Text">
<p class="CDB-Step-headerTitle CDB-Text CDB-Size-large u-bSpace--m">Aggregation</p>
<p class="CDB-Size-small u-uppercase u-color-cTypo3">Heatmap</p>
</div>
</div>
</li>
<li class="CDB-Step">
<li class="CDB-Step-item">
<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 class="CDB-Step-headerNumeration CDB-Text is-semibold u-rSpace--m">2</div>
<div class="CDB-Step-headerInfo CDB-Text">
<p class="CDB-Step-headerTitle CDB-Text CDB-Size-large u-bSpace--m">Select style</p>
<p class="CDB-Size-small u-uppercase u-color-cTypo3">None</p>
</div>
</div>
</li>
<li class="CDB-Step">
<li class="CDB-Step-item">
<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 class="CDB-Step-headerNumeration CDB-Text is-semibold u-rSpace--m">3</div>
<div class="CDB-Step-headerInfo CDB-Text">
<p class="CDB-Step-headerTitle CDB-Text CDB-Size-large u-bSpace--m">Type</p>
<p class="CDB-Size-small u-uppercase u-color-cTypo3">Histogram</p>
<p class="CDB-Size-medium u-color-cTypo3">Distribution of a numeric variable in a range</p>
</div>
</div>
</li>
</ul>
@@ -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;
}
}

16
src/scss/cdb-utilities/helpers.scss
View File

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