View file File name : style.scss Content :.backup-storage-space__progress-bar { height: 24px; line-height: 0; margin-top: 24px; margin-bottom: 16px; .progress-bar { height: 100%; border-radius: 12px; /* stylelint-disable-line scales/radii */ background-color: var(--jp-gray-5); .progress-bar__progress { // Unless we're 100% full, the left side of the bar // is rounded and the right side is flat /* stylelint-disable-next-line scales/radii */ border-radius: 12px 0 0 12px; // We always expect some amount of used storage, // so keep a border-radius sized buffer so // the left side of the bar looks correctly rounded min-width: 12px; // Only allow full width if storage is full; // otherwise, leave a border-radius sized buffer, // so the right side looks okay without a radius max-width: calc(100% - 12px); } &.no-warning { .progress-bar__progress { background-color: var(--jp-black);; } } &.yellow-warning { .progress-bar__progress { background-color: var(--jp-yellow-20); } } &.red-warning { .progress-bar__progress { background-color: var(--jp-red-40); } } // When the bar is full, we can show the filled portion // at full width, with a rounded right side &.full-warning { .progress-bar__progress { max-width: initial; background-color: var(--jp-red-40); border-radius: 12px; /* stylelint-disable-line scales/radii */ } } } }