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

add shapes

Browse Source
This commit is contained in:
piensaenpixel 2016-01-28 16:14:00 +01:00
parent dc4819fe38
commit ac500fb06e
6 changed files with 261 additions and 39 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.

115
src/scss/cdb-components/shapes/close.scss Normal file
View File

@ -0,0 +1,115 @@
/* SG
# Shapes/Close
Description
```
<h2>16px</h2>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-close"></div>
</div>
</div>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-close is-blue"></div>
</div>
</div>
<div style="padding: 20px; background: #2E3C43;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
<div class="CDB-Shape-close is-white"></div>
</div>
</div>
<br>
<br>
<br>
<br>
<h2>12px</h2>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-close is-small"></div>
</div>
</div>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-close is-blue is-small"></div>
</div>
</div>
<div style="padding: 20px; background: #2E3C43;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
<div class="CDB-Shape-close is-white is-small"></div>
</div>
</div>
```
*/
@import '../../cdb-variables/colors';
.CDB-Shape {
width: 16px;
height: 16px;
text-align: center;
&:hover {
cursor: pointer;
}
}
.CDB-Shape-close {
display: block;
position: relative;
height: 100%;
&::before {
display: block;
position: absolute;
top: -2px;
left: 7px;
width: 1px;
height: 20px;
transform: rotate(-45deg);
background: $cMainDark;
content: '';
}
&::after {
display: block;
position: absolute;
top: -2px;
right: 8px;
width: 1px;
height: 20px;
transform: rotate(45deg);
background: $cMainDark;
content: '';
}
&.is-small {
&::before {
top: 2px;
left: 7px;
height: 12px;
transform: rotate(-45deg);
}
&::after {
top: 2px;
right: 8px;
height: 12px;
}
}
}
.CDB-Shape-close.is-blue {
&::before {
background: $cBlue;
}
&::after {
background: $cBlue;
}
}
.CDB-Shape-close.is-white {
&::before {
background: $cWhite;
}
&::after {
background: $cWhite;
}
}

84
src/scss/cdb-components/shapes/magnify.scss
View File

@ -4,32 +4,69 @@
Description Description
``` ```
<h2>16px</h2>
<div style="padding: 20px;"> <div style="padding: 20px;">
<div class="CDB-Shape-magnify"></div> <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
<div class="CDB-Shape-magnify"></div>
</div>
</div> </div>
<div style="padding: 20px;"> <div style="padding: 20px;">
<div class="CDB-Shape-magnify is-blue"></div> <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
<div class="CDB-Shape-magnify is-blue"></div>
</div>
</div> </div>
<div style="background: #2E3C43; padding: 20px;"> <div style="background: #2E3C43; padding: 20px;">
<div class="CDB-Shape-magnify is-white"></div> <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
<div class="CDB-Shape-magnify is-white"></div>
</div>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<h2>12px</h2>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
<div class="CDB-Shape-magnify is-small"></div>
</div>
</div>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
<div class="CDB-Shape-magnify is-blue is-small"></div>
</div>
</div>
<div style="background: #2E3C43; padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
<div class="CDB-Shape-magnify is-white is-small"></div>
</div>
</div> </div>
``` ```
*/ */
@import '../../cdb-variables/colors'; @import '../../cdb-variables/colors';
.CDB-Shape {
width: 16px;
height: 16px;
text-align: center;
&:hover {
cursor: pointer;
}
}
.CDB-Shape-magnify { .CDB-Shape-magnify {
display: block;
position: relative; position: relative;
width: 32px; height: 100%;
height: 32px;
&::before { &::before {
display: block; display: block;
position: absolute; position: absolute;
top: 10px; top: 0;
left: 10px; left: 0;
width: 7px; width: 11px;
height: 7px; height: 11px;
border: 1px solid $cMainDark; border: 1px solid $cMainDark;
border-radius: 50%; border-radius: 50%;
content: ''; content: '';
@ -38,17 +75,14 @@ Description
&::after { &::after {
display: block; display: block;
position: absolute; position: absolute;
top: 17px; right: 2px;
left: 19px; bottom: -1px;
width: 1px; width: 1px;
height: 6px; height: 7px;
transform: rotate(314deg); transform: rotate(314deg);
background: $cMainDark; background: $cMainDark;
content: ''; content: '';
} }
&:hover {
cursor: pointer;
}
} }
.CDB-Shape-magnify.is-blue { .CDB-Shape-magnify.is-blue {
@ -68,3 +102,23 @@ Description
background: $cWhite; background: $cWhite;
} }
} }
.CDB-Shape-magnify.is-small {
&::before {
top: 3px;
left: 3px;
width: 6px;
height: 6px;
}
&::after {
display: block;
position: absolute;
right: 4px;
bottom: 2px;
width: 1px;
height: 5px;
transform: rotate(314deg);
content: '';
}
}

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

@ -4,25 +4,64 @@
Description Description
``` ```
<h2>16px</h2>
<div style="padding: 20px;"> <div style="padding: 20px;">
<div class="CDB-Shape-threePoints"> <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-threePointsItem"></div> <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>
</div> </div>
</div> </div>
<div style="padding: 20px;"> <div style="padding: 20px;">
<div class="CDB-Shape-threePoints is-blue"> <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-threePointsItem"></div> <div class="CDB-Shape-threePoints is-blue">
<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>
</div> </div>
</div> </div>
<div style="background: #2E3C43; padding: 20px;"> <div style="padding: 20px; background: #2E3C43;">
<div class="CDB-Shape-threePoints is-white"> <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
<div class="CDB-Shape-threePointsItem"></div> <div class="CDB-Shape-threePoints is-white">
<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>
</div>
</div>
<br>
<br>
<br>
<br>
<h2>12px</h2>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-threePoints is-small">
<div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div>
</div>
</div>
</div>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<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>
</div>
</div>
<div style="padding: 20px; background: #2E3C43;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
<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>
</div> </div>
</div> </div>
``` ```
@ -30,24 +69,38 @@ Description
@import '../../cdb-variables/colors'; @import '../../cdb-variables/colors';
.CDB-Shape-threePoints { .CDB-Shape {
display: inline-block; width: 16px;
position: relative; height: 16px;
width: 3px; text-align: center;
height: 15px;
padding: 0 12;
&:hover { &:hover {
cursor: pointer; cursor: pointer;
} }
} }
.CDB-Shape-threePoints {
display: inline-block;
height: 100%;
}
.CDB-Shape-threePointsItem { .CDB-Shape-threePointsItem {
width: 3px; width: 2px;
height: 3px; height: 2px;
margin-bottom: 3px; margin-bottom: 5px;
border-radius: 50%;
background: $cMainDark; background: $cMainDark;
&:last-child {
margin-bottom: 0;
}
}
.CDB-Shape-threePoints.is-small {
padding-top: 2px;
.CDB-Shape-threePointsItem {
width: 2px;
height: 2px;
margin-bottom: 3px;
}
} }
.CDB-Shape-threePoints.is-blue { .CDB-Shape-threePoints.is-blue {