@zjpcy/simple-design 1.5.1 → 1.5.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.js +1 -1
- package/dist/es/Label/styles.js +1 -1
- package/package.json +1 -1
package/dist/es/Label/styles.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{__makeTemplateObject as n}from"../node_modules/tslib/tslib.es6.js";import a from"styled-components";var r,e=a.label(r||(r=n(["\n /* 基础样式 */\n background: linear-gradient(135deg, #fafafa 0%, #f0f0f0 100%);\n padding: 10px 16px;\n padding-right: var(--label-padding-right, 16px);\n padding-left: 16px;\n border-radius: 8px;\n position: relative;\n display: inline-flex;\n align-items: center;\n font-weight: 600;\n font-size: 14px;\n color: #262626;\n letter-spacing: 0.3px;\n \n /* 阴影效果 */\n box-shadow: \n 0 2px 8px rgba(0, 0, 0, 0.06),\n 0 1px 2px rgba(0, 0, 0, 0.04);\n \n /* 平滑过渡 */\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n \n /* 悬停效果 */\n &:hover {\n
|
|
1
|
+
import{__makeTemplateObject as n}from"../node_modules/tslib/tslib.es6.js";import a from"styled-components";var r,e=a.label(r||(r=n(["\n /* 基础样式 */\n background: linear-gradient(135deg, #fafafa 0%, #f0f0f0 100%);\n padding: 10px 16px;\n padding-right: var(--label-padding-right, 16px);\n padding-left: 16px;\n border-radius: 8px;\n position: relative;\n display: inline-flex;\n align-items: center;\n font-weight: 600;\n font-size: 14px;\n color: #262626;\n letter-spacing: 0.3px;\n \n /* 阴影效果 */\n box-shadow: \n 0 2px 8px rgba(0, 0, 0, 0.06),\n 0 1px 2px rgba(0, 0, 0, 0.04);\n \n /* 平滑过渡 */\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n \n // /* 悬停效果 */\n // &:hover {\n // background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%);\n // box-shadow: \n // 0 4px 16px rgba(0, 0, 0, 0.1),\n // 0 2px 4px rgba(0, 0, 0, 0.06);\n // // transform: translateY(-1px);\n // }\n \n /* 指示器样式 - 渐变条 */\n &::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 0;\n transform: translateY(-50%);\n width: var(--label-indicator-width, 4px);\n height: var(--label-indicator-height, 70%);\n background: linear-gradient(\n 180deg,\n var(--label-indicator-color, #1890ff) 0%,\n rgba(24, 144, 255, 0.6) 100%\n );\n border-radius: 0 4px 4px 0;\n box-shadow: 2px 0 8px rgba(24, 144, 255, 0.3);\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n }\n \n /* 悬停时指示器效果 */\n // &:hover::before {\n // width: calc(var(--label-indicator-width, 4px) + 1px);\n // box-shadow: 3px 0 12px rgba(24, 144, 255, 0.4);\n // filter: brightness(1.1);\n // }\n \n /* 光晕装饰 */\n // &::after {\n // content: '';\n // position: absolute;\n // top: 0;\n // right: 0;\n // width: 60px;\n // height: 100%;\n // background: linear-gradient(\n // 90deg,\n // transparent 0%,\n // rgba(255, 255, 255, 0.4) 50%,\n // transparent 100%\n // );\n // border-radius: 0 8px 8px 0;\n // pointer-events: none;\n // opacity: 0;\n // transition: opacity 0.3s ease;\n // }\n \n &:hover::after {\n opacity: 1;\n }\n"],["\n /* 基础样式 */\n background: linear-gradient(135deg, #fafafa 0%, #f0f0f0 100%);\n padding: 10px 16px;\n padding-right: var(--label-padding-right, 16px);\n padding-left: 16px;\n border-radius: 8px;\n position: relative;\n display: inline-flex;\n align-items: center;\n font-weight: 600;\n font-size: 14px;\n color: #262626;\n letter-spacing: 0.3px;\n \n /* 阴影效果 */\n box-shadow: \n 0 2px 8px rgba(0, 0, 0, 0.06),\n 0 1px 2px rgba(0, 0, 0, 0.04);\n \n /* 平滑过渡 */\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n \n // /* 悬停效果 */\n // &:hover {\n // background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%);\n // box-shadow: \n // 0 4px 16px rgba(0, 0, 0, 0.1),\n // 0 2px 4px rgba(0, 0, 0, 0.06);\n // // transform: translateY(-1px);\n // }\n \n /* 指示器样式 - 渐变条 */\n &::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 0;\n transform: translateY(-50%);\n width: var(--label-indicator-width, 4px);\n height: var(--label-indicator-height, 70%);\n background: linear-gradient(\n 180deg,\n var(--label-indicator-color, #1890ff) 0%,\n rgba(24, 144, 255, 0.6) 100%\n );\n border-radius: 0 4px 4px 0;\n box-shadow: 2px 0 8px rgba(24, 144, 255, 0.3);\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n }\n \n /* 悬停时指示器效果 */\n // &:hover::before {\n // width: calc(var(--label-indicator-width, 4px) + 1px);\n // box-shadow: 3px 0 12px rgba(24, 144, 255, 0.4);\n // filter: brightness(1.1);\n // }\n \n /* 光晕装饰 */\n // &::after {\n // content: '';\n // position: absolute;\n // top: 0;\n // right: 0;\n // width: 60px;\n // height: 100%;\n // background: linear-gradient(\n // 90deg,\n // transparent 0%,\n // rgba(255, 255, 255, 0.4) 50%,\n // transparent 100%\n // );\n // border-radius: 0 8px 8px 0;\n // pointer-events: none;\n // opacity: 0;\n // transition: opacity 0.3s ease;\n // }\n \n &:hover::after {\n opacity: 1;\n }\n"])));export{e as LabelWrapper};
|