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

Renaming all files to _whatever in order to avoid be compiled in other projects, only the entry one, thanks to @nobuti

Browse Source
This commit is contained in:
Javier Álvarez Medina
2017-05-24 12:50:42 +02:00
parent 007b851962
commit a41763c4f2
46 changed files with 1 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/scss/cdb-components/shapes/_magnify.scss
+113
View File
@@ -0,0 +1,113 @@
/* SG
# Shapes/Magnify
Description
```
<h2>16px</h2>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
<div class="CDB-Shape-magnify"></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"></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"></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>
```
*/
.CDB-Shape-magnify {
display: block;
position: relative;
height: 100%;
&::before {
display: block;
position: absolute;
top: 0;
left: 0;
width: 11px;
height: 11px;
border: 1px solid $cMainBg;
border-radius: 50%;
content: '';
}
&::after {
display: block;
position: absolute;
right: 2px;
bottom: -1px;
width: 1px;
height: 7px;
transform: rotate(314deg);
background: $cMainBg;
content: '';
}
}
.CDB-Shape-magnify.is-blue {
&::before {
border: 1px solid $cBlue;
}
&::after {
background: $cBlue;
}
}
.CDB-Shape-magnify.is-white {
&::before {
border: 1px solid $cWhite;
}
&::after {
background: $cWhite;
}
}
.CDB-Shape-magnify.is-small {
&::before {
top: 3px;
left: 4px;
width: 5px;
height: 5px;
}
&::after {
display: block;
position: absolute;
right: 4px;
bottom: 3px;
width: 1px;
height: 5px;
transform: rotate(314deg);
content: '';
}
}