Docker/codex.docs
Docker/codex.docs
1
0
Fork 0
mirror of https://github.com/codex-team/codex.docs.git synced 2025-07-30 18:49: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

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);