lupine.components 1.1.11 → 1.1.14

package/src/styles/light-themes.ts

@@ -1,106 +1,106 @@
-import { ThemeProps } from 'lupine.web';
-import { sharedThemes } from './shared-themes';
-
-export const lightThemes: ThemeProps = {
-  ...sharedThemes,
-  '--theme-name': 'light',
-
-  // scroll bar
-  '--scrollbar-bg': '#d5d5d5',
-  '--scrollbar-thumb-bg': '#979797',
-  '--scrollbar-active-thumb-bg': '#737373',
-
-  '--primary-color': '#303030',
-  '--primary-color-disabled': '#a0a0a0',
-  '--primary-bg-color': '#ffffff',
-  '--primary-border-color': '#858585',
-  '--primary-border': '1px solid var(--primary-border-color)',
-  '--primary-opacity': 'unset', // used for dark theme
-  '--primary-disabled-opacity': '0.5', // used for dark theme
-  '--primary-accent-color': '#0a74c9', // used for radio and checkbox's background color
-
-  '--secondary-color': '#818181',
-  '--secondary-bg-color': '#eeeeee',
-  '--secondary-border-color': '#a0a0a0',
-  '--secondary-border': '1px solid var(--secondary-border-color)',
-
-  // including menus, tabs, sidebars
-  '--activatable-color-normal': 'var(--primary-color)',
-  '--activatable-bg-color-normal': 'var(--primary-bg-color)',
-  '--activatable-color-hover': '#1d1d1d',
-  '--activatable-bg-color-hover': '#bcbcbc',
-  '--activatable-color-selected': '#2d2d2d',
-  '--activatable-bg-color-selected': '#dcdcdc',
-  // '--menu-color-hover': '#303030',
-  // '--menu-bg-color': '#ffffff',
-  // '--menu-bg-color-hover': '#a0a0a0',
-  '--menu-font-size': '1rem',
-  '--menubar-color': '#eeeeee',
-  '--menubar-bg-color': '#000000',
-  '--menubar-sub-bg-color': '#f9f9f9',
-  '--sidebar-color': 'var(--primary-color)',
-  '--sidebar-bg-color': '#f4f3f4',
-  // '--sidebar-sub-color': 'var(--sidebar-color)',
-  // '--sidebar-sub-bg-color': '#eaeaea',
-  '--sidebar-border': '1px solid #858585',
-  // '--sidebar-hover-color': 'var(--sidebar-color)',
-  // '--sidebar-hover-bg-color': '#e0e0e0',
-
-  '--row-bg-color1': '#ffffff',
-  '--row-bg-color2': '#ffffff',
-
-  '--success-color': '#04AA6D',
-  '--info-color': '#2196F3',
-  '--warning-color': '#ff9800',
-  '--error-color': '#f44336',
-  '--success-bg-color': '#04AA6D',
-  '--info-bg-color': '#2196F3',
-  '--warning-bg-color': '#ff9800',
-  '--error-bg-color': '#f44336',
-  '--notice-color-with-bg': '#ffffff',
-
-  '--cover-mask-bg-color': '#00000060',
-  '--cover-bg-color': '#f5f5f5',
-  // for dropdown-menu
-  '--cover-box-shadow': '3px 3px 8px #767676',
-  // for big block, deeper shadow arround, good for dark theme
-  '--cover-box-shadow-around': '#000000 2px 4px 20px 1px',
-
-  // for input, checkbox, radio box, select
-  '--input-color': '#4e4e4e',
-  '--input-bg-color': '#ffffff',
-  '--input-box-shadow': '0px 0px 0px #000000, 1px 1px 0px 0px #50505045',
-  '--input-border-focus': '1px solid #0074d9',
-
-  // for button, div
-  '--button-color': '#4e4e4e',
-  '--button-bg': '-webkit-linear-gradient(top, #ffffff 0%, #f6f6f6 74%, #ededed 100%)',
-  '--button-bg-hover': '-webkit-linear-gradient(top, #ffffff 0%, #e6e6e6 74%, #dddddd 100%)',
-  '--button-border': '1px solid #f6f6f6',
-  '--button-box-shadow': '1px 1px 1px #00000085, 0px 1px 0px 2px #0705053b',
-
-  '--header-color': '#000080',
-  '--header-bg-color': '#ffffff',
-
-  // for setting-section
-  '--ss-group-color': 'var(--primary-color)',
-  '--ss-group-bg-color': 'var(--activatable-bg-color-selected)',
-  '--ss-row-btn-color': '#eee',
-  '--ss-row-btn-bg-color': '#333',
-  '--ss-row-btn-warn-color': 'red',
-  '--mobile-header-shadow': '0 4px 4px var(--primary-border-color)',
-
-  // '--po-background': '#e5e5e5', //	Background for surfaces on top of primary background
-  // // backgroundSecondary: '#f5f5f5', //	Secondary background
-  // // backgroundOnSecondary: '#e5e5e5', //	Background for surfaces on top of secondary background
-  // '--background-modifier-hover': '', //	Hovered elements
-  // '--background-modifier-active-hover': '', //	Active hovered elements
-  // '--background-modifier-border': '', //	Border color
-  // '--background-modifier-border-hover': '', //	Border color (hover)
-  // '--background-modifier-border-focus': '', //	Border color (focus)
-  // '--background-modifier-error': '', //	Error background
-  // '--background-modifier-error-hover': '', //	Error background (hover)
-  // '--background-modifier-success': '', //	Success background
-  // '--background-modifier-message': '', //	Messages background
-  // '--background-modifier-form-field': '', //	Form field background
-};
+import { ThemeProps } from 'lupine.web';
+import { sharedThemes } from './shared-themes';
+
+export const lightThemes: ThemeProps = {
+  ...sharedThemes,
+  '--theme-name': 'light',
+
+  // scroll bar
+  '--scrollbar-bg': '#d5d5d5',
+  '--scrollbar-thumb-bg': '#979797',
+  '--scrollbar-active-thumb-bg': '#737373',
+
+  '--primary-color': '#303030',
+  '--primary-color-disabled': '#a0a0a0',
+  '--primary-bg-color': '#ffffff',
+  '--primary-border-color': '#858585',
+  '--primary-border': '1px solid var(--primary-border-color)',
+  '--primary-opacity': 'unset', // used for dark theme
+  '--primary-disabled-opacity': '0.5', // used for dark theme
+  '--primary-accent-color': '#0a74c9', // used for radio and checkbox's background color
+
+  '--secondary-color': '#818181',
+  '--secondary-bg-color': '#eeeeee',
+  '--secondary-border-color': '#a0a0a0',
+  '--secondary-border': '1px solid var(--secondary-border-color)',
+
+  // including menus, tabs, sidebars
+  '--activatable-color-normal': 'var(--primary-color)',
+  '--activatable-bg-color-normal': 'var(--primary-bg-color)',
+  '--activatable-color-hover': '#1d1d1d',
+  '--activatable-bg-color-hover': '#bcbcbc',
+  '--activatable-color-selected': '#2d2d2d',
+  '--activatable-bg-color-selected': '#dcdcdc',
+  // '--menu-color-hover': '#303030',
+  // '--menu-bg-color': '#ffffff',
+  // '--menu-bg-color-hover': '#a0a0a0',
+  '--menu-font-size': '1rem',
+  '--menubar-color': '#eeeeee',
+  '--menubar-bg-color': '#000000',
+  '--menubar-sub-bg-color': '#f9f9f9',
+  '--sidebar-color': 'var(--primary-color)',
+  '--sidebar-bg-color': '#f4f3f4',
+  // '--sidebar-sub-color': 'var(--sidebar-color)',
+  // '--sidebar-sub-bg-color': '#eaeaea',
+  '--sidebar-border': '1px solid #858585',
+  // '--sidebar-hover-color': 'var(--sidebar-color)',
+  // '--sidebar-hover-bg-color': '#e0e0e0',
+
+  '--row-bg-color1': '#ffffff',
+  '--row-bg-color2': '#ffffff',
+
+  '--success-color': '#04AA6D',
+  '--info-color': '#2196F3',
+  '--warning-color': '#ff9800',
+  '--error-color': '#f44336',
+  '--success-bg-color': '#04AA6D',
+  '--info-bg-color': '#2196F3',
+  '--warning-bg-color': '#ff9800',
+  '--error-bg-color': '#f44336',
+  '--notice-color-with-bg': '#ffffff',
+
+  '--cover-mask-bg-color': '#00000060',
+  '--cover-bg-color': '#f5f5f5',
+  // for dropdown-menu
+  '--cover-box-shadow': '3px 3px 8px #767676',
+  // for big block, deeper shadow arround, good for dark theme
+  '--cover-box-shadow-around': '#000000 2px 4px 20px 1px',
+
+  // for input, checkbox, radio box, select
+  '--input-color': '#4e4e4e',
+  '--input-bg-color': '#ffffff',
+  '--input-box-shadow': '0px 0px 0px #000000, 1px 1px 0px 0px #50505045',
+  '--input-border-focus': '1px solid #0074d9',
+
+  // for button, div
+  '--button-color': '#4e4e4e',
+  '--button-bg': '-webkit-linear-gradient(top, #ffffff 0%, #f6f6f6 74%, #ededed 100%)',
+  '--button-bg-hover': '-webkit-linear-gradient(top, #ffffff 0%, #e6e6e6 74%, #dddddd 100%)',
+  '--button-border': '1px solid #f6f6f6',
+  '--button-box-shadow': '1px 1px 1px #00000085, 0px 1px 0px 2px #0705053b',
+
+  '--header-color': '#000080',
+  '--header-bg-color': '#ffffff',
+
+  // for setting-section
+  '--ss-group-color': 'var(--primary-color)',
+  '--ss-group-bg-color': 'var(--activatable-bg-color-selected)',
+  '--ss-row-btn-color': '#eee',
+  '--ss-row-btn-bg-color': '#333',
+  '--ss-row-btn-warn-color': 'red',
+  '--mobile-header-shadow': '0 4px 4px var(--primary-border-color)',
+
+  // '--po-background': '#e5e5e5', //	Background for surfaces on top of primary background
+  // // backgroundSecondary: '#f5f5f5', //	Secondary background
+  // // backgroundOnSecondary: '#e5e5e5', //	Background for surfaces on top of secondary background
+  // '--background-modifier-hover': '', //	Hovered elements
+  // '--background-modifier-active-hover': '', //	Active hovered elements
+  // '--background-modifier-border': '', //	Border color
+  // '--background-modifier-border-hover': '', //	Border color (hover)
+  // '--background-modifier-border-focus': '', //	Border color (focus)
+  // '--background-modifier-error': '', //	Error background
+  // '--background-modifier-error-hover': '', //	Error background (hover)
+  // '--background-modifier-success': '', //	Success background
+  // '--background-modifier-message': '', //	Messages background
+  // '--background-modifier-form-field': '', //	Form field background
+};

