Files
CartoAssets/src/components/forms/_selects.css
T

99 lines
2.9 KiB
CSS

// Select styles
// ----------------------------------------------
/* SG
# Forms/Selects
```
<div class="CDB-Select" style="height: 250px;">
<input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText CDB-Text">
<div class="CDB-Box-Modal CDB-SelectItem">
<ul class="CDB-Text CDB-Size-medium">
<li class="CDB-ListDecoration-Item"><a href="#" class="CDB-ListDecoration-ItemLink">Hide</a></li>
<li class="CDB-ListDecoration-Item"><a href="#" class="CDB-ListDecoration-ItemLink">Rename</a></li>
<li class="CDB-ListDecoration-Item"><a href="#" class="CDB-ListDecoration-ItemLink">Change source dataset…</a></li>
<li class="CDB-ListDecoration-Item"><a href="#" class="CDB-ListDecoration-ItemLink">Delete this layer…</a></li>
</ul>
</div>
</div>
<br/>
<br/>
<br/>
<div class="CDB-Select" style="height: 250px;">
<div class="CDB-InputText CDB-Text">DejaVu Sans</div>
<div class="CDB-Box-Modal CDB-SelectItem">
<ul class="CDB-Text CDB-Size-medium">
<li class="CDB-ListDecoration-Item"><a href="#" class="CDB-ListDecoration-ItemLink">Hide</a></li>
<li class="CDB-ListDecoration-Item"><a href="#" class="CDB-ListDecoration-ItemLink">Rename</a></li>
<li class="CDB-ListDecoration-Item"><a href="#" class="CDB-ListDecoration-ItemLink">Change source dataset…</a></li>
<li class="CDB-ListDecoration-Item"><a href="#" class="CDB-ListDecoration-ItemLink">Delete this layer…</a></li>
</ul>
</div>
</div>
<div class="CDB-InputText CDB-Text is-cursor is-disabled">DejaVu Sans</div>
<br/>
<div class="CDB-InputText CDB-Text is-cursor is-empty">DejaVu Sans</div>
<br/>
<div class="CDB-InputText CDB-Text is-cursor is-null">null</div>
<br/>
<div class="CDB-InputText CDB-Text is-cursor is-number">46,594</div>
<br/>
<select name="select" class="CDB-SelectFake CDB-Text">
<option value="value1" selected>Choose an option</option>
<option value="value2">Hide</option>
<option value="value3">Rename</option>
<option value="value4">Change source dataset…</option>
<option value="value5">Delete this layer…</option>
</select>
```
*/
.CDB-Select {
position: relative;
}
.CDB-SelectItem {
position: absolute;
top: 40px;
}
.CDB-SelectFake {
-webkit-appearance: none;
appearance: none;
width: 100%;
padding: 7px 8px 6px;
border: 1px solid var(--color-line);
border-radius: $baseSize / 2;
background: white;
font-size: var(--font-size-medium);
line-height: var(--line-height-medium);
box-sizing: border-box;
&:hover {
border: 1px solid var(--color-line-hover);
}
&:focus {
border: 1px solid var(--color-blue);
outline: none;
}
&:disabled {
border-color: var(--color-line-secondary);
background: var(--color-softgray);
}
&.has-error {
@include default-form-error-style();
}
}
.CDB-FieldError .CDB-Select,
.CDB-FieldError .CDB-SelectFake {
@include default-form-error-style();
}