diff --git a/res/css/views/dialogs/_SpotlightDialog.scss b/res/css/views/dialogs/_SpotlightDialog.scss index 2b7674a241..f1155f64c0 100644 --- a/res/css/views/dialogs/_SpotlightDialog.scss +++ b/res/css/views/dialogs/_SpotlightDialog.scss @@ -24,7 +24,7 @@ limitations under the License. #mx_SpotlightDialog_keyboardPrompt { position: absolute; - padding: 8px; + padding: $spacing-8; border-radius: 8px; background-color: $background; top: -60px; // relative to the top of the modal @@ -36,8 +36,8 @@ limitations under the License. > span > div { display: inline-block; - padding: 2px 4px; - margin: 0 4px; + padding: 2px $spacing-4; // TODO: Use a spacing variable + margin: 0 $spacing-4; border-radius: 6px; background-color: $quinary-content; vertical-align: middle; @@ -58,7 +58,7 @@ limitations under the License. .mx_SpotlightDialog_searchBox { margin: 0; border: none; - padding: 12px 16px; + padding: $spacing-12 $spacing-16; border-bottom: 1px solid $system; > .mx_SpotlightDialog_filter { @@ -66,12 +66,12 @@ limitations under the License. align-content: center; align-items: center; border-radius: 8px; - margin-right: 8px; + margin-right: $spacing-8; background-color: $quinary-content; vertical-align: middle; color: $primary-content; position: relative; - padding: 4px 8px 4px 37px; + padding: $spacing-4 $spacing-8 $spacing-4 37px; // TODO: Use a spacing variable &::before { background-color: $secondary-content; @@ -82,7 +82,7 @@ limitations under the License. width: 18px; height: 18px; position: absolute; - left: 8px; + left: $spacing-8; top: 50%; transform: translateY(-50%); } @@ -102,7 +102,7 @@ limitations under the License. height: 16px; background: $system; border-radius: 8px; - margin-left: 8px; + margin-left: $spacing-8; text-align: center; line-height: 16px; color: $secondary-content; @@ -141,14 +141,14 @@ limitations under the License. flex-grow: 0; width: unset; height: unset; - margin-left: 16px; + margin-left: $spacing-16; } } #mx_SpotlightDialog_content { height: 100%; overflow-y: auto; - padding: 16px; + padding: $spacing-16; .mx_SpotlightDialog_section { > h4, > .mx_SpotlightDialog_sectionHeader > h4 { @@ -160,18 +160,18 @@ limitations under the License. } > h4 { - margin-bottom: 8px; + margin-bottom: $spacing-8; } .mx_SpotlightDialog_sectionHeader { display: flex; justify-content: space-between; align-items: center; - margin-bottom: 8px; + margin-bottom: $spacing-8; } & + .mx_SpotlightDialog_section { - margin-top: 24px; + margin-top: $spacing-24; } } @@ -185,7 +185,7 @@ limitations under the License. .mx_SpotlightDialog_option { border-radius: 8px; - padding: 4px; + padding: $spacing-4; color: $primary-content; font-size: $font-12px; line-height: $font-15px; @@ -199,11 +199,11 @@ limitations under the License. text-overflow: ellipsis; .mx_DecoratedRoomAvatar { - margin: 0 9px 4px; // maintain centering + margin: 0 9px $spacing-4; // maintain centering } & + .mx_SpotlightDialog_option { - margin-left: 16px; + margin-left: $spacing-16; } &:hover, &[aria-selected=true] { @@ -217,7 +217,7 @@ limitations under the License. .mx_SpotlightDialog_otherSearches, .mx_SpotlightDialog_hiddenResults { .mx_SpotlightDialog_option { - padding: 6px 4px; + padding: 6px $spacing-4; // TODO: Use a spacing variable border-radius: 8px; font-size: $font-15px; line-height: $font-24px; @@ -233,20 +233,20 @@ limitations under the License. align-items: start; .mx_AccessibleButton { - padding: 4px 20px; - margin: 2px 4px; + padding: $spacing-4 $spacing-20; + margin: 2px $spacing-4; // TODO: Use a spacing variable } .mx_SpotlightDialog_enterPrompt { - margin-top: 9px; - margin-right: 8px; + margin-top: 9px; // TODO: Use a spacing variable + margin-right: $spacing-8; } } > .mx_SpotlightDialog_metaspaceResult, > .mx_DecoratedRoomAvatar, > .mx_BaseAvatar { - margin-right: 8px; + margin-right: $spacing-8; width: 24px; height: 24px; @@ -266,7 +266,7 @@ limitations under the License. display: flex; flex-direction: row; line-height: $font-24px; - margin-right: 8px; + margin-right: $spacing-8; .mx_SpotlightDialog_result_publicRoomName { color: $primary-content; @@ -277,7 +277,7 @@ limitations under the License. .mx_SpotlightDialog_result_publicRoomAlias { color: $tertiary-content; font-size: $font-12px; - margin-left: 8px; + margin-left: $spacing-8; overflow: hidden; text-overflow: ellipsis; } @@ -295,7 +295,7 @@ limitations under the License. } .mx_NotificationBadge { - margin-left: 8px; + margin-left: $spacing-8; } &:hover, &[aria-selected=true] { @@ -310,12 +310,12 @@ limitations under the License. .mx_SpotlightDialog_inviteLink, .mx_SpotlightDialog_createRoom { - margin-top: 8px; + margin-top: $spacing-8; .mx_AccessibleButton { position: relative; margin: 0; - padding: 3px 8px 3px 28px; + padding: 3px $spacing-8 3px $spacing-28; // TODO: Use a spacing variable &::before { content: ""; @@ -324,7 +324,7 @@ limitations under the License. mask-repeat: no-repeat; mask-position: center; mask-size: contain; - left: 8px; + left: $spacing-8; width: 16px; height: 16px; background: $accent; @@ -345,7 +345,7 @@ limitations under the License. .mx_SpotlightDialog_joinRoomAlias, .mx_SpotlightDialog_explorePublicRooms, .mx_SpotlightDialog_startGroupChat { - padding-left: 32px; + padding-left: $spacing-32; position: relative; &::before { @@ -357,7 +357,7 @@ limitations under the License. width: 24px; height: 24px; position: absolute; - left: 4px; + left: $spacing-4; top: 50%; transform: translateY(-50%); } @@ -398,8 +398,8 @@ limitations under the License. } .mx_SpotlightDialog_result_details { - margin-left: 8px; - margin-right: 8px; + margin-left: $spacing-8; + margin-right: $spacing-8; color: $tertiary-content; font-size: $font-12px; line-height: $font-15px; @@ -417,13 +417,13 @@ limitations under the License. } .mx_SpotlightDialog_enterPrompt { - padding: 2px 4px; + padding: 2px $spacing-4; // TODO: Use a spacing variable font-size: $font-12px; line-height: $font-15px; color: $tertiary-content; border-radius: 6px; background-color: $quinary-content; - margin: 0 4px 0 auto; + margin: 0 $spacing-4 0 auto; display: none; } @@ -455,7 +455,7 @@ limitations under the License. font-size: $font-12px; line-height: $font-15px; color: $secondary-content; - padding: 12px 16px 16px; + padding: $spacing-12 $spacing-16 $spacing-16; display: flex; border-top: 1px solid $quinary-content; @@ -474,7 +474,7 @@ limitations under the License. } .mx_AccessibleButton_kind_primary_outline { - padding: 4px 8px; + padding: $spacing-4 $spacing-8; border-color: $secondary-content; color: $secondary-content; margin-left: auto;