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

Merge pull request #54 from CartoDB/53-step_component

Browse Source 
Step component
This commit is contained in:
piensaenpixel 2016-02-09 12:05:27 +01:00
commit 32bc500ff0
2 changed files with 53 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/scss/cdb-components/headers.scss
View File

@ -47,9 +47,11 @@
</li> </li>
</ul> </ul>
</div> </div>
<br/> <br/>
<br/> <br/>
<br/> <br/>
<div class="CDB-HeaderInfo"> <div class="CDB-HeaderInfo">
<a href="#" class="u-rSpace--xl CDB-HeaderInfo-Back"> <a href="#" class="u-rSpace--xl CDB-HeaderInfo-Back">
<i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i> <i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
@ -85,6 +87,7 @@
<p class="CDB-Text CDB-Size-medium u-iBlock"><a href="#" class="u-iBlock">populates_places</a></p> <p class="CDB-Text CDB-Size-medium u-iBlock"><a href="#" class="u-iBlock">populates_places</a></p>
</div> </div>
</div> </div>
<br/> <br/>
<br/> <br/>
<br/> <br/>
@ -111,6 +114,7 @@
<p class="CDB-HeaderInfo-Text CDB-Text CDB-Size-medium">Positron by CartoDB</p> <p class="CDB-HeaderInfo-Text CDB-Text CDB-Size-medium">Positron by CartoDB</p>
</div> </div>
</div> </div>
<br/> <br/>
<br/> <br/>
<br/> <br/>
@ -130,10 +134,35 @@
<p class="CDB-Text CDB-Size-medium u-iBlock"><a href="#" class="u-iBlock">populates_places</a></p> <p class="CDB-Text CDB-Size-medium u-iBlock"><a href="#" class="u-iBlock">populates_places</a></p>
</div> </div>
</div> </div>
<br/> <br/>
<br/> <br/>
<br/> <br/>
<div class="CDB-HeaderInfo">
<div class="CDB-HeaderNumeration CDB-Text is-semibold u-rSpace--m">1</div>
<div class="CDB-HeaderInfo-Inner CDB-Text">
<div class="CDB-HeaderInfo-Title u-bSpace--m">
<h2 class="CDB-HeaderInfo-TitleText CDB-Size-large u-color-cMainDark">Type</h2>
<div class="CDB-HeaderInfo-Actions">
<a href="#">
<div class="CDB-Shape">
<div class="CDB-ArrowToogle is-blue is-small is-down"></div>
</div>
</a>
</div>
</div>
<p class="CDB-HeaderInfo-Text is-uppercase CDB-FontSize-small u-bSpace--m">Histogram</p>
<p class="CDB-HeaderInfo-Text CDB-Size-medium">Distribution of a numeric variable in a range</p>
</div>
</div>
<br/>
<br/>
<br/>
``` ```
*/ */
@ -148,7 +177,6 @@
display: block; display: block;
} }
} }
.CDB-HeaderInfo-ListItem { .CDB-HeaderInfo-ListItem {
display: inline-block; display: inline-block;
margin-right: 8px; margin-right: 8px;
@ -158,24 +186,23 @@
margin-right: 0; margin-right: 0;
} }
} }
.CDB-HeaderInfo-Text { .CDB-HeaderInfo-Text {
color: $cTypo3; color: $cTypo3;
&.is-uppercase {
text-transform: uppercase;
}
} }
.CDB-HeaderInfo-Inner { .CDB-HeaderInfo-Inner {
@include flex(1); @include flex(1);
} }
.CDB-HeaderInfo-Back { .CDB-HeaderInfo-Back {
margin-top: 7px; margin-top: 7px;
} }
.CDB-HeaderInfo-Title { .CDB-HeaderInfo-Title {
@include display-flex(); @include display-flex();
@include align-items(center); @include align-items(center);
} }
.CDB-HeaderInfo-TitleText { .CDB-HeaderInfo-TitleText {
@include flex(1); @include flex(1);
width: 0; width: 0;
@ -184,12 +211,20 @@
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
} }
.CDB-HeaderInfo-ActionsItem { .CDB-HeaderInfo-ActionsItem {
display: inline-block; display: inline-block;
margin-left: 4px; margin-left: 4px;
vertical-align: middle; vertical-align: middle;
} }
.CDB-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: 23px;
text-align: center;
box-sizing: border-box;
}

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

@ -52,3 +52,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;
}