← All changes | libraries/cmb2-field-tooltip/tooltip.css +151 -0 7.8.8 → 8.0.5 View file →

		@@ -1,0 +1,151 @@
	1	+.cmb-tooltip {
	2	+ position: relative;
	3	+ display: inline-block;
	4	+ vertical-align: text-top;
	5	+}
	6	+
	7	+.cmb-th .cmb-tooltip,
	8	+.cmb-td .cmb-tooltip {
	9	+ float: right;
	10	+}
	11	+
	12	+.cmb-th .cmb-tooltip:not(.cmb-tooltip-no-opacity) .dashicons,
	13	+.cmb-td .cmb-tooltip:not(.cmb-tooltip-no-opacity) .dashicons {
	14	+ opacity: 0.3;
	15	+}
	16	+
	17	+.cmb-tooltip .dashicons-cmb-tooltip:before {
	18	+ display: inline-block;
	19	+ font-family: sans-serif;
	20	+ content: "?";
	21	+ font-weight: 999;
	22	+ font-size: 14px;
	23	+ width: 14px;
	24	+ border: 2px solid #222;
	25	+ border-radius: 100%;
	26	+ padding: 1px;
	27	+ vertical-align: text-top;
	28	+}
	29	+
	30	+.cmb-tooltip .cmb-tooltip-desc {
	31	+ opacity: 0;
	32	+ transition: opacity 0.3s;
	33	+ transform: translateX(9999px);
	34	+ position: fixed;
	35	+
	36	+ width: 250px;
	37	+
	38	+ z-index: 9999;
	39	+ padding: 10px !important;
	40	+ font-style: normal !important;
	41	+ font-weight: 400;
	42	+ font-size: 13px;
	43	+ border-radius: 4px;
	44	+ box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
	45	+ background: #2c3338;
	46	+ color: #ccc !important;
	47	+}
	48	+
	49	+.cmb-tooltip:hover .cmb-tooltip-desc {
	50	+ opacity: 100%;
	51	+ position: absolute;
	52	+ transform: translateX(0px);
	53	+}
	54	+
	55	+.cmb-tooltip-desc:not(.cmb-tooltip-top):before,
	56	+.cmb-tooltip-desc.cmb-tooltip-top:after {
	57	+ content: '';
	58	+ display: block;
	59	+ width: 0;
	60	+ height: 0;
	61	+ position: absolute;
	62	+}
	63	+
	64	+.cmb-tooltip-desc.cmb-tooltip-top {
	65	+ bottom: 150%;
	66	+ left: 50%;
	67	+ transform: translateX(-50%) !important;
	68	+}
	69	+
	70	+.cmb-tooltip-desc.cmb-tooltip-top:after {
	71	+ border-top: 8px solid #2c3338;
	72	+ border-right: 8px solid transparent;
	73	+ border-left: 8px solid transparent;
	74	+ left: calc(50% - 8px);
	75	+ bottom: -8px;
	76	+}
	77	+
	78	+/* Block Editor */
	79	+.editor-sidebar .cmb-tooltip-desc.cmb-tooltip-top,
	80	+.editor-sidebar .cmb-tooltip-desc.cmb-tooltip-bottom,
	81	+.columns-2 #side-sortables .cmb-tooltip-desc.cmb-tooltip-top,
	82	+.columns-2 #side-sortables .cmb-tooltip-desc.cmb-tooltip-bottom {
	83	+ left: auto;
	84	+ margin-left: 0;
	85	+ right: -10px;
	86	+ max-width: 220px;
	87	+ transform: translateX(0px) !important;
	88	+}
	89	+
	90	+.editor-sidebar .cmb-tooltip-desc.cmb-tooltip-top:after,
	91	+.editor-sidebar .cmb-tooltip-desc.cmb-tooltip-bottom:before,
	92	+.columns-2 #side-sortables .cmb-tooltip-desc.cmb-tooltip-top:after,
	93	+.columns-2 #side-sortables .cmb-tooltip-desc.cmb-tooltip-bottom:before {
	94	+ left: auto;
	95	+ right: 13px;
	96	+}
	97	+
	98	+.cmb-tooltip-desc.cmb-tooltip-bottom {
	99	+ top: 150%;
	100	+ left: 50%;
	101	+ transform: translateX(-50%) !important;
	102	+}
	103	+
	104	+.cmb-tooltip-desc.cmb-tooltip-bottom:before {
	105	+ border-bottom: 8px solid #2c3338;
	106	+ border-right: 8px solid transparent;
	107	+ border-left: 8px solid transparent;
	108	+ left: calc(50% - 8px);
	109	+ top: -8px;
	110	+}
	111	+
	112	+.cmb-tooltip-desc.cmb-tooltip-left {
	113	+ top: -12px;
	114	+ right: 150%;
	115	+}
	116	+
	117	+.cmb-tooltip-desc.cmb-tooltip-left:before {
	118	+ border-bottom: 8px solid transparent;
	119	+ border-top: 8px solid transparent;
	120	+ border-left: 8px solid #2c3338;
	121	+ right: -7px;
	122	+ top: 14px;
	123	+}
	124	+
	125	+.cmb-tooltip-desc.cmb-tooltip-right {
	126	+ top: -12px;
	127	+ left: 150%;
	128	+}
	129	+
	130	+.cmb-tooltip-desc.cmb-tooltip-right:before {
	131	+ border-bottom: 8px solid transparent;
	132	+ border-top: 8px solid transparent;
	133	+ border-right: 8px solid #2c3338;
	134	+ left: -7px;
	135	+ top: 14px;
	136	+}
	137	+
	138	+.cmb-tooltip-desc.cmb-tooltip-dynamic {
	139	+ top: 150%;
	140	+ right: 0;
	141	+}
	142	+
	143	+.cmb-type-multicheck-inline .cmb2-checkbox-list label .cmb-tooltip {
	144	+ margin-left: 6px;
	145	+ margin-top: -2px;
	146	+}
	147	+
	148	+/* Utils */
	149	+.cmb-tooltip-desc.cmb-tooltip-auto { width: auto; }
	150	+.cmb-tooltip-desc.cmb-tooltip-min-content { width: min-content; }
	151	+.cmb-tooltip-desc.cmb-tooltip-max-content { width: max-content; }