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

Dropdown component: improvements

Browse Source
This commit is contained in:
María Checa 2016-02-16 14:10:59 +01:00
parent b1158241b2
commit ff637c7b36
1 changed files with 33 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/scss/cdb-components/forms/dropdowns.scss
View File

@ -10,27 +10,27 @@
<div class="CDB-Dropdown CDB-Box-Modal"> <div class="CDB-Dropdown CDB-Box-Modal">
<div class="CDB-Dropdown-calculations CDB-Text is-semibold"> <div class="CDB-Dropdown-calculations CDB-Text is-semibold">
<ul> <ul>
<li class="CDB-Dropdown-calculationsElement u-iBlock"> <li class="CDB-Dropdown-calculationsElement">
<input class="CDB-Radio" type="radio" name="calculation" value="01" checked> <input class="CDB-Radio" type="radio" name="calculation" value="01" checked>
<span class="u-iBlock CDB-Radio-face"></span> <span class="u-iBlock CDB-Radio-face"></span>
<label class="u-iBlock u-lSpace">COUNT</label> <label class="u-iBlock u-lSpace">COUNT</label>
</li> </li>
<li class="CDB-Dropdown-calculationsElement u-iBlock"> <li class="CDB-Dropdown-calculationsElement">
<input class="CDB-Radio" type="radio" name="calculation" value="02"> <input class="CDB-Radio" type="radio" name="calculation" value="02">
<span class="u-iBlock CDB-Radio-face"></span> <span class="u-iBlock CDB-Radio-face"></span>
<label class="u-iBlock u-lSpace">SUM</label> <label class="u-iBlock u-lSpace">SUM</label>
</li> </li>
<li class="CDB-Dropdown-calculationsElement u-iBlock"> <li class="CDB-Dropdown-calculationsElement">
<input class="CDB-Radio" type="radio" name="calculation" value="03"> <input class="CDB-Radio" type="radio" name="calculation" value="03">
<span class="u-iBlock CDB-Radio-face"></span> <span class="u-iBlock CDB-Radio-face"></span>
<label class="u-iBlock u-lSpace">AVG</label> <label class="u-iBlock u-lSpace">AVG</label>
</li> </li>
<li class="CDB-Dropdown-calculationsElement u-iBlock"> <li class="CDB-Dropdown-calculationsElement">
<input class="CDB-Radio" type="radio" name="calculation" value="04"> <input class="CDB-Radio" type="radio" name="calculation" value="04">
<span class="u-iBlock CDB-Radio-face"></span> <span class="u-iBlock CDB-Radio-face"></span>
<label class="u-iBlock u-lSpace">MAX</label> <label class="u-iBlock u-lSpace">MAX</label>
</li> </li>
<li class="CDB-Dropdown-calculationsElement u-iBlock"> <li class="CDB-Dropdown-calculationsElement">
<input class="CDB-Radio" type="radio" name="calculation" value="05"> <input class="CDB-Radio" type="radio" name="calculation" value="05">
<span class="u-iBlock CDB-Radio-face"></span> <span class="u-iBlock CDB-Radio-face"></span>
<label class="u-iBlock u-lSpace">MIN</label> <label class="u-iBlock u-lSpace">MIN</label>
@ -38,20 +38,12 @@
</ul> </ul>
</div> </div>
<div class="CDB-Dropdown-options CDB-Text"> <div class="CDB-Dropdown-options CDB-Text CDB-Size-medium">
<ul> <ul>
<li class="CDB-Dropdown-optionsElement is-selected"> <li class="CDB-Dropdown-optionsElement is-selected" title="selected">selected</li>
<span class="u-iBlock u-lSpace CDB-Size-medium">selected</span> <li class="CDB-Dropdown-optionsElement" title="active">active</li>
</li> <li class="CDB-Dropdown-optionsElement is-disabled" title="disabled">disabled</li>
<li class="CDB-Dropdown-optionsElement"> <li class="CDB-Dropdown-optionsElement is-disabled" title="disabled">disabled</li>
<span class="u-iBlock u-lSpace CDB-Size-medium">active</span>
</li>
<li class="CDB-Dropdown-optionsElement is-disabled">
<span class="u-iBlock u-lSpace CDB-Size-medium">disabled</span>
</li>
<li class="CDB-Dropdown-optionsElement is-disabled">
<span class="u-iBlock u-lSpace CDB-Size-medium">disabled</span>
</li>
</ul> </ul>
</div> </div>
</div> </div>
@ -62,6 +54,7 @@
@import '../../cdb-utilities/mixins'; @import '../../cdb-utilities/mixins';
@import '../../cdb-variables/sizes'; @import '../../cdb-variables/sizes';
@import '../../cdb-variables/colors'; @import '../../cdb-variables/colors';
@import '../../cdb-utilities/mixins';
.CDB-DropdownContainer { .CDB-DropdownContainer {
position: relative; position: relative;
@ -72,33 +65,31 @@
@include flex-direction(row); @include flex-direction(row);
position: absolute; position: absolute;
top: 40px; top: 40px;
height: 200px; max-height: 200px;
} }
.CDB-Dropdown-calculations { .CDB-Dropdown-calculations {
display: inline-block;
width: $baseSize * 11;
height: 100%;
padding: $sMargin-element; padding: $sMargin-element;
border-right: 1px solid $cMainLine; border-right: 1px solid $cMainLine;
border-radius: 3px 0 0 3px; border-radius: 4px 0 0 4px;
background-color: $cSecondaryBackground; background-color: $cSecondaryBackground;
box-sizing: border-box; box-sizing: border-box;
} }
.CDB-Dropdown-calculationsElement { .CDB-Dropdown-calculationsElement {
margin-bottom: $sLineHeight-medium;
font-size: $sFontSize-small; font-size: $sFontSize-small;
&:not(:last-child) { &:last-child {
margin-bottom: $sLineHeight-medium; margin-bottom: 0;
} }
} }
.CDB-Dropdown-options { .CDB-Dropdown-options {
display: inline-block;
width: $baseSize * 20; width: $baseSize * 20;
border-radius: 0 3px 3px 0; border-radius: 0 4px 4px 0;
background-color: $cWhite; background-color: $cWhite;
vertical-align: top; vertical-align: top;
} }
.CDB-Dropdown-optionsElement { .CDB-Dropdown-optionsElement {
@include text-overflow();
padding: 12px 10px; padding: 12px 10px;
border-bottom: 1px solid $cMainLine; border-bottom: 1px solid $cMainLine;
color: $cBlue; color: $cBlue;
@ -114,6 +105,21 @@
.CDB-Dropdown-optionsElement.is-selected { .CDB-Dropdown-optionsElement.is-selected {
color: $cBlack; color: $cBlack;
} }
.CDB-Dropdown-optionsElement.is-disabled {
color: $cTypo4;
&:hover {
background-color: transparent;
cursor: default;
}
}
background-color: rgba(157, 224, 173, 0.2);
cursor: pointer;
}
}
.CDB-Dropdown-optionsElement.is-selected {
color: $cBlack;
}
.CDB-Dropdown-optionsElement.is-disabled { .CDB-Dropdown-optionsElement.is-disabled {
color: $cTypo4; color: $cTypo4;
} }