1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
jellyfin-web/src/components/emby-checkbox/emby-checkbox.css

128 lines
2.3 KiB
CSS
Raw Normal View History

2018-10-23 01:13:23 +03:00
.emby-checkbox-label {
position: relative;
z-index: 1;
vertical-align: middle;
display: inline-flex;
box-sizing: border-box;
width: 100%;
margin: 0;
padding: 0;
padding-left: 2.4em;
2018-10-23 01:13:23 +03:00
align-items: center;
height: 2.35em;
cursor: pointer;
2018-10-23 01:13:23 +03:00
}
.checkboxFieldDescription {
padding-left: 2.4em;
2018-10-23 01:13:23 +03:00
}
.checkboxContainer {
margin-bottom: 1.8em;
display: flex;
}
.checkboxListContainer {
margin-bottom: 1.8em;
2018-10-23 01:13:23 +03:00
}
.checkboxContainer-withDescription {
flex-direction: column;
2018-10-23 01:13:23 +03:00
}
.emby-checkbox {
position: absolute;
/* This is for focusing purposes, so the focusManager doesn't skip over it */
2018-10-23 01:13:23 +03:00
width: 1px;
height: 1px;
margin: 0;
padding: 0;
opacity: 0;
-ms-appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
border: none;
2018-10-23 01:13:23 +03:00
}
.checkboxOutline {
position: absolute;
top: 3px;
left: 0;
display: inline-block;
2018-10-23 01:13:23 +03:00
box-sizing: border-box;
width: 1.83em;
height: 1.83em;
margin: 0;
overflow: hidden;
border: 2px solid currentcolor;
border-radius: .14em;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
2018-10-23 01:13:23 +03:00
}
.checkboxIcon {
font-size: 1.6em;
color: #fff;
2018-10-23 01:13:23 +03:00
}
.checkboxIcon-checked {
display: none;
2018-10-23 01:13:23 +03:00
}
2019-05-16 18:23:46 -04:00
.emby-checkbox:checked + span + .checkboxOutline > .checkboxIcon-checked {
/* background-color set by theme */
/*background-color: #52B54B;*/
display: flex !important;
2018-10-23 01:13:23 +03:00
}
2019-05-16 18:23:46 -04:00
.emby-checkbox:checked + span + .checkboxOutline > .checkboxIcon-unchecked {
/* background-color set by theme */
display: none !important;
2018-10-23 01:13:23 +03:00
}
2019-05-16 18:23:46 -04:00
.emby-checkbox:checked[disabled] + span + .checkboxOutline > .checkboxIcon {
background-color: rgba(0, 0, 0, 0.26);
2018-10-23 01:13:23 +03:00
}
.checkboxLabel {
position: relative;
margin: 0;
2018-10-23 01:13:23 +03:00
}
.checkboxList > .emby-checkbox-label {
2018-10-23 01:13:23 +03:00
display: flex;
margin: .5em 0;
2018-10-23 01:13:23 +03:00
}
.checkboxList-verticalwrap {
display: flex;
flex-wrap: wrap;
2018-10-23 01:13:23 +03:00
}
.checkboxList-verticalwrap > .emby-checkbox-label {
display: inline-flex;
margin: .3em 0 .3em 0;
width: 12em;
}
2018-10-23 01:13:23 +03:00
.checkboxList-paperList {
padding: 1em !important;
2018-10-23 01:13:23 +03:00
}
.checkboxListLabel {
margin-bottom: .25em;
2018-10-23 01:13:23 +03:00
}
@-webkit-keyframes repaintChrome {
from {
padding: 0;
}
2018-10-23 01:13:23 +03:00
to {
padding: 0;
2018-10-23 01:13:23 +03:00
}
}