| 1 |
- {"version":3,"sources":["webpack://_N_E/src/components/HomePage/PlayRadioButton.module.scss","webpack://_N_E/src/styles/_breakpoints.scss"],"names":[],"mappings":"AAQA,kCACE,kBAAA,CACA,cAAA,CACA,mCAAA,CAGF,kCACE,mBAAA,CACA,cAAA,CAEA,YAAA,CACA,wBAAA,CAEA,qBAAA,CACA,8CAAA,CACA,yCAAA,CACA,uCAAA,CCoBA,yCD9BF,kCAYI,4CAAA,CAAA,CAIJ,yCACE,YAAA,CACA,qBAAA,CACA,oBAAA,CAGF,qCACE,wCAAA,CACA,UApCY,CAuCd,0CACE,uCAAA,CACA,UAzCY,CA0CZ,yBAAA,CAGF,wCACE,4BAAA,CACA,WAAA,CACA,UAhDY,CAiDZ,8CACE,UAlDU,CAmDV,+BAlDiB","file":"static/css/652a5356b4991696.css","sourcesContent":["@use \"src/styles/breakpoints\";\n\n$text-colors: #fff; // text color should be white on both light and dark theme\n$button-hover-color: rgba(\n $color: #000000,\n $alpha: 0.3\n);\n\n.ctaButton {\n padding-inline: 8px;\n font-size: 15px;\n font-weight: var(--font-weight-bold);\n}\n\n.container {\n inset-block-start: 0;\n inset-inline: 0;\n\n display: flex;\n justify-content: flex-end;\n\n box-sizing: border-box;\n padding-inline: calc(1.3 * var(--spacing-medium));\n padding-block-start: var(--spacing-medium);\n padding-block-end: var(--spacing-xsmall);\n @include breakpoints.tablet {\n padding-inline: calc(1.3 * var(--spacing-mega));\n }\n}\n\n.playRadioSection {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n}\n\n.stationTitle {\n margin-block-start: var(--spacing-medium);\n color: $text-colors;\n}\n\n.editStationButton {\n margin-inline-end: var(--spacing-xsmall);\n color: $text-colors;\n text-decoration: underline;\n}\n\n.playPauseButton {\n background-color: transparent;\n border: none;\n color: $text-colors;\n &:hover {\n color: $text-colors;\n background-color: $button-hover-color;\n }\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":""}
|
