gatsby-matrix-theme 19.0.11 → 20.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/CHANGELOG.md +30 -0
  2. package/package.json +2 -2
  3. package/src/components/atoms/cards/article-card/template-one/article-card.module.scss +12 -2
  4. package/src/components/atoms/cards/article-card/template-one/template-one.stories.js +6 -0
  5. package/src/components/atoms/cards/comparison-table/table/table.module.scss +1 -1
  6. package/src/components/atoms/cards/operator-card/template-four/template-four.module.scss +2 -14
  7. package/src/components/atoms/cards/operator-card/template-one/template-one.module.scss +2 -14
  8. package/src/components/atoms/cards/operator-card/template-three/template-three.module.scss +2 -14
  9. package/src/components/atoms/cards/operator-card/template-two/template-two.module.scss +1 -13
  10. package/src/components/molecules/footer/variants/template-one/template-one.stories.js +1 -1
  11. package/src/components/molecules/footer/variants/template-three/template-three.stories.js +1 -1
  12. package/src/components/molecules/footer/variants/template-two/template-two.stories.js +1 -1
  13. package/src/gatsby-core-theme/components/molecules/footer/index.js +1 -1
  14. package/src/gatsby-core-theme/components/organisms/toplist/list/index.js +2 -0
  15. package/storybook/public/{427.4e7ad53f.iframe.bundle.js → 427.c7fc04ef.iframe.bundle.js} +1 -1
  16. package/storybook/public/{627.2614b905.iframe.bundle.js → 627.5f6bcbc9.iframe.bundle.js} +3 -3
  17. package/storybook/public/{627.2614b905.iframe.bundle.js.map → 627.5f6bcbc9.iframe.bundle.js.map} +1 -1
  18. package/storybook/public/iframe.html +1 -1
  19. package/storybook/public/main.574da9bb.iframe.bundle.js +1 -0
  20. package/storybook/public/{runtime~main.62b34c07.iframe.bundle.js → runtime~main.411e0a84.iframe.bundle.js} +1 -1
  21. package/storybook/public/main.c9976d2e.iframe.bundle.js +0 -1
  22. /package/storybook/public/{627.2614b905.iframe.bundle.js.LICENSE.txt → 627.5f6bcbc9.iframe.bundle.js.LICENSE.txt} +0 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,33 @@
1
+ # [20.0.0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v19.0.12...v20.0.0) (2023-04-20)
2
+
3
+
4
+ ### Code Refactoring
5
+
6
+ * changes to article author as link styles ([2cf5eaa](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/2cf5eaaadbe1ad34616d3d5ffae2bc70cb789c9d))
7
+ * changes to bonus on operator and article cards ([006c7be](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/006c7befa3f6d2c7143772d6bd523dae2cf21051))
8
+ * reverse temp ([595e0fa](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/595e0fa573f9177e4bbb3d05c74f10659099bbb7))
9
+ * temp ([aa172b2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/aa172b2c49642e4949c7818d0ed68c66fcef652b))
10
+ * update comparison table bonus flex align for w3c ([de03e02](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/de03e02a82cb8eb7affe343bce35a77448c00bd9))
11
+ * update footer templates anchor class for w3c ([016392b](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/016392bbf770d61596ff7abdcdcb62941bb0ce5d))
12
+
13
+
14
+ ### Config
15
+
16
+ * update core version ([4138be9](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/4138be91fb02ef847398811ffb2adab8458bc2fb))
17
+
18
+
19
+ * Merge branch 'tm-3386-w3-validator-fixes' into 'master' ([2c0f950](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/2c0f95038fde6b66cab24ba0c1f449ad543ee2da))
20
+ * Merge branch 'tm-3309-operator-cards' into 'master' ([e43c67e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e43c67e9b6961937b5caa0276be14b6be419825e))
21
+ * Merge branch 'master' into tm-3309-operator-cards ([c8e8c70](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c8e8c7052a44a00b8b8ad63a5d2116aca3bda990))
22
+ * Merge branch 'master' into tm-3309-operator-cards ([7b455f4](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7b455f4a4d8ab57b3f8b326e75ab0b6ad4eb3a3f))
23
+
24
+ ## [19.0.12](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v19.0.11...v19.0.12) (2023-04-19)
25
+
26
+
27
+ ### Bug Fixes
28
+
29
+ * updated to latest core theme and added icon for load more ([3c50f31](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3c50f31cd37ccf29f5a91d80206f00600d7a0142))
30
+
1
31
  ## [19.0.11](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v19.0.10...v19.0.11) (2023-04-19)
2
32
 
3
33
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "gatsby-matrix-theme",
3
- "version": "19.0.11",
3
+ "version": "20.0.0",
4
4
  "main": "index.js",
5
5
  "description": "Matrix Theme NPM Package",
6
6
  "author": "",
@@ -25,7 +25,7 @@
25
25
  "dependencies": {
26
26
  "@react-icons/all-files": "^4.1.0",
27
27
  "gatsby": "^4.20.0",
28
- "gatsby-core-theme": "20.0.10",
28
+ "gatsby-core-theme": "20.0.13",
29
29
  "gatsby-plugin-sharp": "^4.10.2",
30
30
  "gatsby-plugin-sitemap": "^3.3.0",
31
31
  "gatsby-transformer-sharp": "^4.10.0",
package/src/components/atoms/cards/article-card/template-one/article-card.module.scss CHANGED
@@ -53,9 +53,19 @@
53
53
  @include flex-align(flex-start, flex-start);
54
54
  gap: .2rem;
55
55
  flex-grow: 1;
56
- >span {
56
+ > span {
57
57
  flex-grow: 1;
58
- @include flex-align(flex-end, flex-end);
58
+ @include flex-align(flex-start, flex-start);
59
+
60
+ + span {
61
+ justify-content: flex-end;
62
+ }
63
+ }
64
+
65
+ > a {
66
+ + span {
67
+ justify-content: flex-end;
68
+ }
59
69
  }
60
70
  }
61
71
  }
