vipassana-design-standards 0.0.36 → 1.0.0

package/dist/js/react-helpers.jsx

@@ -3,16 +3,16 @@ import i18n from './i18n.js'
 function fixLocale(locale) {
   locale = (locale || 'en').toLowerCase()
   const mapping = {
-    'zh': 'zh-HANS',
+    zh: 'zh-HANS',
     'zh-hans': 'zh-HANS',
     'zh-hant': 'zh-HANT',
     'zh-hant-hk': 'zh-HANT-HK',
     'zh-hk': 'zh-HANT-HK',
     'zh-cn': 'zh-HANS',
-    'zh-tw': 'zh-HANT',
+    'zh-tw': 'zh-HANT'
   }
   if (mapping[locale]) locale = mapping[locale] // zh-Hans -> zh-HANS
-  else locale = locale.split("-")[0] // fr-CA -> fr
+  else locale = locale.split('-')[0] // fr-CA -> fr
   return locale
 }
 
@@ -24,79 +24,143 @@ function vdsAssetUrl(path, localhost = false) {
   // For localhost dev, just run vscode liveserver
   if (localhost) return `http://localhost:5500/dist/${path}`
 
-  return `https://design-standards.dhamma.org/dist/0.0.36/${path}`
+  return `https://design-standards.dhamma.org/dist/1.0.0/${path}`
 }
 
