mekari-ui-toolkit/dist/css/components/mekari-ui-alert.css

Mekari ui toolkit

.close {
  float: right;
  font-size: 1.3125rem;
  font-weight: 500;
  line-height: 1;
  color: #777;
  text-shadow: 0 1px 0 #fff;
  opacity: .5;
}

@media (max-width: 1200px) {
  .close {
    font-size: calc(1.25625rem + 0.075vw) ;
  }
}

.close:hover {
  color: #777;
  text-decoration: none;
}

.close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus {
  opacity: .75;
}

button.close {
  padding: 0;
  background-color: transparent;
  border: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

a.close.disabled {
  pointer-events: none;
}

.fade {
  transition: opacity 0.15s linear;
}

@media (prefers-reduced-motion: reduce) {
  .fade {
    transition: none;
  }
}

.fade:not(.show) {
  opacity: 0;
}

.collapse:not(.show) {
  display: none;
}

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
  .collapsing {
    transition: none;
  }
}

.alert {
  position: relative;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 4px;
}

.alert-heading {
  color: inherit;
}

.alert-link {
  font-weight: 500;
}

.alert-dismissible {
  padding-right: 3.8125rem;
}

.alert-dismissible .close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.75rem 1.25rem;
  color: inherit;
}

.alert-danger {
  color: #702112;
  background-color: #f7d9d3;
  border-color: #f4cac1;
}

.alert-danger hr {
  border-top-color: #f0b7ab;
}

.alert-danger .alert-link {
  color: #44140b;
}

.alert-success {
  color: #005332;
  background-color: #ccecdf;
  border-color: #b8e4d3;
}

.alert-success hr {
  border-top-color: #a6ddc8;
}

.alert-success .alert-link {
  color: #002013;
}

.alert-info {
  color: #857a50;
  background-color: #fffbeb;
  border-color: #fff9e2;
}

.alert-info hr {
  border-top-color: #fff4c9;
}

.alert-info .alert-link {
  color: #655d3d;
}

.alert-warning {
  color: #855f00;
  background-color: #fff1cc;
  border-color: #ffebb8;
}

.alert-warning hr {
  border-top-color: #ffe49f;
}

.alert-warning .alert-link {
  color: #523b00;
}

.alert-primary {
  color: #003163;
  background-color: #ccdff2;
  border-color: #b8d2ed;
}

.alert-primary hr {
  border-top-color: #a4c5e8;
}

.alert-primary .alert-link {
  color: #001830;
}

.alert-jurnal {
  color: #005173;
  background-color: #ccebf8;
  border-color: #b8e3f6;
}

.alert-jurnal hr {
  border-top-color: #a1daf3;
}

.alert-jurnal .alert-link {
  color: #002d40;
}

.alert-talenta {
  color: #64161b;
  background-color: #f2d4d6;
  border-color: #edc3c6;
}

.alert-talenta hr {
  border-top-color: #e7afb3;
}

.alert-talenta .alert-link {
  color: #3a0d10;
}

.alert-klikpajak {
  color: #813901;
  background-color: #fee2cc;
  border-color: #fdd6b8;
}

.alert-klikpajak hr {
  border-top-color: #fcc89f;
}

.alert-klikpajak .alert-link {
  color: #4e2301;
}

.alert-mekari {
  color: #392577;
  background-color: #e2dafa;
  border-color: #d6ccf8;
}

.alert-mekari hr {
  border-top-color: #c4b6f5;
}

.alert-mekari .alert-link {
  color: #261950;
}

.alert-dark {
  color: #111111;
  background-color: lightgray;
  border-color: #c1c1c1;
}

.alert-dark hr {
  border-top-color: #b4b4b4;
}

.alert-dark .alert-link {
  color: black;
}

.alert-slate {
  color: #3e3e3e;
  background-color: #e4e4e4;
  border-color: #d9d9d9;
}

.alert-slate hr {
  border-top-color: #cccccc;
}

.alert-slate .alert-link {
  color: #252525;
}

.alert-muted {
  color: #5e5e5e;
  background-color: #f0f0f0;
  border-color: #eaeaea;
}

.alert-muted hr {
  border-top-color: #dddddd;
}

.alert-muted .alert-link {
  color: #454545;
}

.alert-smoke {
  color: #767676;
  background-color: #f9f9f9;
  border-color: #f7f7f7;
}

.alert-smoke hr {
  border-top-color: #eaeaea;
}

