Docker/codex.docs
Docker/codex.docs
1
0
Fork 0
mirror of https://github.com/codex-team/codex.docs.git synced 2025-08-07 06:25:21 +02:00
Code Issues Releases Activity

fix: add universal input, select directive

Browse source
This commit is contained in:
Y-k-Y 2022-06-20 00:56:43 +09:00
parent bd47c9d610
commit e733b7ad74
2 changed files with 47 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/frontend/styles/components/writing.pcss
View file

@ -33,22 +33,12 @@
margin-bottom: 6px;
}
select, input {
position: relative;
padding: 10px;
width: 100%;
border: none;
border-radius: 8px;
background-color: #F3F6F8;
box-sizing: border-box;
appearance: none;
select {
@apply --select;
}
select {
padding-right: 36px;
background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 8 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.16696 0.613295C7.04205 0.489128 6.87308 0.419434 6.69696 0.419434C6.52083 0.419434 6.35187 0.489128 6.22696 0.613295L3.83362 2.9733L1.47362 0.613295C1.34872 0.489128 1.17975 0.419434 1.00362 0.419434C0.827501 0.419434 0.658533 0.489128 0.533625 0.613295C0.471139 0.675271 0.421543 0.749005 0.387697 0.830244C0.353851 0.911484 0.336426 0.998621 0.336426 1.08663C0.336426 1.17464 0.353851 1.26177 0.387697 1.34301C0.421543 1.42425 0.471139 1.49799 0.533625 1.55996L3.36029 4.38663C3.42227 4.44911 3.496 4.49871 3.57724 4.53256C3.65848 4.5664 3.74562 4.58383 3.83362 4.58383C3.92163 4.58383 4.00877 4.5664 4.09001 4.53256C4.17125 4.49871 4.24498 4.44911 4.30696 4.38663L7.16696 1.55996C7.22944 1.49799 7.27904 1.42425 7.31288 1.34301C7.34673 1.26177 7.36416 1.17464 7.36416 1.08663C7.36416 0.998621 7.34673 0.911484 7.31288 0.830244C7.27904 0.749005 7.22944 0.675271 7.16696 0.613295Z' fill='black'/%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-position: right 10px center;
input {
@apply --input;
}
}
}

43
src/frontend/styles/vars.pcss
View file

@ -6,6 +6,8 @@
--color-button-danger: #ff5159;
--color-bg-light: #f8f7fa;
--color-page-active: #ff1767;
--color-input-primary: #F3F6F8;
--color-input-border: #477CFF;
/**
* Site layout sizes
@ -66,6 +68,47 @@
background: color-mod(var(--color-link-active) blackness(+10%));
}
}
--select {
position: relative;
padding: 10px 30px 10px 10px;
width: 100%;
border: none;
border-radius: 8px;
background-color: var(--color-input-primary);
box-sizing: border-box;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 8 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.16696 0.613295C7.04205 0.489128 6.87308 0.419434 6.69696 0.419434C6.52083 0.419434 6.35187 0.489128 6.22696 0.613295L3.83362 2.9733L1.47362 0.613295C1.34872 0.489128 1.17975 0.419434 1.00362 0.419434C0.827501 0.419434 0.658533 0.489128 0.533625 0.613295C0.471139 0.675271 0.421543 0.749005 0.387697 0.830244C0.353851 0.911484 0.336426 0.998621 0.336426 1.08663C0.336426 1.17464 0.353851 1.26177 0.387697 1.34301C0.421543 1.42425 0.471139 1.49799 0.533625 1.55996L3.36029 4.38663C3.42227 4.44911 3.496 4.49871 3.57724 4.53256C3.65848 4.5664 3.74562 4.58383 3.83362 4.58383C3.92163 4.58383 4.00877 4.5664 4.09001 4.53256C4.17125 4.49871 4.24498 4.44911 4.30696 4.38663L7.16696 1.55996C7.22944 1.49799 7.27904 1.42425 7.31288 1.34301C7.34673 1.26177 7.36416 1.17464 7.36416 1.08663C7.36416 0.998621 7.34673 0.911484 7.31288 0.830244C7.27904 0.749005 7.22944 0.675271 7.16696 0.613295Z' fill='black'/%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-position: right 15px center;
&:focus {
border: solid 1px var(--color-input-border);
box-shadow: 0 0 0 3px rgba(18, 155, 255, 0.33);
}
&:focus-visible {
outline: none;
}
}
--input {
padding: 10px;
width: 100%;
border: none;
border-radius: 8px;
background-color: var(--color-input-primary);
box-sizing: border-box;
&:focus {
border: solid 1px var(--color-input-border);
box-shadow: 0 0 0 3px rgba(18, 155, 255, 0.33);
}
&:focus-visible {
outline: none;
}
}
}
/**