在使用searchpanel的时候,经常会需要给其设置样式,可以参考ODOO的科目表
<searchpanel class=”account_root”>
<field name=”account_root_id” icon=”fa-filter” groupby=”account_id” limit=”0″/>
</searchpanel>
其中account_root的样式如下(是scss文件哦):
.o_search_panel.edodfsearchpanel {
flex: 0 0 120px;
padding: 15px !important; // need to override bootstrap ps-4 rule
scrollbar-width: thin;
.o_search_panel_section_header {
display: none;
}
.list-group-item span.o_search_panel_label_title {
display: contents;
}
.o_search_panel_category_value {
padding-right: 0 !important;
header {
margin-left: 0;
}
.o_toggle_fold:empty{
width: 15px;
}
.o_search_panel_category_value {
padding-left: 1.2rem !important; // need to override bootstrap ps-4 rule
.o_toggle_fold {
width: 0.3rem;
}
}
}
&::-webkit-scrollbar {
width: 10px;
}
&::-webkit-scrollbar-thumb {
background: lightgray;
}
}
flex: 0 0 50px;
:设置元素的弹性布局属性,禁止伸缩并固定宽度为 50px。padding: 6px !important;
:设置内边距为 6px,并使用!important
关键字来优先应用此规则,覆盖可能存在的 Bootstrap 的 ps-4 规则。scrollbar-width: thin;
:设置滚动条的宽度为较细的样式。.o_search_panel_section_header { display: none; }
:隐藏搜索面板的部分标题。.list-group-item span.o_search_panel_label_title { display: contents; }
:将搜索面板标签标题的显示方式设置为contents
,即根据内容自动确定展示方式。.o_search_panel_category_value { padding-right: 0 !important; ... }
:为搜索面板的类别值设置样式规则。例如,重写 Bootstrap 的 ps-4 规则、调整内边距等。&::-webkit-scrollbar { width: 4px; }
:设置 WebKit 浏览器(如 Chrome、Safari)中滚动条的宽度为 4px。&::-webkit-scrollbar-thumb { background: lightgray; }
:设置 WebKit 浏览器中滚动条的滑块颜色为浅灰色