@limetech/lime-elements/dist/collection/components/dock/dock.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!
  */
/*
 * This file is imported into every component!
 *
 * Nothing in this file may output any CSS
 * without being explicitly called by outside code.
 */
/**
* @prop --dock-expanded-max-width: The maximum width of the Dock when it is expanded. Defaults to `max-content` which means the Dock will adjust its width to the widest dock item.
* @prop --dock-background-color: Background color of the whole component, defaults to `--contrast-100`.
* @prop --dock-item-background-color--selected: Background color of selected dock item, defaults to `--contrast-200`.
* @prop --dock-item-text-color: Text of dock items, defaults to `--contrast-1100`.
* @prop --dock-item-text-color--selected: Text color of selected dock item, defaults to `--contrast-1300`.
* @prop --dock-item-icon-color: Color of the optional icons used in each dock item. Only affects inactive dock items, defaults to text colors for default or selected states.
* @prop --dock-padding-top: Space of top side of the Dock. Can be used with environment variables, to take into account safe areas on mobile devices with rounded screen corners or those that have a "notch". For instance can be set to `env(safe-area-inset-top)`.
* @prop --dock-padding-right: Space of the right side of the Dock. Can be used with environment variables, to take into account safe areas on mobile devices with rounded screen corners or those that have a "notch". For instance can be set to `env(safe-area-inset-right)`.
* @prop --dock-padding-bottom: Space of the bottom side of the Dock. Can be used with environment variables, to take into account safe areas on mobile devices with rounded screen corners or those that have a "notch". For instance can be set to `env(safe-area-inset-bottom)`.
* @prop --dock-padding-left: Space of the left side of the Dock. Can be used with environment variables, to take into account safe areas on mobile devices with rounded screen corners or those that have a "notch". For instance can be set to `env(safe-area-inset-left)`.
* @prop --popover-surface-width: Defines the width of the popover that is opened for dock items with custom components. Defaults to `auto`.
*/
:host(limel-dock) {
  --badge-background-color: rgb(var(--color-red-default));
  --badge-text-color: rgb(var(--color-white));
  --dock-item-height: 2.75rem;
  --limel-dock-padding: 0.25rem;
  --dock-expand-shrink-button-height: 1rem;
  --limel-dock-item-text-color: var(
      --dock-item-text-color,
      rgb(var(--contrast-1100))
  );
  --limel-dock-item-text-color--selected: var(
      --dock-item-text-color--selected,
      rgb(var(--contrast-1300))
  );
  isolation: isolate;
  position: relative;
  display: inline-flex;
  flex-direction: column;
  background-color: var(--dock-background-color, rgb(var(--contrast-100)));
  box-shadow: var(--shadow-depth-8);
  padding-top: var(--dock-padding-top);
  padding-right: var(--dock-padding-right);
  padding-bottom: var(--dock-padding-bottom);
  padding-left: var(--dock-padding-left);
}

:host(limel-dock:not(.has-mobile-layout)) {
  height: 100%;
  width: calc(var(--limel-dock-padding) * 2 + var(--dock-item-height));
}
:host(limel-dock:not(.has-mobile-layout)) nav {
  padding-bottom: calc(var(--limel-dock-padding) + 0.25rem);
}

:host(limel-dock.expanded) {
  width: var(--dock-expanded-max-width, max-content);
}

.footer-separator {
  margin-top: auto;
  justify-self: flex-end;
}

nav {
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: column;
  gap: 0.375rem;
  flex-grow: 1;
  padding: var(--limel-dock-padding);
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
nav::-webkit-scrollbar {
  display: none;
}
:host(limel-dock.has-mobile-layout) nav {
  justify-content: space-between;
  flex-direction: row;
}

limel-dock-button:first-of-type {
  --limel-custom-home-icon-enabler: var(--crm-custom-home-icon-enabler);
  --limel-custom-home-icon: var(--crm-custom-home-icon);
}

.expand-shrink {
  all: unset;
  box-sizing: border-box;
  transition: color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);
  cursor: pointer;
  color: var(--limel-theme-on-surface-color);
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  height: var(--dock-expand-shrink-button-height);
  padding: 0 0.5rem;
  margin: var(--limel-dock-padding);
  border-radius: 0.375rem;
}
.expand-shrink:hover, .expand-shrink:focus, .expand-shrink:focus-visible {
  will-change: color, background-color, box-shadow, transform;
}
.expand-shrink:hover, .expand-shrink:focus-visible {
  transform: translate3d(0, 0.01rem, 0);
  color: var(--limel-theme-on-surface-color);
  background-color: var(--lime-elevated-surface-background-color);
}
.expand-shrink:hover {
  box-shadow: var(--button-shadow-hovered);
}
.expand-shrink:active {
  --limel-clickable-transform-timing-function: cubic-bezier(
      0.83,
      -0.15,
      0.49,
      1.16
  );
  transform: translate3d(0, 0.05rem, 0);
  box-shadow: var(--button-shadow-pressed);
}
.expand-shrink:hover, .expand-shrink:active {
  --limel-clickable-transition-speed: 0.2s;
  --limel-clickable-transform-speed: 0.16s;
}
.expand-shrink:focus {
  outline: none;
}
.expand-shrink:focus-visible {
  outline: none;
  box-shadow: var(--shadow-depth-8-focused);
}
.expand-shrink.expanded {
  justify-content: flex-end;
}
.expand-shrink.expanded limel-icon {
  transform: rotateY(180deg);
}
.expand-shrink limel-icon {
  width: calc(var(--dock-expand-shrink-button-height) - 0.25rem);
  color: var(--dock-item-icon-color, var(--limel-dock-item-text-color));
}