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

Step component: improvements

Browse Source
This commit is contained in:
María Checa 2016-02-08 16:57:27 +01:00
parent 8bdc4c712b
commit 2024f616ec
1 changed files with 22 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -139,17 +139,24 @@
<br/> <br/>
<br/> <br/>
<div class="CDB-Step-header u-bSpace--xl"> <div class="CDB-HeaderInfo">
<div class="CDB-Step-headerNumeration CDB-Text is-semibold u-rSpace--m">1</div> <div class="CDB-HeaderNumeration CDB-Text is-semibold u-rSpace--m">1</div>
<div class="CDB-Step-headerInfo CDB-Text"> <div class="CDB-HeaderInfo-Inner CDB-Text">
<p class="CDB-Size-large u-color-cMainDark u-bSpace--m">Type</p> <div class="CDB-HeaderInfo-Title u-bSpace--m">
<p class="CDB-Step-headerDetails is-uppercase CDB-FontSize-small u-bSpace--m">Histogram</p> <h2 class="CDB-HeaderInfo-TitleText CDB-Size-large u-color-cMainDark">Type</h2>
<p class="CDB-Step-headerDetails CDB-FontSize-medium">Distribution of a numeric variable in a range</p>
</div> <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>
<div class="CDB-Shape"> <p class="CDB-HeaderInfo-Text is-uppercase CDB-FontSize-small u-bSpace--m">Histogram</p>
<div class="CDB-ArrowToogle is-blue is-small is-down"></div> <p class="CDB-HeaderInfo-Text CDB-Text CDB-Size-medium">Distribution of a numeric variable in a range</p>
</div> </div>
</div> </div>
@ -170,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;
@ -180,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;
@ -206,20 +211,12 @@
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 {
/* Steps header */
.CDB-Step-header {
@include display-flex();
@include flex-direction(row);
@include align-items(flex-start, flex-start);
}
.CDB-Step-headerNumeration {
width: $baseSize * 3; width: $baseSize * 3;
height: $baseSize * 3; height: $baseSize * 3;
border: 1px solid $cMainLine; border: 1px solid $cMainLine;
@ -227,20 +224,7 @@
background-color: $cWhite; background-color: $cWhite;
color: $cTypo3; color: $cTypo3;
font-size: $sFontSize-small; font-size: $sFontSize-small;
line-height: $baseSize * 3; line-height: 23px;
text-align: center; text-align: center;
box-sizing: border-box; box-sizing: border-box;
} }
.CDB-Step-headerInfo {
@include flex-grow(2);
}
.CDB-Step-headerTitle {
color: $cMainDark;
}
.CDB-Step-headerDetails {
color: $cTypo3;
&.is-uppercase {
text-transform: uppercase;
}
}