umberto 6.0.0 → 6.1.0

package/themes/umberto/src/umberto/css/_api-info-box.scss

@@ -0,0 +1,86 @@
+// Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+// For licensing, see LICENSE.md.
+
+@use 'helpers/color';
+@use 'helpers/globals';
+@use 'helpers/spacing';
+
+nav.api-info-box.api-secondary-navigation{
+	@include globals.u-responsive-narrow {
+		padding: spacing.u-spacing( 2 ) spacing.u-spacing( 2 ) spacing.u-spacing( -3 );
+		min-width: 12em;
+
+		dt {
+			border-bottom: 1px solid color.u-color( 'separator' )
+		}
+
+		dd {
+			margin-right: spacing.u-spacing( -1 );
+		  	margin-bottom: 0;
+		}
+	}
+
+	@include globals.u-responsive-wide {
+		dl {
+			margin-bottom: 1.5 * globals.$u-footer-height;
+		}
+	}
+
+	@include globals.u-responsive-wide-md {
+		padding-left: spacing.u-spacing(4);
+	}
+
+	// Fix "no-breaking-space" as pseudoelement in the ToC for API (hierachy).
+	code {
+		&::after,
+		&::before {
+			content: '';
+		}
+
+		// Disable "active" dot for hover & current item.
+		a {
+			&::before {
+				display: none;
+			}
+		}
+	}
+
+	dt {
+		@include globals.u-micro-header;
+		margin-bottom: .5em;
+
+		&:first-child {
+			padding-top: 0;
+		}
+	}
+
+	ul {
+		list-style: none;
+		margin: 0 0 spacing.u-spacing( 1 ) spacing.u-spacing( 2 );
+		padding: 0;
+
+		code {
+			background: none;
+			padding: 0;
+		}
+
+		&.hierarchy-list {
+			ul {
+				li {
+					&::before {
+						content: url( ../img/list-nest.svg );
+						height: 1em;
+						width: 1em;
+						display: inline-block;
+						position: relative;
+						top: -.3em;
+					}
+				}
+			}
+
+			& > li > ul {
+				margin-left: 0;
+			}
+		}
+	}
+}

package/themes/umberto/src/umberto/css/_api-props-filter.scss

@@ -0,0 +1,106 @@
+// Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+// For licensing, see LICENSE.md.
+
+@use 'helpers/color';
+@use 'helpers/globals';
+@use 'helpers/spacing';
+
+div.api-props-filter {
+	right: 0;
+	left: globals.$u-sidebar-width;
+	padding-top: spacing.u-spacing( -1 );
+	margin-bottom: 0;
+	text-align: center;
+
+	@include globals.u-sticky-filter;
+
+	h4 {
+		@include globals.u-micro-header;
+	}
+
+	ul {
+		list-style: none;
+		margin: 0;
+	}
+
+	label {
+		cursor: pointer;
+	}
+
+	input:checked + label span {
+		color: color.u-color( 'text-invert' );
+		background: color.u-color( 'selected' );
+		border-color: color.u-color( 'selected' );
+
+		&:hover {
+			background: color.u-color( 'selected', 5% );
+		}
+	}
+
+	&__inner {
+		text-align: left;
+		margin: 0 auto;
+		padding-left: 0;
+
+		@include globals.u-responsive-narrow {
+			padding: {
+				left: globals.$u-content-margin;
+				right: globals.$u-content-margin;
+			}
+			width: globals.$u-content-max-width;
+		}
+
+		@include globals.u-responsive-wide {
+			width: globals.$u-content-min-width + globals.$u-sidebar-width;
+		}
+
+		@include globals.u-responsive-wide-md {
+			width: globals.$u-content-md-width + globals.$u-sidebar-width;
+		}
+
+		@include globals.u-responsive-wide-plus {
+			width: globals.$u-content-max-width + globals.$u-sidebar-width;
+		}
+	}
+
+	ul, h4 {
+		display: inline-block;
+		vertical-align: middle;
+	}
+
+	h4 {
+		margin: 0 spacing.u-spacing( 2 ) 0 0;
+		padding: 0;
+
+		&::before {
+			content: url( ../img/filter.svg );
+			display: inline-block;
+			width: 13px;
+			float: left;
+			margin-right: spacing.u-spacing( -2 );
+			position: relative;
+			top: 2px;
+		}
+
+		@include globals.u-responsive-narrow {
+			display:none;
+		}
+	}
+
+	&::before {
+		display: none;
+	}
+
+	ul {
+		padding: 0;
+	}
+
+	li {
+		display: inline-block;
+		margin-left: spacing.u-spacing( -2 );
+	}
+
+	input {
+		display: none;
+	}
+}

package/themes/umberto/src/umberto/css/_api-see-source.scss

