@square/maker/components/Heading/styles.css.map

📚 Maker Design System by Square

{"version":3,"sources":["webpack://../components/Heading/src/Heading.vue"],"names":[],"mappings":"AAgFA,MACA,sBAAA,CACA,gBAAA,CACA,mBAAA,CACA,wBACA,CAEA,yBACA,MACA,sBAAA,CACA,gBACA,CACA,CAGA,MACA,6BAAA,CACA,kDAAA,CACA,6BAAA,CACA,kDAAA,CACA,mCAAA,CACA,4CAAA,CACA,uEAAA,CACA,uFAAA,CACA,uEAAA,CACA,uFAAA,CACA,uEAAA,CACA,uFAAA,CACA,uEAAA,CACA,uFAAA,CACA,uEAAA,CACA,uFAAA,CACA,uEAAA,CACA,uFAAA,CACA,uEAAA,CACA,uFAAA,CACA,uBACA,CAEA,mBACA,QAAA,CACA,mBACA,CAEA,qCACA,uCAAA,CACA,gDACA,CAEA,qCACA,uCAAA,CACA,gDACA,CAEA,qCACA,iCAAA,CACA,0CACA,CAEA,qCACA,iCAAA,CACA,0CACA,CAEA,qCACA,iCAAA,CACA,0CACA,CAEA,qCACA,iCAAA,CACA,0CACA,CAEA,qCACA,iCAAA,CACA,0CACA,CAEA,qCACA,iCAAA,CACA,0CACA,CAEA,qCACA,iCAAA,CACA,0CACA,CAEA,qCACA,iCAAA,CACA,0CACA","file":"styles.css","sourcesContent":["<script>\nconst DEFAULT_SIZE = 0;\nconst MAX_SIZE = 7;\nconst MIN_SIZE = -2;\n\n/**\n * Heading\n * @inheritAttrs h1\n * @inheritListeners h1\n */\nexport default {\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * Size of heading. Influences which element is used.\n\t\t */\n\t\tsize: {\n\t\t\ttype: Number,\n\t\t\tdefault: DEFAULT_SIZE,\n\t\t\tvalidator: (size) => size >= MIN_SIZE && size <= MAX_SIZE,\n\t\t},\n\t\t/**\n\t\t * Override Heading element. By default, the element is derived from size.\n\t\t */\n\t\telement: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: (element) => ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'div'].includes(element),\n\t\t},\n\t},\n\n\tcomputed: {\n\t\ttag() {\n\t\t\tif (this.element) {\n\t\t\t\treturn this.element;\n\t\t\t}\n\t\t\tconst h1Threshold = 4;\n\t\t\tconst h2Threshold = 3;\n\t\t\tconst h3Threshold = 2;\n\t\t\tconst h4Threshold = 1;\n\t\t\tconst h5Threshold = 0;\n\t\t\tif (this.size >= h1Threshold) {\n\t\t\t\treturn 'h1';\n\t\t\t}\n\t\t\tif (this.size >= h2Threshold) {\n\t\t\t\treturn 'h2';\n\t\t\t}\n\t\t\tif (this.size >= h3Threshold) {\n\t\t\t\treturn 'h3';\n\t\t\t}\n\t\t\tif (this.size >= h4Threshold) {\n\t\t\t\treturn 'h4';\n\t\t\t}\n\t\t\tif (this.size >= h5Threshold) {\n\t\t\t\treturn 'h5';\n\t\t\t}\n\t\t\treturn 'h6';\n\t\t},\n\t\tstringSize() {\n\t\t\tconst minNonNegativeSize = 0;\n\t\t\tif (this.size >= minNonNegativeSize) {\n\t\t\t\treturn this.size.toString();\n\t\t\t}\n\t\t\treturn `minus-${Math.abs(this.size)}`;\n\t\t},\n\t},\n\n\trender(createElement) {\n\t\tconst { $s, stringSize, tag } = this;\n\t\treturn createElement(tag, {\n\t\t\tclass: [$s.Heading, $s[`size_${stringSize}`]],\n\t\t\tattrs: this.$attrs,\n\t\t\ton: this.$listeners,\n\t\t}, this.$slots.default);\n\t},\n};\n</script>\n\n<style module=\"$s\">\n:root {\n\t--font-size-scale: 1.17;\n\t--font-size: 16px;\n\t--line-height: 1.5em;\n\t--line-height-scale: 0.95;\n}\n\n@media (min-width: 600px) {\n\t:root {\n\t\t--font-size-scale: 1.28;\n\t\t--font-size: 16px;\n\t}\n}\n\n/* stylelint-disable-next-line no-duplicate-selectors */\n:root {\n\t--font-step-minus-2-size: 12px;\n\t--font-step-minus-2-line-height: var(--line-height);\n\t--font-step-minus-1-size: 14px;\n\t--font-step-minus-1-line-height: var(--line-height);\n\t--font-step-0-size: var(--font-size);\n\t--font-step-0-line-height: var(--line-height);\n\t--font-step-1-size: calc(var(--font-step-0-size) * var(--font-size-scale));\n\t--font-step-1-line-height: calc(var(--font-step-0-line-height) * var(--line-height-scale));\n\t--font-step-2-size: calc(var(--font-step-1-size) * var(--font-size-scale));\n\t--font-step-2-line-height: calc(var(--font-step-1-line-height) * var(--line-height-scale));\n\t--font-step-3-size: calc(var(--font-step-2-size) * var(--font-size-scale));\n\t--font-step-3-line-height: calc(var(--font-step-2-line-height) * var(--line-height-scale));\n\t--font-step-4-size: calc(var(--font-step-3-size) * var(--font-size-scale));\n\t--font-step-4-line-height: calc(var(--font-step-3-line-height) * var(--line-height-scale));\n\t--font-step-5-size: calc(var(--font-step-4-size) * var(--font-size-scale));\n\t--font-step-5-line-height: calc(var(--font-step-4-line-height) * var(--line-height-scale));\n\t--font-step-6-size: calc(var(--font-step-5-size) * var(--font-size-scale));\n\t--font-step-6-line-height: calc(var(--font-step-5-line-height) * var(--line-height-scale));\n\t--font-step-7-size: calc(var(--font-step-6-size) * var(--font-size-scale));\n\t--font-step-7-line-height: calc(var(--font-step-6-line-height) * var(--line-height-scale));\n\t--font-step-1-size: 19px; /* Override Step 1 - Calculated value was too large for body text */\n}\n\n.Heading {\n\tmargin: 0;\n\tfont-family: inherit;\n}\n\n.Heading.size_minus-2 {\n\tfont-size: var(--font-step-minus-2-size);\n\tline-height: var(--font-step-minus-2-line-height);\n}\n\n.Heading.size_minus-1 {\n\tfont-size: var(--font-step-minus-1-size);\n\tline-height: var(--font-step-minus-1-line-height);\n}\n\n.Heading.size_0 {\n\tfont-size: var(--font-step-0-size);\n\tline-height: var(--font-step-0-line-height);\n}\n\n.Heading.size_1 {\n\tfont-size: var(--font-step-1-size);\n\tline-height: var(--font-step-1-line-height);\n}\n\n.Heading.size_2 {\n\tfont-size: var(--font-step-2-size);\n\tline-height: var(--font-step-2-line-height);\n}\n\n.Heading.size_3 {\n\tfont-size: var(--font-step-3-size);\n\tline-height: var(--font-step-3-line-height);\n}\n\n.Heading.size_4 {\n\tfont-size: var(--font-step-4-size);\n\tline-height: var(--font-step-4-line-height);\n}\n\n.Heading.size_5 {\n\tfont-size: var(--font-step-5-size);\n\tline-height: var(--font-step-5-line-height);\n}\n\n.Heading.size_6 {\n\tfont-size: var(--font-step-6-size);\n\tline-height: var(--font-step-6-line-height);\n}\n\n.Heading.size_7 {\n\tfont-size: var(--font-step-7-size);\n\tline-height: var(--font-step-7-line-height);\n}\n</style>\n"]}