Added Less css pre-processing #392
Conversation
| }); | ||
|
|
||
| // Runs all the tasks of build with the exception of tests | ||
| grunt.registerTask('deploy', 'Prepares the project for deployment. Does not run unit tests', function () { | ||
| var concatSrc = 'src/**/*.js'; | ||
| grunt.task.run(['clean', 'lint', 'ngtemplates', 'concat', 'ngAnnotate', 'uglify:build', 'cssmin', 'copymain', 'ngdocs', 'clean:templates']); | ||
| grunt.task.run(['clean', 'lint', 'ngtemplates', 'concat', 'ngAnnotate', 'uglify:build', 'less', 'cssmin', 'copymain', 'ngdocs', 'clean:templates']); | ||
| }); |
There was a problem hiding this comment.
the less files should be added to the watch section so updates can be seen during development without rebuilding
There was a problem hiding this comment.
They are, there is a less task under the watch task.
There was a problem hiding this comment.
Ah sorry, I just saw it still watching styles//*.css and missed the less section. Might want to remove the styles//*.css from the all section
| @@ -0,0 +1,73 @@ | |||
| .card-pf-aggregate-status-alt { | |||
| .card-pf-body { | |||
| padding-bottom: 20px; | |||
There was a problem hiding this comment.
Should use variable here as in patternfly: (@grid-gutter-width / 2)
| margin: 20px 0 10px 0; | ||
| } | ||
| .card-pf-aggregate-status-count { | ||
| font-size: 24px; |
There was a problem hiding this comment.
Fonts should be expressed in terms of @font-size-base (@font-size-base * 2) in this case
| .input-group-btn { | ||
| .dropdown-menu>.selected>a { | ||
| background-color: @color-pf-blue !important; | ||
| border-color: #0076b7 !important; |
There was a problem hiding this comment.
This doesn't seem to be from the patternfly color palette, should it be?
| @@ -0,0 +1,12 @@ | |||
| .sort-pf { | |||
| .btn-link { | |||
| color: #252525; | |||
There was a problem hiding this comment.
This should be a palette color if possible
| @width100: 100%; | ||
| @width0: 0; | ||
| @height100: 100%; | ||
| @height0: 0; |
There was a problem hiding this comment.
I'm not sure these are worth having. Honestly, while reviewing I thought @width100 would be 100px so at minimum it is a bit confusing.
|
Hi Jeff, I'm sorry, but I don't have time to address these already-existing style issues. This PR was just a step in the right direction, and to pave the way for the pfCanvas contribution I'm making -which I'm trying to get done by Monday :-) Is that ok? Thanks,
|
|
@dtaylor113 That is fine. These issues, while they 'existed', were not able to be done correctly prior to using less because the variables are not available in css. Could we just get rid of the variables.less file and use those values straight up? |
|
Ok, no prob, I'll remove the varibles.less file :-) |
Replaced the rather large 'styles/angular-patternfly.css' with 'styles/angular-patternfly.less' (which contains all the @imports) and created several .less files in various component sub-directories.
This is In preparation of contributing the 'Canvas Drag & Drop' component from SUI to angular-patternfly. This new component does not exist in patternfly base ref. so the accompanying styles need to live in angular-patternfly until such time we decide to contribute it back to base patternfly. Base patternfly already uses .less, so this makes a future contribution easier.
Also updated the README with setup instructions for pfTableView