| 1 |
- {"version":3,"sources":["webpack://_N_E/src/components/chapters/JuzView.module.scss","webpack://_N_E/src/styles/_breakpoints.scss"],"names":[],"mappings":"AAEA,0DACE,uCAAA,CCyCA,yCD1CF,0DAGI,oBAAA,CAAA,CAIJ,6BACE,oBAAA,CACA,UAAA,CACA,qCAAA,CACA,qBAAA,CACA,wCAAA,CACA,sCAAA,CACA,yCAAA,CACA,uCAAA,CAEA,0DAAA,CACA,0CAAA,CAEA,+FACE,uCAAA,CAIJ,iCACE,gDAAA,CAGF,yBACE,sCAAA,CACA,YAAA,CACA,kBAAA,CACA,2BAAA,CACA,6BAAA,CAGF,wBACE,yBAAA,CAGF,iCACE,gBAAA","file":"static/css/eb3c95e18c7d0408.css","sourcesContent":["@use \"src/styles/breakpoints\";\n\n.juzContainer + .juzContainer {\n margin-block-start: var(--spacing-small);\n @include breakpoints.tablet {\n margin-block-start: 0;\n }\n}\n\n.juzContainer {\n display: inline-block;\n width: 100%;\n margin-block-end: var(--spacing-small);\n box-sizing: border-box;\n padding-block-start: var(--spacing-small);\n padding-block-end: var(--spacing-small);\n padding-inline-start: var(--spacing-small);\n padding-inline-end: var(--spacing-small);\n\n background-color: var(--color-background-alternative-faint);\n border-radius: var(--border-radius-default);\n\n .chapterContainer + .chapterContainer {\n margin-block-start: var(--spacing-small);\n }\n}\n\n.chapterContainer {\n background-color: var(--color-background-default);\n}\n\n.juzTitle {\n margin-block-end: var(--spacing-xsmall);\n display: flex;\n flex-direction: row;\n align-content: space-between;\n justify-content: space-between;\n}\n\n.readJuz {\n text-decoration: underline;\n}\n\n.loadingContainer {\n min-height: 100vh; // reduce layout shift\n}\n","// For usage see: https://medium.com/codeartisan/breakpoints-and-media-queries-in-scss-46e8f551e2f2\n$breakpoints-mobileS: 320px;\n$breakpoints-mobileM: 375px;\n$breakpoints-mobileL: 425px;\n$breakpoints-tablet: 768px;\n$breakpoints-desktop: 1024px;\n\n@mixin mobileS {\n @media only screen and (min-width: $breakpoints-mobileS) {\n @content;\n }\n}\n\n@mixin smallerThanMobileS {\n @media only screen and (max-width: $breakpoints-mobileS) {\n @content;\n }\n}\n\n@mixin mobileM {\n @media only screen and (min-width: $breakpoints-mobileM) {\n @content;\n }\n}\n\n@mixin smallerThanMobileM {\n @media only screen and (max-width: $breakpoints-mobileM) {\n @content;\n }\n}\n\n@mixin mobileL {\n @media only screen and (min-width: $breakpoints-mobileL) {\n @content;\n }\n}\n\n@mixin smallerThanMobileL {\n @media only screen and (max-width: $breakpoints-mobileL) {\n @content;\n }\n}\n\n@mixin tablet {\n @media only screen and (min-width: $breakpoints-tablet) {\n @content;\n }\n}\n\n@mixin smallerThanTablet {\n @media only screen and (max-width: $breakpoints-tablet) {\n @content;\n }\n}\n\n@mixin desktop {\n @media only screen and (min-width: $breakpoints-desktop) {\n @content;\n }\n}\n\n@mixin smallerThanDesktop {\n @media only screen and (max-width: $breakpoints-desktop) {\n @content;\n }\n}\n"],"sourceRoot":""}
|
