@gct-paas/design 0.1.5-dev.6 → 0.1.5-dev.8

package/es/components/material/material-module-drag-container/material-module-drag-container.css

@@ -0,0 +1,69 @@
+@charset "UTF-8";
+/* stylelint-disable scss/no-global-function-names */
+/* bem('block', 'element', 'modifier') => 'ibiz-block__element--modifier' */
+/**
+ * 定义 Block 块
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include b('button') {
+ *     padding: 10px;
+ *   }
+ */
+/**
+ * 定义 Element 元素
+ * @param {String|List} $element - Element 元素名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include e('text') {
+ *       color: #000;
+ *     }
+ *   }
+ *   // 或传入多个元素
+ *   @include b('button') {
+ *     @include e(('text', 'icon')) {
+ *       margin: 5px;
+ *     }
+ *   }
+ */
+/**
+ * 定义 Modifier 修饰符
+ * @param {String|List} $modifier - Modifier 修饰符名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include m('primary') {
+ *       background: blue;
+ *     }
+ *   }
+ *   // 或传入多个修饰符
+ *   @include b('button') {
+ *     @include m(('primary', 'large')) {
+ *       background: blue;
+ *       font-size: 16px;
+ *     }
+ *   }
+ */
+/**
+ * 定义状态选择器
+ * @param {String} $state - 状态名称
+ * @example
+ *   @include b('button') {
+ *     @include when('disabled') {
+ *       opacity: 0.5;
+ *     }
+ *   }
+ */
+/**
+ * 深色主题样式
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include dark('button') {
+ *     background: #333;
+ *     color: #fff;
+ *   }
+ */
+/* stylelint-disable scss/no-global-function-names */
+.gct-material-module-drag-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}

package/es/components/material/material-module-drag-container/material-module-drag-container.d.ts

@@ -0,0 +1,56 @@
+import { IMaterialData } from '../../../interface';
+export declare const MaterialModuleDragContainer: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    items: {
+        type: {
+            (arrayLength: number): IMaterialData[];
+            (...items: IMaterialData[]): IMaterialData[];
+            new (arrayLength: number): IMaterialData[];
+            new (...items: IMaterialData[]): IMaterialData[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            from<T>(iterable: Iterable<T> | ArrayLike<T>): T[];
+            from<T, U>(iterable: Iterable<T> | ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            of<T>(...items: T[]): T[];
+            readonly [Symbol.species]: ArrayConstructor;
+            fromAsync<T>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T | PromiseLike<T>> | ArrayLike<T | PromiseLike<T>>): Promise<T[]>;
+            fromAsync<T, U>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T> | ArrayLike<T>, mapFn: (value: Awaited<T>, index: number) => U, thisArg?: any): Promise<Awaited<U>[]>;
+        };
+        default: () => never[];
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    items: {
+        type: {
+            (arrayLength: number): IMaterialData[];
+            (...items: IMaterialData[]): IMaterialData[];
+            new (arrayLength: number): IMaterialData[];
+            new (...items: IMaterialData[]): IMaterialData[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            from<T>(iterable: Iterable<T> | ArrayLike<T>): T[];
+            from<T, U>(iterable: Iterable<T> | ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            of<T>(...items: T[]): T[];
+            readonly [Symbol.species]: ArrayConstructor;
+            fromAsync<T>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T | PromiseLike<T>> | ArrayLike<T | PromiseLike<T>>): Promise<T[]>;
+            fromAsync<T, U>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T> | ArrayLike<T>, mapFn: (value: Awaited<T>, index: number) => U, thisArg?: any): Promise<Awaited<U>[]>;
+        };
+        default: () => never[];
+    };
+}>> & Readonly<{}>, {
+    items: IMaterialData[];
+}, {}, {
+    MaterialModuleDragItem: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+        data: {
+            type: import('vue').PropType<IMaterialData>;
+            required: true;
+        };
+    }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+        data: {
+            type: import('vue').PropType<IMaterialData>;
+            required: true;
+        };
+    }>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/components/material/material-module-drag-container/material-module-drag-container.mjs

