OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #2528 from matrix-org/travis/settings/fix-css-indentation 

Fix indentation on all new settings CSS
pull/21833/head
Travis Ralston 2019-01-30 00:21:37 -07:00 committed by GitHub
parent bdf2bb5601 68cd87a1c7
commit 728e92ccb3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 214 additions and 214 deletions
Show Stats 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 {
margin: 0;
padding: 0;
display: flex;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display: flex;
width: 100%;
height: 100%;
}
.mx_TabbedView_tabLabels {
width: 150px;
max-width: 150px;
height: 100%;
color: $tab-label-fg-color;
width: 150px;
max-width: 150px;
height: 100%;
color: $tab-label-fg-color;
}
.mx_TabbedView_tabLabel {
vertical-align: text-top;
cursor: pointer;
display: block;
border-radius: 3px;
font-size: 12px;
font-weight: 600;
min-height: 20px; // use min-height instead of height to allow the label to overflow a bit
margin-bottom: 6px;
position: relative;
vertical-align: text-top;
cursor: pointer;
display: block;
border-radius: 3px;
font-size: 12px;
font-weight: 600;
min-height: 20px; // use min-height instead of height to allow the label to overflow a bit
margin-bottom: 6px;
position: relative;
}
.mx_TabbedView_tabLabel_active {
background-color: $tab-label-active-bg-color;
color: $tab-label-active-fg-color;
background-color: $tab-label-active-bg-color;
color: $tab-label-active-fg-color;
}
// TODO: Remove temporary hack alongside "visit old settings" tab
.mx_TabbedView_tabLabel_TEMP_HACK {
background-color: orange;
background-color: orange;
}
.mx_TabbedView_maskedIcon {;
margin-left: 6px;
margin-right: 9px;
margin-top: 1px;
width: 14px;
height: 14px;
display: inline-block;
margin-left: 6px;
margin-right: 9px;
margin-top: 1px;
width: 14px;
height: 14px;
display: inline-block;
}
.mx_TabbedView_maskedIcon:before {
display: inline-block;
background-color: $tab-label-icon-bg-color;
mask-repeat: no-repeat;
mask-size: 14px;
width: 14px;
height: 18px;
mask-position: center;
content: '';
vertical-align: middle;
display: inline-block;
background-color: $tab-label-icon-bg-color;
mask-repeat: no-repeat;
mask-size: 14px;
width: 14px;
height: 18px;
mask-position: center;
content: '';
vertical-align: middle;
}
.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 {
vertical-align: middle;
vertical-align: middle;
}
.mx_TabbedView_tabPanel {
width: calc(100% - 320px);
display: inline-block;
margin-left: 70px;
flex-grow: 1;
width: calc(100% - 320px);
display: inline-block;
margin-left: 70px;
flex-grow: 1;
}
.mx_TabbedView_tabPanelContent {
flex-grow: 1;
min-width: 560px;
flex-grow: 1;
min-width: 560px;
}

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

