gin-messages.pcss.css

Same filename and directory in other branches
  1. main core/themes/default_admin/migration/css/base/gin-messages.pcss.css
.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: 29px;
    height: 29px;
    margin: var(--gin-spacing-s);
    padding: 0;
    text-indent: -99999px;
    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: 16px 16px;
      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.pcss.css

View source 
  1. .messages {

  2.   position: relative;

  3.   margin-block-start: 0;

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

  5.   opacity: 1;

  6.   border: 2px solid transparent;

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

  8. 

  9.   .gin--dark-mode 
  10. 

  11.   a {

  12.     &,

  13.     &:hover,

  14.     &:active {

  15.       color: #fff;

  16.     }

  17.   }

  18. 

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

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

  21.   }

  22. }

  23. 

  24. .messages__title {

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

  26. }

  27. 

  28. .messages__title,

  29. .messages__content {

  30.   margin-inline-start: 2.125rem;

  31. }

  32. 

  33. .messages {

  34.   .messages__header {

  35.     position: relative;

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

  37.     margin-inline-end: 1.5em;

  38.     background-image: none;

  39. 

  40.     &::before {

  41.       position: absolute;

  42.       display: block;

  43.       width: 1.5rem;

  44.       height: 1.5rem;

  45.       content: "";

  46.       inset-block-start: 2px;

  47.       inset-inline-start: 0;

  48. 

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

  50.         background-color: linktext !important;

  51.       }

  52.     }

  53.   }

  54. 

  55.   .button--dismiss {

  56.     position: absolute;

  57.     width: 29px;

  58.     height: 29px;

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

  60.     padding: 0;

  61.     text-indent: -99999px;

  62.     color: transparent;

  63.     border-color: transparent !important;

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

  65.     box-shadow: none;

  66.     inset-block-start: 0;

  67.     inset-inline-end: 0;

  68. 

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

  70.       color: transparent;

  71.       border-color: #fff !important;

  72.       background-color: transparent;

  73.     }

  74. 

  75.     &:focus,

  76.     &:hover:focus {

  77.       .icon-close {

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

  79.       }

  80.     }

  81. 

  82.     .icon-close {

  83.       position: absolute;

  84.       width: 100%;

  85.       height: 100%;

  86.       background-color: #fff;

  87.       inset-block-start: 0;

  88.       inset-inline-start: 0;

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

  90.       mask-size: 16px 16px;

  91.       mask-repeat: no-repeat;

  92.       mask-position: center;

  93. 

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

  95.         background-color: buttonBorder;

  96.       }

  97.     }

  98. 

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

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

  101.     }

  102.   }

  103. 

  104.   &.messages--info {

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

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

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

  108. 

  109.     .messages__header {

  110.       background: none;

  111. 

  112.       &::before {

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

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

  115.         mask-repeat: no-repeat;

  116.         mask-position: center left;

  117. 

  118.         &:dir(rtl) {

  119.           mask-position: center right;

  120.         }

  121.       }

  122.     }

  123. 

  124.     .button--dismiss {

  125.       .icon-close:link {

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

  127.       }

  128.     }

  129.   }

  130. 

  131.   &.messages--status {

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

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

  134. 

  135.     .messages__header {

  136.       &::before {

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

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

  139.         mask-repeat: no-repeat;

  140.         mask-position: center left;

  141. 

  142.         &:dir(rtl) {

  143.           mask-position: center right;

  144.         }

  145.       }

  146.     }

  147. 

  148.     .button--dismiss {

  149.       .icon-close:link {

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

  151.       }

  152.     }

  153.   }

  154. 

  155.   &.messages--warning {

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

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

  158. 

  159.     .messages__header {

  160.       &::before {

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

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

  163.         mask-repeat: no-repeat;

  164.         mask-position: center left;

  165. 

  166.         &:dir(rtl) {

  167.           mask-position: center right;

  168.         }

  169.       }

  170.     }

  171. 

  172.     .button--dismiss {

  173.       .icon-close:link {

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

  175.       }

  176.     }

  177.   }

  178. }

  179. 

  180. .messages--error {

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

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

  183. 

  184.   .messages__header {

  185.     &::before {

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

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

  188.       mask-repeat: no-repeat;

  189.       mask-position: center left;

  190. 

  191.       &:dir(rtl) {

  192.         mask-position: center right;

  193.       }

  194.     }

  195.   }

  196. 

  197.   .button--dismiss {

  198.     .icon-close:link {

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

  200.     }

  201.   }

  202. }

  203. 

  204. .messages-list {

  205.   margin-block-start: 0;

  206.   margin-block-end: 0;

  207. }

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