aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src/style
diff options
context:
space:
mode:
authorSteve Klebanoff <steve@0xproject.com>2018-11-09 07:37:56 +0800
committerGitHub <noreply@github.com>2018-11-09 07:37:56 +0800
commit117e2f583ff44bdb63340a2134edea0f3ecb77b3 (patch)
tree9d7552953145bb784c4f6ef32c525b11081e603c /packages/instant/src/style
parentc448a409c1dd7411208aeb577b64ba1246fc03d1 (diff)
downloaddexon-sol-tools-117e2f583ff44bdb63340a2134edea0f3ecb77b3.tar
dexon-sol-tools-117e2f583ff44bdb63340a2134edea0f3ecb77b3.tar.gz
dexon-sol-tools-117e2f583ff44bdb63340a2134edea0f3ecb77b3.tar.bz2
dexon-sol-tools-117e2f583ff44bdb63340a2134edea0f3ecb77b3.tar.lz
dexon-sol-tools-117e2f583ff44bdb63340a2134edea0f3ecb77b3.tar.xz
dexon-sol-tools-117e2f583ff44bdb63340a2134edea0f3ecb77b3.tar.zst
dexon-sol-tools-117e2f583ff44bdb63340a2134edea0f3ecb77b3.zip
[instant] Viewport specific errors (#1228)
feat(instant): Shows different error animation based on viewport
Diffstat (limited to 'packages/instant/src/style')
-rw-r--r--packages/instant/src/style/media.ts38
-rw-r--r--packages/instant/src/style/z_index.ts3
2 files changed, 25 insertions, 16 deletions
diff --git a/packages/instant/src/style/media.ts b/packages/instant/src/style/media.ts
index beabbac46..5e7aaba37 100644
--- a/packages/instant/src/style/media.ts
+++ b/packages/instant/src/style/media.ts
@@ -14,30 +14,38 @@ const generateMediaWrapper = (screenWidth: ScreenWidths) => (...args: any[]) =>
}
`;
-const media = {
+export const media = {
small: generateMediaWrapper(ScreenWidths.Sm),
medium: generateMediaWrapper(ScreenWidths.Md),
large: generateMediaWrapper(ScreenWidths.Lg),
};
-export interface ScreenSpecifications {
- default: string;
- sm?: string;
- md?: string;
- lg?: string;
+export interface ScreenSpecification<T> {
+ default: T;
+ sm?: T;
+ md?: T;
+ lg?: T;
}
-export type MediaChoice = string | ScreenSpecifications;
-export const stylesForMedia = (cssPropertyName: string, choice: MediaChoice): InterpolationValue[] => {
- if (typeof choice === 'string') {
+export type OptionallyScreenSpecific<T> = T | ScreenSpecification<T>;
+export type MediaChoice = OptionallyScreenSpecific<string>;
+/**
+ * Given a css property name and a OptionallyScreenSpecific value,
+ * generates css properties with screen-specific viewport styling
+ */
+export function stylesForMedia<T extends string | number>(
+ cssPropertyName: string,
+ choice: OptionallyScreenSpecific<T>,
+): InterpolationValue[] {
+ if (typeof choice === 'object') {
return css`
- ${cssPropertyName}: ${choice};
- `;
- }
-
- return css`
${cssPropertyName}: ${choice.default};
${choice.lg && media.large`${cssPropertyName}: ${choice.lg}`}
${choice.md && media.medium`${cssPropertyName}: ${choice.md}`}
${choice.sm && media.small`${cssPropertyName}: ${choice.sm}`}
`;
-};
+ } else {
+ return css`
+ ${cssPropertyName}: ${choice};
+ `;
+ }
+}
diff --git a/packages/instant/src/style/z_index.ts b/packages/instant/src/style/z_index.ts
index 727a5189d..03623f044 100644
--- a/packages/instant/src/style/z_index.ts
+++ b/packages/instant/src/style/z_index.ts
@@ -1,5 +1,6 @@
export const zIndex = {
- errorPopup: 1,
+ errorPopBehind: 1,
mainContainer: 2,
panel: 3,
+ errorPopUp: 4,
};