react-ui-basics 0.0.175 → 0.0.178

package/src/Scrollable.js

@@ -0,0 +1,388 @@
+import ReactConstants from "./../ReactConstants";
+import {clientHeight as __clientHeight, clientWidth as __clientWidth, createAccessor as __createAccessor, data as __data, height as __height, left as __left, length as __length, pageX as __pageX, pageY as __pageY, props as __props, scrollLeft as __scrollLeft, scrollTop as __scrollTop, state as __state, style as __style, target as __target, top as __top, value as __value, width as __width} from "./../CommonFields";
+import React from 'react';
+import {toConsumableArray as __toConsumableArray} from "./../_virtual/_rollupPluginBabelHelpers";
+import {extends as __extends} from "./../_virtual/_rollupPluginBabelHelpers";
+import {inherits as __inherits} from "./../_virtual/_rollupPluginBabelHelpers";
+import './Scrollable.css';
+import ReactCreateElement from './ReactCreateElement';
+import PropTypes from 'prop-types';
+import './Scrollable.css'
+import {classNames, preventDefault, WINDOW, addEventListener, removeEventListener, setTimeout, clearTimeout, setInterval, clearInterval, createRef, orNoop, NOOP} from "./Tools";
+import {propsGetter, stateGS, PureComponent, render, componentDidMount, componentDidUpdate, componentWillUnmount} from "./ReactConstants";
+
+export const SCROLLBAR_MODE_HIDDEN = 'hidden';
+export const SCROLLBAR_MODE_VISIBLE = 'visible';
+export const SCROLLBAR_MODE_AUTO = 'auto';
+
+let NATIVE_SCROLL_WIDTH = -1;
+let NATIVE_SCROLL_HEIGHT = -1;
+
+const WITHOUT_SCROLL = 'without-scroll';
+const WITH_SCROLL = 'with-scroll';
+
+const createFieldGetter = field => el => el[field];
+const scrollHeightOf = createFieldGetter('scrollHeight');
+const scrollWidthOf = createFieldGetter('scrollWidth');
+const offsetHeightOf = createFieldGetter('offsetHeight');
+const offsetWidthOf = createFieldGetter('offsetWidth');
+const styleOf = createFieldGetter('style');
+const scrollBarModeOf = createFieldGetter('scrollBarMode');
+const onScroll = createFieldGetter('onScroll');
+const horizontalScrollBarModeOf = createFieldGetter('horizontalScrollBarMode');
+
+class Scrollable extends PureComponent {
+
+    constructor(properties) {
+        super(properties);
+        const that = this;
+        that.state = {};
+
+        const props = propsGetter(that);
+        const status = stateGS(that);
+        const statusH = stateGS(that);
+
+        const containerRef = createRef();
+        const viewportRef = createRef();
+        const scrollbarRef = createRef();
+        const horizontalScrollbarRef = createRef();
+        const thumbRef = createRef();
+        const horizontalThumbRef = createRef();
+
+        let resizeInterval;
+        let initTimeout;
+
+        const clear = () => {
+            clearInterval(resizeInterval);
+            clearTimeout(initTimeout);
+        };
+
+        const init = () => {
+            clear();
+
+            if (scrollBarModeOf(props()) === SCROLLBAR_MODE_HIDDEN && horizontalScrollBarModeOf(props()) === SCROLLBAR_MODE_HIDDEN) {
+                status(WITHOUT_SCROLL);
+                statusH(WITHOUT_SCROLL);
+                return;
+            }
+
+            const viewport = viewportRef();
+            const scrollbar = scrollbarRef();
+            const scrollbarH = horizontalScrollbarRef();
+            const container = containerRef();
+            const thumb = thumbRef();
+            const thumbH = horizontalThumbRef();
+
+            let scrolling = false;
+            let scrolledToBottom = false;
+            let scrolledToTop = false;
+            let adjustedScrollWidth = false;
+            let lastY = 0;
+            let lastX = 0;
+            let ratio = 0;
+            let ratioH = 0;
+            const onScrollListener = onScroll(props())
+
+            viewport.onscroll = (e) => {
+                const scrollHeight = scrollHeightOf(viewport);
+                const offsetHeight = offsetHeightOf(viewport);
+                const scrollWidth = scrollWidthOf(viewport);
+                const offsetWidth = offsetWidthOf(viewport);
+                const scrollbarHeight = offsetHeightOf(scrollbar);
+                const scrollbarWidth = offsetWidthOf(scrollbarH);
+                let position = __scrollTop(viewport) / (scrollHeight - offsetHeight);
+                const positionH = __scrollLeft(viewport) / (scrollWidth - offsetWidth);
+
+                if (position > 1) {
+                    viewport.scrollTop = scrollHeight - offsetHeight;
+                    position = 1
+                }
+
+                styleOf(thumb).top = (position * (scrollbarHeight - offsetHeightOf(thumb))) + 'px';
+                styleOf(thumbH).left = (positionH * (scrollbarWidth - offsetWidthOf(thumbH))) + 'px';
+
+                if (position >= 0.98) {
+                    !scrolledToBottom && orNoop(props().onScrolledToBottom)();
+                    scrolledToBottom = true;
+                } else {
+                    scrolledToBottom = false;
+                }
+
+                if (position <= 0.02) {
+                    !scrolledToTop && orNoop(props().onScrolledToTop)();
+                    scrolledToTop = true;
+                } else {
+                    scrolledToTop = false;
+                }
+
+                onScrollListener && onScrollListener(e)
+            };
+            const reset = () => {
+                removeEventListener(WINDOW, 'mouseup', reset);
+                removeEventListener(WINDOW, 'mousemove', moveListener);
+                __style(viewport).scrollBehavior = ''
+                scrolling = false;
+            };
+            const moveListener = (e) => {
+                if (!scrolling)
+                    return;
+
+                if (scrolling === 'v') {
+                    viewport.scrollTop += (e.clientY - lastY) * ratio;
+                    lastY = e.clientY;
+                } else if (scrolling === 'h') {
+                    viewport.scrollLeft += (e.clientX - lastX) * ratioH;
+                    lastX = e.clientX;
+                }
+            };
+            thumb.onmousedown = (e) => {
+                lastY = e.clientY;
+                scrolling = 'v';
+                ratio = scrollHeightOf(viewport) / offsetHeightOf(viewport);
+                __style(viewport).scrollBehavior = 'unset'
+
+                addEventListener(WINDOW, 'mouseup', reset);
+                addEventListener(WINDOW, 'mousemove', moveListener);
+            };
+            thumb.ondragstart = preventDefault;
+            thumb.onmouseup = reset;
+
+            thumbH.onmousedown = (e) => {
+                lastX = e.clientX;
+                scrolling = 'h';
+                ratioH = scrollWidthOf(viewport) / offsetWidthOf(viewport);
+                __style(viewport).scrollBehavior = 'unset'
+
+                addEventListener(WINDOW, 'mouseup', reset);
+                addEventListener(WINDOW, 'mousemove', moveListener);
+            };
+            thumbH.ondragstart = preventDefault;
+            thumbH.onmouseup = reset;
+
+            scrollbar.onclick = (e) => {
+                if (__target(e) === scrollbar) {
+                    let thumbPosition = parseInt(__top(styleOf(thumb)));
+                    viewport.scrollTop += offsetHeightOf(viewport) * 0.9 * (e.offsetY < thumbPosition ? -1 : 1);
+                }
+            };
+            scrollbarH.onclick = (e) => {
+                if (__target(e) === scrollbarH) {
+                    let thumbPosition = parseInt(__left(styleOf(thumbH)));
+                    viewport.scrollLeft += offsetWidthOf(viewport) * 0.9 * (e.offsetX < thumbPosition ? -1 : 1);
+                }
+            };
+
+            const adjustScrollWidth = () => {
+                if (NATIVE_SCROLL_WIDTH < 0) {
+                    NATIVE_SCROLL_WIDTH = viewport.offsetWidth - __clientWidth(viewport);
+                    if (NATIVE_SCROLL_WIDTH === 0 && scrollHeightOf(viewport) !== offsetHeightOf(viewport)) {
+                        NATIVE_SCROLL_WIDTH = -1;
+                    }
+                }
+                if (NATIVE_SCROLL_HEIGHT < 0) {
+                    NATIVE_SCROLL_HEIGHT = viewport.offsetHeight - __clientHeight(viewport);
+                    if (NATIVE_SCROLL_HEIGHT === 0 && scrollWidthOf(viewport) !== offsetWidthOf(viewport)) {
+                        NATIVE_SCROLL_HEIGHT = -1;
+                    }
+                }
+
+                if (!adjustedScrollWidth) {
+                    if (NATIVE_SCROLL_WIDTH >= 0 && status() !== WITHOUT_SCROLL) {
+                        styleOf(viewport).paddingRight = (NATIVE_SCROLL_WIDTH) + __clientWidth(scrollbar) + 'px';
+                        styleOf(viewport).marginRight = -(NATIVE_SCROLL_WIDTH) - __clientWidth(scrollbar) + 'px';
+                    }
+                    if (NATIVE_SCROLL_HEIGHT >= 0 && statusH() !== WITHOUT_SCROLL) {
+                        styleOf(viewport).paddingBottom = (NATIVE_SCROLL_HEIGHT) + __clientHeight(scrollbarH) + 'px';
+                        styleOf(viewport).marginBottom = -(NATIVE_SCROLL_HEIGHT) - __clientHeight(scrollbarH) + 'px';
+                    }
+                    adjustedScrollWidth = true;
+                }
+            };
+
+            adjustScrollWidth();
+
+            const showScrollbar = (scrollbar, viewport, adjustScrollWidth) => {
+                styleOf(scrollbar).visibility = 'inherit';
+                styleOf(scrollbar).bottom = '0'; //enable scrollbar
+                styleOf(viewport).overflowY = '';
+                adjustScrollWidth();
+                status() !== WITH_SCROLL && status(WITH_SCROLL);
+            };
+
+            const hideScrollbar = (scrollbar, viewport) => {
+                styleOf(scrollbar).visibility = 'hidden'; //disable scrollbar
+                styleOf(viewport).overflowY = 'inherit';
+                styleOf(viewport).paddingRight = '0';
+                styleOf(viewport).marginRight = '0';
+                status() !== WITHOUT_SCROLL && status(WITHOUT_SCROLL);
+            };
+
+            const showHorizontalScrollbar = (scrollbar, viewport, adjustScrollWidth) => {
+                styleOf(scrollbar).visibility = 'inherit';
+                styleOf(scrollbar).right = '0'; //enable scrollbar
+                styleOf(viewport).overflowX = '';
+                adjustScrollWidth();
+                statusH() !== WITH_SCROLL && statusH(WITH_SCROLL);
+            };
+
+            const hideHorizontalScrollbar = (scrollbar, viewport) => {
+                styleOf(scrollbar).visibility = 'hidden'; //disable scrollbar
+                styleOf(viewport).overflowX = 'inherit';
+                styleOf(viewport).paddingBottom = '0';
+                styleOf(viewport).marginBottom = '0';
+                statusH() !== WITHOUT_SCROLL && statusH(WITHOUT_SCROLL);
+            };
+
+            const updateVerticalScrollbar = () => {
+                const scrollHeight = scrollHeightOf(viewport);
+                const scrollbarHeight = offsetHeightOf(scrollbar);
+
+                !adjustedScrollWidth && adjustScrollWidth();
+
+                const newRatio = scrollHeight / scrollbarHeight;
+                if ((ratio === newRatio && Number.isFinite(newRatio)) || Number.isNaN(newRatio)) return;
+
+                const offsetHeight = offsetHeightOf(viewport);
+                const horizontalScrollBarOffset = statusH() !== WITHOUT_SCROLL ? __clientHeight(scrollbarH) + Math.max(NATIVE_SCROLL_HEIGHT, 0) : 0;
+
+                let containerOffsetHeight = offsetHeightOf(container) + horizontalScrollBarOffset;
+                if (containerOffsetHeight === scrollHeight && status() === WITHOUT_SCROLL)
+                    return;
+
+                if (props().autoScrollTop && scrollHeight - offsetHeight - __scrollTop(viewport) <= 20 && newRatio < ratio && Number.isFinite(newRatio) && Number.isFinite(ratio)) {
+                    viewport.scrollTop = 0; // scroll to top if scrollbar gets smaller
+                }
+
+                ratio = newRatio;
+                styleOf(thumb).height = (scrollbarHeight / newRatio) + 'px';
+
+                styleOf(container).height = scrollHeight - horizontalScrollBarOffset + 'px';
+                containerOffsetHeight = offsetHeightOf(container) + horizontalScrollBarOffset;
+
+                if (scrollBarModeOf(props()) === SCROLLBAR_MODE_HIDDEN) {
+                    if (status() !== WITHOUT_SCROLL)
+                        hideScrollbar(scrollbar, viewport);
+
+                    return
+                }
+
+                if (containerOffsetHeight < scrollHeight) {
+                    adjustedScrollWidth = false;
+                    showScrollbar(scrollbar, viewport, adjustScrollWidth);
+                } else {
+                    hideScrollbar(scrollbar, viewport);
+                }
+
+                scrolledToBottom = false;
+                scrolledToTop = false;
+
+                const position = __scrollTop(viewport) / (scrollHeight - offsetHeight);
+                styleOf(thumb).top = (position * (scrollbarHeight - offsetHeightOf(thumb))) + 'px';
+            };
+
+            const updateHorizontalScrollbar = () => {
+
+                const scrollWidth = scrollWidthOf(viewport);
+                const scrollbarWidth = offsetWidthOf(scrollbarH);
+
+                !adjustedScrollWidth && adjustScrollWidth();
+
+                const newRatio = scrollWidth / scrollbarWidth;
+                if ((ratioH === newRatio && Number.isFinite(newRatio)) || Number.isNaN(newRatio)) return;
+
+                const offsetWidth = offsetWidthOf(viewport);
+
+                const verticalScrollBarOffset = status() !== WITHOUT_SCROLL ? __clientWidth(scrollbar) + Math.max(NATIVE_SCROLL_WIDTH, 0) : 0;
+                let containerOffsetWidth = offsetWidthOf(container) + verticalScrollBarOffset;
+
+                if (containerOffsetWidth === scrollWidth && statusH() === WITHOUT_SCROLL)
+                    return;
+
+                ratioH = newRatio;
+                styleOf(thumbH).width = (scrollbarWidth / newRatio) + 'px';
+
+
+                if (horizontalScrollBarModeOf(props()) === SCROLLBAR_MODE_HIDDEN) {
+                    if (statusH() !== WITHOUT_SCROLL)
+                        hideHorizontalScrollbar(scrollbarH, viewport);
+
+                    return
+                }
+
+                styleOf(container).width = (scrollWidth - verticalScrollBarOffset) + 'px';
+                containerOffsetWidth = offsetWidthOf(container) + verticalScrollBarOffset;
+
+                if (containerOffsetWidth < scrollWidth) {
+                    adjustedScrollWidth = false;
+                    showHorizontalScrollbar(scrollbarH, viewport, adjustScrollWidth);
+                } else {
+                    hideHorizontalScrollbar(scrollbarH, viewport);
+                }
+
+                const position = __scrollLeft(viewport) / (scrollWidth - offsetWidth);
+                styleOf(thumbH).left = (position * (scrollbarWidth - offsetWidthOf(thumbH))) + 'px';
+            };
+
+            initTimeout = setTimeout(() => {
+                resizeInterval = setInterval(() => {
+                    updateVerticalScrollbar();
+                    updateHorizontalScrollbar();
+                }, 50);
+            }, 200)
+        };
+
+        that[ReactConstants[0]] = init;
+        that[ReactConstants[1]] = clear;
+
+        that[ReactConstants[2]] = (prevProps) => {
+            if (scrollBarModeOf(props()) !== scrollBarModeOf(prevProps))
+                init();
+            else if (onScroll(props()) !== onScroll(prevProps))
+                init();
+        };
+
+        that.setScroll = (y) => {
+            viewportRef().scrollTop = y
+        };
+        that.getScroll = () => __scrollTop(viewportRef());
+        that.getScrollHeight = () => scrollHeightOf(viewportRef());
+        that.getHeight = () => __clientHeight(containerRef());
+
+        that[ReactConstants[3]] = () => {
+            const _props = props();
+            const {className, children} = _props;
+            return (
+                <div className={classNames('Scrollable', className, status() || WITH_SCROLL, statusH() + '-horizontal')} style={styleOf(_props)} ref={containerRef}>
+                    <div className="viewport" ref={viewportRef}>
+                        {children}
+                    </div>
+                    <div className={classNames('scrollbar', scrollBarModeOf(_props) || SCROLLBAR_MODE_AUTO)} ref={scrollbarRef}>
+                        <div className="thumb" ref={thumbRef}/>
+                    </div>
+                    <div className={classNames('scrollbar horizontal', horizontalScrollBarModeOf(_props))} ref={horizontalScrollbarRef}>
+                        <div className="thumb" ref={horizontalThumbRef}/>
+                    </div>
+                </div>
+            )
+        };
+    }
+}
+
+export default Scrollable
+
+Scrollable.defaultProps = {
+    autoScrollTop: true,
+    horizontalScrollBarMode: SCROLLBAR_MODE_HIDDEN
+};
+
+if (process.env.NODE_ENV !== 'production') {
+    Scrollable.propTypes = {
+        scrollBarMode: PropTypes.oneOf([SCROLLBAR_MODE_AUTO, SCROLLBAR_MODE_HIDDEN, SCROLLBAR_MODE_VISIBLE]),
+        horizontalScrollBarMode: PropTypes.oneOf([SCROLLBAR_MODE_AUTO, SCROLLBAR_MODE_HIDDEN, SCROLLBAR_MODE_VISIBLE]),
+        [ReactConstants[5]]: PropTypes.string,
+        style: PropTypes.object,
+        onScrolledToBottom: PropTypes.func,
+        onScrolledToTop: PropTypes.func,
+        autoScrollTop: PropTypes.bool,
+    }
+}

