Manage Access Dialog

src/components/access-control-modal/AccessControlModal.styles.css

@@ -0,0 +1,251 @@
+:host {
+  h2 {
+    color: var(--solid-ui-color-gray-900, #101828);
+    font-size: var(--solid-ui-font-size-md, 1rem);
+    font-weight: 600;
+  }
+
+  .access-grants-form {
+    display: flex;
+    padding: 10px 10px;
+    flex-direction: row;
+    align-items: flex-start;
+    gap: 10px;
+    align-self: stretch;
+
+    --access-role-select-width: 129px;
+
+    solid-ui-input {
+      flex: 1 1 auto;
+      min-width: 0;
+
+      --solid-ui-input-border-color: var(--solid-ui-color-slate-200, #E2E8F0);
+    }
+  }
+
+  .access-grants-header,
+  .access-grants-list,
+  .access-grants-general {
+    padding: 0 10px;
+    align-self: stretch;
+  }
+
+  .access-grants-header {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    justify-content: space-between;
+
+    .access-grants-search-input {
+      flex: 0 0 auto;
+      width: 12ch;
+      min-width: 12ch;
+      --solid-ui-input-border-color: transparent;
+    }
+  }
+
+  .access-grants-list {
+    display: flex;
+    align-items: flex-start;
+    gap: 20px;
+
+    ul {
+      display: flex;
+      flex-direction: column;
+      height: 195px;
+      padding: 15px;
+      align-items: flex-start;
+      gap: 15px;
+      flex: 1 0 0;
+      border-radius: 10px;
+      border: 1px solid var(--solid-ui-color-gray-200, #E5E7EB);
+    }
+
+    li {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      flex: 0 0 auto;
+      width: 100%;
+
+      .access-grants-image {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        aspect-ratio: 1/1;
+        width: 30px;
+        height: 30px;
+        flex: 0 0 30px;
+        border-radius: 999px;
+        overflow: hidden;
+        color: var(--solid-ui-color-white, #FFF);
+        text-align: center;
+        font-size: var(--solid-ui-font-size-xs, .75rem);
+        font-weight: 500;
+
+        img {
+          display: flex;
+          width: 100%;
+          height: 100%;
+          border-radius: 999px;
+          object-fit: cover;
+        }
+
+        span {
+          line-height: 1;
+        }
+      }
+
+      .access-grants-image--group {
+        background: var(--solid-ui-color-blue-900, #083575);
+      }
+
+      .access-grants-image--agent,
+      .access-grants-image--agentClass {
+        background: var(--solid-ui-color-lavender-300, #e6dcff);
+      }
+
+      .access-grants-image--origin {
+        background: var(--solid-ui-color-gray-200, #E5E7EB);
+      }
+
+      .access-grants-image--unknown {
+        background: var(--solid-ui-color-gray-300, #D1D5DB);
+      }
+
+      h3 {
+        flex: 1 1 auto;
+        min-width: 0;
+        color: var(--solid-ui-color-gray-800, #1E2939);
+        font-size: var(--solid-ui-font-size-xs, .75rem);
+        font-weight: 600;
+      }
+
+      span {
+        margin-left: auto;
+        flex: 0 0 auto;
+        text-align: right;
+      }
+
+      .access-grants-role {
+        margin-left: auto;
+        flex: 0 0 auto;
+        font-size: var(--solid-ui-font-size-xs, .75rem);
+      }
+
+      .access-grants-role--owner {
+        color: var(--solid-ui-color-gray-400, #99A1AF);
+        font-size: var(--solid-ui-font-size-xs, .75rem);
+      }
+
+      .access-grants-role--editable {
+        width: fit-content;
+        max-width: 100%;
+      }
+    }
+  }
+
+  .access-grants-general {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+
+    --access-role-select-width: 110px;
+
+    solid-ui-combobox,
+    solid-ui-input {
+      --solid-ui-input-border-color: var(--solid-ui-color-slate-200, #E2E8F0);
+    }
+
+    .access-grants-general-header {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      gap: 15px;
+      align-self: stretch;
+    }
+
+    .access-grants-general-share {
+      display: flex;
+      align-items: center;
+      gap: 15px;
+      align-self: stretch;
+
+      .access-grants-general-share-content {
+        display: flex;
+        flex-direction: row;
+        align-items: flex-start;
+        gap: 10px;
+        flex: 1 0 0;
+
+        .access-grants-general-share-icon {
+          display: flex;
+          width: 30px;
+          height: 30px;
+          padding: 5px;
+          justify-content: center;
+          align-items: center;
+          aspect-ratio: 1/1;
+          border-radius: 50px;
+          background: var(--solid-ui-color-violet-50, #F5F3FF);
+        }
+
+        .access-grants-general-share-icon-inner {
+          display: flex;
+          width: 20px;
+          height: 20px;
+          padding: 1.25px;
+          justify-content: center;
+          align-items: center;
+          flex-shrink: 0;
+          aspect-ratio: 1/1;
+
+          icon-lucide-globe {
+            width: 17.5px;
+            height: 17.5px;
+            flex-shrink: 0;
+            aspect-ratio: 1/1;
+          }
+        }
+
+        .access-grants-general-share-text {
+          flex: 1 1 auto;
+          min-width: 0;
+
+          .access-grants-general-share-text-title {
+            color: var(--solid-ui-color-gray-900, #101828);
+            font-size: var(--solid-ui-font-size-sm, .875rem);
+            font-weight: 600;
+          }
+
+          .access-grants-general-share-text-description {
+            color: var(--solid-ui-color-gray-700, #364153);
+            font-size: var(--solid-ui-font-size-sm, .875rem);
+          }
+        }
+      }
+    }
+  }
+
+  .access-role-select {
+    display: block;
+    max-width: 100%;
+    margin-top: 25px;
+    flex: 0 0 auto;
+    width: var(--access-role-select-width);
+  }
+
+  .access-control-footer-actions {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 15px;
+    width: 100%;
+
+    > solid-ui-button {
+      min-width: 132px;
+    }
+  }
+}