Skip to content

Commit 34e2a3a

Browse files
claudia-romanosebastiano-guerriero
claudia-romano
and
sebastiano-guerriero
committed
Added new utility classes
- Added vertical alignment utility classes; - Added width/height utility classes; - Added text-nowrap utility class. Co-Authored-By: Sebastiano Guerriero <sebastiano-guerriero@users.noreply.github.com>
1 parent 733f9ec commit 34e2a3a

File tree

5 files changed

+147
-97
lines changed

5 files changed

+147
-97
lines changed

‎main/assets/css/base/_icons.scss

+1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
width: 1em;
1818
line-height: 1;
1919
flex-shrink: 0;
20+
max-width: initial;
2021
}
2122

2223
// icon size

‎main/assets/css/base/_util.scss

+142-94
Original file line numberDiff line numberDiff line change
@@ -318,101 +318,101 @@
318318
.margin-left-auto { margin-left: auto; }
319319

320320
.margin-x-xxxxs {
321-
margin-left: var(--space-xxxxs);
322-
margin-right: var(--space-xxxxs);
321+
margin-left: var(--space-xxxxs);
322+
margin-right: var(--space-xxxxs);
323323
}
324324
.margin-x-xxxs {
325-
margin-left: var(--space-xxxs);
326-
margin-right: var(--space-xxxs);
325+
margin-left: var(--space-xxxs);
326+
margin-right: var(--space-xxxs);
327327
}
328328
.margin-x-xxs {
329-
margin-left: var(--space-xxs);
330-
margin-right: var(--space-xxs);
329+
margin-left: var(--space-xxs);
330+
margin-right: var(--space-xxs);
331331
}
332332
.margin-x-xs {
333-
margin-left: var(--space-xs);
334-
margin-right: var(--space-xs);
333+
margin-left: var(--space-xs);
334+
margin-right: var(--space-xs);
335335
}
336336
.margin-x-sm {
337-
margin-left: var(--space-sm);
338-
margin-right: var(--space-sm);
337+
margin-left: var(--space-sm);
338+
margin-right: var(--space-sm);
339339
}
340340
.margin-x-md {
341-
margin-left: var(--space-md);
342-
margin-right: var(--space-md);
341+
margin-left: var(--space-md);
342+
margin-right: var(--space-md);
343343
}
344344
.margin-x-lg {
345-
margin-left: var(--space-lg);
346-
margin-right: var(--space-lg);
345+
margin-left: var(--space-lg);
346+
margin-right: var(--space-lg);
347347
}
348348
.margin-x-xl {
349-
margin-left: var(--space-xl);
350-
margin-right: var(--space-xl);
349+
margin-left: var(--space-xl);
350+
margin-right: var(--space-xl);
351351
}
352352
.margin-x-xxl {
353-
margin-left: var(--space-xxl);
354-
margin-right: var(--space-xxl);
353+
margin-left: var(--space-xxl);
354+
margin-right: var(--space-xxl);
355355
}
356356
.margin-x-xxxl {
357-
margin-left: var(--space-xxxl);
358-
margin-right: var(--space-xxxl);
357+
margin-left: var(--space-xxxl);
358+
margin-right: var(--space-xxxl);
359359
}
360360
.margin-x-xxxxl {
361-
margin-left: var(--space-xxxxl);
362-
margin-right: var(--space-xxxxl);
361+
margin-left: var(--space-xxxxl);
362+
margin-right: var(--space-xxxxl);
363363
}
364364
.margin-x-auto {
365365
margin-left: auto;
366366
margin-right: auto;
367367
}
368368

