UNPKG

@vnmfify/core

Version:

```shell npm i @vnmfify/core -S ```

1 lines 7.39 kB
{"version":3,"sources":["dialog/dialog.scss","dialog/_variables.scss"],"names":[],"mappings":"AAEA,gBAUE,kCAAA,CAAA,0BAAA,CAJA,2DAAA,CACA,8CCFqB,CDArB,0DCFiB,CDDjB,QAAA,CAEA,eAAA,CAHA,OAAA,CAOA,8ECJkB,CDIlB,yECJkB,CDIlB,sECJkB,CDKlB,qDAAA,CAAA,6CAAA,CAAA,wCAAA,CAAA,qCAAA,CAAA,uDAAA,CANA,+BAOA,CAEA,wBAZF,gBAaI,0CCXwB,CAAA,CDc1B,wBAEE,wECXwB,CDYxB,iDCXwB,CDSxB,iDCRwB,CDWxB,iBAAA,CAEA,kCACE,sECb2B,CDkB7B,mCAEE,wBAAA,CAAA,qBAAA,CAAA,0BAAA,CAAA,kBAAA,CADA,mBAAA,CAAA,oBAAA,CAAA,mBAAA,CAAA,YAAA,CAEA,gBAAA,CAMF,0EAEE,iECxB2B,CDuB3B,8ECvB2B,CD4B/B,yBACE,kBAAA,CAOA,oBAAA,CAIA,gCAAA,CAXA,cAAA,CAAA,UAAA,CAAA,MAAA,CAIA,kECpCuB,CDqCvB,wECpCyB,CDgCzB,gDC/BwB,CDiCxB,eAAA,CADA,iECnCqB,CDuCrB,iBAAA,CAIA,oBACA,CAEA,+BACE,eAAA,CAGF,gCACE,gBAAA,CAKJ,wBACE,mBAAA,CAAA,oBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,eAAA,CACA,wBAAA,CAAA,qBAAA,CAAA,oBAAA,CAAA,gBAAA,CAEA,iGAEE,kBAAA,CAGA,QAAA,CAHA,cAAA,CAAA,UAAA,CAAA,MAAA,CACA,uCCzDiB,CD0DjB,QACA,CAIA,yGAEE,2DChEsB,CDqE5B,iCAEE,WAAA,CACA,iHCtE4B,CDoE5B,iBCpE4B,CDwE5B,mHAIE,mBAAA,CADA,yECxE4B,CDuE5B,+CAEA,CAEA,oPAEE,iEC9E6B,CDiF/B,2IAEE,mGChF8B,CD+E9B,gGC/E8B,CDmFhC,yIAEE,oGCrF8B,CDoF9B,iGCpF8B,CDyFlC,0DACE,8HCzF2C,CD4F7C,yDACE,gIC5F0C,CDgG9C,2DAEE,SAAA,CACA,oDAAA,CAAA,4CAAA,CAGF,mCACE,SAAA,CACA,oDAAA,CAAA,4CAAA","file":"index.css","sourcesContent":["@import \"./variables\";\r\n\r\n.#{$component-prefix}dialog {\r\n top: 45%;\r\n left: 50%;\r\n width: $dialog-width;\r\n overflow: hidden;\r\n font-size: $dialog-font-size;\r\n background: $dialog-background-color;\r\n border-radius: $dialog-border-radius;\r\n transition: $dialog-transition;\r\n transition-property: transform, opacity;\r\n backface-visibility: hidden; // avoid blurry text after scale animation\r\n\r\n @media (max-width: 321px) {\r\n width: $dialog-small-screen-width;\r\n }\r\n\r\n &__header {\r\n padding-top: $dialog-header-padding-top;\r\n font-weight: $dialog-header-font-weight;\r\n line-height: $dialog-header-line-height;\r\n text-align: center;\r\n\r\n &--isolated {\r\n padding: $dialog-header-isolated-padding;\r\n }\r\n }\r\n\r\n &__content {\r\n &--isolated {\r\n display: flex;\r\n align-items: center;\r\n min-height: 104px * $hd;\r\n }\r\n }\r\n\r\n // Has title, set padding, color of message\r\n &__header + &__content {\r\n .#{$component-prefix}dialog__message {\r\n padding-top: $dialog-has-title-message-padding-top;\r\n color: $dialog-has-title-message-color;\r\n }\r\n }\r\n\r\n &__message {\r\n flex: 1;\r\n max-height: $dialog-message-max-height;\r\n padding: $dialog-message-padding;\r\n overflow-y: auto;\r\n font-size: $dialog-message-font-size;\r\n line-height: $dialog-message-line-height;\r\n text-align: center;\r\n word-wrap: break-word;\r\n\r\n // allow newline character\r\n white-space: pre-wrap;\r\n -webkit-overflow-scrolling: touch;\r\n\r\n &--left {\r\n text-align: left;\r\n }\r\n\r\n &--right {\r\n text-align: right;\r\n }\r\n }\r\n\r\n\r\n &__footer {\r\n display: flex;\r\n overflow: hidden;\r\n user-select: none;\r\n\r\n .#{$component-prefix}dialog__confirm,\r\n .#{$component-prefix}dialog__cancel {\r\n flex: 1;\r\n height: $dialog-button-height;\r\n margin: 0;\r\n border: 0;\r\n }\r\n\r\n .#{$component-prefix}dialog__confirm {\r\n &,\r\n &:active {\r\n color: $dialog-confirm-button-color;\r\n }\r\n }\r\n }\r\n\r\n &__footer--rounded {\r\n position: relative;\r\n height: auto;\r\n padding: $dialog-footer-rounded-padding;\r\n\r\n .#{$component-prefix}dialog__confirm,\r\n .#{$component-prefix}dialog__cancel {\r\n height: $dialog-rounded-button-height;\r\n font-size: $dialog-rounded-button-font-size;\r\n border-radius: unset;\r\n\r\n &,\r\n &:active {\r\n color: $dialog-rounded-button-active-color;\r\n }\r\n\r\n &:first-child {\r\n border-top-left-radius: $dialog-rounded-button-border-radius;\r\n border-bottom-left-radius: $dialog-rounded-button-border-radius;\r\n }\r\n\r\n &:last-child {\r\n border-top-right-radius: $dialog-rounded-button-border-radius;\r\n border-bottom-right-radius: $dialog-rounded-button-border-radius;\r\n }\r\n }\r\n\r\n .#{$component-prefix}dialog__confirm {\r\n background: $dialog-rounded-confirm-button-background-color;\r\n }\r\n\r\n .#{$component-prefix}dialog__cancel {\r\n background: $dialog-rounded-cancel-button-background-color;\r\n }\r\n }\r\n\r\n &-bounce-appear,\r\n &-bounce-enter {\r\n opacity: 0;\r\n transform: translate3d(-50%, -50%, 0) scale(0.7);\r\n }\r\n\r\n &-bounce-exit-active {\r\n opacity: 0;\r\n transform: translate3d(-50%, -50%, 0) scale(0.9);\r\n }\r\n}\r\n","@import \"../styles/prefix\";\r\n@import \"../styles/variables\";\r\n\r\n$dialog-width: var(--dialog-width, 320px * $hd);\r\n$dialog-small-screen-width: var(--dialog-small-screen-width, 90%);\r\n$dialog-font-size: var(--dialog-font-size, var(--font-size-lg, $font-size-lg));\r\n$dialog-transition: var(--dialog-transition, var(--animation-duration-base, $animation-duration-base));\r\n$dialog-border-radius: var(--dialog-border-radius, 16px * $hd);\r\n$dialog-background-color: var(--dialog-background-color, var(--white, $white));\r\n$dialog-header-font-weight: var(--dialog-header-font-weight, var(--font-weight-bold, $font-weight-bold));\r\n$dialog-header-line-height: var(--dialog-header-line-height, 24px * $hd);\r\n$dialog-header-padding-top: var(--dialog-header-padding-top, 26px * $hd);\r\n$dialog-header-isolated-padding: var(--dialog-header-isolated-padding, var(--padding-lg, $padding-lg) 0);\r\n$dialog-message-padding: var(--dialog-message-padding, 26px * $hd var(--padding-lg, $padding-lg));\r\n$dialog-message-font-size: var(--dialog-message-font-size, var(--font-size-md, $font-size-md));\r\n$dialog-message-line-height: var(--dialog-message-line-height, var(--line-height-md, $line-height-md));\r\n$dialog-message-max-height: var(--dialog-message-max-height, 60vh);\r\n$dialog-has-title-message-color: var(--dialog-has-title-message-color, var(--gray-7, $gray-7));\r\n$dialog-has-title-message-padding-top: var(--dialog-has-title-message-padding-top, var(--padding-xs, $padding-xs));\r\n\r\n$dialog-button-height: var(--dialog-button-height, 48px * $hd);\r\n$dialog-confirm-button-color: var(--dialog-confirm-button-color, var(--red, $red));\r\n\r\n$dialog-footer-rounded-padding: var(--dialog-footer-rounded-padding, var(--padding-xs, $padding-xs) var(--padding-lg, $padding-lg) var(--padding-md, $padding-md));\r\n\r\n$dialog-rounded-button-active-color: var(--dialog-rounded-button-active-color, var(--white, $white));\r\n$dialog-rounded-button-font-size: var(--dialog-rounded-button-font-size, var(--font-size-md, $font-size-md));\r\n$dialog-rounded-button-height: var(--dialog-rounded-button-height, 36px * $hd);\r\n$dialog-rounded-button-border-radius: var(--dialog-rounded-button-border-radius, var(--border-radius-max, $border-radius-max));\r\n$dialog-rounded-confirm-button-background-color: var(--dialog-rounded-confirm-button-background-color, var(--gradient-red, $gradient-red));\r\n$dialog-rounded-cancel-button-background-color: var(--dialog-rounded-cancel-button-background-color, var(--gradient-orange, $gradient-orange));\r\n"]}