Skip to content

Commit 2de6d47

Browse files
dtaylor113dtaylor113
committed
Added Less css pre-processing
1 parent 3788d91 commit 2de6d47

File tree

15 files changed

+586
-536
lines changed

15 files changed

+586
-536
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']);

‎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: @width6;
12+
}
13+
}
14+
.utilization-trend-chart-pf {
15+
.donut-chart-pf {
16+
float: left;
17+
padding-top: 15px;
18+
width: @width6;
19+
}
20+
h3 {
21+
font-weight: 400;
22+
}
23+
.current-values {
24+
border-bottom: 1px solid @color2;
25+
float: left;
26+
padding: 0 5px 10px 0;
27+
width: @width6;
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: @width6;
45+
}
46+
.sparkline-chart {
47+
float: left;
48+
margin-left: -5px;
49+
margin-right: -5px;
50+
width: @width6;
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: @height2;
159+
width: @width6;
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+
}

‎src/filters/filters.less

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
.filter-pf {
2+
a {
3+
cursor: pointer;
4+
}
5+
}
6+
.filter-pf.filter-fields {
7+
.form-group {
8+
padding-left: 0;
9+
width: 275px;
10+
}
11+
}
12+
.filter-select {
13+
.btn-default {
14+
background-color: @color0;
15+
background-image: none;
16+
color: @color1;
17+
font-size: 12px;
18+
font-style: italic;
19+
font-weight: 400;
20+
}
21+
}
22+
.input-group {
23+
.input-group-btn {
24+
.dropdown-menu>.selected>a {
25+
background-color: @color5 !important;
26+
border-color: #0076b7 !important;
27+
color: @color0 !important;
28+
}
29+
}
30+
}

‎src/notification/notification.less

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.toast-pf-action>a {
2+
cursor: pointer;
3+
}
4+
.toast-pf {
5+
.dropdown-menu>li>a {
6+
cursor: pointer;
7+
}
8+
}

‎src/sort/sort.less

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.sort-pf {
2+
.btn-link {
3+
color: #252525;
4+
font-size: 16px;
5+
line-height: 1;
6+
margin-left: 10px;
7+
padding: 4px 0;
8+
&:hover {
9+
color: @color5;
10+
}
11+
}
12+
}

0 commit comments

Comments
 (0)