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

add missing shapes

Browse Source
This commit is contained in:
Emilio García 2016-01-25 15:18:47 +01:00
parent 31c75b057f
commit aeb83952d2
1 changed files with 239 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

241
src/scss/cdb-components/shapes.scss
View File

@ -7,9 +7,246 @@
You may resize and change the colors of the icons with the `glyph-`-classes. Available sizes and colors listed: You may resize and change the colors of the icons with the `glyph-`-classes. Available sizes and colors listed:
``` ```
<div class="CDB-Shape-tick is-black"></div> <button class="CDB-Shape-dot CDB-Widget-dot--navigation is-selected" data-page="3"></button>
<div class="CDB-Shape-tick is-blue"></div> <button class="CDB-Shape-dot CDB-Widget-dot--navigation" data-page="3"></button>
``` ```
*/ */
@import '../cdb-utilities/mixins'; @import '../cdb-utilities/mixins';
.CDB-Shape-dot {
display: inline-block;
width: 8px;
min-width: 8px;
height: 8px;
border-radius: 8px;
}
/* SG
# Shapes/threePoints
Description
```
<div></div>
```
*/
.CDB-Shape-threePoints {
display: inline-block;
position: relative;
width: 3px;
height: 16px;
margin-right: -7px;
margin-left: 6px;
padding: 0 7px 0 10px;
text-align: center;
vertical-align: middle;
&:after,
&:before {
display: inline-block;
position: absolute;
width: 3px;
height: 3px;
border-radius: 50%;
content: '';
z-index: 1;
}
&:before {
top: 0;
right: 7px;
}
&:after {
right: 7px;
bottom: 1px;
}
&:hover {
cursor: pointer;
}
}
.CDB-Shape-threePointsItem {
display: block;
position: absolute;
top: 6px;
left: 7px;
width: 3px;
height: 3px;
border-radius: 50%;
}
/* SG
# Shapes/lens
Description
```
<div></div>
```
*/
.CDB-Shape-lens {
display: inline-block;
position: relative;
width: 16px;
height: 16px;
&:after,
&:before {
position: absolute;
content: '';
}
&:after {
top: 0;
left: 0;
width: 8px;
height: 8px;
border: 1px solid transparent;
border-radius: 10px;
}
&:before {
@include css3-prefix(transform, rotate(45deg));
right: 3px;
bottom: 5px;
width: 6px;
height: 1px;
}
&:hover {
cursor: pointer;
}
}
/* SG
# Shapes/hamburguer
Description
```
<div></div>
```
*/
.CDB-Shape-hamburguer {
display: inline-block;
position: relative;
width: 16px;
height: 2px;
border: 0;
background: #FFF;
vertical-align: middle;
&:before,
&:after {
display: block;
position: absolute;
width: 16px;
height: 2px;
background: #FFF;
content: '';
}
&:before {
top: -6px;
}
&:after {
bottom: -6px;
}
}
/* SG
# Shapes/magnify
Description
```
<div></div>
```
*/
.CDB-Shape-magnify {
display: block;
position: relative;
width: 32px;
height: 32px;
&:before {
display: block;
position: absolute;
top: 10px;
left: 10px;
width: 7px;
height: 7px;
border: 1px solid #636D72;
border-radius: 50%;
content: '';
}
&:after {
display: block;
position: absolute;
top: 17px;
left: 19px;
width: 1px;
height: 6px;
transform: rotate(314deg);
background: #636D72;
content: '';
}
}
/* SG
# Shapes/arrow
Description
```
<div></div>
```
*/
.CDB-Shape-Arrow {
display: block;
position: absolute;
width: 1px;
height: 8px;
background: #32A8E6;
&:before {
display: block;
position: absolute;
top: 2px;
left: 0;
width: 5px;
height: 1px;
transform: rotate(45deg);
background: #32A8E6;
content: '';
}
&:after {
display: block;
position: absolute;
top: 2px;
left: -4px;
width: 5px;
height: 1px;
transform: rotate(-45deg);
background: #32A8E6;
content: '';
}
}
.CDB-Shape-Arrow--top {
top: 6px;
right: 9px;
transform: rotate(45deg);
}
.CDB-Shape-Arrow--bottom {
top: 13px;
left: 46px;
transform: rotate(-135deg);
}