.alert-smoke .alert-link {
  color: #5d5d5d;
}

.alert-light {
  color: #838383;
  background-color: #fefefe;
  border-color: #fefefe;
}

.alert-light hr {
  border-top-color: #f1f1f1;
}

.alert-light .alert-link {
  color: #6a6a6a;
}

.alert-cloud {
  color: #7e7f80;
  background-color: #fcfdfd;
  border-color: #fbfcfd;
}

.alert-cloud hr {
  border-top-color: #eaeff5;
}

.alert-cloud .alert-link {
  color: #656666;
}

.alert-link {
  color: #0a2d85;
  background-color: #d0ddff;
  border-color: #bdd0ff;
}

.alert-link hr {
  border-top-color: #a4beff;
}

.alert-link .alert-link {
  color: #061d56;
}

.alert-white {
  color: #858585;
  background-color: white;
  border-color: white;
}

.alert-white hr {
  border-top-color: #f2f2f2;
}

.alert-white .alert-link {
  color: #6c6c6c;
}

.alert-danger {
  color: #d74022;
  background-color: #f9e2de;
  border: none;
}

.alert-toast.alert-danger {
  border: 1px solid #d74022;
}

.alert-success {
  color: #009f61;
  background-color: #d9f1e7;
  border: none;
}

.alert-toast.alert-success {
  border: 1px solid #009f61;
}

.alert-info {
  color: #ffeb99;
  background-color: #d9e7f5;
  border: none;
}

.alert-toast.alert-info {
  border: 1px solid #ffeb99;
}

.alert-warning {
  color: #ffb700;
  background-color: #fff5dc;
  border: none;
}

.alert-toast.alert-warning {
  border: 1px solid #ffb700;
}

.alert-info {
  color: #005fbf;
  background-color: rgba(0, 95, 191, 0.15);
  border: none;
}

.alert-toast.alert-info {
  border: 1px solid #005fbf;
}

.alert-error {
  color: #d74022;
  background-color: rgba(215, 64, 34, 0.15);
  border: none;
}

.alert-toast.alert-error {
  border: 1px solid #d74022;
}

.alert {
  display: flex;
  justify-content: space-between;
  max-width: 1200px;
  padding: 12px;
  font-size: 0;
}

.alert .alert-icon {
  flex-basis: 24px;
  width: 24px;
  margin-right: 12px;
  font-size: 14px;
  vertical-align: top;
}

.alert .alert-icon .ic {
  color: inherit !important;
}

.alert .alert-content {
  display: inline-block;
  font-size: 14px;
  color: #212121;
  vertical-align: top;
}

.alert .alert-icon + .alert-content {
  flex: 1 1 0;
}

.alert .alert-title {
  font-weight: 500;
  line-height: 20px;
}

.alert .alert-description {
  line-height: 20px;
}

.alert .alert-title + .alert-description {
  padding-top: 4px;
}

.alert .alert-link {
  display: block;
  padding-top: 16px;
  font-weight: 400;
  color: #1357ff !important;
  background-color: transparent;
}

.alert .close {
  margin-left: 8px;
}

.alert.alert-dismissible .close {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  padding: 0;
  color: #777;
}

.alert.alert-dismissible .close .ic {
  width: 20px;
  height: 20px;
  font-size: 20px;
  font-weight: 700;
  line-height: 20px;
  vertical-align: middle;
}

.alert.alert-small {
  display: inline-flex;
  min-width: 400px;
}

.alert.alert-small .alert-content {
  display: flex;
}

.alert.alert-small .alert-description {
  display: inline-block;
}

.alert.alert-small .alert-link {
  display: inline-block;
  padding: 0;
  padding-left: 16px;
  font-weight: 400;
  color: #1357ff !important;
  background-color: transparent;
}

.alert.alert-toast {
  display: inline-flex;
  padding: 12px;
  font-size: 0;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 4px 8px 0 rgba(119, 119, 119, 0.1), 0 12px 20px 0 rgba(119, 119, 119, 0.2);
}

.alert.alert-toast .alert-icon {
  margin-right: 8px;
}

.alert.alert-toast .alert-description {
  display: inline-block;
}

.alert.alert-toast .alert-link {
  display: inline-block;
  padding: 0;
  padding-left: 16px;
  font-weight: 400;
  color: #1357ff !important;
  background-color: transparent;
}
/*# sourceMappingURL=mekari-ui-alert.css.map */