Chneemann/join
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update design

Browse source
This commit is contained in:
Chneemann 2024-04-25 23:04:49 +02:00
parent 78f59146cc
commit 79d8d3ce30
3 changed files with 15 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/app/components/add-task/add-task.component.html
View file

@ -248,7 +248,7 @@
/> />
<span class="line"></span> <span class="line"></span>
<img <img
src="./../../../assets/img/add-task/check.svg" src="./../../../assets/img/check.svg"
alt="" alt=""
(click)="addSubtask(subtask.value); subtask.reset()" (click)="addSubtask(subtask.value); subtask.reset()"
/> />

18
src/app/components/add-task/add-task.component.scss
View file

@ -153,10 +153,10 @@ p {
position: relative; position: relative;
.add { .add {
position: absolute; position: absolute;
top: 45px; top: 48px;
right: 15px; right: 15px;
width: 25px; width: 16px;
height: 25px; height: 16px;
} }
.subtask-btns { .subtask-btns {
display: flex; display: flex;
@ -165,9 +165,15 @@ p {
top: 45px; top: 45px;
right: 15px; right: 15px;
img { img {
width: 25px; width: 16px;
height: 25px; height: 16px;
filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(7500%)
hue-rotate(327deg) brightness(96%) contrast(104%);
cursor: pointer; cursor: pointer;
&:last-child {
width: 19px;
height: 19px;
}
&:hover { &:hover {
filter: invert(60%) sepia(58%) saturate(1629%) hue-rotate(165deg) filter: invert(60%) sepia(58%) saturate(1629%) hue-rotate(165deg)
brightness(92%) contrast(92%); brightness(92%) contrast(92%);
@ -176,7 +182,7 @@ p {
.line { .line {
height: 18px; height: 18px;
padding: 1px; padding: 1px;
margin: 0 6px; margin: 0 9px;
background-color: var(--light-gray); background-color: var(--light-gray);
} }
} }

11
src/assets/img/add.svg
View file

@ -1,10 +1,3 @@
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Subtasks icons11"> <path d="M6.14453 8H1.14453C0.861198 8 0.623698 7.90417 0.432031 7.7125C0.240365 7.52083 0.144531 7.28333 0.144531 7C0.144531 6.71667 0.240365 6.47917 0.432031 6.2875C0.623698 6.09583 0.861198 6 1.14453 6H6.14453V1C6.14453 0.716667 6.24036 0.479167 6.43203 0.2875C6.6237 0.0958333 6.8612 0 7.14453 0C7.42786 0 7.66536 0.0958333 7.85703 0.2875C8.0487 0.479167 8.14453 0.716667 8.14453 1V6H13.1445C13.4279 6 13.6654 6.09583 13.857 6.2875C14.0487 6.47917 14.1445 6.71667 14.1445 7C14.1445 7.28333 14.0487 7.52083 13.857 7.7125C13.6654 7.90417 13.4279 8 13.1445 8H8.14453V13C8.14453 13.2833 8.0487 13.5208 7.85703 13.7125C7.66536 13.9042 7.42786 14 7.14453 14C6.8612 14 6.6237 13.9042 6.43203 13.7125C6.24036 13.5208 6.14453 13.2833 6.14453 13V8Z" fill="#2A3647"/>
<mask id="mask0_75601_15213" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="25" height="24">
<rect id="Bounding box" x="0.248535" width="24" height="24" fill="#D9D9D9"/>
</mask>
<g mask="url(#mask0_75601_15213)">
<path id="add" d="M11.2485 13H6.24854C5.9652 13 5.7277 12.9042 5.53604 12.7125C5.34437 12.5208 5.24854 12.2833 5.24854 12C5.24854 11.7167 5.34437 11.4792 5.53604 11.2875C5.7277 11.0958 5.9652 11 6.24854 11H11.2485V6C11.2485 5.71667 11.3444 5.47917 11.536 5.2875C11.7277 5.09583 11.9652 5 12.2485 5C12.5319 5 12.7694 5.09583 12.961 5.2875C13.1527 5.47917 13.2485 5.71667 13.2485 6V11H18.2485C18.5319 11 18.7694 11.0958 18.961 11.2875C19.1527 11.4792 19.2485 11.7167 19.2485 12C19.2485 12.2833 19.1527 12.5208 18.961 12.7125C18.7694 12.9042 18.5319 13 18.2485 13H13.2485V18C13.2485 18.2833 13.1527 18.5208 12.961 18.7125C12.7694 18.9042 12.5319 19 12.2485 19C11.9652 19 11.7277 18.9042 11.536 18.7125C11.3444 18.5208 11.2485 18.2833 11.2485 18V13Z" fill="#2A3647"/>
</g>
</g>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 864 B