umberto 6.0.0 → 6.1.0

package/themes/umberto/src/umberto/css/_collapsinglist.scss

@@ -0,0 +1,262 @@
+// Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+// For licensing, see LICENSE.md.
+
+@use 'helpers/color';
+@use 'helpers/font';
+@use 'helpers/spacing';
+@use 'sass:math';
+
+ul.collapsing-list {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.collapsing-list {
+	margin-top: spacing.u-spacing( 1 );
+
+	dd {
+		min-height: spacing.u-spacing( 1 );
+		margin: 0;
+	}
+
+	@keyframes highlight {
+		0% {
+			background: color.u-color( 'highlight' )
+		}
+		100% {
+			background: none;
+		}
+	}
+
+	&--empty {
+		margin-bottom: spacing.u-spacing( 0 );
+
+		&::before {
+			content: "No items to display for current filtering criteria."
+		}
+	}
+
+	&__content h4 {
+		@include font.u-baseline-padding( 0 );
+	}
+	&__item {
+		&--first {
+			.collapsing-list__term {
+				border-top: 0;
+			}
+		}
+	}
+
+	.collapsing-list__item {
+		margin: 0;
+	}
+
+	&__term {
+		padding-top: spacing.u-spacing( 0 );
+		position: relative;
+		display: flex;
+		border-top: 1px solid color.u-color( 'separator' );
+
+		&--no-excerpt {
+			padding: spacing.u-spacing( -3 ) 0;
+		}
+
+		&.toggler {
+			&--collapsed,
+			&--expanded {
+				cursor: pointer;
+
+				& + .collapsing-list__description {
+					padding-left: spacing.u-spacing(3);
+				}
+
+				&::before {
+					position: absolute;
+					top: spacing.u-spacing(-1);
+					left: 0;
+				}
+			}
+
+			&--collapsed {
+				padding: spacing.u-spacing( -3 ) 0 spacing.u-spacing( -3 ) spacing.u-spacing( 3 );
+
+				& + .collapsing-list__description {
+					.collapsing-list__excerpt {
+						height: font.$u-line-height-base + em;
+
+						/* #791. Wrap excerpt one liner with (...) when collapsed. */
+						p {
+							text-overflow: ellipsis;
+							overflow: hidden;
+							white-space: nowrap;
+						}
+					}
+
+					.collapsing-list__content {
+						display: none;
+					}
+
+					.collapsing-list__excerpt {
+						margin-bottom: spacing.u-spacing( -3 );
+					}
+				}
+			}
+
+			&--expanded {
+				padding: spacing.u-spacing( -3 ) 0 spacing.u-spacing( -3 ) spacing.u-spacing( 3 );
+
+				// Do not touch dedicated error code page. See: https://github.com/cksource/umberto/issues/788
+				& + .collapsing-list__description:not(.collapsing-list__description--error-page) {
+					.collapsing-list__excerpt {
+						// Properly display excerpt and `see source` link for expanded description.
+						display: flex;
+						justify-content: space-between;
+
+						p {
+							text-overflow: initial;
+							overflow: visible;
+							height: auto;
+							white-space: inherit;
+							margin-bottom: spacing.u-spacing( -3 );
+						}
+					}
+
+					.collapsing-list__content {
+						display: block;
+					}
+
+					.see-source {
+						display: block;
+						float: right;
+						margin-left: 50px;
+						margin-bottom: 12px;
+					}
+				}
+			}
+		}
+
+		&:target {
+			animation: highlight 2s;
+
+			& + .collapsing-list__description {
+				animation: highlight 2s;
+			}
+		}
+
+		h3 {
+			margin-bottom: 0;
+			padding-top: 0;
+			width: 100%;
+
+			@include font.u-baseline( 0 );
+
+			code {
+				font-weight: 400;
+			}
+
+			&:first-of-type {
+				flex: 2;
+			}
+
+			.badges {
+				text-align: right;
+				float: right;
+				margin-left: spacing.u-spacing( 0 );
+			}
+		}
+
+		p {
+			margin-bottom: 0;
+			padding-top: 0;
+		}
+
+		&.hidden {
+			&::before {
+				display: none;
+			}
+
+			&.toggler {
+				&--collapsed,
+				&--expanded {
+					cursor: auto;
+				}
+			}
+		}
+	}
+
+	&__description {
+		//padding: 0 0 0 spacing.u-spacing( 3 );
+		overflow: hidden;
+
+		.collapsing-list__excerpt {
+			padding-top: 0;
+
+			&--short {
+				text-overflow: ellipsis;
+				overflow: hidden;
+				height: font.$u-line-height-base + em;
+				white-space: nowrap;
+				margin-bottom: math.div( spacing.u-spacing( 0 ), 2 );
+			}
+		}
+
+		dl {
+			padding: 0 0 0 spacing.u-spacing( 3 );
+
+			dd p {
+				padding-left: spacing.u-spacing( 3 );
+			}
+
+			.dlheading5,
+			.dlheading6 {
+				@include font.u-baseline( 0 );
+				padding-left: spacing.u-spacing( 3 );
+				font-weight: 400;
+				color: rgba( color.u-color( 'text-header' ), .9 );
+			}
+		}
+	}
+
+	&__bottom {
+		margin-bottom: spacing.u-spacing( 0 );
+	}
+
+	&--filtered {
+		.collapsing-list__item {
+			display: none;
+
+			&--visible {
+				display: block;
+
+				.collapsing-list__term {
+					display: flex;
+				}
+			}
+		}
+	}
+
+	.collapsing-list__description {
+		ul, ol {
+			@include font.u-baseline( 0 );
+		}
+	}
+
+	&__dev-names {
+		code#{&}--active {
+			display: block;
+			color: color.u-color( 'text', 40% );
+			font-size: font.u-font-size( -1 );
+			cursor: default;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			direction: rtl;
+			text-align: left;
+			width: 100%;
+		}
+		& code {
+			display: none;
+		}
+	}
+}

