@odx/ui 2.9.9 → 2.10.0

package/CHANGELOG.md

@@ -1,7 +1,11 @@
-## @odx/ui 2.9.8 (2023-10-25)
-
 ## 2.9.9
 
+## 2.10.0
+
+### Minor Changes
+
+- 00afc8a6: Expanded the possibilities of using the Card component
+
 ### Patch Changes
 
 - 469224e8: Update library dependencies

package/core-theme.css

@@ -2982,6 +2982,17 @@ body[odxTheme=dark], body.odx-theme-dark {
   border-radius: 0;
 }
 
+body {
+  --odx-card-avatar-size: 64px;
+  --odx-card-content-vertical-alignment: center;
+}
+@media (min-width: 480px) {
+  body {
+    --odx-card-avatar-size: 128px;
+    --odx-card-content-vertical-alignment: top;
+  }
+}
+
 .odx-card {
   transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
   transition-property: box-shadow, outline-color, color;
@@ -3052,24 +3063,6 @@ body[odxTheme=dark], body.odx-theme-dark {
     gap: calc(var(--odx-vertical-rythm-base-size) * 1);
   }
 }
-.odx-card--launch-tile .odx-avatar, .odx-card--launch-tile-centered .odx-avatar {
-  margin-top: calc(var(--odx-vertical-rythm-base-size) * 0);
-  margin-bottom: calc(var(--odx-vertical-rythm-base-size) * 0);
-  height: calc(var(--odx-vertical-rythm-base-size) * 2.6667);
-  width: calc(var(--odx-vertical-rythm-base-size) * 2.6667);
-  margin-top: calc(var(--odx-vertical-rythm-base-size) * 0.1667);
-  margin-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.1667);
-  flex: 0 0 auto;
-}
-@media (min-width: 480px) {
-  .odx-card--launch-tile .odx-avatar, .odx-card--launch-tile-centered .odx-avatar {
-    margin-top: calc(var(--odx-vertical-rythm-base-size) * 0);
-    margin-bottom: calc(var(--odx-vertical-rythm-base-size) * 0);
-    height: calc(var(--odx-vertical-rythm-base-size) * 5.3334);
-    width: calc(var(--odx-vertical-rythm-base-size) * 5.3334);
-    margin: calc(var(--odx-vertical-rythm-base-size) * 0.1667) auto 0;
-  }
-}
 .odx-card--launch-tile .odx-card__title, .odx-card--launch-tile-centered .odx-card__title {
   font-weight: var(--odx-typography-font-weight-medium);
   letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
@@ -3091,12 +3084,7 @@ body[odxTheme=dark], body.odx-theme-dark {
   display: flex;
   flex: 1;
   flex-direction: column;
-  justify-content: center;
-}
-@media (min-width: 480px) {
-  .odx-card--launch-tile .odx-card__content, .odx-card--launch-tile-centered .odx-card__content {
-    display: block;
-  }
+  justify-content: var(--odx-card-content-vertical-alignment);
 }
 @media (min-width: 480px) {
   .odx-card__content {
@@ -3116,6 +3104,18 @@ body[odxTheme=dark], body.odx-theme-dark {
     gap: calc(var(--odx-vertical-rythm-base-size) * 0.6667);
   }
 }
+.odx-card .odx-avatar {
+  flex: 0 0 auto;
+  height: var(--odx-card-avatar-size);
+  width: var(--odx-card-avatar-size);
+  margin-top: calc(var(--odx-vertical-rythm-base-size) * 0.1667);
+  margin-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.1667);
+}
+@media (min-width: 480px) {
+  .odx-card .odx-avatar {
+    margin: calc(var(--odx-vertical-rythm-base-size) * 0.1667) auto 0;
+  }
+}
 .odx-card__footer {
   padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.5);
   padding-left: calc(var(--odx-vertical-rythm-base-size) * 0.5);
@@ -3138,7 +3138,7 @@ body[odxTheme=dark], body.odx-theme-dark {
 .odx-card__footer .odx-button {
   margin: 0;
 }
-.odx-card .odx-card-menu {
+.odx-card > .odx-action-group {
   margin: 0;
   position: absolute;
   right: calc(var(--odx-vertical-rythm-base-size) * 0.5);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odx/ui",
-  "version": "2.9.9",
+  "version": "2.10.0",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "peerDependencies": {

package/scss/components/card.component.scss

@@ -5,6 +5,16 @@
 @use '../abstract/typography';
 @use '../abstract/utils';
 
+body {
+  --odx-card-avatar-size: 64px;
+  --odx-card-content-vertical-alignment: center;
+
+  @include breakpoints.up(phone) {
+    --odx-card-avatar-size: 128px;
+    --odx-card-content-vertical-alignment: top;
+  }
+}
+
 .odx-card {
   $root: &;
   $main-padding: dimensions.get-size(math.div(12, 24));
@@ -73,19 +83,6 @@
       }
     }
 
-    .odx-avatar {
-      @include dimensions.container(math.div(64, 24));
-      @include dimensions.margin-y(math.div(4, 24));
-
-      flex: 0 0 auto;
-
-      @include breakpoints.up(phone) {
-        @include dimensions.container(math.div(128, 24));
-
-        margin: dimensions.get-size(math.div(4, 24)) auto 0;
-      }
-    }
-
     #{$root}__title {
       @include typography.font-weight(medium);
 
@@ -108,11 +105,7 @@
       display: flex;
       flex: 1;
       flex-direction: column;
-      justify-content: center;
-
-      @include breakpoints.up(phone) {
-        display: block;
-      }
+      justify-content: var(--odx-card-content-vertical-alignment);
     }
   }
 
@@ -141,6 +134,18 @@
     }
   }
 
+  .odx-avatar {
+    flex: 0 0 auto;
+    height: var(--odx-card-avatar-size);
+    width: var(--odx-card-avatar-size);
+
+    @include dimensions.margin-y(math.div(4, 24));
+
+    @include breakpoints.up(phone) {
+      margin: dimensions.get-size(math.div(4, 24)) auto 0;
+    }
+  }
+
   &__footer {
     @include dimensions.padding-x(0.5);
 
@@ -166,7 +171,7 @@
     }
   }
 
-  .odx-card-menu {
+  > .odx-action-group {
     margin: 0;
     position: absolute;
     right: $main-padding;