package/src/styles/media-query.ts

@@ -1,93 +1,93 @@
-// export enum MediaQuery {
-//   ExtraSmall = "@media only screen and (max-width: 480px)",
-//   Mobile = "@media only screen and (min-width: 481px) and (max-width: 767px)",
-//   Tablet = "@media only screen and (min-width: 768px) and (max-width: 991px)",
-//   Desktop = "@media only screen and (min-width: 992px) and (max-width: 1399px)",
-//   ExtraLarge = "@media only screen and (min-width: 1400px)",
-// }
-
-/*
---> Bootstrap – 576px, 768px, 992px, 1200px, 1400px
-Tailwind - 640px, 768px, 1024px, 1280px, 1536px
-Foundation: <640px, ≥640px, ≥1200px
-Bulma: <769px, ≥769px, ≥1024px, ≥1216px, and ≥1408px
-Semantic UI: <768px, ≥768px, ≥992px, ≥1400px, ≥1920px
-Primer: <544px, ≥544px, ≥768px, ≥1012px, ≥1280px
-UIKit: <479px, ≥480px, ≥768px, ≥960px, ≥1200px
-*/
-
-export class MediaQueryMaxWidth {
-  private static _ExtraSmall = '480px';
-  private static _Mobile = '767px'; // Grid: col-1, 12
-  private static _Tablet = '991px'; // Grid: col-1-md, 12-md
-  private static _Desktop = '1399px'; // Grid: col-1-lg, 12-lg
-  public static get ExtraSmallMax() {
-    return MediaQueryMaxWidth._ExtraSmall;
-  }
-  public static get MobileMax() {
-    return MediaQueryMaxWidth._Mobile;
-  }
-  public static get TabletMax() {
-    return MediaQueryMaxWidth._Tablet;
-  }
-  public static get DesktopMax() {
-    return MediaQueryMaxWidth._Desktop;
-  }
-
-  public static set ExtraSmallMax(value: string) {
-    MediaQueryMaxWidth._ExtraSmall = value;
-  }
-  public static set MobileMax(value: string) {
-    MediaQueryMaxWidth._Mobile = value;
-  }
-  public static set TabletMax(value: string) {
-    MediaQueryMaxWidth._Tablet = value;
-  }
-  public static set DesktopMax(value: string) {
-    MediaQueryMaxWidth._Desktop = value;
-  }
-}
-export class MediaQueryRange {
-  public static get ExtraSmallBelow() {
-    return `@media only screen and (max-width: ${MediaQueryMaxWidth.ExtraSmallMax})`;
-  }
-  public static get ExtraSmallAbove() {
-    return `@media only screen and (min-width: ${MediaQueryMaxWidth.ExtraSmallMax})`;
-  }
-  public static get MobileBelow() {
-    return `@media only screen and (max-width: ${MediaQueryMaxWidth.MobileMax})`;
-  }
-  public static get MobileAbove() {
-    return `@media only screen and (min-width: ${MediaQueryMaxWidth.MobileMax})`;
-  }
-  public static get TabletBelow() {
-    return `@media only screen and (max-width: ${MediaQueryMaxWidth.TabletMax})`;
-  }
-  public static get TabletAbove() {
-    return `@media only screen and (min-width: ${MediaQueryMaxWidth.TabletMax})`;
-  }
-  public static get DesktopBelow() {
-    return `@media only screen and (max-width: ${MediaQueryMaxWidth.DesktopMax})`;
-  }
-  public static get DesktopAbove() {
-    return `@media only screen and (min-width: ${MediaQueryMaxWidth.DesktopMax})`;
-  }
-}
-
-export enum MediaQueryDirection {
-  Below,
-  Above,
-}
-export function adjustedMediaQueryRange(
-  direction: MediaQueryDirection,
-  mediaQueryWidth: string,
-  adjustWidth: number
-): string {
-  const adjustedWidth = Number.parseInt(mediaQueryWidth) + adjustWidth;
-  if (direction === MediaQueryDirection.Below) {
-    return `@media only screen and (max-width: ${adjustedWidth}px)`;
-  } else {
-    // if (direction === MediaQueryRangeDirection.Above) {
-    return `@media only screen and (min-width: ${adjustedWidth}px)`;
-  }
-}
+// export enum MediaQuery {
+//   ExtraSmall = "@media only screen and (max-width: 480px)",
+//   Mobile = "@media only screen and (min-width: 481px) and (max-width: 767px)",
+//   Tablet = "@media only screen and (min-width: 768px) and (max-width: 991px)",
+//   Desktop = "@media only screen and (min-width: 992px) and (max-width: 1399px)",
+//   ExtraLarge = "@media only screen and (min-width: 1400px)",
+// }
+
+/*
+--> Bootstrap – 576px, 768px, 992px, 1200px, 1400px
+Tailwind - 640px, 768px, 1024px, 1280px, 1536px
+Foundation: <640px, ≥640px, ≥1200px
+Bulma: <769px, ≥769px, ≥1024px, ≥1216px, and ≥1408px
+Semantic UI: <768px, ≥768px, ≥992px, ≥1400px, ≥1920px
+Primer: <544px, ≥544px, ≥768px, ≥1012px, ≥1280px
+UIKit: <479px, ≥480px, ≥768px, ≥960px, ≥1200px
+*/
+
+export class MediaQueryMaxWidth {
+  private static _ExtraSmall = '480px';
+  private static _Mobile = '767px'; // Grid: col-1, 12
+  private static _Tablet = '991px'; // Grid: col-1-md, 12-md
+  private static _Desktop = '1399px'; // Grid: col-1-lg, 12-lg
+  public static get ExtraSmallMax() {
+    return MediaQueryMaxWidth._ExtraSmall;
+  }
+  public static get MobileMax() {
+    return MediaQueryMaxWidth._Mobile;
+  }
+  public static get TabletMax() {
+    return MediaQueryMaxWidth._Tablet;
+  }
+  public static get DesktopMax() {
+    return MediaQueryMaxWidth._Desktop;
+  }
+
+  public static set ExtraSmallMax(value: string) {
+    MediaQueryMaxWidth._ExtraSmall = value;
+  }
+  public static set MobileMax(value: string) {
+    MediaQueryMaxWidth._Mobile = value;
+  }
+  public static set TabletMax(value: string) {
+    MediaQueryMaxWidth._Tablet = value;
+  }
+  public static set DesktopMax(value: string) {
+    MediaQueryMaxWidth._Desktop = value;
+  }
+}
+export class MediaQueryRange {
+  public static get ExtraSmallBelow() {
+    return `@media only screen and (max-width: ${MediaQueryMaxWidth.ExtraSmallMax})`;
+  }
+  public static get ExtraSmallAbove() {
+    return `@media only screen and (min-width: ${MediaQueryMaxWidth.ExtraSmallMax})`;
+  }
+  public static get MobileBelow() {
+    return `@media only screen and (max-width: ${MediaQueryMaxWidth.MobileMax})`;
+  }
+  public static get MobileAbove() {
+    return `@media only screen and (min-width: ${MediaQueryMaxWidth.MobileMax})`;
+  }
+  public static get TabletBelow() {
+    return `@media only screen and (max-width: ${MediaQueryMaxWidth.TabletMax})`;
+  }
+  public static get TabletAbove() {
+    return `@media only screen and (min-width: ${MediaQueryMaxWidth.TabletMax})`;
+  }
+  public static get DesktopBelow() {
+    return `@media only screen and (max-width: ${MediaQueryMaxWidth.DesktopMax})`;
+  }
+  public static get DesktopAbove() {
+    return `@media only screen and (min-width: ${MediaQueryMaxWidth.DesktopMax})`;
+  }
+}
+
+export enum MediaQueryDirection {
+  Below,
+  Above,
+}
+export function adjustedMediaQueryRange(
+  direction: MediaQueryDirection,
+  mediaQueryWidth: string,
+  adjustWidth: number
+): string {
+  const adjustedWidth = Number.parseInt(mediaQueryWidth) + adjustWidth;
+  if (direction === MediaQueryDirection.Below) {
+    return `@media only screen and (max-width: ${adjustedWidth}px)`;
+  } else {
+    // if (direction === MediaQueryRangeDirection.Above) {
+    return `@media only screen and (min-width: ${adjustedWidth}px)`;
+  }
+}

