imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix indentation on all new settings CSS

Browse source
This commit is contained in:
Travis Ralston 2019-01-29 23:11:16 -07:00
parent bdf2bb5601
commit 68cd87a1c7
16 changed files with 214 additions and 214 deletions
Download patch file Download diff file Expand all files Collapse all files

88
res/css/structures/_TabbedView.scss
View file

@ -16,79 +16,79 @@ limitations under the License.
*/ */
.mx_TabbedView { .mx_TabbedView {
margin: 0; margin: 0;
padding: 0; padding: 0;
display: flex; display: flex;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.mx_TabbedView_tabLabels { .mx_TabbedView_tabLabels {
width: 150px; width: 150px;
max-width: 150px; max-width: 150px;
height: 100%; height: 100%;
color: $tab-label-fg-color; color: $tab-label-fg-color;
} }
.mx_TabbedView_tabLabel { .mx_TabbedView_tabLabel {
vertical-align: text-top; vertical-align: text-top;
cursor: pointer; cursor: pointer;
display: block; display: block;
border-radius: 3px; border-radius: 3px;
font-size: 12px; font-size: 12px;
font-weight: 600; font-weight: 600;
min-height: 20px; // use min-height instead of height to allow the label to overflow a bit min-height: 20px; // use min-height instead of height to allow the label to overflow a bit
margin-bottom: 6px; margin-bottom: 6px;
position: relative; position: relative;
} }
.mx_TabbedView_tabLabel_active { .mx_TabbedView_tabLabel_active {
background-color: $tab-label-active-bg-color; background-color: $tab-label-active-bg-color;
color: $tab-label-active-fg-color; color: $tab-label-active-fg-color;
} }
// TODO: Remove temporary hack alongside "visit old settings" tab // TODO: Remove temporary hack alongside "visit old settings" tab
.mx_TabbedView_tabLabel_TEMP_HACK { .mx_TabbedView_tabLabel_TEMP_HACK {
background-color: orange; background-color: orange;
} }
.mx_TabbedView_maskedIcon {; .mx_TabbedView_maskedIcon {;
margin-left: 6px; margin-left: 6px;
margin-right: 9px; margin-right: 9px;
margin-top: 1px; margin-top: 1px;
width: 14px; width: 14px;
height: 14px; height: 14px;
display: inline-block; display: inline-block;
} }
.mx_TabbedView_maskedIcon:before { .mx_TabbedView_maskedIcon:before {
display: inline-block; display: inline-block;
background-color: $tab-label-icon-bg-color; background-color: $tab-label-icon-bg-color;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-size: 14px; mask-size: 14px;
width: 14px; width: 14px;
height: 18px; height: 18px;
mask-position: center; mask-position: center;
content: ''; content: '';
vertical-align: middle; vertical-align: middle;
} }
.mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon:before { .mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon:before {
background-color: $tab-label-active-icon-bg-color; background-color: $tab-label-active-icon-bg-color;
} }
.mx_TabbedView_tabLabel_text { .mx_TabbedView_tabLabel_text {
vertical-align: middle; vertical-align: middle;
} }
.mx_TabbedView_tabPanel { .mx_TabbedView_tabPanel {
width: calc(100% - 320px); width: calc(100% - 320px);
display: inline-block; display: inline-block;
margin-left: 70px; margin-left: 70px;
flex-grow: 1; flex-grow: 1;
} }
.mx_TabbedView_tabPanelContent { .mx_TabbedView_tabPanelContent {
flex-grow: 1; flex-grow: 1;
min-width: 560px; min-width: 560px;
} }

8
res/css/views/dialogs/_RoomSettingsDialog.scss
View file

@ -18,17 +18,17 @@ limitations under the License.
// ========================================================== // ==========================================================
.mx_RoomSettingsDialog_settingsIcon:before { .mx_RoomSettingsDialog_settingsIcon:before {
mask-image: url('$(res)/img/feather-icons/settings.svg'); mask-image: url('$(res)/img/feather-icons/settings.svg');
} }
.mx_RoomSettingsDialog_securityIcon:before { .mx_RoomSettingsDialog_securityIcon:before {
mask-image: url('$(res)/img/feather-icons/lock.svg'); mask-image: url('$(res)/img/feather-icons/lock.svg');
} }
.mx_RoomSettingsDialog_rolesIcon:before { .mx_RoomSettingsDialog_rolesIcon:before {
mask-image: url('$(res)/img/feather-icons/users-sm.svg'); mask-image: url('$(res)/img/feather-icons/users-sm.svg');
} }
.mx_RoomSettingsDialog_warningIcon:before { .mx_RoomSettingsDialog_warningIcon:before {
mask-image: url('$(res)/img/feather-icons/warning-triangle.svg'); mask-image: url('$(res)/img/feather-icons/warning-triangle.svg');
} }

16
res/css/views/dialogs/_UserSettingsDialog.scss
View file

@ -18,33 +18,33 @@ limitations under the License.
// ========================================================== // ==========================================================
.mx_UserSettingsDialog_settingsIcon:before { .mx_UserSettingsDialog_settingsIcon:before {
mask-image: url('$(res)/img/feather-icons/settings.svg'); mask-image: url('$(res)/img/feather-icons/settings.svg');
} }
.mx_UserSettingsDialog_voiceIcon:before { .mx_UserSettingsDialog_voiceIcon:before {
mask-image: url('$(res)/img/feather-icons/phone.svg'); mask-image: url('$(res)/img/feather-icons/phone.svg');
} }
.mx_UserSettingsDialog_bellIcon:before { .mx_UserSettingsDialog_bellIcon:before {
mask-image: url('$(res)/img/feather-icons/notifications.svg'); mask-image: url('$(res)/img/feather-icons/notifications.svg');
} }
.mx_UserSettingsDialog_preferencesIcon:before { .mx_UserSettingsDialog_preferencesIcon:before {
mask-image: url('$(res)/img/feather-icons/sliders.svg'); mask-image: url('$(res)/img/feather-icons/sliders.svg');
} }
.mx_UserSettingsDialog_securityIcon:before { .mx_UserSettingsDialog_securityIcon:before {
mask-image: url('$(res)/img/feather-icons/lock.svg'); mask-image: url('$(res)/img/feather-icons/lock.svg');
} }
.mx_UserSettingsDialog_helpIcon:before { .mx_UserSettingsDialog_helpIcon:before {
mask-image: url('$(res)/img/feather-icons/help-circle.svg'); mask-image: url('$(res)/img/feather-icons/help-circle.svg');
} }
.mx_UserSettingsDialog_labsIcon:before { .mx_UserSettingsDialog_labsIcon:before {
mask-image: url('$(res)/img/feather-icons/flag.svg'); mask-image: url('$(res)/img/feather-icons/flag.svg');
} }
.mx_UserSettingsDialog_flairIcon:before { .mx_UserSettingsDialog_flairIcon:before {
mask-image: url('$(res)/img/feather-icons/flair.svg'); mask-image: url('$(res)/img/feather-icons/flair.svg');
} }

20
res/css/views/settings/_EmailAddresses.scss
View file

@ -15,29 +15,29 @@ limitations under the License.
*/ */
.mx_ExistingEmailAddress { .mx_ExistingEmailAddress {
margin-bottom: 5px; margin-bottom: 5px;
} }
.mx_ExistingEmailAddress_delete { .mx_ExistingEmailAddress_delete {
margin-right: 5px; margin-right: 5px;
cursor: pointer; cursor: pointer;
vertical-align: middle; vertical-align: middle;
} }
.mx_ExistingEmailAddress_email { .mx_ExistingEmailAddress_email {
vertical-align: middle; vertical-align: middle;
} }
.mx_ExistingEmailAddress_promptText { .mx_ExistingEmailAddress_promptText {
margin-right: 10px; margin-right: 10px;
} }
.mx_ExistingEmailAddress_confirmBtn { .mx_ExistingEmailAddress_confirmBtn {
margin-right: 5px; margin-right: 5px;
} }
.mx_EmailAddresses_new .mx_Field input { .mx_EmailAddresses_new .mx_Field input {
// Use 100% of the space available for the input, but don't let the 10px // Use 100% of the space available for the input, but don't let the 10px
// padding on either side of the input to push it out of alignment. // padding on either side of the input to push it out of alignment.
width: calc(100% - 20px); width: calc(100% - 20px);
} }

28
res/css/views/settings/_PhoneNumbers.scss
View file

@ -15,42 +15,42 @@ limitations under the License.
*/ */
.mx_ExistingPhoneNumber { .mx_ExistingPhoneNumber {
margin-bottom: 5px; margin-bottom: 5px;
} }
.mx_ExistingPhoneNumber_delete { .mx_ExistingPhoneNumber_delete {
margin-right: 5px; margin-right: 5px;
cursor: pointer; cursor: pointer;
vertical-align: middle; vertical-align: middle;
} }
.mx_ExistingPhoneNumber_address { .mx_ExistingPhoneNumber_address {
vertical-align: middle; vertical-align: middle;
} }
.mx_ExistingPhoneNumber_promptText { .mx_ExistingPhoneNumber_promptText {
margin-right: 10px; margin-right: 10px;
} }
.mx_ExistingPhoneNumber_confirmBtn { .mx_ExistingPhoneNumber_confirmBtn {
margin-right: 5px; margin-right: 5px;
} }
.mx_PhoneNumbers_new .mx_Field input { .mx_PhoneNumbers_new .mx_Field input {
// Use 100% of the space available for the input, but don't let the 10px // Use 100% of the space available for the input, but don't let the 10px
// padding on either side of the input to push it out of alignment. // padding on either side of the input to push it out of alignment.
width: calc(100% - 20px); width: calc(100% - 20px);
} }
.mx_PhoneNumbers_input { .mx_PhoneNumbers_input {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.mx_PhoneNumbers_input > .mx_Field { .mx_PhoneNumbers_input > .mx_Field {
flex-grow: 1; flex-grow: 1;
} }
.mx_PhoneNumbers_country { .mx_PhoneNumbers_country {
width: 80px; width: 80px;
} }

110
res/css/views/settings/_ProfileSettings.scss
View file

@ -15,111 +15,111 @@ limitations under the License.
*/ */
.mx_ProfileSettings_profile { .mx_ProfileSettings_profile {
display: flex; display: flex;
} }
.mx_ProfileSettings_controls { .mx_ProfileSettings_controls {
flex-grow: 1; flex-grow: 1;
} }
.mx_ProfileSettings_controls .mx_Field #profileDisplayName, .mx_ProfileSettings_controls .mx_Field #profileDisplayName,
.mx_ProfileSettings_controls .mx_Field #profileTopic { .mx_ProfileSettings_controls .mx_Field #profileTopic {
width: calc(100% - 20px); // subtract 10px padding on left and right width: calc(100% - 20px); // subtract 10px padding on left and right
} }
.mx_ProfileSettings_controls .mx_Field #profileTopic { .mx_ProfileSettings_controls .mx_Field #profileTopic {
height: 4em; height: 4em;
} }
.mx_ProfileSettings_controls .mx_Field:first-child { .mx_ProfileSettings_controls .mx_Field:first-child {
margin-top: 0; margin-top: 0;
} }
.mx_ProfileSettings_avatar { .mx_ProfileSettings_avatar {
width: 88px; width: 88px;
height: 88px; height: 88px;
margin-left: 13px; margin-left: 13px;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
} }
.mx_ProfileSettings_avatar > * { .mx_ProfileSettings_avatar > * {
display: block; display: block;
width: 88px; width: 88px;
height: 88px; height: 88px;
border-radius: 4px; border-radius: 4px;
} }
.mx_ProfileSettings_avatar .mx_ProfileSettings_avatarOverlay_disabled { .mx_ProfileSettings_avatar .mx_ProfileSettings_avatarOverlay_disabled {
cursor: default; cursor: default;
} }
.mx_ProfileSettings_avatar .mx_ProfileSettings_avatarPlaceholder { .mx_ProfileSettings_avatar .mx_ProfileSettings_avatarPlaceholder {
background-color: $settings-profile-placeholder-bg-color; background-color: $settings-profile-placeholder-bg-color;
} }
.mx_ProfileSettings_avatarOverlay { .mx_ProfileSettings_avatarOverlay {
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
display: none; display: none;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
font-size: 10px; font-size: 10px;
} }
.mx_ProfileSettings_avatar:hover .mx_ProfileSettings_avatarOverlay:not(.mx_ProfileSettings_avatarOverlay_disabled) { .mx_ProfileSettings_avatar:hover .mx_ProfileSettings_avatarOverlay:not(.mx_ProfileSettings_avatarOverlay_disabled) {
display: inline-block; display: inline-block;
opacity: 0.5 !important; opacity: 0.5 !important;
color: $settings-profile-overlay-fg-color !important; color: $settings-profile-overlay-fg-color !important;
background-color: $settings-profile-overlay-bg-color !important; background-color: $settings-profile-overlay-bg-color !important;
} }
.mx_ProfileSettings_avatarOverlay_show { .mx_ProfileSettings_avatarOverlay_show {
display: inline-block; display: inline-block;
opacity: 1; opacity: 1;
color: $settings-profile-overlay-placeholder-fg-color; color: $settings-profile-overlay-placeholder-fg-color;
background-color: $settings-profile-overlay-placeholder-bg-color; background-color: $settings-profile-overlay-placeholder-bg-color;
} }
.mx_ProfileSettings_avatarOverlayText { .mx_ProfileSettings_avatarOverlayText {
display: block; display: block;
margin-top: 17px; margin-top: 17px;
margin-bottom: 8px; margin-bottom: 8px;
} }
.mx_ProfileSettings_noAvatarText { .mx_ProfileSettings_noAvatarText {
display: block; display: block;
margin: 34px auto auto; margin: 34px auto auto;
} }
.mx_ProfileSettings_avatarOverlayImgContainer { .mx_ProfileSettings_avatarOverlayImgContainer {
position: relative; position: relative;
width: 14px; width: 14px;
height: 14px; height: 14px;
margin: auto; margin: auto;
} }
.mx_ProfileSettings_avatarOverlayImg:before { .mx_ProfileSettings_avatarOverlayImg:before {
background-color: $settings-profile-overlay-placeholder-fg-color; background-color: $settings-profile-overlay-placeholder-fg-color;
mask: url("$(res)/img/feather-icons/upload.svg"); mask: url("$(res)/img/feather-icons/upload.svg");
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-size: 14px; mask-size: 14px;
mask-position: center; mask-position: center;
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
} }
.mx_ProfileSettings_avatar:hover .mx_ProfileSettings_avatarOverlayImg:before { .mx_ProfileSettings_avatar:hover .mx_ProfileSettings_avatarOverlayImg:before {
background-color: $settings-profile-overlay-fg-color !important; background-color: $settings-profile-overlay-fg-color !important;
} }
.mx_ProfileSettings_avatarUpload { .mx_ProfileSettings_avatarUpload {
display: none; display: none;
} }