package/src/Scrollable.scss

@@ -0,0 +1,100 @@
+.Scrollable {
+  max-height: 250px;
+  max-width: 250px;
+  padding-right: 5px;
+  position: relative;
+  display: flex;
+  flex-flow: column;
+  align-items: stretch;
+  overflow: hidden;
+
+  &:hover > .scrollbar.auto {
+    transition-delay: 0s;
+    opacity: 1;
+  }
+
+  .viewport {
+    overflow-y: scroll;
+    overflow-x: scroll;
+    max-height: 100%;
+    scroll-behavior: smooth;
+
+    scrollbar-width: none;
+
+    //force hide scrollbar for mac-os
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  &.with-scroll {
+  }
+
+  &.without-scroll-horizontal {
+    max-width: unset;
+  }
+
+  &.without-scroll {
+    padding-right: 0;
+    max-height: unset;
+
+    > .viewport {
+      padding-right: 0;
+      margin-right: 0;
+    }
+
+    > .scrollbar {
+      visibility: hidden;
+    }
+  }
+
+  .scrollbar {
+    position: absolute;
+    right: 0px;
+    top: 0px;
+    width: 5px;
+    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    transition-delay: 0.5s;
+    z-index: 1;
+
+    &.auto, &.hidden {
+      opacity: 0;
+    }
+
+    .thumb {
+      background-color: rgba(0, 0, 0, 0.3);
+      width: 5px;
+      position: absolute;
+      right: 0px;
+      top: 0px;
+      user-select: none;
+      will-change: top;
+      border-radius: 2px;
+
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.5);
+      }
+
+      &:active {
+        background-color: rgba(0, 0, 0, 0.7);
+      }
+    }
+  }
+
+  .scrollbar.horizontal {
+    left: 0px;
+    right: 0px;
+    height: 5px;
+    bottom: 0;
+
+    width: unset;
+    top: unset;
+
+    .thumb {
+      height: 5px;
+      left: 0px;
+      bottom: 0px;
+      will-change: left;
+    }
+  }
+}