package/themes/umberto/src/umberto/css/_content.scss

@@ -0,0 +1,236 @@
+// Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+// For licensing, see LICENSE.md.
+
+@use 'helpers/color';
+@use 'helpers/font';
+@use 'helpers/globals';
+@use 'helpers/spacing';
+@use 'sass:map';
+@use 'sass:math';
+
+.main__content {
+	@include globals.u-box;
+	max-width: 100%;
+	min-width: globals.$u-content-min-width + 2 * globals.$u-content-margin;
+	flex: 1;
+	padding: spacing.u-spacing( 4 ) 0 3 * spacing.u-spacing( 2 );
+	position: relative;
+
+	@include globals.u-responsive-wide {
+		padding-right: globals.$u-sidebar-width;
+	}
+
+	@include globals.u-responsive-tablet {
+		min-width: unset;
+	}
+
+	@include globals.u-responsive-mobile {
+		padding: spacing.u-spacing( 0 ) 0;
+	}
+
+	&-inner {
+		position: relative;
+		margin: 0 auto;
+		padding: {
+			left: 0;
+			right: 0;
+		}
+		max-width: 100%;
+
+		@include globals.u-responsive-narrow {
+			max-width: globals.$u-content-max-width + 2 * globals.$u-content-margin;
+			padding: {
+				left: globals.$u-content-margin;
+				right: globals.$u-content-margin;
+			}
+		}
+
+		@include globals.u-responsive-wide {
+			width: auto;
+			margin: {
+				left: globals.$u-content-margin;
+				right: globals.$u-content-margin;
+			}
+		}
+
+		@include globals.u-responsive-wide-plus {
+			width: globals.$u-content-max-width;
+			margin: 0 auto;
+		}
+
+		@include globals.u-responsive-tablet {
+			max-width: 100%;
+			padding: {
+				left: spacing.u-spacing( 3 );
+				right: spacing.u-spacing( 3 );
+			}
+		}
+
+		@include globals.u-responsive-mobile {
+			padding: {
+				left: spacing.u-spacing( 0 );
+				right: spacing.u-spacing( 0 );
+			}
+		}
+
+		img {
+			max-width: 100%;
+			height: auto;
+		}
+
+		@include globals.u-responsive-wide-plus {
+			img {
+				max-width: globals.$u-content-max-width;
+			}
+		}
+
+
+		h1 {
+			&:first-of-type {
+				margin-bottom: math.div( spacing.u-spacing( 0 ), 2 );
+			}
+		}
+
+	.types {
+			margin-bottom: spacing.u-spacing( 2 );
+		}
+		/* #351 Npm badge should be aligned to the left instead of centered. */
+		a[href*="npmjs.com"] {
+			img {
+				margin: spacing.u-spacing( -2 ) 0 spacing.u-spacing( 3 );
+			}
+		}
+	}
+
+	.api-header {
+		display: flex;
+		align-items: center;
+		margin: 0;
+		padding: 1.2em 0 1.8em 0;
+
+		&__title {
+			width: 100%;
+		}
+
+		img {
+			height: 2.7em;
+			margin-right: spacing.u-spacing( 3 );
+		}
+
+		h1 {
+			/* #494. Break long named API elements in the main header. */
+			word-break: break-word;
+
+			$rhythm: map.get( font.$u-baseline-levels, 4 );
+
+			padding: 0;
+			margin: 0;
+		}
+
+		.header__import {
+			font-size: 0.9em;
+			padding: 0;
+			margin: -0.4em 0 0 0;
+			color: color.u-color( 'text', 50% );
+
+			&--hidden {
+				display: none;
+			}
+		}
+	}
+
+	h1.main__content-title {
+		// @include font.u-font-mono;
+		// Never separate the icon from the title.
+		// white-space: nowrap;
+		display: inline-block;
+
+		img {
+			height: 1.1em;
+			vertical-align: middle;
+			position: relative;
+			top: -.1em;
+			margin-right: spacing.u-spacing( -2 );
+
+			@include globals.u-responsive-mobile {
+				margin-right: spacing.u-spacing( -4 );
+			}
+		}
+	}
+
+	.collapsing-list {
+		max-width: initial;
+		min-width: initial;
+
+		/* #469. Method name in the API collapsing list should be styled differently. */
+		a.member-name,
+		span.member-name {
+			font-weight: bold;
+		}
+	}
+
+	.collapsing-list__term,
+	.collapsing-list dt,
+	.secondary-navigation {
+		code {
+			background: none;
+			padding: 0;
+		}
+	}
+
+	.typedef-callback {
+		h4 {
+			@include font.u-baseline-padding( 0 );
+		}
+
+		dl {
+			padding: 0 0 0 spacing.u-spacing( 3 );
+		}
+
+		dt code {
+			background: none;
+			padding: 0;
+		}
+
+		dd {
+			min-height: spacing.u-spacing( 1 );
+			margin: 0;
+
+			p {
+				padding-left: spacing.u-spacing( 3 );
+			}
+		}
+	}
+
+	.github-contrib {
+		position: absolute;
+		right: 0;
+		top: 0;
+
+		// https://github.com/cksource/umberto/issues/348
+		@include globals.u-responsive-narrow {
+			right: globals.$u-content-margin;
+		}
+
+		// We dont' need these buttons on mobile: https://github.com/cksource/umberto/issues/538
+		@include globals.u-responsive-mobile {
+			display: none;
+		}
+
+		img {
+			height: 20px;
+			width: 20px;
+			opacity: 0.7;
+			margin: 0;
+
+			&:hover {
+				opacity: 1.0;
+			}
+		}
+
+		a {
+			display: inline-block;
+			margin-left: 10px;
+		}
+	}
+}

