This commit is contained in:
piensaenpixel 2016-03-29 10:34:32 +02:00
parent f79c750d40
commit d247d29120

View File

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