fix(less): remove bootstrap dependency

UI-Grid no longer depends on bootstrap to compile so less files can be easily compiled. fix #4173, fix #5435
angular-ui · Aug 4, 2018 · 0c745bb · 0c745bb
1 parent ed8ebba
commit 0c745bb
Show file tree

Hide file tree

Showing 7 changed files with 173 additions and 113 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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
@@ -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 {