package/src/ScrollableTable.css

@@ -0,0 +1,6 @@
+.ScrollableTable .Scrollable .scrollbar {
+  top: 56px;
+}
+.ScrollableTable .Table {
+  position: static;
+}

package/src/ScrollableTable.scss

@@ -0,0 +1,12 @@
+.ScrollableTable {
+
+  .Scrollable {
+    .scrollbar {
+      top: 56px;
+    }
+  }
+
+  .Table {
+    position: static;
+  }
+}

package/src/ScrollableTable.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import Table, {TableProps, TableState} from "./Table";
+import Scrollable from "./Scrollable";
+import "./ScrollableTable.css";
+import {props, render, PureComponent} from "./ReactConstants";
+import {createRef} from "./Tools";
+
+export interface WithScrollable {
+    getScrollable: () => Scrollable
+}
+
+export interface ScrollableTableProps<T> extends TableProps<T> {
+    scrollableProps?: any
+}
+
+class ScrollableTable<T> extends PureComponent<ScrollableTableProps<T>, TableState<T>> implements WithScrollable {
+
+    constructor(properties) {
+        super(properties);
+        const that = this;
+
+        const scrollableRef = createRef();
+
+        that[render] = () => {
+            return <div className={`ScrollableTable`}>
+                <Scrollable ref={scrollableRef} {...props(that).scrollableProps}>
+                    <Table {...props(that)}/>
+                </Scrollable>
+            </div>;
+        }
+        that.getScrollable = () => scrollableRef()
+    }
+
+    getScrollable(): Scrollable {
+        return undefined;
+    }
+}
+
+export default ScrollableTable