4
res/css/views/settings/tabs/_GeneralRoomSettingsTab.scss
View file

@ -15,9 +15,9 @@ limitations under the License.
*/ */
.mx_GeneralRoomSettingsTab_profileSection { .mx_GeneralRoomSettingsTab_profileSection {
margin-top: 10px; margin-top: 10px;
} }
.mx_GeneralRoomSettingsTab .mx_AliasSettings .mx_Field select { .mx_GeneralRoomSettingsTab .mx_AliasSettings .mx_Field select {
width: 100%; width: 100%;
} }

18
res/css/views/settings/tabs/_GeneralUserSettingsTab.scss
View file

@ -16,31 +16,31 @@ limitations under the License.
.mx_GeneralUserSettingsTab_changePassword, .mx_GeneralUserSettingsTab_changePassword,
.mx_GeneralUserSettingsTab_themeSection { .mx_GeneralUserSettingsTab_themeSection {
display: block; display: block;
} }
.mx_GeneralUserSettingsTab_changePassword .mx_Field, .mx_GeneralUserSettingsTab_changePassword .mx_Field,
.mx_GeneralUserSettingsTab_themeSection .mx_Field { .mx_GeneralUserSettingsTab_themeSection .mx_Field {
display: block; display: block;
margin-right: 100px; // Align with the other fields on the page margin-right: 100px; // Align with the other fields on the page
} }
.mx_GeneralUserSettingsTab_changePassword .mx_Field input { .mx_GeneralUserSettingsTab_changePassword .mx_Field input {
display: block; display: block;
width: calc(100% - 20px); // subtract 10px padding on left and right width: calc(100% - 20px); // subtract 10px padding on left and right
} }
.mx_GeneralUserSettingsTab_changePassword .mx_Field:first-child { .mx_GeneralUserSettingsTab_changePassword .mx_Field:first-child {
margin-top: 0; margin-top: 0;
} }
.mx_GeneralUserSettingsTab_themeSection .mx_Field select { .mx_GeneralUserSettingsTab_themeSection .mx_Field select {
display: block; display: block;
width: 100%; width: 100%;
} }
.mx_GeneralUserSettingsTab_accountSection > .mx_EmailAddresses, .mx_GeneralUserSettingsTab_accountSection > .mx_EmailAddresses,
.mx_GeneralUserSettingsTab_accountSection > .mx_PhoneNumbers, .mx_GeneralUserSettingsTab_accountSection > .mx_PhoneNumbers,
.mx_GeneralUserSettingsTab_languageInput { .mx_GeneralUserSettingsTab_languageInput {
margin-right: 100px; // Align with the other fields on the page margin-right: 100px; // Align with the other fields on the page
} }

