12 changed files with 362 additions and 58 deletions
@ -1,2 +0,0 @@ |
|||
@import (reference) "./__meida.less"; |
|||
@red: red; |
|||
@ -0,0 +1,57 @@ |
|||
@import (reference) "./meida.less"; |
|||
|
|||
.hairline(@content) { |
|||
&::after { |
|||
content: " "; |
|||
box-sizing: border-box; |
|||
pointer-events: none; |
|||
border: 0 solid #ebedf0; |
|||
position: absolute; |
|||
top: -50%; |
|||
right: -50%; |
|||
bottom: -50%; |
|||
left: -50%; |
|||
-webkit-transform: scale(0.5); |
|||
transform: scale(0.5); |
|||
@content(); |
|||
} |
|||
} |
|||
|
|||
.hairline--all() { |
|||
.hairline({ |
|||
border-width: 1px; |
|||
}); |
|||
} |
|||
.hairline { |
|||
.hairline--all(); |
|||
} |
|||
|
|||
.ellipsis(@lines: 1) when (@lines = 1){ |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
.ellipsis{ |
|||
.ellipsis() |
|||
} |
|||
.over-ellipsis{ |
|||
display: -webkit-box; |
|||
-webkit-box-orient: vertical; |
|||
-webkit-line-clamp: 3; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
word-break: break-all; |
|||
} |
|||
|
|||
.clearfix { |
|||
&:after { |
|||
clear: both; |
|||
content: '.'; |
|||
display: block; |
|||
height: 0; |
|||
line-height: 0; |
|||
overflow: hidden; |
|||
} |
|||
*height: 1%; |
|||
} |
|||
@ -0,0 +1,48 @@ |
|||
/* http://meyerweb.com/eric/tools/css/reset/ |
|||
v2.0 | 20110126 |
|||
License: none (public domain) |
|||
*/ |
|||
|
|||
html, body, div, span, applet, object, iframe, |
|||
h1, h2, h3, h4, h5, h6, p, blockquote, pre, |
|||
a, abbr, acronym, address, big, cite, code, |
|||
del, dfn, em, img, ins, kbd, q, s, samp, |
|||
small, strike, strong, sub, sup, tt, var, |
|||
b, u, i, center, |
|||
dl, dt, dd, ol, ul, li, |
|||
fieldset, form, label, legend, |
|||
table, caption, tbody, tfoot, thead, tr, th, td, |
|||
article, aside, canvas, details, embed, |
|||
figure, figcaption, footer, header, hgroup, |
|||
menu, nav, output, ruby, section, summary, |
|||
time, mark, audio, video { |
|||
margin: 0; |
|||
padding: 0; |
|||
border: 0; |
|||
font-size: 100%; |
|||
font: inherit; |
|||
vertical-align: baseline; |
|||
} |
|||
/* HTML5 display-role reset for older browsers */ |
|||
article, aside, details, figcaption, figure, |
|||
footer, header, hgroup, menu, nav, section { |
|||
display: block; |
|||
} |
|||
body { |
|||
line-height: 1; |
|||
} |
|||
ol, ul { |
|||
list-style: none; |
|||
} |
|||
blockquote, q { |
|||
quotes: none; |
|||
} |
|||
blockquote:before, blockquote:after, |
|||
q:before, q:after { |
|||
content: ''; |
|||
content: none; |
|||
} |
|||
table { |
|||
border-collapse: collapse; |
|||
border-spacing: 0; |
|||
} |
|||
@ -1,5 +1,20 @@ |
|||
@import (reference) "./__common.less"; |
|||
@import "./__less/common.less"; |
|||
|
|||
.@{red}-w{ |
|||
color: @red; |
|||
html, body{ |
|||
background-color: #43b244; |
|||
color: #fffef8; |
|||
height: 100%; |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
body{ |
|||
font: 12px/1.5 Tahoma,Helvetica,Arial,'宋体',sans-serif; |
|||
} |
|||
|
|||
.container{ |
|||
margin: 0 auto; |
|||
width: 960px; |
|||
} |
|||
|
|||
|
|||
|
|||
@ -1,10 +1,157 @@ |
|||
@red: green; |
|||
.@{red}{ |
|||
color: @red; |
|||
|
|||
/** |
|||
* 用户头像 |
|||
**/ |
|||
.userProfile{ |
|||
display: flex; |
|||
align-items: center; |
|||
height: 100px; |
|||
width: 300px; |
|||
font-size: 2.0833em; |
|||
line-height: 1.3; |
|||
.head{ |
|||
width: 100px; |
|||
height: 100%; |
|||
position: relative; |
|||
text-align: center; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
cursor: pointer; |
|||
.avatar{ |
|||
width: 100%; |
|||
height: 100%; |
|||
position: absolute; |
|||
border-radius: 50%; |
|||
overflow: hidden; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
top: 0; |
|||
transition: transform .6s linear, left .6s linear; |
|||
} |
|||
&:hover .avatar{ |
|||
transform: rotate(-360deg); |
|||
left: -105%; |
|||
} |
|||
} |
|||
.text{ |
|||
flex: 1; |
|||
width: 0; |
|||
margin-left: 10px; |
|||
.userName{ |
|||
font-size: 1em; |
|||
} |
|||
.userDesc{ |
|||
margin-top: 4px; |
|||
font-size: .7em; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.container{ |
|||
margin: 0 auto; |
|||
width: 1200px; |
|||
/** |
|||
* 用户头像End |
|||
**/ |
|||
.mb{ |
|||
margin-bottom: 20px; |
|||
} |
|||
header{ |
|||
position: sticky; |
|||
top: 0; |
|||
z-index: 999; |
|||
font-size: 1.333em; |
|||
background-color: #fffef870; |
|||
border-bottom-left-radius: 6px; |
|||
border-bottom-right-radius: 6px; |
|||
margin-bottom: 15px; |
|||
padding: 0 30px; |
|||
height: 35px; |
|||
line-height: 35px; |
|||
.item{ |
|||
cursor: pointer; |
|||
padding: 0 10px; |
|||
&:hover{ |
|||
background-color: #fffef870; |
|||
} |
|||
} |
|||
.menulist{ |
|||
li{ |
|||
float: left; |
|||
} |
|||
} |
|||
.oplist{ |
|||
li{ |
|||
float: right; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.panel{ |
|||
// background-color: #fffef870; |
|||
border-radius: 6px; |
|||
padding: 8px; |
|||
text-align: center; |
|||
position: relative; |
|||
h1{ |
|||
font-size: 2.9116em; |
|||
} |
|||
.author{ |
|||
font-size: 1.0833em; |
|||
} |
|||
.content{ |
|||
text-align: left; |
|||
font-size: 1.6667em; |
|||
margin-top: 15px; |
|||
line-height: 1.2; |
|||
word-break: break-all; |
|||
} |
|||
.float{ |
|||
cursor: pointer; |
|||
font-size: 1.1667em; |
|||
position: absolute; |
|||
right: 100%; |
|||
top: 200px; |
|||
background-color: #fffef870; |
|||
border-top-left-radius: 6px; |
|||
border-bottom-left-radius: 6px; |
|||
width: 45px; |
|||
word-break: break-all; |
|||
padding: 4px 6px; |
|||
&:hover{ |
|||
animation: bounce .4s; |
|||
} |
|||
} |
|||
} |
|||
|
|||
@keyframes bounce { |
|||
0%{ |
|||
transform: scale(1); |
|||
} |
|||
50%{ |
|||
transform: scale(1.2); |
|||
} |
|||
100%{ |
|||
transform: scale(1); |
|||
} |
|||
} |
|||
|
|||
.line{ |
|||
height: 15px; |
|||
width: 200px; |
|||
margin: 0 auto; |
|||
cursor: pointer; |
|||
&:hover{ |
|||
height: 15px; |
|||
&::after{ |
|||
height: 15px; |
|||
} |
|||
} |
|||
&::after{ |
|||
content: ""; |
|||
height: 5px; |
|||
display: block; |
|||
border-radius: 6px; |
|||
background-color: #fffef870; |
|||
transition: height .4s ease; |
|||
} |
|||
} |
|||
@ -0,0 +1,6 @@ |
|||
const glob = require('glob') |
|||
|
|||
|
|||
console.log(glob.sync("src/common/**/*", { |
|||
ignore: "src/**/__*/**" |
|||
})); |
|||
Loading…
Reference in new issue