package/src/Size.js

@@ -0,0 +1,56 @@
+import ReactConstants from "./../ReactConstants";
+import {clientHeight as __clientHeight, clientWidth as __clientWidth, createAccessor as __createAccessor, data as __data, height as __height, left as __left, length as __length, pageX as __pageX, pageY as __pageY, props as __props, scrollLeft as __scrollLeft, scrollTop as __scrollTop, state as __state, style as __style, target as __target, top as __top, value as __value, width as __width} from "./../CommonFields";
+import React from 'react';
+import {toConsumableArray as __toConsumableArray} from "./../_virtual/_rollupPluginBabelHelpers";
+import {extends as __extends} from "./../_virtual/_rollupPluginBabelHelpers";
+import {inherits as __inherits} from "./../_virtual/_rollupPluginBabelHelpers";
+import ReactCreateElement from './ReactCreateElement';
+import {isUndefined} from "./Tools";
+
+const Size = ({value}) => (
+    <span className="Size">
+        {formatNumber(value, 1)}&nbsp;{formatAbbreviation(value)}
+    </span>
+);
+
+export const formatNumberWithMaxLength = (size, fractionalLength, toAbbreviation, maxLength) => {
+    let result;
+    if (isUndefined(fractionalLength))
+        fractionalLength = 1;
+    if (isUndefined(maxLength))
+        maxLength = -1;
+
+    do {
+        result = formatNumber(size, fractionalLength, toAbbreviation);
+        fractionalLength--;
+    } while (maxLength !== -1 && fractionalLength >= 0 && __length(result) > maxLength);
+    return result;
+};
+
+function formatNumber(size, fractionalLength, toAbbreviation) {
+    if (size < 1000 && !toAbbreviation || toAbbreviation === 'B')
+        return size + '';
+    size /= 1024;
+    if (size < 1000 && !toAbbreviation || toAbbreviation === 'KB')
+        return size.toFixed(fractionalLength);
+    size /= 1024;
+    if (size < 1000 && !toAbbreviation || toAbbreviation === 'MB')
+        return size.toFixed(fractionalLength);
+    size /= 1024;
+    return size.toFixed(fractionalLength);
+};
+
+export const formatAbbreviation = (size) => {
+    if (size < 1000)
+        return 'B';
+    size /= 1024;
+    if (size < 1000)
+        return 'KB';
+    size /= 1024;
+    if (size < 1000)
+        return 'MB';
+    size /= 1024;
+    return 'GB';
+};
+
+export default Size

package/src/Snackbar.css

@@ -0,0 +1,40 @@
+.Snackbar {
+  transform: translateX(-50%);
+  overflow: hidden;
+  background-color: #323232;
+  padding: 14px 24px 14px 24px;
+  color: #fff;
+  min-width: 288px;
+  max-width: 568px;
+  position: fixed;
+  bottom: -50px;
+  left: 50%;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  opacity: 0;
+  transition: bottom 0.25s ease, opacity 0.2s ease;
+  border-radius: 4px;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+}
+.Snackbar.shown {
+  bottom: 15px;
+  opacity: 1;
+}
+.Snackbar .message {
+  overflow: hidden;
+  line-height: 1.2em;
+  min-height: 1.2em;
+  max-height: 2.4em;
+  flex: 1;
+}
+.Snackbar .action {
+  text-transform: uppercase;
+  font-weight: bold;
+  margin-left: 48px;
+  color: #bf3727;
+}
+.Snackbar .action a {
+  text-decoration: none;
+  color: #bf3727;
+}