@vnmfify/core
Version:
```shell npm i @vnmfify/core -S ```
1 lines • 14 kB
Source Map (JSON)
{"version":3,"sources":["button/button.scss","button/_variables.scss","button/button-group.scss"],"names":[],"mappings":"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","file":"index.css","sourcesContent":["@import \"./variables\";\r\n\r\n.#{$component-prefix}button {\r\n position: relative;\r\n box-sizing: border-box;\r\n display: inline-block;\r\n padding: 0;\r\n margin: 0;\r\n line-height: $button-line-height;\r\n text-align: center;\r\n cursor: pointer;\r\n border-radius: $button-border-radius;\r\n transition: opacity $button-transition-duration;\r\n appearance: none;\r\n\r\n &::before {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n width: 100%;\r\n height: 100%;\r\n content: ' ';\r\n background: var(--black, $black);\r\n border-color: var(--black, $black);\r\n border-style: inherit;\r\n border-width: inherit;\r\n border-radius: inherit; /* inherit parent's border radius */\r\n opacity: 0;\r\n transform: translate(-50%, -50%);\r\n }\r\n\r\n &:active::before {\r\n opacity: 0.1;\r\n }\r\n\r\n &--mini {\r\n height: $button-height-mini;\r\n padding: $button-padding-mini;\r\n font-size: $button-font-size-mini;\r\n }\r\n\r\n &--small {\r\n height: $button-height-small;\r\n padding: $button-padding-small;\r\n font-size: $button-font-size-small;\r\n }\r\n\r\n &--medium {\r\n height: $button-height-medium;\r\n padding: $button-padding-medium;\r\n font-size: $button-font-size-medium;\r\n }\r\n\r\n &--large {\r\n width: 100%;\r\n height: $button-height-large;\r\n font-size: $button-font-size-large;\r\n }\r\n\r\n &--default {\r\n color: $button-default-color;\r\n background: $button-default-background-color;\r\n border: $button-border-width solid $button-default-border-color;\r\n }\r\n\r\n &--primary {\r\n color: $button-primary-color;\r\n background: $button-primary-background-color;\r\n border: $button-border-width solid $button-primary-border-color;\r\n }\r\n\r\n &--info {\r\n color: $button-info-color;\r\n background: $button-info-background-color;\r\n border: $button-border-width solid $button-info-border-color;\r\n }\r\n\r\n &--success {\r\n color: $button-success-color;\r\n background: $button-success-background-color;\r\n border: $button-border-width solid $button-success-background-color;\r\n }\r\n\r\n &--warning {\r\n color: $button-warning-color;\r\n background: $button-warning-background-color;\r\n border: $button-border-width solid $button-warning-border-color;\r\n }\r\n\r\n &--danger {\r\n color: $button-danger-color;\r\n background: $button-danger-background-color;\r\n border: $button-border-width solid $button-danger-border-color;\r\n }\r\n\r\n &--disabled {\r\n cursor: not-allowed;\r\n opacity: $button-disabled-opacity;\r\n\r\n &:active::before {\r\n opacity: 0;\r\n }\r\n }\r\n\r\n &--loading {\r\n\r\n &:active::before {\r\n opacity: 0;\r\n }\r\n }\r\n\r\n &--block {\r\n display: block;\r\n width: 100%;\r\n }\r\n\r\n &--text {\r\n background: transparent;\r\n border: 0 none;\r\n\r\n &:active::before {\r\n opacity: 0.1;\r\n }\r\n\r\n &.#{$component-prefix}button--default {\r\n color: $button-default-color;\r\n }\r\n\r\n &.#{$component-prefix}button--primary {\r\n color: $button-primary-background-color;\r\n\r\n &:active::before {\r\n background: $button-primary-background-color;\r\n }\r\n }\r\n\r\n &.#{$component-prefix}button--info {\r\n color: $button-info-background-color;\r\n\r\n &:active::before {\r\n background: $button-info-background-color;\r\n }\r\n }\r\n\r\n &.#{$component-prefix}button--success {\r\n color: $button-success-background-color;\r\n\r\n &:active::before {\r\n background: $button-success-background-color;\r\n }\r\n }\r\n\r\n &.#{$component-prefix}button--warning {\r\n color: $button-warning-background-color;\r\n\r\n &:active::before {\r\n background: $button-warning-background-color;\r\n }\r\n }\r\n\r\n &.#{$component-prefix}button--danger {\r\n color: $button-danger-background-color;\r\n\r\n &:active::before {\r\n background: $button-danger-background-color;\r\n }\r\n }\r\n }\r\n\r\n &--contained {\r\n // none\r\n }\r\n\r\n &--outlined {\r\n background: transparent;\r\n\r\n &.#{$component-prefix}button--primary {\r\n color: $button-primary-background-color;\r\n background: $button-primary-color;\r\n\r\n &:active::before {\r\n background: $button-primary-background-color;\r\n }\r\n }\r\n\r\n &.#{$component-prefix}button--info {\r\n color: $button-info-background-color;\r\n background: $button-info-color;\r\n\r\n &:active::before {\r\n background: $button-info-background-color;\r\n }\r\n }\r\n\r\n &.#{$component-prefix}button--success {\r\n color: $button-success-background-color;\r\n background: $button-success-color;\r\n\r\n &:active::before {\r\n background: $button-success-background-color;\r\n }\r\n }\r\n\r\n &.#{$component-prefix}button--warning {\r\n color: $button-warning-background-color;\r\n background: $button-warning-color;\r\n\r\n &:active::before {\r\n background: $button-warning-background-color;\r\n }\r\n }\r\n\r\n &.#{$component-prefix}button--danger {\r\n color: $button-danger-background-color;\r\n background: $button-danger-color;\r\n\r\n &:active::before {\r\n background: $button-danger-background-color;\r\n }\r\n }\r\n }\r\n\r\n &--hairline {\r\n border-width: 0;\r\n\r\n &::after {\r\n border-color: inherit;\r\n border-radius: $button-border-radius;\r\n }\r\n\r\n &.#{$component-prefix}button--round::after {\r\n border-radius: $button-border-radius-max;\r\n }\r\n\r\n &.#{$component-prefix}button--square::after {\r\n border-radius: 0;\r\n }\r\n }\r\n\r\n &--round {\r\n border-radius: $button-border-radius-max;\r\n }\r\n\r\n &--square {\r\n border-radius: 0;\r\n }\r\n\r\n &__icon {\r\n font-size: 1.2em;\r\n line-height: inherit;\r\n color: inherit;\r\n }\r\n\r\n // align-items are ignored when flex container is a button in legacy safari\r\n // see: https://bugs.webkit.org/show_bug.cgi?id=169700\r\n &__content {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n height: 100%;\r\n\r\n // fix icon vertical align\r\n // see: https://github.com/youzan/vant/issues/7617\r\n &::before {\r\n content: ' ';\r\n }\r\n }\r\n\r\n &__loading {\r\n font-size: inherit;\r\n color: inherit;\r\n\r\n .#{$component-prefix}loading__circular,\r\n .#{$component-prefix}loading__spinner {\r\n width: $button-loading-icon-size;\r\n height: $button-loading-icon-size;\r\n color: currentColor;\r\n }\r\n }\r\n\r\n &__loading--right,\r\n &__icon--right {\r\n margin-right: var(--padding-base, $padding-base);\r\n }\r\n\r\n &__loading--left,\r\n &__icon--left {\r\n margin-left: var(--padding-base, $padding-base);\r\n }\r\n}\r\n","@import \"../styles/prefix\";\r\n@import \"../styles/variables\";\r\n\r\n$button-line-height: var(--button-line-height, 1.2);\r\n$button-border-width: var(--button-border-width, var(--border-width-base, $border-width-base));\r\n$button-border-radius: var(--button-border-radius, var(--border-radius-sm, $border-radius-sm));\r\n$button-border-radius-max: var(--button-border-radius-max, var(--border-radius-max, $border-radius-max));\r\n$button-transition-duration: var(--button-transition-duration, var(--animation-duration-fast, $animation-duration-fast));\r\n\r\n$button-disabled-opacity: var(--button-disabled-opacity, var(--disabled-opacity, $disabled-opacity));\r\n\r\n$button-loading-icon-size: var(--button-loading-icon-size, 20px * $hd);\r\n\r\n$button-height-mini: var(--button-height-mini, 24px * $hd);\r\n$button-padding-mini: var(--button-padding-mini, 0 var(--padding-base, $padding-base));\r\n$button-font-size-mini: var(--button-font-size-mini, var(--font-size-xs, $font-size-xs));\r\n\r\n$button-height-small: var(--button-height-small, 32px * $hd);\r\n$button-padding-small: var(--button-padding-small, 0 var(--padding-xs, $padding-xs));\r\n$button-font-size-small: var(--button-font-size-small, var(--font-size-sm, $font-size-sm));\r\n\r\n$button-height-medium: var(--button-height-medium, 44px * $hd);\r\n$button-padding-medium: var(--button-padding-medium, 0 var(--padding-md, $padding-md));\r\n$button-font-size-medium: var(--button-font-size-medium, var(--font-size-md, $font-size-md));\r\n\r\n$button-height-large: var(--button-height-large, 50px * $hd);\r\n$button-font-size-large: var(--button-font-size-large, var(--font-size-lg, $font-size-lg));\r\n\r\n$button-default-color: var(--button-default-color, var(--text-color, $text-color));\r\n$button-default-background-color: var(--button-default-background-color, var(--white, $white));\r\n$button-default-border-color: var(--button-default-border-color, var(--border-color, $border-color));\r\n\r\n$button-primary-color: var(--button-primary-color, var(--white, $white));\r\n$button-primary-background-color: var(--button-primary-background-color, var(--primary-color, $primary-color));\r\n$button-primary-border-color: var(--button-primary-border-color, $button-primary-background-color);\r\n\r\n$button-info-color: var(--button-color-info, var(--white, $white));\r\n$button-info-background-color: var(--button-info-background-color, var(--info-color, $info-color));\r\n$button-info-border-color: var(--button-info-border-color, $button-info-background-color);\r\n\r\n$button-success-color: var(--button-success-color, var(--white, $white));\r\n$button-success-background-color: var(--button-success-background-color, var(--success-color, $success-color));\r\n$button-success-border-color: var(--button-success-border-color,$button-success-background-color);\r\n\r\n$button-warning-color: var(--button-warning-color, var(--white, $white));\r\n$button-warning-background-color: var(--button-warning-background-color, var(--warning-color, $warning-color));\r\n$button-warning-border-color: var(--button-warning-border-color, $button-warning-background-color);\r\n\r\n$button-danger-color: var(--button-danger-color, var(--white, $white));\r\n$button-danger-background-color: var(--button-danger-background-color, var(--danger-color, $danger-color));\r\n$button-danger-border-color: var(--button-danger-border-color, $button-danger-background-color);\r\n","@import \"./variables\";\r\n\r\n.#{$component-prefix}button-group {\r\n display: flex;\r\n\r\n .#{$component-prefix}button {\r\n\r\n &:not(:first-child):not(:last-child) {\r\n border-right: 0;\r\n border-radius: 0;\r\n\r\n &::after {\r\n border-radius: 0;\r\n }\r\n }\r\n\r\n &:first-child, &:first-child::after {\r\n border-right-width: 0;\r\n border-top-right-radius: 0;\r\n border-bottom-right-radius: 0;\r\n }\r\n\r\n &:last-child, &:last-child::after {\r\n border-top-left-radius: 0;\r\n border-bottom-left-radius: 0;\r\n }\r\n\r\n &__content::before {\r\n content: none;\r\n }\r\n }\r\n\r\n &--round {\r\n .#{$component-prefix}button {\r\n &:first-child {\r\n border-top-left-radius: $button-border-radius-max;\r\n border-bottom-left-radius: $button-border-radius-max;\r\n }\r\n\r\n &:last-child {\r\n border-top-right-radius: $button-border-radius-max;\r\n border-bottom-right-radius: $button-border-radius-max;\r\n }\r\n }\r\n }\r\n\r\n &--block {\r\n .#{$component-prefix}button {\r\n flex: 1;\r\n }\r\n }\r\n}\r\n"]}