gin-messages.css

Same filename and directory in other branches
  1. main core/themes/default_admin/migration/css/base/gin-messages.css
/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

.messages {
  position: relative;
  margin-block-start: 0;
  padding: var(--gin-spacing-m);
  opacity: 1;
  border: 2px solid transparent;
  border-radius: var(--gin-border-l);

  .gin--dark-mode & {
    box-shadow: 0 6px 16px var(--gin-border-color-layer);
  }

  a {
    &,
    &:hover,
    &:active {
      color: #fff;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    transition: opacity var(--gin-transition-fast);
  }
}

.messages__title {
  font-weight: var(--gin-font-weight-bold);
}

.messages__title,
.messages__content {
  margin-inline-start: 2.125rem;
}

.messages {
  .messages__header {
    position: relative;
    margin-block-end: var(--gin-spacing-xs);
    margin-inline-end: 1.5em;
    background-image: none;

    &::before {
      position: absolute;
      display: block;
      width: 1.5rem;
      height: 1.5rem;
      content: "";
      inset-block-start: 2px;
      inset-inline-start: 0;

      @media (forced-colors: active) {
        background-color: linktext !important;
      }
    }
  }

  .button--dismiss {
    position: absolute;
    width: 1.8125rem;
    height: 1.8125rem;
    margin: var(--gin-spacing-s);
    padding: 0;
    text-indent: -6249.9375rem;
    color: transparent;
    border-color: transparent !important;
    border-radius: var(--gin-border-m);
    box-shadow: none;
    inset-block-start: 0;
    inset-inline-end: 0;

    &:hover:not(:focus) {
      color: transparent;
      border-color: #fff !important;
      background-color: transparent;
    }

    &:focus,
    &:hover:focus {
      .icon-close {
        background-color: var(--gin-bg-app);
      }
    }

    .icon-close {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #fff;
      inset-block-start: 0;
      inset-inline-start: 0;
      mask-image: var(--admin-icon-close);
      mask-size: 1rem 1rem;
      mask-repeat: no-repeat;
      mask-position: center;

      @media (forced-colors: active) {
        background-color: buttonBorder;
      }
    }

    @media (prefers-reduced-motion: no-preference) {
      transition: var(--gin-transition);
    }
  }

  &.messages--info {
    color: var(--gin-color-info-light);
    border-color: var(--gin-bg-info);
    background: var(--gin-bg-info);

    .messages__header {
      background: none;

      &::before {
        background-color: var(--gin-color-info-light);
        mask-image: var(--admin-icon-info);
        mask-repeat: no-repeat;
        mask-position: center left;

        &:dir(rtl) {
          mask-position: center right;
        }
      }
    }

    .button--dismiss {
      .icon-close:link {
        background-color: var(--gin-color-info-light);
      }
    }
  }

  &.messages--status {
    color: var(--gin-color-green-light);
    background: var(--gin-bg-green);

    .messages__header {
      &::before {
        background-color: var(--gin-color-green-light);
        mask-image: var(--admin-icon-status);
        mask-repeat: no-repeat;
        mask-position: center left;

        &:dir(rtl) {
          mask-position: center right;
        }
      }
    }

    .button--dismiss {
      .icon-close:link {
        background-color: var(--gin-color-green-light);
      }
    }
  }

  &.messages--warning {
    color: var(--gin-color-warning-light);
    background: var(--gin-bg-warning);

    .messages__header {
      &::before {
        background-color: var(--gin-color-warning-light);
        mask-image: var(--admin-icon-warning);
        mask-repeat: no-repeat;
        mask-position: center left;

        &:dir(rtl) {
          mask-position: center right;
        }
      }
    }

    .button--dismiss {
      .icon-close:link {
        background-color: var(--gin-color-warning-light);
      }
    }
  }
}

.messages--error {
  color: var(--gin-color-danger-light);
  background: var(--gin-bg-danger);

  .messages__header {
    &::before {
      background-color: var(--gin-color-danger-light);
      mask-image: var(--admin-icon-error);
      mask-repeat: no-repeat;
      mask-position: center left;

      &:dir(rtl) {
        mask-position: center right;
      }
    }
  }

  .button--dismiss {
    .icon-close:link {
      background-color: var(--gin-color-danger-light);
    }
  }
}

.messages-list {
  margin-block-start: 0;
  margin-block-end: 0;
}

File

View on git.drupalcode.org

core/themes/default_admin/migration/css/base/gin-messages.css

View source 
  1. /*

  2.  * DO NOT EDIT THIS FILE.

  3.  * See the following change record for more information,

  4.  * https://www.drupal.org/node/3084859

  5.  * @preserve

  6.  */

  7. 

  8. .messages {

  9.   position: relative;

  10.   margin-block-start: 0;

  11.   padding: var(--gin-spacing-m);

  12.   opacity: 1;

  13.   border: 2px solid transparent;

  14.   border-radius: var(--gin-border-l);

  15. 

  16.   .gin--dark-mode 
  17. 

  18.   a {

  19.     &,

  20.     &:hover,

  21.     &:active {

  22.       color: #fff;

  23.     }

  24.   }

  25. 

  26.   @media (prefers-reduced-motion: no-preference) {

  27.     transition: opacity var(--gin-transition-fast);

  28.   }

  29. }

  30. 

  31. .messages__title {

  32.   font-weight: var(--gin-font-weight-bold);

  33. }

  34. 

  35. .messages__title,

  36. .messages__content {

  37.   margin-inline-start: 2.125rem;

  38. }

  39. 

  40. .messages {

  41.   .messages__header {

  42.     position: relative;

  43.     margin-block-end: var(--gin-spacing-xs);

  44.     margin-inline-end: 1.5em;

  45.     background-image: none;

  46. 

  47.     &::before {

  48.       position: absolute;

  49.       display: block;

  50.       width: 1.5rem;

  51.       height: 1.5rem;

  52.       content: "";

  53.       inset-block-start: 2px;

  54.       inset-inline-start: 0;

  55. 

  56.       @media (forced-colors: active) {

  57.         background-color: linktext !important;

  58.       }

  59.     }

  60.   }

  61. 

  62.   .button--dismiss {

  63.     position: absolute;

  64.     width: 1.8125rem;

  65.     height: 1.8125rem;

  66.     margin: var(--gin-spacing-s);

  67.     padding: 0;

  68.     text-indent: -6249.9375rem;

  69.     color: transparent;

  70.     border-color: transparent !important;

  71.     border-radius: var(--gin-border-m);

  72.     box-shadow: none;

  73.     inset-block-start: 0;

  74.     inset-inline-end: 0;

  75. 

  76.     &:hover:not(:focus) {

  77.       color: transparent;

  78.       border-color: #fff !important;

  79.       background-color: transparent;

  80.     }

  81. 

  82.     &:focus,

  83.     &:hover:focus {

  84.       .icon-close {

  85.         background-color: var(--gin-bg-app);

  86.       }

  87.     }

  88. 

  89.     .icon-close {

  90.       position: absolute;

  91.       width: 100%;

  92.       height: 100%;

  93.       background-color: #fff;

  94.       inset-block-start: 0;

  95.       inset-inline-start: 0;

  96.       mask-image: var(--admin-icon-close);

  97.       mask-size: 1rem 1rem;

  98.       mask-repeat: no-repeat;

  99.       mask-position: center;

  100. 

  101.       @media (forced-colors: active) {

  102.         background-color: buttonBorder;

  103.       }

  104.     }

  105. 

  106.     @media (prefers-reduced-motion: no-preference) {

  107.       transition: var(--gin-transition);

  108.     }

  109.   }

  110. 

  111.   &.messages--info {

  112.     color: var(--gin-color-info-light);

  113.     border-color: var(--gin-bg-info);

  114.     background: var(--gin-bg-info);

  115. 

  116.     .messages__header {

  117.       background: none;

  118. 

  119.       &::before {

  120.         background-color: var(--gin-color-info-light);

  121.         mask-image: var(--admin-icon-info);

  122.         mask-repeat: no-repeat;

  123.         mask-position: center left;

  124. 

  125.         &:dir(rtl) {

  126.           mask-position: center right;

  127.         }

  128.       }

  129.     }

  130. 

  131.     .button--dismiss {

  132.       .icon-close:link {

  133.         background-color: var(--gin-color-info-light);

  134.       }

  135.     }

  136.   }

  137. 

  138.   &.messages--status {

  139.     color: var(--gin-color-green-light);

  140.     background: var(--gin-bg-green);

  141. 

  142.     .messages__header {

  143.       &::before {

  144.         background-color: var(--gin-color-green-light);

  145.         mask-image: var(--admin-icon-status);

  146.         mask-repeat: no-repeat;

  147.         mask-position: center left;

  148. 

  149.         &:dir(rtl) {

  150.           mask-position: center right;

  151.         }

  152.       }

  153.     }

  154. 

  155.     .button--dismiss {

  156.       .icon-close:link {

  157.         background-color: var(--gin-color-green-light);

  158.       }

  159.     }

  160.   }

  161. 

  162.   &.messages--warning {

  163.     color: var(--gin-color-warning-light);

  164.     background: var(--gin-bg-warning);

  165. 

  166.     .messages__header {

  167.       &::before {

  168.         background-color: var(--gin-color-warning-light);

  169.         mask-image: var(--admin-icon-warning);

  170.         mask-repeat: no-repeat;

  171.         mask-position: center left;

  172. 

  173.         &:dir(rtl) {

  174.           mask-position: center right;

  175.         }

  176.       }

  177.     }

  178. 

  179.     .button--dismiss {

  180.       .icon-close:link {

  181.         background-color: var(--gin-color-warning-light);

  182.       }

  183.     }

  184.   }

  185. }

  186. 

  187. .messages--error {

  188.   color: var(--gin-color-danger-light);

  189.   background: var(--gin-bg-danger);

  190. 

  191.   .messages__header {

  192.     &::before {

  193.       background-color: var(--gin-color-danger-light);

  194.       mask-image: var(--admin-icon-error);

  195.       mask-repeat: no-repeat;

  196.       mask-position: center left;

  197. 

  198.       &:dir(rtl) {

  199.         mask-position: center right;

  200.       }

  201.     }

  202.   }

  203. 

  204.   .button--dismiss {

  205.     .icon-close:link {

  206.       background-color: var(--gin-color-danger-light);

  207.     }

  208.   }

  209. }

  210. 

  211. .messages-list {

  212.   margin-block-start: 0;

  213.   margin-block-end: 0;

  214. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.