82 lines
2.4 KiB
SCSS
82 lines
2.4 KiB
SCSS
// Step styles
|
|
// ----------------------------------------------
|
|
|
|
/* SG
|
|
# Step
|
|
|
|
```
|
|
<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-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="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-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="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-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>
|
|
</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;
|
|
}
|
|
|
|
.CDB-Step-headerInfo {
|
|
width: 100%;
|
|
}
|
|
|
|
.CDB-Step-action {
|
|
width: $baseSize * 3;
|
|
height: $baseSize * 3;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
}
|