sempli-website-lib 7.3.0-beta.0 → 7.3.0-beta.1

package/assets/interface/icons/folder-plus.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-folder-plus"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path><line x1="12" y1="11" x2="12" y2="17"></line><line x1="9" y1="14" x2="15" y2="14"></line></svg>

package/assets/interface/icons/paperclip.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-paperclip"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sempli-website-lib",
-  "version": "7.3.0-beta.0",
+  "version": "7.3.0-beta.1",
   "peerDependencies": {
     "@angular/common": "^18.0.3",
     "@angular/core": "^18.0.3"

package/styles/master-app.scss

@@ -12743,6 +12743,56 @@ button.cursor-pointer {
   }
 }
 
+
+.chip-options-group {
+  display: flex;
+  justify-content: space-between;
+  margin: 20px 0;
+
+  @include responsive-max($breakpoint-xmedium) {
+    > div {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
+  label {
+    display: flex;
+    align-items: center;
+    max-width: 65%;
+  }
+
+  .button-chips {
+    transition-property: all;
+    transition-timing-function: cubic-bezier(.4,0,.2,1);
+    transition-duration: .15s;
+    padding: .5rem 1.5rem;
+    border-radius: 9999px;
+    border: none;
+    cursor: pointer;
+
+    background: transparent;
+    color: #AFB3C0;
+    -webkit-box-shadow: 0 0 0 2px #AFB3C0 inset;
+    box-shadow: 0 0 0 2px #AFB3C0 inset;
+
+    &:hover {
+      background-color: rgba(128, 128, 128, 0.24);
+    }
+
+    &.selected {
+      background: transparent;
+      color: #4D4CFC;
+      box-shadow: 0 0 0 2px #4D4CFC inset;
+    }
+
+    @include responsive-max($breakpoint-small) {
+      padding: 0.4rem 1rem;
+    }
+  }
+}
+
 /*#############################################################################
 # FORMS AND INPUTS
 #############################################################################*/
@@ -13884,7 +13934,7 @@ button.cursor-pointer {
   }
 
   &.extra-large {
-    @include responsive($breakpoint-medium) {
+    @include responsive($breakpoint-xmedium) {
       width: 860px;
     }
   }

package/styles/master-landing.scss

@@ -12523,6 +12523,56 @@ button.cursor-pointer {
   }
 }
 
+
+.chip-options-group {
+  display: flex;
+  justify-content: space-between;
+  margin: 20px 0;
+
+  @include responsive-max($breakpoint-xmedium) {
+    > div {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
+  label {
+    display: flex;
+    align-items: center;
+    max-width: 65%;
+  }
+
+  .button-chips {
+    transition-property: all;
+    transition-timing-function: cubic-bezier(.4,0,.2,1);
+    transition-duration: .15s;
+    padding: .5rem 1.5rem;
+    border-radius: 9999px;
+    border: none;
+    cursor: pointer;
+
+    background: transparent;
+    color: #AFB3C0;
+    -webkit-box-shadow: 0 0 0 2px #AFB3C0 inset;
+    box-shadow: 0 0 0 2px #AFB3C0 inset;
+
+    &:hover {
+      background-color: rgba(128, 128, 128, 0.24);
+    }
+
+    &.selected {
+      background: transparent;
+      color: #4D4CFC;
+      box-shadow: 0 0 0 2px #4D4CFC inset;
+    }
+
+    @include responsive-max($breakpoint-small) {
+      padding: 0.4rem 1rem;
+    }
+  }
+}
+
 /*#############################################################################
 # FORMS AND INPUTS
 #############################################################################*/
@@ -13664,7 +13714,7 @@ button.cursor-pointer {
   }
 
   &.extra-large {
-    @include responsive($breakpoint-medium) {
+    @include responsive($breakpoint-xmedium) {
       width: 860px;
     }
   }

package/styles/partials/_buttons.scss

@@ -451,3 +451,53 @@ button.cursor-pointer {
     }
   }
 }
+
+
+.chip-options-group {
+  display: flex;
+  justify-content: space-between;
+  margin: 20px 0;
+
+  @include responsive-max($breakpoint-xmedium) {
+    > div {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
+  label {
+    display: flex;
+    align-items: center;
+    max-width: 65%;
+  }
+
+  .button-chips {
+    transition-property: all;
+    transition-timing-function: cubic-bezier(.4,0,.2,1);
+    transition-duration: .15s;
+    padding: .5rem 1.5rem;
+    border-radius: 9999px;
+    border: none;
+    cursor: pointer;
+
+    background: transparent;
+    color: #AFB3C0;
+    -webkit-box-shadow: 0 0 0 2px #AFB3C0 inset;
+    box-shadow: 0 0 0 2px #AFB3C0 inset;
+
+    &:hover {
+      background-color: rgba(128, 128, 128, 0.24);
+    }
+
+    &.selected {
+      background: transparent;
+      color: #4D4CFC;
+      box-shadow: 0 0 0 2px #4D4CFC inset;
+    }
+
+    @include responsive-max($breakpoint-small) {
+      padding: 0.4rem 1rem;
+    }
+  }
+}

package/styles/partials/_modals.scss

@@ -31,7 +31,7 @@
   }
 
   &.extra-large {
-    @include responsive($breakpoint-medium) {
+    @include responsive($breakpoint-xmedium) {
       width: 860px;
     }
   }