[Summary view] [Print] [Text view]

   1  @import "../../tools/tools";
   2  @import "../../../../../../vendor/joomla-custom-elements/css/joomla-alert.css";
   3  
   4  // The following is a restyle for the system alerts
   5  #system-message-container {
   6    &:empty {
   7      display: none;
   8      margin-top: 0;
   9    }
  10  }
  11  
  12  #system-message-container joomla-alert {
  13    position: relative;
  14    display: flex;
  15    width: 100%;
  16    min-width: 16rem;
  17    padding: 0;
  18    margin-bottom: 0;
  19    color: var(--gray-dark);
  20    background-color: $white;
  21    border: 1px solid var(--alert-accent-color, transparent);
  22    border-radius: .25rem;
  23    transition: opacity .15s linear;
  24  
  25    + * {
  26      margin-top: 1rem;
  27    }
  28  
  29    .alert-heading {
  30      display: flex;
  31      flex-direction: column;
  32      justify-content: center;
  33      align-content: center;
  34      padding: .8rem;
  35      color: var(--alert-heading-text);
  36      background: var(--alert-accent-color, transparent);
  37  
  38      .message::before,
  39      .success::before {
  40        display: inline-block;
  41        width: 1em;
  42        height: 1em;
  43        content: "";
  44        background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(255, 255, 255, .95)" d="M1299 813l-422 422q-19 19-45 19t-45-19l-294-294q-19-19-19-45t19-45l102-102q19-19 45-19t45 19l147 147 275-275q19-19 45-19t45 19l102 102q19 19 19 45t-19 45zm141 83q0-148-73-273t-198-198-273-73-273 73-198 198-73 273 73 273 198 198 273 73 273-73 198-198 73-273zm224 0q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"/></svg>');
  45        background-size: 100%;
  46      }
  47  
  48      .notice::before,
  49      .info::before {
  50        display: inline-block;
  51        width: 1em;
  52        height: 1em;
  53        content: "";
  54        background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(255, 255, 255, .95)" d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"/></svg>');
  55        background-size: 100%;
  56      }
  57  
  58      .warning::before {
  59        display: inline-block;
  60        width: 1em;
  61        height: 1em;
  62        content: "";
  63        background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(255, 255, 255, .95)" d="M1024 1375v-190q0-14-9.5-23.5t-22.5-9.5h-192q-13 0-22.5 9.5t-9.5 23.5v190q0 14 9.5 23.5t22.5 9.5h192q13 0 22.5-9.5t9.5-23.5zm-2-374l18-459q0-12-10-19-13-11-24-11h-220q-11 0-24 11-10 7-10 21l17 457q0 10 10 16.5t24 6.5h185q14 0 23.5-6.5t10.5-16.5zm-14-934l768 1408q35 63-2 126-17 29-46.5 46t-63.5 17h-1536q-34 0-63.5-17t-46.5-46q-37-63-2-126l768-1408q17-31 47-49t65-18 65 18 47 49z"/></svg>');
  64        background-size: 100%;
  65      }
  66  
  67      .error::before,
  68      .danger::before {
  69        display: inline-block;
  70        width: 1em;
  71        height: 1em;
  72        content: "";
  73        background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(255, 255, 255, .95)" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm101.8-262.2L295.6 256l62.2 62.2c4.7 4.7 4.7 12.3 0 17l-22.6 22.6c-4.7 4.7-12.3 4.7-17 0L256 295.6l-62.2 62.2c-4.7 4.7-12.3 4.7-17 0l-22.6-22.6c-4.7-4.7-4.7-12.3 0-17l62.2-62.2-62.2-62.2c-4.7-4.7-4.7-12.3 0-17l22.6-22.6c4.7-4.7 12.3-4.7 17 0l62.2 62.2 62.2-62.2c4.7-4.7 12.3-4.7 17 0l22.6 22.6c4.7 4.7 4.7 12.3 0 17z"/></svg>');
  74        background-size: 100%;
  75      }
  76    }
  77  
  78    .alert-wrapper {
  79      width: 100%;
  80    }
  81  
  82    .alert-link {
  83      color: var(--success, inherit);
  84    }
  85  
  86    &[type="success"],
  87    &[type="message"] {
  88      --alert-accent-color: var(--success);
  89      --alert-heading-text: hsla(0, 0%, 100%, .95);
  90      --alert-close-button: var(--success);
  91      background-color: $white;
  92    }
  93  
  94    &[type="info"],
  95    &[type="notice"] {
  96      --alert-accent-color: var(--info);
  97      --alert-heading-text: hsla(0, 0%, 100%, .95);
  98      --alert-close-button: var(--info);
  99      background-color: $white;
 100    }
 101  
 102    &[type="warning"] {
 103      --alert-accent-color: var(--warning);
 104      --alert-heading-text: hsla(0, 0%, 100%, .95);
 105      --alert-close-button: var(--warning);
 106      background-color: $white;
 107    }
 108  
 109    &[type="error"],
 110    &[type="danger"] {
 111      --alert-accent-color: var(--danger);
 112      --alert-heading-text: hsla(0, 0%, 100%, .95);
 113      --alert-close-button: var(--danger);
 114      background-color: $white;
 115    }
 116  
 117    .joomla-alert--close,
 118    .joomla-alert-button--close {
 119      position: absolute;
 120      top: 0;
 121      right: 0;
 122      padding: .2rem .8rem;
 123      font-size: 2rem;
 124      color: var(--alert-close-button);
 125      background: none;
 126      border: 0;
 127      opacity: 1;
 128  
 129      &:hover,
 130      &:focus {
 131        text-decoration: none;
 132        cursor: pointer;
 133        opacity: .75;
 134      }
 135  
 136      [dir=rtl] & {
 137        right: auto;
 138        left: 0;
 139        padding: .2rem .6rem;
 140      }
 141    }
 142  
 143    div {
 144      font-size: 1rem;
 145      .alert-message {
 146        padding: .3rem 2rem .3rem .3rem;
 147        margin: .5rem;
 148  
 149        [dir=rtl] & {
 150          padding: .3rem .3rem .3rem 2rem;
 151        }
 152      }
 153  
 154      .alert-message:not(:first-of-type) {
 155        border-top: 1px solid var(--alert-accent-color);
 156      }
 157    }
 158  }