72 lines
1.4 KiB
Stylus
72 lines
1.4 KiB
Stylus
$tools-item-width = 32px;
|
|
$tools-item-font-size = 1.1rem;
|
|
$tools-item-border-radius = 1px;
|
|
|
|
|
|
.side-tools-container {
|
|
position: relative;
|
|
transition();
|
|
|
|
.tools-item {
|
|
width: $tools-item-width;
|
|
height: $tools-item-width;
|
|
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;
|
|
border-radius: $tools-item-border-radius;
|
|
|
|
&: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;
|
|
font-size: $tools-item-font-size * 0.9;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
&.rss {
|
|
|
|
a {
|
|
border-radius: $tools-item-border-radius;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
&:hover {
|
|
transition();
|
|
color: var(--background-color);
|
|
background: var(--primary-color);
|
|
box-shadow: 2px 2px 6px var(--shadow-color);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.side-tools-list {
|
|
opacity: 0;
|
|
transform: translateX(100%);
|
|
transition();
|
|
|
|
.tool-expand-width {
|
|
+keep-tablet() {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&.show {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
}
|