@limetech/lime-elements/dist/collection/components/circular-progress/circular-progress.css

Lime Elements

@charset "UTF-8";
.displays-percentage-colors[style*="--percentage: 0%"] {
  --circular-progress-fill-color: var(
      --color-percent--0to10
  );
}

.displays-percentage-colors[style*="--percentage: 1%"] {
  --circular-progress-fill-color: var(
      --color-percent--0to10
  );
}

.displays-percentage-colors[style*="--percentage: 2%"] {
  --circular-progress-fill-color: var(
      --color-percent--0to10
  );
}

.displays-percentage-colors[style*="--percentage: 3%"] {
  --circular-progress-fill-color: var(
      --color-percent--0to10
  );
}

.displays-percentage-colors[style*="--percentage: 4%"] {
  --circular-progress-fill-color: var(
      --color-percent--0to10
  );
}

.displays-percentage-colors[style*="--percentage: 5%"] {
  --circular-progress-fill-color: var(
      --color-percent--0to10
  );
}

.displays-percentage-colors[style*="--percentage: 6%"] {
  --circular-progress-fill-color: var(
      --color-percent--0to10
  );
}

.displays-percentage-colors[style*="--percentage: 7%"] {
  --circular-progress-fill-color: var(
      --color-percent--0to10
  );
}

.displays-percentage-colors[style*="--percentage: 8%"] {
  --circular-progress-fill-color: var(
      --color-percent--0to10
  );
}

.displays-percentage-colors[style*="--percentage: 9%"] {
  --circular-progress-fill-color: var(
      --color-percent--0to10
  );
}

.displays-percentage-colors[style*="--percentage: 10%"] {
  --circular-progress-fill-color: var(
      --color-percent--10to20
  );
}

.displays-percentage-colors[style*="--percentage: 11%"] {
  --circular-progress-fill-color: var(
      --color-percent--10to20
  );
}

.displays-percentage-colors[style*="--percentage: 12%"] {
  --circular-progress-fill-color: var(
      --color-percent--10to20
  );
}

.displays-percentage-colors[style*="--percentage: 13%"] {
  --circular-progress-fill-color: var(
      --color-percent--10to20
  );
}

.displays-percentage-colors[style*="--percentage: 14%"] {
  --circular-progress-fill-color: var(
      --color-percent--10to20
  );
}

.displays-percentage-colors[style*="--percentage: 15%"] {
  --circular-progress-fill-color: var(
      --color-percent--10to20
  );
}

.displays-percentage-colors[style*="--percentage: 16%"] {
  --circular-progress-fill-color: var(
      --color-percent--10to20
  );
}

.displays-percentage-colors[style*="--percentage: 17%"] {
  --circular-progress-fill-color: var(
      --color-percent--10to20
  );
}

.displays-percentage-colors[style*="--percentage: 18%"] {
  --circular-progress-fill-color: var(
      --color-percent--10to20
  );
}

.displays-percentage-colors[style*="--percentage: 19%"] {
  --circular-progress-fill-color: var(
      --color-percent--10to20
  );
}

.displays-percentage-colors[style*="--percentage: 20%"] {
  --circular-progress-fill-color: var(
      --color-percent--20to30
  );
}

.displays-percentage-colors[style*="--percentage: 21%"] {
  --circular-progress-fill-color: var(
      --color-percent--20to30
  );
}

.displays-percentage-colors[style*="--percentage: 22%"] {
  --circular-progress-fill-color: var(
      --color-percent--20to30
  );
}

.displays-percentage-colors[style*="--percentage: 23%"] {
  --circular-progress-fill-color: var(
      --color-percent--20to30
  );
}

.displays-percentage-colors[style*="--percentage: 24%"] {
  --circular-progress-fill-color: var(
      --color-percent--20to30
  );
}

.displays-percentage-colors[style*="--percentage: 25%"] {
  --circular-progress-fill-color: var(
      --color-percent--20to30
  );
}

.displays-percentage-colors[style*="--percentage: 26%"] {
  --circular-progress-fill-color: var(
      --color-percent--20to30
  );
}

.displays-percentage-colors[style*="--percentage: 27%"] {
  --circular-progress-fill-color: var(
      --color-percent--20to30
  );
}

