@limetech/lime-elements/dist/collection/components/info-tile/info-tile.css

Lime Elements

@charset "UTF-8";
/**
 * Note! This file is exported to `dist/scss/` in the published
 * node module, for consumer projects to import.
 * That means this file cannot import from any file that isn't
 * also exported, keeping the same relative path.
 *
 * Or, just don't import anything, that works too.
 */
/**
* 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.
*/
/**
 * 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 --info-tile-border-radius: defines the radius of corners of the info-tile. Defaults to `1rem`
* @prop --info-tile-icon-color: defines the fill color of the info-tile icon. Defaults to `--contrast-1000`
* @prop --info-tile-text-color: defines the color of the info-tile label. Defaults to `--contrast-1100`
* @prop --info-tile-background-color: defines the backgrounds color of the info-tile icon. Defaults to `--contrast-100`
* @prop --info-tile-badge-text-color: Text color of the notification badge. Defaults to `--color-white`
* @prop --info-tile-badge-background-color: Background color of the notification badge. Defaults to `--color-red-default`
* @prop --info-tile-progress-fill-color: Determines the color of the progressed section. Defaults to `--lime-primary-color`.
* @prop --info-tile-progress-background-color: Determines the background color of the central section of the progress bar. Defaults to `--info-tile-background-color`.
* @prop --info-tile-progress-suffix-color: Determines the color of the progress prefix. Defaults to `--contrast-1000`.
 * @prop --info-tile-progress-text-color: Determines the color of the progress value. Defaults to `--info-tile-text-color`.
 * @prop --info-tile-progress-prefix-color: Determines the color of the progress suffix. Defaults to `--contrast-1000`.
*/
:host(limel-info-tile) {
  --badge-text-color: var(
      --info-tile-badge-text-color,
      rgb(var(--color-white))
  );
  --badge-background-color: var(
      --info-tile-badge-background-color,
      rgb(var(--color-red-default))
  );
  --circular-progress-text-color: var(
      --info-tile-progress-text-color,
      var(--info-tile-text-color)
  );
  --circular-progress-suffix-color: var(--info-tile-progress-suffix-color);
  --circular-progress-prefix-color: var(--info-tile-progress-prefix-color);
  --circular-progress-track-color: rgb(var(--contrast-800), 0.3);
  --circular-progress-fill-color: var(--info-tile-progress-fill-color);
  --circular-progress-background-color: var(
      --info-tile-progress-background-color,
      var(--info-tile-background-color)
  );
  --label-min-size: 0.75rem;
  --label-preferred-size: 6cqw;
  --label-max-size: 1rem;
  --value-min-size: 1rem;
  --value-preferred-size: 20cqw;
  --value-max-size: 4rem;
  --suffix-prefix-min-size: 0.75rem;
  --suffix-prefix-preferred-size: 8cqw;
  --suffix-prefix-max-size: 1.5rem;
  --icon-min-size: 2rem;
  --icon-preferred-size: 60cqh;
  --icon-max-size: calc(100cqw - 0.5rem);
  container-type: size;
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
}
:host(limel-info-tile) * {
  box-sizing: border-box;
}

:host(limel-info-tile[disabled]) a {
  opacity: 0.5;
  cursor: not-allowed;
}

a {
  all: unset;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  height: 100%;
  width: 100%;
  flex-grow: 1;
  padding: 0.25rem 1rem 0.5rem 1rem;
  border-radius: var(--info-tile-border-radius, 1rem);
  background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));
}

:host ::slotted([slot=primary]) {
  width: 100%;
  height: 100%;
}

.icon {
  z-index: 1;
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  padding: 0.25rem;
  aspect-ratio: 1/1;
  color: var(--info-tile-icon-color, rgb(var(--contrast-1000)));
  border-radius: 0;
  height: clamp(var(--icon-min-size), var(--icon-preferred-size), var(--icon-max-size));
}
@supports not (container-type: size) {
  .icon {
    width: max(10%, 3rem);
  }
}
:host(.has-primary-slot-content) .icon, a:has(limel-circular-progress) .icon {
  top: unset;
  bottom: 0.5rem;
  --icon-min-size: 1.5rem;
  --icon-preferred-size: 20cqh;
}

slot[name=primary] {
  display: block;
  aspect-ratio: 1;
  width: min(var(--icon-preferred-size), var(--icon-max-size));
}

.progress,
slot[name=primary] {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
}

.progress {
  --circular-progress-size: min(
      var(--icon-preferred-size),
      var(--icon-max-size)
  );
}
@supports not (container-type: size) {
  .progress {
    --circular-progress-size: initial;
  }
}

.label {
  z-index: 1;
  color: var(--info-tile-text-color, rgb(var(--contrast-1100)));
  line-height: 1.2;
  font-size: clamp(var(--label-min-size), var(--label-preferred-size), var(--label-max-size));
}
@supports not (container-type: size) {
  .label {
    font-size: var(--limel-theme-default-font-size);
  }
}

limel-badge {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
}

limel-linear-progress {
  --lime-primary-color: var(--info-tile-text-color);
  position: absolute;
  inset: auto 0 0 0;
}

.value-group {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  color: var(--info-tile-text-color, rgb(var(--contrast-1100)));
}

