amis/scss/components/_formula.scss

449 lines
8.6 KiB
SCSS
Raw Normal View History

.#{$ns}FormulaEditor {
overflow: visible;
max-width: 100%;
box-sizing: content-box;
2022-01-14 15:00:04 +08:00
@mixin scrollbar {
&::-webkit-scrollbar {
width: 6px;
height: 6px;
}
&::-webkit-scrollbar-thumb {
border-radius: 3px;
background: rgba(0, 0, 0, 0.3);
}
}
2022-01-14 15:00:04 +08:00
@mixin panel-header {
width: 100%;
height: px2rem(30px);
line-height: px2rem(30px);
padding: 0 #{px2rem(10px)};
box-sizing: border-box;
2022-01-14 15:00:04 +08:00
background: var(--InputFormula-header-bgColor);
border-radius: var(--borderRadius) var(--borderRadius) 0 0;
border-bottom: none;
font-weight: 500;
}
2022-01-14 15:00:04 +08:00
&-content {
border-radius: var(--borderRadius);
border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor);
}
&-header {
@include panel-header();
}
&-editor {
2022-01-14 15:00:04 +08:00
@include scrollbar();
height: px2rem(200px);
padding: #{px2rem(5px)};
padding-right: 0;
2022-01-14 15:00:04 +08:00
.CodeMirror {
width: 100%;
height: 100%;
}
}
&.is-error &-editor {
border-color: var(--Form-input-onError-borderColor);
}
&.is-focused &-editor {
border-color: var(--Form-input-onFocused-borderColor);
}
&-settings {
display: flex;
2022-01-14 15:00:04 +08:00
flex-flow: row nowrap;
align-items: stretch;
justify-content: space-between;
2022-01-14 15:00:04 +08:00
height: #{px2rem(250px)};
margin-top: #{px2rem(10px)};
}
&-settings.only-variable {
height: #{px2rem(350px)};
}
2022-01-14 15:00:04 +08:00
&-panel {
display: flex;
flex: 1;
2022-01-14 15:00:04 +08:00
flex-flow: column nowrap;
justify-content: space-between;
align-items: stretch;
height: 100%;
2022-01-14 15:00:04 +08:00
border-radius: var(--borderRadius);
border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor);
&:not(:last-child) {
margin-right: #{px2rem(10px)};
}
&:last-child {
flex: 1;
}
2022-01-14 15:00:04 +08:00
&-header {
@include panel-header();
}
&-body {
flex: 1;
display: flex;
2022-01-14 15:00:04 +08:00
flex-flow: column nowrap;
max-height: calc(100% - 30px);
overflow: hidden;
&--tabs {
max-height: 100%;
}
2022-01-14 15:00:04 +08:00
}
}
/* 变量列表 */
&-VariableList {
&-root {
max-height: 100%;
}
&-body {
display: flex;
flex-flow: column nowrap;
max-height: 100%;
}
&-base {
--Form-input-fontSize: var(--fontSizeSm);
--gap-sm: #{px2rem(10px)};
flex: 1;
max-height: 100%;
2022-01-14 15:00:04 +08:00
}
&-base.is-scrollable {
2022-01-14 15:00:04 +08:00
@include scrollbar();
overflow-x: hidden;
overflow-y: auto;
}
&-searchBox {
display: flex;
width: auto;
flex-shrink: 0;
padding: #{px2rem(8px)};
& > div {
flex: 1;
font-size: var(--fontSizeSm);
height: var(--gap-xl);
}
2022-01-14 15:00:04 +08:00
}
&-tabs {
--Tabs-linkFontSize: var(--fontSizeSm);
--Tabs--card-linkPadding: #{px2rem(5px)};
max-height: 100%;
2022-01-14 15:00:04 +08:00
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
.#{$ns}Tabs {
&-content {
padding: 0;
.#{$ns}FormulaEditor-VariableList {
&-sub {
.#{$ns}FormulaEditor-VariableList-body {
max-height: #{px2rem(220px)};
overflow-y: hidden;
}
&-FormulaEditor-VariableList-base {
@include scrollbar();
overflow-x: hidden;
overflow-y: auto;
}
}
}
}
&-linksContainer {
&-wrapper {
@include panel-header();
max-height: px2rem(30px);
min-height: px2rem(30px);
ul.#{$ns}Tabs-links {
> li {
height: 30px;
line-height: 30px;
> a {
margin: 0;
padding: 0;
}
}
}
}
&--overflow {
> div {
margin: 0;
}
}
}
2022-01-14 15:00:04 +08:00
}
& > div {
@include scrollbar();
overflow-x: hidden;
overflow-y: auto;
flex: 1;
border-radius: var(--borderRadius);
}
}
&-tab {
padding: 0;
}
&-item {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
white-space: nowrap;
& > label {
white-space: nowrap;
}
&-tag {
vertical-align: middle;
text-align: center;
padding: 0 #{px2rem(8px)};
border-radius: var(--borderRadius);
background: #f5f5f5;
color: var(--black);
}
}
.#{$ns}GroupedSelection {
&-item {
&-tag {
line-height: 17px;
}
}
}
2022-01-14 15:00:04 +08:00
}
/* 函数列表 */
&-FuncList {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: stretch;
flex: 1;
.#{$ns}FormulaEditor-panel {
width: #{px2rem(188px)};
}
2022-01-14 15:00:04 +08:00
&:not(:last-child) {
margin-right: #{px2rem(10px)};
}
&-searchBox {
display: flex;
width: auto;
flex-shrink: 0;
padding: #{px2rem(8px)};
2022-01-14 15:00:04 +08:00
& > div {
flex: 1;
font-size: var(--fontSizeSm);
height: var(--gap-xl);
}
2022-01-14 15:00:04 +08:00
}
&-body {
@include scrollbar();
flex: 1;
overflow-x: hidden;
overflow-y: auto;
}
2022-01-14 15:00:04 +08:00
&-collapseGroup {
.#{$ns}FormulaEditor-FuncList-collapse {
border: none;
.#{$ns}FormulaEditor-FuncList-expandIcon {
font-size: var(--fontSizeSm);
line-height: var(--fontSizeXl);
transform-origin: #{px2rem(7px)} #{px2rem(9px)};
transition: transform 0.2s;
}
}
}
&-groupTitle {
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: unset;
padding: #{px2rem(5px)} #{px2rem(10px)};
background: transparent;
font-size: var(--fontSizeSm);
font-weight: bold;
}
&-groupBody {
> div {
2022-01-14 15:00:04 +08:00
padding: 5px 0;
}
}
&-item {
cursor: pointer;
padding: 0 #{px2rem(30px)};
2022-01-14 15:00:04 +08:00
height: var(--gap-xl);
line-height: var(--gap-xl);
&.is-active {
background: var(--Tree-item-onHover-bg);
}
}
&-doc {
display: flex;
flex-flow: column nowrap;
padding: #{px2rem(10px)};
max-height: #{px2rem(200px)};
pre {
white-space: pre-wrap;
word-wrap: break-word;
background: var(--InputFormula-code-bgColor);
padding: #{px2rem(5px)} #{px2rem(10px)};
border-radius: var(--borderRadius);
margin-top: 0;
code {
color: #2468f2;
}
}
&-desc {
@include scrollbar();
color: var(--text--loud-color);
overflow-x: hidden;
overflow-y: auto;
flex: 1;
}
}
}
.cm-field,
.cm-func {
2022-01-14 15:00:04 +08:00
border-radius: 3px;
color: #fff;
margin: 0 1px;
padding: 0 2px;
}
2022-01-14 15:00:04 +08:00
.cm-field {
padding: 3px 5px;
}
.cm-field {
background: #007bff;
}
.cm-func {
2022-01-14 15:00:04 +08:00
color: #ae4597;
font-weight: bold;
line-height: 14px;
}
}
2022-01-14 15:00:04 +08:00
.#{$ns}FormulaPicker {
display: flex;
2022-01-14 15:00:04 +08:00
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
2022-01-14 15:00:04 +08:00
&-input {
flex: 1;
margin-right: #{px2rem(10px)};
padding-right: 0;
max-width: calc(100% - #{px2rem(42px)});
}
2022-01-14 15:00:04 +08:00
&-action {
display: flex;
2022-01-14 15:00:04 +08:00
justify-content: center;
align-items: center;
}
2022-01-14 15:00:04 +08:00
&-icon {
top: 0 !important;
font-size: var(--InputFormula-icon-size);
2022-01-14 15:00:04 +08:00
&:not(:last-child) {
margin-right: var(--fontSizeSm);
}
2022-01-14 15:00:04 +08:00
&.is-filled {
fill: var(--InputFormula-icon-color-onActive);
color: var(--InputFormula-icon-color-onActive);
}
}
&-ResultBox {
padding-right: 10px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
span.c-field {
background: #007bff;
padding: 3px 5px;
margin: 0 1px;
color: #fff;
font-size: 12px;
border-radius: 4px;
}
span.c-func {
color: #ae4597;
font-weight: bold;
line-height: 14px;
padding: 0 2px;
}
}
}
.#{$ns}FormulaPicker.is-input-group {
border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor);
padding: var(--Form-input-paddingY) var(--Form-input-paddingX);
border-radius: var(--borderRadius);
.#{$ns}FormulaPicker-input {
display: inline-block;
width: 100%;
background: none;
padding: 0;
border: 0;
margin: 0;
&:focus {
border: none;
outline: none;
box-sizing: none;
}
}
.#{$ns}FormulaPicker-toggler {
.icon-function {
transform: scale(1.6);
}
.icon-ellipsis-v {
transform: rotate(90deg);
}
&:hover {
cursor: pointer;
}
}
}