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

Migrate from SASS to PostCSS

Browse Source
This commit is contained in:
rubenmoya
2017-12-22 17:18:00 +01:00
parent 13118b78db
commit ac383dade7
57 changed files with 924 additions and 822 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/shapes/_dataset.css
+143
View File
@@ -0,0 +1,143 @@
/* SG
# Shapes/Dataset
Description
```
<h2>16px</h2>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<ul class="CDB-Shape-Dataset">
<li class="CDB-Shape-DatasetItem"></li>
<li class="CDB-Shape-DatasetItem"></li>
</ul>
</div>
</div>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<ul class="CDB-Shape-Dataset is-blue">
<li class="CDB-Shape-DatasetItem"></li>
<li class="CDB-Shape-DatasetItem"></li>
</ul>
</div>
</div>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<ul class="CDB-Shape-Dataset is-grey">
<li class="CDB-Shape-DatasetItem"></li>
<li class="CDB-Shape-DatasetItem"></li>
</ul>
</div>
</div>
<div style="padding: 20px; background: #2E3C43;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<ul class="CDB-Shape-Dataset is-white">
<li class="CDB-Shape-DatasetItem"></li>
<li class="CDB-Shape-DatasetItem"></li>
</ul>
</div>
</div>
<br>
<br>
<br>
<br>
<h2>12px</h2>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<ul class="CDB-Shape-Dataset is-small">
<li class="CDB-Shape-DatasetItem"></li>
<li class="CDB-Shape-DatasetItem"></li>
</ul>
</div>
</div>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<ul class="CDB-Shape-Dataset is-small is-blue">
<li class="CDB-Shape-DatasetItem"></li>
<li class="CDB-Shape-DatasetItem"></li>
</ul>
</div>
</div>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<ul class="CDB-Shape-Dataset is-small is-grey">
<li class="CDB-Shape-DatasetItem"></li>
<li class="CDB-Shape-DatasetItem"></li>
</ul>
</div>
</div>
<div style="padding: 20px; background: #2E3C43;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<ul class="CDB-Shape-Dataset is-small is-white">
<li class="CDB-Shape-DatasetItem"></li>
<li class="CDB-Shape-DatasetItem"></li>
</ul>
</div>
</div>
```
*/
.CDB-Shape-Dataset {
padding-top: 1px;
&.is-small {
padding-top: 0;
}
}
.CDB-Shape-DatasetItem {
display: inline-block;
width: 9px;
height: 9px;
margin-left: -10px;
border: 1px solid $cMainBg;
border-radius: 50%;
background: white;
&:first-child {
position: relative;
margin-left: 0;
box-shadow: 3px 0 0 white;
z-index: 1;
}
}
.CDB-Shape-Dataset.is-small {
.CDB-Shape-DatasetItem {
width: 6px;
height: 6px;
margin-left: -7px;
&:first-child {
margin-left: 0;
box-shadow: 2px 0 0 white;
}
}
}
.CDB-Shape-Dataset.is-blue {
.CDB-Shape-DatasetItem {
border: 1px solid var(--color-blue);
}
}
.CDB-Shape-Dataset.is-grey {
.CDB-Shape-DatasetItem {
border: 1px solid var(--color-line-hover);
}
}
.CDB-Shape-Dataset.is-white {
.CDB-Shape-DatasetItem {
border: 1px solid var(--color-line-hover);
background: $cMainBg;
&:first-child {
box-shadow: 3px 0 $cMainBg;
}
}
}
.CDB-Shape-Dataset.is-white.is-small {
.CDB-Shape-DatasetItem:first-child {
box-shadow: 2px 0 $cMainBg;
}
}