소스 검색

Merge remote-tracking branch 'origin/master' into i/1110

Marek Lewandowski 6 년 전
부모
커밋
d53691501f

+ 3 - 0
packages/ckeditor5-theme-lark/.stylelintrc

@@ -0,0 +1,3 @@
+{
+	"extends": "stylelint-config-ckeditor5"
+}

+ 8 - 2
packages/ckeditor5-theme-lark/package.json

@@ -33,7 +33,9 @@
     "eslint": "^5.5.0",
     "eslint": "^5.5.0",
     "eslint-config-ckeditor5": "^2.0.0",
     "eslint-config-ckeditor5": "^2.0.0",
     "husky": "^1.3.1",
     "husky": "^1.3.1",
-    "lint-staged": "^7.0.0"
+    "lint-staged": "^7.0.0",
+    "stylelint": "^11.1.1",
+    "stylelint-config-ckeditor5": "^1.0.0"
   },
   },
   "engines": {
   "engines": {
     "node": ">=8.0.0",
     "node": ">=8.0.0",
@@ -53,12 +55,16 @@
     "theme"
     "theme"
   ],
   ],
   "scripts": {
   "scripts": {
-    "lint": "eslint --quiet '**/*.js'"
+    "lint": "eslint --quiet '**/*.js'",
+    "stylelint": "stylelint --quiet --allow-empty-input 'theme/**/*.css' 'docs/**/*.css'"
   },
   },
   "main": "./theme/theme.css",
   "main": "./theme/theme.css",
   "lint-staged": {
   "lint-staged": {
     "**/*.js": [
     "**/*.js": [
       "eslint --quiet"
       "eslint --quiet"
+    ],
+    "**/*.css": [
+      "stylelint --quiet --allow-empty-input"
     ]
     ]
   },
   },
   "eslintIgnore": [
   "eslintIgnore": [

+ 5 - 0
packages/ckeditor5-theme-lark/tests/manual/theme.html

@@ -77,6 +77,11 @@
 		<div id="button-icon-states"></div>
 		<div id="button-icon-states"></div>
 	</div>
 	</div>
 
 
+	<h3>Button: Keystrokes</h3>
+	<div class="ck ck-reset_all">
+		<div id="button-keystroke" class="wrappable"></div>
+	</div>
+
 	<h3>Button: Responsiveness</h3>
 	<h3>Button: Responsiveness</h3>
 	<div id="button-responsive-1" class="button-responsive ck-reset_all">
 	<div id="button-responsive-1" class="button-responsive ck-reset_all">
 		<div id="button-responsive-2" class="button-responsive">
 		<div id="button-responsive-2" class="button-responsive">

+ 42 - 1
packages/ckeditor5-theme-lark/tests/manual/theme.js

@@ -62,6 +62,7 @@ const ui = testUtils.createTestUIView( {
 	'buttonStates': '#button-states',
 	'buttonStates': '#button-states',
 	'buttonTypes': '#button-types',
 	'buttonTypes': '#button-types',
 	'buttonIcon': '#button-icon',
 	'buttonIcon': '#button-icon',
+	'buttonKeystroke': '#button-keystroke',
 	'buttonCustom': '#button-custom',
 	'buttonCustom': '#button-custom',
 	'buttonIconCustom': '#button-icon-custom',
 	'buttonIconCustom': '#button-icon-custom',
 	'buttonIconStates': '#button-icon-states',
 	'buttonIconStates': '#button-icon-states',
@@ -183,6 +184,22 @@ function renderButton() {
 	// TODO: It requires model interface.
 	// TODO: It requires model interface.
 	disabledActionButton.element.classList.add( 'ck-button-action' );
 	disabledActionButton.element.classList.add( 'ck-button-action' );
 
 
+	// --- Keystrokes ------------------------------------------------------------
+
+	ui.buttonKeystroke.add( toolbar( [
+		button( {
+			label: 'Foo',
+			keystroke: 'Ctrl+A',
+			withKeystroke: true
+		} ),
+		button( {
+			label: 'Bar',
+			icon: boldIcon,
+			keystroke: 'Shift+Tab',
+			withKeystroke: true
+		} )
+	] ) );
+
 	// --- Responsive ------------------------------------------------------------
 	// --- Responsive ------------------------------------------------------------
 
 
 	for ( let i = 1; i < 4; i++ ) {
 	for ( let i = 1; i < 4; i++ ) {
@@ -251,6 +268,29 @@ function renderDropdown() {
 		} )
 		} )
 	} );
 	} );
 
 