.displays-percentage-colors[style*="--percentage: 28%"] {
  --circular-progress-fill-color: var(
      --color-percent--20to30
  );
}

.displays-percentage-colors[style*="--percentage: 29%"] {
  --circular-progress-fill-color: var(
      --color-percent--20to30
  );
}

.displays-percentage-colors[style*="--percentage: 30%"] {
  --circular-progress-fill-color: var(
      --color-percent--30to40
  );
}

.displays-percentage-colors[style*="--percentage: 31%"] {
  --circular-progress-fill-color: var(
      --color-percent--30to40
  );
}

.displays-percentage-colors[style*="--percentage: 32%"] {
  --circular-progress-fill-color: var(
      --color-percent--30to40
  );
}

.displays-percentage-colors[style*="--percentage: 33%"] {
  --circular-progress-fill-color: var(
      --color-percent--30to40
  );
}

.displays-percentage-colors[style*="--percentage: 34%"] {
  --circular-progress-fill-color: var(
      --color-percent--30to40
  );
}

.displays-percentage-colors[style*="--percentage: 35%"] {
  --circular-progress-fill-color: var(
      --color-percent--30to40
  );
}

.displays-percentage-colors[style*="--percentage: 36%"] {
  --circular-progress-fill-color: var(
      --color-percent--30to40
  );
}

.displays-percentage-colors[style*="--percentage: 37%"] {
  --circular-progress-fill-color: var(
      --color-percent--30to40
  );
}

.displays-percentage-colors[style*="--percentage: 38%"] {
  --circular-progress-fill-color: var(
      --color-percent--30to40
  );
}

.displays-percentage-colors[style*="--percentage: 39%"] {
  --circular-progress-fill-color: var(
      --color-percent--30to40
  );
}

.displays-percentage-colors[style*="--percentage: 40%"] {
  --circular-progress-fill-color: var(
      --color-percent--40to50
  );
}

.displays-percentage-colors[style*="--percentage: 41%"] {
  --circular-progress-fill-color: var(
      --color-percent--40to50
  );
}

.displays-percentage-colors[style*="--percentage: 42%"] {
  --circular-progress-fill-color: var(
      --color-percent--40to50
  );
}

.displays-percentage-colors[style*="--percentage: 43%"] {
  --circular-progress-fill-color: var(
      --color-percent--40to50
  );
}

.displays-percentage-colors[style*="--percentage: 44%"] {
  --circular-progress-fill-color: var(
      --color-percent--40to50
  );
}

.displays-percentage-colors[style*="--percentage: 45%"] {
  --circular-progress-fill-color: var(
      --color-percent--40to50
  );
}

.displays-percentage-colors[style*="--percentage: 46%"] {
  --circular-progress-fill-color: var(
      --color-percent--40to50
  );
}

.displays-percentage-colors[style*="--percentage: 47%"] {
  --circular-progress-fill-color: var(
      --color-percent--40to50
  );
}

.displays-percentage-colors[style*="--percentage: 48%"] {
  --circular-progress-fill-color: var(
      --color-percent--40to50
  );
}

.displays-percentage-colors[style*="--percentage: 49%"] {
  --circular-progress-fill-color: var(
      --color-percent--40to50
  );
}

.displays-percentage-colors[style*="--percentage: 50%"] {
  --circular-progress-fill-color: var(
      --color-percent--50to60
  );
}

.displays-percentage-colors[style*="--percentage: 51%"] {
  --circular-progress-fill-color: var(
      --color-percent--50to60
  );
}

.displays-percentage-colors[style*="--percentage: 52%"] {
  --circular-progress-fill-color: var(
      --color-percent--50to60
  );
}

.displays-percentage-colors[style*="--percentage: 53%"] {
  --circular-progress-fill-color: var(
      --color-percent--50to60
  );
}

.displays-percentage-colors[style*="--percentage: 54%"] {
  --circular-progress-fill-color: var(
      --color-percent--50to60
  );
}

.displays-percentage-colors[style*="--percentage: 55%"] {
  --circular-progress-fill-color: var(
      --color-percent--50to60
  );
}

.displays-percentage-colors[style*="--percentage: 56%"] {
  --circular-progress-fill-color: var(
      --color-percent--50to60
  );
}

