From 3a9880c1c8accd839b4205e5acecfd5ecd7c746a Mon Sep 17 00:00:00 2001 From: kreafox Date: Fri, 27 May 2022 16:12:28 +0300 Subject: [PATCH 1/6] WIP new design --- src/SearchBlock/less/landingpage.less | 311 +++++++------------------- src/SearchBlock/less/searchbox.less | 55 ++--- src/SearchBlock/less/searchinput.less | 118 +++------- src/SearchBlock/less/searchview.less | 29 +-- src/SearchBlock/less/variables.less | 3 + 5 files changed, 138 insertions(+), 378 deletions(-) diff --git a/src/SearchBlock/less/landingpage.less b/src/SearchBlock/less/landingpage.less index 104656084..1ef87d100 100644 --- a/src/SearchBlock/less/landingpage.less +++ b/src/SearchBlock/less/landingpage.less @@ -1,255 +1,114 @@ -div#page-document .searchlib-block .landing-page-container { - background: @sf-light-gray; - - .landing-page { - min-height: 500px; - padding: 50px; - margin: auto !important; - - div.twelve.wide { - padding-right: 0px; - padding-left: 0px; +.landing-page-container { + margin-top: 5em; + + .ui.secondary.pointing.menu { + .tab-item { + position: relative; + display: block; + font-size: 20px; + font-weight: 500; + + // &::after { + // margin-right: 10px; + // // position: absolute; + // // bottom: 0; + // // width: 80%; + // // height: 1px; + // // background-color: red; + // // content: ''; + // } } - h3.browse-by { - font-weight: 700; + .active.tab-item { + font-weight: 500; } + } - div.filters { - margin-bottom: 2em; - - button { - border: 1px solid @sf-medium-gray; - margin: 5px 14px 5px 0px; - background-color: white; - border-radius: 1 !important; - color: @sf-dark-gray; - font-weight: 400; + .search-tab-wrapper { + width: 100%; + overflow-x: auto; + } - &.active { - border: none; - } - } - } + .search-tab { + width: 1120px; + margin-top: 4em; - div.info { - width: 100%; - margin-bottom: 1em; - color: @sf-medium-gray2; - font-size: 12px; + .ui.tab { + padding-right: 0; + padding-left: 0; } - div.cards { - display: grid; - justify-content: space-between; - column-gap: 5px; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - - div.ui.card { - width: auto !important; - max-width: 360px; - cursor: pointer; - - .header { - padding: 0px; - color: @sf-blue; - font-size: 1rem !important; - font-weight: 400 !important; - } - - img.facet-option-icon { - display: inline; - // width: auto; - // height: 30px !important; - margin-left: 0.5em; - background: white; - // float: right; - -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ - filter: grayscale(100%); - } + .ui.menu { + a.item { + border: none; + border-bottom: 4px solid #fff; + color: @s-dark-gray; } - } - div.cards { - div.card { - // width: 275px; - // margin: 0.5em; - // border-radius: 2 !important; - // cursor: pointer; - - // div.header { - // padding: 0px; - // color: @sf-blue; - // font-size: 1rem !important; - // font-weight: 400 !important; - // } - - div.extra.content { - padding: 10px 10px 15px 15px; - border-top: none !important; - - span.count { - padding: 5px 15px; - background: @sf-light-gray; - border-radius: 5px; - color: @sf-medium-gray2; - font-size: 14px; - } - } - - &:hover { - border: none !important; - background: @sf-azure; - box-shadow: none; - - div.header { - color: white; - } - - div.extra.content { - span.count { - background: @sf-dark-azure; - color: white; - } - } - } + a.item.active { + border-bottom: 4px solid @s-pine-green; + color: @s-pine-green; } } - } -} - -.tile { - padding: 18px; - margin: 0 12px 12px 0; - @media only screen and (min-width: 1536px) { - width: 23%; - } - @media only screen and (min-width: 900px) and (max-width: 1535px) { - width: 31%; - } - @media only screen and (min-width: 620px) and (max-width: 900px) { - width: 47%; - } - @media only screen and (max-width: 620px) { - width: 95%; - } - - h2 { - border-bottom: 1px solid white; - margin: 0 0 1em 0; - margin-bottom: 0; - font-size: 200%; - font-weight: bold; - line-height: 1.3; - } - - span { - font-size: 250%; - font-weight: bold; - } - - &.available_content { - height: 434px; - h2 { - border-bottom: 1px solid #115c57; - color: #115c57; - font-size: 200%; + .search-cards { + display: flex; + flex-wrap: wrap; } - h3 { - color: #115c57; - } + .ui.card { + max-width: 210px; + flex-direction: column; + padding: 1.3em 0.7em; + margin: 0; + color: @s-dark-gray; + cursor: pointer; + text-align: center; + + .content { + flex-grow: initial; + padding: 0; + padding-bottom: 0.5em; + } - span { - color: #1b928f; - } - } -} + .content > .description { + color: @s-dark-gray; + font-size: 18px; + } -@media only screen and (max-width: 1200px) { - div.searchapp.landing-page { - div.landing-page-container { - div.landing-page { - max-width: 100% !important; + .content.extra { + color: @s-dark-gray; } - } - } -} -@media only screen and (min-width: 770px) { - div.searchapp { - &.landing-page { - div.landing-page-container { - div.landing-page { - div.cards { - grid-template-columns: repeat( - auto-fit, - minmax(280px, 1fr) - ) !important; - } - } + &:hover { + border: none; + box-shadow: none; } - } - } -} -@media only screen and (max-width: 770px) { - div.searchapp.landing-page { - div.landing-page-container { - div.landing-page { - padding: 1em; - - div.filters { - button { - padding: 0.5em 0.7em; - margin: 3px 5px 3px 0px; - font-size: 14px; - } - } - - div.ui.cards { - div.ui.card { - div.header { - font-size: 12px !important; - } - - div.content { - padding: 0.7em !important; - - &.extra { - padding-top: 0px !important; - } - } - - span.count { - font-size: 10px; - } - } - } + img.facet-option-icon { + display: block; + width: auto; + height: 30px !important; + margin: 0 auto; + margin-bottom: 0.5em; + filter: grayscale(100%); } } } -} -@media only screen and (max-width: 400px) { - div.searchapp.landing-page { - div.landing-page-container { - div.landing-page { - padding: 1em; - } - } + h4.browse-by { + color: @s-dark-gray; } -} -@media only screen and (max-width: 260px) { - div.searchapp.landing-page { - div.landing-page-container { - div.landing-page { - div.ui.cards { - display: block !important; - } - } - } + div.info { + width: 100%; + margin-bottom: 1em; + color: @sf-medium-gray2; + font-size: 12px; + } + + .search-cards { + display: flex; + flex-wrap: wrap; } } diff --git a/src/SearchBlock/less/searchbox.less b/src/SearchBlock/less/searchbox.less index e5bfd678f..284b23ddc 100644 --- a/src/SearchBlock/less/searchbox.less +++ b/src/SearchBlock/less/searchbox.less @@ -4,15 +4,7 @@ flex-direction: column; align-items: stretch; justify-content: center; - margin: 2em 0 1em 0; - - // #exact-phrases-facet { - // .searchinput-boolean-facet(); - // } - // - // #archived-facet { - // .searchinput-boolean-facet(); - // } + margin: 3em 0 2em 0; .extra-facets { display: flex; @@ -60,7 +52,6 @@ .search-input { display: flex; width: 100%; - max-width: 1000px; flex-wrap: wrap; align-items: center; padding: 0; @@ -69,16 +60,25 @@ .terms-box { display: flex; width: 100%; - padding: 10px; - border: 1px solid @sf-medium-gray; + border: none; + border-bottom: 1.5px solid @s-pine-green; .terms-box-left { flex-grow: 0; + + .icon { + width: 38px; + height: 38px; + color: @s-pine-green !important; + font-size: 38px; + } } input { width: calc(100% - 55px); border: none; + color: @s-dark-gray; + font-size: 40px; &:focus-visible { border: none !important; @@ -86,6 +86,10 @@ } } + input::placeholder { + color: @s-dark-gray; + } + div.button { padding: 0px !important; margin: 0px; @@ -340,30 +344,3 @@ letter-spacing: 1px; text-transform: uppercase; } - -@media only screen and (max-width: 1080px) { - div.sui-search-box { - width: 100% !important; - margin: initial !important; - } -} - -@media screen and (max-width: 770px) and (min-width: 600px) { - div.header-content { - position: relative; - left: 15px; - } -} - -@media screen and (max-width: 770px) { - div.ui.container.stackable.two.column.grid.header-columns { - margin-left: 0px !important; - } -} - -@media screen and (max-width: 600px) { - div.header-content { - position: relative; - left: 15px; - } -} diff --git a/src/SearchBlock/less/searchinput.less b/src/SearchBlock/less/searchinput.less index 229d7985e..e0be0dce7 100644 --- a/src/SearchBlock/less/searchinput.less +++ b/src/SearchBlock/less/searchinput.less @@ -20,19 +20,11 @@ div.extra-facets { div.search-input { div.terms-box { - display: flex; - width: 100%; - padding: 10px; - border: 1px solid @sf-medium-gray; - .terms-box-left { flex-grow: 0; } input { - // width: calc(100% - 55px); - // border: none; - &:focus-visible { border: none !important; outline: none; @@ -95,96 +87,52 @@ div.search-input { } .demo-question { - margin-top: 0.5em; - font-size: 14px; + margin-top: 2.5em; - span { - color: @sf-dark-gray; - } + .ui.list { + margin: 0; + font-size: 18px; - a.button { - display: inline; - background: @sf-light-gray; - color: @sf-blue !important; - font-size: 16px; + .item { + padding-top: 1.5em !important; + color: @s-dark-gray !important; + font-weight: 400; + } } - .dropdown { - .text { - padding-left: 0.5em; + .ui.accordion.suggestion-accordion { + .title { + justify-content: flex-end; + border: none; + color: @s-dark-gray; + font-weight: 500; } - .menu { - .item { - min-width: 20em; - white-space: normal; - - span.text { - padding: initial; - } - } + .accordion-title-wrapper { + display: flex; + align-items: center; } - } -} - -@keyframes demoQuestion { - from { - opacity: 0; - } - - to { - opacity: 1; - } -} -p.demo-question { - color: black; - - a.ui.basic.button { - padding: 0px !important; - animation-duration: 0.8s; - animation-name: demoQuestion; - font-size: small; - } -} - -p.demo-question { - margin-top: 0.5em; - font-size: 14px; - - span { - color: @sf-dark-gray; - } - - a { - background: @sf-light-gray; - color: @sf-blue; - font-size: 16px; - } - - a.explore-more-queries { - font-size: 14px; - } + .active.title { + background-color: transparent; + } - a.explore-more-queries.ui.button.compact { - font-weight: 400; - } + .title i { + color: @s-dark-gray; + } - a.ui.button { - border: none !important; - box-shadow: none !important; + .title i:before { + font-size: 2.5rem; + } - &:hover { - border: none !important; - box-shadow: none !important; + .content { + padding: 0 !important; + background-color: #fff; } } - a.ui.button.compact { - border: none !important; - background: transparent; - box-shadow: none !important; - color: @sf-azure !important; - font-weight: bold; + h4 { + margin-bottom: 0; + color: @s-dark-gray; } } diff --git a/src/SearchBlock/less/searchview.less b/src/SearchBlock/less/searchview.less index df8922fc4..81bec2c90 100644 --- a/src/SearchBlock/less/searchview.less +++ b/src/SearchBlock/less/searchview.less @@ -4,22 +4,10 @@ div#page-document { } .searchlib-block { - position: relative; - right: 50%; - left: 50%; - width: 100vw !important; - max-width: none !important; - margin-right: -50vw !important; - margin-left: -50vw !important; + color: @s-dark-gray; div.searchapp { margin: 1em 0; - background-color: white; - - div > div.ui.container { - padding-right: 0px !important; - padding-left: 0px !important; - } i.icon.dropdown:before, .ui.accordion .title .dropdown.icon:before, @@ -282,13 +270,6 @@ body.searchlib-page { div#main > div.ui.breadcrumbs { display: none; } - - div#page-document { - width: 100vw !important; - padding-top: 0px !important; - padding-bottom: 0px !important; - margin-top: 0px !important; - } } .sui-app-info { @@ -406,10 +387,6 @@ p.highlight-description\.highlight { body.searchlib-page { &.has-toolbar { - div#page-document .searchlib-block { - width: calc(100% - 80px) !important; - } - div.header-wrapper[role='banner'] { div.ui.container:first-of-type { width: calc(100vw - 100px) !important; @@ -418,10 +395,6 @@ p.highlight-description\.highlight { } &.has-toolbar-collapsed { - div#page-document .searchlib-block { - width: calc(100% - 20px) !important; - } - div.header-wrapper[role='banner'] { div.ui.container:first-of-type { width: calc(100vw - 50px) !important; diff --git a/src/SearchBlock/less/variables.less b/src/SearchBlock/less/variables.less index b3bb97fce..2848bee1b 100644 --- a/src/SearchBlock/less/variables.less +++ b/src/SearchBlock/less/variables.less @@ -17,4 +17,7 @@ @sf-dark-gray: #303030; @sf-medium-blue: #1c6ca4; +@s-pine-green: #007b6c; +@s-dark-gray: #3d5265; + @search-result-max-width: 1000px; From 7ad6e9ddf673cf919ab8f89e328f02a23774f510 Mon Sep 17 00:00:00 2001 From: kreafox Date: Tue, 31 May 2022 11:03:17 +0300 Subject: [PATCH 2/6] WIP new design --- src/SearchBlock/less/answersbox.less | 4 +- src/SearchBlock/less/facets.less | 51 +++---- src/SearchBlock/less/filterlist.less | 19 ++- src/SearchBlock/less/paging.less | 2 +- src/SearchBlock/less/searchbox.less | 177 ++++++++++++++++++++++--- src/SearchBlock/less/searchinput.less | 138 ------------------- src/SearchBlock/less/searchresult.less | 38 ++++-- src/SearchBlock/less/searchview.less | 26 ++-- src/SearchBlock/less/styles.less | 3 - src/SearchBlock/less/variables.less | 7 +- 10 files changed, 244 insertions(+), 221 deletions(-) delete mode 100644 src/SearchBlock/less/searchinput.less diff --git a/src/SearchBlock/less/answersbox.less b/src/SearchBlock/less/answersbox.less index 746dbba71..fbe5038a9 100644 --- a/src/SearchBlock/less/answersbox.less +++ b/src/SearchBlock/less/answersbox.less @@ -9,7 +9,7 @@ .buttons { .button { - background-color: @sf-azure !important; + background-color: @s-pine-green !important; } .button:first-child { @@ -63,7 +63,7 @@ // width: 0px; // height: 10px; // animation: progres 4s infinite ease-out; - // background-color: @sf-azure; + // background-color: @s-pine-green; // border-radius: 1px; // } // } diff --git a/src/SearchBlock/less/facets.less b/src/SearchBlock/less/facets.less index bdeb13ec1..bb0cea2df 100644 --- a/src/SearchBlock/less/facets.less +++ b/src/SearchBlock/less/facets.less @@ -32,8 +32,8 @@ div#page-document .searchlib-block { &.checked { label { &:before { - background-color: @sf-azure !important; - box-shadow: 0px 0px 0px 2px @sf-azure !important; + background-color: @s-pine-green !important; + box-shadow: 0px 0px 0px 2px @s-pine-green !important; } } } @@ -56,21 +56,21 @@ div#page-document .searchlib-block { } } - div.content-section-tabs.menu { + .content-section-tabs.menu { overflow: auto; width: 100%; max-width: 100%; border: none; border-top: none; border-right: none; - border-bottom: 1px solid @sf-light-gray2; + border-bottom: 1px solid @s-light-gray; border-left: none; margin: 0; margin-bottom: 3px; border-radius: 0px; box-shadow: none; - div.item.dropdown { + .item.dropdown { padding: 0px 10px 0px 10px; border: none; border-bottom: 4px solid white; @@ -105,11 +105,11 @@ div#page-document .searchlib-block { a.item { padding: 0px; - border-bottom: 4px solid white; - margin-right: 3em; + border-bottom: 3px solid white; + margin-right: 1.5em; border-radius: 0px; - color: @sf-dark-gray; - font-size: 14px; + color: @s-dark-gray; + font-size: 18px; &:hover { background: white; @@ -120,21 +120,22 @@ div#page-document .searchlib-block { } &.active { - border-bottom: 4px solid @sf-azure; + border-bottom: 3px solid @s-pine-green; + color: @s-pine-green; - .icon { - color: @sf-azure !important; - } + // .icon { + // color: @s-pine-green !important; + // } } span.title { margin-right: 5px; } - span.count { - color: @sf-medium-gray2; - font-weight: 400; - } + // span.count { + // color: @sf-medium-gray2; + // font-weight: 400; + // } } } @@ -331,7 +332,7 @@ div#page-document .searchlib-block { margin-right: 0px; background: @sf-light-gray !important; border-radius: 2px; - color: @sf-azure !important; + color: @s-pine-green !important; float: right; font-size: 12px; } @@ -369,7 +370,7 @@ div#page-document .searchlib-block { position: absolute; top: 10px; right: 10px; - color: @sf-azure; + color: @s-pine-green; } div.meta { @@ -459,7 +460,7 @@ div#page-document .searchlib-block { button { padding: 3px; background: @sf-light-gray !important; - color: @sf-azure; + color: @s-pine-green; float: right; font-size: 10px; } @@ -489,7 +490,7 @@ div#page-document .searchlib-block { div.label { max-width: 100%; background: @sf-light-gray !important; - color: @sf-azure; + color: @s-pine-green; font-weight: 600; span.text { @@ -669,7 +670,7 @@ div.ui.modal.facet { } &.active { - color: @sf-azure; + color: @s-pine-green; } } } @@ -705,8 +706,8 @@ div.ui.modal.facet { &.checked { label { &:before { - background-color: @sf-azure !important; - box-shadow: 0px 0px 0px 2px @sf-azure !important; + background-color: @s-pine-green !important; + box-shadow: 0px 0px 0px 2px @s-pine-green !important; } &:after { @@ -772,7 +773,7 @@ div.ui.modal.facet { a.clear-filters { margin-left: auto; - color: @sf-azure; + color: @s-pine-green; font-size: 12px; } } diff --git a/src/SearchBlock/less/filterlist.less b/src/SearchBlock/less/filterlist.less index 28ba69dff..12d4a55dc 100644 --- a/src/SearchBlock/less/filterlist.less +++ b/src/SearchBlock/less/filterlist.less @@ -1,4 +1,11 @@ div#page-document .searchlib-block { + .top-facetslist-wrapper { + padding: 0em; + border: 0px; + margin: 0em; + box-shadow: none; + } + .ui.inverted.segment.filter-list { padding: 0.4rem; background-color: #004b87; @@ -48,7 +55,7 @@ div#page-document .searchlib-block { div.filter-list-header { padding-right: 0.5rem; padding-left: 0.5rem; - color: @sf-azure !important; + color: @s-pine-green !important; font-size: 14px; i.dropdown.icon { @@ -94,7 +101,7 @@ div#page-document .searchlib-block { } button.reset-filters { - color: @sf-azure !important; + color: @s-pine-green !important; font-size: 14px; i.icon { @@ -114,7 +121,7 @@ div#page-document .searchlib-block { margin-right: 0px; background: @sf-light-gray !important; border-radius: 2px; - color: @sf-azure !important; + color: @s-pine-green !important; float: right; font-size: 12px; } @@ -147,7 +154,7 @@ div#page-document .searchlib-block { position: absolute; top: 10px; right: 10px; - color: @sf-azure; + color: @s-pine-green; } div.meta { @@ -234,7 +241,7 @@ div#page-document .searchlib-block { button { padding: 3px; background: @sf-light-gray !important; - color: @sf-azure; + color: @s-pine-green; float: right; font-size: 10px; } @@ -262,7 +269,7 @@ div#page-document .searchlib-block { &.active { .label { max-width: 100%; - color: @sf-azure; + color: @s-pine-green; font-weight: 600; .text { diff --git a/src/SearchBlock/less/paging.less b/src/SearchBlock/less/paging.less index 509624b26..aee3aaf40 100644 --- a/src/SearchBlock/less/paging.less +++ b/src/SearchBlock/less/paging.less @@ -10,6 +10,6 @@ div.prev-next-paging button.next, div.prev-next-paging button.prev, button.download-btn { background: @sf-light-gray !important; - color: @sf-azure !important; + color: @s-pine-green !important; font-size: 10px !important; } diff --git a/src/SearchBlock/less/searchbox.less b/src/SearchBlock/less/searchbox.less index 284b23ddc..7804fc5bb 100644 --- a/src/SearchBlock/less/searchbox.less +++ b/src/SearchBlock/less/searchbox.less @@ -78,6 +78,7 @@ width: calc(100% - 55px); border: none; color: @s-dark-gray; + font-family: @headerFont; font-size: 40px; &:focus-visible { @@ -88,6 +89,7 @@ input::placeholder { color: @s-dark-gray; + font-weight: 200; } div.button { @@ -106,11 +108,53 @@ 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 @s-pine-green !important; + margin-right: 20px; + border-radius: 4px; + box-shadow: none; + opacity: 1; + + &:hover { + border: none; + box-shadow: none; + outline: none; + } + } + i.close.icon { - color: @sf-azure; + position: absolute; + top: 5px; + left: 0; + margin: 0 !important; + color: @s-pine-green; + opacity: 1; + + &:before, + &:after { + position: absolute; + top: 0; + left: 11px; + width: 2px; + height: 15px; + background-color: @s-pine-green !important; + content: ' '; + } + + &:before { + transform: rotate(45deg); + } + + &:after { + transform: rotate(-45deg); + } } div.show-extra-facets { @@ -183,8 +227,8 @@ &.checked { label { &:before { - background-color: @sf-azure !important; - box-shadow: 0px 0px 0px 2px @sf-azure !important; + background-color: @s-pine-green !important; + box-shadow: 0px 0px 0px 2px @s-pine-green !important; } } } @@ -192,6 +236,57 @@ } } +.demo-question { + margin-top: 2.5em; + + .ui.list { + margin: 0; + font-size: 18px; + + .item { + padding-top: 1.5em !important; + color: @s-dark-gray !important; + font-weight: 400; + } + } + + .ui.accordion.suggestion-accordion { + .title { + justify-content: flex-end; + border: none; + color: @s-dark-gray; + font-weight: 500; + } + + .accordion-title-wrapper { + display: flex; + align-items: center; + } + + .active.title { + background-color: transparent; + } + + .title i { + color: @s-dark-gray; + } + + .title i:before { + font-size: 2.5rem; + } + + .content { + padding: 0 !important; + background-color: #fff; + } + } + + h4 { + margin-bottom: 0; + color: @s-dark-gray; + } +} + .sui-search-box__submit { flex-shrink: 0; padding: 16px; @@ -263,24 +358,16 @@ .sui-search-box__autocomplete-container { position: absolute; - top: calc(3em + 10px); + top: calc(3em + 4px); right: 0; left: 0; display: none; - max-width: 1000px; + // max-width: 1000px; flex-direction: column; padding: 24px 0 12px 0; - border-top: 1px solid #ccc; - border-right: 1px solid #ccc; - border-bottom: 1px solid #ccc; - border-left: 1px solid #ccc; margin: 0; background: white; - border-bottom-left-radius: 4px; - border-bottom-right-radius: 4px; - border-top-left-radius: 4px; - border-top-right-radius: 4px; - box-shadow: rgba(59, 69, 79, 0.3) 0px 2px 4px; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); line-height: 1.5; } @@ -302,12 +389,10 @@ } .sui-search-box__autocomplete-container li { - padding: 4px 12px; - margin: 0 12px; - border-radius: 4px; - color: #555; - cursor: default; - font-size: 0.9em; + padding: 8px 40px; + color: @s-blue; + cursor: pointer; + font-size: 18px; } .sui-search-box__autocomplete-container li em { @@ -327,7 +412,7 @@ } .sui-search-box__autocomplete-container li[aria-selected='true'] { - background: #3a56e4; + background: @s-blue; color: #ffffff; } @@ -337,10 +422,58 @@ } .sui-search-box__section-title { - padding: 0 0 4px 24px; + padding: 0 0 4px 40px; color: #888; font-size: 0.7em; font-weight: normal; letter-spacing: 1px; text-transform: uppercase; + // display: none; +} + +@media only screen and (max-width: @largestMobileScreen) { + .sui-search-box .search-input .terms-box input { + font-size: 34px; + } + + .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__autocomplete-container { + right: 50%; + left: 50%; + width: 100vw; + margin-right: -50vw; + margin-left: -50vw; + } + + .sui-search-box__section-title, + .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 deleted file mode 100644 index e0be0dce7..000000000 --- a/src/SearchBlock/less/searchinput.less +++ /dev/null @@ -1,138 +0,0 @@ -div.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; - - div#exact-phrases-facet label { - padding-left: 3rem !important; - color: black !important; - } -} - -div.search-input { - div.terms-box { - .terms-box-left { - flex-grow: 0; - } - - input { - &:focus-visible { - border: none !important; - outline: none; - } - } - - div.button { - padding: 0px !important; - margin: 0px; - - i.icon { - position: relative; - top: 1px; - left: 3px; - padding: 0px; - margin: 0px; - } - } - } - - div.input-controls { - display: flex; - margin-top: 2px; - margin-left: auto; - - i.close.icon { - color: @sf-azure; - } - - 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; - } - } - - div.button.microphone-input { - background: @sf-light-gray !important; - border-radius: 20px; - - i.icon { - color: @sf-dark-gray !important; - } - } - } -} - -.demo-question { - margin-top: 2.5em; - - .ui.list { - margin: 0; - font-size: 18px; - - .item { - padding-top: 1.5em !important; - color: @s-dark-gray !important; - font-weight: 400; - } - } - - .ui.accordion.suggestion-accordion { - .title { - justify-content: flex-end; - border: none; - color: @s-dark-gray; - font-weight: 500; - } - - .accordion-title-wrapper { - display: flex; - align-items: center; - } - - .active.title { - background-color: transparent; - } - - .title i { - color: @s-dark-gray; - } - - .title i:before { - font-size: 2.5rem; - } - - .content { - padding: 0 !important; - background-color: #fff; - } - } - - h4 { - margin-bottom: 0; - color: @s-dark-gray; - } -} diff --git a/src/SearchBlock/less/searchresult.less b/src/SearchBlock/less/searchresult.less index 1c0eb6d98..2df28a4e2 100644 --- a/src/SearchBlock/less/searchresult.less +++ b/src/SearchBlock/less/searchresult.less @@ -238,7 +238,7 @@ div#page-document div.searchapp div.cards div.search-result { div.item { padding: 5px !important; - background: @sf-azure; + background: @s-pine-green; color: white; font-size: 10px; font-weight: 400; @@ -269,12 +269,19 @@ div#page-document div.searchapp div.cards div.search-result { opacity: 0; } + .source { + a { + color: @s-link-color; + font-size: 16px; + } + } + div.col-full { width: 100%; div.meta { - margin-bottom: 0px; - font-size: 12px !important; + display: flex; + align-items: center; div.tags-list { display: flex; @@ -305,6 +312,9 @@ div#page-document div.searchapp div.cards div.search-result { .tags { display: block; + margin: 0 1.2em; + color: @s-dark-gray; + font-size: 16px; } } @@ -366,6 +376,11 @@ div#page-document div.searchapp div.cards div.search-result { } } + span.date { + color: #808285; + font-size: 16px; + } + div.col-left { width: calc(100% - 180px); padding-top: 0px; @@ -378,13 +393,20 @@ div#page-document div.searchapp div.cards div.search-result { width: 100% !important; } - span.date { - color: @sf-medium-gray2; + h3, + h3 > a { + margin-bottom: 0px !important; + color: @s-dark-gray; + font-size: 20px; + font-weight: 700; } - h3 { - margin-bottom: 0px !important; - font-weight: 400; + .result-description { + p { + color: @s-dark-gray; + font-size: 20px !important; + line-height: 24px; + } } div.ui.breadcrumb { diff --git a/src/SearchBlock/less/searchview.less b/src/SearchBlock/less/searchview.less index 81bec2c90..0d688d21f 100644 --- a/src/SearchBlock/less/searchview.less +++ b/src/SearchBlock/less/searchview.less @@ -34,7 +34,7 @@ div#page-document { margin: 0 !important; div.col-mid { - padding: 0 40px; + // padding: 0 40px; div.cards { margin-bottom: 5px; @@ -130,12 +130,12 @@ div#page-document { div.checked { label { - color: @sf-azure !important; + color: @s-pine-green !important; font-weight: 600; &:before { - background-color: @sf-azure !important; - box-shadow: 0px 0px 0px 2px @sf-azure !important; + background-color: @s-pine-green !important; + box-shadow: 0px 0px 0px 2px @s-pine-green !important; } &:after { @@ -149,8 +149,8 @@ div#page-document { width: auto !important; padding-bottom: 1em; padding-left: 0px !important; - margin-left: 20px; - font-size: 12px; + margin-left: 10px; + font-size: 16px; div.text { margin-right: 2px; @@ -163,7 +163,7 @@ div#page-document { } > i.icon { - color: @sf-azure; + color: @s-pine-green; } i.icon { @@ -188,18 +188,18 @@ div#page-document { } } - button.ui.button i { + .ui.button i { margin: 0px; } - div.sorting { + .sorting { width: auto; margin-bottom: 0.5em; - margin-left: 25px; - font-size: 12px; + // margin-left: 10px; + font-size: 16px; - div.inline.dropdown > span { - color: @sf-azure; + .inline.dropdown > span { + color: @s-pine-green; font-weight: 600; } diff --git a/src/SearchBlock/less/styles.less b/src/SearchBlock/less/styles.less index 46f259ebe..84c8a8e21 100644 --- a/src/SearchBlock/less/styles.less +++ b/src/SearchBlock/less/styles.less @@ -3,15 +3,12 @@ @type: extra; @element: custom; -// @import (multiple) '~@eeacms/search-less/theme.less'; - @import '~./variables.less'; @import '~./answersbox.less'; @import '~./filterlist.less'; @import '~./facets.less'; @import '~./searchresult.less'; @import '~./searchbox.less'; -@import '~./searchinput.less'; @import '~./searchview.less'; @import '~./paging.less'; @import '~./landingpage.less'; diff --git a/src/SearchBlock/less/variables.less b/src/SearchBlock/less/variables.less index 2848bee1b..1d07b54e2 100644 --- a/src/SearchBlock/less/variables.less +++ b/src/SearchBlock/less/variables.less @@ -1,7 +1,5 @@ -@s-dark-gray: #222222; // 545454 @s-medium-gray2: #545454; @s-medium-gray: #e0e1e2; // rgba(0, 0, 0, 0.85) -@s-light-gray: #edf1f2; @s-light-orange: #ffdfbb; @s-dark-orange: #9c5a0a; @s-light-blue: #cfe8fb; @@ -9,7 +7,7 @@ @sf-light-gray: #f2f2f2; @sf-light-gray2: #e0e1e2; -@sf-azure: #2d9390; +@s-pine-green: #2d9390; @sf-dark-azure: #267f7c; @sf-blue: #0f4b87; @sf-medium-gray: #cccccc; @@ -19,5 +17,8 @@ @s-pine-green: #007b6c; @s-dark-gray: #3d5265; +@s-blue: #004b7f; +@s-light-gray: #bcbec0; +@s-link-color: #0065a4; @search-result-max-width: 1000px; From 0cf2bce32745ee2e1f8db15973cb07518dc13271 Mon Sep 17 00:00:00 2001 From: kreafox Date: Tue, 31 May 2022 14:04:01 +0300 Subject: [PATCH 3/6] CSS cleanup & use less color variables from eea design system --- src/SearchBlock/less/answersbox.less | 4 +- src/SearchBlock/less/facets.less | 32 +++---- src/SearchBlock/less/filterlist.less | 16 ++-- src/SearchBlock/less/landingpage.less | 116 ++++++++----------------- src/SearchBlock/less/paging.less | 4 +- src/SearchBlock/less/searchbox.less | 35 ++++---- src/SearchBlock/less/searchresult.less | 16 ++-- src/SearchBlock/less/searchview.less | 14 +-- src/SearchBlock/less/variables.less | 7 -- 9 files changed, 95 insertions(+), 149 deletions(-) diff --git a/src/SearchBlock/less/answersbox.less b/src/SearchBlock/less/answersbox.less index fbe5038a9..1f3251134 100644 --- a/src/SearchBlock/less/answersbox.less +++ b/src/SearchBlock/less/answersbox.less @@ -9,7 +9,7 @@ .buttons { .button { - background-color: @s-pine-green !important; + background-color: @secondaryColor !important; } .button:first-child { @@ -63,7 +63,7 @@ // width: 0px; // height: 10px; // animation: progres 4s infinite ease-out; - // background-color: @s-pine-green; + // background-color: @secondaryColor; // border-radius: 1px; // } // } diff --git a/src/SearchBlock/less/facets.less b/src/SearchBlock/less/facets.less index bb0cea2df..773d38d1b 100644 --- a/src/SearchBlock/less/facets.less +++ b/src/SearchBlock/less/facets.less @@ -18,7 +18,7 @@ div#page-document .searchlib-block { div.boolean-facet { div.toggle { label { - color: @s-dark-gray !important; + color: @deepBlue !important; &:before { box-shadow: 0px 0px 0px 2px @sf-medium-gray2 !important; @@ -32,8 +32,8 @@ div#page-document .searchlib-block { &.checked { label { &:before { - background-color: @s-pine-green !important; - box-shadow: 0px 0px 0px 2px @s-pine-green !important; + background-color: @secondaryColor !important; + box-shadow: 0px 0px 0px 2px @secondaryColor !important; } } } @@ -63,7 +63,7 @@ div#page-document .searchlib-block { border: none; border-top: none; border-right: none; - border-bottom: 1px solid @s-light-gray; + border-bottom: 1px solid @midGray; border-left: none; margin: 0; margin-bottom: 3px; @@ -108,7 +108,7 @@ div#page-document .searchlib-block { border-bottom: 3px solid white; margin-right: 1.5em; border-radius: 0px; - color: @s-dark-gray; + color: @deepBlue; font-size: 18px; &:hover { @@ -120,11 +120,11 @@ div#page-document .searchlib-block { } &.active { - border-bottom: 3px solid @s-pine-green; - color: @s-pine-green; + border-bottom: 3px solid @secondaryColor; + color: @secondaryColor; // .icon { - // color: @s-pine-green !important; + // color: @secondaryColor !important; // } } @@ -332,7 +332,7 @@ div#page-document .searchlib-block { margin-right: 0px; background: @sf-light-gray !important; border-radius: 2px; - color: @s-pine-green !important; + color: @secondaryColor !important; float: right; font-size: 12px; } @@ -370,7 +370,7 @@ div#page-document .searchlib-block { position: absolute; top: 10px; right: 10px; - color: @s-pine-green; + color: @secondaryColor; } div.meta { @@ -460,7 +460,7 @@ div#page-document .searchlib-block { button { padding: 3px; background: @sf-light-gray !important; - color: @s-pine-green; + color: @secondaryColor; float: right; font-size: 10px; } @@ -490,7 +490,7 @@ div#page-document .searchlib-block { div.label { max-width: 100%; background: @sf-light-gray !important; - color: @s-pine-green; + color: @secondaryColor; font-weight: 600; span.text { @@ -670,7 +670,7 @@ div.ui.modal.facet { } &.active { - color: @s-pine-green; + color: @secondaryColor; } } } @@ -706,8 +706,8 @@ div.ui.modal.facet { &.checked { label { &:before { - background-color: @s-pine-green !important; - box-shadow: 0px 0px 0px 2px @s-pine-green !important; + background-color: @secondaryColor !important; + box-shadow: 0px 0px 0px 2px @secondaryColor !important; } &:after { @@ -773,7 +773,7 @@ div.ui.modal.facet { a.clear-filters { margin-left: auto; - color: @s-pine-green; + color: @secondaryColor; font-size: 12px; } } diff --git a/src/SearchBlock/less/filterlist.less b/src/SearchBlock/less/filterlist.less index 12d4a55dc..fbd761870 100644 --- a/src/SearchBlock/less/filterlist.less +++ b/src/SearchBlock/less/filterlist.less @@ -55,7 +55,7 @@ div#page-document .searchlib-block { div.filter-list-header { padding-right: 0.5rem; padding-left: 0.5rem; - color: @s-pine-green !important; + color: @secondaryColor !important; font-size: 14px; i.dropdown.icon { @@ -74,7 +74,7 @@ div#page-document .searchlib-block { div.filter-name { position: relative; top: 3px; - color: @s-dark-gray; + color: @deepBlue; font-size: 14px; } @@ -88,7 +88,7 @@ div#page-document .searchlib-block { } .ui.inverted.accordion .title:not(.ui) { - color: @s-dark-gray; + color: @deepBlue; } .ui.divider { @@ -101,7 +101,7 @@ div#page-document .searchlib-block { } button.reset-filters { - color: @s-pine-green !important; + color: @secondaryColor !important; font-size: 14px; i.icon { @@ -121,7 +121,7 @@ div#page-document .searchlib-block { margin-right: 0px; background: @sf-light-gray !important; border-radius: 2px; - color: @s-pine-green !important; + color: @secondaryColor !important; float: right; font-size: 12px; } @@ -154,7 +154,7 @@ div#page-document .searchlib-block { position: absolute; top: 10px; right: 10px; - color: @s-pine-green; + color: @secondaryColor; } div.meta { @@ -241,7 +241,7 @@ div#page-document .searchlib-block { button { padding: 3px; background: @sf-light-gray !important; - color: @s-pine-green; + color: @secondaryColor; float: right; font-size: 10px; } @@ -269,7 +269,7 @@ div#page-document .searchlib-block { &.active { .label { max-width: 100%; - color: @s-pine-green; + color: @secondaryColor; font-weight: 600; .text { diff --git a/src/SearchBlock/less/landingpage.less b/src/SearchBlock/less/landingpage.less index 1ef87d100..394128ae7 100644 --- a/src/SearchBlock/less/landingpage.less +++ b/src/SearchBlock/less/landingpage.less @@ -1,36 +1,13 @@ .landing-page-container { margin-top: 5em; - .ui.secondary.pointing.menu { - .tab-item { - position: relative; - display: block; - font-size: 20px; - font-weight: 500; - - // &::after { - // margin-right: 10px; - // // position: absolute; - // // bottom: 0; - // // width: 80%; - // // height: 1px; - // // background-color: red; - // // content: ''; - // } - } - - .active.tab-item { - font-weight: 500; - } - } - .search-tab-wrapper { width: 100%; overflow-x: auto; } .search-tab { - width: 1120px; + width: 1108px; margin-top: 4em; .ui.tab { @@ -40,75 +17,56 @@ .ui.menu { a.item { - border: none; - border-bottom: 4px solid #fff; - color: @s-dark-gray; - } - - a.item.active { - border-bottom: 4px solid @s-pine-green; - color: @s-pine-green; + font-size: 20px; } } .search-cards { - display: flex; - flex-wrap: wrap; + margin-top: 1em; } - .ui.card { - max-width: 210px; - flex-direction: column; - padding: 1.3em 0.7em; - margin: 0; - color: @s-dark-gray; - cursor: pointer; - text-align: center; - - .content { - flex-grow: initial; - padding: 0; - padding-bottom: 0.5em; - } - - .content > .description { - color: @s-dark-gray; - font-size: 18px; - } - - .content.extra { - color: @s-dark-gray; - } - - &:hover { - border: none; - box-shadow: none; - } - - img.facet-option-icon { - display: block; - width: auto; - height: 30px !important; - margin: 0 auto; - margin-bottom: 0.5em; - filter: grayscale(100%); + .ui.cards { + .ui.card { + margin-top: 2em; + color: @deepBlue; + cursor: pointer; + + .content { + flex-grow: initial; + padding: 0; + padding-bottom: 0.5em; + } + + .content > .header { + color: @deepBlue; + font-size: 18px; + font-weight: 400; + } + + .content.extra { + color: @deepBlue; + } + + &:hover { + border: none; + box-shadow: none; + } + + img.facet-option-icon { + display: block; + width: auto; + height: 30px !important; + margin-bottom: 0.5em; + filter: grayscale(100%); + } } } } - h4.browse-by { - color: @s-dark-gray; - } - div.info { width: 100%; margin-bottom: 1em; color: @sf-medium-gray2; font-size: 12px; } - - .search-cards { - display: flex; - flex-wrap: wrap; - } } diff --git a/src/SearchBlock/less/paging.less b/src/SearchBlock/less/paging.less index aee3aaf40..37674a74c 100644 --- a/src/SearchBlock/less/paging.less +++ b/src/SearchBlock/less/paging.less @@ -2,7 +2,7 @@ display: inline-block; margin-right: 0.5em; margin-left: 0.4em; - color: @s-dark-gray; + color: @deepBlue; font-size: 12px; } @@ -10,6 +10,6 @@ div.prev-next-paging button.next, div.prev-next-paging button.prev, button.download-btn { background: @sf-light-gray !important; - color: @s-pine-green !important; + color: @secondaryColor !important; font-size: 10px !important; } diff --git a/src/SearchBlock/less/searchbox.less b/src/SearchBlock/less/searchbox.less index 7804fc5bb..324ca5b28 100644 --- a/src/SearchBlock/less/searchbox.less +++ b/src/SearchBlock/less/searchbox.less @@ -61,7 +61,7 @@ display: flex; width: 100%; border: none; - border-bottom: 1.5px solid @s-pine-green; + border-bottom: 1.5px solid @secondaryColor; .terms-box-left { flex-grow: 0; @@ -69,7 +69,7 @@ .icon { width: 38px; height: 38px; - color: @s-pine-green !important; + color: @secondaryColor !important; font-size: 38px; } } @@ -77,7 +77,7 @@ input { width: calc(100% - 55px); border: none; - color: @s-dark-gray; + color: @deepBlue; font-family: @headerFont; font-size: 40px; @@ -88,7 +88,7 @@ } input::placeholder { - color: @s-dark-gray; + color: @deepBlue; font-weight: 200; } @@ -116,7 +116,7 @@ position: relative; width: 28px; height: 28px; - border: 2px solid @s-pine-green !important; + border: 2px solid @secondaryColor !important; margin-right: 20px; border-radius: 4px; box-shadow: none; @@ -134,7 +134,7 @@ top: 5px; left: 0; margin: 0 !important; - color: @s-pine-green; + color: @secondaryColor; opacity: 1; &:before, @@ -144,7 +144,7 @@ left: 11px; width: 2px; height: 15px; - background-color: @s-pine-green !important; + background-color: @secondaryColor !important; content: ' '; } @@ -213,7 +213,7 @@ div.boolean-facet { div.toggle { label { - color: @s-dark-gray !important; + color: @deepBlue !important; &:before { box-shadow: 0px 0px 0px 2px @sf-medium-gray2 !important; @@ -227,8 +227,8 @@ &.checked { label { &:before { - background-color: @s-pine-green !important; - box-shadow: 0px 0px 0px 2px @s-pine-green !important; + background-color: @secondaryColor !important; + box-shadow: 0px 0px 0px 2px @secondaryColor !important; } } } @@ -245,7 +245,7 @@ .item { padding-top: 1.5em !important; - color: @s-dark-gray !important; + color: @deepBlue !important; font-weight: 400; } } @@ -254,7 +254,7 @@ .title { justify-content: flex-end; border: none; - color: @s-dark-gray; + color: @deepBlue; font-weight: 500; } @@ -268,7 +268,7 @@ } .title i { - color: @s-dark-gray; + color: @deepBlue; } .title i:before { @@ -280,11 +280,6 @@ background-color: #fff; } } - - h4 { - margin-bottom: 0; - color: @s-dark-gray; - } } .sui-search-box__submit { @@ -390,7 +385,7 @@ .sui-search-box__autocomplete-container li { padding: 8px 40px; - color: @s-blue; + color: @darkCerulean; cursor: pointer; font-size: 18px; } @@ -412,7 +407,7 @@ } .sui-search-box__autocomplete-container li[aria-selected='true'] { - background: @s-blue; + background: @darkCerulean; color: #ffffff; } diff --git a/src/SearchBlock/less/searchresult.less b/src/SearchBlock/less/searchresult.less index 2df28a4e2..e873db576 100644 --- a/src/SearchBlock/less/searchresult.less +++ b/src/SearchBlock/less/searchresult.less @@ -53,8 +53,8 @@ a.ui.basic.button.suggestions-button { } div#page-document div.cards { - margin-bottom: 0px; - clear: both; + // margin-bottom: 0px; + // clear: both; div.card-item { width: unset; @@ -238,7 +238,7 @@ div#page-document div.searchapp div.cards div.search-result { div.item { padding: 5px !important; - background: @s-pine-green; + background: @secondaryColor; color: white; font-size: 10px; font-weight: 400; @@ -271,7 +271,7 @@ div#page-document div.searchapp div.cards div.search-result { .source { a { - color: @s-link-color; + color: @mediumPersianBlue; font-size: 16px; } } @@ -313,7 +313,7 @@ div#page-document div.searchapp div.cards div.search-result { .tags { display: block; margin: 0 1.2em; - color: @s-dark-gray; + color: @deepBlue; font-size: 16px; } } @@ -396,14 +396,14 @@ div#page-document div.searchapp div.cards div.search-result { h3, h3 > a { margin-bottom: 0px !important; - color: @s-dark-gray; + color: @deepBlue; font-size: 20px; font-weight: 700; } .result-description { p { - color: @s-dark-gray; + color: @deepBlue; font-size: 20px !important; line-height: 24px; } @@ -449,7 +449,7 @@ div#page-document div.searchapp div.cards div.search-result { } p { - color: @s-dark-gray; + color: @deepBlue; font-size: 12.8px; } } diff --git a/src/SearchBlock/less/searchview.less b/src/SearchBlock/less/searchview.less index 0d688d21f..6da937ea5 100644 --- a/src/SearchBlock/less/searchview.less +++ b/src/SearchBlock/less/searchview.less @@ -4,7 +4,7 @@ div#page-document { } .searchlib-block { - color: @s-dark-gray; + color: @deepBlue; div.searchapp { margin: 1em 0; @@ -130,12 +130,12 @@ div#page-document { div.checked { label { - color: @s-pine-green !important; + color: @secondaryColor !important; font-weight: 600; &:before { - background-color: @s-pine-green !important; - box-shadow: 0px 0px 0px 2px @s-pine-green !important; + background-color: @secondaryColor !important; + box-shadow: 0px 0px 0px 2px @secondaryColor !important; } &:after { @@ -163,7 +163,7 @@ div#page-document { } > i.icon { - color: @s-pine-green; + color: @secondaryColor; } i.icon { @@ -178,7 +178,7 @@ div#page-document { div.buttons { button { - background: @s-light-gray; + background: @midGray; font-size: 12px; } @@ -199,7 +199,7 @@ div#page-document { font-size: 16px; .inline.dropdown > span { - color: @s-pine-green; + color: @secondaryColor; font-weight: 600; } diff --git a/src/SearchBlock/less/variables.less b/src/SearchBlock/less/variables.less index 1d07b54e2..b63287bcb 100644 --- a/src/SearchBlock/less/variables.less +++ b/src/SearchBlock/less/variables.less @@ -7,7 +7,6 @@ @sf-light-gray: #f2f2f2; @sf-light-gray2: #e0e1e2; -@s-pine-green: #2d9390; @sf-dark-azure: #267f7c; @sf-blue: #0f4b87; @sf-medium-gray: #cccccc; @@ -15,10 +14,4 @@ @sf-dark-gray: #303030; @sf-medium-blue: #1c6ca4; -@s-pine-green: #007b6c; -@s-dark-gray: #3d5265; -@s-blue: #004b7f; -@s-light-gray: #bcbec0; -@s-link-color: #0065a4; - @search-result-max-width: 1000px; From 0756bbdda9cef289d9cfb6c6bc10d2b2570bbf96 Mon Sep 17 00:00:00 2001 From: kreafox Date: Tue, 31 May 2022 14:47:40 +0300 Subject: [PATCH 4/6] Improve landing page CSS --- src/SearchBlock/less/searchbox.less | 67 ++++++++++++++--------------- 1 file changed, 33 insertions(+), 34 deletions(-) diff --git a/src/SearchBlock/less/searchbox.less b/src/SearchBlock/less/searchbox.less index 324ca5b28..47dc82f92 100644 --- a/src/SearchBlock/less/searchbox.less +++ b/src/SearchBlock/less/searchbox.less @@ -236,48 +236,47 @@ } } -.demo-question { - margin-top: 2.5em; - - .ui.list { - margin: 0; - font-size: 18px; +//TODO: move list with more space to design system +.ui.list { + margin-top: 2em !important; + + > .item { + padding-top: 0 !important; + color: @deepBlue !important; + font-size: 18px !important; + font-weight: 400 !important; + } - .item { - padding-top: 1.5em !important; - color: @deepBlue !important; - font-weight: 400; - } + > .item:not(:last-child) { + padding-bottom: 3.5em !important; } +} - .ui.accordion.suggestion-accordion { - .title { - justify-content: flex-end; - border: none; - color: @deepBlue; - font-weight: 500; - } +.demo-question { + margin-top: 2.5em; - .accordion-title-wrapper { + .ui.basic.button.explore-more-queries { + display: flex; + align-items: center; + color: @deepBlue !important; + float: right; + font-size: 20px; + font-weight: 700; + + .icon { display: flex; align-items: center; + margin: 0 5px !important; + font-size: 30px; + opacity: 1; } - .active.title { - background-color: transparent; - } - - .title i { - color: @deepBlue; - } - - .title i:before { - font-size: 2.5rem; - } - - .content { - padding: 0 !important; - background-color: #fff; + &:hover, + &:active, + &:focus { + border: none; + background: transparent; + box-shadow: none; } } } From 321caeb3822c4e0efcaf60d5bbd4a1724d192979 Mon Sep 17 00:00:00 2001 From: kreafox Date: Thu, 2 Jun 2022 13:29:34 +0300 Subject: [PATCH 5/6] Style improvements & cleanup CSS --- src/SearchBlock/less/facets.less | 143 ++++++------------------- src/SearchBlock/less/filterlist.less | 140 ++++++++++++------------ src/SearchBlock/less/searchbox.less | 17 +-- src/SearchBlock/less/searchresult.less | 85 +++++++-------- src/SearchBlock/less/searchview.less | 6 ++ 5 files changed, 162 insertions(+), 229 deletions(-) diff --git a/src/SearchBlock/less/facets.less b/src/SearchBlock/less/facets.less index 773d38d1b..6cdd4b083 100644 --- a/src/SearchBlock/less/facets.less +++ b/src/SearchBlock/less/facets.less @@ -57,18 +57,8 @@ div#page-document .searchlib-block { } .content-section-tabs.menu { - overflow: auto; - width: 100%; - max-width: 100%; - border: none; - border-top: none; - border-right: none; - border-bottom: 1px solid @midGray; - border-left: none; - margin: 0; - margin-bottom: 3px; - border-radius: 0px; - box-shadow: none; + margin-bottom: 1em; + overflow-x: auto; .item.dropdown { padding: 0px 10px 0px 10px; @@ -104,10 +94,10 @@ div#page-document .searchlib-block { } a.item { - padding: 0px; - border-bottom: 3px solid white; - margin-right: 1.5em; - border-radius: 0px; + // padding: 0px; + // border-bottom: 3px solid white; + // margin-right: 1.5em; + // border-radius: 0px; color: @deepBlue; font-size: 18px; @@ -120,7 +110,7 @@ div#page-document .searchlib-block { } &.active { - border-bottom: 3px solid @secondaryColor; + // border-bottom: 3px solid @secondaryColor; color: @secondaryColor; // .icon { @@ -359,69 +349,6 @@ 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; - } - } - .card .meta { color: @s-medium-gray2 !important; } @@ -785,13 +712,13 @@ div.ui.modal.facet { margin: 0; } -@media screen and (min-width: 1000px) and (max-width: 1300px) { - div.content-section-tabs.menu { - a.item { - margin-right: 1.5em !important; - } - } -} +// @media screen and (min-width: 1000px) and (max-width: 1300px) { +// div.content-section-tabs.menu { +// a.item { +// margin-right: 1.5em !important; +// } +// } +// } @media only screen and (max-width: 1080px) { div.facets { @@ -812,27 +739,27 @@ div.ui.modal.facet { } } -@media screen and (max-width: 1000px) { - div.content-section-tabs.menu { - a.item { - margin-right: 0.5em !important; - - span.count { - font-size: 10px !important; - } - } - } -} - -@media screen and (max-width: 600px) { - div.content-section-tabs.menu { - div.item.dropdown { - div.menu { - transform: translateX(-90px); - } - } - } -} +// @media screen and (max-width: 1000px) { +// div.content-section-tabs.menu { +// a.item { +// margin-right: 0.5em !important; +// +// span.count { +// font-size: 10px !important; +// } +// } +// } +// } +// +// @media screen and (max-width: 600px) { +// div.content-section-tabs.menu { +// div.item.dropdown { +// div.menu { +// transform: translateX(-90px); +// } +// } +// } +// } @media only screen and (max-width: 766px) { div.content .searchlib-multiterm-facet.facet-sources button.ui.toggle { diff --git a/src/SearchBlock/less/filterlist.less b/src/SearchBlock/less/filterlist.less index fbd761870..c9733c386 100644 --- a/src/SearchBlock/less/filterlist.less +++ b/src/SearchBlock/less/filterlist.less @@ -1,9 +1,6 @@ div#page-document .searchlib-block { .top-facetslist-wrapper { - padding: 0em; - border: 0px; - margin: 0em; - box-shadow: none; + margin: 1.5em 0 !important; } .ui.inverted.segment.filter-list { @@ -143,78 +140,85 @@ 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; - } - } + // .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; + // } + // } .card .meta { color: @s-medium-gray2 !important; } .facetslist-wrapper { + .facet-btn { + margin: 0 0.6em 0.6em 0; + background: @midGray; + color: @lightBlack; + font-size: 16px; + } + .card { - width: 100% !important; + // width: 100% !important; border: 1px solid @sf-light-gray2; - margin: 3px 0px 3px 0px; + // margin: 3px 0px 3px 0px; border-radius: 3px; box-shadow: none; diff --git a/src/SearchBlock/less/searchbox.less b/src/SearchBlock/less/searchbox.less index 47dc82f92..457c73601 100644 --- a/src/SearchBlock/less/searchbox.less +++ b/src/SearchBlock/less/searchbox.less @@ -236,25 +236,28 @@ } } -//TODO: move list with more space to design system .ui.list { - margin-top: 2em !important; - > .item { padding-top: 0 !important; + padding-bottom: 1em !important; color: @deepBlue !important; font-size: 18px !important; font-weight: 400 !important; } - - > .item:not(:last-child) { - padding-bottom: 3.5em !important; - } } .demo-question { margin-top: 2.5em; + //TODO: move list with more space to design system + .ui.list { + margin-top: 2em !important; + + > .item:not(:last-child) { + padding-bottom: 3.5em !important; + } + } + .ui.basic.button.explore-more-queries { display: flex; align-items: center; diff --git a/src/SearchBlock/less/searchresult.less b/src/SearchBlock/less/searchresult.less index e873db576..472e81db6 100644 --- a/src/SearchBlock/less/searchresult.less +++ b/src/SearchBlock/less/searchresult.less @@ -232,18 +232,18 @@ div#page-document div.searchapp div.cards div.search-result { margin-bottom: 1.5em; clear: both; - div.menu.mlt { - top: -100%; - left: -5px; - - div.item { - padding: 5px !important; - background: @secondaryColor; - color: white; - font-size: 10px; - font-weight: 400; - } - } + // div.menu.mlt { + // top: -100%; + // left: -5px; + // + // div.item { + // padding: 5px !important; + // background: @secondaryColor; + // color: white; + // font-size: 10px; + // font-weight: 400; + // } + // } &:hover { div.controls { @@ -261,12 +261,16 @@ div#page-document div.searchapp div.cards div.search-result { color: @sf-blue !important; } - button.mlt { - position: relative; - top: -1px; - margin-left: 0.5em; - font-size: 10px; - opacity: 0; + // button.mlt { + // position: relative; + // top: -1px; + // margin-left: 0.5em; + // font-size: 10px; + // opacity: 0; + // } + + .result-description { + margin-bottom: 0.8em; } .source { @@ -276,22 +280,23 @@ div#page-document div.searchapp div.cards div.search-result { } } - div.col-full { + .tags-list { + display: flex; + flex-wrap: wrap; + margin-bottom: 0.5em; + color: @secondaryColor; + font-size: 16px; + font-weight: 700; + gap: 1.5em; + } + + .col-full { width: 100%; - div.meta { + .meta { display: flex; align-items: center; - - div.tags-list { - display: flex; - flex-wrap: wrap; - margin-bottom: 0.3em; - color: @sf-dark-gray; - font-size: 16px; - font-weight: 200; - gap: 1em; - } + margin-bottom: 0.5em; span.score { padding: 0px 5px 0px 5px; @@ -395,7 +400,6 @@ div#page-document div.searchapp div.cards div.search-result { h3, h3 > a { - margin-bottom: 0px !important; color: @deepBlue; font-size: 20px; font-weight: 700; @@ -432,21 +436,10 @@ div#page-document div.searchapp div.cards div.search-result { font-size: 14px !important; } - div.source { - margin-bottom: 10px; - font-size: 10px !important; - - span { - overflow: hidden; - white-space: nowrap; - // color: @sf-blue; - } - } - - h3, - p { - margin: 0px 0px 10px 0px; - } + // h3, + // p { + // margin: 0px 0px 10px 0px; + // } p { color: @deepBlue; diff --git a/src/SearchBlock/less/searchview.less b/src/SearchBlock/less/searchview.less index 6da937ea5..df7f68f48 100644 --- a/src/SearchBlock/less/searchview.less +++ b/src/SearchBlock/less/searchview.less @@ -253,6 +253,12 @@ div#page-document { } } } + + .top-filter-layout { + .results-layout { + max-width: none !important; + } + } } } From bbdc766000c27fc8fc04cf2067299edb3a8561f9 Mon Sep 17 00:00:00 2001 From: kreafox Date: Wed, 8 Jun 2022 09:20:09 +0300 Subject: [PATCH 6/6] WIP filter section --- src/SearchBlock/less/facets.less | 150 ++++++++-------- src/SearchBlock/less/filterlist.less | 247 +++++++++++++++++++-------- src/SearchBlock/less/searchbox.less | 4 +- 3 files changed, 262 insertions(+), 139 deletions(-) diff --git a/src/SearchBlock/less/facets.less b/src/SearchBlock/less/facets.less index 6cdd4b083..348ebe86b 100644 --- a/src/SearchBlock/less/facets.less +++ b/src/SearchBlock/less/facets.less @@ -433,8 +433,8 @@ div#page-document .searchlib-block { } } -div.ui.modal.facet { - background: @sf-light-gray; +.ui.modal.facet { + // background: @sf-light-gray; img.facet-option-icon { display: inline; @@ -444,29 +444,24 @@ div.ui.modal.facet { filter: grayscale(100%); } - div.content .searchlib-multiterm-facet.facet-sources { + > .header { + padding: 1em 1.5em; + } + + .content { + padding: 2em; + } + + .content .searchlib-multiterm-facet.facet-sources { img.facet-option-icon { + display: block; height: 28px; - margin-top: -10px; - margin-bottom: -10px; - margin-left: -5px; background: white; -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ filter: grayscale(100%); } } - div.content .searchlib-multiterm-facet.facet-content-types { - i.icon { - position: relative; - top: 0.22em; - margin-top: -5px; - margin-right: 3px; - margin-bottom: -5px; - font-size: 2em; - } - } - fieldset.sui-facet.searchlib-fixedrange-facet { padding: 20px; @@ -497,6 +492,7 @@ div.ui.modal.facet { display: flex; align-items: center; margin-top: 1.5em; + margin-bottom: 1em; --text-divider-gap: 0.5em; } @@ -521,11 +517,11 @@ div.ui.modal.facet { } div.header { - border: none; + border-bottom: 1px solid @midGray; background-color: initial; .facet-title { - margin-bottom: 1em; + color: @lightBlack; h3 { font-size: calc(10px + 4 * ((100vw - 320px) / 680)); @@ -541,20 +537,20 @@ div.ui.modal.facet { } div.multitermlist__facet__header { - .search-wrapper { - display: flex; - align-items: center; - } + // .search-wrapper { + // display: flex; + // align-items: center; + // } div.search { display: flex; // width: 100%; align-items: center; - margin-right: 0px; + margin-top: 1em; } input.multitermlist__search__text-input { - width: 100%; + width: 40%; padding: 0.2em; border: 1px solid @sf-medium-gray; margin-right: 1em; @@ -567,6 +563,12 @@ div.ui.modal.facet { } } + span.label { + color: @deepBlue; + font-size: 16px; + font-weight: 400; + } + div.order-controls { display: flex; flex-wrap: wrap; @@ -574,10 +576,6 @@ div.ui.modal.facet { justify-content: space-between; margin-left: auto; - span.label { - font-size: 14px; - } - div.toggle-label { cursor: pointer; } @@ -586,11 +584,12 @@ div.ui.modal.facet { padding-left: 0.3em; div.toggle-label { - padding: 0.3em 0.7em 0.3em 0.7em; + margin-left: 10px; background: white; border-radius: 8px; - color: @sf-dark-gray; - font-size: 14px; + color: @deepBlue; + font-size: 16px; + font-weight: 400; i.icon { margin-left: 3px; @@ -598,13 +597,14 @@ div.ui.modal.facet { &.active { color: @secondaryColor; + font-weight: 700; } } } } div.ui.toggle.checkbox { - padding-right: 0.5em; + padding-left: 0.5em; color: @sf-dark-gray !important; font-size: 14px; @@ -615,10 +615,10 @@ div.ui.modal.facet { &:before { position: absolute; top: 5px; - width: 2rem; + width: 1.6rem; height: 0.8rem !important; - background: @sf-medium-gray2 !important; - box-shadow: 0px 0px 0px 2px @sf-medium-gray2 !important; + background: #bdbdbd !important; + box-shadow: 0px 0px 0px 2px #bdbdbd !important; } &:after { @@ -646,58 +646,72 @@ div.ui.modal.facet { } } - button.term { - padding: 12px 10px 12px 10px; - border: 1px solid @sf-light-gray2; - margin: 5px; - background: white; - border-radius: 2px; - color: @sf-dark-gray; - font-size: 12px; - font-weight: 600; + .ui.card.term.active-term { + width: auto !important; + min-width: auto; + margin: 5px 1.5em 5px 0 !important; - span.title { - margin-right: 5px; + .header, + span.count { + color: @secondaryColor; + font-weight: 700; } + } - span.count { - color: @sf-medium-gray2; - font-size: 10px; + .ui.card.term { + min-width: 100px; + margin-top: 2em; + + &.disabled { + .header, + span.count { + color: #bfbfbf; + } + } + + .header { + border: none; + color: @deepBlue; + font-size: 16px; font-weight: 400; } - &.active { - border-color: @sf-medium-blue; - background: @sf-medium-blue !important; - box-shadow: none; + .content { + flex-grow: initial; + padding: 0; + padding-bottom: 0.5em; + } + &.active { + .header, span.count { - color: white; + color: @darkCerulean; + font-weight: 700; } &:hover { - background: @sf-medium-blue !important; + background: transparent !important; } } &:hover { - background: @sf-light-gray; + border: none; + background: transparent !important; + box-shadow: none; } - } - div.actions { - display: flex; - flex-wrap: wrap; - align-items: baseline; - border: none; - text-align: left; + .title { + margin-right: 5px; + } - button { - padding: 12px 10px 12px 10px; - border-radius: 2px; - font-size: 12px; + .count { + color: @deepBlue; + font-size: 16px; + font-weight: 400; } + } + div.actions { a.clear-filters { margin-left: auto; color: @secondaryColor; diff --git a/src/SearchBlock/less/filterlist.less b/src/SearchBlock/less/filterlist.less index c9733c386..d54ea6bc2 100644 --- a/src/SearchBlock/less/filterlist.less +++ b/src/SearchBlock/less/filterlist.less @@ -206,85 +206,194 @@ div#page-document .searchlib-block { .card .meta { color: @s-medium-gray2 !important; } +} - .facetslist-wrapper { - .facet-btn { - margin: 0 0.6em 0.6em 0; - background: @midGray; - color: @lightBlack; - font-size: 16px; - } +.facets-wrapper { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + margin: 1em 0; +} - .card { - // width: 100% !important; - border: 1px solid @sf-light-gray2; - // margin: 3px 0px 3px 0px; - border-radius: 3px; - box-shadow: none; +.ui.modal.filters-modal { + color: @lightBlack; - .content { - padding: 0.5em; - - .header { - padding: 0px; - margin: 0px; - color: @sf-dark-gray; - font-size: 16px; - font-weight: 400; - - .text { - display: block; - overflow: hidden; - max-width: calc(100% - 35px); - float: left; - text-overflow: ellipsis; - white-space: nowrap; - } + .header { + border-bottom: 1px solid @midGray; + color: @lightBlack; + } - .clear-filters { - button { - padding: 3px; - background: @sf-light-gray !important; - color: @secondaryColor; - float: right; - font-size: 10px; - } - } - } + .modal-content-section { + margin-bottom: 2em; + font-size: 24px !important; + } + + .filter-buttons { + display: flex; + flex-wrap: wrap; + } + + .ui.button.add-filter { + margin: 1em 2em 1em 0 !important; + background: #f9f9f9; + box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25); + color: @lightBlack; + font-weight: 700; + } +} + +.modal-section-title { + // margin-bottom: 1em; + color: @lightBlack; + font-size: 20px; + font-weight: 700; +} + +.facet-list-header { + display: flex; + align-items: center; + margin-bottom: 1.5em; + + h4 { + margin: 0; + } +} + +.ui.basic.button.clear-btn { + padding: 0.8em; + color: @secondaryColor !important; + font-size: 14px; + font-weight: 500; + + &:hover { + border: none; + box-shadow: none; + } +} + +.ui.card.facet { + width: auto !important; + // min-width: 180px; + border: none !important; + margin: 5px 10px 5px 0 !important; + background: @midGray !important; + border-radius: 0 !important; + // margin: 3px 0px 3px 0px; + box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25) !important; + color: @lightBlack !important; + + .content { + padding: 0.5em 1em 0.5em; + } + + .filter.description { + display: flex; + + .ui.label { + padding: 5px; + margin-top: 4px; + margin-bottom: 0px; + background: @sf-blue; + color: white; + font-size: 12px; + + .text { + min-height: 13px !important; + } + } + } + + &.active { + .label { + max-width: 100%; + color: @secondaryColor; + font-weight: 600; + + .text { + display: block; + overflow: hidden; + max-width: calc(100% - 14px); + float: left; + text-overflow: hidden; + white-space: nowrap; } + } + } +} - .filter.description { - display: flex; +.ui.card .card-header { + display: flex !important; + align-items: center; + padding: 0px !important; + margin: 0px !important; + color: @lightBlack; + font-size: 16px; + font-weight: 700; + text-align: center !important; + + .text { + display: flex; + align-items: center; + } - .ui.label { - padding: 5px; - margin-top: 4px; - margin-bottom: 0px; - background: @sf-blue; - color: white; - font-size: 12px; + .clear-filters { + position: relative; + width: 16px; + height: 16px; + padding: 3px; + border: 1px solid @lightBlack !important; + margin-left: 20px; + background: none !important; + border-radius: 2px; + box-shadow: none; + color: @lightBlack; + opacity: 1; - .text { - min-height: 13px !important; - } - } + &:hover { + border: none; + box-shadow: none; + outline: none; + } + + i.close.icon { + position: absolute; + top: 3px; + left: -4px; + margin: 0 !important; + color: @lightBlack; + opacity: 1; + + &:before, + &:after { + position: absolute; + top: 0; + left: 11px; + width: 1px; + height: 9px; + background-color: @lightBlack !important; + content: ' '; } - &.active { - .label { - max-width: 100%; - color: @secondaryColor; - font-weight: 600; - - .text { - display: block; - overflow: hidden; - max-width: calc(100% - 14px); - float: left; - text-overflow: hidden; - white-space: nowrap; - } - } + &:before { + transform: rotate(45deg); + } + + &:after { + transform: rotate(-45deg); + } + } + } +} + +.ui.card.active-term { + .clear-filters { + border: 1px solid @secondaryColor !important; + + i.close.icon { + &:before, + &:after { + background-color: @secondaryColor !important; } } } diff --git a/src/SearchBlock/less/searchbox.less b/src/SearchBlock/less/searchbox.less index 457c73601..897f96961 100644 --- a/src/SearchBlock/less/searchbox.less +++ b/src/SearchBlock/less/searchbox.less @@ -387,7 +387,7 @@ .sui-search-box__autocomplete-container li { padding: 8px 40px; - color: @darkCerulean; + color: @primaryColor; cursor: pointer; font-size: 18px; } @@ -409,7 +409,7 @@ } .sui-search-box__autocomplete-container li[aria-selected='true'] { - background: @darkCerulean; + background: @primaryColor; color: #ffffff; }