mirror of
https://github.com/codex-team/editor.js
synced 2024-04-26 04:02:47 +02:00
chore(icons): icons size increased for mobile devices (#2190)
* popover icons size increased on mobile devices * update icon size on mobile * some mobile styles improvements * inline tools click on mobile devices improved
This commit is contained in:
parent
1a72d2153b
commit
d56c07c3dc
|
@ -15,6 +15,7 @@
|
|||
- `Fix` — Pasting from Microsoft Word to Chrome (Mac OS) fixed. Now if there are no image-tools connected, regular text content will be pasted.
|
||||
- `Fix` — Workaround for the HTMLJanitor bug with Tables (https://github.com/guardian/html-janitor/issues/3) added
|
||||
- `Fix` — Toolbox shortcuts appearance and execution fixed [#2112](https://github.com/codex-team/editor.js/issues/2112)
|
||||
- `Fix` — Inline Tools click handling on mobile devices improved
|
||||
- `Improvement` — *Tools API* — `pasteConfig().tags` now support sanitizing configuration. It allows you to leave some explicitly specified attributes for pasted content.
|
||||
- `Improvement` — *CodeStyle* — [CodeX ESLint Config](https://github.com/codex-team/eslint-config) has bee updated. All ESLint/Spelling issues resolved
|
||||
- `Improvement` — *ToolsAPI* — The `icon` property of the `toolbox` getter became optional.
|
||||
|
|
|
@ -68,7 +68,8 @@ export default class InlineToolbar extends Module<InlineToolbarNodes> {
|
|||
/**
|
||||
* Margin above/below the Toolbar
|
||||
*/
|
||||
private readonly toolbarVerticalMargin: number = 5;
|
||||
// eslint-disable-next-line @typescript-eslint/no-magic-numbers
|
||||
private readonly toolbarVerticalMargin: number = _.isMobileScreen() ? 20 : 6;
|
||||
|
||||
/**
|
||||
* TODO: Get rid of this
|
||||
|
|
|
@ -46,6 +46,17 @@
|
|||
&--active {
|
||||
color: var(--color-active-icon);
|
||||
}
|
||||
|
||||
svg {
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@media (--mobile) {
|
||||
width: var(--toolbox-buttons-size--mobile);
|
||||
height: var(--toolbox-buttons-size--mobile);
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -93,9 +104,11 @@
|
|||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: #FBFCFE;
|
||||
box-shadow: 0 1px 3px 0 rgba(18,30,57,0.08);
|
||||
@media (--can-hover) {
|
||||
&:hover {
|
||||
background: #FBFCFE;
|
||||
box-shadow: 0 1px 3px 0 rgba(18,30,57,0.08);
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
|
|
|
@ -1,6 +1,8 @@
|
|||
.ce-inline-toolbar {
|
||||
--y-offset: 8px;
|
||||
|
||||
@apply --overlay-pane;
|
||||
transform: translateX(-50%) translateY(8px) scale(0.9);
|
||||
transform: translateX(-50%) translateY(8px) scale(0.94);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: transform 150ms ease, opacity 250ms ease;
|
||||
|
@ -16,7 +18,7 @@
|
|||
}
|
||||
|
||||
&--left-oriented {
|
||||
transform: translateX(-23px) translateY(8px) scale(0.9);
|
||||
transform: translateX(-23px) translateY(8px) scale(0.94);
|
||||
}
|
||||
|
||||
&--left-oriented&--showed {
|
||||
|
@ -24,7 +26,7 @@
|
|||
}
|
||||
|
||||
&--right-oriented {
|
||||
transform: translateX(-100%) translateY(8px) scale(0.9);
|
||||
transform: translateX(-100%) translateY(8px) scale(0.94);
|
||||
margin-left: 23px;
|
||||
}
|
||||
|
||||
|
@ -58,8 +60,10 @@
|
|||
border-right: 1px solid var(--color-gray-border);
|
||||
box-sizing: border-box;
|
||||
|
||||
&:hover {
|
||||
background: var(--bg-light);
|
||||
@media (--can-hover) {
|
||||
&:hover {
|
||||
background: var(--bg-light);
|
||||
}
|
||||
}
|
||||
|
||||
&--hidden {
|
||||
|
@ -88,7 +92,6 @@
|
|||
|
||||
border-radius: 0;
|
||||
line-height: normal;
|
||||
padding: 0 1px !important;
|
||||
|
||||
|
||||
&--link {
|
||||
|
@ -119,6 +122,13 @@
|
|||
display: none;
|
||||
font-weight: 500;
|
||||
border-top: 1px solid rgba(201,201,204,.48);
|
||||
-webkit-appearance: none;
|
||||
font-family: inherit;
|
||||
|
||||
@media (--mobile){
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: var(--grayText);
|
||||
|
|
|
@ -59,6 +59,8 @@
|
|||
* Size of svg icons got from the CodeX Icons pack
|
||||
*/
|
||||
--icon-size: 20px;
|
||||
--icon-size--mobile: 28px;
|
||||
|
||||
|
||||
/**
|
||||
* The main `.cdx-block` wrapper has such vertical paddings
|
||||
|
@ -82,11 +84,6 @@
|
|||
border-radius: 6px;
|
||||
z-index: 2;
|
||||
|
||||
@media (--mobile){
|
||||
box-shadow: 0 8px 6px -6px rgb(33 48 73 / 19%);
|
||||
border-bottom-color: #c7c7c7;
|
||||
}
|
||||
|
||||
&--left-oriented {
|
||||
&::before {
|
||||
left: 15px;
|
||||
|
@ -160,7 +157,7 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
padding: 0;
|
||||
padding: 6px 1px;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
|
@ -173,10 +170,17 @@
|
|||
svg {
|
||||
width: var(--icon-size);
|
||||
height: var(--icon-size);
|
||||
|
||||
@media (--mobile) {
|
||||
width: var(--icon-size--mobile);
|
||||
height: var(--icon-size--mobile);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--bg-light);
|
||||
@media (--can-hover) {
|
||||
&:hover {
|
||||
background-color: var(--bg-light);
|
||||
}
|
||||
}
|
||||
|
||||
&--active {
|
||||
|
@ -236,16 +240,21 @@
|
|||
flex-shrink: 0;
|
||||
margin-right: 10px;
|
||||
|
||||
@media (--mobile) {
|
||||
width: var(--toolbox-buttons-size--mobile);
|
||||
height: var(--toolbox-buttons-size--mobile);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: var(--icon-size);
|
||||
height: var(--icon-size);
|
||||
}
|
||||
|
||||
@media (--mobile) {
|
||||
width: var(--toolbox-buttons-size--mobile);
|
||||
height: var(--toolbox-buttons-size--mobile);
|
||||
border-radius: 8px;
|
||||
|
||||
svg {
|
||||
width: var(--icon-size--mobile);
|
||||
height: var(--icon-size--mobile);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue