99 lines
2.9 KiB
CSS
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();
|
|
}
|