styles.css.map

{"version":3,"sources":["styles.sass","styles.css"],"names":[],"mappings":"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","file":"styles.css","sourcesContent":["@mixin product-button()\n    padding: 5px 12px 5px 10px\n    margin: 5px\n    width: 50px\n    height: 50px\n    border-radius: 5px\n    background-color: white\n    background-size: 90%\n    background-repeat: no-repeat\n    background-position: center\n    transition: all 0.2s ease-in-out\n\n    &:hover\n        box-shadow: 0 0 15px rgba(0, 123, 255, 0.5)\n        transform: scale(1.1)\n    \n*\n    margin: 0\n    box-sizing: border-box\n\n.--hidden\n    display: none\n    pointer-events: none\n\n.main-nav--container\n    width: 100%\n    border-bottom: 3px solid black\n    padding-bottom: 10px\n\n    > h1\n        text-align: center\n        font-size: 50px\n\n    > nav\n        width: fit-content\n        margin: 0 auto\n        font-size: 30px\n        font-weight: bold\n\n#product-list\n    display: flex\n    margin: 20px auto\n    width: 80%\n    flex-wrap: wrap\n    justify-content: center\n\n    #product-list--header\n        display: grid\n        align-content: center\n        grid-row: 1/-1\n        width: 80%\n        height: 50px\n        margin: 10px auto\n        border: 1px solid black\n        border-radius: 0 5px 5px 5px\n\n        #product-list--header--total-cost\n            text-align: center\n            font-size: 20px\n            font-weight: bold\n            &::before\n                content: \"Total: \"\n\n        #product-list--header--category-picker\n            width: 90%\n            max-width: 200px\n            margin: 0 auto\n            font-size: 20px\n            font-weight: bold\n\n.product-entry\n    position: relative\n    margin: 10px\n    width: 300px\n    height: 300px\n    border: 1px solid black\n    border-radius: 0 5px 5px 5px\n    overflow: hidden\n    transition: box-shadow 0.2s ease-in-out\n\n    &:hover\n        box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.2)\n\n    a\n        position: relative\n        display: block\n        width: 100%\n        height: 100%\n\n        *\n            pointer-events: none\n\n        img\n            display: block\n            position: absolute\n            width: 75%\n            height: 75%\n            margin: 20% 12.5% 5%\n            object-fit: contain\n\n        h3\n            display: block\n            position: absolute\n            padding: 5px 10px\n            z-index: 1\n            width: 100%\n            text-align: center\n            background-color: white\n            border-bottom: 1px solid black\n    \n    .product-entry-price\n        position: absolute\n        bottom: 10px\n        left: 10px\n        z-index: 1\n        min-width: 60px\n        text-align: center\n        font-size: 20px\n        font-weight: bold\n        background-color: white\n        border: 1px solid black\n        border-radius: 0 5px 5px 5px\n        padding: 5px\n        pointer-events: none\n\n    .product-entry-buttons\n        position: absolute\n        display: grid\n        grid-template-columns: 60px 60px\n        bottom: 10px\n        right: 10px\n        z-index: 1\n\n        .add-to-cart\n            @include product-button()\n            color: white\n            font-weight: bold\n            text-align: right\n            font-size: 15px\n\n        .add-to-cart--true\n            background-image: url(\"data:image/svg+xml,%3Csvg%20width%3D%22800%22%20height%3D%22800%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m5%207-.81-3.243A1%201%200%200%200%203.22%203H2m6%2018h2m6%200h2%22%20stroke%3D%22%235559%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M5%207h13.79a2%202%200%200%201%201.99%202.199l-.6%206A2%202%200%200%201%2018.19%2017H8.64a2%202%200%200%201-1.962-1.608z%22%20stroke%3D%22%23555%22%20fill%3D%22%23555%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\")\n        \n        .add-to-cart--false\n            background-image: url(\"data:image/svg+xml,%3Csvg%20width%3D%22800%22%20height%3D%22800%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m5%207-.81-3.243A1%201%200%200%200%203.22%203H2m6%2018h2m6%200h2%22%20stroke%3D%22%235559%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M5%207h13.79a2%202%200%200%201%201.99%202.199l-.6%206A2%202%200%200%201%2018.19%2017H8.64a2%202%200%200%201-1.962-1.608z%22%20stroke%3D%22%23555%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\")\n\n        .remove-from-cart\n            @include product-button()\n            background-image: url(\"data:image/svg+xml,%3Csvg%20width%3D%22800%22%20height%3D%22800%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%235559%22%20d%3D%22M12.78%204.28a.75.75%200%200%200-1.06-1.06L8%206.94%204.28%203.22a.75.75%200%200%200-1.06%201.06L6.94%208l-3.72%203.72a.75.75%200%201%200%201.06%201.06L8%209.06l3.72%203.72a.75.75%200%201%200%201.06-1.06L9.06%208z%22%2F%3E%3C%2Fsvg%3E\")\n\n        .favorite-button\n            @include product-button()\n        \n        .favorite-button--true\n            background-image: url(\"data:image/svg+xml,%3Csvg%20width%3D%22800%22%20height%3D%22800%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m3.984%2011.61%205.134%206.9c1.477%201.986%204.287%201.986%205.764%200l5.134-6.9c1.312-1.763%201.312-4.268%200-6.03-1.92-2.582-6.359-1.815-8.016.969-1.657-2.784-6.096-3.55-8.016-.97-1.312%201.763-1.312%204.268%200%206.032%22%20fill%3D%22%23e00%22%20fill-opacity%3D%22.75%22%20stroke%3D%22%235559%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\")\n            \n        .favorite-button--false\n            background-image: url(\"data:image/svg+xml,%3Csvg%20width%3D%22800%22%20height%3D%22800%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m3.984%2011.61%205.134%206.9c1.477%201.986%204.287%201.986%205.764%200l5.134-6.9c1.312-1.763%201.312-4.268%200-6.03-1.92-2.582-6.359-1.815-8.016.969-1.657-2.784-6.096-3.55-8.016-.97-1.312%201.763-1.312%204.268%200%206.032%22%20stroke%3D%22%235559%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\")\n\n.cart-entry\n    .product-entry-buttons\n        display: grid\n        grid-template-rows: auto auto\n\n    .cart-entry-fields\n        display: grid\n        justify-self: end\n        grid-column: span 2\n        grid-template-columns: 1fr 1fr\n\n        .cart-entry-fields-sum\n            font-size: 15px\n            text-align: center\n            margin: 5px 5px\n            padding: 3px 5px\n            border: 1px solid black\n            border-radius: 0 5px 5px 5px\n            background-color: white\n\n        .cart-entry-fields-amounts\n            width: 50px\n            font-size: 15px\n            margin: 5px 5px\n            padding: 3px 0 3px 10px\n            border: 1px solid black\n            border-radius: 0 5px 5px 5px\n\n            &::-webkit-inner-spin-button\n                cursor: pointer\n                margin: -3px 0\n\n#modal\n    position: fixed\n    top: 0\n    left: 0\n    width: 100vw\n    height: 100vh\n    background-color: #5555\n    z-index: 1\n\n    #modal-container\n        position: absolute\n        top: 50%\n        left: 50%\n        transform: translate(-50%, -50%)\n        max-width: 90%\n        width: 800px\n        min-height: 500px\n        border: 1px solid black\n        border-radius: 0 5px 5px 5px\n        background-color: white\n\n        #modal--close-button\n            @include product-button()\n            position: absolute\n            top: 0\n            right: 0\n            background-image: url(\"data:image/svg+xml,%3Csvg%20width%3D%22800%22%20height%3D%22800%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%235559%22%20d%3D%22M12.78%204.28a.75.75%200%200%200-1.06-1.06L8%206.94%204.28%203.22a.75.75%200%200%200-1.06%201.06L6.94%208l-3.72%203.72a.75.75%200%201%200%201.06%201.06L8%209.06l3.72%203.72a.75.75%200%201%200%201.06-1.06L9.06%208z%22%2F%3E%3C%2Fsvg%3E\")\n\n\n.product-details-header\n    margin: 15px\n    border-bottom: 1px solid black\n\n    h2\n        margin: auto\n        padding-right: 75px\n    h3\n        margin: auto\n        padding-right: 75px\n.product-details-body\n    display: grid\n    grid-template-columns: 1fr 1fr\n    margin: 15px\n\n    img\n        width: 300px\n        max-width: 30vw\n        max-height: 50vh\n        aspect-ratio: auto\n        margin: auto\n    p\n        margin: auto","* {\n  margin: 0;\n  box-sizing: border-box;\n}\n\n.--hidden {\n  display: none;\n  pointer-events: none;\n}\n\n.main-nav--container {\n  width: 100%;\n  border-bottom: 3px solid black;\n  padding-bottom: 10px;\n}\n.main-nav--container > h1 {\n  text-align: center;\n  font-size: 50px;\n}\n.main-nav--container > nav {\n  width: fit-content;\n  margin: 0 auto;\n  font-size: 30px;\n  font-weight: bold;\n}\n\n#product-list {\n  display: flex;\n  margin: 20px auto;\n  width: 80%;\n  flex-wrap: wrap;\n  justify-content: center;\n}\n#product-list #product-list--header {\n  display: grid;\n  align-content: center;\n  grid-row: 1/-1;\n  width: 80%;\n  height: 50px;\n  margin: 10px auto;\n  border: 1px solid black;\n  border-radius: 0 5px 5px 5px;\n}\n#product-list #product-list--header #product-list--header--total-cost {\n  text-align: center;\n  font-size: 20px;\n  font-weight: bold;\n}\n#product-list #product-list--header #product-list--header--total-cost::before {\n  content: \"Total: \";\n}\n#product-list #product-list--header #product-list--header--category-picker {\n  width: 90%;\n  max-width: 200px;\n  margin: 0 auto;\n  font-size: 20px;\n  font-weight: bold;\n}\n\n.product-entry {\n  position: relative;\n  margin: 10px;\n  width: 300px;\n  height: 300px;\n  border: 1px solid black;\n  border-radius: 0 5px 5px 5px;\n  overflow: hidden;\n  transition: box-shadow 0.2s ease-in-out;\n}\n.product-entry:hover {\n  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.2);\n}\n.product-entry a {\n  position: relative;\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n.product-entry a * {\n  pointer-events: none;\n}\n.product-entry a img {\n  display: block;\n  position: absolute;\n  width: 75%;\n  height: 75%;\n  margin: 20% 12.5% 5%;\n  object-fit: contain;\n}\n.product-entry a h3 {\n  display: block;\n  position: absolute;\n  padding: 5px 10px;\n  z-index: 1;\n  width: 100%;\n  text-align: center;\n  background-color: white;\n  border-bottom: 1px solid black;\n}\n.product-entry .product-entry-price {\n  position: absolute;\n  bottom: 10px;\n  left: 10px;\n  z-index: 1;\n  min-width: 60px;\n  text-align: center;\n  font-size: 20px;\n  font-weight: bold;\n  background-color: white;\n  border: 1px solid black;\n  border-radius: 0 5px 5px 5px;\n  padding: 5px;\n  pointer-events: none;\n}\n.product-entry .product-entry-buttons {\n  position: absolute;\n  display: grid;\n  grid-template-columns: 60px 60px;\n  bottom: 10px;\n  right: 10px;\n  z-index: 1;\n}\n.product-entry .product-entry-buttons .add-to-cart {\n  padding: 5px 12px 5px 10px;\n  margin: 5px;\n  width: 50px;\n  height: 50px;\n  border-radius: 5px;\n  background-color: white;\n  background-size: 90%;\n  background-repeat: no-repeat;\n  background-position: center;\n  transition: all 0.2s ease-in-out;\n  color: white;\n  font-weight: bold;\n  text-align: right;\n  font-size: 15px;\n}\n.product-entry .product-entry-buttons .add-to-cart:hover {\n  box-shadow: 0 0 15px rgba(0, 123, 255, 0.5);\n  transform: scale(1.1);\n}\n.product-entry .product-entry-buttons .add-to-cart--true {\n  background-image: url(\"data:image/svg+xml,%3Csvg%20width%3D%22800%22%20height%3D%22800%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m5%207-.81-3.243A1%201%200%200%200%203.22%203H2m6%2018h2m6%200h2%22%20stroke%3D%22%235559%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M5%207h13.79a2%202%200%200%201%201.99%202.199l-.6%206A2%202%200%200%201%2018.19%2017H8.64a2%202%200%200%201-1.962-1.608z%22%20stroke%3D%22%23555%22%20fill%3D%22%23555%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n.product-entry .product-entry-buttons .add-to-cart--false {\n  background-image: url(\"data:image/svg+xml,%3Csvg%20width%3D%22800%22%20height%3D%22800%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m5%207-.81-3.243A1%201%200%200%200%203.22%203H2m6%2018h2m6%200h2%22%20stroke%3D%22%235559%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M5%207h13.79a2%202%200%200%201%201.99%202.199l-.6%206A2%202%200%200%201%2018.19%2017H8.64a2%202%200%200%201-1.962-1.608z%22%20stroke%3D%22%23555%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n.product-entry .product-entry-buttons .remove-from-cart {\n  padding: 5px 12px 5px 10px;\n  margin: 5px;\n  width: 50px;\n  height: 50px;\n  border-radius: 5px;\n  background-color: white;\n  background-size: 90%;\n  background-repeat: no-repeat;\n  background-position: center;\n  transition: all 0.2s ease-in-out;\n  background-image: url(\"data:image/svg+xml,%3Csvg%20width%3D%22800%22%20height%3D%22800%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%235559%22%20d%3D%22M12.78%204.28a.75.75%200%200%200-1.06-1.06L8%206.94%204.28%203.22a.75.75%200%200%200-1.06%201.06L6.94%208l-3.72%203.72a.75.75%200%201%200%201.06%201.06L8%209.06l3.72%203.72a.75.75%200%201%200%201.06-1.06L9.06%208z%22%2F%3E%3C%2Fsvg%3E\");\n}\n.product-entry .product-entry-buttons .remove-from-cart:hover {\n  box-shadow: 0 0 15px rgba(0, 123, 255, 0.5);\n  transform: scale(1.1);\n}\n.product-entry .product-entry-buttons .favorite-button {\n  padding: 5px 12px 5px 10px;\n  margin: 5px;\n  width: 50px;\n  height: 50px;\n  border-radius: 5px;\n  background-color: white;\n  background-size: 90%;\n  background-repeat: no-repeat;\n  background-position: center;\n  transition: all 0.2s ease-in-out;\n}\n.product-entry .product-entry-buttons .favorite-button:hover {\n  box-shadow: 0 0 15px rgba(0, 123, 255, 0.5);\n  transform: scale(1.1);\n}\n.product-entry .product-entry-buttons .favorite-button--true {\n  background-image: url(\"data:image/svg+xml,%3Csvg%20width%3D%22800%22%20height%3D%22800%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m3.984%2011.61%205.134%206.9c1.477%201.986%204.287%201.986%205.764%200l5.134-6.9c1.312-1.763%201.312-4.268%200-6.03-1.92-2.582-6.359-1.815-8.016.969-1.657-2.784-6.096-3.55-8.016-.97-1.312%201.763-1.312%204.268%200%206.032%22%20fill%3D%22%23e00%22%20fill-opacity%3D%22.75%22%20stroke%3D%22%235559%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n.product-entry .product-entry-buttons .favorite-button--false {\n  background-image: url(\"data:image/svg+xml,%3Csvg%20width%3D%22800%22%20height%3D%22800%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m3.984%2011.61%205.134%206.9c1.477%201.986%204.287%201.986%205.764%200l5.134-6.9c1.312-1.763%201.312-4.268%200-6.03-1.92-2.582-6.359-1.815-8.016.969-1.657-2.784-6.096-3.55-8.016-.97-1.312%201.763-1.312%204.268%200%206.032%22%20stroke%3D%22%235559%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n\n.cart-entry .product-entry-buttons {\n  display: grid;\n  grid-template-rows: auto auto;\n}\n.cart-entry .cart-entry-fields {\n  display: grid;\n  justify-self: end;\n  grid-column: span 2;\n  grid-template-columns: 1fr 1fr;\n}\n.cart-entry .cart-entry-fields .cart-entry-fields-sum {\n  font-size: 15px;\n  text-align: center;\n  margin: 5px 5px;\n  padding: 3px 5px;\n  border: 1px solid black;\n  border-radius: 0 5px 5px 5px;\n  background-color: white;\n}\n.cart-entry .cart-entry-fields .cart-entry-fields-amounts {\n  width: 50px;\n  font-size: 15px;\n  margin: 5px 5px;\n  padding: 3px 0 3px 10px;\n  border: 1px solid black;\n  border-radius: 0 5px 5px 5px;\n}\n.cart-entry .cart-entry-fields .cart-entry-fields-amounts::-webkit-inner-spin-button {\n  cursor: pointer;\n  margin: -3px 0;\n}\n\n#modal {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  background-color: rgba(85, 85, 85, 0.3333333333);\n  z-index: 1;\n}\n#modal #modal-container {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  max-width: 90%;\n  width: 800px;\n  min-height: 500px;\n  border: 1px solid black;\n  border-radius: 0 5px 5px 5px;\n  background-color: white;\n}\n#modal #modal-container #modal--close-button {\n  padding: 5px 12px 5px 10px;\n  margin: 5px;\n  width: 50px;\n  height: 50px;\n  border-radius: 5px;\n  background-color: white;\n  background-size: 90%;\n  background-repeat: no-repeat;\n  background-position: center;\n  transition: all 0.2s ease-in-out;\n  position: absolute;\n  top: 0;\n  right: 0;\n  background-image: url(\"data:image/svg+xml,%3Csvg%20width%3D%22800%22%20height%3D%22800%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%235559%22%20d%3D%22M12.78%204.28a.75.75%200%200%200-1.06-1.06L8%206.94%204.28%203.22a.75.75%200%200%200-1.06%201.06L6.94%208l-3.72%203.72a.75.75%200%201%200%201.06%201.06L8%209.06l3.72%203.72a.75.75%200%201%200%201.06-1.06L9.06%208z%22%2F%3E%3C%2Fsvg%3E\");\n}\n#modal #modal-container #modal--close-button:hover {\n  box-shadow: 0 0 15px rgba(0, 123, 255, 0.5);\n  transform: scale(1.1);\n}\n\n.product-details-header {\n  margin: 15px;\n  border-bottom: 1px solid black;\n}\n.product-details-header h2 {\n  margin: auto;\n  padding-right: 75px;\n}\n.product-details-header h3 {\n  margin: auto;\n  padding-right: 75px;\n}\n\n.product-details-body {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  margin: 15px;\n}\n.product-details-body img {\n  width: 300px;\n  max-width: 30vw;\n  max-height: 50vh;\n  aspect-ratio: auto;\n  margin: auto;\n}\n.product-details-body p {\n  margin: auto;\n}"]}