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

Several improvements, reduced PR to just carousel component

Browse Source
This commit is contained in:
María Checa
2016-02-05 10:42:47 +01:00
parent 0d571acf3f
commit b0166e9cad
5 changed files with 47 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,29 +5,15 @@
# Carousel
```
<ol 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-Size-large u-color-cMainDark u-bSpace--m">Aggregation</p>
<p class="u-uppercase u-color-cTypo3 CDB-FontSize-small u-bSpace--m">Histogram</p>
<p class="u-color-cTypo3 CDB-FontSize-medium">Distribution of a numeric variable in a range</p>
</div>
</div>
<div class="CDB-Carousel">
<ul>
<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>
</ol>
<div>
<ul class="CDB-Carousel">
<li class="CDB-Carousel-item is-selected"></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>
```
*/
@@ -37,21 +23,37 @@
.CDB-Carousel {
width: 100%;
margin-left: 32px;
font-size: 0;
}
.CDB-Carousel-item {
@include inline-block();
width: $baseSize * 11;
height: $baseSize * 7;
margin-right: 10px;
border: 1px solid $cSecondaryLine;
border-radius: 4px;
background: $cThirdBackground;
vertical-align: top;
box-sizing: border-box;
&:not(:last-child) {
margin-right: 8px;
}
&:hover {
border: 1px solid $cMainLine;
cursor: pointer;
}
&.is-selected {
border: 2px solid $cBlue;
}
}
.CDB-Carousel-headerDetails {
color: $cTypo3;
&.is-uppercase {
text-transform: uppercase;
}
}

36
src/scss/cdb-components/shapes/toogle-arrow.scss
View File