.displays-percentage-colors[style*="--percentage: 57%"] {
  --circular-progress-fill-color: var(
      --color-percent--50to60
  );
}

.displays-percentage-colors[style*="--percentage: 58%"] {
  --circular-progress-fill-color: var(
      --color-percent--50to60
  );
}

.displays-percentage-colors[style*="--percentage: 59%"] {
  --circular-progress-fill-color: var(
      --color-percent--50to60
  );
}

.displays-percentage-colors[style*="--percentage: 60%"] {
  --circular-progress-fill-color: var(
      --color-percent--60to70
  );
}

.displays-percentage-colors[style*="--percentage: 61%"] {
  --circular-progress-fill-color: var(
      --color-percent--60to70
  );
}

.displays-percentage-colors[style*="--percentage: 62%"] {
  --circular-progress-fill-color: var(
      --color-percent--60to70
  );
}

.displays-percentage-colors[style*="--percentage: 63%"] {
  --circular-progress-fill-color: var(
      --color-percent--60to70
  );
}

.displays-percentage-colors[style*="--percentage: 64%"] {
  --circular-progress-fill-color: var(
      --color-percent--60to70
  );
}

.displays-percentage-colors[style*="--percentage: 65%"] {
  --circular-progress-fill-color: var(
      --color-percent--60to70
  );
}

.displays-percentage-colors[style*="--percentage: 66%"] {
  --circular-progress-fill-color: var(
      --color-percent--60to70
  );
}

.displays-percentage-colors[style*="--percentage: 67%"] {
  --circular-progress-fill-color: var(
      --color-percent--60to70
  );
}

.displays-percentage-colors[style*="--percentage: 68%"] {
  --circular-progress-fill-color: var(
      --color-percent--60to70
  );
}

.displays-percentage-colors[style*="--percentage: 69%"] {
  --circular-progress-fill-color: var(
      --color-percent--60to70
  );
}

.displays-percentage-colors[style*="--percentage: 70%"] {
  --circular-progress-fill-color: var(
      --color-percent--70to80
  );
}

.displays-percentage-colors[style*="--percentage: 71%"] {
  --circular-progress-fill-color: var(
      --color-percent--70to80
  );
}

.displays-percentage-colors[style*="--percentage: 72%"] {
  --circular-progress-fill-color: var(
      --color-percent--70to80
  );
}

.displays-percentage-colors[style*="--percentage: 73%"] {
  --circular-progress-fill-color: var(
      --color-percent--70to80
  );
}

.displays-percentage-colors[style*="--percentage: 74%"] {
  --circular-progress-fill-color: var(
      --color-percent--70to80
  );
}

.displays-percentage-colors[style*="--percentage: 75%"] {
  --circular-progress-fill-color: var(
      --color-percent--70to80
  );
}

.displays-percentage-colors[style*="--percentage: 76%"] {
  --circular-progress-fill-color: var(
      --color-percent--70to80
  );
}

.displays-percentage-colors[style*="--percentage: 77%"] {
  --circular-progress-fill-color: var(
      --color-percent--70to80
  );
}

.displays-percentage-colors[style*="--percentage: 78%"] {
  --circular-progress-fill-color: var(
      --color-percent--70to80
  );
}

.displays-percentage-colors[style*="--percentage: 79%"] {
  --circular-progress-fill-color: var(
      --color-percent--70to80
  );
}

.displays-percentage-colors[style*="--percentage: 80%"] {
  --circular-progress-fill-color: var(
      --color-percent--80to90
  );
}

.displays-percentage-colors[style*="--percentage: 81%"] {
  --circular-progress-fill-color: var(
      --color-percent--80to90
  );
}

.displays-percentage-colors[style*="--percentage: 82%"] {
  --circular-progress-fill-color: var(
      --color-percent--80to90
  );
}

.displays-percentage-colors[style*="--percentage: 83%"] {
  --circular-progress-fill-color: var(
      --color-percent--80to90
  );
}

.displays-percentage-colors[style*="--percentage: 84%"] {
  --circular-progress-fill-color: var(
      --color-percent--80to90
  );
}

.displays-percentage-colors[style*="--percentage: 85%"] {
  --circular-progress-fill-color: var(
      --color-percent--80to90
  );
}

