prehistoric-systems/Gitako
1
1
Fork 0
mirror of https://github.com/EnixCoda/Gitako.git synced 2026-03-11 08:54:44 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat: use consistent selector chevron

Browse source
This commit is contained in:
EnixCoda 2022-01-16 21:44:45 +08:00
parent 3d4bf82f02
commit bf360efe1f
2 changed files with 64 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
src/components/SelectInput.tsx
View file

@ -11,21 +11,24 @@ export function SelectInput<T>({
}
>) {
return (
<select
onChange={e => {
const key = e.target.value
const option = options.find(option => option.key === key)
onChange(option!?.value)
}}
value={options.find(option => option.value === value)?.key}
{...selectProps}
>
{options.map(option => (
<option key={option.key} value={option.key}>
{option.label}
</option>
))}
</select>
<div className={'select-wrapper'}>
<select
onChange={e => {
const key = e.target.value
const option = options.find(option => option.key === key)
onChange(option!?.value)
}}
value={options.find(option => option.value === value)?.key}
{...selectProps}
>
{options.map(option => (
<option key={option.key} value={option.key}>
{option.label}
</option>
))}
</select>
<span className={'chevron'} />
</div>
)
}
export type Option<T> = {

84
src/styles/index.scss
View file

@ -86,6 +86,19 @@ $minimal-z-index: max(
}
}
@mixin pseudo-primer-icon($icon-name) {
content: '';
display: block;
cursor: pointer;
user-select: none;
-webkit-mask-image: url('~@primer/octicons/build/svg/' + $icon-name + '.svg?inline');
mask-image: url('~@primer/octicons/build/svg/' + $icon-name + '.svg?inline');
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
}
.#{$name}-ready {
// github
// code folding start
@ -116,19 +129,10 @@ $minimal-z-index: max(
align-items: center;
&::before {
content: '';
display: block;
width: 10px;
height: 20px;
cursor: pointer;
user-select: none;
transition: 0.25s ease;
-webkit-mask-image: url('~@primer/octicons/build/svg/chevron-down.svg?inline');
mask-image: url('~@primer/octicons/build/svg/chevron-down.svg?inline');
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
@include pseudo-primer-icon('chevron-down');
}
@include interactive-background-on-before(
@ -894,16 +898,38 @@ $minimal-z-index: max(
cursor: not-allowed;
}
}
select {
width: 100%;
-moz-appearance: menulist-button;
// make it look like text inputs
height: 36px;
border-radius: 6px;
border: 1px solid var(--gitako-border-default);
background: var(--gitako-canvas-default);
color: var(--gitako-fg-default);
box-shadow: var(--gitako-primer-shadow-inset);
.select-wrapper {
position: relative;
select {
width: 100%;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
// make it look like text inputs
height: 36px;
padding: 0 6px;
border-radius: 6px;
border: 1px solid var(--gitako-border-default);
background: var(--gitako-canvas-default);
color: var(--gitako-fg-default);
box-shadow: var(--gitako-primer-shadow-inset);
}
.chevron {
position: absolute;
right: 6px;
top: 8px;
width: 10px;
height: 20px;
&::before {
width: 10px;
height: 20px;
background-color: var(--gitako-fg-subtle);
@include pseudo-primer-icon('chevron-down');
}
}
}
&.field-checkbox {
padding-left: 20px;
@ -979,24 +1005,6 @@ $minimal-z-index: max(
}
}
// patches for Safari
.gitako-safari {
.#{$name}-side-bar {
.#{$name}-side-bar-body {
.#{$name}-settings-bar {
&-content {
.field {
select {
-webkit-appearance: none;
padding: 0 6px;
}
}
}
}
}
}
}
// gitee
.git-project {
// reset styles