Connection error box style fix (#14469)

* Modified modal styles, limiting height of basic modal to 480px.

* wip - added new attachCalloutDialogStyler. Moved callout-specific styler code out of modal.ts

* Moved attach styler code to workbench/common. Added custom styles to imageCalloutDialog

* Moved styler code into calloutDialog. Added callout-specific theme colors to colorRegistry. Removed color styles from modal and callout stylesheets.

* Added CalloutDialogModal that extends CalloutDialog so that the callout can be instantiated from core. Revised calloutDialog so the position cn be passed in from where it is instantiated.

* Revised refactor of modal and image/link callouts so that callout dialog invoked by core can also use the styler. Removed unused properties from dialog code.

* Added conditional to dialogModal to use correct styler for callouts.

* Cleaned up styles. Modified custom colors.

* Wrapped call to positionCalloutDialog in conditional.

* Style, colors, styler and modal updates to align callout with latest OPAC toolkit styles.

* Moved calloutDialog stylesheet

* Consolidated styler code and added a flexible custom styler to provide values for dialogModal

* Added image callout code.

* Remove image callout dialog until wired fully

* Test fixes

Co-authored-by: chlafreniere <hichise@gmail.com>
This commit is contained in:
Hale Rankin
2021-03-05 17:34:02 -08:00
committed by GitHub
parent 0ef99ab42a
commit 972b649beb
11 changed files with 235 additions and 166 deletions

View File

@@ -8,7 +8,8 @@
}
.modal.callout-dialog .modal-dialog {
border-radius: 2px;
box-shadow: 0px 3px 8px rgba(var(--foreground));
border-width: 1px;
border-style: solid;
max-height: 300px;
position: absolute;
}
@@ -28,60 +29,37 @@
}
.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));
border-width: 1px;
content: '';
display: block;
height: 0;
height: 10px;
position: absolute;
width: 0;
width: 10px;
}
.callout-arrow.from-below:before {
border-width: 0.5em;
left: 2em;
top: -0.2em;
left: 24px;
top: -6px;
transform: rotate(135deg);
}
.callout-arrow.from-above:before {
border-width: 0.5em;
left: 2em;
bottom: -0.2em;
bottom: -6px;
left: 24px;
transform: rotate(-45deg);
}
.callout-arrow.from-left:before {
background-color: var(--bodybackground);
height: 26px;
right: -13px;
right: -14px;
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;
box-shadow: none;
}
.modal.callout-dialog .modal-header {