mirror of
https://github.com/ckaczor/azuredatastudio.git
synced 2026-01-27 01:25:36 -05:00
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:
98
src/sql/workbench/browser/modal/media/calloutDialog.css
Normal file
98
src/sql/workbench/browser/modal/media/calloutDialog.css
Normal 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;
|
||||
}
|
||||
Reference in New Issue
Block a user