umberto 1.14.0 → 1.18.0

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

@@ -96,8 +96,8 @@ $u-rwd-button-size: 24px;
 						border-radius: 5px;
 						transition: 250ms all ease;
 
-						&:nth-child( 2 ) { top: ( $u-rwd-button-size / 3 ) * 1; }
-						&:nth-child( 3 ) { top: ( $u-rwd-button-size / 3 ) * 2; }
+						&:nth-child( 2 ) { top: math.div( $u-rwd-button-size, 3 ) * 1; }
+						&:nth-child( 3 ) { top: math.div( $u-rwd-button-size, 3 ) * 2; }
 					}
 				}
 			}
@@ -258,7 +258,7 @@ $u-rwd-button-size: 24px;
 				transition: 150ms ease all;
 
 				&:hover {
-					background-color: u-color( 'background-dark', -3 );
+					background-color: u-color( 'background-dark', -3% );
 				}
 
 				&:hover,
@@ -275,7 +275,7 @@ $u-rwd-button-size: 24px;
 					svg {
 						fill: currentColor;
 						width: 30px;
-						margin-top: ($u-top-sub - 30px) / 2;
+						margin-top: math.div( $u-top-sub - 30px, 2 );
 					}
 				}
 			}
@@ -308,7 +308,7 @@ $u-rwd-button-size: 24px;
 			}
 
 			&::-webkit-input-placeholder {
-				color: u-color( 'text', 70 );
+				color: u-color( 'text', 70% );
 			}
 
 			&:focus,

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

@@ -54,6 +54,7 @@ See: `_api-tree.scss` and `_guide-sdk-tree.scss`. */
 			display: inline-block;
 			padding: u-spacing( -3 ) 0;
 			position: relative;
+			margin-right: auto;
 
 			// The icon.
 			&::before {
@@ -70,7 +71,11 @@ See: `_api-tree.scss` and `_guide-sdk-tree.scss`. */
 		}
 
 		.tree__item__badge {
-			margin: 0 u-spacing( 2 ) 0 u-spacing( -2 );
+			margin: 0 u-spacing( -2 );
+		}
+
+		.tree__item__badge:last-of-type {
+			margin-right: u-spacing( 2 );
 		}
 
 		.tree__item__wrapper {
@@ -79,7 +84,7 @@ See: `_api-tree.scss` and `_guide-sdk-tree.scss`. */
 			align-items: center;
 			flex-wrap: nowrap;
 			align-content: center;
-			justify-content: space-between;
+			justify-content: flex-end;
 
 			&:hover {
 				background-color: u-color( 'background-dark' );
@@ -90,7 +95,7 @@ See: `_api-tree.scss` and `_guide-sdk-tree.scss`. */
 				background-color: u-color( 'background-hue' );
 
 				&:hover {
-					background-color: u-color( 'background-hue', -3 );
+					background-color: u-color( 'background-hue', -3% );
 				}
 			}
 		}
@@ -178,9 +183,22 @@ See: `_api-tree.scss` and `_guide-sdk-tree.scss`. */
 	border-radius: 20px;
 	/* u-spacing() lacks granularity here :( */
 	padding: u-spacing( -4 ) .6em;
+	vertical-align: middle;
+}
+
+.tree__item__badge .tree__item__badge__text {
+	display: none;
 }
 
 .tree__item__badge_new {
 	background: u-color( 'badge-green' );
 	color: u-color( 'text-invert' );
 }
+
+.tree__item__badge_premium {
+	background-image: url( ../img/star-in-circle.svg );
+	width: 16px;
+	height: 16px;
+	flex-shrink: 0;
+	display: inline-block;
+}

package/themes/umberto/src/css/helpers/_color.scss

@@ -33,10 +33,10 @@ $u-colors: (
 	'hint-warning': #FF1D00
 );
 
