style(css): fix sass linter errors and add descriptions to css files

core/.sass-lint.yml

@@ -11,10 +11,12 @@
 files:
   include: 'src/**/*.s+(a|c)ss'
   ignore:
+    - 'src/css/flex-utils.scss'
+    - 'src/css/normalize.scss'
+    - 'src/css/text-alignment.scss'
     - 'src/themes/ionic.functions.color.scss'
     - 'src/themes/ionic.mixins.scss'
     - 'src/themes/license.scss'
-    - 'src/themes/normalize.scss'
     - 'src/themes/util.scss'
     - 'src/themes/version.scss'
     - 'src/platform/cordova.*.scss'

core/.scss-lint.yml

@@ -8,10 +8,12 @@ scss_files: 'src/**/*.scss'
 
 exclude:
   - '*.css'
+  - 'src/css/flex-utils.scss'
+  - 'src/css/normalize.scss'
+  - 'src/css/text-alignment.scss'
   - 'src/themes/ionic.functions.color.scss'
   - 'src/themes/ionic.mixins.scss'
   - 'src/themes/license.scss'
-  - 'src/themes/normalize.scss'
   - 'src/themes/util.scss'
   - 'src/themes/version.scss'
   - 'src/platform/cordova.*.scss'

core/src/css/colors.scss

@@ -1,5 +1,10 @@
 @import "../themes/ionic.globals";
 
+// Ionic Colors
+// --------------------------------------------------
+// Generates the color classes and variables based on the
+// colors map
+
 @mixin generate-color($color-name) {
   $value: map-get($colors, $color-name);
 

core/src/css/flex-utils.scss

@@ -1,4 +1,9 @@
-// Column Alignment
+// Flex Utilities
+// --------------------------------------------------
+// Creates flex attributes to align flex containers
+// and items
+
+// Align Self
 // --------------------------------------------------
 
 [align-self-start] {
@@ -22,7 +27,7 @@
 }
 
 
-// Column Wrap
+// Flex Wrap
 // --------------------------------------------------
 
 [nowrap] {

core/src/css/float-elements.scss

@@ -1,8 +1,10 @@
 @import "../themes/ionic.globals";
 @import "../themes/ionic.mixins";
 
+// Float Elements
+// --------------------------------------------------
+// Creates float attributes based on screen size
 
-// Creates text transform attributes based on screen size
 @each $breakpoint in map-keys($screen-breakpoints) {
   $infix: breakpoint-infix($breakpoint, $screen-breakpoints);
 

core/src/css/padding.scss

@@ -1,9 +1,18 @@
 @import "../themes/ionic.globals";
 @import "../themes/ionic.mixins";
 
+
+// Element Space
+// --------------------------------------------------
+// Creates padding and margin attributes to be used on
+// any element
+
 $padding: var(--ion-padding, 16px);
 $margin: var(--ion-margin, 16px);
 
+// Padding
+// --------------------------------------------------
+
 [no-padding] {
   @include padding(0);
 
@@ -61,10 +70,10 @@ $margin: var(--ion-margin, 16px);
 }
 
 
-// Content Margin
+// Margin
 // --------------------------------------------------
 
-ion-app [no-margin] {
+[no-margin] {
   @include margin(0);
 }
 
@@ -105,4 +114,3 @@ ion-app [no-margin] {
 [margin-horizontal] {
   @include margin-horizontal($margin);
 }
-

core/src/css/structure.scss

@@ -1,6 +1,11 @@
 @import "../themes/ionic.globals";
 @import "../themes/ionic.mixins";
 
+
+// Structure
+// --------------------------------------------------
+// Adds structural css to the native html elements
+
 * {
   box-sizing: border-box;
 
@@ -45,5 +50,6 @@ body {
 }
 
 [hidden] {
+  // scss-lint:disable ImportantRule
   display: none !important;
 }

core/src/css/text-alignment.scss

@@ -1,8 +1,10 @@
 @import "../themes/ionic.globals";
 @import "../themes/ionic.mixins";
 
-
+// Text Alignment
+// --------------------------------------------------
 // Creates text alignment attributes based on screen size
+
 @each $breakpoint in map-keys($screen-breakpoints) {
   $infix: breakpoint-infix($breakpoint, $screen-breakpoints);
 
@@ -34,12 +36,10 @@
     }
 
     [text#{$infix}-nowrap] {
-      // scss-lint:disable ImportantRule
       white-space: nowrap !important;
     }
 
     [text#{$infix}-wrap] {
-      // scss-lint:disable ImportantRule
       white-space: normal !important;
     }
   }

core/src/css/text-transformation.scss

@@ -1,8 +1,10 @@
 @import "../themes/ionic.globals";
 @import "../themes/ionic.mixins";
 
-
+// Text Transformation
+// --------------------------------------------------
 // Creates text transform attributes based on screen size
+
 @each $breakpoint in map-keys($screen-breakpoints) {
   $infix: breakpoint-infix($breakpoint, $screen-breakpoints);
 

core/src/css/typography.scss

@@ -1,7 +1,7 @@
 @import "../themes/ionic.globals";
 @import "../themes/ionic.mixins";
 
-// App Typography
+// Typography
 // --------------------------------------------------
 
 /// @prop - Font weight of all headings
@@ -44,8 +44,8 @@ $h6-font-size:                 calc(#{$h1-font-size} - #{$h-step} * 5) !default;
 }
 
 a {
-  background-color: transparent;
   color: ion-color(primary, base);
+  background-color: transparent;
 }
 
 h1,