Merge pull request #126 from CartoDB/clean-colorBar
remove colorBar from cartoassets
This commit is contained in:
commit
46ce854ed9
@ -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;
|
||||
}
|
Loading…
Reference in New Issue
Block a user