hexagon thư viện tạo avatar Canvas (ok)
https://codepen.io/tmahour1/pen/mdVeEbB
Ví dụ tổng quát:
Sử dụng xoay quanh với 6 vấn đề: user-avatar-border, user-avatar-content, user-avatar-progress, user-avatar-progress-border, user-avatar-badge, user-avatar-badge-content, user-avatar-badge-text
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - A Pen by Tarun Mahour</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<a class="user-short-description-avatar user-avatar medium" href="profile-timeline.html">
<div class="user-avatar-border">
<div class="hexagon-120-132"></div>
</div>
<div class="user-avatar-content">
<div class="hexagon-image-82-90" data-src="https://cdn.fstoppers.com/styles/large-16-9/s3/lead/2014/10/dani-diamond-posing-how-to-model-photogaphy-best-top-fstoppersb.jpg"></div>
</div>
<div class="user-avatar-progress">
<div class="hexagon-progress-100-110"></div>
</div>
<div class="user-avatar-progress-border">
<div class="hexagon-border-100-110"></div>
</div>
<div class="user-avatar-badge">
<div class="user-avatar-badge-border">
<div class="hexagon-32-36"></div>
</div>
<div class="user-avatar-badge-content">
<div class="hexagon-dark-26-28"></div>
</div>
<p class="user-avatar-badge-text">24</p>
</div>
</a>
<!-- partial -->
<script src="./hexagon.js"></script>
</body>
</html>const app = {
existsInDOM: function (selector) {
return document.querySelectorAll(selector).length;
},
plugins: {
createHexagon: function (options) {
if (app.existsInDOM(options.container) || typeof options.containerElement !== 'undefined') {
return new XM_Hexagon(options);
}
}
}
};
"use strict";function _typeof(t){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function XM_Hexagon(t){var p={width:100,height:110,lineWidth:6,lineColor:"#fff",lineCap:"square",buttEnd:!1,fill:!1,clip:!1,roundedCorners:!1,roundedCornerRadius:4,animation:{easing:!0},animateOnScroll:!1,controlAnimation:!1,speed:50,scale:{start:0,end:1,stop:1},invertedProgress:!1,reverse:!1,linkText:!1,innerLink:!0,linkToContainer:".bar-progress-wrap",linkTo:".bar-progress-text",extraLinkTo:[],linkUnits:"%",linkUnitsSelector:".bar-progress-unit",innerTextFollowsProgress:!1,decimalPoints:0,barTextStyle:{primaryColor:"#fff",secondaryColor:"#363636",font:"bold 10px Exo, sans-serif"}},h=[],v={},i=function(){var t=document.querySelectorAll(p.container);if(!t.length)throw Error('Unable to find "'.concat(p.container,'" on the DOM'));var i=!0,e=!1,n=void 0;try{for(var r,o=t[Symbol.iterator]();!(i=(r=o.next()).done);i=!0){var a=r.value,d={};d.container=a,d.imageSrc=a.getAttribute("data-src"),d.canvas=document.createElement("canvas"),d.ctx=d.canvas.getContext("2d"),d.finishedDrawing=!1,d.canvas.width=p.width,d.canvas.height=p.height,d.canvas.style.position="absolute",d.canvas.style.top=0,d.canvas.style.left=0,d.container.style.width="".concat(p.width,"px"),d.container.style.height="".concat(p.height,"px"),d.container.style.position="relative",d.container.append(d.canvas),h.push(d)}}catch(t){e=!0,n=t}finally{try{i||null==o.return||o.return()}finally{if(e)throw n}}},e=function(){t.scale&&(p.scale.stop=p.scale.stop>p.scale.end?p.scale.end:p.scale.stop,p.scale.stop=p.scale.stop<p.scale.start?p.scale.start:p.scale.stop,p.scale.stop=void 0!==t.scale.stop?p.scale.stop:p.scale.end),v.sideWidth=o(p.width,p.height),v.perimeter=6*v.sideWidth,v.lineLength=p.scale.stop/p.scale.end*v.perimeter,v.sideCount=Math.floor(v.lineLength/v.sideWidth),p.stopPoint=p.scale.stop},n=function(){var t=!0,i=!1,e=void 0;try{for(var n,r=h[Symbol.iterator]();!(t=(n=r.next()).done);t=!0){var o=n.value;if(p.gradient){var a=o.ctx.createLinearGradient(0,p.height,p.width,0);a.addColorStop(0,p.gradient.colors[0]),a.addColorStop(1,p.gradient.colors[1]),o.ctx.strokeStyle=a,o.ctx.fillStyle=a}else o.ctx.strokeStyle=p.lineColor,o.ctx.fillStyle=p.lineColor;o.ctx.lineCap=p.lineCap,o.ctx.lineWidth=p.lineWidth}}catch(t){i=!0,e=t}finally{try{t||null==r.return||r.return()}finally{if(i)throw e}}},r=function(){var t=!0,i=!1,e=void 0;try{for(var n,r=h[Symbol.iterator]();!(t=(n=r.next()).done);t=!0){var o=n.value;p.speed=100<p.speed?100:p.speed,p.speed=p.speed<1?1:p.speed,o.animation={},o.animation.easing=p.animation.easing,o.animation.speed=p.speed,o.animation.step=o.animation.speed*p.width/2e3,o.animation.currentProgress=0}}catch(t){i=!0,e=t}finally{try{t||null==r.return||r.return()}finally{if(i)throw e}}};function a(t){for(var i=(window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop)+window.innerHeight,e=t.canvas,n=e.offsetTop;e=e.offsetParent;)n+=e.offsetTop;return n<=i}function d(t){t.animation.currentProgress<p.stopPoint&&(t.animation.easing?(t.animation.currentProgress+=.06*(p.stopPoint-t.animation.currentProgress),t.animation.currentProgress>=p.stopPoint-1&&(t.animation.currentProgress=p.stopPoint,t.finishedDrawing=!0)):(t.animation.currentProgress+=t.animation.step,t.animation.currentProgress>=p.stopPoint&&(t.animation.currentProgress=p.stopPoint,t.finishedDrawing=!0))),s(t,t.animation.currentProgress),t.finishedDrawing||window.requestAnimationFrame(d)}function m(t,i){return Math.sqrt(Math.pow(i.x-t.x,2)+Math.pow(i.y-t.y,2))}function T(t,i,e){var n=m(t,i),r=Math.min(e,n),o=function(t,i,e){var n=i.x-t.x,r=i.y-t.y,o=m(t,i),a=n/o,d=r/o;return{x:t.x+e*a,y:t.y+e*d}}(t,i,r);return{x:o.x,y:o.y,distance:r}}var o=function(t,i){return(-i/2+Math.sqrt(Math.pow(i,2)+.75*Math.pow(t,2)))/1.5},s=function(n,t){var i=1<arguments.length&&void 0!==t?t:p.stopPoint;if(n.ctx.clearRect(0,0,p.width,p.height),0!==i){if(n.ctx.beginPath(),p.roundedCorners){var e=p.fill||p.clip?0:p.lineWidth/2,r=function(t){var i=(p.height-v.sideWidth)/p.width;return(t-(v.sideWidth-p.height)/2)/i}(p.roundedCornerRadius)-p.width/2,o=function(t){return(p.height-v.sideWidth)/p.width*t+(v.sideWidth-p.height)/2}(p.width-r);if(p.clip||p.fill)n.ctx.moveTo(p.width/2-r,p.roundedCornerRadius+e),n.ctx.quadraticCurveTo(p.width/2,0+e,p.width/2+r,p.roundedCornerRadius+e),n.ctx.lineTo(p.width-e-r,o),n.ctx.quadraticCurveTo(p.width-e,(p.height-v.sideWidth)/2,p.width-e,(p.height-v.sideWidth)/2+r),n.ctx.lineTo(p.width-e,p.height-(p.height-v.sideWidth)/2-r),n.ctx.quadraticCurveTo(p.width-e,p.height-(p.height-v.sideWidth)/2,p.width-e-r,p.height-o),n.ctx.lineTo(p.width/2+r,p.height-e-p.roundedCornerRadius),n.ctx.quadraticCurveTo(p.width/2,p.height-e,p.width/2-r,p.height-e-p.roundedCornerRadius),n.ctx.lineTo(0+e+r,p.height-o),n.ctx.quadraticCurveTo(0+e,p.height-(p.height-v.sideWidth)/2,0+e,p.height-(p.height-v.sideWidth)/2-r),n.ctx.lineTo(0+e,(p.height-v.sideWidth)/2+r),n.ctx.quadraticCurveTo(0+e,(p.height-v.sideWidth)/2,0+e+r,o),n.ctx.lineTo(p.width/2-r,p.roundedCornerRadius+e);else for(;;){var a={x:p.width/2-r,y:p.roundedCornerRadius+e},d={x:p.width/2,y:0+e},h={x:p.width/2+r,y:p.roundedCornerRadius+e},s=m(a,d)+m(d,h),c={x:p.width/2,y:0+e},l={x:p.width/2+r,y:p.roundedCornerRadius+e},u=m(c,l),g=v.lineLength-u-s,f=void 0,x=void 0,w=void 0;if(f={x:p.width/2+r,y:p.roundedCornerRadius+e},x={x:p.width-e-r,y:o},w=T(f,x,g),n.ctx.moveTo(p.width/2+r,p.roundedCornerRadius+e),n.ctx.lineTo(w.x,w.y),(g-=w.distance)<=0)break;if(i<=1/6)break;if(n.ctx.quadraticCurveTo(p.width-e,(p.height-v.sideWidth)/2,p.width-e,(p.height-v.sideWidth)/2+r),(g-=s)<=0)break;if(f={x:p.width-e,y:(p.height-v.sideWidth)/2+r},x={x:p.width-e,y:p.height-(p.height-v.sideWidth)/2-r},w=T(f,x,g),n.ctx.lineTo(w.x,w.y),(g-=w.distance)<=0)break;if(i<=2/6)break;if(n.ctx.quadraticCurveTo(p.width-e,p.height-(p.height-v.sideWidth)/2,p.width-e-r,p.height-o),(g-=s)<=0)break;if(f={x:p.width-e-r,y:p.height-o},x={x:p.width/2+r,y:p.height-e-p.roundedCornerRadius},w=T(f,x,g),n.ctx.lineTo(w.x,w.y),(g-=w.distance)<=0)break;if(i<=.5)break;if(n.ctx.quadraticCurveTo(p.width/2,p.height-e,p.width/2-r,p.height-e-p.roundedCornerRadius),(g-=s)<=0)break;if(f={x:p.width/2-r,y:p.height-e-p.roundedCornerRadius},x={x:0+e+r,y:p.height-o},w=T(f,x,g),n.ctx.lineTo(w.x,w.y),(g-=w.distance)<=0)break;if(i<=4/6)break;if(n.ctx.quadraticCurveTo(0+e,p.height-(p.height-v.sideWidth)/2,0+e,p.height-(p.height-v.sideWidth)/2-r),(g-=s)<=0)break;if(f={x:0+e,y:p.height-(p.height-v.sideWidth)/2-r},x={x:0+e,y:(p.height-v.sideWidth)/2+r},w=T(f,x,g),n.ctx.lineTo(w.x,w.y),(g-=w.distance)<=0)break;if(i<=5/6)break;if(n.ctx.quadraticCurveTo(0+e,(p.height-v.sideWidth)/2,0+e+r,o),(g-=s)<=0)break;if(f={x:0+e+r,y:o},x={x:p.width/2-r,y:p.roundedCornerRadius+e},w=T(f,x,g),n.ctx.lineTo(w.x,w.y),(g-=w.distance)<=0)break;if(i<1)break;n.ctx.quadraticCurveTo(p.width/2,0+e,p.width/2+r,p.roundedCornerRadius+e);break}}else p.clip||p.fill?(n.ctx.moveTo(p.width/2,0),n.ctx.lineTo(p.width,(p.height-v.sideWidth)/2),n.ctx.lineTo(p.width,p.height-(p.height-v.sideWidth)/2),n.ctx.lineTo(p.width/2,p.height),n.ctx.lineTo(0,p.height-(p.height-v.sideWidth)/2),n.ctx.lineTo(0,(p.height-v.sideWidth)/2),n.ctx.lineTo(p.width/2,0)):(n.ctx.moveTo(p.width/2,0+p.lineWidth/2),n.ctx.lineTo(p.width-p.lineWidth/2,(p.height-v.sideWidth)/2),n.ctx.lineTo(p.width-p.lineWidth/2,p.height-(p.height-v.sideWidth)/2),n.ctx.lineTo(p.width/2,p.height-p.lineWidth/2),n.ctx.lineTo(0+p.lineWidth/2,p.height-(p.height-v.sideWidth)/2),n.ctx.lineTo(0+p.lineWidth/2,(p.height-v.sideWidth)/2),n.ctx.lineTo(p.width/2,0+p.lineWidth/2));if(p.clip){if(n.ctx.clip(),n.imageSrc){var y=new Image;y.src=n.imageSrc,y.addEventListener("load",function(){var t=Math.max(p.width,p.height),i=(Math.abs(p.width-p.height),p.width<p.height?(p.width-p.height)/2:0),e=p.height<p.width?(p.height-p.width)/2:0;n.ctx.drawImage(y,i,e,t,t)})}}else p.fill?n.ctx.fill():n.ctx.stroke()}else n.finishedDrawing=!0};this.render=function(t){t=(t=(t=t>p.scale.end?p.scale.end:t)<p.scale.start?p.scale.start:t)/p.scale.end*p.width,s(t)},function t(i,e){var n;for(var r in e)"object"!==_typeof(e[r])||e[r]instanceof Date?e[r]instanceof Date?i[r]=new Date(e[r].getTime()):i[r]=e[r]:(n=e[r]instanceof Array?[]:{},void 0===i[r]&&(i[r]=n),t(i[r],e[r]))}(p,t),i(),e(),n(),r(),function(){var t=!0,i=!1,e=void 0;try{for(var n,r=function(){var i=n.value;p.animateOnScroll?a(i)?window.requestAnimationFrame(function(){d(i)}):window.addEventListener("scroll",function t(){a(i)&&(window.requestAnimationFrame(function(){d(i)}),window.removeEventListener("scroll",t))}):p.controlAnimation||s(i)},o=h[Symbol.iterator]();!(t=(n=o.next()).done);t=!0)r()}catch(t){i=!0,e=t}finally{try{t||null==o.return||o.return()}finally{if(i)throw e}}}()}
/*---------------------------
USER AVATAR HEXAGONS
---------------------------*/
app.plugins.createHexagon({
container: '.hexagon-148-164',
width: 148,
height: 164,
roundedCorners: true,
fill: true
});
app.plugins.createHexagon({
container: '.hexagon-progress-124-136',
width: 124,
height: 136,
lineWidth: 8,
roundedCorners: true,
gradient: {
colors: ['#41efff', '#615dfa']
},
scale: {
start: 0,
end: 1,
stop: .74
}
});
app.plugins.createHexagon({
container: '.hexagon-border-124-136',
width: 124,
height: 136,
lineWidth: 8,
roundedCorners: true,
lineColor: '#e7e8ee'
});
app.plugins.createHexagon({
container: '.hexagon-image-100-110',
width: 100,
height: 110,
roundedCorners: true,
clip: true
});
app.plugins.createHexagon({
container: '.hexagon-120-132',
width: 120,
height: 132,
roundedCorners: true,
fill: true
});
app.plugins.createHexagon({
container: '.hexagon-progress-100-110',
width: 100,
height: 110,
lineWidth: 6,
roundedCorners: true,
gradient: {
colors: ['#41efff', '#615dfa']
},
scale: {
start: 0,
end: 1,
stop: .8
}
});
app.plugins.createHexagon({
container: '.hexagon-border-100-110',
width: 100,
height: 110,
lineWidth: 6,
roundedCorners: true,
lineColor: '#e7e8ee'
});
app.plugins.createHexagon({
container: '.hexagon-image-82-90',
width: 82,
height: 90,
roundedCorners: true,
roundedCornerRadius: 3,
clip: true
});
app.plugins.createHexagon({
container: '.hexagon-100-110',
width: 100,
height: 110,
roundedCorners: true,
fill: true
});
app.plugins.createHexagon({
container: '.hexagon-progress-84-92',
width: 84,
height: 92,
lineWidth: 5,
roundedCorners: true,
roundedCornerRadius: 3,
gradient: {
colors: ['#41efff', '#615dfa']
},
scale: {
start: 0,
end: 1,
stop: .8
}
});
app.plugins.createHexagon({
container: '.hexagon-border-84-92',
width: 84,
height: 92,
lineWidth: 5,
roundedCorners: true,
roundedCornerRadius: 3,
lineColor: '#e7e8ee'
});
app.plugins.createHexagon({
container: '.hexagon-image-68-74',
width: 68,
height: 74,
roundedCorners: true,
roundedCornerRadius: 3,
clip: true
});
app.plugins.createHexagon({
container: '.hexagon-50-56',
width: 50,
height: 56,
roundedCorners: true,
roundedCornerRadius: 2,
fill: true
});
app.plugins.createHexagon({
container: '.hexagon-progress-40-44',
width: 40,
height: 44,
lineWidth: 3,
roundedCorners: true,
roundedCornerRadius: 1,
gradient: {
colors: ['#41efff', '#615dfa']
},
scale: {
start: 0,
end: 1,
stop: .8
}
});
app.plugins.createHexagon({
container: '.hexagon-border-40-44',
width: 40,
height: 44,
lineWidth: 3,
roundedCorners: true,
roundedCornerRadius: 1,
lineColor: '#e7e8ee'
});
app.plugins.createHexagon({
container: '.hexagon-image-30-32',
width: 30,
height: 32,
roundedCorners: true,
roundedCornerRadius: 1,
clip: true
});
app.plugins.createHexagon({
container: '.hexagon-40-44',
width: 40,
height: 44,
roundedCorners: true,
roundedCornerRadius: 1,
fill: true
});
app.plugins.createHexagon({
container: '.hexagon-dark-32-34',
width: 32,
height: 34,
roundedCorners: true,
roundedCornerRadius: 1,
lineColor: '#45437f',
fill: true
});
app.plugins.createHexagon({
container: '.hexagon-32-36',
width: 32,
height: 36,
roundedCorners: true,
roundedCornerRadius: 1,
lineColor: '#fff',
fill: true
});
app.plugins.createHexagon({
container: '.hexagon-dark-26-28',
width: 26,
height: 28,
roundedCorners: true,
roundedCornerRadius: 1,
lineColor: '#45437f',
fill: true
});
app.plugins.createHexagon({
container: '.hexagon-28-32',
width: 28,
height: 32,
roundedCorners: true,
roundedCornerRadius: 1,
lineColor: '#fff',
fill: true
});
app.plugins.createHexagon({
container: '.hexagon-dark-22-24',
width: 22,
height: 24,
roundedCorners: true,
roundedCornerRadius: 1,
lineColor: '#45437f',
fill: true
});
app.plugins.createHexagon({
container: '.hexagon-22-24',
width: 22,
height: 24,
roundedCorners: true,
roundedCornerRadius: 1,
lineColor: '#fff',
fill: true
});
app.plugins.createHexagon({
container: '.hexagon-dark-16-18',
width: 16,
height: 18,
roundedCorners: true,
roundedCornerRadius: 1,
lineColor: '#45437f',
fill: true
});
app.plugins.createHexagon({
container: '.hexagon-120-130',
width: 120,
height: 130,
roundedCorners: true,
fill: true
});
app.plugins.createHexagon({
container: '.hexagon-100-108',
width: 100,
height: 108,
roundedCorners: true,
fill: true
});
app.plugins.createHexagon({
container: '.hexagon-image-124-136',
width: 124,
height: 136,
roundedCorners: true,
clip: true
});
app.plugins.createHexagon({
container: '.hexagon-image-84-92',
width: 84,
height: 92,
roundedCorners: true,
clip: true
});
app.plugins.createHexagon({
container: '.hexagon-34-36',
width: 34,
height: 36,
roundedCorners: true,
roundedCornerRadius: 1,
fill: true
});
app.plugins.createHexagon({
container: '.hexagon-image-40-44',
width: 40,
height: 44,
roundedCorners: true,
roundedCornerRadius: 1,
clip: true
});
app.plugins.createHexagon({
container: '.hexagon-image-24-26',
width: 24,
height: 26,
roundedCorners: true,
roundedCornerRadius: 1,
clip: true
});
app.plugins.createHexagon({
container: '.hexagon-image-18-20',
width: 18,
height: 20,
roundedCorners: true,
roundedCornerRadius: 1,
clip: true
});
app.plugins.createHexagon({
container: '.hexagon-overlay-30-32',
width: 30,
height: 32,
roundedCorners: true,
roundedCornerRadius: 1,
lineColor: 'rgba(97, 93, 250, .9)',
fill: true
});.user-avatar {
display: block;
width: 100px;
height: 110px;
position: relative;
.user-avatar-border {
position: absolute;
top: 0;
left: 0;
z-index: 1;
.hexagon-content {
background-color: #fff;
}
}
.user-avatar-content {
position: absolute;
top: 18px;
left: 16px;
z-index: 3;
}
.user-avatar-progress {
position: absolute;
top: 9px;
left: 8px;
z-index: 2;
z-index: 3;
}
.user-avatar-progress-border {
position: absolute;
top: 9px;
left: 8px;
z-index: 2;
z-index: 2;
}
.user-avatar-badge {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
width: 28px;
height: 32px;
position: absolute;
top: 68px;
right: 5px;
z-index: 4;
.user-avatar-badge-border {
position: absolute;
top: 0;
left: 0;
z-index: 4;
.hexagon-content {
background-color: #fff;
}
}
.user-avatar-badge-content {
position: absolute;
top: 4px;
left: 3px;
z-index: 5;
}
.user-avatar-badge-text {
color: #fff;
font-size: 0.75rem;
font-weight: 700;
pointer-events: none;
position: relative;
z-index: 6;
}
}
}
.user-avatar.online {
&::before {
content: '';
width: 12px;
height: 12px;
border: 3px solid #fff;
border-radius: 50%;
position: absolute;
top: 3px;
left: -2px;
z-index: 10;
background-color: #1df377;
}
}
.user-avatar.offline {
&::before {
content: '';
width: 12px;
height: 12px;
border: 3px solid #fff;
border-radius: 50%;
position: absolute;
top: 3px;
left: -2px;
z-index: 10;
background-color: #f9515c;
}
}
.user-avatar.away {
&::before {
content: '';
width: 12px;
height: 12px;
border: 3px solid #fff;
border-radius: 50%;
position: absolute;
top: 3px;
left: -2px;
z-index: 10;
background-color: #adafca;
}
}
.user-avatar.big {
width: 148px;
height: 164px;
.user-avatar-content {
top: 27px;
left: 24px;
}
.user-avatar-progress {
top: 14px;
left: 12px;
}
.user-avatar-progress-border {
top: 14px;
left: 12px;
}
.user-avatar-badge {
width: 40px;
height: 44px;
top: 102px;
right: 8px;
.user-avatar-badge-content {
top: 5px;
left: 4px;
}
.user-avatar-badge-text {
font-size: 1rem;
}
}
}
.user-avatar.medium {
width: 120px;
height: 132px;
.user-avatar-content {
top: 21px;
left: 19px;
}
.user-avatar-progress {
top: 11px;
left: 10px;
}
.user-avatar-progress-border {
top: 11px;
left: 10px;
}
.user-avatar-badge {
width: 32px;
height: 36px;
top: 82px;
right: 7px;
.user-avatar-badge-content {
top: 4px;
left: 3px;
}
.user-avatar-badge-text {
font-size: 0.875rem;
}
}
}
.user-avatar.small {
width: 50px;
height: 56px;
.user-avatar-content {
top: 12px;
left: 10px;
}
.user-avatar-progress {
top: 6px;
left: 5px;
}
.user-avatar-progress-border {
top: 6px;
left: 5px;
}
.user-avatar-badge {
width: 22px;
height: 24px;
top: 27px;
right: 2px;
.user-avatar-badge-content {
top: 3px;
left: 3px;
}
.user-avatar-badge-text {
font-size: 0.625rem;
}
}
}
.user-avatar.smaller {
.user-avatar-overlay {
width: 30px;
height: 32px;
}
.user-avatar-overlay-content {
.user-avatar-overlay-content-text {
font-size: 0.6875rem;
}
}
}
.user-avatar.no-stats {
width: 100px;
height: 108px;
.user-avatar-content {
top: 8px;
left: 8px;
}
}
.user-avatar.no-stats.big {
width: 148px;
height: 164px;
.user-avatar-content {
top: 14px;
left: 12px;
}
}
.user-avatar.no-stats.medium {
width: 120px;
height: 130px;
.user-avatar-content {
top: 10px;
left: 10px;
}
}
.user-avatar.no-stats.small {
width: 50px;
height: 56px;
.user-avatar-content {
top: 6px;
left: 5px;
}
}
.user-avatar.no-stats.smaller {
width: 34px;
height: 36px;
.user-avatar-content {
top: 2px;
left: 2px;
}
}
.user-avatar.no-stats.micro {
width: 22px;
height: 24px;
.user-avatar-content {
top: 2px;
left: 2px;
}
}
.user-avatar.no-border {
width: 84px;
height: 92px;
.user-avatar-content {
top: 0;
left: 0;
}
}
.user-avatar.no-border.big {
width: 124px;
height: 136px;
}
.user-avatar.no-border.medium {
width: 100px;
height: 110px;
}
.user-avatar.no-border.small {
width: 40px;
height: 44px;
}
.user-avatar.no-border.tiny {
width: 24px;
height: 26px;
}
.user-avatar.no-border.micro {
width: 18px;
height: 20px;
}
.user-avatar.no-outline {
width: 84px;
height: 92px;
.user-avatar-progress {
top: 0;
left: 0;
}
.user-avatar-progress-border {
top: 0;
left: 0;
}
.user-avatar-content {
top: 9px;
left: 8px;
}
.user-avatar-badge {
top: 60px;
right: -3px;
}
}
.user-avatar.no-outline.small {
width: 40px;
height: 44px;
.user-avatar-content {
top: 6px;
left: 5px;
}
.user-avatar-badge {
top: 21px;
right: -3px;
}
}PreviousMột bài toán xử lý bất đồng bộ trong kintone để lấy số requet quá giới hạn (OK)NextSử dụng Object.assign và để copy dữ liệu, edit, input, form (ok)
Last updated