Unverified Commit d2cf243c authored by Alex Pott's avatar Alex Pott
Browse files

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

core/themes/claro/claro.info.yml

+7 −0
Original line number Diff line number Diff line
@@ -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:

core/themes/claro/claro.libraries.yml

+8 −0
Original line number Diff line number Diff line
@@ -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:

core/themes/claro/css/base/elements.css

+3 −0
Original line number Diff line number Diff line
@@ -39,6 +39,9 @@ 
  /**

   * jQuery.UI dropdown.

   */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */

  /**

   * jQuery.UI dialog.

   */

  /**

   * Progress bar.

   */

core/themes/claro/css/base/off-canvas.theme.css

0 → 100644
+130 −0
Original line number Diff line number Diff line 
/*

 * 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;

}

core/themes/claro/css/base/off-canvas.theme.pcss.css

0 → 100644
+71 −0
Original line number Diff line number Diff line 
/**

 * @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;

}