lupine.components 1.1.11 → 1.1.14

package/src/components/text-scale.tsx

@@ -1,42 +1,42 @@
-import { bindGlobalStyle, CssProps } from 'lupine.web';
-
-export type TextScaleProps = {
-  text: string;
-  color?: string;
-  backgroundColor?: string;
-  padding?: string;
-  fontSize?: string;
-  fontWeight?: string;
-};
-export const TextScale = (props: TextScaleProps) => {
-  const css: CssProps = {
-    width: `100%`,
-    height: `100%`,
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    color: props.color || '#22b8ff',
-    fontSize: props.fontSize || '30px',
-    fontWeight: props.fontWeight || '500',
-    '.text-scale': {
-      animation: 'text-scale 1.5s infinite alternate',
-      backgroundColor: props.backgroundColor || '#a1ffe8',
-      padding: props.padding || '10px',
-      borderRadius: '5px',
-    },
-    '@keyframes text-scale': {
-      '0%, 100%': {
-        transform: 'scale(1)',
-      },
-      '40%': {
-        transform: 'scale(0.7)',
-      },
-    },
-  };
-  bindGlobalStyle('text-scale-top', css);
-  return (
-    <div class='text-scale-top'>
-      <div class='text-scale'>{props.text}</div>
-    </div>
-  );
-};
+import { bindGlobalStyle, CssProps } from 'lupine.web';
+
+export type TextScaleProps = {
+  text: string;
+  color?: string;
+  backgroundColor?: string;
+  padding?: string;
+  fontSize?: string;
+  fontWeight?: string;
+};
+export const TextScale = (props: TextScaleProps) => {
+  const css: CssProps = {
+    width: `100%`,
+    height: `100%`,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    color: props.color || '#22b8ff',
+    fontSize: props.fontSize || '30px',
+    fontWeight: props.fontWeight || '500',
+    '.text-scale': {
+      animation: 'text-scale 1.5s infinite alternate',
+      backgroundColor: props.backgroundColor || '#a1ffe8',
+      padding: props.padding || '10px',
+      borderRadius: '5px',
+    },
+    '@keyframes text-scale': {
+      '0%, 100%': {
+        transform: 'scale(1)',
+      },
+      '40%': {
+        transform: 'scale(0.7)',
+      },
+    },
+  };
+  bindGlobalStyle('text-scale-top', css);
+  return (
+    <div class='text-scale-top'>
+      <div class='text-scale'>{props.text}</div>
+    </div>
+  );
+};

package/src/components/text-wave.tsx

