Color bar & option input component: minor improvements
This commit is contained in:
parent
231e72cfd9
commit
b7847b25ab
@ -50,6 +50,7 @@
|
|||||||
```
|
```
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
@import '../../cdb-variables/sizes';
|
||||||
@import '../../cdb-utilities/mixins';
|
@import '../../cdb-utilities/mixins';
|
||||||
|
|
||||||
.CDB-ColorBarContainer {
|
.CDB-ColorBarContainer {
|
||||||
@ -60,9 +61,9 @@
|
|||||||
.CDB-ColorBar {
|
.CDB-ColorBar {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 6px;
|
height: $baseSize - 2;
|
||||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||||
border-radius: 6px;
|
border-radius: $baseSize - 2;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
@ -79,12 +80,12 @@
|
|||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||||
border-radius: 6px;
|
border-radius: $baseSize - 2;
|
||||||
content: '';
|
content: '';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.CDB-ColorBar.CDB-ColorBar--spaceMedium {
|
.CDB-ColorBar.CDB-ColorBar--spaceMedium {
|
||||||
margin-right: 4px;
|
margin-right: $baseSize / 2;
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
@ -96,20 +97,20 @@
|
|||||||
}
|
}
|
||||||
.CDB-ColorBar.CDB-ColorBar--spaceless:first-child {
|
.CDB-ColorBar.CDB-ColorBar--spaceless:first-child {
|
||||||
border-width: 1px 0 1px 1px;
|
border-width: 1px 0 1px 1px;
|
||||||
border-radius: 6px 0 0 6px;
|
border-radius: $baseSize - 2 0 0 $baseSize - 2;
|
||||||
}
|
}
|
||||||
.CDB-ColorBar.CDB-ColorBar--spaceless:last-child {
|
.CDB-ColorBar.CDB-ColorBar--spaceless:last-child {
|
||||||
border-width: 1px 1px 1px 0;
|
border-width: 1px 1px 1px 0;
|
||||||
border-radius: 0 6px 6px 0;
|
border-radius: 0 $baseSize - 2 $baseSize - 2 0;
|
||||||
}
|
}
|
||||||
.CDB-ColorBar.CDB-ColorBar--spaceSmall {
|
.CDB-ColorBar.CDB-ColorBar--spaceSmall {
|
||||||
margin-right: 2px;
|
margin-right: 2px;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
.CDB-ColorBar.CDB-ColorBar--spaceSmall:first-child {
|
.CDB-ColorBar.CDB-ColorBar--spaceSmall:first-child {
|
||||||
border-radius: 6px 3px 3px 6px;
|
border-radius: $baseSize - 2 3px 3px $baseSize - 2;
|
||||||
}
|
}
|
||||||
.CDB-ColorBar.CDB-ColorBar--spaceSmall:last-child {
|
.CDB-ColorBar.CDB-ColorBar--spaceSmall:last-child {
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
border-radius: 3px 6px 6px 3px;
|
border-radius: 3px $baseSize - 2 $baseSize - 2 3px;
|
||||||
}
|
}
|
||||||
|
@ -118,7 +118,7 @@
|
|||||||
box-sizing: content-box;
|
box-sizing: content-box;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
padding: 0 6px;
|
padding: 0 $baseSize - 2;
|
||||||
color: $cHintText;
|
color: $cHintText;
|
||||||
content: '·';
|
content: '·';
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user