diff --git a/core/.sass-lint.yml b/core/.sass-lint.yml index 536461c2b1..349af87614 100644 --- a/core/.sass-lint.yml +++ b/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' diff --git a/core/.scss-lint.yml b/core/.scss-lint.yml index 033c96f258..ec00d9971a 100644 --- a/core/.scss-lint.yml +++ b/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' diff --git a/core/src/css/colors.scss b/core/src/css/colors.scss index 54cc0d159e..2f2c3d1700 100644 --- a/core/src/css/colors.scss +++ b/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); diff --git a/core/src/css/flex-utils.scss b/core/src/css/flex-utils.scss index 59a3c52f57..3e373bb3bb 100644 --- a/core/src/css/flex-utils.scss +++ b/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] { diff --git a/core/src/css/float-elements.scss b/core/src/css/float-elements.scss index 8dd6a2021e..a778f8e494 100644 --- a/core/src/css/float-elements.scss +++ b/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); diff --git a/core/src/css/padding.scss b/core/src/css/padding.scss index 74821b912f..e9522a86dc 100644 --- a/core/src/css/padding.scss +++ b/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); } - diff --git a/core/src/css/structure.scss b/core/src/css/structure.scss index daa5bdcd3f..e1f458c3ab 100644 --- a/core/src/css/structure.scss +++ b/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; } diff --git a/core/src/css/text-alignment.scss b/core/src/css/text-alignment.scss index 486013f088..e4711ff2e2 100644 --- a/core/src/css/text-alignment.scss +++ b/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,13 +36,11 @@ } [text#{$infix}-nowrap] { - // scss-lint:disable ImportantRule white-space: nowrap !important; } [text#{$infix}-wrap] { - // scss-lint:disable ImportantRule white-space: normal !important; } } -} \ No newline at end of file +} diff --git a/core/src/css/text-transformation.scss b/core/src/css/text-transformation.scss index 82eb5a8943..aa0c3742a4 100644 --- a/core/src/css/text-transformation.scss +++ b/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); diff --git a/core/src/css/typography.scss b/core/src/css/typography.scss index 5d5c574586..d228f072ac 100644 --- a/core/src/css/typography.scss +++ b/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,