Commit 01d22dc2 authored by catch's avatar catch
Browse files

Issue #3261163 by bnjmnm, Spokje, longwave, nod_: Update to PostCSS 8 

(cherry picked from commit dd692fba)
parent 21219666

core/misc/dialog/off-canvas/css/base.css

+2 −2
Original line number Diff line number Diff line
@@ -29,7 +29,7 @@ 
  padding: 0 var(--off-canvas-padding) var(--off-canvas-padding);

  color: var(--off-canvas-text-color);

  background-color: var(--off-canvas-background-color);

  font-family: var(--off-canvas-font-family)

  font-family: var(--off-canvas-font-family);

}



#drupal-off-canvas-wrapper *:focus {
@@ -92,7 +92,7 @@ 
#drupal-off-canvas-wrapper .links {

    margin: 0;

    padding: 0;

    list-style: none

    list-style: none;

  }



#drupal-off-canvas-wrapper .links li {

core/misc/dialog/off-canvas/css/button.css

+6 −6
Original line number Diff line number Diff line
@@ -23,7 +23,7 @@ 
  --off-canvas-primary-button-background-color: #277abd;

  --off-canvas-primary-button-background-color-hover: #236aaf;

  --off-canvas-primary-button-text-color: #fff;

  --off-canvas-primary-button-text-color-hover: #fff

  --off-canvas-primary-button-text-color-hover: #fff;

}

#drupal-off-canvas-wrapper .button {

    display: inline-block;
@@ -43,7 +43,7 @@ 
    font-weight: var(--off-canvas-button-font-weight);

    line-height: normal;

    -webkit-appearance: none;

    appearance: none

    appearance: none;

  }

#drupal-off-canvas-wrapper .button:hover,

    #drupal-off-canvas-wrapper .button:active {
@@ -64,7 +64,7 @@ 
#drupal-off-canvas-wrapper .button--primary {

    margin-top: 0.9375rem;

    color: var(--off-canvas-primary-button-text-color);

    background: var(--off-canvas-primary-button-background-color)

    background: var(--off-canvas-primary-button-background-color);

  }

#drupal-off-canvas-wrapper .button--primary:hover,

    #drupal-off-canvas-wrapper .button--primary:active {
@@ -77,7 +77,7 @@ 
    color: var(--off-canvas-link-color);

    border: 0;

    background: transparent;

    font-size: var(--off-canvas-button-font-size)

    font-size: var(--off-canvas-button-font-size);

  }

#drupal-off-canvas-wrapper button.link:hover,

    #drupal-off-canvas-wrapper button.link:focus {
@@ -88,7 +88,7 @@ 
    text-decoration: none;

    color: #c72100;

    border-radius: 0;

    font-weight: 400

    font-weight: 400;

  }

#drupal-off-canvas-wrapper .button--danger:hover,

    #drupal-off-canvas-wrapper .button--danger:focus,
@@ -104,5 +104,5 @@ 
    }

.no-touchevents #drupal-off-canvas-wrapper .button--small {

    padding: 2px 1em;

    font-size: 0.8125rem

    font-size: 0.8125rem;

}

core/misc/dialog/off-canvas/css/details.css

+5 −5
Original line number Diff line number Diff line
@@ -23,7 +23,7 @@ 
  --off-canvas-details-summary-background-color: #333;

  --off-canvas-details-summary-background-color-hover: #222;

  --off-canvas-details-summary-text-color: #eee;

  --off-canvas-details-summary-text-color-hover: #fff

  --off-canvas-details-summary-text-color-hover: #fff;

}



#drupal-off-canvas-wrapper details {
@@ -31,10 +31,10 @@ 
    padding: 0 var(--off-canvas-padding);

    color: var(--off-canvas-details-text-color);

    border: solid var(--off-canvas-details-border-color) var(--off-canvas-details-border-width);

    background: var(--off-canvas-details-background-color)

    background: var(--off-canvas-details-background-color);

  }



#drupal-off-canvas-wrapper details + details {

:is(#drupal-off-canvas-wrapper details) + details {

      margin-top: calc(-1 * var(--off-canvas-details-border-width));

    }
@@ -44,7 +44,7 @@ 
    color: var(--off-canvas-details-summary-text-color);

    border: var(--off-canvas-details-summary-border);

    background-color: var(--off-canvas-details-summary-background-color);

    font-size: var(--off-canvas-details-summary-font-size)

    font-size: var(--off-canvas-details-summary-font-size);

  }



