searchDialog.scss
TLDR
This file contains the SCSS styling for the 'BoardSwitcherDialog' component in the Demo Projects project.
.BoardSwitcherDialog {
color: rgba(var(--center-channel-color-rgb));
.wrapper {
.dialog {
position: relative;
width: 600px;
height: 450px;
}
}
.BoardSwitcherDialogBody {
display: flex;
flex-direction: column;
flex: 1;
overflow: hidden;
border-color: rgba(var(--center-channel-color-rgb), 0.16);
background: var(--center-channel-bg);
color: var(--center-channel-color);
.head,
.searchResults {
padding: 0 32px 24px;
}
.searchResults {
height: 100%;
overflow-y: auto;
overflow-x: hidden;
padding: 16px 0;
border-top: solid 1px rgba(var(--center-channel-color-rgb), 0.16);
.searchResult {
height: 40px;
justify-content: flex-start;
align-items: center;
display: flex;
padding: 0 32px;
cursor: pointer;
overflow: hidden;
&.freesize {
height: unset;
}
&:hover,
&:focus {
background: rgba(var(--center-channel-color-rgb), 0.08);
}
}
.iconWrapper {
width: 120px;
height: 120px;
background: rgba(var(--center-channel-color-rgb), 0.08);
border-radius: 50%;
display: flex;
/*! align-content: center; */
justify-content: center;
flex-direction: column;
align-items: center;
}
.CompassIcon.icon-magnify.MagnifyIcon {
font-size: 72px !important;
color: var(--button-bg);
display: inline-block;
}
.noResults {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
width: 500px;
margin: 0 auto;
overflow: hidden;
word-wrap: anywhere;
margin-top: 30px;
.text-heading4 {
line-height: 120%;
}
&.introScreen {
margin-top: 48px;
}
}
}
.queryWrapper {
position: relative;
display: flex;
flex-direction: row;
.MagnifyIcon {
position: absolute;
left: 13px;
font-size: 18px;
width: 20px;
height: 100%;
opacity: 0.48;
display: flex;
align-items: center;
}
.searchQuery {
height: 48px;
font-size: 14px;
border-radius: 4px;
border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
background: var(--center-channel-bg);
color: var(--center-channel-color);
padding: 0 40px;
flex: 1;
transition: border 0.15s ease-in;
&:focus {
border-color: var(--button-bg);
box-shadow: inset 0 0 0 1px var(--button-bg);
}
}
}
}
}