From 42db181c6550788f961a31d5f038a9c1b63f790b Mon Sep 17 00:00:00 2001 From: kreafox Date: Wed, 15 Jun 2022 18:04:07 +0300 Subject: [PATCH] Style improvements --- src/SearchBlock/less/filterlist.less | 146 +++++++------- src/SearchBlock/less/landingpage.less | 25 ++- src/SearchBlock/less/paging.less | 16 +- src/SearchBlock/less/searchbox.less | 267 +------------------------ src/SearchBlock/less/searchinput.less | 243 ++++++++++++++++++++++ src/SearchBlock/less/searchresult.less | 116 +++++------ src/SearchBlock/less/styles.less | 1 + 7 files changed, 401 insertions(+), 413 deletions(-) create mode 100644 src/SearchBlock/less/searchinput.less diff --git a/src/SearchBlock/less/filterlist.less b/src/SearchBlock/less/filterlist.less index b373be95d..53ed87271 100644 --- a/src/SearchBlock/less/filterlist.less +++ b/src/SearchBlock/less/filterlist.less @@ -140,72 +140,9 @@ div#page-document .searchlib-block { } } - // .filter-list-item.more-like-this { - // margin-bottom: 1em; - // - // div.ui.label { - // width: 100%; - // } - // - // i.icon.delete { - // position: absolute; - // top: 10px; - // right: 10px; - // color: @secondaryColor; - // } - // - // div.meta { - // line-height: normal; - // - // i.icon { - // margin-right: 0.5em; - // } - // } - // - // a.centered { - // img { - // width: 100%; - // height: auto; - // max-height: 200px; - // margin-top: 0.5em; - // margin-bottom: 0.5em; - // object-fit: cover; - // object-position: top; - // } - // } - // - // h4 { - // margin-top: 0.5em; - // line-height: inherit; - // } + // .card .meta { + // color: @s-medium-gray2 !important; // } - - // .filter-list-item.more-like-this > .labels > .label { - // overflow: hidden; - // max-width: 100%; - // padding: 0px; - // margin: 0px; - // } - // - // .mlt-filter { - // img { - // width: 100%; - // height: auto; - // } - // - // a { - // font-size: 12px; - // } - // - // .meta { - // font-size: 12px; - // font-weight: 400; - // } - // } - - .card .meta { - color: @s-medium-gray2 !important; - } } .facets-wrapper { @@ -276,23 +213,31 @@ div#page-document .searchlib-block { } .ui.button.add-facet-btn { - margin: 5px 10px 5px 0; + margin: 0 20px 20px 0 !important; background: @midGray !important; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25) !important; color: @lightBlack !important; + + &:hover { + background: #cfcfcf !important; + } } .ui.card.facet { width: auto !important; border: none !important; - margin: 5px 10px 5px 0 !important; + margin: 0 20px 20px 0 !important; background: @midGray !important; border-radius: 0 !important; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25) !important; color: @lightBlack !important; + &:hover { + background: #cfcfcf !important; + } + .content { - padding: 0.5em 1em 0.5em; + padding: 10px 25px; } .filter.description { @@ -351,7 +296,7 @@ div#page-document .searchlib-block { height: 16px; padding: 3px; border: 1px solid @lightBlack !important; - margin-left: 10px; + margin-left: 1.2em; background: none !important; border-radius: 2px; box-shadow: none; @@ -419,3 +364,66 @@ div#page-document .searchlib-block { } } } + +// .filter-list-item.more-like-this { +// margin-bottom: 1em; +// +// div.ui.label { +// width: 100%; +// } +// +// i.icon.delete { +// position: absolute; +// top: 10px; +// right: 10px; +// color: @secondaryColor; +// } +// +// div.meta { +// line-height: normal; +// +// i.icon { +// margin-right: 0.5em; +// } +// } +// +// a.centered { +// img { +// width: 100%; +// height: auto; +// max-height: 200px; +// margin-top: 0.5em; +// margin-bottom: 0.5em; +// object-fit: cover; +// object-position: top; +// } +// } +// +// h4 { +// margin-top: 0.5em; +// line-height: inherit; +// } +// } + +// .filter-list-item.more-like-this > .labels > .label { +// overflow: hidden; +// max-width: 100%; +// padding: 0px; +// margin: 0px; +// } +// +// .mlt-filter { +// img { +// width: 100%; +// height: auto; +// } +// +// a { +// font-size: 12px; +// } +// +// .meta { +// font-size: 12px; +// font-weight: 400; +// } +// } diff --git a/src/SearchBlock/less/landingpage.less b/src/SearchBlock/less/landingpage.less index 394128ae7..0f9a732e0 100644 --- a/src/SearchBlock/less/landingpage.less +++ b/src/SearchBlock/less/landingpage.less @@ -20,17 +20,22 @@ font-size: 20px; } } + } - .search-cards { + .landing-page-cards { + .ui.cards { margin-top: 1em; - } - .ui.cards { .ui.card { margin-top: 2em; color: @deepBlue; cursor: pointer; + &:hover { + border: none; + box-shadow: none; + } + .content { flex-grow: initial; padding: 0; @@ -47,11 +52,6 @@ color: @deepBlue; } - &:hover { - border: none; - box-shadow: none; - } - img.facet-option-icon { display: block; width: auto; @@ -63,10 +63,9 @@ } } - div.info { - width: 100%; - margin-bottom: 1em; - color: @sf-medium-gray2; - font-size: 12px; + .tab-info { + margin: 1.5em 0; + color: @grey; + font-size: 85%; } } diff --git a/src/SearchBlock/less/paging.less b/src/SearchBlock/less/paging.less index e285f64bd..72f692091 100644 --- a/src/SearchBlock/less/paging.less +++ b/src/SearchBlock/less/paging.less @@ -1,11 +1,3 @@ -.sui-paging-info { - display: inline-block; - margin-right: 0.5em; - margin-left: 0.4em; - color: @deepBlue; - font-size: 12px; -} - .search-body-footer { .paging-wrapper { display: flex; @@ -134,3 +126,11 @@ transform: rotate(-225deg); } } + +// .sui-paging-info { +// display: inline-block; +// margin-right: 0.5em; +// margin-left: 0.4em; +// color: @deepBlue; +// font-size: 12px; +// } diff --git a/src/SearchBlock/less/searchbox.less b/src/SearchBlock/less/searchbox.less index b1ba84997..a074b6cb1 100644 --- a/src/SearchBlock/less/searchbox.less +++ b/src/SearchBlock/less/searchbox.less @@ -1,239 +1,6 @@ .sui-search-box { position: relative; - display: flex; - flex-direction: column; - align-items: stretch; - justify-content: center; margin: 3em 0 2em 0; - - .extra-facets { - display: flex; - } - - .ui.label.search-phrase { - font-size: initial; - - .ui.small.basic.icon.button { - padding: 0 !important; - } - } - - .ui.button { - padding: 0.6em !important; - margin: 0; - } - - .ui.button.basic { - padding: 0.6em !important; - margin: 0; - box-shadow: none; - } - - .extra-facets { - position: absolute; - z-index: 10; - width: 95%; - max-width: 570px; - flex-wrap: wrap; - padding: 10px; - border: 1px solid @sf-medium-gray; - border-top: none; - margin-top: 0px; - background: white !important; - -webkit-box-shadow: 0px 10px 13px -8px @sf-medium-gray; - box-shadow: 0px 10px 13px -8px @sf-medium-gray; - - #exact-phrases-facet label { - padding-left: 3rem !important; - color: black !important; - } - } - - .search-input { - display: flex; - width: 100%; - flex-wrap: wrap; - align-items: center; - padding: 0; - background-color: white; - - .terms-box { - display: flex; - width: 100%; - border: none; - border-bottom: 1.5px solid @secondaryColor; - - .terms-box-left { - flex-grow: 0; - - .icon { - width: 38px; - height: 38px; - color: @secondaryColor !important; - font-size: 38px; - } - } - - input { - width: calc(100% - 55px); - border: none; - color: @deepBlue; - font-family: @headerFont; - font-size: 40px; - - &:focus-visible { - border: none !important; - outline: none; - } - } - - input::placeholder { - color: @deepBlue; - font-weight: 200; - } - - div.button { - padding: 0px !important; - margin: 0px; - - i.icon { - position: relative; - top: 1px; - left: 3px; - padding: 0px; - margin: 0px; - } - } - } - - div.input-controls { - display: flex; - align-items: center; - margin-top: 2px; - margin-left: auto; - - .clear-button { - position: relative; - width: 28px; - height: 28px; - border: 2px solid @secondaryColor !important; - margin: 0 10px; - border-radius: 4px; - box-shadow: none; - opacity: 1; - - &:hover { - border: none; - box-shadow: none; - outline: none; - } - } - - i.close.icon { - position: absolute; - top: 5px; - left: 0; - margin: 0 !important; - color: @secondaryColor; - opacity: 1; - - &:before, - &:after { - position: absolute; - top: 0; - left: 11px; - width: 2px; - height: 15px; - background-color: @secondaryColor !important; - content: ' '; - } - - &:before { - transform: rotate(45deg); - } - - &:after { - transform: rotate(-45deg); - } - } - - div.show-extra-facets { - padding: 14px !important; - border: 1px solid @sf-medium-gray; - border-left: none; - margin-right: 4px; - background: white !important; - border-radius: 0px; - color: @sf-dark-gray !important; - cursor: initial; - - i.icon { - margin: 0px; - cursor: pointer; - } - - &.opened { - border-bottom: 1px solid white !important; - background: white !important; - } - } - - .button.microphone-input { - background: @sf-light-gray !important; - border-radius: 20px; - - i.icon { - padding: 0; - margin: 0 !important; - color: @sf-dark-gray !important; - } - - &.listening { - background-color: teal; - color: white !important; - fill: white !important; - } - - &.listening::before { - position: absolute; - top: 50%; - left: 50%; - width: 100px; - height: 100px; - animation: listening infinite 1.5s; - background-color: #ffffff81; - border-radius: 50%; - content: ''; - transform: translate(-50%, -50%) scale(1.4); - } - } - } - } - - div.boolean-facet { - div.toggle { - label { - color: @deepBlue !important; - - &:before { - box-shadow: 0px 0px 0px 2px @sf-medium-gray2 !important; - } - - &:after { - background: white; - } - } - - &.checked { - label { - &:before { - background-color: @secondaryColor !important; - box-shadow: 0px 0px 0px 2px @secondaryColor !important; - } - } - } - } - } } .ui.list.search-list { @@ -254,7 +21,7 @@ margin-top: 2em !important; > .item:not(:last-child) { - padding-bottom: 3.5em !important; + padding-bottom: 2.5em !important; } } @@ -428,26 +195,11 @@ // display: none; } -@media only screen and (max-width: @largestMobileScreen) { - .sui-search-box .search-input .terms-box input { - font-size: 24px; - } - - .sui-search-box .search-input .terms-box input::placeholder { - font-size: 24px; - } -} - @media only screen and (max-width: 357px) { - .sui-search-box .search-input .terms-box input, .sui-search-box__autocomplete-container li { font-size: 14px; } - .sui-search-box .search-input .terms-box .terms-box-left .icon { - font-size: 24px; - } - .sui-search-box__autocomplete-container { right: 50%; left: 50%; @@ -460,21 +212,4 @@ .sui-search-box__autocomplete-container li { padding: 8px 35px; } - - .sui-search-box .search-input div.input-controls .clear-button { - width: 20px; - height: 20px; - - .close.icon { - top: 2px; - left: -4px; - - &:before, - &:after { - top: 0; - left: 11px; - height: 12px; - } - } - } } diff --git a/src/SearchBlock/less/searchinput.less b/src/SearchBlock/less/searchinput.less new file mode 100644 index 000000000..a6eeb0d3e --- /dev/null +++ b/src/SearchBlock/less/searchinput.less @@ -0,0 +1,243 @@ +.sui-search-box { + .search-input { + display: flex; + width: 100%; + flex-wrap: wrap; + align-items: center; + padding: 0; + background-color: white; + + .terms-box { + display: flex; + width: 100%; + border: none; + border-bottom: 1.5px solid @secondaryColor; + + .terms-box-left { + flex-grow: 0; + + .icon { + width: 38px; + height: 38px; + color: @secondaryColor !important; + font-size: 38px; + } + } + + input { + width: calc(100% - 55px); + border: none; + color: @deepBlue; + font-family: @headerFont; + font-size: 40px; + + &:focus-visible { + border: none !important; + outline: none; + } + } + + input::placeholder { + color: @deepBlue; + font-weight: 200; + } + + div.button { + padding: 0px !important; + margin: 0px; + + i.icon { + position: relative; + top: 1px; + left: 3px; + padding: 0px; + margin: 0px; + } + } + } + + div.input-controls { + display: flex; + align-items: center; + margin-top: 2px; + margin-left: auto; + + .clear-button { + position: relative; + width: 28px; + height: 28px; + border: 2px solid @secondaryColor !important; + margin: 0 10px; + border-radius: 4px; + box-shadow: none; + opacity: 1; + + &:hover { + border: none; + box-shadow: none; + outline: none; + } + } + + i.close.icon { + position: absolute; + top: 5px; + left: 0; + margin: 0 !important; + color: @secondaryColor; + opacity: 1; + + &:before, + &:after { + position: absolute; + top: 0; + left: 11px; + width: 2px; + height: 15px; + background-color: @secondaryColor !important; + content: ' '; + } + + &:before { + transform: rotate(45deg); + } + + &:after { + transform: rotate(-45deg); + } + } + + .show-extra-facets { + padding: 14px !important; + border: 1px solid @sf-medium-gray; + border-left: none; + margin-right: 4px; + background: white !important; + border-radius: 0px; + color: @sf-dark-gray !important; + cursor: initial; + + i.icon { + margin: 0px; + cursor: pointer; + } + + &.opened { + border-bottom: 1px solid white !important; + background: white !important; + } + } + + .button.microphone-input { + background: @sf-light-gray !important; + border-radius: 20px; + + i.icon { + padding: 0; + margin: 0 !important; + color: @sf-dark-gray !important; + } + + &.listening { + background-color: teal; + color: white !important; + fill: white !important; + } + + &.listening::before { + position: absolute; + top: 50%; + left: 50%; + width: 100px; + height: 100px; + animation: listening infinite 1.5s; + background-color: #ffffff81; + border-radius: 50%; + content: ''; + transform: translate(-50%, -50%) scale(1.4); + } + } + } + } + + .ui.label.search-phrase { + font-size: initial; + + .ui.small.basic.icon.button { + padding: 0 !important; + } + } + + .extra-facets { + display: flex; + } + + .extra-facets { + position: absolute; + z-index: 10; + width: 95%; + max-width: 570px; + flex-wrap: wrap; + padding: 10px; + border: 1px solid @sf-medium-gray; + border-top: none; + margin-top: 0px; + background: white !important; + -webkit-box-shadow: 0px 10px 13px -8px @sf-medium-gray; + box-shadow: 0px 10px 13px -8px @sf-medium-gray; + + #exact-phrases-facet label { + padding-left: 3rem !important; + color: black !important; + } + } +} + +@media only screen and (max-width: @largestMobileScreen) { + .sui-search-box { + .search-input { + .terms-box input { + font-size: 24px; + + &::placeholder { + font-size: 24px; + } + } + } + } +} + +@media only screen and (max-width: 357px) { + .sui-search-box { + .search-input { + .terms-box input { + font-size: 14px; + + &::placeholder { + font-size: 14px; + } + } + + .terms-box .terms-box-left .icon { + font-size: 24px; + } + + .input-controls .clear-button { + width: 20px; + height: 20px; + + .close.icon { + top: 2px; + left: -4px; + + &:before, + &:after { + top: 0; + left: 11px; + height: 12px; + } + } + } + } + } +} diff --git a/src/SearchBlock/less/searchresult.less b/src/SearchBlock/less/searchresult.less index a5c6f328b..5da7c5986 100644 --- a/src/SearchBlock/less/searchresult.less +++ b/src/SearchBlock/less/searchresult.less @@ -37,67 +37,76 @@ } } -a.ui.basic.button.suggestions-button { - color: rgb(15, 75, 135) !important; - font-weight: bold; -} - -div#page-document div.cards { - // margin-bottom: 0px; - // clear: both; - - div.card-item { - width: unset; - min-width: 200px; - flex-basis: 200px; - flex-grow: 1; - border: 1px solid @sf-light-gray2; - // flex-shrink: 1; - border-radius: 0px; - - &.hovered .content { - max-height: 13.5em; - } - - div.header { - padding: 10px 0px 0px 0px; +.searchlib-block { + .ui.cards { + .ui.card.card-item { + width: unset; + min-width: 200px; + flex-basis: 200px; + flex-grow: 1; + border: 1px solid @sf-light-gray2; + border-radius: 0; + + &.hovered .content { + max-height: 13.5em; + } a { - font-size: 12px; - font-weight: 500; + color: @linkColor; + + &:hover { + color: @linkColor; + } } - } - div.description { - font-size: 12px; - } + .extra.content { + border-top: 1px solid rgba(34, 36, 38, 0.1) !important; + } - div.controls { - div.meta { - display: flex; - align-items: center; + .meta { + color: rgba(0, 0, 0, 0.4); + } - button { - font-size: 10px; - } + .header { + padding-top: 10px; a { - margin-left: 5px; + font-size: 12px; + font-weight: 500; } } - div.card-icons { - margin-left: auto; + .description { + font-size: 12px; } - div.card-icon { - width: 20px; - height: 20px; + .controls { + .meta { + display: flex; + align-items: center; - i.icon { - position: relative; - top: 3px; - font-size: 14px; + button { + font-size: 10px; + } + + a { + margin-left: 5px; + } + } + + .card-icons { + margin-left: auto; + } + + .card-icon { + width: 20px; + height: 20px; + + i.icon { + position: relative; + top: 3px; + font-size: 14px; + } } } } @@ -153,6 +162,7 @@ div#page-document .ui.four.cards { border-bottom-right-radius: 5px !important; border-top-right-radius: 5px !important; color: white; + font-size: 12px; } .header { @@ -201,8 +211,8 @@ div#page-document .horizontal-card-item .content.details .header a { } } -div#page-document .card-item .card-icon, -div#page-document .horizontal-card-item .card-icon { +.searchlib-block .card-item .card-icon, +.searchlib-block .horizontal-card-item .card-icon { width: 30px; height: 30px; background: #fff no-repeat center; @@ -251,14 +261,6 @@ div#page-document div.searchapp div.cards div.search-result { color: @primaryColor !important; } - // button.mlt { - // position: relative; - // top: -1px; - // margin-left: 0.5em; - // font-size: 10px; - // opacity: 0; - // } - .result-description { margin-bottom: 0.8em; } diff --git a/src/SearchBlock/less/styles.less b/src/SearchBlock/less/styles.less index 84c8a8e21..3bdfb1f21 100644 --- a/src/SearchBlock/less/styles.less +++ b/src/SearchBlock/less/styles.less @@ -9,6 +9,7 @@ @import '~./facets.less'; @import '~./searchresult.less'; @import '~./searchbox.less'; +@import '~./searchinput.less'; @import '~./searchview.less'; @import '~./paging.less'; @import '~./landingpage.less';