diff --git a/GruntFile.js b/GruntFile.js index f85a6d7a6d..c7f8c132b1 100644 --- a/GruntFile.js +++ b/GruntFile.js @@ -136,6 +136,10 @@ debug: { files: ['<%= srcFiles %>'], tasks: ['debug'] + }, + less: { + files: ['src/less/**/*.less'], + tasks: ['less'] } }, ngtemplates: { @@ -190,6 +194,16 @@ templates: { src: ["<%= ngtemplates.ngGrid.dest %>"] } + }, + less: { + build: { + options: { + // yuicompress: true + }, + files: { + "ng-grid.css": ["src/less/global.less"] + } + } } }); @@ -207,20 +221,21 @@ // Load the plugin that provides the "uglify" task. grunt.loadNpmTasks('grunt-contrib-uglify'); + grunt.loadNpmTasks('grunt-contrib-less'); //grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-jsdoc'); grunt.loadNpmTasks('grunt-angular-templates'); grunt.loadNpmTasks('grunt-contrib-clean'); // Old default task - grunt.registerTask('build', ['ngtemplates', 'concat', 'uglify', 'clean']); + grunt.registerTask('build', ['less', 'ngtemplates', 'concat', 'uglify', 'clean']); // Default task(s). grunt.registerTask('default', 'No default task', function() { grunt.log.write('The old default task has been moved to "build" to prevent accidental triggering'); }); - grunt.registerTask('debug', ['ngtemplates', 'concat:debug', 'clean']); - grunt.registerTask('prod', ['ngtemplates', 'concat:prod', 'uglify', 'clean']); + grunt.registerTask('debug', ['less', 'ngtemplates', 'concat:debug', 'clean']); + grunt.registerTask('prod', ['less', 'ngtemplates', 'concat:prod', 'uglify', 'clean']); grunt.registerTask('version', ['ngtemplates', 'concat:version', 'uglify:version', 'clean']); }; \ No newline at end of file diff --git a/ng-grid.css b/ng-grid.css index abbcc7aa37..f088e31e3d 100644 --- a/ng-grid.css +++ b/ng-grid.css @@ -1,483 +1,415 @@ - -/******** Grid Global ********/ -.nglabel { - display: block; - float: left; - font-weight: bold; - padding-right: 5px; -} -/******** Grid ********/ - -.ngGrid{ - background-color: rgb(253, 253, 253); +.ngGrid { + background-color: #fdfdfd; } -.ngGrid.unselectable { - -moz-user-select: none; - -khtml-user-select: none; - -webkit-user-select: none; - -o-user-select: none; - user-select: none; -} -/******** Header ********/ - -.ngGroupPanel{ - background-color: rgb(234, 234, 234); - overflow: hidden; - border-bottom: 1px solid rgb(212,212,212); -} - -.ngGroupPanelDescription{ - margin-top: 5px; - margin-left: 5px; -} - -.ngGroupList { - list-style-type: none; - margin: 0; - padding: 0; +.ngGrid input[type="checkbox"] { + margin: 0; + padding: 0; } - -.ngGroupItem { - float: left; +.ngGrid input { + vertical-align: top; } - -.ngGroupElement { - float: left; - height: 100%; - width: 100%; +.ngGrid.unselectable { + -moz-user-select: none; + -khtml-user-select: none; + -webkit-user-select: none; + -o-user-select: none; + user-select: none; } - -.ngGroupName { - background-color: rgb(247,247,247); - border: 1px solid rgb(212,212,212); - padding: 3px 10px; - float: left; - margin-left: 0; - margin-top: 2px; - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - border-radius: 3px; - font-weight: bold; -} - -.ngGroupItem:first-child{ - margin-left: 2px; -} - -.ngRemoveGroup { - width: 5px; - -moz-opacity: 0.4; - opacity: 0.4; - margin-top: -1px; - margin-left: 5px; +.ngViewport { + overflow: auto; + min-height: 20px; } -.ngRemoveGroup:hover { - color: black; - text-decoration: none; - cursor: pointer; - -moz-opacity: 0.7; - opacity: 0.7; -} -.ngGroupArrow { - width: 0; - height: 0; - border-top: 6px solid transparent; - border-bottom: 6px solid transparent; - border-left: 6px solid black; - margin-top: 10px; - margin-left: 5px; - margin-right: 5px; - float: right; -} - -.ngTopPanel { - position: relative; - z-index: 1; - background-color: rgb(234, 234, 234); - border-bottom: 1px solid rgb(212,212,212); +.ngCanvas { + position: relative; } .ngHeaderContainer { - position: relative; - overflow: hidden; - font-weight: bold; - background-color: inherit; + position: relative; + overflow: hidden; + font-weight: bold; + background-color: inherit; +} +.ngHeaderCell { + border-right: 1px solid #d4d4d4; + border-left: 1px solid #d4d4d4; + position: absolute; + top: 0; + bottom: 0; + background-color: inherit; +} +.ngHeaderSortColumn { + position: absolute; + overflow: hidden; } - -.ngHeaderScroller { - position:absolute; - background-color: inherit; +.ngTopPanel { + position: relative; + z-index: 1; + background-color: #eaeaea; + border-bottom: 1px solid #d4d4d4; } -.ngHeaderSortColumn{ - position:absolute; - overflow: hidden; +.ngSortButtonDown { + position: absolute; + top: 3px; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + border-color: gray transparent; + border-style: solid; + border-width: 5px 5px 0 5px; + height: 0; + width: 0; } - -.ngHeaderCell{ - border-right: 1px solid rgb(212,212,212); - border-left: 1px solid rgb(212,212,212); - position: absolute; - top: 0; - bottom: 0; - background-color: inherit; +.ngNoSort { + cursor: default; } - -.ngHeaderCell:first-child{ - border-left: 0; +.ngHeaderCell:first-child { + border-left: 0; } -.ngHeaderCell.pinned { - z-index: 1; +.ngHeaderButton { + position: absolute; + right: 2px; + top: 8px; + -moz-border-radius: 50%; + -webkit-border-radius: 50%; + border-radius: 50%; + width: 14px; + height: 14px; + z-index: 1; + background-color: #9fbbb4; + cursor: pointer; } .ngSortButtonUp { - position: absolute; - top: 3px; - left: 0; - right: 0; - margin-left: auto; - margin-right: auto; - border-color: gray transparent; - border-style: solid; - border-width: 0 5px 5px 5px; - height: 0; - width: 0; + position: absolute; + top: 3px; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + border-color: gray transparent; + border-style: solid; + border-width: 0 5px 5px 5px; + height: 0; + width: 0; } -.ngSortButtonDown { - position: absolute; - top: 3px; - left: 0; - right: 0; - margin-left: auto; - margin-right: auto; - border-color: gray transparent; - border-style: solid; - border-width: 5px 5px 0 5px; - height: 0; - width: 0; +.ngHeaderScroller { + position: absolute; + background-color: inherit; } .ngSortPriority { - position: absolute; - top: -5px; - left: 1px; - font-size: 6pt; - font-weight: bold; -} -.ngHeaderGrip { - cursor: col-resize; - width: 10px; - right: -5px; - top: 0; - height: 100%; - position: absolute; - background-color: transparent; + position: absolute; + top: -5px; + left: 1px; + font-size: 6pt; + font-weight: bold; +} +.ngHeaderGrip { + cursor: col-resize; + width: 10px; + right: -5px; + top: 0; + height: 100%; + position: absolute; + background-color: transparent; } .ngHeaderText { - padding: 5px; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - white-space: nowrap; - -ms-text-overflow: ellipsis; - -o-text-overflow: ellipsis; - text-overflow: ellipsis; - overflow: hidden; -} - -/******** Viewport ********/ -.ngViewport{ - overflow: auto; - min-height: 20px; -} - -.ngCanvas{ - position: relative; -} - -/******** Rows ********/ -.ngRow { - position: absolute; - border-bottom: 1px solid rgb(229, 229, 229); + padding: 5px; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + white-space: nowrap; + -ms-text-overflow: ellipsis; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; + overflow: hidden; } -.ngRow.even { - background-color: rgb(243, 243, 243); +.ngHeaderButtonArrow { + position: absolute; + top: 4px; + left: 3px; + width: 0; + height: 0; + border-style: solid; + border-width: 6.5px 4.5px 0 4.5px; + border-color: #4d4d4d transparent transparent transparent; } -.ngRow.odd { - background-color: rgb(253, 253, 253); +.ngColMenu { + right: 2px; + padding: 5px; + top: 25px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; + background-color: #bdd0cb; + position: absolute; + border: 2px solid #d4d4d4; + z-index: 1; } -.ngRow.selected { - background-color: rgb(201, 221, 225); +.ngColListCheckbox { + position: relative; + right: 3px; + top: 4px; } -.ngRow.canSelect { - cursor: pointer; +.ngColList { + list-style-type: none; } - -/******** Cells ********/ - -.ngCell { - overflow: hidden; - position: absolute; - border-right: 1px solid rgb(212,212,212); - border-left: 1px solid rgb(212,212,212); - top: 0; - bottom: 0; - background-color: inherit; -} - -.ngCell:first-child{ - border-left: 0; -} - -.ngCell.pinned { - z-index: 1; +.ngColListItem { + position: relative; + right: 17px; + top: 2px; + white-space: nowrap; } -.ngCellElement:focus { - outline: 0; - background-color: rgb(179, 196, 199); +.ngMenuText { + position: relative; + top: 2px; + left: 2px; } - -.ngCellText { - padding: 5px; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - white-space: nowrap; - -ms-text-overflow: ellipsis; - -o-text-overflow: ellipsis; - text-overflow: ellipsis; - overflow: hidden; +.ngGroupPanel { + background-color: #eaeaea; + overflow: hidden; + border-bottom: 1px solid #d4d4d4; } -.ngSelectionHeader { - position: absolute; - top: 11px; - left: 6px; +.ngGroupList { + list-style-type: none; + margin: 0; + padding: 0; } -.ngGrid input[type="checkbox"] { - margin: 0; - padding: 0; +.ngAggHeader { + position: absolute; + border: none; } -.ngGrid input { - vertical-align:top; +.ngGroupElement { + float: left; + height: 100%; + width: 100%; } -.ngSelectionCell{ - margin-top: 9px; - margin-left: 6px; +.ngGroupedByIcon { + background-image: url(data:image/png; + base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAANCAYAAACZ3F9/AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAElJREFUKFNjoAhISkr+R8LyaHwMDNXGwGBsbPwfhoGAA5mPDUO1oWpE52PDYE0gALTFAYbR+dgwWBMIoPlh1I9ADNU2NPzIwAAAFQYI9E4OLvEAAAAASUVORK5CYII=); + background-repeat: no-repeat; + height: 15px; + width: 15px; + position: absolute; + right: -2px; + top: 2px; } -.ngSelectionCheckbox{ - margin-top: 9px; - margin-left: 6px; +.ngGroupName { + background-color: #fdfdfd; + border: 1px solid #d4d4d4; + padding: 3px 10px; + float: left; + margin-left: 0; + margin-top: 2px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; + font-weight: bold; } -.ngNoSort { - cursor:default; +.ngGroupArrow { + width: 0; + height: 0; + border-top: 6px solid transparent; + border-bottom: 6px solid transparent; + border-left: 6px solid black; + margin-top: 10px; + margin-left: 5px; + margin-right: 5px; + float: right; +} +.ngGroupPanelDescription { + margin-top: 5px; + margin-left: 5px; } - -/******** Footer ********/ -.ngFooterPanel{ - background-color: rgb(234, 234, 234); - padding: 0; - border-top: 1px solid rgb(212,212,212); - position: relative; +.ngGroupingNumber { + position: absolute; + right: -10px; + top: -2px; } -.ngTotalSelectContainer { - float: left; - margin: 5px; - margin-top: 7px; +.ngAggArrowCollapsed { + position: absolute; + left: 8px; + bottom: 10px; + width: 0; + height: 0; + border-style: solid; + border-width: 5px 0 5px 8.7px; + border-color: transparent transparent transparent #000000; +} +.ngGroupItem:first-child { + margin-left: 2px; } -.ngFooterSelectedItems { - padding: 2px; +.ngGroupIcon { + background-image: url(data:image/png; + base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAANCAYAAACZ3F9/AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAEFJREFUKFNjoAhISkr+h2J5JDZODNXGwGBsbPwfhIGAA8bGh6HaGBiAGhxAGJmND4M1gQCSM0adCsVQbcPcqQwMALWDGyDvWPefAAAAAElFTkSuQmCC); + background-repeat: no-repeat; + height: 15px; + width: 15px; + position: absolute; + right: -2px; + top: 2px; } -.ngFooterTotalItems { - padding: 2px; +.ngRemoveGroup { + width: 5px; + -moz-opacity: 0.4; + opacity: 0.4; + margin-top: -1px; + margin-left: 5px; } -.ngFooterTotalItems.ngnoMultiSelect { - padding: 0 !important; +.ngGroupItem { + float: left; } - -/* Aggregates */ -.ngAggHeader { - position: absolute; - border: none; +.ngAggArrowExpanded { + position: absolute; + left: 8px; + bottom: 10px; + width: 0; + height: 0; + border-style: solid; + border-width: 0 0 9px 9px; + border-color: transparent transparent #000000 transparent; } .ngAggregate { - position: absolute; - background-color: rgb(201, 221, 225); - border-bottom: 1px solid beige; - overflow: hidden; - top: 0; - bottom: 0; - right: -1px; - left: 0; + position: absolute; + background-color: #c9dde1; + border-bottom: 1px solid beige; + overflow: hidden; + top: 0; + bottom: 0; + right: -1px; + left: 0; +} +.ngRemoveGroup:hover { + color: black; + text-decoration: none; + cursor: pointer; + -moz-opacity: 0.7; + opacity: 0.7; } .ngAggregateText { - position: absolute; - left: 27px; - top: 5px; - line-height: 20px; - white-space:nowrap; + position: absolute; + left: 27px; + top: 5px; + line-height: 20px; + white-space: nowrap; } -.ngAggArrowExpanded { - position: absolute; - left: 8px; - bottom: 10px; - width: 0; - height: 0; - border-style: solid; - border-width: 0 0 9px 9px; - border-color: transparent transparent #000000 transparent; +.ngRow { + position: absolute; + border-bottom: 1px solid #d4d4d4; } -.ngAggArrowCollapsed { - position: absolute; - left: 8px; - bottom: 10px; - width: 0; - height: 0; - border-style: solid; - border-width: 5px 0 5px 8.7px; - border-color: transparent transparent transparent #000000; -} - -.ngHeaderButton { - position: absolute; - right: 2px; - top: 8px; - -moz-border-radius: 50%; - -webkit-border-radius: 50%; - border-radius: 50%; - width: 14px; - height: 14px; - z-index: 1; - background-color: rgb(179, 191, 188); - cursor: pointer; - /* width and height can be anything, as long as they're equal */ +.ngRow.odd { + background-color: #fdfdfd; } -.ngHeaderButtonArrow { - position: absolute; - top: 4px; - left: 3px; - width: 0; - height: 0; - border-style: solid; - border-width: 6.5px 4.5px 0 4.5px; - border-color: #000 transparent transparent transparent; - /* width and height can be anything, as long as they're equal */ +.ngRow.even { + background-color: #f3f3f3; } -.ngColMenu { - right: 2px; - padding: 5px; - top: 25px; - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - border-radius: 3px; - background-color: #BDD0CB; - position: absolute; - border: 2px solid rgb(212,212,212); - z-index: 1; +.ngRow.selected { + background-color: #c9dde1; } -.ngMenuText { - position: relative; - top: 2px; - left: 2px; +.ngCell { + overflow: hidden; + position: absolute; + border-right: 1px solid #d4d4d4; + border-left: 1px solid #d4d4d4; + top: 0; + bottom: 0; + background-color: inherit; } -.ngColList { - list-style-type: none; +.ngCell:first-child { + border-left: 0; } - -.ngColListItem { - position: relative; - right: 17px; - top: 2px; - white-space:nowrap; +.ngCellText { + padding: 5px; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + white-space: nowrap; + -ms-text-overflow: ellipsis; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; + overflow: hidden; +} +.ngSelectionCell { + margin-top: 9px; + margin-left: 6px; } -.ngColListCheckbox { - position: relative; - right: 3px; - top: 4px; -} - -/********Paging Styles **********/ - -.ngPagerButton{ - height: 25px; - min-width: 26px; -} - -.ngPagerFirstTriangle{ - width: 0; - height: 0; - border-style: solid; - border-width: 5px 8.7px 5px 0; - border-color: transparent #000000 transparent transparent; - margin-left: 2px; -} - -.ngPagerFirstBar{ - width: 10px; - border-left: 2px solid black; - margin-top: -6px; - height: 12px; - margin-left: -3px; -} - -.ngPagerLastTriangle{ - width: 0; - height: 0; - border-style: solid; - border-width: 5px 0 5px 8.7px; - border-color: transparent transparent transparent #000000; - margin-left: -1px; -} - -.ngPagerLastBar{ - width: 10px; - border-left: 2px solid black; - margin-top: -6px; - height: 12px; - margin-left: 1px; -} - -.ngPagerPrevTriangle{ - margin-left: 0; -} - -.ngPagerNextTriangle{ - margin-left: 1px; +.ngSelectionHeader { + position: absolute; + top: 11px; + left: 6px; } -.ngGroupIcon { - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAANCAYAAACZ3F9/AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAEFJREFUKFNjoAhISkr+h2J5JDZODNXGwGBsbPwfhIGAA8bGh6HaGBiAGhxAGJmND4M1gQCSM0adCsVQbcPcqQwMALWDGyDvWPefAAAAAElFTkSuQmCC); - background-repeat:no-repeat; - height: 15px; - width: 15px; - position: absolute; - right: -2px; - top: 2px; -} - -.ngGroupedByIcon { - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAANCAYAAACZ3F9/AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAElJREFUKFNjoAhISkr+R8LyaHwMDNXGwGBsbPwfhoGAA5mPDUO1oWpE52PDYE0gALTFAYbR+dgwWBMIoPlh1I9ADNU2NPzIwAAAFQYI9E4OLvEAAAAASUVORK5CYII=); - background-repeat:no-repeat; - height: 15px; - width: 15px; - position: absolute; - right: -2px; - top: 2px; -} -.ngPinnedIcon { - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAAAmElEQVQoU33PQapBURjA8UtkwJuaWYGSgfQWYBMvczPmTCzAAGVuaA228BZhRCkDGSmE31FucuRfvzq3vr5zT/JSjSU7DsypEPXDkDVn2hSIytJhw4kWGaLCxgHh2gt/RBuLzNhz5caWPjnSqqw4EraFfwznf8qklWjwy4IRTerkiQoPGtPl40OehcEJvcfXl8LglLfBJLkDcMgbgHlHhK8AAAAASUVORK5CYII=); - background-repeat: no-repeat; - position: absolute; - right: 5px; - top: 5px; - height: 10px; - width: 10px; -} -.ngUnPinnedIcon { - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAAAlElEQVQoU33PPQrCQBRF4fFnI2KfZVi5ARvdgo1l6mwmkCJVOgluwd5OwUoDtnoOxAei8cLXTN7cvEl/skCNDCMPfsUPO5zQwOHIDEvYtMURHe6wOVLgigvOePRyeDkyR4ln7wZ//7XfFBu8B23+aDJjrHGAwza7hjtHJvDmHg7b7Bru7AMjK7Rw2ObBVHDY5oGk9AKQNB2zy8MBTgAAAABJRU5ErkJggg==); - background-repeat: no-repeat; - position: absolute; - height: 10px; - width: 10px; - right: 5px; - top: 5px; +.ngCellElement:focus { + outline: 0; + background-color: #c9dde1; } -.ngGroupingNumber { - position: absolute; - right: -10px; - top: -2px; +.ngRow.canSelect { + cursor: pointer; +} +.ngSelectionCheckbox { + margin-top: 9px; + margin-left: 6px; +} +.ngFooterPanel { + background-color: #eaeaea; + padding: 0; + border-top: 1px solid #d4d4d4; + position: relative; +} +.nglabel { + display: block; + float: left; + font-weight: bold; + padding-right: 5px; +} +.ngTotalSelectContainer { + float: left; + margin: 5px; + margin-top: 7px; +} +.ngFooterSelectedItems { + padding: 2px; +} +.ngFooterTotalItems.ngnoMultiSelect { + padding: 0 !important; +} +.ngPagerFirstBar { + width: 10px; + border-left: 2px solid #4d4d4d; + margin-top: -6px; + height: 12px; + margin-left: -3px; +} +.ngPagerButton { + height: 25px; + min-width: 26px; +} +.ngPagerFirstTriangle { + width: 0; + height: 0; + border-style: solid; + border-width: 5px 8.7px 5px 0; + border-color: transparent #4d4d4d transparent transparent; + margin-left: 2px; +} +.ngPagerNextTriangle { + margin-left: 1px; +} +.ngPagerPrevTriangle { + margin-left: 0; +} +.ngPagerLastTriangle { + width: 0; + height: 0; + border-style: solid; + border-width: 5px 0 5px 8.7px; + border-color: transparent transparent transparent #4d4d4d; + margin-left: -1px; +} +.ngPagerLastBar { + width: 10px; + border-left: 2px solid #4d4d4d; + margin-top: -6px; + height: 12px; + margin-left: 1px; +} +.ngFooterTotalItems { + padding: 2px; } diff --git a/package.json b/package.json index a5f41d0649..b04b347e65 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "license": "MIT", "devDependencies": { "grunt": "~0.4.1", + "grunt-cli": "~0.1.7", "grunt-jsdoc": "~0.2.4", "grunt-karma": "~0.4.4", "grunt-contrib-watch": "~0.3.1", @@ -34,6 +35,6 @@ "grunt-angular-templates": "~0.3.0", "grunt-contrib-clean": "~0.4.0", "grunt-contrib-jasmine": "~0.3.3", - "grunt-cli": "~0.1.7" + "grunt-contrib-less": "~0.5.1" } } diff --git a/src/less/cell.less b/src/less/cell.less new file mode 100644 index 0000000000..8840766a60 --- /dev/null +++ b/src/less/cell.less @@ -0,0 +1,25 @@ +.ngCell { + overflow: hidden; + position: absolute; + border-right: 1px solid @borderColor; + border-left: 1px solid @borderColor; + top: 0; + bottom: 0; + background-color: inherit; +} + +.ngCell:first-child { + border-left: 0; +} + +.ngCellText { + padding: 5px; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + white-space: nowrap; + -ms-text-overflow: ellipsis; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; + overflow: hidden; +} \ No newline at end of file diff --git a/src/less/colors.less b/src/less/colors.less new file mode 100644 index 0000000000..58ed954eee --- /dev/null +++ b/src/less/colors.less @@ -0,0 +1,27 @@ + +@backgroundColor: #fdfdfd; + +// Gray color for header and footer and panels +@darkGray: #EAEAEA; + +@panelColor: @darkGray; + +// Gray colors used for row alternation +@lightGray: #fdfdfd; +@middleGray: #f3f3f3; + +// Gray for borders +@darkAccentGray: #d4d4d4; +@borderColor: @darkAccentGray; + +// Used for columnmenu buton +@grayGreen: #bdd0cb; + +// Used for column menu background +@darkGrayGreen: darken(@grayGreen, 10%); + +// Used for selections +@grayBlue: #C9DDE1; // #b3c4c7; + +// Color for buttons +@buttonColor: lighten(#333, 10%); \ No newline at end of file diff --git a/src/less/footer.less b/src/less/footer.less new file mode 100644 index 0000000000..4df8703386 --- /dev/null +++ b/src/less/footer.less @@ -0,0 +1,27 @@ +.ngFooterPanel { + background-color: @panelColor; + padding: 0; + border-top: 1px solid @borderColor; + position: relative; +} + +.nglabel { + display: block; + float: left; + font-weight: bold; + padding-right: 5px; +} + +.ngTotalSelectContainer { + float: left; + margin: 5px; + margin-top: 7px; +} + +.ngFooterSelectedItems { + padding: 2px; +} + +.ngFooterTotalItems.ngnoMultiSelect { + padding: 0 !important; +} \ No newline at end of file diff --git a/src/less/global.less b/src/less/global.less new file mode 100644 index 0000000000..9f04153abb --- /dev/null +++ b/src/less/global.less @@ -0,0 +1,43 @@ + +@import 'colors'; + +.ngGrid { + background-color: @backgroundColor; + + input[type="checkbox"] { + margin: 0; + padding: 0; + } + + input { + vertical-align:top; + } +} + +.ngGrid.unselectable { + -moz-user-select: none; + -khtml-user-select: none; + -webkit-user-select: none; + -o-user-select: none; + user-select: none; +} + +.ngViewport { + overflow: auto; + min-height: 20px; +} + +.ngCanvas { + position: relative; +} + +@import 'header'; +@import 'menu'; +@import 'grouping'; + +@import 'row'; +@import 'cell'; +@import 'selection'; + +@import 'footer'; +@import 'paging'; diff --git a/src/less/grouping.less b/src/less/grouping.less new file mode 100644 index 0000000000..65839f627a --- /dev/null +++ b/src/less/grouping.less @@ -0,0 +1,148 @@ +@import 'colors.less'; + +.ngGroupPanel { + background-color: @panelColor; + overflow: hidden; + border-bottom: 1px solid @borderColor; +} + +.ngGroupPanelDescription { + margin-top: 5px; + margin-left: 5px; +} + +.ngGroupList { + list-style-type: none; + margin: 0; + padding: 0; +} + +.ngAggHeader { + position: absolute; + border: none; +} + +.ngGroupElement { + float: left; + height: 100%; + width: 100%; +} + +.ngGroupIcon { + background-image: url(data:image/png; + base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAANCAYAAACZ3F9/AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAEFJREFUKFNjoAhISkr+h2J5JDZODNXGwGBsbPwfhIGAA8bGh6HaGBiAGhxAGJmND4M1gQCSM0adCsVQbcPcqQwMALWDGyDvWPefAAAAAElFTkSuQmCC); + background-repeat:no-repeat; + height: 15px; + width: 15px; + position: absolute; + right: -2px; + top: 2px; +} + + +.ngGroupedByIcon { + background-image: url(data:image/png; + base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAANCAYAAACZ3F9/AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAElJREFUKFNjoAhISkr+R8LyaHwMDNXGwGBsbPwfhoGAA5mPDUO1oWpE52PDYE0gALTFAYbR+dgwWBMIoPlh1I9ADNU2NPzIwAAAFQYI9E4OLvEAAAAASUVORK5CYII=); + background-repeat:no-repeat; + height: 15px; + width: 15px; + position: absolute; + right: -2px; + top: 2px; +} + +.ngGroupName { + background-color: @lightGray; + border: 1px solid @borderColor; + padding: 3px 10px; + float: left; + margin-left: 0; + margin-top: 2px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; + font-weight: bold; +} + +.ngGroupArrow { + width: 0; + height: 0; + border-top: 6px solid transparent; + border-bottom: 6px solid transparent; + border-left: 6px solid black; + margin-top: 10px; + margin-left: 5px; + margin-right: 5px; + float: right; +} + +.ngGroupingNumber { + position: absolute; + right: -10px; + top: -2px; +} + +.ngAggArrowCollapsed { + position: absolute; + left: 8px; + bottom: 10px; + width: 0; + height: 0; + border-style: solid; + border-width: 5px 0 5px 8.7px; + border-color: transparent transparent transparent #000000; +} + +.ngGroupItem { + float: left; +} + +.ngGroupItem:first-child { + margin-left: 2px; +} + +.ngRemoveGroup { + width: 5px; + -moz-opacity: 0.4; + opacity: 0.4; + margin-top: -1px; + margin-left: 5px; +} + +.ngRemoveGroup:hover { + color: black; + text-decoration: none; + cursor: pointer; + -moz-opacity: 0.7; + opacity: 0.7; +} + +.ngAggArrowExpanded { + position: absolute; + left: 8px; + bottom: 10px; + width: 0; + height: 0; + border-style: solid; + border-width: 0 0 9px 9px; + border-color: transparent transparent #000000 transparent; +} + +.ngAggregate { + position: absolute; + background-color: rgb(201, 221, 225); + border-bottom: 1px solid beige; + overflow: hidden; + top: 0; + bottom: 0; + right: -1px; + left: 0; +} + +.ngAggregateText { + position: absolute; + left: 27px; + top: 5px; + line-height: 20px; + white-space:nowrap; +} \ No newline at end of file diff --git a/src/less/header.less b/src/less/header.less new file mode 100644 index 0000000000..6b2ef6d1ba --- /dev/null +++ b/src/less/header.less @@ -0,0 +1,123 @@ +.ngHeaderContainer { + position: relative; + overflow: hidden; + font-weight: bold; + background-color: inherit; +} + +.ngHeaderCell { + border-right: 1px solid @borderColor; + border-left: 1px solid @borderColor; + position: absolute; + top: 0; + bottom: 0; + background-color: inherit; +} + +.ngHeaderSortColumn { + position:absolute; + overflow: hidden; +} + +.ngTopPanel { + position: relative; + z-index: 1; + background-color: @darkGray; // #EAEAEA + border-bottom: 1px solid @borderColor; // #D4D4D4 +} + +.ngSortButtonDown { + position: absolute; + top: 3px; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + border-color: gray transparent; + border-style: solid; + border-width: 5px 5px 0 5px; + height: 0; + width: 0; +} + +.ngNoSort { + cursor:default; +} + +.ngHeaderCell:first-child { + border-left: 0; +} + +.ngHeaderButton { + position: absolute; + right: 2px; + top: 8px; + -moz-border-radius: 50%; + -webkit-border-radius: 50%; + border-radius: 50%; + width: 14px; + height: 14px; + z-index: 1; + background-color: @darkGrayGreen; + cursor: pointer; +} + +.ngSortButtonUp { + position: absolute; + top: 3px; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + border-color: gray transparent; + border-style: solid; + border-width: 0 5px 5px 5px; + height: 0; + width: 0; +} + +.ngHeaderScroller { + position:absolute; + background-color: inherit; +} + +.ngSortPriority { + position: absolute; + top: -5px; + left: 1px; + font-size: 6pt; + font-weight: bold; +} + +.ngHeaderGrip { + cursor: col-resize; + width: 10px; + right: -5px; + top: 0; + height: 100%; + position: absolute; + background-color: transparent; +} + +.ngHeaderText { + padding: 5px; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + white-space: nowrap; + -ms-text-overflow: ellipsis; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; + overflow: hidden; +} + +.ngHeaderButtonArrow { + position: absolute; + top: 4px; + left: 3px; + width: 0; + height: 0; + border-style: solid; + border-width: 6.5px 4.5px 0 4.5px; + border-color: @buttonColor transparent transparent transparent; +} \ No newline at end of file diff --git a/src/less/menu.less b/src/less/menu.less new file mode 100644 index 0000000000..61837febd1 --- /dev/null +++ b/src/less/menu.less @@ -0,0 +1,35 @@ +.ngColMenu { + right: 2px; + padding: 5px; + top: 25px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; + background-color: @grayGreen; + position: absolute; + border: 2px solid @borderColor; + z-index: 1; +} + +.ngColListCheckbox { + position: relative; + right: 3px; + top: 4px; +} + +.ngColList { + list-style-type: none; +} + +.ngColListItem { + position: relative; + right: 17px; + top: 2px; + white-space:nowrap; +} + +.ngMenuText { + position: relative; + top: 2px; + left: 2px; +} \ No newline at end of file diff --git a/src/less/paging.less b/src/less/paging.less new file mode 100644 index 0000000000..cd87c7f050 --- /dev/null +++ b/src/less/paging.less @@ -0,0 +1,50 @@ +.ngPagerFirstBar { + width: 10px; + border-left: 2px solid @buttonColor; + margin-top: -6px; + height: 12px; + margin-left: -3px; +} + +.ngPagerButton { + height: 25px; + min-width: 26px; +} + +.ngPagerFirstTriangle { + width: 0; + height: 0; + border-style: solid; + border-width: 5px 8.7px 5px 0; + border-color: transparent @buttonColor transparent transparent; + margin-left: 2px; +} + +.ngPagerNextTriangle { + margin-left: 1px; +} + +.ngPagerPrevTriangle { + margin-left: 0; +} + +.ngPagerLastTriangle { + width: 0; + height: 0; + border-style: solid; + border-width: 5px 0 5px 8.7px; + border-color: transparent transparent transparent @buttonColor; + margin-left: -1px; +} + +.ngPagerLastBar { + width: 10px; + border-left: 2px solid @buttonColor; + margin-top: -6px; + height: 12px; + margin-left: 1px; +} + +.ngFooterTotalItems { + padding: 2px; +} \ No newline at end of file diff --git a/src/less/pinning.less b/src/less/pinning.less new file mode 100644 index 0000000000..b6892d4fff --- /dev/null +++ b/src/less/pinning.less @@ -0,0 +1,25 @@ +@ngPinnedIconStuff: { + background-repeat: no-repeat; + position: absolute; + height: 10px; + width: 10px; + right: 5px; + top: 5px; +}; + +.ngPinnedIcon { + background-image: url(data:image/png; + base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAAAmElEQVQoU33PQapBURjA8UtkwJuaWYGSgfQWYBMvczPmTCzAAGVuaA228BZhRCkDGSmE31FucuRfvzq3vr5zT/JSjSU7DsypEPXDkDVn2hSIytJhw4kWGaLCxgHh2gt/RBuLzNhz5caWPjnSqqw4EraFfwznf8qklWjwy4IRTerkiQoPGtPl40OehcEJvcfXl8LglLfBJLkDcMgbgHlHhK8AAAAASUVORK5CYII=); + @ngPinnedIconStuff; +} + +.ngUnPinnedIcon { + background-image: url(data:image/png; + base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAAAlElEQVQoU33PPQrCQBRF4fFnI2KfZVi5ARvdgo1l6mwmkCJVOgluwd5OwUoDtnoOxAei8cLXTN7cvEl/skCNDCMPfsUPO5zQwOHIDEvYtMURHe6wOVLgigvOePRyeDkyR4ln7wZ//7XfFBu8B23+aDJjrHGAwza7hjtHJvDmHg7b7Bru7AMjK7Rw2ObBVHDY5oGk9AKQNB2zy8MBTgAAAABJRU5ErkJggg==); + @ngPinnedIconStuff; +} + + +.ngCell.pinned, .ngHeaderCell.pinned { + z-index: 1; +} \ No newline at end of file diff --git a/src/less/row.less b/src/less/row.less new file mode 100644 index 0000000000..076574bc52 --- /dev/null +++ b/src/less/row.less @@ -0,0 +1,19 @@ +@rowColorEven: @middleGray; +@rowColorOdd: @lightGray; + +.ngRow { + position: absolute; + border-bottom: 1px solid @borderColor; +} + +.ngRow.odd { + background-color: @rowColorOdd; //rgb(253, 253, 253); +} + +.ngRow.even { + background-color: @rowColorEven; +} + +.ngRow.selected { + background-color: @grayBlue; //rgb(201, 221, 225); +} \ No newline at end of file diff --git a/src/less/selection.less b/src/less/selection.less new file mode 100644 index 0000000000..b3c1b1f2aa --- /dev/null +++ b/src/less/selection.less @@ -0,0 +1,25 @@ +.ngSelectionCell { + margin-top: 9px; + margin-left: 6px; +} + +.ngSelectionHeader { + position: absolute; + top: 11px; + left: 6px; +} + +.ngCellElement:focus { + outline: 0; + background-color: @grayBlue; +} + +.ngRow.canSelect { + cursor: pointer; +} + +// Checkbox for selecting rows +.ngSelectionCheckbox { + margin-top: 9px; + margin-left: 6px; +} \ No newline at end of file diff --git a/workbench/styling/complex.html b/workbench/styling/complex.html new file mode 100644 index 0000000000..b8f83cb55e --- /dev/null +++ b/workbench/styling/complex.html @@ -0,0 +1,61 @@ + + + + ng-grid css styling workbench + + + + + + + + + +
+
+
+ + + + \ No newline at end of file diff --git a/workbench/styling/simple.html b/workbench/styling/simple.html new file mode 100644 index 0000000000..2608334671 --- /dev/null +++ b/workbench/styling/simple.html @@ -0,0 +1,45 @@ + + + + ng-grid css styling workbench + + + + + + + + + +
+
+
+ + + + \ No newline at end of file