6
res/css/views/settings/tabs/_HelpSettingsTab.scss
View file

@ -15,10 +15,10 @@ limitations under the License.
*/ */
.mx_HelpSettingsTab_debugButton { .mx_HelpSettingsTab_debugButton {
margin-bottom: 5px; margin-bottom: 5px;
margin-top: 5px; margin-top: 5px;
} }
.mx_HelpSettingsTab span.mx_AccessibleButton { .mx_HelpSettingsTab span.mx_AccessibleButton {
word-break: break-word; word-break: break-word;
} }

2
res/css/views/settings/tabs/_NotificationSettingsTab.scss
View file

@ -15,5 +15,5 @@ limitations under the License.
*/ */
.mx_NotificationSettingsTab .mx_SettingsTab_heading { .mx_NotificationSettingsTab .mx_SettingsTab_heading {
margin-bottom: 10px; // Give some spacing between the title and the first elements margin-bottom: 10px; // Give some spacing between the title and the first elements
} }

10
res/css/views/settings/tabs/_PreferencesSettingsTab.scss
View file

@ -15,13 +15,13 @@ limitations under the License.
*/ */
.mx_PreferencesSettingsTab .mx_Field { .mx_PreferencesSettingsTab .mx_Field {
margin-right: 100px; // Align with the rest of the controls margin-right: 100px; // Align with the rest of the controls
} }
.mx_PreferencesSettingsTab .mx_Field input { .mx_PreferencesSettingsTab .mx_Field input {
display: block; display: block;
// Subtract 10px padding on left and right // Subtract 10px padding on left and right
// This is to keep the input aligned with the rest of the tab's controls. // This is to keep the input aligned with the rest of the tab's controls.
width: calc(100% - 20px); width: calc(100% - 20px);
} }

