@vnmfify/core/cell/index.css.map

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

{"version":3,"sources":["cell/cell.scss","cell/_variables.scss","styles/mixins/_hairline.scss","styles/_variables.scss","cell/cell-group.scss"],"names":[],"mappings":"AAGA,cAUE,yDCLsB,CDItB,+DCLW,CDDX,mBAAA,CAAA,oBAAA,CAAA,mBAAA,CAAA,YAAA,CAIA,wDCNe,CDOf,wCCNiB,CDIjB,eAAA,CADA,+FAAA,CAJA,iBAAA,CAGA,UCCsB,CDOtB,kCAVA,6BAAA,CAAA,qBEgCA,CFtBA,oBEqBA,0FAAA,CAFA,QAAA,CA5BA,WAAA,CA6BA,2BFnB+C,CEX/C,mBAAA,CAFA,iBAAA,CA8BA,4BFjB+E,CEqB/E,4BAAA,CAAA,wBAAA,CAAA,oBAAA,CFlBA,+DAEE,YAAA,CAGF,qBACE,kBAAA,CAAA,cAAA,CAAA,UAAA,CAAA,MAAA,CAGF,qBAIE,mDCXe,CDSf,8DCXmB,CDYnB,oECXqB,CDSrB,+DCRe,CDcjB,qBACE,uBAAA,CAAA,oBAAA,CAAA,8BAAA,CAAA,sBAAA,CAGF,sBACE,wBAAA,CAAA,qBAAA,CAAA,0BAAA,CAAA,kBAAA,CAGF,mBACE,qBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,oBAAA,CAGF,qBAEE,wECvB0B,CDsB1B,qECtB0B,CDyB1B,0CACE,oECzBuB,CD4BzB,6CACE,uEC5B0B,CDgC9B,yBACE,cAAA,CAEA,gCACE,6ECrDc,CDyDlB,wBACE,gBAAA,CAEA,+BAIE,uEC/DgB,CDgEhB,WAAA,CAFA,wDCtEW,CDqEX,2BAAA,CADA,iBAIA,CAKJ,qBACE,kBAAA,CACA,mDCzEe,CDwEf,cAAA,CAAA,UAAA,CAAA,MAAA,CAEA,gBAAA,CAEA,4BACE,2BGnDO,CHoDP,eAAA,CAIJ,8CAGE,oCCjFa,CDgFb,mCCzFe,CD2Ff,wCC3Fe,CD8FjB,oBAGE,6CCvFoB,CD0FtB,8CAJE,wBAAA,CAAA,qBAAA,CAAA,0BAAA,CAAA,kBAAA,CADA,mBAAA,CAAA,oBAAA,CAAA,mBAAA,CAAA,YC1Fe,CD+FjB,0BAIE,mDCnGe,CDkGf,mDClGe,CGRnB,oBACE,+DH2B4B,CGzB5B,2BAGE,gFH4B6B,CG9B7B,+DH6BuB,CG5BvB,eH6B6B,CGzB/B,2BAIE,yDHgBqB,CGlBrB,oEHoByB,CGnBzB,oDHoB2B,CGtB3B,4GHmBqB,CGdrB,kCACE,yIHmB2B","file":"index.css","sourcesContent":["@import \"./variables\";\r\n\r\n// TODO The base variables need to be migrated\r\n.#{$component-prefix}cell {\r\n  position: relative;\r\n  box-sizing: border-box;\r\n  display: flex;\r\n  width: 100%;\r\n  padding: $cell-vertical-padding $cell-horizontal-padding;\r\n  overflow: hidden;\r\n  font-size: $cell-font-size;\r\n  line-height: $cell-line-height;\r\n  color: $cell-color;\r\n  background: $cell-background-color;\r\n\r\n  &::after {\r\n    @include hairline-bottom($cell-border-color, var(--padding-sm, $padding-sm), var(--padding-sm, $padding-sm));\r\n  }\r\n\r\n  &:last-child::after,\r\n  &--borderless::after {\r\n    display: none;\r\n  }\r\n\r\n  &__title {\r\n    flex: 1;\r\n  }\r\n\r\n  &__brief {\r\n    margin-top: $cell-brief-margin-top;\r\n    font-size: $cell-brief-font-size;\r\n    line-height: $cell-brief-line-height;\r\n    color: $cell-brief-color;\r\n  }\r\n\r\n  &--start {\r\n    align-items: flex-start;\r\n  }\r\n\r\n  &--center {\r\n    align-items: center;\r\n  }\r\n\r\n  &--end {\r\n    align-items: flex-end;\r\n  }\r\n\r\n  &--large {\r\n    padding-top: $cell-vertical-padding-large;\r\n    padding-bottom: $cell-vertical-padding-large;\r\n\r\n    .#{$component-prefix}cell__title {\r\n      font-size: $cell-title-font-size-large;\r\n    }\r\n\r\n    .#{$component-prefix}cell__subtitle {\r\n      font-size: $cell-subtitle-font-size-large;\r\n    }\r\n  }\r\n\r\n  &--clickable {\r\n    cursor: pointer;\r\n\r\n    &:active {\r\n      background: $cell-active-color;\r\n    }\r\n  }\r\n\r\n  &--required {\r\n    overflow: visible;\r\n\r\n    &::before {\r\n      position: absolute;\r\n      left: var(--padding-xs, $padding-xs);\r\n      font-size: $cell-font-size;\r\n      color: $cell-required-color;\r\n      content: '*';\r\n    }\r\n  }\r\n\r\n\r\n  &__value {\r\n    flex: 1;\r\n    color: $cell-value-color;\r\n    text-align: right;\r\n\r\n    &--alone {\r\n      color: $text-color;\r\n      text-align: left;\r\n    }\r\n  }\r\n\r\n  &__icon,\r\n  &__right-icon {\r\n    height: $cell-line-height;\r\n    font-size: $cell-icon-size;\r\n    line-height: $cell-line-height;\r\n  }\r\n\r\n  &__icon {\r\n    display: flex;\r\n    align-items: center;\r\n    margin-right: $cell-icon-margin-left;\r\n  }\r\n\r\n  &__right-icon {\r\n    display: flex;\r\n    align-items: center;\r\n    margin-left: $cell-right-icon-margin-right;\r\n    color:$cell-value-color;\r\n  }\r\n}\r\n","@import \"../styles/prefix\";\r\n@import \"../styles/variables\";\r\n@import \"../styles/mixins/hairline\";\r\n\r\n$cell-font-size: var(--cell-font-size, var(--font-size-md, $font-size-md));\r\n$cell-line-height: var(--cell-line-height, 24px * $hd);\r\n\r\n$cell-color: var(--cell-color, var(--text-color, $text-color));\r\n$cell-background-color: var(--cell-background-color, var(--white, $white));\r\n$cell-border-color: var(--cell-border-color, var(--border-color, $border-color));\r\n$cell-value-color: var(--cell-value-color, var(--gray-6, $gray-6));\r\n$cell-active-color: var(--cell-active-color, var(--active-color, $active-color));\r\n$cell-required-color: var(--cell-required-color, var(--danger-color, $danger-color));\r\n\r\n$cell-icon-size: var(--cell-icon-size, 16px * $hd);\r\n$cell-icon-margin-left: var(--cell-icon-margin-left, 4px * $hd);\r\n$cell-right-icon-margin-right: var(--cell-right-icon-margin-right, 4px * $hd);\r\n\r\n$cell-brief-margin-top: var(--cell-brief-margin-top, var(--padding-base, $padding-base));\r\n$cell-brief-font-size: var(--cell-brief-font-size, var(--font-size-sm, $font-size-sm));\r\n$cell-brief-line-height: var(--cell-brief-line-height, var(--line-height-sm, $line-height-sm));\r\n$cell-brief-color: var(--cell-brief-color, var(--gray-6, $gray-6));\r\n\r\n$cell-vertical-padding: var(--cell-vertical-padding, 10px * $hd);\r\n$cell-horizontal-padding: var(--cell-horizontal-padding, var(--padding-md, $padding-md));\r\n\r\n$cell-vertical-padding-large: var(--cell-vertical-padding-large, var(--padding-sm, $padding-sm));\r\n$cell-title-font-size-large: var(--cell-title-font-size-large, var(--font-size-lg, $font-size-lg));\r\n$cell-subtitle-font-size-large: var(--cell-subtitle-font-size-large, var(--font-size-md, $font-size-md));\r\n\r\n$cell-group-background-color: var(--cell-group-background-color, var(--white, $white));\r\n$cell-group-title-color: var(--cell-group-title-color, var(--gray-6, $gray-6));\r\n$cell-group-title-padding: var(--cell-group-title-padding, var(--padding-md, $padding-md) var(--padding-md, $padding-md) var(--padding-xs, $padding-xs));\r\n$cell-group-title-font-size: var(--cell-group-title-font-size, var(--font-size-md, $font-size-md));\r\n$cell-group-title-line-height: var(--cell-group-title-line-height, 16px * $hd);\r\n$cell-group-inset-padding: var(--cell-group-inset-padding, 0 var(--padding-md, $padding-md));\r\n$cell-group-inset-border-radius: var(--cell-group-inset-border-radius, var(--border-radius-lg, $border-radius-lg));\r\n$cell-group-inset-title-padding: var(--cell-group-inset-title-padding, var(--padding-md, $padding-md) var(--padding-md, $padding-md) var(--padding-xs, $padding-xs) var(--padding-xl, $padding-xl));\r\n","@import '../variables';\n\n@mixin hairline-common {\n  position: absolute;\n  box-sizing: border-box;\n  pointer-events: none;\n  content: ' ';\n}\n\n@mixin hairline($color: $border-color) {\n  @include hairline-common;\n\n  top: -50%;\n  right: -50%;\n  bottom: -50%;\n  left: -50%;\n  border: 0 solid $color;\n  transform: scale(0.5);\n}\n\n@mixin hairline-top($color: $border-color, $left: 0, $right: 0) {\n  @include hairline-common;\n\n  top: 0;\n  right: $right;\n  left: $left;\n  border-top: 2px solid $color;\n  transform: scaleY(0.5);\n}\n\n@mixin hairline-bottom($color: $border-color, $left: 0, $right: 0) {\n  @include hairline-common;\n\n  right: $right;\n  bottom: 0;\n  left: $left;\n  border-bottom: 2px solid $color;\n  transform: scaleY(0.5);\n}\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","@import \"./variables\";\r\n\r\n.#{$component-prefix}cell-group {\r\n  background: $cell-group-background-color;\r\n\r\n  &--inset {\r\n    margin: $cell-group-inset-padding;\r\n    overflow: hidden;\r\n    border-radius: $cell-group-inset-border-radius;\r\n  }\r\n\r\n  &__title {\r\n    padding: $cell-group-title-padding;\r\n    font-size: $cell-group-title-font-size;\r\n    line-height: $cell-group-title-line-height;\r\n    color: $cell-group-title-color;\r\n\r\n    &--inset {\r\n      padding: $cell-group-inset-title-padding;\r\n    }\r\n  }\r\n}\r\n"]}