{"version":3,"sources":["components/_modal-fx.scss","main.scss","../../node_modules/bulma/sass/utilities/mixins.sass","../../node_modules/bulma/sass/utilities/initial-variables.sass"],"names":[],"mappings":"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","file":"modal-fx.css","sourcesContent":["\r\n\r\n.modal {\r\n    display: flex;\r\n    visibility: hidden;\r\n\r\n    // Common fx modal background\r\n    .modal-background {\r\n        transition: all $transition-duration;\r\n        opacity: 0;\r\n    }\r\n\r\n    &.is-active {\r\n        visibility: visible;\r\n        .modal-background {\r\n            opacity: 1;\r\n        }\r\n    }\r\n\r\n    &.modal-full-screen {\r\n        .modal-background {\r\n            background-color: #fff;\r\n        }\r\n        .modal-content {\r\n            width: 100%;\r\n            height: 100%;\r\n            max-height: 100vh;\r\n            margin: 0;\r\n            background-color: #fff;\r\n        }\r\n\r\n        // .modal-close {\r\n        //     &::before,\r\n        //     &::after {\r\n        //         background-color: rgba($black, .86);\r\n        //     }\r\n        // }\r\n    }\r\n\r\n    // Fx modal content\r\n    // .modal-fx-fadeInScale\r\n    &.modal-fx {\r\n        \r\n        &-fadeInScale {\r\n            .modal-content {\r\n                transform: scale(0.7);\r\n                opacity: 0;\r\n                transition: all $transition-duration;\r\n            }\r\n        \r\n            &.is-active {\r\n                .modal-content {\r\n                    transform: scale(1);\r\n                    opacity: 1;\r\n                }\r\n            }\r\n        }\r\n\r\n        &-slideRight {\r\n            .modal-content {\r\n                transform: translateX(20%);\r\n                opacity: 0;\r\n                transition: all $transition-duration cubic-bezier(0.25, 0.5, 0.5, 0.9);\r\n            }\r\n            \r\n            &.is-active .modal-content {\r\n                transform: translateX(0);\r\n                opacity: 1;\r\n            }\r\n        }\r\n\r\n        &-slideLeft {\r\n            .modal-content {\r\n                transform: translateX(-20%);\r\n                opacity: 0;\r\n                transition: all $transition-duration cubic-bezier(0.25, 0.5, 0.5, 0.9);\r\n            }\r\n            \r\n            &.is-active .modal-content {\r\n                transform: translateX(0);\r\n                opacity: 1;\r\n            }\r\n        }\r\n\r\n        &-slideBottom {\r\n            .modal-content {\r\n                transform: translateY(20%);\r\n                opacity: 0;\r\n                transition: all $transition-duration;\r\n            }\r\n            \r\n            &.is-active .modal-content {\r\n                transform: translateY(0);\r\n                opacity: 1;\r\n            }\r\n        }\r\n\r\n        &-slideTop {\r\n            .modal-content {\r\n                transform: translateY(-20%);\r\n                opacity: 0;\r\n                transition: all $transition-duration;\r\n            }\r\n            \r\n            &.is-active .modal-content {\r\n                transform: translateY(0);\r\n                opacity: 1;\r\n            }\r\n        }\r\n\r\n        &-fall {\r\n            &.modal {\r\n                perspective: $modal-perspective;\r\n            }\r\n            \r\n            .modal-content {\r\n                transform-style: preserve-3d;\r\n                transform: translateZ(600px) rotateX(20deg); \r\n                opacity: 0;\r\n            }\r\n            \r\n            &.is-active .modal-content {\r\n                transition: all $transition-duration ease-in;\r\n                transform: translateZ(0px) rotateX(0deg); \r\n                opacity: 1;\r\n            } \r\n        }\r\n\r\n        &-slideFall {\r\n            &.modal {\r\n                perspective: $modal-perspective;\r\n            }\r\n            \r\n            .modal-content {\r\n                transform-style: preserve-3d;\r\n                transform: translate(30%) translateZ(600px) rotate(10deg); \r\n                opacity: 0;\r\n            }\r\n\r\n            &.is-active .modal-content {\r\n                transition: all $transition-duration ease-in;\r\n                transform: translate(0%) translateZ(0) rotate(0deg);\r\n                opacity: 1;\r\n            }\r\n        }\r\n\r\n        &-newsPaper {\r\n            .modal-content {\r\n                transform: scale(0) rotate(720deg);\r\n                opacity: 0;\r\n            }\r\n            \r\n            .modal-background,\r\n            .modal-content {\r\n                transition: all $transition-duration-newsPaper;\r\n            }\r\n            \r\n            &.is-active .modal-content {\r\n                transform: scale(1) rotate(0deg);\r\n                opacity: 1;\r\n            }\r\n        }\r\n\r\n        &-3dFlipVertical {\r\n            &.modal {\r\n                perspective: $modal-perspective;\r\n            }\r\n        \r\n            .modal-content {\r\n                transform-style: preserve-3d;\r\n                transform: rotateX(-70deg);\r\n                transition: all $transition-duration;\r\n                opacity: 0;\r\n            }\r\n        \r\n            &.is-active .modal-content {\r\n                transform: rotateX(0deg);\r\n                opacity: 1;\r\n            }\r\n        }\r\n\r\n        &-3dFlipHorizontal {\r\n            &.modal {\r\n                perspective: $modal-perspective;\r\n            }\r\n            \r\n            .modal-content {\r\n                transform-style: preserve-3d;\r\n                transform: rotateY(-70deg);\r\n                transition: all $transition-duration;\r\n                opacity: 0;\r\n            }\r\n            \r\n            &.is-active .modal-content {\r\n                transform: rotateY(0deg);\r\n                opacity: 1;\r\n            }\r\n        }\r\n\r\n        &-3dSign {\r\n            &.modal {\r\n                perspective: $modal-perspective;\r\n            }\r\n            \r\n            .modal-content {\r\n                position: relative;\r\n                transform-style: preserve-3d;\r\n                transform: rotateX(-60deg);\r\n                transform-origin: 50% 0;\r\n                opacity: 0;\r\n                transition: all $transition-duration;\r\n            }\r\n            \r\n            &.is-active .modal-content {\r\n                transform: rotateX(0deg);\r\n                opacity: 1;\r\n            }\r\n        }\r\n\r\n        &-3dSignDown {\r\n            &.modal {\r\n                perspective: $modal-perspective;\r\n            }\r\n            \r\n            .modal-content {\r\n                position: relative;\r\n                transform-style: preserve-3d;\r\n                transform: rotateX(60deg);\r\n                transform-origin: 0 100%;\r\n                opacity: 0;\r\n                transition: all $transition-duration;\r\n            }\r\n            \r\n            &.is-active .modal-content {\r\n                transform: rotateX(0deg);\r\n                opacity: 1;\r\n            }\r\n        }\r\n\r\n        &-superScaled {\r\n            .modal-content {\r\n                transform: scale(2);\r\n                opacity: 0;\r\n                transition: all $transition-duration;\r\n            }\r\n            \r\n            &.is-active .modal-content {\r\n                transform: scale(1);\r\n                opacity: 1;\r\n            }\r\n        }\r\n\r\n        &-3dSlit {\r\n            &.modal {\r\n                perspective: $modal-perspective;\r\n            }\r\n            \r\n            .modal-content {\r\n                transform-style: preserve-3d;\r\n                transform: translateZ(-3000px) rotateY(90deg);\r\n                opacity: 0;\r\n            }\r\n            \r\n            &.is-active .modal-content {\r\n                animation: slit $transition-duration-3dslit forwards ease-out;\r\n            }\r\n            \r\n            @keyframes slit {\r\n                50% { transform: translateZ(-250px) rotateY(89deg); opacity: 1; animation-timing-function: ease-in;}\r\n                100% { transform: translateZ(0) rotateY(0deg); opacity: 1; }\r\n            }\r\n        }\r\n\r\n        &-3dRotateFromBottom {\r\n            &.modal {\r\n                perspective: $modal-perspective;\r\n            }\r\n            \r\n            .modal-content{\r\n                transform-style: preserve-3d;\r\n                transform: translateY(100%) rotateX(90deg);\r\n                transform-origin: 0 100%;\r\n                opacity: 0;\r\n                transition: all $transition-duration ease-out;\r\n            }\r\n            \r\n            &.is-active .modal-content{\r\n                transform: translateY(0%) rotateX(0deg);\r\n                opacity: 1;\r\n            }\r\n        }\r\n\r\n        &-3dRotateFromLeft {\r\n            &.modal {\r\n                perspective: $modal-perspective;\r\n            }\r\n            \r\n            .modal-content {\r\n                transform-style: preserve-3d;\r\n                transform: translateZ(100px) translateX(-30%) rotateY(90deg);\r\n                transform-origin: 0 100%;\r\n                opacity: 0;\r\n                transition: all $transition-duration;\r\n            }\r\n            \r\n            &.is-active .modal-content {\r\n                transform: translateZ(0px) translateX(0%) rotateY(0deg);\r\n                opacity: 1;\r\n            }\r\n        }\r\n\r\n    }\r\n\r\n    .modal-content {\r\n        // size\r\n        &.is-huge {\r\n            width: 100%;\r\n            margin: 0px 20px;\r\n            max-height: calc(100vh - 40px);\r\n        }\r\n        @include from($tablet) {\r\n            &.is-huge {\r\n                width: 100%;\r\n                margin: 0px 20px;\r\n                max-height: calc(100vh - 40px);\r\n            }\r\n        }\r\n        &.is-tiny {\r\n            max-width: 400px;\r\n        }\r\n\r\n        // type\r\n        &.is-image {\r\n            text-align: center;\r\n\r\n            &.is-huge {\r\n                width:auto;\r\n            }\r\n      \r\n            img {\r\n                max-height: calc(100vh - 50px);\r\n            }\r\n        }\r\n    }  \r\n\r\n    // Positioning, center is default\r\n    // .modal-pos-top\r\n    &.modal-pos {\r\n        &-top {\r\n            align-items: flex-start;\r\n            .modal-content {\r\n                margin-top: 1rem;\r\n            }\r\n        }\r\n        &-bottom {\r\n            align-items: flex-end;\r\n            .modal-content {\r\n                margin-bottom: 1rem;\r\n            }\r\n        }\r\n    }\r\n\r\n    .modal-background {\r\n        background-color: $modal-bg-color;\r\n    }\r\n}\r\n\r\n","// Bulma essential variables, functions and mixins\r\n@import \"../../node_modules/bulma/sass/utilities/initial-variables\";\r\n@import \"../../node_modules/bulma/sass/utilities/functions\";\r\n@import \"../../node_modules/bulma/sass/utilities/derived-variables\";\r\n@import \"../../node_modules/bulma/sass/utilities/mixins.sass\";\r\n\r\n// Modal minimal setup\r\n$transition-duration: .3s;\r\n$transition-duration-newsPaper: .7s;\r\n$transition-duration-3dslit: .5s;\r\n\r\n$modal-perspective: 1300px;\r\n$modal-bg-color: rgba($black,.86);\r\n\r\n// import modal-fx component\r\n@import \"components/modal-fx\";","@import \"initial-variables\";\n\n@mixin clearfix {\n  &::after {\n    clear: both;\n    content: \" \";\n    display: table; } }\n\n@mixin center($width, $height: 0) {\n  position: absolute;\n  @if $height != 0 {\n    left: calc(50% - (#{$width} / 2));\n    top: calc(50% - (#{$height} / 2)); }\n  @else {\n    left: calc(50% - (#{$width} / 2));\n    top: calc(50% - (#{$width} / 2)); } }\n\n@mixin fa($size, $dimensions) {\n  display: inline-block;\n  font-size: $size;\n  height: $dimensions;\n  line-height: $dimensions;\n  text-align: center;\n  vertical-align: top;\n  width: $dimensions; }\n\n@mixin hamburger($dimensions) {\n  cursor: pointer;\n  display: block;\n  height: $dimensions;\n  position: relative;\n  width: $dimensions;\n  span {\n    background-color: currentColor;\n    display: block;\n    height: 1px;\n    left: calc(50% - 8px);\n    position: absolute;\n    transform-origin: center;\n    transition-duration: $speed;\n    transition-property: background-color, opacity, transform;\n    transition-timing-function: $easing;\n    width: 16px;\n    &:nth-child(1) {\n      top: calc(50% - 6px); }\n    &:nth-child(2) {\n      top: calc(50% - 1px); }\n    &:nth-child(3) {\n      top: calc(50% + 4px); } }\n  &:hover {\n    background-color: rgba(black, 0.05); }\n  // Modifers\n  &.is-active {\n    span {\n      &:nth-child(1) {\n        transform: translateY(5px) rotate(45deg); }\n      &:nth-child(2) {\n        opacity: 0; }\n      &:nth-child(3) {\n        transform: translateY(-5px) rotate(-45deg); } } } }\n\n@mixin overflow-touch {\n  -webkit-overflow-scrolling: touch; }\n\n@mixin placeholder {\n  $placeholders: ':-moz' ':-webkit-input' '-moz' '-ms-input';\n  @each $placeholder in $placeholders {\n    &:#{$placeholder}-placeholder {\n      @content; } } }\n\n// Responsiveness\n\n@mixin from($device) {\n  @media screen and (min-width: $device) {\n    @content; } }\n\n@mixin until($device) {\n  @media screen and (max-width: $device - 1px) {\n    @content; } }\n\n@mixin mobile {\n  @media screen and (max-width: $tablet - 1px) {\n    @content; } }\n\n@mixin tablet {\n  @media screen and (min-width: $tablet), print {\n    @content; } }\n\n@mixin tablet-only {\n  @media screen and (min-width: $tablet) and (max-width: $desktop - 1px) {\n    @content; } }\n\n@mixin touch {\n  @media screen and (max-width: $desktop - 1px) {\n    @content; } }\n\n@mixin desktop {\n  @media screen and (min-width: $desktop) {\n    @content; } }\n\n@mixin desktop-only {\n  @if $widescreen-enabled {\n    @media screen and (min-width: $desktop) and (max-width: $widescreen - 1px) {\n      @content; } } }\n\n@mixin until-widescreen {\n  @if $widescreen-enabled {\n    @media screen and (max-width: $widescreen - 1px) {\n      @content; } } }\n\n@mixin widescreen {\n  @if $widescreen-enabled {\n    @media screen and (min-width: $widescreen) {\n      @content; } } }\n\n@mixin widescreen-only {\n  @if $widescreen-enabled and $fullhd-enabled {\n    @media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px) {\n      @content; } } }\n\n@mixin until-fullhd {\n  @if $fullhd-enabled {\n    @media screen and (max-width: $fullhd - 1px) {\n      @content; } } }\n\n@mixin fullhd {\n  @if $fullhd-enabled {\n    @media screen and (min-width: $fullhd) {\n      @content; } } }\n\n// Placeholders\n\n%unselectable {\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none; }\n\n@mixin unselectable {\n  @extend %unselectable; }\n\n%arrow {\n  border: 3px solid transparent;\n  border-radius: 2px;\n  border-right: 0;\n  border-top: 0;\n  content: \" \";\n  display: block;\n  height: 0.625em;\n  margin-top: -0.4375em;\n  pointer-events: none;\n  position: absolute;\n  top: 50%;\n  transform: rotate(-45deg);\n  transform-origin: center;\n  width: 0.625em; }\n\n@mixin arrow($color) {\n  @extend %arrow;\n  border-color: $color; }\n\n%block {\n  &:not(:last-child) {\n    margin-bottom: 1.5rem; } }\n\n@mixin block {\n  @extend %block; }\n\n%delete {\n  @extend %unselectable;\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  background-color: rgba($black, 0.2);\n  border: none;\n  border-radius: $radius-rounded;\n  cursor: pointer;\n  display: inline-block;\n  flex-grow: 0;\n  flex-shrink: 0;\n  font-size: 0;\n  height: 20px;\n  max-height: 20px;\n  max-width: 20px;\n  min-height: 20px;\n  min-width: 20px;\n  outline: none;\n  position: relative;\n  vertical-align: top;\n  width: 20px;\n  &::before,\n  &::after {\n    background-color: $white;\n    content: \"\";\n    display: block;\n    left: 50%;\n    position: absolute;\n    top: 50%;\n    transform: translateX(-50%) translateY(-50%) rotate(45deg);\n    transform-origin: center center; }\n  &::before {\n    height: 2px;\n    width: 50%; }\n  &::after {\n    height: 50%;\n    width: 2px; }\n  &:hover,\n  &:focus {\n    background-color: rgba($black, 0.3); }\n  &:active {\n    background-color: rgba($black, 0.4); }\n  // Sizes\n  &.is-small {\n    height: 16px;\n    max-height: 16px;\n    max-width: 16px;\n    min-height: 16px;\n    min-width: 16px;\n    width: 16px; }\n  &.is-medium {\n    height: 24px;\n    max-height: 24px;\n    max-width: 24px;\n    min-height: 24px;\n    min-width: 24px;\n    width: 24px; }\n  &.is-large {\n    height: 32px;\n    max-height: 32px;\n    max-width: 32px;\n    min-height: 32px;\n    min-width: 32px;\n    width: 32px; } }\n\n@mixin delete {\n  @extend %delete; }\n\n%loader {\n  animation: spinAround 500ms infinite linear;\n  border: 2px solid $border;\n  border-radius: $radius-rounded;\n  border-right-color: transparent;\n  border-top-color: transparent;\n  content: \"\";\n  display: block;\n  height: 1em;\n  position: relative;\n  width: 1em; }\n\n@mixin loader {\n  @extend %loader; }\n\n%overlay {\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0; }\n\n@mixin overlay($offset: 0) {\n  @extend %overlay;\n  @if $offset != 0 {\n    bottom: $offset;\n    left: $offset;\n    right: $offset;\n    top: $offset; } }\n","// Colors\n\n$black:        hsl(0, 0%, 4%) !default;\n$black-bis:    hsl(0, 0%, 7%) !default;\n$black-ter:    hsl(0, 0%, 14%) !default;\n\n$grey-darker:  hsl(0, 0%, 21%) !default;\n$grey-dark:    hsl(0, 0%, 29%) !default;\n$grey:         hsl(0, 0%, 48%) !default;\n$grey-light:   hsl(0, 0%, 71%) !default;\n$grey-lighter: hsl(0, 0%, 86%) !default;\n\n$white-ter:    hsl(0, 0%, 96%) !default;\n$white-bis:    hsl(0, 0%, 98%) !default;\n$white:        hsl(0, 0%, 100%) !default;\n\n$orange:       hsl(14,  100%, 53%) !default;\n$yellow:       hsl(48,  100%, 67%) !default;\n$green:        hsl(141, 71%,  48%) !default;\n$turquoise:    hsl(171, 100%, 41%) !default;\n$cyan:         hsl(204, 86%,  53%) !default;\n$blue:         hsl(217, 71%,  53%) !default;\n$purple:       hsl(271, 100%, 71%) !default;\n$red:          hsl(348, 100%, 61%) !default;\n\n// Typography\n\n$family-sans-serif: BlinkMacSystemFont, -apple-system, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", \"Helvetica\", \"Arial\", sans-serif !default;\n$family-monospace: monospace !default;\n$render-mode: optimizeLegibility !default;\n\n$size-1: 3rem !default;\n$size-2: 2.5rem !default;\n$size-3: 2rem !default;\n$size-4: 1.5rem !default;\n$size-5: 1.25rem !default;\n$size-6: 1rem !default;\n$size-7: 0.75rem !default;\n\n$weight-light: 300 !default;\n$weight-normal: 400 !default;\n$weight-medium: 500 !default;\n$weight-semibold: 600 !default;\n$weight-bold: 700 !default;\n\n// Responsiveness\n\n// The container horizontal gap, which acts as the offset for breakpoints\n$gap: 64px !default;\n// 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16\n$tablet: 769px !default;\n// 960px container + 4rem\n$desktop: 960px + (2 * $gap) !default;\n// 1152px container + 4rem\n$widescreen: 1152px + (2 * $gap) !default;\n$widescreen-enabled: true !default;\n// 1344px container + 4rem\n$fullhd: 1344px + (2 * $gap) !default;\n$fullhd-enabled: true !default;\n\n// Miscellaneous\n\n$easing: ease-out !default;\n$radius-small: 2px !default;\n$radius: 4px !default;\n$radius-large: 6px !default;\n$radius-rounded: 290486px !default;\n$speed: 86ms !default;\n\n// Flags\n\n$variable-columns: true !default;\n"]}