Docker/codex.docs
Docker/codex.docs
1
0
Fork 0
mirror of https://github.com/codex-team/codex.docs.git synced 2025-07-28 01:29:42 +02:00
Code Issues Releases Activity

Update document editor styles (#180) (#191)

Browse source 
* feat: update document editor styles (#180)

* fix: fix flexbox property

* fix: fix label name in the edit mode

* fix: change padding and bottom arrow as Figma size

* fix: change padding and bottom arrow as Figma size

* fix: add universal input, select directive

* fix: fix layout shift, class name

* fix: fix text cutting and change usage of svg in css

* fix: add missing css property
This commit is contained in:
YeoKyung Yoon 2022-07-12 00:11:08 +09:00 • committed by GitHub
parent 5c4183b717
commit 69b61a2c87
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 91 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,4 @@
.writing-header {
display: flex;
position: sticky;
top: 0;
padding: 15px 0;
@ -15,18 +14,32 @@
margin: auto;
}
&__left {
&__inner-container {
margin: auto 0;
display: flex;
color: var(--color-text-second);
gap: 10px;
& span {
margin-right: 10px;
@media(--mobile) {
flex-flow: column;
}
}
select {
max-width: 100px;
vertical-align: bottom;
& > * {
flex: 0 1 33.3%;
}
label {
display: block;
margin-bottom: 6px;
}
select {
@apply --select;
}
input {
@apply --input;
}
}
}
@ -38,16 +51,6 @@
}
}
.uri-input {
box-sizing: border-box;
width: 100%;
padding: 10px 12px;
border-radius: 3px;
border: 1px solid rgba(201, 201, 204, 0.48);
box-shadow: inset 0 1px 2px 0 rgba(35, 44, 72, 0.06);
outline: none;
}
.writing-editor {
font-size: 15px;
line-height: 1.6;

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

@ -6,6 +6,8 @@
--color-link-hover: #F3F6F8;
--color-bg-light: #f8f7fa;
--color-page-active: #ff1767;
--color-input-primary: #F3F6F8;
--color-input-border: #477CFF;
--color-button-primary: #3389FF;
--color-button-primary-hover: #2E7AE6;
@ -77,6 +79,49 @@
}
}
--select {
position: relative;
padding: 10px 30px 10px 10px;
width: 100%;
border: solid 1px transparent;
border-radius: 8px;
background-color: var(--color-input-primary);
box-sizing: border-box;
appearance: none;
line-height: 18px;
background-image: url("../svg/arrow-down.svg");
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%;
line-height: 18px;
border: solid 1px transparent;
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;
}
}
--squircle {
border-radius: 8px;
@ -95,4 +140,4 @@
@custom-media --tablet all and (min-width: 980px) and (max-width: 1050px);
@custom-media --mobile all and (max-width: 980px);
@custom-media --retina all and (-webkit-min-device-pixel-ratio: 1.5);
@custom-media --can-hover all and (hover:hover)
@custom-media --can-hover all and (hover:hover);