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

Color bar component: improvements and gradient border fix

Browse Source
This commit is contained in:
María Checa 2016-02-18 14:34:02 +01:00
parent 55fae253d2
commit 444cb84331
2 changed files with 55 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,99 +6,107 @@
``` ```
<div class="CDB-ColorBarContainer u-bSpace--xl"> <div class="CDB-ColorBarContainer u-bSpace--xl">
<span class="CDB-ColorBar CDB-ColorBar--med u-rSpace" style="background-color: #9DE0AD;"></span> <span class="CDB-ColorBar u-rSpace" style="background-color: #9DE0AD;"></span>
<span class="CDB-ColorBar CDB-ColorBar--med u-rSpace" style="background-color: #50E3C2;"></span> <span class="CDB-ColorBar u-rSpace" style="background-color: #50E3C2;"></span>
<span class="CDB-ColorBar CDB-ColorBar--med u-rSpace" style="background-color: #FFFFC0;"></span> <span class="CDB-ColorBar u-rSpace" style="background-color: #FFFFC0;"></span>
<span class="CDB-ColorBar CDB-ColorBar--med u-rSpace" style="background-color: #7ED321;"></span> <span class="CDB-ColorBar u-rSpace" style="background-color: #7ED321;"></span>
<span class="CDB-ColorBar CDB-ColorBar--med u-rSpace" style="background-color: #BD10E0;"></span> <span class="CDB-ColorBar u-rSpace" style="background-color: #BD10E0;"></span>
<span class="CDB-ColorBar CDB-ColorBar--med u-rSpace" style="background-color: #F15743;"></span> <span class="CDB-ColorBar 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--med CDB-ColorBar--uBorder u-rSpace--s" style="background-color: #9DE0AD;"></span> <span class="CDB-ColorBar CDB-ColorBar--uBorder u-rSpace--s" style="background-color: #9DE0AD;"></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--uBorder u-rSpace--s" style="background-color: #50E3C2;"></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--uBorder u-rSpace--s" style="background-color: #FFFFC0;"></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--uBorder u-rSpace--s" style="background-color: #7ED321;"></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--uBorder u-rSpace--s" style="background-color: #BD10E0;"></span>
<span class="CDB-ColorBar CDB-ColorBar--med CDB-ColorBar--uBorder u-rSpace--s" style="background-color: #F15743;"></span> <span class="CDB-ColorBar CDB-ColorBar--uBorder u-rSpace--s" 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--med CDB-ColorBar--compacted" style="background-color: #9DE0AD;"></span> <span class="CDB-ColorBar 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--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--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--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--compacted" style="background-color: #BD10E0;"></span>
<span class="CDB-ColorBar CDB-ColorBar--med CDB-ColorBar--compacted" style="background-color: #F15743;"></span> <span class="CDB-ColorBar CDB-ColorBar--compacted" 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 u-rSpace" style="background-color: #9DE0AD;"></span> <span class="CDB-ColorBar" 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>
<div class="CDB-ColorBarContainer u-bSpace--xl"> <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> <span class="CDB-ColorBar" 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>
``` ```
*/ */
@import '../../cdb-variables/sizes';
@import '../../cdb-variables/colors';
@import '../../cdb-utilities/mixins'; @import '../../cdb-utilities/mixins';
.CDB-ColorBarContainer { .CDB-ColorBarContainer {
@include display-flex(); @include display-flex();
@include flex-direction(row); @include flex-direction(row);
max-width: 215px;
} }
.CDB-ColorBar { .CDB-ColorBar {
position: relative;
width: 100%; width: 100%;
height: $baseSize / 2; height: 6px;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 6px; border-radius: 6px;
&::after {
content:"";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 6px;
}
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;
} }
} }
.CDB-ColorBar.CDB-ColorBar--small {
width: $baseSize * 2;
}
.CDB-ColorBar.CDB-ColorBar--med {
width: 29px;
}
.CDB-ColorBar.CDB-ColorBar--long {
width: $baseSize * 12;
}
.CDB-ColorBar.CDB-ColorBar--compacted { .CDB-ColorBar.CDB-ColorBar--compacted {
border-right: 0;
border-left: 0;
border-radius: 0; border-radius: 0;
&::after {
border-width: 1px 0;
border-radius: 0;
}
&:first-child { &:first-child {
border-left: 1px solid rgba(0, 0, 0, 0.2); border-radius: 6px 0 0 6px;
&::after {
border-width: 1px 0 1px 1px;
border-radius: 6px 0 0 6px; border-radius: 6px 0 0 6px;
} }
}
&:last-child { &:last-child {
border-right: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 0 6px 6px 0; border-radius: 0 6px 6px 0;
&::after {
border-width: 1px 1px 1px 0;
border-radius: 0 6px 6px 0;
}
} }
} }
.CDB-ColorBar.CDB-ColorBar--uBorder { .CDB-ColorBar.CDB-ColorBar--uBorder {
border-radius: 2px; border-radius: 2px;
&::after {
border-radius: 2px;
}
&:first-child { &:first-child {
border-radius: 6px 2px 2px 6px; border-radius: 6px 2px 2px 6px;
&::after {
border-radius: 6px 2px 2px 6px;
}
} }
&:last-child { &:last-child {
border-radius: 2px 6px 6px 2px; border-radius: 2px 6px 6px 2px;
&:after {
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" style="background-color: #9DE0AD;"></span> <span class="CDB-ColorBar" style="background-color: #207EBA;"></span>
</div> </div>
</div> </div>
</fieldset> </fieldset>