Skip to content

Commit

Permalink
Migrate Less to Sass
Browse files Browse the repository at this point in the history
  • Loading branch information
anselmbradford committed Jul 10, 2024
1 parent 8b5f6f4 commit 8b73130
Show file tree
Hide file tree
Showing 569 changed files with 7,161 additions and 1,968 deletions.
8 changes: 4 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,11 +32,11 @@ npm install @cfpb/cfpb-design-system

Import individual Less stylesheets or the entire design system into your project:

```less
@import '@cfpb/cfpb-buttons/src/cfpb-buttons.less';
@import '@cfpb/cfpb-typography/src/cfpb-typography.less';
```scss
@import '@cfpb/cfpb-buttons/src/cfpb-buttons.scss';
@import '@cfpb/cfpb-typography/src/cfpb-typography.scss';
// or
@import '@cfpb/cfpb-design-system/src/cfpb-design-system.less';
@import '@cfpb/cfpb-design-system/src/cfpb-design-system.scss';

// the rest of your stylesheet...
```
Expand Down
File renamed without changes.
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
@use 'sass:math';
@import '@cfpb/cfpb-core/src/vars';

/* Color swatches for Identity/Color page
========================================================================== */

.swatches-container--primary {
.grid__nested-col-group();
@include u-grid-nested-col-group;
}

.swatches--primary {
.grid__column( 9.4 );
@include u-grid-column(9.4);
}

.swatch {
Expand Down Expand Up @@ -50,30 +53,30 @@
/* Small tablet (600px) */
@media only screen and (min-width: 37.5em) {
.swatches {
.grid__nested-col-group();
@include u-grid-nested-col-group;
}
.swatch {
.grid__column( 6 );
@include u-grid-column(6);

th {
width: unit(70px / @base-font-size-px, em);
width: math.div(70px, $base-font-size-px) + em;
}
}
}

/* Landscape tablet/netbook/laptop (1024px) */
@media only screen and (min-width: 64em) {
.swatch--secondary {
.grid__column( 3 );
@include u-grid-column(3);
}

.swatch--primary {
.grid__column( 4 );
@include u-grid-column(4);
}
}

// prettier-ignore
@colors: 'beige',
$colors: 'beige',
'beige-30',
'beige-60',
'green-dark',
Expand Down Expand Up @@ -191,24 +194,17 @@
'white';

// Set up looping mixin
.color-swatch-loop( @index ) when ( @index > 0 ) {
// Retrieve the next variable name from the @colors array
@name: e(extract(@colors, @index));
@each $color in $colors {
// Output the `.swatch__field--color` rule
.swatch__field--@{name} {
.swatch__field--#{$color} {
/* prettier-ignore */
background: ~"var(--@{name})";
background: var(--#{$color});
}
// Call the next iteration of the loop
.color-swatch-loop( @index - 1 );
}

// Initiate loop
.color-swatch-loop( length( @colors ) );

.color-table {
width: 100%;
margin-bottom: unit(45px / @base-font-size-px, em);
margin-bottom: math.div(45px, $base-font-size-px) + em;

.swatch__field {
width: 30%;
Expand Down
File renamed without changes.
9 changes: 0 additions & 9 deletions docs/assets/css/global-eyebrow.less

This file was deleted.

14 changes: 14 additions & 0 deletions docs/assets/css/global-eyebrow.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
@use 'sass:math';
@import '@cfpb/cfpb-core/src/vars';
@import '@cfpb/cfpb-grid/src/cfpb-grid';

// Taken from global-eyebrow.scss in cfgov.
.m-global-eyebrow {
font-size: math.div(12px, $base-font-size-px) + em;
padding-top: math.div(math.div($grid-gutter-width, 3), $base-font-size-px) +
em;
padding-bottom: math.div(math.div($grid-gutter-width, 3), $base-font-size-px) +
em;
background: var(--gray-5);
border-bottom: 1px solid var(--gray-40);
}
131 changes: 0 additions & 131 deletions docs/assets/css/grid-demo.less

This file was deleted.

86 changes: 86 additions & 0 deletions docs/assets/css/grid-demo.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
@use 'sass:math';

/* ==========================================================================
Grid Demo
Classes used by the cf-grid demo
========================================================================== */

.col {
background-color: var(--gray-5);

> div {
background-color: var(--gray-10);
font-weight: bold;
text-align: center;
margin-bottom: math.div(15px, $base-font-size-px) + em;
}
}

@media (min-width: 720px) {
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
margin-bottom: 15px;
}

.col-1 {
@include u-grid-column(1);
}

.col-2 {
@include u-grid-column(2);
}

.col-3 {
@include u-grid-column(3);
}

.col-4 {
@include u-grid-column(4);
}

.col-5 {
@include u-grid-column(5);
}

.col-6 {
@include u-grid-column(6);
}

.col-7 {
@include u-grid-column(7);
}

.col-8 {
@include u-grid-column(8);
}

.col-9 {
@include u-grid-column(9);
}

.col-10 {
@include u-grid-column(10);
}

.col-11 {
@include u-grid-column(11);
}

.col-12 {
@include u-grid-column(12);
}
}

.nested {
@include u-grid-nested-col-group;
}
Loading

0 comments on commit 8b73130

Please sign in to comment.