diff --git a/resources/css/components/post-header.css b/resources/css/components/post-header.css index b9a84ab..41bf6fd 100644 --- a/resources/css/components/post-header.css +++ b/resources/css/components/post-header.css @@ -65,7 +65,7 @@ } .post-details { - @apply flex flex-wrap justify-between gap-28 mt-12; + @apply flex flex-wrap justify-between gap-28 gap-y-8 mt-12; grid-template-columns: 1fr 1fr; &__label { @@ -75,8 +75,8 @@ } .socials-buttons { - @apply flex flex-wrap gap-4 h-fit; - + @apply flex flex-wrap justify-end gap-4 h-fit; + min-width: 470px; &__button { @apply bg-white text-carhop-green-700 px-4 lg:px-6 md:px-8 !py-3 lg:!py-4 font-normal rounded-full w-max flex items-center gap-2; transition: transform 0.3s ease-in-out; @@ -90,6 +90,62 @@ img { @apply w-7 h-7 filter-primary; } + + &--like { + transition: all 0.3s ease-in-out; + + .button-action-text { + max-width: 0; + overflow: hidden; + white-space: nowrap; + } + + .likes-count { + max-width: 200px; + overflow: hidden; + /* transition: max-width 0.3s ease-in-out; */ + white-space: nowrap; + } + + &[data-likes-count='0'] { + .button-action-text { + max-width: 200px; + } + .likes-count { + max-width: 0; + } + } + + &:hover { + .button-action-text { + max-width: 200px; + transition: max-width 0.3s ease-in-out; + } + .likes-count { + max-width: 0; + } + } + + &.is-disabled { + @apply opacity-100 cursor-not-allowed hover:opacity-80; + + .likes-count { + @apply block; + } + .button-action-text { + @apply max-w-0; + } + } + + &.is-disabled:hover { + .button-action-text { + @apply max-w-[200px]; + } + .likes-count { + @apply max-w-0; + } + } + } } } }