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

Merge pull request #60 from CartoDB/Add-shapes

Browse Source 
add new threePoints
This commit is contained in:
piensaenpixel 2016-02-09 18:30:42 +01:00
commit aa6a3d5a02
5 changed files with 74 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/fonts/cartoIcon.eot
View File

Binary file not shown.

BIN
src/fonts/cartoIcon.ttf
View File

Binary file not shown.

BIN
src/fonts/cartoIcon.woff
View File

Binary file not shown.

9
src/scss/cdb-components/shapes/add.scss
View File

@ -49,10 +49,15 @@ Description
width: 16px; width: 16px;
height: 16px; height: 16px;
text-align: center; text-align: center;
&:hover { }
.CDB-Shape--medium {
width: 24px;
height: 24px;
}
.CDB-Shape:hover {
cursor: pointer; cursor: pointer;
} }
}
.CDB-Shape-add { .CDB-Shape-add {
position: relative; position: relative;

73
src/scss/cdb-components/shapes/threePoints.scss
View File

@ -4,6 +4,41 @@
Description Description
``` ```
<h2>24px</h2>
<div style="padding: 20px;">
<button class="CDB-Shape CDB-Shape--medium" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-threePoints is-horizontal is-medium">
<div class="CDB-Shape-threePointsItem is-round"></div>
<div class="CDB-Shape-threePointsItem is-round"></div>
<div class="CDB-Shape-threePointsItem is-round"></div>
</div>
</button>
</div>
<div style="padding: 20px;">
<button class="CDB-Shape CDB-Shape--medium" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-threePoints is-horizontal is-blue is-medium">
<div class="CDB-Shape-threePointsItem is-round"></div>
<div class="CDB-Shape-threePointsItem is-round"></div>
<div class="CDB-Shape-threePointsItem is-round"></div>
</div>
</button>
</div>
<div style="padding: 20px; background: #2E3C43;">
<button class="CDB-Shape CDB-Shape--medium" style="background: rgba(0, 0, 0, .08);">
<div class="CDB-Shape-threePoints is-horizontal is-white is-medium">
<div class="CDB-Shape-threePointsItem is-round"></div>
<div class="CDB-Shape-threePointsItem is-round"></div>
<div class="CDB-Shape-threePointsItem is-round"></div>
</div>
</button>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<h2>16px</h2> <h2>16px</h2>
<div style="padding: 20px;"> <div style="padding: 20px;">
<button class="CDB-Shape" style="background: rgba(0, 0, 0, .02);"> <button class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
@ -39,7 +74,7 @@ Description
<h2>12px</h2> <h2>12px</h2>
<div style="padding: 20px;"> <div style="padding: 20px;">
<button class="CDB-Shape" style="background: rgba(0, 0, 0, .02);"> <button class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-threePoints is-small"> <div class="CDB-Shape-threePoints">
<div class="CDB-Shape-threePointsItem"></div> <div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div> <div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div> <div class="CDB-Shape-threePointsItem"></div>
@ -48,7 +83,7 @@ Description
</div> </div>
<div style="padding: 20px;"> <div style="padding: 20px;">
<button class="CDB-Shape" style="background: rgba(0, 0, 0, .02);"> <button class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-threePoints is-blue is-small js-actions"> <div class="CDB-Shape-threePoints is-blue is-small">
<div class="CDB-Shape-threePointsItem"></div> <div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div> <div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div> <div class="CDB-Shape-threePointsItem"></div>
@ -57,7 +92,7 @@ Description
</div> </div>
<div style="padding: 20px; background: #2E3C43;"> <div style="padding: 20px; background: #2E3C43;">
<button class="CDB-Shape" style="background: rgba(0, 0, 0, .08);"> <button class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
<div class="CDB-Shape-threePoints is-white is-small js-actions"> <div class="CDB-Shape-threePoints is-white is-small">
<div class="CDB-Shape-threePointsItem"></div> <div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div> <div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div> <div class="CDB-Shape-threePointsItem"></div>
@ -72,35 +107,45 @@ Description
.CDB-Shape-threePoints { .CDB-Shape-threePoints {
display: inline-block; display: inline-block;
} }
.CDB-Shape-threePoints.is-horizontal {
transform: rotate(90deg);
}
.CDB-Shape-threePointsItem { .CDB-Shape-threePointsItem {
width: 2px; width: 2px;
height: 2px; height: 2px;
margin-bottom: 5px; margin-bottom: 5px;
background: $cMainBg; background: $cMainDark;
&:last-child {
margin-bottom: 0;
} }
.CDB-Shape-threePointsItem.is-round {
border-radius: 50%;
}
.CDB-Shape-threePointsItem:last-child {
margin-bottom: 0;
} }
.CDB-Shape-threePoints.is-small { .CDB-Shape-threePoints.is-small {
padding-top: 2px; padding-top: 2px;
}
.CDB-Shape-threePointsItem { .CDB-Shape-threePoints.is-small .CDB-Shape-threePointsItem {
width: 2px; width: 2px;
height: 2px; height: 2px;
margin-bottom: 3px; margin-bottom: 3px;
} }
.CDB-Shape-threePoints.is-medium {
padding-top: 2px;
}
.CDB-Shape-threePoints.is-medium .CDB-Shape-threePointsItem {
width: 4px;
height: 4px;
margin-bottom: 3px;
} }
.CDB-Shape-threePoints.is-blue { .CDB-Shape-threePoints.is-blue .CDB-Shape-threePointsItem {
.CDB-Shape-threePointsItem {
background: $cBlue; background: $cBlue;
} }
}
.CDB-Shape-threePoints.is-white { .CDB-Shape-threePoints.is-white .CDB-Shape-threePointsItem {
.CDB-Shape-threePointsItem {
background: $cWhite; background: $cWhite;
} }
}