@enact/moonstone/styles/mixins.less

Large-screen/TV support library for Enact, containing a variety of UI components.

//
// Handy Information
// http://lesscss.org/features/#mixins-feature-not-outputting-the-mixin
//

@import "~@enact/spotlight/styles/mixins.less";
@import "~@enact/ui/styles/mixins.less";
@import "./variables.less";

.moon-taparea(@element-size) when (@moon-button-small-tap-area-height > @element-size) {
	// Take the size of the minimum tappable area, and subtract the element's current size.
	@_tap-offset: -((@moon-button-small-tap-area-height - @element-size) / 2);

	&::before {
		content: "";
		position: absolute;
		top: @_tap-offset;
		right: @_tap-offset;
		bottom: @_tap-offset;
		left: @_tap-offset;
		border-radius: @moon-button-border-radius;
	}
}

.moon-taparea(@element-size) when (@moon-button-small-tap-area-height <= @element-size) {
	// Remove the tappable area if the tap area is smaller than the element's current size.
	&::before {
		content: none;
	}
}

.moon-item-icon-tap-area-adjust() {
	&.small > .small-icon-tap-area {
		left: -@moon-spotlight-outset;
		right: -@moon-spotlight-outset;
	}
}

.moon-word-break() {
	overflow-wrap: break-word;
	word-break: keep-all;
}

// NOTE: Until we are able to automatically remove these JSDoc-style comments, they should remain LESS-commented
// /**
//  * Add a margin to your component which includes the standard moonstone spotlight margin on the
//  * sides and uses the two arguments for margin on the top and bottom respectively.
//  *
//  * @param  {Measurement} @t Top margin
//  * @param  {Measurement} @b Bottom margin
//  */
.moon-spotlight-margin(@t, @b) {
	margin: @t @moon-spotlight-outset @b;
}

// /**
//  * Add a margin to your component which includes the standard moonstone spotlight margin on the
//  * sides and uses the argument for margin on the top and bottom.
//  *
//  * @param  {Measurement} @tb Top and bottom margin
//  */
.moon-spotlight-margin(@tb) {
	margin: @tb @moon-spotlight-outset;
}

// /**
//  * Add a margin to your component which includes the standard moonstone spotlight margin only on
//  * the sides.
//  */
.moon-spotlight-margin() {
	margin-left: @moon-spotlight-outset;
	margin-right: @moon-spotlight-outset;
}

// /**
//  * Add a padding to your component which includes the standard moonstone spotlight padding on the
//  * sides and uses the two arguments for padding on the top and bottom respectively.
//  *
//  * @param  {Measurement} @t Top padding
//  * @param  {Measurement} @b Bottom padding
//  */
.moon-spotlight-padding(@t, @b) {
	padding: @t @moon-spotlight-outset @b;
}

// /**
//  * Add a padding to your component which includes the standard moonstone spotlight padding on the
//  * sides and uses the argument for padding on the top and bottom.
//  *
//  * @param  {Measurement} @tb Top and bottom padding
//  */
.moon-spotlight-padding(@tb) {
	padding: @tb @moon-spotlight-outset;
}

// /**
//  * Add a padding to your component which includes the standard moonstone spotlight padding only on
//  * the sides.
//  */
.moon-spotlight-padding() {
	padding-left: @moon-spotlight-outset;
	padding-right: @moon-spotlight-outset;
}

//
// Mixin classes for creating the moonstone text classes
//

// Text base provides family, weight, and size
// Accepts 0, 1 or 2 arguments
// The first argument allows overriding the font size, defaulting to
// the default body font size, the 2nd argument is used privately by
// MoonstoneDecorator to override the target of the rules.
.moon-text-base(@font-size: @moon-body-font-size; @target: normal) {
	.moon-font({
		font-weight: @moon-non-latin-font-weight;
		font-size: @moon-non-latin-base-font-size;
		line-height: @moon-non-latin-body-line-height;
	}, @target);
	font-weight: normal;
	font-size: @font-size;
	line-height: @moon-body-line-height;
}

