-
Notifications
You must be signed in to change notification settings - Fork 772
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(core): add static scss mixin (#940)
Fixes #783
- Loading branch information
1 parent
1548727
commit ffd8331
Showing
13 changed files
with
142 additions
and
465 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,76 @@ | ||
@charset "UTF-8"; | ||
|
||
// Non-overlapping Material Design breakpoints | ||
// @type map | ||
$breakpoints: ( | ||
xs: ( | ||
begin: 0, | ||
end: 599px | ||
), | ||
sm: ( | ||
begin: 600px, | ||
end: 959px | ||
), | ||
md: ( | ||
begin: 960px, | ||
end: 1279px | ||
), | ||
lg: ( | ||
begin: 1280px, | ||
end: 1919px | ||
), | ||
xl: ( | ||
begin: 1920px, | ||
end: 5000px | ||
), | ||
) !default; | ||
|
||
// Overlapping breakpoints that are greater than defined | ||
// Material Design breakpoints | ||
// @type map | ||
$overlapping-gt: ( | ||
xs: 600px, | ||
sm: 960px, | ||
md: 1280px, | ||
lg: 1920px, | ||
) !default; | ||
|
||
// Overlapping breakpoints that are less than defined | ||
// Material Design breakpoints | ||
// @type map | ||
$overlapping-lt: ( | ||
sm: 599px, | ||
md: 959px, | ||
lg: 1279px, | ||
xl: 1919px, | ||
) !default; | ||
|
||
|
||
// Media Query Mixin, takes a breakpoint and returns a wrapping | ||
// media query statement | ||
// e.g. | ||
// | ||
// @include layout-bp(xs) { | ||
// background-color: red; | ||
// } | ||
// | ||
// becomes | ||
// | ||
// @media (min-width: 0px) and (max-width: 599px) { | ||
// background-color: red; | ||
// } | ||
@mixin layout-bp($bp) { | ||
@if map-has-key($breakpoints, $bp) { | ||
$min: map-get(map-get($breakpoints, $bp), begin); | ||
$max: map-get(map-get($breakpoints, $bp), end); | ||
@media (min-width: $min) and (max-width: $max) { @content; } | ||
} | ||
@else if map-has-key($overlapping-gt, $bp) { | ||
$min: map-get($breakpoints, $bp); | ||
@media (min-width: $min) { @content; } | ||
} | ||
@else if map-has-key($overlapping-lt, $bp) { | ||
$max: map-get($breakpoints, $bp); | ||
@media (max-width: $max) { @content; } | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,51 +1,21 @@ | ||
import {task} from 'gulp'; | ||
import {execNodeTask} from '../util/task_helpers'; | ||
import {join} from 'path'; | ||
import {buildConfig} from 'lib-build-tools'; | ||
import {red} from 'chalk'; | ||
|
||
// These types lack of type definitions | ||
const madge = require('madge'); | ||
import {execNodeTask} from '../util/task-helpers'; | ||
|
||
/** Glob that matches all SCSS or CSS files that should be linted. */ | ||
const stylesGlob = '+(tools|src)/**/!(*.bundle).+(css|scss)'; | ||
const styleGlob = 'src/lib/**/*.+(css|scss)'; | ||
|
||
/** List of flags that will passed to the different TSLint tasks. */ | ||
const tsLintBaseFlags = ['-c', 'tslint.json', '--project', './tsconfig.json']; | ||
|
||
/** Path to the output of the Flex-Layout package. */ | ||
const libOutPath = join(buildConfig.outputDir, 'packages', 'flex-layout'); | ||
|
||
task('lint', ['tslint', 'stylelint', 'madge']); | ||
|
||
|
||
task('lint', ['tslint', 'stylelint']); | ||
|
||
/** Task to lint Angular Flex-Layout's scss stylesheets. */ | ||
/** Task to lint Angular Layout's scss stylesheets. */ | ||
task('stylelint', execNodeTask( | ||
'stylelint', [stylesGlob, '--config', 'stylelint-config.json', '--syntax', 'scss'] | ||
'stylelint', [styleGlob, '--config', 'stylelint-config.json', '--syntax', 'scss'] | ||
)); | ||
|
||
/** Task to run TSLint against the e2e/ and src/ directories. */ | ||
task('tslint', execNodeTask('tslint', tsLintBaseFlags)); | ||
|
||
/** Task that automatically fixes TSLint warnings. */ | ||
task('tslint:fix', execNodeTask('tslint', [...tsLintBaseFlags, '--fix'])); | ||
|
||
/** Task that runs madge to detect circular dependencies. */ | ||
task('madge', ['flex-layout:clean-build'], () => { | ||
madge([libOutPath]).then((res: any) => { | ||
const circularModules = res.circular(); | ||
|
||
if (circularModules.length) { | ||
console.error(); | ||
console.error(red(`Madge found modules with circular dependencies.`)); | ||
console.error(formatMadgeCircularModules(circularModules)); | ||
console.error(); | ||
} | ||
}); | ||
}); | ||
|
||
/** Returns a string that formats the graph of circular modules. */ | ||
function formatMadgeCircularModules(circularModules: string[][]): string { | ||
return circularModules.map((modulePaths: string[]) => `\n - ${modulePaths.join(' > ')}`).join(''); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
Oops, something went wrong.