@onemrvapublic/design-system 20.1.1 → 20.2.1-develop.1

package/mat-selectable-box/src/onemrva-mat-selectable-box.component.scss

@@ -1,80 +1,74 @@
 @use '@angular/material' as mat;
-:host {
+
+mat-card.onemrva-selectable-box {
+  border-radius: var(--half-border-radius);
+  box-shadow: none;
+  position: relative;
+  color: var(--mat-sys-on-surface);
+  border: 2px solid transparent;
+  user-select: none;
+  //background: green;
+
+  &.checked {
+    border: 2px solid var(--mat-sys-tertiary);
+    background: var(--mat-sys-tertiary-container);
+  }
+
+  &.disabled {
+    opacity: 0.4;
+    cursor: auto;
+  }
+
+  mat-icon {
+    overflow: visible;
+    color: var(--mat-sys-primary);
+  }
+
   mat-radio-button {
     pointer-events: none;
   }
-  mat-card {
-    &.onemrva-shadow-highlight {
-      box-shadow: none;
-      &:not(.disabled):hover {
-        box-shadow: var(--box-shadow);
-      }
-      border-radius: var(--border-radius);
-      overflow: hidden;
-      padding: 0;
-      margin: 0;
-      &.checked {
-        outline: 2px solid var(--mat-sys-secondary);
-        .mat-mdc-card-title {
-          background-color: transparent;
-          background: var(--mat-sys-secondary-container) !important;
-          color: var(--mat-sys-on-background) !important;
-          mat-icon {
-            color: var(--mat-sys-primary) !important;
-          }
-        }
-      }
-      &.mat-mdc-card {
-        .mat-mdc-card-title {
-          display: flex;
-          align-items: center;
-          //border-radius: var(--border-radius) var(--border-radius) 0 0;
-          padding: var(--half-spacer);
-          //background-color: var(--mat-sys-background);
 
-          background-color: var(--mat-sys-primary-container);
-          color: var(--mat-sys-on-primary-container);
+  mat-card-title {
+    display: flex;
+    padding: var(--spacer-and-half) var(--spacer-and-half)
+      var(--spacer-and-half) calc(var(--spacer-and-half) + var(--quad-spacer));
+    align-items: center;
+    box-shadow: none;
+    color: inherit;
 
-          mat-label {
-            font-family: var(--mat-sys-title-large-font);
-            font-size: 1rem;
-            font-weight: var(--mat-sys-title-small-weight);
-          }
+    font-family: var(--label-large-font-family, Poppins);
+    font-size: var(--label-large-font-size, 16px);
+    font-style: normal;
+    font-weight: var(--label-large-font-weight, 500);
+    line-height: var(--label-large-line-height, 21px); /* 131.25% */
 
-          mat-icon {
-            &.selectable-box-icon {
-              flex: 0 0 var(--icon-size-xlarge);
-              &:empty {
-                display: none;
-              }
-            }
-          }
-          .sticker {
-            align-self: center;
-            margin-left: auto;
-            margin-right: var(--spacer);
-          }
-        }
-      }
-      &.disabled {
-        cursor: auto;
-        .mat-mdc-card-title {
-          color: var(--mat-sys-outline-variant);
-          background-color: var(--mat-sys-surface-container);
-        }
-      }
+    mat-label {
+      display: flex;
+      flex-grow: 1;
     }
-    mat-card-content {
-      padding: var(--double-spacer);
-      background-color: var(--mat-sys-background);
-      border-bottom: 1px solid var(--mat-sys-outline-variant);
-      border-left: 1px solid var(--mat-sys-outline-variant);
-      border-right: 1px solid var(--mat-sys-outline-variant);
-      border-radius: 0 0 var(--border-radius) var(--border-radius);
-      &:empty {
-        padding: 0;
-        border: none;
-      }
+
+    mat-radio-button {
+      //transform: translateY(-0.5rem);
+      //max-height: 1rem;
+      position: absolute;
+      left: 2px;
+    }
+  }
+
+  b,
+  strong {
+    font-weight: 600;
+  }
+
+  mat-card-content {
+    background: var(--mat-sys-surface);
+    padding: var(--spacer-and-half);
+    border-bottom-left-radius: var(--half-border-radius);
+    border-bottom-right-radius: var(--half-border-radius);
+
+    &:empty {
+      padding: 0;
+      border: 0;
     }
   }
 }

package/mat-sticker/src/onemrva-mat-sticker.component.scss

@@ -1,6 +1,10 @@
 @use '../../utils' as utils;
 
 :host {
+  $paddingY: 2px;
+  $paddingX: 8px;
+  $borderWidth: 2px;
+
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -10,7 +14,7 @@
   background: var(--mat-sys-surface);
   opacity: 1;
   border-radius: var(--small-border-radius);
-  padding: 2px 8px;
+  padding: $paddingY $paddingX;
   font: var(--mat-sys-label-medium);
   box-sizing: border-box;
   border: 2px solid var(--mat-sys-primary);
@@ -19,6 +23,8 @@
   &.mat-accent {
     background: var(--background-gradient) !important;
     border: none;
+    // We need to make up for the border changing
+    padding: calc($paddingY + $borderWidth) calc($paddingX + $borderWidth);
     color: var(--on-background-gradient);
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onemrvapublic/design-system",
-  "version": "20.1.1",
+  "version": "20.2.1-develop.1",
   "description": "Design System Onem/Rva without theme included",
   "publishConfig": {
     "access": "public"