amis/scss/components/form/_rich-text.scss
吴多益 33686a375e
SCSS 基于 CSS custom properties 重构,支持通过配置来控制展现风格 (#1190)
* 使用自定义 css 属性初步,支持大部分组件的展现

* button 大部分可以看了

* cxd 和 dark 大部分正常

* 修复一些细节样式错误;补充 css 变量的文档

* 修复几个脚本发现的错误

* 完善一下注释

* 修复一些样式不一致问题

* 修复可能存在的 css xss

* 恢复 font-variant 功能

* 修复绝大部分 @if 相关的问题

* 恢复之前的注释

* 修复小错误,并将所有 background-color 改成 background,这样就能设置渐变色

* 修复 button group 在 cxd 下不一致问题

* 缩小查看配置和复制配置的宽度,留出更多空间

* 修复一些潜在的错误

* 恢复 utilities 中 label 背景色的设置

* 修复错误的 css 变量

* 补充 IE11 Variables Polyfill
2020-12-21 10:08:40 +08:00

116 lines
2.4 KiB
SCSS

.fr-popup {
z-index: $zindex-popover !important;
}
.#{$ns}RichTextControl {
> .tox-tinymce {
border: 0;
}
> textarea {
width: 100%;
}
min-height: px2rem(200px);
height: auto;
border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor);
width: 100%;
.fr-toolbar.fr-top {
box-shadow: none;
border: 0;
position: relative;
}
.fr-box.fr-basic.fr-top:not(.fr-fullscreen) .fr-wrapper {
min-height: 150px;
max-height: 400px;
box-shadow: none;
overflow: auto;
border-top: 1px solid var(--Form-input-borderColor);
}
.fr-toolbar .fr-command.fr-btn,
.fr-popup .fr-command.fr-btn {
color: var(--Button--default-color);
}
.fr-toolbar .fr-command.fr-btn.fr-active,
.fr-popup .fr-command.fr-btn.fr-active {
color: var(--info);
background: var(--Form-select-onHover-bg);
}
.fr-desktop .fr-command:hover,
.fr-desktop .fr-command:focus {
background: var(--Form-select-onHover-bg);
}
.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active,
.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active {
background: var(--Form-select-onHover-bg);
}
.fr-command.fr-btn
+ .fr-dropdown-menu
.fr-dropdown-wrapper
.fr-dropdown-content
ul.fr-dropdown-list
li
a.fr-active {
background: var(--info);
color: #fff;
}
&.is-focused {
border: var(--Form-input-borderWidth) solid
var(--Form-input-onFocused-borderColor);
.fr-box.fr-basic.fr-top .fr-wrapper {
border-top: var(--Form-input-borderWidth) solid
var(--Form-input-onFocused-borderColor);
}
}
.fr-box.fr-basic .fr-element {
min-height: 150px;
}
.fr-sticky-dummy {
position: absolute;
}
&.is-disabled {
border-color: var(--Form-input-onDisabled-borderColor);
pointer-events: none;
opacity: 0.6;
.fr-box.fr-basic.fr-top .fr-wrapper {
border-color: var(--Form-input-onDisabled-borderColor);
}
}
// &.amis-rich-text-control-md {
// .fr-box.fr-basic .fr-element,
// .fr-box.fr-basic.fr-top .fr-wrapper {
// min-height: 250px;
// }
// }
// &.amis-rich-text-control-lg {
// .fr-box.fr-basic .fr-element,
// .fr-box.fr-basic.fr-top .fr-wrapper {
// min-height: 300px;
// }
// }
}
// @media (min-width: 768px) {
// .amis-rich-text-control.form-contorl-inline,
// .form-group-inline .amis-rich-text-control {
// display: inline-block;
// width: 280px;
// }
// }