refact(kt-table): move KtTable styles from _tables.scss to KtTable.vu…

…e and remove _tables.scss

packages/documentation/pages/usage/components/table.vue

@@ -731,10 +731,10 @@ It is possible to customize parts (columns) of the table by passing your own ren
 
 ```js
 renderLoading() {
-	return <div>Loading while the loading prop on KtTable is true</div>
+	return <div>Custom loading render</div>
 },
 renderEmpty() {
-	return <div>Hello</div>
+	return <div>Custom empty render</div>
 },
 ```
 
@@ -744,7 +744,7 @@ You can also use slots instead of render props. [`slot="loading"`, `slot="empty"
 <div slot="vue">
 <KtTable :rows="rows" :columns="columnsDefault" loading>
 	<div slot="loading">
-		Loading while the loading prop on KtTable is true
+		Custom loading via slot
 	</div>
 </KtTable>
 </div>
@@ -753,7 +753,7 @@ You can also use slots instead of render props. [`slot="loading"`, `slot="empty"
 
 ```html
 <KtTable :rows="rows" :columns="columnsDefault" loading>
-	<div slot="loading">Loading while the loading prop on KtTable is true</div>
+	<div slot="loading">Custom loading via slot</div>
 </KtTable>
 ```
 
@@ -764,7 +764,7 @@ You can also use slots instead of render props. [`slot="loading"`, `slot="empty"
 <div slot="vue">
 <KtTable :rows="emptyRows" :columns="columnsDefault">
 	<div slot="empty">
-		Hello, Empty World!
+		Custom empty via slot
 	</div>
 </KtTable>
 </div>
@@ -773,7 +773,7 @@ You can also use slots instead of render props. [`slot="loading"`, `slot="empty"
 
 ```html
 <KtTable :rows="emptyRows" :columns="columns">
-	<div slot="empty">Hello, Empty World!</div>
+	<div slot="empty">Custom empty via slot</div>
 </KtTable>
 ```
 
@@ -1197,10 +1197,10 @@ export default {
 			return new Date(value).toUTCString()
 		},
 		renderEmpty() {
-			return <div>Hello</div>
+			return <div>Custom empty render</div>
 		},
 		renderLoading() {
-			return <div>Loading while the loading prop on KtTable is true</div>
+			return <div>Custom loading render</div>
 		},
 		renderExpand(h, { row }) {
 			return (

packages/kotti-ui/source/kotti-style/index.scss

@@ -22,7 +22,6 @@
 @import 'codes';
 @import 'forms';
 @import 'loadings';
-@import 'tables';
 @import 'typography';
 
 // tippy.js

packages/kotti-ui/source/kotti-table/KtTable.vue

@@ -322,8 +322,114 @@ export default {
 
 @import '../kotti-style/_variables.scss';
 
+table.kt-table {
+	position: relative;
+	width: 100%;
+	hyphens: auto;
+	table-layout: auto;
+	border-collapse: collapse;
+}
+
+::v-deep table.kt-table th {
+	padding: var(--unit-2) var(--unit-1);
+	font-size: $font-size-sm;
+	line-height: 1em;
+	color: $lightgray-500;
+	text-align: inherit;
+	text-transform: uppercase;
+}
+
+::v-deep table.kt-table tr {
+	position: relative;
+	margin: 0;
+
+	&:hover .table-actions {
+		display: inline-flex;
+		justify-content: center;
+		background: var(--white);
+	}
+
+	&.disabled {
+		cursor: not-allowed;
+		background-color: var(--ui-01);
+		opacity: 0.6;
+	}
+
+	&.selected,
+	&:focus {
+		background: var(--ui-01);
+	}
+
+	&:focus {
+		outline: none;
+	}
+}
+
+::v-deep table.kt-table td {
+	position: relative;
+	padding: var(--unit-2) var(--unit-1);
+	line-height: 1.2rem;
+	border-bottom: 1px solid $lightgray-400;
+
+	&.empty {
+		color: $lightgray-500;
+		text-align: center;
+	}
+}
+
+::v-deep table.kt-table .expand-toggle i {
+	margin: 0 0.2rem;
+	font-size: 1rem !important;
+	color: $darkgray-300;
+
+	&.disabled {
+		color: $lightgray-500;
+	}
+}
+
+::v-deep table.kt-table .table-actions {
+	position: absolute;
+	top: 50%;
+	right: 0.8rem;
+	z-index: $zindex-4;
+	display: none;
+	float: right;
+	width: auto;
+	padding: 0.25rem;
+	margin-top: -0.8rem;
+	font-size: 0.8rem;
+	line-height: 0.8rem;
+	border: 0;
+	border-radius: var(--border-radius);
+	box-shadow: 0 0 1px #999;
+
+	> div {
+		display: flex;
+		flex-direction: row;
+	}
+
+	i {
+		margin: 0 var(--unit-1);
+		color: $lightgray-500;
+
+		&:hover {
+			color: $darkgray-500;
+			cursor: pointer;
+		}
+	}
+}
+
+::v-deep table.kt-table .form-group {
+	width: 32px;
+	line-height: 0;
+
+	.form-icon {
+		top: 0.2rem;
+	}
+}
+
 ::v-deep .kt-table .kt-table__no-row {
-	color: #8f8f8f;
+	color: $lightgray-500;
 	text-align: center;
 }
 
@@ -336,14 +442,12 @@ export default {
 	text-align: center;
 }
 
-::v-deep .kt-table tr.disabled {
-	cursor: not-allowed;
-	background-color: #f8f8f8;
-	opacity: 0.6;
-}
-
 .x-scroll {
-	height: auto;
+	display: block;
+	width: 100%;
+	height: 100%;
+	overflow-x: auto;
+	white-space: nowrap;
 }
 
 .hidden-columns {

packages/kotti-ui/source/kotti-table/components/TableRow.jsx

@@ -147,7 +147,7 @@ export const TableRow = {
 						class="c-hand"
 						onClick={($event) => handleExpand($event, row, rowIndex)}
 					>
-						<div class="toggle">
+						<div class="expand-toggle">
 							<i class="yoco">{expandToggleIcon}</i>
 						</div>
 					</td>