diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss index 13f8def..2c32363 100644 --- a/checkout/src/arquivos/sass/partials/_prateleira.scss +++ b/checkout/src/arquivos/sass/partials/_prateleira.scss @@ -1 +1,98 @@ /* _prateleira.scss */ +.footerCheckout__prateleira { + display: none; + padding: 0 110px 0 132px; + + @include mq(xl, min) { + padding: 0 256px; + } + + .prateleiraTitle { + font-family: $font-family-secundary; + font-size: 24px; + font-weight: 400; + line-height: 38px; + text-align: center; + + @include mq(xl, min) { + font-size: 48px; + line-height: 76px; + } + } + + div { + margin-right: 8px; + + li { + .product-name { + font-family: $font-family; + font-size: 13px; + font-weight: 400; + line-height: 18px; + text-align: center; + margin: 20px 0; + color: $color-black2; + + @include mq(xl, min) { + font-size: 26px; + line-height: 35px; + } + } + + .product-variation { + display: flex; + justify-content: center; + margin-bottom: 25px; + + &__item { + font-size: 13px; + font-weight: 700; + line-height: 18px; + letter-spacing: 0.05em; + text-align: center; + background-color: $color-blue2; + padding: 5px; + border-radius: 8px; + margin-right: 5px; + color: $color-white1; + font-family: $font-family; + outline: none; + border: none; + text-transform: uppercase; + + &:last-child { + margin-right: 0; + } + + @include mq(xl, min) { + font-size: 26px; + line-height: 35px; + } + } + } + + .product-button { + width: 100%; + font-family: $font-family; + font-size: 13px; + font-weight: 700; + line-height: 18px; + letter-spacing: 0.05em; + text-align: center; + text-transform: uppercase; + padding: 12px 72px; + border-radius: 8px; + outline: none; + border: none; + color: $color-white1; + background-color: $color-blue2; + margin-bottom: 56px; + + @include mq(xl, min) { + font-size: 26px; + line-height: 35px; + } + } + } + } +}