Styling LiveView on disconnect and error

Phoenix Forum Questions / Help
1

Hello, I am trying to make it more obvious when LV disconnects and re-connects on error.

Here is the code I am using but it’s not showing up. I’m unsure why. I checked that the js file was imported correctly and the file is being imported.

.phx-disconnected {
  cursor: wait;
  // Make spinner cover only the liveview element.
  position: relative;
}

.phx-disconnected {
  // This require all liveview component to be wrapped by one single dom element(usually div)
  > *:first-child {
    &::after {
      @extend %c-loading-overlay;
    }
    &.c-live-page::after {
      background-color: rgba(0, 0, 0, .1);
    }
  }
}

.phx-error {
  background: #ffe6f0 !important;
}
1 Like