#drupal-off-canvas-wrapper summary:hover {
@@ -59,7 +59,7 @@ 
#drupal-off-canvas-wrapper summary {



    a {

      color: var(--off-canvas-details-text-color)

      color: var(--off-canvas-details-text-color);

    }



      a:hover {

core/misc/dialog/off-canvas/css/dropbutton.css

+25 −37
Original line number Diff line number Diff line
@@ -20,11 +20,11 @@ 
  --off-canvas-dropbutton-focus-outline-color: var(--off-canvas-focus-outline-color);

  --off-canvas-dropbutton-font-size: 0.75rem;

  --off-canvas-dropbutton-text-color: var(--off-canvas-button-text-color); /* Minimum 4.5:1 contrast ratio against --off-canvas-dropbutton-primary-background-color and --off-canvas-dropbutton-secondary-background-color. */

  --off-canvas-dropbutton-text-color-hover: var(--off-canvas-button-text-color-hover) /* Minimum 4.5:1 contrast ratio against --off-canvas-dropbutton-primary-background-color and --off-canvas-dropbutton-secondary-background-color. */

  --off-canvas-dropbutton-text-color-hover: var(--off-canvas-button-text-color-hover); /* Minimum 4.5:1 contrast ratio against --off-canvas-dropbutton-primary-background-color and --off-canvas-dropbutton-secondary-background-color. */

}

#drupal-off-canvas-wrapper .dropbutton-wrapper {

    margin-top: var(--off-canvas-vertical-spacing-unit);

    margin-bottom: var(--off-canvas-vertical-spacing-unit)

    margin-bottom: var(--off-canvas-vertical-spacing-unit);



    /*

     * Styles for when the dropbutton is expanded.
@@ -32,7 +32,7 @@ 
  }

#drupal-off-canvas-wrapper .dropbutton-wrapper.open {

      position: relative;

      z-index: 100

      z-index: 100;

    }

#drupal-off-canvas-wrapper .dropbutton-wrapper.open .secondary-action {

        visibility: visible;
@@ -43,21 +43,18 @@ 
#drupal-off-canvas-wrapper .dropbutton-wrapper.open .dropbutton-toggle button:before {

        transform: translateY(25%) rotate(225deg);

      }

#drupal-off-canvas-wrapper .dropbutton-wrapper {



/*

    * Styles for single link variant of dropbutton.

    */

  }

[dir="ltr"] #drupal-off-canvas-wrapper .dropbutton-wrapper.dropbutton-single .dropbutton-widget {

        padding-right: 0

        padding-right: 0;

}

[dir="rtl"] #drupal-off-canvas-wrapper .dropbutton-wrapper.dropbutton-single .dropbutton-widget {

        padding-left: 0

        padding-left: 0;

}

#drupal-off-canvas-wrapper .dropbutton-wrapper.dropbutton-single .dropbutton-action:first-child {

          border-right: solid 1px var(--off-canvas-dropbutton-border-color); /* LTR */

          border-radius: var(--off-canvas-dropbutton-border-radius)

          border-radius: var(--off-canvas-dropbutton-border-radius);

        }

[dir="rtl"] #drupal-off-canvas-wrapper .dropbutton-wrapper.dropbutton-single .dropbutton-action:first-child {

            border: solid 1px var(--off-canvas-dropbutton-border-color);
@@ -66,10 +63,10 @@ 
          justify-content: center;

        }

[dir="ltr"] #drupal-off-canvas-wrapper .dropbutton-widget {

    padding-right: var(--off-canvas-dropbutton-height)

    padding-right: var(--off-canvas-dropbutton-height);

}

[dir="rtl"] #drupal-off-canvas-wrapper .dropbutton-widget {

    padding-left: var(--off-canvas-dropbutton-height)

    padding-left: var(--off-canvas-dropbutton-height);

}

#drupal-off-canvas-wrapper .dropbutton-widget {

    position: relative;
@@ -79,16 +76,16 @@ 
    border-radius: var(--off-canvas-dropbutton-border-radius);

  }

[dir="ltr"] #drupal-off-canvas-wrapper .dropbutton {

    margin-left: 0

    margin-left: 0;

}

[dir="rtl"] #drupal-off-canvas-wrapper .dropbutton {

    margin-right: 0

    margin-right: 0;

}

[dir="ltr"] #drupal-off-canvas-wrapper .dropbutton {

    padding-left: 0

    padding-left: 0;

}

[dir="rtl"] #drupal-off-canvas-wrapper .dropbutton {

    padding-right: 0

    padding-right: 0;

}

#drupal-off-canvas-wrapper .dropbutton {

    height: var(--off-canvas-dropbutton-height);
@@ -97,19 +94,16 @@ 
    list-style: none;

    font-size: var(--off-canvas-dropbutton-font-size);

  }

#drupal-off-canvas-wrapper {



/* This is the button that expands/collapses the secondary options. */

}

#drupal-off-canvas-wrapper .dropbutton-toggle {

    padding: 0;

    border: 0

    border: 0;

  }

