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

Option input component: ninja fixes

Browse Source
This commit is contained in:
María Checa 2016-02-22 18:09:52 +01:00
parent e9bdd7017c
commit 475376be43
2 changed files with 30 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,21 +6,21 @@
``` ```
<ul class="CDB-ColorBarContainer u-bSpace--xl"> <ul class="CDB-ColorBarContainer u-bSpace--xl">
<li class="CDB-ColorBar u-rSpace" style="background-color: #9DE0AD;"></li> <li class="CDB-ColorBar CDB-ColorBar--sMargin" style="background-color: #9DE0AD;"></li>
<li class="CDB-ColorBar u-rSpace" style="background-color: #50E3C2;"></li> <li class="CDB-ColorBar CDB-ColorBar--sMargin" style="background-color: #50E3C2;"></li>
<li class="CDB-ColorBar u-rSpace" style="background-color: #FFFFC0;"></li> <li class="CDB-ColorBar CDB-ColorBar--sMargin" style="background-color: #FFFFC0;"></li>
<li class="CDB-ColorBar u-rSpace" style="background-color: #7ED321;"></li> <li class="CDB-ColorBar CDB-ColorBar--sMargin" style="background-color: #7ED321;"></li>
<li class="CDB-ColorBar u-rSpace" style="background-color: #BD10E0;"></li> <li class="CDB-ColorBar CDB-ColorBar--sMargin" style="background-color: #BD10E0;"></li>
<li class="CDB-ColorBar u-rSpace" style="background-color: #F15743;"></li> <li class="CDB-ColorBar CDB-ColorBar--sMargin" style="background-color: #F15743;"></li>
</ul> </ul>
<ul class="CDB-ColorBarContainer u-bSpace--xl"> <ul class="CDB-ColorBarContainer u-bSpace--xl">
<li class="CDB-ColorBar CDB-ColorBar--uBorder u-rSpace--s" style="background-color: #9DE0AD;"></li> <li class="CDB-ColorBar CDB-ColorBar--sRadius" style="background-color: #9DE0AD;"></li>
<li class="CDB-ColorBar CDB-ColorBar--uBorder u-rSpace--s" style="background-color: #50E3C2;"></li> <li class="CDB-ColorBar CDB-ColorBar--sRadius" style="background-color: #50E3C2;"></li>
<li class="CDB-ColorBar CDB-ColorBar--uBorder u-rSpace--s" style="background-color: #FFFFC0;"></li> <li class="CDB-ColorBar CDB-ColorBar--sRadius" style="background-color: #FFFFC0;"></li>
<li class="CDB-ColorBar CDB-ColorBar--uBorder u-rSpace--s" style="background-color: #7ED321;"></li> <li class="CDB-ColorBar CDB-ColorBar--sRadius" style="background-color: #7ED321;"></li>
<li class="CDB-ColorBar CDB-ColorBar--uBorder u-rSpace--s" style="background-color: #BD10E0;"></li> <li class="CDB-ColorBar CDB-ColorBar--sRadius" style="background-color: #BD10E0;"></li>
<li class="CDB-ColorBar CDB-ColorBar--uBorder u-rSpace--s" style="background-color: #F15743;"></li> <li class="CDB-ColorBar CDB-ColorBar--sRadius" style="background-color: #F15743;"></li>
</ul> </ul>
<ul class="CDB-ColorBarContainer u-bSpace--xl"> <ul class="CDB-ColorBarContainer u-bSpace--xl">
@ -70,6 +70,13 @@
margin-right: 0; margin-right: 0;
} }
} }
.CDB-ColorBar.CDB-ColorBar--sMargin {
margin-right: 4px;
&:last-child {
margin-right: 0;
}
}
.CDB-ColorBar.CDB-ColorBar--compacted { .CDB-ColorBar.CDB-ColorBar--compacted {
border-radius: 0; border-radius: 0;
@ -92,7 +99,8 @@
} }
} }
} }
.CDB-ColorBar.CDB-ColorBar--uBorder { .CDB-ColorBar.CDB-ColorBar--sRadius {
margin-right: 2px;
border-radius: 2px; border-radius: 2px;
&::after { &::after {
@ -105,6 +113,7 @@
} }
} }
&:last-child { &:last-child {
margin-right: 0;
border-radius: 2px 6px 6px 2px; border-radius: 2px 6px 6px 2px;
&::after { &::after {
border-radius: 2px 6px 6px 2px; border-radius: 2px 6px 6px 2px;

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

@ -5,23 +5,23 @@
# Forms/Option input # Forms/Option input
``` ```
<button class="CDB-OptionInput is-active u-rSpace--m CDB-Text"> <div class="CDB-OptionInput is-active u-rSpace--m CDB-Text u-iBlock">
<ul class="CDB-OptionInput-container"> <ul class="CDB-OptionInput-container">
<li class="CDB-OptionInput-option is-active"> <li class="CDB-OptionInput-option is-active">
<a class="CDB-OptionInput-optionContent">8px</a> <button tupe="button" class="CDB-OptionInput-optionContent">8px</button>
</li> </li>
<li class="CDB-OptionInput-option"> <li class="CDB-OptionInput-option">
<a class="CDB-OptionInput-optionContent">solid</a> <button tupe="button" class="CDB-OptionInput-optionContent">solid</button>
</li> </li>
<li class="CDB-OptionInput-option"> <li class="CDB-OptionInput-option">
<a class="CDB-ColorBarContainer CDB-OptionInput-optionContent"> <button tupe="button" class="CDB-ColorBarContainer CDB-OptionInput-optionContent">
<span class="CDB-ColorBar" style="background-color: #207EBA;"></span> <span class="CDB-ColorBar" style="background-color: #207EBA;"></span>
</a> </button>
</li> </li>
</ul> </ul>
</button> </div>
<button class="CDB-OptionInput is-active u-rSpace--m CDB-Text"> <button class="CDB-OptionInput is-active u-rSpace--m CDB-Text">
<ul class="CDB-OptionInput-container"> <ul class="CDB-OptionInput-container">
@ -134,6 +134,8 @@
@include align-items(center); @include align-items(center);
height: 100%; height: 100%;
color: $cMainBg; color: $cMainBg;
box-sizing: content-box;
white-space: nowrap;
&:hover { &:hover {
text-decoration: none; text-decoration: none;