Skip to content

Commit b54c735

Browse files
aaronshekeyaaronshekey
authored
Merge pull request #543 from StackExchange/feature/full-borders
Add full borders classes
2 parents 4ff6870 + 65f9817 commit b54c735

File tree

3 files changed

+280
-105
lines changed

3 files changed

+280
-105
lines changed

‎docs/product/base/borders.html‎

Lines changed: 166 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -197,93 +197,145 @@
197197
{% header "h3", "Black" %}
198198
<div class="stacks-preview">
199199
{% highlight html %}
200-
<div class="bb bc-black-10">Black Border: Tenth Step</div>
201-
<div class="bb bc-black-9">Black Border: Ninth Step</div>
202-
<div class="bb bc-black-8">Black Border: Eighth Step</div>
203-
<div class="bb bc-black-7">Black Border: Seventh Step</div>
204-
<div class="bb bc-black-6">Black Border: Sixth Step</div>
205-
<div class="bb bc-black-5">Black Border: Fifth Step</div>
206-
<div class="bb bc-black-4">Black Border: Fourth Step</div>
207-
<div class="bb bc-black-3">Black Border: Third Step</div>
208-
<div class="bb bc-black-2">Black Border: Second Step</div>
209-
<div class="bb bc-black-1">Black Border: First Step</div>
200+
<div class="ba bc-black-900"></div>
201+
<div class="ba bc-black-800"></div>
202+
<div class="ba bc-black-750"></div>
203+
<div class="ba bc-black-700"></div>
204+
<div class="ba bc-black-600"></div>
205+
<div class="ba bc-black-500"></div>
206+
<div class="ba bc-black-400"></div>
207+
<div class="ba bc-black-350"></div>
208+
<div class="ba bc-black-300"></div>
209+
<div class="ba bc-black-200"></div>
210+
<div class="ba bc-black-150"></div>
211+
<div class="ba bc-black-100"></div>
212+
<div class="ba bc-black-075"></div>
213+
<div class="ba bc-black-050"></div>
214+
<div class="ba bc-black-025"></div>
210215
{% endhighlight %}
211216
<div class="stacks-preview--example">
212-
<div class="grid ff-column-nowrap w100 gs8 gsy">
213-
<div class="grid--cell ai-center p8 bb bc-black-10">Black Border: Tenth Step</div>
214-
<div class="grid--cell ai-center p8 bb bc-black-9">Black Border: Ninth Step</div>
215-
<div class="grid--cell ai-center p8 bb bc-black-8">Black Border: Eighth Step</div>
216-
<div class="grid--cell ai-center p8 bb bc-black-7">Black Border: Seventh Step</div>
217-
<div class="grid--cell ai-center p8 bb bc-black-6">Black Border: Sixth Step</div>
218-
<div class="grid--cell ai-center p8 bb bc-black-5">Black Border: Fifth Step</div>
219-
<div class="grid--cell ai-center p8 bb bc-black-4">Black Border: Fourth Step</div>
220-
<div class="grid--cell ai-center p8 bb bc-black-3">Black Border: Third Step</div>
221-
<div class="grid--cell ai-center p8 bb bc-black-2">Black Border: Second Step</div>
222-
<div class="grid--cell ai-center p8 bb bc-black-1">Black Border: First Step</div>
217+
<div class="grid ff-column-nowrap w100 gs12 gsy">
218+
<div class="grid--cell ai-center p8 ba bc-black-900">Black 900</div>
219+
<div class="grid--cell ai-center p8 ba bc-black-800">Black 800</div>
220+
<div class="grid--cell ai-center p8 ba bc-black-750">Black 750</div>
221+
<div class="grid--cell ai-center p8 ba bc-black-700">Black 700</div>
222+
<div class="grid--cell ai-center p8 ba bc-black-600">Black 600</div>
223+
<div class="grid--cell ai-center p8 ba bc-black-500">Black 500</div>
224+
<div class="grid--cell ai-center p8 ba bc-black-400">Black 400</div>
225+
<div class="grid--cell ai-center p8 ba bc-black-350">Black 350</div>
226+
<div class="grid--cell ai-center p8 ba bc-black-300">Black 300</div>
227+
<div class="grid--cell ai-center p8 ba bc-black-200">Black 200</div>
228+
<div class="grid--cell ai-center p8 ba bc-black-150">Black 150</div>
229+
<div class="grid--cell ai-center p8 ba bc-black-100">Black 100</div>
230+
<div class="grid--cell ai-center p8 ba bc-black-075">Black 75</div>
231+
<div class="grid--cell ai-center p8 ba bc-black-050">Black 50</div>
232+
<div class="grid--cell ai-center p8 ba bc-black-025">Black 25</div>
223233
</div>
224234
</div>
225235
</div>
226236

