ablocks / assets / build / blocks / table / style.css

style.css in aBlocks – Gutenberg Blocks, User Dashboard Builder, Popup Builder, Form Builder & Animation Builder 2.9.1, at assets/build/blocks/table/style.css

239 lines 5.8 KB

Raw Download Zip

1	/* create table */
2	.ablocks-block--table .ablocks-table-input-form {
3	padding: 20px;
4	border: 1px solid #dcdcdc;
5	border-radius: 8px;
6	}
7
8	.ablocks-table-input-form .ablocks-table-input-form--iconText {
9	display: flex;
10	gap: 8;
11	}
12	.ablocks-table-input-form .ablocks-table-input-form--text {
13	overflow: hidden;
14	color: #0F0E16;
15	text-align: center;
16	text-overflow: ellipsis;
17	font-size: 24px;
18	font-style: normal;
19	font-weight: 500;
20	line-height: 150%;
21	margin: -6px;
22	margin-left: 8px
23
24
25	}
26	.ablocks-table-input-form .ablocks-table-input-form--title {
27	color: #595959;
28	font-size: 14px;
29	font-style: normal;
30	font-weight: 400;
31	line-height: 150%;
32	padding-bottom: 16px;
33	}
34
35	.ablocks-table-input-from--input-container {
36	display: flex;
37	}
38
39	.ablocks-table-input-from--input-container div {
40	display: flex;
41	flex-direction: column;
42	}
43
44	.ablocks-table-input-from--input-container .ablocks-table-input label {
45	color: #454D54;
46	font-size: 12px;
47	font-style: normal;
48	font-weight: 400;
49	line-height: 150%;
50	margin-bottom: 6px;
51	}
52
53	.ablocks-table-input-from--input-container .ablocks-table-input input {
54	display: flex;
55	margin-right: 8px;
56	height: 36px;
57	padding: 0px 10px;
58	align-items: center;
59	align-self: stretch;
60	border-radius: 4px;
61	border: 1px solid #DDDDDF;
62	}
63
64	.ablocks-table-input-from--check-box {
65	display: flex;
66	gap: 7px;
67	margin-top: 10px;
68	}
69	.ablocks-table-input-from--check-box div{
70	display: flex;
71	align-items: center;
72	}
73
74	.ablocks-table-input-from--check-box label {
75	color: #454D54;
76	font-size: 14px;
77	font-style: normal;
78	font-weight: 400;
79	line-height: 150%;
80	margin-right: 8px;
81	margin-top: -5px;
82
83
84	}
85
86	.ablocks-table-input-from--check-box input {
87	margin-right: 8px;
88	width: 20px;
89	height: 20px;
90	border: 2px solid #A7AAAD;
91	border-radius: 3px;
92	-webkit-appearance: none;
93	appearance: none;
94	cursor: pointer;
95	position: relative;
96	border-radius: 0px;
97	}
98
99	.ablocks-table-input-from--check-box input:checked {
100	background-color: #000;
101	border-radius: 0px;
102	border: none;
103	outline: none;
104	}
105
106	.ablocks-table-input-from--check-box input:checked::before {
107	content: '';
108	position: absolute;
109	top: 7px;
110	left: 11px;
111	width: 4px;
112	height: 8px;
113	border: solid white;
114	border-width: 0 2px 2px 0;
115	transform: rotate(45deg);
116	}
117	.ablocks-table-input-form-button {
118	background-color: #000;
119	color: #fff;
120	border: none;
121	padding: 10px 20px;
122	font-size: 0.9rem;
123	border-radius: 4px;
124	margin-top: 20px;
125	cursor: pointer;
126	transition: background-color 0.3s;
127	}
128
129	.ablocks-table-input-form-button:hover {
130	background-color: #333;
131	}
132	/* -------- */
133	.ablocks-block--table .ablocks-block-container table th , .ablocks-block--table .ablocks-block-container table td {
134	padding: 8px;
135	}
136	.ablocks-block--table .ablocks-block-container table th p , .ablocks-block--table .ablocks-block-container table td p{
137	margin: 0;
138	}
139
140	.ablocks-block--table>.ablocks-block-container {
141	overflow-y: auto;
142	}
143	.ablocks-block--table table {
144	width: 100%;
145	margin: 0;
146	}
147	.ablocks-block--table table,
148	.ablocks-block--table-header .ablocks-block--table-cell,
149	.ablocks-block--table .ablocks-block--table-cell {
150	border: 1px solid #242222;
151	}
152
153	.ablocks-block--table .ablocks-block--table-header .ablocks-block--table-cel,
154	.ablocks-block--table .ablocks-block--table-cell {
155	padding: 8px;
156	}
157	.ablocks-block--table-row .ablocks-block--table-cell {
158	min-height: 40px;
159	}
160	.ablocks-block--table .ablocks-block--table-header{
161	background-color: #565c56;
162	}
163	.ablocks-block--table .ablocks-block--table-footer{
164	background-color: #565c56;
165	}
166	.ablocks-block--table.ablocks-block--table-row:hover {
167	background-color: #f1f1f1;
168	}
169	.ablocks-block--table-cell .block-list-appender.wp-block {
170	width: 100%;
171	position: relative;
172	}
173	.ablocks-block--table-cell.ablocks-table-td:hover .ablocks-table-icon-td {
174	display: flex;
175	}
176
177	.ablocks-block--table .ablocks-table-cell {
178	padding: 0px;
179	}
180
181	.ablocks-block--table .ablocks-block--table-header .ablocks-block--table-cel,
182	.ablocks-block--table .ablocks-block--table-cell {
183	padding: 0px;
184	}
185	.ablocks-block--table .ablocks-block--table-header .block-editor-block-list__block , .ablocks-block--table .ablocks-block--table-body .block-editor-block-list__block ,.ablocks-block--table .ablocks-block--table-footer .block-editor-block-list__block {
186	font-size: 15px;
187	}
188
189	/* ----icon ---- */
190	.ablocks-block--table-cell .ablocks-table-icon-td {
191	display: none;
192	position: absolute;
193	top: 0;
194	left: 0;
195	z-index: 1;
196	cursor: pointer;
197	}
198	.ablocks-block--table-cell .ablocks-icon{
199	background: black;
200	border: none;
201
202	}
203	.ablocks-block--table-cell .ablocks-icon--delete:before , .ablocks-block--table-cell .ablocks-icon--edit:before {
204	color: white;
205	height: 16px;
206	margin-left: -5px;
207	width: 13px
208	}
209	.ablocks-block--table-cell .ablocks-icon{
210	border-radius: 0px 0px 8px 0px;
211
212	}
213	/* ---toolbar style--- */
214	.ablocks-table-dropdown-toolbar {
215	display: flex;
216	align-items: center;
217	}
218	.ablocks-table-toolbar-cell-delete{
219	margin-top: 5px;
220	}
221	/* ------------------------ */
222	.ablocks-table-dropdown-toolbar-menu div{
223	width: 136px;
224	}
225	/* ----hover style cell ---- */
226	.ablocks-block--table .ablocks-block--table-cell .block-editor-block-list__block[data-empty=true] [data-rich-text-placeholder] {
227	opacity: 0;
228	border: 1px solid transparent;
229	padding: 4px;
230	}
231	.ablocks-block--table .ablocks-block--table-cell .block-editor-block-list__block[data-empty=true]:hover [data-rich-text-placeholder] {
232	opacity: 1;
233	border: 1px solid gainsboro;
234	padding: 4px;
235	}
236	.ablocks-block--table .ablocks-block--table-cell .block-list-appender.wp-block {
237	width: 100%;
238	position: absolute;
239	}