src/components/molecules/TablesUserList/TablesUserList.scss
@import "scss/constants";
.bold {
font-weight: 700;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
.back-button-container {
display: flex;
flex: 1;
justify-content: flex-start;
align-items: center;
}
.lock-button-container {
display: flex;
flex: 1;
justify-content: flex-end;
align-items: center;
}
.back-button {
margin-right: 20px;
}
.locked-text {
margin-bottom: 0;
line-height: 22px;
height: 22px;
}
.unlocked-text {
margin-bottom: 0;
line-height: 22px;
height: 22px;
}
}
.clickable-text {
text-decoration: underline;
cursor: pointer;
&:hover {
color: $primary--over;
}
}
.no-margin {
margin: 0;
}
.userlist-container {
.at-table {
padding: 0 10px;
display: flex;
flex-direction: column;
.header {
display: flex;
justify-content: space-between;
align-items: center;
p {
margin: 0;
}
}
}
.profiles {
margin: 10px;
display: flex;
justify-content: space-between;
align-items: center;
button {
padding: 0;
}
}
}
.switch {
position: relative;
display: inline-block;
width: 40px;
height: 23px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: $secondary--live;
border: thin var(--content--over-60a) solid;
-webkit-transition: 0.4s;
transition: 0.4s;
border-radius: 22px;
}
.slider:before {
position: absolute;
content: "";
height: 19px;
width: 19px;
left: 1px;
bottom: 1px;
background-color: var(--content--over-60a);
-webkit-transition: 0.4s;
transition: 0.4s;
border-radius: 50%;
}
input:checked + .slider {
background-color: $accent--under;
border-color: $content--over;
&::before {
background-color: $content--over;
}
}
input:focus + .slider {
box-shadow: 0 0 1px $green;
}
input:checked + .slider:before {
-webkit-transform: translateX(17px);
-ms-transform: translateX(17px);
transform: translateX(17px);
}
.modal-container_message {
text-align: center;
}