@bytebrand/fe-ui-core-autobahn 1.0.1 → 1.0.2

package/compat/IconContainer/IconContainer.styl

@@ -1,23 +1,23 @@
-.Icon
-  display: inline-block
-  background-repeat: no-repeat
-  background-position: center
-  background-size: contain
-  width: 20px
-  height: 20px
-
-.xs
-  width: 9px
-  height: 9px
-
-.sm
-  width: 12px
-  height: 12px
-
-.md
-  width 16px
-  height 16px
-
-.df
-  width 20px
-  height 20px
+.Icon
+  display: inline-block
+  background-repeat: no-repeat
+  background-position: center
+  background-size: contain
+  width: 20px
+  height: 20px
+
+.xs
+  width: 9px
+  height: 9px
+
+.sm
+  width: 12px
+  height: 12px
+
+.md
+  width 16px
+  height 16px
+
+.df
+  width 20px
+  height 20px

package/compat/IconContainer/IconContainer.tsx

@@ -1,34 +1,34 @@
-import * as React from 'react';
-import styles from './IconContainer.styl';
-
-interface IIconProps {
-  children?: any;
-  className?: string;
-  src: string;
-  width?: number;
-  height? : number;
-  size? : string;
-}
-
-class Icon extends React.Component<IIconProps, {}>{
-  static defaultProps = {
-    className: '',
-    size: ''
-  };
-
-  render() : JSX.Element {
-    const { src, height, width, size, className, children } = this.props;
-    const iconSizeClass = `${ size ? styles[size] : '' }`;
-    const classNames = `${styles.Icon} ${iconSizeClass} ${className}`;
-
-    const inlineStyles = {
-      backgroundImage: `${src ? `url(${src})` : 'none'}`,
-      height: `${height}px`,
-      width: `${width}px`
-    };
-
-    return <span className={classNames} style={inlineStyles}>{children}</span>;
-  }
-}
-
-export default Icon;
+import * as React from 'react';
+import styles from './IconContainer.styl';
+
+interface IIconProps {
+  children?: any;
+  className?: string;
+  src: string;
+  width?: number;
+  height? : number;
+  size? : string;
+}
+
+class Icon extends React.Component<IIconProps, {}>{
+  static defaultProps = {
+    className: '',
+    size: ''
+  };
+
+  render() : JSX.Element {
+    const { src, height, width, size, className, children } = this.props;
+    const iconSizeClass = `${ size ? styles[size] : '' }`;
+    const classNames = `${styles.Icon} ${iconSizeClass} ${className}`;
+
+    const inlineStyles = {
+      backgroundImage: `${src ? `url(${src})` : 'none'}`,
+      height: `${height}px`,
+      width: `${width}px`
+    };
+
+    return <span className={classNames} style={inlineStyles}>{children}</span>;
+  }
+}
+
+export default Icon;

package/compat/Image/Image.styl