//
// Moonstone Font Applicator
//
// When only rules are provided. Default populate the @target argument.
.moon-font(@nlrules; @target: normal) when (isruleset(@nlrules)) {
	.moon-font(@moon-font-family, @moon-non-latin-font-family, @nlrules, @target);
}
// When 0, 1, or 2 strings (font family names) are provided. Default populate the @target argument so the signature stays the same.
.moon-font(@family: @moon-font-family; @nlfamily: @moon-non-latin-font-family; @target: normal) when (isstring(@family)) and (isstring(@nlfamily)) and (isstring(@target)) {
	.moon-font(@family, @nlfamily, {}, @target);
}
// When exactly 3 or 4 args are provided. Types are assumed because they went through the trouble to provide all 3 required args.
.moon-font(@family; @nlfamily; @nlrules; @target: normal) {
	font-family: @family;

	.moon-locale-non-latin({
		font-family: @nlfamily;
		@nlrules();
	}, @target);
}

// Convenience method added to simply set the font size. Please don't use this inside the framework
// as it will generate a significant amount of selectors and rules that might not be minified.
// The framework offers more direct and more efficient means of assigning multiple rules at once.
// This is primarily a convenience for external app developers.
// Usage:
//    0 args -> default size for latin is applied to both latin and non-latin
//    1 arg  -> that size is applied to both latin and non-latin
//    2 args -> first is applied to latin, second to non-latin
.moon-font-size(@font-size: @moon-body-font-size; @nlfont-size: @font-size) {
	font-size: @font-size;

	.moon-locale-non-latin({
		font-size: @nlfont-size;
	});
}

// Generic Non-Latin Font Rule generator
.moon-locale-non-latin(@nlrules; @target) when (isruleset(@nlrules)) and (@target = self) {
	&:global(.enact-locale-non-latin) {
		@nlrules();
	}
}
.moon-locale-non-latin(@nlrules; @target: normal) when (isruleset(@nlrules)) {
	:global(.enact-locale-non-latin) & {
		@nlrules();
	}
}

//
// Custom Text Size Mixins
//
// 1 arg: Shorthand for just setting the font size in custom-text mode
.moon-custom-text-size(@latin-size) {
	.moon-custom-text({
		font-size: @latin-size;
	});
}
// 2 args: Shorthand for just setting the font size of both latin and non-latin in custom-text mode
.moon-custom-text-size(@latin-size; @non-latin-size) {
	.moon-custom-text(
	{
		font-size: @latin-size;
	};
	{
		font-size: @non-latin-size;
	});
}

// 1 arg: Generic rule applicator, accepts an entire rule-set to add for large text mode
.moon-custom-text(@lrules) when (isruleset(@lrules)) {
	&:global(.largeText) {
		@lrules();
	}
}
// 2 args: Generic rule applicator, accepts 2 entire rule-sets to add both latin and non-latin for large text mode
.moon-custom-text(@lrules; @nlrules) when (isruleset(@lrules)) and (isruleset(@nlrules)) {
	&:global(.largeText) {
		@lrules();
	}
	:global(.enact-locale-non-latin) &:global(.largeText) {
		@nlrules();
	}
}

//
// Text definitions
//

.moon-superscript() {
	font-size: @moon-superscript-text-size;
	vertical-align: top;
	margin: 0 0 0 3px;
	padding: 0;

	.moon-locale-non-latin({
		font-family: @moon-non-latin-font-family-light;
		font-weight: @moon-non-latin-font-weight-light;
		font-size: @moon-non-latin-superscript-text-size;
	});
}

.moon-pre-text() {
	font-size: @moon-pre-text-size;
	vertical-align: top;
	height:  @moon-large-text-size;
	line-height: @moon-pre-text-size;
	margin: 12px 3px 9px 0;
	padding: 0px;

	.moon-locale-non-latin({
		font-family: @moon-non-latin-font-family-light;
		font-weight: @moon-non-latin-font-weight-light;
		font-size: @moon-non-latin-pre-text-size;
	});
}

.moon-large-text() {
	font-size: @moon-large-text-size;
	vertical-align: top;
	height: @moon-large-text-size;
	margin: 0;
	padding: 0;

	.moon-locale-non-latin({
		font-size: @moon-non-latin-large-text-size;
	});
}

.moon-header-text() {
	.moon-font(@moon-header-font-family, @moon-non-latin-font-family, {
		font-size: @moon-non-latin-header-font-size;
		line-height: @moon-non-latin-header-line-height;
	});
	font-weight: @moon-header-font-weight;
	font-size: @moon-header-font-size;
	font-style: @moon-header-font-style;
	line-height: @moon-header-line-height;
	.font-kerning;
}

