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
Development

Successfully merging this pull request may close these issues.

To-do list check marks fail WCAG Improve styles of todo list
2 participants