@ -18,17 +18,17 @@ limitations under the License.
// ==========================================================
.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 {
mask-image: url('$(res)/img/feather-icons/lock.svg');
mask-image: url('$(res)/img/feather-icons/lock.svg');
}
.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 {
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 {
mask-image: url('$(res)/img/feather-icons/settings.svg');
mask-image: url('$(res)/img/feather-icons/settings.svg');
}
.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 {
mask-image: url('$(res)/img/feather-icons/notifications.svg');
mask-image: url('$(res)/img/feather-icons/notifications.svg');
}
.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 {
mask-image: url('$(res)/img/feather-icons/lock.svg');
mask-image: url('$(res)/img/feather-icons/lock.svg');
}
.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 {
mask-image: url('$(res)/img/feather-icons/flag.svg');
mask-image: url('$(res)/img/feather-icons/flag.svg');
}
.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 {
margin-bottom: 5px;
margin-bottom: 5px;
}
.mx_ExistingEmailAddress_delete {
margin-right: 5px;
cursor: pointer;
vertical-align: middle;
margin-right: 5px;
cursor: pointer;
vertical-align: middle;
}
.mx_ExistingEmailAddress_email {
vertical-align: middle;
vertical-align: middle;
}
.mx_ExistingEmailAddress_promptText {
margin-right: 10px;
margin-right: 10px;
}
.mx_ExistingEmailAddress_confirmBtn {
margin-right: 5px;
margin-right: 5px;
}
.mx_EmailAddresses_new .mx_Field input {
// 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.
width: calc(100% - 20px);
// 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.
width: calc(100% - 20px);
}

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

@ -15,42 +15,42 @@ limitations under the License.
*/
.mx_ExistingPhoneNumber {
margin-bottom: 5px;
margin-bottom: 5px;
}
.mx_ExistingPhoneNumber_delete {
margin-right: 5px;
cursor: pointer;
vertical-align: middle;
margin-right: 5px;
cursor: pointer;
vertical-align: middle;
}
.mx_ExistingPhoneNumber_address {
vertical-align: middle;
vertical-align: middle;
}
.mx_ExistingPhoneNumber_promptText {
margin-right: 10px;
margin-right: 10px;
}
.mx_ExistingPhoneNumber_confirmBtn {
margin-right: 5px;
margin-right: 5px;
}
.mx_PhoneNumbers_new .mx_Field input {
// 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.
width: calc(100% - 20px);
// 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.
width: calc(100% - 20px);
}
.mx_PhoneNumbers_input {
display: flex;
align-items: center;
display: flex;
align-items: center;
}
.mx_PhoneNumbers_input > .mx_Field {
flex-grow: 1;
flex-grow: 1;
}
.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 {
display: flex;
display: flex;
}
.mx_ProfileSettings_controls {
flex-grow: 1;
flex-grow: 1;
}
.mx_ProfileSettings_controls .mx_Field #profileDisplayName,
.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 {
height: 4em;
height: 4em;
}
.mx_ProfileSettings_controls .mx_Field:first-child {
margin-top: 0;
margin-top: 0;
}
.mx_ProfileSettings_avatar {
width: 88px;
height: 88px;
margin-left: 13px;
position: relative;
cursor: pointer;
width: 88px;
height: 88px;
margin-left: 13px;
position: relative;
cursor: pointer;
}
.mx_ProfileSettings_avatar > * {
display: block;
width: 88px;
height: 88px;
border-radius: 4px;
display: block;
width: 88px;
height: 88px;
border-radius: 4px;
}
.mx_ProfileSettings_avatar .mx_ProfileSettings_avatarOverlay_disabled {
cursor: default;
cursor: default;
}
.mx_ProfileSettings_avatar .mx_ProfileSettings_avatarPlaceholder {
background-color: $settings-profile-placeholder-bg-color;
background-color: $settings-profile-placeholder-bg-color;
}
.mx_ProfileSettings_avatarOverlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: none;
text-align: center;
vertical-align: middle;
font-size: 10px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: none;
text-align: center;
vertical-align: middle;
font-size: 10px;
}
.mx_ProfileSettings_avatar:hover .mx_ProfileSettings_avatarOverlay:not(.mx_ProfileSettings_avatarOverlay_disabled) {
display: inline-block;
opacity: 0.5 !important;
color: $settings-profile-overlay-fg-color !important;
background-color: $settings-profile-overlay-bg-color !important;
display: inline-block;
opacity: 0.5 !important;
color: $settings-profile-overlay-fg-color !important;
background-color: $settings-profile-overlay-bg-color !important;
}
.mx_ProfileSettings_avatarOverlay_show {
display: inline-block;
opacity: 1;
color: $settings-profile-overlay-placeholder-fg-color;
background-color: $settings-profile-overlay-placeholder-bg-color;
display: inline-block;
opacity: 1;
color: $settings-profile-overlay-placeholder-fg-color;
background-color: $settings-profile-overlay-placeholder-bg-color;
}
.mx_ProfileSettings_avatarOverlayText {
display: block;
margin-top: 17px;
margin-bottom: 8px;
display: block;
margin-top: 17px;
margin-bottom: 8px;
}
.mx_ProfileSettings_noAvatarText {
display: block;
margin: 34px auto auto;
display: block;
margin: 34px auto auto;
}
.mx_ProfileSettings_avatarOverlayImgContainer {
position: relative;
width: 14px;
height: 14px;
margin: auto;
position: relative;
width: 14px;
height: 14px;
margin: auto;
}
.mx_ProfileSettings_avatarOverlayImg:before {
background-color: $settings-profile-overlay-placeholder-fg-color;
mask: url("$(res)/img/feather-icons/upload.svg");
mask-repeat: no-repeat;
mask-size: 14px;
mask-position: center;
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: $settings-profile-overlay-placeholder-fg-color;
mask: url("$(res)/img/feather-icons/upload.svg");
mask-repeat: no-repeat;
mask-size: 14px;
mask-position: center;
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.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 {
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 {
margin-top: 10px;
margin-top: 10px;
}
.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_themeSection {
display: block;
display: block;
}
.mx_GeneralUserSettingsTab_changePassword .mx_Field,
.mx_GeneralUserSettingsTab_themeSection .mx_Field {
display: block;
margin-right: 100px; // Align with the other fields on the page
display: block;
margin-right: 100px; // Align with the other fields on the page
}
.mx_GeneralUserSettingsTab_changePassword .mx_Field input {
display: block;
width: calc(100% - 20px); // subtract 10px padding on left and right
display: block;
width: calc(100% - 20px); // subtract 10px padding on left and right
}
.mx_GeneralUserSettingsTab_changePassword .mx_Field:first-child {
margin-top: 0;
margin-top: 0;
}
.mx_GeneralUserSettingsTab_themeSection .mx_Field select {
display: block;
width: 100%;
display: block;
width: 100%;
}
.mx_GeneralUserSettingsTab_accountSection > .mx_EmailAddresses,
.mx_GeneralUserSettingsTab_accountSection > .mx_PhoneNumbers,
.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 {
margin-bottom: 5px;
margin-top: 5px;
margin-bottom: 5px;
margin-top: 5px;
}
.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 {
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 {
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 {
display: block;
display: block;
// Subtract 10px padding on left and right
// This is to keep the input aligned with the rest of the tab's controls.
width: calc(100% - 20px);
// Subtract 10px padding on left and right
// This is to keep the input aligned with the rest of the tab's controls.
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 {
margin-bottom: 0;
margin-bottom: 0;
}
.mx_RolesRoomSettingsTab_unbanBtn {
margin-right: 10px;
margin-bottom: 5px;
margin-right: 10px;
margin-bottom: 5px;
}

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

@ -15,20 +15,20 @@ limitations under the License.
*/
.mx_SecurityRoomSettingsTab label {
display: block;
display: block;
}
.mx_SecurityRoomSettingsTab_warning {
display: block;
display: block;
img {
vertical-align: middle;
margin-right: 5px;
margin-left: 3px;
margin-bottom: 5px;
}
img {
vertical-align: middle;
margin-right: 5px;
margin-left: 3px;
margin-bottom: 5px;
}
}
.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 {
// Normally the panel is 880px, however this can easily overflow the container.
// TODO: Fix the table to not be squishy
width: auto;
max-width: 880px;
// Normally the panel is 880px, however this can easily overflow the container.
// TODO: Fix the table to not be squishy
width: auto;
max-width: 880px;
}
.mx_SecuritySettingsTab_deviceInfo {
display: table;
padding-left: 0;
display: table;
padding-left: 0;
}
.mx_SecuritySettingsTab_deviceInfo > li {
display: table-row;
display: table-row;
}
.mx_SecuritySettingsTab_deviceInfo > li > label,
.mx_SecuritySettingsTab_deviceInfo > li > span {
display: table-cell;
padding-right: 1em;
display: table-cell;
padding-right: 1em;
}
.mx_SecuritySettingsTab_importExportButtons .mx_AccessibleButton {
margin-right: 10px;
margin-right: 10px;
}
.mx_SecuritySettingsTab_importExportButtons {
margin-bottom: 15px;
margin-bottom: 15px;
}
.mx_SecuritySettingsTab_ignoredUser {
margin-bottom: 5px;
margin-bottom: 5px;
}
.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 {
font-size: 20px;
font-weight: 600;
color: $primary-fg-color;
font-size: 20px;
font-weight: 600;
color: $primary-fg-color;
}
.mx_SettingsTab_subheading {
font-size: 14px;
display: block;
font-family: $font-family;
font-weight: 600;
color: $primary-fg-color;
margin-bottom: 10px;
margin-top: 12px;
font-size: 14px;
display: block;
font-family: $font-family;
font-weight: 600;
color: $primary-fg-color;
margin-bottom: 10px;
margin-top: 12px;
}
.mx_SettingsTab_subsectionText {
color: $settings-subsection-fg-color;
font-size: 12px;
padding-bottom: 12px;
display: block;
margin: 0 100px 0 0; // Align with the rest of the view
color: $settings-subsection-fg-color;
font-size: 12px;
padding-bottom: 12px;
display: block;
margin: 0 100px 0 0; // Align with the rest of the view
}
.mx_SettingsTab_section .mx_SettingsFlag {
margin-right: 100px;
height: 25px;
margin-bottom: 10px;
margin-right: 100px;
height: 25px;
margin-bottom: 10px;
}
.mx_SettingsTab_section .mx_SettingsFlag .mx_SettingsFlag_label {
vertical-align: bottom;
display: inline-block;
font-size: 12px;
color: $primary-fg-color;
max-width: calc(100% - 48px); // Force word wrap instead of colliding with the switch
vertical-align: bottom;
display: inline-block;
font-size: 12px;
color: $primary-fg-color;
max-width: calc(100% - 48px); // Force word wrap instead of colliding with the switch
}
.mx_SettingsTab_section .mx_SettingsFlag .mx_ToggleSwitch {
float: right;
float: right;
}
.mx_SettingsTab_linkBtn {
cursor: pointer;
color: $accent-color;
word-break: break-all;
cursor: pointer;
color: $accent-color;
word-break: break-all;
}
.mx_SettingsTab .mx_SettingsTab_subheading:nth-child(n + 2) {
// These views have a lot of the same repetitive information on it, so
// give them more visual distinction between the sections.
margin-top: 30px;
// These views have a lot of the same repetitive information on it, so
// give them more visual distinction between the sections.
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 {
width: 100%;
max-width: 100%;
width: 100%;
max-width: 100%;
}
.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 {
margin-bottom: 15px;
margin-bottom: 15px;
}