@netang/quasar 0.1.35 → 0.1.37

package/sass/quasar/table.scss

@@ -1,161 +1,161 @@
-/**
- * 表格
- */
-
-// 头部底部背景色
-$header-footer-bg-color: $grey-2;
-$dark-header-footer-bg-color: $color-gray-93;
-// 单元格背景色
-$td-bg-color: #ffffff;
-$dark-td-bg-color: $dark;
-
-.n-table {
-
-    // 单元格换行
-    &__col-wrap {
-        word-wrap: break-word !important;
-        white-space: pre-wrap !important;
-    }
-
-    // 箭头
-    //.q-tree__arrow {
-    //    color: $grey;
-    //}
-
-    // 空箭头
-    &__arrow-noop {
-        width: 16px;
-        margin-right: 4px;
-    }
-
-    &.q-table {
-        &--dense {
-            // 复选框
-            .q-table {
-                th,
-                td {
-                    &.q-table--col-auto-width:first-child {
-                        padding: 0 12px;
-                    }
-                }
-            }
-
-            thead tr,
-            tbody tr,
-            tbody td {
-                height: 40px;
-            }
-        }
-
-        &--horizontal-separator,
-        &--cell-separator {
-            tbody {
-                // 表格内容最后一排数据底部加上横线
-                &.q-virtual-scroll__content {
-                    tr:last-child > td {
-                        border-bottom-width: 1px;
-                    }
-                }
-            }
-        }
-    }
-
-    // 宫格模式
-    &--grid {
-        background-color: rgba(var(--n-reverse-color-rgb), 0.1);
-    }
-
-    // 撑满
-    &.absolute-full {
-        border-radius: unset;
-
-        // 顶部吸顶
-        thead tr th {
-            position: sticky;
-            z-index: 2;
-        }
-        thead tr:first-child th {
-            top: 0;
-        }
-
-        // 最后一列固定
-        &.n-table--last-fixed {
-            // 最后一列吸顶
-            th:last-child,
-            td:last-child {
-                position: sticky;
-                right: 0;
-                z-index: 1;
-            }
-            th:last-child {
-                z-index: 2;
-            }
-        }
-    }
-}
-
-// 亮色
-.body--light {
-    .n-table {
-
-        // 头部和底部背景色
-        .q-table__top,
-        .q-table__bottom,
-        thead tr:first-child th {
-            background-color: $header-footer-bg-color;
-        }
-
-        // 撑满
-        &.absolute-full {
-            // 最后一列固定
-            &.n-table--last-fixed {
-                // 头部最后一个
-                thead tr:last-child th:last-child {
-                    background-color: $header-footer-bg-color;
-                }
-                // 内容最后一个
-                td:last-child {
-                    background-color: $td-bg-color;
-                }
-                th:last-child,
-                td:last-child {
-                    background-color: $td-bg-color;
-                    border-left: 1px solid $table-border-color;
-                }
-            }
-        }
-    }
-}
-
-// 暗色
-.body--dark {
-    .n-table {
-
-        // 头部和底部背景色
-        .q-table__top,
-        .q-table__bottom,
-        thead tr:first-child th {
-            background-color: $dark-header-footer-bg-color;
-        }
-
-        // 撑满
-        &.absolute-full {
-            // 最后一列固定
-            &.n-table--last-fixed {
-                // 头部最后一个
-                thead tr:last-child th:last-child {
-                    background-color: $dark-header-footer-bg-color;
-                }
-                // 内容最后一个
-                td:last-child {
-                    background-color: $dark-td-bg-color;
-                }
-                th:last-child,
-                td:last-child {
-                    background-color: $dark-td-bg-color;
-                    border-left: 1px solid $table-dark-border-color;
-                }
-            }
-        }
-    }
-}
+/**
+ * 表格
+ */
+
+// 头部底部背景色
+$header-footer-bg-color: $grey-2;
+$dark-header-footer-bg-color: $color-gray-93;
+// 单元格背景色
+$td-bg-color: #ffffff;
+$dark-td-bg-color: $dark;
+
+.n-table {
+
+    // 单元格换行
+    &__col-wrap {
+        word-wrap: break-word !important;
+        white-space: pre-wrap !important;
+    }
+
+    // 箭头
+    //.q-tree__arrow {
+    //    color: $grey;
+    //}
+
+    // 空箭头
+    &__arrow-noop {
+        width: 16px;
+        margin-right: 4px;
+    }
+
+    &.q-table {
+        &--dense {
+            // 复选框
+            .q-table {
+                th,
+                td {
+                    &.q-table--col-auto-width:first-child {
+                        padding: 0 12px;
+                    }
+                }
+            }
+
+            thead tr,
+            tbody tr,
+            tbody td {
+                height: 40px;
+            }
+        }
+
+        &--horizontal-separator,
+        &--cell-separator {
+            tbody {
+                // 表格内容最后一排数据底部加上横线
+                &.q-virtual-scroll__content {
+                    tr:last-child > td {
+                        border-bottom-width: 1px;
+                    }
+                }
+            }
+        }
+    }
+
+    // 宫格模式
+    &--grid {
+        background-color: rgba(var(--n-reverse-color-rgb), 0.1);
+    }
+
+    // 撑满
+    &.absolute-full {
+        border-radius: unset;
+
+        // 顶部吸顶
+        thead tr th {
+            position: sticky;
+            z-index: 2;
+        }
+        thead tr:first-child th {
+            top: 0;
+        }
+
+        // 最后一列固定
+        &.n-table--last-fixed {
+            // 最后一列吸顶
+            th:last-child,
+            td:last-child {
+                position: sticky;
+                right: 0;
+                z-index: 1;
+            }
+            th:last-child {
+                z-index: 2;
+            }
+        }
+    }
+}
+
+// 亮色
+.body--light {
+    .n-table {
+
+        // 头部和底部背景色
+        .q-table__top,
+        .q-table__bottom,
+        thead tr:first-child th {
+            background-color: $header-footer-bg-color;
+        }
+
+        // 撑满
+        &.absolute-full {
+            // 最后一列固定
+            &.n-table--last-fixed {
+                // 头部最后一个
+                thead tr:last-child th:last-child {
+                    background-color: $header-footer-bg-color;
+                }
+                // 内容最后一个
+                td:last-child {
+                    background-color: $td-bg-color;
+                }
+                th:last-child,
+                td:last-child {
+                    background-color: $td-bg-color;
+                    border-left: 1px solid $table-border-color;
+                }
+            }
+        }
+    }
+}
+
+// 暗色
+.body--dark {
+    .n-table {
+
+        // 头部和底部背景色
+        .q-table__top,
+        .q-table__bottom,
+        thead tr:first-child th {
+            background-color: $dark-header-footer-bg-color;
+        }
+
+        // 撑满
+        &.absolute-full {
+            // 最后一列固定
+            &.n-table--last-fixed {
+                // 头部最后一个
+                thead tr:last-child th:last-child {
+                    background-color: $dark-header-footer-bg-color;
+                }
+                // 内容最后一个
+                td:last-child {
+                    background-color: $dark-td-bg-color;
+                }
+                th:last-child,
+                td:last-child {
+                    background-color: $dark-td-bg-color;
+                    border-left: 1px solid $table-dark-border-color;
+                }
+            }
+        }
+    }
+}

