_component-examples.scss 5.36 KB
Newer Older
1
2
3
4
//
// Grid examples
//

Mark Otto's avatar
Mark Otto committed
5
.bd-example-row {
6
  .row {
7
    > .col,
Mark Otto's avatar
Mark Otto committed
8
9
10
    > [class^="col-"] {
      padding-top: .75rem;
      padding-bottom: .75rem;
11
12
      background-color: rgba(39, 41, 43, .03);
      border: 1px solid rgba(39, 41, 43, .1);
Mark Otto's avatar
Mark Otto committed
13
14
    }
  }
15

16
17
18
  .row + .row {
    margin-top: 1rem;
  }
19
20
21
22
}

.bd-example-row-flex-cols .row {
  min-height: 10rem;
23
  background-color: rgba(255, 0, 0, .1);
24
25
}

26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
.bd-example-cssgrid {
  text-align: center;

  .grid + .grid {
    margin-top: 1rem;
  }

  .grid > * {
    padding-top: .75rem;
    padding-bottom: .75rem;
    background-color: rgba(255, 0, 255, .1);
    border: 1px solid rgba(255, 0, 255, .25);
  }
}

Mark Otto's avatar
Mark Otto committed
41
42
43
44
45
.bd-highlight {
  background-color: rgba($bd-purple, .15);
  border: 1px solid rgba($bd-purple, .15);
}

46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
// Grid mixins
.example-container {
  width: 800px;
  @include make-container();
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }

  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }

  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

80
81
82
83
84
85
86
87

//
// Docs examples
//

.bd-example {
  position: relative;
  padding: 1rem;
Mark Otto's avatar
Mark Otto committed
88
  margin: 1rem ($bd-gutter-x * -1) 0;
89
90
  border: solid $gray-300;
  border-width: 1px 0 0;
91
92
93
  @include clearfix();

  @include media-breakpoint-up(sm) {
Mark Otto's avatar
Mark Otto committed
94
    padding: 1.5rem;
95
    margin-right: 0;
96
    margin-left: 0;
97
98
    border-width: 1px;
    @include border-top-radius(.25rem);
99

100
101
102
    + .bd-clipboard + .highlight {
      @include border-bottom-radius(.25rem);
    }
Mark Otto's avatar
Mark Otto committed
103
104
  }

105
106
107
108
  + p {
    margin-top: 2rem;
  }

109
110
111
112
113
114
  > .form-control {
    + .form-control {
      margin-top: .5rem;
    }
  }

115
116
  > .nav + .nav,
  > .alert + .alert,
117
  > .navbar + .navbar,
118
  > .progress + .progress {
119
120
121
    margin-top: 1rem;
  }

122
  > .dropdown-menu {
123
124
125
126
    position: static;
    display: block;
  }

127
  > :last-child {
128
129
130
    margin-bottom: 0;
  }

131
132
133
134
  > hr:last-child {
    margin-bottom: $spacer;
  }

135
  // Images
136
137
  > svg + svg,
  > img + img {
138
139
140
    margin-left: .5rem;
  }

141
  // Buttons
142
  > .btn,
143
  > .btn-group {
144
    margin: .25rem .125rem;
145
146
147
148
  }
  > .btn-toolbar + .btn-toolbar {
    margin-top: .5rem;
  }
149

150
151
152
153
  // List groups
  > .list-group {
    max-width: 400px;
  }
Martijn Cuppens's avatar
Martijn Cuppens committed
154

155
156
157
  > [class*="list-group-horizontal"] {
    max-width: 100%;
  }
158

159
  // Navbars
160
161
  .fixed-top,
  .sticky-top {
Mark Otto's avatar
Mark Otto committed
162
163
164
    position: static;
    margin: -1rem -1rem 1rem;
  }
Martijn Cuppens's avatar
Martijn Cuppens committed
165

166
167
  .fixed-bottom,
  .sticky-bottom {
Mark Otto's avatar
Mark Otto committed
168
169
170
171
172
    position: static;
    margin: 1rem -1rem -1rem;
  }

  @include media-breakpoint-up(sm) {
173
174
    .fixed-top,
    .sticky-top {
Mark Otto's avatar
Mark Otto committed
175
176
      margin: -1.5rem -1.5rem 1rem;
    }
177
178
    .fixed-bottom,
    .sticky-bottom {
Mark Otto's avatar
Mark Otto committed
179
180
      margin: 1rem -1.5rem -1.5rem;
    }
181
182
  }

183
184
185
186
187
  // Pagination
  .pagination {
    margin-top: .5rem;
    margin-bottom: .5rem;
  }
Mark Otto's avatar
Mark Otto committed
188
}
189

