@digi-frontend/dgate-api-documentation 1.0.1 → 1.0.4

package/src/components/table/style.scss

@@ -1,223 +1,179 @@
-@import '../_global';
-
-#EnumButton {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: 0.0375rem solid #babdcc;
-  border-radius: 0.3125rem;
-}
-div.endBtnIcon {
-  align-self: center !important;
-}
-
-.methodDescForEnum {
-  width: 16.875rem !important;
-}
-
-.select-inputs {
-  display: flex;
-  flex-direction: row;
-  gap: .625rem;
-}
-
-.addEnumButton {
-  color: #4d75d8 !important;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  font-size: .9375rem;
-  font-weight: 400;
-  font-family: 'Cairo';
-  gap: .3125rem;
-  cursor: pointer;
-}
-
-.tableSectionContainer {
-  .tableContainer {
-    max-width: 100%;
-    overflow-x: overlay;
-
-    &.tableContainer * {
-      font-family: 'Cairo';
-    }
-
-    .table {
-      width: 100%;
-      border-spacing: 0;
-      border: none;
-      border-right: 1px solid var(--border-color-neutral);
-      border-left: 1px solid var(--border-color-neutral);
-
-      &.borderRadiusTop {
-        border-top-left-radius: 0.625rem;
-        border-top-right-radius: 0.625rem;
-      }
-
-      &.borderRadiusBottom {
-        border-bottom-left-radius: 0.625rem;
-        border-bottom-right-radius: 0.625rem;
-      }
-
-      .tableHead {
-        border: 1px solid var(--Gray-10);
-        margin: 0rem !important;
-        background-color: #f8f9fb;
-        width: max-content;
-        min-width: 100%;
-        color: var(--Gray-50);
-        font-weight: 400;
-
-        .tableHeadCell {
-          border-bottom: 1px solid var(--border-color-neutral);
-          border-top: 1px solid var(--border-color-neutral);
-          font-style: normal;
-          font-size: 0.875rem;
-          padding: 0.75rem 1.875rem;
-          text-align: start;
-          white-space: nowrap;
-          color: inherit;
-          font-weight: inherit;
-
-          .sortIcon {
-            padding: 0rem 0.25rem;
-            height: 1.875rem;
-            cursor: pointer;
-          }
-        }
-
-        .headContainer {
-          display: flex;
-          flex-direction: row;
-          align-items: center;
-          text-overflow: ellipsis;
-        }
-      }
-
-      .tableBody {
-        tr {
-          background-color: var(--background-color-white-secondary);
-          overflow: visible !important;
-
-          .tippy-content {
-            background-color: var(--border-color-hover);
-            color: var(--text-color-disabled);
-            border-radius: 5px;
-            font-size: 14px;
-            font-weight: 400;
-            line-height: 20px;
-            text-align: left;
-          }
-          .tippy-box[data-placement^='bottom'] > .tippy-arrow:before {
-            color: var(--border-color-hover);
-          }
-
-          &.rowSelected {
-            background-color: var(--background-color-gray-40);
-          }
-          td {
-            font-weight: 400;
-            font-size: 0.875rem;
-            text-align: start;
-            color: var(--text-color-primary);
-            border-bottom: 1px solid var(--border-color-gray);
-            width: max-content;
-            white-space: nowrap;
-            height: 3.75rem;
-            padding: 0.75rem 1.875rem;
-            overflow: visible !important;
-
-            .tableData {
-              max-width: 100%;
-              width: fit-content;
-              white-space: nowrap;
-              text-overflow: ellipsis;
-              overflow: visible !important;
-            }
-
-            &:nth-child(2) {
-              .tableData {
-                .customBtn .btnContentWrapper .endBtnIcon svg path,
-                .customBtn :link .btnContentWrapper .endBtnIcon svg path,
-                .customBtn :visited .btnContentWrapper .endBtnIcon svg path {
-                  stroke-width: 0.1 !important;
-                  fill: #12131a !important;
-                }
-              }
-            }
-          }
-
-          &:hover {
-            background-color: var(--background-color-gray-10);
-          }
-        }
-
-        .fallbackTableRow {
-          background-color: var(--background-color-white-secondary);
-          height: 4.375rem;
-
-          &:hover {
-            background-color: var(--background-color-white-secondary);
-          }
-
-          .fallbackContainer {
-            width: 100%;
-            height: 100%;
-            color: var(--text-color-quaternary);
-            .fallbackTextContainer {
-              display: flex;
-              flex-direction: row;
-              align-items: center;
-              justify-content: center;
-              width: 100%;
-              height: 100%;
-
-              .fallbackText {
-                font-style: normal;
-                font-weight: 400;
-                font-size: 0.875rem;
-                line-height: 1.25rem;
-              }
-            }
-          }
-        }
-      }
-
-      th,
-      td {
-        text-align: left;
-      }
-    }
-  }
-
-  .tableFooterContainer {
-    display: flex;
-    width: 100%;
-    height: auto;
-  }
-
-  .ascArrow {
-    height: 0.8125rem;
-    margin-bottom: 0.4375rem;
-    cursor: pointer;
-  }
-
-  .descArrow {
-    height: 0.8125rem;
-    margin-top: 0.4375rem;
-    cursor: pointer;
-  }
-
-  .defaultSortArrow {
-    height: 1.25rem;
-    cursor: pointer;
-  }
-
-  .ascArrow,
-  .descArrow,
-  .defaultSortArrow {
-    path {
-      fill: var(--Gray-50);
-    }
-  }
-}
+@import '../_global';
+
+.tableSectionContainer {
+  .tableContainer {
+    max-width: 100%;
+    overflow-x: overlay;
+
+    &.tableContainer * {
+      font-family: 'Cairo';
+    }
+
+    .table {
+      width: 100%;
+      border-spacing: 0;
+      border: none;
+      border-right: 1px solid var(--border-color-neutral);
+      border-left: 1px solid var(--border-color-neutral);
+
+      &.borderRadiusTop {
+        border-top-left-radius: 0.625rem;
+        border-top-right-radius: 0.625rem;
+      }
+
+      &.borderRadiusBottom {
+        border-bottom-left-radius: 0.625rem;
+        border-bottom-right-radius: 0.625rem;
+      }
+
+      .tableHead {
+        border: 1px solid var(--Gray-10);
+        margin: 0rem !important;
+        background-color: var(--background-color-header);
+        width: max-content;
+        min-width: 100%;
+        color: var(--Gray-50);
+        font-weight: 400;
+
+        .tableHeadCell {
+          border-bottom: 1px solid var(--border-color-neutral);
+          border-top: 1px solid var(--border-color-neutral);
+          font-style: normal;
+          font-size: 0.875rem;
+          padding: 0.75rem 1.875rem;
+          text-align: start;
+          white-space: nowrap;
+          color: inherit;
+          font-weight: inherit;
+
+          .sortIcon {
+            padding: 0rem 0.25rem;
+            height: 1.875rem;
+            cursor: pointer;
+          }
+        }
+
+        .headContainer {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          text-overflow: ellipsis;
+        }
+      }
+
+      .tableBody {
+        tr {
+          background-color: var(--background-color-white-secondary);
+          overflow: visible !important;
+
+          .tippy-content {
+            background-color: var(--border-color-hover);
+            color: var(--text-color-disabled);
+            border-radius: 5px;
+            font-size: 14px;
+            font-weight: 400;
+            line-height: 20px;
+            text-align: left;
+          }
+          .tippy-box[data-placement^='bottom'] > .tippy-arrow:before {
+            color: var(--border-color-hover);
+          }
+
+          &.rowSelected {
+            background-color: var(--background-color-gray-40);
+          }
+          td {
+            font-weight: 400;
+            font-size: 0.875rem;
+            text-align: start;
+            color: var(--text-color-primary);
+            border-bottom: 1px solid var(--border-color-gray);
+            width: max-content;
+            white-space: nowrap;
+            height: 3.75rem;
+            padding: 0.75rem 1.875rem;
+            overflow: visible !important;
+
+            .tableData {
+              max-width: 100%;
+              width: fit-content;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              overflow: visible !important;
+            }
+          }
+
+          &:hover {
+            background-color: var(--background-color-gray-10);
+          }
+        }
+
+        .fallbackTableRow {
+          background-color: var(--background-color-white-secondary);
+          height: 4.375rem;
+
+          &:hover {
+            background-color: var(--background-color-white-secondary);
+          }
+
+          .fallbackContainer {
+            width: 100%;
+            height: 100%;
+            color: var(--text-color-quaternary);
+            .fallbackTextContainer {
+              display: flex;
+              flex-direction: row;
+              align-items: center;
+              justify-content: center;
+              width: 100%;
+              height: 100%;
+
+              .fallbackText {
+                font-style: normal;
+                font-weight: 400;
+                font-size: 0.875rem;
+                line-height: 1.25rem;
+              }
+            }
+          }
+        }
+      }
+
+      th,
+      td {
+        text-align: left;
+      }
+    }
+  }
+
+  .tableFooterContainer {
+    display: flex;
+    width: 100%;
+    height: auto;
+  }
+
+  .ascArrow {
+    height: 0.8125rem;
+    margin-bottom: 0.4375rem;
+    cursor: pointer;
+  }
+
+  .descArrow {
+    height: 0.8125rem;
+    margin-top: 0.4375rem;
+    cursor: pointer;
+  }
+
+  .defaultSortArrow {
+    height: 1.25rem;
+    cursor: pointer;
+  }
+
+  .ascArrow,
+  .descArrow,
+  .defaultSortArrow {
+    path {
+      fill: var(--Gray-50);
+    }
+  }
+}