369369
.margin-y-xxxxs {
370-
margin-top: var(--space-xxxxs);
371-
margin-bottom: var(--space-xxxxs);
370+
margin-top: var(--space-xxxxs);
371+
margin-bottom: var(--space-xxxxs);
372372
}
373373
.margin-y-xxxs {
374-
margin-top: var(--space-xxxs);
375-
margin-bottom: var(--space-xxxs);
374+
margin-top: var(--space-xxxs);
375+
margin-bottom: var(--space-xxxs);
376376
}
377377
.margin-y-xxs {
378-
margin-top: var(--space-xxs);
379-
margin-bottom: var(--space-xxs);
378+
margin-top: var(--space-xxs);
379+
margin-bottom: var(--space-xxs);
380380
}
381381
.margin-y-xs {
382-
margin-top: var(--space-xs);
383-
margin-bottom: var(--space-xs);
382+
margin-top: var(--space-xs);
383+
margin-bottom: var(--space-xs);
384384
}
385385
.margin-y-sm {
386-
margin-top: var(--space-sm);
387-
margin-bottom: var(--space-sm);
386+
margin-top: var(--space-sm);
387+
margin-bottom: var(--space-sm);
388388
}
389389
.margin-y-md {
390-
margin-top: var(--space-md);
391-
margin-bottom: var(--space-md);
390+
margin-top: var(--space-md);
391+
margin-bottom: var(--space-md);
392392
}
393393
.margin-y-lg {
394-
margin-top: var(--space-lg);
395-
margin-bottom: var(--space-lg);
394+
margin-top: var(--space-lg);
395+
margin-bottom: var(--space-lg);
396396
}
397397
.margin-y-xl {
398-
margin-top: var(--space-xl);
399-
margin-bottom: var(--space-xl);
398+
margin-top: var(--space-xl);
399+
margin-bottom: var(--space-xl);
400400
}
401401
.margin-y-xxl {
402-
margin-top: var(--space-xxl);
403-
margin-bottom: var(--space-xxl);
402+
margin-top: var(--space-xxl);
403+
margin-bottom: var(--space-xxl);
404404
}
405405
.margin-y-xxxl {
406-
margin-top: var(--space-xxxl);
407-
margin-bottom: var(--space-xxxl);
406+
margin-top: var(--space-xxxl);
407+
margin-bottom: var(--space-xxxl);
408408
}
409409
.margin-y-xxxxl {
410-
margin-top: var(--space-xxxxl);
411-
margin-bottom: var(--space-xxxxl);
410+
margin-top: var(--space-xxxxl);
411+
margin-bottom: var(--space-xxxxl);
412412
}
413413
.margin-y-auto {
414-
margin-top: auto;
415-
margin-bottom: auto;
414+
margin-top: auto;
415+
margin-bottom: auto;
416416
}
417417

