diff --git a/core/themes/claro/claro.info.yml b/core/themes/claro/claro.info.yml index d04bf1d..d869d10 100644 --- a/core/themes/claro/claro.info.yml +++ b/core/themes/claro/claro.info.yml @@ -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: diff --git a/core/themes/claro/css/base/elements.css b/core/themes/claro/css/base/elements.css index 2424fc0..1c450ae 100644 --- a/core/themes/claro/css/base/elements.css +++ b/core/themes/claro/css/base/elements.css @@ -40,6 +40,9 @@ * jQuery.UI dropdown. */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */ /** + * jQuery.UI dialog. + */ + /** * Progress bar. */ /** diff --git a/core/themes/claro/css/base/off-canvas.theme.css b/core/themes/claro/css/base/off-canvas.theme.css new file mode 100644 index 0000000..0597683 --- /dev/null +++ b/core/themes/claro/css/base/off-canvas.theme.css @@ -0,0 +1,130 @@ +/* + * 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 { + min-height: 3rem; + padding: 0.75rem 3rem 0.75rem 1rem; /* LTR */ + border: 0; + border-bottom: 1px solid #000; + border-radius: 0; +} + +[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(../../images/core/ffffff/pencil.svg); + background-repeat: no-repeat; + background-position: 0 50%; /* LTR */ + background-size: 1.25rem 1.25rem; + font-size: 1rem; + line-height: 1.5; +} + +[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; +} diff --git a/core/themes/claro/css/base/off-canvas.theme.pcss.css b/core/themes/claro/css/base/off-canvas.theme.pcss.css new file mode 100644 index 0000000..f313a78 --- /dev/null +++ b/core/themes/claro/css/base/off-canvas.theme.pcss.css @@ -0,0 +1,71 @@ +/** + * @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-dialogoffcanvas-zindex); + 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 { + min-height: var(--jui-dialog-offcanvas-title-min-height); + padding: var(--space-s) var(--jui-dialog-offcanvas-close-button-reserved-space) var(--space-s) var(--space-m); /* LTR */ + border: 0; + border-bottom: 1px solid #000; + border-radius: 0; +} +[dir="rtl"] .ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar { + padding-right: var(--space-m); + padding-left: var(--jui-dialog-offcanvas-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(../../images/core/ffffff/pencil.svg); + background-repeat: no-repeat; + background-position: 0 50%; /* LTR */ + background-size: 1.25rem 1.25rem; + font-size: var(--font-size-base); + line-height: var(--line-height); +} +[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; +} diff --git a/core/themes/claro/css/base/variables.css b/core/themes/claro/css/base/variables.css index aa4737c..6bbe2fa 100644 --- a/core/themes/claro/css/base/variables.css +++ b/core/themes/claro/css/base/variables.css @@ -35,6 +35,9 @@ * jQuery.UI dropdown. */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */ /** + * jQuery.UI dialog. + */ + /** * Progress bar. */ /** diff --git a/core/themes/claro/css/base/variables.pcss.css b/core/themes/claro/css/base/variables.pcss.css index dc855b4..c0b0608 100644 --- a/core/themes/claro/css/base/variables.pcss.css +++ b/core/themes/claro/css/base/variables.pcss.css @@ -153,6 +153,24 @@ --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-min-height: calc(var(--space-m) * 4); + --jui-dialog-offcanvas-title-min-height: calc(var(--space-m) * 3); + --jui-dialog-title-color: var(--color-white); + --jui-dialog-title-bg-color: var(--color-text); + --jui-dialog-close-button-size: calc(var(--space-m) * 2); + --jui-dialog-close-button-border-radius: 50%; + --jui-dialog-close-button-reserved-space: var(--jui-dialog-title-min-height); + --jui-dialog-offcanvas-close-button-reserved-space: var(--jui-dialog-offcanvas-title-min-height); + --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-size: 3px; + --jui-dialog--focus-box-shadow: 0 0 0 var(--jui-dialog--focus-box-shadow-size) var(--color-focus); + --jui-dialog-zindex: 1260; + --jui-dialogoffcanvas-zindex: 501; + /** * Progress bar. */ --progress-bar-border-size: 1px; diff --git a/core/themes/claro/css/components/accordion.css b/core/themes/claro/css/components/accordion.css index 00092a2..ad22ee6 100644 --- a/core/themes/claro/css/components/accordion.css +++ b/core/themes/claro/css/components/accordion.css @@ -41,6 +41,9 @@ * jQuery.UI dropdown. */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */ /** + * jQuery.UI dialog. + */ + /** * Progress bar. */ /** diff --git a/core/themes/claro/css/components/action-link.css b/core/themes/claro/css/components/action-link.css index c76e40f..c416653 100644 --- a/core/themes/claro/css/components/action-link.css +++ b/core/themes/claro/css/components/action-link.css @@ -43,6 +43,9 @@ * jQuery.UI dropdown. */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */ /** + * jQuery.UI dialog. + */ + /** * Progress bar. */ /** diff --git a/core/themes/claro/css/components/ajax-progress.module.css b/core/themes/claro/css/components/ajax-progress.module.css index b17d3e9..b542d70 100644 --- a/core/themes/claro/css/components/ajax-progress.module.css +++ b/core/themes/claro/css/components/ajax-progress.module.css @@ -41,6 +41,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, +.views-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, +.views-ui-dialog .ajax-progress--throbber .ajax-progress__throbber { position: absolute; top: 50%; left: 50%; @@ -163,6 +168,10 @@ border-right: 3px dotted transparent; } +.views-ui-dialog .ajax-progress--throbber .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 diff --git a/core/themes/claro/css/components/ajax-progress.module.pcss.css b/core/themes/claro/css/components/ajax-progress.module.pcss.css index 91a595f..6da1e1c 100644 --- a/core/themes/claro/css/components/ajax-progress.module.pcss.css +++ b/core/themes/claro/css/components/ajax-progress.module.pcss.css @@ -79,7 +79,8 @@ /** * Full screen throbber. */ -.ajax-progress--fullscreen { +.ajax-progress--fullscreen, +.views-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, +.views-ui-dialog .ajax-progress--throbber .ajax-progress__throbber { position: absolute; top: 50%; left: 50%; @@ -105,6 +107,10 @@ border-right: 3px dotted transparent; } +.views-ui-dialog .ajax-progress--throbber .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 diff --git a/core/themes/claro/css/components/autocomplete-loading.module.css b/core/themes/claro/css/components/autocomplete-loading.module.css index 4c49059..719c74a 100644 --- a/core/themes/claro/css/components/autocomplete-loading.module.css +++ b/core/themes/claro/css/components/autocomplete-loading.module.css @@ -43,6 +43,9 @@ * jQuery.UI dropdown. */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */ /** + * jQuery.UI dialog. + */ + /** * Progress bar. */ /** diff --git a/core/themes/claro/css/components/breadcrumb.css b/core/themes/claro/css/components/breadcrumb.css index b496acc..68c6590 100644 --- a/core/themes/claro/css/components/breadcrumb.css +++ b/core/themes/claro/css/components/breadcrumb.css @@ -41,6 +41,9 @@ * jQuery.UI dropdown. */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */ /** + * jQuery.UI dialog. + */ + /** * Progress bar. */ /** diff --git a/core/themes/claro/css/components/button.css b/core/themes/claro/css/components/button.css index 8594ae4..4c65335 100644 --- a/core/themes/claro/css/components/button.css +++ b/core/themes/claro/css/components/button.css @@ -43,6 +43,9 @@ * jQuery.UI dropdown. */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */ /** + * jQuery.UI dialog. + */ + /** * Progress bar. */ /** diff --git a/core/themes/claro/css/components/card.css b/core/themes/claro/css/components/card.css index 533f019..4e45e71 100644 --- a/core/themes/claro/css/components/card.css +++ b/core/themes/claro/css/components/card.css @@ -41,6 +41,9 @@ * jQuery.UI dropdown. */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */ /** + * jQuery.UI dialog. + */ + /** * Progress bar. */ /** diff --git a/core/themes/claro/css/components/content-header.css b/core/themes/claro/css/components/content-header.css index 3668c7e..90c281c 100644 --- a/core/themes/claro/css/components/content-header.css +++ b/core/themes/claro/css/components/content-header.css @@ -40,6 +40,9 @@ * jQuery.UI dropdown. */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */ /** + * jQuery.UI dialog. + */ + /** * Progress bar. */ /** diff --git a/core/themes/claro/css/components/details.css b/core/themes/claro/css/components/details.css index a36ce5d..335b2a5 100644 --- a/core/themes/claro/css/components/details.css +++ b/core/themes/claro/css/components/details.css @@ -43,6 +43,9 @@ * jQuery.UI dropdown. */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */ /** + * jQuery.UI dialog. + */ + /** * Progress bar. */ /** diff --git a/core/themes/claro/css/components/dialog.css b/core/themes/claro/css/components/dialog.css index aa9a8e7..18adadc 100644 --- a/core/themes/claro/css/components/dialog.css +++ b/core/themes/claro/css/components/dialog.css @@ -6,96 +6,192 @@ */ /** + * @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; + min-height: 4rem; + padding: 1rem 4rem 1rem 1.5rem; /* LTR */ + color: #fff; + border-top-left-radius: 4px; + border-top-right-radius: 4px; + background: #222330; } [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 { + display: block; margin: 0; - color: #fff; - font-size: 1.231em; - font-weight: 600; -webkit-font-smoothing: antialiased; + font-size: 1.424rem; + font-weight: bold; + line-height: 2rem; } .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: calc(2rem - 6px); + height: calc(2rem - 6px); + 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; } +[dir="rtl"] .ui-dialog .ui-dialog-titlebar-close { + right: auto; + left: 0; +} + .ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { border-color: #fff; } -[dir="rtl"] .ui-dialog .ui-dialog-titlebar-close { - right: auto; - left: 20px; +.ui-dialog .ui-dialog-titlebar-close:focus { + outline: 2px +dotted +transparent; + box-shadow: 0 +0 +0 +3px +#26a769; } .ui-dialog .ui-icon.ui-icon-closethick { - margin-top: -8px; - background: url(../../images/core/ffffff/ex.svg) 0 0 no-repeat; + position: absolute; + top: 50%; + left: 50%; + width: 1.5rem; + height: 1.5rem; + margin: 0; + transform: translate(-50%, -50%); + background: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 1.31836L1 11.3184' stroke='%23D4D4D8' stroke-width='1.5'/%3E%3Cpath d='M11 11.3184L1 1.31836' stroke='%23D4D4D8' stroke-width='1.5'/%3E%3C/svg%3E") 50% 50% no-repeat; + background-size: 0.75rem 0.75rem; } -.ui-dialog .ui-widget-content.ui-dialog-content { +.ui-dialog > .ui-dialog-content { overflow: auto; - padding: 1em; + padding-right: 1.5rem; + padding-left: 1.5rem; + color: #222330; background: #fff; } -.views-ui-dialog .ui-widget-content.ui-dialog-content { - padding: 0; +.ui-dialog:not(.views-ui-dialog) > .ui-dialog-content > :first-child { + margin-top: 1.5rem; } -.ui-dialog .ui-widget-content.ui-dialog-buttonpane { - /* border-top: 1px solid #bfbfbf; */ - margin: 0; - padding: 15px 20px; - border-bottom-right-radius: 5px; - border-bottom-left-radius: 5px; - background: #f5f5f2; +.ui-dialog:not(.views-ui-dialog) > .ui-dialog-content > :last-child { + margin-bottom: 1.5rem; } -.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { - float: none; - margin: 0; - padding: 0; +.ui-dialog:not(.views-ui-dialog) > .ui-dialog-content form > :first-child { + margin-top: 0; +} + +.ui-dialog > .ui-dialog-buttonpane { + color: #222330; + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; + background: #f3f4f9; +} + +.ui-dialog-buttonpane .ui-dialog-buttonset { + justify-content: flex-end; + margin: 0 0.75rem; } .ui-dialog .ui-dialog-buttonpane .ui-button-text-only .ui-button-text { @@ -113,40 +209,9 @@ padding: 0; } -.ui-dialog .ajax-progress-throbber { - position: fixed; - z-index: 1000; - top: 48.5%; - /* Can't do center:50% middle: 50%, so approximate it for a typical window size. */ - left: 49%; /* LTR */ - width: 24px; - height: 24px; - padding: 4px; - opacity: 0.9; - border-radius: 7px; - background-color: #232323; - background-image: url(../../images/loading-small.gif); - background-repeat: no-repeat; - background-position: center center; -} - -[dir="rtl"] .ui-dialog .ajax-progress-throbber { - right: 49%; - left: auto; -} - -.ui-dialog .ajax-progress-throbber .throbber, -.ui-dialog .ajax-progress-throbber .message { - display: none; -} - -.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar { - position: relative; -} - -.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close { - top: 10px; -} +/** + * Off-canvas styles. + */ .ui-dialog.ui-dialog-off-canvas .ui-widget-content.ui-dialog-content { background: none; diff --git a/core/themes/claro/css/components/dialog.pcss.css b/core/themes/claro/css/components/dialog.pcss.css index f3d8f84..999eea7 100644 --- a/core/themes/claro/css/components/dialog.pcss.css +++ b/core/themes/claro/css/components/dialog.pcss.css @@ -1,88 +1,133 @@ /** + * @file * Presentational styles for Drupal dialogs. */ +@import "../base/variables.pcss.css"; + .ui-dialog { position: absolute; - z-index: 1260; padding: 0; border: 0; + border-radius: var(--jui-dialog-border-radius); background: transparent; + box-shadow: var(--jui-dialog-box-shadow); +} + +.ui-dialog:focus { + outline: var(--jui-dialog--focus-outline); + box-shadow: var(--jui-dialog--focus-box-shadow); } @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; + min-height: var(--jui-dialog-title-min-height); + padding: var(--space-m) var(--jui-dialog-close-button-reserved-space) var(--space-m) var(--space-l); /* LTR */ + color: var(--jui-dialog-title-color); + border-top-left-radius: var(--jui-dialog-border-radius); + border-top-right-radius: var(--jui-dialog-border-radius); + background: var(--jui-dialog-title-bg-color); } [dir="rtl"] .ui-dialog .ui-dialog-titlebar { - padding-right: 15px; - padding-left: 49px; + padding-right: var(--space-l); + padding-left: var(--jui-dialog-close-button-reserved-space); } + .ui-dialog .ui-dialog-title { + display: block; margin: 0; - color: #fff; - font-size: 1.231em; - font-weight: 600; -webkit-font-smoothing: antialiased; + font-size: var(--font-size-h4); + font-weight: bold; + line-height: calc(var(--space-m) * 2); } + .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: calc(var(--jui-dialog-close-button-size) - (var(--jui-dialog--focus-box-shadow-size) * 2)); + height: calc(var(--jui-dialog-close-button-size) - (var(--jui-dialog--focus-box-shadow-size) * 2)); + margin: 0 var(--space-l); padding: 0; - -webkit-transition: all 0.1s; transition: all 0.1s; - border: 3px solid #6b6b6b; - border-radius: 5px; + transform: translateY(-50%); + border: 2px solid transparent; + border-radius: var(--jui-dialog-close-button-border-radius); background: none; } +[dir="rtl"] .ui-dialog .ui-dialog-titlebar-close { + right: auto; + left: 0; +} + .ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { - border-color: #fff; + border-color: var(--color-white); } -[dir="rtl"] .ui-dialog .ui-dialog-titlebar-close { - right: auto; - left: 20px; + +.ui-dialog .ui-dialog-titlebar-close:focus { + outline: var(--jui-dialog--focus-outline); + box-shadow: var(--jui-dialog--focus-box-shadow); } + .ui-dialog .ui-icon.ui-icon-closethick { - margin-top: -8px; - background: url(../../images/core/ffffff/ex.svg) 0 0 no-repeat; + position: absolute; + top: 50%; + left: 50%; + width: var(--space-l); + height: var(--space-l); + margin: 0; + transform: translate(-50%, -50%); + background: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 1.31836L1 11.3184' stroke='%23D4D4D8' stroke-width='1.5'/%3E%3Cpath d='M11 11.3184L1 1.31836' stroke='%23D4D4D8' stroke-width='1.5'/%3E%3C/svg%3E") 50% 50% no-repeat; + background-size: var(--space-s) var(--space-s); } -.ui-dialog .ui-widget-content.ui-dialog-content { + +.ui-dialog > .ui-dialog-content { overflow: auto; - padding: 1em; - background: #fff; + padding-right: var(--space-l); + padding-left: var(--space-l); + color: var(--color-text); + background: var(--color-white); } -.views-ui-dialog .ui-widget-content.ui-dialog-content { - padding: 0; + +.ui-dialog:not(.views-ui-dialog) > .ui-dialog-content > :first-child { + margin-top: var(--space-l); } -.ui-dialog .ui-widget-content.ui-dialog-buttonpane { - /* border-top: 1px solid #bfbfbf; */ - margin: 0; - padding: 15px 20px; - border-bottom-right-radius: 5px; - border-bottom-left-radius: 5px; - background: #f5f5f2; + +.ui-dialog:not(.views-ui-dialog) > .ui-dialog-content > :last-child { + margin-bottom: var(--space-l); } -.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { - float: none; - margin: 0; - padding: 0; + +.ui-dialog:not(.views-ui-dialog) > .ui-dialog-content form > :first-child { + margin-top: 0; } + +.ui-dialog > .ui-dialog-buttonpane { + color: var(--color-text); + border-bottom-right-radius: var(--jui-dialog-border-radius); + border-bottom-left-radius: var(--jui-dialog-border-radius); + background: var(--color-whitesmoke); +} + +.ui-dialog-buttonpane .ui-dialog-buttonset { + justify-content: flex-end; + margin: 0 var(--space-s); +} + .ui-dialog .ui-dialog-buttonpane .ui-button-text-only .ui-button-text { padding: 0; } + .ui-dialog .ui-dialog-content { position: static; } @@ -92,36 +137,10 @@ margin: 0; padding: 0; } -.ui-dialog .ajax-progress-throbber { - position: fixed; - z-index: 1000; - top: 48.5%; - /* Can't do center:50% middle: 50%, so approximate it for a typical window size. */ - left: 49%; /* LTR */ - width: 24px; - height: 24px; - padding: 4px; - opacity: 0.9; - border-radius: 7px; - background-color: #232323; - background-image: url(../../images/loading-small.gif); - background-repeat: no-repeat; - background-position: center center; -} -[dir="rtl"] .ui-dialog .ajax-progress-throbber { - right: 49%; - left: auto; -} -.ui-dialog .ajax-progress-throbber .throbber, -.ui-dialog .ajax-progress-throbber .message { - display: none; -} -.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar { - position: relative; -} -.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close { - top: 10px; -} + +/** + * Off-canvas styles. + */ .ui-dialog.ui-dialog-off-canvas .ui-widget-content.ui-dialog-content { background: none; } diff --git a/core/themes/claro/css/components/divider.css b/core/themes/claro/css/components/divider.css index 2bd585d..e9770d9 100644 --- a/core/themes/claro/css/components/divider.css +++ b/core/themes/claro/css/components/divider.css @@ -40,6 +40,9 @@ * jQuery.UI dropdown. */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */ /** + * jQuery.UI dialog. + */ + /** * Progress bar. */ /** diff --git a/core/themes/claro/css/components/dropbutton.css b/core/themes/claro/css/components/dropbutton.css index 9021be7..d53f876 100644 --- a/core/themes/claro/css/components/dropbutton.css +++ b/core/themes/claro/css/components/dropbutton.css @@ -45,6 +45,9 @@ * jQuery.UI dropdown. */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */ /** + * jQuery.UI dialog. + */ + /** * Progress bar. */ /** diff --git a/core/themes/claro/css/components/entity-meta.css b/core/themes/claro/css/components/entity-meta.css index 6245dea..df8b2e4 100644 --- a/core/themes/claro/css/components/entity-meta.css +++ b/core/themes/claro/css/components/entity-meta.css @@ -41,6 +41,9 @@ * jQuery.UI dropdown. */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */ /** + * jQuery.UI dialog. + */ + /** * Progress bar. */ /** diff --git a/core/themes/claro/css/components/fieldset.css b/core/themes/claro/css/components/fieldset.css index 06329f3..9ce2a07 100644 --- a/core/themes/claro/css/components/fieldset.css +++ b/core/themes/claro/css/components/fieldset.css @@ -41,6 +41,9 @@ * jQuery.UI dropdown. */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */ /** + * jQuery.UI dialog. + */ + /** * Progress bar. */ /** diff --git a/core/themes/claro/css/components/file.css b/core/themes/claro/css/components/file.css index 30d5f44..3a66519 100644 --- a/core/themes/claro/css/components/file.css +++ b/core/themes/claro/css/components/file.css @@ -41,6 +41,9 @@ * jQuery.UI dropdown. */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */ /** + * jQuery.UI dialog. + */ + /** * Progress bar. */ /** diff --git a/core/themes/claro/css/components/form--checkbox-radio--ie.css b/core/themes/claro/css/components/form--checkbox-radio--ie.css index 77aa8b7..e481f83 100644 --- a/core/themes/claro/css/components/form--checkbox-radio--ie.css +++ b/core/themes/claro/css/components/form--checkbox-radio--ie.css @@ -41,6 +41,9 @@ * jQuery.UI dropdown. */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */ /** + * jQuery.UI dialog. + */ + /** * Progress bar. */ /** diff --git a/core/themes/claro/css/components/form--checkbox-radio.css b/core/themes/claro/css/components/form--checkbox-radio.css index ff7aa40..7099b82 100644 --- a/core/themes/claro/css/components/form--checkbox-radio.css +++ b/core/themes/claro/css/components/form--checkbox-radio.css @@ -41,6 +41,9 @@ * jQuery.UI dropdown. */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */ /** + * jQuery.UI dialog. + */ + /** * Progress bar. */ /** diff --git a/core/themes/claro/css/components/form--field-multiple.css b/core/themes/claro/css/components/form--field-multiple.css index 67f9110..c597737 100644 --- a/core/themes/claro/css/components/form--field-multiple.css +++ b/core/themes/claro/css/components/form--field-multiple.css @@ -41,6 +41,9 @@ * jQuery.UI dropdown. */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */ /** + * jQuery.UI dialog. + */ + /** * Progress bar. */ /** diff --git a/core/themes/claro/css/components/form--managed-file.css b/core/themes/claro/css/components/form--managed-file.css index 4fa4b2e..fd64aef 100644 --- a/core/themes/claro/css/components/form--managed-file.css +++ b/core/themes/claro/css/components/form--managed-file.css @@ -43,6 +43,9 @@ * jQuery.UI dropdown. */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */ /** + * jQuery.UI dialog. + */ + /** * Progress bar. */ /** diff --git a/core/themes/claro/css/components/form--password-confirm.css b/core/themes/claro/css/components/form--password-confirm.css index a356a3a..6b5a9f4 100644 --- a/core/themes/claro/css/components/form--password-confirm.css +++ b/core/themes/claro/css/components/form--password-confirm.css @@ -41,6 +41,9 @@ * jQuery.UI dropdown. */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */ /** + * jQuery.UI dialog. + */ + /** * Progress bar. */ /** diff --git a/core/themes/claro/css/components/form--select.css b/core/themes/claro/css/components/form--select.css index 989ed67..44d8bd0 100644 --- a/core/themes/claro/css/components/form--select.css +++ b/core/themes/claro/css/components/form--select.css @@ -41,6 +41,9 @@ * jQuery.UI dropdown. */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */ /** + * jQuery.UI dialog. + */ + /** * Progress bar. */ /** diff --git a/core/themes/claro/css/components/form--text.css b/core/themes/claro/css/components/form--text.css index f8df07d..d40daed 100644 --- a/core/themes/claro/css/components/form--text.css +++ b/core/themes/claro/css/components/form--text.css @@ -41,6 +41,9 @@ * jQuery.UI dropdown. */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */ /** + * jQuery.UI dialog. + */ + /** * Progress bar. */ /** diff --git a/core/themes/claro/css/components/form.css b/core/themes/claro/css/components/form.css index 917deda..2a3121b 100644 --- a/core/themes/claro/css/components/form.css +++ b/core/themes/claro/css/components/form.css @@ -41,6 +41,9 @@ * jQuery.UI dropdown. */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */ /** + * jQuery.UI dialog. + */ + /** * Progress bar. */ /** diff --git a/core/themes/claro/css/components/image-preview.css b/core/themes/claro/css/components/image-preview.css index 3d1a03f..2bd4c2c 100644 --- a/core/themes/claro/css/components/image-preview.css +++ b/core/themes/claro/css/components/image-preview.css @@ -41,6 +41,9 @@ * jQuery.UI dropdown. */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */ /** + * jQuery.UI dialog. + */ + /** * Progress bar. */ /** diff --git a/core/themes/claro/css/components/jquery.ui/theme.css b/core/themes/claro/css/components/jquery.ui/theme.css index 02bd284..21ab5e8 100644 --- a/core/themes/claro/css/components/jquery.ui/theme.css +++ b/core/themes/claro/css/components/jquery.ui/theme.css @@ -42,6 +42,9 @@ * jQuery.UI dropdown. */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */ /** + * jQuery.UI dialog. + */ + /** * Progress bar. */ /** @@ -67,6 +70,10 @@ border: none; } +.ui-dialog { + z-index: 1260; +} + /** * Interaction states */ @@ -584,9 +591,9 @@ */ .ui-widget-overlay { + z-index: 1259; opacity: 0.7; - filter: alpha(Opacity=70); - background: #000; + background: #222330; } /** diff --git a/core/themes/claro/css/components/jquery.ui/theme.pcss.css b/core/themes/claro/css/components/jquery.ui/theme.pcss.css index f463e02..371ded4 100644 --- a/core/themes/claro/css/components/jquery.ui/theme.pcss.css +++ b/core/themes/claro/css/components/jquery.ui/theme.pcss.css @@ -16,6 +16,10 @@ border: none; } +.ui-dialog { + z-index: var(--jui-dialog-zindex); +} + /** * Interaction states */ @@ -332,9 +336,9 @@ * Overlays */ .ui-widget-overlay { + z-index: calc(var(--jui-dialog-zindex) - 1); opacity: 0.7; - filter: alpha(Opacity=70); - background: #000; + background: var(--color-text); } /** diff --git a/core/themes/claro/css/components/messages.css b/core/themes/claro/css/components/messages.css index 76985ea..19f4337 100644 --- a/core/themes/claro/css/components/messages.css +++ b/core/themes/claro/css/components/messages.css @@ -43,6 +43,9 @@ * jQuery.UI dropdown. */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */ /** + * jQuery.UI dialog. + */ + /** * Progress bar. */ /** diff --git a/core/themes/claro/css/components/page-title.css b/core/themes/claro/css/components/page-title.css index 959a33e..6902784 100644 --- a/core/themes/claro/css/components/page-title.css +++ b/core/themes/claro/css/components/page-title.css @@ -41,6 +41,9 @@ * jQuery.UI dropdown. */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */ /** + * jQuery.UI dialog. + */ + /** * Progress bar. */ /** diff --git a/core/themes/claro/css/components/pager.css b/core/themes/claro/css/components/pager.css index 8af3455..ded7757 100644 --- a/core/themes/claro/css/components/pager.css +++ b/core/themes/claro/css/components/pager.css @@ -41,6 +41,9 @@ * jQuery.UI dropdown. */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */ /** + * jQuery.UI dialog. + */ + /** * Progress bar. */ /** diff --git a/core/themes/claro/css/components/progress.css b/core/themes/claro/css/components/progress.css index 4e86569..668a3ce 100644 --- a/core/themes/claro/css/components/progress.css +++ b/core/themes/claro/css/components/progress.css @@ -43,6 +43,9 @@ * jQuery.UI dropdown. */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */ /** + * jQuery.UI dialog. + */ + /** * Progress bar. */ /** diff --git a/core/themes/claro/css/components/shortcut.css b/core/themes/claro/css/components/shortcut.css index a77f869..2c0b770 100644 --- a/core/themes/claro/css/components/shortcut.css +++ b/core/themes/claro/css/components/shortcut.css @@ -41,6 +41,9 @@ * jQuery.UI dropdown. */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */ /** + * jQuery.UI dialog. + */ + /** * Progress bar. */ /** diff --git a/core/themes/claro/css/components/system-admin--admin-list.css b/core/themes/claro/css/components/system-admin--admin-list.css index 1a8b935..a93d400 100644 --- a/core/themes/claro/css/components/system-admin--admin-list.css +++ b/core/themes/claro/css/components/system-admin--admin-list.css @@ -41,6 +41,9 @@ * jQuery.UI dropdown. */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */ /** + * jQuery.UI dialog. + */ + /** * Progress bar. */ /** diff --git a/core/themes/claro/css/components/system-admin--panel.css b/core/themes/claro/css/components/system-admin--panel.css index 5fee5d9..a61d1a8 100644 --- a/core/themes/claro/css/components/system-admin--panel.css +++ b/core/themes/claro/css/components/system-admin--panel.css @@ -41,6 +41,9 @@ * jQuery.UI dropdown. */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */ /** + * jQuery.UI dialog. + */ + /** * Progress bar. */ /** diff --git a/core/themes/claro/css/components/table--file-multiple-widget.css b/core/themes/claro/css/components/table--file-multiple-widget.css index 4f3f355..7dfe534 100644 --- a/core/themes/claro/css/components/table--file-multiple-widget.css +++ b/core/themes/claro/css/components/table--file-multiple-widget.css @@ -41,6 +41,9 @@ * jQuery.UI dropdown. */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */ /** + * jQuery.UI dialog. + */ + /** * Progress bar. */ /** diff --git a/core/themes/claro/css/components/tabledrag.css b/core/themes/claro/css/components/tabledrag.css index d63e8dd..78eb37f 100644 --- a/core/themes/claro/css/components/tabledrag.css +++ b/core/themes/claro/css/components/tabledrag.css @@ -45,6 +45,9 @@ * jQuery.UI dropdown. */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */ /** + * jQuery.UI dialog. + */ + /** * Progress bar. */ /** diff --git a/core/themes/claro/css/components/tables.css b/core/themes/claro/css/components/tables.css index 3af16a7..8fde30a 100644 --- a/core/themes/claro/css/components/tables.css +++ b/core/themes/claro/css/components/tables.css @@ -41,6 +41,9 @@ * jQuery.UI dropdown. */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */ /** + * jQuery.UI dialog. + */ + /** * Progress bar. */ /** diff --git a/core/themes/claro/css/components/tableselect.css b/core/themes/claro/css/components/tableselect.css index 0f6bf1e..92cf414 100644 --- a/core/themes/claro/css/components/tableselect.css +++ b/core/themes/claro/css/components/tableselect.css @@ -43,6 +43,9 @@ * jQuery.UI dropdown. */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */ /** + * jQuery.UI dialog. + */ + /** * Progress bar. */ /** diff --git a/core/themes/claro/css/components/tabs.css b/core/themes/claro/css/components/tabs.css index cb7464f..30b7b4b 100644 --- a/core/themes/claro/css/components/tabs.css +++ b/core/themes/claro/css/components/tabs.css @@ -40,6 +40,9 @@ * jQuery.UI dropdown. */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */ /** + * jQuery.UI dialog. + */ + /** * Progress bar. */ /** diff --git a/core/themes/claro/css/components/vertical-tabs.css b/core/themes/claro/css/components/vertical-tabs.css index 9ef2768..d36caaa 100644 --- a/core/themes/claro/css/components/vertical-tabs.css +++ b/core/themes/claro/css/components/vertical-tabs.css @@ -43,6 +43,9 @@ * jQuery.UI dropdown. */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */ /** + * jQuery.UI dialog. + */ + /** * Progress bar. */ /** diff --git a/core/themes/claro/css/components/views-exposed-form.css b/core/themes/claro/css/components/views-exposed-form.css index 1ba2cc8..38132ca 100644 --- a/core/themes/claro/css/components/views-exposed-form.css +++ b/core/themes/claro/css/components/views-exposed-form.css @@ -41,6 +41,9 @@ * jQuery.UI dropdown. */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */ /** + * jQuery.UI dialog. + */ + /** * Progress bar. */ /** diff --git a/core/themes/claro/css/layout/breadcrumb.css b/core/themes/claro/css/layout/breadcrumb.css index d87cb09..543d2a9 100644 --- a/core/themes/claro/css/layout/breadcrumb.css +++ b/core/themes/claro/css/layout/breadcrumb.css @@ -41,6 +41,9 @@ * jQuery.UI dropdown. */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */ /** + * jQuery.UI dialog. + */ + /** * Progress bar. */ /** diff --git a/core/themes/claro/css/layout/card-list.css b/core/themes/claro/css/layout/card-list.css index 5e67aad..0492c59 100644 --- a/core/themes/claro/css/layout/card-list.css +++ b/core/themes/claro/css/layout/card-list.css @@ -41,6 +41,9 @@ * jQuery.UI dropdown. */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */ /** + * jQuery.UI dialog. + */ + /** * Progress bar. */ /** diff --git a/core/themes/claro/css/layout/local-actions.css b/core/themes/claro/css/layout/local-actions.css index 38786c7..da609e7 100644 --- a/core/themes/claro/css/layout/local-actions.css +++ b/core/themes/claro/css/layout/local-actions.css @@ -41,6 +41,9 @@ * jQuery.UI dropdown. */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */ /** + * jQuery.UI dialog. + */ + /** * Progress bar. */ /** diff --git a/core/themes/claro/css/layout/node-add.css b/core/themes/claro/css/layout/node-add.css index b92d66f..3a2fcf2 100644 --- a/core/themes/claro/css/layout/node-add.css +++ b/core/themes/claro/css/layout/node-add.css @@ -40,6 +40,9 @@ * jQuery.UI dropdown. */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */ /** + * jQuery.UI dialog. + */ + /** * Progress bar. */ /** diff --git a/core/themes/claro/css/theme/ckeditor-dialog.css b/core/themes/claro/css/theme/ckeditor-dialog.css index 7772914..ddd02ab 100644 --- a/core/themes/claro/css/theme/ckeditor-dialog.css +++ b/core/themes/claro/css/theme/ckeditor-dialog.css @@ -41,6 +41,9 @@ * jQuery.UI dropdown. */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */ /** + * jQuery.UI dialog. + */ + /** * Progress bar. */ /** diff --git a/core/themes/claro/css/theme/ckeditor-editor.css b/core/themes/claro/css/theme/ckeditor-editor.css index b41568a..6fcff9e 100644 --- a/core/themes/claro/css/theme/ckeditor-editor.css +++ b/core/themes/claro/css/theme/ckeditor-editor.css @@ -41,6 +41,9 @@ * jQuery.UI dropdown. */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */ /** + * jQuery.UI dialog. + */ + /** * Progress bar. */ /** diff --git a/core/themes/claro/css/theme/ckeditor-frame.css b/core/themes/claro/css/theme/ckeditor-frame.css index d310341..cead1e4 100644 --- a/core/themes/claro/css/theme/ckeditor-frame.css +++ b/core/themes/claro/css/theme/ckeditor-frame.css @@ -41,6 +41,9 @@ * jQuery.UI dropdown. */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */ /** + * jQuery.UI dialog. + */ + /** * Progress bar. */ /** diff --git a/core/themes/claro/css/theme/field-ui.admin.css b/core/themes/claro/css/theme/field-ui.admin.css index 9ab712a..46a2c93 100644 --- a/core/themes/claro/css/theme/field-ui.admin.css +++ b/core/themes/claro/css/theme/field-ui.admin.css @@ -41,6 +41,9 @@ * jQuery.UI dropdown. */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */ /** + * jQuery.UI dialog. + */ + /** * Progress bar. */ /** diff --git a/core/themes/claro/css/theme/filter.theme.css b/core/themes/claro/css/theme/filter.theme.css index 1b1f503..28762ab 100644 --- a/core/themes/claro/css/theme/filter.theme.css +++ b/core/themes/claro/css/theme/filter.theme.css @@ -41,6 +41,9 @@ * jQuery.UI dropdown. */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */ /** + * jQuery.UI dialog. + */ + /** * Progress bar. */ /** diff --git a/core/themes/claro/css/theme/views_ui.admin.theme.css b/core/themes/claro/css/theme/views_ui.admin.theme.css index b6ff977..b68ca89 100644 --- a/core/themes/claro/css/theme/views_ui.admin.theme.css +++ b/core/themes/claro/css/theme/views_ui.admin.theme.css @@ -12,6 +12,53 @@ * Replaces the styles provided by the views_ui module. */ +: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. + */ +} + .views-admin .links { margin: 0; list-style: none outside none; @@ -790,15 +837,17 @@ td.group-title { .views-ui-dialog .views-progress-indicator { position: absolute; - top: 32px; - right: 10px; /* LTR */ + z-index: 1; + top: 0; + right: 4rem; /* LTR */ color: #fff; - font-size: 11px; + font-size: 0.702rem; + line-height: 4rem; } [dir="rtl"] .views-ui-dialog .views-progress-indicator { right: auto; - left: 10px; + left: 4rem; } .views-ui-dialog .views-progress-indicator:before { diff --git a/core/themes/claro/css/theme/views_ui.admin.theme.pcss.css b/core/themes/claro/css/theme/views_ui.admin.theme.pcss.css index 76e8121..7062da6 100644 --- a/core/themes/claro/css/theme/views_ui.admin.theme.pcss.css +++ b/core/themes/claro/css/theme/views_ui.admin.theme.pcss.css @@ -5,6 +5,8 @@ * Replaces the styles provided by the views_ui module. */ +@import "../base/variables.pcss.css"; + .views-admin .links { margin: 0; list-style: none outside none; @@ -633,17 +635,21 @@ td.group-title { .views-ui-dialog .views-override > * { margin: 0; } + .views-ui-dialog .views-progress-indicator { position: absolute; - top: 32px; - right: 10px; /* LTR */ - color: #fff; - font-size: 11px; + z-index: 1; + top: 0; + right: var(--jui-dialog-close-button-reserved-space); /* LTR */ + color: var(--jui-dialog-title-color); + font-size: var(--font-size-xxs); + line-height: var(--jui-dialog-title-min-height); } [dir="rtl"] .views-ui-dialog .views-progress-indicator { right: auto; - left: 10px; + left: var(--jui-dialog-close-button-reserved-space); } + .views-ui-dialog .views-progress-indicator:before { content: "\003C\00A0"; } diff --git a/core/themes/claro/images/core/ffffff/pencil.svg b/core/themes/claro/images/core/ffffff/pencil.svg new file mode 100644 index 0000000..229e480 --- /dev/null +++ b/core/themes/claro/images/core/ffffff/pencil.svg @@ -0,0 +1 @@ +