#313: drop variables here, but extend admin-dark.scss with css hacks

joomlatools · Jul 7, 2020 · 7539b27 · 7539b27
1 parent c117e9e
commit 7539b27
Show file tree

Hide file tree

Showing 4 changed files with 142 additions and 188 deletions.
diff --git a/code/libraries/joomlatools/component/koowa/resources/assets/css/admin-dark.css b/code/libraries/joomlatools/component/koowa/resources/assets/css/admin-dark.css
@@ -1,72 +1,4 @@
 @charset "UTF-8";
-button span.k-scopebar__item--filter__title, button span.k-scopebar__item--filter__icon {
-  color: #FFFFFF;
-}
-
-ul.select2-selection__rendered {
-  background-color: #3b3b3b;
-}
-
-.k-inline-modal {
-  color: #FFFFFF !important;
-  background-color: #545454 !important;
-}
-
-.k-inline-modal__title {
-  color: #FFFFFF !important;
-}
-
-.k-ui-namespace .k-scopebar__item--search .k-search__submit {
-  color: #FFFFFF !important;
-}
-
-.select2-results__option {
-  color: #FFFFFF;
-}
-
-.select2-dropdown {
-  background-color: #545454 !important;
-  color: #FFFFFF !important;
-}
-
-.k-ui-namespace .k-pagination .k-pagination__pages > li > a {
-  background-color: #545454 !important;
-  color: #FFFFFF !important;
-}
-
-.k-ui-namespace .k-pagination__pages > li.k-is-disabled > span {
-  background-color: #545454 !important;
-  color: #FFFFFF !important;
-}
-
-.k-ui-namespace .k-pagination__pages > li.k-is-active > a {
-  background-color: #0073AA !important;
-}
-
-.datepicker td:nth-child(n), .datepicker th:nth-child(n) {
-  color: #FFFFFF;
-}
-
-.k-upload {
-  background-color: #545454 !important;
-  border: 1px solid #545454 !important;
-}
-.k-upload .k-upload__content-wrapper {
-  background-color: #545454 !important;
-  color: #FFFFFF !important;
-  border-bottom: none;
-}
-.k-upload .k-upload__info__body {
-  background-color: #545454 !important;
-  color: #FFFFFF !important;
-  border-top: 1px solid #545454 !important;
-}
-
-.k-upload:after {
-  background-color: #545454 !important;
-  color: #FFFFFF !important;
-}
-
 /* HTML
    ========================================================================== */
 /**
@@ -16081,4 +16013,72 @@ html .form-inline .select2-container--bootstrap {
 .select2-container--bootstrap .select2-search--dropdown .select2-search__field {
   margin-bottom: 0;
   height: auto;
+}
+
+button span.k-scopebar__item--filter__title, button span.k-scopebar__item--filter__icon {
+  color: #FFFFFF;
+}
+
+ul.select2-selection__rendered {
+  background-color: #3b3b3b;
+}
+
+.k-inline-modal {
+  color: #FFFFFF !important;
+  background-color: #545454 !important;
+}
+
+.k-inline-modal__title {
+  color: #FFFFFF !important;
+}
+
+.k-ui-namespace .k-scopebar__item--search .k-search__submit {
+  color: #FFFFFF !important;
+}
+
+.select2-results__option {
+  color: #FFFFFF;
+}
+
+.select2-dropdown {
+  background-color: #545454 !important;
+  color: #FFFFFF !important;
+}
+
+.k-ui-namespace .k-pagination .k-pagination__pages > li > a {
+  background-color: #545454 !important;
+  color: #FFFFFF !important;
+}
+
+.k-ui-namespace .k-pagination__pages > li.k-is-disabled > span {
+  background-color: #545454 !important;
+  color: #FFFFFF !important;
+}
+
+.k-ui-namespace .k-pagination__pages > li.k-is-active > a {
+  background-color: #0073AA !important;
+}
+
+.datepicker td:nth-child(n), .datepicker th:nth-child(n) {
+  color: #FFFFFF;
+}
+
+.k-upload {
+  background-color: #545454 !important;
+  border: 1px solid #545454 !important;
+}
+.k-upload .k-upload__content-wrapper {
+  background-color: #545454 !important;
+  color: #FFFFFF !important;
+  border-bottom: none;
+}
+.k-upload .k-upload__info__body {
+  background-color: #545454 !important;
+  color: #FFFFFF !important;
+  border-top: 1px solid #545454 !important;
+}
+
+.k-upload:after {
+  background-color: #545454 !important;
+  color: #FFFFFF !important;
 }
diff --git a/code/libraries/joomlatools/component/koowa/resources/assets/css/admin-dark.min.css b/code/libraries/joomlatools/component/koowa/resources/assets/css/admin-dark.min.css
diff --git a/code/libraries/joomlatools/component/koowa/resources/assets/scss/_variables.scss b/code/libraries/joomlatools/component/koowa/resources/assets/scss/_variables.scss
diff --git a/code/libraries/joomlatools/component/koowa/resources/assets/scss/admin-dark.scss b/code/libraries/joomlatools/component/koowa/resources/assets/scss/admin-dark.scss
@@ -1,4 +1,5 @@
-@import './variables';
+//import our dark variables here, set by default before kodekit/admin-ui has the chance to set them
+@import "../../../../../../../../../kodekit-ui/src/scss/admin/tools/_dark_variables";
 // ==========================================================================
 // Kodekit UI
 // ==========================================================================
@@ -12,3 +13,74 @@
 
 @import "icomoon";
 @import "styles";
+
+button{
+  span.k-scopebar__item--filter__title, span.k-scopebar__item--filter__icon{
+    color: $k-secondary-color;
+  }
+}
+
+ul.select2-selection__rendered{
+  background-color: $k-primary-plus-5-color;
+}
+
+.k-inline-modal{
+  color: $k-secondary-color !important;
+  background-color: $k-primary-plus-7-color !important;
+}
+
+.k-inline-modal__title {
+  color: $k-secondary-color !important;
+}
+
+.k-ui-namespace .k-scopebar__item--search .k-search__submit{
+  color: $k-secondary-color  !important;
+}
+
+.select2-results__option{
+  color: $k-secondary-color;
+}
+
+.select2-dropdown {
+  background-color: $k-primary-plus-7-color !important;
+  color: $k-secondary-color !important;
+}
+
+.k-ui-namespace .k-pagination .k-pagination__pages > li > a{
+  background-color: $k-primary-plus-7-color  !important;
+  color: $k-secondary-color !important;
+}
+
+.k-ui-namespace .k-pagination__pages > li.k-is-disabled > span {
+  background-color: $k-primary-plus-7-color  !important;
+  color: $k-secondary-color !important;
+}
+
+.k-ui-namespace .k-pagination__pages > li.k-is-active > a {
+  background-color: $k-accent-color !important;
+}
+
+
+.datepicker td:nth-child(n), .datepicker th:nth-child(n){
+  color: $k-secondary-color;
+}
+
+.k-upload{
+  background-color: $k-primary-plus-7-color !important;
+  border: 1px solid $k-primary-min-2-color !important;
+  .k-upload__content-wrapper {
+    background-color: $k-primary-plus-7-color !important;
+    color: $k-secondary-color !important;
+    border-bottom: none;
+  }
+  .k-upload__info__body{
+    background-color: $k-primary-plus-7-color !important;
+    color: $k-secondary-color !important;
+    border-top: 1px solid $k-primary-min-2-color !important;
+  }
+}
+
+.k-upload:after{
+  background-color: $k-primary-plus-7-color !important;
+  color: $k-secondary-color !important;
+}