-@function u-color( $name, $offset: 0 ) {
+@function u-color( $name, $offset: 0% ) {
 	@return scale-color( map-get( $u-colors, $name ), $lightness: $offset );
 }
 
-@function u-border-color( $name, $offset: 0 ) {
-	@return u-color( $name, $offset - 25 );
+@function u-border-color( $name, $offset: 0% ) {
+	@return u-color( $name, $offset - 25% );
 }

package/themes/umberto/src/css/helpers/_font.scss

@@ -25,7 +25,7 @@ $u-font-sizes: (
 @mixin u-font-mono {
 	font-family: $u-font-face-mono;
 	font-size: .9em;
-	color: u-color( text, 20 );
+	color: u-color( text, 20% );
 }
 
 $u-baseline-levels: (

package/themes/umberto/src/css/helpers/_globals.scss

@@ -95,7 +95,7 @@ $u-top-icon-width: 30px;
 	margin-bottom: 0;
 	padding: u-spacing( 0 ) u-spacing( 2 );
 	border-top: 1px solid u-color( 'background-hue' );
-	// background: u-color( 'background-hue', 40 );
+	// background: u-color( 'background-hue', 40% );
 	background: u-color( 'background-bright' );
 	height: 50px;
 	border-top: 1px solid #eee;
@@ -108,7 +108,7 @@ $u-top-icon-width: 30px;
 	font-size: .85em;
 	text-transform: uppercase;
 	font-weight: 600;
-	color: u-color( 'text', 20 );
+	color: u-color( 'text', 20% );
 }
 
 @mixin levels( $depth, $spacing ) {

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

@@ -1,6 +1,14 @@
 // Copyright (c) 2017-2021, CKSource - Frederico Knabben. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
+// Division using / is deprecated, math.div() has to be used instead.
+// See: https://sass-lang.com/documentation/breaking-changes/slash-div
+@use 'sass:math';
+
+@use '~tippy.js/dist/tippy.css';
+@use '~tippy.js/themes/light-border.css';
+@use '~tippy.js/animations/scale.css';
+
 @import 'helpers/globals';
 @import 'helpers/font';
 @import 'helpers/reset';
@@ -25,7 +33,7 @@ body, html {
 
 body {
 	padding: $u-top-height 0 0;
-	color: u-color( text, 10 );
+	color: u-color( text, 10% );
 
 	@include u-responsive-tablet {
 		padding: $u-top-main 0 0;

package/themes/umberto/src/js/_tooltips.js

@@ -0,0 +1,39 @@
+/**
+ * @license Copyright (c) 2017-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import $ from 'jquery';
+import tippy from 'tippy.js';
+
+export function enableBadgeTooltips() {
+	$( '[data-badge-tooltip]' ).each( ( index, element ) => {
+		tippy( element, {
+			content: element.dataset.badgeTooltip,
+			placement: 'right',
+			duration: 150,
+			animation: 'scale',
+			theme: 'light-border',
+			zIndex: 1
+		} );
+	} );
+}
+
+export function createTooltip( target, content, options ) {
+	const tooltip = tippy( target, {
+		content,
+		...options
+	} );
+
+	const closeButton = tooltip.popper.querySelector( '.tippy-content__close-button' );
+
+	closeButton.addEventListener( 'click', () => {
+		tooltip.hide();
+	} );
+
+	target.addEventListener( 'click', () => {
+		tooltip.hide();
+	} );
+
+	return tooltip;
+}

package/themes/umberto/src/js/app.js

@@ -25,6 +25,7 @@ import copyMobileApiNavigation from './_copymobileapinavigation';
 import { rwdButton } from './_rwdmenu';
 import imageModal from './_imageModal';
 import showWarningBanner from './_warningbanner';
+import { enableBadgeTooltips, createTooltip } from './_tooltips';
 
 // Changing documentation theme. To enable, type in the console: `localStorage.setItem( 'theme', 'theme-dark' )`.
 if ( localStorage.getItem( 'theme' ) === 'theme-dark' ) {
@@ -35,7 +36,8 @@ if ( localStorage.getItem( 'theme' ) === 'theme-dark' ) {
 window.umberto = {
 	// The `VERSION` value will be replaced by the `DefinePlugin` webpack plugin.
 	version: VERSION, // eslint-disable-line no-undef
-	showWarningBanner
+	showWarningBanner,
+	createTooltip
 };
 
 $( document ).ready( () => {
@@ -57,4 +59,5 @@ $( document ).ready( () => {
 	imageModal(); // lightbox for { @img } elements
 	// `sampleCode()` must be called after the `setupPrism()` function.
 	sampleCode(); // control accordion of sample code and buttons(copy/download)
+	enableBadgeTooltips(); // attaches tippy.js tooltip for all elements with data-badge-tooltip
 } );