← All changes | css/packages/s11-floating-links.css +48 -7 6.4 → trunk View file →

		@@ -32,9 +32,9 @@
32	32	padding: 12px;
33	33	background-color: #fff;
34	34	border: 1px solid #f2f4f7;
35	35	border-radius: 50%;
36		- box-shadow: 0 11px 22px -5px rgba(16, 24, 40, 0.18);
	36	+ box-shadow: var(--box-shadow-xxl);
37	37	cursor: pointer;
38	38	}
39	39
40	40	.s11-floating-links-nav-menu {
		@@ -43,9 +43,9 @@
43	43	background-color: #fff;
44	44	padding: 16px;
45	45	border: 1px solid #f2f4f7;
46	46	border-radius: 8px;
47		- box-shadow: 0 11px 22px -5px rgba(16, 24, 40, 0.18);
	47	+ box-shadow: var(--box-shadow-xxl);
48	48	}
49	49
50	50	.s11-floating-links-nav-item {
51	51	position: relative;
		@@ -71,9 +71,9 @@
71	71	box-shadow: none;
72	72	}
73	73
74	74	.s11-floating-links-nav-item::before {
75		- content: '';
	75	+ content: "";
76	76	position: absolute;
77	77	top: -4px;
78	78	left: -6px;
79	79	width: calc(100% + 12px);
		@@ -85,15 +85,15 @@
85	85	cursor: pointer;
86	86	}
87	87
88	88	.s11-floating-links-nav-item:hover::before {
89		- background-color: var(--floating-links-bg-hover-color);
	89	+ background-color: var(--floating-links-bg-hover-color);
90	90	}
91	91
92	92	.s11-floating-links-nav-text {
93	93	font-size: 0.875rem;
94	94	line-height: 1.25rem;
95		- color: #1D2939;
	95	+ color: #1d2939;
96	96	font-weight: 500;
97	97	z-index: 2;
98	98	transition: color 240ms ease-out;
99	99	}
		@@ -98,9 +98,9 @@
98	98	transition: color 240ms ease-out;
99	99	}
100	100
101	101	.s11-floating-links-nav-item:hover .s11-floating-links-nav-text {
102		- color: var(--floating-links-hover-color);
	102	+ color: var(--floating-links-hover-color);
103	103	}
104	104
105	105	.s11-floating-links-nav-icon {
106	106	display: flex;
		@@ -111,9 +111,9 @@
111	111	transition: stroke 240ms ease-out;
112	112	}
113	113
114	114	.s11-floating-links-nav-item:hover .s11-floating-links-nav-icon > svg path {
115		- stroke: var(--floating-links-hover-color);
	115	+ stroke: var(--floating-links-hover-color);
116	116	}
117	117
118	118	.s11-fadein {
119	119	display: block;
		@@ -129,12 +129,14 @@
129	129	display: block;
130	130	}
131	131
132	132	@keyframes fadeInUp {
	133	+
133	134	0% {
134	135	opacity: 0;
135	136	transform: translateY(20px);
136	137	}
	138	+
137	139	100% {
138	140	opacity: 1;
139	141	transform: translateY(0);
140	142	}
		@@ -140,12 +142,14 @@
140	142	}
141	143	}
142	144
143	145	@keyframes fadeOutDown {
	146	+
144	147	0% {
145	148	opacity: 1;
146	149	transform: translateY(0);
147	150	}
	151	+
148	152	100% {
149	153	opacity: 0;
150	154	transform: translateY(20px);
151	155	}
		@@ -152,8 +156,9 @@
152	156	}
153	157
154	158	/* Breakpoints */
155	159	@media only screen and (max-width: 782px) {
	160	+
156	161	.s11-floating-links {
157	162	right: 20px;
158	163	bottom: 20px;
159	164	}
		@@ -162,4 +167,40 @@
162	167	width: 50px;
163	168	height: 50px;
164	169	}
165	170	}
	171	+
	172	+/* Inbox slide-in */
	173	+#frm_inbox_slide_in {
	174	+ position: fixed;
	175	+
	176	+ /* Use the same bottom/right values as floating links. */
	177	+ bottom: 127px;
	178	+ right: 48px;
	179	+ min-width: 280px;
	180	+ max-width: 360px;
	181	+ flex-direction: column;
	182	+ align-items: center;
	183	+ z-index: 4; /* We want the pop up to appear above the license section in the dashboard. */
	184	+ padding-bottom: 0;
	185	+}
	186	+
	187	+#frm_inbox_slide_in img {
	188	+ max-width: 100%;
	189	+ border-radius: var(--small-radius);
	190	+}
	191	+
	192	+#frm_inbox_slide_in .frm-button-primary {
	193	+ margin: auto;
	194	+}
	195	+
	196	+#frm_inbox_slide_in h3 {
	197	+ margin: 0;
	198	+ font-weight: 600;
	199	+ line-height: 1 !important;
	200	+}
	201	+
	202	+#frm_inbox_slide_in h3 + span {
	203	+ text-align: center;
	204	+}
	205	+
	206	+/* End Inbox slide-in */