From e13e630cd6e4fc0b1ff92098a28a770794c7bb9a Mon Sep 17 00:00:00 2001
From: gabrhr <73925454+gabrhr@users.noreply.github.com>
Date: Wed, 20 Apr 2022 10:19:29 -0500
Subject: =?UTF-8?q?A=C3=B1adir=20plantilla?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Base para front
---
 front/odiparpack/app/styles/components/Table.scss | 152 ++++++++++++++++++++++
 1 file changed, 152 insertions(+)
 create mode 100644 front/odiparpack/app/styles/components/Table.scss

(limited to 'front/odiparpack/app/styles/components/Table.scss')

diff --git a/front/odiparpack/app/styles/components/Table.scss b/front/odiparpack/app/styles/components/Table.scss
new file mode 100644
index 0000000..04209f0
--- /dev/null
+++ b/front/odiparpack/app/styles/components/Table.scss
@@ -0,0 +1,152 @@
+@import "../../styles/mixins";
+
+.stripped{
+  tbody tr:nth-child(even){
+    background: material-color('grey', '100');
+  }
+}
+
+.hover{
+  tbody tr:hover{
+    background: material-color('grey', '200');
+  }
+}
+
+.bordered{
+  thead tr{
+    background: material-color('grey', '200');
+  }
+  td, th{
+    border: 1px solid material-color('grey', '300');
+  }
+  tr td, tr th{
+    &:first-child{
+      border-left: none
+    }
+    &:last-child{
+      border-right: none
+    }
+  }
+}
+
+table.small{
+  tr{
+    height: 24px;
+    td, th{
+      padding: 4px 10px;
+      font-size: 12px;
+    }
+  }
+}
+
+table.medium{
+  tr{
+    height: 48px;
+    td, th{
+      padding: 4px 56px 4px 24px;
+      font-size: 14px;
+    }
+  }
+}
+
+table.big{
+  tr{
+    height: 64px;
+    td, th{
+      padding: 8px 56px 8px 24px;
+      font-size: 18px;
+    }
+  }
+}
+
+.nodata{
+  text-align: center;
+  padding: 10px 10px 40px;
+  font-size: 14px;
+  line-height: 16px;
+  color: material-color('grey', '500');
+  svg{
+    position: relative;
+    top: 5px;
+    width: 22px;
+    margin: 0 6px;
+    fill: material-color('grey', '500');
+  }
+}
+
+.hideAction{
+  display: none !important;
+}
+
+.tableCrud{
+  table-layout: fixed;
+  .hiddenField{
+    opacity: 0;
+    position: absolute;
+  }
+  .editing{
+    background: material-color('lime', '50');
+    td .crudInput{
+      &:before{
+        opacity: 1;
+      }
+      > * {
+        &:before, &:after{
+          opacity: 1;
+        } 
+      }
+      svg, button {
+        visibility: visible;
+      }
+      input[type="text"],
+      input[type="number"],
+      input[type="email"]{
+        width: 100%;
+      }
+    }
+  }
+  th{
+    padding: 0 15px;
+  }
+  td{
+    padding: 0 15px;
+    &.toggleCell{
+      position: relative;
+    }
+    vertical-align: middle;
+    .coverReadonly{
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      z-index: 2;
+      display: none;
+      &.show{
+        display: block;
+      }
+    }
+    .crudInput{
+      &:before{
+        opacity: 0;
+      }
+      color: material-color('grey', '900');
+      > * > input {
+        color: material-color('grey', '900');
+        &:before, &:after{
+          opacity: 0;
+        } 
+      }
+      svg, button {
+        visibility: hidden;
+      }
+    }
+  }
+  td [disabled], td[disabled]:hover{
+    border: none !important;
+    box-shadow: none;
+    cursor: text;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background: none;
+  }
+}
-- 
cgit v1.2.3