.displays-percentage-colors[style*="--percentage: 86%"] {
  --circular-progress-fill-color: var(
      --color-percent--80to90
  );
}

.displays-percentage-colors[style*="--percentage: 87%"] {
  --circular-progress-fill-color: var(
      --color-percent--80to90
  );
}

.displays-percentage-colors[style*="--percentage: 88%"] {
  --circular-progress-fill-color: var(
      --color-percent--80to90
  );
}

.displays-percentage-colors[style*="--percentage: 89%"] {
  --circular-progress-fill-color: var(
      --color-percent--80to90
  );
}

.displays-percentage-colors[style*="--percentage: 90%"] {
  --circular-progress-fill-color: var(
      --color-percent--90to100
  );
}

.displays-percentage-colors[style*="--percentage: 91%"] {
  --circular-progress-fill-color: var(
      --color-percent--90to100
  );
}

.displays-percentage-colors[style*="--percentage: 92%"] {
  --circular-progress-fill-color: var(
      --color-percent--90to100
  );
}

.displays-percentage-colors[style*="--percentage: 93%"] {
  --circular-progress-fill-color: var(
      --color-percent--90to100
  );
}

.displays-percentage-colors[style*="--percentage: 94%"] {
  --circular-progress-fill-color: var(
      --color-percent--90to100
  );
}

.displays-percentage-colors[style*="--percentage: 95%"] {
  --circular-progress-fill-color: var(
      --color-percent--90to100
  );
}

.displays-percentage-colors[style*="--percentage: 96%"] {
  --circular-progress-fill-color: var(
      --color-percent--90to100
  );
}

.displays-percentage-colors[style*="--percentage: 97%"] {
  --circular-progress-fill-color: var(
      --color-percent--90to100
  );
}

.displays-percentage-colors[style*="--percentage: 98%"] {
  --circular-progress-fill-color: var(
      --color-percent--90to100
  );
}

.displays-percentage-colors[style*="--percentage: 99%"] {
  --circular-progress-fill-color: var(
      --color-percent--90to100
  );
}

.displays-percentage-colors[style*="--percentage: 100%"] {
  --circular-progress-fill-color: var(
      --color-percent--100to110
  );
}

.displays-percentage-colors[style="--percentage: 100%;"] {
  --circular-progress-fill-color: var(--color-percent--100);
}

/*
* This file is imported into every component!
*
* Nothing in this file may output any CSS
* without being explicitly called by outside code.
*/
/**
* Note! This file is forwarded via `src/style/exports.scss`
* and exposed to consumers through the root `index.scss`.
*
* Consumers import it using:
* `@use '@limetech/lime-elements' as lime-elements;`
*
* Legacy import paths (`dist/scss/mixins`) are maintained
* for backward compatibility via copy rules in the Stencil config.
*/
/**
* This can be used on a trigger element that opens a dropdown menu or a popover.
*/
/**
 * This mixin will mask out the content that is close to
 * the edges of a scrollable area.
 * - If the scrollable content has `overflow-y`, use `vertically`
 * as an argument for `$direction`.
 - If the scrollable content has `overflow-x`, use `horizontally`
 * as an argument for `$direction`.
 *
 * For the visual effect to work smoothly, we need to make sure that
 * the size of the fade-out edge effect is the same as the
 * internal paddings of the scrollable area. Otherwise, content of a
 * scrollable area that does not have a padding will fade out before
 * any scrolling has been done.
 * This is why this mixin already adds paddings, which automatically
 * default to the size of the fade-out effect.
 * This size defaults to `1rem`, but to override the size use
 * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`
 * when `vertically` argument is set, and use
 * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`
 * when `horizontally` argument is set.
 * Of course you can also programmatically increase and decrease the
 * size of these variables for each edge, based on the amount of
 * scrolling that has been done by the user. In this case, make sure
 * to add a custom padding where the mixin is used, to override
 * the paddings that are automatically added by the mixin in the
 * compiled CSS code.
 */
