hongluan-ui
Version:
Hongluan Component Library for Vue 3
1 lines • 13.6 kB
CSS
:root{--main-color:#36A4FF;--rgb-main-color:54,164,255;--shadow-color:62,78,106;--primary:#36A4FF;--primary-bg:#36A4FF;--primary-hover:#5eb6ff;--primary-active:#1d99ff;--primary-light:#ebf6ff;--success:#4CC09E;--success-bg:#4CC09E;--success-hover:#70cdb1;--success-active:#40b694;--success-light:#edf9f5;--danger:#FF4D4F;--danger-bg:#FF4D4F;--danger-hover:#ff7172;--danger-active:#ff3235;--danger-light:#ffeded;--warning:#FA8B16;--warning-bg:#FA8B16;--warning-hover:#fba245;--warning-active:#f58005;--warning-light:#fff3e8;--info:#4a72e5;--info-bg:#4a72e5;--info-hover:#6e8eea;--info-active:#3561e2;--info-light:#edf1fc;--rgb-primary:54,164,255;--rgb-success:76,192,158;--rgb-danger:255,77,79;--rgb-warning:250,139,22;--rgb-info:74,114,229;--rgb-bg-body:255,255,255;--rgb-bg-content:255,255,255;--rgb-bg-light:246,249,251;--rgb-bg-popup:255,255,255;--rgb-bg-element:255,255,255;--rgb-bg-hover:249,250,254;--rgb-bg-active:54,164,255;--rgb-bg-header:249,250,254;--rgb-bg-backdrop:0,0,0;--text-regular:#4B4B4B;--text-secondary:#8A8A8A;--text-light:#BDBDBD;--text-lightest:#CACFD6;--text-title:#202020;--text-link:var(--main-color);--text-hover:var(--main-color);--text-active:var(--main-color);--text-inverse:#FFFFFF;--bg-body:#ffffff;--bg-content:#FFFFFF;--bg-light:#F6F9FB;--bg-popup:#FFFFFF;--bg-element:#FFFFFF;--bg-hover:#F9FAFE;--bg-active:#36A4FF;--bg-header:#F9FAFE;--bg-backdrop:rgba(0, 0, 0, 0.3);--border-regular:#EDEDED;--border-light:#E7E7E7;--border-dark:#E7E7E7;--box-shadow-sm:0 2px 4px 0 rgba(var(--shadow-color, 62, 78, 106), 0.06);--box-shadow-md:0 4px 16px 0 rgba(var(--shadow-color, 62, 78, 106), 0.08);--box-shadow-lg:0 6px 24px rgba(var(--shadow-color, 62, 78, 106), 0.1);--box-shadow-xl:0 12px 40px 0 rgba(var(--shadow-color, 62, 78, 106), 0.24);--primary-light-5:#ebf9ff;--primary-light-4:#c7edff;--primary-light-3:#a3deff;--primary-light-2:#7ecdff;--primary-light-1:#5abaff;--primary-dark-1:#0b88ff;--primary-dark-2:#006bde;--primary-dark-3:#0050b3;--primary-dark-4:#003888;--primary-dark-5:#00235d;--success-light-5:#ecfaf3;--success-light-4:#c9f1e0;--success-light-3:#a8e6ce;--success-light-2:#88dbbd;--success-light-1:#6acead;--success-dark-1:#33b392;--success-dark-2:#269b81;--success-dark-3:#168570;--success-dark-4:#0b6b5c;--success-dark-5:#034d44;--danger-light-5:#ffedf0;--danger-light-4:#ffcdd4;--danger-light-3:#ffadb6;--danger-light-2:#ff8d96;--danger-light-1:#ff6d74;--danger-dark-1:#ff231f;--danger-dark-2:#ef0d00;--danger-dark-3:#c11100;--danger-dark-4:#921200;--danger-dark-5:#640f00;--warning-light-5:#fff0e8;--warning-light-4:#fed6bd;--warning-light-3:#fdbf93;--warning-light-2:#fcab6a;--warning-light-1:#fb9a40;--warning-dark-1:#e67f04;--warning-dark-2:#c17103;--warning-dark-3:#9c6002;--warning-dark-4:#774d01;--warning-dark-5:#513700;--info-light-5:#ecf3fd;--info-light-4:#cbddf9;--info-light-3:#aac5f5;--info-light-2:#89abf0;--info-light-1:#6a8feb;--info-dark-1:#204ce4;--info-dark-2:#1536c6;--info-dark-3:#0c24a4;--info-dark-4:#06157f;--info-dark-5:#020a59;--form-bg-color:var(--bg-element);--form-bg-color-fill:#f5f8fa;--form-border-color:var(--border-dark);--form-disabled-border-color:var(--border-light);--form-disabled-bg-color:var(--bg-light);--form-disabled-font-color:var(--text-light);--form-icon-color:var(--text-regular);--form-shadow-color:var(--rgb-primary);--hl-button-font-color:var(--text-regular);--hl-button-font-color-hover:var(--primary);--hl-button-font-color-active:var(--primary);--hl-button-bg-color:var(--bg-element);--hl-button-bg-color-hover:var(--bg-element);--hl-button-bg-color-active:var(--bg-element);--hl-button-border-color:var(--form-border-color);--hl-button-border-color-hover:#c3e4ff;--hl-button-border-color-active:var(--primary);--hl-menu-icon-color:#5281E9;--hl-menu-icon-color-hover:currentColor;--hl-menu-icon-color-active:#ffffff;--hl-menu-font-color:var(--text-regular);--hl-menu-font-color-hover:var(--text-secondary);--hl-menu-font-color-active:#ffffff;--hl-menu-bg-color:#ffffff;--hl-menu-bg-hover:#F8FAFF;--hl-menu-bg-active:#9EAECD;--hl-menu-group-title-color:rgba(#000, 0.2);--hl-menu-child-bg-color:#ffffff;--hl-menu-dropdown-shadow:var(--box-shadow-md)}.hl-group{--group-gap-x:0;--group-gap-y:0;position:relative;display:inline-flex;flex-direction:row;vertical-align:middle;-moz-column-gap:var(--group-gap-x);column-gap:var(--group-gap-x);row-gap:var(--group-gap-y)}.hl-group.full{display:flex;align-items:unset;justify-content:unset;width:100%}.hl-group.full>.group-item,.hl-group.full>.hl-group{flex-grow:1}.hl-group.full-x{display:flex;width:100%}.hl-group.full-x>.group-item,.hl-group.full-x>.hl-group{flex-grow:1}.hl-group.full-x.vertical{align-items:unset}.hl-group.full-y{display:inline-flex;align-items:flex-start}.hl-group.full-y>.group-item,.hl-group.full-y>.hl-group{flex-grow:1}.hl-group.block{display:flex}.hl-group.wrap{flex-wrap:wrap}.hl-group.wrap.full>.group-item,.hl-group.wrap.full>.hl-group{flex-basis:0;max-width:100%}.hl-group.horizontal{flex-direction:row}.hl-group.horizontal.indent{--indent:calc(var(--form-border-width) * -1)}.hl-group.horizontal.indent>.group-item:not(:only-child):not(:first-child),.hl-group.horizontal.indent>.hl-group:not(:only-child):not(:first-child){margin-left:var(--indent)}.hl-group.horizontal.merge>.group-item:not(:first-child):not(:last-child){border-radius:0}.hl-group.horizontal.merge>.group-item:not(:only-child):last-child{border-top-left-radius:0;border-bottom-left-radius:0}.hl-group.horizontal.merge>.group-item:not(:only-child):first-child{border-top-right-radius:0;border-bottom-right-radius:0}.hl-group.horizontal.deep-merge>.group-item:not(:first-child):not(:last-child),.hl-group.horizontal.deep-merge>.group-item:not(:first-child):not(:last-child) .merge-item,.hl-group.horizontal.deep-merge>.group-item:not(:first-child):not(:last-child) .merge-item .hl-button,.hl-group.horizontal.deep-merge>.group-item:not(:first-child):not(:last-child) .merge-item .hl-input,.hl-group.horizontal.deep-merge>.group-item:not(:first-child):not(:last-child)>.hl-button,.hl-group.horizontal.deep-merge>.group-item:not(:first-child):not(:last-child)>.hl-input,.hl-group.horizontal.deep-merge>.hl-group:not(:first-child):not(:last-child) .group-item{border-radius:0}.hl-group.horizontal.deep-merge>.group-item:not(:only-child):last-child,.hl-group.horizontal.deep-merge>.group-item:not(:only-child):last-child .merge-item,.hl-group.horizontal.deep-merge>.group-item:not(:only-child):last-child .merge-item .hl-button,.hl-group.horizontal.deep-merge>.group-item:not(:only-child):last-child .merge-item .hl-input,.hl-group.horizontal.deep-merge>.group-item:not(:only-child):last-child>.hl-button,.hl-group.horizontal.deep-merge>.group-item:not(:only-child):last-child>.hl-input,.hl-group.horizontal.deep-merge>.hl-group:not(:only-child):last-child .group-item:first-child,.hl-group.horizontal.deep-merge>.hl-group:not(:only-child):last-child .group-item:last-child{border-bottom-left-radius:0}.hl-group.horizontal.deep-merge>.group-item:not(:only-child):first-child,.hl-group.horizontal.deep-merge>.group-item:not(:only-child):first-child .merge-item,.hl-group.horizontal.deep-merge>.group-item:not(:only-child):first-child .merge-item .hl-button,.hl-group.horizontal.deep-merge>.group-item:not(:only-child):first-child .merge-item .hl-input,.hl-group.horizontal.deep-merge>.group-item:not(:only-child):first-child>.hl-button,.hl-group.horizontal.deep-merge>.group-item:not(:only-child):first-child>.hl-input,.hl-group.horizontal.deep-merge>.hl-group:not(:only-child):first-child .group-item:first-child,.hl-group.horizontal.deep-merge>.hl-group:not(:only-child):first-child .group-item:last-child{border-bottom-right-radius:0}.hl-group.horizontal.deep-merge>.group-item:not(:only-child):last-child,.hl-group.horizontal.deep-merge>.group-item:not(:only-child):last-child .merge-item,.hl-group.horizontal.deep-merge>.group-item:not(:only-child):last-child .merge-item .hl-button,.hl-group.horizontal.deep-merge>.group-item:not(:only-child):last-child .merge-item .hl-input,.hl-group.horizontal.deep-merge>.group-item:not(:only-child):last-child>.hl-button,.hl-group.horizontal.deep-merge>.group-item:not(:only-child):last-child>.hl-input,.hl-group.horizontal.deep-merge>.hl-group:not(:only-child):last-child .group-item:first-child,.hl-group.horizontal.deep-merge>.hl-group:not(:only-child):last-child .group-item:last-child{border-top-left-radius:0}.hl-group.horizontal.deep-merge>.group-item:not(:only-child):first-child,.hl-group.horizontal.deep-merge>.group-item:not(:only-child):first-child .merge-item,.hl-group.horizontal.deep-merge>.group-item:not(:only-child):first-child .merge-item .hl-button,.hl-group.horizontal.deep-merge>.group-item:not(:only-child):first-child .merge-item .hl-input,.hl-group.horizontal.deep-merge>.group-item:not(:only-child):first-child>.hl-button,.hl-group.horizontal.deep-merge>.group-item:not(:only-child):first-child>.hl-input,.hl-group.horizontal.deep-merge>.hl-group:not(:only-child):first-child .group-item:first-child,.hl-group.horizontal.deep-merge>.hl-group:not(:only-child):first-child .group-item:last-child{border-top-right-radius:0}.hl-group.vertical{flex-direction:column}.hl-group.vertical.indent{--indent:calc(var(--form-border-width) * -1)}.hl-group.vertical.indent>.group-item:not(:only-child):not(:first-child),.hl-group.vertical.indent>.hl-group:not(:only-child):not(:first-child){margin-top:var(--indent)}.hl-group.vertical.full-x{display:flex}.hl-group.vertical.full-x>.group-item,.hl-group.vertical.full-x>.hl-group{flex-grow:0}.hl-group.vertical.merge>.group-item:not(:first-child):not(:last-child){border-radius:0}.hl-group.vertical.merge>.group-item:not(:only-child):first-child{border-bottom-left-radius:0;border-bottom-right-radius:0}.hl-group.vertical.merge>.group-item:not(:only-child):last-child{border-top-left-radius:0;border-top-right-radius:0}.hl-group.vertical.deep-merge>.group-item:not(:first-child):not(:last-child),.hl-group.vertical.deep-merge>.group-item:not(:first-child):not(:last-child) .merge-item,.hl-group.vertical.deep-merge>.group-item:not(:first-child):not(:last-child) .merge-item .hl-button,.hl-group.vertical.deep-merge>.group-item:not(:first-child):not(:last-child) .merge-item .hl-input,.hl-group.vertical.deep-merge>.group-item:not(:first-child):not(:last-child)>.hl-button,.hl-group.vertical.deep-merge>.group-item:not(:first-child):not(:last-child)>.hl-input,.hl-group.vertical.deep-merge>.hl-group:not(:first-child):not(:last-child) .group-item{border-radius:0}.hl-group.vertical.deep-merge>.group-item:not(:only-child):first-child,.hl-group.vertical.deep-merge>.group-item:not(:only-child):first-child .merge-item,.hl-group.vertical.deep-merge>.group-item:not(:only-child):first-child .merge-item .hl-button,.hl-group.vertical.deep-merge>.group-item:not(:only-child):first-child .merge-item .hl-input,.hl-group.vertical.deep-merge>.group-item:not(:only-child):first-child>.hl-button,.hl-group.vertical.deep-merge>.group-item:not(:only-child):first-child>.hl-input,.hl-group.vertical.deep-merge>.hl-group:not(:only-child):first-child .group-item:first-child,.hl-group.vertical.deep-merge>.hl-group:not(:only-child):first-child .group-item:last-child{border-bottom-left-radius:0}.hl-group.vertical.deep-merge>.group-item:not(:only-child):first-child,.hl-group.vertical.deep-merge>.group-item:not(:only-child):first-child .merge-item,.hl-group.vertical.deep-merge>.group-item:not(:only-child):first-child .merge-item .hl-button,.hl-group.vertical.deep-merge>.group-item:not(:only-child):first-child .merge-item .hl-input,.hl-group.vertical.deep-merge>.group-item:not(:only-child):first-child>.hl-button,.hl-group.vertical.deep-merge>.group-item:not(:only-child):first-child>.hl-input,.hl-group.vertical.deep-merge>.hl-group:not(:only-child):first-child .group-item:first-child,.hl-group.vertical.deep-merge>.hl-group:not(:only-child):first-child .group-item:last-child{border-bottom-right-radius:0}.hl-group.vertical.deep-merge>.group-item:not(:only-child):last-child,.hl-group.vertical.deep-merge>.group-item:not(:only-child):last-child .merge-item,.hl-group.vertical.deep-merge>.group-item:not(:only-child):last-child .merge-item .hl-button,.hl-group.vertical.deep-merge>.group-item:not(:only-child):last-child .merge-item .hl-input,.hl-group.vertical.deep-merge>.group-item:not(:only-child):last-child>.hl-button,.hl-group.vertical.deep-merge>.group-item:not(:only-child):last-child>.hl-input,.hl-group.vertical.deep-merge>.hl-group:not(:only-child):last-child .group-item:first-child,.hl-group.vertical.deep-merge>.hl-group:not(:only-child):last-child .group-item:last-child{border-top-left-radius:0}.hl-group.vertical.deep-merge>.group-item:not(:only-child):last-child,.hl-group.vertical.deep-merge>.group-item:not(:only-child):last-child .merge-item,.hl-group.vertical.deep-merge>.group-item:not(:only-child):last-child .merge-item .hl-button,.hl-group.vertical.deep-merge>.group-item:not(:only-child):last-child .merge-item .hl-input,.hl-group.vertical.deep-merge>.group-item:not(:only-child):last-child>.hl-button,.hl-group.vertical.deep-merge>.group-item:not(:only-child):last-child>.hl-input,.hl-group.vertical.deep-merge>.hl-group:not(:only-child):last-child .group-item:first-child,.hl-group.vertical.deep-merge>.hl-group:not(:only-child):last-child .group-item:last-child{border-top-right-radius:0}