@@ -1,109 +1,109 @@
-.container
-  position: relative
-  width: auto
-  height: auto
-  background-color: #F5F5F5
-  box-shadow: 0 0 0 1px rgba(lightgray, 50%)
-  overflow: hidden
-  box-sizing: border-box
-
-  &.loaded
-    box-shadow: none
-
-.loader
-  position: absolute
-  top: 50%
-  left: 50%
-  transform: translateX(-50%)
-  color: #333
-
-.image
-  display: block
-  max-width 100%
-  max-height: 100%
-  position: absolute
-  top: 50%
-  left: 50%
-  transform: translate(-50%, -50%)
-
-  &.withAnimation
-    opacity: 0
-
-    &.image.wh,
-    &.image.ww
-      animation-name: auto_de_fadeIn
-      animation-duration: 0.2s
-      animation-fill-mode: forwards
-
-.imageSmall
-  opacity: 0
-
-.image.ww
-  width: 100%
-  height: auto
-
-.image.wh
-  width: auto
-  height: 100%
-
-.reload
-  position: absolute
-  top: 50%
-  left: 50%
-  padding-top: 35px
-  transform: translate(-50%, -50%)
-  cursor: pointer
-  display: block
-
-.reload::before
-  content: ''
-  position: absolute
-  display: block
-  width: 30px
-  height: 30px
-  top: 0
-  left: 50%
-  margin-left: -15px
-
-  background-image: url('../../media/images/refresh-button.svg')
-  background-repeat: no-repeat
-  background-position: center
-  background-size: contain
-  transition: all 0.2s ease-in-out
-  transform: rotate(0)
-
-.reload:hover::before
-  transform: rotate(360deg)
-
-.preloadImageWrapper
-  position: absolute
-  top: 50%
-  left: 50%
-  transform: translate(-50%, -50%)
-  filter: blur(3px)
-  width: 100%
-  height: 100%;
-  background-size: contain
-  background-repeat: no-repeat
-  background-position: 50% 50%
-
-
-.largeImage
-  animation-name: auto_de_fadeIn
-  animation-duration: 2s
-  animation-fill-mode: forwards
-  pointer-events: none
-
-  &.withAnimation
-    opacity: 0
-
-    &.image.wh,
-    &.image.ww
-      animation-name: auto_de_fadeIn
-      animation-duration: 0.2s
-      animation-fill-mode: forwards
-
-@keyframes auto_de_fadeIn {
-  from { opacity: 0 }
-  to   { opacity: 1 }
-}
+.container
+  position: relative
+  width: auto
+  height: auto
+  background-color: #F5F5F5
+  box-shadow: 0 0 0 1px rgba(lightgray, 50%)
+  overflow: hidden
+  box-sizing: border-box
+
+  &.loaded
+    box-shadow: none
+
+.loader
+  position: absolute
+  top: 50%
+  left: 50%
+  transform: translateX(-50%)
+  color: #333
+
+.image
+  display: block
+  max-width 100%
+  max-height: 100%
+  position: absolute
+  top: 50%
+  left: 50%
+  transform: translate(-50%, -50%)
+
+  &.withAnimation
+    opacity: 0
+
+    &.image.wh,
+    &.image.ww
+      animation-name: auto_de_fadeIn
+      animation-duration: 0.2s
+      animation-fill-mode: forwards
+
+.imageSmall
+  opacity: 0
+
+.image.ww
+  width: 100%
+  height: auto
+
+.image.wh
+  width: auto
+  height: 100%
+
+.reload
+  position: absolute
+  top: 50%
+  left: 50%
+  padding-top: 35px
+  transform: translate(-50%, -50%)
+  cursor: pointer
+  display: block
+
+.reload::before
+  content: ''
+  position: absolute
+  display: block
+  width: 30px
+  height: 30px
+  top: 0
+  left: 50%
+  margin-left: -15px
+
+  background-image: url('../../media/images/refresh-button.svg')
+  background-repeat: no-repeat
+  background-position: center
+  background-size: contain
+  transition: all 0.2s ease-in-out
+  transform: rotate(0)
+
+.reload:hover::before
+  transform: rotate(360deg)
+
+.preloadImageWrapper
+  position: absolute
+  top: 50%
+  left: 50%
+  transform: translate(-50%, -50%)
+  filter: blur(3px)
+  width: 100%
+  height: 100%;
+  background-size: contain
+  background-repeat: no-repeat
+  background-position: 50% 50%
+
+
+.largeImage
+  animation-name: auto_de_fadeIn
+  animation-duration: 2s
+  animation-fill-mode: forwards
+  pointer-events: none
+
+  &.withAnimation
+    opacity: 0
+
+    &.image.wh,
+    &.image.ww
+      animation-name: auto_de_fadeIn
+      animation-duration: 0.2s
+      animation-fill-mode: forwards
+
+@keyframes auto_de_fadeIn {
+  from { opacity: 0 }
+  to   { opacity: 1 }
+}