b38dea0597
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
114 lines
2.8 KiB
CSS
Executable file
114 lines
2.8 KiB
CSS
Executable file
/* ----------------------------------
|
|
* CHECKBOXES / RADIOS
|
|
* ---------------------------------- */
|
|
|
|
label.pack-checkbox,
|
|
label.pack-switch {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
width: 5rem;
|
|
height: 5rem;
|
|
position: relative;
|
|
background: none;
|
|
}
|
|
|
|
label.pack-checkbox input,
|
|
label.pack-switch input {
|
|
margin: 0;
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
/* the conflict between left/right/width is resolved differently in LTR and
|
|
* RTL. The goal here is to keep "input" invisible */
|
|
left: 0;
|
|
right: 0;
|
|
width: 0;
|
|
}
|
|
|
|
label.pack-checkbox input ~ span:after {
|
|
content: '';
|
|
position: absolute;
|
|
/* CSS will resolve the conflict among left, right, and width "intelligently"
|
|
and pick left+width for LTR and right+width for RTL. */
|
|
left: 50%;
|
|
right: 50%;
|
|
top: 50%;
|
|
margin: 0;
|
|
margin-top: -1.1rem;
|
|
margin-inline-start: -1.1rem;
|
|
width: 2.2rem;
|
|
height: 2.2rem;
|
|
pointer-events: none;
|
|
}
|
|
|
|
label.pack-checkbox input ~ span:after {
|
|
background: url(switches/images/check/default.png) no-repeat center top / 2.2rem auto;
|
|
}
|
|
|
|
/* checkbox & radio: disabled state */
|
|
label.pack-checkbox input:disabled ~ span:after {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
label.pack-checkbox input:checked ~ span:after,
|
|
label.pack-switch input:checked ~ span:after {
|
|
background-position: center bottom;
|
|
}
|
|
|
|
/* 'Dangerous' switches */
|
|
|
|
label.pack-checkbox.danger input ~ span:after {
|
|
background-image: url(switches/images/check/danger.png);
|
|
}
|
|
|
|
/* ----------------------------------
|
|
* ON/OFF SWITCHES
|
|
* ---------------------------------- */
|
|
|
|
label.pack-switch input ~ span:after {
|
|
content: '';
|
|
position: absolute;
|
|
offset-inline-end: 0;
|
|
top: 50%;
|
|
width: 6rem;
|
|
margin: -1.4rem 0 0;
|
|
height: 2.7rem;
|
|
pointer-events: none;
|
|
border-radius: 1.35rem;
|
|
overflow: hidden;
|
|
background-color: #e6e6e6;
|
|
background-image: url(switches/images/switch/background_off.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 9.2rem 2.7rem;
|
|
transition: background 0.2s ease;
|
|
}
|
|
html[dir="ltr"] label.pack-switch input ~ span:after {
|
|
background-position: -3.2rem 0;
|
|
}
|
|
html[dir="rtl"] label.pack-switch input ~ span:after {
|
|
background-position: 0;
|
|
}
|
|
|
|
/* switch: 'ON' state */
|
|
label.pack-switch input:checked ~ span:after {
|
|
background-color: #e6e6e6;
|
|
background-repeat: no-repeat;
|
|
background-size: 9.2rem 2.7rem;
|
|
}
|
|
html[dir="ltr"] label.pack-switch input:checked ~ span:after {
|
|
background-image: url(switches/images/switch/background.png);
|
|
background-position: 0 0;
|
|
}
|
|
html[dir="rtl"] label.pack-switch input:checked ~ span:after {
|
|
background-image: url(switches/images/switch/background_rtl.png);
|
|
background-position: -3.2rem 0;
|
|
}
|
|
|
|
/* switch: disabled state */
|
|
label.pack-switch input:disabled ~ span:after {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
label.pack-switch input.uninit ~ span:after {
|
|
transition: none;
|
|
}
|