amis/examples/style.scss

1070 lines
19 KiB
SCSS
Raw Normal View History

2020-07-23 20:31:51 +08:00
@import '../scss/mixins';
2019-04-30 11:11:25 +08:00
@import '../scss/functions';
@import '../scss/variables';
2020-07-23 20:31:51 +08:00
body {
2020-07-30 22:21:03 +08:00
background-color: #fff !important;
2020-07-29 20:25:04 +08:00
&.dark {
2020-07-30 22:21:03 +08:00
background-color: #333538 !important;
2020-10-26 19:29:59 +08:00
2020-12-01 11:43:30 +08:00
pre {
color: #fff;
}
2020-10-26 19:29:59 +08:00
.markdown-body {
color: #fff;
}
2020-07-29 20:25:04 +08:00
}
2020-07-23 20:31:51 +08:00
}
2020-11-30 00:37:09 +08:00
// a {
// text-decoration: none !important;
// }
2020-07-31 12:40:04 +08:00
2019-10-18 12:23:41 +08:00
.page-play,
.page-edit {
2019-12-06 09:58:08 +08:00
&:before {
display: table;
content: ' ';
}
2019-10-18 12:23:41 +08:00
2019-12-06 09:58:08 +08:00
&:after {
clear: both;
display: block;
content: '';
height: 0;
}
2019-10-18 12:23:41 +08:00
2019-12-06 09:58:08 +08:00
.app-content {
position: absolute;
top: 50px;
bottom: 0;
height: auto;
left: 0;
right: 0;
}
2019-10-18 12:23:41 +08:00
2019-12-06 09:58:08 +08:00
.app-content-body {
height: 100%;
}
2019-04-30 11:11:25 +08:00
}
.resizer {
2019-12-06 09:58:08 +08:00
position: absolute;
top: 0;
bottom: 0;
margin-left: -2px;
width: 4px;
background: lighten($dark, 20%);
z-index: 1;
cursor: col-resize;
2019-04-30 11:11:25 +08:00
2019-12-06 09:58:08 +08:00
&:hover {
background: $dark;
}
2019-04-30 11:11:25 +08:00
}
2020-12-09 00:35:24 +08:00
// .MDPreview {
// flex: 1 auto;
// overflow: auto;
// width: 100%;
// position: relative;
// &-shcema-preview-popover {
// box-shadow: none !important;
// margin-top: -1px !important;
// padding: 0 45px !important;
// left: 0 !important;
// width: 100% !important;
// // max-width: 980px !important;
// z-index: 1 !important;
// background: transparent !important;
// border: none !important;
// }
// &-schema-preview {
// border: 1px solid #ddd;
// background: var(--body-bg);
2020-12-09 00:35:24 +08:00
// // background: rgb(240, 243, 244);
// position: relative;
// height: 100%;
// width: 100%;
// // overflow: auto;
// }
// }
2019-04-30 11:11:25 +08:00
2020-12-09 00:35:24 +08:00
// body.dark .MDPreview-schema-preview {
// background: #191c22;
// color: #fff;
// }
2020-12-01 11:43:30 +08:00
2019-04-30 11:11:25 +08:00
// .view-code {
// position: fixed;
// top: 15px;
// z-index: 1200;
// right: 175px;
// }
2019-12-06 09:58:08 +08:00
.amis-schema-editor.fix-settings
.amis-schema-editor-settings-inner
.amis-schema-editor-config-tab
> .tab-content,
.amis-schema-editor.fix-settings
.amis-schema-editor-settings-inner
.amis-schema-editor-code-tab
> .tab-content {
bottom: 50px;
}
2020-07-23 20:31:51 +08:00
.app-wrapper {
.DocLayout {
2020-07-29 15:33:25 +08:00
padding-top: 100px;
2020-07-24 17:20:08 +08:00
2020-07-29 19:35:01 +08:00
&-header {
2020-07-31 16:55:05 +08:00
height: 64px !important;
box-shadow: none !important;
white-space: nowrap;
2020-07-29 19:35:01 +08:00
&::before {
position: fixed;
height: 64px;
content: '';
z-index: -1;
left: 0;
right: 0;
box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.1);
}
2020-07-30 14:21:21 +08:00
2020-12-28 12:27:28 +08:00
.gh-icon {
position: fixed;
right: 20px;
top: 15px;
font-size: 22px;
color: #333;
&:hover {
color: #333;
}
}
2020-07-29 19:35:01 +08:00
}
&-brandBar,
&-searchBar {
position: relative;
2020-07-23 20:31:51 +08:00
2020-07-29 19:35:01 +08:00
&::before {
2020-07-23 20:31:51 +08:00
top: 50%;
right: 0;
height: 32px;
content: ' ';
position: absolute;
transform: translateY(-50%);
border-left: 1px solid #e8ebee;
width: 1px;
}
2020-07-29 19:35:01 +08:00
}
2020-07-23 20:31:51 +08:00
2020-07-29 19:35:01 +08:00
&-brandBar {
background-color: transparent;
.DocLayout-brand {
2020-07-29 19:35:01 +08:00
height: 64px;
line-height: 64px;
font-size: 24px;
font-weight: 400;
2020-08-05 13:22:14 +08:00
padding: 0;
2020-07-29 19:35:01 +08:00
2020-08-05 13:22:14 +08:00
.logo {
background: url('./static/logo.png') left/contain no-repeat;
height: 40px;
2020-10-22 20:04:52 +08:00
width: 130px;
2020-08-05 13:22:14 +08:00
margin-top: 12px;
2020-07-29 19:35:01 +08:00
}
2020-07-23 20:31:51 +08:00
}
2020-07-29 20:25:04 +08:00
2020-07-31 12:40:04 +08:00
.a-Layout-brand > a,
.cxd-Layout-brand > a,
.antd-Layout-brand > a {
2020-07-29 20:25:04 +08:00
color: #333;
}
2020-07-31 12:40:04 +08:00
.dark-Layout-brand > a {
color: #fff;
}
2020-07-29 19:35:01 +08:00
}
&-headerBar {
height: 64px;
2020-07-23 20:31:51 +08:00
> .HeaderLinks {
2020-07-23 20:31:51 +08:00
line-height: 64px;
margin-left: 32px;
2020-07-23 20:31:51 +08:00
}
}
2020-07-29 19:35:01 +08:00
&-searchBar {
2020-12-28 12:27:28 +08:00
// width: 1px;
// align-self: center;
// padding-left: 10px;
2020-11-30 16:53:04 +08:00
> a {
display: inline-block;
padding: 20px;
2020-11-30 16:53:04 +08:00
cursor: pointer;
color: #666;
> svg {
width: 14px;
height: 14px;
top: 2px;
}
2020-07-23 20:31:51 +08:00
2020-11-30 16:53:04 +08:00
> i {
font-size: 18px;
}
2020-08-21 17:33:31 +08:00
2020-11-30 16:53:04 +08:00
&:hover {
color: #333;
}
& + a {
margin-left: 10px;
2020-08-21 17:33:31 +08:00
}
2020-07-23 20:31:51 +08:00
}
2020-11-30 16:53:04 +08:00
// .Doc-search {
// margin-top: 15px;
// border: 0;
// > .icon-search {
// margin-right: 8px;
// top: 3px;
// }
// }
2020-07-23 20:31:51 +08:00
&::before {
left: 0;
}
}
}
2020-07-29 20:25:04 +08:00
.dark-Layout {
&-header::before {
background-color: #191c22;
}
.Doc-search .dark-TextControl-input {
background-color: #191c22;
}
&-headerBar-links > a {
color: #eee;
}
}
.a-Layout,
.cxd-Layout,
.antd-Layout {
2020-07-29 20:25:04 +08:00
&::before {
background-color: #fff;
}
.DocLayout-header::before {
2020-07-29 20:25:04 +08:00
background: #fff;
}
}
2020-07-23 20:31:51 +08:00
}
.HeaderLinks {
font-size: 14px;
padding-left: 35px;
margin: 0;
padding: 0;
line-height: 50px;
white-space: nowrap;
> a {
display: inline-block;
color: #333;
padding: 0px 5px;
margin: 0 5px;
font-weight: 500;
text-decoration: none;
&:hover,
&.is-active {
color: var(--primary);
position: relative;
text-decoration: none;
&::before {
content: '';
border-bottom: 2px solid var(--primary);
position: absolute;
width: 100%;
left: 0;
bottom: 0;
}
}
}
}
#Header-toolbar {
white-space: nowrap;
}
2020-12-24 22:26:45 +08:00
.a-Layout-offScreen-btn,
.cxd-Layout-offScreen-btn,
.antd-Layout-offScreen-btn,
2020-12-24 22:26:45 +08:00
.dark-Layout-offScreen-btn {
line-height: 50px;
padding: 0 10px;
}
.DocLayout-offScreen-btn {
line-height: 64px;
padding: 0 20px;
cursor: pointer;
position: absolute;
left: 0;
}
2020-07-23 20:31:51 +08:00
.Doc {
2020-07-29 15:33:25 +08:00
height: 100%;
a.anchor {
2020-07-28 18:23:02 +08:00
padding-top: 100px;
margin-top: -100px;
2020-07-23 20:31:51 +08:00
}
&-nav,
&-toc {
margin-top: 30px;
}
&-nav,
&-toc {
a {
display: inline-block;
width: 100%;
padding: 5px 10px;
}
> div {
scrollbar-width: none;
/* Firefox */
-ms-overflow-style: none;
/* IE 10+ */
&::-webkit-scrollbar-track {
box-shadow: none !important;
background-color: transparent;
}
&::-webkit-scrollbar {
width: 3px !important;
background-color: transparent;
}
&::-webkit-scrollbar-thumb {
background-color: transparent;
}
}
}
&-nav {
width: 180px;
2020-07-23 20:31:51 +08:00
}
&-toc {
margin: 30px 0;
2020-12-24 20:06:46 +08:00
width: 120px;
2020-07-23 20:31:51 +08:00
}
&-navigation {
2020-10-22 20:04:52 +08:00
.a-AsideNav,
.cxd-AsideNav,
.antd-AsideNav,
2020-10-22 20:04:52 +08:00
.dark-AsideNav {
&-subList {
2020-10-26 19:29:59 +08:00
background: transparent;
2020-10-22 20:04:52 +08:00
}
2020-07-23 20:31:51 +08:00
2020-10-22 20:04:52 +08:00
&-label {
font-size: px2rem(12px);
2020-10-22 20:04:52 +08:00
font-weight: 700;
margin-bottom: px2rem(10px);
margin-top: px2rem(30px);
white-space: pre-wrap;
border-top: 0;
2020-07-23 20:31:51 +08:00
padding-left: 0;
2020-10-22 20:04:52 +08:00
&:first-child {
margin-top: 0;
2020-07-23 20:31:51 +08:00
}
}
2020-10-22 20:04:52 +08:00
&-item {
padding-left: px2rem(20px);
border-left: px2rem(1px) solid #e8ebee;
position: relative;
2020-10-22 20:04:52 +08:00
a {
font-size: px2rem(12px);
2020-10-22 20:04:52 +08:00
font-weight: 700;
color: #666;
2021-01-04 20:10:08 +08:00
padding: px2rem(3px) 0;
2020-10-22 20:04:52 +08:00
background: transparent;
border-left: 0;
2020-07-23 20:31:51 +08:00
&:hover {
2020-10-22 20:04:52 +08:00
color: #999;
background: transparent;
}
& > span {
margin-left: 0;
2020-07-23 20:31:51 +08:00
}
}
2020-10-22 20:04:52 +08:00
&.is-top {
padding-left: 0;
border-left: 0;
display: block;
2020-07-23 20:31:51 +08:00
2020-10-22 20:04:52 +08:00
> a {
color: #333;
&:hover {
color: #000;
}
}
}
&.is-active {
> a {
color: var(--primary);
2020-10-22 20:58:09 +08:00
background: transparent;
2020-10-22 20:04:52 +08:00
&:hover {
color: var(--primary);
2020-10-22 20:58:09 +08:00
background: transparent;
2020-10-22 20:04:52 +08:00
}
2020-07-23 20:31:51 +08:00
}
}
}
}
2020-10-26 19:29:59 +08:00
.a-AsideNav,
.cxd-AsideNav,
.antd-AsideNav {
2020-10-26 19:29:59 +08:00
&-itemArrow:empty:before {
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2aWV3Qm94PSIwIDAgOTkgMTc2IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgoJPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTAuMTMyODEyLCAwLjMwNDY4OCkiIGZpbGw9ImN1cnJlbnRDb2xvciIgZmlsbC1ydWxlPSJub256ZXJvIj4KCQk8cGF0aCBkPSJNOTUuNjM1MzY5Nyw3OS40MDMxMzQ2IEM5NS4zNDMzNjc4LDc5LjExMTEzMjYgOTUuMDM3NTc1LDc4Ljg0MTcxNTIgOTQuNzIxOTg5MSw3OC41OTA2ODU0IEwxOS44MTkzNzMsMy4yOTk5MzI2MiBDMTUuNjQ5MjAwNCwtMC44NzAwNDAyMzQgOC44ODgxODQzNywtMC44NzAwNDAyMzQgNC43MTgyMTE3MiwzLjI5OTkzMjYyIEMwLjU0ODIzODg2Nyw3LjQ3MDEwNTI3IDAuNTQ4MjM4ODY3LDE0LjIzMDkyMTUgNC43MTgyMTE3MiwxOC40MDEwOTM5IEw3Mi45MzI5NjIxLDg3LjAwNDE4MTEgTDMuMjUzMjA0ODgsMTU2LjYxNzc4MyBDLTAuOTE2NzY3OTY5LDE2MC43ODc5NTYgLTAuOTE2NzY3OTY5LDE2Ny41NDg3NzIgMy4yNTMyMDQ4OCwxNzEuNzE5MTQ0IEM3LjQyMzE3NzczLDE3NS44ODkxMTcgMTQuMTg0MTkzNywxNzUuODg5MTE3IDE4LjM1NDM2NjIsMTcxLjcxOTE0NCBMOTQuNzIxMTg5NSw5NS40MTgwNzY0IEM5NS4wMzY5NzU0LDk1LjE2Njg0NjcgOTUuMzQyOTY4LDk0Ljg5NzYyOTMgOTUuNjM1MTY5Nyw5NC42MDU0MjczIEM5Ny43MzI5NDc1LDkyLjUwNzY0OTYgOTguNzc0NDQxMiw4OS43NTM5MTY2IDk4Ljc2MTU3MzksODcuMDA0MzgwOSBDOTguNzc0NjQxNCw4NC4yNTQ0NDUzIDk3LjczMzE0NzUsODEuNTAwOTEyMyA5NS42MzUzNjk3LDc5LjQwMzEzNDYgWiIgaWQ9Iui3r+W+hCI+CgkJPC9wYXRoPgoJPC9nPgo8L3N2Zz4K);
background-position: center center;
background-repeat: no-repeat;
}
}
2020-10-22 20:04:52 +08:00
}
2020-07-23 20:31:51 +08:00
2020-10-22 20:04:52 +08:00
&-headingPopover {
width: px2rem(200px);
padding: px2rem(10px) 0;
2020-07-23 20:31:51 +08:00
2020-10-22 20:04:52 +08:00
.Doc-headingList-item a {
display: inline-block;
width: 100%;
padding: 5px 10px;
2020-07-23 20:31:51 +08:00
}
}
&-headingList {
font-size: 12px;
font-weight: 500;
2020-07-29 15:33:25 +08:00
border-left: 1px solid #e8ebee;
2020-07-31 12:40:04 +08:00
user-select: none;
2020-07-23 20:31:51 +08:00
&-item {
padding-left: px2rem(12px);
2020-07-23 20:31:51 +08:00
a {
color: #666;
2020-07-28 18:23:02 +08:00
cursor: pointer;
2020-12-31 12:37:35 +08:00
text-decoration: none !important;
2020-07-28 18:23:02 +08:00
&:hover {
color: #333;
}
2020-07-23 20:31:51 +08:00
}
&.is-active {
&::before {
content: ' ';
border-left: px2rem(2px) solid var(--primary);
position: absolute;
left: 0;
height: px2rem(20px);
transform: translateY(px2rem(4px));
2020-07-23 20:31:51 +08:00
}
> a {
color: var(--primary);
2020-07-23 20:31:51 +08:00
}
}
}
}
&-content {
2020-07-28 10:03:53 +08:00
position: relative;
2020-07-23 20:31:51 +08:00
.Doc-title {
2020-07-29 15:33:25 +08:00
// margin-top: 50px;
2020-07-28 14:55:49 +08:00
padding-left: 40px;
2020-10-22 20:04:52 +08:00
position: relative;
2020-07-23 20:31:51 +08:00
h1 {
margin: 0;
2020-08-19 14:51:01 +08:00
font-size: 36px;
2020-07-23 20:31:51 +08:00
font-weight: bold;
}
2020-10-22 20:04:52 +08:00
.Doc-headingPopBtn {
color: #999;
position: absolute;
right: px2rem(50px);
top: px2rem(8px);
cursor: pointer;
> i {
font-size: px2rem(16px);
transform: rotateX(180deg);
}
&:hover {
font-weight: 700;
color: var(--primary);
2020-10-22 20:04:52 +08:00
}
}
2020-07-23 20:31:51 +08:00
}
.markdown-body {
> h1,
> h2 {
border-top: 1px solid #e0e7ec;
border-bottom: 0;
padding-bottom: 0;
padding-top: 35px;
margin: 55px 0 35px;
}
> p,
> blockquote,
> ul,
> ol,
> dl,
> table,
> pre {
margin-bottom: 30px;
}
}
}
&-footer {
2020-07-28 18:23:02 +08:00
margin: 60px 40px 80px;
2020-07-23 20:31:51 +08:00
padding-bottom: 25px;
2020-07-31 15:35:17 +08:00
&-divider {
border-top: 2px solid #e0e8ef;
margin: 25px 0;
}
&-fixme {
font-size: 16px;
color: #333;
text-align: right;
> a {
color: var(--primary);
2020-07-31 15:35:17 +08:00
font-weight: 600;
}
}
2020-07-23 20:31:51 +08:00
.Doc-navLinks {
display: flex;
justify-content: space-between;
&--prev,
&--next {
display: flex;
justify-content: space-between;
width: 330px;
height: 80px;
border: 1px solid #e8ebee;
border-radius: 3px;
padding: 20px;
transition: border-color ease-out 0.3s, color ease-out 0.3s;
box-shadow: #e8ebee 0px 3px 8px 0px;
color: #666;
2020-12-31 12:37:35 +08:00
text-decoration: none;
2020-07-23 20:31:51 +08:00
&:hover {
border-color: var(--primary);
color: var(--primary);
2020-07-23 20:31:51 +08:00
.Doc-navLinks-title {
color: var(--primary);
2020-07-23 20:31:51 +08:00
}
}
&:first-child:nth-last-child(1) {
flex: 1;
}
}
&-icon {
line-height: 40px;
}
&-body {
.Doc-navLinks-subtitle {
font-size: 12px;
}
.Doc-navLinks-title {
font-size: 16px;
font-weight: bold;
color: #333;
transition: color ease-out 0.3s;
}
}
}
}
.is-flipped {
&::before {
transform: rotate(180deg);
}
2020-07-23 20:31:51 +08:00
}
2020-07-28 14:55:49 +08:00
> .schema-wrapper {
2020-09-21 13:20:54 +08:00
padding: 0 35px;
2020-07-29 19:35:01 +08:00
2020-07-28 14:55:49 +08:00
> .a-Page,
> .cxd-Page,
> .antd-Page,
2020-07-28 14:55:49 +08:00
> .dark-Page {
2020-09-21 13:20:54 +08:00
position: relative;
height: 100%;
2020-07-28 14:55:49 +08:00
}
}
2020-07-23 20:31:51 +08:00
.a-AsideNav-item .a-AsideNav-item a,
.cxd-AsideNav-item .cxd-AsideNav-item a,
.antd-AsideNav-item .antd-AsideNav-item a,
.dark-AsideNav-item .dark-AsideNav-item a,
.a-AsideNav-item .a-AsideNav-item .a-AsideNav-item a,
.cxd-AsideNav-item .cxd-AsideNav-item .cxd-AsideNav-item a,
.antd-AsideNav-item .antd-AsideNav-item .antd-AsideNav-item a,
.dark-AsideNav-item .dark-AsideNav-item .dark-AsideNav-item a {
padding-left: 0 !important;
}
2020-10-22 20:04:52 +08:00
}
.Doc-navDrawer {
.a-Drawer,
.cxd-Drawer,
.antd-Drawer,
2020-10-22 20:04:52 +08:00
.dark-Drawer {
&-overlay {
background-color: rgba(25, 35, 60, 0.3);
}
&-content {
width: px2rem(220px);
2020-10-23 15:29:12 +08:00
overflow-y: auto;
overflow-x: hidden;
2021-03-05 10:53:10 +08:00
.HeaderLinks {
line-height: 64px;
box-shadow: 0 2px 10px 0 rgb(0 0 0 / 10%);
padding-left: px2rem(20px);
}
.Doc-navigation {
padding: px2rem(20px) 0 px2rem(20px) px2rem(20px);
}
2020-10-22 20:04:52 +08:00
}
&-close {
display: none;
}
}
}
2020-10-26 19:29:59 +08:00
.Doc-navDrawer,
2020-07-29 20:25:04 +08:00
.dark-Layout .Doc {
2020-10-22 20:04:52 +08:00
.dark-AsideNav-item {
2020-07-29 20:25:04 +08:00
> a {
color: #ccc;
&:hover {
color: #fff;
}
}
&.is-top > a {
color: #eee;
&:hover {
color: #fff;
}
}
&.is-active > a,
&.is-active.is-top > a {
color: var(--primary);
2020-07-29 20:25:04 +08:00
}
}
2020-10-26 19:29:59 +08:00
}
.dark-Layout .Doc {
.Doc-headingList-item a {
color: #fff;
&:hover {
color: #999;
}
}
2020-07-29 20:25:04 +08:00
&-footer {
.Doc-navLinks--prev,
.Doc-navLinks--next {
color: #eee;
}
.Doc-navLinks-title {
color: #fff;
}
2020-07-31 15:35:17 +08:00
&-fixme {
color: #fff;
2020-12-31 12:37:35 +08:00
> a {
text-decoration: none;
}
2020-07-31 15:35:17 +08:00
}
2020-07-29 20:25:04 +08:00
}
.Backtop {
2020-10-26 19:29:59 +08:00
color: #666;
2020-07-29 20:25:04 +08:00
&:hover {
color: var(--primary);
2020-07-29 20:25:04 +08:00
}
}
.markdown-body pre {
background-color: #282c34;
}
2020-10-26 19:29:59 +08:00
.dark-AsideNav-label {
color: #ccc;
}
2020-07-29 20:25:04 +08:00
}
2020-07-28 18:23:02 +08:00
.Backtop {
position: fixed;
right: 40px;
bottom: 40px;
width: 44px;
height: 44px;
text-align: center;
line-height: 44px;
border: 1px solid #e8ebee;
border-radius: 50%;
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
cursor: pointer;
color: #666;
font-size: 16px;
2020-10-22 20:04:52 +08:00
transition: all 0.2s ease-in-out;
2020-07-28 18:23:02 +08:00
opacity: 0;
2020-07-29 15:33:25 +08:00
z-index: -2;
2020-10-22 20:04:52 +08:00
background: #fff;
2020-07-28 18:23:02 +08:00
&:hover {
color: var(--primary);
2020-07-28 18:23:02 +08:00
}
&.visible {
opacity: 1;
2020-10-22 20:04:52 +08:00
z-index: 999;
}
}
@include media-breakpoint-up(xs) {
.DocLayout {
2020-10-22 20:04:52 +08:00
&-brandBar {
text-align: center;
}
}
}
@include media-breakpoint-up(md) {
.DocLayout {
2020-10-22 20:04:52 +08:00
&-brandBar {
text-align: left;
}
2020-07-28 18:23:02 +08:00
}
.app-wrapper .DocLayout-brandBar,
.app-wrapper .DocLayout-searchBar {
float: none;
display: inline-block;
}
2020-07-28 18:23:02 +08:00
}
2020-07-23 20:31:51 +08:00
@include media-breakpoint-up(lg) {
.Doc {
display: flex;
flex-direction: row;
width: 100%;
min-height: 100%;
position: absolute;
2020-07-23 20:31:51 +08:00
2020-07-29 15:33:25 +08:00
&-content,
.schema-wrapper {
2020-07-23 20:31:51 +08:00
flex: 1 auto;
width: 0;
}
&-toc > div {
position: fixed;
width: 220px;
top: 100px;
2020-07-29 15:33:25 +08:00
bottom: 21px;
2020-07-23 20:31:51 +08:00
overflow: auto;
}
&-nav > div {
position: fixed;
width: 200px;
top: 100px;
bottom: 0;
overflow-y: auto;
overflow-x: hidden;
2020-07-23 20:31:51 +08:00
border-right: 1px solid #e8ebee;
}
}
2020-07-29 19:35:01 +08:00
.app-wrapper {
.DocLayout {
2020-07-29 19:35:01 +08:00
&-header {
display: flex;
flex-direction: row;
&Bar {
flex: 1 auto;
width: 0;
}
}
&-brandBar {
width: 200px;
}
2020-07-29 19:35:01 +08:00
&-brandBar > div {
width: 220px;
position: fixed;
}
2020-12-28 12:27:28 +08:00
&-searchBar {
width: 120px;
}
2020-07-29 19:35:01 +08:00
&-searchBar > div {
width: 220px;
}
2020-10-22 20:04:52 +08:00
&-offScreen-btn {
line-height: 60px;
padding: 0 20px;
cursor: pointer;
}
2020-07-29 19:35:01 +08:00
}
}
2020-07-23 20:31:51 +08:00
}
@media screen and (min-width: 1640px) {
.Doc {
&-toc {
width: 1px;
}
&-nav {
width: 1px;
> div {
2020-07-29 19:35:01 +08:00
margin-left: -199px;
}
}
}
.app-wrapper {
.DocLayout {
2020-07-29 19:35:01 +08:00
&-brandBar {
width: 1px;
> div {
margin-left: -220px;
}
}
2020-12-28 12:27:28 +08:00
&-searchBar {
width: 1px;
}
2020-07-23 20:31:51 +08:00
}
}
}
2020-08-20 23:56:28 +08:00
2020-08-21 17:33:31 +08:00
.Doc-searchDrawer {
border: 0;
.a-Drawer-content,
.cxd-Drawer-content,
.antd-Drawer-content,
2020-08-21 17:33:31 +08:00
.dark-Drawer-content {
border: 0;
2020-08-21 12:54:47 +08:00
}
2020-08-21 17:33:31 +08:00
.a-Drawer-close,
.cxd-Drawer-close,
.antd-Drawer-close,
2020-08-21 17:33:31 +08:00
.dark-Drawer-close {
display: none;
}
.a-Drawer-overlay,
.cxd-Drawer-overlay,
.antd-Drawer-overlay,
2020-08-21 17:33:31 +08:00
.dark-Drawer-overlay {
background-color: rgba(25, 35, 60, 0.3);
}
.search-bar {
padding: 22px 20px;
border: 0;
border-bottom: 1px solid #e8ebee;
border-radius: 0;
font-size: 16px;
font-weight: 500;
> .icon-search {
margin-right: 10px;
2020-08-21 17:48:39 +08:00
top: 1px;
2020-08-21 17:33:31 +08:00
}
}
.search-result {
// background-color: #fff;
top: 65px;
bottom: 0;
left: 0;
right: 0;
position: fixed;
overflow-y: scroll;
overflow-x: hidden;
// box-shadow: 0px 2px 7px #888888;
h4,
p {
padding: 20px;
border-bottom: 1px solid #e8ebee;
margin: 0;
&:hover {
background-color: #f5f7f9;
}
}
h4 {
font-weight: 500;
position: relative;
color: #000;
&::before {
content: ' ';
border-left: 2px solid var(--primary);
2020-08-21 17:33:31 +08:00
margin-right: 10px;
}
}
p {
color: #666;
strong {
color: #19233c;
background-color: rgba(16, 140, 238, 0.3);
font-weight: 700;
}
}
2020-08-21 12:54:47 +08:00
}
2020-08-20 23:56:28 +08:00
}
2020-12-01 11:43:30 +08:00
body.dark {
2020-08-20 23:56:28 +08:00
.search-result {
background-color: #333538;
}
}
2020-10-29 19:52:25 +08:00
// 让 echarts 编辑器的 tabs 更紧凑
.echarts-editor > .a-Tabs-links {
2020-10-30 17:58:23 +08:00
width: 4rem;
flex-shrink: 0;
2020-10-29 19:52:25 +08:00
> .a-Tabs-link > a {
2020-11-02 19:39:21 +08:00
padding: 0.5rem 0.5rem;
2020-10-29 19:52:25 +08:00
}
}
.echarts-tab {
max-height: 70vh;
overflow: auto;
}
.mobile-frame {
border: 5px solid #565656;
display: block;
margin: 0 auto;
border-radius: 30px;
2020-12-09 00:35:24 +08:00
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.Playgroud {
border: 1px solid #ddd;
background: var(--body-bg);
display: flex;
2020-12-09 00:35:24 +08:00
body.dark & {
background: #191c22;
color: #fff;
}
&-preview {
position: relative;
2020-12-09 23:47:43 +08:00
display: flex;
align-items: stretch;
flex-direction: column;
flex-grow: 1;
2022-02-24 11:28:52 +08:00
// overflow: hidden;
2020-12-09 23:47:43 +08:00
> div {
flex: 1;
}
2020-12-09 00:35:24 +08:00
}
&-code {
border-left: 1px solid #ddd;
width: 350px;
flex-shrink: 0;
2020-12-09 00:35:24 +08:00
}
}
@media screen and (max-width: 767px) {
.Playgroud {
flex-direction: column;
&-code {
border-left: none;
width: auto;
height: 200px;
}
}
}