Mark Otto's avatar
Mark Otto committed
190
191
// Ratio helpers
.bd-example-ratios {
192
  .ratio {
193
    display: inline-block;
Mark Otto's avatar
Mark Otto committed
194
    width: 10rem;
195
196
197
    color: $gray-600;
    background-color: $gray-100;
    border: $border-width solid $border-color;
198
199
200
201
202
203

    > div {
      display: flex;
      align-items: center;
      justify-content: center;
    }
204
  }
205
}
206
207
208
209
210
.bd-example-ratios-breakpoint {
  .ratio-4x3 {
    width: 16rem;

    @include media-breakpoint-up(md) {
211
      --bs-aspect-ratio: 50%; // 2x1
212
213
214
    }
  }
}
215
216

.bd-example-modal {
Mark Otto's avatar
Mark Otto committed
217
218
219
  background-color: #fafafa;

  .modal {
Martijn Cuppens's avatar
Martijn Cuppens committed
220
    position: static;
Mark Otto's avatar
Mark Otto committed
221
222
    display: block;
  }
223
224
}

GeoSot's avatar
GeoSot committed
225
226
227
228
229
.bd-example-offcanvas {
  @include border-start-radius(0);

  .offcanvas {
    position: static;
230
    display: block;
GeoSot's avatar
GeoSot committed
231
    height: 200px;
232
233
    visibility: visible;
    transform: translate(0);
GeoSot's avatar
GeoSot committed
234
235
236
  }
}

237
// Tooltips
238
239
240
241
.tooltip-demo a {
  white-space: nowrap;
}

242
243
244
245
246
247
248
249
// Scrollspy demo on fixed height div
.scrollspy-example {
  position: relative;
  height: 200px;
  margin-top: .5rem;
  overflow: auto;
}

250
251
252
253
254
255
.scrollspy-example-2 {
  position: relative;
  height: 350px;
  overflow: auto;
}

Mark Otto's avatar
Mark Otto committed
256
.bd-example-border-utils {
Mark Otto's avatar
Mark Otto committed
257
  [class^="border"] {
Mark Otto's avatar
Mark Otto committed
258
    display: inline-block;
Mark Otto's avatar
Mark Otto committed
259
260
    width: 5rem;
    height: 5rem;
Mark Otto's avatar
Mark Otto committed
261
262
    margin: .25rem;
    background-color: #f5f5f5;
263
264
265
266
267
268
  }
}

.bd-example-border-utils-0 {
  [class^="border"] {
    border: 1px solid $border-color;
Mark Otto's avatar
Mark Otto committed
269
270
  }
}
271

272
273
274
275
276
277
.bd-example-rounded-utils {
  [class*="rounded"] {
    margin: .25rem;
  }
}

278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
.bd-example-position-utils {
  position: relative;
  padding: 3em;

  .position-relative {
    height: 200px;
    background-color: #f5f5f5;
  }

  .position-absolute {
    width: 2em;
    height: 2em;
    background-color: $dark;
    @include border-radius();
  }
}

.bd-example-position-examples {
  &::after {
    content: none;
  }
}

301
302
303
304
305
306
307
308
309
310
311
// Placeholders
.bd-example-placeholder-cards {
  &::after {
    display: none;
  }

  .card {
    width: 18rem;
  }
}

Martijn Cuppens's avatar
Martijn Cuppens committed
312
313
314
315
316
// Toasts
.bd-example-toasts {
  min-height: 240px;
}

317
318
319
320
321
//
// Code snippets
//

.highlight {
Mark Otto's avatar
Mark Otto committed
322
  padding: var(--bs-gutter-x) $bd-gutter-x;
323
  margin-bottom: 1rem;
324
  background-color: $gray-100;
325
326

  @include media-breakpoint-up(sm) {
327
    padding: 1rem 1.5rem;
328
329
  }

330
  pre {
331
332
333
    padding: 0;
    margin-top: .65rem;
    margin-bottom: .65rem;
334
    white-space: pre;
335
336
337
    background-color: transparent;
    border: 0;
  }
Martijn Cuppens's avatar
Martijn Cuppens committed
338

339
  pre code {
340
    @include font-size(inherit);
341
    color: $gray-900; // Effectively the base text color
342
    word-wrap: normal;
343
  }
344
}
345
346

.bd-content .highlight {
Mark Otto's avatar
Mark Otto committed
347
348
  margin-right: $bd-gutter-x * -1;
  margin-left: $bd-gutter-x * -1;
349
350
351
352
353
354

  @include media-breakpoint-up(sm) {
    margin-right: 0;
    margin-left: 0;
  }
}