418418
@include breakpoint(xs, "not all") {
@@ -507,101 +507,101 @@
507507
.padding-left-component { padding-left: var(--component-padding); }
508508

509509
.padding-x-xxxxs {
510-
padding-left: var(--space-xxxxs);
511-
padding-right: var(--space-xxxxs);
510+
padding-left: var(--space-xxxxs);
511+
padding-right: var(--space-xxxxs);
512512
}
513513
.padding-x-xxxs {
514-
padding-left: var(--space-xxxs);
515-
padding-right: var(--space-xxxs);
514+
padding-left: var(--space-xxxs);
515+
padding-right: var(--space-xxxs);
516516
}
517517
.padding-x-xxs {
518-
padding-left: var(--space-xxs);
519-
padding-right: var(--space-xxs);
518+
padding-left: var(--space-xxs);
519+
padding-right: var(--space-xxs);
520520
}
521521
.padding-x-xs {
522-
padding-left: var(--space-xs);
523-
padding-right: var(--space-xs);
522+
padding-left: var(--space-xs);
523+
padding-right: var(--space-xs);
524524
}
525525
.padding-x-sm {
526-
padding-left: var(--space-sm);
527-
padding-right: var(--space-sm);
526+
padding-left: var(--space-sm);
527+
padding-right: var(--space-sm);
528528
}
529529
.padding-x-md {
530-
padding-left: var(--space-md);
531-
padding-right: var(--space-md);
530+
padding-left: var(--space-md);
531+
padding-right: var(--space-md);
532532
}
533533
.padding-x-lg {
534-
padding-left: var(--space-lg);
535-
padding-right: var(--space-lg);
534+
padding-left: var(--space-lg);
535+
padding-right: var(--space-lg);
536536
}
537537
.padding-x-xl {
538-
padding-left: var(--space-xl);
539-
padding-right: var(--space-xl);
538+
padding-left: var(--space-xl);
539+
padding-right: var(--space-xl);
540540
}
541541
.padding-x-xxl {
542-
padding-left: var(--space-xxl);
543-
padding-right: var(--space-xxl);
542+
padding-left: var(--space-xxl);
543+
padding-right: var(--space-xxl);
544544
}
545545
.padding-x-xxxl {
546-
padding-left: var(--space-xxxl);
547-
padding-right: var(--space-xxxl);
546+
padding-left: var(--space-xxxl);
547+
padding-right: var(--space-xxxl);
548548
}
549549
.padding-x-xxxxl {
550-
padding-left: var(--space-xxxxl);
551-
padding-right: var(--space-xxxxl);
550+
padding-left: var(--space-xxxxl);
551+
padding-right: var(--space-xxxxl);
552552
}
553553
.padding-x-component {
554-
padding-left: var(--component-padding);
555-
padding-right: var(--component-padding);
554+
padding-left: var(--component-padding);
555+
padding-right: var(--component-padding);
556556
}
557557

558558
.padding-y-xxxxs {
559-
padding-top: var(--space-xxxxs);
560-
padding-bottom: var(--space-xxxxs);
559+
padding-top: var(--space-xxxxs);
560+
padding-bottom: var(--space-xxxxs);
561561
}
562562
.padding-y-xxxs {
563-
padding-top: var(--space-xxxs);
564-
padding-bottom: var(--space-xxxs);
563+
padding-top: var(--space-xxxs);
564+
padding-bottom: var(--space-xxxs);
565565
}
566566
.padding-y-xxs {
567-
padding-top: var(--space-xxs);
568-
padding-bottom: var(--space-xxs);
567+
padding-top: var(--space-xxs);
568+
padding-bottom: var(--space-xxs);
569569
}
570570
.padding-y-xs {
571-
padding-top: var(--space-xs);
572-
padding-bottom: var(--space-xs);
571+
padding-top: var(--space-xs);
572+
padding-bottom: var(--space-xs);
573573
}
574574
.padding-y-sm {
575-
padding-top: var(--space-sm);
576-
padding-bottom: var(--space-sm);
575+
padding-top: var(--space-sm);
576+
padding-bottom: var(--space-sm);
577577
}
578578
.padding-y-md {
579-
padding-top: var(--space-md);
580-
padding-bottom: var(--space-md);
579+
padding-top: var(--space-md);
580+
padding-bottom: var(--space-md);
581581
}
582582
.padding-y-lg {
583-
padding-top: var(--space-lg);
584-
padding-bottom: var(--space-lg);
583+
padding-top: var(--space-lg);
584+
padding-bottom: var(--space-lg);
585585
}
586586
.padding-y-xl {
587-
padding-top: var(--space-xl);
588-
padding-bottom: var(--space-xl);
587+
padding-top: var(--space-xl);
588+
padding-bottom: var(--space-xl);
589589
}
590590
.padding-y-xxl {
591-
padding-top: var(--space-xxl);
592-
padding-bottom: var(--space-xxl);
591+
padding-top: var(--space-xxl);
592+
padding-bottom: var(--space-xxl);
593593
}
594594
.padding-y-xxxl {
595-
padding-top: var(--space-xxxl);
596-
padding-bottom: var(--space-xxxl);
595+
padding-top: var(--space-xxxl);
596+
padding-bottom: var(--space-xxxl);
597597
}
598598
.padding-y-xxxxl {
599-
padding-top: var(--space-xxxxl);
600-
padding-bottom: var(--space-xxxxl);
599+
padding-top: var(--space-xxxxl);
600+
padding-bottom: var(--space-xxxxl);
601601
}
602602
.padding-y-component {
603-
padding-top: var(--component-padding);
604-
padding-bottom: var(--component-padding);
603+
padding-top: var(--component-padding);
604+
padding-bottom: var(--component-padding);
605605
}
606606

607607
@include breakpoint(xs, "not all") {
@@ -626,6 +626,17 @@
626626

627627
// --------------------------------
628628

629+
// Vertical Alignment
630+
631+
// --------------------------------
632+
633+
.align-baseline { vertical-align: baseline; }
634+
.align-top { vertical-align: top; }
635+
.align-middle { vertical-align: middle; }
636+
.align-bottom { vertical-align: bottom; }
637+
638+
// --------------------------------
639+
629640
// Typography
630641

631642
// --------------------------------
@@ -643,6 +654,10 @@
643654
white-space: nowrap;
644655
}
645656

657+
.text-nowrap {
658+
white-space: nowrap;
659+
}
660+
646661
// text alignment
647662
.text-center { text-align: center; }
648663
.text-left { text-align: left; }
@@ -740,7 +755,40 @@
740755

741756
// --------------------------------
742757

758+
.width-xxxxs { width: 0.25rem; } // ~4px
759+
.width-xxxs { width: 0.5rem; } // ~8px
760+
.width-xxs { width: 0.75rem; } // ~12px
761+
.width-xs { width: 1rem; } // ~16px
762+
.width-sm { width: 1.5rem; } // ~24px
763+
.width-md { width: 2rem; } // ~32px
764+
.width-lg { width: 3rem; } // ~48px
765+
.width-xl { width: 4rem; } // ~64px
766+
.width-xxl { width: 6rem; } // ~96px
767+
.width-xxxl { width: 8rem; } // ~128px
768+
.width-xxxxl { width: 16rem; } // ~256px
769+
.width-25\% { width: 25%; }
770+
.width-33\% { width: calc(100% / 3); }
771+
.width-50\% { width: 50%; }
772+
.width-66\% { width: calc(100% / 1.5); }
773+
.width-75\% { width: 75%; }
743774
.width-100\% { width: 100%; }
775+
776+
.height-xxxxs { height: 0.25rem; } // ~4px
777+
.height-xxxs { height: 0.5rem; } // ~8px
778+
.height-xxs { height: 0.75rem; } // ~12px
779+
.height-xs { height: 1rem; } // ~16px
780+
.height-sm { height: 1.5rem; } // ~24px
781+
.height-md { height: 2rem; } // ~32px
782+
.height-lg { height: 3rem; } // ~48px
783+
.height-xl { height: 4rem; } // ~64px
784+
.height-xxl { height: 6rem; } // ~96px
785+
.height-xxxl { height: 8rem; } // ~128px
786+
.height-xxxxl { height: 16rem; } // ~256px
787+
.height-25\% { height: 25%; }
788+
.height-33\% { height: calc(100% / 3); }
789+
.height-50\% { height: 50%; }
790+
.height-66\% { height: calc(100% / 1.5); }
791+
.height-75\% { height: 75%; }
744792
.height-100\% { height: 100%; }
745793

746794
// --------------------------------

‎main/assets/css/style-fallback.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎main/assets/css/style.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "codyhouse-framework",
3-
"version": "2.1.6",
3+
"version": "2.1.7",
44
"description": "A lightweight front-end framework for building accessible, bespoke interfaces.",
55
"main": "index.js",
66
"keywords": [
@@ -38,6 +38,7 @@
3838
"postcss-calc": "^7.0.1",
3939
"postcss-css-variables": "git+https://github.com/CodyHouse/postcss-css-variables"
4040
},
41+
"homepage": "https://codyhouse.co",
4142
"repository": {
4243
"type": "git",
4344
"url": "git+https://github.com/CodyHouse/codyhouse-framework.git"

0 commit comments

Comments
 (0)