107 lines
2.6 KiB
CSS
107 lines
2.6 KiB
CSS
|
.custom-select {
|
||
|
display: inline-block;
|
||
|
position: relative;
|
||
|
vertical-align: middle;
|
||
|
height: 27px;
|
||
|
}
|
||
|
.custom-select .switcher {
|
||
|
background: #f1f3f6;
|
||
|
border: 1px solid;
|
||
|
border-color: #dadde0;
|
||
|
clear: both;
|
||
|
height: 25px;
|
||
|
min-width: 65px;
|
||
|
}
|
||
|
html.theme-dark .custom-select .switcher {
|
||
|
border-color: #363c4e;
|
||
|
background: #2f3241;
|
||
|
}
|
||
|
.custom-select .switcher .title {
|
||
|
display: block;
|
||
|
float: right;
|
||
|
background-repeat: repeat-x;
|
||
|
height: 10px;
|
||
|
overflow: hidden;
|
||
|
padding: 5px 12px 5px 20px;
|
||
|
vertical-align: middle;
|
||
|
width: 78px;
|
||
|
}
|
||
|
.custom-select .switcher .icon {
|
||
|
display: flex;
|
||
|
align-items: center;
|
||
|
position: absolute;
|
||
|
left: 5px;
|
||
|
top: 6px;
|
||
|
height: 15px;
|
||
|
width: 13px;
|
||
|
cursor: default;
|
||
|
background: none;
|
||
|
}
|
||
|
.custom-select .switcher .icon:before {
|
||
|
content: '';
|
||
|
display: inline-block;
|
||
|
width: 0;
|
||
|
height: 0;
|
||
|
border-style: solid;
|
||
|
border-width: 4px 4px 0;
|
||
|
border-color: currentColor transparent transparent;
|
||
|
margin-right: 5px;
|
||
|
color: #4a4a4a;
|
||
|
vertical-align: middle;
|
||
|
transition: transform 0.35s ease;
|
||
|
}
|
||
|
html.theme-dark .custom-select .switcher .icon:before {
|
||
|
color: #c5cbce;
|
||
|
}
|
||
|
.custom-select .items {
|
||
|
position: absolute;
|
||
|
z-index: 3;
|
||
|
background: #fff;
|
||
|
border: 1px solid;
|
||
|
border-color: #dadde0;
|
||
|
clear: both;
|
||
|
cursor: pointer;
|
||
|
top: 28px;
|
||
|
box-sizing: border-box;
|
||
|
width: 100%;
|
||
|
}
|
||
|
html.theme-dark .custom-select .items {
|
||
|
border-color: #363c4e;
|
||
|
background: #131722;
|
||
|
}
|
||
|
.custom-select .items .item {
|
||
|
cursor: pointer;
|
||
|
padding: 7px 12px;
|
||
|
}
|
||
|
@media (any-hover: hover), (min--moz-device-pixel-ratio: 0) {
|
||
|
.custom-select .items .item:hover {
|
||
|
background: #f1f3f6;
|
||
|
}
|
||
|
}
|
||
|
@media (any-hover: hover), (min--moz-device-pixel-ratio: 0) {
|
||
|
html.theme-dark .custom-select .items .item:hover {
|
||
|
background: #2f3241;
|
||
|
}
|
||
|
}
|
||
|
.custom-select .items .item.selected {
|
||
|
padding-right: 8px;
|
||
|
background: #f1f3f6;
|
||
|
border-right: 4px solid #5cb888;
|
||
|
}
|
||
|
html.theme-dark .custom-select .items .item.selected {
|
||
|
background: #2f3241;
|
||
|
}
|
||
|
.tv-line-style-option {
|
||
|
height: 15px;
|
||
|
background: none 100% 7px repeat-x;
|
||
|
}
|
||
|
.tv-line-style-option--solid {
|
||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23797979' height='2' width='2'%3E%3Cpath d='m0 0h2v2H0z'/%3E%3C/svg%3E");
|
||
|
}
|
||
|
.tv-line-style-option--dotted {
|
||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23797979' height='2' width='3'%3E%3Cpath d='m0 0h2v2H0z'/%3E%3C/svg%3E");
|
||
|
}
|
||
|
.tv-line-style-option--dashed {
|
||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23797979' height='2' width='13'%3E%3Cpath d='m0 0h9v2H0z'/%3E%3C/svg%3E");
|
||
|
}
|