hexo-theme-keep/source/css/layout/_partial/side-tools-container.styl

55 lines
1.0 KiB
Stylus
Raw Normal View History

$tools-item-width = 32px;
2020-12-01 16:51:38 +08:00
$tools-item-font-size = 1.1rem;
.side-tools-container {
position: relative;
transition();
.tools-item {
width: $tools-item-width;
height: $tools-item-width;
2020-12-01 16:51:38 +08:00
font-size: $tools-item-font-size;
margin-bottom: 3px;
color: var(--second-text-color);
background: var(--background-color);
cursor: pointer;
box-shadow: 1px 1px 3px var(--shadow-color);
border-right: none;
2020-11-26 09:41:53 +08:00
border-radius: 1px;
&:hover {
transition();
color: var(--background-color);
background: var(--primary-color);
box-shadow: 2px 2px 6px var(--shadow-color);
}
+keep-tablet() {
width: $tools-item-width * 0.9;
height: $tools-item-width * 0.9;
2020-12-01 16:51:38 +08:00
font-size: $tools-item-font-size * 0.9;
margin-bottom: 2px;
}
}
.side-tools-list {
opacity: 0;
transform: translateX(100%);
transition();
2020-11-25 23:39:24 +08:00
.tool-expand-width {
+keep-tablet() {
display: none;
}
}
&.show {
opacity: 1;
transform: translateX(0);
}
}
}