@@ -0,0 +1,21 @@
+import { MaterialModuleDragItem } from "../material-module-drag-item/material-module-drag-item.mjs";
+import './material-module-drag-container.css';/* empty css                                     */
+import { useNamespace } from "@gct-paas/core";
+import { createVNode, defineComponent } from "vue";
+//#region src/components/material/material-module-drag-container/material-module-drag-container.tsx
+var MaterialModuleDragContainer = /* @__PURE__ */ defineComponent({
+	name: "MaterialModuleDragContainer",
+	components: { MaterialModuleDragItem },
+	props: { items: {
+		type: Array,
+		default: () => []
+	} },
+	setup(props) {
+		const ns = useNamespace("material-module-drag-container");
+		return () => {
+			return createVNode("div", { "class": ns.b() }, [props.items.map((item) => createVNode(MaterialModuleDragItem, { "data": item }, null))]);
+		};
+	}
+});
+//#endregion
+export { MaterialModuleDragContainer };

package/es/components/material/material-module-drag-item/material-module-drag-item.css

@@ -0,0 +1,83 @@
+@charset "UTF-8";
+/* stylelint-disable scss/no-global-function-names */
+/* bem('block', 'element', 'modifier') => 'ibiz-block__element--modifier' */
+/**
+ * 定义 Block 块
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include b('button') {
+ *     padding: 10px;
+ *   }
+ */
+/**
+ * 定义 Element 元素
+ * @param {String|List} $element - Element 元素名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include e('text') {
+ *       color: #000;
+ *     }
+ *   }
+ *   // 或传入多个元素
+ *   @include b('button') {
+ *     @include e(('text', 'icon')) {
+ *       margin: 5px;
+ *     }
+ *   }
+ */
+/**
+ * 定义 Modifier 修饰符
+ * @param {String|List} $modifier - Modifier 修饰符名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include m('primary') {
+ *       background: blue;
+ *     }
+ *   }
+ *   // 或传入多个修饰符
+ *   @include b('button') {
+ *     @include m(('primary', 'large')) {
+ *       background: blue;
+ *       font-size: 16px;
+ *     }
+ *   }
+ */
+/**
+ * 定义状态选择器
+ * @param {String} $state - 状态名称
+ * @example
+ *   @include b('button') {
+ *     @include when('disabled') {
+ *       opacity: 0.5;
+ *     }
+ *   }
+ */
+/**
+ * 深色主题样式
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include dark('button') {
+ *     background: #333;
+ *     color: #fff;
+ *   }
+ */
+/* stylelint-disable scss/no-global-function-names */
+.gct-material-module-drag-item {
+  display: flex;
+  align-items: center;
+  width: 108px;
+  height: 34px;
+  padding: 8px;
+  cursor: pointer;
+  background-color: rgba(255, 255, 255, 0.8);
+  border: 1px solid #E8EBF0;
+  border-radius: 4px;
+}
+.gct-material-module-drag-item__icon {
+  margin-right: 8px;
+  color: #797A7D;
+}
+
+.gct-material-module-drag-item__label {
+  font-size: 12px;
+}

package/es/components/material/material-module-drag-item/material-module-drag-item.d.ts

