amis/scss/components/_debug.scss
吴多益 afaa9384d2
feat: amis Debug 辅助工具 (#3370)
* feat: debug 草稿

* 补充文档及增加 inspect 功能

* 增加 data 查看

* 增加 log 分类

* 增加 resize 功能

* 修复报错

* 去掉无用依赖

* 避免报错

Co-authored-by: wuduoyi <nwind@iMac-Pro.local>
2022-01-12 13:04:05 +08:00

168 lines
2.8 KiB
SCSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/**
* Debug 模块的 UI由于没法使用任何主题所以这里使用独立配色风格
*/
.AMISDebug {
position: fixed;
z-index: $zindex-debug;
top: 0;
right: 0;
height: 100vh;
width: 24px;
h3 {
color: inherit;
}
.primary {
color: #009fff;
}
&-header {
padding: var(--Drawer-header-padding);
background: var(--Drawer-header-bg);
border-bottom: var(--Drawer-content-borderWidth) solid
var(--Drawer-header-borderColor);
}
&-hoverBox {
pointer-events: none;
position: absolute;
outline: 1px dashed #1c76c4;
}
&-activeBox {
pointer-events: none;
position: absolute;
outline: 1px #1c76c4;
}
&-tab {
overflow: hidden;
}
&-tab > button {
color: inherit;
background: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: var(--gap-sm) var(--gap-md);
transition: 0.3s;
border-bottom: 1px solid transparent;
}
&-tab > button:hover {
color: #e7e7e7;
}
&-tab > button.active {
color: #e7e7e7;
border-bottom-color: #e7e7e7;
}
&-toggle {
background: var(--body-bg);
position: fixed;
top: 50%;
right: 0;
width: 24px;
height: 48px;
box-shadow: rgba(0, 0, 0, 0.24) -2px 0px 4px 0px;
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
padding-top: 14px;
padding-left: 6px;
cursor: pointer;
i {
color: var(--text-color);
}
&:hover {
i {
color: var(--primary);
}
}
}
&-content {
display: none;
}
&-resize {
position: absolute;
width: 4px;
top: 0;
left: 0;
bottom: 0;
cursor: col-resize;
&:hover {
background: #75715e;
}
}
&-changePosition {
position: absolute;
font-size: 18px;
right: 40px;
top: var(--gap-sm);
cursor: pointer;
}
&-close {
position: absolute;
font-size: 18px;
right: var(--gap-sm);
top: var(--gap-sm);
cursor: pointer;
}
&.is-expanded {
width: 420px;
overflow: auto;
background: #272821;
color: #cccccc;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
.AMISDebug-toggle {
display: none;
}
.AMISDebug-content {
display: block;
}
}
&.is-left {
left: 0;
.AMISDebug-resize {
left: unset;
right: 0;
}
}
&-log {
padding: var(--gap-sm);
button {
cursor: pointer;
background: #0e639c;
flex-grow: 1;
box-sizing: border-box;
display: inline-flex;
justify-content: center;
align-items: center;
padding: 6px 11px;
outline: none;
text-decoration: none;
color: inherit;
max-width: 300px;
border: none;
}
button:hover {
background: #1177bb;
}
}
&-inspect {
padding: var(--gap-sm);
}
}