Merge pull request #46 from Icinga/add-default-values-for-less-variables

nilmerg · web-flow · commit 549100a3eba9 · 2021-11-08T17:30:34.000+01:00
Make less variables independent from other modules
diff --git a/asset/css/balls.less b/asset/css/balls.less
@@ -69,49 +69,49 @@
 
 .ball-solid(@color) {
   background-color: @color;
-  color: white;
+  color: var(--default-text-color-inverted, @default-text-color-inverted);
   padding: @ball-pad;
 }
 
 .state-ball {
   .ball();
 
   &.state-pending {
-    .ball-solid(@color-pending);
+    .ball-solid(var(--state-pending, @state-pending));
   }
 
   &.state-up:not(.ball-size-l):not(.ball-size-xl) {
-    .ball-solid(@color-up);
+    .ball-solid(var(--state-up, @state-up));
   }
 
   &.state-up.ball-size-l,
   &.state-up.ball-size-xl {
-    .ball-outline(@color-up);
+    .ball-outline(var(--state-up, @state-up));
   }
 
   &.state-down {
-    .ball-solid(@color-down);
+    .ball-solid(var(--state-down, @state-down));
   }
 
   &.state-ok:not(.ball-size-l):not(.ball-size-xl) {
-    .ball-solid(@color-ok);
+    .ball-solid(var(--state-ok, @state-ok));
   }
 
   &.state-ok.ball-size-l,
   &.state-ok.ball-size-xl {
-    .ball-outline(@color-ok);
+    .ball-outline(var(--state-ok, @state-ok));
   }
 
   &.state-warning {
-    .ball-solid(@color-warning);
+    .ball-solid(var(--state-warning, @state-warning));
   }
 
   &.state-critical {
-    .ball-solid(@color-critical);
+    .ball-solid(var(--state-critical, @state-critical));
   }
 
   &.state-unknown {
-    .ball-solid(@color-unknown);
+    .ball-solid(var(--state-unknown, @state-unknown));
   }
 
   &.handled {
diff --git a/asset/css/controls.less b/asset/css/controls.less
@@ -1,11 +1,11 @@
 .pagination-control {
   li > a {
-    color: @icinga-blue;
+    color: var(--control-color, @control-color);
     border-radius: .25em;
   }
 
   li > a:hover {
-    background: @gray-lighter;
+    background: var(--control-hover-bg, @control-hover-bg);
   }
 
   .previous-page,
@@ -36,16 +36,16 @@
   .appearance(none);
   background: none;
   border: none;
-  color: @icinga-blue;
+  color: var(--control-color, @control-color);
   .rounded-corners();
 
   &:hover, &:focus, &.active {
-    background-color: @gray-lighter;
+    background-color: var(--control-hover-bg, @control-hover-bg);
     text-decoration: none;
   }
 
   &.disabled {
-    color: @gray-light;
+    color: var(--control-disabled-color, @control-disabled-color);
 
     &:hover {
       background: none;
diff --git a/asset/css/horizontal-key-value.less b/asset/css/horizontal-key-value.less
@@ -4,13 +4,14 @@
   align-items: baseline;
 
   .key {
-    color: @gray;
+    color: var(--default-text-color-light, @default-text-color-light);
     flex: 0 0 auto;
     white-space: nowrap;
     width: 12em;
   }
 
   .value {
+    color: var(--default-text-color, @default-text-color);
     flex: 1 1 auto;
   }
 }
diff --git a/asset/css/mixin/card.less b/asset/css/mixin/card.less
@@ -1,15 +1,15 @@
 .card() {
   &.card {
     .rounded-corners(.5em);
-    border: 1px solid @gray-light;
+    border: 1px solid var(--card-border-color, @card-border-color);
 
     .card-header {
       display: flex;
       align-items: baseline;
       justify-content: space-between;
       padding: .5em;
 
-      border-bottom: 1px solid @gray-light;
+      border-bottom: 1px solid var(--card-border-color, @card-border-color);
 
       .meta span {
         font-size: 11/12em;
diff --git a/asset/css/search-bar.less b/asset/css/search-bar.less
@@ -1,7 +1,7 @@
 // Style
 .search-bar {
   .rounded-corners(.25em);
-  background: @low-sat-blue;
+  background: var(--searchbar-bg, @searchbar-bg);
 
   // Reset all input styles
   input, [type="button"] {
@@ -14,8 +14,8 @@
   input[type=submit],
   button[type=submit],
   button:not([type]) {
-    background: @icinga-blue;
-    color: @text-color-inverted;
+    background: var(--primary-button-bg, @primary-button-bg);
+    color: var(--primary-button-color, @primary-button-color);
     border-top-right-radius: .25em;
     border-bottom-right-radius: .25em;
   }
@@ -35,12 +35,12 @@
     i.icon:before {
       font-size: 1.2em;
       margin-right: 0;
-      color: @icinga-blue;
+      color: var(--control-color, @control-color);
     }
 
     &:disabled {
       i.icon:before {
-        color: @gray-light;
+        color: var(--control-disabled-color, @control-disabled-color);
       }
     }
   }
@@ -49,7 +49,7 @@
   .filter-input-area {
     // Firefox
     scrollbar-width: thin;
-    scrollbar-color: @gray-light transparent;
+    scrollbar-color: var(--searchbar-scrollbar-bg, @searchbar-scrollbar-bg) transparent;
 
     &::-webkit-scrollbar {
       display: none;
@@ -62,16 +62,16 @@
 
     &::-webkit-scrollbar-thumb {
       border-radius: .25em;
-      background: @gray-light;
+      background: var(--searchbar-scrollbar-bg, @searchbar-scrollbar-bg);
     }
   }
 
   // Term styles
   .filter-condition {
     button {
       border-radius: .4em 0 0 .4em;
-      background-color: @color-critical;
-      color: @text-color-inverted;
+      background-color: var(--search-condition-remove-bg, @search-condition-remove-bg);
+      color: var(--search-condition-remove-color, @search-condition-remove-color);
 
       &:after {
         content: "";
@@ -81,17 +81,17 @@
         right: 0;
         top: 0;
 
-        background-color: @low-sat-blue;
-        border: .2em solid @color-critical;
+        background-color: var(--searchbar-bg, @searchbar-bg);
+        border: .2em solid var(--search-condition-remove-bg, @search-condition-remove-bg);
         border-width: 0 0 0 .2em;
         border-top-left-radius: .4em;
         border-bottom-left-radius: .4em;
       }
     }
 
     input {
-      background-color: @gray;
-      color: @text-color-inverted;
+      background-color: var(--search-term-bg, @search-term-bg);
+      color: var(--search-term-color, @search-term-color);
     }
   }
 
@@ -106,8 +106,8 @@
       left: 0;
       top: 0;
 
-      background-color: @low-sat-blue;
-      border: .2em solid @color-critical;
+      background-color: var(--searchbar-bg, @searchbar-bg);
+      border: .2em solid var(--search-condition-remove-bg, @search-condition-remove-bg);
       border-width: 0 .2em 0 0;
       border-top-right-radius: .4em;
       border-bottom-right-radius: .4em;
@@ -123,8 +123,8 @@
   .grouping_operator_close {
     input {
       .rounded-corners();
-      background-color: fade(@gray, 50%);
-      color: @text-color-light;
+      background-color: var(--search-logical-operator-bg, @search-logical-operator-bg);
+      color: var(--search-logical-operator-color, @search-logical-operator-color);
     }
   }
 
@@ -138,12 +138,12 @@
   }
 
   [data-index] input:invalid {
-    background-color: @color-critical;
-    color: @text-color-inverted;
+    background-color: var(--search-term-invalid-bg, @search-term-invalid-bg);
+    color: var(--search-term-invalid-color, @search-term-invalid-color);
   }
 
   [data-index] input:disabled {
-    background-color: @gray-light;
+    background-color: var(--search-term-disabled-bg, @search-term-disabled-bg);
   }
 
   .column input {
@@ -170,13 +170,13 @@
   }
 
   .highlighted input {
-    background-color: @icinga-blue;
-    color: @text-color-on-icinga-blue;
+    background-color: var(--search-term-highlighted-bg, @search-term-highlighted-bg);
+    color: var(--search-term-highlighted-color, @search-term-highlighted-color);
   }
 
   .selected input {
-    background-color: @disabled-gray;
-    color: @gray-light;
+    background-color: var(--search-term-selected-bg, @search-term-selected-bg);
+    color: var(--search-term-selected-color, @search-term-selected-color);
     font-style: italic;
   }
 
diff --git a/asset/css/search-base.less b/asset/css/search-base.less
@@ -1,15 +1,15 @@
 // Style
 .search-suggestions {
-  background: @text-color-inverted;
-  border: 1px solid @gray-light;
+  background: var(--suggestions-bg, @suggestions-bg);
+  border: 1px solid var(--suggestions-border-color, @suggestions-border-color);
   border-bottom-right-radius: .5em;
   border-bottom-left-radius:  .5em;
 
   > ul {
     list-style-type: none;
 
     > li {
-      border-top: 1px solid @gray-lighter;
+      border-top: 1px solid var(--suggestions-separation-bg, @suggestions-separation-bg);
     }
     > li.suggestion-title + li {
       border: none;
@@ -20,16 +20,16 @@
   }
 
   .default {
-    color: @text-color-light;
+    color: var(--suggestions-default-opt-color, @suggestions-default-opt-color);
     font-style: italic;
 
     [type="button"] {
-      background-color: fade(@icinga-blue, 10%);
+      background-color: var(--suggestions-default-opt-bg, @suggestions-default-opt-bg);
     }
   }
 
   .suggestion-title {
-    color: @text-color-light;
+    color: var(--suggestions-color, @suggestions-color);
     font-size: 80%;
   }
 
@@ -38,7 +38,7 @@
 
     em {
       font-weight: normal;
-      color: @text-color-light;
+      color: var(--suggestions-failure-message-color, @suggestions-failure-message-color);
     }
   }
 
@@ -49,13 +49,13 @@
   }
 
   [type="button"]:focus {
-    background: @icinga-blue;
-    color: @text-color-inverted;
+    background: var(--suggestions-focus-bg, @suggestions-focus-bg);
+    color: var(--suggestions-focus-color, @suggestions-focus-color);
     outline: none;
   }
 
   [type="button"]:not(:focus):hover {
-    background: fade(@icinga-blue, 30%)
+    background: var(--suggestions-hover-bg, @suggestions-hover-bg);
   }
 }
 
diff --git a/asset/css/search-editor.less b/asset/css/search-editor.less
diff --git a/asset/css/variables.less b/asset/css/variables.less
diff --git a/asset/css/vertical-key-value.less b/asset/css/vertical-key-value.less

Original file line number	Diff line number	Diff line change
`@@ -69,49 +69,49 @@`
`69`	`69`
`70`	`70`	`.ball-solid(@color) {`
`71`	`71`	`background-color: @color;`
`72`		`- color: white;`
	`72`	`+ color: var(--default-text-color-inverted, @default-text-color-inverted);`
`73`	`73`	`padding: @ball-pad;`
`74`	`74`	`}`
`75`	`75`
`76`	`76`	`.state-ball {`
`77`	`77`	`.ball();`
`78`	`78`
`79`	`79`	`&.state-pending {`
`80`		`- .ball-solid(@color-pending);`
	`80`	`+ .ball-solid(var(--state-pending, @state-pending));`
`81`	`81`	`}`
`82`	`82`
`83`	`83`	`&.state-up:not(.ball-size-l):not(.ball-size-xl) {`
`84`		`- .ball-solid(@color-up);`
	`84`	`+ .ball-solid(var(--state-up, @state-up));`
`85`	`85`	`}`
`86`	`86`
`87`	`87`	`&.state-up.ball-size-l,`
`88`	`88`	`&.state-up.ball-size-xl {`
`89`		`- .ball-outline(@color-up);`
	`89`	`+ .ball-outline(var(--state-up, @state-up));`
`90`	`90`	`}`
`91`	`91`
`92`	`92`	`&.state-down {`
`93`		`- .ball-solid(@color-down);`
	`93`	`+ .ball-solid(var(--state-down, @state-down));`
`94`	`94`	`}`
`95`	`95`
`96`	`96`	`&.state-ok:not(.ball-size-l):not(.ball-size-xl) {`
`97`		`- .ball-solid(@color-ok);`
	`97`	`+ .ball-solid(var(--state-ok, @state-ok));`
`98`	`98`	`}`
`99`	`99`
`100`	`100`	`&.state-ok.ball-size-l,`
`101`	`101`	`&.state-ok.ball-size-xl {`
`102`		`- .ball-outline(@color-ok);`
	`102`	`+ .ball-outline(var(--state-ok, @state-ok));`
`103`	`103`	`}`
`104`	`104`
`105`	`105`	`&.state-warning {`
`106`		`- .ball-solid(@color-warning);`
	`106`	`+ .ball-solid(var(--state-warning, @state-warning));`
`107`	`107`	`}`
`108`	`108`
`109`	`109`	`&.state-critical {`
`110`		`- .ball-solid(@color-critical);`
	`110`	`+ .ball-solid(var(--state-critical, @state-critical));`
`111`	`111`	`}`
`112`	`112`
`113`	`113`	`&.state-unknown {`
`114`		`- .ball-solid(@color-unknown);`
	`114`	`+ .ball-solid(var(--state-unknown, @state-unknown));`
`115`	`115`	`}`
`116`	`116`
`117`	`117`	`&.handled {`
Original file line number	Diff line number	Diff line change
`@@ -4,13 +4,14 @@`
`4`	`4`	`align-items: baseline;`
`5`	`5`
`6`	`6`	`.key {`
`7`		`- color: @gray;`
	`7`	`+ color: var(--default-text-color-light, @default-text-color-light);`
`8`	`8`	`flex: 0 0 auto;`
`9`	`9`	`white-space: nowrap;`
`10`	`10`	`width: 12em;`
`11`	`11`	`}`
`12`	`12`
`13`	`13`	`.value {`
	`14`	`+ color: var(--default-text-color, @default-text-color);`
`14`	`15`	`flex: 1 1 auto;`
`15`	`16`	`}`
`16`	`17`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,15 +1,15 @@`
`1`	`1`	`// Style`
`2`	`2`	`.search-suggestions {`
`3`		`- background: @text-color-inverted;`
`4`		`- border: 1px solid @gray-light;`
	`3`	`+ background: var(--suggestions-bg, @suggestions-bg);`
	`4`	`+ border: 1px solid var(--suggestions-border-color, @suggestions-border-color);`
`5`	`5`	`border-bottom-right-radius: .5em;`
`6`	`6`	`border-bottom-left-radius: .5em;`
`7`	`7`
`8`	`8`	`> ul {`
`9`	`9`	`list-style-type: none;`
`10`	`10`
`11`	`11`	`> li {`
`12`		`- border-top: 1px solid @gray-lighter;`
	`12`	`+ border-top: 1px solid var(--suggestions-separation-bg, @suggestions-separation-bg);`
`13`	`13`	`}`
`14`	`14`	`> li.suggestion-title + li {`
`15`	`15`	`border: none;`
`@@ -20,16 +20,16 @@`
`20`	`20`	`}`
`21`	`21`
`22`	`22`	`.default {`
`23`		`- color: @text-color-light;`
	`23`	`+ color: var(--suggestions-default-opt-color, @suggestions-default-opt-color);`
`24`	`24`	`font-style: italic;`
`25`	`25`
`26`	`26`	`[type="button"] {`
`27`		`- background-color: fade(@icinga-blue, 10%);`
	`27`	`+ background-color: var(--suggestions-default-opt-bg, @suggestions-default-opt-bg);`
`28`	`28`	`}`
`29`	`29`	`}`
`30`	`30`
`31`	`31`	`.suggestion-title {`
`32`		`- color: @text-color-light;`
	`32`	`+ color: var(--suggestions-color, @suggestions-color);`
`33`	`33`	`font-size: 80%;`
`34`	`34`	`}`
`35`	`35`
`@@ -38,7 +38,7 @@`
`38`	`38`
`39`	`39`	`em {`
`40`	`40`	`font-weight: normal;`
`41`		`- color: @text-color-light;`
	`41`	`+ color: var(--suggestions-failure-message-color, @suggestions-failure-message-color);`
`42`	`42`	`}`
`43`	`43`	`}`
`44`	`44`
`@@ -49,13 +49,13 @@`
`49`	`49`	`}`
`50`	`50`
`51`	`51`	`[type="button"]:focus {`
`52`		`- background: @icinga-blue;`
`53`		`- color: @text-color-inverted;`
	`52`	`+ background: var(--suggestions-focus-bg, @suggestions-focus-bg);`
	`53`	`+ color: var(--suggestions-focus-color, @suggestions-focus-color);`
`54`	`54`	`outline: none;`
`55`	`55`	`}`
`56`	`56`
`57`	`57`	`[type="button"]:not(:focus):hover {`
`58`		`- background: fade(@icinga-blue, 30%)`
	`58`	`+ background: var(--suggestions-hover-bg, @suggestions-hover-bg);`
`59`	`59`	`}`
`60`	`60`	`}`
`61`	`61`