wecui
Version:
一款基于Vue2.x版本的移动端web组件
319 lines (283 loc) • 6.59 kB
CSS
@import "./_grid.css";
@reset-global pc;
$navItem-active-color: #2db7f5 !default;
$text-link-color: #23de23 !default;
$normal-font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif !default;
* { box-sizing: border-box; }
html, body {
height: 100%;
-webkit-overflow-scrolling: touch;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@media (max-width: 768px) {
overflow: hidden;
}
}
body {
font-family: $normal-font-family;
color: #666;
font-size: 15px;
}
h1, h2, h3, h4, h5, h6 {
margin: 1em 0;
color: #404040;
font-weight: 700;
}
h1 {
@media (max-width: 768px) {
margin-top: 0;
}
}
h2 {
margin-bottom: .75em;
}
h1 { font-size: 28px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }
h5 { font-size: 14px; }
h6 { font-size: 12px; }
a {
color: #2db7f5;
text-decoration: none;
&.link-ul {
text-decoration: underline;
}
}
.md-pages {
pre {
overflow: auto;
display: block;
padding: 9.5px;
margin: 20px;
font-size: 13px;
line-height: 1.42857143;
color: #333;
word-break: break-all;
word-wrap: break-word;
background-color: #f5f5f5;
border-radius: 4px;
@media (max-width: 768px) {
margin: 15px 0;
}
}
p {
margin-bottom: 15px;
}
blockquote {
font-size: 90%;
color: #999;
border-left: 4px solid #e9e9e9;
padding-left: .8em;
margin: 1em 0;
font-style: italic;
& a {
font-style: normal;
}
}
li {
list-style: circle inside;
font-style: initial;
font-size: 14px 1.8;
}
.markdownIt-Anchor {
color: #b8bcbd;
}
}
.docs-h2 {
border-bottom: 1px solid #ececec;
padding-bottom: 10px;
}
.docs-header {
padding: 0 15px;
}
/* main-wrapper */
.main-wrapper {
@neat-outer-container;
max-width: none;
height: 100%;
@media (max-width: 768px) {
transition: transform .3s ease-in-out;
&.slide-in-left {
transform: translate3d(80%, 0, 0);
& aside {
opacity: 1;
}
}
}
& aside {
@neat-span-columns 3 12;
padding: 30px;
height: 100%;
background-color: #4d394b;
color: #fff;
& .salad-logo {
display: inline-block;
width: 82px;
margin-left: 30px;
position: absolute;
left: 0;
top: 6px;
}
@media (max-width: 768px) {
position: relative;
margin-left: -80%;
margin-right: 0;
left: 0;
z-index: 10;
width: 80%;
opacity: 0;
transition: opacity .3s;
}
}
& main {
@neat-span-columns 9 12;
height: 100%;
overflow: auto;
padding-right: 180px;
@media (max-width: 768px) {
width: 100%;
position: relative;
padding: * 15px;
height: 100%;
overflow: hidden;
& section {
height: 100%;
padding-bottom: 55px;
overflow: auto;
}
}
& header {
padding: 10px 0;
}
}
& .aside-top {
border-bottom: 1px dashed #ccc;
padding-bottom: 20px;
padding-left: 100px;
margin-bottom: @padding-bottom;
font-family: 'Lobster', cursive;
font-size: 3em 1;
& span {
font-size: 0.75em;
font-family: $normal-font-family;
}
}
}
.docs-navbar {
/* 导航 */
& .nav-item a {
padding: 0 15px;
height: 32px;
line-height: @height;
font-size: 14px;
border-left: 1px solid #ccc;
display: block;
text-decoration: none;
color: #fff;
position: relative;
transition: color .3s, background-color .3s;
&:hover {
color: $navItem-active-color;
background-color: rgba(0,0,0,0.2);
border-radius: 0 3px 3px 0;
text-decoration: none;
}
}
/* 导航激活 */
& .nav-item.active > a {
color: $navItem-active-color;
}
/* 二级导航 */
& .nav-item .nav-item > a {
padding: 5px 25px;
font-size: 13px;
position: relative
}
& .subnav .nav-item.active a {
&:before {
content: "";
position: absolute;
height: 7px;
width: 7px;
background-color: $navItem-active-color;
top: 10px;
left: -4px;
border-radius: 100%;
}
}
}
.fixed-nav {
position: fixed 50px 15px * *;
border-left: 1px solid #eee;
background-color: #fff;
width: 150px;
li {
list-style: none;
line-height: 1.5;
}
a {
color: #666;
padding: 5px 10px;
display: block;
white-space: nowrap;
font-size: 14px;
}
@media (max-width: 768px) {
display: none;
}
}
.box {
padding: 15px 0 0;
margin-bottom: 30px;
background-image: linear-gradient(90deg, #F5F5F5 4.16666667%, transparent 4.16666667%, transparent 8.33333333%, #F5F5F5 8.33333333%, #F5F5F5 12.5%, transparent 12.5%, transparent 16.66666667%, #F5F5F5 16.66666667%, #F5F5F5 20.83333333%, transparent 20.83333333%, transparent 25%, #F5F5F5 25%, #F5F5F5 29.16666667%, transparent 29.16666667%, transparent 33.33333333%, #F5F5F5 33.33333333%, #F5F5F5 37.5%, transparent 37.5%, transparent 41.66666667%, #F5F5F5 41.66666667%, #F5F5F5 45.83333333%, transparent 45.83333333%, transparent 50%, #F5F5F5 50%, #F5F5F5 54.16666667%, transparent 54.16666667%, transparent 58.33333333%, #F5F5F5 58.33333333%, #F5F5F5 62.5%, transparent 62.5%, transparent 66.66666667%, #F5F5F5 66.66666667%, #F5F5F5 70.83333333%, transparent 70.83333333%, transparent 75%, #F5F5F5 75%, #F5F5F5 79.16666667%, transparent 79.16666667%, transparent 83.33333333%, #F5F5F5 83.33333333%, #F5F5F5 87.5%, transparent 87.5%, transparent 91.66666667%, #F5F5F5 91.66666667%, #F5F5F5 95.83333333%, transparent 95.83333333%);
& .box-text {
margin-bottom: 15px;
font-size: 20px;
}
}
.box-col {
background: rgba(24, 115, 216, 0.6);
margin-bottom: 10px;
padding: 15px;
min-height: 78px;
color: #fff;
font-size: 18px;
white-space: nowrap;
overflow: auto;
@media (max-width: 768px) {
font-size: 14px;
}
}
.blockquote-card {
border: 1px dashed #dedede;
padding: 15px;
font-style: normal;
font-size: 15px;
position: relative;
}
.navbar-toggle {
width: 45px;
height: 45px;
display: none;
-webkit-appearance: none;
background-color: #fff;
border: 1px dashed #ccc;
border-radius: 4px;
outline: none;
&.btn-pressed {
background: #e9e9e9;
}
@media (max-width: 768px) {
display: inline-block;
}
& span {
display: block;
width: 80%;
height: 2px;
margin: 4px auto;
background-color: #444;
}
}
footer {
text-align: center;
}