44 lines
924 B
SCSS
44 lines
924 B
SCSS
// Color input styles
|
|
// ----------------------------------------------
|
|
|
|
/* SG
|
|
# Forms/Option input
|
|
|
|
```
|
|
<fieldset>
|
|
<label class="CDB-Legend u-iBlock CDB-Text is-semibold CDB-Size-small u-rSpace--m">OPTION</label>
|
|
<div class="u-iBlock">
|
|
<div class="CDB-OptionInput">
|
|
<span class="CDB-ColorBar" style="background-color: #207EBA;"></span>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
```
|
|
*/
|
|
|
|
@import '../../cdb-variables/sizes';
|
|
@import '../../cdb-variables/colors';
|
|
@import '../../cdb-utilities/mixins';
|
|
|
|
.CDB-OptionInput {
|
|
@include display-flex();
|
|
@include align-items(center);
|
|
width: $baseSize * 20;
|
|
height: $baseSize * 4;
|
|
padding: $baseSize;
|
|
border: 1px solid $cMainLine;
|
|
border-radius: $baseSize / 2;
|
|
box-sizing: border-box;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
border: 1px solid $cHoverLine;
|
|
}
|
|
&:focus {
|
|
border: 1px solid $cBlue;
|
|
}
|
|
}
|
|
.CDB-OptionInput.is-active {
|
|
border: 1px solid $cBlue;
|
|
}
|