@squirrel-cloud/ui-vue 0.0.8 → 0.1.0
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/README.md
CHANGED
|
@@ -72,7 +72,22 @@ npm install @squirrel-cloud/ui-vue
|
|
|
72
72
|
### V0.0.8
|
|
73
73
|
|
|
74
74
|
- 新增 CheckTag 组件
|
|
75
|
+
- Button 组件新增 loading/disabled 属性
|
|
75
76
|
- Input 组件新增 blur/focus 事件
|
|
76
77
|
- Input 组件新增 blur/focus/input/change 回调
|
|
77
|
-
- Button 组件新增 loading/disabled 属性
|
|
78
78
|
- 部分样式修改优化
|
|
79
|
+
|
|
80
|
+
### V0.0.9
|
|
81
|
+
|
|
82
|
+
- CheckTag 组件 checked 改为可选
|
|
83
|
+
|
|
84
|
+
### V0.1.0
|
|
85
|
+
|
|
86
|
+
- 色彩空间改用 oklch
|
|
87
|
+
- 根据新的色彩空间调整并重命名部分颜色变量
|
|
88
|
+
- Button 组件文本按钮禁用状态样式区分
|
|
89
|
+
- Input 组件添加输入框背景色
|
|
90
|
+
- Input 组件禁用及只读状态样式区分
|
|
91
|
+
- Input 组件获取焦点时隐藏内阴影
|
|
92
|
+
- Input 组件修改输入光标颜色
|
|
93
|
+
- CheckTag 组件默认状态样式调整
|
|
@@ -15,6 +15,7 @@ declare const __VLS_component: import('vue').DefineComponent<CheckTagProps, {},
|
|
|
15
15
|
}>, {
|
|
16
16
|
type: import('../..').ComponentTypeExtend;
|
|
17
17
|
size: import('../..').ComponentSize;
|
|
18
|
+
checked: boolean;
|
|
18
19
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLSpanElement>;
|
|
19
20
|
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
20
21
|
export default _default;
|
|
@@ -147,7 +147,7 @@ const U = /* @__PURE__ */ E(F, [["render", P]]), j = ["disabled"], K = /* @__PUR
|
|
|
147
147
|
}), X = /* @__PURE__ */ y({
|
|
148
148
|
__name: "SqCheckTag",
|
|
149
149
|
props: {
|
|
150
|
-
checked: { type: Boolean },
|
|
150
|
+
checked: { type: Boolean, default: !1 },
|
|
151
151
|
type: { default: "primary" },
|
|
152
152
|
round: { type: Boolean },
|
|
153
153
|
size: { default: "md" }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(r,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(r=typeof globalThis<"u"?globalThis:r||self,e(r.SquirrelCloudUIVue={},r.Vue))})(this,(function(r,e){"use strict";const h=(l,t)=>{const a=l.__vccOpts||l;for(const[n,o]of t)a[n]=o;return a},y={},B={class:"sq-icon is-loading","data-icon":"loading"};function k(l,t){return e.openBlock(),e.createElementBlock("span",B,t[0]||(t[0]=[e.createElementVNode("svg",{viewBox:"0 0 48 48",version:"1.1",xmlns:"http://www.w3.org/2000/svg"},[e.createElementVNode("circle",{cx:"24",cy:"24",r:"20"})],-1)]))}const z=h(y,[["render",k]]),g=["disabled"],x=e.defineComponent({__name:"SqButton",props:{type:{},round:{type:Boolean},text:{type:Boolean},icon:{},loading:{type:Boolean},disabled:{type:Boolean},size:{default:"md"}},setup(l){const t=l,a=e.computed(()=>{const s=[];return t.size!=="md"&&s.push(`sq-button--${t.size}`),t.type&&s.push(`is-${t.type}`),t.round&&s.push("is-round"),t.text&&s.push("is-text"),s}),n=e.computed(()=>t.loading?z:t.icon),o=e.computed(()=>t.loading||t.disabled);return(s,c)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(["sq-button",a.value]),disabled:o.value},[e.createVNode(e.unref(f),{size:t.size},{default:e.withCtx(()=>[n.value?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(n.value),{key:0})):e.createCommentVNode("",!0),e.renderSlot(s.$slots,"default")]),_:3},8,["size"])],10,g))}}),S={key:0,class:"sq-input-prefix"},q=["disabled","readonly"],C={key:1,class:"sq-input-suffix"},_=e.defineComponent({__name:"SqInput",props:e.mergeModels({status:{},round:{type:Boolean},showStatusIcon:{type:Boolean},prefixIcon:{},suffixIcon:{},disabled:{type:Boolean},readonly:{type:Boolean},size:{default:"md"}},{value:{type:String,default:""},valueModifiers:{}}),emits:e.mergeModels(["focus","blur","input","change"],["update:value"]),setup(l,{expose:t,emit:a}){const n=e.useSlots(),o=a,s=l,c=e.useModel(l,"value"),u=e.useTemplateRef("inputRef"),m=e.computed(()=>{const i=[];return s.size!=="md"&&i.push(`sq-input--${s.size}`),s.status&&i.push(`is-${s.status}`),s.round&&i.push("is-round"),s.disabled&&i.push("is-disabled"),i}),w=e.computed(()=>n.prefix||s.prefixIcon),I=e.computed(()=>{const i=s.showStatusIcon&&s.status;return n.suffix||i||s.suffixIcon}),N=e.computed(()=>s.suffixIcon);function T(){var i;(i=u.value)==null||i.focus()}function L(){var i;(i=u.value)==null||i.blur()}return t({focus:T,blur:L}),(i,d)=>(e.openBlock(),e.createElementBlock("section",{class:e.normalizeClass(["sq-input",m.value])},[w.value?(e.openBlock(),e.createElementBlock("span",S,[e.renderSlot(i.$slots,"prefix",{},()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(s.prefixIcon)))])])):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":d[0]||(d[0]=p=>c.value=p),class:"sq-input-inner",disabled:s.disabled,readonly:s.readonly,ref_key:"inputRef",ref:u,onFocus:d[1]||(d[1]=p=>o("focus",p)),onBlur:d[2]||(d[2]=p=>o("blur",p)),onInput:d[3]||(d[3]=p=>o("input",p)),onChange:d[4]||(d[4]=p=>o("change",p))},null,40,q),[[e.vModelText,c.value]]),I.value?(e.openBlock(),e.createElementBlock("span",C,[e.renderSlot(i.$slots,"suffix",{},()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(N.value)))])])):e.createCommentVNode("",!0)],2))}}),$=e.defineComponent({__name:"SqTag",props:{type:{},theme:{default:"materialize"},round:{type:Boolean},size:{default:"md"}},setup(l){const t=l,a=e.computed(()=>{const o=[];return t.size!=="md"&&o.push(`sq-tag--${t.size}`),t.theme!=="materialize"&&t.type&&o.push(`is-${t.theme}`),t.type&&o.push(`is-${t.type}`),t.round&&o.push("is-round"),o}),n=e.computed(()=>t.size==="lg"?"md":"sm");return(o,s)=>(e.openBlock(),e.createBlock(e.unref(f),{class:e.normalizeClass(["sq-tag",a.value]),size:n.value},{default:e.withCtx(()=>[e.renderSlot(o.$slots,"default")]),_:3},8,["class","size"]))}}),b=e.defineComponent({__name:"SqCheckTag",props:{checked:{type:Boolean},type:{default:"primary"},round:{type:Boolean},size:{default:"md"}},emits:["change"],setup(l,{emit:t}){const a=t,n=l,o=e.computed(()=>{const c=[];return n.size!=="md"&&c.push(`sq-tag--${n.size}`),n.type&&c.push(`is-${n.type}`),n.round&&c.push("is-round"),n.checked&&c.push("is-checked"),c}),s=e.computed(()=>n.size==="lg"?"md":"sm");return(c,u)=>(e.openBlock(),e.createBlock(e.unref(f),{class:e.normalizeClass(["sq-check-tag",o.value]),size:s.value,onClick:u[0]||(u[0]=m=>a("change",!n.checked))},{default:e.withCtx(()=>[e.renderSlot(c.$slots,"default")]),_:3},8,["class","size"]))}}),f=e.defineComponent({__name:"SqText",props:{rowNum:{default:1},ellipsis:{type:Boolean,default:!1},size:{default:"md"}},setup(l){const t=l,a=e.computed(()=>{const o=[];return t.size!=="md"&&o.push(`s-text--${t.size}`),t.ellipsis&&o.push(t.rowNum>1?"multi-line":"single-line"),o}),n=e.computed(()=>t.ellipsis?`--row-num: ${t.rowNum}`:"");return(o,s)=>(e.openBlock(),e.createElementBlock("span",{class:e.normalizeClass(["sq-text",a.value]),style:e.normalizeStyle(n.value)},[e.renderSlot(o.$slots,"default")],6))}});r.SqButton=x,r.SqCheckTag=b,r.SqInput=_,r.SqTag=$,r.SqText=f,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})}));
|
|
1
|
+
(function(r,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(r=typeof globalThis<"u"?globalThis:r||self,e(r.SquirrelCloudUIVue={},r.Vue))})(this,(function(r,e){"use strict";const h=(l,t)=>{const a=l.__vccOpts||l;for(const[n,o]of t)a[n]=o;return a},y={},B={class:"sq-icon is-loading","data-icon":"loading"};function k(l,t){return e.openBlock(),e.createElementBlock("span",B,t[0]||(t[0]=[e.createElementVNode("svg",{viewBox:"0 0 48 48",version:"1.1",xmlns:"http://www.w3.org/2000/svg"},[e.createElementVNode("circle",{cx:"24",cy:"24",r:"20"})],-1)]))}const z=h(y,[["render",k]]),g=["disabled"],x=e.defineComponent({__name:"SqButton",props:{type:{},round:{type:Boolean},text:{type:Boolean},icon:{},loading:{type:Boolean},disabled:{type:Boolean},size:{default:"md"}},setup(l){const t=l,a=e.computed(()=>{const s=[];return t.size!=="md"&&s.push(`sq-button--${t.size}`),t.type&&s.push(`is-${t.type}`),t.round&&s.push("is-round"),t.text&&s.push("is-text"),s}),n=e.computed(()=>t.loading?z:t.icon),o=e.computed(()=>t.loading||t.disabled);return(s,c)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(["sq-button",a.value]),disabled:o.value},[e.createVNode(e.unref(f),{size:t.size},{default:e.withCtx(()=>[n.value?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(n.value),{key:0})):e.createCommentVNode("",!0),e.renderSlot(s.$slots,"default")]),_:3},8,["size"])],10,g))}}),S={key:0,class:"sq-input-prefix"},q=["disabled","readonly"],C={key:1,class:"sq-input-suffix"},_=e.defineComponent({__name:"SqInput",props:e.mergeModels({status:{},round:{type:Boolean},showStatusIcon:{type:Boolean},prefixIcon:{},suffixIcon:{},disabled:{type:Boolean},readonly:{type:Boolean},size:{default:"md"}},{value:{type:String,default:""},valueModifiers:{}}),emits:e.mergeModels(["focus","blur","input","change"],["update:value"]),setup(l,{expose:t,emit:a}){const n=e.useSlots(),o=a,s=l,c=e.useModel(l,"value"),u=e.useTemplateRef("inputRef"),m=e.computed(()=>{const i=[];return s.size!=="md"&&i.push(`sq-input--${s.size}`),s.status&&i.push(`is-${s.status}`),s.round&&i.push("is-round"),s.disabled&&i.push("is-disabled"),i}),w=e.computed(()=>n.prefix||s.prefixIcon),I=e.computed(()=>{const i=s.showStatusIcon&&s.status;return n.suffix||i||s.suffixIcon}),N=e.computed(()=>s.suffixIcon);function T(){var i;(i=u.value)==null||i.focus()}function L(){var i;(i=u.value)==null||i.blur()}return t({focus:T,blur:L}),(i,d)=>(e.openBlock(),e.createElementBlock("section",{class:e.normalizeClass(["sq-input",m.value])},[w.value?(e.openBlock(),e.createElementBlock("span",S,[e.renderSlot(i.$slots,"prefix",{},()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(s.prefixIcon)))])])):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":d[0]||(d[0]=p=>c.value=p),class:"sq-input-inner",disabled:s.disabled,readonly:s.readonly,ref_key:"inputRef",ref:u,onFocus:d[1]||(d[1]=p=>o("focus",p)),onBlur:d[2]||(d[2]=p=>o("blur",p)),onInput:d[3]||(d[3]=p=>o("input",p)),onChange:d[4]||(d[4]=p=>o("change",p))},null,40,q),[[e.vModelText,c.value]]),I.value?(e.openBlock(),e.createElementBlock("span",C,[e.renderSlot(i.$slots,"suffix",{},()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(N.value)))])])):e.createCommentVNode("",!0)],2))}}),$=e.defineComponent({__name:"SqTag",props:{type:{},theme:{default:"materialize"},round:{type:Boolean},size:{default:"md"}},setup(l){const t=l,a=e.computed(()=>{const o=[];return t.size!=="md"&&o.push(`sq-tag--${t.size}`),t.theme!=="materialize"&&t.type&&o.push(`is-${t.theme}`),t.type&&o.push(`is-${t.type}`),t.round&&o.push("is-round"),o}),n=e.computed(()=>t.size==="lg"?"md":"sm");return(o,s)=>(e.openBlock(),e.createBlock(e.unref(f),{class:e.normalizeClass(["sq-tag",a.value]),size:n.value},{default:e.withCtx(()=>[e.renderSlot(o.$slots,"default")]),_:3},8,["class","size"]))}}),b=e.defineComponent({__name:"SqCheckTag",props:{checked:{type:Boolean,default:!1},type:{default:"primary"},round:{type:Boolean},size:{default:"md"}},emits:["change"],setup(l,{emit:t}){const a=t,n=l,o=e.computed(()=>{const c=[];return n.size!=="md"&&c.push(`sq-tag--${n.size}`),n.type&&c.push(`is-${n.type}`),n.round&&c.push("is-round"),n.checked&&c.push("is-checked"),c}),s=e.computed(()=>n.size==="lg"?"md":"sm");return(c,u)=>(e.openBlock(),e.createBlock(e.unref(f),{class:e.normalizeClass(["sq-check-tag",o.value]),size:s.value,onClick:u[0]||(u[0]=m=>a("change",!n.checked))},{default:e.withCtx(()=>[e.renderSlot(c.$slots,"default")]),_:3},8,["class","size"]))}}),f=e.defineComponent({__name:"SqText",props:{rowNum:{default:1},ellipsis:{type:Boolean,default:!1},size:{default:"md"}},setup(l){const t=l,a=e.computed(()=>{const o=[];return t.size!=="md"&&o.push(`s-text--${t.size}`),t.ellipsis&&o.push(t.rowNum>1?"multi-line":"single-line"),o}),n=e.computed(()=>t.ellipsis?`--row-num: ${t.rowNum}`:"");return(o,s)=>(e.openBlock(),e.createElementBlock("span",{class:e.normalizeClass(["sq-text",a.value]),style:e.normalizeStyle(n.value)},[e.renderSlot(o.$slots,"default")],6))}});r.SqButton=x,r.SqCheckTag=b,r.SqInput=_,r.SqTag=$,r.SqText=f,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})}));
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer theme,component,type,custom;@layer theme{:root{color-scheme:light;--sq-color-light: #fff;--sq-color-dark: #000;--sq-bg-color: #f8fafc;--sq-text-color-regular: #1f2937;--sq-text-color-secondary: #394250;--sq-text-color-placeholder: #6d7580;--sq-border-color: #e3e8ee;--sq-border-color-light: #f2f6fa;--sq-color-primary-50: #fff7ed;--sq-color-primary-100: #ffedd5;--sq-color-primary-300: #fdba74;--sq-color-primary-400: #fb923c;--sq-color-primary-500: #f97316;--sq-color-primary-600: #ea580c;--sq-color-success-50: #f0fdf4;--sq-color-success-100: #dcfce7;--sq-color-success-300: #86efac;--sq-color-success-400: #4ade80;--sq-color-success-500: #22c55e;--sq-color-success-600: #16a34a;--sq-color-info-50: #f1fcff;--sq-color-info-100: #d9f6ff;--sq-color-info-300: #b6eeff;--sq-color-info-400: #86e1ff;--sq-color-info-500: #3ecefe;--sq-color-info-600: #32b1e2;--sq-color-warn-50: #fffbeb;--sq-color-warn-100: #fcf2c5;--sq-color-warn-300: #f8e386;--sq-color-warn-400: #f6cf46;--sq-color-warn-500: #f4ba0b;--sq-color-warn-600: #ef9b00;--sq-color-error-50: #fff1f1;--sq-color-error-100: #ffe9e8;--sq-color-error-300: #ffb2b2;--sq-color-error-400: #ff8584;--sq-color-error-500: #ff5555;--sq-color-error-600: #e83538;--sq-font-family: Microsoft YaHei, Pingfang SC, sans-serif;--sq-font-size-sm: 12px;--sq-font-size-md: 14px;--sq-font-size-lg: 16px;--sq-radius-xs: 4px;--sq-radius-sm: 8px;--sq-radius-md: 12px;--sq-radius-lg: 16px;--sq-radius-full: calc(infinity * 1px);--sq-opacity-80: .8;--sq-opacity-20: .2;--sq-padding-xs: 8px;--sq-padding-sm: 12px;--sq-padding-md: 24px;--sq-padding-lg: 36px;--sq-padding-xl: 48px;--sq-blur-md: 10px;--sq-blur-lg: 50px;--sq-component-size-xs: 24px;--sq-component-size-sm: 28px;--sq-component-size-md: 36px;--sq-component-size-lg: 48px;--sq-transition-base: .3s ease;--sq-shadow-xs-dark: 2px 2px 4px;--sq-shadow-xs-light: -2px -2px 4px;--sq-shadow-sm-dark: 4px 4px 8px;--sq-shadow-sm-light: -4px -4px 8px;--sq-shadow-md-dark: 8px 8px 16px;--sq-shadow-md-light: -8px -8px 16px;--sq-text-shadow: 1px 1px 1px rgb(from var(--sq-color-dark) r g b / var(--sq-opacity-20))}:root.dark{color-scheme:dark}}@layer component{@keyframes loading{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dashoffset:70}50%{stroke-dashoffset:125}to{stroke-dashoffset:70}}.sq-icon{display:inline-flex}.sq-icon>svg{width:1em;height:1em;fill:currentColor}.sq-icon.is-loading>svg{transform-origin:center;animation:loading 1s linear infinite}.sq-icon[data-icon=loading] circle{fill:none;stroke:currentColor;stroke-width:4;stroke-dasharray:130;stroke-linecap:round;animation:dash 2s ease-in-out infinite}}@layer component{.sq-button{--button-shadow-color: var(--sq-border-color);--button-padding: var(--sq-padding-sm);cursor:pointer;height:var(--sq-component-size-md);padding:0 var(--button-padding);color:var(--button-color, var(--sq-text-color-regular));background-color:var(--button-bg, var(--sq-color-light));border:1px solid;border-color:var(--button-border-color, var(--sq-border-color-light));border-radius:var(--sq-radius-sm);-webkit-user-select:none;user-select:none;transition:all var(--sq-transition-base)}.sq-button.sq-button--sm{height:var(--sq-component-size-sm)}.sq-button.sq-button--lg{--button-padding: calc(var(--sq-padding-xs) * 2);height:var(--sq-component-size-lg)}.sq-button:not(.is-text){box-shadow:var(--sq-shadow-sm-dark) var(--button-shadow-color),var(--sq-shadow-sm-light) var(--sq-color-light)}.sq-button.is-round{border-radius:var(--sq-radius-full);padding:0 calc(var(--button-padding) + .4em)}.sq-button:disabled{cursor:not-allowed;color:var(--button-color-disabled, var(--sq-text-color-placeholder));background-color:var(--button-bg-disabled, var(--sq-bg-color));border-color:var( --button-border-color-disabled, var(--sq-border-color-light) )}.sq-button:hover:not(:disabled){color:var(--button-color-hover, var(--sq-color-primary-500));background-color:var(--button-bg-hover, var(--sq-color-light));border-color:var( --button-border-color-hover, var(--sq-border-color-light) )}.sq-button:active:not(:disabled){box-shadow:var(--sq-shadow-xs-dark) var(--button-shadow-color),var(--sq-shadow-xs-light) var(--sq-color-light);border-color:var( --button-border-color-active, var(--sq-border-color-light) )}}@layer type{.sq-button.is-primary{--button-shadow-color: var(--sq-color-primary-100);--button-color: #fff;--button-color-hover: #fff;--button-color-disabled: #fff;--button-border-color: var(--sq-color-primary-400);--button-border-color-hover: var(--sq-color-primary-500);--button-border-color-active: var(--sq-color-primary-500);--button-border-color-disabled: var(--sq-color-primary-100);--button-bg: var(--sq-color-primary-500);--button-bg-hover: var(--sq-color-primary-600);--button-bg-disabled: var(--sq-color-primary-300)}.sq-button.is-success{--button-shadow-color: var(--sq-color-success-100);--button-color: #fff;--button-color-hover: #fff;--button-color-disabled: #fff;--button-border-color: var(--sq-color-success-400);--button-border-color-hover: var(--sq-color-success-500);--button-border-color-active: var(--sq-color-success-500);--button-border-color-disabled: var(--sq-color-success-100);--button-bg: var(--sq-color-success-500);--button-bg-hover: var(--sq-color-success-600);--button-bg-disabled: var(--sq-color-success-300)}.sq-button.is-info{--button-shadow-color: var(--sq-color-info-100);--button-color: #fff;--button-color-hover: #fff;--button-color-disabled: #fff;--button-border-color: var(--sq-color-info-400);--button-border-color-hover: var(--sq-color-info-500);--button-border-color-active: var(--sq-color-info-500);--button-border-color-disabled: var(--sq-color-info-100);--button-bg: var(--sq-color-info-500);--button-bg-hover: var(--sq-color-info-600);--button-bg-disabled: var(--sq-color-info-300)}.sq-button.is-warn{--button-shadow-color: var(--sq-color-warn-100);--button-color: #fff;--button-color-hover: #fff;--button-color-disabled: #fff;--button-border-color: var(--sq-color-warn-400);--button-border-color-hover: var(--sq-color-warn-500);--button-border-color-active: var(--sq-color-warn-500);--button-border-color-disabled: var(--sq-color-warn-100);--button-bg: var(--sq-color-warn-500);--button-bg-hover: var(--sq-color-warn-600);--button-bg-disabled: var(--sq-color-warn-300)}.sq-button.is-error{--button-shadow-color: var(--sq-color-error-100);--button-color: #fff;--button-color-hover: #fff;--button-color-disabled: #fff;--button-border-color: var(--sq-color-error-400);--button-border-color-hover: var(--sq-color-error-500);--button-border-color-active: var(--sq-color-error-500);--button-border-color-disabled: var(--sq-color-error-100);--button-bg: var(--sq-color-error-500);--button-bg-hover: var(--sq-color-error-600);--button-bg-disabled: var(--sq-color-error-300)}.sq-button.is-text{--button-bg: transparent;--button-bg-hover: var(--sq-bg-color);--button-bg-disabled: transparent;--button-color-hover: var(--sq-text-color-regular);--button-shadow-color: var(--sq-border-color);--button-border-color: var(--sq-color-light);--button-border-color-hover: var(--sq-bg-color);--button-border-color-active: var(--sq-border-color-light);--button-border-color-disabled: var(--sq-color-light)}.sq-button.is-text:active:not(:disabled){box-shadow:inset var(--sq-shadow-xs-dark) var(--button-shadow-color),inset var(--sq-shadow-xs-light) var(--sq-color-light)}.sq-button.is-text.is-primary{--button-color: var(--sq-color-primary-500);--button-color-hover: var(--sq-color-primary-500);--button-color-disabled: var(--sq-color-primary-300)}.sq-button.is-text.is-success{--button-color: var(--sq-color-success-500);--button-color-hover: var(--sq-color-success-500);--button-color-disabled: var(--sq-color-success-300)}.sq-button.is-text.is-info{--button-color: var(--sq-color-info-500);--button-color-hover: var(--sq-color-info-500);--button-color-disabled: var(--sq-color-info-300)}.sq-button.is-text.is-warn{--button-color: var(--sq-color-warn-500);--button-color-hover: var(--sq-color-warn-500);--button-color-disabled: var(--sq-color-warn-300)}.sq-button.is-text.is-error{--button-color: var(--sq-color-error-500);--button-color-hover: var(--sq-color-error-500);--button-color-disabled: var(--sq-color-error-300)}}@layer component{.sq-input{--input-shadow-color: var(--sq-border-color);--input-selection-color: var(--sq-color-primary-500);--input-padding: var(--sq-padding-sm);height:var(--sq-component-size-md);width:100%;padding:0;display:flex;align-items:center;font-size:var(--sq-font-size-md);line-height:1.4;border:1px solid;border-color:var(--input-border-color, var(--sq-border-color-light));border-radius:var(--sq-radius-sm);box-sizing:border-box;box-shadow:inset var(--sq-shadow-xs-dark) var(--input-shadow-color),inset var(--sq-shadow-xs-light) var(--sq-color-light);transition:all var(--sq-transition-base)}.sq-input.sq-input--sm{height:var(--sq-component-size-sm);font-size:var(--sq-font-size-sm)}.sq-input.sq-input--lg{--input-padding: calc(var(--sq-padding-xs) * 2);height:var(--sq-component-size-lg);font-size:var(--sq-font-size-lg)}.sq-input::selection{background-color:var(--input-selection-color);color:var(--sq-color-light);text-shadow:var(--sq-text-shadow)}.sq-input.is-round{border-radius:var(--sq-radius-full);padding:0 .4em}.sq-input.is-disabled{cursor:not-allowed;background-color:var(--sq-bg-color);border-color:var( --input-border-color-disabled, var(--sq-border-color-light) )}.sq-input.is-disabled .sq-input-inner{cursor:not-allowed}.sq-input .sq-input-prefix,.sq-input .sq-input-suffix{color:var(--sq-text-color-placeholder);-webkit-user-select:none;user-select:none}.sq-input .sq-input-prefix{margin-left:var(--input-padding)}.sq-input .sq-input-inner{height:100%;width:0;flex:1;padding:0 var(--input-padding);color:var(--sq-text-color-regular);font-size:inherit;background:transparent;border:none;outline:none;line-height:1;font-family:var(--sq-font-family)}.sq-input .sq-input-suffix{margin-right:var(--input-padding)}.sq-input:active:not(.is-disabled),.sq-input:focus-within:not(.is-disabled){--input-shadow-color: var(--sq-color-primary-100);--input-border-color: var(--sq-color-primary-400)}}@layer type{.sq-input.is-success{--input-shadow-color: var(--sq-color-success-100);--input-border-color: var(--sq-color-success-500);--input-border-color-disabled: var(--sq-color-success-300);--input-selection-color: var(--sq-color-success-500)}.sq-input.is-warn{--input-shadow-color: var(--sq-color-warn-100);--input-border-color: var(--sq-color-warn-500);--input-border-color-disabled: var(--sq-color-warn-300);--input-selection-color: var(--sq-color-warn-500)}.sq-input.is-error{--input-shadow-color: var(--sq-color-error-100);--input-border-color: var(--sq-color-error-500);--input-border-color-disabled: var(--sq-color-error-300);--input-selection-color: var(--sq-color-error-500)}}@layer component{.sq-tag{--tag-shadow-color: var(--sq-border-color);--tag-padding: var(--sq-padding-sm);border-radius:var(--sq-radius-xs);height:var(--sq-component-size-sm);padding:0 var(--tag-padding);color:var(--tag-color, var(--sq-text-color-regular))!important;background-color:var(--tag-bg, var(--sq-color-light));border:1px solid;border-color:var(--tag-border-color, var(--sq-border-color-light));box-sizing:border-box;box-shadow:inset var(--sq-shadow-xs-dark) var(--tag-shadow-color),inset var(--sq-shadow-xs-light) var(--sq-color-light);-webkit-user-select:none;user-select:none}.sq-tag.sq-tag--sm{--tag-padding: var(--sq-padding-xs);height:var(--sq-component-size-xs)}.sq-tag.sq-tag--lg{height:var(--sq-component-size-md)}.sq-tag.is-round{border-radius:var(--sq-radius-full);padding-inline:calc(var(--sq-padding-sm) + .4em)}}@layer type{.sq-tag.is-primary,.sq-tag.is-success,.sq-tag.is-info,.sq-tag.is-warn,.sq-tag.is-error{box-shadow:none}.sq-tag.is-primary{--tag-color: var(--sq-color-primary-500);--tag-border-color: var(--sq-color-primary-400)}.sq-tag.is-success{--tag-color: var(--sq-color-success-500);--tag-border-color: var(--sq-color-success-400)}.sq-tag.is-info{--tag-color: var(--sq-color-info-500);--tag-border-color: var(--sq-color-info-400)}.sq-tag.is-warn{--tag-color: var(--sq-color-warn-500);--tag-border-color: var(--sq-color-warn-400)}.sq-tag.is-error{--tag-color: var(--sq-color-error-500);--tag-border-color: var(--sq-color-error-400)}.sq-tag.is-solid{--tag-color: #fff}.sq-tag.is-solid.is-primary{--tag-bg: var(--sq-color-primary-500);--tag-border-color: var(--sq-color-primary-400)}.sq-tag.is-solid.is-success{--tag-bg: var(--sq-color-success-500);--tag-border-color: var(--sq-color-success-400)}.sq-tag.is-solid.is-info{--tag-bg: var(--sq-color-info-500);--tag-border-color: var(--sq-color-info-400)}.sq-tag.is-solid.is-warn{--tag-bg: var(--sq-color-warn-500);--tag-border-color: var(--sq-color-warn-400)}.sq-tag.is-solid.is-error{--tag-bg: var(--sq-color-error-500);--tag-border-color: var(--sq-color-error-400)}.sq-tag.is-tint.is-primary{--tag-color: var(--sq-color-primary-500);--tag-bg: var(--sq-color-primary-50);--tag-border-color: var(--sq-color-primary-50)}.sq-tag.is-tint.is-success{--tag-color: var(--sq-color-success-500);--tag-bg: var(--sq-color-success-50);--tag-border-color: var(--sq-color-success-50)}.sq-tag.is-tint.is-info{--tag-color: var(--sq-color-info-500);--tag-bg: var(--sq-color-info-50);--tag-border-color: var(--sq-color-info-50)}.sq-tag.is-tint.is-warn{--tag-color: var(--sq-color-warn-500);--tag-bg: var(--sq-color-warn-50);--tag-border-color: var(--sq-color-warn-50)}.sq-tag.is-tint.is-error{--tag-color: var(--sq-color-error-500);--tag-bg: var(--sq-color-error-50);--tag-border-color: var(--sq-color-error-50)}}@layer component{.sq-check-tag{--tag-padding: var(--sq-padding-sm);border-radius:var(--sq-radius-xs);height:var(--sq-component-size-sm);padding:0 var(--tag-padding);color:var(--tag-color)!important;background-color:var(--tag-bg);box-sizing:border-box;cursor:pointer;-webkit-user-select:none;user-select:none;transition:all var(--sq-transition-base)}.sq-check-tag.sq-tag--sm{--tag-padding: var(--sq-padding-xs);height:var(--sq-component-size-xs)}.sq-check-tag.sq-tag--lg{height:var(--sq-component-size-md)}.sq-check-tag.is-round{border-radius:var(--sq-radius-full);padding-inline:calc(var(--sq-padding-sm) + .4em)}.sq-check-tag:hover{background-color:var(--tag-bg-hover)}.sq-check-tag.is-checked{color:#fff!important;background-color:var(--tag-bg-checked)}.sq-check-tag.is-checked:hover{background-color:var(--tag-bg-hover-checked)}}@layer type{.sq-check-tag.is-primary{--tag-color: var(--sq-color-primary-500);--tag-bg: var(--sq-color-primary-50);--tag-bg-hover: var(--sq-color-primary-100);--tag-bg-checked: var(--sq-color-primary-500);--tag-bg-hover-checked: var(--sq-color-primary-600)}.sq-check-tag.is-success{--tag-color: var(--sq-color-success-500);--tag-bg: var(--sq-color-success-50);--tag-bg-hover: var(--sq-color-success-100);--tag-bg-checked: var(--sq-color-success-500);--tag-bg-hover-checked: var(--sq-color-success-600)}.sq-check-tag.is-info{--tag-color: var(--sq-color-info-500);--tag-bg: var(--sq-color-info-50);--tag-bg-hover: var(--sq-color-info-100);--tag-bg-checked: var(--sq-color-info-500);--tag-bg-hover-checked: var(--sq-color-info-600)}.sq-check-tag.is-warn{--tag-color: var(--sq-color-warn-500);--tag-bg: var(--sq-color-warn-50);--tag-bg-hover: var(--sq-color-warn-100);--tag-bg-checked: var(--sq-color-warn-500);--tag-bg-hover-checked: var(--sq-color-warn-600)}.sq-check-tag.is-error{--tag-color: var(--sq-color-error-500);--tag-bg: var(--sq-color-error-50);--tag-bg-hover: var(--sq-color-error-100);--tag-bg-checked: var(--sq-color-error-500);--tag-bg-hover-checked: var(--sq-color-error-600)}}@layer component{.sq-text{color:currentColor;display:flex;flex-grow:0;align-items:center;column-gap:.5em;font-family:var(--sq-font-family);font-size:var(--sq-font-size-md);line-height:1.4}.sq-text::selection{background-color:var(--sq-color-primary-500);color:var(--sq-color-light);text-shadow:var(--sq-text-shadow)}.sq-text.sq-text--sm{font-size:var(--sq-font-size-sm)}.sq-text.sq-text--lg{font-size:var(--sq-font-size-lg)}.sq-text.multi-line,.sq-text.single-line{display:block;overflow:hidden;text-overflow:ellipsis}.sq-text.single-line{white-space:nowrap}.sq-text.multi-line{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--row-num);line-clamp:var(--row-num)}}
|
|
1
|
+
@layer theme,component,type,custom;@layer theme{:root{color-scheme:light;--sq-bg-color: oklch(.98 .0034 247.86);--sq-bg-color-dark: oklch(from var(--sq-bg-color) .96 c h);--sq-component-bg-color: #fff;--sq-text-color: oklch(.27 .03 257);--sq-text-color-secondary: oklch(from var(--sq-text-color) .45 c h);--sq-text-color-placeholder: oklch(from var(--sq-text-color) .65 c h);--sq-border-color: oklch(.94 0 253);--sq-border-color-light: oklch(from var(--sq-border-color) .96 c h);--sq-border-color-lighter: oklch(from var(--sq-border-color) .98 c h);--sq-color-primary: oklch(.75 .18 48);--sq-color-primary-light-5: oklch(from var(--sq-color-primary) l c h / .08);--sq-color-primary-light-4: oklch(from var(--sq-color-primary) l c h / .2);--sq-color-primary-light-3: oklch(from var(--sq-color-primary) l c h / .4);--sq-color-primary-light-2: oklch(from var(--sq-color-primary) l c h / .6);--sq-color-primary-light-1: oklch(from var(--sq-color-primary) l c h / .8);--sq-color-primary-dark-1: oklch(from var(--sq-color-primary) .65 c h);--sq-color-success: oklch(.75 .22 151);--sq-color-success-light-5: oklch(from var(--sq-color-success) l c h / .08);--sq-color-success-light-4: oklch(from var(--sq-color-success) l c h / .2);--sq-color-success-light-3: oklch(from var(--sq-color-success) l c h / .4);--sq-color-success-light-2: oklch(from var(--sq-color-success) l c h / .6);--sq-color-success-light-1: oklch(from var(--sq-color-success) l c h / .8);--sq-color-success-dark-1: oklch(from var(--sq-color-success) .65 c h);--sq-color-info: oklch(.75 .14 230);--sq-color-info-light-5: oklch(from var(--sq-color-info) l c h / .08);--sq-color-info-light-4: oklch(from var(--sq-color-info) l c h / .2);--sq-color-info-light-3: oklch(from var(--sq-color-info) l c h / .4);--sq-color-info-light-2: oklch(from var(--sq-color-info) l c h / .6);--sq-color-info-light-1: oklch(from var(--sq-color-info) l c h / .8);--sq-color-info-dark-1: oklch(from var(--sq-color-info) .65 c h);--sq-color-warn: oklch(.75 .14 76);--sq-color-warn-light-5: oklch(from var(--sq-color-warn) l c h / .08);--sq-color-warn-light-4: oklch(from var(--sq-color-warn) l c h / .2);--sq-color-warn-light-3: oklch(from var(--sq-color-warn) l c h / .4);--sq-color-warn-light-2: oklch(from var(--sq-color-warn) l c h / .6);--sq-color-warn-light-1: oklch(from var(--sq-color-warn) l c h / .8);--sq-color-warn-dark-1: oklch(from var(--sq-color-warn) .65 c h);--sq-color-error: oklch(.75 .25 29);--sq-color-error-light-5: oklch(from var(--sq-color-error) l c h / .08);--sq-color-error-light-4: oklch(from var(--sq-color-error) l c h / .2);--sq-color-error-light-3: oklch(from var(--sq-color-error) l c h / .4);--sq-color-error-light-2: oklch(from var(--sq-color-error) l c h / .6);--sq-color-error-light-1: oklch(from var(--sq-color-error) l c h / .8);--sq-color-error-dark-1: oklch(from var(--sq-color-error) .65 c h);--sq-font-family: Microsoft YaHei, Pingfang SC, sans-serif;--sq-font-size-sm: 12px;--sq-font-size-md: 14px;--sq-font-size-lg: 16px;--sq-radius-xs: 4px;--sq-radius-sm: 8px;--sq-radius-md: 12px;--sq-radius-lg: 16px;--sq-radius-full: calc(infinity * 1px);--sq-opacity-80: .8;--sq-opacity-20: .2;--sq-padding-xs: 8px;--sq-padding-sm: 12px;--sq-padding-md: 24px;--sq-padding-lg: 36px;--sq-padding-xl: 48px;--sq-blur-md: 10px;--sq-blur-lg: 50px;--sq-component-size-xs: 24px;--sq-component-size-sm: 28px;--sq-component-size-md: 36px;--sq-component-size-lg: 48px;--sq-transition-base: .3s ease;--sq-shadow-xs-dark: 2px 2px 4px;--sq-shadow-xs-light: -2px -2px 4px;--sq-shadow-sm-dark: 4px 4px 8px;--sq-shadow-sm-light: -4px -4px 8px;--sq-shadow-md-dark: 8px 8px 16px;--sq-shadow-md-light: -8px -8px 16px;--sq-text-shadow: 1px 1px 1px rgb(0 0 0 / var(--sq-opacity-20))}:root.dark{color-scheme:dark}}@layer component{@keyframes loading{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dashoffset:70}50%{stroke-dashoffset:125}to{stroke-dashoffset:70}}.sq-icon{display:inline-flex}.sq-icon>svg{width:1em;height:1em;fill:currentColor}.sq-icon.is-loading>svg{transform-origin:center;animation:loading 1s linear infinite}.sq-icon[data-icon=loading] circle{fill:none;stroke:currentColor;stroke-width:4;stroke-dasharray:130;stroke-linecap:round;animation:dash 2s ease-in-out infinite}}@layer component{.sq-button{--button-color: var(--sq-text-color);--button-color-hover: var(--sq-text-color-secondary);--button-color-disabled: var(--sq-text-color-placeholder);--button-bg-color: var(--sq-component-bg-color);--button-bg-color-hover: var(--sq-component-bg-color);--button-bg-color-disabled: var(--sq-bg-color);--button-border-color: var(--sq-border-color-light);--button-shadow-color: var(--sq-border-color);--button-padding: var(--sq-padding-sm);cursor:pointer;height:var(--sq-component-size-md);padding:0 var(--button-padding);color:var(--button-color);background-color:var(--button-bg-color);border:1px solid;border-color:var(--button-border-color);border-radius:var(--sq-radius-sm);-webkit-user-select:none;user-select:none;transition:all var(--sq-transition-base)}.sq-button.sq-button--sm{height:var(--sq-component-size-sm)}.sq-button.sq-button--lg{--button-padding: calc(var(--sq-padding-xs) * 2);height:var(--sq-component-size-lg)}.sq-button:not(.is-text){box-shadow:var(--sq-shadow-sm-dark) var(--button-shadow-color),var(--sq-shadow-sm-light) var(--sq-component-bg-color)}.sq-button.is-round{border-radius:var(--sq-radius-full);padding:0 calc(var(--button-padding) + .4em)}.sq-button:disabled{cursor:not-allowed;color:var(--button-color-disabled);background-color:var(--button-bg-color-disabled)}.sq-button:hover:not(:disabled){color:var(--button-color-hover);background-color:var(--button-bg-color-hover)}.sq-button:active:not(:disabled){box-shadow:var(--sq-shadow-xs-dark) var(--button-shadow-color),var(--sq-shadow-xs-light) var(--sq-component-bg-color)}}@layer type{.sq-button.is-primary{--button-color: #fff;--button-color-hover: #fff;--button-color-disabled: #fff;--button-bg-color: var(--sq-color-primary);--button-bg-color-hover: var(--sq-color-primary-dark-1);--button-bg-color-disabled: var(--sq-color-primary-light-3);--button-border-color: transparent;--button-shadow-color: var(--sq-color-primary-light-4)}.sq-button.is-success{--button-color: #fff;--button-color-hover: #fff;--button-color-disabled: #fff;--button-bg-color: var(--sq-color-success);--button-bg-color-hover: var(--sq-color-success-dark-1);--button-bg-color-disabled: var(--sq-color-success-light-3);--button-border-color: transparent;--button-shadow-color: var(--sq-color-success-light-4)}.sq-button.is-info{--button-color: #fff;--button-color-hover: #fff;--button-color-disabled: #fff;--button-bg-color: var(--sq-color-info);--button-bg-color-hover: var(--sq-color-info-dark-1);--button-bg-color-disabled: var(--sq-color-info-light-3);--button-border-color: transparent;--button-shadow-color: var(--sq-color-info-light-4)}.sq-button.is-warn{--button-color: #fff;--button-color-hover: #fff;--button-color-disabled: #fff;--button-bg-color: var(--sq-color-warn);--button-bg-color-hover: var(--sq-color-warn-dark-1);--button-bg-color-disabled: var(--sq-color-warn-light-3);--button-border-color: transparent;--button-shadow-color: var(--sq-color-warn-light-4)}.sq-button.is-error{--button-color: #fff;--button-color-hover: #fff;--button-color-disabled: #fff;--button-bg-color: var(--sq-color-error);--button-bg-color-hover: var(--sq-color-error-dark-1);--button-bg-color-disabled: var(--sq-color-error-light-3);--button-border-color: transparent;--button-shadow-color: var(--sq-color-error-light-4)}.sq-button.is-text{--button-color: var(--sq-text-color);--button-color-hover: var(--sq-text-color);--button-color-disabled: var(--sq-text-color-placeholder);--button-bg-color: transparent;--button-bg-color-hover: var(--sq-bg-color);--button-bg-color-disabled: var(--sq-bg-color);--button-border-color: transparent;--button-shadow-color: var(--sq-border-color)}.sq-button.is-text:active:not(:disabled){box-shadow:inset var(--sq-shadow-xs-dark) var(--button-shadow-color),inset var(--sq-shadow-xs-light) var(--sq-bg-color)}.sq-button.is-text.is-primary{--button-color: var(--sq-color-primary);--button-color-hover: var(--sq-color-primary-dark-1);--button-color-disabled: var(--sq-color-primary-light-3)}.sq-button.is-text.is-success{--button-color: var(--sq-color-success);--button-color-hover: var(--sq-color-success-dark-1);--button-color-disabled: var(--sq-color-success-light-3)}.sq-button.is-text.is-info{--button-color: var(--sq-color-info);--button-color-hover: var(--sq-color-info-dark-1);--button-color-disabled: var(--sq-color-info-light-3)}.sq-button.is-text.is-warn{--button-color: var(--sq-color-warn);--button-color-hover: var(--sq-color-warn-dark-1);--button-color-disabled: var(--sq-color-warn-light-3)}.sq-button.is-text.is-error{--button-color: var(--sq-color-error);--button-color-hover: var(--sq-color-error-dark-1);--button-color-disabled: var(--sq-color-error-light-3)}}@layer component{.sq-input{--input-bg-color: var(--sq-component-bg-color);--input-bg-color-disabled: var(--sq-bg-color);--input-border-color: var(--sq-border-color-light);--input-border-color-active: var(--sq-color-primary);--input-border-color-disabled: var(--sq-border-color-light);--input-shadow-color: var(--sq-border-color);--input-selection-color: var(--sq-color-primary);--input-padding: var(--sq-padding-sm);height:var(--sq-component-size-md);width:100%;padding:0;display:flex;align-items:center;font-size:var(--sq-font-size-md);line-height:1.4;background-color:var(--input-bg-color);border:1px solid;border-color:var(--input-border-color);border-radius:var(--sq-radius-sm);box-sizing:border-box;box-shadow:inset var(--sq-shadow-xs-dark) var(--input-shadow-color),inset var(--sq-shadow-xs-light) var(--sq-component-bg-color);transition:all var(--sq-transition-base)}.sq-input.sq-input--sm{height:var(--sq-component-size-sm);font-size:var(--sq-font-size-sm)}.sq-input.sq-input--lg{--input-padding: calc(var(--sq-padding-xs) * 2);height:var(--sq-component-size-lg);font-size:var(--sq-font-size-lg)}.sq-input::selection{background-color:var(--input-selection-color);color:#fff;text-shadow:var(--sq-text-shadow)}.sq-input.is-round{border-radius:var(--sq-radius-full);padding:0 .4em}.sq-input .sq-input-prefix,.sq-input .sq-input-suffix{color:var(--sq-text-color-placeholder);-webkit-user-select:none;user-select:none}.sq-input .sq-input-prefix{margin-left:var(--input-padding)}.sq-input .sq-input-inner{height:100%;width:0;flex:1;padding:0 var(--input-padding);caret-color:var(--input-selection-color);color:var(--sq-text-color);font-size:inherit;background:transparent;border:none;outline:none;line-height:1;font-family:var(--sq-font-family);transition:color var(--sq-transition-base)}.sq-input .sq-input-inner:read-only{color:var(--sq-text-color-placeholder)}.sq-input .sq-input-suffix{margin-right:var(--input-padding)}.sq-input.is-disabled{cursor:not-allowed;border-color:var(--input-border-color-disabled);background-color:var(--input-bg-color-disabled);pointer-events:none}.sq-input.is-disabled .sq-input-inner{cursor:not-allowed;color:var(--sq-text-color-placeholder)}.sq-input:active:not(.is-disabled),.sq-input:focus-within:not(.is-disabled){--input-border-color: var(--input-border-color-active);box-shadow:none}}@layer type{.sq-input.is-success{--input-border-color: var(--sq-color-success);--input-border-color-active: var(--sq-color-success);--input-border-color-disabled: var(--sq-color-success-light-3);--input-shadow-color: var(--sq-color-success-light-4);--input-selection-color: var(--sq-color-success)}.sq-input.is-warn{--input-border-color: var(--sq-color-warn);--input-border-color-active: var(--sq-color-warn);--input-border-color-disabled: var(--sq-color-warn-light-3);--input-shadow-color: var(--sq-color-warn-light-4);--input-selection-color: var(--sq-color-warn)}.sq-input.is-error{--input-border-color: var(--sq-color-error);--input-border-color-active: var(--sq-color-error);--input-border-color-disabled: var(--sq-color-error-light-3);--input-shadow-color: var(--sq-color-error-light-4);--input-selection-color: var(--sq-color-error)}}@layer component{.sq-tag{--tag-color: var(--sq-text-color);--tag-bg-color: var(--sq-component-bg-color);--tag-border-color: var(--sq-border-color-light);--tag-shadow-color: var(--sq-border-color);--tag-padding: var(--sq-padding-sm);border-radius:var(--sq-radius-xs);height:var(--sq-component-size-sm);padding:0 var(--tag-padding);color:var(--tag-color)!important;background-color:var(--tag-bg-color);border:1px solid var(--tag-border-color);box-sizing:border-box;box-shadow:inset var(--sq-shadow-xs-dark) var(--tag-shadow-color),inset var(--sq-shadow-xs-light) var(--sq-component-bg-color);-webkit-user-select:none;user-select:none}.sq-tag.sq-tag--sm{--tag-padding: var(--sq-padding-xs);height:var(--sq-component-size-xs)}.sq-tag.sq-tag--lg{height:var(--sq-component-size-md)}.sq-tag.is-round{border-radius:var(--sq-radius-full);padding-inline:calc(var(--sq-padding-sm) + .4em)}}@layer type{.sq-tag.is-primary,.sq-tag.is-success,.sq-tag.is-info,.sq-tag.is-warn,.sq-tag.is-error{--tag-bg-color: transparent;box-shadow:none}.sq-tag.is-primary{--tag-color: var(--sq-color-primary);--tag-border-color: var(--sq-color-primary-light-1)}.sq-tag.is-success{--tag-color: var(--sq-color-success);--tag-border-color: var(--sq-color-success-light-1)}.sq-tag.is-info{--tag-color: var(--sq-color-info);--tag-border-color: var(--sq-color-info-light-1)}.sq-tag.is-warn{--tag-color: var(--sq-color-warn);--tag-border-color: var(--sq-color-warn-light-1)}.sq-tag.is-error{--tag-color: var(--sq-color-error);--tag-border-color: var(--sq-color-error-light-1)}.sq-tag.is-solid{--tag-color: #fff;--tag-border-color: transparent}.sq-tag.is-solid.is-primary{--tag-bg-color: var(--sq-color-primary)}.sq-tag.is-solid.is-success{--tag-bg-color: var(--sq-color-success)}.sq-tag.is-solid.is-info{--tag-bg-color: var(--sq-color-info)}.sq-tag.is-solid.is-warn{--tag-bg-color: var(--sq-color-warn)}.sq-tag.is-solid.is-error{--tag-bg-color: var(--sq-color-error)}.sq-tag.is-tint{--tag-border-color: transparent}.sq-tag.is-tint.is-primary{--tag-color: var(--sq-color-primary);--tag-bg-color: var(--sq-color-primary-light-5)}.sq-tag.is-tint.is-success{--tag-color: var(--sq-color-success);--tag-bg-color: var(--sq-color-success-light-5)}.sq-tag.is-tint.is-info{--tag-color: var(--sq-color-info);--tag-bg-color: var(--sq-color-info-light-5)}.sq-tag.is-tint.is-warn{--tag-color: var(--sq-color-warn);--tag-bg-color: var(--sq-color-warn-light-5)}.sq-tag.is-tint.is-error{--tag-color: var(--sq-color-error);--tag-bg-color: var(--sq-color-error-light-5)}}@layer component{.sq-check-tag{--tag-color: var(--sq-color-primary);--tag-color-hover: var(--sq-color-primary-dark-1);--tag-bg-color-checked: var(--sq-color-primary);--tag-bg-color-checked-hover: var(--sq-color-primary-dark-1);--tag-border-color: var(--sq-color-primary-light-1);--tag-border-color-hover: var(--sq-color-primary);--tag-padding: var(--sq-padding-sm);border-radius:var(--sq-radius-xs);height:var(--sq-component-size-sm);padding:0 var(--tag-padding);color:var(--tag-color)!important;background-color:transparent;border:1px solid var(--tag-border-color);box-sizing:border-box;cursor:pointer;-webkit-user-select:none;user-select:none;transition:all var(--sq-transition-base)}.sq-check-tag.sq-tag--sm{--tag-padding: var(--sq-padding-xs);height:var(--sq-component-size-xs)}.sq-check-tag.sq-tag--lg{height:var(--sq-component-size-md)}.sq-check-tag.is-round{border-radius:var(--sq-radius-full);padding-inline:calc(var(--sq-padding-sm) + .4em)}.sq-check-tag:hover{color:var(--tag-color-hover)!important;background-color:var(--tag-bg-color-hover);border-color:var(--tag-border-color-hover)}.sq-check-tag.is-checked{color:#fff!important;background-color:var(--tag-bg-color-checked);border-color:transparent}.sq-check-tag.is-checked:hover{background-color:var(--tag-bg-color-checked-hover)}}@layer type{.sq-check-tag.is-success{--tag-color: var(--sq-color-success);--tag-color-hover: var(--sq-color-success-dark-1);--tag-bg-color-checked: var(--sq-color-success);--tag-bg-color-checked-hover: var(--sq-color-success-dark-1);--tag-border-color: var(--sq-color-success-light-1);--tag-border-color-hover: var(--sq-color-success)}.sq-check-tag.is-info{--tag-color: var(--sq-color-info);--tag-color-hover: var(--sq-color-info-dark-1);--tag-bg-color-checked: var(--sq-color-info);--tag-bg-color-checked-hover: var(--sq-color-info-dark-1);--tag-border-color: var(--sq-color-info-light-1);--tag-border-color-hover: var(--sq-color-info)}.sq-check-tag.is-warn{--tag-color: var(--sq-color-warn);--tag-color-hover: var(--sq-color-warn-dark-1);--tag-bg-color-checked: var(--sq-color-warn);--tag-bg-color-checked-hover: var(--sq-color-warn-dark-1);--tag-border-color: var(--sq-color-warn-light-1);--tag-border-color-hover: var(--sq-color-warn)}.sq-check-tag.is-error{--tag-color: var(--sq-color-error);--tag-color-hover: var(--sq-color-error-dark-1);--tag-bg-color-checked: var(--sq-color-error);--tag-bg-color-checked-hover: var(--sq-color-error-dark-1);--tag-border-color: var(--sq-color-error-light-1);--tag-border-color-hover: var(--sq-color-error)}}@layer component{.sq-text{color:currentColor;display:flex;flex-grow:0;align-items:center;column-gap:.5em;font-family:var(--sq-font-family);font-size:var(--sq-font-size-md);line-height:1.4}.sq-text::selection{background-color:var(--sq-color-primary);color:#fff;text-shadow:var(--sq-text-shadow)}.sq-text.sq-text--sm{font-size:var(--sq-font-size-sm)}.sq-text.sq-text--lg{font-size:var(--sq-font-size-lg)}.sq-text.multi-line,.sq-text.single-line{display:block;overflow:hidden;text-overflow:ellipsis}.sq-text.single-line{white-space:nowrap}.sq-text.multi-line{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--row-num);line-clamp:var(--row-num)}}
|