hexo-theme-keep/source/css/layout/common/magic-theme.styl

48 lines
1.0 KiB
Stylus
Raw Normal View History

2020-04-25 11:16:58 +08:00
@require "animated.styl"
2020-04-28 23:20:17 +08:00
2020-11-13 14:43:22 +08:00
$ils-container-margin-bottom = 30px;
$ils-container-border-radius = 5px;
2020-11-13 14:43:22 +08:00
hover-style(scaleX, scaleY) {
2020-11-13 14:43:22 +08:00
transition();
box-shadow: 2px 2px 6px var(--shadow-color);
2020-11-13 14:43:22 +08:00
&:hover {
2020-11-13 14:43:22 +08:00
if (hexo-config('style.hover.scale')) {
transform: scaleX(scaleX) scaleY(scaleY);
}
2020-11-13 14:43:22 +08:00
if (hexo-config('style.hover.shadow')) {
box-shadow: 3px 3px 10px var(--shadow-hover-color);
2020-11-13 14:43:22 +08:00
}
}
}
2020-11-13 14:43:22 +08:00
ils-container(scaleX, scaleY, padding) {
background: var(--background-color);
2020-04-30 00:14:16 +08:00
padding: padding;
2020-11-13 14:43:22 +08:00
border-radius: $ils-container-border-radius;
margin-bottom: $ils-container-margin-bottom;
hover-style(scaleX, scaleY);
+ils-tablet() {
2020-11-13 14:43:22 +08:00
padding: padding * 0.8;
border-radius: $ils-container-border-radius * 0.8;
margin-bottom: $ils-container-margin-bottom * 0.8;
hover-style(scaleX * 0.8, scaleY * 0.8);
}
+ils-mobile() {
2020-11-13 14:43:22 +08:00
padding: padding * 0.6;
border-radius: $ils-container-border-radius * 0.6;
margin-bottom: $ils-container-margin-bottom * 0.6;
hover-style(scaleX * 0.6, scaleY * 0.6);
}
}