@@ -0,0 +1,13 @@
+import { PropType } from 'vue';
+import { IMaterialData } from '../../../interface';
+export declare const MaterialModuleDragItem: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    data: {
+        type: PropType<IMaterialData>;
+        required: true;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    data: {
+        type: PropType<IMaterialData>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/components/material/material-module-drag-item/material-module-drag-item.mjs

@@ -0,0 +1,66 @@
+import { DesignViewPrefix } from "../../../constant/index.mjs";
+import { NodeRegister } from "../../../register/node/node.register.mjs";
+import "../../../register/index.mjs";
+import { useDesignViewController } from "../../../hooks/use-design-view-controller/use-design-view-controller.mjs";
+import "../../../hooks/index.mjs";
+import './material-module-drag-item.css';/* empty css                                */
+import { useNamespace } from "@gct-paas/core";
+import { createVNode, defineComponent, onMounted } from "vue";
+import { useDrag } from "vue3-dnd";
+import { getEmptyImage } from "react-dnd-html5-backend";
+//#region src/components/material/material-module-drag-item/material-module-drag-item.tsx
+var MaterialModuleDragItem = /* @__PURE__ */ defineComponent({
+	name: "MaterialModuleDragItem",
+	props: { data: {
+		type: Object,
+		required: true
+	} },
+	setup(props) {
+		const ns = useNamespace("material-module-drag-item");
+		const c = useDesignViewController();
+		const [collect, drag, preview] = useDrag({
+			type: DesignViewPrefix.CUSTOM_HOME,
+			item: () => {
+				const provider = NodeRegister.get(props.data.type, c.store.prefix);
+				if (!provider) throw new Error(`未找到素材 ${props.data.type} 适配器`);
+				c.store.setDragging(true);
+				const data = provider.create();
+				return {
+					id: data.id,
+					data,
+					group: "",
+					index: -1,
+					mode: "create",
+					types: [data.type]
+				};
+			},
+			collect: (monitor) => {
+				return {
+					canDrag: monitor.canDrag(),
+					isDragging: monitor.isDragging()
+				};
+			},
+			end: async (_, monitor) => {
+				c.store.setDragging(false);
+				const r = monitor.getDropResult();
+				if (r && r.asyncDrop) {
+					const result = await r.asyncDrop;
+					if (result && result.success) {}
+				}
+				c.dropEnd();
+			},
+			options: { dropEffect: "copy" }
+		});
+		onMounted(() => {
+			if (preview) preview(getEmptyImage(), { captureDraggingState: true });
+		});
+		return () => {
+			return createVNode("div", {
+				"ref": drag,
+				"class": [ns.b(), ns.is("dragging", collect.value.isDragging)]
+			}, [createVNode("div", { "class": ns.e("icon") }, [createVNode("i", { "class": ["iconfont", props.data.icon] }, null)]), createVNode("div", { "class": ns.e("label") }, [props.data.label])]);
+		};
+	}
+});
+//#endregion
+export { MaterialModuleDragItem };

package/es/components/material/material-outline-tree/material-outline-tree.css

@@ -0,0 +1,81 @@
+@charset "UTF-8";
+/* stylelint-disable scss/no-global-function-names */
+/* bem('block', 'element', 'modifier') => 'ibiz-block__element--modifier' */
+/**
+ * 定义 Block 块
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include b('button') {
+ *     padding: 10px;
+ *   }
+ */
+/**
+ * 定义 Element 元素
+ * @param {String|List} $element - Element 元素名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include e('text') {
+ *       color: #000;
+ *     }
+ *   }
+ *   // 或传入多个元素
+ *   @include b('button') {
+ *     @include e(('text', 'icon')) {
+ *       margin: 5px;
+ *     }
+ *   }
+ */
+/**
+ * 定义 Modifier 修饰符
+ * @param {String|List} $modifier - Modifier 修饰符名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include m('primary') {
+ *       background: blue;
+ *     }
+ *   }
+ *   // 或传入多个修饰符
+ *   @include b('button') {
+ *     @include m(('primary', 'large')) {
+ *       background: blue;
+ *       font-size: 16px;
+ *     }
+ *   }
+ */
+/**
+ * 定义状态选择器
+ * @param {String} $state - 状态名称
+ * @example
+ *   @include b('button') {
+ *     @include when('disabled') {
+ *       opacity: 0.5;
+ *     }
+ *   }
+ */
+/**
+ * 深色主题样式
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include dark('button') {
+ *     background: #333;
+ *     color: #fff;
+ *   }
+ */
+/* stylelint-disable scss/no-global-function-names */
+.gct-material-outline-tree__tree .ant-tree-treenode {
+  color: #666;
+}
+.gct-material-outline-tree__tree .ant-tree-treenode .ant-tree-switcher {
+  width: 16px;
+}
+.gct-material-outline-tree__tree .ant-tree-treenode .ant-tree-switcher .ant-tree-switcher-icon {
+  font-size: 14px;
+  vertical-align: middle;
+}
+.gct-material-outline-tree__tree .ant-tree-treenode .ant-tree-node-content-wrapper {
+  padding-left: 0;
+}
+.gct-material-outline-tree__tree .ant-tree-treenode .ant-tree-node-selected {
+  color: var(--ant-primary-color);
+  background-color: transparent;
+}

package/es/components/material/material-outline-tree/material-outline-tree.d.ts

@@ -0,0 +1,13 @@
+interface TreeNode {
+    key: string;
+    title: string;
+    icon: unknown;
+    children: TreeNode[];
+}
+export declare const MaterialOutlineTree: import('vue').DefineComponent<{}, {
+    ns: import('@gct-paas/core').Namespace;
+    treeRef: import('vue').Ref<any, any>;
+    selectedKeys: import('vue').Ref<string[], string[]>;
+    treeData: import('vue').ComputedRef<TreeNode[]>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export {};

package/es/components/material/material-outline-tree/material-outline-tree.mjs

@@ -0,0 +1,67 @@
+import { MaterialRegister } from "../../../register/material/material.register.mjs";
+import "../../../register/index.mjs";
+import { useDesignViewController } from "../../../hooks/use-design-view-controller/use-design-view-controller.mjs";
+import "../../../hooks/index.mjs";
+import './material-outline-tree.css';/* empty css                            */
+import { useNamespace } from "@gct-paas/core";
+import { computed, createVNode, defineComponent, ref, resolveComponent, watch } from "vue";
+//#region src/components/material/material-outline-tree/material-outline-tree.tsx
+var MaterialOutlineTree = /* @__PURE__ */ defineComponent({
+	name: "MaterialOutlineTree",
+	setup() {
+		const ns = useNamespace("material-outline-tree");
+		const treeRef = ref();
+		const selectedKeys = ref([]);
+		const c = useDesignViewController();
+		watch(() => c.store.selected, () => {
+			if (c.store.selected) selectedKeys.value = [c.store.selected.id];
+			else selectedKeys.value = [];
+		});
+		watch(selectedKeys, () => {
+			const val = selectedKeys.value[0];
+			if (val) {
+				const node = c.store.getNode(val);
+				if (node && node.id !== c.store.selected?.id) c.store.setActive(node);
+			} else c.store.setActive(null);
+		});
+		const calcDeepTree = (items) => {
+			const arr = [];
+			items.forEach((_) => {
+				const p = MaterialRegister.getMaterial(_.type, c.store.prefix);
+				const node = {
+					key: _.id,
+					title: _.label,
+					icon: p && p.icon ? createVNode("i", { "class": `iconfont ${p.icon}` }, null) : "",
+					children: []
+				};
+				const children = c.store.getChildren(_.id);
+				if (children && children.length > 0) node.children = calcDeepTree(children);
+				arr.push(node);
+			});
+			return arr;
+		};
+		return {
+			ns,
+			treeRef,
+			selectedKeys,
+			treeData: computed(() => {
+				return calcDeepTree(c.store.getChildren());
+			})
+		};
+	},
+	render() {
+		return createVNode("div", { "class": this.ns.b() }, [createVNode(resolveComponent("a-tree"), {
+			"ref": "treeRef",
+			"class": this.ns.e("tree"),
+			"selectedKeys": this.selectedKeys,
+			"onUpdate:selectedKeys": ($event) => this.selectedKeys = $event,
+			"treeData": this.treeData,
+			"blockNode": true,
+			"show-icon": true,
+			"autoExpandParent": true,
+			"default-expand-all": true
+		}, null)]);
+	}
+});
+//#endregion
+export { MaterialOutlineTree };

package/es/components/material/material-tab-pane/material-tab-pane.css

@@ -0,0 +1,68 @@
+@charset "UTF-8";
+/* stylelint-disable scss/no-global-function-names */
+/* bem('block', 'element', 'modifier') => 'ibiz-block__element--modifier' */
+/**
+ * 定义 Block 块
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include b('button') {
+ *     padding: 10px;
+ *   }
+ */
+/**
+ * 定义 Element 元素
+ * @param {String|List} $element - Element 元素名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include e('text') {
+ *       color: #000;
+ *     }
+ *   }
+ *   // 或传入多个元素
+ *   @include b('button') {
+ *     @include e(('text', 'icon')) {
+ *       margin: 5px;
+ *     }
+ *   }
+ */
+/**
+ * 定义 Modifier 修饰符
+ * @param {String|List} $modifier - Modifier 修饰符名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include m('primary') {
+ *       background: blue;
+ *     }
+ *   }
+ *   // 或传入多个修饰符
+ *   @include b('button') {
+ *     @include m(('primary', 'large')) {
+ *       background: blue;
+ *       font-size: 16px;
+ *     }
+ *   }
+ */
+/**
+ * 定义状态选择器
+ * @param {String} $state - 状态名称
+ * @example
+ *   @include b('button') {
+ *     @include when('disabled') {
+ *       opacity: 0.5;
+ *     }
+ *   }
+ */
+/**
+ * 深色主题样式
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include dark('button') {
+ *     background: #333;
+ *     color: #fff;
+ *   }
+ */
+/* stylelint-disable scss/no-global-function-names */
+.gct-material-tab-pane {
+  height: 100%;
+  overflow: hidden auto;
+}

package/es/components/material/material-tab-pane/material-tab-pane.d.ts

@@ -0,0 +1,13 @@
+export declare const MaterialTabPane: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    tabTag: {
+        type: StringConstructor;
+        required: true;
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    tabTag: {
+        type: StringConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/components/material/material-tab-pane/material-tab-pane.mjs

@@ -0,0 +1,19 @@
+import './material-tab-pane.css';/* empty css                        */
+import { useNamespace } from "@gct-paas/core";
+import { createVNode, defineComponent } from "vue";
+//#region src/components/material/material-tab-pane/material-tab-pane.tsx
+var MaterialTabPane = /* @__PURE__ */ defineComponent({
+	name: "MaterialTabPane",
+	props: { tabTag: {
+		type: String,
+		required: true
+	} },
+	setup() {
+		return { ns: useNamespace("material-tab-pane") };
+	},
+	render() {
+		return createVNode("div", { "class": this.ns.b() }, [this.$slots.default?.()]);
+	}
+});
+//#endregion
+export { MaterialTabPane };

package/es/components/material/material-tabs/material-tabs.css

@@ -0,0 +1,105 @@
+@charset "UTF-8";
+/* stylelint-disable scss/no-global-function-names */
+/* bem('block', 'element', 'modifier') => 'ibiz-block__element--modifier' */
+/**
+ * 定义 Block 块
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include b('button') {
+ *     padding: 10px;
+ *   }
+ */
+/**
+ * 定义 Element 元素
+ * @param {String|List} $element - Element 元素名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include e('text') {
+ *       color: #000;
+ *     }
+ *   }
+ *   // 或传入多个元素
+ *   @include b('button') {
+ *     @include e(('text', 'icon')) {
+ *       margin: 5px;
+ *     }
+ *   }
+ */
+/**
+ * 定义 Modifier 修饰符
+ * @param {String|List} $modifier - Modifier 修饰符名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include m('primary') {
+ *       background: blue;
+ *     }
+ *   }
+ *   // 或传入多个修饰符
+ *   @include b('button') {
+ *     @include m(('primary', 'large')) {
+ *       background: blue;
+ *       font-size: 16px;
+ *     }
+ *   }
+ */
+/**
+ * 定义状态选择器
+ * @param {String} $state - 状态名称
+ * @example
+ *   @include b('button') {
+ *     @include when('disabled') {
+ *       opacity: 0.5;
+ *     }
+ *   }
+ */
+/**
+ * 深色主题样式
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include dark('button') {
+ *     background: #333;
+ *     color: #fff;
+ *   }
+ */
+/* stylelint-disable scss/no-global-function-names */
+.gct-material-tabs {
+  display: flex;
+  height: 100%;
+}
+.gct-material-tabs__item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 74px;
+  color: #5D6474;
+  cursor: pointer;
+}
+.gct-material-tabs__item.is-active {
+  color: #000;
+  background-color: #cdd1d6;
+}
+
+.gct-material-tabs__item-icon {
+  height: 28px;
+}
+.gct-material-tabs__item-icon .iconfont {
+  font-size: 22px;
+}
+
+.gct-material-tabs__item-label {
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.gct-material-tabs-left {
+  flex-shrink: 0;
+  width: 48px;
+  background-color: #E6E9EF;
+  border: 2px solid #E0E3EA;
+  border-radius: 0;
+}
+
+.gct-material-tabs-right {
+  flex-grow: 1;
+}