package/themes/umberto/src/umberto/css/_docsearch.scss

@@ -0,0 +1,109 @@
+// Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+// For licensing, see LICENSE.md.
+
+@use 'helpers/color';
+@use 'helpers/globals';
+
+$border-color-light: hsl( 0, 0%, 90% );
+$border-color-dark: hsl( 0, 0%, 50% );
+
+.algolia-autocomplete {
+	.algolia-docsearch-suggestion--category-header {
+		background: hsl(0, 0%, 96%);
+		font-size: 1.2em;
+		color: color.u-color( 'text-gray') ;
+		border-bottom: 1px solid $border-color-dark;
+		border-top: 1px solid $border-color-dark;
+
+		/* #729. */
+		.algolia-docsearch-suggestion--highlight {
+			background: none;
+		}
+	}
+
+	/* Disable border-top for first header. */
+	.ds-suggestions .ds-suggestion:first-of-type .algolia-docsearch-suggestion--category-header{
+		border-top: 0;
+	}
+
+	/* Change default padding of items. */
+	.algolia-docsearch-suggestion--content,
+	.algolia-docsearch-suggestion--subcategory-column,
+	.algolia-docsearch-suggestion--category-header,
+	.algolia-docsearch-footer {
+		padding: 7px 15px;
+	}
+
+	/* Change default border colors. */
+	.algolia-docsearch-suggestion__secondary,
+	.algolia-docsearch-suggestion--subcategory-column{
+		border-color: $border-color-light;
+	}
+
+	.algolia-autocomplete .ds-dropdown-menu
+	.algolia-docsearch-footer {
+		border-color: $border-color-dark;
+	}
+
+	.algolia-docsearch-suggestion--subcategory-column {
+		width: 300px;
+		max-width: 300px;
+		min-width: 300px;
+		background: #fff;
+	}
+
+	.ds-dropdown-menu {
+		background-color: #fff;
+		border: 1px solid $border-color-dark;
+		left: inherit !important;
+		right: 0 !important;
+		font-size: 0.95em;
+		margin: 6px 0 0;
+		overflow-y: auto;
+		max-height: 90vh;
+
+		@include globals.u-responsive-tablet-plus {
+			max-width: 800px;
+			width: 800px;
+		}
+
+		@include globals.u-responsive-tablet {
+			max-width: 80vw;
+			width: 80vw;
+		}
+
+		@include globals.u-responsive-mobile {
+			max-width: 95vw;
+			width: 95vw;
+		}
+	}
+
+	.ds-suggestion {
+		.algolia-docsearch-suggestion {
+			&--subcategory-column-text {
+				color: color.u-color( text );
+			}
+			&--no-results {
+				border: none;
+				font-size: 1.1em;
+				font-weight: 400;
+			}
+			&----category-header {
+				color: color.u-color( 'text-gray' );
+			}
+		}
+
+		/* #561. In case when selected via keyboard / mouse pointer. */
+		&.ds-cursor {
+			.algolia-docsearch-suggestion--content {
+				background-color: #f1f3f5;
+				color: #0064e1;
+			}
+		}
+	}
+
+	/* #561. Hide doubled "Search by" sentence. */
+	.algolia-docsearch-footer {
+		font-size: 0;
+	}
+}

