ant-design-x-vue-next/lib/file-card/style/index.js

Ant Design X for Vue — community continuation aligned with @ant-design/x

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require("vue");require("../../_util/cssinjs/StyleContext.js");require("../../_util/cssinjs/theme/ThemeCache.js");require("../../_util/warning.js");require("../../_util/cssinjs/transformers/legacyLogicalProperties.js");const y=require("../../_util/cssinjs-utils/util/statistic.js"),x=require("../../theme/genStyleUtils.js"),z=t=>{const{antCls:e,componentCls:i,paddingSM:n,padding:l,paddingXXS:r,colorFillTertiary:s,marginSM:a,colorTextDescription:d,fontSize:c,fontSizeSM:o,colorTextBase:g,motionDurationSlow:p,colorTextLightSolid:$,lineHeightLG:h,marginXXS:m,fontSizeHeading1:u,fontSizeHeading4:v,controlHeightLG:S,marginXS:w,calc:f}=t;return{[i]:{display:"flex",[`${i}-file`]:{display:"flex",alignItems:"center",padding:`${n} ${l}`,backgroundColor:s,borderRadius:t.borderRadius,position:"relative",overflow:"hidden",boxSizing:"border-box",width:268,height:"auto","&-pointer":{cursor:"pointer"},[`${i}-file-icon`]:{fontSize:f(u).sub(2).equal(),marginInlineEnd:a,display:"flex",alignItems:"center",justifyContent:"center"},[`${i}-file-content`]:{flex:1,maxWidth:f("100%").sub(f(u).sub(2).equal()).sub(a).equal()},[`${i}-file-name`]:{fontSize:c,color:g,display:"flex",maxWidth:"100%"},[`${i}-file-name-prefix`]:{flex:"0 1 auto",minWidth:0,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},[`${i}-file-name-suffix`]:{flex:"none"},[`${i}-file-description`]:{fontSize:o,color:d,lineHeight:h,marginBottom:m},[`${i}-file-mask`]:{position:"absolute",inset:0,display:"flex",alignItems:"center",justifyContent:"center",color:$,background:"rgba(0, 0, 0, 0.5)",cursor:"pointer",opacity:0,transition:`opacity ${p}`,"&:hover":{opacity:1},[`${i}-file-mask-info`]:{overflow:"hidden",whiteSpace:"nowrap",textOverflow:"ellipsis",padding:`0 ${r}`}}},[`${i}-file-small`]:{borderRadius:t.borderRadius,padding:`0 ${n}`,height:S,[`${i}-file-icon`]:{fontSize:v,marginInlineEnd:w},[`${i}-file-description`]:{display:"none"}},[`${i}-image`]:{width:268,borderRadius:t.borderRadius,overflow:"hidden"},[`${i}-image-img`]:{width:"100%",img:{width:"100%",height:"auto",objectFit:"cover",borderRadius:"inherit"}},[`${i}-loading`]:{width:268,aspectRatio:"1",position:"relative",borderRadius:t.borderRadius,overflow:"hidden"},[`${i}-image-loading`]:{width:"100%",height:"100%",position:"absolute",insetBlockStart:0,insetInlineStart:0,background:t.colorBgBase},[`${i}-image-skeleton`]:{width:"100%",height:"100%",position:"relative",[`${e}-skeleton-node`]:{width:"100%",height:"100%"}},[`${i}-image-spin`]:{position:"absolute",insetBlockStart:t.margin,insetInlineStart:t.margin,color:t.colorText,lineHeight:t.lineHeight,"&-default":{fontSize:t.fontSize},"&-small":{fontSize:t.fontSizeSM},"&-large":{fontSize:t.fontSizeLG}},[`${i}-audio`]:{width:268},[`${i}-video`]:{width:268,aspectRatio:"16 / 9",borderRadius:t.borderRadius},[`&${i}-rtl`]:{direction:"rtl"}}}},I=t=>{const{componentCls:e,padding:i,paddingSM:n,colorFillTertiary:l,marginXS:r,colorTextLabel:s,fontSize:a,fontSizeLG:d,borderRadius:c,motionDurationSlow:o,calc:g}=t;return{[`${e}-list`]:{position:"relative",[`${e}-list-content`]:{display:"flex",alignItems:"center",justifyContent:"flex-start",flexDirection:"row",flexWrap:"wrap",gap:r,paddingBlock:n,paddingInline:i,scrollbarWidth:"none","-ms-overflow-style":"none","&::-webkit-scrollbar":{display:"none"},"&:dir(ltr)":{[`&${e}-list-overflow-ping-start ${e}-list-prev-btn`]:{opacity:1,pointerEvents:"auto"},[`&${e}-list-overflow-ping-end ${e}-list-next-btn`]:{opacity:1,pointerEvents:"auto"}},"&:dir(rtl)":{[`&${e}-list-overflow-ping-end ${e}-list-prev-btn`]:{opacity:1,pointerEvents:"auto"},[`&${e}-list-overflow-ping-start ${e}-list-next-btn`]:{opacity:1,pointerEvents:"auto"}}},[`${e}-list-item`]:{display:"flex",position:"relative",[`${e}-list-remove`]:{transition:`opacity ${t.motionDurationMid} ${t.motionEaseOut}`},"&:hover":{[`${e}-list-remove`]:{opacity:1}}},[`${e}-list-motion`]:{transition:`opacity ${o}`,[`${e}-file, ${e}-image, ${e}-video, ${e}-audio`]:{transition:["width","padding"].map(p=>`${p} ${o}`).join(",")},"&-leave-active":{opacity:0,marginInlineEnd:g(r).mul(-1).equal(),[`${e}-file, ${e}-image, ${e}-video, ${e}-audio`]:{width:0,paddingInline:0}}},[`${e}-file`]:{[`${e}-file-content`]:{maxWidth:156}},[`${e}-image`]:{width:68,height:68,borderRadius:c,display:"flex"},[`${e}-list-remove`]:{position:"absolute",insetBlockStart:0,insetInlineEnd:0,transform:"translate(50%, -50%)",fontSize:d,display:"flex",alignItems:"center",justifyContent:"center",color:s,opacity:0,cursor:"pointer",backgroundColor:l},[`${e}-list-small`]:{[`${e}-list-remove`]:{fontSize:a}},[`${e}-list-overflow-scrollX, ${e}-list-overflow-scrollY`]:{"&:before, &:after":{content:'""',position:"absolute",opacity:0,transition:`opacity ${o}`,zIndex:1}},[`${e}-list-overflow-ping-start:before`]:{opacity:1},[`${e}-list-overflow-ping-end:after`]:{opacity:1},[`${e}-list-overflow-scrollX`]:{overflowX:"auto",overflowY:"hidden",flexWrap:"nowrap","&:before, &:after":{insetBlock:0,width:8},"&:before":{insetInlineStart:0,background:"linear-gradient(to right, rgba(0,0,0,0.06), rgba(0,0,0,0));"},"&:after":{insetInlineEnd:0,background:"linear-gradient(to left, rgba(0,0,0,0.06), rgba(0,0,0,0));"},"&:dir(rtl)":{"&:before":{background:"linear-gradient(to left, rgba(0,0,0,0.06), rgba(0,0,0,0));"},"&:after":{background:"linear-gradient(to right, rgba(0,0,0,0.06), rgba(0,0,0,0));"}}},[`${e}-list-overflow-scrollY`]:{overflowX:"hidden",overflowY:"auto",maxHeight:68,boxSizing:"content-box","&:before, &:after":{insetInline:0,height:8},"&:before":{insetBlockStart:0,background:"linear-gradient(to bottom, rgba(0,0,0,0.06), rgba(0,0,0,0));"},"&:after":{insetBlockEnd:0,background:"linear-gradient(to top, rgba(0,0,0,0.06), rgba(0,0,0,0));"}},[`${e}-list-prev-btn,${e}-list-next-btn`]:{position:"absolute",insetBlockStart:"50%",transform:"translateY(-50%)",boxShadow:t.boxShadowTertiary,opacity:0,pointerEvents:"none"},[`${e}-list-prev-btn`]:{left:{_skip_check_:!0,value:t.padding}},[`${e}-list-next-btn`]:{right:{_skip_check_:!0,value:t.padding}}}}},b=()=>({}),C=x.genStyleHooks("FileCard",t=>{const e=y.merge(t,{});return[z(e),I(e)]},b);exports.default=C;exports.prepareComponentToken=b;