@@ -1,5 +1,5 @@
/* SG
# Shapes/Toggle Arrows
# Shapes/Toogle Arrows
Description
@@ -7,17 +7,17 @@ Description
<h2>16px</h2>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-ArrowToggle"></div>
<div class="CDB-ArrowToogle"></div>
</div>
</div>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-ArrowToggle is-blue"></div>
<div class="CDB-ArrowToogle is-blue"></div>
</div>
</div>
<div style="padding: 20px; background: #2E3C43;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
<div class="CDB-ArrowToggle is-white"></div>
<div class="CDB-ArrowToogle is-white"></div>
</div>
</div>
<br>
@@ -27,17 +27,17 @@ Description
<h2>12px</h2>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-ArrowToggle is-small"></div>
<div class="CDB-ArrowToogle is-small"></div>
</div>
</div>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-ArrowToggle is-blue is-small"></div>
<div class="CDB-ArrowToogle is-blue is-small"></div>
</div>
</div>
<div style="padding: 20px; background: #2E3C43;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
<div class="CDB-ArrowToggle is-white is-small"></div>
<div class="CDB-ArrowToogle is-white is-small"></div>
</div>
</div>
<br>
@@ -47,17 +47,17 @@ Description
<h2>16px</h2>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-ArrowToggle is-down"></div>
<div class="CDB-ArrowToogle is-down"></div>
</div>
</div>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-ArrowToggle is-blue is-down"></div>
<div class="CDB-ArrowToogle is-blue is-down"></div>
</div>
</div>
<div style="padding: 20px; background: #2E3C43;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
<div class="CDB-ArrowToggle is-white is-down"></div>
<div class="CDB-ArrowToogle is-white is-down"></div>
</div>
</div>
<br>
@@ -67,17 +67,17 @@ Description
<h2>12px</h2>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-ArrowToggle is-small is-down"></div>
<div class="CDB-ArrowToogle is-small is-down"></div>
</div>
</div>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-ArrowToggle is-blue is-small is-down"></div>
<div class="CDB-ArrowToogle is-blue is-small is-down"></div>
</div>
</div>
<div style="padding: 20px; background: #2E3C43;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
<div class="CDB-ArrowToggle is-white is-small is-down"></div>
<div class="CDB-ArrowToogle is-white is-small is-down"></div>
</div>
</div>
```
@@ -86,7 +86,7 @@ Description
@import '../../cdb-variables/colors';
@import '../../cdb-variables/sizes';
.CDB-ArrowToggle {
.CDB-ArrowToogle {
position: relative;
height: 100%;
@@ -114,11 +114,11 @@ Description
}
}
.CDB-ArrowToggle.is-down {
.CDB-ArrowToogle.is-down {
transform: rotate(180deg);
}
.CDB-ArrowToggle.is-small {
.CDB-ArrowToogle.is-small {
width: $baseSize * 2;
height: $baseSize * 2;
@@ -132,7 +132,7 @@ Description
}
}
.CDB-ArrowToggle.is-blue {
.CDB-ArrowToogle.is-blue {
&::before {
background: $cBlue;
}
@@ -141,7 +141,7 @@ Description
}
}
.CDB-ArrowToggle.is-white {
.CDB-ArrowToogle.is-white {
&::before {
background: $cWhite;
}

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

@@ -1,88 +0,0 @@
// Step styles
// ----------------------------------------------
/* SG
# Step
```
<ol class="CDB-Steps">
<li class="u-bSpace-xxxl">
<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-Size-large u-color-cMainDark u-bSpace--m">Aggregation</p>
<p class="u-uppercase u-color-cTypo3 CDB-FontSize-small u-bSpace--m">Heatmap</p>
</div>
<div class="CDB-Shape">
<div class="CDB-ArrowToggle is-blue is-small is-down"></div>
</div>
</div>
</li>
<li class="u-bSpace-xxxl">
<div class="CDB-Step-header u-bSpace--xl">
<div class="CDB-Step-headerNumeration CDB-Text is-semibold u-rSpace--m">2</div>
<div class="CDB-Step-headerInfo CDB-Text">
<p class="CDB-Size-large u-color-cMainDark u-bSpace--m">Select style</p>
<p class="u-uppercase u-color-cTypo3 CDB-FontSize-small u-bSpace--m">None</p>
</div>
<div class="CDB-Shape">
<div class="CDB-ArrowToggle is-blue is-small is-down"></div>
</div>
</div>
</li>
<li class="u-bSpace-xxxl">
<div class="CDB-Step-header u-bSpace--xl">
<div class="CDB-Step-headerNumeration CDB-Text is-semibold u-rSpace--m">3</div>
<div class="CDB-Step-headerInfo CDB-Text">
<p class="CDB-Size-large u-color-cMainDark u-bSpace--m">Type</p>
<p class="u-uppercase u-color-cTypo3 CDB-FontSize-small u-bSpace--m">Histogram</p>
<p class="u-color-cTypo3 CDB-FontSize-medium">Distribution of a numeric variable in a range</p>
</div>
<div class="CDB-Shape">
<div class="CDB-ArrowToggle is-blue is-small is-down"></div>
</div>
</div>
</li>
</ol>
```
*/
@import '../cdb-utilities/mixins';
@import '../cdb-variables/sizes';
@import '../cdb-variables/colors';
.CDB-Step-header {
@include display-flex();
@include flex-direction(row);
@include align-items(flex-start, flex-start);
}
.CDB-Step-headerNumeration {
width: $baseSize * 3;
height: $baseSize * 3;
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 {
width: 100%;
}
.CDB-Step-action {
width: $baseSize * 3;
height: $baseSize * 3;
font-size: 14px;
text-align: center;
cursor: pointer;
}

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

@@ -35,9 +35,6 @@
.u-bSpace--xl {
margin-bottom: 12px;
}
.u-bSpace-xxxl {
margin-bottom: 40px;
}
.u-lSpace {
margin-left: 4px;
}
@@ -56,21 +53,6 @@
display: none !important;
}
/* Text */
.u-uppercase {
text-transform: uppercase;
}
.u-color-cBlue {
color: $cBlue;
}
.u-color-cTypo3 {
color: $cTypo3;
}
.u-color-cMainDark {
color: $cMainDark;
}
/* Media queries*/
@include media-query-mobile() {
.u-showDesktop {

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;