playbook_ui 12.32.0 → 12.33.0

data/app/pb_kits/playbook/pb_dialog/_dialog.scss

@@ -7,351 +7,356 @@
 @import "../tokens/animation-curves";
 @import "../tokens/positioning";
 
-
-
-// Dialog Animations
-// Dialog Animations for fading in and out from the center
+// Dialog animations
+// Dialog animations for fading in and out from the center
 @keyframes modalFadeIn {
-	from {
-		transform: translate3d(0, -100%, 0);
-		opacity: 0;
-	}
-	to {
-		transform: translate3d(0, 0, 0);
-		opacity: 1;
-	}
+  from {
+    transform: translate3d(0, -100%, 0);
+    opacity: 0;
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
 }
 
 @keyframes modalFadeOut {
-	from {
-		transform: translate3d(0, 0, 0);
-		opacity: 1;
-	}
-	to {
-		transform: translate3d(0, -50%, 0);
-		opacity: 0;
-	}
+  from {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+  to {
+    transform: translate3d(0, -50%, 0);
+    opacity: 0;
+  }
 }
 
-// Dialog Animations for fading in and out from the left side
+// Dialog animations for fading in and out from the left side
 @keyframes modalFadeInLeft {
-	from {
-		transform: translate3d(-100%, 0, 0);
-		opacity: 0;
-	}
-	to {
-		transform: translate3d(0, 0, 0);
-		opacity: 1;
-	}
+  from {
+    transform: translate3d(-100%, 0, 0);
+    opacity: 0;
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
 }
 
 @keyframes modalFadeOutLeft {
-	from {
-		transform: translate3d(0, 0, 0);
-		opacity: 1;
-	}
-	to {
-		transform: translate3d(-50%, 0, 0);
-		opacity: 0;
-	}
+  from {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+  to {
+    transform: translate3d(-50%, 0, 0);
+    opacity: 0;
+  }
 }
 
 
-// Dialog Animations for fading in and out from the right side
+// Dialog animations for fading in and out from the right side
 @keyframes modalFadeInRight {
-	from {
-		transform: translate3d(100%, 0, 0);
-		opacity: 0;
-	}
-	to {
-		transform: translate3d(0, 0, 0);
-		opacity: 1;
-	}
+  from {
+    transform: translate3d(100%, 0, 0);
+    opacity: 0;
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
 }
 
 @keyframes modalFadeOutRight {
-	from {
-		transform: translate3d(0, 0, 0);
-		opacity: 1;
-	}
-	to {
-		transform: translate3d(50%, 0, 0);
-		opacity: 0;
-	}
+  from {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+  to {
+    transform: translate3d(50%, 0, 0);
+    opacity: 0;
+  }
 }
 
 @keyframes overlayFade {
-	from {
-		opacity: 0;
-		transform: translateY(0);
-	}
-	to {
-		opacity: 1;
-		transform: translateY(0);
-	}
+  from {
+    opacity: 0;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 @keyframes overlayFadeOut {
-	from {
-		opacity: 1;
-	}
-	to {
-		opacity: 0;
-	}
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
 }
 
 // Dialog Styles
-
 .pb_dialog {
 
-	// Local Variables
-	$gutter: $space_lg;
-	$small: 300px;
-	$status_size: 375px;
-	$medium: 500px;
-	$large: 800px;
-	$xlarge: 1150px;
-	$animation-duration: .2s;
-	$z-index: 100;
-	$opacity_visible: 1;
-	$opacity_hidden: 0;
-
-	.dialog_sticky_header {
-	position: sticky;
-	top: 0;
-	background-color: $white;
-	z-index: $z_8;
-	}
-
-	// @include pb_card;
-	background-color: $white;
-	box-shadow: $shadow_deepest;
-	border: 0;
-	border-radius: $border_radius_md;
-	max-height: calc(100vh - #{$gutter * 2});
-	max-width: calc(100vw - #{$gutter * 2});
-	overflow: auto;
-	animation-name: modalFadeIn;
-	animation-duration: $animation-duration;
-	outline: none;
-	animation-timing-function: $easeInOutQuint;
-	
-	&[class*="_left"] {
-		animation-name: modalFadeInLeft;
-		&[class*="_before_close"] {
-			animation-name: modalFadeOutLeft;
-			animation-duration: $animation-duration;
-			opacity: $opacity_hidden;
-		}
-	}
-
-	&[class*="_right"] {
-		animation-name: modalFadeInRight;
-		&[class*="_before_close"] {
-			animation-name: modalFadeOutRight;
-			animation-duration: $animation-duration;
-			opacity: $opacity_hidden;
-		}
-	}
-	
-	&[class*="_status_size"] {
-		width: $status_size;
-	}
-
-	&[class*="_sm"] {
-		width: $small;
-	}
-
-	&[class*="_md"] {
-		width: $medium;
-	}
-	
-
-	&[class*="_lg"] {
-		width: $large;
-	}
-
-	&_body_open {
-		overflow: hidden;
-	}
-
-	&_after_open {
-		opacity: $opacity_visible;
-	}
-
-	&[class*="_before_close"] {
-		animation-name: modalFadeOut;
-		animation-duration: $animation-duration;
-		opacity: $opacity_hidden;
-	}
-
-	&_close_icon {
-		cursor: pointer;
-	}
-
-	&_overlay {
-		position: fixed;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		background-color: rgba($bg_dark, $opacity_4);
-		z-index: $z-index;
-		animation-name: overlayFade;
-		animation-duration: $animation-duration;
-
-		&_after_open {
-			opacity: $opacity_visible;
-		}
-		&_before_close {
-			animation-name: overlayFadeOut;
-			animation-duration: $animation-duration;
-			opacity: $opacity_hidden;
-		}
-		&[class*="full_height"] {
-			&[class*="_left"]{
-				justify-content: flex-start;
-			}
-			
-			&[class*="_center"]{
-				justify-content: center;
-			}
-
-			&[class*="_right"]{
-				justify-content: flex-end;
-			}
-
-			.pb_dialog {
-				border-radius: 0;
-				height: 100%;
-				max-height: 100%;
-				max-width: none;
-				//this empty div only has height when dialog is full height. 
-				//fix for dialog body content disappearing behind sticky footer
-				.dialog-pseudo-footer {
-					height: $space_xl * 2;
-				}
-				.dialog_footer {
-					position:fixed;
-					bottom: 0;
-					background-color: $white;
-				}
-				
-				&[class*="_sm"] {
-					width: $medium;
-					.dialog_footer {
-						width: $medium;
-					}
-				}
-				&[class*="_md"] {
-					width: $large;
-					.dialog_footer {
-						width: $large;
-					}
-				}
-				&[class*="_lg"] {
-					width: $xlarge;
-					.dialog_footer {
-						width: $xlarge;
-					}
-				}
-			} 
-		}
-	}	
+  // Local Variables
+  $gutter: $space_lg;
+  $small: 300px;
+  $status_size: 375px;
+  $medium: 500px;
+  $large: 800px;
+  $xlarge: 1150px;
+  $animation-duration: .2s;
+  $z-index: 100;
+  $opacity_visible: 1;
+  $opacity_hidden: 0;
+
+  .dialog_sticky_header {
+    position: sticky;
+    top: 0;
+    background-color: $white;
+    z-index: $z_8;
+  }
+
+  .dialog_status_text_align {
+    text-align: center;
+  }
+
+  // @include pb_card;
+  background-color: $white;
+  box-shadow: $shadow_deepest;
+  border: 0;
+  border-radius: $border_radius_md;
+  max-height: calc(100vh - #{$gutter * 2});
+  max-width: calc(100vw - #{$gutter * 2});
+  overflow: auto;
+  animation-name: modalFadeIn;
+  animation-duration: $animation-duration;
+  outline: none;
+  animation-timing-function: $easeInOutQuint;
+
+  &[class*="_left"] {
+    animation-name: modalFadeInLeft;
+    &[class*="_before_close"] {
+      animation-name: modalFadeOutLeft;
+      animation-duration: $animation-duration;
+      opacity: $opacity_hidden;
+    }
+  }
+
+  &[class*="_right"] {
+    animation-name: modalFadeInRight;
+    &[class*="_before_close"] {
+      animation-name: modalFadeOutRight;
+      animation-duration: $animation-duration;
+      opacity: $opacity_hidden;
+    }
+  }
+
+  &[class*="_status_size"] {
+    width: $status_size;
+  }
+
+  &[class*="_sm"] {
+    width: $small;
+  }
+
+  &[class*="_md"] {
+    width: $medium;
+  }
+
+  &[class*="_lg"] {
+    width: $large;
+  }
+
+  &_body_open {
+    overflow: hidden;
+  }
+
+  &_after_open {
+    opacity: $opacity_visible;
+  }
+
+  &[class*="_before_close"] {
+    animation-name: modalFadeOut;
+    animation-duration: $animation-duration;
+    opacity: $opacity_hidden;
+  }
+
+  &_close_icon {
+    cursor: pointer;
+  }
+
+  &_overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba($bg_dark, $opacity_4);
+    z-index: $z-index;
+    animation-name: overlayFade;
+    animation-duration: $animation-duration;
+
+    &_after_open {
+      opacity: $opacity_visible;
+    }
+    &_before_close {
+      animation-name: overlayFadeOut;
+      animation-duration: $animation-duration;
+      opacity: $opacity_hidden;
+    }
+    &[class*="full_height"] {
+      &[class*="_left"]{
+        justify-content: flex-start;
+      }
+
+      &[class*="_center"]{
+        justify-content: center;
+      }
+
+      &[class*="_right"]{
+        justify-content: flex-end;
+      }
+
+      .pb_dialog {
+        border-radius: 0;
+        height: 100%;
+        max-height: 100%;
+        max-width: none;
+        // This empty div only has height when dialog is full height
+        // Fix for dialog body content disappearing behind sticky footer
+        .dialog-pseudo-footer {
+          height: $space_xl * 2;
+        }
+        .dialog_footer {
+          position:fixed;
+          bottom: 0;
+          background-color: $white;
+        }
+
+        &[class*="_sm"] {
+          width: $medium;
+          .dialog_footer {
+            width: $medium;
+          }
+        }
+        &[class*="_md"] {
+          width: $large;
+          .dialog_footer {
+            width: $large;
+          }
+        }
+        &[class*="_lg"] {
+          width: $xlarge;
+          .dialog_footer {
+            width: $xlarge;
+          }
+        }
+      }
+    }
+  }
 }
 
-//styles specific to rails version of kit
-// rails version has own wrapper because of the way the overlay functions for the HTML dialog used to create this
+// Styles specific to Rails version of kit
+// Rails version has own wrapper because of the way the overlay functions for the HTML dialog used to create this
 .pb_dialog_wrapper_rails {
-	$medium: 500px;
-    $large: 800px;
-    $xlarge: 1150px;
-
-	&[class*="full_height"] {
-		&[class*="_left"]{
-			.pb_dialog_rails {
-				margin: unset !important;
-				margin-right: auto !important;
-			}
-		}
-		
-		&[class*="_center"]{
-			justify-content: center;
-		}
-
-		&[class*="_right"]{
-			.pb_dialog_rails {
-				margin: unset !important;
-				margin-left: auto !important;
-			}
-		}
-
-		.pb_dialog {
-			border-radius: 0;
-			height: 100% !important;
-			max-height: 100% !important;
-			max-width: 100%;
-			//this empty div only has height when dialog is full height. 
-			//fix for dialog body content disappearing behind sticky footer
-			.dialog-pseudo-footer {
-				height: $space_xl * 2;
-			}
-			.dialog_footer {
-				position:fixed;
-				bottom: 0;
-				background-color: $white;
-			}
-			&[class*="_sm"] {
-				width: $medium;
-				.dialog_footer {
-					width: $medium;
-				}
-			}
-			&[class*="_md"] {
-				width: $large;
-				.dialog_footer {
-					width: $large;
-				}
-			}
-			&[class*="_lg"] {
-				width: $xlarge;
-				.dialog_footer {
-					width: $xlarge;
-				}
-			}
-		} 
-	}
-
-	// fixes for stylesheets in nitro that were conflicting with our kit. DO NOT REMOVE. 
-	//conflicts were only apparent in nitro, not in playbook local env
-	.pb_dialog_rails {
-		position: fixed !important;
-		top: 0 !important;
-		padding: unset !important;
-		margin: auto;
-	
-	}
-	//overlay for rails kit
-	dialog::backdrop {
-		position: fixed;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		background-color: rgba($bg_dark, $opacity_4);
-		animation-name: overlayFade;
-		animation-duration: 0.2s;	
-	}
-
-	.dialog-button-class {
-		background-color: unset;
-		border: none;
-		cursor: pointer;
-	}
+  $medium: 500px;
+  $large: 800px;
+  $xlarge: 1150px;
+
+  .dialog_status_text_align {
+    text-align: center;
+  }
+
+  &[class*="full_height"] {
+    &[class*="_left"]{
+      .pb_dialog_rails {
+        margin: unset !important;
+        margin-right: auto !important;
+      }
+    }
+
+    &[class*="_center"]{
+      justify-content: center;
+    }
+
+    &[class*="_right"]{
+      .pb_dialog_rails {
+        margin: unset !important;
+        margin-left: auto !important;
+      }
+    }
+
+    .pb_dialog {
+      border-radius: 0;
+      height: 100% !important;
+      max-height: 100% !important;
+      max-width: 100%;
+      // This empty div only has height when dialog is full height.
+      // Fix for dialog body content disappearing behind sticky footer
+      .dialog-pseudo-footer {
+        height: $space_xl * 2;
+      }
+      .dialog_footer {
+        position:fixed;
+        bottom: 0;
+        background-color: $white;
+      }
+      &[class*="_sm"] {
+        width: $medium;
+        .dialog_footer {
+          width: $medium;
+        }
+      }
+      &[class*="_md"] {
+        width: $large;
+        .dialog_footer {
+          width: $large;
+        }
+      }
+      &[class*="_lg"] {
+        width: $xlarge;
+        .dialog_footer {
+          width: $xlarge;
+        }
+      }
+    }
+  }
+
+  // Fixes for stylesheets in nitro that were conflicting with our kit. DO NOT REMOVE.
+  // Conflicts were only apparent in nitro, not in playbook local env
+  .pb_dialog_rails {
+    position: fixed !important;
+    top: 0 !important;
+    padding: unset !important;
+    margin: auto;
+
+  }
+
+  // Overlay for rails kit
+  dialog::backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba($bg_dark, $opacity_4);
+    animation-name: overlayFade;
+    animation-duration: 0.2s;
+  }
+
+  .dialog-button-class {
+    background-color: unset;
+    border: none;
+    cursor: pointer;
+  }
 }