227237
{% header "h3", "White" %}
228238
<div class="stacks-preview">
229239
{% highlight html %}
230-
<div class="bb bc-white-3">White Border: Third Step</div>
231-
<div class="bb bc-white-2">White Border: Second Step</div>
232-
<div class="bb bc-white-1">White Border: First Step</div>
240+
<div class="ba bc-white-3">White Border: Third Step</div>
241+
<div class="ba bc-white-2">White Border: Second Step</div>
242+
<div class="ba bc-white-1">White Border: First Step</div>
233243
{% endhighlight %}
234244
<div class="stacks-preview--example bg-black-750">
235-
<div class="grid ff-column-nowrap w100 gs8 gsy">
236-
<div class="grid--cell ai-center p8 bb bc-white-3 fc-white">White Border: Third Step</div>
237-
<div class="grid--cell ai-center p8 bb bc-white-2 fc-white">White Border: Second Step</div>
238-
<div class="grid--cell ai-center p8 bb bc-white-1 fc-white">White Border: First Step</div>
245+
<div class="grid ff-column-nowrap w100 gs12 gsy">
246+
<div class="grid--cell ai-center p8 ba bc-white-3 fc-white">White Border: Third Step</div>
247+
<div class="grid--cell ai-center p8 ba bc-white-2 fc-white">White Border: Second Step</div>
248+
<div class="grid--cell ai-center p8 ba bc-white-1 fc-white">White Border: First Step</div>
239249
</div>
240250
</div>
241251
</div>
242252

243253
{% header "h3", "Orange" %}
244254
<div class="stacks-preview">
245255
{% highlight html %}
246-
<div class="bb bc-orange-3">Dark orange border</div>
247-
<div class="bb bc-orange-2">Orange border</div>
248-
<div class="bb bc-orange-1">Light orange border</div>
256+
<div class="ba bc-orange-900"></div>
257+
<div class="ba bc-orange-800"></div>
258+
<div class="ba bc-orange-700"></div>
259+
<div class="ba bc-orange-600"></div>
260+
<div class="ba bc-orange-500"></div>
261+
<div class="ba bc-orange-400"></div>
262+
<div class="ba bc-orange-300"></div>
263+
<div class="ba bc-orange-200"></div>
264+
<div class="ba bc-orange-100"></div>
265+
<div class="ba bc-orange-050"></div>
249266
{% endhighlight %}
250267
<div class="stacks-preview--example">
251-
<div class="grid ff-column-nowrap w100 gs8 gsy">
252-
<div class="grid--cell ai-center p8 bb bc-orange-3">Dark Orange Border</div>
253-
<div class="grid--cell ai-center p8 bb bc-orange-2">Orange Border</div>
254-
<div class="grid--cell ai-center p8 bb bc-orange-1">Light Orange Border</div>
268+
<div class="grid ff-column-nowrap w100 gs12 gsy">
269+
<div class="grid--cell ai-center p8 ba bc-orange-900">Orange 900</div>
270+
<div class="grid--cell ai-center p8 ba bc-orange-800">Orange 800</div>
271+
<div class="grid--cell ai-center p8 ba bc-orange-700">Orange 700</div>
272+
<div class="grid--cell ai-center p8 ba bc-orange-600">Orange 600</div>
273+
<div class="grid--cell ai-center p8 ba bc-orange-500">Orange 500</div>
274+
<div class="grid--cell ai-center p8 ba bc-orange-400">Orange 400</div>
275+
<div class="grid--cell ai-center p8 ba bc-orange-300">Orange 300</div>
276+
<div class="grid--cell ai-center p8 ba bc-orange-200">Orange 200</div>
277+
<div class="grid--cell ai-center p8 ba bc-orange-100">Orange 100</div>
278+
<div class="grid--cell ai-center p8 ba bc-orange-050">Orange 50</div>
255279
</div>
256280
</div>
257281
</div>
258282

