nitro-web 0.0.16 → 0.0.18

package/_example/client/css/index.css

@@ -26,7 +26,7 @@
     @apply text-dark mb-2 text-sm font-bold;
   }
   label, .label {
-    @apply text-sm-label font-medium;
+    @apply text-sm font-medium;
   }
 }
 

package/_example/client/index.ts

@@ -1,4 +1,3 @@
-
 import 'nitro-web/client/globals'
 import { setupApp } from 'nitro-web'
 
@@ -6,5 +5,5 @@ import './css/index.css'
 import config from './config'
 import { Layout1, Layout2 } from '../components/partials/layouts'
 
-// Auto-import page components, initilize app, and run config.beforeApp
+// Auto-import page components, initialise app, and run config.beforeApp
 setupApp(config, [Layout1, Layout2])

package/_example/tailwind.config.js

@@ -4,6 +4,7 @@ import path from 'path'
 import Color from 'color'
 
 const lighten = (clr, val) => Color(clr).lighten(val).rgb().string()
+const darken = (clr, val) => Color(clr).darken(val).rgb().string()
 const nitroDir = path.dirname(require.resolve('nitro-web'))
 
 export default {
@@ -25,13 +26,11 @@ export default {
       },
       colors: {
         // Main colors
-        'primary': colors.indigo[500],
-        'primary-dark': colors.indigo[600],
-        'primary-light': colors.indigo[400],
-        'primary-hover': lighten(colors.indigo[500], 0.05),
+        'primary': '#4c50f9',
+        'primary-dark': darken('#4c50f9', 0.05),
+        'primary-hover': lighten('#4c50f9', 0.05),
         'secondary': colors.green[500],
         'secondary-dark': colors.green[600],
-        'secondary-light': colors.green[400],
         'secondary-hover': lighten(colors.green[500], 0.05),
         'label': colors.gray[900],
         'link': colors.black,
@@ -40,6 +39,7 @@ export default {
         'light': colors.gray[100],
         'dark': colors.gray[900],
         // Alert colors
+        'critical': '#ff0000',
         'danger': '#ff0000',
         'danger-dark': colors.red[800],
         'info': colors.blue[500],
@@ -54,15 +54,15 @@ export default {
         sans: ['Inter', ...defaultTheme.fontFamily.sans],
       },
       fontSize: {
-        '2xs': ['0.77rem', { lineHeight: '1.5' }],
-        'xs': ['0.83rem', { lineHeight: '1.5' }],
-        'sm-label': ['0.87rem', { lineHeight: '1.5' }],
-        'sm': ['0.90rem', { lineHeight: '1.5' }],
-        'base': ['1rem', { lineHeight: '1.5' }],
-        'lg': ['1.16rem', { lineHeight: '1.75' }],
-        'xl': ['1.29rem', { lineHeight: '1.75' }],
-        '2xl': ['1.45rem', { lineHeight: '1.75' }],
-        '3xl': ['1.94rem', { lineHeight: '1.75' }],
+        '2xs': ['12px', { lineHeight: '1.5' }],
+        'xs': ['13px', { lineHeight: '1.5' }],
+        'sm': ['13.5px', { lineHeight: '1.5' }],
+        'md': ['14px', { lineHeight: '1.5' }],
+        'base': ['15.5px', { lineHeight: '1.5' }],
+        'lg': ['18px', { lineHeight: '1.75' }],
+        'xl': ['20px', { lineHeight: '1.75' }],
+        '2xl': ['22.5px', { lineHeight: '1.75' }],
+        '3xl': ['30px', { lineHeight: '1.75' }],
       },
       spacing: {
         'input-before': '0.625rem',

package/client/index.ts

@@ -22,11 +22,12 @@ export { Styleguide } from '../components/partials/styleguide'
 export { Accordion } from '../components/partials/element/accordion'
 export { Avatar } from '../components/partials/element/avatar'
 export { Button } from '../components/partials/element/button'
+export { Calendar, type CalendarProps } from '../components/partials/element/calendar'
 export { Dropdown } from '../components/partials/element/dropdown'
 export { GithubLink } from '../components/partials/element/github-link'
 export { Initials } from '../components/partials/element/initials'
 export { Message } from '../components/partials/element/message'
-// export { Modal } from '../components/partials/element/modal'
+export { Modal } from '../components/partials/element/modal'
 export { Sidebar, type SidebarProps } from '../components/partials/element/sidebar'
 export { Tooltip } from '../components/partials/element/tooltip'
 export { Topbar } from '../components/partials/element/topbar'
@@ -36,10 +37,10 @@ export { Checkbox } from '../components/partials/form/checkbox'
 export { Drop } from '../components/partials/form/drop'
 export { DropHandler } from '../components/partials/form/drop-handler'
 export { FormError } from '../components/partials/form/form-error'
-export { Input } from '../components/partials/form/input'
-export { InputColor } from '../components/partials/form/input-color'
-export { InputCurrency } from '../components/partials/form/input-currency'
-// export { InputDate } from '../components/partials/form/input-date'
+export { Field } from '../components/partials/form/input'
+export { FieldColor, type FieldColorProps } from '../components/partials/form/input-color'
+export { FieldCurrency, type FieldCurrencyProps } from '../components/partials/form/input-currency'
+export { FieldDate, type FieldDateProps } from '../components/partials/form/input-date'
 export { Location } from '../components/partials/form/location'
 export { Select, getSelectStyle } from '../components/partials/form/select'
 export { Toggle } from '../components/partials/form/toggle'

package/components/auth/reset.tsx

@@ -1,4 +1,4 @@
-import { Topbar, Input, FormError, Button, util } from 'nitro-web'
+import { Topbar, Field, FormError, Button, util } from 'nitro-web'
 import { Errors } from 'types'
 
 export function ResetInstructions() {
@@ -24,7 +24,7 @@ export function ResetInstructions() {
       <form onSubmit={onSubmit}>
         <div>
           <label for="email">Email Address</label>
-          <Input name="email" type="email" state={state} onChange={onChange.bind(setState)} placeholder="Your email address..." />
+          <Field name="email" type="email" state={state} onChange={onChange.bind(setState)} placeholder="Your email address..." />
         </div>
         
         <div class="mb-14">
@@ -67,11 +67,11 @@ export function ResetPassword() {
       <form onSubmit={onSubmit}>
         <div>
           <label for="password">Your New Password</label>
-          <Input name="password" type="password" state={state} onChange={onChange.bind(setState)} />
+          <Field name="password" type="password" state={state} onChange={onChange.bind(setState)} />
         </div>
         <div>
           <label for="password2">Repeat Your New Password</label>
-          <Input name="password2" type="password" state={state} onChange={onChange.bind(setState)} />
+          <Field name="password2" type="password" state={state} onChange={onChange.bind(setState)} />
         </div>
 
         <div class="mb-14">

package/components/auth/signin.tsx

@@ -1,4 +1,4 @@
-import { Topbar, Input, Button, FormError, util } from 'nitro-web'
+import { Topbar, Field, Button, FormError, util } from 'nitro-web'
 import { Config, Errors } from 'types'
 
 export function Signin({ config }: { config: Config }) {
@@ -50,14 +50,14 @@ export function Signin({ config }: { config: Config }) {
       <form onSubmit={onSubmit}>
         <div>
           <label for="email">Email Address</label>
-          <Input name="email" type="email" state={state} onChange={onChange.bind(setState)} placeholder="Your email address..." />
+          <Field name="email" type="email" state={state} onChange={onChange.bind(setState)} placeholder="Your email address..." />
         </div>
         <div>
           <div class="flex justify-between"> 
             <label for="password">Password</label>
             <Link to="/reset" class="label underline2">Forgot?</Link>
           </div>
-          <Input name="password" type="password" state={state} onChange={onChange.bind(setState)}/>
+          <Field name="password" type="password" state={state} onChange={onChange.bind(setState)}/>
         </div>
         
         <div class="mb-14">

package/components/auth/signup.tsx

@@ -1,4 +1,4 @@
-import { Button, Input, FormError, Topbar, util } from 'nitro-web'
+import { Button, Field, FormError, Topbar, util } from 'nitro-web'
 import { Config, Errors } from 'types'
 
 export function Signup({ config }: { config: Config}) {
@@ -32,20 +32,20 @@ export function Signup({ config }: { config: Config}) {
         <div class="grid grid-cols-2 gap-6">  
           <div>
             <label for="name">Your Name</label>
-            <Input name="name" placeholder="E.g. Bruce Wayne" state={state} onChange={onChange.bind(setState)} />
+            <Field name="name" placeholder="E.g. Bruce Wayne" state={state} onChange={onChange.bind(setState)} />
           </div>
           <div>
             <label for="business.name">Company Name</label>
-            <Input name="business.name" placeholder="E.g. Wayne Enterprises" state={state} onChange={onChange.bind(setState)} />
+            <Field name="business.name" placeholder="E.g. Wayne Enterprises" state={state} onChange={onChange.bind(setState)} />
           </div>
         </div>
         <div>
           <label for="email">Email Address</label>
-          <Input name="email" type="email" state={state} onChange={onChange.bind(setState)} placeholder="Your email address..." />
+          <Field name="email" type="email" state={state} onChange={onChange.bind(setState)} placeholder="Your email address..." />
         </div>
         <div>
           <label for="password">Password</label>
-          <Input name="password" type="password" state={state} onChange={onChange.bind(setState)}/>
+          <Field name="password" type="password" state={state} onChange={onChange.bind(setState)}/>
         </div>
         
         <div class="mb-14">

package/components/partials/element/button.tsx

@@ -1,5 +1,5 @@
 import { twMerge } from 'tailwind-merge'
-import { ChevronDownIcon } from '@heroicons/react/20/solid'
+import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/20/solid'
 
 type Props = {
   color?: 'primary'|'secondary'|'white'
@@ -16,7 +16,7 @@ type Props = {
 export function Button({ color='primary', size='md', className, isLoading, IconLeft, IconRight, IconRight2, children, ...props }: Props) {
   // const size = (color.match(/xs|sm|md|lg/)?.[0] || 'md') as 'xs'|'sm'|'md'|'lg'
   const iconPosition = IconLeft ? 'left' : IconRight ? 'right' : IconRight2 ? 'right2' : 'none'
-  const base = 'relative inline-block font-semibold shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2'
+  const base = 'relative inline-block font-medium shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2'
 
   // Button types
   const primary = 'bg-primary text-white shadow-sm hover:bg-primary-hover focus-visible:outline-primary'
@@ -48,7 +48,8 @@ export function Button({ color='primary', size='md', className, isLoading, IconL
   const loading = isLoading ? '[&>*]:opacity-0 text-opacity-0' : ''
 
   function getIcon(Icon: React.ReactNode | 'v') {
-    if (Icon == 'v') return <ChevronDownIcon className="size-6 -my-6 -mx-1" />
+    if (Icon == 'v' || Icon == 'down') return <ChevronDownIcon className="size-5 -my-6 -mx-1" />
+    if (Icon == '^' || Icon == 'up') return <ChevronUpIcon className="size-5 -my-6 -mx-1" />
     else return Icon
   }
   

package/components/partials/element/calendar.tsx

@@ -0,0 +1,123 @@
+import { DayPicker, getDefaultClassNames } from 'react-day-picker'
+import { isValid } from 'date-fns'
+import 'react-day-picker/style.css'
+import { IsFirstRender } from 'nitro-web'
+
+type Mode = 'single'|'multiple'|'range'
+type ModeSelection<T extends Mode> = (
+  T extends 'single' ? Date | undefined
+  : T extends 'multiple' ? Date[]
+  : { from?: Date; to?: Date }
+)
+
+export type CalendarProps = {
+  mode?: Mode
+  onChange?: (mode: Mode, value: null|number|(null|number)[]) => void
+  value?: null|number|string|(null|number|string)[]
+  numberOfMonths?: number
+  month?: number // the value may be updated from an outside source, thus the month may have changed
+  className?: string
+  preserveTime?: boolean
+}
+
+export function Calendar({ mode='single', onChange, value, numberOfMonths, month: monthProp, className, preserveTime }: CalendarProps) {
+  const isFirstRender = IsFirstRender()
+  const isRange = mode == 'range'
+
+  // Convert the value to an array of valid* dates
+  const dates = useMemo(() => {
+    const _dates = Array.isArray(value) ? value : [value]
+    return _dates.map(date => isValid(date) ? new Date(date as number) : undefined) ////change to null
+  }, [value])
+
+  // Hold the month in state to control the calendar when the input changes
+  const [month, setMonth] = useState(dates[0])
+
+  // Update the month if its changed from an outside source
+  useEffect(() => {
+    if (!isFirstRender && monthProp) setMonth(new Date(monthProp))
+  }, [monthProp])
+
+  function handleDayPickerSelect<T extends Mode>(newDate: ModeSelection<T>) {
+    switch (mode as T) {
+      case 'single': {
+        const date = newDate as ModeSelection<'single'>
+        preserveTimeFn(date)
+        onChange?.(mode, date?.getTime() ?? null)
+        break
+      }
+      case 'range': {
+        const { from, to } = (newDate ?? {}) as ModeSelection<'range'>
+        onChange?.(mode, from ? [from.getTime() || null, to?.getTime() || null] : null)
+        break
+      }
+      case 'multiple': {
+        const dates = (newDate as ModeSelection<'multiple'>)?.filter(Boolean) ?? []
+        onChange?.(mode, dates.map((d) => d.getTime()))
+        break
+      }
+    }
+  }
+
+  function preserveTimeFn(date?: Date) {      
+    // Preserve time from the original date if needed
+    if (preserveTime && dates[0] && date) {
+      const originalDate = dates[0]
+      date.setHours(
+        originalDate.getHours(),
+        originalDate.getMinutes(),
+        originalDate.getSeconds(),
+        originalDate.getMilliseconds()
+      )
+    }
+  }
+  
+  const d = getDefaultClassNames()
+  const common = {
+    month: month,
+    onMonthChange: setMonth,
+    onSelect: handleDayPickerSelect,
+    numberOfMonths: numberOfMonths || (isRange ? 2 : 1),
+    modifiersClassNames: {
+      // Add a class without _, TW seems to replace this with a space in the css definition, e.g. &:not(.range middle)
+      range_middle: `${d.range_middle} rangemiddle`,
+    },
+    classNames: {
+      root: `${d.root} flex`,
+      months: `${d.months} flex-nowrap`,
+      month_caption: `${d.month_caption} text-2xs pl-2`,
+      caption_label: `${d.caption_label} z-auto`,
+      button_previous: `${d.button_previous} size-8`,// [&:hover>svg]:fill-primary-dark`,
+      button_next: `${d.button_next} size-8`,// [&:hover>svg]:fill-primary-dark`,
+      chevron: `${d.chevron} fill-black size-[18px]`,
+
+      // Days
+      weekday: `${d.weekday} text-[11px] font-bold uppercase`,
+      day: `${d.day} size-[33px]`,
+      day_button: `${d.day_button} size-[33px] text-sm`,
+
+      // States
+      focused: `${d.focused} [&>button]:bg-gray-200 [&>button]:border-gray-200`,
+      range_start: `${d.range_start} [&>button]:!bg-primary-dark [&>button]:!border-primary-dark`,
+      range_end: `${d.range_end} [&>button]:!bg-primary-dark [&>button]:!border-primary-dark`,
+      selected: `${d.selected} font-normal `
+        + '[&:not(.rangemiddle)>button]:!text-white '
+        + '[&:not(.rangemiddle)>button]:!bg-primary-dark '
+        + '[&:not(.rangemiddle)>button]:!border-primary-dark ',
+    },
+  }
+
+  return (
+    <div>
+      {
+        mode === 'single' ? (
+          <DayPicker mode="single" selected={dates[0]} {...common} className={className} />
+        ) : mode === 'range' ? (
+          <DayPicker mode="range" selected={{ from: dates[0], to: dates[1] }} {...common} className={className} />
+        ) : (
+          <DayPicker mode="multiple" selected={dates.filter((d) => !!d)} {...common} className={className} />
+        )
+      }
+    </div>
+  )
+}

package/components/partials/element/dropdown.tsx

@@ -104,7 +104,7 @@ export const Dropdown = forwardRef(function Dropdown({
           return cloneElement(el, { key, onMouseDown, onKeyDown }) // adds onClick
         })
       }
-      <ul 
+      <ul
         style={{ minWidth }}
         class={`${menuStyle} absolute invisible opacity-0 select-none min-w-full z-[1]`}
       >
@@ -132,7 +132,9 @@ export const Dropdown = forwardRef(function Dropdown({
 
 const style = css`
   ul {
-    transition: transform 0.15s ease, opacity 0.15s ease, visibility 0s 0.15s ease;
+    transition: transform 0.15s ease, opacity 0.15s ease, visibility 0s 0.15s ease, max-width 0s 0.15s ease, max-height 0s 0.15s ease;
+    max-width: 0; // handy if the dropdown ul exceeds the viewport width
+    max-height: 0; // handy if the dropdown ul exceeds the viewport height
   }
   &.is-bottom-right,
   &.is-top-right {
@@ -166,6 +168,8 @@ const style = css`
       opacity: 1;
       visibility: visible;
       transition: transform 0.15s ease, opacity 0.15s ease;
+      max-width: 1000px;
+      max-height: 1000px;
     }
     &.is-bottom-left > ul,
     &.is-bottom-right > ul {

package/components/partials/element/modal.tsx

@@ -1,111 +1,84 @@
-// @ts-nocheck
-// todo: finish tailwind conversion
-import { css } from 'twin.macro'
 import { IsFirstRender } from 'nitro-web'
 import SvgX1 from 'nitro-web/client/imgs/icons/x1.svg'
 
-export function Modal({ show, setShow, children, className, maxWidth, minHeight, dismissable = true }) {
-  const [state, setState] = useState()
-  const containerEl = useRef()
+type ModalProps = {
+  show: boolean
+  setShow: (show: boolean) => void
+  children: React.ReactNode
+  maxWidth?: string
+  minHeight?: string
+  dismissable?: boolean
+  [key: string]: unknown
+}
+
+export function Modal({ show, setShow, children, maxWidth, minHeight, dismissable = true, ...props }: ModalProps) {
+  const [state, setState] = useState(show ? 'open' : 'close')
+  const containerEl = useRef<HTMLDivElement>(null)
   const isFirst = IsFirstRender()
 
-  useEffect(() => {
-    createScrollbarClasses()
-    return () => {
-      elementWithScrollbar().classList.remove('scrollbarPadding')
-    } // cleanup
-  }, [])
+  const states = {
+    'close': { 
+      root: 'left-[-100vw] transition-[left] duration-0 delay-200',
+      bg: 'opacity-0',
+      container: 'opacity-0 scale-[0.97]',
+    },
+    'close-now': { 
+      root: '',
+      bg: '',
+      container: 'opacity-0 !transition-none',
+    },
+    'open': { 
+      root: 'left-0 transition-none model-open',
+      bg: 'opacity-100 duration-200',
+      container: 'opacity-100 scale-[1] duration-200',
+    },
+  }
+  const _state = states[state as keyof typeof states]
+
 
   useEffect(() => {
+    if (isFirst) return
     if (show) {
-      elementWithScrollbar().classList.add('scrollbarPadding')
-      setState('modal-open')
-    } else if (!isFirst) {
-      // Dont close if first render (forgot what use case this was needed for)
+      setState('open')
+    } else {
       setTimeout(() => {
         // If another modal is being opened, force close the container for a smoother transition
         if (document.getElementsByClassName('modal-open').length > 1) {
-          setState('modal-close-immediately')
+          setState('close-now')
         } else {
-          setState('')
-          elementWithScrollbar().classList.remove('scrollbarPadding')
+          setState('close')
         }
       }, 10)
     }
   // There is a bug during hot-reloading where the modal does't open if we don't ensure 
   // the same truthy/falsey type is used.
   }, [!!show])
-
-  function elementWithScrollbar() {
-    // this needs to be non-body element otherwise the Modal.jsx doesn't open/close smoothly
-    //document.getElementsByTagName('body')[0] // document.getElementsByClassName('page')[0]
-    return document.getElementById('app')
-  }
   
-  function onClick(e) {
-    let clickedOnContainer = containerEl.current && containerEl.current.contains(e.target)
-    if (!clickedOnContainer && dismissable) {
+  function onClick(e: React.MouseEvent) {
+    const clickedOnModal = containerEl.current && containerEl.current.contains(e.target as Node)
+    if (!clickedOnModal && dismissable) {
       setShow(false)
     }
   }
 
-  function createScrollbarClasses() {
-    /**
-     *  Creates reusable margin and padding classes containing the scrollbar width and
-     *  sets window.scrollbarWidth
-     *  @return width
-     */
-    if (typeof window.scrollbarWidth !== 'undefined') return
-
-    var outer = document.createElement('div')
-    outer.style.visibility = 'hidden'
-    outer.style.width = '100px'
-    outer.style.margin = '0px'
-    outer.style.padding = '0px'
-    outer.style.border = '0'
-    document.body.appendChild(outer)
-
-    var widthNoScroll = outer.offsetWidth
-    // force scrollbars
-    outer.style.overflow = 'scroll'
-
-    // add innerdiv
-    var inner = document.createElement('div')
-    inner.style.width = '100%'
-    outer.appendChild(inner)
-
-    var widthWithScroll = inner.offsetWidth
-
-    // Remove divs
-    outer.parentNode.removeChild(outer)
-    let width = (window.scrollbarWidth = widthNoScroll - widthWithScroll)
-
-    // Create new inline stylesheet and append to the head
-    let style = document.createElement('style')
-    let css = (
-      '.scrollbarPadding {padding-right:' + width + 'px !important; overflow:hidden !important;}' +
-      '.scrollbarMargin {margin-right:' + width + 'px !important; overflow:hidden !important;}'
-    )
-    style.type = 'text/css'
-    if (style.styleSheet) style.styleSheet.cssText = css //<=IE8
-    else style.appendChild(document.createTextNode(css))
-    document.getElementsByTagName('head')[0].appendChild(style)
-
-    return width
-  }
-
   return (
-    <div css={style} class={`${state}`} onClick={(e) => e.stopPropagation()}>
-      <div class="modal-bg wrapper scrollbarPadding"></div>
-      <div class="modal-container">
-        {/* we also need to be able to scroll without closing */}
-        <div onMouseDown={onClick}> 
+    <div 
+      onClick={(e) => e.stopPropagation()} 
+      class={`fixed top-0 w-[100vw] h-[100vh] z-[700] ${_state.root}`}
+    >
+      <div class={`!absolute inset-0 box-content bg-gray-500/70 transition-opacity ${_state.bg}`}></div>
+      <div class={`relative h-[100vh] overflow-y-auto transition-[opacity,transform] ${_state.container}`}>
+        <div class="flex items-center justify-center min-h-full" onMouseDown={onClick}> 
           <div 
             ref={containerEl} 
-            style={{ maxWidth: maxWidth || '740px', minHeight: typeof minHeight == 'undefined' ? '487px' : minHeight }} 
-            class={`modal1 ${className}`}
+            style={{ maxWidth: maxWidth || '550px', minHeight: minHeight }} 
+            class={`relative w-full mx-6 mt-4 mb-8 bg-white rounded-lg shadow-lg ${props.className}`}
           >
-            <div class="modal-close" onClick={() => { if (dismissable) { setShow(false) }}}><SvgX1 /></div>
+            <div 
+              class="absolute top-0 right-0 p-3 m-1 cursor-pointer" 
+              onClick={() => { if (dismissable) { setShow(false) }}}>
+                <SvgX1 />
+            </div>
             {children}
           </div>
         </div>
@@ -113,118 +86,3 @@ export function Modal({ show, setShow, children, className, maxWidth, minHeight,
     </div>
   )
 }
-
-const style = css`
-  /* Modal structure */
-  & {
-    position: fixed;
-    top: 0;
-    width: 100%;
-    height: calc(100vh);
-    z-index: 699;
-    .modal-bg {
-      position: absolute !important;
-      display: flex;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      box-sizing: content-box;
-      &:before {
-        content: '';
-        display: block;
-        flex: 1;
-        background: rgba(255, 255, 255, 0.82);
-        /* backdrop-filter: blur(1px);
-        -webkit-backdrop-filter: blur(1px); */
-      }
-    }
-    .modal-container {
-      position: relative;
-      height: calc(100vh);
-      // horisontal centering
-      > div {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        min-height: 100%;
-        // vertical centering
-        > div {
-          margin: 30px 20px 90px;
-          width: 100%;
-        }
-      }
-    }
-    &.modal-close-immediately {
-      .modal-container > div > div {
-        transition: none !important;
-      }
-    }
-  }
-
-  /* Animation */
-
-  & {
-    left: -100%;
-    transition: left 0s 0.2s;
-  }
-  .modal-bg {
-    opacity: 0;
-    transition: opacity 0.15s ease, transform 0.15s ease;
-  }
-  .modal-container {
-    /*overflow: hidden;*/
-    overflow-y: scroll;
-    overflow-x: auto;
-  }
-  .modal-container > div > div {
-    opacity: 0;
-    transform: scale(0.97);
-    transition: opacity 0.15s ease, transform 0.15s ease;
-  }
-  &.modal-open {
-    left: 0;
-    transition: none;
-    .modal-bg {
-      opacity: 1;
-      transition: opacity 0.2s ease, transform 0.2s ease;
-    }
-    .modal-container {
-      overflow-y: scroll;
-      overflow-x: auto;
-    }
-    .modal-container > div > div {
-      opacity: 1;
-      transform: scale(1);
-      transition: opacity 0.2s ease, transform 0.2s ease;
-    }
-  }
-
-  /* Modal customisations */
-
-  .modal1 {
-    background: white;
-    border: 2px solid #27242C;
-    box-shadow: 0px 1px 29px rgba(31, 29, 36, 0.07);
-    border-radius: 8px;
-    .subtitle {
-      margin-bottom: 34px; // same as form pages
-    }
-    .modal-close {
-      position: absolute;
-      margin: 10px;
-      padding: 15px 20px;
-      top: 0;
-      right: 0;
-      cursor: pointer;
-      line {
-        transition: all 0.1s;
-      }
-      &:hover {
-        line {
-          /* stroke: theme'colors.primary-dark'; */
-        }
-      }
-    }
-  }
-`