_popover.scss — VK Blocks 0.16.2

vk-blocks / lib / bootstrap / scss / _popover.scss

vk-blocks / lib / bootstrap / scss Last commit date

_popover.scss

172 lines

1	.popover {
2	position: absolute;
3	top: 0;
4	left: 0;
5	z-index: $zindex-popover;
6	display: block;
7	max-width: $popover-max-width;
8	// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
9	// So reset our font and text properties to avoid inheriting weird values.
10	@include reset-text();
11	@include font-size($popover-font-size);
12	// Allow breaking very long words so they don't overflow the popover's bounds
13	word-wrap: break-word;
14	background-color: $popover-bg;
15	background-clip: padding-box;
16	border: $popover-border-width solid $popover-border-color;
17	@include border-radius($popover-border-radius);
18	@include box-shadow($popover-box-shadow);
19
20	.arrow {
21	position: absolute;
22	display: block;
23	width: $popover-arrow-width;
24	height: $popover-arrow-height;
25	margin: 0 $border-radius-lg;
26
27	&::before,
28	&::after {
29	position: absolute;
30	display: block;
31	content: "";
32	border-color: transparent;
33	border-style: solid;
34	}
35	}
36	}
37
38	.bs-popover-top {
39	margin-bottom: $popover-arrow-height;
40
41	> .arrow {
42	bottom: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
43
44	&::before {
45	bottom: 0;
46	border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
47	border-top-color: $popover-arrow-outer-color;
48	}
49
50	&::after {
51	bottom: $popover-border-width;
52	border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
53	border-top-color: $popover-arrow-color;
54	}
55	}
56	}
57
58	.bs-popover-right {
59	margin-left: $popover-arrow-height;
60
61	> .arrow {
62	left: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
63	width: $popover-arrow-height;
64	height: $popover-arrow-width;
65	margin: $border-radius-lg 0; // make sure the arrow does not touch the popover's rounded corners
66
67	&::before {
68	left: 0;
69	border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
70	border-right-color: $popover-arrow-outer-color;
71	}
72
73	&::after {
74	left: $popover-border-width;
75	border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
76	border-right-color: $popover-arrow-color;
77	}
78	}
79	}
80
81	.bs-popover-bottom {
82	margin-top: $popover-arrow-height;
83
84	> .arrow {
85	top: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
86
87	&::before {
88	top: 0;
89	border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
90	border-bottom-color: $popover-arrow-outer-color;
91	}
92
93	&::after {
94	top: $popover-border-width;
95	border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
96	border-bottom-color: $popover-arrow-color;
97	}
98	}
99
100	// This will remove the popover-header's border just below the arrow
101	.popover-header::before {
102	position: absolute;
103	top: 0;
104	left: 50%;
105	display: block;
106	width: $popover-arrow-width;
107	margin-left: -$popover-arrow-width / 2;
108	content: "";
109	border-bottom: $popover-border-width solid $popover-header-bg;
110	}
111	}
112
113	.bs-popover-left {
114	margin-right: $popover-arrow-height;
115
116	> .arrow {
117	right: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
118	width: $popover-arrow-height;
119	height: $popover-arrow-width;
120	margin: $border-radius-lg 0; // make sure the arrow does not touch the popover's rounded corners
121
122	&::before {
123	right: 0;
124	border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
125	border-left-color: $popover-arrow-outer-color;
126	}
127
128	&::after {
129	right: $popover-border-width;
130	border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
131	border-left-color: $popover-arrow-color;
132	}
133	}
134	}
135
136	.bs-popover-auto {
137	&[x-placement^="top"]^="top""] {
138	@extend .bs-popover-top;
139	}
140	&[x-placement^="right"]^="right""] {
141	@extend .bs-popover-right;
142	}
143	&[x-placement^="bottom"]^="bottom""] {
144	@extend .bs-popover-bottom;
145	}
146	&[x-placement^="left"]^="left""] {
147	@extend .bs-popover-left;
148	}
149	}
150
151
152	// Offset the popover to account for the popover arrow
153	.popover-header {
154	padding: $popover-header-padding-y $popover-header-padding-x;
155	margin-bottom: 0; // Reset the default from Reboot
156	@include font-size($font-size-base);
157	color: $popover-header-color;
158	background-color: $popover-header-bg;
159	border-bottom: $popover-border-width solid darken($popover-header-bg, 5%);
160	$offset-border-width: calc(#{$border-radius-lg} - #{$popover-border-width});
161	@include border-top-radius($offset-border-width);
162
163	&:empty {
164	display: none;
165	}
166	}
167
168	.popover-body {
169	padding: $popover-body-padding-y $popover-body-padding-x;
170	color: $popover-body-color;
171	}
172