@@ -0,0 +1,35 @@
+// Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+// For licensing, see LICENSE.md.
+
+.main__content--api {
+	.see-source {
+		a {
+			display: flex;
+			align-items: center;
+			font-size: 14px;
+			white-space: nowrap;
+
+			svg {
+				width: 15px;
+				height: 20px;
+				margin-right: 5px;
+				fill: currentColor;
+			}
+		}
+	}
+
+	.collapsing-list .see-source {
+		// Hide "See source" link inside API items by default
+		display: none;
+
+		// Show link only when list is expanded.
+		.toggler--expanded + .collapsing-list__description {
+			.see-source {
+				display: block;
+				float: right;
+				margin-left: 50px;
+				margin-bottom: 12px;
+			}
+		}
+	}
+}

package/themes/umberto/src/umberto/css/_api-subheader.scss

@@ -0,0 +1,167 @@
+// Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+// For licensing, see LICENSE.md.
+
+@use 'helpers/font';
+@use 'helpers/globals';
+
+.main__content-inner {
+	.hidden-loading {
+		display: none;
+	}
+
+	.api-subheader {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 20px;
+
+		&.hidden-loading {
+			display: none;
+		}
+
+		@include globals.u-responsive-mobile {
+			flex-wrap: wrap;
+		}
+
+		@include globals.u-responsive-mobile {
+			&__badges {
+				width: 100%;
+			}
+		}
+
+		&__navigation {
+			@include font.u-font-mono;
+
+			@include globals.u-responsive-mobile {
+				margin-left: auto;
+			}
+
+			ul {
+				margin: 0;
+			}
+
+			&-category {
+				cursor: pointer;
+				padding: 5px;
+				border: 1px solid transparent;
+				list-style: none;
+				display: inline-block;
+				position: relative;
+				vertical-align: middle;
+
+				&::before {
+					content: '';
+					margin-right: 5px;
+					position: relative;
+					display: inline-block;
+				}
+
+				&:hover {
+					border-color: #ccc;
+
+					ul {
+						display: flex;
+					}
+				}
+
+				// Handle empty category.
+				&--empty {
+					display: none;
+				}
+			}
+
+			// its <ul> element.
+			&-dropdown {
+				display: none;
+				flex-wrap: wrap;
+				flex-basis: auto;
+				flex-grow: 1;
+
+				border: 1px solid #ccc;
+				background-color: hsl(0, 0%, 98%);
+				overflow-y: auto;
+				overflow-x: hidden;
+				position: absolute;
+
+				// Let's align it to parent <li>.
+				right: -1px;
+				top: 100%;
+
+				margin: 0;
+				padding: 20px;
+
+				min-width: 500px;
+				max-height: 50vh;
+
+				// Render the API dropdowns on top of the "See source" button.
+				z-index: 2;
+
+				li {
+					width: 50%;
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					padding: 0 10px;
+					border: 0;
+
+					a {
+						/* See #563. */
+						display: block;
+					}
+				}
+
+				&--small {
+					/* Because of moved dropdown to the right: -1px. */
+					min-width: calc(100% + 2px);
+
+					li {
+						width: 100%;
+					}
+				}
+
+				// if more than 40 elements
+				&--big {
+					min-width: 500px;
+
+					li {
+						width: 50%;
+					}
+				}
+
+				// if more than 100 elements
+				&--huge {
+					min-width: 700px;
+
+					li {
+						width: 33%;
+					}
+				}
+
+				&--hidden {
+					display: none;
+				}
+			}
+
+			// We need to set positions manually (top property), because of different proportions of <svg>s.
+			li[data-type="properties"]::before {
+				top: -1px;
+				content: url( ../img/header-info-properties.svg );
+			}
+
+			li[data-type="methods"]::before {
+				top: 1px;
+				content: url( ../img/header-info-methods.svg );
+			}
+
+			li[data-type="events"]::before {
+				top: 0px;
+				content: url( ../img/header-info-events.svg );
+			}
+
+			li[data-type="configs"]::before {
+				top: 3px;
+				content: url( ../img/header-info-configs.svg );
+			}
+		}
+	}
+}

package/themes/umberto/src/umberto/css/_api-tree.scss