+	collection.add( {
+		type: 'button',
+		model: new Model( {
+			label: 'Icon and key',
+			withText: true,
+			icon: boldIcon,
+			keystroke: 'Shift+Tab',
+			withKeystroke: true
+		} )
+	} );
+
+	collection.add( {
+		type: 'button',
+		model: new Model( {
+			label: 'On with a keystroke',
+			withText: true,
+			isOn: true,
+			icon: boldIcon,
+			keystroke: 'Ctrl+A',
+			withKeystroke: true
+		} )
+	} );
+
 	collection.add( {
 	collection.add( {
 		type: 'switchbutton',
 		type: 'switchbutton',
 		model: new Model( {
 		model: new Model( {
@@ -475,11 +515,12 @@ function button( {
 	keystroke = null,
 	keystroke = null,
 	tooltip,
 	tooltip,
 	tooltipPosition = 's',
 	tooltipPosition = 's',
+	withKeystroke = false,
 	icon
 	icon
 } = {} ) {
 } = {} ) {
 	const button = new ButtonView();
 	const button = new ButtonView();
 
 
-	button.set( { label, isEnabled, isOn, withText, icon, keystroke, tooltip, tooltipPosition } );
+	button.set( { label, isEnabled, isOn, withText, icon, keystroke, tooltip, withKeystroke, tooltipPosition } );
 
 
 	return button;
 	return button;
 }
 }

+ 17 - 17
packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkactions.css

@@ -17,23 +17,6 @@
 		padding-left: 0;
 		padding-left: 0;
 		padding-right: 0;
 		padding-right: 0;
 
 
-		&,
-		&:hover,
-		&:focus,
-		&:active {
-			background: none;
-		}
-
-		&:active {
-			box-shadow: none;
-		}
-
-		&:focus {
-			& .ck-button__label {
-				text-decoration: underline;
-			}
-		}
-
 		& .ck-button__label {
 		& .ck-button__label {
 			padding: 0 var(--ck-spacing-medium);
 			padding: 0 var(--ck-spacing-medium);
 			color: var(--ck-color-link-default);
 			color: var(--ck-color-link-default);
@@ -50,6 +33,23 @@
 				text-decoration: underline;
 				text-decoration: underline;
 			}
 			}
 		}
 		}
+
+		&,
+		&:hover,
+		&:focus,
+		&:active {
+			background: none;
+		}
+
+		&:active {
+			box-shadow: none;
+		}
+
+		&:focus {
+			& .ck-button__label {
+				text-decoration: underline;
+			}
+		}
 	}
 	}
 
 
 	&:focus {
 	&:focus {

파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 12 - 17
packages/ckeditor5-theme-lark/theme/ckeditor5-media-embed/mediaembedediting.css


+ 55 - 28
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/button/button.css

@@ -47,6 +47,49 @@ a.ck.ck-button {
 		@mixin ck-box-shadow var(--ck-focus-outer-shadow);
 		@mixin ck-box-shadow var(--ck-focus-outer-shadow);
 	}
 	}
 
 
+	/* Allow icon coloring using the text "color" property. */
+	& .ck-button__icon {
+		& use,
+		& use * {
+			color: inherit;
+		}
+	}
+
+	& .ck-button__label {
+		/* Enable font size inheritance, which allows fluid UI scaling. */
+		font-size: inherit;
+		font-weight: inherit;
+		color: inherit;
+		cursor: inherit;
+
+		/* Must be consistent with .ck-icon's vertical align. Otherwise, buttons with and
+		without labels (but with icons) have different sizes in Chrome */
+		vertical-align: middle;
+
+		@mixin ck-dir ltr {
+			text-align: left;
+		}
+
+		@mixin ck-dir rtl {
+			text-align: right;
+		}
+	}
+
+	& .ck-button__keystroke {
+		color: inherit;
+
+		@mixin ck-dir ltr {
+			margin-left: var(--ck-spacing-large);
+		}
+
+		@mixin ck-dir rtl {
+			margin-right: var(--ck-spacing-large);
+		}
+
+		font-weight: bold;
+		opacity: .7;
+	}
+
 	/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/70 */
 	/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/70 */
 	&.ck-disabled {
 	&.ck-disabled {
 		&:active,
 		&:active,
@@ -63,11 +106,16 @@ a.ck.ck-button {
 		& .ck-button__label {
 		& .ck-button__label {
 			@mixin ck-disabled;
 			@mixin ck-disabled;
 		}
 		}
+
+		& .ck-button__keystroke {
+			opacity: .3;
+		}
 	}
 	}
 
 
 	&.ck-button_with-text {
 	&.ck-button_with-text {
 		padding: var(--ck-spacing-tiny) var(--ck-spacing-standard);
 		padding: var(--ck-spacing-tiny) var(--ck-spacing-standard);
 
 
+		/* stylelint-disable-next-line no-descending-specificity */
 		& .ck-button__icon {
 		& .ck-button__icon {
 			@mixin ck-dir ltr {
 			@mixin ck-dir ltr {
 				margin-left: calc(-1 * var(--ck-spacing-small));
 				margin-left: calc(-1 * var(--ck-spacing-small));
@@ -81,6 +129,13 @@ a.ck.ck-button {
 		}
 		}
 	}
 	}
 
 
+	&.ck-button_with-keystroke {
+		/* stylelint-disable-next-line no-descending-specificity */
+		& .ck-button__label {
+			flex-grow: 1;
+		}
+	}
+
 	/* A style of the button which is currently on, e.g. its feature is active. */
 	/* A style of the button which is currently on, e.g. its feature is active. */
 	&.ck-on {
 	&.ck-on {
 		@mixin ck-button-colors --ck-color-button-on;
 		@mixin ck-button-colors --ck-color-button-on;
@@ -93,34 +148,6 @@ a.ck.ck-button {
 	&.ck-button-cancel {
 	&.ck-button-cancel {
 		color: var(--ck-color-button-cancel);
 		color: var(--ck-color-button-cancel);
 	}
 	}
-
-	/* Allow icon coloring using the text "color" property. */
-	& .ck-button__icon {
-		& use,
-		& use * {
-			color: inherit;
-		}
-	}
-
-	& .ck-button__label {
-		/* Enable font size inheritance, which allows fluid UI scaling. */
-		font-size: inherit;
-		font-weight: inherit;
-		color: inherit;
-		cursor: inherit;
-
-		/* Must be consistent with .ck-icon's vertical align. Otherwise, buttons with and
-		without labels (but with icons) have different sizes in Chrome */
-		vertical-align: middle;
-
-		@mixin ck-dir ltr {
-			text-align: left;
-		}
-
-		@mixin ck-dir rtl {
-			text-align: right;
-		}
-	}
 }
 }
 
 
 /* A style of the button which handles the primary action. */
 /* A style of the button which handles the primary action. */

+ 16 - 16
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/button/switchbutton.css

@@ -23,19 +23,15 @@ of the component, floating–point numbers have been used which, for the default
 	& .ck-button__label {
 	& .ck-button__label {
 		@mixin ck-dir ltr {
 		@mixin ck-dir ltr {
 			/* Separate the label from the switch */
 			/* Separate the label from the switch */
-			margin-right: calc(2*var(--ck-spacing-large));
+			margin-right: calc(2 * var(--ck-spacing-large));
 		}
 		}
 
 
 		@mixin ck-dir rtl {
 		@mixin ck-dir rtl {
 			/* Separate the label from the switch */
 			/* Separate the label from the switch */
-			margin-left: calc(2*var(--ck-spacing-large));
+			margin-left: calc(2 * var(--ck-spacing-large));
 		}
 		}
 	}
 	}
 
 
-	&.ck-disabled .ck-button__toggle {
-		@mixin ck-disabled;
-	}
-
 	& .ck-button__toggle {
 	& .ck-button__toggle {
 		@mixin ck-rounded-corners;
 		@mixin ck-rounded-corners;
 
 
@@ -55,17 +51,9 @@ of the component, floating–point numbers have been used which, for the default
 		width: var(--ck-switch-button-toggle-width);
 		width: var(--ck-switch-button-toggle-width);
 		background: var(--ck-color-switch-button-off-background);
 		background: var(--ck-color-switch-button-off-background);
 
 
-		&:hover {
-			background: var(--ck-color-switch-button-off-hover-background);
-
-			& .ck-button__toggle__inner {
-				box-shadow: 0 0 0 5px var(--ck-color-switch-button-inner-shadow);
-			}
-		}
-
 		& .ck-button__toggle__inner {
 		& .ck-button__toggle__inner {
 			@mixin ck-rounded-corners {
 			@mixin ck-rounded-corners {
-				border-radius: calc(.5*var(--ck-border-radius));
+				border-radius: calc(.5 * var(--ck-border-radius));
 			}
 			}
 
 
 			/* Leave some tiny bit of space around the inner part of the switch */
 			/* Leave some tiny bit of space around the inner part of the switch */
@@ -77,6 +65,18 @@ of the component, floating–point numbers have been used which, for the default
 			/* Gently animate the inner part of the toggle switch */
 			/* Gently animate the inner part of the toggle switch */
 			transition: all 300ms ease;
 			transition: all 300ms ease;
 		}
 		}
+
+		&:hover {
+			background: var(--ck-color-switch-button-off-hover-background);
+
+			& .ck-button__toggle__inner {
+				box-shadow: 0 0 0 5px var(--ck-color-switch-button-inner-shadow);
+			}
+		}
+	}
+
+	&.ck-disabled .ck-button__toggle {
+		@mixin ck-disabled;
 	}
 	}
 
 
 	&.ck-on .ck-button__toggle {
 	&.ck-on .ck-button__toggle {
@@ -96,7 +96,7 @@ of the component, floating–point numbers have been used which, for the default
 			 * 	calc(
 			 * 	calc(
 			 * 		var(--ck-switch-button-toggle-width) -
 			 * 		var(--ck-switch-button-toggle-width) -
 			 * 		var(--ck-switch-button-toggle-inner-size) -
 			 * 		var(--ck-switch-button-toggle-inner-size) -
-			 * 		2*var(--ck-switch-button-toggle-spacing) )
+			 * 		2 * var(--ck-switch-button-toggle-spacing) )
 			 * 	)
 			 * 	)
 			 */
 			 */
 			@mixin ck-dir ltr {
 			@mixin ck-dir ltr {

+ 9 - 9
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown/dropdown.css

@@ -57,9 +57,16 @@
 			}
 			}
 		}
 		}
 
 
+		/* #23 */
+		& .ck-button__label {
+			width: 7em;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+
 		/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/70 */
 		/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/70 */
-		&.ck-disabled .ck-button__label {
-			@mixin ck-disabled;
+	&.ck-disabled .ck-button__label {
+		@mixin ck-disabled;
 		}
 		}
 
 
 		/* https://github.com/ckeditor/ckeditor5/issues/816 */
 		/* https://github.com/ckeditor/ckeditor5/issues/816 */
@@ -67,13 +74,6 @@
 			border-bottom-left-radius: 0;
 			border-bottom-left-radius: 0;
 			border-bottom-right-radius: 0;
 			border-bottom-right-radius: 0;
 		}
 		}
-
-		/* #23 */
-		& .ck-button__label {
-			width: 7em;
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
 	}
 	}
 }
 }
 
 

+ 1 - 2
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/inputtext/inputtext.css

@@ -24,8 +24,7 @@
 	min-height: var(--ck-ui-component-min-height);
 	min-height: var(--ck-ui-component-min-height);
 
 
 	/* Apply some smooth transition to the box-shadow and border. */
 	/* Apply some smooth transition to the box-shadow and border. */
-	transition-property: box-shadow, border;
-	transition: .2s ease-in-out;
+	transition: box-shadow .2s ease-in-out, border .2s ease-in-out;
 
 
 	&:focus {
 	&:focus {
 		@mixin ck-focus-ring;
 		@mixin ck-focus-ring;

+ 7 - 7
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/list/list.css

@@ -28,12 +28,12 @@
 		   because e.g. different heading styles may have different height
 		   because e.g. different heading styles may have different height
 		   https://github.com/ckeditor/ckeditor5-heading/issues/63 */
 		   https://github.com/ckeditor/ckeditor5-heading/issues/63 */
 		padding:
 		padding:
-			calc(.2*var(--ck-line-height-base)*var(--ck-font-size-base))
-			calc(.4*var(--ck-line-height-base)*var(--ck-font-size-base));
+			calc(.2 * var(--ck-line-height-base) * var(--ck-font-size-base))
+			calc(.4 * var(--ck-line-height-base) * var(--ck-font-size-base));
 
 
 		& .ck-button__label {
 		& .ck-button__label {
 			/* https://github.com/ckeditor/ckeditor5-heading/issues/63 */
 			/* https://github.com/ckeditor/ckeditor5-heading/issues/63 */
-			line-height: calc(1.2*var(--ck-line-height-base)*var(--ck-font-size-base));
+			line-height: calc(1.2 * var(--ck-line-height-base) * var(--ck-font-size-base));
 		}
 		}
 
 
 		&:active {
 		&:active {
@@ -44,14 +44,14 @@
 			background: var(--ck-color-list-button-on-background);
 			background: var(--ck-color-list-button-on-background);
 			color: var(--ck-color-list-button-on-text);
 			color: var(--ck-color-list-button-on-text);
 
 
-			&:hover:not(.ck-disabled) {
-				background: var(--ck-color-list-button-on-background-focus);
-			}
-
 			&:active {
 			&:active {
 				box-shadow: none;
 				box-shadow: none;
 			}
 			}
 
 
+			&:hover:not(.ck-disabled) {
+				background: var(--ck-color-list-button-on-background-focus);
+			}
+
 			&:focus:not(.ck-disabled) {
 			&:focus:not(.ck-disabled) {
 				border-color: var(--ck-color-base-background);
 				border-color: var(--ck-color-base-background);
 			}
 			}

+ 16 - 16
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/toolbar/toolbar.css

@@ -79,21 +79,27 @@
  * Note: In some cases (e.g. a decoupled editor), the toolbar has its own "dir"
  * Note: In some cases (e.g. a decoupled editor), the toolbar has its own "dir"
  * because its parent is not controlled by the editor framework.
  * because its parent is not controlled by the editor framework.
  */
  */
-[dir="ltr"] .ck.ck-toolbar,
-.ck.ck-toolbar[dir="ltr"] {
+[dir="rtl"] .ck.ck-toolbar,
+.ck.ck-toolbar[dir="rtl"] {
 	& > .ck.ck-toolbar__grouped-dropdown {
 	& > .ck.ck-toolbar__grouped-dropdown {
-		padding-left: var(--ck-spacing-small);
+		padding-right: var(--ck-spacing-small);
 	}
 	}
 
 
 	& > .ck.ck-toolbar__items {
 	& > .ck.ck-toolbar__items {
-		& > *:last-child {
+		& > * {
+			/* (#11) Separate toolbar items. */
+			margin-left: var(--ck-spacing-small);
 			margin-right: 0;
 			margin-right: 0;
 		}
 		}
+
+		& > *:last-child {
+			margin-left: 0;
+		}
 	}
 	}
 
 
 	/* Some spacing between the items and the separator before the grouped items dropdown. */
 	/* Some spacing between the items and the separator before the grouped items dropdown. */
 	&.ck-toolbar_grouping > .ck-toolbar__items {
 	&.ck-toolbar_grouping > .ck-toolbar__items {
-		margin-right: var(--ck-spacing-small);
+		margin-left: var(--ck-spacing-small);
 	}
 	}
 }
 }
 
 
@@ -101,26 +107,20 @@
  * Note: In some cases (e.g. a decoupled editor), the toolbar has its own "dir"
  * Note: In some cases (e.g. a decoupled editor), the toolbar has its own "dir"
  * because its parent is not controlled by the editor framework.
  * because its parent is not controlled by the editor framework.
  */
  */
-[dir="rtl"] .ck.ck-toolbar,
-.ck.ck-toolbar[dir="rtl"] {
+[dir="ltr"] .ck.ck-toolbar,
+.ck.ck-toolbar[dir="ltr"] {
 	& > .ck.ck-toolbar__grouped-dropdown {
 	& > .ck.ck-toolbar__grouped-dropdown {
-		padding-right: var(--ck-spacing-small);
+		padding-left: var(--ck-spacing-small);
 	}
 	}
 
 
 	& > .ck.ck-toolbar__items {
 	& > .ck.ck-toolbar__items {
-		& > * {
-			/* (#11) Separate toolbar items. */
-			margin-left: var(--ck-spacing-small);
-			margin-right: 0;
-		}
-
 		& > *:last-child {
 		& > *:last-child {
-			margin-left: 0;
+			margin-right: 0;
 		}
 		}
 	}
 	}
 
 
 	/* Some spacing between the items and the separator before the grouped items dropdown. */
 	/* Some spacing between the items and the separator before the grouped items dropdown. */
 	&.ck-toolbar_grouping > .ck-toolbar__items {
 	&.ck-toolbar_grouping > .ck-toolbar__items {
-		margin-left: var(--ck-spacing-small);
+		margin-right: var(--ck-spacing-small);
 	}
 	}
 }
 }

+ 30 - 26
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/tooltip/tooltip.css

@@ -18,6 +18,36 @@
 	 */
 	 */
 	top: 0;
 	top: 0;
 
 
+	/*
+	 * For the transition to work, the tooltip must be controlled
+	 * using visibility+opacity. A delay prevents a "tooltip avalanche"
+	 * i.e. when scanning the toolbar with mouse cursor.
+	 */
+	transition: opacity .2s ease-in-out .2s;
+
+	& .ck-tooltip__text {
+		@mixin ck-rounded-corners;
+
+		font-size: .9em;
+		line-height: 1.5;
+		color: var(--ck-color-tooltip-text);
+		padding: var(--ck-spacing-small) var(--ck-spacing-medium);
+		background: var(--ck-color-tooltip-background);
+		position: relative;
+		left: -50%;
+
+		&::after {
+			/*
+			 * For the transition to work, the tooltip must be controlled
+			 * using visibility+opacity. A delay prevents a "tooltip avalanche"
+			 * i.e. when scanning the toolbar with mouse cursor.
+			 */
+			transition: opacity .2s ease-in-out .2s;
+			border-style: solid;
+			left: 50%;
+		}
+	}
+
 	/**
 	/**
 	 * A class once applied displays the tooltip south of the element.
 	 * A class once applied displays the tooltip south of the element.
 	 *
 	 *
@@ -59,30 +89,4 @@
 			border-width: var(--ck-tooltip-arrow-size) var(--ck-tooltip-arrow-size) 0 var(--ck-tooltip-arrow-size);
 			border-width: var(--ck-tooltip-arrow-size) var(--ck-tooltip-arrow-size) 0 var(--ck-tooltip-arrow-size);
 		}
 		}
 	}
 	}
-
-	& .ck-tooltip__text {
-		@mixin ck-rounded-corners;
-
-		font-size: .9em;
-		line-height: 1.5;
-		color: var(--ck-color-tooltip-text);
-		padding: var(--ck-spacing-small) var(--ck-spacing-medium);
-		background: var(--ck-color-tooltip-background);
-		position: relative;
-		left: -50%;
-
-		&::after {
-			border-style: solid;
-			left: 50%;
-		}
-	}
 }
 }
-
-.ck.ck-tooltip,
-.ck.ck-tooltip .ck-tooltip__text::after {
-	/* For the transition to work, the tooltip must be controlled
-	using visibility+opacity. A delay prevents a "tooltip avalanche"
-	i.e. when scanning the toolbar with mouse cursor. */
-	transition: opacity .2s ease-in-out .2s;
-}
-

+ 26 - 23
packages/ckeditor5-theme-lark/theme/ckeditor5-widget/widget.css

@@ -48,16 +48,6 @@
 	}
 	}
 }
 }
 
 
-.ck-editor__editable > .ck-widget.ck-widget_with-selection-handle:first-child,
-.ck-editor__editable blockquote > .ck-widget.ck-widget_with-selection-handle:first-child {
-	/* Do not crop selection handler if a widget is a first-child in the blockquote or in the root editable.
-	In fact, anything with overflow: hidden.
-	https://github.com/ckeditor/ckeditor5-block-quote/issues/28
-	https://github.com/ckeditor/ckeditor5-widget/issues/44
-	https://github.com/ckeditor/ckeditor5-widget/issues/66 */
-	margin-top: calc(1em + var(--ck-widget-handler-icon-size));
-}
-
 .ck .ck-widget.ck-widget_with-selection-handle {
 .ck .ck-widget.ck-widget_with-selection-handle {
 	& .ck-widget__selection-handle {
 	& .ck-widget__selection-handle {
 		padding: 4px;
 		padding: 4px;
@@ -83,11 +73,6 @@
 		transform: translateY(-100%);
 		transform: translateY(-100%);
 		left: calc(0px - var(--ck-widget-outline-thickness));
 		left: calc(0px - var(--ck-widget-outline-thickness));
 
 
-		/* Advertise using the look of the icon that once clicked the handler, the widget will be selected. */
-		&:hover .ck-icon .ck-icon__selected-indicator {
-			opacity: 1;
-		}
-
 		& .ck-icon {
 		& .ck-icon {
 			/* Make sure the dimensions of the icon are independent of the fon-size of the content. */
 			/* Make sure the dimensions of the icon are independent of the fon-size of the content. */
 			width: var(--ck-widget-handler-icon-size);
 			width: var(--ck-widget-handler-icon-size);
@@ -102,6 +87,17 @@
 				transition: opacity 300ms var(--ck-widget-handler-animation-curve);
 				transition: opacity 300ms var(--ck-widget-handler-animation-curve);
 			}
 			}
 		}
 		}
+
+		/* Advertise using the look of the icon that once clicked the handler, the widget will be selected. */
+		&:hover .ck-icon .ck-icon__selected-indicator {
+			opacity: 1;
+		}
+	}
+
+	/* Show the selection handler on mouse hover over the widget. */
+	&:hover .ck-widget__selection-handle {
+		opacity: 1;
+		background-color: var(--ck-color-widget-hover-border);
 	}
 	}
 
 
 	/* Show the selection handler when the widget is selected. */
 	/* Show the selection handler when the widget is selected. */
@@ -117,15 +113,20 @@
 			}
 			}
 		}
 		}
 	}
 	}
