chizui/aklive2d
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(directory): updated office_update style

Browse Source
This commit is contained in:
Haoyu Xu
2023-10-13 23:46:44 -04:00
parent a9a5d90165
commit f53805744e
3 changed files with 146 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
directory/src/scss/_page_base.scss
View File

@@ -151,3 +151,114 @@
}
}
}
.styled-selection {
margin-bottom: 0.8rem;
.content {
padding: 0.8rem 0;
cursor: pointer;
transition: transform cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
.option {
pointer-events: none;
position: relative;
transform: translate3d(0, 0, 1px);
font-size: 1rem;
padding: 0.44rem 2.25rem 0.44rem 0.63rem;
background-color: var(--home-item-hover-background-color);
background-image: repeating-linear-gradient(
90deg,
var(--home-item-background-linear-gradient-color) 0,
var(--home-item-background-linear-gradient-color) 1px,
transparent 1px,
transparent 4px
);
transition: transform cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
.outline {
width: 100%;
height: 100%;
left: -6px;
top: -6px;
border: var(--home-item-outline-color) 1px dashed;
padding: 6px;
&:before,
&:after {
content: "";
display: block;
position: absolute;
left: -2px;
height: 2px;
width: 100%;
border-left: var(--text-color) solid 2px;
border-right: var(--text-color) solid 2px;
}
&:before {
top: -2px;
}
&:after {
bottom: -2px;
}
}
&:before,
.outline {
content: "";
display: block;
position: absolute;
z-index: -1;
opacity: 0;
visibility: hidden;
transition: opacity cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s,
visibility cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
}
&:before {
right: 0;
top: 0;
width: 60%;
height: 100%;
background-image: linear-gradient(90deg, transparent, currentColor);
}
.tick-icon {
display: inline-block;
position: absolute;
z-index: 0;
right: 0.31rem;
top: 50%;
width: 0.5rem;
height: 1rem;
opacity: 0;
visibility: hidden;
transition: opacity cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s,
visibility cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
border-right: var(--text-color) solid 0.25rem;
border-bottom: var(--text-color) solid 0.25rem;
transform: translate(-50%, -70%) rotate(45deg);
}
}
&:hover,
&.active {
transform: translate3d(6px, 0, 1px);
.option:before,
.option .outline {
opacity: 1;
visibility: visible;
}
}
&.active {
.option .tick-icon {
opacity: 1;
visibility: visible;
}
}
}
}