1 line
20 KiB
Plaintext
1 line
20 KiB
Plaintext
{"version":3,"file":"css/product.css","mappings":"AAEA,gBAEE,iBADA,iBACA,CAEA,sBAEE,eCgCF,sBAIA,uBDnCE,WAFA,cAGA,2BCkCF,CD/BE,wDAEE,WAGF,gDACE,UEyCF,wBFtDF,sBCkCA,aAIA,eE1CF,qBACE,kBAEA,0CAWE,SACA,kBATA,YCqMI,kBDjMJ,aAEA,kBADA,UAPA,kBACA,WAIA,YAFA,SCoMI,CAzDJ,wBD/IF,0CC6MQ,iCAXQ,ECrMlB,uBACE,cAEA,mDACE,cAGF,wCAKE,kBCXO,CDYP,YAJA,gBACA,gBACA,YAHA,UAKA,CAEA,8CACE,sBACA,+BAIJ,mCAOE,eAFA,gBAHA,OAMA,SAAQ,CAFR,gBALA,kBAGA,WADA,SAKA,CAGF,8CACE,gBAGF,oCASE,mBAFA,aCrCO,CDgCP,cAEA,gBAEA,qBADA,gBAJA,kBAOA,oBALA,UCtCO,CD8CP,2CACE,kBAEA,QADA,MAEA,UAIJ,6BACE,aClDO,CCHT,wBAEE,QAAO,CADP,iBACA,CAGF,wBAIE,SAIA,eADA,YAFA,OAIA,SAAQ,CARR,kBAEA,QADA,MAIA,UAGA,CAII,uDAEE,wBDXA,CCYA,qBAFA,UDVA,CCkBR,uBAOE,yBACA,oBAPA,cAGA,iBC/B0B,CDgC1B,gBAHA,oBACA,iBAGA,iBEpC0B","sources":["webpack://Falcon-theme/./css/product/components/product-gallery/_product-thumbs.scss","webpack://Falcon-theme/./node_modules/bootstrap/scss/mixins/_grid.scss","webpack://Falcon-theme/./node_modules/bootstrap/scss/mixins/_breakpoints.scss","webpack://Falcon-theme/./css/product/components/product-gallery/_product-main-images.scss","webpack://Falcon-theme/./node_modules/bootstrap/scss/vendor/_rfs.scss","webpack://Falcon-theme/./css/product/components/product-customization/_product-customization.scss","webpack://Falcon-theme/./css/abstracts/variables/bootstrap/_colors.scss","webpack://Falcon-theme/./css/product/components/product-variants/_attribute-radio.scss","webpack://Falcon-theme/./css/abstracts/variables/bootstrap/_typography.scss","webpack://Falcon-theme/./css/abstracts/variables/bootstrap/_components.scss"],"sourcesContent":["@use \"sass:map\";\n\n.product-thumbs {\n margin-right: -#{map.get($spacers, 1)};\n margin-left: -#{map.get($spacers, 1)};\n\n &__elem {\n padding: 0 map.get($spacers, 1);\n cursor: pointer;\n opacity: .3;\n transition: .3s ease opacity;\n @include make-col(4);\n\n &:focus,\n &:hover {\n opacity: 0.6;\n }\n\n &.swiper-slide-thumb-active {\n opacity: 1;\n }\n\n @include media-breakpoint-up(sm) {\n @include make-col(3);\n }\n }\n}\n","/// Grid system\n//\n// Generate semantic grid columns with these mixins.\n\n@mixin make-container($gutter: $grid-gutter-width) {\n width: 100%;\n padding-right: $gutter * .5;\n padding-left: $gutter * .5;\n margin-right: auto;\n margin-left: auto;\n}\n\n@mixin make-row($gutter: $grid-gutter-width) {\n display: flex;\n flex-wrap: wrap;\n margin-right: -$gutter * .5;\n margin-left: -$gutter * .5;\n}\n\n// For each breakpoint, define the maximum width of the container in a media query\n@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {\n @each $breakpoint, $container-max-width in $max-widths {\n @include media-breakpoint-up($breakpoint, $breakpoints) {\n max-width: $container-max-width;\n }\n }\n @include deprecate(\"The `make-container-max-widths` mixin\", \"v4.5.2\", \"v5\");\n}\n\n@mixin make-col-ready($gutter: $grid-gutter-width) {\n position: relative;\n // Prevent columns from becoming too narrow when at smaller grid tiers by\n // always setting `width: 100%;`. This works because we use `flex` values\n // later on to override this initial width.\n width: 100%;\n padding-right: $gutter * .5;\n padding-left: $gutter * .5;\n}\n\n@mixin make-col($size, $columns: $grid-columns) {\n flex: 0 0 percentage(divide($size, $columns));\n // Add a `max-width` to ensure content within each column does not blow out\n // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari\n // do not appear to require this.\n max-width: percentage(divide($size, $columns));\n}\n\n@mixin make-col-auto() {\n flex: 0 0 auto;\n width: auto;\n max-width: 100%; // Reset earlier grid tiers\n}\n\n@mixin make-col-offset($size, $columns: $grid-columns) {\n $num: divide($size, $columns);\n margin-left: if($num == 0, 0, percentage($num));\n}\n\n// Row columns\n//\n// Specify on a parent element(e.g., .row) to force immediate children into NN\n// numberof columns. Supports wrapping to new lines, but does not do a Masonry\n// style grid.\n@mixin row-cols($count) {\n > * {\n flex: 0 0 divide(100%, $count);\n max-width: divide(100%, $count);\n }\n}\n","// Breakpoint viewport sizes and media queries.\n//\n// Breakpoints are defined as a map of (name: minimum width), order from small to large:\n//\n// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n//\n// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.\n\n// Name of the next breakpoint, or null for the last breakpoint.\n//\n// >> breakpoint-next(sm)\n// md\n// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// md\n// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n// md\n@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {\n $n: index($breakpoint-names, $name);\n @return if($n != null and $n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);\n}\n\n// Minimum breakpoint width. Null for the smallest (first) breakpoint.\n//\n// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// 576px\n@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {\n $min: map-get($breakpoints, $name);\n @return if($min != 0, $min, null);\n}\n\n// Maximum breakpoint width. Null for the largest (last) breakpoint.\n// The maximum value is calculated as the minimum of the next one less 0.02px\n// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.\n// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n// See https://bugs.webkit.org/show_bug.cgi?id=178261\n//\n// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// 767.98px\n@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {\n $next: breakpoint-next($name, $breakpoints);\n @return if($next, breakpoint-min($next, $breakpoints) - .02, null);\n}\n\n// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.\n// Useful for making responsive utilities.\n//\n// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// \"\" (Returns a blank string)\n// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// \"-sm\"\n@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {\n @return if(breakpoint-min($name, $breakpoints) == null, \"\", \"-#{$name}\");\n}\n\n// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n// Makes the @content apply to the given breakpoint and wider.\n@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {\n $min: breakpoint-min($name, $breakpoints);\n @if $min {\n @media (min-width: $min) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n// Makes the @content apply to the given breakpoint and narrower.\n@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {\n $max: breakpoint-max($name, $breakpoints);\n @if $max {\n @media (max-width: $max) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n// Media that spans multiple breakpoint widths.\n// Makes the @content apply between the min and max breakpoints\n@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {\n $min: breakpoint-min($lower, $breakpoints);\n $max: breakpoint-max($upper, $breakpoints);\n\n @if $min != null and $max != null {\n @media (min-width: $min) and (max-width: $max) {\n @content;\n }\n } @else if $max == null {\n @include media-breakpoint-up($lower, $breakpoints) {\n @content;\n }\n } @else if $min == null {\n @include media-breakpoint-down($upper, $breakpoints) {\n @content;\n }\n }\n}\n\n// Media between the breakpoint's minimum and maximum widths.\n// No minimum for the smallest breakpoint, and no maximum for the largest one.\n// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.\n@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {\n $min: breakpoint-min($name, $breakpoints);\n $max: breakpoint-max($name, $breakpoints);\n\n @if $min != null and $max != null {\n @media (min-width: $min) and (max-width: $max) {\n @content;\n }\n } @else if $max == null {\n @include media-breakpoint-up($name, $breakpoints) {\n @content;\n }\n } @else if $min == null {\n @include media-breakpoint-down($name, $breakpoints) {\n @content;\n }\n }\n}\n","@use \"sass:map\";\n\n.product-main-images {\n position: relative;\n\n &__modal-trigger-layer {\n position: absolute;\n right: map.get($spacers, 2);\n bottom: map.get($spacers, 2);\n z-index: 2;\n\n width: 1.6em;\n height: 1.6em;\n padding: 0;\n line-height: 1.6em;\n\n border: 0;\n border-radius: 50%;\n\n @include font-size(20px);\n }\n}\n","// stylelint-disable property-blacklist, scss/dollar-variable-default\n\n// SCSS RFS mixin\n//\n// Automated responsive font sizes\n//\n// Licensed under MIT (https://github.com/twbs/rfs/blob/v8.x/LICENSE)\n\n// Configuration\n\n// Base font size\n$rfs-base-font-size: 1.25rem !default;\n$rfs-font-size-unit: rem !default;\n\n@if $rfs-font-size-unit != rem and $rfs-font-size-unit != px {\n @error \"`#{$rfs-font-size-unit}` is not a valid unit for $rfs-font-size-unit. Use `px` or `rem`.\";\n}\n\n// Breakpoint at where font-size starts decreasing if screen width is smaller\n$rfs-breakpoint: 1200px !default;\n$rfs-breakpoint-unit: px !default;\n\n@if $rfs-breakpoint-unit != px and $rfs-breakpoint-unit != em and $rfs-breakpoint-unit != rem {\n @error \"`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`.\";\n}\n\n// Resize font size based on screen height and width\n$rfs-two-dimensional: false !default;\n\n// Factor of decrease\n$rfs-factor: 10 !default;\n\n@if type-of($rfs-factor) != \"number\" or $rfs-factor <= 1 {\n @error \"`#{$rfs-factor}` is not a valid $rfs-factor, it must be greater than 1.\";\n}\n\n// Generate enable or disable classes. Possibilities: false, \"enable\" or \"disable\"\n$rfs-class: false !default;\n\n// 1 rem = $rfs-rem-value px\n$rfs-rem-value: 16 !default;\n\n// Safari iframe resize bug: https://github.com/twbs/rfs/issues/14\n$rfs-safari-iframe-resize-bug-fix: false !default;\n\n// Disable RFS by setting $enable-responsive-font-sizes to false\n$enable-responsive-font-sizes: true !default;\n\n// Cache $rfs-base-font-size unit\n$rfs-base-font-size-unit: unit($rfs-base-font-size);\n\n@function divide($dividend, $divisor, $precision: 10) {\n $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);\n $dividend: abs($dividend);\n $divisor: abs($divisor);\n @if $dividend == 0 {\n @return 0;\n }\n @if $divisor == 0 {\n @error \"Cannot divide by 0\";\n }\n $remainder: $dividend;\n $result: 0;\n $factor: 10;\n @while ($remainder > 0 and $precision >= 0) {\n $quotient: 0;\n @while ($remainder >= $divisor) {\n $remainder: $remainder - $divisor;\n $quotient: $quotient + 1;\n }\n $result: $result * 10 + $quotient;\n $factor: $factor * .1;\n $remainder: $remainder * 10;\n $precision: $precision - 1;\n @if ($precision < 0 and $remainder >= $divisor * 5) {\n $result: $result + 1;\n }\n }\n $result: $result * $factor * $sign;\n $dividend-unit: unit($dividend);\n $divisor-unit: unit($divisor);\n $unit-map: (\n \"px\": 1px,\n \"rem\": 1rem,\n \"em\": 1em,\n \"%\": 1%\n );\n @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {\n $result: $result * map-get($unit-map, $dividend-unit);\n }\n @return $result;\n}\n\n// Remove px-unit from $rfs-base-font-size for calculations\n@if $rfs-base-font-size-unit == \"px\" {\n $rfs-base-font-size: divide($rfs-base-font-size, $rfs-base-font-size * 0 + 1);\n}\n@else if $rfs-base-font-size-unit == \"rem\" {\n $rfs-base-font-size: divide($rfs-base-font-size, divide($rfs-base-font-size * 0 + 1, $rfs-rem-value));\n}\n\n// Cache $rfs-breakpoint unit to prevent multiple calls\n$rfs-breakpoint-unit-cache: unit($rfs-breakpoint);\n\n// Remove unit from $rfs-breakpoint for calculations\n@if $rfs-breakpoint-unit-cache == \"px\" {\n $rfs-breakpoint: divide($rfs-breakpoint, $rfs-breakpoint * 0 + 1);\n}\n@else if $rfs-breakpoint-unit-cache == \"rem\" or $rfs-breakpoint-unit-cache == \"em\" {\n $rfs-breakpoint: divide($rfs-breakpoint, divide($rfs-breakpoint * 0 + 1, $rfs-rem-value));\n}\n\n// Internal mixin that adds disable classes to the selector if needed.\n@mixin _rfs-disable-class {\n @if $rfs-class == \"disable\" {\n // Adding an extra class increases specificity, which prevents the media query to override the font size\n &,\n .disable-responsive-font-size &,\n &.disable-responsive-font-size {\n @content;\n }\n }\n @else {\n @content;\n }\n}\n\n// Internal mixin that adds enable classes to the selector if needed.\n@mixin _rfs-enable-class {\n @if $rfs-class == \"enable\" {\n .enable-responsive-font-size &,\n &.enable-responsive-font-size {\n @content;\n }\n }\n @else {\n @content;\n }\n}\n\n// Internal mixin used to determine which media query needs to be used\n@mixin _rfs-media-query($mq-value) {\n @if $rfs-two-dimensional {\n @media (max-width: #{$mq-value}), (max-height: #{$mq-value}) {\n @content;\n }\n }\n @else {\n @media (max-width: #{$mq-value}) {\n @content;\n }\n }\n}\n\n// Responsive font size mixin\n@mixin rfs($fs, $important: false) {\n // Cache $fs unit\n $fs-unit: if(type-of($fs) == \"number\", unit($fs), false);\n\n // Add !important suffix if needed\n $rfs-suffix: if($important, \" !important\", \"\");\n\n // If $fs isn't a number (like inherit) or $fs has a unit (not px or rem, like 1.5em) or $ is 0, just print the value\n @if not $fs-unit or $fs-unit != \"\" and $fs-unit != \"px\" and $fs-unit != \"rem\" or $fs == 0 {\n font-size: #{$fs}#{$rfs-suffix};\n }\n @else {\n // Remove unit from $fs for calculations\n @if $fs-unit == \"px\" {\n $fs: divide($fs, $fs * 0 + 1);\n }\n @else if $fs-unit == \"rem\" {\n $fs: divide($fs, divide($fs * 0 + 1, $rfs-rem-value));\n }\n\n // Set default font size\n $rfs-static: if($rfs-font-size-unit == rem, #{divide($fs, $rfs-rem-value)}rem, #{$fs}px);\n\n // Only add the media query if the font size is bigger than the minimum font size\n @if $fs <= $rfs-base-font-size or not $enable-responsive-font-sizes {\n font-size: #{$rfs-static}#{$rfs-suffix};\n }\n @else {\n // Calculate the minimum font size for $fs\n $fs-min: $rfs-base-font-size + divide($fs - $rfs-base-font-size, $rfs-factor);\n\n // Calculate difference between $fs and the minimum font size\n $fs-diff: $fs - $fs-min;\n\n // Base font-size formatting\n $min-width: if($rfs-font-size-unit == rem, #{divide($fs-min, $rfs-rem-value)}rem, #{$fs-min}px);\n\n // Use `vmin` if two-dimensional is enabled\n $variable-unit: if($rfs-two-dimensional, vmin, vw);\n\n // Calculate the variable width between 0 and $rfs-breakpoint\n $variable-width: #{divide($fs-diff * 100, $rfs-breakpoint)}#{$variable-unit};\n\n // Set the calculated font-size\n $rfs-fluid: calc(#{$min-width} + #{$variable-width}) #{$rfs-suffix};\n\n // Breakpoint formatting\n $mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{divide($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit});\n\n @include _rfs-disable-class {\n font-size: #{$rfs-static}#{$rfs-suffix};\n }\n\n @include _rfs-media-query($mq-value) {\n @include _rfs-enable-class {\n font-size: $rfs-fluid;\n }\n\n // Include safari iframe resize fix if needed\n min-width: if($rfs-safari-iframe-resize-bug-fix, (0 * 1vw), null);\n }\n }\n }\n}\n\n// The font-size & responsive-font-size mixins use RFS to rescale the font size\n@mixin font-size($fs, $important: false) {\n @include rfs($fs, $important);\n}\n\n@mixin responsive-font-size($fs, $important: false) {\n @include rfs($fs, $important);\n}\n","@use \"sass:map\";\n\n.product-customization {\n margin: map.get($spacers, 5) 0;\n\n .product-customization-item {\n margin: map.get($spacers, 3) 0;\n }\n\n .product-message {\n width: 100%;\n height: 3.125rem;\n padding: 0.625rem;\n resize: none;\n background: $gray-100;\n border: none;\n\n &:focus {\n background-color: #fff;\n outline: 0.1875rem solid $primary;\n }\n }\n\n .file-input {\n position: absolute;\n left: 0;\n z-index: 1;\n width: 100%;\n height: 2.625rem;\n overflow: hidden;\n cursor: pointer;\n opacity: 0;\n }\n\n .customization-message{\n margin-top: 20px;\n }\n\n .custom-file {\n position: relative;\n display: block;\n width: 100%;\n height: 2.625rem;\n margin-top: map.get($spacers, 3);\n line-height: 2.625rem;\n color: $gray-600;\n text-indent: 0.625rem;\n background: $gray-100;\n\n button {\n position: absolute;\n top: 0;\n right: 0;\n z-index: 0;\n }\n }\n\n small {\n color: $gray-600;\n }\n}\n","// Color system\n\n$white: #fff;\n$gray-100: #f8f9fa;\n$gray-200: #e9ecef;\n$gray-300: #dee2e6;\n$gray-400: #ced4da;\n$gray-500: #adb5bd;\n$gray-600: #6c757d;\n$gray-700: #495057;\n$gray-800: #343a40;\n$gray-900: #212529;\n$black: #000;\n\n$blue: #007bff;\n$indigo: #6610f2;\n$purple: #6f42c1;\n$pink: #e83e8c;\n$red: #dc3545;\n$orange: #fd7e14;\n$yellow: #ffc107;\n$green: #28a745;\n$teal: #20c997;\n$cyan: #17a2b8;\n\n$primary: $blue;\n$secondary: $gray-600;\n$success: $green;\n$info: $cyan;\n$warning: #ff9a52;\n$danger: $red;\n$light: $gray-100;\n$dark: $gray-800;\n","@use \"sass:map\";\n\n.attribute-radio {\n $self: &;\n\n &__label {\n position: relative;\n margin: 0;\n }\n\n &__input {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 100%;\n cursor: pointer;\n opacity: 0;\n\n &:checked ~ {\n #{$self} {\n &__text {\n color: $white;\n background-color: $primary;\n border-color: $primary;\n }\n }\n }\n }\n\n &__text {\n display: block;\n min-width: rem-calc(35px);\n padding: map.get($spacers, 1) map.get($spacers, 2);\n font-size: $font-size-sm;\n font-weight: 700;\n text-align: center;\n border: 1px solid $border-color;\n border-radius: $border-radius;\n }\n}\n","$font-family-sans-serif: \"Roboto\", -apple-system, blinkmacsystemfont, \"Segoe UI\", roboto, \"Helvetica Neue\", arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n$font-family-base: $font-family-sans-serif;\n\n$font-size-base: rem-calc(16px);\n$font-size-lg: $font-size-base * 1.125;\n$font-size-sm: $font-size-base * .875;\n$font-size-xs: $font-size-base * .6875;\n\n$font-weight-lighter: 200;\n$font-weight-light: 300;\n$font-weight-normal: 400;\n$font-weight-bold: 700;\n$font-weight-bolder: 800;\n\n$h1-font-size: $font-size-base * 2;\n$h2-font-size: $font-size-base * 1.75;\n$h3-font-size: $font-size-base * 1.5;\n$h4-font-size: $font-size-base * 1.25;\n$h5-font-size: $font-size-base * 1.125;\n$h6-font-size: $font-size-base;\n\n$display1-size: $font-size-base * 2.5;\n$display2-size: $font-size-base * 2.25;\n$display3-size: $font-size-base * 2;\n$display4-size: $font-size-base * 1.75;\n\n$display1-weight: 400;\n$display2-weight: 400;\n$display3-weight: 400;\n$display4-weight: 400;\n\n$text-muted: $gray-600;\n\n$paragraph-margin-bottom: rem-calc(20px);\n\n$headings-margin-bottom: rem-calc(20px);\n$headings-font-weight: 700;\n$headings-line-height: 1.2;\n$headings-color: $gray-900;\n","$border-width: 1px;\n$border-color: $gray-300;\n$border-radius: .4rem;\n$border-radius-lg: .4rem;\n$border-radius-sm: .4rem;\n"],"names":[],"sourceRoot":""} |