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

Color bar component: several improvements

Browse Source
This commit is contained in:
María Checa 2016-02-18 12:14:54 +01:00
parent 351b645ac8
commit 55fae253d2
2 changed files with 65 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
src/scss/cdb-components/forms/color_bar.scss
View File

@ -5,26 +5,48 @@
# Forms/Color bar # Forms/Color bar
``` ```
<span class="CDB-ColorBar CDB-ColorBar--mBorderRadius u-rSpace u-iBlock u-bSpace--xl" style="background-color: #9DE0AD;"></span>
<span class="CDB-ColorBar CDB-ColorBar--mBorderRadius u-rSpace u-iBlock u-bSpace--xl" style="background-color: #50E3C2;"></span>
<span class="CDB-ColorBar CDB-ColorBar--mBorderRadius u-rSpace u-iBlock u-bSpace--xl" style="background-color: #FFFFC0;"></span>
<div class="CDB-ColorBarContainer u-bSpace--xl"> <div class="CDB-ColorBarContainer u-bSpace--xl">
<span class="CDB-ColorBar CDB-ColorBar--med CDB-ColorBar--msBorderRadius u-rSpace--s" style="background-color: #9DE0AD;"></span> <span class="CDB-ColorBar CDB-ColorBar--med u-rSpace" style="background-color: #9DE0AD;"></span>
<span class="CDB-ColorBar CDB-ColorBar--med CDB-ColorBar--sBorderRadius u-rSpace--s" style="background-color: #50E3C2;"></span> <span class="CDB-ColorBar CDB-ColorBar--med u-rSpace" style="background-color: #50E3C2;"></span>
<span class="CDB-ColorBar CDB-ColorBar--med CDB-ColorBar--sBorderRadius u-rSpace--s" style="background-color: #FFFFC0;"></span> <span class="CDB-ColorBar CDB-ColorBar--med u-rSpace" style="background-color: #FFFFC0;"></span>
<span class="CDB-ColorBar CDB-ColorBar--med CDB-ColorBar--sBorderRadius u-rSpace--s" style="background-color: #7ED321;"></span> <span class="CDB-ColorBar CDB-ColorBar--med u-rSpace" style="background-color: #7ED321;"></span>
<span class="CDB-ColorBar CDB-ColorBar--med CDB-ColorBar--sBorderRadius u-rSpace--s" style="background-color: #BD10E0;"></span> <span class="CDB-ColorBar CDB-ColorBar--med u-rSpace" style="background-color: #BD10E0;"></span>
<span class="CDB-ColorBar CDB-ColorBar--med CDB-ColorBar--smBorderRadius u-rSpace--s" style="background-color: #F15743;"></span> <span class="CDB-ColorBar CDB-ColorBar--med u-rSpace" style="background-color: #F15743;"></span>
</div> </div>
<div class="CDB-ColorBarContainer u-bSpace--xl"> <div class="CDB-ColorBarContainer u-bSpace--xl">
<span class="CDB-ColorBar CDB-ColorBar--small CDB-ColorBar--mBorderRadius u-rSpace" style="background-color: #9DE0AD;"></span> <span class="CDB-ColorBar CDB-ColorBar--med CDB-ColorBar--uBorder u-rSpace--s" style="background-color: #9DE0AD;"></span>
<span class="CDB-ColorBar CDB-ColorBar--small CDB-ColorBar--mBorderRadius u-rSpace" style="background-color: #50E3C2;"></span> <span class="CDB-ColorBar CDB-ColorBar--med CDB-ColorBar--uBorder u-rSpace--s" style="background-color: #50E3C2;"></span>
<span class="CDB-ColorBar CDB-ColorBar--small CDB-ColorBar--mBorderRadius u-rSpace" style="background-color: #FFFFC0;"></span> <span class="CDB-ColorBar CDB-ColorBar--med CDB-ColorBar--uBorder u-rSpace--s" style="background-color: #FFFFC0;"></span>
<span class="CDB-ColorBar CDB-ColorBar--small CDB-ColorBar--mBorderRadius u-rSpace" style="background-color: #7ED321;"></span> <span class="CDB-ColorBar CDB-ColorBar--med CDB-ColorBar--uBorder u-rSpace--s" style="background-color: #7ED321;"></span>
<span class="CDB-ColorBar CDB-ColorBar--small CDB-ColorBar--mBorderRadius u-rSpace" style="background-color: #BD10E0;"></span> <span class="CDB-ColorBar CDB-ColorBar--med CDB-ColorBar--uBorder u-rSpace--s" style="background-color: #BD10E0;"></span>
<span class="CDB-ColorBar CDB-ColorBar--small CDB-ColorBar--mBorderRadius u-rSpace" style="background-color: #F15743;"></span> <span class="CDB-ColorBar CDB-ColorBar--med CDB-ColorBar--uBorder u-rSpace--s" style="background-color: #F15743;"></span>
</div>
<div class="CDB-ColorBarContainer u-bSpace--xl">
<span class="CDB-ColorBar CDB-ColorBar--med CDB-ColorBar--compacted" style="background-color: #9DE0AD;"></span>
<span class="CDB-ColorBar CDB-ColorBar--med CDB-ColorBar--compacted" style="background-color: #50E3C2;"></span>
<span class="CDB-ColorBar CDB-ColorBar--med CDB-ColorBar--compacted" style="background-color: #FFFFC0;"></span>
<span class="CDB-ColorBar CDB-ColorBar--med CDB-ColorBar--compacted" style="background-color: #7ED321;"></span>
<span class="CDB-ColorBar CDB-ColorBar--med CDB-ColorBar--compacted" style="background-color: #BD10E0;"></span>
<span class="CDB-ColorBar CDB-ColorBar--med CDB-ColorBar--compacted" style="background-color: #F15743;"></span>
</div>
<div class="CDB-ColorBarContainer u-bSpace--xl">
<span class="CDB-ColorBar CDB-ColorBar--small u-rSpace" style="background-color: #9DE0AD;"></span>
<span class="CDB-ColorBar CDB-ColorBar--small u-rSpace" style="background-color: #50E3C2;"></span>
<span class="CDB-ColorBar CDB-ColorBar--small u-rSpace" style="background-color: #FFFFC0;"></span>
<span class="CDB-ColorBar CDB-ColorBar--small u-rSpace" style="background-color: #7ED321;"></span>
<span class="CDB-ColorBar CDB-ColorBar--small u-rSpace" style="background-color: #BD10E0;"></span>
<span class="CDB-ColorBar CDB-ColorBar--small u-rSpace" style="background-color: #F15743;"></span>
</div>
<div class="CDB-ColorBarContainer u-bSpace--xl">
<span class="CDB-ColorBar CDB-ColorBar--long" style="background: linear-gradient(90deg, #FFFECA, #9FDAB3, #36B6C5, #207EBA, #203196);"></span>
</div>
<div class="CDB-ColorBarContainer u-bSpace--xl">
<span class="CDB-ColorBar CDB-ColorBar--med" style="background-color: #9DE0AD;"></span>
</div> </div>
``` ```
*/ */
@ -41,6 +63,7 @@
width: 100%; width: 100%;
height: $baseSize / 2; height: $baseSize / 2;
border: 1px solid rgba(0, 0, 0, 0.2); border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 6px;
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;
@ -52,16 +75,30 @@
.CDB-ColorBar.CDB-ColorBar--med { .CDB-ColorBar.CDB-ColorBar--med {
width: 29px; width: 29px;
} }
.CDB-ColorBar.CDB-ColorBar--sBorderRadius { .CDB-ColorBar.CDB-ColorBar--long {
border-radius: 2px; width: $baseSize * 12;
}
.CDB-ColorBar.CDB-ColorBar--mBorderRadius {
border-radius: 6px;
}
.CDB-ColorBar.CDB-ColorBar--msBorderRadius {
border-radius: 6px 2px 2px 6px;
}
.CDB-ColorBar.CDB-ColorBar--smBorderRadius {
border-radius: 2px 6px 6px 2px;
} }
.CDB-ColorBar.CDB-ColorBar--compacted {
border-right: 0;
border-left: 0;
border-radius: 0;
&:first-child {
border-left: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 6px 0 0 6px;
}
&:last-child {
border-right: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 0 6px 6px 0;
}
}
.CDB-ColorBar.CDB-ColorBar--uBorder {
border-radius: 2px;
&:first-child {
border-radius: 6px 2px 2px 6px;
}
&:last-child {
border-radius: 2px 6px 6px 2px;
}
}

2
src/scss/cdb-components/forms/option_input.scss
View File

@ -9,7 +9,7 @@
<label class="CDB-Legend u-iBlock CDB-Text is-semibold CDB-Size-small u-rSpace--m">OPTION</label> <label class="CDB-Legend u-iBlock CDB-Text is-semibold CDB-Size-small u-rSpace--m">OPTION</label>
<div class="u-iBlock"> <div class="u-iBlock">
<div class="CDB-OptionInput"> <div class="CDB-OptionInput">
<span class="CDB-ColorBar CDB-ColorBar--mBorderRadius" style="background-color: #9DE0AD;"></span> <span class="CDB-ColorBar" style="background-color: #9DE0AD;"></span>
</div> </div>
</div> </div>
</fieldset> </fieldset>