UNPKG

@vnmfify/core

Version:

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

1 lines 6.89 kB
{"version":3,"sources":["tag/tag.scss","tag/_variables.scss"],"names":[],"mappings":"AAEA,aAGE,wBAAA,CAAA,qBAAA,CAAA,0BAAA,CAAA,kBAAA,CAKA,0CCJkB,CDGlB,wCCLU,CDAV,0BAAA,CAAA,2BAAA,CAAA,0BAAA,CAAA,mBAAA,CAGA,uDCFc,CDGd,uCCDgB,CDDhB,oDCHY,CDAZ,iBCGkB,CDMlB,sBACE,oECW2B,CDT3B,4CACE,oDCOc,CDHlB,sBACE,uFCK2B,CDH3B,4CACE,uECCc,CDGlB,mBACE,iFCDwB,CDGxB,yCACE,iECLW,CDSf,sBACE,wFCP2B,CDS3B,4CACE,wECXc,CDelB,sBACE,yFCb2B,CDe3B,4CACE,yECjBc,CDqBlB,qBACE,oFCnB0B,CDqB1B,2CACE,oECvBa,CD2BjB,uBACE,iEC1B4B,CD4B5B,8BAQE,gBAAA,CACA,qBAAA,CALA,QAAA,CAGA,UAAA,CAFA,MAAA,CACA,mBAAA,CALA,iBAAA,CAEA,OAAA,CADA,KAOA,CAIJ,qBACE,0CCrEiB,CDuEjB,8CACE,iEC/D6B,CDkE/B,6CACE,gEClE4B,CDsEhC,oBAGE,wECjFsB,CDgFtB,6DC/EkB,CD8ElB,+EC/EsB,CDmFtB,6CACE,0HC1E4B,CD6E9B,4CACE,yHC7E2B,CDkF/B,oBACE,6EC5FwB,CD+F1B,yBAEE,iJAAA,CADA,wEACA,CAGF,0BAEE,iJAAA,CADA,yEACA,CAGF,oBAEE,aAAA,CACA,cAAA,CAFA,eAEA","file":"index.css","sourcesContent":["@import \"./variables\";\r\n\r\n.#{$component-prefix}tag {\r\n position: relative;\r\n display: inline-flex;\r\n align-items: center;\r\n padding: $tag-padding;\r\n font-size: $tag-font-size;\r\n line-height: $tag-line-height;\r\n color: $tag-color;\r\n border-radius: $tag-border-radius;\r\n\r\n &--default {\r\n background: $tag-default-background-color;\r\n\r\n &.#{$component-prefix}tag--outlined {\r\n color: $tag-default-color;\r\n }\r\n }\r\n\r\n &--primary {\r\n background: $tag-primary-background-color;\r\n\r\n &.#{$component-prefix}tag--outlined {\r\n color: $tag-primary-color;\r\n }\r\n }\r\n\r\n &--info {\r\n background: $tag-info-background-color;\r\n\r\n &.#{$component-prefix}tag--outlined {\r\n color: $tag-info-color;\r\n }\r\n }\r\n\r\n &--success {\r\n background: $tag-success-background-color;\r\n\r\n &.#{$component-prefix}tag--outlined {\r\n color: $tag-success-color;\r\n }\r\n }\r\n\r\n &--warning {\r\n background: $tag-warning-background-color;\r\n\r\n &.#{$component-prefix}tag--outlined {\r\n color: $tag-warning-color;\r\n }\r\n }\r\n\r\n &--danger {\r\n background: $tag-danger-background-color;\r\n\r\n &.#{$component-prefix}tag--outlined {\r\n color: $tag-danger-color;\r\n }\r\n }\r\n\r\n &--outlined {\r\n background: $tag-outlined-background-color;\r\n\r\n &::before {\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n bottom: 0;\r\n left: 0;\r\n pointer-events: none;\r\n content: '';\r\n border: 1px * $hd solid currentColor;\r\n border-radius: inherit;\r\n }\r\n }\r\n\r\n &--medium {\r\n padding: $tag-medium-padding;\r\n\r\n &.#{$component-prefix}tag--round-right {\r\n padding: $tag-rounded-right-medium-padding;\r\n }\r\n\r\n &.#{$component-prefix}tag--round-left {\r\n padding: $tag-rounded-left-medium-padding;\r\n }\r\n }\r\n\r\n &--large {\r\n padding: $tag-large-padding;\r\n font-size: $tag-large-font-size;\r\n border-radius: $tag-large-border-radius;\r\n\r\n &.#{$component-prefix}tag--round-right {\r\n padding: $tag-rounded-right-large-padding;\r\n }\r\n\r\n &.#{$component-prefix}tag--round-left {\r\n padding: $tag-rounded-left-large-padding;\r\n }\r\n\r\n }\r\n\r\n &--round {\r\n border-radius: $tag-rounded-border-radius;\r\n }\r\n\r\n &--round-left {\r\n padding: $tag-rounded-left-padding;\r\n border-radius: $tag-rounded-border-radius 0 0 $tag-rounded-border-radius;\r\n }\r\n\r\n &--round-right {\r\n padding: $tag-rounded-right-padding;\r\n border-radius: 0 $tag-rounded-border-radius $tag-rounded-border-radius 0;\r\n }\r\n\r\n &__close {\r\n margin-left: 2px * $hd;\r\n color: inherit;\r\n cursor: pointer;\r\n }\r\n}\r\n","@import \"../styles/prefix\";\r\n@import \"../styles/variables\";\r\n\r\n$tag-padding: var(--tag-padding, 0 var(--padding-base, $padding-base));\r\n$tag-color: var(--tag-color, var(--white, $white));\r\n$tag-font-size: var(--tag-font-size, var(--font-size-sm, $font-size-sm));\r\n$tag-border-radius: var(--tag-border-radius, 2px * $hd);\r\n$tag-line-height: var(--tag-line-height, 16px * $hd);\r\n$tag-medium-padding: var(--tag-medium-padding, 2px * $hd 6px * $hd);\r\n$tag-large-padding: var(--tag-large-padding, var(--padding-base, $padding-base) var(--padding-xs, $padding-xs));\r\n$tag-large-border-radius: var(--tag-large-border-radius, var(--border-radius-md, $border-radius-md));\r\n$tag-large-font-size: var(--tag-large-font-size, var(--font-size-md, $font-size-md));\r\n$tag-rounded-border-radius: var(--tag-rounded-border-radius, var(--border-radius-max, $border-radius-max));\r\n// Default RoundRight, RoundLeft\r\n$tag-rounded-right-padding: var(--tag-rounded-right-padding, 0 ($padding-base + 2px * $hd) 0 var(--padding-base, $padding-base));\r\n$tag-rounded-left-padding: var(--tag-rounded-left-padding, 0 var(--padding-base, $padding-base) 0 ($padding-base + 2px * $hd));\r\n// Medium RoundRight, RoundLeft\r\n$tag-rounded-right-medium-padding: var(--tag-rounded-right-medium-padding, 2px * $hd 8px * $hd 2px * $hd 6px * $hd);\r\n$tag-rounded-left-medium-padding: var(--tag-rounded-left-medium-padding, 2px * $hd 6px * $hd 2px * $hd 8px * $hd);\r\n// Large RoundRight, RoundLeft\r\n$tag-rounded-right-large-padding: var(--tag-rounded-right-large-padding, var(--padding-base, $padding-base) ($padding-xs + 2px * $hd) var(--padding-base, $padding-base) var(--padding-xs, $padding-xs));\r\n$tag-rounded-left-large-padding: var(--tag-rounded-left-large-padding, var(--padding-base, $padding-base) var(--padding-xs, $padding-xs) var(--padding-base, $padding-base) ($padding-xs + 2px * $hd));\r\n// Color\r\n$tag-default-color: var(--tag-default-color, var(--gray-6, $gray-6));\r\n$tag-default-background-color: var(--tag-default-background-color, var(--gray-6, $gray-6));\r\n$tag-primary-color: var(--tag-primary-color, var(--primary-color, $primary-color));\r\n$tag-primary-background-color: var(--tag-primary-background-color, var(--primary-color, $primary-color));\r\n$tag-info-color: var(--tag-info-color, var(--info-color, $info-color));\r\n$tag-info-background-color: var(--tag-info-background-color, var(--info-color, $info-color));\r\n$tag-success-color: var(--tag-success-color, var(--success-color, $success-color));\r\n$tag-success-background-color: var(--tag-success-background-color, var(--success-color, $success-color));\r\n$tag-warning-color: var(--tag-warning-color, var(--warning-color, $warning-color));\r\n$tag-warning-background-color: var(--tag-warning-background-color, var(--warning-color, $warning-color));\r\n$tag-danger-color: var(--tag-danger-color, var(--danger-color, $danger-color));\r\n$tag-danger-background-color: var(--tag-danger-background-color, var(--danger-color, $danger-color));\r\n$tag-outlined-background-color: var(--tag-outlined-background-color, var(--white, $white));\r\n"]}