111 lines
2.6 KiB
SCSS
111 lines
2.6 KiB
SCSS
/* SG
|
|
# Shapes/Paragrapgh
|
|
|
|
Description
|
|
|
|
```
|
|
<h2>16px</h2>
|
|
<br/>
|
|
<br/>
|
|
<div class="CDB-Shape">
|
|
<ul class="CDB-Shape-paragraph is-right">
|
|
<li class="CDB-Shape-paragraphItem">
|
|
<span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--01"></span>
|
|
</li>
|
|
<li class="CDB-Shape-paragraphItem">
|
|
<span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--02"></span>
|
|
</li>
|
|
<li class="CDB-Shape-paragraphItem">
|
|
<span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--03"></span>
|
|
</li>
|
|
<li class="CDB-Shape-paragraphItem">
|
|
<span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--04"></span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<br/>
|
|
<br/>
|
|
<br/>
|
|
<br/>
|
|
<div class="CDB-Shape">
|
|
<ul class="CDB-Shape-paragraph is-center">
|
|
<li class="CDB-Shape-paragraphItem">
|
|
<span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--01"></span>
|
|
</li>
|
|
<li class="CDB-Shape-paragraphItem">
|
|
<span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--02"></span>
|
|
</li>
|
|
<li class="CDB-Shape-paragraphItem">
|
|
<span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--03"></span>
|
|
</li>
|
|
<li class="CDB-Shape-paragraphItem">
|
|
<span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--04"></span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<br/>
|
|
<br/>
|
|
<br/>
|
|
<br/>
|
|
<div class="CDB-Shape">
|
|
<ul class="CDB-Shape-paragraph is-active">
|
|
<li class="CDB-Shape-paragraphItem">
|
|
<span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--01"></span>
|
|
</li>
|
|
<li class="CDB-Shape-paragraphItem">
|
|
<span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--02"></span>
|
|
</li>
|
|
<li class="CDB-Shape-paragraphItem">
|
|
<span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--03"></span>
|
|
</li>
|
|
<li class="CDB-Shape-paragraphItem">
|
|
<span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--04"></span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
```
|
|
*/
|
|
|
|
.CDB-Shape-paragraph {
|
|
padding-top: 3px;
|
|
text-align: left;
|
|
}
|
|
.CDB-Shape-paragraph.is-center {
|
|
text-align: center;
|
|
}
|
|
.CDB-Shape-paragraph.is-right {
|
|
text-align: right;
|
|
}
|
|
.CDB-Shape-paragraphItem {
|
|
height: 1px;
|
|
margin-bottom: 2px;
|
|
}
|
|
.CDB-Shape-paragraphItem:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.CDB-Shape-paragraphBar {
|
|
display: inline-block;
|
|
height: 1px;
|
|
margin-bottom: 2px;
|
|
background: $cSecondaryLine;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.CDB-Shape-paragraph.is-active .CDB-Shape-paragraphBar {
|
|
background: $cBlue;
|
|
}
|
|
|
|
.CDB-Shape-paragraphBar--01 {
|
|
width: 12px;
|
|
}
|
|
.CDB-Shape-paragraphBar--02 {
|
|
width: 6px;
|
|
}
|
|
.CDB-Shape-paragraphBar--03 {
|
|
width: 8px;
|
|
}
|
|
.CDB-Shape-paragraphBar--04 {
|
|
width: 4px;
|
|
}
|