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

Carousel css

Browse Source
This commit is contained in:
María Checa 2016-02-01 18:21:22 +01:00
parent c11028772e
commit 1866c573af
4 changed files with 134 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
src/scss/cdb-components/steps/carousel.scss Normal file
View File

@ -0,0 +1,89 @@
// 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;
}
}

40
src/scss/cdb-components/steps/header.scss Normal file
View File

@ -0,0 +1,40 @@
// 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;
}

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

@ -21,6 +21,9 @@
.u-rSpace--xl {
margin-right: 12px;
}
.u-bSpace-xxxl {
margin-bottom: 40px;
}
.u-lSpace {
margin-left: 4px;
}

4
src/scss/cdb-variables/_sizes.scss
View File

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