.value-and-suffix,
.label {
  text-shadow: 0 0 0.5rem var(--info-tile-background-color, rgb(var(--contrast-100))), 0 0 0.25rem var(--info-tile-background-color, rgb(var(--contrast-100)));
}

.value-and-suffix {
  display: flex;
}

.prefix,
.suffix {
  font-size: clamp(var(--suffix-prefix-min-size), var(--suffix-prefix-preferred-size), var(--suffix-prefix-max-size));
  opacity: 0.7;
}
@supports not (container-type: size) {
  .prefix,
  .suffix {
    font-size: 0.75rem;
  }
}

.prefix {
  align-self: flex-start;
  line-height: normal;
  transform: translateY(40%);
}

.value {
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.95);
  transform-origin: left;
  transform: translate3d(0, 0, 0) scale(1);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: bold;
  line-height: normal;
  font-size: clamp(var(--value-min-size), var(--value-preferred-size), var(--value-max-size));
}
@supports not (container-type: size) {
  .value {
    font-size: 1.5rem;
  }
}
:host(limel-info-tile[loading]) .value {
  opacity: 0.3;
  transform: translate3d(0, 0, 0) scale(0.9);
}

.suffix {
  transform: translateY(10%);
}

@container (width < 8rem) {
  .progress,
  slot[name=primary] {
    top: 0.25rem;
    right: 0.25rem;
  }
  a {
    padding: 0.375rem;
    gap: 0.125rem;
  }
}
@container (width < 18.75rem) {
  .progress,
  slot[name=primary] {
    top: 0.5rem;
    right: 0.5rem;
  }
  .icon {
    top: 0.25rem;
    right: 0.5rem;
  }
  :host(.has-primary-slot-content) .icon, a:has(limel-circular-progress) .icon {
    right: 0.25rem;
    bottom: 0.25rem;
  }
}
@container (width < 40.5rem) {
  .value {
    --value-preferred-size: 13cqw;
  }
  .value.ch-1, .value.ch-2, .value.ch-3, .value.ch-4 {
    --value-preferred-size: 20cqw;
  }
  .value.ch-5 {
    --value-preferred-size: 18cqw;
  }
  .value.ch-6 {
    --value-preferred-size: 17cqw;
  }
  .value.ch-7 {
    --value-preferred-size: 16cqw;
  }
  .value.ch-8 {
    --value-preferred-size: 15cqw;
  }
  .value.ch-9 {
    --value-preferred-size: 14cqw;
  }
}
@container (height > 8rem) {
  a {
    padding-top: 0.75rem;
    padding-bottom: 1rem;
  }
}
@container (height < 8rem) and (width > 8rem) {
  .value {
    --value-preferred-size: 32cqh !important;
  }
  .suffix,
  .prefix {
    --suffix-prefix-preferred-size: 16cqh !important;
  }
}
@container (height > 18.75rem) {
  .progress,
  slot[name=primary],
  .icon {
    position: relative;
    top: unset;
    right: unset;
  }
  a {
    align-items: center;
    justify-content: center;
  }
  .label {
    text-align: center;
  }
  :host(.has-primary-slot-content) .icon,
  a:has(limel-circular-progress) .icon {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    --icon-max-size: 3rem;
  }
}
limel-3d-hover-effect-glow {
  border-radius: var(--info-tile-border-radius, 1rem);
}

:host(limel-info-tile) {
  isolation: isolate;
  transform-style: preserve-3d;
  perspective: 1000px;
}
@media (prefers-reduced-motion) {
  :host(limel-info-tile) {
    perspective: 2000px;
  }
}

a {
  position: relative;
  transition-duration: 0.8s;
  transition-property: transform, box-shadow, background-color;
  transition-timing-function: ease-out;
  transform: scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg);
}
a:focus {
  outline: none;
}
a:hover, a:focus, a:focus-visible, a:focus-within {
  will-change: background-color, box-shadow, transform;
}
a:hover, a:focus, a:focus-visible, a:active {
  transition-duration: 0.2s;
}
a:hover, a:focus-visible {
  box-shadow: var(--button-shadow-hovered), var(--shadow-depth-16);
}
a:hover {
  transform: scale3d(1.01, 1.01, 1.01) rotate3d(var(--limel-3d-hover-effect-rotate3d));
}
a:focus-visible {
  outline: none;
  transform: scale3d(1.01, 1.01, 1.01);
}
a:hover limel-3d-hover-effect-glow {
  --limel-3d-hover-effect-glow-opacity: 0.5;
}
@media (prefers-reduced-motion) {
  a:hover limel-3d-hover-effect-glow {
    --limel-3d-hover-effect-glow-opacity: 0.2;
  }
}
a.is-clickable {
  cursor: pointer;
  box-shadow: var(--button-shadow-normal);
}
a.is-clickable:hover, a.is-clickable:focus-visible {
  box-shadow: var(--button-shadow-hovered), var(--shadow-depth-16);
}
a.is-clickable:active {
  transform: scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg);
  box-shadow: var(--button-shadow-pressed);
}
a.is-clickable:focus-visible {
  box-shadow: var(--shadow-depth-8-focused), var(--button-shadow-hovered);
}
a.is-clickable:focus-visible:active {
  box-shadow: var(--shadow-depth-8-focused), var(--button-shadow-pressed);
}