Browse Source

Code refactoring.

Aleksander Nowodzinski 5 years ago
parent
commit
6597408bae

+ 26 - 41
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/labeledfield/labeledfieldview.css

@@ -14,56 +14,41 @@
 	@mixin ck-rounded-corners;
 
 	& > .ck.ck-labeled-field-view__input-wrapper {
-		display: flex;
-		position: relative;
 		width: 100%;
-	}
-
-	& .ck.ck-input {
-		width: 100%;
-	}
 
-	& .ck.ck-label {
-		display: block;
-		position: absolute;
-		top: 0px;
-		left: 0px;
+		& > .ck.ck-label {
+			top: 0px;
+			left: 0px;
 
-		pointer-events: none;
+			pointer-events: none;
+			transform-origin: 0 0;
 
-		transform-origin: 0 0;
+			/* By default, display the label scaled down above the field. */
+			transform: translate(var(--ck-spacing-medium), -6px) scale(.75);
 
-		/* By default, display the label scaled down above the field. */
-		transform: translate(var(--ck-spacing-medium), -6px) scale(.75);
+			background: var(--ck-color-base-background);
+			padding: 0 calc(.5 * var(--ck-font-size-tiny));
+			line-height: initial;
+			font-weight: normal;
 
-		background: var(--ck-color-base-background);
-		padding: 0 calc(.5 * var(--ck-font-size-tiny));
-		line-height: initial;
-		font-weight: normal;
-
-		/* Prevent overflow when the label is longer than the input */
-		text-overflow: ellipsis;
-		overflow: hidden;
-
-		max-width: 100%;
-
-		transition:
-			transform var(--ck-labeled-field-view-transition),
-			padding var(--ck-labeled-field-view-transition),
-			background var(--ck-labeled-field-view-transition);
-	}
+			/* Prevent overflow when the label is longer than the input */
+			text-overflow: ellipsis;
+			overflow: hidden;
 
-	&.ck-error > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label {
-		color: var(--ck-color-base-error);
-	}
+			max-width: 100%;
 
-	&.ck-labeled-input_focused {
-		& .ck-input:not([readonly]) + .ck.ck-label {
-			color: hsl(207.9,69.4%,44.9%);
+			transition:
+				transform var(--ck-labeled-field-view-transition),
+				padding var(--ck-labeled-field-view-transition),
+				background var(--ck-labeled-field-view-transition);
 		}
 	}
 
 	&.ck-error {
+		& > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label {
+			color: var(--ck-color-base-error);
+		}
+
 		& .ck-input:not([readonly]) + .ck.ck-label {
 			color: var(--ck-color-base-error);
 		}
@@ -76,10 +61,10 @@
 		/* Let the info wrap to the next line to avoid stretching the layout horizontally.
 		The status could be very long. */
 		white-space: normal;
-	}
 
-	& .ck-labeled-field-view__status_error {
-		color: var(--ck-color-base-error);
+		&.ck-labeled-field-view__status_error {
+			color: var(--ck-color-base-error);
+		}
 	}
 
 	/* Disabled fields and fields that have no focus should fade out. */

+ 11 - 5
packages/ckeditor5-ui/theme/components/labeledfield/labeledfieldview.css

@@ -3,8 +3,14 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-/*
- * Note: This file should contain the wireframe styles only. But since there are no such styles,
- * it acts as a message to the builder telling that it should look for the corresponding styles
- * **in the theme** when compiling the editor.
- */
+.ck.ck-labeled-field-view {
+	& > .ck.ck-labeled-field-view__input-wrapper {
+		display: flex;
+		position: relative;
+	}
+
+	& .ck.ck-label {
+		display: block;
+		position: absolute;
+	}
+}