@@ -1,55 +1,55 @@
-import { bindGlobalStyle, CssProps } from "lupine.web";
-
-export type TextLoadingProps = {
-  text: string;
-  color?: string;
-  padding?: string;
-  fontSize?: string;
-  fontWeight?: string;
-};
-export const TextWave = (props: TextLoadingProps) => {
-  const cssMap: CssProps = {};
-  props.text.split('').forEach((char, index) => {
-    cssMap[`.span${index}`] = { animationDelay: `${index * 0.1}s` };
-  });
-  const css: CssProps = {
-    width: `100%`,
-    height: `100%`,
-    textAlign: 'center',
-    color: props.color || '#22b8ff',
-    padding: props.padding || '10px',
-    fontSize: props.fontSize || '20px',
-    fontWeight: props.fontWeight,
-    textShadow: '1px -1px #ffffff, -2px 2px #999, -6px 7px 3px #131f5be6',
-    '.text-wave.wave-animetion span': {
-      display: 'inline-block',
-      padding: '0 4px',
-      animation: 'wave-text 1s ease-in-out infinite',
-    },
-    '.text-wave.wave-animetion': {
-      marginTop: '0.6em',
-      ...cssMap,
-    },
-    '@keyframes wave-text': {
-      '0%': {
-        transform: 'translateY(0em)',
-      },
-      '60%': {
-        transform: 'translateY(-0.6em)',
-      },
-      '100%': {
-        transform: 'translateY(0em)',
-      },
-    },
-  };
-  bindGlobalStyle('text-wave-top', css);
-  return (
-    <div class='text-wave-top'>
-      <div class='text-wave wave-animetion'>
-        {props.text.split('').map((char, index) => (
-          <span class={`span${index}`}>{char}</span>
-        ))}
-      </div>
-    </div>
-  );
-};
+import { bindGlobalStyle, CssProps } from 'lupine.web';
+
+export type TextLoadingProps = {
+  text: string;
+  color?: string;
+  padding?: string;
+  fontSize?: string;
+  fontWeight?: string;
+};
+export const TextWave = (props: TextLoadingProps) => {
+  const cssMap: CssProps = {};
+  props.text.split('').forEach((char, index) => {
+    cssMap[`.span${index}`] = { animationDelay: `${index * 0.1}s` };
+  });
+  const css: CssProps = {
+    width: `100%`,
+    height: `100%`,
+    textAlign: 'center',
+    color: props.color || '#22b8ff',
+    padding: props.padding || '10px',
+    fontSize: props.fontSize || '20px',
+    fontWeight: props.fontWeight,
+    textShadow: '1px -1px #ffffff, -2px 2px #999, -6px 7px 3px #131f5be6',
+    '.text-wave.wave-animetion span': {
+      display: 'inline-block',
+      padding: '0 4px',
+      animation: 'wave-text 1s ease-in-out infinite',
+    },
+    '.text-wave.wave-animetion': {
+      marginTop: '0.6em',
+      ...cssMap,
+    },
+    '@keyframes wave-text': {
+      '0%': {
+        transform: 'translateY(0em)',
+      },
+      '60%': {
+        transform: 'translateY(-0.6em)',
+      },
+      '100%': {
+        transform: 'translateY(0em)',
+      },
+    },
+  };
+  bindGlobalStyle('text-wave-top', css);
+  return (
+    <div class='text-wave-top'>
+      <div class='text-wave wave-animetion'>
+        {props.text.split('').map((char, index) => (
+          <span class={`span${index}`}>{char}</span>
+        ))}
+      </div>
+    </div>
+  );
+};

package/src/components/theme-selector.tsx

@@ -1,28 +1,28 @@
-import { CssProps, getCurrentTheme, updateTheme } from 'lupine.web';
-import { PopupMenu } from './popup-menu';
-
-export type ThemeSelectorProps = {
-  className?: string;
-};
-
-export const ThemeSelector = ({ className }: ThemeSelectorProps) => {
-  const css: CssProps = {
-    display: 'flex',
-    flexDirection: 'column',
-    alignSelf: 'end',
-  };
-
-  const handleSelected = (themeName: string) => {
-    updateTheme(themeName);
-  };
-  const currentTheme = getCurrentTheme();
-  const list = [];
-  for (let themeName in currentTheme.themes) {
-    list.push(themeName);
-  }
-  return (
-    <div css={css} class={['theme-switch', className].join(' ')} title='Select theme'>
-      <PopupMenu list={list} defaultValue={currentTheme.themeName} handleSelected={handleSelected}></PopupMenu>
-    </div>
-  );
-};
+import { CssProps, getCurrentTheme, updateTheme } from 'lupine.web';
+import { PopupMenu } from './popup-menu';
+
+export type ThemeSelectorProps = {
+  className?: string;
+};
+
+export const ThemeSelector = ({ className }: ThemeSelectorProps) => {
+  const css: CssProps = {
+    display: 'flex',
+    flexDirection: 'column',
+    alignSelf: 'end',
+  };
+
+  const handleSelected = (themeName: string) => {
+    updateTheme(themeName);
+  };
+  const currentTheme = getCurrentTheme();
+  const list = [];
+  for (let themeName in currentTheme.themes) {
+    list.push(themeName);
+  }
+  return (
+    <div css={css} class={['theme-switch', className].join(' ')} title='Select theme'>
+      <PopupMenu list={list} defaultValue={currentTheme.themeName} handleSelected={handleSelected}></PopupMenu>
+    </div>
+  );
+};