소스 검색

Docs: Improved the design of dynamic text statistics boxes in the feature guide. [skip ci]

Aleksander Nowodzinski 6 년 전
부모
커밋
4c434cb123

+ 17 - 0
packages/ckeditor5-word-count/docs/_snippets/features/build-word-count-source.html

@@ -0,0 +1,17 @@
+<style>
+	.word-count {
+		padding: 10px 20px;
+		margin-bottom: 15px;
+		background: var(--ck-color-toolbar-background);
+		border-left: 10px hsl(291, 64%, 42%) solid;
+		box-shadow: 2px 2px 2px hsla(0,0%,0%,0.1);
+	}
+
+	.word-count::before {
+		content: "Text statistics";
+		display: block;
+		font-weight: bold;
+		font-size: 1.2em;
+		margin-bottom: .4em;
+	}
+</style>

+ 10 - 11
packages/ckeditor5-word-count/docs/_snippets/features/word-count-update.html

@@ -6,33 +6,32 @@
 		height: 20px;
 		background-color: hsl( var( --hue ), 100%, 50% );
 		display: inline-block;
+		vertical-align: middle;
+		border-radius: 100%;
 	}
 
-	.customized-count {
-		border: 3px solid #333;
-		padding-left: 5px;
-		margin-bottom: 15px;
+	.customized-count > div {
+		margin-left: 1em;
 	}
 
-	.customized-count > div {
+	.customized-count span {
+		min-width: 90px;
 		display: inline-block;
-		width: 50%;
-		margin-left: 0;
-		margin-right: 0;
 	}
 </style>
 
 <div id="demo-editor-update">
 		<p>A <strong>black hole</strong> is a region of <a href="https://en.wikipedia.org/wiki/Spacetime">spacetime</a> exhibiting <a href="https://en.wikipedia.org/wiki/Gravitation">gravitational</a> acceleration so strong that nothing—no <a href="https://en.wikipedia.org/wiki/Particle">particles</a> or even <a href="https://en.wikipedia.org/wiki/Electromagnetic_radiation">electromagnetic radiation</a> such as <a href="https://en.wikipedia.org/wiki/Light">light</a>—can escape from it.<a href="https://en.wikipedia.org/wiki/Black_hole#cite_note-6">[6]</a> The theory of <a href="https://en.wikipedia.org/wiki/General_relativity">general relativity</a> predicts that a sufficiently compact <a href="https://en.wikipedia.org/wiki/Mass">mass</a> can deform <a href="https://en.wikipedia.org/wiki/Spacetime">spacetime</a> to form a black hole.</p>
 </div>
-<div class="customized-count">
+<div class="word-count customized-count">
 	<div class="customized-count__words">
-		<label>Words:
+		<label>
+			<span>Words:</span>
 			<progress value="42" max="100"></progress>
 		</label>
 	</div>
 	<div class="customized-count__characters">
-		Characters:
+		<span>Characters:</span>
 		<div class="customized-count__color-box"></div>
 	</div>
 </div>

+ 6 - 4
packages/ckeditor5-word-count/docs/_snippets/features/word-count.html

@@ -1,8 +1,10 @@
 <style>
-	.word-count {
-		border: 3px solid #333;
-		padding-left: 5px;
-		margin-bottom: 15px;
+	#demo-word-count .ck-word-count * {
+		display: inline-block;
+	}
+
+	#demo-word-count .ck-word-count .ck-word-count__words {
+		margin-right: 1em;
 	}
 </style>
 <div id="demo-editor">