.moon-header-title-below-text() {
	.moon-text-base(@moon-header-title-below-font-size);
	font-weight: @moon-header-title-below-font-weight;
	font-size: @moon-header-title-below-font-size;
	font-style: @moon-header-title-below-font-style;
	letter-spacing: @moon-header-title-below-letter-spacing;
	line-height: @moon-header-standard-title-below-line-height;

	.moon-locale-non-latin({
		font-size: @moon-non-latin-header-title-below-font-size;
		line-height: @moon-non-latin-header-standard-title-below-line-height;
	});
}

.moon-header-sub-title-below-text() {
	.moon-font(@moon-header-sub-title-below-font-family);
	font-weight: @moon-header-sub-title-below-font-weight;
	font-size: @moon-header-sub-title-below-font-size;
	line-height: @moon-header-standard-sub-title-below-line-height;

	.moon-locale-non-latin({
		line-height: @moon-non-latin-header-standard-sub-title-below-line-height;
	});
}

.moon-dialog-title() {
	.moon-header-text();
}

.moon-dialog-title-below() {
	.moon-font(@moon-dialog-title-below-font-family, @moon-non-latin-font-family);
	font-weight: @moon-dialog-title-below-font-weight;
	font-size: @moon-popup-sub-header-font-size;
}

.moon-dialog-content() {
	.moon-body-text();
	.locale-japanese-line-break();
}

.moon-notification-content() {
	.moon-font(@moon-notification-font-family, @moon-non-latin-font-family-light, {
		line-height: @moon-non-latin-body-line-height;
	});
	font-weight: @moon-notification-font-weight;
	font-style: @moon-notification-font-style;
	font-size: @moon-notification-font-size;
	line-height: @moon-body-line-height;
	text-align: initial;
	.moon-word-break();
	.locale-japanese-line-break();
}

.moon-body-text() {
	.moon-font(@moon-body-font-family, @moon-non-latin-font-family-light, {
		font-weight: @moon-non-latin-body-font-weight;
		font-size: @moon-non-latin-body-font-size;
		line-height: @moon-non-latin-body-line-height;
	});
	font-weight: @moon-body-font-weight;
	font-size: @moon-body-font-size;
	// color: @moon-body-text-color;
	line-height: @moon-body-line-height;
	a:link {color: inherit; text-decoration:none;}
	a:visited {color: inherit; text-decoration:none;}
	a:hover {color: inherit; text-decoration:none;}
	a:active {color: inherit; text-decoration:none;}
}

.moon-body-text-spacing() {
	margin: 0 @moon-spotlight-outset @moon-grid-row-height @moon-spotlight-outset;
}

.moon-body-large-text() {
	font-size: @moon-body-font-size + 3;
	line-height: @moon-body-line-height + 9;

	.moon-locale-non-latin({
		font-size: @moon-non-latin-body-font-size + 3;
		line-height: @moon-non-latin-body-line-height + 9;
	});
}

.moon-bold-text() {
	.moon-font(@moon-font-family-bold, @moon-non-latin-font-family-bold, {
		font-weight: @moon-non-latin-font-weight-bold;
	});
	font-weight: bold;
}

.moon-large-button-text() {
	.moon-font(@moon-button-font-family, @moon-non-latin-button-font-family, {
		font-size: @moon-non-latin-button-large-font-size;
		font-style: @moon-non-latin-button-font-style;
		font-weight: @moon-non-latin-button-large-font-weight;
	});
	font-size: @moon-button-font-size;
	font-style: @moon-button-font-style;
	font-weight: @moon-button-font-weight;
	.font-kerning;
}

.moon-small-button-text() {
	.moon-font(@moon-button-small-font-family, @moon-non-latin-button-font-family, {
		font-size: @moon-non-latin-button-small-font-size;
		font-style: @moon-non-latin-button-small-font-style;
		font-weight: @moon-non-latin-button-small-font-weight;
	});
	font-size: @moon-button-small-font-size;
	font-style: @moon-button-small-font-style;
	font-weight: @moon-button-small-font-weight;
	.font-kerning;
}