Merge pull request #832 from strictdoc-project/mettta/newUI

UI: refactor CSS

Author: stanislaw

strictdoc/export/html/_static/_content.css

@@ -1,57 +1,44 @@
-.content {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  gap: 0 0;
-  place-items: stretch stretch;
-  /*
-    for vertical line in 'current' column:
-    .content_item[data-role="current"]::before
-  */
-  overflow: hidden;
-}
-
 [data-viewtype="document"] .content {
   display: block;
-  background-color: var(--color-bg-contrast);
   max-width: 900px;
-  padding: calc(var(--base-padding)*2);
 }
 
 [data-viewtype="traceability"] .content {
+  display: grid;
+  place-items: stretch stretch;
   grid-template-columns:  minmax(min-content, max-content)
                           minmax(var(--card-width), calc(2*var(--card-width)))
                           minmax(min-content, max-content);
   gap: var(--traceability-arrow) 0;
   width: -moz-fit-content;
   width: fit-content;
+  overflow: hidden;
 }
 
 [data-viewtype="requirements-coverage"] .content,
 [data-viewtype="deep_traceability"] .content {
+  display: grid;
+  place-items: stretch stretch;
   grid-template-columns:  minmax(min-content, max-content)
                           max-content
                           minmax(min-content, max-content);
   gap: var(--traceability-arrow) 0;
   width: -moz-fit-content;
   width: fit-content;
+  overflow: hidden;
 }
 
 [data-viewtype="table"] .content {
-  /* grid-template-columns:  minmax(250px, 25%)
-                          minmax(300px, 45%)
-                          minmax(250px, 30%);
-  gap: 2px;
-  background-color: #ddd;
-  border: 2px solid #ddd; */
   background-color: var(--color-bg-contrast);
   display: block;
-  overflow: visible;
 }
 
+/* TODO */
+/* used in TR, DTR, requirements_coverage: */
 .content_section {
   display: contents;
 }
-
+/* TODO */
 .content_item {
   position: relative;
   display: flex;
@@ -96,37 +83,6 @@
   border-left: 1px dotted #000;
 }
 
-/* [data-viewtype="table"] */
-
-[data-viewtype="table"] article {
-  display: contents;
-}
-
-[data-viewtype="table"] [data-section="meta"] {
-  grid-column: 1 / 2;
-}
-
-[data-viewtype="table"] [data-section="meta"].docsection_section:only-child {
-  grid-column: 1 / -1;
-  /* background-color: var(--color-bg-main); */
-}
-
-[data-viewtype="table"] [data-section="description"] {
-  grid-column: 2 / -1;
-}
-
-[data-viewtype="table"] [data-section="statement"] {
-  grid-column: 2 / 3;
-}
-
-[data-viewtype="table"] [data-section="comment"] {
-  grid-column: 3 / 4;
-}
-
-[data-viewtype="table"] [data-col="0"] {
-  grid-column: 1 / -1;
-}
-
 /* meta info */
 
 .content_meta {
@@ -250,11 +206,11 @@
 }
 
 .content-view-td-related,
-.content-view-td-related > ul.requirement_link {
+.content-view-td-related > ul.requirement__link {
   font-size: .85rem;
   margin-top: 0;
 }
 
-.content-view-td-related > ul.requirement_link:last-child {
+.content-view-td-related > ul.requirement__link:last-child {
   margin-bottom: 0;
 }

strictdoc/export/html/_static/_element.css

@@ -1,6 +1,6 @@
 
 
-[data-viewtype="source-file"] .requirement_link:hover {
+[data-viewtype="source-file"] .requirement__link:hover {
   text-decoration: none;
 }
 
@@ -34,9 +34,10 @@ a[aria-disabled="true"] {
   pointer-events: none;
 }
 
-main a,
-main a:link,
-main a:visited {
+/* .document from tool */
+.document a,
+.document a:link,
+.document a:visited {
   text-decoration: underline;
 }
 
@@ -80,15 +81,18 @@ main a:visited {
   column-gap: var(--base-rhythm);
 }
 
+.action_button,
 a.action_button,
-.action_button {
+a.action_button:link,
+a.action_button:visited {
   font-size:var(--font-size-xsm);
   font-weight: 600;
   text-align: left;
   text-decoration: none;
   white-space: nowrap;
   position: relative;
   display: inline-flex;
+
   align-items: center;
   justify-content: center;
   -webkit-box-align: center;
@@ -99,19 +103,24 @@ a.action_button,
   user-select: none;
   cursor: pointer;
   appearance: none;
-  padding: calc(var(--base-rhythm)*0.5) calc(var(--base-rhythm)*1.5);
-  min-height: 32px;
 
-  box-shadow: rgb(0 0 0 / 10%) 0px 1px 2px 0px;
+  /* 1.5 column-gap is compensated by SVG negative margin */
+  column-gap: calc(var(--base-rhythm)*1.5);
+  padding-left: calc(var(--base-rhythm)*1.5);
+  padding-right: calc(var(--base-rhythm)*1.5);
+  min-height: calc(var(--base-rhythm)*4);
+
+  /* box-shadow: rgb(0 0 0 / 10%) 0px 1px 2px 0px; */
   color: var(--color-action);
   background-color: rgb(255, 255, 255);
-  border-color: rgba(0, 0, 0, 0.1);
+  border-color: rgba(0, 0, 0, 0.05);
   background-clip: padding-box;
 
   transition: 0.2s;
 }
 
-.action_button:hover {
+.action_button:hover,
+a.action_button:hover {
   box-shadow: rgb(0 0 0 / 10%) 0px 2px var(--base-rhythm) 0px;
   color: var(--color-hover);
 }
@@ -125,6 +134,15 @@ a.action_button,
   cursor: default;
 }
 
+.action_button svg {
+  /*
+    action_button 1.5 column-gap
+    is compensated by SVG negative margin
+  */
+  margin-left: calc(var(--base-rhythm)*(-.5));
+  margin-right: calc(var(--base-rhythm)*(-.5));
+}
+
 /* nav */
 
 .nav {