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

Input option markup improvements

Browse Source
This commit is contained in:
Maria Checa 2016-02-19 16:35:49 +01:00
parent 3a2513e2a2
commit ff89163f58
1 changed files with 49 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,43 +5,59 @@
# Forms/Option input # Forms/Option input
``` ```
<div class="CDB-OptionInput is-active u-bSpace--xl"> <div class="CDB-OptionInput is-active u-bSpace--xl CDB-Text">
<div class="CDB-OptionInput-element CDB-Text"> <ul class="CDB-OptionInput-container">
<span class="CDB-OptionInput--text is-active">8px</span> <li class="CDB-OptionInput-option is-active">
</div> <span class="CDB-OptionInput-optionContent">8px</span>
</li>
<div class="CDB-OptionInput-element CDB-Text"> <li class="CDB-OptionInput-option">
<span class="CDB-OptionInput--text">solid</span> <span class="CDB-OptionInput-optionContent">solid</span>
</div> </li>
<ul class="CDB-ColorBarContainer CDB-Text CDB-Size-medium"> <li class="CDB-OptionInput-option">
<li class="CDB-ColorBar" style="background-color: #207EBA;"></li> <ul class="CDB-ColorBarContainer CDB-OptionInput-optionContent">
<li class="CDB-ColorBar" style="background-color: #207EBA;"></li>
</ul>
</li>
</ul> </ul>
</div> </div>
<div class="CDB-OptionInput u-bSpace--xl"> <div class="CDB-OptionInput u-bSpace--xl">
<ul class="CDB-ColorBarContainer"> <ul class="CDB-OptionInput-container">
<li class="CDB-ColorBar" style="background: linear-gradient(90deg, #FFFECA, #9FDAB3, #36B6C5, #207EBA, #203196);"></li> <li class="CDB-OptionInput-option">
<ul class="CDB-ColorBarContainer">
<li class="CDB-ColorBar" style="background: linear-gradient(90deg, #FFFECA, #9FDAB3, #36B6C5, #207EBA, #203196);"></li>
</ul>
</li>
</ul> </ul>
</div> </div>
<div class="CDB-OptionInput u-bSpace--xl"> <div class="CDB-OptionInput u-bSpace--xl">
<ul class="CDB-ColorBarContainer"> <ul class="CDB-OptionInput-container">
<li class="CDB-ColorBar u-rSpace" style="background-color: #9DE0AD;"></li> <li class="CDB-OptionInput-option">
<li class="CDB-ColorBar u-rSpace" style="background-color: #50E3C2;"></li> <ul class="CDB-ColorBarContainer">
<li class="CDB-ColorBar u-rSpace" style="background-color: #FFFFC0;"></li> <li class="CDB-ColorBar u-rSpace" style="background-color: #9DE0AD;"></li>
<li class="CDB-ColorBar u-rSpace" style="background-color: #7ED321;"></li> <li class="CDB-ColorBar u-rSpace" style="background-color: #50E3C2;"></li>
<li class="CDB-ColorBar u-rSpace" style="background-color: #BD10E0;"></li> <li class="CDB-ColorBar u-rSpace" style="background-color: #FFFFC0;"></li>
<li class="CDB-ColorBar u-rSpace" style="background-color: #F15743;"></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>
</ul>
</li>
</ul> </ul>
</div> </div>
<div class="CDB-OptionInput u-bSpace--xl"> <div class="CDB-OptionInput u-bSpace--xl">
<ul class="CDB-ColorBarContainer"> <ul class="CDB-OptionInput-container">
<li class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #9DE0AD;"></li> <li class="CDB-OptionInput-option">
<li class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #50E3C2;"></li> <ul class="CDB-ColorBarContainer">
<li class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #FFFFC0;"></li> <li class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #9DE0AD;"></li>
<li class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #7ED321;"></li> <li class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #50E3C2;"></li>
<li class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #FFFFC0;"></li>
<li class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #7ED321;"></li>
</ul>
</li>
</ul> </ul>
</div> </div>
``` ```
@ -53,11 +69,9 @@
.CDB-OptionInput { .CDB-OptionInput {
@include display-flex(); @include display-flex();
@include align-items(center);
@include align-content(center); @include align-content(center);
width: $baseSize * 20; width: $baseSize * 20;
height: $baseSize * 4; height: $baseSize * 4;
padding: $baseSize;
border: 1px solid $cMainLine; border: 1px solid $cMainLine;
border-radius: $baseSize / 2; border-radius: $baseSize / 2;
box-sizing: border-box; box-sizing: border-box;
@ -73,8 +87,15 @@
.CDB-OptionInput.is-active { .CDB-OptionInput.is-active {
border: 1px solid $cBlue; border: 1px solid $cBlue;
} }
.CDB-OptionInput-element { .CDB-OptionInput-container {
@include display-flex(); @include display-flex();
@include align-items(center);
@include align-content(center);
margin: 0 $baseSize;
}
.CDB-OptionInput-option {
@include display-flex();
@include align-items(center);
@include align-content(center); @include align-content(center);
color: $cMainBg; color: $cMainBg;
font-size: $sFontSize-medium; font-size: $sFontSize-medium;
@ -92,9 +113,7 @@
} }
} }
} }
.CDB-OptionInput--text { .CDB-OptionInput-option.is-active > .CDB-OptionInput-optionContent {
padding: 9px 0; padding: 9px 0;
}
.CDB-OptionInput--text.is-active {
border-bottom: 1px solid $cMainBg; border-bottom: 1px solid $cMainBg;
} }