@limetech/lime-elements 39.0.0 → 39.0.2

package/dist/collection/components/file-viewer/file-viewer.css

@@ -1,174 +1,4 @@
 @charset "UTF-8";
-/*
-* 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 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.
-*/
-/**
- * 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!
-  */
-:host {
-  isolation: isolate;
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-img,
-video,
-audio,
-object,
-iframe {
-  max-height: 100%;
-  max-width: 100%;
-  box-sizing: border-box;
-}
-
-iframe {
-  border: none;
-  width: 100%;
-  height: 100%;
-  min-height: 20rem;
-}
-
-img {
-  min-width: 7rem;
-  object-fit: contain;
-}
-
-video {
-  width: 100%;
-  height: auto;
-}
-
-audio {
-  width: 100%;
-}
-
-object {
-  width: 100%;
-  height: 100%;
-}
-
-object[type="application/pdf"] {
-  min-height: 20rem;
-}
-
-object[type="text/plain"] {
-  border-radius: 0.25rem;
-  padding-right: 2rem;
-  overflow-y: auto;
-}
-
-:host(:fullscreen) {
-  background-color: rgb(var(--color-gray-darker));
-}
-:host(:fullscreen) object[type="text/plain"] {
-  max-width: 50rem;
-  max-height: calc(100% - 2rem);
-}
-
-:host(:-webkit-full-screen) {
-  background-color: rgb(var(--color-gray-darker));
-}
-:host(:-webkit-full-screen) object[type="text/plain"] {
-  max-width: 50rem;
-  max-height: calc(100% - 2rem);
-}
-
 /*
 * This file is imported into every component!
 *
@@ -334,8 +164,8 @@ object[type="text/plain"] {
   align-items: center;
   justify-content: center;
   border-radius: 50%;
-  width: 2rem;
-  height: 2rem;
+  width: var(--limel-file-viewer-size-of-buttons);
+  height: var(--limel-file-viewer-size-of-buttons);
   background-color: rgba(var(--contrast-100), 0.8);
   backdrop-filter: blur(0.25rem);
   -webkit-backdrop-filter: blur(0.25rem);
@@ -361,4 +191,82 @@ object[type="text/plain"] {
 
 .action-menu-for-office-files {
   top: 0.75rem;
+}
+
+:host {
+  --limel-file-viewer-size-of-buttons: 2rem;
+  isolation: isolate;
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+img,
+video,
+audio,
+object,
+iframe {
+  max-height: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+iframe {
+  border: none;
+  width: 100%;
+  height: 100%;
+  min-height: 20rem;
+}
+
+img {
+  min-width: 7rem;
+  object-fit: contain;
+}
+
+video {
+  width: 100%;
+  height: auto;
+}
+
+audio {
+  width: 100%;
+}
+
+object {
+  width: 100%;
+  height: 100%;
+}
+
+object[type="application/pdf"] {
+  min-height: 20rem;
+}
+
+object[type="text/plain"] {
+  border-radius: 0.25rem;
+  padding-right: var(--limel-file-viewer-size-of-buttons);
+  overflow-y: auto;
+}
+
+:host(:fullscreen) {
+  background-color: rgb(var(--color-gray-darker));
+}
+:host(:fullscreen) object[type="text/plain"] {
+  max-width: 50rem;
+  max-height: calc(100% - 2rem);
+}
+
+:host(:-webkit-full-screen) {
+  background-color: rgb(var(--color-gray-darker));
+}
+:host(:-webkit-full-screen) object[type="text/plain"] {
+  max-width: 50rem;
+  max-height: calc(100% - 2rem);
 }

package/dist/collection/components/form/form.css

@@ -86,6 +86,83 @@
   * Media query mixins for responsive design based on screen width.
   * Note that these mixins do not detect the device type!
   */
+.limel-form-row--layout {
+  --limel-form-row-border-radius: 0.375rem;
+  --limel-form-row-icon-size: 1.75rem;
+  --limel-form-row-main-information-gap: 0.5rem;
+  display: flex;
+  flex-direction: column;
+}
+.limel-form-row--layout .row {
+  display: flex;
+  gap: 0.5rem;
+  flex-direction: column;
+  padding: 0.5rem 1rem;
+}
+.limel-form-row--layout .row:nth-child(odd) {
+  background-color: var(--form-background-color-of-odd-rows, rgb(var(--contrast-200)));
+}
+.limel-form-row--layout .row:nth-child(even) {
+  background-color: var(--form-background-color-of-even-rows, transparent);
+}
+.limel-form-row--layout .row:first-child {
+  border-radius: var(--limel-form-row-border-radius) var(--limel-form-row-border-radius) 0 0;
+}
+.limel-form-row--layout .row:last-child {
+  border-radius: 0 0 var(--limel-form-row-border-radius) var(--limel-form-row-border-radius);
+}
+.limel-form-row--layout .main-information {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--limel-form-row-main-information-gap);
+  min-width: 0;
+}
+.limel-form-row--layout .main-information {
+  position: relative;
+}
+.limel-form-row--layout .main-information > .form-group.field {
+  position: unset;
+}
+.limel-form-row--layout .main-information > .form-group.field limel-help {
+  top: 0;
+}
+.limel-form-row--layout limel-icon {
+  color: rgb(var(--contrast-1200));
+  width: var(--limel-form-row-icon-size);
+  flex-shrink: 0;
+  min-width: 0;
+}
+.limel-form-row--layout .title {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  margin: 0;
+  font-weight: normal;
+  flex-grow: 1;
+  color: var(--limel-theme-on-surface-color);
+  font-size: 0.875rem;
+}
+.limel-form-row--layout .description {
+  margin: 0;
+  color: var(--limel-theme-text-secondary-on-background-color);
+  font-size: var(--limel-theme-default-small-font-size);
+  line-height: 1.5;
+}
+.limel-form-row--layout .has-icon .description {
+  padding-left: calc(var(--limel-form-row-icon-size) + var(--limel-form-row-main-information-gap));
+}
+.limel-form-row--layout .form-group.field {
+  flex-shrink: 0;
+  display: flex;
+  align-content: center;
+}
+.limel-form-row--layout .form-group.field limel-slider {
+  min-width: 8rem;
+  display: block;
+}
+
 /*
 * This file is imported into every component!
 *
@@ -346,168 +423,4 @@ limel-markdown {
 }
 .form-group .form-group .form-group .form-group .form-group .form-group h1:before {
   display: none;
-}
-
-/**
-* 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.
-*/
-/**
- * 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!
-  */
-.limel-form-row--layout {
-  --limel-form-row-border-radius: 0.375rem;
-  --limel-form-row-icon-size: 1.75rem;
-  --limel-form-row-main-information-gap: 0.5rem;
-  display: flex;
-  flex-direction: column;
-}
-.limel-form-row--layout .row {
-  display: flex;
-  gap: 0.5rem;
-  flex-direction: column;
-  padding: 0.5rem 1rem;
-}
-.limel-form-row--layout .row:nth-child(odd) {
-  background-color: var(--form-background-color-of-odd-rows, rgb(var(--contrast-200)));
-}
-.limel-form-row--layout .row:nth-child(even) {
-  background-color: var(--form-background-color-of-even-rows, transparent);
-}
-.limel-form-row--layout .row:first-child {
-  border-radius: var(--limel-form-row-border-radius) var(--limel-form-row-border-radius) 0 0;
-}
-.limel-form-row--layout .row:last-child {
-  border-radius: 0 0 var(--limel-form-row-border-radius) var(--limel-form-row-border-radius);
-}
-.limel-form-row--layout .main-information {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: var(--limel-form-row-main-information-gap);
-  min-width: 0;
-}
-.limel-form-row--layout .main-information {
-  position: relative;
-}
-.limel-form-row--layout .main-information > .form-group.field {
-  position: unset;
-}
-.limel-form-row--layout .main-information > .form-group.field limel-help {
-  top: 0;
-}
-.limel-form-row--layout limel-icon {
-  color: rgb(var(--contrast-1200));
-  width: var(--limel-form-row-icon-size);
-  flex-shrink: 0;
-  min-width: 0;
-}
-.limel-form-row--layout .title {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  margin: 0;
-  font-weight: normal;
-  flex-grow: 1;
-  color: var(--limel-theme-on-surface-color);
-  font-size: 0.875rem;
-}
-.limel-form-row--layout .description {
-  margin: 0;
-  color: var(--limel-theme-text-secondary-on-background-color);
-  font-size: var(--limel-theme-default-small-font-size);
-  line-height: 1.5;
-}
-.limel-form-row--layout .has-icon .description {
-  padding-left: calc(var(--limel-form-row-icon-size) + var(--limel-form-row-main-information-gap));
-}
-.limel-form-row--layout .form-group.field {
-  flex-shrink: 0;
-  display: flex;
-  align-content: center;
-}
-.limel-form-row--layout .form-group.field limel-slider {
-  min-width: 8rem;
-  display: block;
 }