@rocket.chat/fuselage 0.32.0-dev.214 → 0.32.0-dev.216
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.
|
@@ -3047,7 +3047,7 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
3047
3047
|
|
|
3048
3048
|
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()));
|
|
3049
3049
|
// Module
|
|
3050
|
-
___CSS_LOADER_EXPORT___.push([module.id, ".rcx-banner {\n box-shadow: 0 0 2px 0 rgba(47, 52, 61, 0.08), 0 0 12px 0 rgba(47, 52, 61, 0.12);\n box-shadow: 0 0 2px 0 var(--rcx-color-neutral-800-8, rgba(47, 52, 61, 0.08)), 0 0 12px 0 var(--rcx-color-neutral-800-12, rgba(47, 52, 61, 0.12));\n z-index: 1;\n display: flex;\n flex-flow: row nowrap;\n justify-content: space-between;\n align-items: flex-start;\n flex: 0 1 auto;\n box-sizing: border-box;\n padding-top: 14px;\n padding-bottom: 14px;\n padding-block: 14px;\n padding-left: 16px;\n padding-right: 16px;\n padding-inline: 16px;\n color: #2f343d;\n color: var(--rcx-banner-colors-neutral-color, var(--rcx-color-font-default, var(--rcx-color-neutral-800, #2f343d)));\n border-top-width: 0.25rem;\n border-top-style: solid;\n background-color: #f7f8fa;\n background-color: var(--rcx-banner-colors-neutral-background-color, var(--rcx-color-surface-tint, var(--rcx-color-neutral-100, #f7f8fa)));\n font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Helvetica Neue\", \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Meiryo UI\", Arial, sans-serif;\n font-family: var(--rcx-font-family-sans, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Helvetica Neue\", \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Meiryo UI\", Arial, sans-serif);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n.rcx-banner--inline {\n padding-top: 12px;\n padding-bottom: 12px;\n padding-block: 12px;\n}\n.rcx-banner--actionable {\n cursor: pointer;\n}\n.rcx-banner--neutral {\n border-top-color: transparent;\n}\n.rcx-banner--info {\n border-top-color: #095AD2;\n border-top-color: var(--rcx-banner-colors-info-color, var(--rcx-color-status-font-on-info, var(--rcx-color-primary-600, #095AD2)));\n}\n.rcx-banner--warning {\n border-top-color: #8E6300;\n border-top-color: var(--rcx-banner-colors-warning-color, var(--rcx-color-status-font-on-warning, var(--rcx-color-warning-900, #8E6300)));\n}\n.rcx-banner--danger {\n border-top-color: #9B1325;\n border-top-color: var(--rcx-banner-colors-danger-color, var(--rcx-color-status-font-on-danger, var(--rcx-color-danger-800, #9B1325)));\n}\n.rcx-banner--success {\n border-top-color: #148660;\n border-top-color: var(--rcx-banner-colors-success-color, var(--rcx-color-status-font-on-success, var(--rcx-color-success-800, #148660)));\n}\nhtml:not([dir=\"rtl\"]) .rcx-banner__icon {\n padding-right: 12px;\n}\n[dir=\"rtl\"] .rcx-banner__icon {\n padding-left: 12px;\n}\n.rcx-banner__icon {\n padding-top: 8px;\n padding-bottom: 8px;\n padding-block: 8px;\n -webkit-padding-end: 12px;\n padding-inline-end: 12px;\n}\n.rcx-banner__icon--info {\n color: #095AD2;\n color: var(--rcx-banner-colors-info-color, var(--rcx-color-status-font-on-info, var(--rcx-color-primary-600, #095AD2)));\n}\n.rcx-banner__icon--warning {\n color: #8E6300;\n color: var(--rcx-banner-colors-warning-color, var(--rcx-color-status-font-on-warning, var(--rcx-color-warning-900, #8E6300)));\n}\n.rcx-banner__icon--danger {\n color: #9B1325;\n color: var(--rcx-banner-colors-danger-color, var(--rcx-color-status-font-on-danger, var(--rcx-color-danger-800, #9B1325)));\n}\n.rcx-banner__icon--success {\n color: #148660;\n color: var(--rcx-banner-colors-success-color, var(--rcx-color-status-font-on-success, var(--rcx-color-success-800, #148660)));\n}\n.rcx-banner__icon--inline {\n margin-top: -2px;\n margin-bottom: -2px;\n margin-block: -2px;\n padding-top: 0;\n padding-bottom: 0;\n padding-block: 0;\n}\n.rcx-banner__content {\n flex-grow: 1;\n align-self: center;\n letter-spacing: 0rem;\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.25rem;\n}\n.rcx-banner__content--inline {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.rcx-banner__title {\n margin: 0;\n padding: 0;\n letter-spacing: 0rem;\n font-size: 0.875rem;\n font-weight: 700;\n line-height: 1.25rem;\n}\nhtml:not([dir=\"rtl\"]) .rcx-banner__title--inline {\n padding-right: 8px;\n}\n[dir=\"rtl\"] .rcx-banner__title--inline {\n padding-left: 8px;\n}\n.rcx-banner__title--inline {\n display: inline;\n -webkit-padding-end: 8px;\n padding-inline-end: 8px;\n}\n.rcx-banner__close-button {\n padding-top: 6px;\n padding-bottom: 6px;\n padding-block: 6px;\n padding-left: 8px;\n padding-right: 8px;\n padding-inline: 8px;\n}\n.rcx-banner__close-button--inline {\n margin-top: -4px;\n margin-bottom: -4px;\n margin-block: -4px;\n padding-top: 0;\n padding-bottom: 0;\n padding-block: 0;\n}\n.rcx-banner__link {\n padding-left: 10px;\n text-decoration: underline;\n color: inherit;\n}", "",{"version":3,"sources":["webpack://./src/components/Banner/Banner.styles.scss","webpack://./src/styles/mixins/elevation.scss","webpack://./src/styles/typography.scss"],"names":[],"mappings":"AAyCA;EClCI,+EAAA;EAAA,gJAAA;EDqCF,UAAA;EAEA,aAAA;EACA,qBAAA;EACA,8BAAA;EACA,uBAAA;EACA,cAAA;EAEA,sBAAA;EAEA,iBAAA;EAAA,oBAAA;EAAA,mBAAA;EACA,kBAAA;EAAA,mBAAA;EAAA,oBAAA;EAEA,cAjD4B;EAiD5B,mHAjD4B;EAkD5B,yBAAA;EACA,uBAAA;EAEA,yBAjDuC;EAiDvC,yIAjDuC;EAmDvC,gNAAA;EAAA,6OAAA;EACA,mCAAA;EACA,kCAAA;AA/CF;AAiDE;EACE,iBAAA;EAAA,oBAAA;EAAA,mBAAA;AA/CJ;AAkDE;EACE,eAAA;AAhDJ;AAmDE;EACE,6BAAA;AAjDJ;AAoDE;EACE,yBA9DuB;EA8DvB,kIA9DuB;AAY3B;AAqDE;EACE,yBAtD0B;EAsD1B,wIAtD0B;AAG9B;AAsDE;EACE,yBApDyB;EAoDzB,qIApDyB;AAA7B;AAuDE;EACE,yBApE0B;EAoE1B,wIApE0B;AAe9B;AAwDE;EAEE;AAtDJ;AAoDE;EAEE;AAtDJ;AAoDE;EACE,gBAAA;EAAA,mBAAA;EAAA,kBAAA;EACA,yBAAA;UAAA,wBAAA;AAtDJ;AAwDI;EACE,cAlFqB;EAkFrB,uHAlFqB;AA4B3B;AAyDI;EACE,cA1EwB;EA0ExB,6HA1EwB;AAmB9B;AA0DI;EACE,cAxEuB;EAwEvB,0HAxEuB;AAgB7B;AA2DI;EACE,cAxFwB;EAwFxB,6HAxFwB;AA+B9B;AA4DI;EACE,gBAAA;EAAA,mBAAA;EAAA,kBAAA;EACA,cAAA;EAAA,iBAAA;EAAA,gBAAA;AA1DN;AA8DE;EACE,YAAA;EACA,kBAAA;EEpGF,oBAAA;EAEA,mBAAA;EACA,gBAAA;EACA,oBAAA;AFwCF;AA4DI;EE1DF,gBAAA;EAEA,uBAAA;EAKA,mBAAA;AFJF;AA4DE;EACE,SAAA;EACA,UAAA;EE/GF,oBAAA;EAEA,mBAAA;EACA,gBAAA;EACA,oBAAA;AFqDF;AAyDI;EAGE;AAxDN;AAqDI;EAGE;AAxDN;AAqDI;EACE,eAAA;EAEA,wBAAA;UAAA,uBAAA;AAxDN;AA4DE;EACE,gBAAA;EAAA,mBAAA;EAAA,kBAAA;EACA,iBAAA;EAAA,kBAAA;EAAA,mBAAA;AA1DJ;AA4DI;EACE,gBAAA;EAAA,mBAAA;EAAA,kBAAA;EACA,cAAA;EAAA,iBAAA;EAAA,gBAAA;AA1DN;AA8DE;EACE,kBAAA;EAEA,0BAAA;EAEA,cAAA;AA9DJ","sourcesContent":["@use 'sass:map';\n@use '../../styles/functions';\n@use '../../styles/colors.scss';\n@use '../../styles/lengths.scss';\n@use '../../styles/typography.scss';\n@use '../../styles/mixins/elevation.scss';\n\n// neutral\n$banner-colors-neutral-color: functions.theme(\n 'banner-colors-neutral-color',\n colors.font(default)\n);\n$banner-colors-neutral-background-color: functions.theme(\n 'banner-colors-neutral-background-color',\n colors.surface(tint)\n);\n\n// info\n$banner-colors-info-color: functions.theme(\n 'banner-colors-info-color',\n colors.status-font(on-info)\n);\n\n// success\n$banner-colors-success-color: functions.theme(\n 'banner-colors-success-color',\n colors.status-font(on-success)\n);\n\n// warning\n$banner-colors-warning-color: functions.theme(\n 'banner-colors-warning-color',\n colors.status-font(on-warning)\n);\n\n// danger\n$banner-colors-danger-color: functions.theme(\n 'banner-colors-danger-color',\n colors.status-font(on-danger)\n);\n\n.rcx-banner {\n @include elevation.elevation-level(2);\n\n z-index: 1;\n\n display: flex;\n flex-flow: row nowrap;\n justify-content: space-between;\n align-items: flex-start;\n flex: 0 1 auto;\n\n box-sizing: border-box;\n\n padding-block: 14px;\n padding-inline: 16px;\n\n color: $banner-colors-neutral-color;\n border-top-width: lengths.border-width(4);\n border-top-style: solid;\n\n background-color: $banner-colors-neutral-background-color;\n\n font-family: typography.font-family('sans');\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n\n &--inline {\n padding-block: 12px;\n }\n\n &--actionable {\n cursor: pointer;\n }\n\n &--neutral {\n border-top-color: transparent;\n }\n\n &--info {\n border-top-color: $banner-colors-info-color;\n }\n\n &--warning {\n border-top-color: $banner-colors-warning-color;\n }\n\n &--danger {\n border-top-color: $banner-colors-danger-color;\n }\n\n &--success {\n border-top-color: $banner-colors-success-color;\n }\n\n &__icon {\n padding-block: 8px;\n padding-inline-end: 12px;\n\n &--info {\n color: $banner-colors-info-color;\n }\n\n &--warning {\n color: $banner-colors-warning-color;\n }\n\n &--danger {\n color: $banner-colors-danger-color;\n }\n\n &--success {\n color: $banner-colors-success-color;\n }\n\n &--inline {\n margin-block: -2px;\n padding-block: 0;\n }\n }\n\n &__content {\n flex-grow: 1;\n align-self: center;\n\n @include typography.use-font-scale(p2);\n\n &--inline {\n @include typography.use-with-truncated-text;\n }\n }\n\n &__title {\n margin: 0;\n padding: 0;\n @include typography.use-font-scale(h5);\n\n &--inline {\n display: inline;\n\n padding-inline-end: 8px;\n }\n }\n\n &__close-button {\n padding-block: 6px;\n padding-inline: 8px;\n\n &--inline {\n margin-block: -4px;\n padding-block: 0;\n }\n }\n\n &__link {\n padding-left: 10px;\n\n text-decoration: underline;\n\n color: inherit;\n }\n}\n","@use '../colors.scss';\n\n@mixin elevation-level($level) {\n @if $level == 1 {\n box-shadow: 0 0 12px 0 colors.elevation(1);\n }\n @if $level == 2 {\n box-shadow: 0 0 2px 0 colors.elevation('2x'),\n 0 0 12px 0 colors.elevation('2y');\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":""}]);
|
|
3050
|
+
___CSS_LOADER_EXPORT___.push([module.id, ".rcx-banner {\n box-shadow: 0 0 2px 0 rgba(47, 52, 61, 0.08), 0 0 12px 0 rgba(47, 52, 61, 0.12);\n box-shadow: 0 0 2px 0 var(--rcx-color-neutral-800-8, rgba(47, 52, 61, 0.08)), 0 0 12px 0 var(--rcx-color-neutral-800-12, rgba(47, 52, 61, 0.12));\n z-index: 2;\n display: flex;\n flex-flow: row nowrap;\n justify-content: space-between;\n align-items: flex-start;\n flex: 0 1 auto;\n box-sizing: border-box;\n padding-top: 14px;\n padding-bottom: 14px;\n padding-block: 14px;\n padding-left: 16px;\n padding-right: 16px;\n padding-inline: 16px;\n color: #2f343d;\n color: var(--rcx-banner-colors-neutral-color, var(--rcx-color-font-default, var(--rcx-color-neutral-800, #2f343d)));\n border-top-width: 0.25rem;\n border-top-style: solid;\n background-color: #f7f8fa;\n background-color: var(--rcx-banner-colors-neutral-background-color, var(--rcx-color-surface-tint, var(--rcx-color-neutral-100, #f7f8fa)));\n font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Helvetica Neue\", \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Meiryo UI\", Arial, sans-serif;\n font-family: var(--rcx-font-family-sans, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Helvetica Neue\", \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Meiryo UI\", Arial, sans-serif);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n.rcx-banner--inline {\n padding-top: 12px;\n padding-bottom: 12px;\n padding-block: 12px;\n}\n.rcx-banner--actionable {\n cursor: pointer;\n}\n.rcx-banner--neutral {\n border-top-color: transparent;\n}\n.rcx-banner--info {\n border-top-color: #095AD2;\n border-top-color: var(--rcx-banner-colors-info-color, var(--rcx-color-status-font-on-info, var(--rcx-color-primary-600, #095AD2)));\n}\n.rcx-banner--warning {\n border-top-color: #8E6300;\n border-top-color: var(--rcx-banner-colors-warning-color, var(--rcx-color-status-font-on-warning, var(--rcx-color-warning-900, #8E6300)));\n}\n.rcx-banner--danger {\n border-top-color: #9B1325;\n border-top-color: var(--rcx-banner-colors-danger-color, var(--rcx-color-status-font-on-danger, var(--rcx-color-danger-800, #9B1325)));\n}\n.rcx-banner--success {\n border-top-color: #148660;\n border-top-color: var(--rcx-banner-colors-success-color, var(--rcx-color-status-font-on-success, var(--rcx-color-success-800, #148660)));\n}\nhtml:not([dir=\"rtl\"]) .rcx-banner__icon {\n padding-right: 12px;\n}\n[dir=\"rtl\"] .rcx-banner__icon {\n padding-left: 12px;\n}\n.rcx-banner__icon {\n padding-top: 8px;\n padding-bottom: 8px;\n padding-block: 8px;\n -webkit-padding-end: 12px;\n padding-inline-end: 12px;\n}\n.rcx-banner__icon--info {\n color: #095AD2;\n color: var(--rcx-banner-colors-info-color, var(--rcx-color-status-font-on-info, var(--rcx-color-primary-600, #095AD2)));\n}\n.rcx-banner__icon--warning {\n color: #8E6300;\n color: var(--rcx-banner-colors-warning-color, var(--rcx-color-status-font-on-warning, var(--rcx-color-warning-900, #8E6300)));\n}\n.rcx-banner__icon--danger {\n color: #9B1325;\n color: var(--rcx-banner-colors-danger-color, var(--rcx-color-status-font-on-danger, var(--rcx-color-danger-800, #9B1325)));\n}\n.rcx-banner__icon--success {\n color: #148660;\n color: var(--rcx-banner-colors-success-color, var(--rcx-color-status-font-on-success, var(--rcx-color-success-800, #148660)));\n}\n.rcx-banner__icon--inline {\n margin-top: -2px;\n margin-bottom: -2px;\n margin-block: -2px;\n padding-top: 0;\n padding-bottom: 0;\n padding-block: 0;\n}\n.rcx-banner__content {\n flex-grow: 1;\n align-self: center;\n letter-spacing: 0rem;\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.25rem;\n}\n.rcx-banner__content--inline {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.rcx-banner__title {\n margin: 0;\n padding: 0;\n letter-spacing: 0rem;\n font-size: 0.875rem;\n font-weight: 700;\n line-height: 1.25rem;\n}\nhtml:not([dir=\"rtl\"]) .rcx-banner__title--inline {\n padding-right: 8px;\n}\n[dir=\"rtl\"] .rcx-banner__title--inline {\n padding-left: 8px;\n}\n.rcx-banner__title--inline {\n display: inline;\n -webkit-padding-end: 8px;\n padding-inline-end: 8px;\n}\n.rcx-banner__close-button {\n padding-top: 6px;\n padding-bottom: 6px;\n padding-block: 6px;\n padding-left: 8px;\n padding-right: 8px;\n padding-inline: 8px;\n}\n.rcx-banner__close-button--inline {\n margin-top: -4px;\n margin-bottom: -4px;\n margin-block: -4px;\n padding-top: 0;\n padding-bottom: 0;\n padding-block: 0;\n}\n.rcx-banner__link {\n padding-left: 10px;\n text-decoration: underline;\n color: inherit;\n}", "",{"version":3,"sources":["webpack://./src/components/Banner/Banner.styles.scss","webpack://./src/styles/mixins/elevation.scss","webpack://./src/styles/typography.scss"],"names":[],"mappings":"AAyCA;EClCI,+EAAA;EAAA,gJAAA;EDqCF,UAAA;EAEA,aAAA;EACA,qBAAA;EACA,8BAAA;EACA,uBAAA;EACA,cAAA;EAEA,sBAAA;EAEA,iBAAA;EAAA,oBAAA;EAAA,mBAAA;EACA,kBAAA;EAAA,mBAAA;EAAA,oBAAA;EAEA,cAjD4B;EAiD5B,mHAjD4B;EAkD5B,yBAAA;EACA,uBAAA;EAEA,yBAjDuC;EAiDvC,yIAjDuC;EAmDvC,gNAAA;EAAA,6OAAA;EACA,mCAAA;EACA,kCAAA;AA/CF;AAiDE;EACE,iBAAA;EAAA,oBAAA;EAAA,mBAAA;AA/CJ;AAkDE;EACE,eAAA;AAhDJ;AAmDE;EACE,6BAAA;AAjDJ;AAoDE;EACE,yBA9DuB;EA8DvB,kIA9DuB;AAY3B;AAqDE;EACE,yBAtD0B;EAsD1B,wIAtD0B;AAG9B;AAsDE;EACE,yBApDyB;EAoDzB,qIApDyB;AAA7B;AAuDE;EACE,yBApE0B;EAoE1B,wIApE0B;AAe9B;AAwDE;EAEE;AAtDJ;AAoDE;EAEE;AAtDJ;AAoDE;EACE,gBAAA;EAAA,mBAAA;EAAA,kBAAA;EACA,yBAAA;UAAA,wBAAA;AAtDJ;AAwDI;EACE,cAlFqB;EAkFrB,uHAlFqB;AA4B3B;AAyDI;EACE,cA1EwB;EA0ExB,6HA1EwB;AAmB9B;AA0DI;EACE,cAxEuB;EAwEvB,0HAxEuB;AAgB7B;AA2DI;EACE,cAxFwB;EAwFxB,6HAxFwB;AA+B9B;AA4DI;EACE,gBAAA;EAAA,mBAAA;EAAA,kBAAA;EACA,cAAA;EAAA,iBAAA;EAAA,gBAAA;AA1DN;AA8DE;EACE,YAAA;EACA,kBAAA;EEpGF,oBAAA;EAEA,mBAAA;EACA,gBAAA;EACA,oBAAA;AFwCF;AA4DI;EE1DF,gBAAA;EAEA,uBAAA;EAKA,mBAAA;AFJF;AA4DE;EACE,SAAA;EACA,UAAA;EE/GF,oBAAA;EAEA,mBAAA;EACA,gBAAA;EACA,oBAAA;AFqDF;AAyDI;EAGE;AAxDN;AAqDI;EAGE;AAxDN;AAqDI;EACE,eAAA;EAEA,wBAAA;UAAA,uBAAA;AAxDN;AA4DE;EACE,gBAAA;EAAA,mBAAA;EAAA,kBAAA;EACA,iBAAA;EAAA,kBAAA;EAAA,mBAAA;AA1DJ;AA4DI;EACE,gBAAA;EAAA,mBAAA;EAAA,kBAAA;EACA,cAAA;EAAA,iBAAA;EAAA,gBAAA;AA1DN;AA8DE;EACE,kBAAA;EAEA,0BAAA;EAEA,cAAA;AA9DJ","sourcesContent":["@use 'sass:map';\n@use '../../styles/functions';\n@use '../../styles/colors.scss';\n@use '../../styles/lengths.scss';\n@use '../../styles/typography.scss';\n@use '../../styles/mixins/elevation.scss';\n\n// neutral\n$banner-colors-neutral-color: functions.theme(\n 'banner-colors-neutral-color',\n colors.font(default)\n);\n$banner-colors-neutral-background-color: functions.theme(\n 'banner-colors-neutral-background-color',\n colors.surface(tint)\n);\n\n// info\n$banner-colors-info-color: functions.theme(\n 'banner-colors-info-color',\n colors.status-font(on-info)\n);\n\n// success\n$banner-colors-success-color: functions.theme(\n 'banner-colors-success-color',\n colors.status-font(on-success)\n);\n\n// warning\n$banner-colors-warning-color: functions.theme(\n 'banner-colors-warning-color',\n colors.status-font(on-warning)\n);\n\n// danger\n$banner-colors-danger-color: functions.theme(\n 'banner-colors-danger-color',\n colors.status-font(on-danger)\n);\n\n.rcx-banner {\n @include elevation.elevation-level(2);\n\n z-index: 2;\n\n display: flex;\n flex-flow: row nowrap;\n justify-content: space-between;\n align-items: flex-start;\n flex: 0 1 auto;\n\n box-sizing: border-box;\n\n padding-block: 14px;\n padding-inline: 16px;\n\n color: $banner-colors-neutral-color;\n border-top-width: lengths.border-width(4);\n border-top-style: solid;\n\n background-color: $banner-colors-neutral-background-color;\n\n font-family: typography.font-family('sans');\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n\n &--inline {\n padding-block: 12px;\n }\n\n &--actionable {\n cursor: pointer;\n }\n\n &--neutral {\n border-top-color: transparent;\n }\n\n &--info {\n border-top-color: $banner-colors-info-color;\n }\n\n &--warning {\n border-top-color: $banner-colors-warning-color;\n }\n\n &--danger {\n border-top-color: $banner-colors-danger-color;\n }\n\n &--success {\n border-top-color: $banner-colors-success-color;\n }\n\n &__icon {\n padding-block: 8px;\n padding-inline-end: 12px;\n\n &--info {\n color: $banner-colors-info-color;\n }\n\n &--warning {\n color: $banner-colors-warning-color;\n }\n\n &--danger {\n color: $banner-colors-danger-color;\n }\n\n &--success {\n color: $banner-colors-success-color;\n }\n\n &--inline {\n margin-block: -2px;\n padding-block: 0;\n }\n }\n\n &__content {\n flex-grow: 1;\n align-self: center;\n\n @include typography.use-font-scale(p2);\n\n &--inline {\n @include typography.use-with-truncated-text;\n }\n }\n\n &__title {\n margin: 0;\n padding: 0;\n @include typography.use-font-scale(h5);\n\n &--inline {\n display: inline;\n\n padding-inline-end: 8px;\n }\n }\n\n &__close-button {\n padding-block: 6px;\n padding-inline: 8px;\n\n &--inline {\n margin-block: -4px;\n padding-block: 0;\n }\n }\n\n &__link {\n padding-left: 10px;\n\n text-decoration: underline;\n\n color: inherit;\n }\n}\n","@use '../colors.scss';\n\n@mixin elevation-level($level) {\n @if $level == 1 {\n box-shadow: 0 0 12px 0 colors.elevation(1);\n }\n @if $level == 2 {\n box-shadow: 0 0 2px 0 colors.elevation('2x'),\n 0 0 12px 0 colors.elevation('2y');\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":""}]);
|
|
3051
3051
|
// Exports
|
|
3052
3052
|
/* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
|
|
3053
3053
|
|