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

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

@ -5,23 +5,23 @@
# 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">
<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 class="CDB-OptionInput-option">
<a class="CDB-OptionInput-optionContent">solid</a>
<button tupe="button" class="CDB-OptionInput-optionContent">solid</button>
</li>
<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>
</a>
</button>
</li>
</ul>
</button>
</div>
<button class="CDB-OptionInput is-active u-rSpace--m CDB-Text">
<ul class="CDB-OptionInput-container">
@ -134,6 +134,8 @@
@include align-items(center);
height: 100%;
color: $cMainBg;
box-sizing: content-box;
white-space: nowrap;
&:hover {
text-decoration: none;