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

Merge pull request #89 from CartoDB/fix-move-shape

Browse Source 
fix move shape and add grey version
This commit is contained in:
piensaenpixel 2016-03-29 11:11:22 +02:00
commit 2f1301092f
1 changed files with 57 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
src/scss/cdb-components/shapes/move.scss
View File

@ -7,28 +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-rectsHandle">
<div class="CDB-Shape-MoveItem is-first"></div> <div class="CDB-Shape-rectsHandleItem is-first"></div>
<div class="CDB-Shape-MoveItem is-second"></div> <div class="CDB-Shape-rectsHandleItem is-second"></div>
<div class="CDB-Shape-MoveItem is-third"></div> <div class="CDB-Shape-rectsHandleItem 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-rectsHandle">
<div class="CDB-Shape-MoveItem is-blue is-first"></div> <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--blue is-first"></div>
<div class="CDB-Shape-MoveItem is-blue is-second"></div> <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--blue is-second"></div>
<div class="CDB-Shape-MoveItem is-blue is-third"></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-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>
</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-rectsHandle">
<div class="CDB-Shape-MoveItem is-white is-first"></div> <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--white is-first"></div>
<div class="CDB-Shape-MoveItem is-white is-second"></div> <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--white is-second"></div>
<div class="CDB-Shape-MoveItem is-white is-third"></div> <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--white is-third"></div>
</div> </div>
</div> </div>
</div> </div>
@ -39,28 +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-rectsHandle is-small">
<div class="CDB-Shape-MoveItem is-first"></div> <div class="CDB-Shape-rectsHandleItem is-first"></div>
<div class="CDB-Shape-MoveItem is-second"></div> <div class="CDB-Shape-rectsHandleItem is-second"></div>
<div class="CDB-Shape-MoveItem is-third"></div> <div class="CDB-Shape-rectsHandleItem 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-rectsHandle is-small">
<div class="CDB-Shape-MoveItem is-blue is-first"></div> <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--blue is-first"></div>
<div class="CDB-Shape-MoveItem is-blue is-second"></div> <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--blue is-second"></div>
<div class="CDB-Shape-MoveItem is-blue is-third"></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-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>
</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-rectsHandle is-small">
<div class="CDB-Shape-MoveItem is-white is-first"></div> <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--white is-first"></div>
<div class="CDB-Shape-MoveItem is-white is-second"></div> <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--white is-second"></div>
<div class="CDB-Shape-MoveItem is-white is-third"></div> <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--white is-third"></div>
</div> </div>
</div> </div>
</div> </div>
@ -69,14 +87,15 @@ Description
@import '../../cdb-variables/colors'; @import '../../cdb-variables/colors';
.CDB-Shape-Move { .CDB-Shape-rectsHandle {
padding: 1px 0 0; padding: 1px 0 0;
} }
.CDB-Shape-Move.is-small { .CDB-Shape-rectsHandle.is-small {
padding: 3px 0 0 1px; padding: 3px 0 0 1px;
.CDB-Shape-MoveItem { .CDB-Shape-rectsHandleItem {
height: 2px;
margin-bottom: 2px; margin-bottom: 2px;
&::before { &::before {
@ -91,7 +110,8 @@ Description
} }
} }
.CDB-Shape-MoveItem { .CDB-Shape-rectsHandleItem {
height: 3px;
margin-bottom: 3px; margin-bottom: 3px;
&:last-child { &:last-child {
@ -115,16 +135,23 @@ Description
} }
} }
.CDB-Shape-MoveItem.is-blue { .CDB-Shape-rectsHandleItem--blue {
&::before, &::before,
&::after { &::after {
background: $cBlue; background: $cBlue;
} }
} }
.CDB-Shape-MoveItem.is-white { .CDB-Shape-rectsHandleItem--white {
&::before, &::before,
&::after { &::after {
background: $cWhite; background: $cWhite;
} }
} }
.CDB-Shape-rectsHandleItem--grey {
&::before,
&::after {
background: $cHoverLine;
}
}