MDL-71403 message: Bootstrap controls for message preferences.

Replicates changes made to notification preferences in e41b3485.
The templates for each are similar enough than one can be used
from the other. Remove redundant styles for previous controls.
This commit is contained in:
Paul Holden 2021-04-23 21:43:11 +01:00
parent fe04d078a4
commit 10d853a891
6 changed files with 14 additions and 207 deletions

View file

@ -74,61 +74,6 @@
height: 30px;
line-height: 30px;
}
.preference-state {
margin: 0;
padding: 0;
display: inline-block;
vertical-align: middle;
input[type="checkbox"]:checked + .preference-state-status-container {
background-color: #5cb85c;
.on-text {
display: inline-block;
}
.off-text {
display: none;
}
}
.preference-state-status-container {
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 4px;
background-color: #d9534f;
color: #fff;
cursor: pointer;
.loading-icon {
display: none;
}
.on-text {
display: none;
}
.off-text {
display: inline-block;
}
}
&.loading {
input[type="checkbox"]:checked + .preference-state-status-container {
.on-text,
.off-text {
display: none;
}
}
.preference-state-status-container {
.on-text,
.off-text {
display: none;
}
.loading-icon {
display: block;
}
}
}
}
&.loading {
.preference-name {
.loading-icon {

View file

@ -15110,40 +15110,6 @@ a.ygtvspacer:hover {
text-align: center;
height: 30px;
line-height: 30px; }
.preferences-container .preference-table .preference-row .preference-state {
margin: 0;
padding: 0;
display: inline-block;
vertical-align: middle; }
.preferences-container .preference-table .preference-row .preference-state input[type="checkbox"]:checked + .preference-state-status-container {
background-color: #5cb85c; }
.preferences-container .preference-table .preference-row .preference-state input[type="checkbox"]:checked + .preference-state-status-container .on-text {
display: inline-block; }
.preferences-container .preference-table .preference-row .preference-state input[type="checkbox"]:checked + .preference-state-status-container .off-text {
display: none; }
.preferences-container .preference-table .preference-row .preference-state .preference-state-status-container {
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 4px;
background-color: #d9534f;
color: #fff;
cursor: pointer; }
.preferences-container .preference-table .preference-row .preference-state .preference-state-status-container .loading-icon {
display: none; }
.preferences-container .preference-table .preference-row .preference-state .preference-state-status-container .on-text {
display: none; }
.preferences-container .preference-table .preference-row .preference-state .preference-state-status-container .off-text {
display: inline-block; }
.preferences-container .preference-table .preference-row .preference-state.loading input[type="checkbox"]:checked + .preference-state-status-container .on-text,
.preferences-container .preference-table .preference-row .preference-state.loading input[type="checkbox"]:checked + .preference-state-status-container .off-text {
display: none; }
.preferences-container .preference-table .preference-row .preference-state.loading .preference-state-status-container .on-text,
.preferences-container .preference-table .preference-row .preference-state.loading .preference-state-status-container .off-text {
display: none; }
.preferences-container .preference-table .preference-row .preference-state.loading .preference-state-status-container .loading-icon {
display: block; }
.preferences-container .preference-table .preference-row.loading .preference-name .loading-icon {
display: block; }