| #app .page { padding-bottom: 0; } |
| #app .sidebar { width: 15rem; } |
| #app .content:not(.custom) { max-width: 850px; } |
| #app .custom-block.tip, #app .custom-block.warning, #app .custom-block.danger { padding: 0.1rem 1rem; border-left-width: 0.2rem; } |
| #app blockquote { font-size: 15px; } |
| #app table, #app thead, #app tr { width: 100% } |
| |
| #app { |
| .badge { |
| font-size: 12px; |
| } |
| .warning .custom-block-title { |
| padding-left: 21px; |
| color: #606273; |
| background: url(https://gw.alicdn.com/tfs/TB1tbEwACzqK1RjSZFjXXblCFXa-16-16.svg) 0 5px no-repeat; |
| } |
| .danger { |
| border-color: #FF6633; |
| background-color: #FFF2EE; |
| .custom-block-title { |
| padding-left: 21px; |
| color: #606273; |
| background: url(https://gw.alicdn.com/tfs/TB1mwIBAwHqK1RjSZJnXXbNLpXa-16-16.svg) 0 5px no-repeat; |
| } |
| } |
| .tip { |
| border-color: #00B4FF; |
| .custom-block-title { |
| padding-left: 21px; |
| color: #606273; |
| background: url(https://gw.alicdn.com/tfs/TB1nbAzApzqK1RjSZFoXXbfcXXa-16-16.svg) 0 5px no-repeat; |
| } |
| } |
| } |
| |
| .theme-container.page-module-modal { |
| table th:last-of-type { |
| width: 15%; |
| } |
| } |
| |
| .theme-container.page-vue-in-weex { |
| table th:first-of-type { |
| width: 40%; |
| & + th { |
| width: 20%; |
| } |
| } |
| table th:last-of-type { |
| width: 40%; |
| } |
| } |
| |
| #app .demo-wrapper .content:not(.custom) { |
| max-width: 1100px; |
| } |
| |
| #app .demo-wrapper .page-nav { |
| max-width: 1100px; |
| } |
| |
| #app .demo-wrapper .content { |
| h2, h3 { |
| margin-top: -3.1rem; |
| padding-top: 2rem; |
| margin-bottom: 0; |
| } |
| ul { |
| list-style: none; |
| display: flex; |
| flex-wrap: wrap; |
| padding: 0; |
| margin: 40px -13px; |
| li { |
| margin-left: 13px; |
| margin-right: 13px; |
| } |
| } |
| } |
| |
| #app .help .page { |
| padding-bottom: 0; |
| padding-right: 0; |
| .content { |
| margin: 0; |
| padding: 0; |
| max-width: 10000px; |
| } |
| .page-edit { |
| padding: 0; |
| } |
| .render-md p { |
| margin: 0; |
| } |
| } |
| |
| #app .tool .page { |
| padding-bottom: 0; |
| padding-right: 0; |
| .content { |
| margin: 0; |
| padding: 0; |
| max-width: 10000px; |
| } |
| .page-edit, .page-nav, .license-wrap { |
| display: none; |
| } |
| } |
| |
| #app .tool-ide .page { |
| padding: 0; |
| .content { |
| margin: 0; |
| padding: 0; |
| padding-left: 15rem; |
| max-width: 10000px; |
| } |
| .page-edit, .page-nav, .license-wrap { |
| display: none; |
| } |
| h1 { |
| display: none; |
| } |
| } |
| |
| #app .tool-kit .page { |
| padding: 0; |
| .content { |
| margin: 0; |
| padding: 0; |
| padding-left: 15rem; |
| max-width: 10000px; |
| } |
| img { |
| width: 100%; |
| } |
| .page-edit, .page-nav, .license-wrap { |
| display: none; |
| } |
| } |
| |
| #app .noFooter .page { |
| .page-edit, .page-nav, .license-wrap { |
| display: none; |
| } |
| } |
| |
| #app .community .page { |
| .tag { |
| background: rgb(234,249,255); |
| color: #00b4ff; |
| .content { |
| padding: 0; |
| & > *:first-child { |
| margin-top: 0; |
| } |
| } |
| .actions { |
| color: #979A9C; |
| font-size: .85em; |
| margin-left: 10px; |
| } |
| } |
| .vue-tags-input .input { |
| border-radius: 4px; |
| padding: 2px 4px; |
| ul { |
| line-height: 1; |
| } |
| .new-tag-input { |
| min-width: 300px; |
| height: 14px; |
| } |
| } |
| } |
| |
| .md h2 { |
| padding-top: 0; |
| } |
| .md pre { |
| background-color #f8f9fb; |
| padding: 1rem; |
| code { |
| display: block; |
| color: #828282; |
| width: 100%; |
| overflow: auto; |
| } |
| } |
| |
| @media screen and (max-width: 1700px) |
| #app .demo-wrapper .content:not(.custom) |
| margin-left 13rem |
| |
| #app .demo-wrapper .page-nav |
| margin-left 13rem |
| |
| @media (max-width: 719px) |
| #app .demo-wrapper .content:not(.custom) |
| margin-left 0 |
| |
| #app .demo-wrapper .page-nav |
| margin-left 0 |
| |
| @media screen and (max-width: 1400px) |
| #app .tags .content:not(.custom) |
| margin-left 0 |
| |
| // |
| // Pagination (multiple pages) |
| // -------------------------------------------------- |
| .pagination-wrap { |
| text-align: center; |
| } |
| .pagination { |
| display: inline-block; |
| margin: 20px auto; |
| border-radius: 4px; |
| overflow: hidden; |
| |
| > li { |
| display: inline; // Remove list-style and block-level defaults |
| > a, |
| > span { |
| position: relative; |
| float: left; // Collapse white-space |
| padding: 6px 12px; |
| line-height: 1.4; |
| text-decoration: none !important; |
| color: #00b4ff; |
| background-color: #fff; |
| border: 1px solid #ddd; |
| margin-left: -1px; |
| } |
| &:first-child { |
| > a, |
| > span { |
| margin-left: 0; |
| border-top-left-radius: 4px; |
| border-bottom-left-radius: 4px; |
| } |
| } |
| &:last-child { |
| > a, |
| > span { |
| border-top-right-radius: 4px; |
| border-bottom-right-radius: 4px; |
| } |
| } |
| } |
| |
| > li > a, |
| > li > span { |
| outline: none; |
| &:hover, |
| &:focus { |
| z-index: 3; |
| color: #23527c; |
| background-color: #eee; |
| border-color: #ddd; |
| } |
| } |
| |
| > .active > a, |
| > .active > span { |
| &, |
| &:hover, |
| &:focus { |
| z-index: 2; |
| color: #fff; |
| background-color: #00b4ff; |
| border-color: #ddd; |
| cursor: default; |
| } |
| } |
| |
| > .disabled { |
| > span, |
| > span:hover, |
| > span:focus, |
| > a, |
| > a:hover, |
| > a:focus { |
| color: #777; |
| border-color: #ddd; |
| cursor: not-allowed; |
| } |
| } |
| } |