-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.bf37ef08.css.map
1 lines (1 loc) · 33.6 KB
/
index.bf37ef08.css.map
1
{"mappings":"AEkBA,qBAKA,oCAMA,2CAIE,2CAJF,oBASA,uOAWA,iPAgBE,2CAhBF,oDCjDA,8PAWE,mDAIA,0CAIA,6DAKF,0DAOE,wDAQA,+HAUE,4GAQJ,4MAcE,6EAOA,iCAIA,0DAKA,gCAKF,wFAOA,yHASA,8FAOA,gOAcE,wCAIA,+BAIA,qDAOF,4EAOE,sEAOA,8BAIA,6DAKA,2DAKA,+CAKF,yHAUA,uCAKA,4CAIE,qFAQF,sEAUA,6EAQE,yFAOA,wFAQF,wMAcE,sKAaF,gNAYA,oCCpRA,8GAOE,2DAOF,uHAQE,kFAKA,yGAQE,kCAIA,0CAIA,2CAhBF,0BAmBI,wCAMJ,iDAMF,4CAIE,oDAMA,6BAIA,gOAgBE,oGAQA,6BAIA,yCAMJ,iMAcE,iCAIA,+GASE,iDAKF,oFC1IF,4DAKI,kLAWA,yEAKA,gDAKF,6IASE,iLAgBA,2FASF,4GAQA,oLAcA,yLAYA,0LAaE,wFAOF,+FAKE,oIASF,sCAGA,kCCnIF,kEAMA,4CAKA,8GAQI,uCAGA,wCAIF,8KAcF,2EAME,6EAKF,4FAME,sCAGA,6CC5DF,iCAKE,iEAME,gLAiBF,mEAOA,gNAaE,wKAWA,2CAxBF,0BA+BA,yGAME,0CAKF,yFAME,mDAKF,kFAOA,sDAKA,iFAMA,yLAaE,sEASF,uJAUA,oGAOA,iCAIA,iGASA,+CAOA,6FAQA,+FAOA,mCCpLF,gCAIA,mEAKE,2DAKE,6DAIA,2GAKA,oOAaA,qEAMA,kIAQE,iDAIA,2FAOF,sCAKF,+GAQA,kDCzEA,iEAIA,mDAIE","sources":["index.bf37ef08.css","src/sass/main.scss","src/sass/_base.scss","src/sass/_components.scss","src/sass/_header.scss","src/sass/_preview.scss","src/sass/_searchResults.scss","src/sass/_recipe.scss","src/sass/_upload.scss","src/sass/_shoppinglist.scss"],"sourcesContent":["* {\n margin: 0;\n padding: 0;\n}\n\n*, :before, :after {\n box-sizing: inherit;\n}\n\nhtml {\n box-sizing: border-box;\n font-size: 62.5%;\n}\n\n@media only screen and (max-width: 61.25em) {\n html {\n font-size: 50%;\n }\n}\n\nbody {\n color: #615551;\n min-height: calc(100vh - 8vw);\n background-image: linear-gradient(to bottom right, #fbdb89, #f48982);\n background-repeat: no-repeat;\n background-size: cover;\n font-family: Nunito Sans, sans-serif;\n font-weight: 400;\n line-height: 1.6;\n}\n\n.container {\n max-width: 120rem;\n min-height: 117rem;\n background-color: #fff;\n border-radius: 9px;\n grid-template: \"head head\" 10rem\n \"list recipe\" minmax(100rem, auto)\n / 1fr 2fr;\n margin: 4vw auto;\n display: grid;\n overflow: hidden;\n box-shadow: 0 2rem 6rem .5rem #61555133;\n}\n\n@media only screen and (max-width: 78.15em) {\n .container {\n max-width: 100%;\n border-radius: 0;\n margin: 0;\n }\n}\n\n.btn--small, .btn--small:link, .btn--small:visited, .btn {\n text-transform: uppercase;\n color: #fff;\n cursor: pointer;\n background-image: linear-gradient(to bottom right, #fbdb89, #f48982);\n border: none;\n border-radius: 10rem;\n align-items: center;\n transition: all .2s;\n display: flex;\n}\n\n.btn--small:hover, .btn:hover {\n transform: scale(1.05);\n}\n\n.btn--small:focus, .btn:focus {\n outline: none;\n}\n\n.btn--small > :first-child, .btn > :first-child {\n margin-right: 1rem;\n}\n\n.btn {\n padding: 1.5rem 4rem;\n font-size: 1.5rem;\n font-weight: 600;\n}\n\n.btn svg {\n height: 2.25rem;\n width: 2.25rem;\n fill: currentColor;\n}\n\n.btn--small, .btn--small:link, .btn--small:visited {\n padding: 1.25rem 2.25rem;\n font-size: 1.4rem;\n font-weight: 600;\n text-decoration: none;\n}\n\n.btn--small svg, .btn--small:link svg, .btn--small:visited svg {\n height: 1.75rem;\n width: 1.75rem;\n fill: currentColor;\n}\n\n.btn--inline {\n color: #f38e82;\n cursor: pointer;\n background-color: #f9f5f3;\n border: none;\n border-radius: 10rem;\n align-items: center;\n padding: .8rem 1.2rem;\n font-size: 1.3rem;\n font-weight: 600;\n transition: all .2s;\n display: flex;\n}\n\n.btn--inline svg {\n height: 1.6rem;\n width: 1.6rem;\n fill: currentColor;\n margin: 0 .2rem;\n}\n\n.btn--inline span {\n margin: 0 .4rem;\n}\n\n.btn--inline:hover {\n color: #f48982;\n background-color: #f2efee;\n}\n\n.btn--inline:focus {\n outline: none;\n}\n\n.btn--remove-ingredient {\n color: #fff;\n padding: 1rem 1.5rem;\n font-size: 1.2rem;\n font-weight: 600;\n}\n\n.btn--remove-shopping-list {\n color: #fff;\n height: 100%;\n margin-right: 1rem;\n padding: 1rem 1.5rem;\n font-size: 1.2rem;\n font-weight: 600;\n}\n\n.btn--add-ingredient {\n grid-column: 4 / -1;\n margin-bottom: 1rem;\n padding: 1rem 1.5rem;\n font-size: 1.1rem;\n}\n\n.btn--round {\n cursor: pointer;\n height: 4.5rem;\n width: 4.5rem;\n background-image: linear-gradient(to bottom right, #fbdb89, #f48982);\n border: none;\n border-radius: 50%;\n justify-content: center;\n align-items: center;\n transition: all .2s;\n display: flex;\n}\n\n.btn--round:hover {\n transform: scale(1.07);\n}\n\n.btn--round:focus {\n outline: none;\n}\n\n.btn--round svg {\n height: 2.5rem;\n width: 2.5rem;\n fill: #fff;\n}\n\n.btn--tiny {\n height: 2rem;\n width: 2rem;\n cursor: pointer;\n background: none;\n border: none;\n}\n\n.btn--tiny svg {\n height: 100%;\n width: 100%;\n fill: #f38e82;\n transition: all .3s;\n}\n\n.btn--tiny:focus {\n outline: none;\n}\n\n.btn--tiny:hover svg {\n fill: #f48982;\n transform: translateY(-1px);\n}\n\n.btn--tiny:active svg {\n fill: #f48982;\n transform: translateY(0);\n}\n\n.btn--tiny:not(:last-child) {\n margin-right: .3rem;\n}\n\n.heading--2 {\n color: #f38e82;\n text-transform: uppercase;\n text-align: center;\n margin-bottom: 2.5rem;\n font-size: 2rem;\n font-weight: 700;\n}\n\n.link:link, .link:visited {\n color: #918581;\n}\n\n.spinner {\n text-align: center;\n margin: 5rem auto;\n}\n\n.spinner svg {\n height: 6rem;\n width: 6rem;\n fill: #f38e82;\n animation: 2s linear infinite rotate;\n}\n\n@keyframes rotate {\n 0% {\n transform: rotate(0);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n.message, .error {\n max-width: 40rem;\n margin: 0 auto;\n padding: 5rem 4rem;\n display: flex;\n}\n\n.message svg, .error svg {\n height: 3rem;\n width: 3rem;\n fill: #f38e82;\n transform: translateY(-.3rem);\n}\n\n.message p, .error p {\n margin-left: 1.5rem;\n font-size: 1.8rem;\n font-weight: 600;\n line-height: 1.5;\n}\n\n.modal-window {\n z-index: 1000;\n background-color: #fff;\n border-radius: 9px;\n padding: 5rem 6rem;\n transition: all .5s;\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n box-shadow: 0 4rem 6rem #00000040;\n}\n\n.modal-window .btn--close-modal {\n color: inherit;\n cursor: pointer;\n background: none;\n border: none;\n font-family: inherit;\n font-size: 3.5rem;\n position: absolute;\n top: .5rem;\n right: 1.6rem;\n}\n\n.overlay {\n width: 100%;\n height: 100%;\n -webkit-backdrop-filter: blur(4px);\n backdrop-filter: blur(4px);\n z-index: 100;\n background-color: #0006;\n transition: all .5s;\n position: fixed;\n top: 0;\n left: 0;\n}\n\n.hidden {\n visibility: hidden;\n opacity: 0;\n}\n\n.header {\n background-color: #f9f5f3;\n grid-area: head;\n justify-content: space-between;\n align-items: center;\n display: flex;\n}\n\n.header__logo {\n height: 4.6rem;\n margin-left: 4rem;\n display: block;\n}\n\n.search {\n background-color: #fff;\n border-radius: 10rem;\n align-items: center;\n padding-left: 3rem;\n transition: all .3s;\n display: flex;\n}\n\n.search:focus-within {\n transform: translateY(-2px);\n box-shadow: 0 .7rem 3rem #61555114;\n}\n\n.search__field {\n color: inherit;\n width: 25rem;\n background: none;\n border: none;\n font-family: inherit;\n font-size: 1.7rem;\n}\n\n.search__field:focus {\n outline: none;\n}\n\n.search__field::placeholder {\n color: #d3c7c3;\n}\n\n@media only screen and (max-width: 61.25em) {\n .search__field {\n width: auto;\n }\n\n .search__field::placeholder {\n color: #fff;\n }\n}\n\n.search__btn {\n font-family: inherit;\n font-weight: 600;\n}\n\n.nav {\n align-self: stretch;\n margin-right: 2.5rem;\n}\n\n.nav__list {\n height: 100%;\n list-style: none;\n display: flex;\n}\n\n.nav__item {\n position: relative;\n}\n\n.nav__btn {\n height: 100%;\n color: inherit;\n text-transform: uppercase;\n cursor: pointer;\n background: none;\n border: none;\n align-items: center;\n padding: 0 1.5rem;\n font-family: inherit;\n font-size: 1.4rem;\n font-weight: 700;\n transition: all .3s;\n display: flex;\n}\n\n.nav__btn svg {\n height: 2.4rem;\n width: 2.4rem;\n fill: #f38e82;\n margin-right: .7rem;\n transform: translateY(-1px);\n}\n\n.nav__btn:focus {\n outline: none;\n}\n\n.nav__btn:hover {\n background-color: #f2efee;\n}\n\n.bookmarks {\n z-index: 10;\n width: 40rem;\n visibility: hidden;\n opacity: 0;\n background-color: #fff;\n padding: 1rem 0;\n transition: all .5s .2s;\n position: absolute;\n right: -2.5rem;\n box-shadow: 0 .8rem 5rem 2rem #6155511a;\n}\n\n.bookmarks__list {\n list-style: none;\n}\n\n.bookmarks__field {\n cursor: pointer;\n height: 100%;\n align-items: center;\n padding: 0 4rem;\n transition: all .3s;\n display: flex;\n}\n\n.bookmarks__field:hover {\n background-color: #f2efee;\n}\n\n.bookmarks:hover, .nav__btn--bookmarks:hover + .bookmarks {\n visibility: visible;\n opacity: 1;\n}\n\n.preview {\n flex-direction: row;\n align-items: center;\n display: flex;\n}\n\n.preview__link:link, .preview__link:visited {\n border-right: 1px solid #fff;\n flex-grow: 1;\n align-items: center;\n padding: 1.5rem 3.25rem;\n text-decoration: none;\n transition: all .3s;\n display: flex;\n}\n\n.preview__link:hover {\n background-color: #f9f5f3;\n transform: translateY(-2px);\n}\n\n.preview__link--active {\n background-color: #f9f5f3;\n}\n\n.preview__fig {\n height: 5.8rem;\n backface-visibility: hidden;\n border-radius: 50%;\n flex: 0 0 5.8rem;\n margin-right: 2rem;\n position: relative;\n overflow: hidden;\n}\n\n.preview__fig:before {\n content: \"\";\n height: 100%;\n width: 100%;\n opacity: .4;\n background-image: linear-gradient(to bottom right, #fbdb89, #f48982);\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n}\n\n.preview__fig img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: all .3s;\n display: block;\n}\n\n.preview__data {\n width: 100%;\n grid-template-columns: 3rem 3rem 1fr;\n align-items: center;\n row-gap: .1rem;\n display: grid;\n}\n\n.preview__title {\n color: #f38e82;\n text-transform: uppercase;\n text-overflow: ellipsis;\n max-width: 25rem;\n white-space: nowrap;\n grid-column: 1 / -1;\n font-size: 1.45rem;\n font-weight: 600;\n overflow: hidden;\n}\n\n.preview__publisher {\n color: #918581;\n text-transform: uppercase;\n white-space: nowrap;\n text-overflow: ellipsis;\n grid-column: 3 / -1;\n margin-left: 1rem;\n font-size: 1.15rem;\n font-weight: 600;\n overflow: hidden;\n}\n\n.preview__user-generated {\n height: 2rem;\n width: 2rem;\n background-color: #eeeae8;\n border-radius: 10rem;\n justify-content: center;\n align-items: center;\n margin-left: auto;\n margin-right: 1.75rem;\n display: flex;\n}\n\n.preview__user-generated svg {\n height: 1.2rem;\n width: 1.2rem;\n fill: #f38e82;\n margin-right: .5rem;\n}\n\n.preview__cookingTime, .preview__ing-num {\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n.preview__cookingTime svg, .preview__ing-num svg {\n height: 2.35rem;\n width: 2.35rem;\n fill: #f38e82;\n height: 1rem;\n width: 1rem;\n margin-right: .5rem;\n}\n\n.preview__cookingTime {\n grid-column: 1 / 2;\n}\n\n.preview__ing-num {\n grid-column: 2 / 3;\n}\n\n.search-results {\n flex-direction: column;\n padding: 1rem 0;\n display: flex;\n}\n\n.results {\n margin-bottom: 2rem;\n list-style: none;\n}\n\n.pagination {\n grid-template-columns: 1fr 1fr 1fr;\n margin-top: auto;\n padding: 0 3.5rem;\n display: grid;\n position: relative;\n}\n\n.pagination__btn--prev {\n grid-column: 1 / 2;\n}\n\n.pagination__btn--next {\n grid-column: 3 / -1;\n}\n\n.pagination__page-number {\n color: #f38e82;\n text-align: center;\n border: none;\n border-radius: 10rem;\n grid-column: 2 / 3;\n margin: 0 .4rem;\n padding: .8rem 1.2rem;\n font-size: 1.3rem;\n font-weight: 600;\n}\n\n.copyright {\n color: #918581;\n margin-top: 4rem;\n padding: 0 3.5rem;\n font-size: 1.2rem;\n}\n\n.copyright .twitter-link:link, .copyright .twitter-link:visited {\n color: #918581;\n}\n\n.sort-results {\n justify-content: center;\n align-items: center;\n gap: 1rem;\n margin: 0 2rem;\n display: flex;\n}\n\n.sort-results__title {\n font-size: 1.5rem;\n}\n\n.sort-results .btn--small {\n padding: .5rem 2rem;\n}\n\n.recipe {\n background-color: #f9f5f3;\n}\n\n.recipe__fig {\n height: 32rem;\n transform-origin: top;\n position: relative;\n}\n\n.recipe__fig:before {\n content: \"\";\n height: 100%;\n width: 100%;\n opacity: .6;\n background-image: linear-gradient(to bottom right, #fbdb89, #f48982);\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n}\n\n.recipe__img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n}\n\n.recipe__title {\n color: #fff;\n text-transform: uppercase;\n width: 50%;\n text-align: center;\n font-size: 3.25rem;\n font-weight: 700;\n line-height: 1.95;\n position: absolute;\n bottom: 0;\n left: 50%;\n transform: translate(-50%, 20%)skewY(-6deg);\n}\n\n.recipe__title span {\n -webkit-box-decoration-break: clone;\n box-decoration-break: clone;\n background-image: linear-gradient(to bottom right, #fbdb89, #f48982);\n padding: 1.3rem 2rem;\n}\n\n@media only screen and (max-width: 61.25em) {\n .recipe__title {\n width: 70%;\n }\n}\n\n.recipe__details {\n justify-content: space-around;\n align-items: center;\n padding: 7.5rem 8rem 3.5rem;\n display: flex;\n}\n\n.recipe__details button {\n margin-right: 1rem;\n}\n\n.recipe__info {\n text-transform: uppercase;\n align-items: center;\n font-size: 1.65rem;\n display: flex;\n}\n\n.recipe__info:not(:last-child) {\n margin-right: 4.5rem;\n}\n\n.recipe__info-icon {\n height: 2.35rem;\n width: 2.35rem;\n fill: #f38e82;\n margin-right: 1.15rem;\n}\n\n.recipe__info-data {\n margin-right: .5rem;\n font-weight: 700;\n}\n\n.recipe__info-buttons {\n margin-left: 1.6rem;\n display: flex;\n transform: translateY(-1px);\n}\n\n.recipe__user-generated {\n height: 4rem;\n width: 4rem;\n background-color: #eeeae8;\n border-radius: 10rem;\n justify-content: center;\n align-items: center;\n margin-left: auto;\n margin-right: 1.75rem;\n display: flex;\n}\n\n.recipe__user-generated svg {\n height: 2.25rem;\n width: 2.25rem;\n fill: #f38e82;\n}\n\n.recipe__ingredients {\n background-color: #f2efee;\n flex-direction: column;\n align-items: center;\n padding: 5rem 8rem;\n font-size: 1.6rem;\n line-height: 1.4;\n display: flex;\n}\n\n.recipe__ingredient-list {\n grid-template-columns: 1fr 1fr;\n gap: 2.5rem 3rem;\n list-style: none;\n display: grid;\n}\n\n.recipe__ingredient {\n display: flex;\n}\n\n.recipe__icon {\n height: 2rem;\n width: 2rem;\n fill: #f38e82;\n flex: none;\n margin-top: .1rem;\n margin-right: 1.1rem;\n}\n\n.recipe__quantity {\n flex: none;\n margin-right: .5rem;\n}\n\n.recipe__directions {\n flex-direction: column;\n align-items: center;\n padding: 5rem 10rem;\n display: flex;\n}\n\n.recipe__directions-text {\n text-align: center;\n color: #918581;\n margin-bottom: 3.5rem;\n font-size: 1.7rem;\n}\n\n.recipe__publisher {\n font-weight: 700;\n}\n\n.add-recipe-window {\n width: 100rem;\n}\n\n.upload {\n grid-template-columns: 1fr 1.5fr;\n gap: 4rem 6rem;\n display: grid;\n}\n\n.upload__column {\n align-items: center;\n gap: 1.5rem;\n display: grid;\n}\n\n.upload__column--recipe-data {\n grid-template-columns: 1fr 2.8fr;\n}\n\n.upload__column--ingredients {\n grid-template-columns: 1fr .5fr .5fr 1fr .2fr;\n align-content: start;\n display: grid;\n}\n\n.upload__column--ingredients-items {\n max-height: 30rem;\n grid-column: 1 / -1;\n grid-template-columns: 1fr .5fr .5fr 1fr .2fr;\n align-items: center;\n gap: 1rem;\n padding-bottom: 1rem;\n padding-right: 1rem;\n display: grid;\n overflow-x: hidden;\n overflow-y: auto;\n}\n\n.upload__column label {\n color: inherit;\n font-size: 1.5rem;\n font-weight: 600;\n}\n\n.upload__column input {\n width: 100%;\n border: 1px solid #ddd;\n border-radius: .5rem;\n padding: .8rem 1rem;\n font-size: 1.5rem;\n transition: all .2s;\n}\n\n.upload__column input::placeholder {\n color: #d3c7c3;\n}\n\n.upload__column input:focus {\n background-color: #f9f5f3;\n border: 1px solid #f38e82;\n outline: none;\n}\n\n.upload__column a {\n justify-self: center;\n}\n\n.upload__heading {\n text-transform: uppercase;\n grid-column: 1 / 3;\n margin-bottom: 1rem;\n font-size: 2.25rem;\n font-weight: 700;\n}\n\n.upload__btn {\n grid-column: 1 / -1;\n justify-self: center;\n}\n\n.shopping-list__header {\n text-transform: uppercase;\n font-size: 1.6rem;\n}\n\n.shopping-list-window {\n width: 50rem;\n max-height: 50rem;\n}\n\n.shopping-list-window .shopping-list__list {\n max-height: 40rem;\n overflow-y: auto;\n}\n\n/*# sourceMappingURL=index.bf37ef08.css.map */\n","@import 'base';\n@import 'components';\n@import 'header';\n@import 'preview';\n@import 'searchResults';\n@import 'recipe';\n@import 'upload';\n@import 'shoppinglist';\n","// $color-primary: #f59a83;\n$color-primary: #f38e82;\n$color-grad-1: #fbdb89;\n$color-grad-2: #f48982;\n\n$color-grey-light-1: #f9f5f3; // Light background\n$color-grey-light-2: #f2efee; // Light lines\n$color-grey-light-3: #d3c7c3; // Light text (placeholder)\n$color-grey-dark-1: #615551; // Normal text\n$color-grey-dark-2: #918581; // Lighter text\n\n$gradient: linear-gradient(to right bottom, $color-grad-1, $color-grad-2);\n\n$bp-large: 78.15em; // 1250px\n$bp-medium: 61.25em; // 980px\n$bp-small: 37.5em; // 600px\n$bp-smallest: 31.25em; // 500px\n\n* {\n margin: 0;\n padding: 0;\n}\n\n*,\n*::before,\n*::after {\n box-sizing: inherit;\n}\n\nhtml {\n box-sizing: border-box;\n font-size: 62.5%;\n\n @media only screen and (max-width: $bp-medium) {\n font-size: 50%;\n }\n}\n\nbody {\n font-family: 'Nunito Sans', sans-serif;\n font-weight: 400;\n line-height: 1.6;\n color: $color-grey-dark-1;\n background-image: $gradient;\n background-size: cover;\n background-repeat: no-repeat;\n min-height: calc(100vh - 2 * 4vw);\n}\n\n.container {\n max-width: 120rem;\n min-height: 117rem;\n margin: 4vw auto;\n background-color: #fff;\n border-radius: 9px;\n overflow: hidden;\n box-shadow: 0 2rem 6rem 0.5rem rgba($color-grey-dark-1, 0.2);\n\n display: grid;\n grid-template-rows: 10rem minmax(100rem, auto);\n grid-template-columns: 1fr 2fr;\n grid-template-areas:\n 'head head'\n 'list recipe';\n\n @media only screen and (max-width: $bp-large) {\n max-width: 100%;\n margin: 0;\n border-radius: 0;\n }\n}\n","%btn {\n background-image: $gradient;\n border-radius: 10rem;\n border: none;\n text-transform: uppercase;\n color: #fff;\n cursor: pointer;\n display: flex;\n align-items: center;\n transition: all 0.2s;\n\n &:hover {\n transform: scale(1.05);\n }\n\n &:focus {\n outline: none;\n }\n\n & > *:first-child {\n margin-right: 1rem;\n }\n}\n\n.btn {\n @extend %btn;\n\n padding: 1.5rem 4rem;\n font-size: 1.5rem;\n font-weight: 600;\n\n svg {\n height: 2.25rem;\n width: 2.25rem;\n fill: currentColor;\n }\n}\n\n.btn--small {\n &,\n &:link,\n &:visited {\n @extend %btn;\n\n font-size: 1.4rem;\n font-weight: 600;\n padding: 1.25rem 2.25rem;\n text-decoration: none;\n\n svg {\n height: 1.75rem;\n width: 1.75rem;\n fill: currentColor;\n }\n }\n}\n\n.btn--inline {\n color: $color-primary;\n font-size: 1.3rem;\n font-weight: 600;\n border: none;\n background-color: $color-grey-light-1;\n padding: 0.8rem 1.2rem;\n border-radius: 10rem;\n cursor: pointer;\n\n display: flex;\n align-items: center;\n transition: all 0.2s;\n\n svg {\n height: 1.6rem;\n width: 1.6rem;\n fill: currentColor;\n margin: 0 0.2rem;\n }\n\n span {\n margin: 0 0.4rem;\n }\n\n &:hover {\n color: $color-grad-2;\n background-color: $color-grey-light-2;\n }\n\n &:focus {\n outline: none;\n }\n}\n\n.btn--remove-ingredient {\n color: #fff;\n padding: 1rem 1.5rem;\n font-size: 1.2rem;\n font-weight: 600;\n}\n\n.btn--remove-shopping-list {\n color: #fff;\n padding: 1rem 1.5rem;\n font-size: 1.2rem;\n font-weight: 600;\n height: 100%;\n margin-right: 1rem;\n}\n\n.btn--add-ingredient {\n grid-column: 4/-1;\n margin-bottom: 1rem;\n padding: 1rem 1.5rem;\n font-size: 1.1rem;\n}\n\n.btn--round {\n background-image: $gradient;\n border-radius: 50%;\n border: none;\n cursor: pointer;\n height: 4.5rem;\n width: 4.5rem;\n // margin-left: auto;\n transition: all 0.2s;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n &:hover {\n transform: scale(1.07);\n }\n\n &:focus {\n outline: none;\n }\n\n svg {\n height: 2.5rem;\n width: 2.5rem;\n fill: #fff;\n }\n}\n\n.btn--tiny {\n height: 2rem;\n width: 2rem;\n border: none;\n background: none;\n cursor: pointer;\n\n svg {\n height: 100%;\n width: 100%;\n fill: $color-primary;\n transition: all 0.3s;\n }\n\n &:focus {\n outline: none;\n }\n\n &:hover svg {\n fill: $color-grad-2;\n transform: translateY(-1px);\n }\n\n &:active svg {\n fill: $color-grad-2;\n transform: translateY(0);\n }\n\n &:not(:last-child) {\n margin-right: 0.3rem;\n }\n}\n\n.heading--2 {\n font-size: 2rem;\n font-weight: 700;\n color: $color-primary;\n text-transform: uppercase;\n margin-bottom: 2.5rem;\n text-align: center;\n // transform: skewY(-3deg);\n}\n\n.link:link,\n.link:visited {\n color: $color-grey-dark-2;\n}\n\n.spinner {\n margin: 5rem auto;\n text-align: center;\n\n svg {\n height: 6rem;\n width: 6rem;\n fill: $color-primary;\n animation: rotate 2s infinite linear;\n }\n}\n\n@keyframes rotate {\n 0% {\n transform: rotate(0);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n.message,\n.error {\n max-width: 40rem;\n margin: 0 auto;\n padding: 5rem 4rem;\n\n display: flex;\n\n svg {\n height: 3rem;\n width: 3rem;\n fill: $color-primary;\n transform: translateY(-0.3rem);\n }\n\n p {\n margin-left: 1.5rem;\n font-size: 1.8rem;\n line-height: 1.5;\n font-weight: 600;\n }\n}\n\n.modal-window {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n\n background-color: white;\n border-radius: 9px;\n\n padding: 5rem 6rem;\n box-shadow: 0 4rem 6rem rgba(0, 0, 0, 0.25);\n z-index: 1000;\n transition: all 0.5s;\n\n .btn--close-modal {\n font-family: inherit;\n color: inherit;\n position: absolute;\n top: 0.5rem;\n right: 1.6rem;\n font-size: 3.5rem;\n cursor: pointer;\n border: none;\n background: none;\n }\n}\n\n.overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.4);\n backdrop-filter: blur(4px);\n z-index: 100;\n transition: all 0.5s;\n}\n\n.hidden {\n visibility: hidden;\n opacity: 0;\n}\n",".header {\n grid-area: head;\n background-color: $color-grey-light-1;\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n &__logo {\n margin-left: 4rem;\n height: 4.6rem;\n display: block;\n }\n}\n\n.search {\n background-color: #fff;\n border-radius: 10rem;\n display: flex;\n align-items: center;\n padding-left: 3rem;\n transition: all 0.3s;\n\n &:focus-within {\n transform: translateY(-2px);\n box-shadow: 0 0.7rem 3rem rgba($color-grey-dark-1, 0.08);\n }\n\n &__field {\n border: none;\n background: none;\n font-family: inherit;\n color: inherit;\n font-size: 1.7rem;\n width: 25rem;\n\n &:focus {\n outline: none;\n }\n\n &::placeholder {\n color: $color-grey-light-3;\n }\n\n @media only screen and (max-width: $bp-medium) {\n width: auto;\n\n &::placeholder {\n color: white;\n }\n }\n }\n\n &__btn {\n font-weight: 600;\n font-family: inherit;\n }\n}\n\n.nav {\n align-self: stretch;\n margin-right: 2.5rem;\n\n &__list {\n list-style: none;\n display: flex;\n height: 100%;\n }\n\n &__item {\n position: relative;\n }\n\n &__btn {\n height: 100%;\n font-family: inherit;\n color: inherit;\n font-size: 1.4rem;\n font-weight: 700;\n text-transform: uppercase;\n background: none;\n border: none;\n cursor: pointer;\n padding: 0 1.5rem;\n transition: all 0.3s;\n\n display: flex;\n align-items: center;\n\n svg {\n height: 2.4rem;\n width: 2.4rem;\n fill: $color-primary;\n margin-right: 0.7rem;\n transform: translateY(-1px);\n }\n\n &:focus {\n outline: none;\n }\n\n &:hover {\n background-color: $color-grey-light-2;\n }\n }\n}\n\n.bookmarks {\n padding: 1rem 0;\n position: absolute;\n // right: 0;\n right: -2.5rem;\n z-index: 10;\n width: 40rem;\n background-color: #fff;\n box-shadow: 0 0.8rem 5rem 2rem rgba($color-grey-dark-1, 0.1);\n\n visibility: hidden;\n opacity: 0;\n transition: all 0.5s 0.2s;\n\n &__list {\n list-style: none;\n }\n\n &__field {\n cursor: pointer;\n padding: 0 4rem;\n\n display: flex;\n align-items: center;\n height: 100%;\n transition: all 0.3s;\n\n &:hover {\n background-color: $color-grey-light-2;\n }\n }\n\n &:hover,\n .nav__btn--bookmarks:hover + & {\n visibility: visible;\n opacity: 1;\n }\n}\n",".preview {\n display: flex;\n flex-direction: row;\n align-items: center;\n &__link {\n &:link,\n &:visited {\n display: flex;\n align-items: center;\n padding: 1.5rem 3.25rem;\n transition: all 0.3s;\n border-right: 1px solid #fff;\n text-decoration: none;\n flex-grow: 1;\n }\n\n &:hover {\n background-color: $color-grey-light-1;\n transform: translateY(-2px);\n }\n\n &--active {\n background-color: $color-grey-light-1;\n }\n }\n\n &__fig {\n flex: 0 0 5.8rem;\n border-radius: 50%;\n overflow: hidden;\n height: 5.8rem;\n margin-right: 2rem;\n position: relative;\n backface-visibility: hidden;\n\n &::before {\n content: '';\n display: block;\n height: 100%;\n width: 100%;\n position: absolute;\n top: 0;\n left: 0;\n background-image: linear-gradient(\n to right bottom,\n $color-grad-1,\n $color-grad-2\n );\n opacity: 0.4;\n }\n\n img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: all 0.3s;\n }\n }\n\n &__data {\n display: grid;\n width: 100%;\n grid-template-columns: 3rem 3rem 1fr;\n row-gap: 0.1rem;\n align-items: center;\n }\n\n &__title {\n grid-column: 1/-1;\n font-size: 1.45rem;\n color: $color-primary;\n text-transform: uppercase;\n font-weight: 600;\n\n // This is how text is truncated!\n text-overflow: ellipsis;\n max-width: 25rem;\n white-space: nowrap;\n overflow: hidden;\n }\n\n &__publisher {\n grid-column: 3/-1;\n font-size: 1.15rem;\n color: $color-grey-dark-2;\n text-transform: uppercase;\n font-weight: 600;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n margin-left: 1rem;\n }\n\n &__user-generated {\n background-color: darken($color-grey-light-2, 2%);\n\n display: flex;\n align-items: center;\n justify-content: center;\n height: 2rem;\n width: 2rem;\n border-radius: 10rem;\n\n margin-left: auto;\n margin-right: 1.75rem;\n\n svg {\n height: 1.2rem;\n width: 1.2rem;\n fill: $color-primary;\n margin-right: 0.5rem;\n }\n }\n &__cookingTime,\n &__ing-num {\n display: flex;\n align-items: center;\n justify-content: center;\n svg {\n height: 2.35rem;\n width: 2.35rem;\n fill: $color-primary;\n height: 1rem;\n width: 1rem;\n margin-right: 0.5rem;\n }\n }\n &__cookingTime {\n grid-column: 1/2;\n }\n &__ing-num {\n grid-column: 2/3;\n }\n}\n",".search-results {\n padding: 1rem 0;\n display: flex;\n flex-direction: column;\n}\n\n.results {\n list-style: none;\n margin-bottom: 2rem;\n}\n\n.pagination {\n position: relative;\n margin-top: auto;\n padding: 0 3.5rem;\n display: grid;\n grid-template-columns: 1fr 1fr 1fr;\n\n &__btn {\n &--prev {\n grid-column: 1/2;\n }\n &--next {\n grid-column: 3/-1;\n }\n }\n &__page-number {\n grid-column: 2/3;\n color: $color-primary;\n font-size: 1.3rem;\n font-weight: 600;\n border: none;\n // background-color: $color-grey-light-1;\n padding: 0.8rem 1.2rem;\n border-radius: 10rem;\n margin: 0 0.4rem;\n text-align: center;\n }\n}\n\n.copyright {\n color: $color-grey-dark-2;\n font-size: 1.2rem;\n padding: 0 3.5rem;\n margin-top: 4rem;\n\n .twitter-link:link,\n .twitter-link:visited {\n color: $color-grey-dark-2;\n }\n}\n.sort-results {\n margin: 0 2rem;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 1rem;\n &__title {\n font-size: 1.5rem;\n }\n .btn--small {\n padding: 0.5rem 2rem;\n }\n}\n",".recipe {\n background-color: $color-grey-light-1;\n\n ///////////\n // FIGURE\n &__fig {\n height: 32rem;\n position: relative;\n // transform: scale(1.04) translateY(-1px);\n transform-origin: top;\n\n &::before {\n content: '';\n display: block;\n height: 100%;\n width: 100%;\n position: absolute;\n top: 0;\n left: 0;\n background-image: linear-gradient(\n to right bottom,\n $color-grad-1,\n $color-grad-2\n );\n opacity: 0.6;\n }\n }\n\n &__img {\n width: 100%;\n display: block;\n height: 100%;\n object-fit: cover;\n }\n\n &__title {\n position: absolute;\n bottom: 0;\n left: 50%;\n transform: translate(-50%, 20%) skewY(-6deg);\n color: #fff;\n font-weight: 700;\n font-size: 3.25rem;\n text-transform: uppercase;\n width: 50%;\n line-height: 1.95;\n text-align: center;\n\n span {\n -webkit-box-decoration-break: clone;\n box-decoration-break: clone;\n padding: 1.3rem 2rem;\n background-image: linear-gradient(\n to right bottom,\n $color-grad-1,\n $color-grad-2\n );\n }\n\n @media only screen and (max-width: $bp-medium) {\n width: 70%;\n }\n }\n\n ///////////\n // DETAILS\n &__details {\n display: flex;\n align-items: center;\n padding: 7.5rem 8rem 3.5rem 8rem;\n justify-content: space-around;\n\n button {\n margin-right: 1rem;\n }\n }\n\n &__info {\n font-size: 1.65rem;\n text-transform: uppercase;\n display: flex;\n align-items: center;\n\n &:not(:last-child) {\n margin-right: 4.5rem;\n }\n }\n\n &__info-icon {\n height: 2.35rem;\n width: 2.35rem;\n fill: $color-primary;\n margin-right: 1.15rem;\n }\n\n &__info-data {\n margin-right: 0.5rem;\n font-weight: 700;\n }\n\n &__info-buttons {\n display: flex;\n margin-left: 1.6rem;\n transform: translateY(-1px);\n }\n\n &__user-generated {\n background-color: darken($color-grey-light-2, 2%);\n\n display: flex;\n align-items: center;\n justify-content: center;\n height: 4rem;\n width: 4rem;\n border-radius: 10rem;\n\n margin-left: auto;\n margin-right: 1.75rem;\n\n svg {\n height: 2.25rem;\n width: 2.25rem;\n fill: $color-primary;\n }\n }\n\n ///////////\n // INGREDIENTS\n &__ingredients {\n padding: 5rem 8rem;\n font-size: 1.6rem;\n line-height: 1.4;\n background-color: $color-grey-light-2;\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n\n &__ingredient-list {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 2.5rem 3rem;\n list-style: none;\n }\n\n &__ingredient {\n display: flex;\n }\n\n &__icon {\n height: 2rem;\n width: 2rem;\n fill: $color-primary;\n margin-right: 1.1rem;\n flex: 0 0 auto;\n margin-top: 0.1rem;\n }\n\n &__quantity {\n margin-right: 0.5rem;\n flex: 0 0 auto;\n }\n\n ///////////\n // DIRECTIONS\n &__directions {\n padding: 5rem 10rem;\n padding-bottom: 5rem;\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n\n &__directions-text {\n font-size: 1.7rem;\n text-align: center;\n margin-bottom: 3.5rem;\n color: $color-grey-dark-2;\n }\n\n &__publisher {\n font-weight: 700;\n }\n}\n",".add-recipe-window {\n width: 100rem;\n}\n\n.upload {\n display: grid;\n grid-template-columns: 1fr 1.5fr;\n gap: 4rem 6rem;\n\n &__column {\n display: grid;\n align-items: center;\n gap: 1.5rem;\n\n &--recipe-data {\n grid-template-columns: 1fr 2.8fr;\n }\n\n &--ingredients {\n display: grid;\n grid-template-columns: 1fr 0.5fr 0.5fr 1fr 0.2fr;\n align-content: start;\n }\n &--ingredients-items {\n grid-column: 1/-1;\n padding-right: 1rem;\n padding-bottom: 1rem;\n display: grid;\n grid-template-columns: 1fr 0.5fr 0.5fr 1fr 0.2fr;\n gap: 1rem;\n align-items: center;\n max-height: 30rem;\n overflow-y: auto;\n overflow-x: hidden;\n }\n\n & label {\n font-size: 1.5rem;\n font-weight: 600;\n color: inherit;\n }\n\n & input {\n font-size: 1.5rem;\n padding: 0.8rem 1rem;\n border: 1px solid #ddd;\n border-radius: 0.5rem;\n transition: all 0.2s;\n width: 100%;\n\n &::placeholder {\n color: $color-grey-light-3;\n }\n\n &:focus {\n outline: none;\n border: 1px solid $color-primary;\n background-color: $color-grey-light-1;\n }\n }\n\n & a {\n justify-self: center;\n }\n }\n\n &__heading {\n font-size: 2.25rem;\n font-weight: 700;\n text-transform: uppercase;\n margin-bottom: 1rem;\n grid-column: 1/3;\n }\n\n &__btn {\n grid-column: 1 / -1;\n justify-self: center;\n }\n}\n",".shopping-list {\r\n &__header {\r\n font-size: 1.6rem;\r\n text-transform: uppercase;\r\n }\r\n &-window {\r\n width: 50rem;\r\n max-height: 50rem;\r\n\r\n .shopping-list__list {\r\n max-height: 40rem;\r\n overflow-y: auto;\r\n }\r\n }\r\n}\r\n"],"names":[],"version":3,"file":"index.bf37ef08.css.map"}