From 731eb888396dfac3a32b272d666acfd6e5babcb9 Mon Sep 17 00:00:00 2001 From: Raman Yasel Date: Thu, 25 Apr 2024 18:59:04 +0300 Subject: [PATCH] chore: update hovers and form states style Signed-off-by: Raman Yasel --- docs/assets/scss/footer.scss | 12 +-- docs/assets/scss/home/cards.scss | 68 ++++++++------ docs/assets/scss/home/contact.scss | 30 ++++--- docs/assets/scss/home/tools.scss | 82 ++++++++++------- docs/assets/scss/home/videos.scss | 1 + docs/content/en/_index.html | 139 +++++++++++++++-------------- docs/layouts/partials/footer.html | 24 ++--- 7 files changed, 197 insertions(+), 159 deletions(-) diff --git a/docs/assets/scss/footer.scss b/docs/assets/scss/footer.scss index 308faff4b89..1bdb1e721a4 100644 --- a/docs/assets/scss/footer.scss +++ b/docs/assets/scss/footer.scss @@ -17,12 +17,8 @@ .td-home & { font-family: "Manrope", sans-serif; - .container { - padding: 0 52px; - - @media (max-width: $tablet) { - padding: 0 0; - } + .container-fluid { + max-width: 1238px; } } @@ -148,10 +144,8 @@ } @media (max-width: $mobile) { - flex-direction: column; - row-gap: 10px; margin-top: 40px; - padding: 30px 16px 0 16px; + padding: 30px 4px 0 4px; } p { diff --git a/docs/assets/scss/home/cards.scss b/docs/assets/scss/home/cards.scss index 761b37ba832..d992e1c939a 100644 --- a/docs/assets/scss/home/cards.scss +++ b/docs/assets/scss/home/cards.scss @@ -27,12 +27,7 @@ } &__item { - display: flex; - align-items: center; - gap: 18px; - border: 1px solid #E0E6F0; - border-radius: 12px; - overflow: hidden; + @media (max-width: $desktop) { gap: 15px; @@ -47,6 +42,42 @@ } } + &__link { + display: flex; + align-items: center; + gap: 18px; + height: 100%; + border: 1px solid #E0E6F0; + border-radius: 12px; + overflow: hidden; + transition: all 0.3s ease-in-out; + + .button { + margin-top: 14px; + font-size: 15px; + font-weight: 700; + line-height: 1; + color: #253737; + } + + &:focus, + &:hover { + box-shadow: 0 3px 8px 0 rgba(201,206,207,0.8); + + .button { + color: #5C6D70 !important; + } + } + + @media (max-width: $desktop) { + margin-top: 17px; + } + + @media (max-width: $tablet) { + margin-top: 12px; + } + } + &__text-wrapper { display: flex; flex-direction: column; @@ -68,9 +99,10 @@ &__title { margin-bottom: 0; - font-size: 22px; font-weight: 600; - line-height: 137%; + font-size: 22px; + line-height: 1.375; + color: #253737; @media (max-width: $desktop) { font-size: 20px; @@ -88,6 +120,8 @@ &__description { margin-top: 7px; margin-bottom: 0; + font-size: 16px; + line-height: 1.375; color: #5E636E; @media (max-width: $mobile) { @@ -96,34 +130,18 @@ } } - &__link { - margin-top: 14px; - font-size: 15px; - font-weight: 700; - line-height: 100%; - - @media (max-width: $desktop) { - margin-top: 17px; - } - - @media (max-width: $tablet) { - margin-top: 12px; - } - } - &__img { z-index: -1; position: relative; flex-shrink: 0; + height: auto; @media (max-width: $desktop) { max-width: 32%; - height: auto; } @media (max-width: $tablet) { max-width: 21%; - height: auto; } @media (max-width: $mobile) { diff --git a/docs/assets/scss/home/contact.scss b/docs/assets/scss/home/contact.scss index 7a6950b1fd9..28224f57f12 100644 --- a/docs/assets/scss/home/contact.scss +++ b/docs/assets/scss/home/contact.scss @@ -170,12 +170,12 @@ textarea { display: block; width: 100%; - padding: 13px 20px; + padding: 13px 18px; text-overflow: ellipsis; font-size: 16px; - color: #5E636E; + color: #5e636e; background: #fff; - border: 1px solid #E0E6F0; + border: 1px solid #e0e6f0; border-radius: 4px; transition: all 0.3s ease; -webkit-appearance: none; @@ -184,13 +184,18 @@ padding: 6px 16px; } + &:hover { + outline: none; + border-color: #c1cde1; + } + &:focus { outline: none; - border-color: #253737; + border-color: #70a0ff; } &[aria-invalid="true"] { - border-color: #eb4748; + border-color: #ff7070; } &:disabled { @@ -265,12 +270,12 @@ } &:focus + span { - border-color: #253737; + border-color: #c1cde1; } &:checked + span { - background-color: #D6F5D6; - border-color: #D6F5D6; + background-color: #d6f5d6; + border-color: #d6f5d6; &:after { opacity: 1; @@ -282,10 +287,11 @@ .error { position: absolute; left: 0; - bottom: -22px; - font-size: 14px; - font-weight: 300; - color: #eb4748; + bottom: -17px; + margin: 0; + font-size: 12px; + font-weight: 500; + color: #ff7070; } p { diff --git a/docs/assets/scss/home/tools.scss b/docs/assets/scss/home/tools.scss index 1e1f6ceecaa..9e391648abf 100644 --- a/docs/assets/scss/home/tools.scss +++ b/docs/assets/scss/home/tools.scss @@ -60,12 +60,6 @@ } } - &__promo__text-wrapper { - display: flex; - flex-direction: column; - gap: 14px; - } - &__list { display: flex; gap: 32px; @@ -85,31 +79,27 @@ } &__item { - display: flex; - flex-direction: column; - gap: 8px; - padding: 28px; - background-color: #ffffff; - border-radius: 12px; - box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.12); width: 280px; @media (max-width: $desktop) { - padding: 20px; width: 215px; } @media (max-width: $tablet) { - padding: 24px; width: 285px; } @media (max-width: $mobile) { - padding: 18px 16px; - padding-right: 33px; width: 100%; } + .button { + margin-top: auto; + color: #253737; + font-size: 15px; + font-weight: 700; + } + img { height: auto; @@ -123,12 +113,49 @@ } } + &__link { + display: flex; + flex-direction: column; + height: 100%; + padding: 28px; + gap: 8px; + background-color: #ffffff; + border: 1px solid #e0e6f0; + border-radius: 12px; + transition: all 0.3s ease-in-out; + + &:focus, + &:hover { + box-shadow: 0 3px 8px 0 rgba(201,206,207,0.8); + + .button { + color: #5C6D70 !important; + } + } + + @media (max-width: $desktop) { + padding: 20px; + font-size: 14px; + } + + @media (max-width: $tablet) { + padding: 24px; + font-size: 15px; + } + + @media (max-width: $mobile) { + padding: 18px 16px; + padding-right: 33px; + } + } + &__item-title { margin-top: 6px; margin-bottom: 0; font-size: 20px; + line-height: 1.375; font-weight: 600; - line-height: 27px; + color: #253737; @media (max-width: $desktop) { font-size: 16px; @@ -138,6 +165,9 @@ &__item-description { margin-bottom: 0; + font-size: 16px; + line-height: 1.375; + color: #5E636E; @media (max-width: $desktop) { margin-top: -5px; @@ -171,20 +201,4 @@ line-height: 1.5; } } - - &__link { - color: #253737; - font-size: 15px; - font-weight: 700; - margin-top: auto; - - @media (max-width: $desktop) { - font-size: 14px; - } - - @media (max-width: $tablet) { - margin-top: 5px; - font-size: 15px; - } - } } diff --git a/docs/assets/scss/home/videos.scss b/docs/assets/scss/home/videos.scss index e4c1ec9b87e..9ecb5b67056 100644 --- a/docs/assets/scss/home/videos.scss +++ b/docs/assets/scss/home/videos.scss @@ -121,6 +121,7 @@ img { width: 100%; + height: auto; } } } diff --git a/docs/content/en/_index.html b/docs/content/en/_index.html index 74bb36013a8..27461221260 100644 --- a/docs/content/en/_index.html +++ b/docs/content/en/_index.html @@ -178,44 +178,47 @@

@@ -406,36 +409,38 @@

Get hands-on with Tetragon

@@ -461,7 +466,7 @@