Projects integration: Progress bar styling

[maxelkins]

Progress bar and styling incorrect

To do

• Remove the max-wdith from the progress bar, it should fill the space
• If we want to use the progress element then we need to style it using the browser prefixes. I've put an example below. This should reset, remove borders, set border radius, do all the colours.
• Disabled button style needs tweaking - design
• Add inset-inline-start: 0 to the sidebar panel footer so the border goes all the way to the edge

progress{
  --progress-background: red;
  --progress-inner: navy;
  --progress-height: 0.5rem; /* 8px */
  --progress-radius: var(--progress-height);

  /* Reset all */
  -webkit-appearance: none;
   appearance: none;

  block-size: var(--progress-height);
  
  /* Needed for Firefox */
  /* This is the background of the bar */
  border:none;
  background-color: var(--progress-background);
  border-radius: var(--progress-radius);

}

/* Needed for Firefox */
/* This is the inner bar */
progress::-moz-progress-bar {
  background-color: var(--progress-inner);
  border-radius: var(--progress-radius);
}


/* Needed for Chrome/Safari/Edge */
/* This is the background of the bar */
progress::-webkit-progress-bar {
  border-radius: var(--progress-radius);
  background-color: var(--progress-background);

}

/* This is the inner bar */
progress::-webkit-progress-value {
  background-color: var(--progress-inner);
  border-radius: var(--progress-radius);

}

[loiswells97]

@maxelkins are you sure about the max-width? It gets very wide without it 😅 Easy enough to do though if you want this removed

[maxelkins]

@loiswells97 I get what you mean but I think its looks odd at the mo when its centred. Let's full width it so it matches the design and we can relook at it after beta if we think its too weird full width.

[loiswells97]

@loiswells97 I get what you mean but I think its looks odd at the mo when its centred. Let's full width it so it matches the design and we can relook at it after beta if we think its too weird full width.

Okay, great 👍