_dropdown.scss — VK Blocks trunk

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

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

_dropdown.scss

193 lines

1	// The dropdown wrapper (`<div>`)
2	.dropup,
3	.dropright,
4	.dropdown,
5	.dropleft {
6	position: relative;
7	}
8
9	.dropdown-toggle {
10	white-space: nowrap;
11
12	// Generate the caret automatically
13	@include caret();
14	}
15
16	// The dropdown menu
17	.dropdown-menu {
18	position: absolute;
19	top: 100%;
20	left: 0;
21	z-index: $zindex-dropdown;
22	display: none; // none by default, but block on "open" of the menu
23	float: left;
24	min-width: $dropdown-min-width;
25	padding: $dropdown-padding-y 0;
26	margin: $dropdown-spacer 0 0; // override default ul
27	@include font-size($dropdown-font-size);
28	color: $dropdown-color;
29	text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
30	list-style: none;
31	background-color: $dropdown-bg;
32	background-clip: padding-box;
33	border: $dropdown-border-width solid $dropdown-border-color;
34	@include border-radius($dropdown-border-radius);
35	@include box-shadow($dropdown-box-shadow);
36	}
37
38	@each $breakpoint in map-keys($grid-breakpoints) {
39	@include media-breakpoint-up($breakpoint) {
40	$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
41
42	.dropdown-menu#{$infix}-left {
43	right: auto;
44	left: 0;
45	}
46
47	.dropdown-menu#{$infix}-right {
48	right: 0;
49	left: auto;
50	}
51	}
52	}
53
54	// Allow for dropdowns to go bottom up (aka, dropup-menu)
55	// Just add .dropup after the standard .dropdown class and you're set.
56	.dropup {
57	.dropdown-menu {
58	top: auto;
59	bottom: 100%;
60	margin-top: 0;
61	margin-bottom: $dropdown-spacer;
62	}
63
64	.dropdown-toggle {
65	@include caret(up);
66	}
67	}
68
69	.dropright {
70	.dropdown-menu {
71	top: 0;
72	right: auto;
73	left: 100%;
74	margin-top: 0;
75	margin-left: $dropdown-spacer;
76	}
77
78	.dropdown-toggle {
79	@include caret(right);
80	&::after {
81	vertical-align: 0;
82	}
83	}
84	}
85
86	.dropleft {
87	.dropdown-menu {
88	top: 0;
89	right: 100%;
90	left: auto;
91	margin-top: 0;
92	margin-right: $dropdown-spacer;
93	}
94
95	.dropdown-toggle {
96	@include caret(left);
97	&::before {
98	vertical-align: 0;
99	}
100	}
101	}
102
103	// When enabled Popper.js, reset basic dropdown position
104	// stylelint-disable-next-line no-duplicate-selectors
105	.dropdown-menu {
106	&[x-placement^="top"],
107	&[x-placement^="right"],
108	&[x-placement^="bottom"],
109	&[x-placement^="left"] {
110	right: auto;
111	bottom: auto;
112	}
113	}
114
115	// Dividers (basically an `<hr>`) within the dropdown
116	.dropdown-divider {
117	@include nav-divider($dropdown-divider-bg, $dropdown-divider-margin-y, true);
118	}
119
120	// Links, buttons, and more within the dropdown menu
121	//
122	// `<button>`-specific styles are denoted with `// For <button>s`
123	.dropdown-item {
124	display: block;
125	width: 100%; // For `<button>`s
126	padding: $dropdown-item-padding-y $dropdown-item-padding-x;
127	clear: both;
128	font-weight: $font-weight-normal;
129	color: $dropdown-link-color;
130	text-align: inherit; // For `<button>`s
131	text-decoration: if($link-decoration == none, null, none);
132	white-space: nowrap; // prevent links from randomly breaking onto new lines
133	background-color: transparent; // For `<button>`s
134	border: 0; // For `<button>`s
135
136	// Prevent dropdown overflow if there's no padding
137	// See https://github.com/twbs/bootstrap/pull/27703
138	@if $dropdown-padding-y == 0 {
139	&:first-child {
140	@include border-top-radius($dropdown-inner-border-radius);
141	}
142
143	&:last-child {
144	@include border-bottom-radius($dropdown-inner-border-radius);
145	}
146	}
147
148	@include hover-focus() {
149	color: $dropdown-link-hover-color;
150	text-decoration: none;
151	@include gradient-bg($dropdown-link-hover-bg);
152	}
153
154	&.active,
155	&:active {
156	color: $dropdown-link-active-color;
157	text-decoration: none;
158	@include gradient-bg($dropdown-link-active-bg);
159	}
160
161	&.disabled,
162	&:disabled {
163	color: $dropdown-link-disabled-color;
164	pointer-events: none;
165	background-color: transparent;
166	// Remove CSS gradients if they're enabled
167	@if $enable-gradients {
168	background-image: none;
169	}
170	}
171	}
172
173	.dropdown-menu.show {
174	display: block;
175	}
176
177	// Dropdown section headers
178	.dropdown-header {
179	display: block;
180	padding: $dropdown-header-padding;
181	margin-bottom: 0; // for use with heading elements
182	@include font-size($font-size-sm);
183	color: $dropdown-header-color;
184	white-space: nowrap; // as with > li > a
185	}
186
187	// Dropdown text
188	.dropdown-item-text {
189	display: block;
190	padding: $dropdown-item-padding-y $dropdown-item-padding-x;
191	color: $dropdown-link-color;
192	}
193