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{ |
html, body{ |
||||
color: @red; |
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; |
* 用户头像End |
||||
width: 1200px; |
**/ |
||||
|
.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