@vnmfify/core
Version:
```shell npm i @vnmfify/core -S ```
1 lines • 9.7 kB
Source Map (JSON)
{"version":3,"sources":["stepper/stepper.scss","stepper/_variables.scss","styles/_variables.scss"],"names":[],"mappings":"AAEA,iBACE,oBAAA,CACA,wBAAA,CAAA,qBAAA,CAAA,oBAAA,CAAA,gBAAA,CAEA,sDAYE,oFCduB,CDevB,QAAA,CAVA,6BAAA,CAAA,qBAAA,CAMA,8ECCwB,CDCxB,cAAA,CAPA,oBAAA,CAEA,uCCLmB,CDOnB,QAAA,CADA,SAAA,CALA,iBAAA,CCQwB,qBAAA,CDLxB,sCAQA,CAEA,oEAEE,UAAA,CADA,SACA,CAGF,kEAEE,UAAA,CADA,SACA,CAGF,sIAME,6BAAA,CADA,UAAA,CADA,QAAA,CAFA,iBAAA,CACA,OAAA,CAIA,sCAAA,CAAA,kCAAA,CAAA,8BAAA,CAGF,oEACE,+DCvC4B,CD0C9B,0EACE,gEC7B0B,CD8B1B,kBC7BqC,CDgCrC,kKAFA,wGC9BqC,CDsCzC,iCACE,YAAA,CAGF,wBAeE,uBAAA,CAAA,oBAAA,CAAA,eAAA,CAHA,0HC5D6B,CD6D7B,QAAA,CACA,eAAA,CAbA,6BAAA,CAAA,qBAAA,CAQA,wEC1DkB,CDmDlB,oBAAA,CAKA,iEC1DsB,CDuDtB,uCCzDmB,CD6DnB,mDC1DwB,CDwDxB,wCC1DmB,CDyDnB,SAAA,CAKA,iBAAA,CACA,qBAAA,CARA,qCAYA,CAEA,iCAKE,iFCrEyB,CDkEzB,mGCjEoC,CDgEpC,+DCjEyB,CDmEzB,SCnEyB,CDwE3B,uCACE,cAAA,CADF,kCACE,cAAA,CAGF,oCACE,WAAA,CAKF,qDACE,2QAAA,CAGF,qDACE,2QAAA,CAKF,mDACE,wBAAA,CAGF,sDAEE,qFCtF8C,CDuF9C,4GAAA,CAFA,0FAEA,CAGF,sDAEE,0GCzF8C,CDwF9C,qECxF8C,CD4FhD,4GAEE,kBAAA,CAEA,0HACE,UErFS,CFyFT,8QAEE,UAAA","file":"index.css","sourcesContent":["@import \"./variables\";\r\n\r\n.#{$component-prefix}stepper {\r\n display: inline-block;\r\n user-select: none;\r\n\r\n &__decrease,\r\n &__increase {\r\n position: relative;\r\n box-sizing: border-box;\r\n display: inline-block;\r\n width: $stepper-input-height;\r\n height: $stepper-input-height;\r\n padding: 0;\r\n margin: 0;\r\n color: $stepper-button-icon-color;\r\n vertical-align: middle;\r\n cursor: pointer;\r\n background: $stepper-background-color;\r\n border: 0;\r\n\r\n &::before {\r\n width: 50%;\r\n height: 1px * $hd;\r\n }\r\n\r\n &::after {\r\n width: 1px * $hd;\r\n height: 50%;\r\n }\r\n\r\n &::before,\r\n &::after {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n content: '';\r\n background-color: currentColor;\r\n transform: translate(-50%, -50%);\r\n }\r\n\r\n &:active {\r\n background-color: $stepper-active-background-color;\r\n }\r\n\r\n &--disabled {\r\n color: $stepper-button-disabled-color;\r\n cursor: not-allowed;\r\n background: $stepper-button-disabled-background-color;\r\n\r\n &:active {\r\n background: $stepper-button-disabled-background-color;\r\n }\r\n }\r\n }\r\n\r\n &__decrease::after {\r\n display: none;\r\n }\r\n\r\n &__input {\r\n box-sizing: border-box;\r\n display: inline-block;\r\n width: $stepper-input-width;\r\n height: $stepper-input-height;\r\n padding: 0;\r\n margin: $stepper-input-margin;\r\n font-size: $stepper-input-font-size;\r\n line-height: $stepper-input-line-height;\r\n color: $stepper-input-color;\r\n text-align: center;\r\n vertical-align: middle;\r\n background: $stepper-input-background-color;\r\n border: 0 none;\r\n border-radius: 0;\r\n appearance: none;\r\n\r\n &:disabled {\r\n color: $stepper-input-disabled-color;\r\n background: $stepper-input-disabled-background-color;\r\n opacity: 1;\r\n // fix disabled color in iOS\r\n -webkit-text-fill-color: $stepper-input-disabled-color;\r\n }\r\n\r\n &:read-only {\r\n cursor: default;\r\n }\r\n\r\n .weui-input {\r\n height: 100%;\r\n }\r\n }\r\n\r\n &--rounded {\r\n .#{$component-prefix}stepper__decrease {\r\n border-radius: $stepper-rounded-decrease-button-border-radius 0 0 $stepper-rounded-decrease-button-border-radius;\r\n }\r\n\r\n .#{$component-prefix}stepper__increase {\r\n border-radius: 0 $stepper-rounded-increase-button-border-radius $stepper-rounded-increase-button-border-radius 0;\r\n }\r\n }\r\n\r\n &--circular {\r\n .#{$component-prefix}stepper__input {\r\n background: transparent;\r\n }\r\n\r\n .#{$component-prefix}stepper__decrease {\r\n color: $stepper-circular-decrease-button-color;\r\n background: $stepper-circular-decrease-button-background-color;\r\n border: 1px * $hd solid $stepper-circular-decrease-button-border-color;\r\n }\r\n\r\n .#{$component-prefix}stepper__increase {\r\n color: $stepper-circular-increase-button-color;\r\n background: $stepper-circular-increase-button-background-color;\r\n }\r\n\r\n .#{$component-prefix}stepper__decrease,\r\n .#{$component-prefix}stepper__increase {\r\n border-radius: 100%;\r\n\r\n &:active {\r\n opacity: $active-opacity;\r\n }\r\n\r\n &--disabled {\r\n &,\r\n &:active {\r\n opacity: 0.3;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n","@import \"../styles/prefix\";\r\n@import \"../styles/variables\";\r\n\r\n$stepper-active-background-color: var(--stepper-active-background-color, #e8e8e8);\r\n$stepper-background-color: var(--stepper-background-color, var(--active-color, $active-color));\r\n//\r\n$stepper-input-width: var(--stepper-input-width, 32px * $hd);\r\n$stepper-input-height: var(--stepper-input-height, 28px * $hd);\r\n$stepper-input-margin: var(--stepper-input-margin, 0 2px * $hd);\r\n$stepper-input-font-size: var(--stepper-input-font-size, var(--font-size-md, $font-size-md));\r\n$stepper-input-line-height: var(--stepper-input-line-height, normal);\r\n$stepper-input-color: var(--stepper-input-color, var(--text-color, $text-color));\r\n$stepper-input-background-color: var(--stepper-input-background-color, $stepper-background-color);\r\n$stepper-input-disabled-color: var(--stepper-input-disabled-color, var(--gray-5, $gray-5));\r\n$stepper-input-disabled-background-color: var(--stepper-input-disabled-background-color, var(--active-color, $active-color));\r\n//\r\n$stepper-button-icon-color: var(--stepper-button-icon-color, var(--text-color, $text-color));\r\n$stepper-button-disabled-color: var(--stepper-button-disabled-color, var(--gray-5, $gray-5));\r\n$stepper-button-disabled-background-color: var(--stepper-button-disabled-background-color, var(--background-color, $background-color));\r\n//\r\n$stepper-rounded-button-border-radius: var(--stepper-rounded-button-border-radius, var(--border-radius-md, $border-radius-md));\r\n$stepper-rounded-decrease-button-border-radius: var(--stepper-rounded-decrease-button-border-radius, $stepper-rounded-button-border-radius);\r\n$stepper-rounded-increase-button-border-radius: var(--stepper-rounded-increase-button-border-radius, $stepper-rounded-button-border-radius);\r\n//\r\n$stepper-circular-decrease-button-color: var(--stepper-circular-increase-button-color, var(--danger-color, $danger-color));\r\n$stepper-circular-decrease-button-background-color: var(--stepper-circular-increase-button-background-color, var(--white, $white));\r\n$stepper-circular-decrease-button-border-color: var(--stepper-circular-increase-button-border-color, var(--danger-color, $danger-color));\r\n$stepper-circular-increase-button-color: var(--stepper-circular-increase-button-color, var(--white, $white));\r\n$stepper-circular-increase-button-background-color: var(--stepper-circular-increase-button-background-color, var(--danger-color, $danger-color));\r\n","// Color Palette\r\n$black: #000;\r\n$black-rgb: 0, 0, 0;\r\n$white: #fff;\r\n\r\n$gray-1: #f7f8fa;\r\n$gray-2: #f2f3f5;\r\n$gray-3: #ebedf0;\r\n$gray-4: #dcdee0;\r\n$gray-5: #c8c9cc;\r\n$gray-6: #969799;\r\n$gray-7: #646566;\r\n$gray-8: #323233;\r\n\r\n$red: #ee0a24;\r\n$blue: #1989fa;\r\n$cyan: #2db7f5;\r\n$green: #07c160;\r\n$orange: #ff976a;\r\n\r\n$orange-dark: #ed6a0c;\r\n$orange-light: #fffbe8;\r\n\r\n// Base Unit\r\n$hd: 2 !default;\r\n\r\n// Gradient Colors\r\n$gradient-red: linear-gradient(to right, #ff6034, #ee0a24);\r\n$gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);\r\n\r\n// Component Colors\r\n$primary-color: var(--blue, $blue);\r\n$info-color: var(--cyan, $cyan);\r\n$success-color: var(--green, $green);\r\n$warning-color: var(--orange, $orange);\r\n$danger-color: var(--red, $red);\r\n$text-color: var(--gray-8, $gray-8);\r\n$text-color-2: var(--gray-6, $gray-6);\r\n$text-color-3: var(--gray-5, $gray-5);\r\n$active-color: var(--gray-2, $gray-2);\r\n$active-opacity: 0.7;\r\n$disabled-opacity: 0.5;\r\n$background-color: var(--gray-1, $gray-1);\r\n$background-color-light: var(--white, $white);\r\n$text-link-color: #576b95;\r\n\r\n// Padding\r\n$padding-base: 4px * $hd;\r\n$padding-xs: $padding-base * 2;\r\n$padding-sm: $padding-base * 3;\r\n$padding-md: $padding-base * 4;\r\n$padding-lg: $padding-base * 6;\r\n$padding-xl: $padding-base * 8;\r\n\r\n// Height\r\n$height-xs: 16px * $hd;\r\n$height-sm: 18px * $hd;\r\n$height-md: 20px * $hd;\r\n$height-lg: 22px * $hd;\r\n\r\n$font-weight-bold: 500;\r\n\r\n// Font\r\n$font-size-xs: 10px * $hd;\r\n$font-size-sm: 12px * $hd;\r\n$font-size-md: 14px * $hd;\r\n$font-size-lg: 16px * $hd;\r\n// Line Height\r\n$line-height-xs: 14px * $hd;\r\n$line-height-sm: 18px * $hd;\r\n$line-height-md: 20px * $hd;\r\n$line-height-lg: 22px * $hd;\r\n\r\n$base-font-family: -apple-system, blinkmacsystemfont, 'Helvetica Neue',\r\nhelvetica, segoe ui, arial, roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB',\r\n'Microsoft Yahei', sans-serif;\r\n\r\n$price-integer-font-family: avenir-heavy, pingfang sc, helvetica neue, arial, sans-serif;\r\n\r\n// Animation\r\n$animation-duration-base: 0.3s;\r\n$animation-duration-fast: 0.2s;\r\n$animation-timing-function-enter: ease-out;\r\n$animation-timing-function-exit: ease-in;\r\n\r\n// Border\r\n$border-color: var(--gray-3, $gray-3);\r\n$border-width-base: 1px * $hd;\r\n$border-radius-sm: 2px * $hd;\r\n$border-radius-md: 4px * $hd;\r\n$border-radius-lg: 8px * $hd;\r\n$border-radius-max: 999px;\r\n"]}