@rocket.chat/fuselage 0.32.0-dev.112 → 0.32.0-dev.113
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -3447,7 +3447,7 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
3447
3447
|
|
|
3448
3448
|
var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
|
|
3449
3449
|
// Module
|
|
3450
|
-
___CSS_LOADER_EXPORT___.push([module.id, ".rcx-tooltip {\n position: relative;\n display: inline-block;\n max-width: 240px;\n padding: 8px 12px;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n word-break: break-word;\n pointer-events: none;\n color: #2f343d;\n color: var(--rcx-tooltip-text-color, var(--rcx-font-default, var(--rcx-color-neutral-800, #2f343d)));\n border-radius: theme(\"tooltip-border-radius\", 0.25rem);\n border-radius: theme(\"tooltip-border-radius\", var(--rcx-border-radius-medium, 0.25rem));\n background-color: #e4e7ea;\n background-color: var(--rcx-tooltip-background-color, var(--rcx-color-surface-neutral, var(--rcx-color-neutral-400, #e4e7ea)));\n letter-spacing: 0rem;\n font-size: 0.875rem;\n font-weight: 500;\n line-height: 1.25rem;\n}\n.rcx-tooltip--dir-top::after {\n position: absolute;\n box-sizing: border-box;\n content: \" \";\n border-width: 4px;\n border-color: transparent transparent #e4e7ea #e4e7ea;\n border-color: transparent transparent var(--rcx-tooltip-background-color, var(--rcx-color-surface-neutral, var(--rcx-color-neutral-400, #e4e7ea))) var(--rcx-tooltip-background-color, var(--rcx-color-surface-neutral, var(--rcx-color-neutral-400, #e4e7ea)));\n border-radius: 0 0 0 2px;\n height: 0;\n block-size: 0;\n width: 0;\n inline-size: 0;\n bottom: -4px;\n inset-block-end: -4px;\n transform: rotate(-45deg);\n}\n.rcx-tooltip--dir-bottom::after {\n position: absolute;\n box-sizing: border-box;\n content: \" \";\n border-width: 4px;\n border-color: transparent transparent #e4e7ea #e4e7ea;\n border-color: transparent transparent var(--rcx-tooltip-background-color, var(--rcx-color-surface-neutral, var(--rcx-color-neutral-400, #e4e7ea))) var(--rcx-tooltip-background-color, var(--rcx-color-surface-neutral, var(--rcx-color-neutral-400, #e4e7ea)));\n border-radius: 0 0 0 2px;\n height: 0;\n block-size: 0;\n width: 0;\n inline-size: 0;\n top: -4px;\n inset-block-start: -4px;\n transform: rotate(135deg);\n}\nhtml:not([dir=\"rtl\"]) .rcx-tooltip--dir-left::after {\n right: -4px;\n}\n[dir=\"rtl\"] .rcx-tooltip--dir-left::after {\n left: -4px;\n}\n.rcx-tooltip--dir-left::after {\n position: absolute;\n box-sizing: border-box;\n content: \" \";\n border-width: 4px;\n border-color: transparent transparent #e4e7ea #e4e7ea;\n border-color: transparent transparent var(--rcx-tooltip-background-color, var(--rcx-color-surface-neutral, var(--rcx-color-neutral-400, #e4e7ea))) var(--rcx-tooltip-background-color, var(--rcx-color-surface-neutral, var(--rcx-color-neutral-400, #e4e7ea)));\n border-radius: 0 0 0 2px;\n height: 0;\n block-size: 0;\n width: 0;\n inline-size: 0;\n top: 50%;\n inset-block-start: 50%;\n inset-inline-end: -4px;\n margin-top: -4px;\n -webkit-margin-before: -4px;\n margin-block-start: -4px;\n transform: rotate(-135deg);\n}\nhtml:not([dir=\"rtl\"]) .rcx-tooltip--dir-right::after {\n left: -4px;\n}\n[dir=\"rtl\"] .rcx-tooltip--dir-right::after {\n right: -4px;\n}\n.rcx-tooltip--dir-right::after {\n position: absolute;\n box-sizing: border-box;\n content: \" \";\n border-width: 4px;\n border-color: transparent transparent #e4e7ea #e4e7ea;\n border-color: transparent transparent var(--rcx-tooltip-background-color, var(--rcx-color-surface-neutral, var(--rcx-color-neutral-400, #e4e7ea))) var(--rcx-tooltip-background-color, var(--rcx-color-surface-neutral, var(--rcx-color-neutral-400, #e4e7ea)));\n border-radius: 0 0 0 2px;\n height: 0;\n block-size: 0;\n width: 0;\n inline-size: 0;\n top: 50%;\n inset-block-start: 50%;\n inset-inline-start: -4px;\n margin-top: -4px;\n -webkit-margin-before: -4px;\n margin-block-start: -4px;\n transform: rotate(45deg);\n}\nhtml:not([dir=\"rtl\"]) .rcx-tooltip--pos-middle::after {\n left: 50%;\n}\n[dir=\"rtl\"] .rcx-tooltip--pos-middle::after {\n right: 50%;\n}\nhtml:not([dir=\"rtl\"]) .rcx-tooltip--pos-middle::after {\n margin-left: -4px;\n}\n[dir=\"rtl\"] .rcx-tooltip--pos-middle::after {\n margin-right: -4px;\n}\n.rcx-tooltip--pos-middle::after {\n inset-inline-start: 50%;\n -webkit-margin-start: -4px;\n margin-inline-start: -4px;\n}\nhtml:not([dir=\"rtl\"]) .rcx-tooltip--pos-start::after {\n left: 8px;\n}\n[dir=\"rtl\"] .rcx-tooltip--pos-start::after {\n right: 8px;\n}\n.rcx-tooltip--pos-start::after {\n inset-inline-start: 8px;\n margin: 0;\n}\nhtml:not([dir=\"rtl\"]) .rcx-tooltip--pos-end::after {\n left: initial;\n}\n[dir=\"rtl\"] .rcx-tooltip--pos-end::after {\n right: initial;\n}\nhtml:not([dir=\"rtl\"]) .rcx-tooltip--pos-end::after {\n right: 8px;\n}\n[dir=\"rtl\"] .rcx-tooltip--pos-end::after {\n left: 8px;\n}\n.rcx-tooltip--pos-end::after {\n inset-inline-start: initial;\n inset-inline-end: 8px;\n margin: 0;\n}", "",{"version":3,"sources":["webpack://./src/components/Tooltip/Tooltip.styles.scss","webpack://./src/styles/typography.scss"],"names":[],"mappings":"AA2DA;EACE,kBAAA;EAEA,qBAAA;EAEA,gBAAA;EAEA,iBAAA;EAEA,yBAAA;KAAA,sBAAA;MAAA,qBAAA;UAAA,iBAAA;EAEA,sBAAA;EAEA,oBAAA;EAEA,cAjEmB;EAiEnB,oGAjEmB;EAmEnB,sDAAA;EAAA,uFAAA;EAEA,yBAzEyB;EAyEzB,8HAzEyB;ECkBzB,oBAAA;EAEA,mBAAA;EACA,gBAAA;EACA,oBAAA;ADZF;AAAE;EACE,kBAAA;EAEA,sBAAA;EAEA,YAAA;EAEA,iBAAA;EACA,qDAAA;EAAA,+PAAA;EAEA,wBAAA;EAEA,SAAA;EAAA,aAAA;EACA,QAAA;EAAA,cAAA;EAQE,YAAA;EAAA,qBAAA;EAEA,yBAAA;AAXN;AAZE;EACE,kBAAA;EAEA,sBAAA;EAEA,YAAA;EAEA,iBAAA;EACA,qDAAA;EAAA,+PAAA;EAEA,wBAAA;EAEA,SAAA;EAAA,aAAA;EACA,QAAA;EAAA,cAAA;EAGE,SAAA;EAAA,uBAAA;EAEA,yBAAA;AAMN;AAxBE;EAmCI;AAGN;AAtCE;EAmCI;AAGN;AAtCE;EACE,kBAAA;EAEA,sBAAA;EAEA,YAAA;EAEA,iBAAA;EACA,qDAAA;EAAA,+PAAA;EAEA,wBAAA;EAEA,SAAA;EAAA,aAAA;EACA,QAAA;EAAA,cAAA;EAqBE,QAAA;EAAA,sBAAA;EACA,sBAAA;EAEA,gBAAA;EAAA,2BAAA;UAAA,wBAAA;EAEA,0BAAA;AADN;AAtCE;EA2BI;AAyBN;AApDE;EA2BI;AAyBN;AApDE;EACE,kBAAA;EAEA,sBAAA;EAEA,YAAA;EAEA,iBAAA;EACA,qDAAA;EAAA,+PAAA;EAEA,wBAAA;EAEA,SAAA;EAAA,aAAA;EACA,QAAA;EAAA,cAAA;EAaE,QAAA;EAAA,sBAAA;EACA,wBAAA;EAEA,gBAAA;EAAA,2BAAA;UAAA,wBAAA;EAEA,wBAAA;AAqBN;AAiCM;EACE;AA9BR;AA6BM;EACE;AA9BR;AA6BM;EAGE;AAhCR;AA6BM;EAGE;AAhCR;AA6BM;EACE,uBAAA;EAEA,0BAAA;UAAA,yBAAA;AAhCR;AAqCM;EACE;AAlCR;AAiCM;EACE;AAlCR;AAiCM;EACE,uBAAA;EAEA,SAAA;AApCR;AAyCM;EACE;AArCR;AAoCM;EACE;AArCR;AAoCM;EAEE;AAtCR;AAoCM;EAEE;AAtCR;AAoCM;EACE,2BAAA;EACA,qBAAA;EAEA,SAAA;AAxCR","sourcesContent":["@use '../../styles/colors.scss';\n@use '../../styles/lengths.scss';\n@use '../../styles/typography.scss';\n@use '../../styles/functions.scss';\n\n$tooltip-background-color: functions.theme(\n 'tooltip-background-color',\n colors.surface(neutral)\n);\n$tooltip-text-color: functions.theme(\n 'tooltip-text-color',\n colors.font(default)\n);\n\n@mixin triangle-direction($direction) {\n &::after {\n position: absolute;\n\n box-sizing: border-box;\n\n content: ' ';\n\n border-width: 4px;\n border-color: transparent transparent $tooltip-background-color\n $tooltip-background-color;\n border-radius: 0 0 0 (2px);\n\n block-size: 0;\n inline-size: 0;\n\n @if $direction == 'bottom' {\n inset-block-start: -4px;\n\n transform: rotate(135deg);\n }\n @if $direction == 'top' {\n inset-block-end: -4px;\n\n transform: rotate(-45deg);\n }\n @if $direction == 'right' {\n inset-block-start: 50%;\n inset-inline-start: -4px;\n\n margin-block-start: -4px;\n\n transform: rotate(45deg);\n }\n @if $direction == 'left' {\n inset-block-start: 50%;\n inset-inline-end: -4px;\n\n margin-block-start: -4px;\n\n transform: rotate(-135deg);\n }\n }\n}\n\n.rcx-tooltip {\n position: relative;\n\n display: inline-block;\n\n max-width: 240px;\n\n padding: 8px 12px;\n\n user-select: none;\n\n word-break: break-word;\n\n pointer-events: none;\n\n color: $tooltip-text-color;\n\n border-radius: theme('tooltip-border-radius', lengths.border-radius(medium));\n\n background-color: $tooltip-background-color;\n\n @include typography.use-font-scale(p2m);\n\n &--dir-top {\n @include triangle-direction('top');\n }\n\n &--dir-bottom {\n @include triangle-direction('bottom');\n }\n\n &--dir-left {\n @include triangle-direction('left');\n }\n\n &--dir-right {\n @include triangle-direction('right');\n }\n\n &--pos {\n &-middle {\n &::after {\n inset-inline-start: 50%;\n\n margin-inline-start: -4px;\n }\n }\n\n &-start {\n &::after {\n inset-inline-start: 8px;\n\n margin: 0;\n }\n }\n\n &-end {\n &::after {\n inset-inline-start: initial;\n inset-inline-end: 8px;\n\n margin: 0;\n }\n }\n }\n}\n","@use 'sass:map';\n@use '~@rocket.chat/fuselage-tokens/dist/typography.scss';\n@use './functions.scss';\n\n@function font-family($name) {\n @if not map.has-key(typography.$font-families, $name) {\n @error 'invalid font family name';\n }\n\n @return var(\n --rcx-font-family-#{$name},\n map.get(typography.$font-families, $name)\n );\n}\n\n$font-scales: map.keys(typography.$font-scales);\n\n@mixin use-font-scale($name) {\n @if not map.has-key(typography.$font-scales, $name) {\n @error 'invalid font scale name';\n }\n\n $-font-scale: map.get(typography.$font-scales, $name);\n letter-spacing: functions.to-rem(map.get($-font-scale, letter-spacing));\n\n font-size: functions.to-rem(map.get($-font-scale, font-size));\n font-weight: map.get($-font-scale, font-weight);\n line-height: functions.to-rem(map.get($-font-scale, line-height));\n}\n\n@function letter-spacing($name) {\n @if not map.has-key(typography.$font-scales, $name) {\n @error 'invalid font scale name';\n }\n\n @return functions.to-rem(\n map.get(map.get(typography.$font-scales, $name), letter-spacing)\n );\n}\n\n@function font-size($name) {\n @if not map.has-key(typography.$font-scales, $name) {\n @error 'invalid font scale name';\n }\n\n @return functions.to-rem(\n map.get(map.get(typography.$font-scales, $name), font-size)\n );\n}\n\n@function font-weight($name) {\n @if not map.has-key(typography.$font-scales, $name) {\n @error 'invalid font scale name';\n }\n\n @return map.get(map.get(typography.$font-scales, $name), font-weight);\n}\n\n@function line-height($name) {\n @if not map.has-key(typography.$font-scales, $name) {\n @error 'invalid font scale name';\n }\n\n @return functions.to-rem(\n map.get(map.get(typography.$font-scales, $name), line-height)\n );\n}\n\n@mixin use-text-ellipsis {\n overflow: hidden;\n\n text-overflow: ellipsis;\n}\n\n@mixin use-with-truncated-text {\n @include use-text-ellipsis();\n white-space: nowrap;\n}\n"],"sourceRoot":""}]);
|
|
3450
|
+
___CSS_LOADER_EXPORT___.push([module.id, ".rcx-tooltip {\n position: relative;\n display: inline-block;\n max-width: 240px;\n padding: 8px 12px;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n word-break: break-word;\n pointer-events: none;\n color: #2f343d;\n color: var(--rcx-tooltip-text-color, var(--rcx-font-default, var(--rcx-color-neutral-800, #2f343d)));\n border-radius: 0.25rem;\n border-radius: var(--rcx-tooltip-border-radius, var(--rcx-border-radius-medium, 0.25rem));\n background-color: #e4e7ea;\n background-color: var(--rcx-tooltip-background-color, var(--rcx-color-surface-neutral, var(--rcx-color-neutral-400, #e4e7ea)));\n letter-spacing: 0rem;\n font-size: 0.875rem;\n font-weight: 500;\n line-height: 1.25rem;\n}\n.rcx-tooltip--dir-top::after {\n position: absolute;\n box-sizing: border-box;\n content: \" \";\n border-width: 4px;\n border-color: transparent transparent #e4e7ea #e4e7ea;\n border-color: transparent transparent var(--rcx-tooltip-background-color, var(--rcx-color-surface-neutral, var(--rcx-color-neutral-400, #e4e7ea))) var(--rcx-tooltip-background-color, var(--rcx-color-surface-neutral, var(--rcx-color-neutral-400, #e4e7ea)));\n border-radius: 0 0 0 2px;\n height: 0;\n block-size: 0;\n width: 0;\n inline-size: 0;\n bottom: -4px;\n inset-block-end: -4px;\n transform: rotate(-45deg);\n}\n.rcx-tooltip--dir-bottom::after {\n position: absolute;\n box-sizing: border-box;\n content: \" \";\n border-width: 4px;\n border-color: transparent transparent #e4e7ea #e4e7ea;\n border-color: transparent transparent var(--rcx-tooltip-background-color, var(--rcx-color-surface-neutral, var(--rcx-color-neutral-400, #e4e7ea))) var(--rcx-tooltip-background-color, var(--rcx-color-surface-neutral, var(--rcx-color-neutral-400, #e4e7ea)));\n border-radius: 0 0 0 2px;\n height: 0;\n block-size: 0;\n width: 0;\n inline-size: 0;\n top: -4px;\n inset-block-start: -4px;\n transform: rotate(135deg);\n}\nhtml:not([dir=\"rtl\"]) .rcx-tooltip--dir-left::after {\n right: -4px;\n}\n[dir=\"rtl\"] .rcx-tooltip--dir-left::after {\n left: -4px;\n}\n.rcx-tooltip--dir-left::after {\n position: absolute;\n box-sizing: border-box;\n content: \" \";\n border-width: 4px;\n border-color: transparent transparent #e4e7ea #e4e7ea;\n border-color: transparent transparent var(--rcx-tooltip-background-color, var(--rcx-color-surface-neutral, var(--rcx-color-neutral-400, #e4e7ea))) var(--rcx-tooltip-background-color, var(--rcx-color-surface-neutral, var(--rcx-color-neutral-400, #e4e7ea)));\n border-radius: 0 0 0 2px;\n height: 0;\n block-size: 0;\n width: 0;\n inline-size: 0;\n top: 50%;\n inset-block-start: 50%;\n inset-inline-end: -4px;\n margin-top: -4px;\n -webkit-margin-before: -4px;\n margin-block-start: -4px;\n transform: rotate(-135deg);\n}\nhtml:not([dir=\"rtl\"]) .rcx-tooltip--dir-right::after {\n left: -4px;\n}\n[dir=\"rtl\"] .rcx-tooltip--dir-right::after {\n right: -4px;\n}\n.rcx-tooltip--dir-right::after {\n position: absolute;\n box-sizing: border-box;\n content: \" \";\n border-width: 4px;\n border-color: transparent transparent #e4e7ea #e4e7ea;\n border-color: transparent transparent var(--rcx-tooltip-background-color, var(--rcx-color-surface-neutral, var(--rcx-color-neutral-400, #e4e7ea))) var(--rcx-tooltip-background-color, var(--rcx-color-surface-neutral, var(--rcx-color-neutral-400, #e4e7ea)));\n border-radius: 0 0 0 2px;\n height: 0;\n block-size: 0;\n width: 0;\n inline-size: 0;\n top: 50%;\n inset-block-start: 50%;\n inset-inline-start: -4px;\n margin-top: -4px;\n -webkit-margin-before: -4px;\n margin-block-start: -4px;\n transform: rotate(45deg);\n}\nhtml:not([dir=\"rtl\"]) .rcx-tooltip--pos-middle::after {\n left: 50%;\n}\n[dir=\"rtl\"] .rcx-tooltip--pos-middle::after {\n right: 50%;\n}\nhtml:not([dir=\"rtl\"]) .rcx-tooltip--pos-middle::after {\n margin-left: -4px;\n}\n[dir=\"rtl\"] .rcx-tooltip--pos-middle::after {\n margin-right: -4px;\n}\n.rcx-tooltip--pos-middle::after {\n inset-inline-start: 50%;\n -webkit-margin-start: -4px;\n margin-inline-start: -4px;\n}\nhtml:not([dir=\"rtl\"]) .rcx-tooltip--pos-start::after {\n left: 8px;\n}\n[dir=\"rtl\"] .rcx-tooltip--pos-start::after {\n right: 8px;\n}\n.rcx-tooltip--pos-start::after {\n inset-inline-start: 8px;\n margin: 0;\n}\nhtml:not([dir=\"rtl\"]) .rcx-tooltip--pos-end::after {\n left: initial;\n}\n[dir=\"rtl\"] .rcx-tooltip--pos-end::after {\n right: initial;\n}\nhtml:not([dir=\"rtl\"]) .rcx-tooltip--pos-end::after {\n right: 8px;\n}\n[dir=\"rtl\"] .rcx-tooltip--pos-end::after {\n left: 8px;\n}\n.rcx-tooltip--pos-end::after {\n inset-inline-start: initial;\n inset-inline-end: 8px;\n margin: 0;\n}", "",{"version":3,"sources":["webpack://./src/components/Tooltip/Tooltip.styles.scss","webpack://./src/styles/typography.scss"],"names":[],"mappings":"AA2DA;EACE,kBAAA;EAEA,qBAAA;EAEA,gBAAA;EAEA,iBAAA;EAEA,yBAAA;KAAA,sBAAA;MAAA,qBAAA;UAAA,iBAAA;EAEA,sBAAA;EAEA,oBAAA;EAEA,cAjEmB;EAiEnB,oGAjEmB;EAmEnB,sBAAA;EAAA,yFAAA;EAKA,yBA5EyB;EA4EzB,8HA5EyB;ECkBzB,oBAAA;EAEA,mBAAA;EACA,gBAAA;EACA,oBAAA;ADZF;AAAE;EACE,kBAAA;EAEA,sBAAA;EAEA,YAAA;EAEA,iBAAA;EACA,qDAAA;EAAA,+PAAA;EAEA,wBAAA;EAEA,SAAA;EAAA,aAAA;EACA,QAAA;EAAA,cAAA;EAQE,YAAA;EAAA,qBAAA;EAEA,yBAAA;AAXN;AAZE;EACE,kBAAA;EAEA,sBAAA;EAEA,YAAA;EAEA,iBAAA;EACA,qDAAA;EAAA,+PAAA;EAEA,wBAAA;EAEA,SAAA;EAAA,aAAA;EACA,QAAA;EAAA,cAAA;EAGE,SAAA;EAAA,uBAAA;EAEA,yBAAA;AAMN;AAxBE;EAmCI;AAGN;AAtCE;EAmCI;AAGN;AAtCE;EACE,kBAAA;EAEA,sBAAA;EAEA,YAAA;EAEA,iBAAA;EACA,qDAAA;EAAA,+PAAA;EAEA,wBAAA;EAEA,SAAA;EAAA,aAAA;EACA,QAAA;EAAA,cAAA;EAqBE,QAAA;EAAA,sBAAA;EACA,sBAAA;EAEA,gBAAA;EAAA,2BAAA;UAAA,wBAAA;EAEA,0BAAA;AADN;AAtCE;EA2BI;AAyBN;AApDE;EA2BI;AAyBN;AApDE;EACE,kBAAA;EAEA,sBAAA;EAEA,YAAA;EAEA,iBAAA;EACA,qDAAA;EAAA,+PAAA;EAEA,wBAAA;EAEA,SAAA;EAAA,aAAA;EACA,QAAA;EAAA,cAAA;EAaE,QAAA;EAAA,sBAAA;EACA,wBAAA;EAEA,gBAAA;EAAA,2BAAA;UAAA,wBAAA;EAEA,wBAAA;AAqBN;AAoCM;EACE;AAjCR;AAgCM;EACE;AAjCR;AAgCM;EAGE;AAnCR;AAgCM;EAGE;AAnCR;AAgCM;EACE,uBAAA;EAEA,0BAAA;UAAA,yBAAA;AAnCR;AAwCM;EACE;AArCR;AAoCM;EACE;AArCR;AAoCM;EACE,uBAAA;EAEA,SAAA;AAvCR;AA4CM;EACE;AAxCR;AAuCM;EACE;AAxCR;AAuCM;EAEE;AAzCR;AAuCM;EAEE;AAzCR;AAuCM;EACE,2BAAA;EACA,qBAAA;EAEA,SAAA;AA3CR","sourcesContent":["@use '../../styles/colors.scss';\n@use '../../styles/lengths.scss';\n@use '../../styles/typography.scss';\n@use '../../styles/functions.scss';\n\n$tooltip-background-color: functions.theme(\n 'tooltip-background-color',\n colors.surface(neutral)\n);\n$tooltip-text-color: functions.theme(\n 'tooltip-text-color',\n colors.font(default)\n);\n\n@mixin triangle-direction($direction) {\n &::after {\n position: absolute;\n\n box-sizing: border-box;\n\n content: ' ';\n\n border-width: 4px;\n border-color: transparent transparent $tooltip-background-color\n $tooltip-background-color;\n border-radius: 0 0 0 (2px);\n\n block-size: 0;\n inline-size: 0;\n\n @if $direction == 'bottom' {\n inset-block-start: -4px;\n\n transform: rotate(135deg);\n }\n @if $direction == 'top' {\n inset-block-end: -4px;\n\n transform: rotate(-45deg);\n }\n @if $direction == 'right' {\n inset-block-start: 50%;\n inset-inline-start: -4px;\n\n margin-block-start: -4px;\n\n transform: rotate(45deg);\n }\n @if $direction == 'left' {\n inset-block-start: 50%;\n inset-inline-end: -4px;\n\n margin-block-start: -4px;\n\n transform: rotate(-135deg);\n }\n }\n}\n\n.rcx-tooltip {\n position: relative;\n\n display: inline-block;\n\n max-width: 240px;\n\n padding: 8px 12px;\n\n user-select: none;\n\n word-break: break-word;\n\n pointer-events: none;\n\n color: $tooltip-text-color;\n\n border-radius: functions.theme(\n 'tooltip-border-radius',\n lengths.border-radius(medium)\n );\n\n background-color: $tooltip-background-color;\n\n @include typography.use-font-scale(p2m);\n\n &--dir-top {\n @include triangle-direction('top');\n }\n\n &--dir-bottom {\n @include triangle-direction('bottom');\n }\n\n &--dir-left {\n @include triangle-direction('left');\n }\n\n &--dir-right {\n @include triangle-direction('right');\n }\n\n &--pos {\n &-middle {\n &::after {\n inset-inline-start: 50%;\n\n margin-inline-start: -4px;\n }\n }\n\n &-start {\n &::after {\n inset-inline-start: 8px;\n\n margin: 0;\n }\n }\n\n &-end {\n &::after {\n inset-inline-start: initial;\n inset-inline-end: 8px;\n\n margin: 0;\n }\n }\n }\n}\n","@use 'sass:map';\n@use '~@rocket.chat/fuselage-tokens/dist/typography.scss';\n@use './functions.scss';\n\n@function font-family($name) {\n @if not map.has-key(typography.$font-families, $name) {\n @error 'invalid font family name';\n }\n\n @return var(\n --rcx-font-family-#{$name},\n map.get(typography.$font-families, $name)\n );\n}\n\n$font-scales: map.keys(typography.$font-scales);\n\n@mixin use-font-scale($name) {\n @if not map.has-key(typography.$font-scales, $name) {\n @error 'invalid font scale name';\n }\n\n $-font-scale: map.get(typography.$font-scales, $name);\n letter-spacing: functions.to-rem(map.get($-font-scale, letter-spacing));\n\n font-size: functions.to-rem(map.get($-font-scale, font-size));\n font-weight: map.get($-font-scale, font-weight);\n line-height: functions.to-rem(map.get($-font-scale, line-height));\n}\n\n@function letter-spacing($name) {\n @if not map.has-key(typography.$font-scales, $name) {\n @error 'invalid font scale name';\n }\n\n @return functions.to-rem(\n map.get(map.get(typography.$font-scales, $name), letter-spacing)\n );\n}\n\n@function font-size($name) {\n @if not map.has-key(typography.$font-scales, $name) {\n @error 'invalid font scale name';\n }\n\n @return functions.to-rem(\n map.get(map.get(typography.$font-scales, $name), font-size)\n );\n}\n\n@function font-weight($name) {\n @if not map.has-key(typography.$font-scales, $name) {\n @error 'invalid font scale name';\n }\n\n @return map.get(map.get(typography.$font-scales, $name), font-weight);\n}\n\n@function line-height($name) {\n @if not map.has-key(typography.$font-scales, $name) {\n @error 'invalid font scale name';\n }\n\n @return functions.to-rem(\n map.get(map.get(typography.$font-scales, $name), line-height)\n );\n}\n\n@mixin use-text-ellipsis {\n overflow: hidden;\n\n text-overflow: ellipsis;\n}\n\n@mixin use-with-truncated-text {\n @include use-text-ellipsis();\n white-space: nowrap;\n}\n"],"sourceRoot":""}]);
|
|
3451
3451
|
// Exports
|
|
3452
3452
|
/* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
|
|
3453
3453
|
|