@beterdichtbij/component-library 0.59.0 → 0.60.1

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

@@ -1,128 +1,132 @@
-.content-library-card-message-template {
-    padding: 8px;
-    min-height: 180px;
-    height: auto;
-
-    &.collapsed {
-        height: 180px;
-    }
-
-    .content-library-card__body {
-        padding-top: 6px;
-        max-height: none;
-        overflow: hidden;
-
-        &.collapsed {
-            max-height: 75px;
-        }
-    }
-
-    .btn-link {
-        padding: 0;
-
-        &:focus {
-            box-shadow: revert;
-        }
-    }
-
-    .content-library-card-message-template__body {
-        display: block !important;
-
-        .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%;
-            }
-        }
-    }
-
-    footer {
-        justify-content: space-between;
-
-        .icon-button {
-            svg {
-                fill: revert;
-                stroke: hsla(224, 21%, 38%, 1);
-            }
-        }
-    }
-
-    .attachment-occurence {
-        width: 30px;
-        height: 30px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        position: relative;
-
-        .icon {
-            fill: $color-blue;
-        }
-
-        .number-icon {
-            position: absolute;
-            top: 0;
-            right: 0;
-            color: white;
-            font-size: 0.6em;
-            border-radius: 50%;
-            background-color: $blue;
-            width: .8rem;
-            height: .8rem;
-            display: flex;
-            text-align: center;
-            align-items: center;
-            justify-content: center;
-        }
-    }
-
-    header {
-        display: flex;
-
-        .heading {
-            flex: 1;
-
-            .title {
-                h6 {
-                    display: inline;
-                    margin: 0 4px 0 0;
-                    line-height: normal;
-                }
-            }
-        }
-
-        .edit-btn-group {
-            button {
-                width: 30px;
-                height: 30px;
-
-                svg {
-                    fill: hsla(224, 21%, 38%, 1);
-                    stroke: revert;
-                }
-            }
-        }
-    }
-
-    .collapse-button {
-        height: 30px;
-
-        &-last {
-            margin-bottom: 0;
-        }
-
-        svg {
-            margin-right: 4px;
-        }
-    }
+.content-library-card-message-template {
+    padding: 8px;
+    min-height: 180px;
+    height: auto;
+
+    &.collapsed {
+        height: 180px;
+    }
+
+    .content-library-card__body {
+        padding-top: 6px;
+        max-height: none;
+        overflow: hidden;
+
+        &.collapsed {
+            max-height: 75px;
+        }
+    }
+
+    .btn-link {
+        padding: 0;
+
+        &:focus {
+            box-shadow: revert;
+        }
+    }
+
+    .btn-insert {
+        width: auto;
+    }
+
+    .content-library-card-message-template__body {
+        display: block !important;
+
+        .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%;
+            }
+        }
+    }
+
+    footer {
+        justify-content: space-between;
+
+        .icon-button {
+            svg {
+                fill: revert;
+                stroke: hsla(224, 21%, 38%, 1);
+            }
+        }
+    }
+
+    .attachment-occurence {
+        width: 30px;
+        height: 30px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+
+        .icon {
+            fill: $color-blue;
+        }
+
+        .number-icon {
+            position: absolute;
+            top: 0;
+            right: 0;
+            color: white;
+            font-size: 0.6em;
+            border-radius: 50%;
+            background-color: $blue;
+            width: .8rem;
+            height: .8rem;
+            display: flex;
+            text-align: center;
+            align-items: center;
+            justify-content: center;
+        }
+    }
+
+    header {
+        display: flex;
+
+        .heading {
+            flex: 1;
+
+            .title {
+                h6 {
+                    display: inline;
+                    margin: 0 4px 0 0;
+                    line-height: normal;
+                }
+            }
+        }
+
+        .edit-btn-group {
+            button {
+                width: 30px;
+                height: 30px;
+
+                svg {
+                    fill: hsla(224, 21%, 38%, 1);
+                    stroke: revert;
+                }
+            }
+        }
+    }
+
+    .collapse-button {
+        height: 30px;
+
+        &-last {
+            margin-bottom: 0;
+        }
+
+        svg {
+            margin-right: 4px;
+        }
+    }
 }

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

@@ -1,136 +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;
-      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;
-    }
-  }
-
+.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,47 @@
-#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;
+
+    &-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: 0 4px 8px 4px;
-    }
+.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;
+        }
+    }
 }