sci-pro/lib/src/select/style/index.css

:root {
  /* 蓝色 */
  --blue-50: #ebf6ff;
  --blue-100: #d9ebff;
  --blue-200: #9fc9fb;
  --blue-300: #64a6f7;
  --blue-400: #2481f2;
  --blue-500: #246fe5;
  --blue-600: #215dd9;
  --blue-700: #1b4acc;
  --blue-800: #1241bf;
  --blue-900: #1034b2;
  /* 蓝绿色 */
  --turquoise-50: #e6fcf7;
  --turquoise-100: #cbf7f3;
  --turquoise-200: #a6ede8;
  --turquoise-300: #72e1de;
  --turquoise-400: #33d4d2;
  --turquoise-500: #14c4c4;
  --turquoise-600: #09b3b5;
  --turquoise-700: #00a2a7;
  --turquoise-800: #008e96;
  --turquoise-900: #00818c;
  /* 绿色 */
  --green-50: #ebffeb;
  --green-100: #daf7e1;
  --green-200: #b6e9c7;
  --green-300: #8edbab;
  --green-400: #69cd90;
  --green-500: #3fbe72;
  --green-600: #15ae55;
  --green-700: #0c9b4a;
  --green-800: #0f8843;
  --green-900: #13753f;
  /* 黄色 */
  --yellow-50: #fdffe5;
  /* 橙色 */
  /* 青色 */
  --lime-50: #f1fce6;
  --lime-100: #e8f7bb;
  --lime-200: #dbed8f;
  --lime-300: #cce062;
  --lime-400: #bdd436;
  --lime-500: #aac41c;
  --lime-600: #95b315;
  --lime-700: #80a20e;
  --lime-800: #6a9107;
  --lime-900: #558000;
  /* 黄色 */
  --yellow-50: #fdffe6;
  --yellow-100: #fcf8b8;
  --yellow-200: #fcef7e;
  --yellow-300: #fbe750;
  --yellow-400: #fbdf23;
  --yellow-500: #f8d60c;
  --yellow-600: #f2cb0c;
  --yellow-700: #ecc00c;
  --yellow-800: #e6b507;
  --yellow-900: #e0a800;
  /* 橙色 */
  --orange-50: #fffbe6;
  --orange-100: #fff0cc;
  --orange-200: #ffe399;
  --orange-300: #ffd873;
  --orange-400: #ffcc47;
  --orange-500: #ffb800;
  --orange-600: #f29f00;
  --orange-700: #e68600;
  --orange-800: #d96c00;
  --orange-900: #cc5300;
  /* 红色 */
  --red-50: #fff5f5;
  --red-100: #ffe6e5;
  --red-200: #fdc1be;
  --red-300: #fa9b96;
  --red-400: #f8766f;
  --red-500: #f55047;
  --red-600: #e63c35;
  --red-700: #d72824;
  --red-800: #c71412;
  --red-900: #b80000;
  /* 胭脂红 */
  --carmine-50: #fff2fd;
  --carmine-100: #f7e3f5;
  --carmine-200: #f1c5ee;
  --carmine-300: #e9a8e6;
  --carmine-400: #de8bdc;
  --carmine-500: #d069d2;
  --carmine-600: #be49c5;
  --carmine-700: #a928b7;
  --carmine-800: #910aa7;
  --carmine-900: #780094;
  /* 紫色 */
  --purple-50: #fff2fd;
  --purple-100: #f7e3f5;
  --purple-200: #f1c5ee;
  --purple-300: #e9a8e6;
  --purple-400: #de8bdc;
  --purple-500: #d069d2;
  --purple-600: #be49c5;
  --purple-700: #a928b7;
  --purple-800: #910aa7;
  --purple-900: #780094;
  /* 紫罗兰 */
  --violet-50: #fcf5ff;
  --violet-100: #f1e5fe;
  --violet-200: #e6d1ff;
  --violet-300: #d3b3ff;
  --violet-400: #b286f5;
  --violet-500: #9b6ced;
  --violet-600: #8252e3;
  --violet-700: #683bd6;
  --violet-800: #5124c4;
  --violet-900: #4016b5;
  /* 灰色 */
  --gray-0: #fff;
  --gray-50: #f7f9fa;
  --gray-100: #f2f4f6;
  --gray-200: #edf1f5;
  --gray-300: #e1e5eb;
  --gray-400: #c4c9cf;
  --gray-500: #8b949e;
  --gray-600: #626c78;
  --gray-700: #424c59;
  --gray-800: #2e3742;
  --gray-900: #1b2129;
  /* 主色 */
  /* 辅助色-成功 */
  /* 辅助色-危险 */
  /* 辅助色-警示 */
  /* 辅助色-禁用 */
  /* 辅助色-禁用 */
  /* 组件 Placeholder 默认状态、组件 Disable 状态、文字按钮的 Disable 状态 */
  /* 中性色-一级标题/二级标题/已输入文字 */
  /* 中性色-注释文字/有底色表头文字 */
  /* 中性色-辅助信息文字/描述文字 */
  /* 中性色-辅助信息文字/描述文字 */
  /* 中性色-输入框提示文字/按钮边框/输入框边框 */
  /* 中性色-细分割线/表格描边线 */
  /* 中性色-页面分割线 */
  /* 中性色-页面背景色 */
  /* 中性色-一级标题/二级标题/已输入文字 */
  --title-color: var(--gray-900);
  /* 中性色-注释文字/有底色表头文字 */
  --notes-color: var(--gray-600);
  /* 中性色-辅助信息文字/描述文字 */
  --describe-color: var(--gray-500);
  /* 中性色-辅助信息文字/描述文字 */
  --title-white: var(--gray-0);
  /* 中性色-输入框提示文字/按钮边框/输入框边框 */
  /* 中性色-细分割线/表格描边线 */
  --stroke-color: var(--gray-300);
  /* 中性色-页面分割线 */
  --divider-color: var(--gray-200);
  /* 中性色-页面背景色 */
  --background-color: var(--gray-50);
  /* 主色 */
  --primary-color: var(--blue-500);
  /* 辅助色-成功 */
  --success-color: var(--green-500);
  /* 辅助色-危险 */
  --danger-color: var(--red-500);
  /* 辅助色-警示 */
  --warning-color: var(--orange-500);
  /* 辅助色-禁用 */
  --disable-color: var(--gray-200);
  /* 辅助色-禁用 */
  --disable-title: var(--gray-400);
  /* 组件 Placeholder 默认状态、组件 Disable 状态、文字按钮的 Disable 状态 */
  --disable-bg-color: var(--gray-200);
  --disable-text-color: var(--gray-400);
  /* --------------------------- 图标颜色 --------------------------- */
  /* 基本图标颜色 */
  --icon-color: var(--gray-500);
  /* 图标文字颜色 */
  --text-icon-color: var(--gray-50);
  /* 提示性图标 */
  --tip-icon-color: var(--primary-color);
  /* 警告性图标 */
  --warning-icon-color: var(--warning-color);
  /* 错误性图标 */
  --error-icon-color: var(--danger-color);
  /* 反色图标 */
  --reverse-icon-color: var(--gray-0);
  /* --------------------------- 界面、组件常用元素 --------------------------- */
  /* 侧边栏背景 */
  --sidebar-bg-color: var(--gray-50);
  /* 表头底色 */
  --table-head-bg-color: var(--gray-100);
  /* 可交互操作、选项hover底色 如：按钮、下拉选项、表格行 */
  --operation-hover-bg-color: var(--gray-200);
  /* 输入框、选择器、tab选项、二级按钮 边框 滚动条 */
  --border-color: var(--gray-400);
  /* 模块分割线 表格内容分割线、边框线 */
  --divider-bg-color: var(--gray-300);
  /* Checkbox、Radio默认边框 */
  --radio-border-color: var(--gray-500);
  /* 弹窗Mask 投影原色 */
  --modal-bg-color: var(--gray-600);
  /* 小圆角（主要用于复选框、标签） */
  --small-radius: 2px;
  /* 大圆角（常用尺寸，主要用于按钮、输入框、卡片、弹窗）  */
  --big-radius: 4px;
  /* 小投影 */
  --small-shadow: 0px 2px 10px rgba(31, 35, 41, 0.1);
  /* 普通投影 */
  --medium-shadow: 0px 0px 4px rgba(78, 131, 253, 0.4);
  /* 大投影 */
  --big-shadow: 0px 20px 30px rgba(31, 35, 41, 0.15);
  /* 顶栏投影、侧拉窗投影 */
  --shadow-1: 0px 2px 10px rgba(27, 33, 41, 0.1);
  /* 下拉列表、Popover、白色Tips、按钮固底投影 */
  --shadow-2: 0px 3px 12px rgba(27, 33, 41, 0.12), 0px 0.5px 3px rgb(27 33 41 / 8%);
  /* 通知投影 */
  --shadow-3: 0px 0px 4px rgba(98, 108, 120, 0.15),
    0px 14px 26px rgb(98 108 120 / 4%);
  /* 弹窗投影 */
  --shadow-4: 0px 20px 30px rgba(27, 33, 41, 0.15);
  /* 单上边投影 */
  --shadow-5: 0px -0.5px 3px 0px rgba(27, 33, 41, 0.05),
    0px -2px 12px 0px rgb(27 33 41 / 6%);
  /* 顶栏投影、侧拉窗 */
  --top-shadow: 0px 2px 10px rgba(27, 33, 41, 0.1);
  /* 下拉列表、Popover、白色Tips、按钮固底 */
  --select-shadow: 0px 3px 12px rgba(27, 33, 41, 0.12),
    0px 0.5px 3px rgb(27 33 41 / 8%);
  /* 通知 */
  --inform-shadow: 0px 22px 40px rgba(98, 108, 120, 0.08),
    0px 14px 26px rgb(98 108 120 / 4%), 0px 0px 4px rgb(98 108 120 / 15%);
  /* 弹窗 */
  --modal-shadow: 0px 20px 30px rgba(27, 33, 41, 0.15);
  /* popover */
  --popover-bg-color: rgba(27, 33, 41, 0.8);
  /* 透明度 hover */
  --opacity-hover: 0.8;
  /* 字体大小 */
  /* Auxiliary text 内文辅助文本 */
  --font-sm: 12px;
  /* Inner text 正常内文 */
  --font-m: 14px;
  /* Three-level title 三级标题 */
  --font-xl: 16px;
  /* Secondary title 二级标题 */
  --font-xxl: 20px;
  /* First level title 一级标题 */
  --font-xxxl: 24px;
  /* Extra large title 特大标题 */
  --font-xxxxl: 30px;
  /* Auxiliary text 内文辅助文本 */
  --line-sm: 12px;
  /* Inner text 正常内文 */
  --line-m: 14px;
  /* Three-level title 三级标题 */
  --line-xl: 16px;
  /* Secondary title 二级标题 */
  --line-xxl: 20px;
  /* First level title 一级标题 */
  --line-xxxl: 24px;
  /* Extra large title 特大标题 */
  --line-xxxxl: 30px;
  /* 间距 */
  --padding-0: 0;
  --padding-1: 4px;
  --padding-2: 8px;
  --padding-3: 12px;
  --padding-4: 16px;
  --padding-5: 20px;
  --padding-6: 24px;
  --padding-8: 32px;
  --padding-15: 60px;
}
.dark:root {
  /** 蓝色 */
  --blue-50: #1e2a38;
  --blue-100: #1d3144;
  --blue-200: #17476d;
  --blue-300: #105b98;
  --blue-400: #0972c3;
  --blue-500: #0091ff;
  --blue-600: #1a9cff;
  --blue-700: #4db2ff;
  --blue-800: #75c3ff;
  --blue-900: #8accff;
  /** 蓝绿色 */
  --turquoise-50: #1e2e33;
  --turquoise-100: #1d383e;
  --turquoise-200: #175957;
  --turquoise-300: #107e75;
  --turquoise-400: #099f8d;
  --turquoise-500: #00d6ba;
  --turquoise-600: #1adbc1;
  --turquoise-700: #4be2ce;
  --turquoise-800: #80eadc;
  --turquoise-900: #9beee3;
  /** 橙色 */
  --orange-50: #2a2a2c;
  --orange-100: #322d29;
  --orange-200: #5a3e20;
  --orange-300: #7d4c17;
  --orange-400: #a45e0e;
  --orange-500: #db7500;
  --orange-600: #e18419;
  --orange-700: #e69e4b;
  --orange-800: #eebb81;
  --orange-900: #f1c798;
  /** 红色 */
  --red-50: #2a282f;
  --red-100: #33282f;
  --red-200: #5a3032;
  --red-300: #813637;
  --red-400: #a63e3a;
  --red-500: #e24840;
  --red-600: #e45a53;
  --red-700: #ea7e76;
  --red-800: #f0a39e;
  --red-900: #f3b8b4;
  /** 中性色 */
  --gray-50: #171b21;
  --gray-100: #282b32;
  --gray-200: #2c323e;
  --gray-300: #404759;
  --gray-400: #5d6179;
  --gray-500: #71768e;
  --gray-600: #a5aac0;
  --gray-700: #b4b8cc;
  --gray-800: #d3d5de;
  --gray-900: #ebeef5;
  /* 主色 */
  --primary-color: red;
  /* 辅助色-成功 */
  --success-color: #00d6b9;
  /* 辅助色-危险 */
  --danger-color: #e24840;
  /* 辅助色-警示 */
  --warning-color: #db7500;
  /* 辅助色-禁用 */
  --disable-color: #404759;
  /* 中性色-一级标题/二级标题/已输入文字 */
  --title-color: #ebeef5;
  /* 中性色-注释文字/有底色表头文字 */
  --notes-color: #a5aabf;
  /* 中性色-辅助信息文字/描述文字 */
  --describe-color: #8d9399;
  /* 中性色-输入框提示文字/按钮边框/输入框边框 */
  --border-color: #5d6179;
  /*  中性色-细分割线/表格描边线 */
  --stroke-color: #222730;
  /*  中性色-页面分割线  */
  --divider-color: #ebeef5;
  /* 中性色-页面背景色 */
  --background-color: #171b21;
}
.m-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body {
  overflow-y: overlay;
}
.ellipsis-title {
  position: fixed;
  z-index: 9999;
  padding: 8px 12px;
  font-size: 12px;
  color: #fff;
  word-break: break-all;
  background-color: var(--popover-bg-color);
  border-radius: 4px;
  box-shadow: none;
}
.ellipsis-title.light {
  color: inherit;
  background-color: #fff;
  box-shadow: 0 2px 10px 0 #1f24291a;
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  outline: 0;
}
:focus {
  outline: 0;
}
* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  font-family: Arial;
}
.sci-select-wrap {
  position: relative;
  display: inline-block;
  color: var(--gray-600);
  width: 120px;
}
.sci-select {
  height: 30px;
}
.sci-select .display-box {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  border: 1px solid var(--gray-400);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.sci-select .display-box .input {
  height: 100%;
  border: none;
  outline: none;
  padding: 0 10px;
  box-sizing: border-box;
}
.sci-select .display-box .txt-unit {
  position: absolute;
  font-size: 12px;
  right: 0;
  top: 9px;
}
.drop-down {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 5px;
  width: 100%;
  background-color: var(--gray-0);
  border: 1px solid var(--gray-400);
  border-radius: 4px;
  box-sizing: border-box;
  z-index: 3;
}
.drop-down .options {
  font-size: 12px;
  overflow-y: auto;
  max-height: 200px;
}
.drop-down .options .option {
  padding: 4px 5px;
  display: flex;
  align-items: center;
}
.drop-down .options .option .checkbox {
  cursor: pointer;
}
.drop-down .options .option .title {
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.drop-down .options .option.checked {
  background-color: rgba(27, 144, 251, 0.1);
}
.drop-down .options .option:hover {
  background-color: rgba(27, 144, 251, 0.1);
}
.drop-down .options .option-val {
  width: 100%;
  box-sizing: border-box;
  padding-left: 5px;
  word-break: break-all;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.drop-down .options::-webkit-scrollbar {
  background: transparent!important;
  width: 2px!important;
  height: 4px!important;
  border-radius: 4px!important;
}
.drop-down .options::-webkit-scrollbar-corner {
  background: transparent!important;
}
.drop-down .options::-webkit-scrollbar-thumb {
  background: var(--gray-400) !important;
  border-radius: 4px!important;
  border: 2px solid transparent!important;
  cursor: pointer!important;
}
.drop-down .options ::-webkit-scrollbar-track {
  background: transparent!important;
}
.drop-down .single-height {
  max-height: 160px;
}
.drop-down .multi-height {
  max-height: 135px;
}
.selected {
  color: #409eff;
}