259283
{% header "h3", "Blue" %}
260284
<div class="stacks-preview">
261285
{% highlight html %}
262-
<div class="bb bc-blue-3">Dark blue border</div>
263-
<div class="bb bc-blue-2">Blue border</div>
264-
<div class="bb bc-blue-1">Light blue border</div>
286+
<div class="ba bc-blue-900"></div>
287+
<div class="ba bc-blue-800"></div>
288+
<div class="ba bc-blue-700"></div>
289+
<div class="ba bc-blue-600"></div>
290+
<div class="ba bc-blue-500"></div>
291+
<div class="ba bc-blue-400"></div>
292+
<div class="ba bc-blue-300"></div>
293+
<div class="ba bc-blue-200"></div>
294+
<div class="ba bc-blue-100"></div>
295+
<div class="ba bc-blue-050"></div>
265296
{% endhighlight %}
266297
<div class="stacks-preview--example">
267-
<div class="grid ff-column-nowrap w100 gs8 gsy">
268-
<div class="grid--cell ai-center p8 bb bc-blue-3">Dark blue Border</div>
269-
<div class="grid--cell ai-center p8 bb bc-blue-2">Blue border</div>
270-
<div class="grid--cell ai-center p8 bb bc-blue-1">Light blue border</div>
298+
<div class="grid ff-column-nowrap w100 gs12 gsy">
299+
<div class="grid--cell ai-center p8 ba bc-blue-900">Blue 900</div>
300+
<div class="grid--cell ai-center p8 ba bc-blue-800">Blue 800</div>
301+
<div class="grid--cell ai-center p8 ba bc-blue-700">Blue 700</div>
302+
<div class="grid--cell ai-center p8 ba bc-blue-600">Blue 600</div>
303+
<div class="grid--cell ai-center p8 ba bc-blue-500">Blue 500</div>
304+
<div class="grid--cell ai-center p8 ba bc-blue-400">Blue 400</div>
305+
<div class="grid--cell ai-center p8 ba bc-blue-300">Blue 300</div>
306+
<div class="grid--cell ai-center p8 ba bc-blue-200">Blue 200</div>
307+
<div class="grid--cell ai-center p8 ba bc-blue-100">Blue 100</div>
308+
<div class="grid--cell ai-center p8 ba bc-blue-050">Blue 50</div>
271309
</div>
272310
</div>
273311
</div>
274312