package/src/styles/shared-themes.ts

@@ -1,57 +1,57 @@
-import { ThemeProps } from "lupine.web";
-
-export const sharedThemes: ThemeProps = {
-  // z-index
-  '--layer-inside': '100', // for inside orders
-  '--layer-cover': '200',
-  '--layer-header-footer': '300',
-  '--layer-sidebar': '400',
-  '--layer-sidebar-sub': '410',
-  '--layer-slider': '500', // screen slider
-  '--layer-modal': '600',
-  '--layer-modal-over': '610',
-  '--layer-float-window': '700',
-  '--layer-actionsheet-window': '710',
-  '--layer-menu': '800', // popup menu
-  '--layer-menu-sub': '810',
-  '--layer-notice': '900', // notice, loading, toast
-  '--layer-tooltip': '2000',
-  '--layer-dragged-item': '2100',
-  '--layer-guide': '2500', // learning guide
-
-  '--font-size-base': '16px',
-  '--font-weight-base': '', //'400',
-  '--font-family-base': 'SimSun, "Microsoft YaHei", Helvetica, Arial, sans-serif',
-  '--line-height-base': '1.1',
-
-  '--font-size-h1-l': '2.5rem', //40px
-  '--font-size-h1': '2rem', //32px
-  '--font-size-h2': '1.5rem', //24px
-  '--font-size-h3': '1.17rem', //18.72px
-  '--font-size-h3-5': '1.08rem', //17.28px
-  '--font-size-h4': '1rem', //16px
-  '--font-size-h4-5': '.91rem', //14.56px
-  '--font-size-h5': '.83rem', //13.28px
-  '--font-size-h6': '.67rem', //10.72px
-  '--font-size-h6-s': '.55rem', //9.28px
-  '--font-size-title': 'var(--font-size-h2)',
-  '--font-size-subtitle': 'var(--font-size-h3-5)',
-  '--font-size-paragraph': 'var(--font-size-h4)',
-  '--font-size-paragraph-s': 'var(--font-size-h5)',
-
-  '--input-height': '2.2rem',
-  '--input-padding': '.3rem .6rem',
-  '--button-height': '2.1rem',
-  '--button-padding': '.3rem .9rem',
-
-  // space for margin, padding
-  '--space-ss': '.15rem',
-  '--space-s': '.25rem',
-  '--space-m': '.5rem',
-  '--space-l': '1rem',
-  '--space-ll': '2rem',
-
-  '--border-radius-s': '2px',
-  '--border-radius-m': '4px',
-  '--border-radius-l': '8px',
-};
+import { ThemeProps } from 'lupine.web';
+
+export const sharedThemes: ThemeProps = {
+  // z-index
+  '--layer-inside': '100', // for inside orders
+  '--layer-cover': '200',
+  '--layer-header-footer': '300',
+  '--layer-sidebar': '400',
+  '--layer-sidebar-sub': '410',
+  '--layer-slider': '500', // screen slider
+  '--layer-modal': '600',
+  '--layer-modal-over': '610',
+  '--layer-float-window': '700',
+  '--layer-actionsheet-window': '710',
+  '--layer-menu': '800', // popup menu
+  '--layer-menu-sub': '810',
+  '--layer-notice': '900', // notice, loading, toast
+  '--layer-tooltip': '2000',
+  '--layer-dragged-item': '2100',
+  '--layer-guide': '2500', // learning guide
+
+  '--font-size-base': '16px',
+  '--font-weight-base': '', //'400',
+  '--font-family-base': 'SimSun, "Microsoft YaHei", Helvetica, Arial, sans-serif',
+  '--line-height-base': '1.1',
+
+  '--font-size-h1-l': '2.5rem', //40px
+  '--font-size-h1': '2rem', //32px
+  '--font-size-h2': '1.5rem', //24px
+  '--font-size-h3': '1.17rem', //18.72px
+  '--font-size-h3-5': '1.08rem', //17.28px
+  '--font-size-h4': '1rem', //16px
+  '--font-size-h4-5': '.91rem', //14.56px
+  '--font-size-h5': '.83rem', //13.28px
+  '--font-size-h6': '.67rem', //10.72px
+  '--font-size-h6-s': '.55rem', //9.28px
+  '--font-size-title': 'var(--font-size-h2)',
+  '--font-size-subtitle': 'var(--font-size-h3-5)',
+  '--font-size-paragraph': 'var(--font-size-h4)',
+  '--font-size-paragraph-s': 'var(--font-size-h5)',
+
+  '--input-height': '2.2rem',
+  '--input-padding': '.3rem .6rem',
+  '--button-height': '2.1rem',
+  '--button-padding': '.3rem .9rem',
+
+  // space for margin, padding
+  '--space-ss': '.15rem',
+  '--space-s': '.25rem',
+  '--space-m': '.5rem',
+  '--space-l': '1rem',
+  '--space-ll': '2rem',
+
+  '--border-radius-s': '2px',
+  '--border-radius-m': '4px',
+  '--border-radius-l': '8px',
+};