fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-22 09:18:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

Improve readability of OptionalInput widget design styling

Browse Source
This commit is contained in:
Keavon Chambers
2021-07-09 16:02:36 -07:00
parent 12dac1c154
commit e215495430
3 changed files with 29 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/web/src/components/widgets/inputs/OptionalInput.vue
+16 -37
View File
@@ -11,56 +11,35 @@
align-items: center;
white-space: nowrap;
justify-content: center;
width: 24px;
margin-right: 1px;
width: 23px;
height: 24px;
border: 1px solid var(--color-7-middlegray);
border-radius: 2px 0 0 2px;
background: var(--color-5-dullgray);
.checkbox-box {
background: var(--color-e-nearwhite);
.icon {
fill: var(--color-5-dullgray);
}
}
box-sizing: border-box;
border-right: none;
&:hover {
background: var(--color-6-lowergray);
.checkbox-box {
background: var(--color-f-white);
.icon {
fill: var(--color-6-lowergray);
}
}
}
}
input:checked + label {
background: var(--color-accent);
.checkbox-box,
.checkbox-box:hover {
background: var(--color-f-white);
.icon {
fill: var(--color-accent);
}
}
border: 1px solid var(--color-accent);
border-right: none;
&:hover {
background: var(--color-accent-hover);
.checkbox-box,
.checkbox-box:hover {
.icon {
fill: var(--color-accent-hover);
}
}
border: 1px solid var(--color-accent-hover);
border-right: none;
background: none;
}
}
// border: none;
// background: var(--color-e-nearwhite);
// &:hover {
// background: var(--color-f-white);
// }
}
}
</style>