comand-component-library 3.1.66 → 3.1.69

package/src/assets/styles/global-styles.scss

@@ -1,4 +1,4 @@
-/* global-styles.scss - last update: 2021/08/10 by Raphael Biock - IT IS NOT RECOMMENDED TO EDIT THIS FILE (TO AVOID TROUBLESHOOTING AFTER UPDATING) - DO CHANGES IN template.css ONLY */
+/* global-styles.scss - last update: 2022/06/11 - IT IS NOT RECOMMENDED TO EDIT THIS FILE (TO AVOID TROUBLESHOOTING AFTER UPDATING) - DO CHANGES IN template.css ONLY */
 
 /* begin table of contents --------------------------------------------------------------------------------------------------------------------------------------------------- */
 /*
@@ -16,11 +16,16 @@
   P ------------------------
     - product-listing
 
+  T ------------------------
+    - tooltip
+
 - MEDIA QUERIES ------------------------
   - styles for medium screens
   - styles for small screens
 
-- DARK MODE ------------------------
+- COLOR SCHEMES ------------------------
+  - custom light-mode
+  - custom dark-mode
 */
 /* end table of contents --------------------------------------------------------------------------------------------------------------------------------------------------- */
 
@@ -98,13 +103,13 @@ body.avoid-scrolling {
 
   &.products-squares  {
     > a {
-      grid-column: span 6;
+      grid-column: span calc(var(--grid-columns) / 2);
     }
   }
 
   &.products-lines {
     > a {
-      grid-column: span 12;
+      grid-column: span var(--grid-columns);
       flex-direction: unset;
 
       img {
@@ -166,6 +171,8 @@ body.avoid-scrolling {
   }
 }
 /* end product-listing --------------------------------------------------------------------------------------------------------------------------------------------------- */
+
+/* begin tooltip for cmd-form-element and cmd-fake-select ---------------------------------------------------------------------------------------------------------------- */
 .cmd-form-element, .cmd-fake-select {
   & + .cmd-tooltip {
     border-color: var(--status-color);
@@ -209,6 +216,7 @@ body.avoid-scrolling {
     }
   }
 }
+/* end tooltip for cmd-form-element and cmd-fake-select ------------------------------------------------------------------------------------------------------------------ */
 /* ---------------------------------------------- END COMPONENTS AND GLOBAL STYLES -------------------------------------------------- */
 
 /* ---------------------------------------------- BEGIN MEDIA QUERIES AND BROWSER SPECIFIC STYLES -------------------------------------------------- */
@@ -261,51 +269,25 @@ body.avoid-scrolling {
 /* end styles for small screens --------------------------------------------------------------------------------------------------------------------------------------------------- */
 /* ---------------------------------------------- END MEDIA QUERIES AND BROWSER SPECIFIC STYLES -------------------------------------------------- */
 
-/* ---------------------------------------------- BEGIN DARK-MODE -------------------------------------------------- */
-@media (prefers-color-scheme: dark) {
-  html {
-    --dark-mode-background-color: rgb(50, 50, 50);
-    scrollbar-color: var(--primary-color) var(--dark-gray); /* firefox only */
-  }
-
-  /* webkit only */
-  html::-webkit-scrollbar-track {
-    background-color: var(--dark-gray);
+/* ---------------------------------------------- BEGIN COLORS-SCHEMES (LIGHT-/DARK-MODE) -------------------------------------------------- */
+html {
+  &.light-mode {
+    /* assign default colors for custom light-mode set by class */
+    --color-scheme-text-color: var(--light-mode-text-color);
+    --color-scheme-background-color: var(--light-mode-background-color);
+    --color-scheme-text-color-inverted: var(--dark-mode-text-color);
+    --color-scheme-background-inverted: var(--dark-mode-background-color);
+    --default-background-color-lightness: 97%;
   }
 
-  html, body,
-  .cmd-site-header,
-  .cmd-width-limitation-wrapper#site-footer {
-    background:  var(--dark-mode-background-color);
-    color: var(--pure-white);
-  }
-
-  legend {
-    background: var(--default-background-color);
-    border: var(--default-border);
-  }
-
-  .cmd-breadcrumbs,
-  .cmd-breadcrumbs > *,
-  .cmd-top-header-navigation a,
-  .cmd-pager > p, main {
-    color: var(--pure-white);
-  }
-
-  hr {
-    border-color: var(--pure-white);
-  }
-
-  .cmd-accordion,
-  .cmd-tabs,
-  fieldset, table, .box, {
-    color: var(--text-color);
-  }
-
-  .cmd-accordion hr,
-  .cmd-tabs hr,
-  fieldset hr, table hr, .box hr {
-    border-color: var(--text-color);
+  &.dark-mode {
+    /* assign default colors for custom dark-mode set by class */
+    --color-scheme-text-color: var(--dark-mode-text-color);
+    --color-scheme-background-color: var(--dark-mode-background-color);
+    --color-scheme-text-color-inverted: var(--light-mode-text-color);
+    --color-scheme-background-inverted: var(--light-mode-background-color);
+    --default-background-color-lightness: 20%;
   }
 }
-/* ---------------------------------------------- END DARK-MODE -------------------------------------------------- */
+
+/* ---------------------------------------------- END COLORS-SCHEMES (LIGHT-/DARK-MODE)  -------------------------------------------------- */

package/src/components/CmdBackToTopButton.vue

@@ -70,7 +70,7 @@ export default {
     text-decoration: none;
     z-index: 1000;
     border: var(--default-border);
-    background: var(--pure-white);
+    background: var(--color-scheme-background-color);
     border-radius: var(--full-circle);
 
     &:hover, &:active, &:focus {

package/src/components/CmdBox.vue

@@ -1,9 +1,9 @@
 <template>
     <!-- begin boxType 'content' -->
-    <div v-if="boxType === 'content'" :class="['cmd-box box content', {open : open, collapsible: collapsible}]">
+    <div v-if="boxType === 'content'" :class="['cmd-box box content', {open : open, collapsible: collapsible, 'stretch-vertically': stretchVertically}]">
         <template v-if="useSlots?.includes('header')">
             <!-- begin collapsible header with slot -->
-            <a v-if="collapsible" href="#" :title="open ? iconOpen.tooltip : iconClosed.tooltip" @click.prevent="toggleContentVisibility">
+            <a v-if="collapsible" class="box-header" href="#" :title="open ? iconOpen.tooltip : iconClosed.tooltip" @click.prevent="toggleContentVisibility">
                 <!-- begin slot 'header' -->
                 <slot name="header"></slot>
                 <!-- end slot 'header' -->
@@ -12,16 +12,16 @@
             <!-- end collapsible header with slot -->
 
             <!-- begin default header with slot -->
-            <header v-else>
+            <div v-else class="box-header">
                 <!-- begin slot 'header' -->
                 <slot name="header"></slot>
                 <!-- end slot 'header' -->
-            </header>
+            </div>
             <!-- end default header with slot -->
         </template>
         <template v-else>
             <!-- begin header for collapsible -->
-            <a v-if="collapsible" href="#" :title="open ? iconOpen.tooltip : iconClosed.tooltip" @click.prevent="toggleContentVisibility">
+            <a v-if="collapsible" class="box-header" href="#" :title="open ? iconOpen.tooltip : iconClosed.tooltip" @click.prevent="toggleContentVisibility">
                 <!-- begin CmdCustomHeadline -->
                 <CmdCustomHeadline v-if="cmdCustomHeadline?.headlineText"
                                    v-bind="cmdCustomHeadline"/>
@@ -32,7 +32,9 @@
 
             <!-- begin CmdCustomHeadline -->
             <CmdCustomHeadline v-else-if="!collapsible && cmdCustomHeadline?.headlineText"
-                               v-bind="cmdCustomHeadline"/>
+                               class="box-header"
+                               v-bind="cmdCustomHeadline"
+            />
             <!-- end CmdCustomHeadline -->
         </template>
 
@@ -48,17 +50,17 @@
         </div>
         <!-- end box-body -->
 
-        <footer v-if="useSlots?.includes('footer')">
+        <div v-if="useSlots?.includes('footer')" class="box-footer">
             <!-- begin slot 'footer' -->
             <slot name="footer"></slot>
             <!-- end slot 'footer' -->
-        </footer>
+        </div>
     </div>
     <!-- end boxType 'content' -->
 
     <!-- begin boxType 'product' -->
-    <a v-else-if="boxType === 'product' && product" class="cmd-box box product" href="#" @click.prevent="clickOnProduct(product)">
-        <div>
+    <a v-else-if="boxType === 'product' && product" :class="['cmd-box box product', {'stretch-vertically': stretchVertically}]" href="#" @click.prevent="clickOnProduct(product)">
+        <div class="box-header flex-container vertical">
             <img v-if="product.image" :src="product.image.src" :alt="product.image.alt"/>
             <div class="ribbon-new" v-if="product.new">
                 <span>{{ getMessage("cmdbox.productbox.new") }}</span>
@@ -81,8 +83,8 @@
     <!-- end boxType 'product' -->
 
     <!-- begin boxType 'user' -->
-    <div v-else-if="boxType === 'user' && user" class="cmd-box box user">
-        <div>
+    <div v-else-if="boxType === 'user' && user" :class="['cmd-box box user', {'stretch-vertically': stretchVertically}]">
+        <div class="box-header">
             <img v-if="user.image" :src="user.image.src" :alt="user.image.alt"/>
             <div v-else :class="defaultProfileIconClass" :title="user.name"></div>
             <!-- begin CmdCustomHeadline -->
@@ -96,9 +98,9 @@
             <p v-if="user.position">{{ user.position }}</p>
             <p v-if="user.description" class="description">{{ user.description }}</p>
         </div>
-        <footer v-if="user.links">
+        <div v-if="user.links" class="box-footer">
             <CmdListOfLinks :links="user.links" orientation="horizontal" :useGap="false"/>
-        </footer>
+        </div>
     </div>
     <!-- end boxType 'user' -->
 </template>
@@ -233,6 +235,13 @@ export default {
                 }
             }
         },
+        /**
+        * allow box to be stretched as high as parent-element
+        */
+        stretchVertically: {
+            type: Boolean,
+            default: true
+        },
         /**
          * properties for CmdCustomHeadline-component
          */
@@ -288,6 +297,10 @@ export default {
         padding: var(--default-padding);
     }
 
+    &.stretch-vertically {
+        height: 100%;
+    }
+
     &.content {
         > * {
             > *:last-child {
@@ -299,7 +312,7 @@ export default {
             }
         }
 
-        > header, > a {
+        > .box-header, > a {
             display: flex;
             align-items: center;
             border-top-left-radius: var(--border-radius);
@@ -324,7 +337,7 @@ export default {
         }
 
         .box-body {
-            height: 100%;
+            flex-grow: 1;
             padding: 0;
 
             .padding {
@@ -367,7 +380,7 @@ export default {
             }
         }
 
-        footer {
+        .box-footer {
             border-bottom-left-radius: var(--border-radius);
             border-bottom-right-radius: var(--border-radius);
             padding: var(--default-padding);
@@ -425,7 +438,7 @@ export default {
             }
         }
 
-        > div:first-child {
+        > .box-header {
             > img, > div {
                 display: table;
                 margin: 0 auto;
@@ -433,6 +446,8 @@ export default {
         }
 
         .box-body {
+            flex-grow: 1;
+
             > * {
                 text-align: center;
             }
@@ -449,11 +464,10 @@ export default {
     }
 
     &.user {
-        > div:first-child {
+        > .box-header {
             padding: var(--default-padding);
-            background: var(--pure-white);
 
-            > img, > div {
+            > img, > div:first-child {
                 display: table;
                 margin: 0 auto;
                 padding: calc(var(--default-padding) * 3);
@@ -465,6 +479,8 @@ export default {
         }
 
         .box-body {
+            flex-grow: 1;
+
             p {
                 text-align: center;
                 font-weight: bold;
@@ -479,13 +495,13 @@ export default {
             }
         }
 
-        footer {
+        .box-footer {
             margin-top: auto;
             border-top: var(--default-border);
 
-
             .cmd-list-of-links {
                 ul {
+                    width: 100%;
                     margin-bottom: 0;
 
                     li {
@@ -495,7 +511,7 @@ export default {
                             flex: 1;
                             padding: var(--default-padding);
                             text-align: center;
-                            background: var(--pure-white);
+                            background: var(--color-scheme-background-color);
                             border-left: var(--default-border);
                         }