[dir="ltr"] #drupal-off-canvas-wrapper .dropbutton-toggle button {

      right: 0

      right: 0;

}

[dir="rtl"] #drupal-off-canvas-wrapper .dropbutton-toggle button {

      left: 0

      left: 0;

}

#drupal-off-canvas-wrapper .dropbutton-toggle button {

      position: absolute;
@@ -123,7 +117,7 @@ 
      cursor: pointer;

      border-color: var(--off-canvas-dropbutton-border-color);

      border-radius: 0 var(--border-radius) var(--border-radius) 0; /* LTR */

      background: var(--off-canvas-dropbutton-primary-background-color)

      background: var(--off-canvas-dropbutton-primary-background-color);

    }

#drupal-off-canvas-wrapper .dropbutton-toggle button:focus {

        outline: solid 2px var(--off-canvas-dropbutton-focus-outline-color);
@@ -141,20 +135,17 @@ 
[dir="rtl"] #drupal-off-canvas-wrapper .dropbutton-toggle button {

        border-radius: var(--off-canvas-dropbutton-border-radius) 0 0 var(--off-canvas-dropbutton-border-radius);

      }

#drupal-off-canvas-wrapper {



/* This is the first <li> element in the list of actions. */

}

[dir="ltr"] #drupal-off-canvas-wrapper .dropbutton-action:first-child {

      margin-right: 2px

      margin-right: 2px;

}

[dir="rtl"] #drupal-off-canvas-wrapper .dropbutton-action:first-child {

      margin-left: 2px

      margin-left: 2px;

}

#drupal-off-canvas-wrapper .dropbutton-action:first-child {

      border: solid var(--off-canvas-dropbutton-border-width) var(--off-canvas-dropbutton-border-color);

      border-radius: var(--off-canvas-dropbutton-border-radius) 0 0 var(--off-canvas-dropbutton-border-radius); /* LTR */

      background: var(--off-canvas-dropbutton-primary-background-color)

      background: var(--off-canvas-dropbutton-primary-background-color);

    }

[dir="rtl"] #drupal-off-canvas-wrapper .dropbutton-action:first-child {

        border: solid var(--off-canvas-dropbutton-border-width) var(--off-canvas-dropbutton-border-color);
@@ -168,7 +159,7 @@ 
      padding: 0 0.5625rem;

      text-decoration: none;

      color: var(--off-canvas-dropbutton-text-color);

      font-weight: 600

      font-weight: 600;

    }

#drupal-off-canvas-wrapper .dropbutton-action a:hover {

        color: var(--off-canvas-dropbutton-text-color);
@@ -177,17 +168,14 @@ 
        outline: solid 2px var(--off-canvas-dropbutton-focus-outline-color);

        outline-offset: -1px; /* Overlap parent container by 1px. */

      }

#drupal-off-canvas-wrapper {



/* These are the <li> elements other than the first. */

}

#drupal-off-canvas-wrapper .secondary-action {

    visibility: hidden;

    width: calc(100% + var(--off-canvas-dropbutton-height));

    margin-top: var(--off-canvas-dropbutton-border-width);

    border-right: var(--off-canvas-dropbutton-border-width) solid var(--off-canvas-dropbutton-border-color);

    border-left: var(--off-canvas-dropbutton-border-width) solid var(--off-canvas-dropbutton-border-color);

    background-color: var(--off-canvas-dropbutton-primary-background-color)

    background-color: var(--off-canvas-dropbutton-primary-background-color);

  }

#drupal-off-canvas-wrapper .secondary-action:last-child {

      border-bottom: var(--off-canvas-dropbutton-border-width) solid var(--off-canvas-dropbutton-border-color);

core/misc/dialog/off-canvas/css/form.css

+18 −30
Original line number Diff line number Diff line
@@ -21,12 +21,12 @@ 
  --drupal-off-canvas-input-text-color: #333;

  --drupal-off-canvas-fieldset-background-color: transparent;

  --drupal-off-canvas-fieldset-border-width: 1px;

  --drupal-off-canvas-fieldset-border-color: var(--off-canvas-border-color)

  --drupal-off-canvas-fieldset-border-color: var(--off-canvas-border-color);

}



#drupal-off-canvas-wrapper form {

    padding-top: var(--off-canvas-padding);

    padding-bottom: var(--off-canvas-padding)

    padding-bottom: var(--off-canvas-padding);

  }



#drupal-off-canvas-wrapper form > *:first-child {
@@ -78,10 +78,7 @@ 
    font-weight: bold;

  }



#drupal-off-canvas-wrapper {



/* Bartik uses the .field-multiple-table CSS class on its tabledrag tables. */

}



#drupal-off-canvas-wrapper :is(.fieldset, fieldset, .draggable-table, .field-multiple-table) input:where(:not([type="submit"], [type="checkbox"], [type="radio"])) {

    width: 100%; /* Prevent text fields from breaking out of tables and fieldsets at narrow widths. */