@@ -0,0 +1,121 @@
+// 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';
+
+.tree.api-tree {
+	@include font.u-font-mono;
+
+	@include globals.u-responsive-tablet {
+		@include globals.levels( 3, 1 );
+	}
+
+	/* Generate styles for tree levels on <960px devices differently.
+	We need to change it to properly display `::before` arrow dropdown. */
+
+	[data-private], [data-protected] {
+		display: none;
+
+		@include globals.u-responsive-tablet {
+			display: block;
+		}
+	}
+
+	&.api-tree--show-private {
+		[data-private], [data-protected] {
+			display: block;
+		}
+	}
+
+	.tree__item__text {
+		padding-top: 0;
+		padding-bottom: 0;
+
+		@include globals.u-responsive-tablet {
+			padding: spacing.u-spacing( -3 ) 0;
+		}
+	}
+
+	li::before {
+		top: .4em;
+
+		@include globals.u-responsive-tablet {
+			top: spacing.u-spacing( -1 );
+			margin-left: -10px !important;
+		}
+	}
+}
+
+/* Public/Inherited/Mixed/Protected/Private/Deprecated Items filter. */
+.api-tree__filter {
+	text-align: center;
+	left: 0;
+	width: globals.$u-sidebar-width;
+	border-right: 1px solid color.u-color( 'background-hue' );
+
+	@include globals.u-sticky-filter;
+	@include globals.u-unselectable;
+
+	@include globals.u-responsive-tablet {
+		display: none;
+	}
+
+	input {
+		display: none;
+	}
+
+	// TODO: Magic numbers below...
+	label {
+		@include globals.u-micro-header;
+		padding-right: 65px;
+	}
+
+	input + label {
+		position: relative;
+		cursor: pointer;
+		text-align: left;
+
+		&::before {
+			color: #fff;
+			font-size: .85em;
+			padding-left: 27px;
+			line-height: 22px;
+			content: "No";
+			display: inline-block;
+			width: 50px;
+			height: 20px;
+			background: color.u-color( 'primary' );
+			position: absolute;
+			right: 0;
+			top: -4px;
+			border-radius: 0px;
+		}
+
+		&::after {
+			content: "";
+			display: block;
+			width: 16px;
+			height: 16px;
+			background: #fff;
+			position: absolute;
+			right: 32px;
+			top: -2px;
+			border-radius: 0px;
+		}
+	}
+
+	input:checked + label {
+		&::before {
+			content: "Yes";
+			padding-left: 7px;
+			background: color.u-color( 'selected' );
+		}
+
+		&::after {
+			right: 2px;
+		}
+	}
+}

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

@@ -0,0 +1,74 @@
+// 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';
+
+@mixin badge( $color ) {
+	&--#{ $color } {
+		border-color: color.u-color( 'badge-#{ $color }' );
+		color: color.u-color( 'badge-#{ $color }' );
+
+		.badge__invert {
+			color: color.u-color( 'text-invert' );
+			background: color.u-color( 'badge-#{ $color }' );
+		}
+
+	  	a {
+			color: inherit;
+			text-decoration: none;
+
+			&:hover {
+				color: color.u-color('badge-#{ $color }', -50% );
+				text-decoration: none;
+			}
+		}
+	}
+}
+
+.badge {
+	vertical-align: middle;
+	text-transform: uppercase;
+	font-size: font.u-font-size( -1 );
+	padding: spacing.u-spacing( -3 ) spacing.u-spacing( -2 ) spacing.u-spacing( -3 );
+	border: 1px solid color.u-color( 'text' );
+	margin-right: 1rem;
+
+	&.badge--has-invert {
+		padding-right: 0;
+	}
+
+	.badge__invert {
+		color: color.u-color( 'text-invert' );
+		background: color.u-color( 'text' );
+		padding: spacing.u-spacing( -3 ) spacing.u-spacing( -2 );
+		margin-left: spacing.u-spacing( -4 );
+	}
+
+	@include badge( 'gray' );
+	@include badge( 'green' );
+	@include badge( 'red' );
+	@include badge( 'orange' );
+	@include badge( 'purple' );
+
+	/* #357. */
+	&.badge--observable {
+		a  {
+			&::before {
+				content: "";
+				position: relative;
+				display: inline-block;
+				vertical-align: middle;
+				width: 12px;
+				height: 12px;
+				margin-right: 3px;
+				background-size: cover;
+				background-repeat: no-repeat;
+				top: -1px;
+
+				background-image: url( ../img/eye.svg );
+			}
+		}
+	}
+}

package/themes/umberto/src/umberto/css/_code-switcher.scss

@@ -0,0 +1,61 @@
+// 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';
+
+.code-switcher {
+    margin-bottom: spacing.u-spacing( -1 );
+    padding-top: 4px;
+    border-radius: 4px;
+
+    background-color: color.u-color( 'snippet-background' );
+
+    pre.highlight[class*=language-] {
+        margin: 0;
+    }
+
+    &__toolbar {
+        display: flex;
+        align-items: flex-start;
+        gap: 16px;
+
+        height: 40px;
+        margin: 0px 4px;
+        padding: 4px 12px;
+        border-radius: 2px;
+
+        background-color: color.u-color( 'background-gray' );
+    }
+
+    &__button {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+
+        padding: 2px;
+        border: none;
+
+        background-color: transparent;
+
+        font-size: font.u-font-size( 0 );
+        font-weight: 500;
+
+        color: color.u-color( 'text-invert-gray' );
+
+        cursor: pointer;
+
+        transition: 150ms ease color;
+
+        &:hover {
+            color: color.u-color( 'text-invert' );
+        }
+
+        &--active {
+            border-bottom: 2px solid color.u-color( 'text-invert' );
+
+            color: color.u-color( 'text-invert' );
+        }
+    }
+}