Mercurial > gemma

diff client/src/components/ui/UITableBody.vue @ 5629:84d01a536bec 729-node-js-newer-version

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Transformed scss and sass styles into css
author Luisa Beerboom <lbeerboom@intevation.de>
date Thu, 11 May 2023 13:23:52 +0200
parents 7768f14f6535
children
line wrap: on
line diff
--- a/client/src/components/ui/UITableBody.vue	Tue May 09 13:20:28 2023 +0200
+++ b/client/src/components/ui/UITableBody.vue	Thu May 11 13:23:52 2023 +0200
@@ -22,33 +22,39 @@
   </div>
 </template>
 
-<style lang="sass">
-.table-body
-  .row-container
-    > .row
-      &:hover
-        background-color: #fcfcfc
-      .table-cell
-        display: flex
-        align-items: center
-        padding: 1.5px 3px
-        border-right: solid 1px #dee2e6
-        &:last-child
-          border-right: none
-        &.center
-          justify-content: center
-    .expand
-      border-bottom: solid 2px var(--color-info)
+<style>
+.table-body .row-container > .row:hover {
+  background-color: #fcfcfc;
+}
 
-    &.active
-      > .row
-        color: #fff
-        .table-cell
-          border-right-color: rgba(255, 255, 255, 0.3)
-          background-color: var(--color-info)
-          color: #fff
-          a
-            color: #fff !important
+.table-body .row-container > .row .table-cell {
+  display: flex;
+  align-items: center;
+  padding: 1.5px 3px;
+  border-right: solid 1px #dee2e6;
+}
+.table-body .row-container > .row .table-cell:last-child {
+  border-right: none;
+}
+.table-body .row-container > .row .table-cell.center {
+  justify-content: center;
+}
+
+.table-body .row-container .expand {
+  border-bottom: solid 2px var(--color-info);
+}
+
+.table-body .row-container.active > .row {
+  color: #fff;
+}
+.table-body .row-container.active > .row .table-cell {
+  border-right-color: rgba(255, 255, 255, 0.3);
+  background-color: var(--color-info);
+  color: #fff;
+}
+.table-body .row-container.active > .row .table-cell a {
+  color: #fff !important;
+}
 </style>
 
 <script>