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

Syntax and structure improvements

Browse Source
This commit is contained in:
María Checa
2016-02-02 19:13:31 +01:00
parent beaee4824b
commit 3363b72bad
4 changed files with 48 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,9 +11,9 @@
<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>
<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>
@@ -51,10 +51,10 @@
@include inline-block();
width: $baseSize * 11;
height: $baseSize * 7;
margin-right: 10px;
border: 1px solid $cSecondaryLine;
border-radius: 4px;
background: $cThirdBackground;
margin-right: 10px;
vertical-align: top;
&:hover {

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

@@ -5,39 +5,45 @@
# Step
```
<ul class="CDB-Steps">
<li class="CDB-Step-item">
<div class="CDB-Step-header">
<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-Step-headerTitle CDB-Text CDB-Size-large u-bSpace--m">Aggregation</p>
<p class="CDB-Size-small u-uppercase u-color-cTypo3">Heatmap</p>
<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>
<i class="CDB-Step-action CDB-IconFont CDB-IconFont-arrowMenuLight Size-large u-color-cBlue"></i>
</div>
</li>
<li class="CDB-Step-item">
<div class="CDB-Step-header">
<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-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>
<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>
<i class="CDB-Step-action CDB-IconFont CDB-IconFont-arrowMenuLight Size-large u-color-cBlue"></i>
</div>
</li>
<li class="CDB-Step-item">
<div class="CDB-Step-header">
<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-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>
<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>
<i class="CDB-Step-action CDB-IconFont CDB-IconFont-arrowMenuLight Size-large u-color-cBlue"></i>
</div>
</li>
</ul>
</ol>
```
*/
@@ -45,11 +51,6 @@
@import '../cdb-variables/sizes';
@import '../cdb-variables/colors';
.CDB-Step-item {
margin-bottom: 40px;
width: 300px;
}
.CDB-Step-header {
@include display-flex();
@include flex-direction(row);
@@ -59,7 +60,6 @@
.CDB-Step-headerNumeration {
width: $baseSize * 3;
height: $baseSize * 3;
margin-right: 1px;
border: 1px solid $cMainLine;
border-radius: 4px;
background-color: $cWhite;
@@ -70,5 +70,12 @@
}
.CDB-Step-headerInfo {
color: $cMainDark;
width: 100%;
}
.CDB-Step-action {
width: $baseSize * 3;
height: $baseSize * 3;
font-size: 14px;
text-align: center;
}

8
src/scss/cdb-components/typography.scss
View File

@@ -47,3 +47,11 @@
font-size: $sFontSize-small;
line-height: $sLineHeight-small;
}
.CDB-FontSize-small {
font-size: $sFontSize-small;
}
.CDB-FontSize-medium {
font-size: $sFontSize-medium;
}

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

@@ -54,10 +54,17 @@
.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 {