@@ -102,7 +99,7 @@ 
    font-size: var(--drupal-off-canvas-input-font-size);

  }



#drupal-off-canvas-wrapper input[type="checkbox"] + label, #drupal-off-canvas-wrapper input[type="radio"] + label {

:is(#drupal-off-canvas-wrapper input[type="checkbox"]) + label, :is(#drupal-off-canvas-wrapper input[type="radio"]) + label {

      display: inline;

    }
@@ -116,11 +113,11 @@ 
  }



[dir="ltr"] #drupal-off-canvas-wrapper select {

    padding-right: 1.25rem

    padding-right: 1.25rem;

}



[dir="rtl"] #drupal-off-canvas-wrapper select {

    padding-left: 1.25rem

    padding-left: 1.25rem;

}



#drupal-off-canvas-wrapper select {
@@ -131,7 +128,7 @@ 
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3e%3cpath fill='none' stroke-width='1.5' d='M1 1l6 6 6-6' stroke='%23545560'/%3e%3c/svg%3e");

    background-repeat: no-repeat;

    background-position: center right 5px; /* LTR */

    background-size: 0.75rem

    background-size: 0.75rem;

  }



[dir="rtl"] #drupal-off-canvas-wrapper select {
@@ -141,39 +138,36 @@ 
@media (forced-colors: active) {



[dir="ltr"] #drupal-off-canvas-wrapper select {

      padding-right: 0

      padding-right: 0;

  }



[dir="rtl"] #drupal-off-canvas-wrapper select {

      padding-left: 0

      padding-left: 0;

  }



#drupal-off-canvas-wrapper select {

      -webkit-appearance: revert;

      appearance: revert;

      background: revert

      background: revert;

  }

    }



#drupal-off-canvas-wrapper {



/*

   * Autocomplete.

   */

}



[dir="ltr"] #drupal-off-canvas-wrapper .form-autocomplete {

    padding-right: 2.5rem

    padding-right: 2.5rem;

}



[dir="rtl"] #drupal-off-canvas-wrapper .form-autocomplete {

    padding-left: 2.5rem

    padding-left: 2.5rem;

}



#drupal-off-canvas-wrapper .form-autocomplete { /* Room for icon. */

    background-image: url("data:image/svg+xml,%3csvg width='40' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 1C3.46.827-.188 5.787 1.313 10.068c1.176 4.384 6.993 6.417 10.637 3.7.326-.39.565.276.846.442l3.74 3.739 1.413-1.414-4.35-4.35c2.811-3.468 1.15-9.247-3.062-10.71A7.003 7.003 0 008 1zm0 2c3.242-.123 5.849 3.42 4.777 6.477-.842 3.132-4.994 4.58-7.6 2.65-2.745-1.73-2.9-6.125-.285-8.044A5.006 5.006 0 018 3z' fill='%23868686'/%3e%3c/svg%3e");

    background-repeat: no-repeat;

    background-position: center right 1px /* LTR */

    background-position: center right 1px; /* LTR */

  }



#drupal-off-canvas-wrapper .form-autocomplete.ui-autocomplete-loading {
@@ -184,10 +178,7 @@ 
      background-position: center left 1px;

    }



#drupal-off-canvas-wrapper {



/* This is the background <ul> for the autocomplete dropdown. */

}



#drupal-off-canvas-wrapper .ui-autocomplete {

    margin: 0;
@@ -195,7 +186,7 @@ 
    list-style: none;

    border: var(--drupal-off-canvas-input-border);

    background-color: var(--drupal-off-canvas-input-background-color);

    box-shadow: 0 1px 1px 0 var(--off-canvas-background-color) /* Ensure edge is visible if appearing over another form element. */

    box-shadow: 0 1px 1px 0 var(--off-canvas-background-color); /* Ensure edge is visible if appearing over another form element. */

  }



#drupal-off-canvas-wrapper .ui-autocomplete a {
@@ -203,7 +194,7 @@ 
      padding: var(--drupal-off-canvas-input-padding);

      cursor: pointer;

      color: var(--drupal-off-canvas-input-text-color);

      font-size: var(--drupal-off-canvas-input-font-size)

      font-size: var(--drupal-off-canvas-input-font-size);

    }



#drupal-off-canvas-wrapper .ui-autocomplete a:hover {
@@ -216,13 +207,10 @@ 
        outline-offset: -2px;

      }



#drupal-off-canvas-wrapper {



/*

   * Claro injects a "Loading" autocomplete message that affects the positioning

   * of the ui-autocomplete dropdown. We remove this to normalize the markup.

   */

}



#drupal-off-canvas-wrapper .claro-autocomplete__message {

    display: none;