| |
| $brand-color: #00B4FF; |
| |
| /* // index page */ |
| .page-wrapper { |
| display: flex; |
| flex-direction: row; |
| flex-wrap: nowrap; |
| justify-content: flex-start; |
| align-items: stretch; |
| height: 100%; |
| } |
| .examples-layout { |
| .aside { |
| height: 100%; |
| padding: 40px 0; |
| min-height: 100%; |
| max-height: 100%; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| overflow-y: auto; |
| &.doc-nav { |
| width: 18%; |
| max-width: 320px; |
| min-width: 200px; |
| } |
| } |
| } |
| .github { |
| margin-bottom: 30px; |
| } |
| .github-logo { |
| width: 64px; |
| height: 64px; |
| } |
| .tab-list { |
| width: 100%; |
| list-style: none; |
| padding: 0; |
| } |
| .tab-item { |
| list-style: none; |
| padding: 15px; |
| color: #727272; |
| font-size: 26px; |
| cursor: pointer; |
| } |
| .zh .tab-item { |
| font-size: 28px; |
| text-align: center; |
| letter-spacing: 0.2em; |
| } |
| .en .tab-item { |
| padding-left: 40px; |
| } |
| .tab-item:hover { |
| background-color: #FAFAFA; |
| } |
| .tab-item.active-tab { |
| background-color: #EEEEEE; |
| color: $brand-color; |
| } |
| .main { |
| flex: 1; |
| height: 100%; |
| min-height: 100%; |
| max-height: 100%; |
| overflow-y: auto; |
| } |
| |
| .example-panel { |
| padding: 0 20px 0 30px; |
| } |
| .example-section { |
| margin: 20px 0 60px; |
| } |
| .example-list { |
| display: flex; |
| flex-direction: row; |
| flex-wrap: wrap; |
| justify-content: flex-start; |
| } |
| .title { |
| height: 50px; |
| line-height: 50px; |
| font-size: 36px; |
| color: rgb(0, 180, 255); |
| cursor: pointer; |
| } |
| .desc { |
| width: 80%; |
| max-width: 800px; |
| color: #888; |
| a, a:link { |
| color: rgba($brand-color, 0.8); |
| } |
| a:hover, a:active { |
| color: $brand-color; |
| } |
| } |
| .example-card { |
| display: flex; |
| flex-direction: column; |
| justify-content: flex-start; |
| align-items: center; |
| margin: 15px 35px; |
| color: #666; |
| } |
| .preview { |
| display: block; |
| width: 182px; |
| height: 329px; |
| position: relative; |
| background: url("https://gw.alicdn.com/tfs/TB1rRl8bwnD8KJjy1XdXXaZsVXa-661-1195.png") 0 0 no-repeat; |
| background-size: 182px 329px; |
| transition: transform ease-in-out .2s; |
| &:hover { |
| transform: scale(1.03); |
| } |
| } |
| .screenshot { |
| position: absolute; |
| width: 145px; |
| height: 228px; |
| top: 42px; |
| left: 17.5px; |
| } |
| .message { |
| flex: 1; |
| text-align: center; |
| } |
| .tag { |
| border: 1px solid #DDD; |
| margin: 0 12px; |
| } |