PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

Use spacing variables on _SpotlightDialog.scss (#8871)

Browse source
This commit is contained in:
Suguru Hirahara 2022-06-19 09:50:32 +00:00 committed by GitHub
parent da9f2f6caa
commit ee4484fa40
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 36 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
res/css/views/dialogs/_SpotlightDialog.scss
View file

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