Procházet zdrojové kódy

Adjusted link form styles along with action button and input styles.

Aleksander Nowodzinski před 8 roky
rodič
revize
24e873f38d

+ 10 - 20
packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkform.css

@@ -4,36 +4,26 @@
  */
 
 .ck-link-form {
-	padding: var(--ck-spacing-large);
+	padding: var(--ck-spacing-standard);
+	display: flex;
+	flex-flow: row nowrap;
+	align-content: center;
 
 	&:focus {
 		/* https://github.com/ckeditor/ckeditor5-link/issues/90 */
 		outline: none;
 	}
 
+	& > :not(:first-child) {
+		margin-left: var(--ck-spacing-standard);
+	}
+
 	& .ck-input-text {
 		/* https://github.com/ckeditor/ckeditor5-link/issues/145 */
-		width: 100%;
+		min-width: 18em;
 	}
 
 	& .ck-label {
-		margin-bottom: var(--ck-spacing-tiny);
-	}
-}
-
-.ck-link-form__actions {
-	padding-top: var(--ck-spacing-large);
-
-	& .ck-button {
-		/* "Save" and "Cancel" buttons. */
-		& + .ck-button {
-			margin-right: var(--ck-spacing-medium);
-		}
-
-		/* The "Unlink" button.*/
-		&:last-child {
-			/* https://github.com/ckeditor/ckeditor5-link/issues/145 */
-			margin-right: calc(4 * var(--ck-spacing-medium));
-		}
+		display: none;
 	}
 }

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

@@ -74,7 +74,7 @@ a.ck-button {
 			the button properly. When there's no text in the button, browsers render
 			them too small. It's a really tricky topic, when browsers render svg as an inline
 			content and line size (character width) measurement and alignment kicks in. */
-			margin: 0.16em;
+			margin: var(--ck-spacing-tiny);
 		}
 	}
 

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

@@ -17,7 +17,7 @@
 
 	background: var(--ck-color-input-background);
 	border: 1px solid var(--ck-color-input-border);
-	padding: var(--ck-spacing-small) var(--ck-spacing-medium);
+	padding: var(--ck-spacing-tiny) var(--ck-spacing-medium);
 	min-width: var(--ck-input-text-min-width);
 
 	&:focus {

+ 3 - 3
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_colors.css

@@ -6,7 +6,7 @@
 :root {
 	--ck-color-base-foreground: 								hsl(0, 0%, 97%);
 	--ck-color-base-background: 								hsl(0, 0%, 100%);
-	--ck-color-base-border: 									hsl(0, 0%, 75%);
+	--ck-color-base-border: 									hsl(0, 0%, 72%);
 	--ck-color-base-action: 									hsl(104, 44%, 48%);
 	--ck-color-base-focus: 										hsl(209, 92%, 70%);
 	--ck-color-base-text: 										hsl(0, 0%, 20%);
@@ -44,7 +44,7 @@
 	--ck-color-button-on-disabled-border: 						hsl(0, 0%, 75%);
 
 	--ck-color-button-action-background: 						var(--ck-color-base-action);
-	--ck-color-button-action-border: 							hsl(104, 44%, 39%);
+	--ck-color-button-action-border: 							var(--ck-color-base-action);
 	--ck-color-button-action-focus-background: 					hsl(104, 44%, 43%);
 	--ck-color-button-action-focus-border: 						hsl(104, 44%, 35%);
 	--ck-color-button-action-active-background: 				hsl(104, 44%, 41%);
@@ -64,7 +64,7 @@
 	/* -- Input --------------------------------------------------------------------------------- */
 
 	--ck-color-input-background: 								var(--ck-color-base-background);
-	--ck-color-input-border: 									var(--ck-color-base-border);
+	--ck-color-input-border: 									hsl(0, 0%, 78%);
 	--ck-color-input-text: 										var(--ck-color-base-text);
 	--ck-color-input-disabled-background: 						hsl(0, 0%, 95%);
 	--ck-color-input-disabled-border: 							hsl(0, 0%, 78%);

+ 1 - 1
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_rounded.css

@@ -7,5 +7,5 @@
  * Default border-radius value.
  */
 :root{
-	--ck-border-radius: 1px;
+	--ck-border-radius: 2px;
 }

+ 2 - 2
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_spacing.css

@@ -9,6 +9,6 @@
 	--ck-spacing-standard: 					var(--ck-spacing-unit);
 	--ck-spacing-medium: 					calc(var(--ck-spacing-unit) * 0.8);
 	--ck-spacing-small: 					calc(var(--ck-spacing-unit) * 0.5);
-	--ck-spacing-tiny: 						calc(var(--ck-spacing-unit) * 0.3);
-	--ck-spacing-extra-tiny: 				calc(var(--ck-spacing-unit) * 0.15);
+	--ck-spacing-tiny: 						calc(var(--ck-spacing-unit) * 0.25);
+	--ck-spacing-extra-tiny: 				calc(var(--ck-spacing-unit) * 0.16);
 }