material-ui/src/less/components/toast.less

Material Design UI components built with React

@mui-toast-height: 48px;
@mui-toast-min-width: 288px;
@mui-toast-max-width: 568px;

@mui-toast-border-radius: 2px;
@mui-toast-padding: 0 24px;
@mui-toast-margin: 24px;

@mui-toast-message-padding-right: 85px;

@mui-toast-action-text-transform: uppercase;
@mui-toast-action-float: right;
@mui-toast-action-font-weight: 500;
@mui-toast-action-cursor: pointer;
@mui-toast-action-margin-left: 85px;

@mui-toast-fix-top: -2px;
@mui-toast-icon-line-height: 42px;
@mui-toast-icon-vertical-align: middle;
@mui-toast-position: relative;

.mui-toast {
  color: @mui-toast-color;
  background-color: @mui-toast-background-color;
  border-radius: @mui-toast-border-radius;
  padding: @mui-toast-padding;
  margin: @mui-toast-margin;
  height: @mui-toast-height;
  line-height: @mui-toast-height;
  min-width: @mui-toast-min-width;
  max-width: @mui-toast-max-width;

  position: absolute;
  bottom: -8px;
  left: 0;
  .lh-opacity(0);

  .mui-toast-message {
    padding-right: @mui-toast-message-padding-right;
  }

  .mui-toast-action {
    line-height: @mui-toast-height;
    color: @mui-toast-action-color;
    cursor: @mui-toast-action-cursor;
    font-weight: @mui-toast-action-font-weight;
    text-transform: @mui-toast-action-text-transform;
    float: @mui-toast-action-float;
    margin-left: @mui-toast-action-margin-left;
  }

  .mui-icon {
    line-height: @mui-toast-icon-line-height;
    position: @mui-toast-position;
    top: @mui-toast-fix-top;
    vertical-align: @mui-toast-icon-vertical-align;
  }

  &.mui-open {
    bottom: 0;
    .lh-opacity(1);
  }

}