@neovici/cosmoz-omnitable 18.7.0-beta.1 → 18.7.0-beta.2

package/dist/cosmoz-omnitable-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cosmoz-omnitable-styles.d.ts","sourceRoot":"","sources":["../src/cosmoz-omnitable-styles.js"],"names":[],"mappings":"AAGA,8BAuEE"}
+{"version":3,"file":"cosmoz-omnitable-styles.d.ts","sourceRoot":"","sources":["../src/cosmoz-omnitable-styles.js"],"names":[],"mappings":"AAGA,8BAoEE"}

package/dist/cosmoz-omnitable-styles.js

@@ -14,7 +14,7 @@ export const checkbox = css `
 		user-select: none;
 		cursor: pointer;
 		display: inline-block;
-		box-shadow: var(--cz-shadow-xs-skeumorphic);
+		box-shadow: inset 0 0 0 2px var(--cz-color-border-primary);
 		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 		transition: background-color 140ms;
 		margin: 1px calc(var(--cz-spacing) * 3);
@@ -23,7 +23,7 @@ export const checkbox = css `
 
 	.checkbox:checked {
 		background: rgb(
-			from var(--cz-color-bg-brand-solid) r g b / calc(alpha * 0.55)
+			from var(--cz-color-bg-brand-solid) r g b / calc(alpha * 0.85)
 		);
 		box-shadow: none;
 	}
@@ -56,7 +56,7 @@ export const checkbox = css `
 	}
 
 	.checkbox:checked:hover {
-		box-shadow: 0 0 2px 6px #2021240f;
+		box-shadow: 0 0 2px 4px var(--cz-color-bg-quaternary);
 	}
 
 	.checkbox:indeterminate::before {
@@ -66,10 +66,7 @@ export const checkbox = css `
 		height: 2px;
 		left: 4px;
 		top: 8px;
-		background-color: var(
-			--cosmoz-omnitable-checkbox-checked-color,
-			var(--primary-color)
-		);
+		background-color: var(--cz-color-text-brand);
 	}
 `;
 export default css `
@@ -285,6 +282,18 @@ export default css `
 		padding: 5px 4%;
 		border-bottom: 1px var(--cz-color-border-secondary) solid;
 		background-color: var(--cz-color-bg-disabled);
+		animation: expand-in 0.25s ease;
+	}
+
+	@keyframes expand-in {
+		from {
+			opacity: 0;
+			transform: translateY(-4px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
 	}
 
 	cosmoz-omnitable-item-expand:not([expanded]) {
@@ -416,6 +425,10 @@ export default css `
 		outline: none;
 		color: var(--cz-color-text-primary);
 		background: transparent;
+
+		&[hidden] {
+			display: none;
+		}
 	}
 
 	.groupRow .expand {
@@ -445,6 +458,7 @@ export default css `
 		outline: none;
 		color: inherit;
 		padding: 0;
+		transition: transform 0.3s ease;
 	}
 	.sg span {
 		display: none;
@@ -468,35 +482,42 @@ export default css `
 		flex: auto;
 	}
 
