- client: Use the same tooltip style everywhere

Close #1866 Squashed commit of the following: commit 3347832caa33b01a0155b212987f02dc4824ab08 Merge: 7766502d d794b11e Author: ArtemBaskal <a.baskal@adguard.com> Date: Fri Jul 17 15:12:45 2020 +0300 Merge branch 'master' into fix/1866 commit 7766502d4a904ad0a4d240481f7eabf0e25cfb62 Author: ArtemBaskal <a.baskal@adguard.com> Date: Fri Jul 17 12:16:59 2020 +0300 Fix icon color classes commit 90191bf74b5eb1855c733c226f7acb4e906c7ad9 Author: ArtemBaskal <a.baskal@adguard.com> Date: Fri Jul 17 11:46:22 2020 +0300 Use logs icons, use pointer cursor, fix review markup formatting commit 0ba50fcd956101f5054ce38c2329df3e8abdfcd2 Author: ArtemBaskal <a.baskal@adguard.com> Date: Thu Jul 16 18:05:30 2020 +0300 Use help cursor on tooltips commit bf4e14afe69f874d29be73d8cd4cfbe240ca0304 Author: ArtemBaskal <a.baskal@adguard.com> Date: Thu Jul 16 17:41:47 2020 +0300 Use tooltip in logs, rename tooltip classes commit 00568fdc8e8484c5bae67c51ee8189a3a558e219 Author: ArtemBaskal <a.baskal@adguard.com> Date: Thu Jul 16 17:01:49 2020 +0300 - client: Use the same tooltip style everywhere
2020-07-17 15:24:39 +03:00
parent d794b11e7a
commit 7d2c7a61f1
30 changed files with 251 additions and 459 deletions
--- a/client/src/components/Logs/Cells/IconTooltip.css
+++ b/client/src/components/Logs/Cells/IconTooltip.css
@@ -0,0 +1,110 @@
+.tooltip-custom__container {
+    padding: 1rem 1.5rem 1.25rem 1.5rem;
+    font-size: 16px !important;
+    box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.2);
+    border-radius: 4px !important;
+    pointer-events: auto !important;
+    background-color: var(--white);
+    z-index: 102;
+    overflow-y: scroll;
+    max-height: 100%;
+}
+
+.white-space--nowrap {
+    white-space: nowrap !important;
+}
+
+.overflow-break {
+    white-space: normal !important;
+    overflow-wrap: break-word;
+}
+
+.grid {
+    display: grid;
+    grid-template-columns: repeat(2, min-content);
+    grid-row-gap: 0.5rem;
+    grid-column-gap: 1rem;
+}
+
+.grid--limited {
+    grid-template-columns: repeat(2, minmax(0, min-content));
+}
+
+.grid--gap-bg {
+    grid-column-gap: 1.5rem;
+}
+
+.grid--title {
+    font-weight: bold;
+}
+
+.grid--title:not(:first-child) {
+    padding-top: 1rem;
+}
+
+@media (max-width: 767.98px) {
+    .grid {
+        grid-template-columns: 35% 55%;
+    }
+
+    .grid * {
+        grid-column: 1 / -1;
+    }
+
+    .grid > :nth-child(even) {
+        margin: -0.5rem 0 0;
+    }
+
+    .grid > .key__time_table_header, .grid > .key__data, .grid > .key__encryption_status, .grid > .key__elapsed {
+        grid-column: 1 / span 1;
+    }
+
+    .grid > .value__time_table_header, .grid > .value__data, .grid > .value__encryption_status, .grid > .value__elapsed {
+        grid-column: 2 / span 1;
+        margin: 0 !important;
+    }
+
+    .grid .key-colon, .grid .title--border {
+        font-weight: bold;
+    }
+}
+
+.grid .key-colon:nth-child(odd)::after {
+    content: ':';
+}
+
+.grid__one-row {
+    grid-template-columns: 15rem;
+}
+
+.grid__flow-column {
+    grid-auto-flow: column;
+}
+
+.grid-content > * {
+    justify-content: space-between !important;
+    width: 100% !important;
+    overflow: hidden;
+    -o-text-overflow: ellipsis;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.title--border {
+    padding-top: 2rem;
+}
+
+.title--border:before {
+    content: '';
+    position: absolute;
+    left: 0;
+    border-top: 0.5px solid var(--gray-d8) !important;
+    width: 100%;
+    margin-top: -1rem;
+}
+
+.icon-cross {
+    position: absolute;
+    right: 0.5rem;
+    top: 0.5rem;
+}