From 795098aa282ca48cadfe7480cd9ca9b09ae8cf94 Mon Sep 17 00:00:00 2001 From: Leonardo Zanotti Date: Mon, 22 Jul 2024 09:45:43 -0300 Subject: [PATCH 1/2] FIX - altera estilo do link do espaco --- .../sass/2.components/_entity-header.scss | 765 +++++++++--------- 1 file changed, 382 insertions(+), 383 deletions(-) diff --git a/src/themes/BaseV2/assets-src/sass/2.components/_entity-header.scss b/src/themes/BaseV2/assets-src/sass/2.components/_entity-header.scss index f42d9cc116..b8b72b2682 100644 --- a/src/themes/BaseV2/assets-src/sass/2.components/_entity-header.scss +++ b/src/themes/BaseV2/assets-src/sass/2.components/_entity-header.scss @@ -1,385 +1,384 @@ -@use '../0.settings/mixins' as *; +@use "../0.settings/mixins" as *; .entity-header { - background-color: var(--mc-white); - margin: 0 auto; - position: relative; - width: 100%; - - @media (max-width: size(500)){ - &__title { - text-align: center; - } - } - &__single { - margin: 0 auto; - max-width: 1170px; - position: relative; - - &--cover { - aspect-ratio: 3/1; - background-color: var(--mc-gray-300); - background-image: var(--url); - background-position: center; - background-size: cover; - max-width: 1170px; - margin: 0 auto; - padding: size(10); - position: relative; - width: 100%; - - .iconify { - font-size: size(76); - color: white; - position: absolute; - top: calc(50% - (size(76) / 2)); - left: calc(50% - (size(64) / 2)); - } - } - - &--content { - display: flex; - max-width: size(1170); - margin: 0 auto; - padding: 0 size(16); - - .leftSide { - z-index: 1; - - .avatar { - align-items: center; - background-color: var(--mc-gray-500); - border-radius: 50%; - display: flex; - justify-content: center; - object-fit: cover; - overflow: hidden; - - img { - width: 100%; - height: 100%; - z-index: 1; - } - - svg { - font-size: size(80); - color: var(--mc-white); - } - - @include mobile { - height: size(113); - margin: size(-48) auto size(16); - width: size(113); - } - - @include desktop { - height: size(167); - margin: size(-80) size(32) size(22) size(16); - width: size(167); - } - } - } - - .rightSide { - padding: 10px 0 0; - - .site { - display: flex; - flex-direction: column; - margin-top: size(--mc-font-size-xs); - - .iconify { - margin-right: size(7); - font-size: size(22.5); - } - - a { - align-items: center; - display: flex; - text-decoration: none; - font-weight: 600; - color: var(--mc-low-500); - } - } - - .title { - font-style: normal; - font-weight: 700; - font-size: size(48); - line-height: size(65); - margin-top: size(10); - @include mobile { - font-size: size(24); - line-height: size(33); - text-align: center; - margin: 0; - } - } - - .share-mobile { - display: none !important; - gap: size(4) !important; - max-width: unset !important; - - @include mobile { - display: flex !important; - margin: size(3) 0 size(11); - } - } - - .description { - word-break: break-word; - white-space: pre-line; - - p { - line-height: size(18); - margin: 0; - } - - @media (max-width : size(900)) { - font-size: size(14); - line-height: size(16); - } - &--event { - padding-bottom: size(16); - } - } - } - - .share { - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: size(7) size(9); - max-width: size(167); - - .button { - color: var(--mc-gray-700); - padding: size(10); - color: #3E3E3E; - - .iconify { - font-size: size(18); - } - } - - @include desktop { - margin: size(16) size(32) size(22) size(16); - } - - @include mobile { - display: none; - } - } - - .metadata { - display: flex; - - &__id { - font-family: 'Open Sans'; - font-style: normal; - font-weight: 600; - font-size: 14px; - line-height: 19px; - - &--id { - font-weight: 600; - font-size: 14px; - line-height: 19px; - } - - } - - dl { - display: inline-block; - margin: size(8) size(40) size(16) 0; - - @include mobile { - display: flex; - margin: size(6) 0; - justify-content: center; - align-items: baseline; - } - } - - dt, - dd { - display: inline-block; - margin: 0; - - @include mobile { - font-size: size(12) !important; - line-height: size(16) !important; - } - } - - dt { - color: var(--mc-gray-700); - font-size: size(12); - font-style: normal; - font-weight: normal; - font-size: size(14); - - line-height: size(16); - text-transform: uppercase; - - &::after { - content: ':'; - } - } - - dd { - font-size: size(16); - font-weight: bold; - line-height: size(21); - margin-left: size(5); - font-size: size(14); - text-align: left; - - &.type { - text-transform: uppercase; - } - } - - @include mobile { - text-align: center; - flex-direction: column; - padding: size(10) size(15); - } - } - - @include mobile { - flex-direction: column; - } - } - } - - &--no-image { - .entity-header { - &__single { - &--content { - .leftSide { - @media (max-width: size(900)) { - margin: 0 auto; - } - - .avatar { - height: size(167); - width: size(167); - margin-top: 0; - margin-left: 0; - - svg { - height: size(75); - width: size(75); - } - - @media (max-width: size(900)) { - height: size(113); - width: size(113); - - svg { - height: size(58); - width: size(58); - } - } - } - } - - .share { - margin-left: 0; - } - } - - &--cover { - aspect-ratio: unset; - background: none; - height: size(60); - } - } - } - } - - &__edit { - margin: 0 auto; - max-width: size(1170); - position: relative; - - &--content { - align-items: baseline; - display: flex; - justify-content: space-between; - padding: size(74) size(16) size(61); - - .title { - align-items: center; - display: grid; - gap: size(18); - grid-template-columns: size(72) calc(100% - size(90)); - - .icon { - align-items: center; - border-radius: 50%; - display: flex; - height: size(72); - justify-content: center; - width: size(72); - - .iconify { - font-size: size(40); - color: var(--mc-white); - } - } - } - - @media screen and (max-width: size(800)) { - justify-content: flex-start; - padding: size(60) size(16) size(20); - - .title { - grid-template-columns: size(52) calc(100% - size(70)); - - .icon { - height: size(52); - width: size(52); - - .iconify { - font-size: size(30); - } - } - - h2 { - font-weight: 700; - font-size: size(18); - line-height: size(25); - } - } - - .button { - display: none; - } - } - - @media screen and (max-width: size(500)) { - .title { - grid-template-columns: size(32) calc(100% - size(50)); - - .icon { - height: size(32); - width: size(32); - - .iconify { - font-size: size(18); - } - } - - h2 { - font-weight: 700; - font-size: 18px; - line-height: 25px; - } - } - } - } - } -} \ No newline at end of file + background-color: var(--mc-white); + margin: 0 auto; + position: relative; + width: 100%; + + @media (max-width: size(500)) { + &__title { + text-align: center; + } + } + &__single { + margin: 0 auto; + max-width: 1170px; + position: relative; + + &--cover { + aspect-ratio: 3/1; + background-color: var(--mc-gray-300); + background-image: var(--url); + background-position: center; + background-size: cover; + max-width: 1170px; + margin: 0 auto; + padding: size(10); + position: relative; + width: 100%; + + .iconify { + font-size: size(76); + color: white; + position: absolute; + top: calc(50% - (size(76) / 2)); + left: calc(50% - (size(64) / 2)); + } + } + + &--content { + display: flex; + max-width: size(1170); + margin: 0 auto; + padding: 0 size(16); + + .leftSide { + z-index: 1; + + .avatar { + align-items: center; + background-color: var(--mc-gray-500); + border-radius: 50%; + display: flex; + justify-content: center; + object-fit: cover; + overflow: hidden; + + img { + width: 100%; + height: 100%; + z-index: 1; + } + + svg { + font-size: size(80); + color: var(--mc-white); + } + + @include mobile { + height: size(113); + margin: size(-48) auto size(16); + width: size(113); + } + + @include desktop { + height: size(167); + margin: size(-80) size(32) size(22) size(16); + width: size(167); + } + } + } + + .rightSide { + padding: 10px 0 0; + + .site { + display: flex; + flex-direction: column; + margin-top: size(--mc-font-size-xs); + + .iconify { + margin-right: size(7); + font-size: size(22.5); + } + + a { + align-items: center; + display: flex; + text-decoration: none; + font-weight: 600; + color: var($helper-500); + } + } + + .title { + font-style: normal; + font-weight: 700; + font-size: size(48); + line-height: size(65); + margin-top: size(10); + @include mobile { + font-size: size(24); + line-height: size(33); + text-align: center; + margin: 0; + } + } + + .share-mobile { + display: none !important; + gap: size(4) !important; + max-width: unset !important; + + @include mobile { + display: flex !important; + margin: size(3) 0 size(11); + } + } + + .description { + word-break: break-word; + white-space: pre-line; + + p { + line-height: size(18); + margin: 0; + } + + @media (max-width: size(900)) { + font-size: size(14); + line-height: size(16); + } + &--event { + padding-bottom: size(16); + } + } + } + + .share { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: size(7) size(9); + max-width: size(167); + + .button { + color: var(--mc-gray-700); + padding: size(10); + color: #3e3e3e; + + .iconify { + font-size: size(18); + } + } + + @include desktop { + margin: size(16) size(32) size(22) size(16); + } + + @include mobile { + display: none; + } + } + + .metadata { + display: flex; + + &__id { + font-family: "Open Sans"; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 19px; + + &--id { + font-weight: 600; + font-size: 14px; + line-height: 19px; + } + } + + dl { + display: inline-block; + margin: size(8) size(40) size(16) 0; + + @include mobile { + display: flex; + margin: size(6) 0; + justify-content: center; + align-items: baseline; + } + } + + dt, + dd { + display: inline-block; + margin: 0; + + @include mobile { + font-size: size(12) !important; + line-height: size(16) !important; + } + } + + dt { + color: var(--mc-gray-700); + font-size: size(12); + font-style: normal; + font-weight: normal; + font-size: size(14); + + line-height: size(16); + text-transform: uppercase; + + &::after { + content: ":"; + } + } + + dd { + font-size: size(16); + font-weight: bold; + line-height: size(21); + margin-left: size(5); + font-size: size(14); + text-align: left; + + &.type { + text-transform: uppercase; + } + } + + @include mobile { + text-align: center; + flex-direction: column; + padding: size(10) size(15); + } + } + + @include mobile { + flex-direction: column; + } + } + } + + &--no-image { + .entity-header { + &__single { + &--content { + .leftSide { + @media (max-width: size(900)) { + margin: 0 auto; + } + + .avatar { + height: size(167); + width: size(167); + margin-top: 0; + margin-left: 0; + + svg { + height: size(75); + width: size(75); + } + + @media (max-width: size(900)) { + height: size(113); + width: size(113); + + svg { + height: size(58); + width: size(58); + } + } + } + } + + .share { + margin-left: 0; + } + } + + &--cover { + aspect-ratio: unset; + background: none; + height: size(60); + } + } + } + } + + &__edit { + margin: 0 auto; + max-width: size(1170); + position: relative; + + &--content { + align-items: baseline; + display: flex; + justify-content: space-between; + padding: size(74) size(16) size(61); + + .title { + align-items: center; + display: grid; + gap: size(18); + grid-template-columns: size(72) calc(100% - size(90)); + + .icon { + align-items: center; + border-radius: 50%; + display: flex; + height: size(72); + justify-content: center; + width: size(72); + + .iconify { + font-size: size(40); + color: var(--mc-white); + } + } + } + + @media screen and (max-width: size(800)) { + justify-content: flex-start; + padding: size(60) size(16) size(20); + + .title { + grid-template-columns: size(52) calc(100% - size(70)); + + .icon { + height: size(52); + width: size(52); + + .iconify { + font-size: size(30); + } + } + + h2 { + font-weight: 700; + font-size: size(18); + line-height: size(25); + } + } + + .button { + display: none; + } + } + + @media screen and (max-width: size(500)) { + .title { + grid-template-columns: size(32) calc(100% - size(50)); + + .icon { + height: size(32); + width: size(32); + + .iconify { + font-size: size(18); + } + } + + h2 { + font-weight: 700; + font-size: 18px; + line-height: 25px; + } + } + } + } + } +} From 22e57c0185e8813298241007229665f65c050437 Mon Sep 17 00:00:00 2001 From: Leonardo Zanotti Date: Thu, 15 Aug 2024 19:12:50 -0300 Subject: [PATCH 2/2] =?UTF-8?q?FIX=20-=20removido=20altera=C3=A7=C3=B5es?= =?UTF-8?q?=20desnecess=C3=A1rias=20no=20c=C3=B3digo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../assets-src/sass/2.components/_entity-header.scss | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/themes/BaseV2/assets-src/sass/2.components/_entity-header.scss b/src/themes/BaseV2/assets-src/sass/2.components/_entity-header.scss index f42d9cc116..020f91163c 100644 --- a/src/themes/BaseV2/assets-src/sass/2.components/_entity-header.scss +++ b/src/themes/BaseV2/assets-src/sass/2.components/_entity-header.scss @@ -94,12 +94,12 @@ } a { - align-items: center; - display: flex; - text-decoration: none; - font-weight: 600; - color: var(--mc-low-500); - } + align-items: center; + display: flex; + text-decoration: none; + font-weight: 600; + color: var($helper-500); + } } .title {