Skip to content
This repository has been archived by the owner on Jun 26, 2020. It is now read-only.

Introduced to-do list styles #242

Merged
merged 10 commits into from
Sep 19, 2019
Merged

Introduced to-do list styles #242

merged 10 commits into from
Sep 19, 2019

Conversation

dkonopka
Copy link
Contributor

@dkonopka dkonopka commented Sep 4, 2019

Suggested merge commit message (convention)

Other: Introduced to-do list styles (moved from ckeditor5-list repository). Closes https://github.com/ckeditor/ckeditor5-list/issues/146. Closes https://github.com/ckeditor/ckeditor5-list/issues/136


Additional information

  1. Fixed selecting "unchecked" list element on Safari
  2. Fixed vertical align of checkmark with larger fonts
  3. Fixed WCAG contrast of checkmark (now passing 3.0)

@dkonopka dkonopka added the pr:sub label Sep 4, 2019
theme/ckeditor5-ui/components/list/list.css Outdated Show resolved Hide resolved
theme/ckeditor5-ui/components/list/list.css Outdated Show resolved Hide resolved
theme/ckeditor5-ui/components/list/list.css Outdated Show resolved Hide resolved
theme/ckeditor5-ui/components/list/list.css Outdated Show resolved Hide resolved
theme/ckeditor5-ui/components/list/list.css Outdated Show resolved Hide resolved
theme/ckeditor5-ui/components/list/list.css Outdated Show resolved Hide resolved
theme/ckeditor5-ui/components/list/list.css Outdated Show resolved Hide resolved
theme/ckeditor5-ui/components/list/list.css Outdated Show resolved Hide resolved
theme/ckeditor5-ui/components/list/list.css Outdated Show resolved Hide resolved
theme/ckeditor5-ui/components/list/list.css Outdated Show resolved Hide resolved
Copy link
Member

@oleq oleq left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like using relative values

	left: calc( var(--ck-spacing-large) * -1.5 );
	margin-right: calc( var(--ck-spacing-large) * -1 );

wasn't the best idea and we'll need to bring back the absolute values

image

This is because when the font size is applied it wraps both the <label> and the text

image

@oleq
Copy link
Member

oleq commented Sep 19, 2019

This should be reverted when 7e7d268 goes into master.

@dkonopka
Copy link
Contributor Author

dkonopka commented Sep 19, 2019

Ok, now it's work properly with various size of font and checkmark size:

Screen Shot 2019-09-19 at 15 05 27

And RTL (thanks for adding it ❤️, I completely forgot about this!):
Screen Shot 2019-09-19 at 15 09 54

@oleq oleq merged commit 0d4a5e2 into master Sep 19, 2019
@oleq oleq deleted the t/ckeditor5-list/136 branch September 19, 2019 14:18
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
2 participants