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
src/scss/cdb-components/carousel.scss
+4 -4
View File
@@ -11,9 +11,9 @@
<div class="CDB-Step-headerNumeration CDB-Text is-semibold u-rSpace--m">1</div> <div class="CDB-Step-headerNumeration CDB-Text is-semibold u-rSpace--m">1</div>
<div class="CDB-Step-headerInfo CDB-Text"> <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-large u-color-cMainDark u-bSpace--m">Aggregation</p>
<p class="CDB-Size-small u-uppercase u-color-cTypo3">Histogram</p> <p class="u-uppercase u-color-cTypo3 CDB-FontSize-small u-bSpace--m">Histogram</p>
<p class="CDB-Size-medium u-color-cTypo3">Distribution of a numeric variable in a range</p> <p class="u-color-cTypo3 CDB-FontSize-medium">Distribution of a numeric variable in a range</p>
</div> </div>
</div> </div>
@@ -51,10 +51,10 @@
@include inline-block(); @include inline-block();
width: $baseSize * 11; width: $baseSize * 11;
height: $baseSize * 7; height: $baseSize * 7;
margin-right: 10px;
border: 1px solid $cSecondaryLine; border: 1px solid $cSecondaryLine;
border-radius: 4px; border-radius: 4px;
background: $cThirdBackground; background: $cThirdBackground;
margin-right: 10px;
vertical-align: top; vertical-align: top;
&:hover { &:hover {
src/scss/cdb-components/step.scss
+29 -22
View File
@@ -5,39 +5,45 @@
# Step # Step
``` ```
<ul class="CDB-Steps"> <ol class="CDB-Steps">
<li class="CDB-Step-item"> <li class="u-bSpace-xxxl">
<div class="CDB-Step-header"> <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-headerNumeration CDB-Text is-semibold u-rSpace--m">1</div>
<div class="CDB-Step-headerInfo CDB-Text"> <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-large u-color-cMainDark u-bSpace--m">Aggregation</p>
<p class="CDB-Size-small u-uppercase u-color-cTypo3">Heatmap</p> <p class="u-uppercase u-color-cTypo3 CDB-FontSize-small u-bSpace--m">Heatmap</p>
</div> </div>
<i class="CDB-Step-action CDB-IconFont CDB-IconFont-arrowMenuLight Size-large u-color-cBlue"></i>
</div> </div>
</li> </li>
<li class="CDB-Step-item"> <li class="u-bSpace-xxxl">
<div class="CDB-Step-header"> <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-headerNumeration CDB-Text is-semibold u-rSpace--m">2</div>
<div class="CDB-Step-headerInfo CDB-Text"> <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-large u-color-cMainDark u-bSpace--m">Select style</p>
<p class="CDB-Size-small u-uppercase u-color-cTypo3">None</p> <p class="u-uppercase u-color-cTypo3 CDB-FontSize-small u-bSpace--m">None</p>
</div> </div>
<i class="CDB-Step-action CDB-IconFont CDB-IconFont-arrowMenuLight Size-large u-color-cBlue"></i>
</div> </div>
</li> </li>
<li class="CDB-Step-item"> <li class="u-bSpace-xxxl">
<div class="CDB-Step-header"> <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-headerNumeration CDB-Text is-semibold u-rSpace--m">3</div>
<div class="CDB-Step-headerInfo CDB-Text"> <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-large u-color-cMainDark u-bSpace--m">Type</p>
<p class="CDB-Size-small u-uppercase u-color-cTypo3">Histogram</p> <p class="u-uppercase u-color-cTypo3 CDB-FontSize-small u-bSpace--m">Histogram</p>
<p class="CDB-Size-medium u-color-cTypo3">Distribution of a numeric variable in a range</p> <p class="u-color-cTypo3 CDB-FontSize-medium">Distribution of a numeric variable in a range</p>
</div> </div>
<i class="CDB-Step-action CDB-IconFont CDB-IconFont-arrowMenuLight Size-large u-color-cBlue"></i>
</div> </div>
</li> </li>
</ul> </ol>
``` ```
*/ */
@@ -45,11 +51,6 @@
@import '../cdb-variables/sizes'; @import '../cdb-variables/sizes';
@import '../cdb-variables/colors'; @import '../cdb-variables/colors';
.CDB-Step-item {
margin-bottom: 40px;
width: 300px;
}
.CDB-Step-header { .CDB-Step-header {
@include display-flex(); @include display-flex();
@include flex-direction(row); @include flex-direction(row);
@@ -59,7 +60,6 @@
.CDB-Step-headerNumeration { .CDB-Step-headerNumeration {
width: $baseSize * 3; width: $baseSize * 3;
height: $baseSize * 3; height: $baseSize * 3;
margin-right: 1px;
border: 1px solid $cMainLine; border: 1px solid $cMainLine;
border-radius: 4px; border-radius: 4px;
background-color: $cWhite; background-color: $cWhite;
@@ -70,5 +70,12 @@
} }
.CDB-Step-headerInfo { .CDB-Step-headerInfo {
color: $cMainDark; width: 100%;
}
.CDB-Step-action {
width: $baseSize * 3;
height: $baseSize * 3;
font-size: 14px;
text-align: center;
} }
src/scss/cdb-components/typography.scss
+8
View File
@@ -47,3 +47,11 @@
font-size: $sFontSize-small; font-size: $sFontSize-small;
line-height: $sLineHeight-small; line-height: $sLineHeight-small;
} }
.CDB-FontSize-small {
font-size: $sFontSize-small;
}
.CDB-FontSize-medium {
font-size: $sFontSize-medium;
}
src/scss/cdb-utilities/helpers.scss
+7
View File
@@ -54,10 +54,17 @@
.u-uppercase { .u-uppercase {
text-transform: uppercase; text-transform: uppercase;
} }
.u-color-cBlue {
color: $cBlue;
}
.u-color-cTypo3 { .u-color-cTypo3 {
color: $cTypo3; color: $cTypo3;
} }
.u-color-cMainDark {
color: $cMainDark;
}
/* Media queries*/ /* Media queries*/
@include media-query-mobile() { @include media-query-mobile() {
.u-showDesktop { .u-showDesktop {