Break ThemeChoicePanel into a separate component (#6998)
* Break ThemeChoicePanel into a separate component * Tests for ThemeChoicePanel * i18n fixes * Fix copyright for ThemeChoicePanel
This commit is contained in:
parent
d188d32423
commit
4b903b9fbd
8 changed files with 508 additions and 230 deletions
|
@ -24,78 +24,6 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
.mx_AppearanceUserSettingsTab_themeSection {
|
||||
$radio-bg-color: $input-darker-bg-color;
|
||||
color: $primary-content;
|
||||
|
||||
> .mx_ThemeSelectors {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
||||
margin-top: 4px;
|
||||
margin-bottom: 30px;
|
||||
|
||||
> .mx_RadioButton {
|
||||
padding: $font-16px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 10px;
|
||||
width: 180px;
|
||||
|
||||
background: $radio-bg-color;
|
||||
opacity: 0.4;
|
||||
|
||||
flex-shrink: 1;
|
||||
flex-grow: 0;
|
||||
|
||||
margin-right: 15px;
|
||||
margin-top: 10px;
|
||||
|
||||
font-weight: 600;
|
||||
color: $muted-fg-color;
|
||||
|
||||
> span {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
> .mx_RadioButton_enabled {
|
||||
opacity: 1;
|
||||
|
||||
// These colors need to be hardcoded because they don't change with the theme
|
||||
&.mx_ThemeSelector_light {
|
||||
background-color: #f3f8fd;
|
||||
color: #2e2f32;
|
||||
}
|
||||
|
||||
&.mx_ThemeSelector_dark {
|
||||
// 5% lightened version of 181b21
|
||||
background-color: #25282e;
|
||||
color: #f3f8fd;
|
||||
|
||||
> input > div {
|
||||
border-color: $input-darker-bg-color;
|
||||
> div {
|
||||
border-color: $input-darker-bg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_ThemeSelector_black {
|
||||
background-color: #000000;
|
||||
color: #f3f8fd;
|
||||
|
||||
> input > div {
|
||||
border-color: $input-darker-bg-color;
|
||||
> div {
|
||||
border-color: $input-darker-bg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AppearanceUserSettingsTab_Advanced {
|
||||
color: $primary-content;
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue