Unverified Commit d2cf243c authored by alexpott's avatar alexpott

Issue #3023311 by bnjmnm, huzooka, kostyashupenko, boulaffasae, nod_,...

Issue #3023311 by bnjmnm, huzooka, kostyashupenko, boulaffasae, nod_, mrinalini9, codersukanta, lauriii, fhaeberle, ckrina, Peter Majmesku, andrewmacpherson, saschaeggi, antonellasevero, DyanneNova, thekishanraval: Modal dialog style update

(cherry picked from commit 74bad3ce)
parent 4510338c
......@@ -38,6 +38,11 @@ libraries-override:
theme:
css/system.admin.css: false
core/drupal.dialog.off_canvas:
css:
base:
misc/dialog/off-canvas.theme.css: css/base/off-canvas.theme.css
core/drupal.dropbutton:
css:
component:
......@@ -117,6 +122,8 @@ libraries-extend:
- claro/views
media/media_embed_ckeditor_theme:
- claro/classy.media_embed_ckeditor_theme
media_library/ui:
- claro/media_library.ui
media_library/view:
- claro/media_library.theme
media_library/widget:
......
......@@ -259,6 +259,14 @@ media_library.theme:
theme:
css/theme/media-library.css: {}
media_library.ui:
version: VERSION
css:
component:
css/components/media-library.ui.css : {}
js:
js/media-library.ui.js: { weight: -1 }
progress:
version: VERSION
css:
......
......@@ -39,6 +39,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
/**
* jQuery.UI dialog.
*/
/**
* Progress bar.
*/
......
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/2815083
* @preserve
*/
/**
* @file
* Styling for the off-canvas ui dialog.
*
* Contains overrides for jQuery UI dialog.
*/
:root {
/*
* Color Palette.
*/
/* Secondary. */
/* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
/*
* Base.
*/
/*
* Typography.
*/ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
/**
* Spaces.
*/ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
/*
* Common.
*/
/*
* Inputs.
*/ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
/*
* Details.
*/
/**
* Buttons.
*/
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
/**
* jQuery.UI dialog.
*/
/**
* Progress bar.
*/
/**
* Tabledrag icon size.
*/ /* 17px */
/**
* Ajax progress.
*/
/**
* Breadcrumb.
*/
}
/* Style the dialog-off-canvas container. */
.ui-dialog.ui-dialog-off-canvas {
/* Layer the dialog just under the toolbar. */
z-index: 501;
padding: 0;
color: #ddd;
border-radius: 0;
background: #444;
box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.3333);
}
.ui-widget.ui-dialog.ui-dialog-off-canvas {
border: 1px solid transparent;
}
/* Style the off-canvas dialog header. */
.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar {
padding: 0.75rem 3rem 0.75rem 1rem; /* LTR */
border: 0;
border-bottom: 1px solid #000;
border-radius: 0;
background: #2d2d2d;
line-height: 1.5;
}
[dir="rtl"] .ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar {
padding-right: 1rem;
padding-left: 3rem;
}
.ui-dialog.ui-dialog-off-canvas .ui-dialog-title {
/* Push the text away from the icon. */
padding-left: 1.75rem; /* LTR */
/* Ensure that long titles are not truncated. */
white-space: normal;
background: transparent url(../../../../misc/icons/ffffff/pencil.svg);
background-repeat: no-repeat;
background-position: 0 50%; /* LTR */
background-size: 1.25rem 1.25rem;
font-size: 1rem;
}
[dir="rtl"] .ui-dialog.ui-dialog-off-canvas .ui-dialog-title {
padding-right: 1.75rem;
padding-left: 0;
background-position: 100% 50%;
}
.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close {
margin-right: 1rem;
margin-left: 1rem;
}
/* Override default styling from jQuery UI. */
#drupal-off-canvas .ui-state-default,
#drupal-off-canvas .ui-widget-content .ui-state-default,
#drupal-off-canvas .ui-widget-header .ui-state-default {
color: #333;
border: 0;
font-size: 0.889rem;
font-weight: normal;
}
#drupal-off-canvas .ui-widget-content a {
color: #85bef4;
}
/**
* @file
* Styling for the off-canvas ui dialog.
*
* Contains overrides for jQuery UI dialog.
*/
@import "./variables.pcss.css";
/* Style the dialog-off-canvas container. */
.ui-dialog.ui-dialog-off-canvas {
/* Layer the dialog just under the toolbar. */
z-index: var(--jui-dialog-off-canvas-z-index);
padding: 0;
color: #ddd;
border-radius: 0;
background: #444;
box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.3333);
}
.ui-widget.ui-dialog.ui-dialog-off-canvas {
border: 1px solid transparent;
}
/* Style the off-canvas dialog header. */
.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar {
padding: var(--space-s) var(--jui-dialog-off-canvas-close-button-reserved-space) var(--space-s) var(--space-m); /* LTR */
border: 0;
border-bottom: 1px solid #000;
border-radius: 0;
background: #2d2d2d;
line-height: var(--line-height);
}
[dir="rtl"] .ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar {
padding-right: var(--space-m);
padding-left: var(--jui-dialog-off-canvas-close-button-reserved-space);
}
.ui-dialog.ui-dialog-off-canvas .ui-dialog-title {
/* Push the text away from the icon. */
padding-left: calc(var(--space-m) + var(--space-s)); /* LTR */
/* Ensure that long titles are not truncated. */
white-space: normal;
background: transparent url(../../../../misc/icons/ffffff/pencil.svg);
background-repeat: no-repeat;
background-position: 0 50%; /* LTR */
background-size: 1.25rem 1.25rem;
font-size: var(--font-size-base);
}
[dir="rtl"] .ui-dialog.ui-dialog-off-canvas .ui-dialog-title {
padding-right: calc(var(--space-m) + var(--space-s));
padding-left: 0;
background-position: 100% 50%;
}
.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close {
margin-right: var(--space-m);
margin-left: var(--space-m);
}
/* Override default styling from jQuery UI. */
#drupal-off-canvas .ui-state-default,
#drupal-off-canvas .ui-widget-content .ui-state-default,
#drupal-off-canvas .ui-widget-header .ui-state-default {
color: #333;
border: 0;
font-size: var(--font-size-s);
font-weight: normal;
}
#drupal-off-canvas .ui-widget-content a {
color: #85bef4;
}
......@@ -34,6 +34,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
/**
* jQuery.UI dialog.
*/
/**
* Progress bar.
*/
......
......@@ -155,6 +155,22 @@
--jui-dropdown--active-bg-color: var(--color-absolutezero);
--jui-dropdown-border-color: rgba(216, 217, 224, 0.8); /* Light gray with 0.8 opacity. */
--jui-dropdown-shadow-color: rgba(34, 35, 48, 0.1); /* Text color with 0.1 opacity. */
/**
* jQuery.UI dialog.
*/
--jui-dialog-title-color: var(--color-white);
--jui-dialog-title-bg-color: var(--color-text);
--jui-dialog-title-font-size: var(--font-size-h4);
--jui-dialog-close-button-size: calc(var(--space-m) * 2);
--jui-dialog-close-button-border-radius: 50%;
--jui-dialog-close-button-reserved-space: calc(var(--space-m) * 4);
--jui-dialog-off-canvas-close-button-reserved-space: calc(var(--space-m) * 3);
--jui-dialog-border-radius: 4px;
--jui-dialog-box-shadow: 0 0 var(--space-m) calc(var(--space-m) / -4) var(--color-text);
--jui-dialog--focus-outline: 2px dotted transparent;
--jui-dialog--focus-box-shadow: 0 0 0 3px var(--color-focus);
--jui-dialog-z-index: 1260;
--jui-dialog-off-canvas-z-index: 501;
/**
* Progress bar.
*/
......
......@@ -40,6 +40,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
/**
* jQuery.UI dialog.
*/
/**
* Progress bar.
*/
......
......@@ -42,6 +42,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
/**
* jQuery.UI dialog.
*/
/**
* Progress bar.
*/
......
......@@ -40,6 +40,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
/**
* jQuery.UI dialog.
*/
/**
* Progress bar.
*/
......@@ -136,7 +139,8 @@
* Full screen throbber.
*/
.ajax-progress--fullscreen {
.ajax-progress--fullscreen,
.ui-dialog .ajax-progress--throbber {
position: fixed;
z-index: 1000;
top: 50%;
......@@ -151,7 +155,8 @@
box-shadow: 0 0.25rem 0.625rem rgba(34, 35, 48, 0.1);
}
.ajax-progress__throbber--fullscreen {
.ajax-progress__throbber--fullscreen,
.ui-dialog .ajax-progress__throbber {
position: absolute;
top: 50%;
left: 50%;
......@@ -163,6 +168,10 @@
border-right: 3px dotted transparent;
}
.ui-dialog .ajax-progress__message {
display: none;
}
@media screen and (-ms-high-contrast: active) {
/**
* Throbber animation is shaky on Edge RTL on high contrast for border width
......
......@@ -79,7 +79,8 @@
/**
* Full screen throbber.
*/
.ajax-progress--fullscreen {
.ajax-progress--fullscreen,
.ui-dialog .ajax-progress--throbber {
position: fixed;
z-index: 1000;
top: 50%;
......@@ -93,7 +94,8 @@
background: var(--color-white);
box-shadow: 0 0.25rem 0.625rem var(--jui-dropdown-shadow-color);
}
.ajax-progress__throbber--fullscreen {
.ajax-progress__throbber--fullscreen,
.ui-dialog .ajax-progress__throbber {
position: absolute;
top: 50%;
left: 50%;
......@@ -105,6 +107,10 @@
border-right: 3px dotted transparent;
}
.ui-dialog .ajax-progress__message {
display: none;
}
@media screen and (-ms-high-contrast: active) {
/**
* Throbber animation is shaky on Edge RTL on high contrast for border width
......
......@@ -42,6 +42,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
/**
* jQuery.UI dialog.
*/
/**
* Progress bar.
*/
......
......@@ -40,6 +40,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
/**
* jQuery.UI dialog.
*/
/**
* Progress bar.
*/
......
......@@ -42,6 +42,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
/**
* jQuery.UI dialog.
*/
/**
* Progress bar.
*/
......
......@@ -40,6 +40,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
/**
* jQuery.UI dialog.
*/
/**
* Progress bar.
*/
......
......@@ -39,6 +39,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
/**
* jQuery.UI dialog.
*/
/**
* Progress bar.
*/
......
......@@ -42,6 +42,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
/**
* jQuery.UI dialog.
*/
/**
* Progress bar.
*/
......
......@@ -6,96 +6,178 @@
*/
/**
* @file
* Presentational styles for Drupal dialogs.
*/
:root {
/*
* Color Palette.
*/
/* Secondary. */
/* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
/*
* Base.
*/
/*
* Typography.
*/ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
/**
* Spaces.
*/ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
/*
* Common.
*/
/*
* Inputs.
*/ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
/*
* Details.
*/
/**
* Buttons.
*/
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
/**
* jQuery.UI dialog.
*/
/**
* Progress bar.
*/
/**
* Tabledrag icon size.
*/ /* 17px */
/**
* Ajax progress.
*/
/**
* Breadcrumb.
*/
}
.ui-dialog {
position: absolute;
z-index: 1260;
padding: 0;
border: 0;
border-radius: 4px;
background: transparent;
box-shadow: 0
0
1rem
-0.25rem
#222330;
}
.ui-dialog:focus {
outline: 2px
dotted
transparent;
box-shadow: 0
0
0
3px
#26a769;
}
@media all and (max-width: 48em) { /* 768px */
.ui-dialog {
.ui-dialog:not(.ui-dialog-off-canvas) {
min-width: 92%;
max-width: 92%;
}
}
.ui-dialog .ui-dialog-titlebar {
padding: 15px 49px 15px 15px; /* LTR */
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background: #6b6b6b;
position: relative;
box-sizing: border-box;
padding: 1rem 4rem 1rem 1.5rem; /* LTR */
color: #fff;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
background: #222330;
line-height: 2rem;
}
[dir="rtl"] .ui-dialog .ui-dialog-titlebar {
padding-right: 15px;
padding-left: 49px;
padding-right: 1.5rem;
padding-left: 4rem;
}
.ui-dialog .ui-dialog-title {
margin: 0;
color: #fff;
font-size: 1.231em;
font-weight: 600;
-webkit-font-smoothing: antialiased;
font-size: 1.424rem;
font-weight: bold;
}
.ui-dialog .ui-dialog-titlebar-close {
position: absolute;
top: 10px;
right: 12px; /* LTR */
width: 30px;
height: 30px;
margin: 0;
top: 50%;
right: 0; /* LTR */
box-sizing: border-box;
width: 2rem;
height: 2rem;
margin: 0 1.5rem;
padding: 0;
transition: all 0.1s;
border: 3px solid #6b6b6b;
border-radius: 5px;
transform: translateY(-50%);
border: 2px solid transparent;
border-radius: 50%;
background: none;
}
.ui-dialog .ui-dialog-titlebar-close:hover,
.ui-dialog .ui-dialog-titlebar-close:focus {
[dir="rtl"] .ui-dialog .ui-dialog-titlebar-close {
right: auto;
left: 0;
}
.ui-dialog .ui-dialog-titlebar-close:hover {
border-color: #fff;
}
[dir="rtl"] .ui-dialog .ui-dialog-titlebar-close {
right: auto;
left: 20px;
.ui-dialog .ui-dialog-titlebar-close:focus {
border-color: #26a769;
outline: 2px
dotted
transparent;
box-shadow: none;
}
.ui-dialog .ui-icon.ui-icon-closethick {
margin-top: -8px;
background: url(../../images/core/ffffff/ex.svg) 0 0 no-repeat;
width: 100%;
height: 100%;
margin: 0;
transform: translate(-50%, -50%);
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28px' height='28px' viewBox='0 0 28 28'%3E%3Cpath stroke='%23D4D4D8' stroke-width='1.5' d='M19,9L9,19'/%3E%3Cpath stroke='%23D4D4D8' stroke-width='1.5' d='M19,19L9,9'/%3E%3C/svg%3E%0A") 50% 50% / 100% 100% no-repeat;
}
.ui-dialog .ui-widget-content.ui-dialog-content {
.ui-dialog > .ui-dialog-content {
overflow: auto;
padding: 1em;