@shopgate/pwa-ui-material 7.30.3 → 7.31.0-alpha.1

package/NavDrawer/components/Item/style.js

@@ -1,49 +0,0 @@
-import { css } from 'glamor';
-import { themeColors } from '@shopgate/pwa-common/helpers/config';
-const srOnly = css({
-  clip: 'rect(1px, 1px, 1px, 1px)',
-  height: '1px',
-  margin: 0,
-  overflow: 'hidden',
-  padding: 0,
-  position: 'absolute',
-  whiteSpace: 'nowrap',
-  width: '1px',
-  zIndex: -1000,
-  ':first-child': {
-    marginTop: 'calc(16px + var(--safe-area-inset-top))'
-  }
-}).toString();
-const button = css({
-  alignItems: 'flex-start',
-  color: 'inherit',
-  display: 'flex',
-  fontWeight: 500,
-  outline: 0,
-  padding: '16px 8px 16px 0',
-  position: 'relative',
-  width: '100%',
-  ':first-child': {
-    paddingTop: 'calc(16px + var(--safe-area-inset-top))'
-  }
-}).toString();
-const label = css({
-  marginTop: 2,
-  textAlign: 'left'
-}).toString();
-const iconWrapper = css({
-  width: 56,
-  flexShrink: 0
-}).toString();
-const icon = css({
-  boxSizing: 'content-box',
-  color: themeColors.gray,
-  padding: '0 32px 0 16px'
-}).toString();
-export default {
-  srOnly,
-  button,
-  label,
-  iconWrapper,
-  icon
-};

package/NavDrawer/components/Title/style.js

@@ -1,8 +0,0 @@
-import { css } from 'glamor';
-import { themeColors } from '@shopgate/pwa-common/helpers/config';
-export default css({
-  color: themeColors.shade11,
-  fontSize: '0.875rem',
-  fontWeight: 500,
-  margin: '16px 0 0 16px'
-});

package/NavDrawer/style.js

@@ -1,26 +0,0 @@
-import { css } from 'glamor';
-import { themeShadows, themeColors } from '@shopgate/pwa-common/helpers/config';
-export const contentStyle = css({
-  fontSize: 14,
-  height: '100%',
-  overflowY: 'scroll',
-  paddingBottom: 'var(--safe-area-inset-bottom)',
-  WebkitOverflowScrolling: 'touch'
-});
-export const drawerStyle = css({
-  background: themeColors.light,
-  boxShadow: themeShadows.navDrawer,
-  color: themeColors.dark,
-  height: '100vh',
-  left: 0,
-  maxWidth: '300px',
-  position: 'fixed',
-  top: 0,
-  transition: 'transform 300ms cubic-bezier(0.25, 0.1, 0.25, 1)',
-  width: '100%',
-  willChange: 'transform',
-  zIndex: 50,
-  '@media(max-width: 480px)': {
-    maxWidth: '67vw'
-  }
-});

package/SnackBar/style.js

@@ -1,64 +0,0 @@
-import { css } from 'glamor';
-import Color from 'color';
-import { themeColors, themeShadows } from '@shopgate/pwa-common/helpers/config';
-const backgroundColor = themeColors.lightDark;
-const buttonColor = themeColors.accent;
-const buttonColorContrast = Color(buttonColor).contrast(Color(backgroundColor));
-// Button color can be anything. Fall back to white if accent is too dark.
-const safeButtonColor = buttonColorContrast > 4 ? buttonColor : themeColors.light;
-const container = css({
-  position: 'fixed',
-  height: 'var(--snack-bar-height, 80px)',
-  bottom: 'max(var(--footer-height), var(--safe-area-inset-bottom))',
-  transition: 'bottom 0.3s ease',
-  overflow: 'hidden',
-  zIndex: 6,
-  width: '100%'
-});
-const wrapper = css({
-  top: 'var(--snack-bar-height, 80px)',
-  display: 'flex',
-  justifyContent: 'center',
-  left: 0,
-  position: 'absolute',
-  width: '100%',
-  zIndex: 6
-});
-const box = css({
-  alignItems: 'center',
-  background: backgroundColor,
-  borderRadius: 3,
-  boxShadow: themeShadows.toast,
-  color: themeColors.light,
-  display: 'flex',
-  fontSize: '0.875rem',
-  justifyContent: 'space-between',
-  letterSpacing: 0.5,
-  margin: 16,
-  maxWidth: 344,
-  minHeight: 48,
-  padding: '6px 16px',
-  width: '100%'
-});
-const label = css({
-  lineHeight: 1.4,
-  margin: '6px 0',
-  overflow: 'hidden'
-}).toString();
-const button = css({
-  color: safeButtonColor,
-  fontWeight: 500,
-  height: 36,
-  letterSpacing: 'inherit',
-  margin: '0 -8px 0 8px',
-  outline: 0,
-  padding: '0 8px',
-  textTransform: 'uppercase'
-});
-export default {
-  container,
-  wrapper,
-  box,
-  label,
-  button
-};