6
res/css/views/settings/tabs/_RolesRoomSettingsTab.scss
View file

@ -15,10 +15,10 @@ limitations under the License.
*/ */
.mx_RolesRoomSettingsTab ul { .mx_RolesRoomSettingsTab ul {
margin-bottom: 0; margin-bottom: 0;
} }
.mx_RolesRoomSettingsTab_unbanBtn { .mx_RolesRoomSettingsTab_unbanBtn {
margin-right: 10px; margin-right: 10px;
margin-bottom: 5px; margin-bottom: 5px;
} }

18
res/css/views/settings/tabs/_SecurityRoomSettingsTab.scss
View file

@ -15,20 +15,20 @@ limitations under the License.
*/ */
.mx_SecurityRoomSettingsTab label { .mx_SecurityRoomSettingsTab label {
display: block; display: block;
} }
.mx_SecurityRoomSettingsTab_warning { .mx_SecurityRoomSettingsTab_warning {
display: block; display: block;
img { img {
vertical-align: middle; vertical-align: middle;
margin-right: 5px; margin-right: 5px;
margin-left: 3px; margin-left: 3px;
margin-bottom: 5px; margin-bottom: 5px;
} }
} }
.mx_SecurityRoomSettingsTab_encryptionSection { .mx_SecurityRoomSettingsTab_encryptionSection {
margin-bottom: 25px; margin-bottom: 25px;
} }

