app/assets/stylesheets/alchemy/dialogs.scss
$dialog-transition-duration: 150ms;
.alchemy-image-overlay-container,
.alchemy-dialog-container {
position: fixed;
overflow: auto;
top: 0;
left: 0;
z-index: 100;
width: 100%;
height: 100%;
text-align: center;
white-space: nowrap;
opacity: 0;
transform: scale(0.98);
transition-property: transform, opacity;
transition-duration: $dialog-transition-duration;
transition-timing-function: ease-in;
// vertical aligment
&:before {
content: "";
width: 0;
height: 100%;
display: inline-block;
vertical-align: middle;
margin-right: -0.25em;
}
&.open {
opacity: 1;
transform: scale(1);
}
}
.alchemy-image-overlay,
.alchemy-dialog-overlay {
position: fixed;
top: 0;
left: 0;
z-index: 30;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0);
transition: background-color $dialog-transition-duration linear;
&.closable {
cursor: pointer;
}
}
.alchemy-dialog-overlay {
&.open {
background-color: rgba($dialog-overlay-color, $dialog-overlay-opacity);
}
}
.alchemy-dialog,
.alchemy-image-overlay-dialog {
position: relative;
max-width: calc(100vw - 16px);
display: inline-block;
vertical-align: middle;
text-align: left;
}
.alchemy-dialog {
white-space: normal;
margin: 2 * $default-margin;
@include border-top-radius($default-border-radius);
box-shadow: $dialog-box-shadow;
background-color: $dialog-background-color;
transition: min-height $dialog-transition-duration ease-in-out;
div#jscropper {
padding: 2 * $default-padding;
.thumbnail_background {
width: 800px;
height: 600px;
position: relative;
}
form,
.info.message {
position: absolute;
right: 2 * $default-padding;
width: 256px;
}
.info.message {
top: 2 * $default-padding;
margin: 0 0 0 8px;
padding: 0 8px 0 32px;
}
.jcrop-holder {
display: inline-block;
}
img {
width: auto;
max-height: 600px;
}
form {
padding: 0;
bottom: 2 * $default-padding;
margin-left: 8px;
button {
margin-bottom: 0;
width: calc(50% - #{$default-padding});
}
button[type="submit"] {
float: right;
}
}
}
}
.alchemy-dialog-header {
display: flex;
align-items: center;
gap: $default-padding;
position: relative;
height: $dialog-header-height;
padding: $dialog-header-padding;
background: $dialog-header-color;
color: $dialog-header-text-color;
font-weight: normal;
font-size: $dialog-header-font-size;
@include border-top-radius($default-border-radius);
}
.alchemy-dialog-title {
flex-grow: 1;
font-weight: bold;
padding: 0 $default-padding;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@include antialiased-font-smoothing;
}
.alchemy-image-overlay-close,
.alchemy-dialog-close {
cursor: pointer;
height: 16px;
.icon {
fill: currentColor;
}
}
.alchemy-dialog-body {
position: relative;
color: $text-color;
.message {
margin: 8px;
}
&.padded {
padding: 4 * $default-padding;
.message {
margin: 0 0 8px 0;
}
}
.buttons {
text-align: right;
label {
float: left;
margin-top: 12px;
}
}
}
.alchemy-dialog-buttons {
padding-top: 4 * $default-padding;
text-align: right;
button:first-child {
margin-right: 2 * $default-margin;
}
}
#overlay_tabs {
margin: -4 * $default-padding;
}