@stencila/style-stencila/dist/atoms/toast.css.map

Custom designed theme for Stencila components

{"mappings":"AAAA,0BAAA,mBAAA,sBAAA,ACEE,sBAAwB,CDF1B,sBAAA,aAAA,OAAA,cAAA,oBAAA,eAAA,MAAA,YAAA,WAAA,yCAAA,2BAAA,4CAAA,yBAAA,6CAAA,uBAAA,2CAAA,qBAAA,ACqBA;EAEE,sDAAsD,CACtD,6BAAgC;;EAEhC,iEAAiE,CACjE,oCAAuC,CD3BzC,0EAAA,kGAAA,AC8BE,kCAAmC,CACnC,yCAA0C,CD/B5C,sBAAA,gDAAA,mGAAA,WAAA,8BAAA,ACgCE,kBAAmB,CDhCrB,cAAA,aAAA,mBAAA,cAAA,uBAAA,+CAAA,eAAA,mBAAA,cAAA,qBAAA,kBAAA,eAAA,ACiCE,cAAe,CDjCjB,gBAAA,oBAAA,iBCsJA,CAnHE,6CACE,8BAAgC,CAChC,sCACF,CAEA,2CACE,gCAAkC,CAClC,wBACF,CD3CF,+CAAA,WAAA,8BAAA,cAAA,mBAAA,2ECoDM,gBAAiB,CACjB,eAAgB,CDrDtB,qBAAA,cAAA,oBAAA,eAAA,sHAAA,yBAAA,kDAAA,cAAA,uCAAA,8KAAA,yBAAA,iDAAA,mDAAA,qBAAA,8CAAA,6EAAA,yBAAA,kDAAA,cAAA,uCAAA,yGAAA,yBAAA,iDAAA,mDAAA,qBAAA,8CAAA,6EAAA,yBAAA,kDAAA,cAAA,uCAAA,yGAAA,yBAAA,iDAAA,6CAAA,qBAAA,2CAAA,uEAAA,yBAAA,+CAAA,cAAA,oCAAA,mGAAA,yBAAA,8CAAA,iDAAA,qBAAA,6CAAA,2EAAA,yBAAA,iDAAA,cAAA,sCAAA,uGAAA,yBAAA,gDAAA,6DAAA,sBAAA,yDAAA,oBAAA,uCAAA,uBAAA,aAAA,sBAAA,kBAAA,uBAAA,oBAAA,aAAA,+CAAA,gBAAA,2EAAA,aAAA,2BAAA,iBAAA,WAAA,iHAAA,mBAAA,iDAAA,mBAAA,+CAAA,kBAAA,ACmJI,aAAe,CACf,YDpJJ,ACwJA,mBACE,GACE,SAAU,CACV,yBACF,CACA,GACE,SAAU,CACV,uBACF,CACF,CAEA,oBACE,GACE,eAAgB,CAChB,SAAU,CACV,uBACF,CACA,GACE,YAAa,CACb,SAAU,CACV,gBAAiB,CACjB,aAAc,CACd,yBACF,CACF","sources":["<no source>","src/atoms/toast.css"],"sourcesContent":[null,".stencila-toast-container {\n  @apply fixed top-0 left-0 z-50 flex flex-col items-center w-screen h-screen p-2 pointer-events-none box-border;\n  display: flex !important;\n\n  &[position^='top'] {\n    @apply justify-start;\n  }\n\n  &[position^='bottom'] {\n    @apply justify-end;\n  }\n\n  &[position$='Start' i] {\n    @apply items-start;\n  }\n\n  &[position$='End' i] {\n    @apply items-end;\n  }\n}\n\n:host,\nstencila-toast {\n  /** @prop --color: Text color of the Toast component */\n  --color: var(--color-key, black);\n\n  /** @prop --background: Background color of the Toast component */\n  --background: var(--color-stock, white);\n\n  @apply flex flex-row flex-shrink-0 block my-1 overflow-hidden font-body leading-none shadow-lg pointer-events-auto rounded-md text-stock text-base relative max-w-prose;\n  background-color: var(--background);\n  border: 1px solid var(--color-neutral-200);\n  color: var(--color);\n  min-width: 32ch;\n\n  &[data-enter] {\n    animation: fade-in 150ms ease-in;\n    animation-delay: calc(var(--i, 0) * 50ms);\n  }\n\n  &[data-exit] {\n    animation: fade-out 150ms ease-out;\n    animation-fill-mode: both;\n  }\n\n  /* Toast color variants */\n  /* TODO: Allow variables set above to override these colors */\n  .toastAccent {\n    @apply text-stock leading-none px-2 py-4;\n\n    stencila-icon {\n      @apply block rounded-full p-1 -mt-0.5;\n      --height: 1.25rem;\n      --width: 1.25rem;\n    }\n  }\n\n  &,\n  &[type='info'] {\n    .toastAccent {\n      @apply bg-neutral-100 text-neutral-600;\n\n      stencila-icon {\n        @apply bg-neutral-50;\n      }\n    }\n  }\n\n  &[type='primary'] {\n    @apply border-primary-200;\n\n    .toastAccent {\n      @apply bg-primary-100 text-primary-500;\n\n      stencila-icon {\n        @apply bg-primary-50;\n      }\n    }\n  }\n\n  &[type='success'] {\n    @apply border-success-200;\n\n    .toastAccent {\n      @apply bg-success-200 text-success-500;\n\n      stencila-icon {\n        @apply bg-success-50;\n      }\n    }\n  }\n\n  &[type='warn'] {\n    @apply border-warn-200;\n\n    .toastAccent {\n      @apply bg-warn-200 text-warn-600;\n\n      stencila-icon {\n        @apply bg-warn-50;\n      }\n    }\n  }\n\n  &[type='danger'] {\n    @apply border-danger-200;\n\n    .toastAccent {\n      @apply bg-danger-200 text-danger-500;\n\n      stencila-icon {\n        @apply bg-danger-50;\n      }\n    }\n  }\n\n  &[position='topStart'] {\n    @apply self-start;\n  }\n\n  &[position='topEnd'] {\n    @apply self-end;\n  }\n\n  .content {\n    @apply p-4 flex flex-col justify-center items-start text-sm;\n  }\n\n  [slot='title'] {\n    @apply font-bold;\n  }\n\n  [slot='actions']:not(:empty) {\n    @apply mt-2 flex justify-start w-full;\n\n    & > *:not(:first-child) {\n      @apply pl-2;\n    }\n  }\n\n  /* Close button */\n  &[dismissable] {\n    @apply pr-8;\n  }\n\n  .closeButton {\n    @apply absolute;\n    right: 0.325rem;\n    top: 0.325rem;\n  }\n}\n\n@keyframes fade-in {\n  from {\n    opacity: 0;\n    transform: translateY(25%);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0%);\n  }\n}\n\n@keyframes fade-out {\n  from {\n    max-height: none;\n    opacity: 1;\n    transform: translateY(0);\n  }\n  to {\n    max-height: 0;\n    opacity: 0;\n    padding-bottom: 0;\n    padding-top: 0;\n    transform: translateY(25%);\n  }\n}\n"],"names":[],"version":3,"file":"toast.css.map"}