scripts/apps/search/styles/search.scss
// search.scss
// Styling for search page, and search functionalities
// ----------------------------------------------------------------------------------------
@import '~mixins.scss';
@import '~variables.scss';
@import '~animation.scss';
.search-page-container {
.archive-content {
height: 100%;
}
}
.search-page-header {
display: flex;
position: relative;
width: 100%;
align-items: center;
.searchbar-flex-handler {
flex-grow: 1;
}
}
.ui-responsive-medium {
.searchbar-flex-handler {
width: 52px;
flex-grow: 0;
background-color: $sd-background;
.item-searchbar.focused {
position: absolute;
z-index: 10;
}
}
.sortbar-flex-handler {
flex-grow: 1;
text-align: end;
}
.subnav__stage-group--ui-responsive {
display: none;
}
}
.ui-responsive-small {
.searchbar-flex-handler {
width: 40px;
.button.search-icon {
width: 40px;
}
}
.flat-searchbar {
&.extended {
z-index: 2;
.search-handler {
input {
max-width: 110px;
}
}
}
.search-handler {
padding: 10px 6px;
min-width: 32px;
}
}
.subnav__stage-group--ui-responsive {
display: none;
}
}
.filter-trigger {
width: 48px;
height: 48px;
line-height: 54px;
text-align: center;
background: hsla(214, 13%, 45%, 0.1);
flex-shrink: 0;
@include transition(all ease 0.1s);
overflow: hidden;
i {
@include opacity(60);
color: var(--color-icon-default);
}
&:hover {
cursor: pointer;
}
&--active {
background: var(--sd-colour-interactive--active);
i {
color:white;
}
}
}
.filter-content {
margin-block-start: 10px;
}
.panel-selector {
margin-block-start: 20px;
margin-block-end: 10px;
width: 100%;
button {
width: 48%;
}
}
.multi-action-bar {
position: absolute;
inset-block-start: 0;
inset-block-end: 0;
inset-inline-start: 0;
inset-inline-end: 0;
z-index: 3;
line-height: 48px;
padding: 0 16px;
animation: dropOut2 .3s cubic-bezier(0.695, 0.105, 0.285, 1.275) 1;
background-color: var(--sd-colour-bg__sliding-toolbar);
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
.navbtn {
border: none;
vertical-align: bottom;
}
#multi-select-count {
margin-inline-start: 15px;
}
.toggle {
width: 23px;
height: 23px;
border: 0;
padding: 0;
margin-inline-end: 10px;
z-index: 3;
line-height: 0;
@include border-radius(23px);
box-shadow: 0 0 7px 0 rgba(0,0,0,0.3);
@include transition(transform 0.5s);
i { height: 15px; }
&.active {
@include rotate(180deg);
}
}
.right-stack {
margin-inline-end: -16px;
}
}
.multi-action-bar-inline {
display: flex;
.navbtn {
border: none;
}
}
.item-searchbar {
border-inline-start: 1px solid var(--sd-colour-line--light);
border-inline-end: 1px solid var(--sd-colour-line--light);
position: relative;
transition: all 0.2s ease;
&:hover {
background-color: var(--sd-colour-bg__searchbar);
}
&.focused {
background: var(--sd-colour-bg__searchbar);
box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha-50), inset 0 0 0 6px var(--sd-colour-interactive--alpha-20);
background-color: var(--sd-colour-bg__searchbar);
}
.search-icon {
@include user-select(none);
width: 28px;
height: 28px;
display: inline-block;
opacity: 0.5;
position: absolute;
width: $nav-height;
height: $nav-height;
inset-block-start: 0;
inset-inline-start: 0;
display: flex;
align-items: center;
justify-content: center;
i {
color: var(--color-icon-default);
margin-inline-start: 4px;
}
}
.search-start {
position: absolute;
opacity: 1;
display: flex;
inset-block-start: 10px;
inset-inline-end: 16px;
margin: 0;
}
input {
height: $nav-height;
line-height: 100%;
font-size: 14px;
border: 0 !important;
padding: 0 $nav-height;
color: $sd-text;
background: none;
&:focus, &:active {
@include box-shadow(none !important);
}
&::-webkit-input-placeholder,
&::placeholder {
font-style: italic;
color: $sd-text-lighter;
}
}
.trigger {
inset-inline-end: 0;
background: none;
}
.search-cancel {
position: absolute;
inset-block-start: 12px;
inset-inline-end: 55px;
background: transparent;
border: 0;
padding: 0;
opacity: 0.4;
height: 24px;
width: 24px;
padding:4px;
cursor: pointer;
transition: all 300ms ease;
&:hover {
opacity: 0.8;
}
}
}
.search-tags {
position: relative;
z-index: 2;
padding: 0 0 0 20px;
box-shadow: 0 1px 0 var(--sd-colour-line--light), 0 1px 1px 0 rgba(0,0,0,0.1);
background-color: var(--sd-colour-panel-bg--000);
.search-tags__list {
flex-grow: 1;
li {
display: inline-block;
padding: 8px 0 6px 0;
}
}
.tag-label {
line-height: 1.8rem;
margin: 2px 1px 2px 0;
span {
opacity: 0.75;
margin-inline-end: 0.5rem
}
}
.refresh-box {
display: none;
}
&.refresh {
padding-inline-end: 50px;
min-height: 44px;
.refresh-box {
display: block;
position: absolute;
inset-inline-end: 10px; inset-block-start: 8px;
}
}
}
.item-globalsearch {
float: inline-start;
.popup {
position: fixed;
inset-block-start: 100px;
inset-inline-start: 50%;
width: 400px;
margin-inline-start: -200px;
@include border-radius(6px);
background: rgba(0,0,0,0.3);
@include border-box();
padding: 12px;
@include box-shadow(0 0 20px 0 rgba(0,0,0,0.25));
z-index: 11112000;
> .content {
width: 100%;
background: #fff;
}
}
.trigger-popup {
height: $nav-height - 1;
padding: 10px 10px 10px 15px;
@include box-sizing(border-box);
float: inline-start;
}
.separator-handler {
margin: 9px 0 0 0;
border-inline-end: 2px dotted #bcbcbc;
height: 30px;
float: inline-start;
}
&.extended {
.popup {
display: block;
}
}
}
// Item global search dialog
.advanced-globalsearch {
form {
@include clearfix();
}
.advanced {
&:before {
display: none;
}
margin-block-start: 0;
position: static;
@include border-box();
@include box-shadow(0 3px 5px 0 #aaa);
@include border-radius(0px);
border: 0;
width: 100%;
border-block-start: 1px solid #e6e6e6;
@include box-shadow(inset 0 1px 3px 0 #eee);
.close {
padding: 0 5px;
float: inline-end;
width: auto;
background: none;
margin: 5px 5px 0 0;
}
.content {
padding: 25px 10px 10px;
}
.actions {
@include clearfix();
padding: 10px 0;
button {
width: auto;
clear: none;
}
}
}
}
#react-placeholder {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
width: 1px;
height: 1px;
}
.sortbar {
.label-total {
margin: 0 $sd-base-increment / 2;
background-color: var(--sd-colour-bg--09);
}
}
.search-parameters {
.keywords {
@include clearfix();
}
}
.es-highlight {
background-color: rgba(255, 61, 61, 0.25);
}
.subnav.legal-archive {
.dropdown {
.sortbar {
width: 100%;
height: auto;
margin: 0;
padding: 0;
text-align: start;
border-inline-start: 0;
.dropdown {
min-width: 120px;
float: inline-end;
}
.direction {
line-height: 18px;
margin-inline-start: 15px;
}
}
.sd-pagination {
padding: 0 17px;
em.page-info, .btn-group {
width: 100%;
text-align: center;
}
}
}
.dropdown__menu {
&-divider {
clear: both;
}
}
}
.sd-grid-item__footer {
overflow: hidden;
.sd-grid-item__footer-block--multi-r {
overflow: hidden;
.sd-grid-item__footer-block-item {
flex-shrink: 1 !important;
overflow: hidden;
}
}
.sd-grid-item__footer-block-item {
flex-grow: 0;
margin: 0 auto;
display: flex;
align-items: center;
.state-label {
margin: 0 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
.workspace .main-section.search-page-container {
.preview-layout {
.search-content {
display: flex;
flex-direction: row;
}
.search-content__main {
display: flex;
flex-direction: column;
flex-grow: 1;
position: relative;
overflow-x: auto;
.search-tags {
flex-shrink: 0;
}
}
.search-preview {
height:100%;
transition: all ease-in-out 0.2s;
width: $sidepreview-width + 160;
position: relative;
flex-grow: 0;
flex-shrink: 0;
opacity: 1;
.content-item-preview {
inset-block-start: 0 !important;
position: relative;
width:100% !important;
height:100%;
opacity: 1;
transition: opacity ease-in-out 0.4s;
transition-delay: 0.2s;
}
@media only screen and (max-width: 1430px) {
width: $sidepreview-width - 40;
}
}
&.closed {
.search-preview {
width: 0;
overflow: hidden;
.content-item-preview {
opacity: 0;
}
}
}
}
}
.workspace.authoring .main-section.search-page-container {
.preview-layout {
.search-preview--overlay {
position: absolute;
inset-block-start: 4.8rem;
inset-inline-end: 0;
inset-block-end: 0;
width:0;
overflow: visible;
opacity: 1;
z-index: 3;
.content-item-preview {
inset-block-start: 0 !important;
position: absolute;
width: $sidepreview-width - 80;
inset-inline-end: 80 - $sidepreview-width - 4;
opacity: 1;
transition: all ease-in-out 0.2s;
overflow-y: visible !important;
box-shadow: inset 3px 0 2px -1px rgba(0, 0, 0, 0.12), 2px 0 8px 0 rgba(0, 0, 0, 0.3), 0 0 2px 0 rgba(0, 0, 0, 0.12);
.shift-preview__toggle {
display: inline-block;
}
&.shift {
inset-inline-end: 0;
box-shadow: -2px 0 8px 0 rgba(0, 0, 0, 0.3), 0 0 2px 0 rgba(0, 0, 0, 0.12)
}
}
}
.search-preview {
width: $sidepreview-width;
@media only screen and (max-width: 1430px) {
width: $sidepreview-width - 40;
}
}
&.closed {
.search-preview {
width: 0;
overflow: hidden;
.content-item-preview {
opacity: 0;
}
}
.search-preview--overlay {
opacity: 0;
}
}
}
}
// used to resize thumbnail of item while dragging it
#drag-image-holder {
position: absolute;
inset-inline-start: -2000px;
max-width: 200px;
max-height: 200px;
img {
max-width: 200px;
max-height: 200px;
}
}