Replace all CSS comments with Sass comments

markteekman · Nov 25, 2021 · f4c0f79 · f4c0f79
1 parent adb834a
commit f4c0f79
Show file tree

Hide file tree

Showing 26 changed files with 141 additions and 217 deletions.
diff --git a/src/styles/base/_auto-grid.scss b/src/styles/base/_auto-grid.scss
@@ -1,11 +1,8 @@
-/*
- | -------------------------------------------------------------
- |	--> auto-grid
- | -------------------------------------------------------------
- |
- | 	Easy to implement column layouts with display grid.
- |
-*/
+// | -------------------------------------------------------------
+// | > Auto Grid
+// | -------------------------------------------------------------
+// |   Easy to implement column layouts with display grid.
+// | -------------------------------------------------------------
 
 // used variables and mixins
 @use "breakpoint" as *;

diff --git a/src/styles/base/_breakpoint.scss b/src/styles/base/_breakpoint.scss
@@ -1,11 +1,9 @@
-/*
- | -------------------------------------------------------------
- |	--> breakpoint
- | -------------------------------------------------------------
- |
- | 	Breakpoint mixin used in the other base files.
- |
-*/
+// | -------------------------------------------------------------
+// | > Breakpoint
+// | -------------------------------------------------------------
+// |   Breakpoint mixin used in the other base files or in a
+// |   project.
+// | -------------------------------------------------------------
 
 // breakpoints map
 $breakpoints: (

diff --git a/src/styles/base/_color.scss b/src/styles/base/_color.scss
@@ -1,12 +1,9 @@
-/*
- | -------------------------------------------------------------
- |	--> color
- | -------------------------------------------------------------
- |
- | 	Color map with HSL values. Used to create Custom Properties
- |  in _root.scss.
- |
-*/
+// | -------------------------------------------------------------
+// | > Color
+// | -------------------------------------------------------------
+// |   Color map with HSL values. Used to create Custom
+// |   Properties in _root.scss.
+// | -------------------------------------------------------------
 
 $colors: (
   primary-clr: (

diff --git a/src/styles/base/_elevation.scss b/src/styles/base/_elevation.scss
@@ -1,11 +1,8 @@
-/*
- | -------------------------------------------------------------
- |	--> elevation
- | -------------------------------------------------------------
- |
- |  Box-shadow mixins used as tokens in _tokens.scss
- |
-*/
+// | -------------------------------------------------------------
+// | > Elevation
+// | -------------------------------------------------------------
+// |   Box-shadow mixins used as tokens in _utility.scss.
+// | -------------------------------------------------------------
 
 // use to override other elevations
 @mixin elevation-000 {

diff --git a/src/styles/base/_font.scss b/src/styles/base/_font.scss
@@ -1,11 +1,8 @@
-/*
- | -------------------------------------------------------------
- |	--> font
- | -------------------------------------------------------------
- |
- | 	Default font declarations and sizes.
- |
-*/
+// | -------------------------------------------------------------
+// | > Font
+// | -------------------------------------------------------------
+// |   Default font declarations and sizes.
+// | -------------------------------------------------------------
 
 // used variables and mixins
 @use "breakpoint" as *;

diff --git a/src/styles/base/_grid.scss b/src/styles/base/_grid.scss
@@ -1,15 +1,12 @@
-/*
- | -------------------------------------------------------------
- |	--> grid
- | -------------------------------------------------------------
- |
- | 	This file contains all the settings for making flexible
- |	grids. Just apply a combination of these classes to build
- | 	your own grid in the front-end.
- |
- |  Docs: https://www.markteekman.nl/project/flexbox-grid
- |
-*/
+// | -------------------------------------------------------------
+// | > Grid
+// | -------------------------------------------------------------
+// |   This file contains all the settings for making flexible
+// |   grids. Just apply a combination of these classes to build
+// |   your own grid in the front-end.
+// |
+// |   Docs: https://www.markteekman.nl/project/flexbox-grid
+// | -------------------------------------------------------------
 
 // used variables and mixins
 @use "sass:math";

diff --git a/src/styles/base/_list.scss b/src/styles/base/_list.scss
@@ -1,12 +1,9 @@
-/*
- | -------------------------------------------------------------
- |	--> lists
- | -------------------------------------------------------------
- |
- | 	A set of defaults styles for standard ordered and unordered
- |  lists.
- |
-*/
+// | -------------------------------------------------------------
+// | > Lists
+// | -------------------------------------------------------------
+// |   A set of default styles for standard ordered and
+// |   unordered lists.
+// | -------------------------------------------------------------
 
 // used variables and mixins
 @use "breakpoint" as *;

diff --git a/src/styles/base/_outline.scss b/src/styles/base/_outline.scss
@@ -1,12 +1,9 @@
-/*
- | -------------------------------------------------------------
- |	--> outline
- | -------------------------------------------------------------
- |
- | 	Outline mixin to help with (tab)focus of different elements
- | 	on the page.
- |
-*/
+// | -------------------------------------------------------------
+// | > Outline
+// | -------------------------------------------------------------
+// |   Outline mixin to help with (tab)focus of different
+// |   elements on the page.
+// | -------------------------------------------------------------
 
 @mixin outline {
   outline: 2px dotted black;

diff --git a/src/styles/base/_reset.scss b/src/styles/base/_reset.scss
@@ -1,12 +1,9 @@
-/*
- | -------------------------------------------------------------
- |	--> reset
- | -------------------------------------------------------------
- |
- | 	A set of reset declarations to prevent inconsistencies
- | 	between browser vendors.
- |
-*/
+// | -------------------------------------------------------------
+// | > Reset
+// | -------------------------------------------------------------
+// |   A set of reset declarations to prevent inconsistencies
+// |   between browser vendors.
+// | -------------------------------------------------------------
 
 // set box sizing and scroll behaviour
 html {

diff --git a/src/styles/base/_root.scss b/src/styles/base/_root.scss
@@ -1,11 +1,9 @@
-/*
- | -------------------------------------------------------------
- |	--> root
- | -------------------------------------------------------------
- |
- | 	Sets all custom properties (variables) to the root element.
- |
-*/
+// | -------------------------------------------------------------
+// | > Root
+// | -------------------------------------------------------------
+// |   Sets all custom properties (variables) to the root
+// |   element.
+// | -------------------------------------------------------------
 
 @use "color" as *;
 

diff --git a/src/styles/base/_size.scss b/src/styles/base/_size.scss
@@ -1,11 +1,8 @@
-/*
- | -------------------------------------------------------------
- |	--> size
- | -------------------------------------------------------------
- |
- |  Size mixins used in _tokens.scss and other base files.
- |
-*/
+// | -------------------------------------------------------------
+// | > Size
+// | -------------------------------------------------------------
+// |   Size mixins used in _utility.scss and other base files.
+// | -------------------------------------------------------------
 
 // size mixins
 @mixin size-10 {

diff --git a/src/styles/base/_space.scss b/src/styles/base/_space.scss
@@ -1,11 +1,9 @@
-/*
- | -------------------------------------------------------------
- |	--> space
- | -------------------------------------------------------------
- |
- |  Space variables used in _tokens.scss and other base files.
- |
-*/
+// | -------------------------------------------------------------
+// | > Space
+// | -------------------------------------------------------------
+// |   Space variables used in _utility.scss and other base
+// |   files.
+// | -------------------------------------------------------------
 
 // space variables
 $space-2: 0.125rem;

diff --git a/src/styles/base/_utility.scss b/src/styles/base/_utility.scss
@@ -1,12 +1,8 @@
-/*
- | -------------------------------------------------------------
- |  --> utility
- | -------------------------------------------------------------
- |
- | 	This file contains all the utility tokens which are distilled
- |  from bases styles.
- |
-*/
+// | -------------------------------------------------------------
+// | > Utility
+// | -------------------------------------------------------------
+// |   This file contains all the utility tokens.
+// | -------------------------------------------------------------
 
 @use 'utilities/align-horizontal';
 @use 'utilities/align-vertical';

diff --git a/src/styles/base/utilities/_align-horizontal.scss b/src/styles/base/utilities/_align-horizontal.scss
@@ -1,11 +1,8 @@
-/*
- | -------------------------------------------------------------
- |  --> align horizontal
- | -------------------------------------------------------------
- |
- | 	Align horizontal utility tokens.
- |
-*/
+// | -------------------------------------------------------------
+// | > Align Horizontal
+// | -------------------------------------------------------------
+// |   Align Horizontal utility token.
+// | -------------------------------------------------------------
 
 .align-horizontal {
   display: flex;

diff --git a/src/styles/base/utilities/_align-vertical.scss b/src/styles/base/utilities/_align-vertical.scss
@@ -1,11 +1,8 @@
-/*
- | -------------------------------------------------------------
- |  --> align vertical
- | -------------------------------------------------------------
- |
- | 	Align vertical utility tokens.
- |
-*/
+// | -------------------------------------------------------------
+// | > Align Vertical
+// | -------------------------------------------------------------
+// |   Align Vertical utility token.
+// | -------------------------------------------------------------
 
 .align-vertical {
   display: flex;

diff --git a/src/styles/base/utilities/_colors.scss b/src/styles/base/utilities/_colors.scss
@@ -1,11 +1,8 @@
-/*
- | -------------------------------------------------------------
- |  --> Colors
- | -------------------------------------------------------------
- |
- | 	Colors utility tokens.
- |
-*/
+// | -------------------------------------------------------------
+// | > Colors
+// | -------------------------------------------------------------
+// |   Colors utility token.
+// | -------------------------------------------------------------
 
 .color-neutral {
   background-color: var(--neutral-background);

diff --git a/src/styles/base/utilities/_contents.scss b/src/styles/base/utilities/_contents.scss
@@ -1,11 +1,8 @@
-/*
- | -------------------------------------------------------------
- |  --> Contents
- | -------------------------------------------------------------
- |
- | 	Contents utility token.
- |
-*/
+// | -------------------------------------------------------------
+// | > Contents
+// | -------------------------------------------------------------
+// |   Contents utility token.
+// | -------------------------------------------------------------
 
 .contents {
   display: contents;

diff --git a/src/styles/base/utilities/_elevations.scss b/src/styles/base/utilities/_elevations.scss
@@ -1,11 +1,8 @@
-/*
- | -------------------------------------------------------------
- |  --> elevation
- | -------------------------------------------------------------
- |
- | 	Elevation utility tokens.
- |
-*/
+// | -------------------------------------------------------------
+// | > Elevations
+// | -------------------------------------------------------------
+// |   Elevations utility token.
+// | -------------------------------------------------------------
 
 @use '../elevation' as *;
 

diff --git a/src/styles/base/utilities/_gutter-gap.scss b/src/styles/base/utilities/_gutter-gap.scss
@@ -1,11 +1,8 @@
-/*
- | -------------------------------------------------------------
- |  --> gutter gap
- | -------------------------------------------------------------
- |
- | 	Gutter gap utility tokens.
- |
-*/
+// | -------------------------------------------------------------
+// | > Gutter
+// | -------------------------------------------------------------
+// |   Gutter utility token.
+// | -------------------------------------------------------------
 
 .gap-small {
   gap: var(--gap-small);

diff --git a/src/styles/base/utilities/_margins.scss b/src/styles/base/utilities/_margins.scss
@@ -1,11 +1,8 @@
-/*
- | -------------------------------------------------------------
- |  --> margins
- | -------------------------------------------------------------
- |
- | 	Margins utility tokens.
- |
-*/
+// | -------------------------------------------------------------
+// | > Margins
+// | -------------------------------------------------------------
+// |   Margins utility token.
+// | -------------------------------------------------------------
 
 @use '../breakpoint' as *;
 @use '../space' as *;

diff --git a/src/styles/base/utilities/_paddings.scss b/src/styles/base/utilities/_paddings.scss
@@ -1,11 +1,8 @@
-/*
- | -------------------------------------------------------------
- |  --> padding
- | -------------------------------------------------------------
- |
- | 	Padding utility tokens.
- |
-*/
+// | -------------------------------------------------------------
+// | > Paddings
+// | -------------------------------------------------------------
+// |   Paddings utility token.
+// | -------------------------------------------------------------
 
 @use '../breakpoint' as *;
 @use '../space' as *;

diff --git a/src/styles/base/utilities/_size-content.scss b/src/styles/base/utilities/_size-content.scss
@@ -1,11 +1,8 @@
-/*
- | -------------------------------------------------------------
- |  --> size content
- | -------------------------------------------------------------
- |
- | 	Size content utility token.
- |
-*/
+// | -------------------------------------------------------------
+// | > Size Content
+// | -------------------------------------------------------------
+// |   Size Content utility token.
+// | -------------------------------------------------------------
 
 @use '../breakpoint' as *;
 @use '../size' as *;