package/sass/variables.scss

@@ -1,138 +1,138 @@
-// ==========【quasar 重定义】=====================================================================================================
-
-$primary   : #4380fa !default;
-$secondary : #19be6b !default;
-$accent    : #9C27B0 !default;
-
-$dark      : #27282e !default;
-$dark-page : #1b1c21 !default;
-
-$positive  : #19be6b !default;
-$negative  : #ff3750 !default;
-$info      : #2db7f5 !default;
-$warning   : #ff9900 !default;
-
-//$shadow-color         : #000000 !default; !default;
-//$elevation-umbra      : rgba($shadow-color, 0.1) !default; !default;
-//$elevation-penumbra   : rgba($shadow-color, 0.1) !default; !default;
-//$elevation-ambient    : rgba($shadow-color, 0.1) !default; !default;
-
-// ==========【自定义】=====================================================================================================
-
-$color-gray-dark: $dark-page !default;
-$color-gray-white: #ffffff !default;
-
-$color-gray-99: mix($color-gray-dark, $color-gray-white, 99%) !default;
-$color-gray-98: mix($color-gray-dark, $color-gray-white, 98%) !default;
-$color-gray-97: mix($color-gray-dark, $color-gray-white, 97%) !default;
-$color-gray-96: mix($color-gray-dark, $color-gray-white, 96%) !default;
-$color-gray-95: mix($color-gray-dark, $color-gray-white, 95%) !default;
-$color-gray-94: mix($color-gray-dark, $color-gray-white, 94%) !default;
-$color-gray-93: mix($color-gray-dark, $color-gray-white, 93%) !default;
-$color-gray-92: mix($color-gray-dark, $color-gray-white, 92%) !default;
-$color-gray-91: mix($color-gray-dark, $color-gray-white, 91%) !default;
-$color-gray-90: mix($color-gray-dark, $color-gray-white, 90%) !default;
-$color-gray-89: mix($color-gray-dark, $color-gray-white, 89%) !default;
-$color-gray-88: mix($color-gray-dark, $color-gray-white, 88%) !default;
-$color-gray-87: mix($color-gray-dark, $color-gray-white, 87%) !default;
-$color-gray-86: mix($color-gray-dark, $color-gray-white, 86%) !default;
-$color-gray-85: mix($color-gray-dark, $color-gray-white, 85%) !default;
-$color-gray-84: mix($color-gray-dark, $color-gray-white, 84%) !default;
-$color-gray-83: mix($color-gray-dark, $color-gray-white, 83%) !default;
-$color-gray-82: mix($color-gray-dark, $color-gray-white, 82%) !default;
-$color-gray-81: mix($color-gray-dark, $color-gray-white, 81%) !default;
-$color-gray-80: mix($color-gray-dark, $color-gray-white, 80%) !default;
-$color-gray-79: mix($color-gray-dark, $color-gray-white, 79%) !default;
-$color-gray-78: mix($color-gray-dark, $color-gray-white, 78%) !default;
-$color-gray-77: mix($color-gray-dark, $color-gray-white, 77%) !default;
-$color-gray-76: mix($color-gray-dark, $color-gray-white, 76%) !default;
-$color-gray-75: mix($color-gray-dark, $color-gray-white, 75%) !default;
-$color-gray-74: mix($color-gray-dark, $color-gray-white, 74%) !default;
-$color-gray-73: mix($color-gray-dark, $color-gray-white, 73%) !default;
-$color-gray-72: mix($color-gray-dark, $color-gray-white, 72%) !default;
-$color-gray-71: mix($color-gray-dark, $color-gray-white, 71%) !default;
-$color-gray-70: mix($color-gray-dark, $color-gray-white, 70%) !default;
-$color-gray-69: mix($color-gray-dark, $color-gray-white, 69%) !default;
-$color-gray-68: mix($color-gray-dark, $color-gray-white, 68%) !default;
-$color-gray-67: mix($color-gray-dark, $color-gray-white, 67%) !default;
-$color-gray-66: mix($color-gray-dark, $color-gray-white, 66%) !default;
-$color-gray-65: mix($color-gray-dark, $color-gray-white, 65%) !default;
-$color-gray-64: mix($color-gray-dark, $color-gray-white, 64%) !default;
-$color-gray-63: mix($color-gray-dark, $color-gray-white, 63%) !default;
-$color-gray-62: mix($color-gray-dark, $color-gray-white, 62%) !default;
-$color-gray-61: mix($color-gray-dark, $color-gray-white, 61%) !default;
-$color-gray-60: mix($color-gray-dark, $color-gray-white, 60%) !default;
-$color-gray-59: mix($color-gray-dark, $color-gray-white, 59%) !default;
-$color-gray-58: mix($color-gray-dark, $color-gray-white, 58%) !default;
-$color-gray-57: mix($color-gray-dark, $color-gray-white, 57%) !default;
-$color-gray-56: mix($color-gray-dark, $color-gray-white, 56%) !default;
-$color-gray-55: mix($color-gray-dark, $color-gray-white, 55%) !default;
-$color-gray-54: mix($color-gray-dark, $color-gray-white, 54%) !default;
-$color-gray-53: mix($color-gray-dark, $color-gray-white, 53%) !default;
-$color-gray-52: mix($color-gray-dark, $color-gray-white, 52%) !default;
-$color-gray-51: mix($color-gray-dark, $color-gray-white, 51%) !default;
-$color-gray-50: mix($color-gray-dark, $color-gray-white, 50%) !default;
-$color-gray-49: mix($color-gray-dark, $color-gray-white, 49%) !default;
-$color-gray-48: mix($color-gray-dark, $color-gray-white, 48%) !default;
-$color-gray-47: mix($color-gray-dark, $color-gray-white, 47%) !default;
-$color-gray-46: mix($color-gray-dark, $color-gray-white, 46%) !default;
-$color-gray-45: mix($color-gray-dark, $color-gray-white, 45%) !default;
-$color-gray-44: mix($color-gray-dark, $color-gray-white, 44%) !default;
-$color-gray-43: mix($color-gray-dark, $color-gray-white, 43%) !default;
-$color-gray-42: mix($color-gray-dark, $color-gray-white, 42%) !default;
-$color-gray-41: mix($color-gray-dark, $color-gray-white, 41%) !default;
-$color-gray-40: mix($color-gray-dark, $color-gray-white, 40%) !default;
-$color-gray-39: mix($color-gray-dark, $color-gray-white, 39%) !default;
-$color-gray-38: mix($color-gray-dark, $color-gray-white, 38%) !default;
-$color-gray-37: mix($color-gray-dark, $color-gray-white, 37%) !default;
-$color-gray-36: mix($color-gray-dark, $color-gray-white, 36%) !default;
-$color-gray-35: mix($color-gray-dark, $color-gray-white, 35%) !default;
-$color-gray-34: mix($color-gray-dark, $color-gray-white, 34%) !default;
-$color-gray-33: mix($color-gray-dark, $color-gray-white, 33%) !default;
-$color-gray-32: mix($color-gray-dark, $color-gray-white, 32%) !default;
-$color-gray-31: mix($color-gray-dark, $color-gray-white, 31%) !default;
-$color-gray-30: mix($color-gray-dark, $color-gray-white, 30%) !default;
-$color-gray-29: mix($color-gray-dark, $color-gray-white, 29%) !default;
-$color-gray-28: mix($color-gray-dark, $color-gray-white, 28%) !default;
-$color-gray-27: mix($color-gray-dark, $color-gray-white, 27%) !default;
-$color-gray-26: mix($color-gray-dark, $color-gray-white, 26%) !default;
-$color-gray-25: mix($color-gray-dark, $color-gray-white, 25%) !default;
-$color-gray-24: mix($color-gray-dark, $color-gray-white, 24%) !default;
-$color-gray-23: mix($color-gray-dark, $color-gray-white, 23%) !default;
-$color-gray-22: mix($color-gray-dark, $color-gray-white, 22%) !default;
-$color-gray-21: mix($color-gray-dark, $color-gray-white, 21%) !default;
-$color-gray-20: mix($color-gray-dark, $color-gray-white, 20%) !default;
-$color-gray-16: mix($color-gray-dark, $color-gray-white, 16%) !default;
-$color-gray-19: mix($color-gray-dark, $color-gray-white, 19%) !default;
-$color-gray-18: mix($color-gray-dark, $color-gray-white, 18%) !default;
-$color-gray-17: mix($color-gray-dark, $color-gray-white, 17%) !default;
-$color-gray-16: mix($color-gray-dark, $color-gray-white, 16%) !default;
-$color-gray-15: mix($color-gray-dark, $color-gray-white, 15%) !default;
-$color-gray-14: mix($color-gray-dark, $color-gray-white, 14%) !default;
-$color-gray-13: mix($color-gray-dark, $color-gray-white, 13%) !default;
-$color-gray-12: mix($color-gray-dark, $color-gray-white, 12%) !default;
-$color-gray-11: mix($color-gray-dark, $color-gray-white, 11%) !default;
-$color-gray-10: mix($color-gray-dark, $color-gray-white, 10%) !default;
-$color-gray-9: mix($color-gray-dark, $color-gray-white, 9%) !default;
-$color-gray-8: mix($color-gray-dark, $color-gray-white, 8%) !default;
-$color-gray-7: mix($color-gray-dark, $color-gray-white, 7%) !default;
-$color-gray-6: mix($color-gray-dark, $color-gray-white, 6%) !default;
-$color-gray-5: mix($color-gray-dark, $color-gray-white, 5%) !default;
-$color-gray-4: mix($color-gray-dark, $color-gray-white, 4%) !default;
-$color-gray-3: mix($color-gray-dark, $color-gray-white, 3%) !default;
-$color-gray-2: mix($color-gray-dark, $color-gray-white, 2%) !default;
-$color-gray-1: mix($color-gray-dark, $color-gray-white, 1%) !default;
-
-$color-ccc: #cccccc !default;
-$color-999: #999999 !default;
-$color-888: #888888 !default;
-$color-777: #777777 !default;
-$color-666: #666666 !default;
-$color-555: #555555 !default;
-$color-444: #444444 !default;
-$color-333: #333333 !default;
-$color-222: #222222 !default;
-$color-111: #111111 !default;
-$color-000: $color-gray-dark !default;
-
-@import "~quasar/src/css/variables.sass";
+// ==========【quasar 重定义】=====================================================================================================
+
+$primary   : #4380fa !default;
+$secondary : #19be6b !default;
+$accent    : #9C27B0 !default;
+
+$dark      : #27282e !default;
+$dark-page : #1b1c21 !default;
+
+$positive  : #19be6b !default;
+$negative  : #ff3750 !default;
+$info      : #2db7f5 !default;
+$warning   : #ff9900 !default;
+
+//$shadow-color         : #000000 !default; !default;
+//$elevation-umbra      : rgba($shadow-color, 0.1) !default; !default;
+//$elevation-penumbra   : rgba($shadow-color, 0.1) !default; !default;
+//$elevation-ambient    : rgba($shadow-color, 0.1) !default; !default;
+
+// ==========【自定义】=====================================================================================================
+
+$color-gray-dark: $dark-page !default;
+$color-gray-white: #ffffff !default;
+
+$color-gray-99: mix($color-gray-dark, $color-gray-white, 99%) !default;
+$color-gray-98: mix($color-gray-dark, $color-gray-white, 98%) !default;
+$color-gray-97: mix($color-gray-dark, $color-gray-white, 97%) !default;
+$color-gray-96: mix($color-gray-dark, $color-gray-white, 96%) !default;
+$color-gray-95: mix($color-gray-dark, $color-gray-white, 95%) !default;
+$color-gray-94: mix($color-gray-dark, $color-gray-white, 94%) !default;
+$color-gray-93: mix($color-gray-dark, $color-gray-white, 93%) !default;
+$color-gray-92: mix($color-gray-dark, $color-gray-white, 92%) !default;
+$color-gray-91: mix($color-gray-dark, $color-gray-white, 91%) !default;
+$color-gray-90: mix($color-gray-dark, $color-gray-white, 90%) !default;
+$color-gray-89: mix($color-gray-dark, $color-gray-white, 89%) !default;
+$color-gray-88: mix($color-gray-dark, $color-gray-white, 88%) !default;
+$color-gray-87: mix($color-gray-dark, $color-gray-white, 87%) !default;
+$color-gray-86: mix($color-gray-dark, $color-gray-white, 86%) !default;
+$color-gray-85: mix($color-gray-dark, $color-gray-white, 85%) !default;
+$color-gray-84: mix($color-gray-dark, $color-gray-white, 84%) !default;
+$color-gray-83: mix($color-gray-dark, $color-gray-white, 83%) !default;
+$color-gray-82: mix($color-gray-dark, $color-gray-white, 82%) !default;
+$color-gray-81: mix($color-gray-dark, $color-gray-white, 81%) !default;
+$color-gray-80: mix($color-gray-dark, $color-gray-white, 80%) !default;
+$color-gray-79: mix($color-gray-dark, $color-gray-white, 79%) !default;
+$color-gray-78: mix($color-gray-dark, $color-gray-white, 78%) !default;
+$color-gray-77: mix($color-gray-dark, $color-gray-white, 77%) !default;
+$color-gray-76: mix($color-gray-dark, $color-gray-white, 76%) !default;
+$color-gray-75: mix($color-gray-dark, $color-gray-white, 75%) !default;
+$color-gray-74: mix($color-gray-dark, $color-gray-white, 74%) !default;
+$color-gray-73: mix($color-gray-dark, $color-gray-white, 73%) !default;
+$color-gray-72: mix($color-gray-dark, $color-gray-white, 72%) !default;
+$color-gray-71: mix($color-gray-dark, $color-gray-white, 71%) !default;
+$color-gray-70: mix($color-gray-dark, $color-gray-white, 70%) !default;
+$color-gray-69: mix($color-gray-dark, $color-gray-white, 69%) !default;
+$color-gray-68: mix($color-gray-dark, $color-gray-white, 68%) !default;
+$color-gray-67: mix($color-gray-dark, $color-gray-white, 67%) !default;
+$color-gray-66: mix($color-gray-dark, $color-gray-white, 66%) !default;
+$color-gray-65: mix($color-gray-dark, $color-gray-white, 65%) !default;
+$color-gray-64: mix($color-gray-dark, $color-gray-white, 64%) !default;
+$color-gray-63: mix($color-gray-dark, $color-gray-white, 63%) !default;
+$color-gray-62: mix($color-gray-dark, $color-gray-white, 62%) !default;
+$color-gray-61: mix($color-gray-dark, $color-gray-white, 61%) !default;
+$color-gray-60: mix($color-gray-dark, $color-gray-white, 60%) !default;
+$color-gray-59: mix($color-gray-dark, $color-gray-white, 59%) !default;
+$color-gray-58: mix($color-gray-dark, $color-gray-white, 58%) !default;
+$color-gray-57: mix($color-gray-dark, $color-gray-white, 57%) !default;
+$color-gray-56: mix($color-gray-dark, $color-gray-white, 56%) !default;
+$color-gray-55: mix($color-gray-dark, $color-gray-white, 55%) !default;
+$color-gray-54: mix($color-gray-dark, $color-gray-white, 54%) !default;
+$color-gray-53: mix($color-gray-dark, $color-gray-white, 53%) !default;
+$color-gray-52: mix($color-gray-dark, $color-gray-white, 52%) !default;
+$color-gray-51: mix($color-gray-dark, $color-gray-white, 51%) !default;
+$color-gray-50: mix($color-gray-dark, $color-gray-white, 50%) !default;
+$color-gray-49: mix($color-gray-dark, $color-gray-white, 49%) !default;
+$color-gray-48: mix($color-gray-dark, $color-gray-white, 48%) !default;
+$color-gray-47: mix($color-gray-dark, $color-gray-white, 47%) !default;
+$color-gray-46: mix($color-gray-dark, $color-gray-white, 46%) !default;
+$color-gray-45: mix($color-gray-dark, $color-gray-white, 45%) !default;
+$color-gray-44: mix($color-gray-dark, $color-gray-white, 44%) !default;
+$color-gray-43: mix($color-gray-dark, $color-gray-white, 43%) !default;
+$color-gray-42: mix($color-gray-dark, $color-gray-white, 42%) !default;
+$color-gray-41: mix($color-gray-dark, $color-gray-white, 41%) !default;
+$color-gray-40: mix($color-gray-dark, $color-gray-white, 40%) !default;
+$color-gray-39: mix($color-gray-dark, $color-gray-white, 39%) !default;
+$color-gray-38: mix($color-gray-dark, $color-gray-white, 38%) !default;
+$color-gray-37: mix($color-gray-dark, $color-gray-white, 37%) !default;
+$color-gray-36: mix($color-gray-dark, $color-gray-white, 36%) !default;
+$color-gray-35: mix($color-gray-dark, $color-gray-white, 35%) !default;
+$color-gray-34: mix($color-gray-dark, $color-gray-white, 34%) !default;
+$color-gray-33: mix($color-gray-dark, $color-gray-white, 33%) !default;
+$color-gray-32: mix($color-gray-dark, $color-gray-white, 32%) !default;
+$color-gray-31: mix($color-gray-dark, $color-gray-white, 31%) !default;
+$color-gray-30: mix($color-gray-dark, $color-gray-white, 30%) !default;
+$color-gray-29: mix($color-gray-dark, $color-gray-white, 29%) !default;
+$color-gray-28: mix($color-gray-dark, $color-gray-white, 28%) !default;
+$color-gray-27: mix($color-gray-dark, $color-gray-white, 27%) !default;
+$color-gray-26: mix($color-gray-dark, $color-gray-white, 26%) !default;
+$color-gray-25: mix($color-gray-dark, $color-gray-white, 25%) !default;
+$color-gray-24: mix($color-gray-dark, $color-gray-white, 24%) !default;
+$color-gray-23: mix($color-gray-dark, $color-gray-white, 23%) !default;
+$color-gray-22: mix($color-gray-dark, $color-gray-white, 22%) !default;
+$color-gray-21: mix($color-gray-dark, $color-gray-white, 21%) !default;
+$color-gray-20: mix($color-gray-dark, $color-gray-white, 20%) !default;
+$color-gray-16: mix($color-gray-dark, $color-gray-white, 16%) !default;
+$color-gray-19: mix($color-gray-dark, $color-gray-white, 19%) !default;
+$color-gray-18: mix($color-gray-dark, $color-gray-white, 18%) !default;
+$color-gray-17: mix($color-gray-dark, $color-gray-white, 17%) !default;
+$color-gray-16: mix($color-gray-dark, $color-gray-white, 16%) !default;
+$color-gray-15: mix($color-gray-dark, $color-gray-white, 15%) !default;
+$color-gray-14: mix($color-gray-dark, $color-gray-white, 14%) !default;
+$color-gray-13: mix($color-gray-dark, $color-gray-white, 13%) !default;
+$color-gray-12: mix($color-gray-dark, $color-gray-white, 12%) !default;
+$color-gray-11: mix($color-gray-dark, $color-gray-white, 11%) !default;
+$color-gray-10: mix($color-gray-dark, $color-gray-white, 10%) !default;
+$color-gray-9: mix($color-gray-dark, $color-gray-white, 9%) !default;
+$color-gray-8: mix($color-gray-dark, $color-gray-white, 8%) !default;
+$color-gray-7: mix($color-gray-dark, $color-gray-white, 7%) !default;
+$color-gray-6: mix($color-gray-dark, $color-gray-white, 6%) !default;
+$color-gray-5: mix($color-gray-dark, $color-gray-white, 5%) !default;
+$color-gray-4: mix($color-gray-dark, $color-gray-white, 4%) !default;
+$color-gray-3: mix($color-gray-dark, $color-gray-white, 3%) !default;
+$color-gray-2: mix($color-gray-dark, $color-gray-white, 2%) !default;
+$color-gray-1: mix($color-gray-dark, $color-gray-white, 1%) !default;
+
+$color-ccc: #cccccc !default;
+$color-999: #999999 !default;
+$color-888: #888888 !default;
+$color-777: #777777 !default;
+$color-666: #666666 !default;
+$color-555: #555555 !default;
+$color-444: #444444 !default;
+$color-333: #333333 !default;
+$color-222: #222222 !default;
+$color-111: #111111 !default;
+$color-000: $color-gray-dark !default;
+
+@import "~quasar/src/css/variables.sass";