Refactor and add Account Data stuffs
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
parent
c74e6c3c0c
commit
ea9b630082
3 changed files with 457 additions and 113 deletions
|
@ -17,3 +17,106 @@ limitations under the License.
|
|||
.mx_DevTools_RoomStateExplorer_button, .mx_DevTools_RoomStateExplorer_query {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.tgl {
|
||||
display: none;
|
||||
|
||||
// add default box-sizing for this scope
|
||||
&,
|
||||
&:after,
|
||||
&:before,
|
||||
& *,
|
||||
& *:after,
|
||||
& *:before,
|
||||
& + .tgl-btn {
|
||||
box-sizing: border-box;
|
||||
&::selection {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
+ .tgl-btn {
|
||||
outline: 0;
|
||||
display: block;
|
||||
width: 7em;
|
||||
height: 2em;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
&:after,
|
||||
&:before {
|
||||
position: relative;
|
||||
display: block;
|
||||
content: "";
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&:after {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked + .tgl-btn:after {
|
||||
left: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.tgl-flip {
|
||||
+ .tgl-btn {
|
||||
padding: 2px;
|
||||
transition: all .2s ease;
|
||||
font-family: sans-serif;
|
||||
perspective: 100px;
|
||||
&:after,
|
||||
&:before {
|
||||
display: inline-block;
|
||||
transition: all .4s ease;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
line-height: 2em;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
top: 0;
|
||||
left: 0;
|
||||
backface-visibility: hidden;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: attr(data-tg-on);
|
||||
background: #02C66F;
|
||||
transform: rotateY(-180deg);
|
||||
}
|
||||
|
||||
&:before {
|
||||
background: #FF3A19;
|
||||
content: attr(data-tg-off);
|
||||
}
|
||||
|
||||
&:active:before {
|
||||
transform: rotateY(-20deg);
|
||||
}
|
||||
}
|
||||
|
||||
&:checked + .tgl-btn {
|
||||
&:before {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
&:after {
|
||||
transform: rotateY(0);
|
||||
left: 0;
|
||||
background: #7FC6A6;
|
||||
}
|
||||
|
||||
&:active:after {
|
||||
transform: rotateY(20deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue