tableberg / src / components / cell-inserter / style.scss

style.scss in Tableberg – Simple Gutenberg Table Block 1.2.0, at src/components/cell-inserter/style.scss

188 lines 4.0 KB

Raw Download Zip

1	$grid-unit: 8px;
2	$grid-unit-05: 4px;
3	$grid-unit-10: 8px;
4	$grid-unit-15: 12px;
5	$grid-unit-20: 16px;
6	$radius-small: 2px;
7	$default-font-size: 13px;
8	$gray-900: #1e1e1e;
9	$cell-inserter-width: 350px;
10
11	.tableberg-cell-inserter {
12	position: absolute;
13	bottom: $grid-unit-05;
14	right: $grid-unit-05;
15	z-index: 10;
16	}
17
18	.tableberg-cell-inserter__toggle.components-button {
19	width: 24px;
20	height: 24px;
21	min-width: 24px;
22	padding: 0;
23	display: flex;
24	align-items: center;
25	justify-content: center;
26	background: #fff;
27	border-radius: $radius-small;
28	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
29	color: $gray-900;
30
31	&:hover {
32	color: var(--wp-admin-theme-color);
33	box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
34	}
35
36	&:focus {
37	box-shadow: 0 0 0 var(--wp-admin-border-width-focus)
38	var(--wp-admin-theme-color);
39	outline: none;
40	}
41
42	svg {
43	width: 20px;
44	height: 20px;
45	}
46	}
47
48	.tableberg-cell-inserter__popover .components-popover__content {
49	padding: 0;
50	}
51
52	.tableberg-cell-inserter__content {
53	width: $cell-inserter-width;
54	}
55
56	.tableberg-cell-inserter__search {
57	padding: $grid-unit-20 $grid-unit-20 0 $grid-unit-20;
58	}
59
60	.tableberg-cell-inserter__list {
61	overflow: hidden;
62	display: flex;
63	flex-wrap: wrap;
64	padding: $grid-unit-20;
65	}
66
67	.tableberg-cell-inserter__list-item {
68	display: block;
69	width: 33.33%;
70	padding: 0;
71	margin: 0;
72	}
73
74	.tableberg-cell-inserter__item.components-button {
75	display: flex;
76	flex-direction: column;
77	width: 100%;
78	font-size: $default-font-size;
79	color: $gray-900;
80	padding: $grid-unit-10;
81	align-items: stretch;
82	justify-content: center;
83	cursor: pointer;
84	background: transparent;
85	word-break: break-word;
86	position: relative;
87	height: auto;
88	border-radius: 0;
89
90	@media not (prefers-reduced-motion) {
91	transition: all 0.05s ease-in-out;
92	}
93
94	&:disabled,
95	&[aria-disabled="true"]="true""] {
96	opacity: 0.6;
97	cursor: default;
98	}
99
100	&:not(:disabled, [aria-disabled="true"]) {
101	&:hover {
102	.tableberg-cell-inserter__item-title {
103	color: var(--wp-admin-theme-color) !important;
104	filter: brightness(0.95);
105	}
106
107	svg {
108	color: var(--wp-admin-theme-color) !important;
109	}
110
111	&::after {
112	content: "";
113	position: absolute;
114	top: 0;
115	bottom: 0;
116	left: 0;
117	right: 0;
118	border-radius: $radius-small;
119	opacity: 0.04;
120	background: var(--wp-admin-theme-color);
121	pointer-events: none;
122	}
123	}
124	}
125
126	&:not(:disabled) {
127	&:focus {
128	box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus)
129	var(--wp-admin-theme-color);
130	outline: none;
131	}
132	}
133	}
134
135	.tableberg-cell-inserter__item-icon {
136	padding: 12px 20px;
137	color: $gray-900;
138	display: flex;
139	align-items: center;
140	justify-content: center;
141
142	@media not (prefers-reduced-motion) {
143	transition: all 0.05s ease-in-out;
144	}
145
146	svg {
147	min-width: 20px;
148	min-height: 20px;
149	max-width: 24px;
150	max-height: 24px;
151
152	@media not (prefers-reduced-motion) {
153	transition: all 0.15s ease-out;
154	}
155	}
156	}
157
158	.tableberg-cell-inserter__item-title {
159	padding: 4px 2px 8px;
160	font-size: 12px;
161	text-align: center;
162	hyphens: auto;
163	}
164
165	.tableberg-cell-inserter__browse-all.components-button {
166	display: block;
167	width: 100%;
168	min-height: 36px;
169	text-align: center;
170	background: $gray-900;
171	color: #fff;
172	border-radius: 0;
173
174	&:hover {
175	color: #fff;
176	}
177
178	&:active {
179	color: #a7aaad;
180	}
181
182	&.components-button:focus:not(:disabled) {
183	box-shadow: none;
184	background: var(--wp-admin-theme-color);
185	border-color: var(--wp-admin-theme-color);
186	}
187	}
188