studiokit-scaffolding-js 7.1.0 → 7.1.2-alpha.1

package/lib/css/components/_quill.css

@@ -1,315 +1,323 @@
-@custom-selector :--quill-typography h1, h2, h3, h4, h5, h6, p, ol, ul, pre, blockquote;
-@custom-selector :--quill-plaintext p, ol, ul;
-
-:root {
-	--quill-min-height: 10rem;
-	--quill-max-height: 60vh;
-	--quill-toolbars-height: 111px;
-}
-
-.quill {
-	margin-bottom: 15px;
-	border-bottom-color: var(--color-medium-dark-grey);
-}
-
-/* Loader */
-
-.quill-loader {
-	min-height: calc(var(--quill-min-height) + var(--quill-toolbars-height));
-	max-height: calc(var(--quill-max-height) + var(--quill-toolbars-height));
-	position: relative;
-	border: 1px solid var(--color-light-grey);
-}
-
-.quill-loader-inner {
-	position: absolute;
-	top: calc(50% - 20px - 1.25rem);
-	left: calc(50% - 20px);
-}
-
-/* Editor */
-
-.ql-editor {
-	background-color: var(--color-white);
-	min-height: var(--quill-min-height);
-	max-height: var(--quill-max-height);
-	overflow: auto;
-
-	& :--quill-typography {
-		margin-bottom: 0.5rem;
-	}
-
-	& :--quill-plaintext {
-		font-size: 1rem;
-	}
-}
-
-/* Expandable toolbar */
-
-.more-options {
-	float: right !important;
-	padding: 0 0 0 2px !important;
-	height: 30px !important;
-
-	&.expanded {
-		background: var(--color-light-grey) !important;
-	}
-}
-
-.more-options-toolbar {
-	border-top: 0 solid var(--color-light-grey);
-	margin: 0;
-	padding: 0;
-	height: 0;
-	transition: border-top linear 0.05s, margin linear 0.3s, padding linear 0.3s, height linear 0.3s, visibility linear 0.5s;
-
-	& .ql-formats {
-		opacity: 0;
-		transition: opacity linear 0.3s;
-	}
-
-	&.expanded {
-		border-top: 1px solid var(--color-light-grey);
-		margin: 0.6rem -0.6rem 0;
-		padding: 0.6rem 0.6rem 0;
-		height: 36px;
-
-		& .ql-formats {
-			opacity: 1;
-		}
-	}
-}
-
-/* Toolbar */
-
-.ql-toolbar.ql-snow {
-	padding: 0.6rem;
-
-	&.disabled-invisible {
-		padding: 0;
-		height: 0;
-		border-bottom: none;
-	}
-
-	&.read-only {
-		background-color: var(--color-off-white);
-		padding-top: 1rem;
-	}
-
-	&.Inline {
-		background-color: var(--color-white);
-		border-style: none;
-		padding-left: 2px;
-		padding-top: 1.2rem;
-		border-top-right-radius: 0.5rem;
-		border-bottom-right-radius: 0.5rem;
-
-		&.read-only {
-			background-color: var(--color-off-white);
-		}
-	}
-}
-
-.ql-container.ql-snow {
-	border-top: none;
-	overflow: visible;
-}
-
-.ql-toolbar.ql-snow .ql-formats {
-	margin-right: 10px;
-
-	&:last-child {
-		margin-right: 0;
-	}
-}
-
-/* Align */
-
-.ql-align svg {
-	float: left;
-}
-
-/* Alpha Ordered List */
-
-.ql-editor ol[data-value="alpha"] > li {
-	&::before {
-		content: counter(list-0, lower-alpha) '. ';
-	}
-
-	&.ql-indent-1::before {
-		content: counter(list-1, lower-roman) '. ';
-	}
-
-	&.ql-indent-2::before {
-		content: counter(list-2, decimal) '. ';
-	}
-
-	&.ql-indent-3::before {
-		content: counter(list-3, lower-alpha) '. ';
-	}
-
-	&.ql-indent-4::before {
-		content: counter(list-4, lower-roman) '. ';
-	}
-
-	&.ql-indent-5::before {
-		content: counter(list-5, decimal) '. ';
-	}
-
-	&.ql-indent-6::before {
-		content: counter(list-6, lower-alpha) '. ';
-	}
-
-	&.ql-indent-7::before {
-		content: counter(list-7, lower-roman) '. ';
-	}
-
-	&.ql-indent-8::before {
-		content: counter(list-8, decimal) '. ';
-	}
-}
-
-/* Images */
-
-.ql-snow .ql-editor img {
-	max-width: 100%;
-	object-fit: contain;
-}
-
-/* Disabled and Read Only */
-
-.ql-disabled {
-	& .ql-editor {
-		background-color: var(--color-off-white);
-	}
-}
-
-.blurred-editor {
-	overflow-y: auto;
-
-	& .ql-editor {
-		min-height: auto;
-		max-height: none;
-		padding: 0;
-		background-color: var(--color-white);
-	}
-
-	& .ql-toolbar {
-		display: none;
-	}
-
-	& .ql-container.ql-snow {
-		border: none;
-	}
-}
-
-/* stylelint-disable no-descending-specificity */
-.ql-snow.ql-toolbar,
-.ql-snow .ql-toolbar {
-	/* Hover/Focus/Active overrides */
-	& button:hover,
-	& button:focus,
-	& button.ql-active,
-	& .ql-picker-label:hover,
-	& .ql-picker-label:focus,
-	& .ql-picker-label.ql-active,
-	& .ql-picker-item:hover,
-	& .ql-picker-item:focus,
-	& .ql-picker-item.ql-selected {
-		color: var(--color-primary) !important;
-
-		& .ql-fill,
-		& .ql-stroke.ql-fill {
-			fill: var(--color-primary) !important;
-		}
-
-		& .ql-stroke {
-			stroke: var(--color-primary) !important;
-		}
-	}
-
-	/* Focus overrides */
-	& button:focus,
-	& button.ql-active,
-	& .ql-picker-label:focus,
-	& .ql-picker-label.ql-active,
-	& .ql-picker-item:focus,
-	& .ql-picker-item.ql-selected {
-		outline: 2px solid var(--color-primary) !important;
-	}
-
-	/* Disabled overrides */
-	& .ql-formula:disabled,
-	& button:disabled,
-	& button:hover:disabled,
-	& button:focus:disabled,
-	& button.ql-active:disabled {
-		color: #777 !important;
-		cursor: default;
-
-		& svg {
-			cursor: default;
-		}
-
-		& .ql-fill,
-		& .ql-stroke.ql-fill {
-			fill: #777 !important;
-			cursor: default;
-		}
-
-		& .ql-stroke {
-			stroke: #777 !important;
-		}
-	}
-}
-
-/* Inline - display with no background */
-
-.quill.inline {
-	margin-bottom: 0;
-
-	& .ql-container {
-		background-color: transparent;
-	}
-
-	& .ql-editor {
-		background-color: transparent;
-		padding: 0.5rem 0;
-	}
-
-	& p:last-of-type {
-		margin-bottom: 0;
-	}
-}
-
-/* Hide line break in otherwise empty paragraph immediately preceded by a list */
-.quill.blurred-editor {
-	& ol ~ p br:only-child,
-	& ul ~ p br:only-child {
-		display: none;
-	}
-}
-
-.quill:focus-within {
-	border-color: #80bdff;
-	box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
-	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-	position: relative;
-	z-index: 1;
-
-	& .ql-container.ql-snow {
-		border-color: #80bdff;
-		transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-	}
-}
-
-.error {
-	& .quill:focus-within {
-		border-color: var(--color-red);
-		box-shadow: 0 0 0 0.2rem rgb(220 53 69 / 25%);
-
-		& .ql-container.ql-snow {
-			border-color: var(--color-red);
-		}
-	}
-}
+@custom-selector :--quill-typography h1, h2, h3, h4, h5, h6, p, ol, ul, pre, blockquote;
+@custom-selector :--quill-plaintext p, ol, ul;
+
+:root {
+	--quill-min-height: 10rem;
+	--quill-max-height: 60vh;
+	--quill-toolbars-height: 111px;
+}
+
+.quill {
+	margin-bottom: 15px;
+	border-bottom-color: var(--color-medium-dark-grey);
+}
+
+/* Loader */
+
+.quill-loader {
+	min-height: calc(var(--quill-min-height) + var(--quill-toolbars-height));
+	max-height: calc(var(--quill-max-height) + var(--quill-toolbars-height));
+	position: relative;
+	border: 1px solid var(--color-medium-dark-grey);
+}
+
+.quill-loader-inner {
+	position: absolute;
+	top: calc(50% - 20px - 1.25rem);
+	left: calc(50% - 20px);
+}
+
+/* Editor */
+
+.ql-editor {
+	background-color: var(--color-white);
+	min-height: var(--quill-min-height);
+	max-height: var(--quill-max-height);
+	overflow: auto;
+
+	& :--quill-typography {
+		margin-bottom: 0.5rem;
+	}
+
+	& :--quill-plaintext {
+		font-size: 1rem;
+	}
+}
+
+.ql-toolbar.ql-snow {
+	border-color: var(--color-medium-dark-grey);
+}
+
+/* Expandable toolbar */
+
+.more-options {
+	float: right !important;
+	padding: 0 0 0 2px !important;
+	height: 30px !important;
+
+	&.expanded {
+		background: var(--color-medium-dark-grey) !important;
+	}
+}
+
+.more-options-toolbar {
+	border-top: 0 solid var(--color-medium-dark-grey);
+	margin: 0;
+	padding: 0;
+	height: 0;
+	transition: border-top linear 0.05s, margin linear 0.3s, padding linear 0.3s, height linear 0.3s, visibility linear 0.5s;
+
+	& .ql-formats {
+		opacity: 0;
+		transition: opacity linear 0.3s;
+	}
+
+	&.expanded {
+		border-top: 1px solid var(--color-medium-dark-grey);
+		margin: 0.6rem -0.6rem 0;
+		padding: 0.6rem 0.6rem 0;
+		height: 36px;
+
+		& .ql-formats {
+			opacity: 1;
+		}
+	}
+}
+
+/* Toolbar */
+
+.ql-toolbar.ql-snow {
+	padding: 0.6rem;
+
+	&.disabled-invisible {
+		padding: 0;
+		height: 0;
+		border-bottom: none;
+	}
+
+	&.read-only {
+		background-color: var(--color-off-white);
+		padding-top: 1rem;
+	}
+
+	&.Inline {
+		background-color: var(--color-white);
+		border-style: none;
+		padding-left: 2px;
+		padding-top: 1.2rem;
+		border-top-right-radius: 0.5rem;
+		border-bottom-right-radius: 0.5rem;
+
+		&.read-only {
+			background-color: var(--color-off-white);
+		}
+	}
+}
+
+.ql-container.ql-snow {
+	border-top: none;
+	overflow: visible;
+}
+
+.ql-toolbar.ql-snow .ql-formats {
+	margin-right: 10px;
+
+	&:last-child {
+		margin-right: 0;
+	}
+}
+
+/* Align */
+
+.ql-align svg {
+	float: left;
+}
+
+/* Alpha Ordered List */
+
+.ql-editor ol[data-value="alpha"] > li {
+	&::before {
+		content: counter(list-0, lower-alpha) '. ';
+	}
+
+	&.ql-indent-1::before {
+		content: counter(list-1, lower-roman) '. ';
+	}
+
+	&.ql-indent-2::before {
+		content: counter(list-2, decimal) '. ';
+	}
+
+	&.ql-indent-3::before {
+		content: counter(list-3, lower-alpha) '. ';
+	}
+
+	&.ql-indent-4::before {
+		content: counter(list-4, lower-roman) '. ';
+	}
+
+	&.ql-indent-5::before {
+		content: counter(list-5, decimal) '. ';
+	}
+
+	&.ql-indent-6::before {
+		content: counter(list-6, lower-alpha) '. ';
+	}
+
+	&.ql-indent-7::before {
+		content: counter(list-7, lower-roman) '. ';
+	}
+
+	&.ql-indent-8::before {
+		content: counter(list-8, decimal) '. ';
+	}
+}
+
+/* Images */
+
+.ql-snow .ql-editor img {
+	max-width: 100%;
+	object-fit: contain;
+}
+
+/* Disabled and Read Only */
+
+.ql-disabled {
+	& .ql-editor {
+		background-color: var(--color-off-white);
+	}
+}
+
+.blurred-editor {
+	overflow-y: auto;
+
+	& .ql-editor {
+		min-height: auto;
+		max-height: none;
+		padding: 0;
+		background-color: var(--color-white);
+	}
+
+	& .ql-toolbar {
+		display: none;
+	}
+
+	& .ql-container.ql-snow {
+		border: none;
+	}
+}
+
+/* stylelint-disable no-descending-specificity */
+.ql-snow.ql-toolbar,
+.ql-snow .ql-toolbar {
+	/* Hover/Focus/Active overrides */
+	& button:hover,
+	& button:focus,
+	& button.ql-active,
+	& .ql-picker-label:hover,
+	& .ql-picker-label:focus,
+	& .ql-picker-label.ql-active,
+	& .ql-picker-item:hover,
+	& .ql-picker-item:focus,
+	& .ql-picker-item.ql-selected {
+		color: var(--color-primary) !important;
+
+		& .ql-fill,
+		& .ql-stroke.ql-fill {
+			fill: var(--color-primary) !important;
+		}
+
+		& .ql-stroke {
+			stroke: var(--color-primary) !important;
+		}
+	}
+
+	/* Focus overrides */
+	& button:focus,
+	& button.ql-active,
+	& .ql-picker-label:focus,
+	& .ql-picker-label.ql-active,
+	& .ql-picker-item:focus,
+	& .ql-picker-item.ql-selected {
+		outline: 2px solid var(--color-focus-border) !important;
+	}
+
+	/* Disabled overrides */
+	& .ql-formula:disabled,
+	& button:disabled,
+	& button:hover:disabled,
+	& button:focus:disabled,
+	& button.ql-active:disabled {
+		color: #777 !important;
+		cursor: default;
+
+		& svg {
+			cursor: default;
+		}
+
+		& .ql-fill,
+		& .ql-stroke.ql-fill {
+			fill: #777 !important;
+			cursor: default;
+		}
+
+		& .ql-stroke {
+			stroke: #777 !important;
+		}
+	}
+}
+
+/* Inline - display with no background */
+
+.quill.inline {
+	margin-bottom: 0;
+
+	& .ql-container {
+		background-color: transparent;
+	}
+
+	& .ql-editor {
+		background-color: transparent;
+		padding: 0.5rem 0;
+	}
+
+	& p:last-of-type {
+		margin-bottom: 0;
+	}
+}
+
+/* Hide line break in otherwise empty paragraph immediately preceded by a list */
+.quill.blurred-editor {
+	& ol ~ p br:only-child,
+	& ul ~ p br:only-child {
+		display: none;
+	}
+}
+
+.quill:focus-within {
+	border-color: var(--color-focus-border);
+	box-shadow: var(--box-shadow-focus-shadow);
+	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+	position: relative;
+	z-index: 1;
+
+	& .ql-container.ql-snow {
+		border-color:  var(--color-focus-border);
+		transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+	}
+}
+
+.ql-editor:focus-visible {
+	outline: none;
+}
+
+.error {
+	& .quill:focus-within {
+		border-color: var(--color-red);
+		box-shadow: 0 0 0 0.2rem rgb(220 53 69 / 25%);
+
+		& .ql-container.ql-snow {
+			border-color: var(--color-red);
+		}
+	}
+}