Merge pull request #126 from CartoDB/clean-colorBar

remove colorBar from cartoassets
This commit is contained in:
piensaenpixel 2016-06-08 12:11:51 +02:00
commit 46ce854ed9

View File

@ -1,116 +0,0 @@
// Color input styles
// ----------------------------------------------
/* SG
# Forms/Color bar
```
<ul class="CDB-ColorBarContainer">
<li class="CDB-ColorBar CDB-ColorBar--spaceMedium" style="background-color: #9DE0AD;"></li>
<li class="CDB-ColorBar CDB-ColorBar--spaceMedium" style="background-color: #50E3C2;"></li>
<li class="CDB-ColorBar CDB-ColorBar--spaceMedium" style="background-color: #FFFFC0;"></li>
<li class="CDB-ColorBar CDB-ColorBar--spaceMedium" style="background-color: #7ED321;"></li>
<li class="CDB-ColorBar CDB-ColorBar--spaceMedium" style="background-color: #BD10E0;"></li>
<li class="CDB-ColorBar CDB-ColorBar--spaceMedium" style="background-color: #F15743;"></li>
</ul>
<br/>
<ul class="CDB-ColorBarContainer">
<li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #9DE0AD;"></li>
<li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #50E3C2;"></li>
<li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #FFFFC0;"></li>
<li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #7ED321;"></li>
<li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #BD10E0;"></li>
<li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #F15743;"></li>
</ul>
<br/>
<ul class="CDB-ColorBarContainer">
<li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #9DE0AD;"></li>
<li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #50E3C2;"></li>
<li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #FFFFC0;"></li>
<li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #7ED321;"></li>
<li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #BD10E0;"></li>
<li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #F15743;"></li>
</ul>
<br/>
<ul class="CDB-ColorBarContainer">
<li class="CDB-ColorBar" style="background-color: #9DE0AD;"></li>
</ul>
<br/>
<ul class="CDB-ColorBarContainer">
<li class="CDB-ColorBar CDB-ColorBar-gradient" style="background: linear-gradient(90deg, #FFFECA, #9FDAB3, #36B6C5, #207EBA, #203196);"></li>
</ul>
```
*/
@import '../../cdb-variables/sizes';
@import '../../cdb-utilities/mixins';
.CDB-ColorBarContainer {
@include display-flex();
@include flex-direction(row);
width: 100%;
}
.CDB-ColorBar {
position: relative;
width: 100%;
height: $baseSize - 2;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: $baseSize - 2;
box-sizing: border-box;
&:last-child {
margin-right: 0;
}
}
.CDB-ColorBar-gradient {
border: 0;
&::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: $baseSize - 2;
content: '';
}
}
.CDB-ColorBar.CDB-ColorBar--spaceMedium {
margin-right: $baseSize / 2;
&:last-child {
margin-right: 0;
}
}
.CDB-ColorBar.CDB-ColorBar--spaceless {
border-width: 1px 0;
border-radius: 0;
}
.CDB-ColorBar.CDB-ColorBar--spaceless:first-child {
border-width: 1px 0 1px 1px;
border-radius: $baseSize - 2 0 0 $baseSize - 2;
}
.CDB-ColorBar.CDB-ColorBar--spaceless:last-child {
border-width: 1px 1px 1px 0;
border-radius: 0 $baseSize - 2 $baseSize - 2 0;
}
.CDB-ColorBar.CDB-ColorBar--spaceSmall {
margin-right: 2px;
border-radius: 2px;
}
.CDB-ColorBar.CDB-ColorBar--spaceSmall:first-child {
border-radius: $baseSize - 2 3px 3px $baseSize - 2;
}
.CDB-ColorBar.CDB-ColorBar--spaceSmall:last-child {
margin-right: 0;
border-radius: 3px $baseSize - 2 $baseSize - 2 3px;
}