_dropdown.scss — VK Blocks 0.16.2

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

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

_dropdown.scss

192 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);
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	white-space: nowrap; // prevent links from randomly breaking onto new lines
132	background-color: transparent; // For `<button>`s
133	border: 0; // For `<button>`s
134
135	// Prevent dropdown overflow if there's no padding
136	// See https://github.com/twbs/bootstrap/pull/27703
137	@if $dropdown-padding-y == 0 {
138	&:first-child {
139	@include border-top-radius($dropdown-inner-border-radius);
140	}
141
142	&:last-child {
143	@include border-bottom-radius($dropdown-inner-border-radius);
144	}
145	}
146
147	@include hover-focus {
148	color: $dropdown-link-hover-color;
149	text-decoration: none;
150	@include gradient-bg($dropdown-link-hover-bg);
151	}
152
153	&.active,
154	&:active {
155	color: $dropdown-link-active-color;
156	text-decoration: none;
157	@include gradient-bg($dropdown-link-active-bg);
158	}
159
160	&.disabled,
161	&:disabled {
162	color: $dropdown-link-disabled-color;
163	pointer-events: none;
164	background-color: transparent;
165	// Remove CSS gradients if they're enabled
166	@if $enable-gradients {
167	background-image: none;
168	}
169	}
170	}
171
172	.dropdown-menu.show {
173	display: block;
174	}
175
176	// Dropdown section headers
177	.dropdown-header {
178	display: block;
179	padding: $dropdown-padding-y $dropdown-item-padding-x;
180	margin-bottom: 0; // for use with heading elements
181	@include font-size($font-size-sm);
182	color: $dropdown-header-color;
183	white-space: nowrap; // as with > li > a
184	}
185
186	// Dropdown text
187	.dropdown-item-text {
188	display: block;
189	padding: $dropdown-item-padding-y $dropdown-item-padding-x;
190	color: $dropdown-link-color;
191	}
192