Skip to content

Commit 80e950a

Browse files
jeff-phillips-18jeff-phillips-18
authored
Merge pull request #392 from dtaylor113/less
Added Less css pre-processing
2 parents d92463b + ad92629 commit 80e950a

File tree

15 files changed

+598
-539
lines changed

15 files changed

+598
-539
lines changed

‎Gruntfile.js‎

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -65,12 +65,6 @@ module.exports = function (grunt) {
6565
dest: 'docs',
6666
expand: true
6767
},
68-
styles: {
69-
cwd: 'styles/',
70-
src: ['*.css', '!*.min.css'],
71-
dest: 'dist/styles',
72-
expand: true
73-
},
7468
img: {
7569
cwd: 'misc/',
7670
src: 'patternfly-orb.svg',
@@ -84,11 +78,22 @@ module.exports = function (grunt) {
8478
expand: true
8579
}
8680
},
81+
less: {
82+
patternfly: {
83+
files: {
84+
'dist/styles/angular-patternfly.css': 'styles/angular-patternfly.less'
85+
},
86+
options: {
87+
paths: ['src/less/'],
88+
strictMath: true
89+
}
90+
}
91+
},
8792
cssmin: {
8893
target: {
8994
files: [{
9095
expand: true,
91-
cwd: 'styles',
96+
cwd: 'dist/styles',
9297
src: ['*.css', '!*.min.css'],
9398
dest: 'dist/styles',
9499
ext: '.min.css'
@@ -265,6 +270,10 @@ module.exports = function (grunt) {
265270
files: ['Gruntfile.js'],
266271
tasks: ['eslint']
267272
},
273+
less: {
274+
files: ['**/*.less'],
275+
tasks: ['less']
276+
},
268277
test: {
269278
files: ['test/**/*.js'],
270279
tasks: ['test']
@@ -279,7 +288,7 @@ module.exports = function (grunt) {
279288
}
280289
});
281290

282-
grunt.registerTask('copymain', ['copy:docdata', 'copy:fa', 'copy:styles', 'copy:img']);
291+
grunt.registerTask('copymain', ['copy:docdata', 'copy:fa', 'copy:img']);
283292

284293
// You can specify which modules to build as arguments of the build task.
285294
grunt.registerTask('build', 'Create bootstrap build files', function () {
@@ -299,13 +308,13 @@ module.exports = function (grunt) {
299308
concatSrc = 'src/**/*.js';
300309
}
301310

302-
grunt.task.run(['clean', 'lint', 'test', 'ngtemplates', 'concat', 'ngAnnotate', 'uglify:build', 'cssmin', 'copymain', 'ngdocs', 'clean:templates']);
311+
grunt.task.run(['clean', 'lint', 'test', 'ngtemplates', 'concat', 'ngAnnotate', 'uglify:build', 'less', 'cssmin', 'copymain', 'ngdocs', 'clean:templates']);
303312
});
304313

305314
// Runs all the tasks of build with the exception of tests
306315
grunt.registerTask('deploy', 'Prepares the project for deployment. Does not run unit tests', function () {
307316
var concatSrc = 'src/**/*.js';
308-
grunt.task.run(['clean', 'lint', 'ngtemplates', 'concat', 'ngAnnotate', 'uglify:build', 'cssmin', 'copymain', 'ngdocs', 'clean:templates']);
317+
grunt.task.run(['clean', 'lint', 'ngtemplates', 'concat', 'ngAnnotate', 'uglify:build', 'less', 'cssmin', 'copymain', 'ngdocs', 'clean:templates']);
309318
});
310319

311320
grunt.registerTask('default', ['build']);

‎README.md‎

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -79,17 +79,39 @@ Note:
7979
<script src="node_modules/angular-patternfly/node_modules/patternfly/node_modules/c3/c3.min.js"></script>
8080
<script src="node_modules/angular-patternfly/node_modules/patternfly/node_modules/d3/d3.min.js"></script>
8181

82-
5. (optional) The 'patternfly.charts' and 'patternfly.table' modules are not dependencies in the default angular 'patternfly' module.
83-
In order to use patternfly charts and/or patternfly.table, you must add them as dependencies in your application:
82+
5. (optional) The 'patternfly.charts' module is not a dependency in the default angular 'patternfly' module.
83+
In order to use patternfly charts you must add it as a dependency in your application:
84+
85+
my-app.module.js:
86+
87+
angular.module('myApp', [
88+
'patternfly',
89+
'patternfly.charts'
90+
]);
91+
92+
6. (optional) The 'patternfly.table' module is not a dependency in the default angular 'patternfly' module.
93+
In order to use pfTableView, you must add 'patternfly.table' as a dependency in your application:
8494

8595
my-app.module.js:
8696

8797
angular.module('myApp', [
8898
'patternfly',
89-
'patternfly.charts',
9099
'patternfly.table'
91100
]);
92101

102+
Add the following CSS includes to your HTML file(s):
103+
104+
<!-- Place before any patternfly css -->
105+
<link rel="stylesheet" href="node_modules/datatables.net-dt/css/jquery.dataTables.css" />
106+
107+
Add the following Javascript includes to your HTML file(s):
108+
109+
<script src="node_modules/jquery/dist/jquery.js"></script>
110+
<script src="node_modules/datatables.net/js/jquery.dataTables.js"></script>
111+
<script src="node_modules/datatables.net-select/js/dataTables.select.js"></script>
112+
<script src="node_modules/angular-datatables/dist/angular-datatables.min.js"></script>
113+
<script src="node_modules/angular-datatables/dist/plugins/select/angular-datatables.select.min.js"></script>
114+
93115
### Using with Webpack
94116

95117
In order to use Angular-Patternfly in a Webpack-bundled application there are some things you need to keep in mind:

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,8 @@
2626
"grunt-contrib-concat": "0.3.0",
2727
"grunt-contrib-connect": "0.5.0",
2828
"grunt-contrib-copy": "0.5.0",
29-
"grunt-contrib-cssmin": "0.9.0",
29+
"grunt-contrib-cssmin": "^1.0.1",
30+
"grunt-contrib-less": "^1.3.0",
3031
"grunt-contrib-jshint": "0.7.0",
3132
"grunt-contrib-uglify": "0.2.5",
3233
"grunt-contrib-watch": "0.5.3",

‎src/card/card.less‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
.card-pf-aggregate-status-alt {
2+
.card-pf-body {
3+
padding-bottom: 20px;
4+
}
5+
.card-pf-title {
6+
font-weight: 300;
7+
line-height: 22px;
8+
margin: 20px 0 10px 0;
9+
}
10+
.card-pf-aggregate-status-count {
11+
font-size: 24px;
12+
}
13+
.card-pf-aggregate-status-title {
14+
display: block;
15+
font-size: 12px;
16+
}
17+
.card-pf-aggregate-status-notifications {
18+
.card-pf-aggregate-status-notification {
19+
border-left: none;
20+
}
21+
.fa {
22+
position: relative;
23+
top: -1px;
24+
}
25+
.pficon {
26+
position: relative;
27+
top: -1px;
28+
}
29+
}
30+
}
31+
.card-pf-heading-no-bottom {
32+
margin: 0 -20px 0px;
33+
padding: 0 20px 0;
34+
}
35+
.card-pf-icon-image {
36+
height: 18px;
37+
margin: 0 5px 5px;
38+
}
39+
40+
.trend-card-large-pf {
41+
.trend-header-pf {
42+
display: block;
43+
font-size: 16px;
44+
font-weight: 400;
45+
margin-left: 10px;
46+
}
47+
.trend-title-big-pf {
48+
font-size: 26px;
49+
font-weight: 300;
50+
margin-left: 10px;
51+
}
52+
.trend-title-small-pf {
53+
font-size: 12px;
54+
font-weight: 400;
55+
}
56+
}
57+
.trend-card-small-pf {
58+
.trend-header-pf {
59+
display: block;
60+
font-size: 12px;
61+
font-weight: 400;
62+
margin-left: 10px;
63+
}
64+
.trend-title-big-pf {
65+
font-size: 17px;
66+
font-weight: 400;
67+
margin-left: 10px;
68+
}
69+
.trend-title-small-pf {
70+
font-size: 10px;
71+
font-weight: 400;
72+
}
73+
}

‎src/charts/charts.less‎

Lines changed: 188 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,188 @@
1+
pf-c3-chart {
2+
display: block;
3+
}
4+
.empty-chart-content {
5+
text-align: center;
6+
.pficon {
7+
font-size: 24px;
8+
}
9+
span {
10+
vertical-align: middle;
11+
width: 100%;
12+
}
13+
}
14+
.utilization-trend-chart-pf {
15+
.donut-chart-pf {
16+
float: left;
17+
padding-top: 15px;
18+
width: 100%;
19+
}
20+
h3 {
21+
font-weight: 400;
22+
}
23+
.current-values {
24+
border-bottom: 1px solid @color-pf-black-300;
25+
float: left;
26+
padding: 0 5px 10px 0;
27+
width: 100%;
28+
}
29+
.available-count {
30+
margin: 3px 0;
31+
padding-left: 0;
32+
padding-right: 5px;
33+
}
34+
.available-text {
35+
font-size: 12px;
36+
font-weight: 400;
37+
line-height: 14px;
38+
margin: 2px 0;
39+
padding: 0 5px;
40+
}
41+
.radial-chart {
42+
float: left;
43+
padding-top: 10px;
44+
width: 100%;
45+
}
46+
.sparkline-chart {
47+
float: left;
48+
margin-left: -5px;
49+
margin-right: -5px;
50+
width: 100%;
51+
}
52+
.legend-text {
53+
color: inherit;
54+
display: block;
55+
font-size: 12px;
56+
font-weight: 400;
57+
margin-left: 0;
58+
}
59+
}
60+
.utilization-trend-chart-pf.data-unavailable-pf {
61+
.current-values {
62+
color: transparent;
63+
}
64+
}
65+
66+
.trend-flat-details {
67+
display: table;
68+
margin-top: 5px;
69+
}
70+
71+
@media (min-width: 768px) {
72+
.trend-flat-details {
73+
margin-top: 25px;
74+
}
75+
}
76+
77+
.trend-flat-details-cell {
78+
display: table-cell;
79+
min-width: 70px;
80+
vertical-align: bottom;
81+
}
82+
.trend-header-compact-pf {
83+
display: block;
84+
font-size: 12px;
85+
font-weight: 400;
86+
}
87+
.trend-title-compact-big-pf {
88+
font-size: 36px;
89+
font-weight: 300;
90+
line-height: 1;
91+
}
92+
.trend-title-compact-small-pf {
93+
font-size: 12px;
94+
font-weight: 400;
95+
}
96+
.trend-title-flat-big-pf {
97+
font-size: 26px;
98+
font-weight: 300;
99+
line-height: 1;
100+
margin-right: 15px;
101+
}
102+
.trend-label-flat-pf {
103+
font-size: 12px;
104+
font-weight: 400;
105+
line-height: 1;
106+
}
107+
.trend-label-flat-strong-pf {
108+
display: block;
109+
font-size: 12px;
110+
font-weight: 700;
111+
line-height: 1;
112+
}
113+
.trend-footer-pf {
114+
color: #333333;
115+
font-size: 10px;
116+
font-weight: 400;
117+
margin-left: 10px;
118+
}
119+
120+
.data-unavailable-pf[class*="trend-title-"] {
121+
color: transparent;
122+
}
123+
.data-unavailable-pf[class*="trend-label-"] {
124+
color: transparent;
125+
}
126+
.data-unavailable-pf {
127+
.trend-footer-pf {
128+
color: transparent;
129+
}
130+
}
131+
132+
.utilization-bar-chart-pf {
133+
.progress-bar {
134+
-moz-transition: width .75s ease-in-out;
135+
-o-transition: width .75s ease-in-out;
136+
-webkit-transition: width .75s ease-in-out;
137+
transition: width .75s ease-in-out;
138+
}
139+
.progress-bar.animate {
140+
width: 0% !important;
141+
}
142+
}
143+
.heatmap-pf-container {
144+
position: relative;
145+
.heatmap-container {
146+
margin-left: -1px;
147+
}
148+
}
149+
.heatmap-pf-container-pf {
150+
.loading {
151+
position: absolute;
152+
right: 50%;
153+
top: 100px;
154+
z-index: 10;
155+
}
156+
}
157+
.heatmap-pf-svg {
158+
height: 100%;
159+
width: 100%;
160+
}
161+
.heatmap-pf-legend-container {
162+
list-style-type: none;
163+
margin-top: 5px;
164+
overflow: auto;
165+
padding: 0;
166+
}
167+
.heatmap-pf-legend-items {
168+
float: left;
169+
}
170+
.legend-pf-color-box {
171+
display: inline-block;
172+
height: 11px;
173+
margin-left: 5px;
174+
margin-right: 5px;
175+
width: 11px;
176+
&:first-of-type {
177+
margin-left: 0px;
178+
}
179+
}
180+
.legend-pf-text {
181+
font-size: 11px;
182+
font-weight: 400;
183+
line-height: 11px;
184+
padding-right: 5px;
185+
}
186+
.camelcase {
187+
text-transform: capitalize;
188+
}

0 commit comments

Comments
 (0)