diff --git a/src/index.html b/src/index.html index a67e851c2d..13d2bf9e2d 100644 --- a/src/index.html +++ b/src/index.html @@ -20,7 +20,7 @@ /> diff --git a/src/styles/blocks/buy.scss b/src/styles/blocks/buy.scss new file mode 100644 index 0000000000..7f7d2dbdb3 --- /dev/null +++ b/src/styles/blocks/buy.scss @@ -0,0 +1,19 @@ +.buy { + text-align: center; + text-decoration: none; + text-transform: uppercase; + padding: 12px 70px; + color: rgba(255, 255, 255, 1); + background-color: $blue-accent; + font-weight: 700; + font-size: 14px; + line-height: 16px; + border-radius: $rounding; + transition: $transition-duration; + + &:hover { + background-color: $white; + color: $blue-accent; + border: $blue-border; + } +} diff --git a/src/styles/blocks/card.scss b/src/styles/blocks/card.scss new file mode 100644 index 0000000000..0e08a1e9f7 --- /dev/null +++ b/src/styles/blocks/card.scss @@ -0,0 +1,75 @@ +.grid-container { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 200px)); + justify-content: center; + gap: 46px 48px; + padding: 50px 40px; +} + +.card { + display: flex; + justify-content: center; + flex-direction: column; + width: 200px; + border: $gray-border; + padding: 32px 16px 16px; + border-radius: $rounding; + transition: $transition-duration; + + &:hover { + transform: scale(1.2); + } + + &__image { + margin-bottom: 40px; + padding-inline: 3px; + min-height: 134px; + } + + &__title { + font-weight: 500; + font-size: 12px; + line-height: 18px; + margin-bottom: 4px; + } + + &:hover .card__title { + color: $title-hover; + } + + &__code { + font-size: 10px; + color: $secondary; + margin-bottom: 16px; + } + + &__rating { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 24px; + } + + &__review { + font-size: 10px; + color: $main-accent; + } + + &__price { + display: flex; + justify-content: space-between; + margin-bottom: 16px; + } + + &__price-text { + line-height: 18px; + color: $secondary; + } + + &__price-number { + font-weight: 700; + font-size: 16px; + line-height: 18px; + color: $main-accent; + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 0000000000..d63a9c21f3 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,11 @@ +.header { + display: flex; + justify-content: space-between; + align-items: center; + padding-inline: 50px; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05); + + &__logo-link { + display: flex; + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 0000000000..b8fb8ce2fc --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,42 @@ +.nav { + text-transform: uppercase; + font-weight: 500; + + &__list { + display: flex; + list-style: none; + + & :not(:last-child) { + margin-right: 20px; + } + } + + &__link { + position: relative; + display: block; + text-decoration: none; + color: $main-accent; + padding-block: 23px; + transition: $transition-duration; + + &--hover:hover { + color: $blue-accent; + } + + &--active { + color: $blue-accent; + + &::before { + content: ''; + display: block; + position: absolute; + left: 0; + bottom: 0; + width: 100%; + height: 4px; + border-radius: 8px; + background-color: $blue-accent; + } + } + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 0000000000..4b58e9b36a --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,17 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +.page { + font-family: Roboto, sans-serif; + font-weight: 400; + font-size: 12px; + line-height: 14px; + color: $main-accent; +} + +.page__body { + margin: 0; +} diff --git a/src/styles/blocks/stars.scss b/src/styles/blocks/stars.scss new file mode 100644 index 0000000000..207403fd28 --- /dev/null +++ b/src/styles/blocks/stars.scss @@ -0,0 +1,19 @@ +.stars { + display: flex; + + & :not(:last-child) { + margin-right: 4px; + } + + &--active :not(:last-child) { + background-image: url(/src/images/star-active.svg); + } + + &__item { + width: 16px; + height: 16px; + background-image: url(/src/images/star.svg); + background-repeat: no-repeat; + background-position: center; + } +} diff --git a/src/styles/index.css b/src/styles/index.css deleted file mode 100644 index 6d21841b87..0000000000 --- a/src/styles/index.css +++ /dev/null @@ -1,188 +0,0 @@ -* { - box-sizing: border-box; - margin: 0; - padding: 0; -} - -.page { - font-family: Roboto, sans-serif; - font-weight: 400; - font-size: 12px; - line-height: 14px; - color: rgb(6, 11, 53); -} - -.page__body { - margin: 0; -} - -.nav { - text-transform: uppercase; - font-weight: 500; -} - -.nav__list { - display: flex; - list-style: none; -} - -.nav__list :not(:last-child) { - margin-right: 20px; -} - -.nav__link { - position: relative; - display: block; - text-decoration: none; - color: rgb(6, 11, 53); - padding-block: 23px; - transition: 300ms; -} - -.nav__link--hover:hover { - color: rgb(0, 172, 220); -} - -.nav__link--active { - color: rgb(0, 172, 220); -} - -.nav__link--active::before { - content: ''; - display: block; - position: absolute; - left: 0; - bottom: 0; - width: 100%; - height: 4px; - border-radius: 8px; - background-color: rgb(0, 172, 220); -} - -.header { - display: flex; - justify-content: space-between; - align-items: center; - padding-inline: 50px; - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05); -} - -.header__logo-link { - display: flex; -} - -.stars { - display: flex; -} - -.stars :not(:last-child) { - margin-right: 4px; -} - -.stars--active :not(:last-child) { - background-image: url(/src/images/star-active.svg); -} - -.stars__item { - width: 16px; - height: 16px; - background-image: url(/src/images/star.svg); - background-repeat: no-repeat; - background-position: center; -} - -.buy { - text-align: center; - text-decoration: none; - text-transform: uppercase; - padding: 12px 70px; - color: rgb(255, 255, 255); - background-color: rgb(0, 172, 220); - font-weight: 700; - font-size: 14px; - line-height: 16px; - border-radius: 5px; - transition: 300ms; -} - -.buy:hover { - background-color: rgb(255, 255, 255); - color: rgb(0, 172, 220); - border: 1px solid rgb(0, 172, 220); -} - -.grid-container { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 200px)); - justify-content: center; - gap: 46px 48px; - padding: 50px 40px; -} - -.card { - display: flex; - justify-content: center; - flex-direction: column; - width: 200px; - border: 1px solid rgb(243, 243, 243); - padding: 32px 16px 16px; - border-radius: 5px; - transition: 300ms; -} - -.card:hover { - transform: scale(1.2); -} - -.card__image { - margin-bottom: 40px; - padding-inline: 3px; - min-height: 134px; -} - -.card__title { - font-weight: 500; - font-size: 12px; - line-height: 18px; - margin-bottom: 4px; -} - -.card:hover .card__title { - color: #34568b; -} - -.card__code { - font-size: 10px; - color: rgb(97, 96, 112); - margin-bottom: 16px; -} - -.card__rating { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 24px; -} - -.card__review { - font-size: 10px; - color: rgb(6, 11, 53); -} - -.card__price { - display: flex; - justify-content: space-between; - margin-bottom: 16px; -} - -.card__price-text { - line-height: 18px; - color: rgb(97, 96, 112); -} - -.card__price-number { - font-weight: 700; - font-size: 16px; - line-height: 18px; - color: rgb(6, 11, 53); -} diff --git a/src/styles/index.css.map b/src/styles/index.css.map deleted file mode 100644 index 975e9f639f..0000000000 --- a/src/styles/index.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sourceRoot":"","sources":["blocks/page.scss","utils/variables.scss","blocks/nav.scss","blocks/header.scss","blocks/stars.scss","blocks/buy.scss","blocks/card.scss","index.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA,OCXY;;;ADcd;EACE;;;AEfF;EACE;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA,ODjBU;ECkBV;EACA,YDdkB;;ACgBlB;EACE,ODnBQ;;ACsBV;EACE,ODvBQ;;ACyBR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBDlCM;;;AEHd;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;;ACRJ;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AChBJ;EACE;EACA;EACA;EACA;EACA;EACA,kBJHY;EIIZ;EACA;EACA;EACA,eJDS;EIET,YJNoB;;AIQpB;EACE,kBJZI;EIaJ,OJZU;EIaV,QJRU;;;AKRd;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA,QLPY;EKQZ;EACA,eLNS;EKOT,YLXoB;;AKapB;EACE;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE,OL7BU;;AKgCZ;EACE;EACA,OLxCQ;EKyCR;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA,OLtDU;;AKyDZ;EACE;EACA;EACA;;AAGF;EACE;EACA,OLhEQ;;AKmEV;EACE;EACA;EACA;EACA,OLxEU;;;AMqBd;EACE;EACA;EACA;EACA;EACA;EACA,kBAdY;EAeZ;EACA;EACA;EACA,eAZS;EAaT,YAjBoB;;AAmBpB;EACE,kBAvBI;EAwBJ,OAvBU;EAwBV,QAnBU;;;AAsBd;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA,QArCY;EAsCZ;EACA,eApCS;EAqCT,YAzCoB;;AA2CpB;EACE;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE,OA3DU;;AA8DZ;EACE;EACA,OAtEQ;EAuER;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA,OApFU;;AAuFZ;EACE;EACA;EACA;;AAGF;EACE;EACA,OA9FQ;;AAiGV;EACE;EACA;EACA;EACA,OAtGU;;;AAyGd;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAGJ;EACE;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA,OArIU;EAsIV;EACA,YAlIkB;;AAoIlB;EACE,OAvIQ;;AA0IV;EACE,OA3IQ;;AA6IR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBAtJM;;;AA2Jd;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA,OAzKY;;;AA4Kd;EACE;;;AAEF;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA","file":"index.css"} \ No newline at end of file diff --git a/src/styles/index.scss b/src/styles/index.scss index 7dec76101d..a897335ab4 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -5,205 +5,3 @@ @import './blocks/stars'; @import './blocks/buy'; @import './blocks/card'; - -// Variaveis - -$main-accent: rgba(6, 11, 53, 1); -$secondary: rgba(97, 96, 112, 1); -$white: rgba(255, 255, 255, 1); -$blue-accent: rgba(0, 172, 220, 1); -$gray-elements: rgba(243, 243, 243, 1); -$transition-duration: 300ms; -$gray-border: 1px solid $gray-elements; -$title-hover: #34568b; -$blue-border: 1px solid $blue-accent; -$rounding: 5px; - -.buy { - text-align: center; - text-decoration: none; - text-transform: uppercase; - padding: 12px 70px; - color: rgba(255, 255, 255, 1); - background-color: $blue-accent; - font-weight: 700; - font-size: 14px; - line-height: 16px; - border-radius: $rounding; - transition: $transition-duration; - - &:hover { - background-color: $white; - color: $blue-accent; - border: $blue-border; - } -} - -.grid-container { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 200px)); - justify-content: center; - gap: 46px 48px; - padding: 50px 40px; -} - -.card { - display: flex; - justify-content: center; - flex-direction: column; - width: 200px; - border: $gray-border; - padding: 32px 16px 16px; - border-radius: $rounding; - transition: $transition-duration; - - &:hover { - transform: scale(1.2); - } - - &__image { - margin-bottom: 40px; - padding-inline: 3px; - min-height: 134px; - } - - &__title { - font-weight: 500; - font-size: 12px; - line-height: 18px; - margin-bottom: 4px; - } - - &:hover .card__title { - color: $title-hover; - } - - &__code { - font-size: 10px; - color: $secondary; - margin-bottom: 16px; - } - - &__rating { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 24px; - } - - &__review { - font-size: 10px; - color: $main-accent; - } - - &__price { - display: flex; - justify-content: space-between; - margin-bottom: 16px; - } - - &__price-text { - line-height: 18px; - color: $secondary; - } - - &__price-number { - font-weight: 700; - font-size: 16px; - line-height: 18px; - color: $main-accent; - } -} - -.header { - display: flex; - justify-content: space-between; - align-items: center; - padding-inline: 50px; - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05); - - &__logo-link { - display: flex; - } -} - -.nav { - text-transform: uppercase; - font-weight: 500; - - &__list { - display: flex; - list-style: none; - - & :not(:last-child) { - margin-right: 20px; - } - } - - &__link { - position: relative; - display: block; - text-decoration: none; - color: $main-accent; - padding-block: 23px; - transition: $transition-duration; - - &--hover:hover { - color: $blue-accent; - } - - &--active { - color: $blue-accent; - - &::before { - content: ''; - display: block; - position: absolute; - left: 0; - bottom: 0; - width: 100%; - height: 4px; - border-radius: 8px; - background-color: $blue-accent; - } - } - } -} - -* { - box-sizing: border-box; - margin: 0; - padding: 0; -} - -.page { - font-family: Roboto, sans-serif; - font-weight: 400; - font-size: 12px; - line-height: 14px; - color: $main-accent; -} - -.page__body { - margin: 0; -} - -.stars { - display: flex; - - & :not(:last-child) { - margin-right: 4px; - } - - &--active :not(:last-child) { - background-image: url(/src/images/star-active.svg); - } - - &__item { - width: 16px; - height: 16px; - background-image: url(/src/images/star.svg); - background-repeat: no-repeat; - background-position: center; - } -} diff --git a/src/styles/utils/variables.scss b/src/styles/utils/variables.scss new file mode 100644 index 0000000000..85082ad540 --- /dev/null +++ b/src/styles/utils/variables.scss @@ -0,0 +1,10 @@ +$main-accent: rgba(6, 11, 53, 1); +$secondary: rgba(97, 96, 112, 1); +$white: rgba(255, 255, 255, 1); +$blue-accent: rgba(0, 172, 220, 1); +$gray-elements: rgba(243, 243, 243, 1); +$transition-duration: 300ms; +$gray-border: 1px solid $gray-elements; +$title-hover: #34568b; +$blue-border: 1px solid $blue-accent; +$rounding: 5px;