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/_toogle-arrow.scss
+145
View File
@@ -0,0 +1,145 @@
/* SG
# Shapes/Toogle Arrows
Description
```
<h2>16px</h2>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-ArrowToogle"></div>
</div>
</div>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-ArrowToogle 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-ArrowToogle 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-ArrowToogle is-small"></div>
</div>
</div>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-ArrowToogle 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-ArrowToogle is-white is-small"></div>
</div>
</div>
<br>
<br>
<br>
<br>
<h2>16px</h2>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-ArrowToogle is-down"></div>
</div>
</div>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-ArrowToogle is-blue is-down"></div>
</div>
</div>
<div style="padding: 20px; background: #2E3C43;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
<div class="CDB-ArrowToogle is-white is-down"></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-ArrowToogle is-small is-down"></div>
</div>
</div>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-ArrowToogle is-blue is-small is-down"></div>
</div>
</div>
<div style="padding: 20px; background: #2E3C43;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
<div class="CDB-ArrowToogle is-white is-small is-down"></div>
</div>
</div>
```
*/
.CDB-ArrowToogle {
position: relative;
height: 100%;
&::before {
display: block;
position: absolute;
top: 8px;
left: 0;
width: 10px;
height: 1px;
transform: rotate(-45deg);
background: $cMainBg;
content: '';
}
&::after {
display: block;
position: absolute;
top: 8px;
right: -1px;
width: 10px;
height: 1px;
transform: rotate(45deg);
background: $cMainBg;
content: '';
}
}
.CDB-ArrowToogle.is-down {
transform: rotate(180deg);
}
.CDB-ArrowToogle.is-small {
&::before {
left: 2px;
width: 8px;
}
&::after {
right: 1px;
width: 8px;
}
}
.CDB-ArrowToogle.is-blue {
&::before {
background: $cBlue;
}
&::after {
background: $cBlue;
}
}
.CDB-ArrowToogle.is-white {
&::before {
background: $cWhite;
}
&::after {
background: $cWhite;
}
}