smart-webcomponents/source/styles/default/smart.toast.css

Web Components & Custom Elements for Professional Web Applications

/* smart-toast */
smart-toast {
  font-family: var(--smart-font-family-icon);
  display: none;
}
smart-toast .smart-toast-container {
  font-family: var(--smart-font-family-icon);
  display: none;
}

.smart-toast-container.smart-toast-container-top-left, .smart-toast-container.smart-toast-container-top-right, .smart-toast-container.smart-toast-container-bottom-left, .smart-toast-container.smart-toast-container-bottom-right, .smart-toast-container.smart-toast-container-custom {
  width: var(--smart-toast-container-default-width);
  padding: 5px;
  position: fixed;
  overflow-y: hidden;
  box-sizing: border-box;
  z-index: var(--smart-editor-drop-down-z-index);
}
.smart-toast-container.smart-toast-container-top-left {
  top: 0px;
  left: 0px;
}
.smart-toast-container.smart-toast-container-top-right {
  top: 0px;
  right: 0px;
}
.smart-toast-container.smart-toast-container-bottom-left {
  bottom: 0px;
  left: 0px;
}
.smart-toast-container.smart-toast-container-bottom-right {
  bottom: 0px;
  right: 0px;
}
.smart-toast-container.smart-toast-container-modal {
  width: 100%;
  height: 100%;
}
.smart-toast-container.smart-toast-container-modal:not(:empty) {
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: var(--smart-editor-drop-down-z-index);
}
.smart-toast-container.smart-toast-container-modal .smart-toast-item {
  width: 200px;
}

.smart-toast-item {
  display: block;
  width: 100%;
  margin-bottom: 2px;
  opacity: 0.8;
  user-select: none;
  background-color: var(--smart-surface);
  border-color: var(--smart-border);
  color: var(--smart-surface-color);
}
.smart-toast-item:hover {
  opacity: 1;
}
.smart-toast-item .smart-toast-item-header {
  display: flex;
  justify-content: flex-end;
  height: var(--smart-toast-header-height);
}
.smart-toast-item .smart-toast-item-header .smart-toast-item-close-button {
  font-family: var(--smart-font-family-icon);
  user-select: none;
  position: relative;
  cursor: pointer;
  color: black;
  margin: 5px;
  opacity: 1;
  display: none;
  width: var(--smart-font-size);
  height: var(--smart-font-size);
  color: inherit;
}
.smart-toast-item .smart-toast-item-container {
  padding: 0px 0px 10px 0px;
  display: flex;
  align-items: center;
  position: relative;
  top: -4px;
}
.smart-toast-item .smart-toast-item-container .smart-toast-item-icon {
  width: 25px;
  height: 25px;
  margin: 0px 15px 0px 15px;
  display: inline-block;
  background-repeat: no-repeat;
}
.smart-toast-item .smart-toast-item-container .smart-toast-item-icon:after {
  content: var(--smart-toast-item-icon);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--smart-font-family-icon);
  font-size: 1.75em;
}
.smart-toast-item .smart-toast-item-container .smart-toast-item-content {
  text-align: center;
  opacity: 1;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  text-overflow: ellipsis;
  overflow: hidden;
  display: inline-block;
  width: calc(100% - 110px);
  margin: 0px 15px 0px 15px;
}
.smart-toast-item[show-close-button] .smart-toast-item-header .smart-toast-item-close-button {
  display: block;
}
.smart-toast-item[show-close-button] .smart-toast-item-header .smart-toast-item-close-button:after {
  font-family: var(--smart-font-family-icon);
  content: var(--smart-icon-close);
  font-size: inherit;
  user-select: none;
  cursor: pointer;
  color: inherit;
  position: absolute;
  left: 0px;
  top: 0px;
  display: block;
}
.smart-toast-item[opened] {
  opacity: 0.8;
}
.smart-toast-item[opened]:hover {
  opacity: 1;
}
.smart-toast-item.blink {
  animation: blink normal 1s infinite ease-in;
}
.smart-toast-item.primary {
  background-color: var(--smart-primary);
  border-color: var(--smart-primary);
  color: var(--smart-primary-color);
}
.smart-toast-item.primary .smart-toast-item-header .smart-toast-item-close-button {
  color: var(--smart-primary-color);
}
.smart-toast-item.secondary {
  background-color: var(--smart-secondary);
  border-color: var(--smart-secondary);
  color: var(--smart-secondary-color);
}
.smart-toast-item.secondary .smart-toast-item-header .smart-toast-item-close-button {
  color: var(--smart-primary-color);
}
.smart-toast-item.success {
  background-color: var(--smart-success);
  border-color: var(--smart-success);
  color: var(--smart-success-color);
}
.smart-toast-item.success .smart-toast-item-header .smart-toast-item-close-button {
  color: var(--smart-primary-color);
}
.smart-toast-item.error {
  background-color: var(--smart-error);
  border-color: var(--smart-error);
  color: var(--smart-error-color);
}
.smart-toast-item.error .smart-toast-item-header .smart-toast-item-close-button {
  color: var(--smart-primary-color);
}
.smart-toast-item.info {
  background-color: var(--smart-info);
  border-color: var(--smart-info);
  color: var(--smart-info-color);
}
.smart-toast-item.info .smart-toast-item-header .smart-toast-item-close-button {
  color: var(--smart-primary-color);
}
.smart-toast-item.warning {
  background-color: var(--smart-warning);
  border-color: var(--smart-warning);
  color: var(--smart-warning-color);
}
.smart-toast-item.warning .smart-toast-item-header .smart-toast-item-close-button {
  color: var(--smart-primary-color);
}
.smart-toast-item.light {
  background-color: var(--smart-light);
  border-color: var(--smart-light);
  color: var(--smart-light-color);
}
.smart-toast-item.light .smart-toast-item-header .smart-toast-item-close-button {
  color: var(--smart-primary-color);
}
.smart-toast-item.dark {
  background-color: var(--smart-dark);
  border-color: var(--smart-dark);
  color: var(--smart-dark-color);
}
.smart-toast-item.dark .smart-toast-item-header .smart-toast-item-close-button {
  color: var(--smart-primary-color);
}
.smart-toast-item.mail {
  background-color: #337ab7;
  border-color: #337ab7;
  color: white;
}
.smart-toast-item.mail .smart-toast-item-header .smart-toast-item-close-button {
  color: white;
}
.smart-toast-item.time {
  background-color: #363636;
  border-color: #363636;
  color: white;
}
.smart-toast-item.time .smart-toast-item-header .smart-toast-item-close-button {
  color: white;
}
.smart-toast-item.info .smart-toast-item-icon:after {
  --smart-toast-item-icon: var(--smart-icon-help-circled);
}
.smart-toast-item.warning .smart-toast-item-icon:after {
  --smart-toast-item-icon: var(--smart-icon-attention);
}
.smart-toast-item.success .smart-toast-item-icon:after {
  --smart-toast-item-icon: var(--smart-icon-check);
}
.smart-toast-item.error .smart-toast-item-icon:after {
  --smart-toast-item-icon: var(--smart-icon-block);
}
.smart-toast-item.mail .smart-toast-item-icon:after {
  --smart-toast-item-icon: var(--smart-icon-mail);
}
.smart-toast-item.time .smart-toast-item-icon:after {
  --smart-toast-item-icon: var(--smart-icon-clock);
}

.smart-toast-item[right-to-left] > .smart-container {
  direction: rtl;
}

@keyframes blink {
  50% {
    opacity: 0.5;
  }
}