-function StylesheetLinkTag({url}) {
+function StylesheetLinkTag({ url }) {
   return <link rel="stylesheet" type="text/css" href={url} />
 }
 
 export function VdsFaviconTag() {
-  return <link rel="shortcut icon" type="image/x-icon" href="https://design-standards.dhamma.org/dist/favicon.png" />
+  return (
+    <link
+      rel="shortcut icon"
+      type="image/x-icon"
+      href="https://design-standards.dhamma.org/dist/favicon.png"
+    />
+  )
 }
 
 export function VdsBootstrapThemeCssTag({ locale, localhost = false }) {
   locale = fixLocale(locale)
   const url = vdsAssetUrl(`css/bootstrap5-theme${isRtl(locale) ? '.rtl' : ''}.min.css`, localhost)
-  return <>
-    <StylesheetLinkTag url={url}/>
-    {['ar', 'fa', 'gu', 'he', 'ja', 'km', 'ko', 'or', 'si', 'ta', 'te', 'th', 'zh-HANS', 'zh-HANT', 'zh-HANT-HK'].includes(locale) && <StylesheetLinkTag url={vdsAssetUrl(`css/fonts-${locale}.min.css`)}/>}
-  </>
+  return (
+    <>
+      <StylesheetLinkTag url={url} />
+      {[
+        'ar',
+        'fa',
+        'gu',
+        'he',
+        'ja',
+        'km',
+        'ko',
+        'or',
+        'si',
+        'ta',
+        'te',
+        'th',
+        'zh-HANS',
+        'zh-HANT',
+        'zh-HANT-HK'
+      ].includes(locale) && <StylesheetLinkTag url={vdsAssetUrl(`css/fonts-${locale}.min.css`)} />}
+    </>
+  )
 }
 
 export function VdsBootstrapThemeJsTag({ localhost = false }) {
-  const url = vdsAssetUrl("js/bootstrap5-theme.min.js", localhost)
+  const url = vdsAssetUrl('js/bootstrap5-theme.min.js', localhost)
   return <script type="text/javascript" src={url}></script>
 }
 
-export function VdsLogo({locale, disposition = "default", size = '17', tagline = true, dark = false}) {
+export function VdsLogo({
+  locale,
+  disposition = 'default',
+  size = '17',
+  tagline = true,
+  dark = false
+}) {
   locale = fixLocale(locale)
   let trans = i18n[locale] || i18n.en
 
-  if (disposition == "mobile") {
-    disposition = "left-two-lines"
+  if (disposition == 'mobile') {
+    disposition = 'left-two-lines'
     tagline = false
   }
 
-  return <div className="vipassana-logo"
+  return (
+    <div
+      className="vipassana-logo"
       data-lang={locale}
       data-disposition={disposition}
       data-tagline={tagline}
       data-dark-mode={dark}
       data-reverse={trans.reverse}
-      style={{fontSize: `${size}px`}}>
-    <img className="logo-wheel" src="https://design-standards.dhamma.org/dist/dhamma-wheel.svg" />
-    <div className="logo-text">
-      <h1 className="logo-title">
-        <span data-start-with={trans.vipassana_meditation.charAt(0).toLowerCase()}>
-          {trans.vipassana_meditation}
-        </span>
-        <span className="logo-space">&nbsp;</span>
-        <span>{trans.as_taught}</span>
-        <span className="vipassana-as-taught">{trans.vipassana_as_taught}</span>
-      </h1>
-      <div className="logo-subtitle">{trans.in_the_tradition}</div>
+      style={{ fontSize: `${size}px` }}
+    >
+      <img className="logo-wheel" src="https://design-standards.dhamma.org/dist/dhamma-wheel.svg" />
+      <div className="logo-text">
+        <h1 className="logo-title">
+          <span data-start-with={trans.vipassana_meditation.charAt(0).toLowerCase()}>
+            {trans.vipassana_meditation}
+          </span>
+          <span className="logo-space">&nbsp;</span>
+          <span>{trans.as_taught}</span>
+          <span className="vipassana-as-taught">{trans.vipassana_as_taught}</span>
+        </h1>
+        <div className="logo-subtitle">{trans.in_the_tradition}</div>
+      </div>
     </div>
-  </div>
+  )
 }
 
 // Some icons from bootstrap icons, so all websites use the same
-export function VdsIconLocale({size = 1.2}) {
-  return <svg xmlns="http://www.w3.org/2000/svg" width={`${size}em`} height={`${size}em`} fill="currentColor" viewBox="0 0 16 16">
-    <path d="M4.545 6.714 4.11 8H3l1.862-5h1.284L8 8H6.833l-.435-1.286H4.545zm1.634-.736L5.5 3.956h-.049l-.679 2.022H6.18z"/>
-    <path d="M0 2a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v3h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-3H2a2 2 0 0 1-2-2V2zm2-1a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H2zm7.138 9.995c.193.301.402.583.63.846-.748.575-1.673 1.001-2.768 1.292.178.217.451.635.555.867 1.125-.359 2.08-.844 2.886-1.494.777.665 1.739 1.165 2.93 1.472.133-.254.414-.673.629-.89-1.125-.253-2.057-.694-2.82-1.284.681-.747 1.222-1.651 1.621-2.757H14V8h-3v1.047h.765c-.318.844-.74 1.546-1.272 2.13a6.066 6.066 0 0 1-.415-.492 1.988 1.988 0 0 1-.94.31z"/>
-  </svg>
+export function VdsIconLocale({ size = 1.2 }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={`${size}em`}
+      height={`${size}em`}
+      fill="currentColor"
+      viewBox="0 0 16 16"
+    >
+      <path d="M4.545 6.714 4.11 8H3l1.862-5h1.284L8 8H6.833l-.435-1.286H4.545zm1.634-.736L5.5 3.956h-.049l-.679 2.022H6.18z" />
+      <path d="M0 2a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v3h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-3H2a2 2 0 0 1-2-2V2zm2-1a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H2zm7.138 9.995c.193.301.402.583.63.846-.748.575-1.673 1.001-2.768 1.292.178.217.451.635.555.867 1.125-.359 2.08-.844 2.886-1.494.777.665 1.739 1.165 2.93 1.472.133-.254.414-.673.629-.89-1.125-.253-2.057-.694-2.82-1.284.681-.747 1.222-1.651 1.621-2.757H14V8h-3v1.047h.765c-.318.844-.74 1.546-1.272 2.13a6.066 6.066 0 0 1-.415-.492 1.988 1.988 0 0 1-.94.31z" />
+    </svg>
+  )
 }
 
-export function VdsIconAccount({size = 2.2}) {
-  return <svg xmlns="http://www.w3.org/2000/svg" width={`${size}em`} height={`${size}em`} fill="currentColor" viewBox="0 0 16 16">
-    <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
-    <path fillRule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
-  </svg>
+export function VdsIconAccount({ size = 2.2 }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={`${size}em`}
+      height={`${size}em`}
+      fill="currentColor"
+      viewBox="0 0 16 16"
+    >
+      <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z" />
+      <path
+        fillRule="evenodd"
+        d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"
+      />
+    </svg>
+  )
 }
 
-export function VdsIconMenu({size = 1.8}) {
-  return <svg xmlns="http://www.w3.org/2000/svg" width={`${size}em`} height={`${size}em`} fill="currentColor" viewBox="0 0 16 16">
-    <path fillRule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
-  </svg>
+export function VdsIconMenu({ size = 1.8 }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={`${size}em`}
+      height={`${size}em`}
+      fill="currentColor"
+      viewBox="0 0 16 16"
+    >
+      <path
+        fillRule="evenodd"
+        d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"
+      />
+    </svg>
+  )
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vipassana-design-standards",
-  "version": "0.0.36",
+  "version": "1.0.0",
   "description": "Vipassana design standards materials",
   "homepage": "https://design-standards.dhamma.org",
   "author": "Dhamma Workers",

package/src/stylesheets/bootstrap5-theme.scss

@@ -1,17 +1,17 @@
-@import "./custom-bootstrap-variables.scss";
+@import './custom-bootstrap-variables.scss';
 
-@import "bootstrap5/scss/bootstrap.scss";
+@import 'bootstrap5/scss/bootstrap.scss';
 
-@import "./custom-bootstrap-utilities.scss";
-@import "./custom-bootstrap.scss";
+@import './custom-bootstrap-utilities.scss';
+@import './custom-bootstrap.scss';
 
-@import "./layout/vds-mixins.scss";
-@import "./layout/vds-layout.scss";
-@import "./layout/vds-header.scss";
-@import "./layout/vds-sidenav.scss";
+@import './layout/vds-mixins.scss';
+@import './layout/vds-layout.scss';
+@import './layout/vds-header.scss';
+@import './layout/vds-sidenav.scss';
 
-@import "./fonts.scss";
-@import "./logo.scss";
+@import './fonts.scss';
+@import './logo.scss';
 
 html.vds-html {
   font-size: 13.5px;
@@ -21,4 +21,4 @@ html.vds-html {
   @include media-breakpoint-up(xl) {
     font-size: 15.3px;
   }
-}
+}

package/src/stylesheets/custom-bootstrap-utilities.scss

@@ -1,4 +1,3 @@
-
 :root {
   // Generate missing CSS Variables
   @each $color, $value in $blues {
@@ -54,56 +53,136 @@
 }
 
 // fs-09-rem, fs-085-em..
-.fs-05-rem { font-size: .5rem !important; }
-.fs-05-em { font-size: .5em !important; }
-.fs-055-rem { font-size: .55rem !important; }
-.fs-055-em { font-size: .55em !important; }
-
-.fs-06-rem { font-size: .6rem !important; }
-.fs-06-em { font-size: .6em !important; }
-.fs-065-rem { font-size: .65rem !important; }
-.fs-065-em { font-size: .65em !important; }
-
-.fs-07-rem { font-size: .7rem !important; }
-.fs-07-em { font-size: .7em !important; }
-.fs-075-rem { font-size: .75rem !important; }
-.fs-075-em { font-size: .75em !important; }
-
-.fs-08-rem { font-size: .8rem !important; }
-.fs-08-em { font-size: .8em !important; }
-.fs-085-rem { font-size: .85rem !important; }
-.fs-085-em { font-size: .85em !important; }
-
-.fs-09-rem { font-size: .9rem !important; }
-.fs-09-em { font-size: .9em !important; }
-.fs-095-rem { font-size: .95rem !important; }
-.fs-095-em { font-size: .95em !important; }
+.fs-05-rem {
+  font-size: 0.5rem !important;
+}
+.fs-05-em {
+  font-size: 0.5em !important;
+}
+.fs-055-rem {
+  font-size: 0.55rem !important;
+}
+.fs-055-em {
+  font-size: 0.55em !important;
+}
+
+.fs-06-rem {
+  font-size: 0.6rem !important;
+}
+.fs-06-em {
+  font-size: 0.6em !important;
+}
+.fs-065-rem {
+  font-size: 0.65rem !important;
+}
+.fs-065-em {
+  font-size: 0.65em !important;
+}
+
+.fs-07-rem {
+  font-size: 0.7rem !important;
+}
+.fs-07-em {
+  font-size: 0.7em !important;
+}
+.fs-075-rem {
+  font-size: 0.75rem !important;
+}
+.fs-075-em {
+  font-size: 0.75em !important;
+}
+
+.fs-08-rem {
+  font-size: 0.8rem !important;
+}
+.fs-08-em {
+  font-size: 0.8em !important;
+}
+.fs-085-rem {
+  font-size: 0.85rem !important;
+}
+.fs-085-em {
+  font-size: 0.85em !important;
+}
+
+.fs-09-rem {
+  font-size: 0.9rem !important;
+}
+.fs-09-em {
+  font-size: 0.9em !important;
+}
+.fs-095-rem {
+  font-size: 0.95rem !important;
+}
+.fs-095-em {
+  font-size: 0.95em !important;
+}
 
 // fs-11-rem, fs-125-em...
-.fs-11-rem { font-size: 1.1rem !important; }
-.fs-11-em { font-size: 1.1em !important; }
-.fs-115-rem { font-size: 1.15rem !important; }
-.fs-115-em { font-size: 1.15em !important; }
-
-.fs-12-rem { font-size: 1.2rem !important; }
-.fs-12-em { font-size: 1.2em !important; }
-.fs-125-rem { font-size: 1.25rem !important; }
-.fs-125-em { font-size: 1.25em !important; }
-
-.fs-13-rem { font-size: 1.3rem !important; }
-.fs-13-em { font-size: 1.3em !important; }
-.fs-135-rem { font-size: 1.35rem !important; }
-.fs-135-em { font-size: 1.35em !important; }
-
-.fs-14-rem { font-size: 1.4rem !important; }
-.fs-14-em { font-size: 1.4em !important; }
-.fs-145-rem { font-size: 1.45rem !important; }
-.fs-145-em { font-size: 1.45em !important; }
-
-.fs-15-rem { font-size: 1.5rem !important; }
-.fs-15-em { font-size: 1.5em !important; }
-.fs-155-rem { font-size: 1.55rem !important; }
-.fs-155-em { font-size: 1.55em !important; }
+.fs-11-rem {
+  font-size: 1.1rem !important;
+}
+.fs-11-em {
+  font-size: 1.1em !important;
+}
+.fs-115-rem {
+  font-size: 1.15rem !important;
+}
+.fs-115-em {
+  font-size: 1.15em !important;
+}
+
+.fs-12-rem {
+  font-size: 1.2rem !important;
+}
+.fs-12-em {
+  font-size: 1.2em !important;
+}
+.fs-125-rem {
+  font-size: 1.25rem !important;
+}
+.fs-125-em {
+  font-size: 1.25em !important;
+}
+
+.fs-13-rem {
+  font-size: 1.3rem !important;
+}
+.fs-13-em {
+  font-size: 1.3em !important;
+}
+.fs-135-rem {
+  font-size: 1.35rem !important;
+}
+.fs-135-em {
+  font-size: 1.35em !important;
+}
+
+.fs-14-rem {
+  font-size: 1.4rem !important;
+}
+.fs-14-em {
+  font-size: 1.4em !important;
+}
+.fs-145-rem {
+  font-size: 1.45rem !important;
+}
+.fs-145-em {
+  font-size: 1.45em !important;
+}
+
+.fs-15-rem {
+  font-size: 1.5rem !important;
+}
+.fs-15-em {
+  font-size: 1.5em !important;
+}
+.fs-155-rem {
+  font-size: 1.55rem !important;
+}
+.fs-155-em {
+  font-size: 1.55em !important;
+}
 
 .full-width-sm {
   @include media-breakpoint-down(md) {
@@ -139,4 +218,4 @@
     padding: 2rem;
     z-index: 500;
   }
-}
+}

package/src/stylesheets/custom-bootstrap-variables.scss

@@ -1,59 +1,59 @@
 // Color Palette
 $blue-100: #f8f9fa; // #f8f9fa; // #ececec; // primevue #e8eaf6 //#f1eff1;
 $blue-150: #f0f2f4; //#e6e5ec;
-$blue-200: #D2D6DF; //#e6e5ec; //#ced4da;
+$blue-200: #d2d6df; //#e6e5ec; //#ced4da;
 $blue-300: #8586a2;
 $blue-400: #707595;
 $blue-500: #5b6588;
 $blue-600: #47547b;
 $blue-700: #32446e;
-$blue-800: #1E3461;
+$blue-800: #1e3461;
 $blue-900: #121f3a;
 
 $blue: $blue-800;
 
-$gold-100: #FCFAF7;
+$gold-100: #fcfaf7;
 $gold-200: #f0e7d5;
 $gold-300: #deccad;
 $gold-400: #c6a364;
-$gold-500: #B78730;
+$gold-500: #b78730;
 $gold-600: #9c6b14;
-$gold-700: #7D550C;
+$gold-700: #7d550c;
 $gold-800: #493613;
 $gold-900: #241a09;
 
 $gold: $gold-500;
 
 $blues: (
-  "blue-100": $blue-100,
-  "blue-150": $blue-150,
-  "blue-200": $blue-200,
-  "blue-300": $blue-300,
-  "blue-400": $blue-400,
-  "blue-500": $blue-500,
-  "blue-600": $blue-600,
-  "blue-700": $blue-700,
-  "blue-800": $blue-800,
-  "blue-900": $blue-900
+  'blue-100': $blue-100,
+  'blue-150': $blue-150,
+  'blue-200': $blue-200,
+  'blue-300': $blue-300,
+  'blue-400': $blue-400,
+  'blue-500': $blue-500,
+  'blue-600': $blue-600,
+  'blue-700': $blue-700,
+  'blue-800': $blue-800,
+  'blue-900': $blue-900
 );
 
 $golds: (
-  "gold-100": $gold-100,
-  "gold-200": $gold-200,
-  "gold-300": $gold-300,
-  "gold-400": $gold-400,
-  "gold-500": $gold-500,
-  "gold-600": $gold-600,
-  "gold-700": $gold-700,
-  "gold-800": $gold-800,
-  "gold-900": $gold-900
+  'gold-100': $gold-100,
+  'gold-200': $gold-200,
+  'gold-300': $gold-300,
+  'gold-400': $gold-400,
+  'gold-500': $gold-500,
+  'gold-600': $gold-600,
+  'gold-700': $gold-700,
+  'gold-800': $gold-800,
+  'gold-900': $gold-900
 );
 
-$green-200: #D5E4C3;
+$green-200: #d5e4c3;
 $green: #3d6b00;
 $green-700: #203800;
 
-$red-200: #ECCCCC;
+$red-200: #eccccc;
 $red: #8e3333;
 $red-700: #720000;
 
@@ -61,7 +61,7 @@ $primary: $blue-800;
 $secondary: $gold-500;
 $info: $secondary;
 
-$dark: #4F4d47;
+$dark: #4f4d47;
 $light: $blue-150;
 
 $dark-100: tint-color($dark, 80%);
@@ -76,10 +76,14 @@ $dark-900: shade-color($dark, 80%);
 
 // Customize Bootstrap
 
-$font-family-sans-serif: var(--vds-font-family), system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+$font-family-sans-serif: var(--vds-font-family), system-ui, -apple-system, 'Segoe UI', Roboto,
+  'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji',
+  'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 $line-height-base: 1.7;
 
-$headings-font-family: var(--vds-headings-font-family), system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+$headings-font-family: var(--vds-headings-font-family), system-ui, -apple-system, 'Segoe UI', Roboto,
+  'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji',
+  'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 $headings-color: $blue;
 $headings-font-weight: 500;
 $headings-line-height: 1.5;
@@ -87,7 +91,7 @@ $headings-line-height: 1.5;
 $font-weight-semibold: 500;
 $font-weight-bold: 600;
 
-$border-radius: .25rem;
+$border-radius: 0.25rem;
 $border-color: $blue-200;
 $body-bg: $gold-100;
 
@@ -96,7 +100,7 @@ $spacer-x: 1.5rem;
 
 $input-bg: white;
 $input-btn-padding-x: 1rem;
-$input-btn-padding-x-sm: .75rem;
+$input-btn-padding-x-sm: 0.75rem;
 $input-border-color: $border-color;
 
 $form-floating-height: calc(3.7rem + 2px);
@@ -107,7 +111,7 @@ $alert-border-width: 0;
 
 $card-spacer-x: $spacer-x;
 $card-cap-padding-x: $spacer-x;
-$card-cap-padding-y: .75rem;
+$card-cap-padding-y: 0.75rem;
 $card-border-width: 0;
 
 $accordion-padding-x: $spacer-x;
@@ -118,14 +122,14 @@ $badge-font-weight: 400;
 
 $offcanvas-horizontal-width: auto;
 $offcanvas-padding-x: 1.5rem;
-$offcanvas-transition-duration: .25s;
+$offcanvas-transition-duration: 0.25s;
 
 $modal-inner-padding: $spacer-x;
 $modal-content-border-radius: $border-radius;
 $modal-content-border-width: 0;
 $modal-header-border-width: 0;
 $modal-header-padding: 1rem $modal-inner-padding 0 $modal-inner-padding;
-$modal-fade-transform: translate(0, 0) scale(.8);
-$modal-transition: transform .15s ease-out;
+$modal-fade-transform: translate(0, 0) scale(0.8);
+$modal-transition: transform 0.15s ease-out;
 
-$enable-negative-margins: true;
+$enable-negative-margins: true;