jess
/
Graphite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adjust OptionalInput widget design to add back its right border

This commit is contained in:
Keavon Chambers 2021-07-15 01:01:05 -07:00
parent 86bd9e7cdf
commit 7785ed2b1d
3 changed files with 3 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/web/src/App.vue
View File

@ -40,7 +40,7 @@
// TODO: Replace with CSS color() function to calculate alpha when browsers support it // TODO: Replace with CSS color() function to calculate alpha when browsers support it
// See https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color() and https://caniuse.com/css-color-function // See https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color() and https://caniuse.com/css-color-function
// E6 = 90% alpha // F2 = 95% alpha
--floating-menu-opacity-color-2-mildblack: #222222f2; --floating-menu-opacity-color-2-mildblack: #222222f2;
--floating-menu-shadow: rgba(0, 0, 0, 50%); --floating-menu-shadow: rgba(0, 0, 0, 50%);
} }

2
client/web/src/components/widgets/buttons/PopoverButton.vue
View File

@ -37,7 +37,7 @@
} }
// TODO: Refactor this and other complicated cases dealing with joined widget margins and border-radius by adding a single standard set of classes: joined-first, joined-inner, and joined-last // TODO: Refactor this and other complicated cases dealing with joined widget margins and border-radius by adding a single standard set of classes: joined-first, joined-inner, and joined-last
div[class*="-input"]:not(.optional-input) + & { div[class*="-input"] + & {
margin-left: 1px; margin-left: 1px;
.icon-button { .icon-button {

12
client/web/src/components/widgets/inputs/OptionalInput.vue
View File

@ -11,13 +11,11 @@
align-items: center; align-items: center;
white-space: nowrap; white-space: nowrap;
justify-content: center; justify-content: center;
margin-right: 1px; width: 24px;
width: 23px;
height: 24px; height: 24px;
border: 1px solid var(--color-7-middlegray); border: 1px solid var(--color-7-middlegray);
border-radius: 2px 0 0 2px; border-radius: 2px 0 0 2px;
box-sizing: border-box; box-sizing: border-box;
border-right: none;
&:hover { &:hover {
background: var(--color-6-lowergray); background: var(--color-6-lowergray);
@ -26,19 +24,11 @@
input:checked + label { input:checked + label {
border: 1px solid var(--color-accent); border: 1px solid var(--color-accent);
border-right: none;
&:hover { &:hover {
border: 1px solid var(--color-accent-hover); border: 1px solid var(--color-accent-hover);
border-right: none;
background: none; background: none;
} }
// border: none;
// background: var(--color-e-nearwhite);
// &:hover {
// background: var(--color-f-white);
// }
} }
} }
</style> </style>