change class name

This commit is contained in:
piensaenpixel
2016-03-29 11:13:09 +02:00
parent 469850129f
commit 4d7455e4ce

View File

@@ -7,37 +7,37 @@ Description
<h2>16px</h2>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-move">
<div class="CDB-Shape-moveItem is-first"></div>
<div class="CDB-Shape-moveItem is-second"></div>
<div class="CDB-Shape-moveItem is-third"></div>
<div class="CDB-Shape-rectsHandle">
<div class="CDB-Shape-rectsHandleItem is-first"></div>
<div class="CDB-Shape-rectsHandleItem is-second"></div>
<div class="CDB-Shape-rectsHandleItem is-third"></div>
</div>
</div>
</div>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-move">
<div class="CDB-Shape-moveItem CDB-Shape-moveItem--blue is-first"></div>
<div class="CDB-Shape-moveItem CDB-Shape-moveItem--blue is-second"></div>
<div class="CDB-Shape-moveItem CDB-Shape-moveItem--blue is-third"></div>
<div class="CDB-Shape-rectsHandle">
<div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--blue is-first"></div>
<div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--blue is-second"></div>
<div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--blue is-third"></div>
</div>
</div>
</div>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-move">
<div class="CDB-Shape-moveItem CDB-Shape-moveItem--grey is-first"></div>
<div class="CDB-Shape-moveItem CDB-Shape-moveItem--grey is-second"></div>
<div class="CDB-Shape-moveItem CDB-Shape-moveItem--grey is-third"></div>
<div class="CDB-Shape-rectsHandle">
<div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--grey is-first"></div>
<div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--grey is-second"></div>
<div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--grey is-third"></div>
</div>
</div>
</div>
<div style="padding: 20px; background: #2E3C43;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
<div class="CDB-Shape-move">
<div class="CDB-Shape-moveItem CDB-Shape-moveItem--white is-first"></div>
<div class="CDB-Shape-moveItem CDB-Shape-moveItem--white is-second"></div>
<div class="CDB-Shape-moveItem CDB-Shape-moveItem--white is-third"></div>
<div class="CDB-Shape-rectsHandle">
<div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--white is-first"></div>
<div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--white is-second"></div>
<div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--white is-third"></div>
</div>
</div>
</div>
@@ -48,37 +48,37 @@ Description
<h2>12px</h2>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-move is-small">
<div class="CDB-Shape-moveItem is-first"></div>
<div class="CDB-Shape-moveItem is-second"></div>
<div class="CDB-Shape-moveItem is-third"></div>
<div class="CDB-Shape-rectsHandle is-small">
<div class="CDB-Shape-rectsHandleItem is-first"></div>
<div class="CDB-Shape-rectsHandleItem is-second"></div>
<div class="CDB-Shape-rectsHandleItem is-third"></div>
</div>
</div>
</div>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-move is-small">
<div class="CDB-Shape-moveItem CDB-Shape-moveItem--blue is-first"></div>
<div class="CDB-Shape-moveItem CDB-Shape-moveItem--blue is-second"></div>
<div class="CDB-Shape-moveItem CDB-Shape-moveItem--blue is-third"></div>
<div class="CDB-Shape-rectsHandle is-small">
<div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--blue is-first"></div>
<div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--blue is-second"></div>
<div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--blue is-third"></div>
</div>
</div>
</div>
<div style="padding: 20px;">
<div class="CDB-Shape">
<div class="CDB-Shape-move is-small">
<div class="CDB-Shape-moveItem CDB-Shape-moveItem--grey is-first"></div>
<div class="CDB-Shape-moveItem CDB-Shape-moveItem--grey is-second"></div>
<div class="CDB-Shape-moveItem CDB-Shape-moveItem--grey is-third"></div>
<div class="CDB-Shape-rectsHandle is-small">
<div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--grey is-first"></div>
<div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--grey is-second"></div>
<div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--grey is-third"></div>
</div>
</div>
</div>
<div style="padding: 20px; background: #2E3C43;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
<div class="CDB-Shape-move is-small">
<div class="CDB-Shape-moveItem CDB-Shape-moveItem--white is-first"></div>
<div class="CDB-Shape-moveItem CDB-Shape-moveItem--white is-second"></div>
<div class="CDB-Shape-moveItem CDB-Shape-moveItem--white is-third"></div>
<div class="CDB-Shape-rectsHandle is-small">
<div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--white is-first"></div>
<div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--white is-second"></div>
<div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--white is-third"></div>
</div>
</div>
</div>
@@ -87,14 +87,14 @@ Description
@import '../../cdb-variables/colors';
.CDB-Shape-move {
.CDB-Shape-rectsHandle {
padding: 1px 0 0;
}
.CDB-Shape-move.is-small {
.CDB-Shape-rectsHandle.is-small {
padding: 3px 0 0 1px;
.CDB-Shape-moveItem {
.CDB-Shape-rectsHandleItem {
height: 2px;
margin-bottom: 2px;
@@ -110,7 +110,7 @@ Description
}
}
.CDB-Shape-moveItem {
.CDB-Shape-rectsHandleItem {
height: 3px;
margin-bottom: 3px;
@@ -135,21 +135,21 @@ Description
}
}
.CDB-Shape-moveItem--blue {
.CDB-Shape-rectsHandleItem--blue {
&::before,
&::after {
background: $cBlue;
}
}
.CDB-Shape-moveItem--white {
.CDB-Shape-rectsHandleItem--white {
&::before,
&::after {
background: $cWhite;
}
}
.CDB-Shape-moveItem--grey {
.CDB-Shape-rectsHandleItem--grey {
&::before,
&::after {
background: $cHoverLine;