26
res/css/views/settings/tabs/_SecuritySettingsTab.scss
View file

@ -15,39 +15,39 @@ limitations under the License.
*/ */
.mx_SecuritySettingsTab .mx_DevicesPanel { .mx_SecuritySettingsTab .mx_DevicesPanel {
// Normally the panel is 880px, however this can easily overflow the container. // Normally the panel is 880px, however this can easily overflow the container.
// TODO: Fix the table to not be squishy // TODO: Fix the table to not be squishy
width: auto; width: auto;
max-width: 880px; max-width: 880px;
} }
.mx_SecuritySettingsTab_deviceInfo { .mx_SecuritySettingsTab_deviceInfo {
display: table; display: table;
padding-left: 0; padding-left: 0;
} }
.mx_SecuritySettingsTab_deviceInfo > li { .mx_SecuritySettingsTab_deviceInfo > li {
display: table-row; display: table-row;
} }
.mx_SecuritySettingsTab_deviceInfo > li > label, .mx_SecuritySettingsTab_deviceInfo > li > label,
.mx_SecuritySettingsTab_deviceInfo > li > span { .mx_SecuritySettingsTab_deviceInfo > li > span {
display: table-cell; display: table-cell;
padding-right: 1em; padding-right: 1em;
} }
.mx_SecuritySettingsTab_importExportButtons .mx_AccessibleButton { .mx_SecuritySettingsTab_importExportButtons .mx_AccessibleButton {
margin-right: 10px; margin-right: 10px;
} }
.mx_SecuritySettingsTab_importExportButtons { .mx_SecuritySettingsTab_importExportButtons {
margin-bottom: 15px; margin-bottom: 15px;
} }
.mx_SecuritySettingsTab_ignoredUser { .mx_SecuritySettingsTab_ignoredUser {
margin-bottom: 5px; margin-bottom: 5px;
} }
.mx_SecuritySettingsTab_ignoredUser .mx_AccessibleButton { .mx_SecuritySettingsTab_ignoredUser .mx_AccessibleButton {
margin-right: 10px; margin-right: 10px;
} }

