@beterdichtbij/component-library 0.58.5 → 0.59.0

package/dist/scss/_content-library-card.scss

@@ -1,254 +1,136 @@
-.content-library-card {
-  min-height: 260px;
-  background-color: #fff;
-  box-shadow: 0 0 1px #abb0be;
-  padding: 20px;
-  border-radius: 5px;
-  display: flex;
-
-  flex-direction: column;
-  justify-content: space-evenly;
-
-  header {
-    h6 {
-      display: -webkit-box;
-      display: -moz-box;
-      min-height: 1.5625rem;
-      max-height: 3.125rem;
-      overflow: hidden;
-      -webkit-line-clamp: 2;
-      line-clamp: 2;
-      -webkit-box-orient: vertical;
-    }
-
-    small {
-      font-size: 14px;
-      line-height: 1.3125rem;
-      display: block;
-      max-height: 1.3125rem;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-  }
-
-  &__body {
-    padding-top: 12px;
-    flex: 1;
-
-    p {
-      min-height: 1rem;
-    }
-    p:last-of-type {
-        margin-bottom: 0px;
-    }
-  }
-
-  &__description {
-    display: -webkit-box;
-    display: -moz-box;
-    max-height: 2.75rem;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    -webkit-line-clamp: 2;
-    /* number of lines to show */
-    line-clamp: 2;
-    -webkit-box-orient: vertical;
-  }
-
-  &__uri {
-    font-size: 1rem;
-    display: flex;
-    align-items: baseline;
-
-    .filler {
-      width: 6px;
-    }
-  }
-
-  footer {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    .btn-icon {
-      height: 40px;
-      width: 40px;
-
-      svg {
-        fill: hsla(224, 21%, 38%, 1);
-        stroke: revert;
-
-        &.icon-info-circle {
-          fill: transparent;
-          stroke: hsla(224, 21%, 38%, 1);
-        }
-
-        &.icon-external {
-          transform: translateY(1px);
-        }
-      }
-
-      &:hover {
-        background: hsla(221, 13%, 95%, 1);
-        border-radius: 8px;
-      }
-    }
-  }
-
-  &-title {
-    //because of IE the value can't be set to revert
-    min-height: revert;
-    height: 164px;
-
-    
-    justify-content: space-between;
-  }
-
-  &-image {
-    min-height: revert;
-    height: 184px;
-    justify-content: space-between;
-
-   
-
-    header {
-      display: flex;
-      justify-content: space-between;
-      gap: 16px;
-
-      h6 {
-        max-height: 4.5rem;
-        line-clamp: 3;
-        -webkit-line-clamp: 3;
-      }
-    }
-
-    &__titles {
-      overflow: hidden;
-    }
-
-    &__figure {
-      height: 100px;
-      width: 100px;
-      object-fit: cover;
-    }
-  }
-
-  &-message-template {
-    
-
-    &__tag {
-      border-radius: 5px;
-      margin-bottom: 12px;
-      border-radius: 5px;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-
-      span {
-        background-color: #f2f3f5;
-        border-radius: 5px;
-        padding: 5px 8px;
-        color: $color-stroke-gray;
-        font-size: 0.8125rem;
-        line-height: 0.953125rem;
-        height: 0.953125rem;
-      }
-    }
-
-
-    .btn-link {
-      padding: 0;
-
-      &:focus {
-        box-shadow: revert;
-      }
-    }
-
-    .collapsed > .when-open,
-    .not-collapsed > .when-closed {
-      display: none;
-    }
-
-    .content-library-card-message-template__collapse {  
-      .message-text{
-        word-break: break-word;
-      }
-
-      .attachment-list {
-        .attachment-list__item {
-          margin-right: 15px;
-          margin-bottom: 0.25rem;
-          word-break: break-all;
-        }
-
-        img {
-          height: 50px;
-          max-width: 100%;
-        }
-      }
-
-      display: block !important;
-
-      &.collapse {
-        &:not(.show) {
-          height: 2.75rem !important;
-          display: -webkit-box !important;
-          overflow: hidden;
-          -webkit-line-clamp: 2;
-          -webkit-box-orient: vertical;
-
-          .attachment-list {
-            display: none;
-          }
-        }
-      }
-
-      &.collapsing {
-        &:not(.show) {
-          height: 4.5rem !important;
-        }
-      }
-    }
-
-    footer {
-      .icon-button {
-        svg {
-          fill: revert;
-          stroke: hsla(224, 21%, 38%, 1);
-        }
-      }
-
-      .edit-btn-group {
-        svg {
-          fill: hsla(224, 21%, 38%, 1);
-          stroke: revert;
-        }
-      }
-    }
-
-    .attachment-occurence {
-      position: relative;
-
-      .icon {
-        position: absolute;
-        fill: $color-blue;
-        top: -8px;
-        right: 8px;
-      }
-
-      .number-icon {
-        color: white;
-        font-size: 0.6em;
-        position: absolute;
-        border-radius: 50%;
-        background-color: "blue";//$color-brightblue;
-        width: 0.7rem;
-        text-align: center;
-        top: -14px;
-        left: -12px;
-      }
-    }
-  }
+.content-library-card {
+  min-height: 260px;
+  background-color: #fff;
+  box-shadow: 0 0 1px #abb0be;
+  padding: 20px;
+  border-radius: 5px;
+  display: flex;
+
+  flex-direction: column;
+  justify-content: space-evenly;
+
+  header {
+    h6 {
+      display: -webkit-box;
+      display: -moz-box;
+      overflow: hidden;
+      -webkit-line-clamp: 2;
+      line-clamp: 2;
+      -webkit-box-orient: vertical;
+    }
+
+    small {
+      font-size: 14px;
+      line-height: 1.3125rem;
+      display: block;
+      max-height: 1.3125rem;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+
+  &__body {
+    padding-top: 12px;
+    flex: 1;
+
+    p {
+      min-height: 1rem;
+    }
+    p:last-of-type {
+        margin-bottom: 0px;
+    }
+  }
+
+  &__description {
+    display: -webkit-box;
+    display: -moz-box;
+    max-height: 2.75rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 2;
+    /* number of lines to show */
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+
+  &__uri {
+    font-size: 1rem;
+    display: flex;
+    align-items: baseline;
+
+    .filler {
+      width: 6px;
+    }
+  }
+
+  footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .btn-icon {
+      height: 40px;
+      width: 40px;
+
+      svg {
+        fill: hsla(224, 21%, 38%, 1);
+        stroke: revert;
+
+        &.icon-info-circle {
+          fill: transparent;
+          stroke: hsla(224, 21%, 38%, 1);
+        }
+
+        &.icon-external {
+          transform: translateY(1px);
+        }
+      }
+
+      &:hover {
+        background: hsla(221, 13%, 95%, 1);
+        border-radius: 8px;
+      }
+    }
+  }
+
+  &-title {
+    //because of IE the value can't be set to revert
+    min-height: revert;
+    height: 164px;
+
+    
+    justify-content: space-between;
+  }
+
+  &-image {
+    min-height: revert;
+    height: 184px;
+    justify-content: space-between;
+
+   
+
+    header {
+      display: flex;
+      justify-content: space-between;
+      gap: 16px;
+
+      h6 {
+        max-height: 4.5rem;
+        line-clamp: 3;
+        -webkit-line-clamp: 3;
+      }
+    }
+
+    &__titles {
+      overflow: hidden;
+    }
+
+    &__figure {
+      height: 100px;
+      width: 100px;
+      object-fit: cover;
+    }
+  }
+
 }

package/dist/scss/_content-library-modal.scss

@@ -1,48 +1,48 @@
-#content-library-modal {
-  .search-block input {
-    margin: 0 0 16px 0;
-  } 
-
-  .collapse-button-container {
-    text-align: center;
-  }
-
-  .collapse-button {
-    padding: 0 12px;
-    margin-bottom: 8px;
-
-    &-last {
-      margin-bottom: 0;
-    }
-
-    svg {
-      margin-right: 4px;
-    }
-
-    > .collapsed-show {
-      display: none;
-    }
-
-    > .collapsed-hide {
-      display: inline-block;
-    }
-
-    &.collapsed {
-      > .collapsed-show {
-        display: inline-block;
-      }
-
-      > .collapsed-hide {
-        display: none;
-      }
-    }
-  }
-
-  .content-library-header__messages {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    font-weight: bold;
-  }
+#content-library-modal {
+  .search-block input {
+    margin: 0 0 16px 0;
+  } 
+
+  .collapse-button-container {
+    text-align: center;
+  }
+
+  .collapse-button {
+    padding: 0 12px;
+    margin-bottom: 8px;
+
+    &-last {
+      margin-bottom: 0;
+    }
+
+    svg {
+      margin-right: 4px;
+    }
+
+    > .collapsed-show {
+      display: none;
+    }
+
+    > .collapsed-hide {
+      display: inline-block;
+    }
+
+    &.collapsed {
+      > .collapsed-show {
+        display: inline-block;
+      }
+
+      > .collapsed-hide {
+        display: none;
+      }
+    }
+  }
+
+  .content-library-header__messages {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    font-weight: bold;
+  }
 }

package/dist/scss/_content-library-overview.scss

@@ -1,5 +1,5 @@
-.content-library-overview {
-    .card-container {
-        padding-bottom: 12px;
-    }
+.content-library-overview {
+    .card-container {
+        padding: 0 4px 8px 4px;
+    }
 }

package/dist/scss/_content-library-split-button.scss

@@ -1,20 +1,20 @@
-.bd-content-library-split-button {
-    // Empty ::after element with extra height is added by PrimeVue.
-    .p-button-icon-only::after {
-        display: none;
-    }
-
-    .menu-item {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        padding: 8px;
-        cursor: pointer;
-        font-size: 1rem;
-
-        .icon-image {
-            width: 18px;
-            height: 18px;
-        }
-    }
+.bd-content-library-split-button {
+    // Empty ::after element with extra height is added by PrimeVue.
+    .p-button-icon-only::after {
+        display: none;
+    }
+
+    .menu-item {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px;
+        cursor: pointer;
+        font-size: 1rem;
+
+        .icon-image {
+            width: 18px;
+            height: 18px;
+        }
+    }
 }

package/dist/scss/_conversation-to-text-modal.scss

@@ -1,33 +1,33 @@
-#conversation-to-text-modal {
-    .select-all-checkbox {
-        margin: 20px 0;
-    }
-
-    .message-content {
-        width: 100%;
-    }
-
-    .message {
-        background-color: #f5f5f5;
-        padding: 30px;
-        border-radius: 8px;
-
-        &.is-sender {
-            margin: 0 20px 10px 80px;
-        }
-
-        &.is-receiver {
-            margin: 0 80px 10px 20px;
-        }
-    }
-
-    @media (max-width: 849px) {
-        .is-sender {
-            margin: 0 10px 10px 30px;      
-        } 
-
-        .is-receiver {
-            margin: 0 40px 10px 10px;
-        }
-    }
+#conversation-to-text-modal {
+    .select-all-checkbox {
+        margin: 20px 0;
+    }
+
+    .message-content {
+        width: 100%;
+    }
+
+    .message {
+        background-color: #f5f5f5;
+        padding: 30px;
+        border-radius: 8px;
+
+        &.is-sender {
+            margin: 0 20px 10px 80px;
+        }
+
+        &.is-receiver {
+            margin: 0 80px 10px 20px;
+        }
+    }
+
+    @media (max-width: 849px) {
+        .is-sender {
+            margin: 0 10px 10px 30px;      
+        } 
+
+        .is-receiver {
+            margin: 0 40px 10px 10px;
+        }
+    }
 }