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

add new threePoints

Browse Source
This commit is contained in:
piensaenpixel
2016-02-09 14:47:28 +01:00
parent 32bc500ff0
commit 961dc2ef1b
5 changed files with 58 additions and 3 deletions
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.

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

@@ -49,6 +49,10 @@ Description
width: 16px;
height: 16px;
text-align: center;
&.is-medium {
width: 24px;
height: 24px;
}
&:hover {
cursor: pointer;
}

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

@@ -4,6 +4,41 @@
Description
```
<h2>24px</h2>
<div style="padding: 20px;">
<button class="CDB-Shape is-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 is-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 is-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>
<div style="padding: 20px;">
<button class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
@@ -39,7 +74,7 @@ Description
<h2>12px</h2>
<div style="padding: 20px;">
<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>
@@ -48,7 +83,7 @@ Description
</div>
<div style="padding: 20px;">
<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>
@@ -57,7 +92,7 @@ Description
</div>
<div style="padding: 20px; background: #2E3C43;">
<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>
@@ -71,6 +106,9 @@ Description
.CDB-Shape-threePoints {
display: inline-block;
&.is-horizontal {
transform: rotate(90deg);
}
}
.CDB-Shape-threePointsItem {
@@ -78,6 +116,9 @@ Description
height: 2px;
margin-bottom: 5px;
background: $cMainDark;
&.is-round {
border-radius: 50%;
}
&:last-child {
margin-bottom: 0;
}
@@ -93,6 +134,16 @@ Description
}
}
.CDB-Shape-threePoints.is-medium {
padding-top: 2px;
.CDB-Shape-threePointsItem {
width: 4px;
height: 4px;
margin-bottom: 3px;
}
}
.CDB-Shape-threePoints.is-blue {
.CDB-Shape-threePointsItem {
background: $cBlue;