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

Step component: added to headers stylesheet

Browse Source
This commit is contained in:
María Checa 2016-02-08 15:23:14 +01:00
parent c54528bf6a
commit 8bdc4c712b
2 changed files with 52 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
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,28 @@
<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-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">Type</p>
<p class="CDB-Step-headerDetails is-uppercase CDB-FontSize-small u-bSpace--m">Histogram</p>
<p class="CDB-Step-headerDetails CDB-FontSize-medium">Distribution of a numeric variable in a range</p>
</div>
<div class="CDB-Shape">
<div class="CDB-ArrowToogle is-blue is-small is-down"></div>
</div>
</div>
<br/>
<br/>
<br/>
``` ```
*/ */
@ -191,5 +213,34 @@
vertical-align: middle; vertical-align: middle;
} }
/* 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;
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;
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;
}
}

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

@ -1,68 +0,0 @@
// Step styles
// ----------------------------------------------
/* SG
# Step
```
<ol class="CDB-Steps">
<li>
<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">Type</p>
<p class="CDB-Step-headerDetails is-uppercase CDB-FontSize-small u-bSpace--m">Histogram</p>
<p class="CDB-Step-headerDetails CDB-FontSize-medium">Distribution of a numeric variable in a range</p>
</div>
<div class="CDB-Shape">
<div class="CDB-ArrowToogle 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;
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;
}
}
.CDB-Step-action {
width: $baseSize * 3;
height: $baseSize * 3;
font-size: 14px;
text-align: center;
cursor: pointer;
}