From b9c8b23f000d68e470cf2e929588b4b010bd1e56 Mon Sep 17 00:00:00 2001 From: Leonardo Zanotti Date: Mon, 22 Jul 2024 09:12:00 -0300 Subject: [PATCH] FIX - indicativo de resultados da search --- .../components/search-list/template.php | 7 +- .../Metabase/assets/css/plugin-metabase.css | 346 ++++- .../BaseV2/assets-src/sass/pages/_search.scss | 1187 ++++++++--------- 3 files changed, 933 insertions(+), 607 deletions(-) diff --git a/src/modules/Search/components/search-list/template.php b/src/modules/Search/components/search-list/template.php index d083e74575..fe76846156 100644 --- a/src/modules/Search/components/search-list/template.php +++ b/src/modules/Search/components/search-list/template.php @@ -1,4 +1,5 @@
- {{entities.metadata.count}} {{entityType}} + {{entities.metadata.count}} {{entityType}}
@@ -66,10 +67,10 @@
- {{entities.metadata.count}} {{entityType}} + {{entities.metadata.count}} {{entityType}}
- {{entities.metadata.count}} {{entityType}} + {{entities.metadata.count}} {{entityType}}
diff --git a/src/plugins/Metabase/assets/css/plugin-metabase.css b/src/plugins/Metabase/assets/css/plugin-metabase.css index ccccaefed6..d4fe28743f 100644 --- a/src/plugins/Metabase/assets/css/plugin-metabase.css +++ b/src/plugins/Metabase/assets/css/plugin-metabase.css @@ -1 +1,345 @@ -.list-dashboard{background-color:var(--mc-white);color:var(--mc-black);display:grid;grid-template-columns:19.0625rem calc(100% - 19.0625rem);margin:0 auto;max-width:90rem}.list-dashboard .selected{background-color:var(--mc-primary-500)}.list-dashboard__title{color:var(--mc-gray-700);font-size:.75rem;margin:0 auto;padding:1rem 1rem 1rem 0;text-transform:uppercase}.list-dashboard__text{color:var();font-size:.875rem}.list-dashboard .textselected{color:var(--mc-white)}.list-dashboard__link{color:var(--mc-black);text-decoration:none}.list-dashboard__link a{text-decoration:none}.list-dashboard__nav{background-color:var(--mc-white);border-right:1px solid var(--mc-gray-100);display:flex;flex-direction:column;gap:.5rem;list-style-type:none;margin:0;padding:1rem 2rem 1rem 1.5rem}.list-dashboard__iframe{border-style:none;height:100%;width:100%}.list-dashboard__item{background-color:var(--mc-white);border-radius:.25rem;color:var(--mc-black);margin:0;padding:.5rem 1rem;width:15.625rem}.home-metabase{align-items:center;background-color:var(--mc-home-opportunities);display:flex;flex-direction:column;margin:0 auto;overflow:hidden;padding:3.75rem 1rem;position:relative}.home-metabase__header{align-items:center;display:grid;grid-template-columns:1fr 28.4375rem;margin:0 auto;max-width:73.125rem;width:100%}@media (max-width:37.5rem){.home-metabase__header{align-items:center;display:flex;flex-direction:column}}.home-metabase__left{align-items:flex-start;color:var(--mc-white);display:flex;flex-direction:column;gap:1rem}@media (max-width:37.5rem){.home-metabase__left{align-items:center}.home-metabase__text{text-align:center}}.home-metabase__img{max-width:100%;width:17.8125rem}.home-metabase__panel{display:flex;flex-direction:column;gap:.75rem}.home-metabase__subtitle{color:var(--mc-white)}.home-metabase__content{align-items:stretch;display:flex;flex-direction:row;flex-wrap:wrap;gap:1.125rem .8125rem;margin:0 auto;max-width:73.125rem;z-index:2}@media (max-width:31.25rem){.home-metabase__content{gap:1.125rem 0}}.metabase-dashboard{background-color:var(--mc-gray-100);margin:0 auto;max-width:90rem;padding-inline:7.4375rem}@media (max-width:31.25rem){.metabase-dashboard{padding-inline:1rem}}.metabase-dashboard__page{background-color:var(--mc-gray-100)}.metabase-dashboard__header{display:flex;flex-direction:column;padding:2.5rem 0 1rem}.metabase-dashboard__content{display:flex;flex-direction:row;flex-wrap:wrap;gap:1.5rem;padding-bottom:13.5rem}.metabase-dashboard__card{align-items:flex-start;background:var(--mc-white);border:1px solid var(--mc-gray-100);border-radius:8px;display:inline-flex;flex-direction:column;gap:6px;max-width:23.0625rem;padding:16px 35px 16px 16px}.metabase-card{align-content:space-between;background-color:var(--mc-white);border:.0625rem solid var(--mc-gray-100);border-radius:.5rem;display:grid;max-width:100%;padding:1rem;width:23.1875rem}.metabase-card__header{display:grid;gap:1rem;grid-template-columns:2rem 1fr}.metabase-card__icon{background-color:var(--mc-white);font-size:1.5rem;justify-self:center}.metabase-card__content{align-items:end;display:grid;gap:1.625rem;grid-template-columns:1fr;text-align:center}.metabase-card__number{font-size:var(--mc-font-size-lg)}.metabase-card__label{font-weight:600}.metabase-card__info{align-items:center;display:flex;flex-direction:column;margin:1.125rem 0;text-align:center}.metabase-card__number{font-size:var(--mc-font-size-xl)}.metabase-card__number--long{font-size:var(--mc-font-size-sm)}.metabase-card--double .metabase-card__content{grid-template-columns:1fr 1fr}.metabase-card--double .metabase-card__info:first-of-type .metabase-card__number{font-size:var(--mc-font-size-lg)}.metabase-card--double .metabase-card__info:first-of-type .metabase-card__number--long{font-size:var(--mc-font-size-sm)}.metabase-card--double .metabase-card__number{font-size:var(--mc-font-size-md)}@media (max-width:31.25rem){.metabase-card{min-width:18.5625rem;width:100%}}.controller-metabase{background-color:var(--mc-gray-100)}.entity-cards{align-items:center;display:flex;flex-direction:column;margin:0 auto;overflow:hidden;padding:2px;position:relative}.entity-cards__header{align-items:center;display:grid;grid-template-columns:1fr 28.4375rem;margin:0 auto;width:100%}@media (max-width:37.5rem){.entity-cards__header{align-items:center;display:flex;flex-direction:column}}.entity-cards__panel{display:flex;flex-direction:column;gap:.75rem}.entity-cards__content{align-items:stretch;display:flex;flex-direction:row;flex-wrap:wrap;gap:1.125rem .8125rem;margin:0 auto;max-width:73.125rem;z-index:2}@media (max-width:31.25rem){.entity-cards__content{gap:1.125rem 0}}.entity-cards-cards{align-content:space-between;background-color:var(--mc-white);border:.125rem solid var(--mc-gray-100);border-radius:.5rem;box-shadow:2px 2px 8px 0 rgba(0,0,0,.251);display:grid;max-width:100%;padding:.3125rem;width:13.75rem}.entity-cards-cards__header{display:grid;gap:1rem;grid-template-columns:2rem 1fr}.entity-cards-cards__icon{align-self:self-start;background-color:var(--mc-white);color:#ef7b45}.entity-cards-cards__content{align-items:end;border-radius:.5rem;display:flex;flex-direction:row;justify-content:space-between;text-align:center}.entity-cards-cards__number{font-size:var(--mc-font-size-lg)}.entity-cards-cards__label{color:#666;font-size:var(--mc-font-size-xxxs)}.entity-cards-cards__info{align-items:left;display:flex;flex-direction:column;justify-content:space-between;margin-left:.125rem;text-align:left}.entity-cards-cards--double .entity-cards-cards__content{grid-template-columns:1fr 1fr}.entity-cards-cards--double .entity-cards-cards__info:first-of-type .metabase-card__number{font-size:var(--mc-font-size-lg)}.entity-cards-cards--double .entity-cards-cards__info:first-of-type .metabase-card__number--long{font-size:var(--mc-font-size-sm)}.entity-cards-cards--double .entity-cards-cards__number{font-size:var(--mc-font-size-md)}@media (max-width:31.25rem){.entity-cards-cards{min-width:18.5625rem;width:100%}} +/* ----- 1: SETTINGS ------- */ +/* ----- 2: ATOMS ------- */ +/* ----- 3: LAYOUT ------- */ +/* ----- 4: COMPONENTS ------- */ +.list-dashboard { + background-color: var(--mc-white); + color: var(--mc-black); + display: grid; + grid-template-columns: 19.0625rem calc(100% - 19.0625rem); + max-width: 90rem; + margin: 0 auto; +} +.list-dashboard .selected { + background-color: var(--mc-primary-500); +} +.list-dashboard__title { + color: var(--mc-gray-700); + font-size: 0.75rem; + margin: 0 auto; + padding: 1rem 1rem 1rem 0; + text-transform: uppercase; +} +.list-dashboard__text { + font-size: 0.875rem; + color: var(); +} +.list-dashboard .textselected { + color: var(--mc-white); +} +.list-dashboard__link { + color: var(--mc-black); + text-decoration: none; +} +.list-dashboard__link a { + text-decoration: none; +} +.list-dashboard__nav { + list-style-type: none; + background-color: var(--mc-white); + padding: 1rem 2rem 1rem 1.5rem; + margin: 0; + border-right: 1px solid var(--mc-gray-100); + display: flex; + gap: 0.5rem; + flex-direction: column; +} +.list-dashboard__iframe { + height: 100%; + width: 100%; + border-style: none; +} +.list-dashboard__item { + padding: 0.5rem 1rem 0.5rem 1rem; + margin: 0; + border-radius: 0.25rem; + width: 15.625rem; + background-color: var(--mc-white); + color: var(--mc-black); +} + +.home-metabase { + margin: 0 auto; + background-color: var(--mc-home-opportunities); + padding: 3.75rem 1rem; + position: relative; + display: flex; + align-items: center; + overflow: hidden; + flex-direction: column; +} +.home-metabase__header { + margin: 0 auto; + max-width: 73.125rem; + width: 100%; + display: grid; + align-items: center; + grid-template-columns: 1fr 28.4375rem; +} +@media (max-width: 37.5rem) { + .home-metabase__header { + display: flex; + flex-direction: column; + align-items: center; + } +} +.home-metabase__left { + color: var(--mc-white); + display: flex; + flex-direction: column; + gap: 1rem; + align-items: flex-start; +} +@media (max-width: 37.5rem) { + .home-metabase__left { + align-items: center; + } +} +@media (max-width: 37.5rem) { + .home-metabase__text { + text-align: center; + } +} +.home-metabase__img { + width: 17.8125rem; + max-width: 100%; +} +.home-metabase__panel { + display: flex; + flex-direction: column; + gap: 0.75rem; +} +.home-metabase__subtitle { + color: var(--mc-white); +} +.home-metabase__content { + align-items: stretch; + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin: 0 auto; + max-width: 73.125rem; + z-index: 2; + gap: 1.125rem 0.8125rem; +} +@media (max-width: 31.25rem) { + .home-metabase__content { + gap: 1.125rem 0; + } +} + +.metabase-dashboard { + padding-inline: 7.4375rem; + background-color: var(--mc-gray-100); + max-width: 90rem; + margin: 0 auto; +} +@media (max-width: 31.25rem) { + .metabase-dashboard { + padding-inline: 1rem; + } +} +.metabase-dashboard__page { + background-color: var(--mc-gray-100); +} +.metabase-dashboard__header { + display: flex; + flex-direction: column; + padding: 2.5rem 0 1rem 0; +} +.metabase-dashboard__content { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 1.5rem; + padding-bottom: 13.5rem; +} +.metabase-dashboard__card { + display: inline-flex; + padding: 16px 35px 16px 16px; + flex-direction: column; + align-items: flex-start; + gap: 6px; + max-width: 23.0625rem; + border-radius: 8px; + border: 1px solid var(--mc-gray-100); + background: var(--mc-white); +} + +.metabase-card { + width: 23.1875rem; + max-width: 100%; + background-color: var(--mc-white); + border: 0.0625rem solid var(--mc-gray-100); + padding: 1rem; + border-radius: 0.5rem; + display: grid; + align-content: space-between; +} +.metabase-card__header { + display: grid; + grid-template-columns: 2rem 1fr; + gap: 1rem; +} +.metabase-card__icon { + background-color: var(--mc-white); + font-size: 1.5rem; + justify-self: center; +} +.metabase-card__content { + display: grid; + grid-template-columns: 1fr; + align-items: end; + text-align: center; + gap: 1.625rem; +} +.metabase-card__number { + font-size: var(--mc-font-size-lg); +} +.metabase-card__label { + font-weight: 600; +} +.metabase-card__info { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + margin: 1.125rem 0; +} +.metabase-card__number { + font-size: var(--mc-font-size-xl); +} +.metabase-card__number--long { + font-size: var(--mc-font-size-sm); +} +.metabase-card--double .metabase-card__content { + grid-template-columns: 1fr 1fr; +} +.metabase-card--double .metabase-card__info:first-of-type .metabase-card__number { + font-size: var(--mc-font-size-lg); +} +.metabase-card--double .metabase-card__info:first-of-type .metabase-card__number--long { + font-size: var(--mc-font-size-sm); +} +.metabase-card--double .metabase-card__number { + font-size: var(--mc-font-size-md); +} +@media (max-width: 31.25rem) { + .metabase-card { + min-width: 18.5625rem; + width: 100%; + } +} + +.controller-metabase { + background-color: var(--mc-gray-100); +} + +.entity-cards { + margin: 0 auto; + position: relative; + display: flex; + align-items: center; + overflow: hidden; + flex-direction: column; + padding: 2px; +} +.entity-cards__header { + margin: 0 auto; + width: 100%; + display: grid; + align-items: center; + grid-template-columns: 1fr 28.4375rem; +} +@media (max-width: 37.5rem) { + .entity-cards__header { + display: flex; + flex-direction: column; + align-items: center; + } +} +.entity-cards__panel { + display: flex; + flex-direction: column; + gap: 0.75rem; +} +.entity-cards__content { + align-items: stretch; + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin: 0 auto; + max-width: 73.125rem; + z-index: 2; + gap: 1.125rem 0.8125rem; +} +@media (max-width: 31.25rem) { + .entity-cards__content { + gap: 1.125rem 0; + } +} + +.entity-cards-cards { + width: 13.75rem; + max-width: 100%; + background-color: var(--mc-white); + border: 0.125rem solid var(--mc-gray-100); + box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2509803922); + border-radius: 0.5rem; + display: grid; + align-content: space-between; + padding: 0.3125rem; +} +.entity-cards-cards__header { + display: grid; + grid-template-columns: 2rem 1fr; + gap: 1rem; +} +.entity-cards-cards__icon { + background-color: var(--mc-white); + align-self: self-start; + color: #EF7B45; +} +.entity-cards-cards__content { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: end; + text-align: center; + border-radius: 0.5rem; +} +.entity-cards-cards__number { + font-size: var(--mc-font-size-lg); +} +.entity-cards-cards__label { + color: #666666; + font-size: var(--mc-font-size-xxxs); +} +.entity-cards-cards__info { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: left; + text-align: left; + margin-left: 0.125rem; +} +.entity-cards-cards--double .entity-cards-cards__content { + grid-template-columns: 1fr 1fr; +} +.entity-cards-cards--double .entity-cards-cards__info:first-of-type .metabase-card__number { + font-size: var(--mc-font-size-lg); +} +.entity-cards-cards--double .entity-cards-cards__info:first-of-type .metabase-card__number--long { + font-size: var(--mc-font-size-sm); +} +.entity-cards-cards--double .entity-cards-cards__number { + font-size: var(--mc-font-size-md); +} +@media (max-width: 31.25rem) { + .entity-cards-cards { + min-width: 18.5625rem; + width: 100%; + } +} + +/* ----- 5: AREAS ------- */ diff --git a/src/themes/BaseV2/assets-src/sass/pages/_search.scss b/src/themes/BaseV2/assets-src/sass/pages/_search.scss index b2af7255b5..6e70b04ab3 100644 --- a/src/themes/BaseV2/assets-src/sass/pages/_search.scss +++ b/src/themes/BaseV2/assets-src/sass/pages/_search.scss @@ -1,609 +1,590 @@ -@use '../0.settings/mixins' as *; +@use "../0.settings/mixins" as *; .search { - .mc-loading { - color: var(--mc-low-500); - } - - .tab-component { - &.map { - .mc-loading { - left: 50%; - margin-left: size(-50); - position: fixed; - top: 49%; - width: size(200); - z-index: 1000; - } - } - - &.list { - - .mc-loading, - .panel__row { - grid-column-end: span 9; - text-align: center; - } - } - } - - &__header { - background-color: var(--mc-high-500); - border: unset; - bottom: 0; - padding: size(50) 0 0; - - &--content { - align-items: center; - display: flex; - flex-wrap: wrap; - gap: size(10); - justify-content: space-between; - margin: 0 auto; - max-width: size(1170); - padding: 0 size(16); - - &-left { - align-items: center; - display: flex; - gap: size(16); - - &-icon { - align-items: center; - border-radius: 50%; - display: flex; - height: size(48); - justify-content: center; - width: size(48); - - .iconify { - font-size: size(20); - - } - - @media (max-width: size(500)) { - height: size(32); - width: size(32); - - .iconify { - font-size: size(10); - - } - } - } - - &-label { - line-height: size(65); - font-size: size(48); - font-weight: 700; - - @media (max-width: size(500)) { - line-height: size(33); - font-size: size(24); - font-weight: 700; - } - } - } - - &--right { - .button { - - display: flex; - gap: 24px; - - } - } - } - } - - &__tabs { - - // label - before - tabs - &--before { - line-height: size(22); - font-size: size(16); - font-weight: 600; - - @media (max-width: size(500)) { - line-height: size(20); - font-size: size(14); - } - } - - //header - tabs - .tabs-component__header { - align-items: flex-end; - height: size(87.5); - padding: size(21) size(16) size(18); - position: relative; - - &--left { - align-items: center; - bottom: size(0); - position: absolute; - left: size(16); - } - - &--right { - display: flex; - flex-direction: row; - justify-content: flex-end; - left: 0; - position: absolute; - width: 100%; - } - - @media (max-width: size(800)) { - margin-top: size(60); - height: size(63); - justify-content: center; - - &--left { - bottom: 0; - } - } - } - - // paineis - tabs - .tabs-component__panels { - background-color: var(--mc-gray-100); - margin: 0; - min-height: size(500); - } - - // grupo de botões - tabs - .tabs-component__buttons { - margin: 0; - z-index: 1; - - // resolve a sobreposição dos filtros no tabs. - .search-filter .map .search-filter__actions { - z-index: 0; - } - - .tabs-component__button { - font-size: size(14); - font-weight: 700; - line-height: size(19); - - a { - margin: 0; - padding: size(11) size(13) size(11); - - @media (max-width: size(800)) { - padding: size(7) size(13) size(7); - } - - .iconify, - span { - color: var(--mc-gray-500); - } - } - - &--active { - a { - - .iconify, - span { - color: var(--mc-gray-700); - } - } - } - - &--active::after { - background-color: var(--mc-primary-500); - } - - - - } - - } - - // tab - list - &--list { - margin: 0 auto; - max-width: size(1170); - padding: size(24) size(16) size(40); - width: 100%; - - .search-list { - &__order { - align-items: flex-end; - display: flex; - gap: size(20) size(24); - margin-bottom: size(10); - - .field { - width: auto; - - select { - border-radius: var(--mc-border-radius-sm); - border: var(--mc-border-solid) var(--mc-primary-500); - font-size: size(14); - font-weight: 800; - line-height: size(19); - padding: size(9) size(32) size(8) size(12); - } - } - - .foundResults { - background-color: var(--mc-white); - border-radius: var(--mc-border-radius-sm); - font-weight: 700; - font-size: size(14); - line-height: size(18); - padding: size(11) size(16); - } - - .buttons { - display: flex; - gap: size(8); - - .orderBtn { - align-items: center; - background-color: var(--mc-white); - border-radius: var(--mc-border-radius-sm); - border: none; - display: flex; - height: size(40); - justify-content: center; - width: size(40); - - .iconify { - color: var(--mc-gray-300); - font-size: size(24); - margin-top: size(2); - } - - &.active { - background-color: var(--mc-primary-500); - - .iconify { - color: var(--mc-white); - } - } - } - } - - @media (max-width: size(610)) { - align-items: center; - flex-direction: column-reverse; - - .field, .foundResults { - width: 100%; - } - } - } - - &__filter { - display: flex; - grid-row-start: 1; - grid-column-start: 10; - justify-content: flex-end; - max-width: size(1170); - padding: 0; - - &--filter { - width: 100%; - } - } - - .entity-card { - &__header { - @media (max-width: size(800)) { - flex-direction: column; - } - } - .user-info__attr { - font-weight: 600; - font-size: size(14); - - .upper { - text-transform: uppercase; - } - - .event__color { - display: none; - } - } - } - - &__loadMore { - width: size(227); - margin: 0 auto; - } - - &__cards { - position: relative; - - //aqui é o estilo do marcador de tempo - &--date { - align-items: center; - display: flex; - gap: size(8); - margin-bottom: size(20); - - &-info { - display: flex; - flex-direction: column; - left: 0; - position: relative; - text-align: right; - - .weekend { - font-size: size(13); - } - - .actual-date { - display: flex; - flex-direction: column; - left: 0; - position: relative; - text-align: right; - font-size: 700; - - h2 { - } - - label { - font-size: 18px; - font-weight: 600; - } - } - } - - &-line { - height: size(1); - background: black; - flex-grow: 1; - } - } - } - } - - @media (max-width: size(900)) { - .col-9 { - grid-column-end: span 12; - } - - .col-3 { - grid-column-start: 1; - grid-column-end: 13; - } - } - } - - // tab - map - &--map { - - position: relative; - - .search-filter { - grid-column-start: 10; - } - - .mc-map { - height: size(800); - - .leaflet-container { - z-index: 0; - } - - @media (max-width: size(600)) { - height: size(500); - } - - @media (max-width: size(360)) { - height: size(500); - } - } - - .search-map { - &__filter { - display: flex; - justify-content: flex-end; - max-width: size(1170); - margin: 0 auto; - padding: 0 size(16); - - &--filter { - position: absolute; - width: size(328); - z-index: 1; - } - } - - &__events { - - overflow-y: auto; - position: absolute; - width: size(360); - background-color: var(--mc-gray-100); - top: 0; - height: 100%; - left: 0; - padding: 0 size(16) size(16); - - &--close { - float: right; - font-weight: 600; - font-size: size(16); - line-height: size(22); - color: var(--mc-low-700); - - .iconify { - width: size(22); - height: size(22); - } - - &:hover { - color: var(--mc-low-500); - } - } - - &--adress { - display: flex; - align-items: baseline; - justify-content: center; - gap: size(8); - - .iconify { - background-color: white; - min-width: max-content; - } - - &-label { - font-weight: 600; - font-size: size(14); - line-height: size(19); - } - } - - &--spaces { - clear: both; - padding: size(14) size(16) size(21); - background-color: var(--mc-white); - border-radius: var(--mc-border-radius-xs); - - &-title { - font-weight: 600; - font-size: size(16); - line-height: size(22); - } - - .space-link { - display: flex; - gap: size(6); - align-items: center; - - &__icon { - width: size(32); - height: size(32); - display: flex; - align-items: center; - justify-content: center; - border-radius: var(--mc-border-radius-pill); - background-color: var(--mc-spaces-500); - - .iconify { - color: var(--mc-white); - } - } - - a { - text-decoration: none; - color: var(--mc-low-500); - margin: size(16) 0; - font-weight: 700; - font-size: size(18); - line-height: size(25); - } - - } - - } - } - - &__cards { - position: relative; - - //aqui é o estilo do marcador de tempo - &--date { - align-items: center; - display: flex; - gap: size(8); - margin: size(20) 0; - - &-info { - display: flex; - flex-direction: column; - left: 0; - position: relative; - text-align: right; - - .weekend { - font-size: size(13); - } - } - - &-line { - height: size(1); - background: black; - flex-grow: 1; - } - } - } - } - } - } - - @media (max-width: size(900)) { - &__tabs { - - &--map, - &--list { - - .search-filter { - &__actions { - display: flex; - flex-direction: row; - gap: size(8); - - &--formBtn { - position: relative !important; - bottom: unset !important; - } - } - - &__filter { - height: 100vh !important; - position: fixed !important; - right: 0 !important; - top: 0 !important; - width: 100vw !important; - } - } - - .search-map { - &__filter { - &--filter { - position: relative; - width: 100%; - } - } - - } - } - } - } + .mc-loading { + color: var(--mc-low-500); + } + + .tab-component { + &.map { + .mc-loading { + left: 50%; + margin-left: size(-50); + position: fixed; + top: 49%; + width: size(200); + z-index: 1000; + } + } + + &.list { + .mc-loading, + .panel__row { + grid-column-end: span 9; + text-align: center; + } + } + } + + &__header { + background-color: var(--mc-high-500); + border: unset; + bottom: 0; + padding: size(50) 0 0; + + &--content { + align-items: center; + display: flex; + flex-wrap: wrap; + gap: size(10); + justify-content: space-between; + margin: 0 auto; + max-width: size(1170); + padding: 0 size(16); + + &-left { + align-items: center; + display: flex; + gap: size(16); + + &-icon { + align-items: center; + border-radius: 50%; + display: flex; + height: size(48); + justify-content: center; + width: size(48); + + .iconify { + font-size: size(20); + } + + @media (max-width: size(500)) { + height: size(32); + width: size(32); + + .iconify { + font-size: size(10); + } + } + } + + &-label { + line-height: size(65); + font-size: size(48); + font-weight: 700; + + @media (max-width: size(500)) { + line-height: size(33); + font-size: size(24); + font-weight: 700; + } + } + } + + &--right { + .button { + display: flex; + gap: 24px; + } + } + } + } + + &__tabs { + // label - before - tabs + &--before { + line-height: size(22); + font-size: size(16); + font-weight: 600; + + @media (max-width: size(500)) { + line-height: size(20); + font-size: size(14); + } + } + + //header - tabs + .tabs-component__header { + align-items: flex-end; + height: size(87.5); + padding: size(21) size(16) size(18); + position: relative; + + &--left { + align-items: center; + bottom: size(0); + position: absolute; + left: size(16); + } + + &--right { + display: flex; + flex-direction: row; + justify-content: flex-end; + left: 0; + position: absolute; + width: 100%; + } + + @media (max-width: size(800)) { + margin-top: size(60); + height: size(63); + justify-content: center; + + &--left { + bottom: 0; + } + } + } + + // paineis - tabs + .tabs-component__panels { + background-color: var(--mc-gray-100); + margin: 0; + min-height: size(500); + } + + // grupo de botões - tabs + .tabs-component__buttons { + margin: 0; + z-index: 1; + + // resolve a sobreposição dos filtros no tabs. + .search-filter .map .search-filter__actions { + z-index: 0; + } + + .tabs-component__button { + font-size: size(14); + font-weight: 700; + line-height: size(19); + + a { + margin: 0; + padding: size(11) size(13) size(11); + + @media (max-width: size(800)) { + padding: size(7) size(13) size(7); + } + + .iconify, + span { + color: var(--mc-gray-500); + } + } + + &--active { + a { + .iconify, + span { + color: var(--mc-gray-700); + } + } + } + + &--active::after { + background-color: var(--mc-primary-500); + } + } + } + + // tab - list + &--list { + margin: 0 auto; + max-width: size(1170); + padding: size(24) size(16) size(40); + width: 100%; + + .search-list { + &__order { + align-items: flex-end; + display: flex; + gap: size(20) size(24); + margin-bottom: size(10); + + .field { + width: auto; + + select { + border-radius: var(--mc-border-radius-sm); + border: var(--mc-border-solid) var(--mc-primary-500); + font-size: size(14); + font-weight: 800; + line-height: size(19); + padding: size(9) size(32) size(8) size(12); + } + } + + .foundResults { + border-radius: var(--mc-border-radius-sm); + font-weight: 700; + font-size: size(14); + line-height: size(18); + padding: size(11) size(16); + } + + .buttons { + display: flex; + gap: size(8); + + .orderBtn { + align-items: center; + background-color: var(--mc-white); + border-radius: var(--mc-border-radius-sm); + border: none; + display: flex; + height: size(40); + justify-content: center; + width: size(40); + + .iconify { + color: var(--mc-gray-300); + font-size: size(24); + margin-top: size(2); + } + + &.active { + background-color: var(--mc-primary-500); + + .iconify { + color: var(--mc-white); + } + } + } + } + + @media (max-width: size(610)) { + align-items: center; + flex-direction: column-reverse; + + .field, + .foundResults { + width: 100%; + } + } + } + + &__filter { + display: flex; + grid-row-start: 1; + grid-column-start: 10; + justify-content: flex-end; + max-width: size(1170); + padding: 0; + + &--filter { + width: 100%; + } + } + + .entity-card { + &__header { + @media (max-width: size(800)) { + flex-direction: column; + } + } + .user-info__attr { + font-weight: 600; + font-size: size(14); + + .upper { + text-transform: uppercase; + } + + .event__color { + display: none; + } + } + } + + &__loadMore { + width: size(227); + margin: 0 auto; + } + + &__cards { + position: relative; + + //aqui é o estilo do marcador de tempo + &--date { + align-items: center; + display: flex; + gap: size(8); + margin-bottom: size(20); + + &-info { + display: flex; + flex-direction: column; + left: 0; + position: relative; + text-align: right; + + .weekend { + font-size: size(13); + } + + .actual-date { + display: flex; + flex-direction: column; + left: 0; + position: relative; + text-align: right; + font-size: 700; + + h2 { + } + + label { + font-size: 18px; + font-weight: 600; + } + } + } + + &-line { + height: size(1); + background: black; + flex-grow: 1; + } + } + } + } + + @media (max-width: size(900)) { + .col-9 { + grid-column-end: span 12; + } + + .col-3 { + grid-column-start: 1; + grid-column-end: 13; + } + } + } + + // tab - map + &--map { + position: relative; + + .search-filter { + grid-column-start: 10; + } + + .mc-map { + height: size(800); + + .leaflet-container { + z-index: 0; + } + + @media (max-width: size(600)) { + height: size(500); + } + + @media (max-width: size(360)) { + height: size(500); + } + } + + .search-map { + &__filter { + display: flex; + justify-content: flex-end; + max-width: size(1170); + margin: 0 auto; + padding: 0 size(16); + + &--filter { + position: absolute; + width: size(328); + z-index: 1; + } + } + + &__events { + overflow-y: auto; + position: absolute; + width: size(360); + background-color: var(--mc-gray-100); + top: 0; + height: 100%; + left: 0; + padding: 0 size(16) size(16); + + &--close { + float: right; + font-weight: 600; + font-size: size(16); + line-height: size(22); + color: var(--mc-low-700); + + .iconify { + width: size(22); + height: size(22); + } + + &:hover { + color: var(--mc-low-500); + } + } + + &--adress { + display: flex; + align-items: baseline; + justify-content: center; + gap: size(8); + + .iconify { + background-color: white; + min-width: max-content; + } + + &-label { + font-weight: 600; + font-size: size(14); + line-height: size(19); + } + } + + &--spaces { + clear: both; + padding: size(14) size(16) size(21); + background-color: var(--mc-white); + border-radius: var(--mc-border-radius-xs); + + &-title { + font-weight: 600; + font-size: size(16); + line-height: size(22); + } + + .space-link { + display: flex; + gap: size(6); + align-items: center; + + &__icon { + width: size(32); + height: size(32); + display: flex; + align-items: center; + justify-content: center; + border-radius: var(--mc-border-radius-pill); + background-color: var(--mc-spaces-500); + + .iconify { + color: var(--mc-white); + } + } + + a { + text-decoration: none; + color: var(--mc-low-500); + margin: size(16) 0; + font-weight: 700; + font-size: size(18); + line-height: size(25); + } + } + } + } + + &__cards { + position: relative; + + //aqui é o estilo do marcador de tempo + &--date { + align-items: center; + display: flex; + gap: size(8); + margin: size(20) 0; + + &-info { + display: flex; + flex-direction: column; + left: 0; + position: relative; + text-align: right; + + .weekend { + font-size: size(13); + } + } + + &-line { + height: size(1); + background: black; + flex-grow: 1; + } + } + } + } + } + } + + @media (max-width: size(900)) { + &__tabs { + &--map, + &--list { + .search-filter { + &__actions { + display: flex; + flex-direction: row; + gap: size(8); + + &--formBtn { + position: relative !important; + bottom: unset !important; + } + } + + &__filter { + height: 100vh !important; + position: fixed !important; + right: 0 !important; + top: 0 !important; + width: 100vw !important; + } + } + + .search-map { + &__filter { + &--filter { + position: relative; + width: 100%; + } + } + } + } + } + } } .action-opportunities, .action-projects { - .search { - .tabs-component__panels { - background: var(--mc-gray-100); - padding-bottom: size(40); - margin-bottom: 0; - min-height: size(500); - - @media (max-width: size(800)) { - margin-top: size(5); - } - - @media (max-width: size(500)) { - margin-top: size(5); - } - } - - .search__tabs--list { - - .mc-loading, - .panel__row { - grid-column-end: span 9; - text-align: center; - } - } - } -} \ No newline at end of file + .search { + .tabs-component__panels { + background: var(--mc-gray-100); + padding-bottom: size(40); + margin-bottom: 0; + min-height: size(500); + + @media (max-width: size(800)) { + margin-top: size(5); + } + + @media (max-width: size(500)) { + margin-top: size(5); + } + } + + .search__tabs--list { + .mc-loading, + .panel__row { + grid-column-end: span 9; + text-align: center; + } + } + } +}