+}
 
 
-	/* Show the selection handler on mouse hover over the widget. */
-	&:hover .ck-widget__selection-handle {
-		opacity: 1;
-		background-color: var(--ck-color-widget-hover-border);
-	}
+.ck-editor__editable > .ck-widget.ck-widget_with-selection-handle:first-child,
+.ck-editor__editable blockquote > .ck-widget.ck-widget_with-selection-handle:first-child {
+	/* Do not crop selection handler if a widget is a first-child in the blockquote or in the root editable.
+	In fact, anything with overflow: hidden.
+	https://github.com/ckeditor/ckeditor5-block-quote/issues/28
+	https://github.com/ckeditor/ckeditor5-widget/issues/44
+	https://github.com/ckeditor/ckeditor5-widget/issues/66 */
+	margin-top: calc(1em + var(--ck-widget-handler-icon-size));
 }
 }
 
 
 /* In a RTL environment, align the selection handler to the right side of the widget */
 /* In a RTL environment, align the selection handler to the right side of the widget */
+/* stylelint-disable-next-line no-descending-specificity */
 .ck[dir="rtl"] .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle {
 .ck[dir="rtl"] .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle {
 	left: auto;
 	left: auto;
 	right: calc(0px - var(--ck-widget-outline-thickness));
 	right: calc(0px - var(--ck-widget-outline-thickness));
@@ -137,9 +138,11 @@
 	&.ck-widget_selected:hover {
 	&.ck-widget_selected:hover {
 		outline-color: var(--ck-color-widget-blurred-border);
 		outline-color: var(--ck-color-widget-blurred-border);
 
 
-		& .ck-widget__selection-handle,
-		& .ck-widget__selection-handle:hover {
-			background: var(--ck-color-widget-blurred-border);
+		&.ck-widget_with-selection-handle {
+			& .ck-widget__selection-handle,
+			& .ck-widget__selection-handle:hover {
+				background: var(--ck-color-widget-blurred-border);
+			}
 		}
 		}
 	}
 	}
 }
 }

이 변경점에서 너무 많은 파일들이 변경되어 몇몇 파일들은 표시되지 않았습니다.