60
res/css/views/settings/tabs/_SettingsTab.scss
View file

@ -15,55 +15,55 @@ limitations under the License.
*/ */
.mx_SettingsTab_heading { .mx_SettingsTab_heading {
font-size: 20px; font-size: 20px;
font-weight: 600; font-weight: 600;
color: $primary-fg-color; color: $primary-fg-color;
} }
.mx_SettingsTab_subheading { .mx_SettingsTab_subheading {
font-size: 14px; font-size: 14px;
display: block; display: block;
font-family: $font-family; font-family: $font-family;
font-weight: 600; font-weight: 600;
color: $primary-fg-color; color: $primary-fg-color;
margin-bottom: 10px; margin-bottom: 10px;
margin-top: 12px; margin-top: 12px;
} }
.mx_SettingsTab_subsectionText { .mx_SettingsTab_subsectionText {
color: $settings-subsection-fg-color; color: $settings-subsection-fg-color;
font-size: 12px; font-size: 12px;
padding-bottom: 12px; padding-bottom: 12px;
display: block; display: block;
margin: 0 100px 0 0; // Align with the rest of the view margin: 0 100px 0 0; // Align with the rest of the view
} }
.mx_SettingsTab_section .mx_SettingsFlag { .mx_SettingsTab_section .mx_SettingsFlag {
margin-right: 100px; margin-right: 100px;
height: 25px; height: 25px;
margin-bottom: 10px; margin-bottom: 10px;
} }
.mx_SettingsTab_section .mx_SettingsFlag .mx_SettingsFlag_label { .mx_SettingsTab_section .mx_SettingsFlag .mx_SettingsFlag_label {
vertical-align: bottom; vertical-align: bottom;
display: inline-block; display: inline-block;
font-size: 12px; font-size: 12px;
color: $primary-fg-color; color: $primary-fg-color;
max-width: calc(100% - 48px); // Force word wrap instead of colliding with the switch max-width: calc(100% - 48px); // Force word wrap instead of colliding with the switch
} }
.mx_SettingsTab_section .mx_SettingsFlag .mx_ToggleSwitch { .mx_SettingsTab_section .mx_SettingsFlag .mx_ToggleSwitch {
float: right; float: right;
} }
.mx_SettingsTab_linkBtn { .mx_SettingsTab_linkBtn {
cursor: pointer; cursor: pointer;
color: $accent-color; color: $accent-color;
word-break: break-all; word-break: break-all;
} }
.mx_SettingsTab .mx_SettingsTab_subheading:nth-child(n + 2) { .mx_SettingsTab .mx_SettingsTab_subheading:nth-child(n + 2) {
// These views have a lot of the same repetitive information on it, so // These views have a lot of the same repetitive information on it, so
// give them more visual distinction between the sections. // give them more visual distinction between the sections.
margin-top: 30px; margin-top: 30px;
} }

8
res/css/views/settings/tabs/_VoiceSettingsTab.scss
View file

@ -15,14 +15,14 @@ limitations under the License.
*/ */
.mx_VoiceSettingsTab .mx_Field select { .mx_VoiceSettingsTab .mx_Field select {
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
} }
.mx_VoiceSettingsTab .mx_Field { .mx_VoiceSettingsTab .mx_Field {
margin-right: 100px; // align with the rest of the fields margin-right: 100px; // align with the rest of the fields
} }
.mx_VoiceSettingsTab_missingMediaPermissions { .mx_VoiceSettingsTab_missingMediaPermissions {
margin-bottom: 15px; margin-bottom: 15px;
} }