From 673e28ec89639bb7ee7ff8496f7f168cceecdd92 Mon Sep 17 00:00:00 2001 From: mmaoyu Date: Mon, 13 May 2024 14:46:47 +0800 Subject: [PATCH] fix: restore docs.scss to resolve version less than v1.9 docs links overlapping Signed-off-by: mmaoyu --- css/docs.scss | 432 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 432 insertions(+) create mode 100644 css/docs.scss diff --git a/css/docs.scss b/css/docs.scss new file mode 100644 index 000000000..3d6c67420 --- /dev/null +++ b/css/docs.scss @@ -0,0 +1,432 @@ +--- +--- +@import 'vars'; +@import 'minima'; + +#content { + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + + #holder { + margin: 90px 0 25px; + + @media (max-width: $smWidth) { + margin: 45px 0 25px; + } + } + + h1 { + margin: 0 0 36px; + font-size: 25px; + line-height: normal; + color: $black; + } + + h2 { + margin: 60px 0 20px; + font-size: 25px; + line-height: normal; + color: $black; + } + + a { + font-family: $fontHeader; + font-size: 16px; + font-weight: 500; + color: $blue; + text-decoration: none; + transition: all $timingFast ease-in-out; + + &:visited { + color: $blue; + } + + &:hover, + &:focus, + &:active { + color: $blueDark; + } + } + + p { + font-size: 16px; + font-weight: 300; + line-height: normal; + } + + img { + width: 100%; + height: auto; + } + + code { + font-family: monospace; + font-size: 14px; + color: $textMuted; + background-color: $codeBackground; + border-radius: 0; + border: none; + } + + .highlight { + &, + code, + .go { + background-color: $codeBackground; + font-size: 14px; + color: $textDark; + } + } + + .highlighter-rouge { + .highlight { + background-color: $codeBackground; + font-size: 14px; + border: none; + padding: 12px; + margin-bottom: 15px; + } + + pre.highlight { + margin-bottom: 0; + } + } + + pre > code { + background-color: $codeBackground; + } + + .docs-header { + display: -ms-flexbox; + display: flex; + -ms-flex-pack: justify; + justify-content: space-between; + -ms-flex-align: center; + align-items: center; + max-width: $pageWidth; + padding: 37px 0 38px; + + @media (max-width: $smWidth) { + -ms-flex-align: start; + align-items: flex-start; + -ms-flex-direction: column; + flex-direction: column; + } + + h1 { + margin: 0; + display: -ms-inline-flexbox; + display: inline-flex; + + @media (max-width: $smWidth) { + margin-bottom: 15px; + } + } + + .versions { + display: -ms-flexbox; + display: flex; + position: relative; + -ms-flex-direction: column; + flex-direction: column; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: center; + justify-content: center; + + &:before { + content: ''; + position: absolute; + bottom: -4px; + height: 4px; + width: 100%; + border-radius: 3px; + background-color: $blue; + } + + &:hover { + .versions-dropdown-content { + display: -ms-flexbox; + display: flex; + + @media (max-width: $smWidth) { + margin-left: 10px; + } + } + } + + a[role='button'] { + color: $textDark; + padding: 0 25px 0 3px; + } + + .versions-dropdown-content { + display: none; + -ms-flex-direction: column; + flex-direction: column; + -ms-flex-align: start; + align-items: flex-start; + position: absolute; + top: 24px; + background-color: $white; + padding: 15px; + border-radius: 10px; + box-shadow: -2px 5px 8px 0 rgba($black, 0.1); + z-index: 1; + white-space: nowrap; + + a { + font-size: 17px; + position: relative; + color: $textDark; + + &:before { + content: ''; + position: absolute; + bottom: -4px; + height: 4px; + width: 0; + border-radius: 3px; + background-color: transparent; + transition: all $timingFastest ease-in-out; + } + + + a { + margin-top: 10px; + } + + &:hover, + &:focus, + &:active { + color: $textDark; + + &:before { + width: 100%; + background-color: $blue; + } + } + } + } + + img { + position: absolute; + right: 3px; + width: 16px; + height: auto; + z-index: 0; + } + } + + select { + height: 24px; + border: none; + background-color: transparent; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + color: $textDark; + font-family: $fontHeader; + font-weight: 500; + font-size: 18px; + padding: 0 22px 0 0px; + cursor: pointer; + z-index: 1; + + &::-ms-expand { + display: none; /* hide the default arrow in ie10 and ie11 */ + } + + &:focus, + &:-moz-focusring { + outline: 0; + color: transparent; + text-shadow: 0 0 0 $black; + } + + option { + font-size: 16px; + } + } + } + + .page { + max-width: $pageWidth; + display: -ms-flexbox; + display: flex; + + @media (max-width: $smWidth) { + -ms-flex-direction: column; + flex-direction: column; + } + } + + .docs-menu { + min-width: 260px; + padding-right: 30px; + + @media (max-width: $mdWidth) { + padding-right: 0; + } + + & > ul { + top: 0; + position: -webkit-sticky; + position: sticky; + padding-top: 30px; + margin-bottom: 20px; + + & > li { + transition: height 0.3s ease-in-out; + overflow: hidden; + margin-bottom: 40px; + + &.open { + height: auto; + margin-bottom: 30px; + } + } + } + + ul { + margin-left: 0; + list-style: none; + min-width: 0; + + &:first-of-type { + li.children { + padding-right: 24px; + } + } + + li { + padding-left: 0; + position: relative; + + &.current { + color: $blue; + opacity: 0.76; + } + + &.childCurrent > a { + color: $blue; + } + + &, + a { + font-family: $fontHeader; + font-weight: 500; + font-size: 16px; + color: $textDark; + } + + ul { + margin: 20px 0 0 20px; + + li:not(:last-of-type) { + margin-bottom: 16px; + } + + li, + a { + font-family: $fontBody; + font-weight: normal; + color: $textDark; + font-size: 12px; + } + + ul { + margin: 0 0 0 10px; + } + } + + .arrow { + position: absolute; + top: 0; + right: 0; + height: 24px; + width: 24px; + cursor: pointer; + z-index: 1; + + img { + position: absolute; + top: 9px; + right: 6px; + width: 12px; + height: auto; + } + } + + &.open .arrow img { + -webkit-transform: rotateX(180deg); + transform: rotateX(180deg); + transition: -webkit-transform $timingFast ease-in-out; + transition: transform $timingFast ease-in-out; + transition: transform $timingFast ease-in-out, -webkit-transform $timingFast ease-in-out; + } + } + } + } + + .docs-content { + -ms-flex: 1; + flex: 1; + min-width: 0; + position: relative; + + a { + font-family: $fontBody; + font-size: 16px; + font-weight: 300; + } + + .docs-actions { + position: absolute; + line-height: 30px; + right: 0; + + a { + font-family: $fontHeader; + font-weight: 500; + font-size: 16px; + } + } + + table { + text-align: left; + + th { + white-space: nowrap; + } + + th:not(:last-of-type), + td:not(:last-of-type) { + padding: 0 15px 5px 0; + } + } + } + + .alert { + padding: 20px; + margin-bottom: 15px; + margin-top: 41px; + border-radius: 4px; + border: 1px solid #000; + + &.master { + border-color: #f44336; + background-color: #f44336; + color: #ffffff; + p { + color: #ffffff; + } + } + + &.old { + border-color: #2196f3; + color: #2196f3; + } + } +}