/**
* This mixin will add an animated underline to the bottom of an `a` elements.
* Note that you may need to add `all: unset;` –depending on your use case–
* before using this mixin.
*/
/**
* This mixin creates a cross-browser font stack.
* - `sans-serif` can be used for the UI of the components.
* - `monospace` can be used for code.
*
* ⚠️ If we change the font stacks, we need to update
* 1. the consumer documentation in `README.md`, and
* 2. the CSS variables of `--kompendium-example-font-family`
* in the `<style>` tag of `index.html`.
*/
/**
* This mixin is a hack, using old CSS syntax
* to enable you to truncate a piece of text,
* after a certain number of lines.
*/
/**
* This mixin will add a chessboard background pattern,
* typically used to visualize transparency.
*/
/**
* Make a container resizable by the user.
* This is used in the documentations and examples
* of some components, to demonstrate how the component
* behaves in a resizable container.
*/
/**
 * Drag to reorder mixins
 */
/**
 * The breakpoints below are used to create responsive designs
 * in Lime's products. Therefore, they are here to get distributed
 * to all components in other private repos, which rely on this `mixins`
 * file, to create consistent styles.
 *
 * :::important
 * In very rare cases you should used media queries!
 * Nowadays, there are many better ways of achieving responsive design
 * without media queries. For example, using CSS Grid, Flexbox, and their features.
 * :::
 */
/**
  * Media query mixins for responsive design based on screen width.
  * Note that these mixins do not detect the device type!
  */
/**
 * @prop --circular-progress-size: Determines the visual size of the visualization. This does not override the `size` property if it is specified.
 * @prop --circular-progress-track-color: Determines the color of the circular track. Defaults to `--contrast-400`.
 * @prop --circular-progress-suffix-color: Determines the color of the prefix. Defaults to `--contrast-1000`.
 * @prop --circular-progress-text-color: Determines the color of the value. Defaults to `--contrast-1200`.
 * @prop --circular-progress-prefix-color: Determines the color of the suffix. Defaults to `--contrast-1000`.
 * @prop --circular-progress-fill-color: Determines the color of the progressed section. Defaults to `--lime-primary-color`.
 * @prop --circular-progress-background-color: Determines the background color of the central section. Defaults to `--contrast-100`.
 */
:host {
  display: block;
  box-sizing: border-box;
  isolation: isolate;
}

:host([size=x-small]) {
  --circular-progress-size: 1.5rem;
  font-weight: bold;
}
:host([size=x-small]) .value {
  letter-spacing: -0.0625rem;
}

:host([size=small]) {
  --circular-progress-size: 2rem;
  font-weight: bold;
}
:host([size=small]) .value {
  letter-spacing: -0.03125rem;
}

:host([size=medium]) {
  --circular-progress-size: 3rem;
}

:host([size=large]) {
  --circular-progress-size: 4rem;
}

:host([size=x-large]) {
  --circular-progress-size: 5rem;
}

.lime-circular-progress {
  --size: var(--circular-progress-size, 3rem);
  --fill-color: var(
      --circular-progress-fill-color,
      var(--lime-primary-color, var(--limel-theme-primary-color))
  );
  --track-color: var(
      --circular-progress-track-color,
      rgb(var(--contrast-400))
  );
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  line-height: normal;
  box-shadow: 0 0 0 0.125rem rgb(var(--contrast-100), 0.7);
  background: conic-gradient(var(--fill-color) 0% var(--percentage), var(--track-color) var(--percentage) 100%);
}
.lime-circular-progress:before {
  content: "";
  position: absolute;
  width: calc(var(--size) * 0.75 + 0.25rem);
  height: calc(var(--size) * 0.75 + 0.25rem);
  border-radius: 50%;
  background-color: var(--circular-progress-background-color, rgb(var(--contrast-100)));
  box-shadow: var(--button-shadow-pressed);
}

.prefix {
  font-size: clamp(0.5rem, var(--size) * 0.16, 2.25rem);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
  color: var(--circular-progress-prefix-color, rgb(var(--contrast-1000)));
  width: 45%;
  top: 20%;
  position: absolute;
}

.value {
  display: flex;
  font-size: clamp(0.5rem, var(--size) * 0.25, 4rem);
  color: var(--circular-progress-text-color, rgb(var(--contrast-1200)));
  z-index: 1;
  cursor: default;
}

.suffix {
  font-size: clamp(0.5rem, var(--size) * 0.18, 2.5rem);
  color: var(--circular-progress-suffix-color, rgb(var(--contrast-1000)));
  padding-top: 4%;
}