diff --git a/package-lock.json b/package-lock.json index a770d2b724..5c292083bc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -778,7 +778,8 @@ "bootstrap": { "version": "3.3.7", "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-3.3.7.tgz", - "integrity": "sha1-WjiTlFSfIzMIdaOxUGVldPip63E=" + "integrity": "sha1-WjiTlFSfIzMIdaOxUGVldPip63E=", + "dev": true }, "bower": { "version": "1.8.4", @@ -5902,7 +5903,7 @@ "is-buffer": { "version": "1.1.6", "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz", - "integrity": "sha1-76ouqdqg16suoTqXsritUf776L4=", + "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==", "dev": true }, "is-builtin-module": { @@ -6636,7 +6637,7 @@ "jszip": { "version": "3.1.5", "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.1.5.tgz", - "integrity": "sha1-48KmxtcGrG5gMxQDbUPNQL7v3zc=", + "integrity": "sha512-5W8NUaFRFRqTOL7ZDDrx5qWHJyBXy6velVudIzQUSoqAAYqzSh2Z7/m0Rf1QbmQJccegD0r+YZxBjzqoBiEeJQ==", "dev": true, "requires": { "core-js": "~2.3.0", @@ -6967,9 +6968,9 @@ "dev": true }, "less": { - "version": "3.7.1", - "resolved": "https://registry.npmjs.org/less/-/less-3.7.1.tgz", - "integrity": "sha512-Cmf5XJlzNklkBC8eAa+Ef16AHUBAkApHNAw3x9Vmn84h2BvGrri5Id7kf6H1n6SN74Fc0WdHIRPlFMxsl0eJkA==", + "version": "3.8.0", + "resolved": "https://registry.npmjs.org/less/-/less-3.8.0.tgz", + "integrity": "sha512-746DPDyL+Wsjo7h/Z3t+A3Mg/mpDTaxW4puZyLhCQJjWJJvHggN735orjuCLIYgo7jKqv1zWLiQrxkuUOg5oGA==", "dev": true, "requires": { "errno": "^0.1.1", @@ -8153,7 +8154,7 @@ "normalize-package-data": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.4.0.tgz", - "integrity": "sha1-EvlaMH1YNSB1oEkHuErIvpisAS8=", + "integrity": "sha512-9jjUFbTPfEy3R/ad/2oNbKtW9Hgovl5O1FvFWKkKblNXoN/Oou6+9+KKohPK13Yc3/TyunyWhJp6gvRNR/PPAw==", "dev": true, "requires": { "hosted-git-info": "^2.1.4", @@ -8566,7 +8567,7 @@ "pako": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.6.tgz", - "integrity": "sha1-AQEhG6pwxLykoPY/Igbpe3368lg=", + "integrity": "sha512-lQe48YPsMJAig+yngZ87Lus+NF+3mtu7DVOBu6b/gHO1YpKwIj5AWjZ/TOS7i46HD/UixzWb1zeWDZfGZ3iYcg==", "dev": true }, "parallel-transform": { @@ -10327,7 +10328,7 @@ "spdx-correct": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.0.0.tgz", - "integrity": "sha1-BaW01xU6GVvJLDxCW2nzsqlSTII=", + "integrity": "sha512-N19o9z5cEyc8yQQPukRCZ9EUmb4HUpnrmaL/fxS2pBo2jbfcFRVuFZ/oFC+vZz0MNNk0h80iMn5/S6qGZOL5+g==", "dev": true, "requires": { "spdx-expression-parse": "^3.0.0", @@ -10337,13 +10338,13 @@ "spdx-exceptions": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.1.0.tgz", - "integrity": "sha1-LHrmEFbHFKW5ubKyr30xHvXHj+k=", + "integrity": "sha512-4K1NsmrlCU1JJgUrtgEeTVyfx8VaYea9J9LvARxhbHtVtohPs/gFGG5yy49beySjlIMhhXZ4QqujIZEfS4l6Cg==", "dev": true }, "spdx-expression-parse": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.0.tgz", - "integrity": "sha1-meEZt6XaAOBUkcn6M4t5BII7QdA=", + "integrity": "sha512-Yg6D3XpRD4kkOmTpdgbUiEJFKghJH03fiC1OPll5h/0sO6neh2jqRDVHOQ4o/LMea0tgCkbMgea5ip/e+MkWyg==", "dev": true, "requires": { "spdx-exceptions": "^2.1.0", @@ -10353,7 +10354,7 @@ "spdx-license-ids": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.0.tgz", - "integrity": "sha1-enzShHDMbToc/m1miG9rxDDTrIc=", + "integrity": "sha512-2+EPwgbnmOIl8HjGBXXMd9NAu02vLjOO1nWw4kmeRDFyHn+M/ETfHxQUK0oXg8ctgVnl9t3rosNVsZ1jG61nDA==", "dev": true }, "split": { @@ -11222,7 +11223,7 @@ "validate-npm-package-license": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.3.tgz", - "integrity": "sha1-gWQ7y+8b3+zUYjeT3EZIlIupgzg=", + "integrity": "sha512-63ZOUnL4SIXj4L0NixR3L1lcjO38crAbgrTpl28t8jjrfuiOBL5Iygm+60qPs/KsZGzPNg6Smnc/oY16QTjF0g==", "dev": true, "requires": { "spdx-correct": "^3.0.0", diff --git a/package.json b/package.json index 9b7783c5b0..d9455350db 100644 --- a/package.json +++ b/package.json @@ -30,9 +30,6 @@ ], "author": "UI Grid Team", "license": "MIT", - "dependencies": { - "bootstrap": "~3.3.5" - }, "devDependencies": { "bower": "^1.8.2", "canonical-path": "0.0.2", @@ -73,6 +70,7 @@ "karma-requirejs": "~1.1.0", "karma-sauce-launcher": "^1.2.0", "karma-script-launcher": "~1.0.0", + "less": "^3.8.0", "load-grunt-config": "^0.19.2", "marked": "^0.3.19", "phantomjs-prebuilt": "^2.1.16", diff --git a/src/features/cellnav/less/cellNav.less b/src/features/cellnav/less/cellNav.less index b24eae2284..7d70af6fba 100644 --- a/src/features/cellnav/less/cellNav.less +++ b/src/features/cellnav/less/cellNav.less @@ -1,10 +1,4 @@ @import '../../../less/variables'; -@import (reference) '../../../less/bootstrap/bootstrap'; - -// .ui-grid-cell-contents:focus { -// outline: 0; -// background-color: @focusedCell; -// } .ui-grid-cell-focus { outline: 0; @@ -13,12 +7,17 @@ .ui-grid-focuser { position: absolute; - left: 0px; - top: 0px; + left: 0; + top: 0; z-index: -1; width:100%; height:100%; - #ui-grid-twbs > .form-control-focus(); + &:focus { + border-color: #66afe9; + outline: 0; + -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); + box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); + } } .ui-grid-offscreen{ diff --git a/src/features/pagination/less/pagination.less b/src/features/pagination/less/pagination.less index 10836c93a8..f8fba3684e 100644 --- a/src/features/pagination/less/pagination.less +++ b/src/features/pagination/less/pagination.less @@ -1,6 +1,10 @@ @import "../../../less/variables"; @import "../../../less/elements"; -@import (reference) "../../../less/bootstrap/bootstrap"; + +@btnColor: #eee; +@btnBgColor: #dadada; +@btnBorderHoverColor: #adadad; +@btnActiveColor: #8c8c8c; .ui-grid-pager-panel { display: flex; @@ -36,17 +40,118 @@ button { height: 25px; min-width: 26px; - #ui-grid-twbs > .btn; - #ui-grid-twbs > .button-variant(@paginationButtonColor, @paginationButtonBackgroundColor, @paginationButtonBorderColor); + display: inline-block; + margin-bottom: 0; + font-weight: normal; + text-align: center; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + background: #f3f3f3; + border: 1px solid #ccc; + white-space: nowrap; + padding: 6px 12px; + font-size: 14px; + line-height: 1.42857143; + border-radius: 4px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + color: @btnColor; + + &:hover { + border-color: @btnBorderHoverColor; + text-decoration: none; + } + + &:focus { + border-color: @btnActiveColor; + text-decoration: none; + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; + } + + &:active { + border-color: @btnBorderHoverColor; + outline: 0; + -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); + box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); + &:focus { + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; + } + &:hover, + &:focus { + background-color: #c8c8c8; + border-color: @btnActiveColor; + } + } + + &:hover, &:focus, &:active { + color: @btnColor; + background: @btnBgColor; + } + + &[disabled] { + cursor: not-allowed; + opacity: 0.65; + filter: alpha(opacity=65); + -webkit-box-shadow: none; + box-shadow: none; + &:hover, + &:focus { + background-color: #f3f3f3; + border-color: #ccc; + } + } } input { - #ui-grid-twbs > .form-control(); - #ui-grid-twbs > .input-sm (); display: inline; height: 26px; width: 50px; vertical-align: top; + color: #555555; + background: #fff; + border: 1px solid #ccc; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; + -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; + transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; + padding: 5px 10px; + font-size: 12px; + line-height: 1.5; + border-radius: 3px; + + &:focus { + border-color: #66afe9; + outline: 0; + -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); + box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); + } + &[disabled], + &[readonly], + &::-moz-placeholder { + opacity: 1; + } + &::-moz-placeholder, + &:-ms-input-placeholder, + &::-webkit-input-placeholder { + color: #999; + } + &::-ms-expand { + border: 0; + background-color: transparent; + } + &[disabled], + &[readonly] { + background-color: #eeeeee; + } + &[disabled] { + cursor: not-allowed; + } } .ui-grid-pager-max-pages-number { @@ -124,12 +229,50 @@ padding: 5px 10px; select { - #ui-grid-twbs > .form-control; - #ui-grid-twbs > .input-sm (); + color: #555555; + background: #fff; + border: 1px solid #ccc; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; + -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; + transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; + padding: 5px 10px; + font-size: 12px; + line-height: 1.5; + border-radius: 3px; height: 25px; width: 67px; display: inline; vertical-align: middle; + + &:focus { + border-color: #66afe9; + outline: 0; + -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); + box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); + } + &[disabled], + &[readonly], + &::-moz-placeholder { + opacity: 1; + } + &::-moz-placeholder, + &:-ms-input-placeholder, + &::-webkit-input-placeholder { + color: #999; + } + &::-ms-expand { + border: 0; + background-color: transparent; + } + &[disabled], + &[readonly] { + background-color: #eeeeee; + } + &[disabled] { + cursor: not-allowed; + } } .ui-grid-pager-row-count-label { diff --git a/src/less/body.less b/src/less/body.less index c8506ad8a5..e0cc5a13ab 100644 --- a/src/less/body.less +++ b/src/less/body.less @@ -1,7 +1,5 @@ - .ui-grid-render-container { position: inherit; - // overflow: hidden; .border-radius(0, @gridBorderRadius, @gridBorderRadius, 0); @@ -12,7 +10,6 @@ } .ui-grid-viewport { - // overflow: auto; // TODO(c0bra): turn back on when virtual repeater is hooked up min-height: 20px; position: relative; overflow-y: scroll; @@ -52,9 +49,6 @@ } } } -//.ui-grid-row.ui-grid-row-selected > [ui-grid-row] > .ui-grid-cell{ -// -//} .ui-grid-no-row-overlay { position: absolute; diff --git a/src/less/bootstrap/bootstrap.less b/src/less/bootstrap/bootstrap.less deleted file mode 100755 index 947e417f4b..0000000000 --- a/src/less/bootstrap/bootstrap.less +++ /dev/null @@ -1,78 +0,0 @@ -/*! - * Bootstrap v3.3.5 (http://getbootstrap.com) - * Copyright 2011-2015 Twitter, Inc. - * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) - */ - -/****** NOTE: IMPORTANT INFORMATION ABOUT USING THIS FILE *********\ - * If you are importing this file then use `@import (reference) '..../bootstrap'` - * ENSURE that you use the (refrerence) - * WHY? Because otherwise you will import the entire contents of less bootstrap - * - * How does this work? - * All of the bootstrap less elements are namespaced under `#ui-grid-twbs` - * This prevents the CSS generated using this file from conflicting with a project's - * import of bootstrap. - * - * XXX: Why are so many of these imports commented out? - * There are several issues with the `extend` function in less. - * Using extend, even within an import that only has a reference will import that - * css element. This causes bloat in the distributed css files. - * Related Issues: - * https://github.com/less/less.js/issues/1968 - * https://github.com/less/less.js/issues/1851 - * - * If you comment in one of these files you may get much more than css then you want. - * Only do this sparingly. - */ -#ui-grid-twbs { - // Core variables and mixins - @import (reference) "@{bootstrapDirectory}/less/variables.less"; - @import (reference) "@{bootstrapDirectory}/less/mixins.less"; - - // Reset and dependencies - @import (reference) "@{bootstrapDirectory}/less/normalize.less"; - @import (reference) "@{bootstrapDirectory}/less/print.less"; - @import (reference) "@{bootstrapDirectory}/less/glyphicons.less"; - - // Core CSS - @import (reference) "@{bootstrapDirectory}/less/scaffolding.less"; - @import (reference) "@{bootstrapDirectory}/less/code.less"; - @import (reference) "@{bootstrapDirectory}/less/tables.less"; - @import (reference) "@{bootstrapDirectory}/less/forms.less"; - @import (reference) "@{bootstrapDirectory}/less/buttons.less"; - //@import (reference) "@{bootstrapDirectory}/less/type.less"; - //@import (reference) "@{bootstrapDirectory}/less/grid.less"; - - // Components - @import (reference) "@{bootstrapDirectory}/less/component-animations.less"; - @import (reference) "@{bootstrapDirectory}/less/dropdowns.less"; - @import (reference) "@{bootstrapDirectory}/less/button-groups.less"; - @import (reference) "@{bootstrapDirectory}/less/input-groups.less"; - @import (reference) "@{bootstrapDirectory}/less/breadcrumbs.less"; - @import (reference) "@{bootstrapDirectory}/less/pagination.less"; - @import (reference) "@{bootstrapDirectory}/less/labels.less"; - @import (reference) "@{bootstrapDirectory}/less/badges.less"; - @import (reference) "@{bootstrapDirectory}/less/jumbotron.less"; - @import (reference) "@{bootstrapDirectory}/less/alerts.less"; - @import (reference) "@{bootstrapDirectory}/less/progress-bars.less"; - @import (reference) "@{bootstrapDirectory}/less/media.less"; - @import (reference) "@{bootstrapDirectory}/less/list-group.less"; - @import (reference) "@{bootstrapDirectory}/less/responsive-embed.less"; - @import (reference) "@{bootstrapDirectory}/less/wells.less"; - @import (reference) "@{bootstrapDirectory}/less/close.less"; - //@import (reference) "@{bootstrapDirectory}/less/navs.less"; - //@import (reference) "@{bootstrapDirectory}/less/navbar.less"; - //@import (reference) "@{bootstrapDirectory}/less/pager.less"; - //@import (reference) "@{bootstrapDirectory}/less/thumbnails.less"; - //@import (reference) "@{bootstrapDirectory}/less/panels.less"; - - // Components w/ JavaScript - @import (reference) "@{bootstrapDirectory}/less/tooltip.less"; - //@import (reference) "@{bootstrapDirectory}/less/modals.less"; - //@import (reference) "@{bootstrapDirectory}/less/popovers.less"; - - // Utility classes - @import (reference) "@{bootstrapDirectory}/less/utilities.less"; - //@import (reference) "@{bootstrapDirectory}/less/responsive-utilities.less"; -} diff --git a/src/less/cell.less b/src/less/cell.less index b902e49176..3ca5c4894a 100644 --- a/src/less/cell.less +++ b/src/less/cell.less @@ -2,8 +2,6 @@ .ui-grid-cell { overflow: hidden; - // position: absolute; - // position: relative; // NOTE: removing so border is visible float: left; background-color: inherit; border-right: @gridBorderWidth solid; @@ -26,7 +24,6 @@ text-overflow: ellipsis; overflow: hidden; height: 100%; - // width: 100%; } .ui-grid-cell-contents-hidden { diff --git a/src/less/footer.less b/src/less/footer.less index 2bb4c47f51..e17bb3dc68 100644 --- a/src/less/footer.less +++ b/src/less/footer.less @@ -9,14 +9,11 @@ @topPanelRadius: @gridBorderRadius - @gridBorderWidth; .ui-grid-footer-panel { position: relative; - // z-index: 1; - // background-color: @darkGray; // #EAEAEA border-bottom: 1px solid @borderColor; // #D4D4D4 border-top: 1px solid @borderColor; overflow: hidden; // Disable so menus show up font-weight: bold; - // .gradient(@headerBackgroundColor, @headerGradientStart, @headerGradientStop); .ui-grid-footer-panel-background; .border-radius(@topPanelRadius, 0, 0, @topPanelRadius); @@ -51,8 +48,6 @@ &:after { clear:both; } - - // .border-radius(@gridBorderRadius, 0, 0, @gridBorderRadius); } .ui-grid-footer-cell-wrapper { @@ -68,7 +63,6 @@ .ui-grid-footer-cell { overflow: hidden; - // position: relative; // NOTE: removing so border is visible background-color: inherit; border-right: @gridBorderWidth solid; border-color: @borderColor; diff --git a/src/less/grid.less b/src/less/grid.less index 3655e76edd..afd92d29e3 100644 --- a/src/less/grid.less +++ b/src/less/grid.less @@ -1,4 +1,3 @@ - .ui-grid { border: @gridBorderWidth solid @borderColor; box-sizing: content-box; // If bootstrap (or another included library) makes the default sizing on element "border-box", then calculations get messed up @@ -6,7 +5,6 @@ .rounded(@gridBorderRadius); .transform(translateZ(0)); - } .ui-grid-vertical-bar { @@ -37,11 +35,6 @@ background-color: @headerVerticalBarColor; } -// .ui-grid-vertical-bar-visible { -// width: 1px; -// background-color: @borderColor; -// } - .ui-grid-clearfix { &:before, &:after { content: ""; @@ -54,7 +47,7 @@ } .ui-grid-invisible { - visibility: hidden;; + visibility: hidden; } // Wraps the contents inside the grid directive with a relatively-positioned element so that all absolute elements are positioned relative to the grid, and not the page diff --git a/src/less/header.less b/src/less/header.less index ba15087d59..3596939e09 100644 --- a/src/less/header.less +++ b/src/less/header.less @@ -12,12 +12,10 @@ .ui-grid-top-panel { position: relative; - // border-bottom: 1px solid @borderColor; // #D4D4D4 - overflow: hidden; // Disable so menus show up + overflow: hidden; // Disable so menus show up font-weight: bold; - // .gradient(@headerBackgroundColor, @headerGradientStart, @headerGradientStop); .ui-grid-top-panel-background; .border-radius(@topPanelRadius, 0, 0, @topPanelRadius); @@ -29,7 +27,6 @@ } .ui-grid-header-canvas { - // Clearfix for floating header cells &:before, &:after { content: ""; @@ -41,8 +38,6 @@ &:after { clear:both; } - - // .border-radius(@gridBorderRadius, 0, 0, @gridBorderRadius); } @@ -108,8 +103,6 @@ position: absolute; right: @gridBorderWidth; // So it doesn't overlay the vertical bar top: 0; - // bottom: 0; - // .ui-grid-top-panel-background; .ui-grid-icon-angle-down { vertical-align: sub; diff --git a/src/less/main.less b/src/less/main.less index d4e83951b9..1badc9bc12 100644 --- a/src/less/main.less +++ b/src/less/main.less @@ -1,4 +1,3 @@ -@import (once, reference) 'bootstrap/bootstrap'; @import 'grid'; @import 'header'; @import 'body'; diff --git a/src/less/sorting.less b/src/less/sorting.less index bcc79c4857..868c39e31f 100644 --- a/src/less/sorting.less +++ b/src/less/sorting.less @@ -1,18 +1,3 @@ -// .ui-grid-sortarrow { -// fill: @sortArrowBackgroundColor; -// stroke: @sortArrowBorderColor; -// stroke-linejoin:miter; -// } - -// .ui-grid-sortarrow.down { -// -webkit-transform: rotate(180deg); -// -moz-transform: rotate(180deg); -// -ms-transform: rotate(180deg); -// -o-transform: rotate(180deg); -// transform: rotate(180deg); -// } - - @sortArrowWidth: 20px; .ui-grid-sortarrow { diff --git a/src/less/variables.less b/src/less/variables.less index 4e54b02630..7b0632df8a 100644 --- a/src/less/variables.less +++ b/src/less/variables.less @@ -3,8 +3,6 @@ /*-- VARIABLES (DO NOT REMOVE THESE COMMENTS) --*/ -@bootstrapDirectory: "../../../node_modules/bootstrap"; - /** * @section Grid styles */