package/src/components/atoms/cards/article-card/template-one/template-one.stories.js CHANGED
@@ -10,6 +10,12 @@ export default {
10
10
  description: 'Set true to show the Template 2',
11
11
  name: 'Template 2',
12
12
  },
13
+ showAuthorAsLink: {
14
+ name: 'showAuthorAsLink',
15
+ type: { name: 'boolean', required: false },
16
+ defaultValue: false,
17
+ description: 'Show author as a link?',
18
+ },
13
19
  showDate: {
14
20
  name: 'showDate',
15
21
  type: { name: 'boolean', required: false },
package/src/components/atoms/cards/comparison-table/table/table.module.scss CHANGED
@@ -80,7 +80,7 @@
80
80
 
81
81
  .bonus {
82
82
  @include flex-direction(column);
83
- @include flex-align(flex-start, column);
83
+ @include flex-align(flex-start, flex-start);
84
84
  span:first-child {
85
85
  font-size: 1.6rem;
86
86
  line-height: 22px;
package/src/components/atoms/cards/operator-card/template-four/template-four.module.scss CHANGED
@@ -51,23 +51,11 @@
51
51
  }
52
52
 
53
53
  .casinoText {
54
- @include flex-align(flex-start, space-between);
54
+ @include flex-align(center, space-between);
55
55
  width: 100%;
56
56
  flex-direction: column;
57
57
  overflow: hidden;
58
-
59
- span {
60
- width: 100%;
61
- font-style: normal;
62
- font-weight: 600;
63
- font-size: 1.6rem;
64
- line-height: 2.7rem;
65
- @include flex-align(center, center);
66
- text-align: center;
67
- text-transform: capitalize;
68
- color: var(--color-50);
69
- padding: 0;
70
- }
58
+ text-align: center;
71
59
  }
72
60
 
73
61
  .cardFooter {
package/src/components/atoms/cards/operator-card/template-one/template-one.module.scss CHANGED
@@ -22,7 +22,7 @@
22
22
  }
23
23
 
24
24
  .casinoText {
25
- @include flex-align(flex-start, center);
25
+ @include flex-align(center, center);
26
26
  width: 100%;
27
27
  flex-direction: column;
28
28
  padding: 1.6rem;
@@ -31,19 +31,7 @@
31
31
  border: 1.5px dashed var(--color-55);
32
32
  border-radius: 1.2rem;
33
33
  flex: 1;
34
-
35
- span {
36
- width: 100%;
37
- font-style: normal;
38
- font-weight: 600;
39
- font-size: 1.6rem;
40
- line-height: 2.7rem;
41
- @include flex-align(center, center);
42
- text-align: center;
43
- text-transform: capitalize;
44
- color: var(--color-50);
45
- padding: 0;
46
- }
34
+ text-align: center;
47
35
  }
48
36
 
49
37
  .cardFooter {
package/src/components/atoms/cards/operator-card/template-three/template-three.module.scss CHANGED
@@ -21,7 +21,7 @@
21
21
  }
22
22
 
23
23
  .casinoText {
24
- @include flex-align(flex-start, space-between);
24
+ @include flex-align(center, space-between);
25
25
  width: 100%;
26
26
  flex-direction: column;
27
27
  padding: 1.6rem;
@@ -29,19 +29,7 @@
29
29
  background: var(--color-54);
30
30
  border: 1.5px dashed var(--color-55);
31
31
  border-radius: 1.2rem;
32
-
33
- span {
34
- width: 100%;
35
- font-style: normal;
36
- font-weight: 600;
37
- font-size: 1.6rem;
38
- line-height: 2.7rem;
39
- @include flex-align(center, center);
40
- text-align: center;
41
- text-transform: capitalize;
42
- color: var(--color-50);
43
- padding: 0;
44
- }
32
+ text-align: center;
45
33
  }
46
34
 
47
35
  .cardFooter {
package/src/components/atoms/cards/operator-card/template-two/template-two.module.scss CHANGED
@@ -27,19 +27,7 @@
27
27
  width: 100%;
28
28
  flex-direction: column;
29
29
  overflow: hidden;
30
-
31
- span {
32
- width: 100%;
33
- font-style: normal;
34
- font-weight: 600;
35
- font-size: 1.6rem;
36
- line-height: 2.7rem;
37
- @include flex-align(center, center);
38
- text-align: center;
39
- text-transform: capitalize;
40
- color: var(--color-50);
41
- padding: 0;
42
- }
30
+ text-align: center;
43
31
  }
44
32
 
45
33
  .cardFooter {
package/src/components/molecules/footer/variants/template-one/template-one.stories.js CHANGED
@@ -24,7 +24,7 @@ const helpText = `
24
24
  href="https://www.begambleaware.org/"
25
25
  target="_blank"
26
26
  rel="nofollow"
27
- className="footer-gtm"
27
+ class="footer-gtm"
28
28
  >
29
29
  website
30
30
  </a>
package/src/components/molecules/footer/variants/template-three/template-three.stories.js CHANGED
@@ -24,7 +24,7 @@ const helpText = `
24
24
  href="https://www.begambleaware.org/"
25
25
  target="_blank"
26
26
  rel="nofollow"
27
- className="footer-gtm"
27
+ class="footer-gtm"
28
28
  >
29
29
  website
30
30
  </a>
package/src/components/molecules/footer/variants/template-two/template-two.stories.js CHANGED
@@ -24,7 +24,7 @@ const helpText = `
24
24
  href="https://www.begambleaware.org/"
25
25
  target="_blank"
26
26
  rel="nofollow"
27
- className="footer-gtm"
27
+ class="footer-gtm"
28
28
  >
29
29
  website
30
30
  </a>
package/src/gatsby-core-theme/components/molecules/footer/index.js CHANGED
@@ -35,7 +35,7 @@ const Footer = (props) => {
35
35
  href="https://www.begambleaware.org/"
36
36
  target="_blank"
37
37
  rel="nofollow"
38
- className="footer-gtm"
38
+ class="footer-gtm"
39
39
  >
40
40
  website
41
41
  </a>
package/src/gatsby-core-theme/components/organisms/toplist/list/index.js CHANGED
@@ -23,6 +23,7 @@ export default function List({
23
23
  themeStyles = {},
24
24
  removeInactiveItems = true,
25
25
  template,
26
+ loadMoreIcon = null,
26
27
  }) {
27
28
  const initLoadItems = Number(initItemsCount) !== 0 ? Number(initItemsCount) : 10000;
28
29
  const loadingItems = Number(loadItemsCount) !== 0 ? Number(loadItemsCount) : 10000;
@@ -93,6 +94,7 @@ export default function List({
93
94
  <div ref={loadMoreBtn} className={styles.loadMore}>
94
95
  <Button
95
96
  isInternalLink={false}
97
+ icon={loadMoreIcon}
96
98
  isButton
97
99
  btnText={translate(translations, 'load_more', 'Load More')}
98
100
  onClick={handleClick}
package/storybook/public/{427.4e7ad53f.iframe.bundle.js → 427.c7fc04ef.iframe.bundle.js} RENAMED
@@ -1 +1 @@
1
- "use strict";(self.webpackChunkgatsby_matrix_theme=self.webpackChunkgatsby_matrix_theme||[]).push([[427],{"./src/components/atoms/footer/as-seen-on/index.js":function(__unused_webpack_module,__webpack_exports__,__webpack_require__){__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{default:function(){return as_seen_on}});__webpack_require__("../node_modules/core-js/modules/es.array.concat.js");var react=__webpack_require__("../node_modules/react/index.js"),prop_types=__webpack_require__("./node_modules/prop-types/index.js"),prop_types_default=__webpack_require__.n(prop_types),link_list=__webpack_require__("../node_modules/gatsby-core-theme/src/components/molecules/link-list/index.js"),injectStylesIntoStyleTag=__webpack_require__("../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),injectStylesIntoStyleTag_default=__webpack_require__.n(injectStylesIntoStyleTag),as_seen_on_module=__webpack_require__("../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[10].use[1]!../node_modules/sass-loader/dist/cjs.js!../node_modules/sass-resources-loader/lib/loader.js??ruleSet[1].rules[10].use[3]!./src/components/atoms/footer/as-seen-on/as-seen-on.module.scss"),options={insert:"head",singleton:!1},as_seen_on_as_seen_on_module=(injectStylesIntoStyleTag_default()(as_seen_on_module.Z,options),as_seen_on_module.Z.locals||{}),AsSeenOn=function AsSeenOn(_ref){var asSeenOn=_ref.asSeenOn,template=_ref.template;return react.createElement("div",{className:"".concat(as_seen_on_as_seen_on_module.asSeenOn," ").concat(template&&as_seen_on_as_seen_on_module[template]?as_seen_on_as_seen_on_module[template]:"")},react.createElement("h5",null,"As Seen On:"),react.createElement(link_list.Z,{showListTitle:!1,imageOnly:!0,singleList:!0,lists:asSeenOn,width:130,height:140,gtmClass:"mobile-menu-gtm logo-cta"}))};AsSeenOn.displayName="AsSeenOn",AsSeenOn.__docgenInfo={description:"",methods:[],displayName:"AsSeenOn",props:{asSeenOn:{type:{name:"shape",value:{}},required:!1,description:""},template:{type:{name:"string"},required:!1,description:""}}};var as_seen_on=AsSeenOn;AsSeenOn.propTypes={asSeenOn:prop_types_default().shape({}),template:prop_types_default().string},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/atoms/footer/as-seen-on/index.js"]={name:"AsSeenOn",docgenInfo:AsSeenOn.__docgenInfo,path:"src/components/atoms/footer/as-seen-on/index.js"})},"../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[10].use[1]!../node_modules/sass-loader/dist/cjs.js!../node_modules/sass-resources-loader/lib/loader.js??ruleSet[1].rules[10].use[3]!./src/components/atoms/footer/as-seen-on/as-seen-on.module.scss":function(module,__webpack_exports__,__webpack_require__){var _node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../node_modules/css-loader/dist/runtime/cssWithMappingToString.js"),_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0__),_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../node_modules/css-loader/dist/runtime/api.js"),___CSS_LOADER_EXPORT___=__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__)()(_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0___default());___CSS_LOADER_EXPORT___.push([module.id,"._3U8D\\+7KKbpc4r24eiqCE9Q\\=\\={background:var(--footer-asSeenOn-background-color);border-bottom:var(--footer-asSeenOn-border);display:flex;align-items:flex-start;justify-content:center;flex-direction:column;gap:1.6rem;padding:3.2rem 1.6rem}@media only screen and (min-width:768px){._3U8D\\+7KKbpc4r24eiqCE9Q\\=\\={display:flex;align-items:center;justify-content:center;padding:48px 0px}}@media only screen and (min-width:768px){._3U8D\\+7KKbpc4r24eiqCE9Q\\=\\=>h5,._3U8D\\+7KKbpc4r24eiqCE9Q\\=\\=>ul{margin:0 auto;max-width:calc(var(--main-container-max) + var(--side-container))}}._3U8D\\+7KKbpc4r24eiqCE9Q\\=\\=>h5{margin-top:0;margin-bottom:0;color:var(--footer-asSeenOn-text-color, var(--color-49))}._3U8D\\+7KKbpc4r24eiqCE9Q\\=\\=>ul{display:flex;align-items:flex-start;justify-content:flex-start;flex-wrap:wrap}._3U8D\\+7KKbpc4r24eiqCE9Q\\=\\=>ul li{padding-right:1rem;padding-bottom:1rem}@media only screen and (min-width:768px){._3U8D\\+7KKbpc4r24eiqCE9Q\\=\\=>ul li{padding-bottom:2rem;padding-right:2.5rem}}@media only screen and (min-width:992px){._3U8D\\+7KKbpc4r24eiqCE9Q\\=\\=>ul li{padding-bottom:0}}._3U8D\\+7KKbpc4r24eiqCE9Q\\=\\=>ul li img{max-width:9.5rem}@media only screen and (min-width:768px){._3U8D\\+7KKbpc4r24eiqCE9Q\\=\\=>ul li img{max-width:13rem}}@media only screen and (min-width:768px){._3U8D\\+7KKbpc4r24eiqCE9Q\\=\\=>ul{display:flex;align-items:center;justify-content:center}}.OAJN-FHYRGrx0P6jem3chA\\=\\={border:none;display:flex;align-items:flex-start;justify-content:flex-start;padding:0}.OAJN-FHYRGrx0P6jem3chA\\=\\=>h5,.OAJN-FHYRGrx0P6jem3chA\\=\\=>ul{margin:0}@media only screen and (min-width:768px){.OAJN-FHYRGrx0P6jem3chA\\=\\=>ul{display:flex;align-items:flex-start;justify-content:flex-start}}","",{version:3,sources:["webpack://./src/components/atoms/footer/as-seen-on/as-seen-on.module.scss","webpack://./../node_modules/gatsby-core-theme/src/styles/utils/_mixins.scss","webpack://./../node_modules/gatsby-core-theme/src/styles/utils/_media-queries.scss"],names:[],mappings:"AAeA,8BACE,kDAAA,CACA,2CAAA,CChBA,YAAA,CACA,sBDgBoB,CCfpB,sBDegC,CAChC,qBAAA,CACA,UAAA,CACA,qBAAA,CE+BA,yCFrCF,8BCdE,YAAA,CACA,kBDsBsB,CCrBtB,sBDqB8B,CAC5B,gBAAA,CAAA,CE2BF,yCFxBA,kEAGI,aAAA,CACA,iEAAA,CAAA,CAIJ,iCACE,YAAA,CACA,eAAA,CACA,wDAAA,CAGF,iCCzCA,YAAA,CACA,sBDyCsB,CCxCtB,0BDwCkC,CAChC,cAAA,CAEA,oCACE,kBAAA,CACA,mBAAA,CEIJ,yCFNE,oCAKI,mBAAA,CACA,oBAAA,CAAA,CAAA,yCANJ,oCAUI,gBAAA,CAAA,CAGF,wCACE,gBAAA,CERN,yCFOI,wCAII,eAAA,CAAA,CEXR,yCFVA,iCCzCA,YAAA,CACA,kBDmEwB,CClExB,sBDkEgC,CAAA,CAKlC,4BACE,WAAA,CC1EA,YAAA,CACA,sBD0EoB,CCzEpB,0BDyEgC,CAChC,SAAA,CAEA,8DAEE,QAAA,CE7BF,yCFgCA,+BCnFA,YAAA,CACA,sBDoFwB,CCnFxB,0BDmFoC,CAAA",sourcesContent:["// Global styles extended in each theme\n\n// Utils\n@import '../../../../../../node_modules/gatsby-core-theme/src/styles/utils/variables/typography';\n@import '../../../../../../node_modules/gatsby-core-theme/src/styles/utils/variables/layout';\n@import '../../../../../../node_modules/gatsby-core-theme/src/styles/utils/variables/stack-order';\n@import '../../../../../../node_modules/gatsby-core-theme/src/styles/utils/media-queries';\n@import '../../../../../../node_modules/gatsby-core-theme/src/styles/utils/icons';\n@import '../../../../../../node_modules/gatsby-core-theme/src/styles/utils/tooltip';\n@import '../../../../../../node_modules/gatsby-core-theme/src/styles/utils/loader';\n@import '../../../../../../node_modules/gatsby-core-theme/src/styles/utils/mixins';\n@import '../../../../../../node_modules/gatsby-core-theme/src/styles/utils/scrollbar';\n@import '../../../../../../node_modules/gatsby-core-theme/src/styles/utils/animations';\n\n\n.asSeenOn {\n background: var(--footer-asSeenOn-background-color);\n border-bottom: var(--footer-asSeenOn-border);\n @include flex-align(flex-start, center);\n flex-direction: column;\n gap: 1.6rem;\n padding: 3.2rem 1.6rem;\n\n @include min(tablet) {\n @include flex-align(center, center);\n padding: 48px 0px;\n }\n\n > h5,\n > ul {\n @include min(tablet) {\n margin: 0 auto;\n max-width: calc(var(--main-container-max) + var(--side-container));\n }\n }\n\n > h5 {\n margin-top: 0;\n margin-bottom: 0;\n color: var(--footer-asSeenOn-text-color, var(--color-49));\n }\n\n > ul {\n @include flex-align(flex-start, flex-start);\n flex-wrap: wrap;\n\n li {\n padding-right: 1rem;\n padding-bottom: 1rem;\n\n @include min(tablet) {\n padding-bottom: 2rem;\n padding-right: 2.5rem;\n }\n\n @include min(laptop) {\n padding-bottom: 0;\n }\n\n img {\n max-width: 9.5rem;\n\n @include min(tablet) {\n max-width: 13rem;\n }\n }\n }\n\n @include min(tablet) {\n @include flex-align(center, center);\n }\n }\n}\n\n.templateTwo {\n border: none;\n @include flex-align(flex-start, flex-start);\n padding: 0;\n\n > h5,\n > ul {\n margin: 0;\n }\n\n > ul {\n @include min(tablet) {\n @include flex-align(flex-start, flex-start);\n }\n }\n}","@mixin flex-align($align-items, $justify-content) {\n display: flex;\n align-items: $align-items;\n justify-content: $justify-content;\n}\n\n@mixin flex-direction($flex-direction) {\n display: flex;\n flex-direction: $flex-direction;\n}\n\n@mixin overflow($overflow-type, $overflow-value, $scrolling) {\n #{$overflow-type}: $overflow-value;\n -webkit-overflow-scrolling: $scrolling; // Autoprefixer doesn't add\n}\n\n@mixin text-background($bgcolor, $text-color) {\n background: $bgcolor;\n border-radius: 100px;\n color: $text-color;\n font-weight: 700;\n @include flex-align(center, center);\n padding: 0 2rem;\n}\n\n@mixin link-color($color) {\n color: $color;\n\n &:hover {\n color: $color;\n }\n}\n\n// Using em because I want images in content to inherit size based on parent element (not root)\n@mixin content-img-float($direction) {\n float: $direction;\n @if $direction == right {\n margin: 0 0 1em 1em;\n } @else {\n margin: 0 1em 1em 0;\n }\n}\n\n@mixin content-img-align($direction: center, $spacing: 1em) {\n display: block;\n @if $direction == right {\n margin: $spacing 0 $spacing auto;\n } @else if $direction == left {\n margin: $spacing auto $spacing 0;\n } @else {\n margin: $spacing auto;\n }\n}\n\n@mixin section-arrow-down($color, $width, $height) {\n position: relative;\n &:after {\n top: 100%;\n left: 50%;\n border: solid transparent;\n content: '';\n height: 0;\n width: 0;\n position: absolute;\n pointer-events: none;\n border-color: rgba(0, 0, 0, 0);\n border-top: $height solid $color;\n border-right: calc($width / 2) solid transparent;\n border-left: calc($width / 2) solid transparent;\n margin-left: - calc($width / 2);\n }\n}\n\n@mixin gradientBtn($color1, $color2, $color3) {\n background: linear-gradient(to bottom, $color1 0, $color2 14%, $color3 61%);\n &:hover {\n background: linear-gradient(to bottom, $color1 0, $color2 14%, $color3 61%);\n }\n}\n\n@mixin sportBtn($color1, $color2) {\n background: linear-gradient(to bottom, $color1 0, $color2 100%);\n &:hover {\n background: linear-gradient(to bottom, $color2 0, $color1 100%);\n }\n}\n\n@mixin star($border-color: #ffb400, $fill-color: #ffb400, $width: 16px, $line-height: 2rem) {\n line-height: $line-height;\n width: $width;\n font-weight: normal;\n display: inline-block;\n color: $fill-color;\n font-size: 15px;\n position: relative;\n text-shadow: -1px 0 $border-color, 0 1px $border-color, 1px 0 $border-color, 0 -1px $border-color;\n\n &:last-child {\n margin-right: 0;\n }\n &:before {\n content: '\\2605';\n }\n}\n\n@mixin half-star($border-color: #ffb400, $half-empty-color: #ffb400, $half-full-color: white) {\n line-height: 2rem;\n width: 16px;\n font-weight: normal;\n display: inline-block;\n color: $half-full-color;\n font-size: 15px;\n position: relative;\n &:before {\n content: '\\2605';\n }\n text-shadow: -1px 0 $border-color, 0 1px $border-color, 1px 0 $border-color, 0 -1px $border-color;\n &:after {\n content: '\\2605';\n color: $half-empty-color;\n position: absolute;\n width: 7px;\n overflow: hidden;\n bottom: 0;\n left: 0;\n }\n}\n\n\n@mixin border-gradient($color-1, $color-2, $bgcolor) {\n background: $bgcolor;\n &:before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-radius: 8px;\n border: 2px solid transparent;\n background: $color-1, $color-2 border-box;\n -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);\n -webkit-mask-composite: destination-out;\n mask-composite: exclude;\n }\n}","$media-query-sizes: (\n mobile-s: (\n min: 320px,\n max: 374px,\n ),\n mobile-m: (\n min: 375px,\n max: 424px,\n ),\n mobile: (\n min: 425px,\n max: 767px,\n ),\n tablet: (\n min: 768px,\n max: 991px,\n ),\n laptop: (\n min: 992px,\n max: 1199px,\n ),\n desktop: (\n min: 1200px,\n ),\n);\n\n// Get media query sizes\n$screen: 'only screen';\n@function media-query($media, $optional-media: '', $min: true) {\n $media-label: '';\n\n @if ($optional-media != '') {\n $media-sizes-min: map-get($media-query-sizes, $media);\n $media-sizes-max: map-get($media-query-sizes, $optional-media);\n $media-label: $screen +\n \" and (min-width:#{map-get($media-sizes-min, 'min')}) and (max-width:#{map-get($media-sizes-max, 'max')})\";\n } @else {\n $query: 'max';\n\n @if ($min) {\n $query: 'min';\n }\n\n $media-sizes: map-get($media-query-sizes, $media);\n $media-label: $screen + ' and (#{$query}-width:#{map-get($media-sizes, $query)})';\n }\n\n @return $media-label;\n}\n\n// Min media query\n@mixin min($media) {\n @media #{media-query($media)} {\n @content;\n }\n}\n\n// Max media query\n@mixin max($media) {\n @media #{media-query($media, '', false)} {\n @content;\n }\n}\n\n// Min & max media query\n@mixin min-max($min, $max) {\n @media #{media-query($min, $max)} {\n @content;\n }\n}\n\n// Use this ONLY if you need a media query that doesn't fit the $media-query-sizes breakpoints above\n// Pass number, for example @include custom-min(992)\n@mixin custom-min($min) {\n @media #{$screen} and (min-width: #{$min}px) {\n @content;\n }\n}\n\n@mixin custom-max($max) {\n @media #{$screen} and (max-width: #{$max}px) {\n @content;\n }\n}\n\n@mixin custom-min-max($min, $max) {\n @media #{$screen} and (min-width: #{$min}px) and (max-width: #{$max}px) {\n @content;\n }\n}\n\n// Landscape\n// (If we find more use cases of this in the future, might want to refactor this and include it in the media-query function for $screen)\n// Pass number\n$landscape: 'screen and (orientation:landscape)';\n\n@mixin landscape-max($max) {\n @media #{$landscape} and (max-width: #{$max}px) {\n @content;\n }\n}\n\n@mixin landscape-min($min) {\n @media #{$landscape} and (min-width: #{$min}px) {\n @content;\n }\n}\n\n// Hover\n// that allows you only to apply styles on devices with hover capability\n@mixin hover-device() {\n @media (hover: hover) {\n &:hover {\n @content;\n }\n }\n}\n"],sourceRoot:""}]),___CSS_LOADER_EXPORT___.locals={asSeenOn:"_3U8D+7KKbpc4r24eiqCE9Q==",templateTwo:"OAJN-FHYRGrx0P6jem3chA=="},__webpack_exports__.Z=___CSS_LOADER_EXPORT___}}]);
1
+ "use strict";(self.webpackChunkgatsby_matrix_theme=self.webpackChunkgatsby_matrix_theme||[]).push([[427],{"./src/components/atoms/footer/as-seen-on/index.js":function(__unused_webpack_module,__webpack_exports__,__webpack_require__){__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{default:function(){return as_seen_on}});__webpack_require__("../node_modules/core-js/modules/es.array.concat.js");var react=__webpack_require__("../node_modules/react/index.js"),prop_types=__webpack_require__("./node_modules/prop-types/index.js"),prop_types_default=__webpack_require__.n(prop_types),link_list=__webpack_require__("../node_modules/gatsby-core-theme/src/components/molecules/link-list/index.js"),injectStylesIntoStyleTag=__webpack_require__("../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),injectStylesIntoStyleTag_default=__webpack_require__.n(injectStylesIntoStyleTag),as_seen_on_module=__webpack_require__("../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[10].use[1]!../node_modules/sass-loader/dist/cjs.js!../node_modules/sass-resources-loader/lib/loader.js??ruleSet[1].rules[10].use[3]!./src/components/atoms/footer/as-seen-on/as-seen-on.module.scss"),options={insert:"head",singleton:!1},as_seen_on_as_seen_on_module=(injectStylesIntoStyleTag_default()(as_seen_on_module.Z,options),as_seen_on_module.Z.locals||{}),AsSeenOn=function AsSeenOn(_ref){var asSeenOn=_ref.asSeenOn,template=_ref.template;return react.createElement("div",{className:"".concat(as_seen_on_as_seen_on_module.asSeenOn," ").concat(template&&as_seen_on_as_seen_on_module[template]?as_seen_on_as_seen_on_module[template]:"")},react.createElement("h5",null,"As Seen On:"),react.createElement(link_list.Z,{showListTitle:!1,imageOnly:!0,singleList:!0,lists:asSeenOn,width:130,height:140,gtmClass:"mobile-menu-gtm logo-cta"}))};AsSeenOn.displayName="AsSeenOn",AsSeenOn.__docgenInfo={description:"",methods:[],displayName:"AsSeenOn",props:{asSeenOn:{type:{name:"shape",value:{}},required:!1,description:""},template:{type:{name:"string"},required:!1,description:""}}};var as_seen_on=AsSeenOn;AsSeenOn.propTypes={asSeenOn:prop_types_default().shape({}),template:prop_types_default().string},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/atoms/footer/as-seen-on/index.js"]={name:"AsSeenOn",docgenInfo:AsSeenOn.__docgenInfo,path:"src/components/atoms/footer/as-seen-on/index.js"})},"../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[10].use[1]!../node_modules/sass-loader/dist/cjs.js!../node_modules/sass-resources-loader/lib/loader.js??ruleSet[1].rules[10].use[3]!./src/components/atoms/footer/as-seen-on/as-seen-on.module.scss":function(module,__webpack_exports__,__webpack_require__){var _node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../node_modules/css-loader/dist/runtime/cssWithMappingToString.js"),_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0__),_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../node_modules/css-loader/dist/runtime/api.js"),___CSS_LOADER_EXPORT___=__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__)()(_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0___default());___CSS_LOADER_EXPORT___.push([module.id,"._3U8D\\+7KKbpc4r24eiqCE9Q\\=\\={background:var(--footer-asSeenOn-background-color);border-bottom:var(--footer-asSeenOn-border);display:flex;align-items:flex-start;justify-content:center;flex-direction:column;gap:1.6rem;padding:3.2rem 1.6rem}@media only screen and (min-width:768px){._3U8D\\+7KKbpc4r24eiqCE9Q\\=\\={display:flex;align-items:center;justify-content:center;padding:48px 0px}}@media only screen and (min-width:768px){._3U8D\\+7KKbpc4r24eiqCE9Q\\=\\=>h5,._3U8D\\+7KKbpc4r24eiqCE9Q\\=\\=>ul{margin:0 auto;max-width:calc(var(--main-container-max) + var(--side-container))}}._3U8D\\+7KKbpc4r24eiqCE9Q\\=\\=>h5{margin-top:0;margin-bottom:0;color:var(--footer-asSeenOn-text-color, var(--color-49))}._3U8D\\+7KKbpc4r24eiqCE9Q\\=\\=>ul{display:flex;align-items:flex-start;justify-content:flex-start;flex-wrap:wrap}._3U8D\\+7KKbpc4r24eiqCE9Q\\=\\=>ul li{padding-right:1rem;padding-bottom:1rem}@media only screen and (min-width:768px){._3U8D\\+7KKbpc4r24eiqCE9Q\\=\\=>ul li{padding-bottom:2rem;padding-right:2.5rem}}@media only screen and (min-width:992px){._3U8D\\+7KKbpc4r24eiqCE9Q\\=\\=>ul li{padding-bottom:0}}._3U8D\\+7KKbpc4r24eiqCE9Q\\=\\=>ul li img{max-width:9.5rem}@media only screen and (min-width:768px){._3U8D\\+7KKbpc4r24eiqCE9Q\\=\\=>ul li img{max-width:13rem}}@media only screen and (min-width:768px){._3U8D\\+7KKbpc4r24eiqCE9Q\\=\\=>ul{display:flex;align-items:center;justify-content:center}}.OAJN-FHYRGrx0P6jem3chA\\=\\={border:none;display:flex;align-items:flex-start;justify-content:flex-start;padding:0}.OAJN-FHYRGrx0P6jem3chA\\=\\=>h5,.OAJN-FHYRGrx0P6jem3chA\\=\\=>ul{margin:0}@media only screen and (min-width:768px){.OAJN-FHYRGrx0P6jem3chA\\=\\=>ul{display:flex;align-items:flex-start;justify-content:flex-start}}","",{version:3,sources:["webpack://./src/components/atoms/footer/as-seen-on/as-seen-on.module.scss","webpack://./../node_modules/gatsby-core-theme/src/styles/utils/_mixins.scss","webpack://./../node_modules/gatsby-core-theme/src/styles/utils/_media-queries.scss"],names:[],mappings:"AAeA,8BACE,kDAAA,CACA,2CAAA,CChBA,YAAA,CACA,sBDgBoB,CCfpB,sBDegC,CAChC,qBAAA,CACA,UAAA,CACA,qBAAA,CE+BA,yCFrCF,8BCdE,YAAA,CACA,kBDsBsB,CCrBtB,sBDqB8B,CAC5B,gBAAA,CAAA,CE2BF,yCFxBA,kEAGI,aAAA,CACA,iEAAA,CAAA,CAIJ,iCACE,YAAA,CACA,eAAA,CACA,wDAAA,CAGF,iCCzCA,YAAA,CACA,sBDyCsB,CCxCtB,0BDwCkC,CAChC,cAAA,CAEA,oCACE,kBAAA,CACA,mBAAA,CEIJ,yCFNE,oCAKI,mBAAA,CACA,oBAAA,CAAA,CAAA,yCANJ,oCAUI,gBAAA,CAAA,CAGF,wCACE,gBAAA,CERN,yCFOI,wCAII,eAAA,CAAA,CEXR,yCFVA,iCCzCA,YAAA,CACA,kBDmEwB,CClExB,sBDkEgC,CAAA,CAKlC,4BACE,WAAA,CC1EA,YAAA,CACA,sBD0EoB,CCzEpB,0BDyEgC,CAChC,SAAA,CAEA,8DAEE,QAAA,CE7BF,yCFgCA,+BCnFA,YAAA,CACA,sBDoFwB,CCnFxB,0BDmFoC,CAAA",sourcesContent:["// Global styles extended in each theme\n\n// Utils\n@import '../../../../../../node_modules/gatsby-core-theme/src/styles/utils/variables/typography';\n@import '../../../../../../node_modules/gatsby-core-theme/src/styles/utils/variables/layout';\n@import '../../../../../../node_modules/gatsby-core-theme/src/styles/utils/variables/stack-order';\n@import '../../../../../../node_modules/gatsby-core-theme/src/styles/utils/media-queries';\n@import '../../../../../../node_modules/gatsby-core-theme/src/styles/utils/icons';\n@import '../../../../../../node_modules/gatsby-core-theme/src/styles/utils/tooltip';\n@import '../../../../../../node_modules/gatsby-core-theme/src/styles/utils/loader';\n@import '../../../../../../node_modules/gatsby-core-theme/src/styles/utils/mixins';\n@import '../../../../../../node_modules/gatsby-core-theme/src/styles/utils/scrollbar';\n@import '../../../../../../node_modules/gatsby-core-theme/src/styles/utils/animations';\n\n\n.asSeenOn {\n background: var(--footer-asSeenOn-background-color);\n border-bottom: var(--footer-asSeenOn-border);\n @include flex-align(flex-start, center);\n flex-direction: column;\n gap: 1.6rem;\n padding: 3.2rem 1.6rem;\n\n @include min(tablet) {\n @include flex-align(center, center);\n padding: 48px 0px;\n }\n\n > h5,\n > ul {\n @include min(tablet) {\n margin: 0 auto;\n max-width: calc(var(--main-container-max) + var(--side-container));\n }\n }\n\n > h5 {\n margin-top: 0;\n margin-bottom: 0;\n color: var(--footer-asSeenOn-text-color, var(--color-49));\n }\n\n > ul {\n @include flex-align(flex-start, flex-start);\n flex-wrap: wrap;\n\n li {\n padding-right: 1rem;\n padding-bottom: 1rem;\n\n @include min(tablet) {\n padding-bottom: 2rem;\n padding-right: 2.5rem;\n }\n\n @include min(laptop) {\n padding-bottom: 0;\n }\n\n img {\n max-width: 9.5rem;\n\n @include min(tablet) {\n max-width: 13rem;\n }\n }\n }\n\n @include min(tablet) {\n @include flex-align(center, center);\n }\n }\n}\n\n.templateTwo {\n border: none;\n @include flex-align(flex-start, flex-start);\n padding: 0;\n\n > h5,\n > ul {\n margin: 0;\n }\n\n > ul {\n @include min(tablet) {\n @include flex-align(flex-start, flex-start);\n }\n }\n}","@mixin flex-align($align-items, $justify-content) {\n display: flex;\n align-items: $align-items;\n justify-content: $justify-content;\n}\n\n@mixin flex-direction($flex-direction) {\n display: flex;\n flex-direction: $flex-direction;\n}\n\n@mixin overflow($overflow-type, $overflow-value, $scrolling) {\n #{$overflow-type}: $overflow-value;\n -webkit-overflow-scrolling: $scrolling; // Autoprefixer doesn't add\n}\n\n@mixin text-background($bgcolor, $text-color) {\n background: $bgcolor;\n border-radius: 100px;\n color: $text-color;\n font-weight: 700;\n @include flex-align(center, center);\n padding: 0 2rem;\n}\n\n@mixin link-color($color) {\n color: $color;\n\n &:hover {\n color: $color;\n }\n}\n\n// Using em because I want images in content to inherit size based on parent element (not root)\n@mixin content-img-float($direction) {\n float: $direction;\n @if $direction == right {\n margin: 0 0 1em 1em;\n } @else {\n margin: 0 1em 1em 0;\n }\n}\n\n@mixin content-img-align($direction: center, $spacing: 1em) {\n display: block;\n @if $direction == right {\n margin: $spacing 0 $spacing auto;\n } @else if $direction == left {\n margin: $spacing auto $spacing 0;\n } @else {\n margin: $spacing auto;\n }\n}\n\n@mixin section-arrow-down($color, $width, $height) {\n position: relative;\n &:after {\n top: 100%;\n left: 50%;\n border: solid transparent;\n content: '';\n height: 0;\n width: 0;\n position: absolute;\n pointer-events: none;\n border-color: rgba(0, 0, 0, 0);\n border-top: $height solid $color;\n border-right: calc($width / 2) solid transparent;\n border-left: calc($width / 2) solid transparent;\n margin-left: - calc($width / 2);\n }\n}\n\n@mixin gradientBtn($color1, $color2, $color3) {\n background: linear-gradient(to bottom, $color1 0, $color2 14%, $color3 61%);\n &:hover {\n background: linear-gradient(to bottom, $color1 0, $color2 14%, $color3 61%);\n }\n}\n\n@mixin sportBtn($color1, $color2) {\n background: linear-gradient(to bottom, $color1 0, $color2 100%);\n &:hover {\n background: linear-gradient(to bottom, $color2 0, $color1 100%);\n }\n}\n\n@mixin star($border-color: #ffb400, $fill-color: #ffb400, $width: 16px, $line-height: 2rem) {\n line-height: $line-height;\n width: $width;\n font-weight: normal;\n display: inline-block;\n color: $fill-color;\n font-size: 15px;\n position: relative;\n text-shadow: -1px 0 $border-color, 0 1px $border-color, 1px 0 $border-color, 0 -1px $border-color;\n\n &:last-child {\n margin-right: 0;\n }\n &:before {\n content: '\\2605';\n }\n}\n\n@mixin half-star($border-color: #ffb400, $half-empty-color: #ffb400, $half-full-color: white) {\n line-height: 2rem;\n width: 16px;\n font-weight: normal;\n display: inline-block;\n color: $half-full-color;\n font-size: 15px;\n position: relative;\n &:before {\n content: '\\2605';\n }\n text-shadow: -1px 0 $border-color, 0 1px $border-color, 1px 0 $border-color, 0 -1px $border-color;\n &:after {\n content: '\\2605';\n color: $half-empty-color;\n position: absolute;\n width: 7px;\n overflow: hidden;\n bottom: 0;\n left: 0;\n }\n}\n\n\n@mixin border-gradient($color-1, $color-2, $bgcolor, $radius: .8rem) {\n background: $bgcolor;\n &:before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-radius: $radius;\n border: 2px solid transparent;\n background: $color-1, $color-2 border-box;\n -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);\n -webkit-mask-composite: destination-out;\n mask-composite: exclude;\n }\n}","$media-query-sizes: (\n mobile-s: (\n min: 320px,\n max: 374px,\n ),\n mobile-m: (\n min: 375px,\n max: 424px,\n ),\n mobile: (\n min: 425px,\n max: 767px,\n ),\n tablet: (\n min: 768px,\n max: 991px,\n ),\n laptop: (\n min: 992px,\n max: 1199px,\n ),\n desktop: (\n min: 1200px,\n ),\n);\n\n// Get media query sizes\n$screen: 'only screen';\n@function media-query($media, $optional-media: '', $min: true) {\n $media-label: '';\n\n @if ($optional-media != '') {\n $media-sizes-min: map-get($media-query-sizes, $media);\n $media-sizes-max: map-get($media-query-sizes, $optional-media);\n $media-label: $screen +\n \" and (min-width:#{map-get($media-sizes-min, 'min')}) and (max-width:#{map-get($media-sizes-max, 'max')})\";\n } @else {\n $query: 'max';\n\n @if ($min) {\n $query: 'min';\n }\n\n $media-sizes: map-get($media-query-sizes, $media);\n $media-label: $screen + ' and (#{$query}-width:#{map-get($media-sizes, $query)})';\n }\n\n @return $media-label;\n}\n\n// Min media query\n@mixin min($media) {\n @media #{media-query($media)} {\n @content;\n }\n}\n\n// Max media query\n@mixin max($media) {\n @media #{media-query($media, '', false)} {\n @content;\n }\n}\n\n// Min & max media query\n@mixin min-max($min, $max) {\n @media #{media-query($min, $max)} {\n @content;\n }\n}\n\n// Use this ONLY if you need a media query that doesn't fit the $media-query-sizes breakpoints above\n// Pass number, for example @include custom-min(992)\n@mixin custom-min($min) {\n @media #{$screen} and (min-width: #{$min}px) {\n @content;\n }\n}\n\n@mixin custom-max($max) {\n @media #{$screen} and (max-width: #{$max}px) {\n @content;\n }\n}\n\n@mixin custom-min-max($min, $max) {\n @media #{$screen} and (min-width: #{$min}px) and (max-width: #{$max}px) {\n @content;\n }\n}\n\n// Landscape\n// (If we find more use cases of this in the future, might want to refactor this and include it in the media-query function for $screen)\n// Pass number\n$landscape: 'screen and (orientation:landscape)';\n\n@mixin landscape-max($max) {\n @media #{$landscape} and (max-width: #{$max}px) {\n @content;\n }\n}\n\n@mixin landscape-min($min) {\n @media #{$landscape} and (min-width: #{$min}px) {\n @content;\n }\n}\n\n// Hover\n// that allows you only to apply styles on devices with hover capability\n@mixin hover-device() {\n @media (hover: hover) {\n &:hover {\n @content;\n }\n }\n}\n"],sourceRoot:""}]),___CSS_LOADER_EXPORT___.locals={asSeenOn:"_3U8D+7KKbpc4r24eiqCE9Q==",templateTwo:"OAJN-FHYRGrx0P6jem3chA=="},__webpack_exports__.Z=___CSS_LOADER_EXPORT___}}]);