-	:host([mini]) .itemRow .expand,
-	:host([mini]) cosmoz-omnitable-item-expand {
-		display: none;
-	}
-
 	.itemRow-minis {
 		display: flex;
 		justify-content: space-between;
 		margin: 14px 12px 12px 12px;
-		color: var(--cosmoz-omnitable-mini-color, #000);
+		color: var(--cz-color-text-primary);
 	}
 
-	:host([mini]) .itemRow {
-		border-radius: 12px;
-		border: 1px solid var(--cosmoz-omnitable-border-color, #e1e2e5);
-		margin: 4px 8px;
-		padding-top: 2px;
+	:host([mini]) {
+		--checkbox-offset: calc(var(--cz-spacing) * 2);
 	}
 
-	:host([mini]) .itemRow:not([selected]) {
-		background: var(--cosmoz-omnitable-mini-item-background, #fdfdfd);
+	:host([mini]) .itemRow .expand,
+	:host([mini]) cosmoz-omnitable-item-expand {
+		display: none;
 	}
 
-	:host([mini]) .itemRow:hover {
-		box-shadow: none;
+	:host([mini]) .header > cosmoz-omnitable-header-row {
+		flex: 0;
+	}
+
+	:host([mini]) .groupRow {
+		padding-left: var(--checkbox-offset);
 	}
 
 	:host([mini]) .header {
-		margin: 0 8px;
+		padding-left: var(--checkbox-offset);
+		justify-content: space-between;
+	}
+
+	:host([mini]) .itemRow {
+		border-radius: 12px;
+		box-shadow: inset 0 0 0 2px var(--cz-color-border-tertiary);
+		margin-block: var(--checkbox-offset);
+		margin-inline: var(--checkbox-offset);
+		padding-block: 4px;
+		border: none;
 	}
 
 	:host([mini]) .tableContent {
@@ -516,7 +537,7 @@ export default css `
 	}
 
 	:host([mini]) .tableContent-scroller:hover::-webkit-scrollbar-thumb {
-		background: var(--cosmoz-omnitable-mini-scrollbar-thumb-bg, #aaa);
+		background: var(--cz-color-bg-tertiary);
 	}
 
 	:host([mini]) .tableContent-scroller::-webkit-scrollbar-button:decrement,

package/dist/cosmoz-omnitable-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"cosmoz-omnitable-styles.js","sourceRoot":"","sources":["../src/cosmoz-omnitable-styles.js"],"names":[],"mappings":"AAAA,8BAA8B;AAC9B,OAAO,EAAE,MAAM,IAAI,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAEtD,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuE1B,CAAC;AAEF,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkUf,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+IV,CAAC"}
+{"version":3,"file":"cosmoz-omnitable-styles.js","sourceRoot":"","sources":["../src/cosmoz-omnitable-styles.js"],"names":[],"mappings":"AAAA,8BAA8B;AAC9B,OAAO,EAAE,MAAM,IAAI,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAEtD,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoE1B,CAAC;AAEF,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8Uf,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2JV,CAAC"}

package/dist/lib/settings/style.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"style.css.d.ts","sourceRoot":"","sources":["../../../src/lib/settings/style.css.js"],"names":[],"mappings":";;AAkLA,8BAqDE"}
+{"version":3,"file":"style.css.d.ts","sourceRoot":"","sources":["../../../src/lib/settings/style.css.js"],"names":[],"mappings":";;AAiLA,8BAoDE"}

package/dist/lib/settings/style.css.js

@@ -34,14 +34,13 @@ export default css `
 		scrollbar-width: 2px;
 		scrollbar-gutter: stable;
 		text-transform: uppercase;
-		font-size: 12px;
 		color: var(--cz-color-text-primary);
 	}
 	.contents::-webkit-scrollbar {
-		width: 2px;
+		width: 3px;
 	}
 	.contents::-webkit-scrollbar-thumb {
-		background: rgba(0, 0, 0, 0.5);
+		background: var(--cz-color-bg-brand-solid);
 	}
 	.contents::-webkit-scrollbar-track-piece:start,
 	.contents::-webkit-scrollbar-track-piece:end {
@@ -49,7 +48,7 @@ export default css `
 	}
 
 	.heading {
-		box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.15);
+		box-shadow: inset 0px -1px 0px var(--cz-color-border-primary);
 		font-weight: var(--cz-font-weight-medium);
 		font-size: var(--cz-text-xs);
 		line-height: var(--cz-text-xs-line-height);
@@ -68,8 +67,8 @@ export default css `
 	}
 	cosmoz-collapse[opened] + .heading {
 		box-shadow:
-			inset 0px -1px 0px rgba(0, 0, 0, 0.15),
-			inset 0px 1px 0px rgba(0, 0, 0, 0.15);
+			inset 0px -1px 0px var(--cz-color-border-primary),
+			inset 0px 1px 0px var(--cz-color-border-primary);
 	}
 
 	.list {
@@ -97,10 +96,7 @@ export default css `
 		background: transparent;
 		cursor: move;
 		margin-right: 12px;
-		color: var(
-			--cosmoz-omnitable-settings-pull-color,
-			var(--cz-color-muted, #c4c4c4)
-		);
+		color: var(--cz-color-bg-brand-solid);
 	}
 	.title {
 		flex: auto;
@@ -123,7 +119,7 @@ export default css `
 		display: flex;
 		gap: 8px;
 		padding: 12px 14px;
-		box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.15);
+		box-shadow: inset 0px 1px 0px var(--cz-color-border-primary);
 
 		& cosmoz-button {
 			flex: 1;
@@ -141,8 +137,9 @@ export default css `
 	}
 	.sg {
 		color: inherit;
-		border: 1px solid rgba(0, 0, 0, 0.2);
-		border-radius: 6px;
+		box-shadow: inset 0 0 0 2px var(--cz-color-border-primary);
+		border: none;
+		border-radius: var(--cz-radius-sm);
 		font-size: var(--cz-text-xs);
 		line-height: var(--cz-text-xs-line-height);
 		text-transform: uppercase;
@@ -153,21 +150,23 @@ export default css `
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
+		transition:
+			background 0.3s ease,
+			box-shadow 0.3s ease;
 	}
 	.sg span {
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
 	.sg[data-on] {
-		background: var(
-			--cosmoz-omnitable-checkbox-checked-color,
-			var(--primary-color)
-		);
+		background: var(--cz-color-bg-brand-secondary);
+		box-shadow: none;
 	}
 	.sg svg {
 		margin-left: 4px;
 		flex: none;
 		vertical-align: middle;
+		transition: transform 0.3s ease;
 	}
 
 	.sg:not([data-on='desc']) svg {
@@ -197,6 +196,10 @@ export const dropdown = css `
 		color: inherit;
 		width: 40px;
 		height: 40px;
+		transition: color 0.3s ease;
+	}
+	cosmoz-dropdown::part(button):hover {
+		color: var(--cz-color-text-primary);
 	}
 	cosmoz-dropdown::part(anchor) {
 		display: inline-block;
@@ -204,22 +207,17 @@ export const dropdown = css `
 	.badge {
 		position: absolute;
 		top: 1px;
-		right: -4px;
-		background-color: var(
-			--cosmoz-omnitable-checkbox-checked-color,
-			var(--primary-color)
-		);
+		right: 1px;
+		background-color: var(--cz-color-bg-brand-solid);
 		width: 8px;
 		height: 8px;
 		border-radius: 100%;
 	}
 	.headerDots {
 		align-items: center;
-		color: var(--cosmoz-input-color);
+		color: var(--cz-color-text-primary);
 		display: flex;
 		font-size: 20px;
-		height: 42px;
-		justify-content: center;
 		margin-left: 12px;
 		min-width: 30px;
 		transform: rotate(90deg);

package/dist/lib/settings/style.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.css.js","sourceRoot":"","sources":["../../../src/lib/settings/style.css.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,GAAG,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AAEzD,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkHf,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2DV,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqD1B,CAAC"}
+{"version":3,"file":"style.css.js","sourceRoot":"","sources":["../../../src/lib/settings/style.css.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,GAAG,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AAEzD,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8Gf,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8DV,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoD1B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neovici/cosmoz-omnitable",
-  "version": "18.7.0-beta.1",
+  "version": "18.7.0-beta.2",
   "description": "[![Build Status](https://travis-ci.org/Neovici/cosmoz-omnitable.svg?branch=master)](https://travis-ci.org/Neovici/cosmoz-omnitable)",
   "keywords": [
     "web-components"