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

Input option component: minor changes

Browse Source
This commit is contained in:
María Checa 2016-02-22 15:43:26 +01:00
parent 9e0a1d463e
commit 533dd3b167
1 changed files with 37 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,25 +5,39 @@
# Forms/Option input # Forms/Option input
``` ```
<div class="CDB-OptionInput is-active u-bSpace--xl CDB-Text"> <button class="CDB-OptionInput is-active u-rSpace--m CDB-Text">
<ul class="CDB-OptionInput-container"> <ul class="CDB-OptionInput-container">
<li class="CDB-OptionInput-option is-active"> <li class="CDB-OptionInput-option is-active">
<span class="CDB-OptionInput-optionContent">8px</span> <a class="CDB-OptionInput-optionContent">8px</a>
</li> </li>
<li class="CDB-OptionInput-option"> <li class="CDB-OptionInput-option">
<span class="CDB-OptionInput-optionContent">solid</span> <a class="CDB-OptionInput-optionContent">solid</a>
</li> </li>
<li class="CDB-OptionInput-option"> <li class="CDB-OptionInput-option">
<ul class="CDB-ColorBarContainer CDB-OptionInput-optionContent"> <a class="CDB-ColorBarContainer CDB-OptionInput-optionContent">
<li class="CDB-ColorBar" style="background-color: #207EBA;"></li> <span class="CDB-ColorBar" style="background-color: #207EBA;"></span>
</ul> </a>
</li> </li>
</ul> </ul>
</div> </button>
<div class="CDB-OptionInput u-bSpace--xl"> <button class="CDB-OptionInput is-active u-rSpace--m CDB-Text">
<ul class="CDB-OptionInput-container">
<li class="CDB-OptionInput-option">
<a class="CDB-OptionInput-optionContent">8...12</a>
</li>
<li class="CDB-OptionInput-option is-active">
<a class="CDB-ColorBarContainer CDB-OptionInput-optionContent">
<span class="CDB-ColorBar" style="background-color: #FFFFC0;"></span>
</a>
</li>
</ul>
</button>
<button type="button" class="CDB-OptionInput u-rSpace--m">
<ul class="CDB-OptionInput-container"> <ul class="CDB-OptionInput-container">
<li class="CDB-OptionInput-option"> <li class="CDB-OptionInput-option">
<ul class="CDB-ColorBarContainer"> <ul class="CDB-ColorBarContainer">
@ -31,9 +45,9 @@
</ul> </ul>
</li> </li>
</ul> </ul>
</div> </button>
<div class="CDB-OptionInput u-bSpace--xl"> <button class="CDB-OptionInput u-rSpace--m">
<ul class="CDB-OptionInput-container"> <ul class="CDB-OptionInput-container">
<li class="CDB-OptionInput-option"> <li class="CDB-OptionInput-option">
<ul class="CDB-ColorBarContainer"> <ul class="CDB-ColorBarContainer">
@ -46,9 +60,9 @@
</ul> </ul>
</li> </li>
</ul> </ul>
</div> </button>
<div class="CDB-OptionInput u-bSpace--xl"> <button type="button" class="CDB-OptionInput">
<ul class="CDB-OptionInput-container"> <ul class="CDB-OptionInput-container">
<li class="CDB-OptionInput-option"> <li class="CDB-OptionInput-option">
<ul class="CDB-ColorBarContainer"> <ul class="CDB-ColorBarContainer">
@ -59,7 +73,7 @@
</ul> </ul>
</li> </li>
</ul> </ul>
</div> </button>
``` ```
*/ */
@ -95,9 +109,8 @@
@include display-flex(); @include display-flex();
@include align-items(center); @include align-items(center);
@include align-content(center); @include align-content(center);
width: 100%; width: auto;
height: 100%; height: 100%;
color: $cMainBg;
font-size: $sFontSize-medium; font-size: $sFontSize-medium;
box-sizing: content-box; box-sizing: content-box;
@ -107,12 +120,21 @@
content: '·'; content: '·';
} }
&:last-child { &:last-child {
width: 100%;
&::after { &::after {
padding: 0; padding: 0;
content: ''; content: '';
} }
} }
} }
.CDB-OptionInput-optionContent {
color: $cMainBg;
&:hover {
text-decoration: none;
}
}
.CDB-OptionInput-option.is-active > .CDB-OptionInput-optionContent { .CDB-OptionInput-option.is-active > .CDB-OptionInput-optionContent {
padding: 9px 0; padding: 9px 0;
border-bottom: 1px solid $cMainBg; border-bottom: 1px solid $cMainBg;