package/themes/umberto/src/umberto/css/_dropdown.scss

@@ -0,0 +1,63 @@
+// Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+// For licensing, see LICENSE.md.
+
+@use 'helpers/color';
+@use 'helpers/globals';
+
+$u-button-size-width: 72px;
+$u-space-between: 15px;
+$u-icon-size: 36px;
+
+.dropdown {
+	&__wrapper {
+		width: globals.$u-sidebar-width;
+		position: relative;
+		padding-left: $u-space-between;
+	}
+
+	&__product-title {
+		display: inline-block;
+		padding-left: $u-space-between;
+		font-weight: bold;
+		color: color.u-color( 'text-gray' );
+		line-height: globals.$u-top-sub;
+	}
+
+	&__content {
+		position: absolute;
+		overflow: hidden;
+		z-index: 1;
+		background: color.u-color( 'background-bright' );
+		transition: opacity 200ms ease-in-out;
+
+	  	li {
+			position: relative;
+			transition: background-color 200ms;
+
+		  	a {
+			  	display: block;
+				color: color.u-color( 'text-gray' );
+				text-decoration: none;
+				transition: all 200ms ease-in-out;
+			}
+
+		  	&:hover {
+			  	cursor: pointer;
+
+				a {
+				  	text-decoration: none;
+				}
+			}
+		}
+	}
+
+}
+
+@keyframes fadeIn {
+	0% {
+	  opacity: 0;
+	}
+	100% {
+	  opacity: 1;
+	}
+  }

package/themes/umberto/src/umberto/css/_editor-icon.scss

@@ -0,0 +1,26 @@
+// Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+// For licensing, see LICENSE.md.
+
+// Synchronize these classes with `scripts/utils/parseicontag.js`.
+.editor-icon {
+  &::before {
+	content: '(';
+  }
+
+  &::after {
+	content: ')';
+  }
+
+  &__image {
+	width: 17px;
+	vertical-align: middle;
+  }
+}
+
+// See: #922.
+.formatted {
+  .editor-icon__image {
+	display: inline;
+	margin: 0;
+  }
+}

package/themes/umberto/src/umberto/css/_feedback-widget.scss

@@ -0,0 +1,11 @@
+// Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+// For licensing, see LICENSE.md.
+
+@use 'helpers/color';
+@use 'helpers/spacing';
+
+.feedback-widget {
+	border-top: 1px solid color.u-color( 'separator' );
+	margin-top: spacing.u-spacing( 3 );
+	padding-top: spacing.u-spacing( 3 ) * 2;
+}

package/themes/umberto/src/umberto/css/_font-external.scss

@@ -0,0 +1,8 @@
+// Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+// For licensing, see LICENSE.md.
+
+// All external fonts have to be imported via this file, and this file can only be imported once in the root file.
+// This is because if a file that has external imports is imported in several places, imports such as the one below
+// will be duplicated in compiled css.
+
+@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600');