1
2@function dtb-tint( $color, $percent ) {
3	@return mix(white, $color, $percent);
4}
5
6@function dtb-shade( $color, $percent ) {
7	@return mix(black, $color, $percent);
8}
9
10@mixin dtb-two-stop-gradient($fromColor, $toColor) {
11	background-color: $toColor; /* Fallback */
12	background: linear-gradient(to bottom, $fromColor 0%, $toColor 100%);
13	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#{nth( $fromColor, 1 )}', EndColorStr='#{nth( $toColor, 1 )}');
14}
15
16@mixin dtb-radial-gradient ($fromColor, $toColor ) {
17	background: $toColor; /* Fallback */
18	background: radial-gradient(ellipse farthest-corner at center, $fromColor 0%, $toColor 100%); /* W3C Markup, IE10 Release Preview */
19}
20
21
22@mixin dtb-fixed-collection {
23	// Fixed positioning feature
24	&.fixed {
25		position: fixed;
26		display: block;
27		top: 50%;
28		left: 50%;
29		margin-left: -75px;
30		border-radius: 5px;
31		background-color: white;
32		padding: 0.5em;
33
34		&.two-column {
35			margin-left: -200px;
36		}
37
38		&.three-column {
39			margin-left: -225px;
40		}
41
42		&.four-column {
43			margin-left: -300px;
44		}
45
46		&.columns {
47			// Four column
48			margin-left: -409px;
49
50			@media screen and (max-width: 1024px) {
51				margin-left: -308px;
52			}
53
54			@media screen and (max-width: 640px) {
55				margin-left: -203px;
56			}
57
58			@media screen and (max-width: 460px) {
59				margin-left: -100px;
60			}
61		}
62
63		> :last-child {
64			max-height: 100vh;
65			overflow: auto;
66		}
67	}
68
69	&.two-column > :last-child,
70	&.three-column > :last-child,
71	&.four-column > :last-child {
72		> * {
73			-webkit-column-break-inside: avoid;
74			break-inside: avoid;
75		}
76
77		// Multi-column layout feature
78		display: block !important;
79		-webkit-column-gap: 8px;
80		-moz-column-gap: 8px;
81			-ms-column-gap: 8px;
82			-o-column-gap: 8px;
83		column-gap: 8px;
84	}
85
86	&.two-column {
87		width: 400px;
88
89		> :last-child {
90			padding-bottom: 1px;
91			column-count: 2;
92		}
93	}
94
95	&.three-column {
96		width: 450px;
97
98		> :last-child {
99			padding-bottom: 1px;
100			column-count: 3;
101		}
102	}
103
104	&.four-column {
105		width: 600px;
106
107		> :last-child {
108			padding-bottom: 1px;
109			column-count: 4;
110		}
111	}
112
113	// Chrome fix - 531528
114	.dt-button {
115		border-radius: 0;
116	}
117
118	&.columns {
119		// Four column layout
120		width: auto;
121
122		> :last-child {
123			display: flex;
124			flex-wrap: wrap;
125			justify-content: flex-start;
126			align-items: center;
127			gap: 6px;
128
129			width: 818px;
130			padding-bottom: 1px;
131
132			.dt-button {
133				min-width: 200px;
134				flex: 0 1;
135				margin: 0;
136			}
137		}
138
139		&.dtb-b3,
140		&.dtb-b2,
141		&.dtb-b1 {
142			> :last-child {
143				justify-content: space-between;
144			}
145		}
146
147		&.dtb-b3 .dt-button {
148			flex: 1 1 32%;
149		}
150		&.dtb-b2 .dt-button {
151			flex: 1 1 48%;
152		}
153		&.dtb-b1 .dt-button {
154			flex: 1 1 100%;
155		}
156
157		@media screen and (max-width: 1024px) {
158			// Three column layout
159			> :last-child {
160				width: 612px;
161			}
162		}
163
164		@media screen and (max-width: 640px) {
165			// Two column layout
166			> :last-child {
167				width: 406px;
168			}
169
170			&.dtb-b3 .dt-button {
171				flex: 0 1 32%;
172			}
173		}
174
175		@media screen and (max-width: 460px) {
176			// Single column
177			> :last-child {
178				width: 200px;
179			}
180		}
181	}
182}
183
184
185@mixin dtb-processing {
186	color: rgba(0, 0, 0, 0.2);
187
188	&:after {
189		position: absolute;
190	    top: 50%;
191		left: 50%;
192		width: 16px;
193		height: 16px;
194		margin: -8px 0 0 -8px;
195		box-sizing: border-box;
196
197		display: block;
198		content: ' ';
199		border: 2px solid rgb(40,40,40);
200		border-radius: 50%;
201		border-left-color: transparent;
202		border-right-color: transparent;
203		animation: dtb-spinner 1500ms infinite linear;
204			-o-animation: dtb-spinner 1500ms infinite linear;
205			-ms-animation: dtb-spinner 1500ms infinite linear;
206			-webkit-animation: dtb-spinner 1500ms infinite linear;
207			-moz-animation: dtb-spinner 1500ms infinite linear;
208	}
209}
210
211@keyframes dtb-spinner {
212	100%{ transform: rotate(360deg); }
213}
214
215@-o-keyframes dtb-spinner {
216	100%{ -o-transform: rotate(360deg); transform: rotate(360deg); }
217}
218
219@-ms-keyframes dtb-spinner {
220	100%{ -ms-transform: rotate(360deg); transform: rotate(360deg); }
221}
222
223@-webkit-keyframes dtb-spinner {
224	100%{ -webkit-transform: rotate(360deg); transform: rotate(360deg); }
225}
226
227@-moz-keyframes dtb-spinner {
228	100%{ -moz-transform: rotate(360deg); transform: rotate(360deg); }
229}
230