275313
{% header "h3", "Powder" %}
276314
<div class="stacks-preview">
277315
{% highlight html %}
278-
<div class="bb bc-powder-3">Dark powder border</div>
279-
<div class="bb bc-powder-2">Powder border</div>
280-
<div class="bb bc-powder-1">Light powder border</div>
316+
<div class="ba bc-powder-900"></div>
317+
<div class="ba bc-powder-800"></div>
318+
<div class="ba bc-powder-700"></div>
319+
<div class="ba bc-powder-600"></div>
320+
<div class="ba bc-powder-500"></div>
321+
<div class="ba bc-powder-400"></div>
322+
<div class="ba bc-powder-300"></div>
323+
<div class="ba bc-powder-200"></div>
324+
<div class="ba bc-powder-100"></div>
325+
<div class="ba bc-powder-050"></div>
281326
{% endhighlight %}
282327
<div class="stacks-preview--example">
283-
<div class="grid ff-column-nowrap w100 gs8 gsy">
284-
<div class="grid--cell ai-center p8 bb bc-powder-3">Dark powder border</div>
285-
<div class="grid--cell ai-center p8 bb bc-powder-2">Powder border</div>
286-
<div class="grid--cell ai-center p8 bb bc-powder-1">Light powder border</div>
328+
<div class="grid ff-column-nowrap w100 gs12 gsy">
329+
<div class="grid--cell ai-center p8 ba bc-powder-900">Powder 900</div>
330+
<div class="grid--cell ai-center p8 ba bc-powder-800">Powder 800</div>
331+
<div class="grid--cell ai-center p8 ba bc-powder-700">Powder 700</div>
332+
<div class="grid--cell ai-center p8 ba bc-powder-600">Powder 600</div>
333+
<div class="grid--cell ai-center p8 ba bc-powder-500">Powder 500</div>
334+
<div class="grid--cell ai-center p8 ba bc-powder-400">Powder 400</div>
335+
<div class="grid--cell ai-center p8 ba bc-powder-300">Powder 300</div>
336+
<div class="grid--cell ai-center p8 ba bc-powder-200">Powder 200</div>
337+
<div class="grid--cell ai-center p8 ba bc-powder-100">Powder 100</div>
338+
<div class="grid--cell ai-center p8 ba bc-powder-050">Powder 50</div>
287339
</div>
288340
</div>
289341
</div>
@@ -292,15 +344,31 @@
292344
<p class="stacks-copy">Green borders can also be declared using our <code class="stacks-code">.bc-success</code> <a href="{{ '/product/base/colors#success' | relative_url }}">alias class</a>.</p>
293345
<div class="stacks-preview">
294346
{% highlight html %}
295-
<div class="bb bc-green-3">Dark green border</div>
296-
<div class="bb bc-green-2">Green border</div>
297-
<div class="bb bc-green-1">Light green border</div>
347+
<div class="ba bc-green-900"></div>
348+
<div class="ba bc-green-800"></div>
349+
<div class="ba bc-green-700"></div>
350+
<div class="ba bc-green-600"></div>
351+
<div class="ba bc-green-500"></div>
352+
<div class="ba bc-green-400"></div>
353+
<div class="ba bc-green-300"></div>
354+
<div class="ba bc-green-200"></div>
355+
<div class="ba bc-green-100"></div>
356+
<div class="ba bc-green-050"></div>
357+
<div class="ba bc-green-025"></div>
298358
{% endhighlight %}
299359
<div class="stacks-preview--example">
300-
<div class="grid ff-column-nowrap w100 gs8 gsy">
301-
<div class="grid--cell ai-center p8 bb bc-green-3">Dark green border</div>
302-
<div class="grid--cell ai-center p8 bb bc-green-2">Green border</div>
303-
<div class="grid--cell ai-center p8 bb bc-green-1">Light green border</div>
360+
<div class="grid ff-column-nowrap w100 gs12 gsy">
361+
<div class="grid--cell ai-center p8 ba bc-green-900">Green 900</div>
362+
<div class="grid--cell ai-center p8 ba bc-green-800">Green 800</div>
363+
<div class="grid--cell ai-center p8 ba bc-green-700">Green 700</div>
364+
<div class="grid--cell ai-center p8 ba bc-green-600">Green 600</div>
365+
<div class="grid--cell ai-center p8 ba bc-green-500">Green 500</div>
366+
<div class="grid--cell ai-center p8 ba bc-green-400">Green 400</div>
367+
<div class="grid--cell ai-center p8 ba bc-green-300">Green 300</div>
368+
<div class="grid--cell ai-center p8 ba bc-green-200">Green 200</div>
369+
<div class="grid--cell ai-center p8 ba bc-green-100">Green 100</div>
370+
<div class="grid--cell ai-center p8 ba bc-green-050">Green 50</div>
371+
<div class="grid--cell ai-center p8 ba bc-green-025">Green 25</div>
304372
</div>
305373
</div>
306374
</div>
@@ -309,15 +377,29 @@
309377
<p class="stacks-copy">Red borders can also be declared using our <code class="stacks-code">.bc-error</code> and <code class="stacks-code">.bc-danger</code> <a href="{{ '/product/base/colors#danger-and-error' | relative_url }}">alias classes</a>.</p>
310378
<div class="stacks-preview">
311379
{% highlight html %}
312-
<div class="bb bc-red-3">Dark red Border</div>
313-
<div class="bb bc-red-2">Red border</div>
314-
<div class="bb bc-red-1">Light red border</div>
380+
<div class="ba bc-red-900"></div>
381+
<div class="ba bc-red-800"></div>
382+
<div class="ba bc-red-700"></div>
383+
<div class="ba bc-red-600"></div>
384+
<div class="ba bc-red-500"></div>
385+
<div class="ba bc-red-400"></div>
386+
<div class="ba bc-red-300"></div>
387+
<div class="ba bc-red-200"></div>
388+
<div class="ba bc-red-100"></div>
389+
<div class="ba bc-red-050"></div>
315390
{% endhighlight %}
316391
<div class="stacks-preview--example">
317-
<div class="grid ff-column-nowrap w100 gs8 gsy">
318-
<div class="grid--cell ai-center p8 bb bc-red-3">Dark red border</div>
319-
<div class="grid--cell ai-center p8 bb bc-red-2">Red border</div>
320-
<div class="grid--cell ai-center p8 bb bc-red-1">Light red border</div>
392+
<div class="grid ff-column-nowrap w100 gs12 gsy">
393+
<div class="grid--cell ai-center p8 ba bc-red-900">Red 900</div>
394+
<div class="grid--cell ai-center p8 ba bc-red-800">Red 800</div>
395+
<div class="grid--cell ai-center p8 ba bc-red-700">Red 700</div>
396+
<div class="grid--cell ai-center p8 ba bc-red-600">Red 600</div>
397+
<div class="grid--cell ai-center p8 ba bc-red-500">Red 500</div>
398+
<div class="grid--cell ai-center p8 ba bc-red-400">Red 400</div>
399+
<div class="grid--cell ai-center p8 ba bc-red-300">Red 300</div>
400+
<div class="grid--cell ai-center p8 ba bc-red-200">Red 200</div>
401+
<div class="grid--cell ai-center p8 ba bc-red-100">Red 100</div>
402+
<div class="grid--cell ai-center p8 ba bc-red-050">Red 50</div>
321403
</div>
322404
</div>
323405
</div>
@@ -326,15 +408,29 @@
326408
<p class="stacks-copy">Yellow borders can also be declared using our <code class="stacks-code">.bc-warning</code> <a href="{{ '/product/base/colors#warning' | relative_url }}">alias class</a>.</p>
327409
<div class="stacks-preview">
328410
{% highlight html %}
329-
<div class="bb bc-yellow-3">Dark yellow Border</div>
330-
<div class="bb bc-yellow-2">Yellow border</div>
331-
<div class="bb bc-yellow-1">Light yellow border</div>
411+
<div class="ba bc-yellow-900"></div>
412+
<div class="ba bc-yellow-800"></div>
413+
<div class="ba bc-yellow-700"></div>
414+
<div class="ba bc-yellow-600"></div>
415+
<div class="ba bc-yellow-500"></div>
416+
<div class="ba bc-yellow-400"></div>
417+
<div class="ba bc-yellow-300"></div>
418+
<div class="ba bc-yellow-200"></div>
419+
<div class="ba bc-yellow-100"></div>
420+
<div class="ba bc-yellow-050"></div>
332421
{% endhighlight %}
333422
<div class="stacks-preview--example">
334-
<div class="grid ff-column-nowrap w100 gs8 gsy">
335-
<div class="grid--cell ai-center p8 bb bc-yellow-3">Dark yellow border</div>
336-
<div class="grid--cell ai-center p8 bb bc-yellow-2">Yellow border</div>
337-
<div class="grid--cell ai-center p8 bb bc-yellow-1">Light yellow border</div>
423+
<div class="grid ff-column-nowrap w100 gs12 gsy">
424+
<div class="grid--cell ai-center p8 ba bc-yellow-900">Yellow 900</div>
425+
<div class="grid--cell ai-center p8 ba bc-yellow-800">Yellow 800</div>
426+
<div class="grid--cell ai-center p8 ba bc-yellow-700">Yellow 700</div>
427+
<div class="grid--cell ai-center p8 ba bc-yellow-600">Yellow 600</div>
428+
<div class="grid--cell ai-center p8 ba bc-yellow-500">Yellow 500</div>
429+
<div class="grid--cell ai-center p8 ba bc-yellow-400">Yellow 400</div>
430+
<div class="grid--cell ai-center p8 ba bc-yellow-300">Yellow 300</div>
431+
<div class="grid--cell ai-center p8 ba bc-yellow-200">Yellow 200</div>
432+
<div class="grid--cell ai-center p8 ba bc-yellow-100">Yellow 100</div>
433+
<div class="grid--cell ai-center p8 ba bc-yellow-050">Yellow 50</div>
338434
</div>
339435
</div>
340436
</div>

0 commit comments

Comments
 (0)