calloutDialog refactor - new superclasses for insert image and insert link (#14385)

* calloutDialog refactor - split code specific to image and link into their own super classes. Moved callout styles into a new stylesheet.

* Image and Link inserts working.

* Stylesheets cleanup. Refactor cleanup.

* Removed CSS comment. Added missing image callout style. Revised generic open and cancel classes. Moved all remaining localized strings into shared constants file.
This commit is contained in:
Hale Rankin
2021-02-25 14:44:25 -08:00
committed by GitHub
parent 4053666bef
commit 9e02cf86a4
9 changed files with 539 additions and 398 deletions

View File

@@ -0,0 +1,98 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
.modal.callout-dialog {
background-color: transparent;
}
.modal.callout-dialog .modal-dialog {
border-radius: 2px;
box-shadow: 0px 3px 8px rgba(var(--foreground));
max-height: 300px;
position: absolute;
}
.modal.callout-dialog .modal-content p {
margin: 0;
}
.modal.callout-dialog .modal-content .button-icon {
cursor: pointer;
margin-left: 10px;
}
.modal.callout-dialog .modal-content .row {
margin-bottom: 16px;
}
.hc-black .modal.callout-dialog .modal-dialog {
box-shadow: none;
}
.callout-arrow:before {
border-width: 1px;
border-style: solid;
border-color:
transparent
transparent
var(--bodybackground)
var(--bodybackground);
box-shadow: -3px 3px 3px 0 rgba(var(--foreground));
content: '';
display: block;
height: 0;
position: absolute;
width: 0;
}
.callout-arrow.from-below:before {
border-width: 0.5em;
left: 2em;
top: -0.2em;
transform: rotate(135deg);
}
.callout-arrow.from-left:before {
background-color: var(--bodybackground);
height: 26px;
right: -13px;
top: 26px;
transform: rotate(-135deg);
width: 26px;
}
.hc-black .callout-arrow:before {
background-color: var(--bodybackground);
border-color:
transparent
transparent
var(--border)
var(--border);
border-width: 0.1em;
box-shadow: none;
height: 0.8em;
width: 0.8em;
}
.hc-black .callout-arrow.from-below:before {
top: -0.4em;
}
.hc-black .callout-arrow.from-left:before {
height: 2em;
right: -1.2em;
width: 2em;
}
.modal.callout-dialog .modal-header {
padding: 18px 24px 8px 24px;
}
.modal.callout-dialog .modal-footer {
padding: 15px 24px 15px 24px;
}
.modal.callout-dialog .modal-body {
padding: 8px 24px;
}
.modal.callout-dialog.compact .modal-header {
padding: 16px 24px 4px 24px;
}
.modal.callout-dialog.compact .modal-body {
padding: 4px 24px 16px 24px;
}