2020-11-20 12:02:22 +08:00
|
|
|
$keep-container-margin-bottom = 30px;
|
|
|
|
|
$keep-container-border-radius = 5px;
|
2020-09-05 22:41:10 +08:00
|
|
|
|
2020-11-13 14:43:22 +08:00
|
|
|
hover-style(scaleX, scaleY) {
|
2020-04-24 22:49:10 +08:00
|
|
|
|
2020-11-13 14:43:22 +08:00
|
|
|
transition();
|
2020-04-24 22:49:10 +08:00
|
|
|
|
2020-11-18 18:45:45 +08:00
|
|
|
box-shadow: 2px 2px 6px var(--shadow-color);
|
2020-08-06 10:44:29 +08:00
|
|
|
|
2020-11-13 14:43:22 +08:00
|
|
|
&:hover {
|
2020-08-06 10:44:29 +08:00
|
|
|
|
2020-11-13 14:43:22 +08:00
|
|
|
if (hexo-config('style.hover.scale')) {
|
|
|
|
|
transform: scaleX(scaleX) scaleY(scaleY);
|
2020-04-24 22:49:10 +08:00
|
|
|
}
|
2020-06-06 11:32:00 +08:00
|
|
|
|
2020-11-13 14:43:22 +08:00
|
|
|
if (hexo-config('style.hover.shadow')) {
|
2020-11-18 18:45:45 +08:00
|
|
|
box-shadow: 3px 3px 10px var(--shadow-hover-color);
|
2020-11-13 14:43:22 +08:00
|
|
|
}
|
2020-04-24 22:49:10 +08:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2020-09-05 22:41:10 +08:00
|
|
|
|
2020-11-20 12:02:22 +08:00
|
|
|
keep-container(scaleX, scaleY, padding, isMarginBottom) {
|
2020-11-13 14:43:22 +08:00
|
|
|
background: var(--background-color);
|
2020-04-30 00:14:16 +08:00
|
|
|
padding: padding;
|
2020-11-20 12:02:22 +08:00
|
|
|
border-radius: $keep-container-border-radius;
|
2020-11-19 11:58:54 +08:00
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
|
|
|
|
if (isMarginBottom) {
|
2020-11-20 12:02:22 +08:00
|
|
|
margin-bottom: $keep-container-margin-bottom;
|
2020-11-19 11:58:54 +08:00
|
|
|
|
2020-11-20 12:02:22 +08:00
|
|
|
+keep-tablet() {
|
|
|
|
|
margin-bottom: $keep-container-margin-bottom * 0.8;
|
2020-11-19 11:58:54 +08:00
|
|
|
}
|
|
|
|
|
|
2020-11-20 12:02:22 +08:00
|
|
|
+keep-mobile() {
|
|
|
|
|
margin-bottom: $keep-container-margin-bottom * 0.6;
|
2020-11-19 11:58:54 +08:00
|
|
|
}
|
|
|
|
|
}
|
2020-11-13 14:43:22 +08:00
|
|
|
|
|
|
|
|
hover-style(scaleX, scaleY);
|
2020-09-05 22:41:10 +08:00
|
|
|
|
2020-11-20 12:02:22 +08:00
|
|
|
+keep-tablet() {
|
2020-11-13 14:43:22 +08:00
|
|
|
padding: padding * 0.8;
|
2020-11-20 12:02:22 +08:00
|
|
|
border-radius: $keep-container-border-radius * 0.8;
|
2020-11-13 14:43:22 +08:00
|
|
|
hover-style(scaleX * 0.8, scaleY * 0.8);
|
2020-09-05 22:41:10 +08:00
|
|
|
}
|
|
|
|
|
|
2020-11-20 12:02:22 +08:00
|
|
|
+keep-mobile() {
|
2020-11-13 14:43:22 +08:00
|
|
|
padding: padding * 0.6;
|
2020-11-20 12:02:22 +08:00
|
|
|
border-radius: $keep-container-border-radius * 0.6;
|
2020-11-13 14:43:22 +08:00
|
|
|
hover-style(scaleX * 0.6, scaleY * 0.6);
|
2020-09-05 22:41:10 +08:00
|
|
|
}
|
2020-04-24 22:49:10 +08:00
|
|
|
}
|
