@esri/calcite-components 1.0.0-next.337 → 1.0.0-next.340

package/dist/collection/components/calcite-modal/calcite-modal.css

@@ -1,63 +1,54 @@
 /* mixins & extensions */
-
 @keyframes in {
   0% {
     opacity: 0;
   }
-
   100% {
     opacity: 1;
   }
 }
-
 @keyframes in-down {
   0% {
     opacity: 0;
     transform: translate3D(0, -5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-up {
   0% {
     opacity: 0;
     transform: translate3D(0, 5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-scale {
   0% {
     opacity: 0;
     transform: scale3D(0.95, 0.95, 1);
   }
-
   100% {
     opacity: 1;
     transform: scale3D(1, 1, 1);
   }
 }
-
 :root {
-  --calcite-internal-animation-timing-factor: var(--calcite-animation-timing-factor, 1);
-  --calcite-internal-animation-timing: calc(150ms * var(--calcite-internal-animation-timing-factor));
-  --calcite-internal-animation-timing-quick: calc(100ms * var(--calcite-internal-animation-timing-factor));
-  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-animation-timing-factor));
-  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
+  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));
 }
 
 .calcite-animate {
   opacity: 0;
   animation-fill-mode: both;
-  animation-duration: var(--calcite-internal-animation-timing);
+  animation-duration: var(--calcite-animation-timing);
 }
 
 .calcite-animate__in {
@@ -79,7 +70,6 @@
 /**
 * Currently only used in Checkbox.
 */
-
 :root {
   --calcite-popper-transition: 150ms ease-in-out;
 }
@@ -99,16 +89,15 @@
 * @prop --calcite-modal-title-text: the font-size of the modal title
 * @prop --calcite-scrim-background: the semi-transparent background color behind modal
 */
-
 :host {
   position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
   overflow-y: hidden;
   color: var(--calcite-ui-text-2);
   opacity: 0;
@@ -141,26 +130,28 @@
 .scrim {
   --calcite-scrim-background: rgba(0, 0, 0, 0.75);
   position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
   display: flex;
   overflow-y: hidden;
 }
 
 .modal {
-  display: flex;
-  flex-direction: column;
-  box-shadow: 0 2px 12px -4px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.16);
-  box-sizing: border-box;
+  pointer-events: none;
   float: none;
   margin: 1.5rem;
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  flex-direction: column;
   border-radius: 0.25rem;
   background-color: var(--calcite-ui-foreground-1);
-  width: 100%;
   opacity: 0;
-  pointer-events: none;
+  --tw-shadow: 0 2px 12px -4px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.16);
+  --tw-shadow-colored: 0 2px 12px -4px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   overflow: hidden;
   z-index: 102;
   -webkit-overflow-scrolling: touch;
@@ -174,11 +165,10 @@
   visibility: visible !important;
   transition-delay: 0ms;
 }
-
 :host([active]) .modal {
-  opacity: 1;
   pointer-events: auto;
   visibility: visible;
+  opacity: 1;
   transform: translate3d(0, 0, 0);
   transition: transform var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), visibility 0ms linear, opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-width var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-height var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);
   transition-delay: 0ms;
@@ -187,70 +177,65 @@
 /**
  * Header
  */
-
 .header {
   display: flex;
+  min-width: 0px;
   max-width: 100%;
-  min-width: 0;
   border-top-left-radius: 0.25rem;
   border-top-right-radius: 0.25rem;
-  background-color: var(--calcite-ui-foreground-1);
-  border-width: 0;
+  border-width: 0px;
   border-bottom-width: 1px;
   border-style: solid;
   border-color: var(--calcite-ui-border-3);
+  background-color: var(--calcite-ui-foreground-1);
   flex: 0 0 auto;
   z-index: 2;
 }
 
 .close {
-  margin: 0;
+  order: 2;
+  margin: 0px;
+  cursor: pointer;
   -webkit-appearance: none;
           appearance: none;
   border-style: none;
-  color: var(--calcite-ui-text-3);
-  order: 2;
-  cursor: pointer;
   background-color: transparent;
-  transition-property: all;
-  transition-duration: var(--calcite-internal-animation-timing);
-  transition-timing-function: ease-in-out;
-  transition-delay: 0s;
+  color: var(--calcite-ui-text-3);
   outline-offset: 0;
   outline-color: transparent;
   transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
+  transition-property: all;
+  transition-duration: var(--calcite-animation-timing);
+  transition-timing-function: ease-in-out;
+  transition-delay: 0s;
   border-start-end-radius: 0.25rem;
   padding: var(--calcite-modal-padding);
   flex: 0 0 auto;
 }
-
 .close calcite-icon {
   pointer-events: none;
   vertical-align: -2px;
 }
-
 .close:focus {
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: -2px;
 }
-
 .close:hover, .close:focus, .close:active {
   background-color: var(--calcite-ui-foreground-2);
   color: var(--calcite-ui-text-1);
 }
 
 .title {
+  order: 1;
   display: flex;
+  min-width: 0px;
   align-items: center;
-  order: 1;
-  min-width: 0;
   flex: 1 1 auto;
   padding: var(--calcite-modal-padding) var(--calcite-modal-padding-large);
 }
 
-slot[name=header]::slotted(*),
-*::slotted([slot=header]) {
-  margin: 0;
+slot[name=header]::slotted(*), *::slotted([slot=header]) {
+  margin: 0px;
   font-weight: var(--calcite-font-weight-normal);
   color: var(--calcite-ui-text-1);
   font-size: var(--calcite-modal-title-text);
@@ -259,15 +244,14 @@ slot[name=header]::slotted(*),
 /**
  * Content area
  */
-
 .content {
   position: relative;
-  padding: 0;
+  box-sizing: border-box;
+  display: block;
   height: 100%;
   overflow: auto;
-  display: block;
   background-color: var(--calcite-ui-foreground-1);
-  box-sizing: border-box;
+  padding: 0px;
   max-height: calc(100vh - 12rem);
   z-index: 1;
 }
@@ -293,27 +277,25 @@ slot[name=content]::slotted(*),
 /**
  * Footer
  */
-
 .footer {
-  display: flex;
-  justify-content: space-between;
   margin-top: auto;
   box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
   border-bottom-right-radius: 0.25rem;
   border-bottom-left-radius: 0.25rem;
-  width: 100%;
-  background-color: var(--calcite-ui-foreground-1);
-  border-width: 0;
+  border-width: 0px;
   border-top-width: 1px;
   border-style: solid;
   border-color: var(--calcite-ui-border-3);
+  background-color: var(--calcite-ui-foreground-1);
   flex: 0 0 auto;
   padding: var(--calcite-modal-padding) var(--calcite-modal-padding-large);
   z-index: 2;
 }
 
-.footer--hide-back .back,
-.footer--hide-secondary .secondary {
+.footer--hide-back .back, .footer--hide-secondary .secondary {
   display: none;
 }
 
@@ -323,9 +305,9 @@ slot[name=content]::slotted(*),
 }
 
 .secondary {
-  display: block;
   margin-left: 0.25rem;
   margin-right: 0.25rem;
+  display: block;
 }
 
 slot[name=primary] {
@@ -335,7 +317,6 @@ slot[name=primary] {
 /**
  * Sizes
  */
-
 :host([width=small]) .modal {
   width: auto;
 }
@@ -345,15 +326,24 @@ slot[name=primary] {
 }
 
 @media screen and (max-width: 35rem) {
+  :host([width=s]) .modal {
+    margin: 0px;
+  }
   :host([width=s]) .modal {
     height: 100%;
+  }
+  :host([width=s]) .modal {
     max-height: 100%;
+  }
+  :host([width=s]) .modal {
     width: 100%;
+  }
+  :host([width=s]) .modal {
     max-width: 100%;
-    margin: 0;
-    border-radius: 0;
   }
-
+  :host([width=s]) .modal {
+    border-radius: 0px;
+  }
   :host([width=s]) .content {
     flex: 1 1 auto;
     max-height: unset;
@@ -363,21 +353,29 @@ slot[name=primary] {
     align-items: flex-end;
   }
 }
-
 :host([width=m]) .modal {
   max-width: 48rem;
 }
 
 @media screen and (max-width: 51rem) {
+  :host([width=m]) .modal {
+    margin: 0px;
+  }
   :host([width=m]) .modal {
     height: 100%;
+  }
+  :host([width=m]) .modal {
     max-height: 100%;
+  }
+  :host([width=m]) .modal {
     width: 100%;
+  }
+  :host([width=m]) .modal {
     max-width: 100%;
-    margin: 0;
-    border-radius: 0;
   }
-
+  :host([width=m]) .modal {
+    border-radius: 0px;
+  }
   :host([width=m]) .content {
     flex: 1 1 auto;
     max-height: unset;
@@ -387,21 +385,29 @@ slot[name=primary] {
     align-items: flex-end;
   }
 }
-
 :host([width=l]) .modal {
   max-width: 94rem;
 }
 
 @media screen and (max-width: 97rem) {
+  :host([width=l]) .modal {
+    margin: 0px;
+  }
   :host([width=l]) .modal {
     height: 100%;
+  }
+  :host([width=l]) .modal {
     max-height: 100%;
+  }
+  :host([width=l]) .modal {
     width: 100%;
+  }
+  :host([width=l]) .modal {
     max-width: 100%;
-    margin: 0;
-    border-radius: 0;
   }
-
+  :host([width=l]) .modal {
+    border-radius: 0px;
+  }
   :host([width=l]) .content {
     flex: 1 1 auto;
     max-height: unset;
@@ -411,24 +417,20 @@ slot[name=primary] {
     align-items: flex-end;
   }
 }
-
 /**
  * Fullscreen
  */
-
 :host([fullscreen]) {
   background-color: transparent;
 }
-
 :host([fullscreen]) .modal {
+  margin: 0px;
   height: 100%;
   max-height: 100%;
   width: 100%;
   max-width: 100%;
-  margin: 0;
   transform: translate3D(0, 20px, 0) scale(0.95);
 }
-
 :host([fullscreen]) .content {
   max-height: 100%;
   flex: 1 1 auto;
@@ -437,11 +439,9 @@ slot[name=primary] {
 :host([active][fullscreen]) .modal {
   transform: translate3D(0, 0, 0) scale(1);
 }
-
 :host([active][fullscreen]) .header {
   border-radius: 0;
 }
-
 :host([active][fullscreen]) .footer {
   border-radius: 0;
 }
@@ -449,21 +449,17 @@ slot[name=primary] {
 /**
  * Docked
  */
-
 :host([docked]) .modal {
   height: auto;
 }
-
 :host([docked]) .content {
   height: auto;
   flex: 1 1 auto;
 }
-
 @media screen and (max-width: 860px) {
   :host([docked]) .modal {
     border-radius: var(--calcite-border-radius) var(--calcite-border-radius) 0 0;
   }
-
   :host([docked]) .close {
     border-start-end-radius: var(--calcite-border-radius);
   }
@@ -472,7 +468,6 @@ slot[name=primary] {
 /**
  * Colors
  */
-
 :host([color=red]) .modal {
   border-color: var(--calcite-ui-danger);
 }
@@ -481,48 +476,46 @@ slot[name=primary] {
   border-color: var(--calcite-ui-info);
 }
 
-:host([color=red]) .modal,
-:host([color=blue]) .modal {
-  border-width: 0;
+:host([color=red]) .modal, :host([color=blue]) .modal {
+  border-width: 0px;
   border-top-width: 4px;
   border-style: solid;
 }
-
-:host([color=red]) .header,
-:host([color=blue]) .header {
+:host([color=red]) .header, :host([color=blue]) .header {
   border-radius: 0.25rem;
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0px;
+  border-bottom-left-radius: 0px;
 }
 
 /**
  * Tablet
  */
-
 @media screen and (max-width: 860px) {
-  slot[name=header]::slotted(*),
-*::slotted([slot=header]) {
+  slot[name=header]::slotted(*), *::slotted([slot=header]) {
     font-size: var(--calcite-font-size-1);
   }
 
   .footer {
     position: sticky;
-    bottom: 0;
   }
-}
 
+  .footer {
+    bottom: 0px;
+  }
+}
 /**
  * Mobile
  */
-
 @media screen and (max-width: 480px) {
   .footer {
     flex-direction: column;
   }
 
-  .back,
-.secondary {
-    margin: 0;
+  .back, .secondary {
+    margin: 0px;
+  }
+
+  .back, .secondary {
     margin-bottom: 0.25rem;
   }
 }