]> git.apps.os.sepia.ceph.com Git - ceph.git/commitdiff
mgr/dashboard: branding: login page pacific
authorNizamudeen A <nia@redhat.com>
Mon, 31 Aug 2020 11:09:50 +0000 (16:39 +0530)
committerKen Dreyer <kdreyer@redhat.com>
Mon, 1 Aug 2022 20:29:34 +0000 (20:29 +0000)
Resolves: rhbz#2106618
Signed-off-by: Nizamudeen A <nia@redhat.com>
(cherry picked from commit deffbb9454a79c1b453ef3aa74ec9464b199dcd1)

src/pybind/mgr/dashboard/frontend/package-lock.json
src/pybind/mgr/dashboard/frontend/package.json
src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.ts
src/pybind/mgr/dashboard/frontend/src/assets/Logo-RedHat-A-Reverse-RGB.svg [new file with mode: 0644]
src/pybind/mgr/dashboard/frontend/src/assets/Logo-Red_Hat-Ceph_Storage-A-Reverse-RGB.png [new file with mode: 0644]
src/pybind/mgr/dashboard/frontend/src/assets/redhat_new_background.svg [new file with mode: 0644]
src/pybind/mgr/dashboard/frontend/src/styles/vendor/_style-overrides.scss
src/pybind/mgr/dashboard/frontend/src/styles/vendor/_variables.scss

index d102e622d5c8f7e5f8928bcae38c84d6280d3161..3e88917f2a3792956abd545ad1f7e09592ff49cc 100644 (file)
         "object-assign": "^4.1.1",
         "open": "8.2.1",
         "proxy-middleware": "^0.15.0",
-        "send": "^0.17.2",
+        "send": "^0.18.0",
         "serve-index": "^1.9.1"
       },
       "dependencies": {
             "ms": {
               "version": "2.0.0",
               "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-              "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+              "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
               "dev": true
             }
           }
         "object-assign": {
           "version": "4.1.1",
           "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-          "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+          "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+          "dev": true
+        },
+        "proxy-middleware": {
+          "version": "0.15.0",
+          "resolved": "https://registry.npmjs.org/proxy-middleware/-/proxy-middleware-0.15.0.tgz",
+          "integrity": "sha512-EGCG8SeoIRVMhsqHQUdDigB2i7qU7fCsWASwn54+nPutYO8n4q6EiwMzyfWlC+dzRFExP+kvcnDFdBDHoZBU7Q==",
           "dev": true
         },
         "send": {
-          "version": "0.17.2",
-          "resolved": "https://registry.npmjs.org/send/-/send-0.17.2.tgz",
-          "integrity": "sha512-UJYB6wFSJE3G00nEivR5rgWp8c2xXvJ3OPWPhmuteU0IKj8nKbG3DrjiOmLwpnHGYWAVwA69zmTm++YG0Hmwww==",
+          "version": "0.18.0",
+          "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
+          "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==",
           "dev": true,
           "requires": {
             "debug": "2.6.9",
-            "depd": "~1.1.2",
-            "destroy": "~1.0.4",
+            "depd": "2.0.0",
+            "destroy": "1.2.0",
             "encodeurl": "~1.0.2",
             "escape-html": "~1.0.3",
             "etag": "~1.8.1",
             "fresh": "0.5.2",
-            "http-errors": "1.8.1",
+            "http-errors": "2.0.0",
             "mime": "1.6.0",
             "ms": "2.1.3",
-            "on-finished": "~2.3.0",
+            "on-finished": "2.4.1",
             "range-parser": "~1.2.1",
-            "statuses": "~1.5.0"
+            "statuses": "2.0.1"
+          },
+          "dependencies": {
+            "depd": {
+              "version": "2.0.0",
+              "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+              "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+              "dev": true
+            },
+            "destroy": {
+              "version": "1.2.0",
+              "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
+              "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
+              "dev": true
+            },
+            "http-errors": {
+              "version": "2.0.0",
+              "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
+              "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
+              "dev": true,
+              "requires": {
+                "depd": "2.0.0",
+                "inherits": "2.0.4",
+                "setprototypeof": "1.2.0",
+                "statuses": "2.0.1",
+                "toidentifier": "1.0.1"
+              }
+            },
+            "on-finished": {
+              "version": "2.4.1",
+              "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+              "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+              "dev": true,
+              "requires": {
+                "ee-first": "1.1.1"
+              }
+            },
+            "statuses": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
+              "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
+              "dev": true
+            }
           }
         }
       }
         "read-package-json-fast": "^2.0.1"
       }
     },
+    "@patternfly/patternfly": {
+      "version": "4.23.3",
+      "resolved": "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-4.23.3.tgz",
+      "integrity": "sha512-q8C98ihcRYBY+FB+KY3bQ9y1Pn/NjBff4hwKsxatrs/MSO/++CuEncg4q7WHjIq2zadA4/7W+Vg3CXuiOP0geg=="
+    },
     "@schematics/angular": {
       "version": "12.2.13",
       "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-12.2.13.tgz",
       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
       "dev": true
     },
+    "bindings": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "file-uri-to-path": "1.0.0"
+      }
+    },
     "bl": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
       "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.2.tgz",
       "integrity": "sha512-Wz3c3XQ5xroCxd1G8b7yL0Ehkf0TC9oYC6buPFkNnU9EnaPlifeAFCyCh+iewXTyFRcg0a6j3J7FmJsIhlhBdw=="
     },
+    "file-uri-to-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+      "dev": true,
+      "optional": true
+    },
     "fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
       "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==",
       "dev": true
     },
+    "nan": {
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.16.0.tgz",
+      "integrity": "sha512-UdAqHyFngu7TfQKsCBgAA6pWDkT8MAO7d0jyOecVhN5354xbLqdn8mV9Tat9gepAupm0bt2DbeaSC8vS52MuFA==",
+      "dev": true,
+      "optional": true
+    },
     "nanoid": {
       "version": "3.1.30",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.30.tgz",
       "integrity": "sha1-M8UDmPcOp+uW0h97gXYwpVeRx+4=",
       "dev": true
     },
-    "proxy-middleware": {
-      "version": "0.15.0",
-      "resolved": "https://registry.npmjs.org/proxy-middleware/-/proxy-middleware-0.15.0.tgz",
-      "integrity": "sha1-o/3xvvtzD5UZZYcqwvYHTGFHelY=",
-      "dev": true
-    },
     "prr": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
           "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
           "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
           "dev": true,
-          "optional": true
+          "optional": true,
+          "requires": {
+            "bindings": "^1.5.0",
+            "nan": "^2.12.1"
+          }
         },
         "glob-parent": {
           "version": "3.1.0",
index e2d19f334c0153e9d768b795dadf32e4024d40e0..7ed8b43d9d8bd20f8cf0954719b0614a36e54a43 100644 (file)
@@ -86,6 +86,7 @@
     "@circlon/angular-tree-component": "10.0.0",
     "@ng-bootstrap/ng-bootstrap": "10.0.0",
     "@swimlane/ngx-datatable": "18.0.0",
+    "@patternfly/patternfly": "4.23.3",
     "@types/file-saver": "2.0.1",
     "async-mutex": "0.2.4",
     "bootstrap": "4.6.1",
index 69d591cd17b2becb6a8713972ae03291c156fe7d..39d2e3349afc76150bf325e83d0441565543fcc7 100644 (file)
@@ -8,7 +8,7 @@ import { Component } from '@angular/core';
 export class LoginLayoutComponent {
   docItems: any[] = [
     { section: 'help', text: $localize`Help` },
-    { section: 'security', text: $localize`Security` },
-    { section: 'trademarks', text: $localize`Trademarks` }
+    { section: 'terms', text: $localize`Terms of Use` },
+    { section: 'privacy', text: $localize`Privacy Policy` }
   ];
 }
diff --git a/src/pybind/mgr/dashboard/frontend/src/assets/Logo-RedHat-A-Reverse-RGB.svg b/src/pybind/mgr/dashboard/frontend/src/assets/Logo-RedHat-A-Reverse-RGB.svg
new file mode 100644 (file)
index 0000000..e140b2f
--- /dev/null
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 613 145"><defs><style>.cls-1{fill:#e00;}.cls-2{fill:#fff;}</style></defs><title>RedHat-Logo-A-Reverse</title><path class="cls-1" d="M127.47,83.49c12.51,0,30.61-2.58,30.61-17.46a14,14,0,0,0-.31-3.42l-7.45-32.36c-1.72-7.12-3.23-10.35-15.73-16.6C124.89,8.69,103.76.5,97.51.5,91.69.5,90,8,83.06,8c-6.68,0-11.64-5.6-17.89-5.6-6,0-9.91,4.09-12.93,12.5,0,0-8.41,23.72-9.49,27.16A6.43,6.43,0,0,0,42.53,44c0,9.22,36.3,39.45,84.94,39.45M160,72.07c1.73,8.19,1.73,9.05,1.73,10.13,0,14-15.74,21.77-36.43,21.77C78.54,104,37.58,76.6,37.58,58.49a18.45,18.45,0,0,1,1.51-7.33C22.27,52,.5,55,.5,74.22c0,31.48,74.59,70.28,133.65,70.28,45.28,0,56.7-20.48,56.7-36.65,0-12.72-11-27.16-30.83-35.78"/><path d="M160,72.07c1.73,8.19,1.73,9.05,1.73,10.13,0,14-15.74,21.77-36.43,21.77C78.54,104,37.58,76.6,37.58,58.49a18.45,18.45,0,0,1,1.51-7.33l3.66-9.06A6.43,6.43,0,0,0,42.53,44c0,9.22,36.3,39.45,84.94,39.45,12.51,0,30.61-2.58,30.61-17.46a14,14,0,0,0-.31-3.42Z"/><path class="cls-2" d="M579.74,92.8c0,11.89,7.15,17.67,20.19,17.67a52.11,52.11,0,0,0,11.89-1.68V95a24.84,24.84,0,0,1-7.68,1.16c-5.37,0-7.36-1.68-7.36-6.73V68.3h15.56V54.1H596.78v-18l-17,3.68V54.1H568.49V68.3h11.25Zm-53,.32c0-3.68,3.69-5.47,9.26-5.47a43.12,43.12,0,0,1,10.1,1.26v7.15a21.51,21.51,0,0,1-10.63,2.63c-5.46,0-8.73-2.1-8.73-5.57m5.2,17.56c6,0,10.84-1.26,15.36-4.31v3.37h16.82V74.08c0-13.56-9.14-21-24.39-21-8.52,0-16.94,2-26,6.1l6.1,12.52c6.52-2.74,12-4.42,16.83-4.42,7,0,10.62,2.73,10.62,8.31v2.73a49.53,49.53,0,0,0-12.62-1.58c-14.31,0-22.93,6-22.93,16.73,0,9.78,7.78,17.24,20.19,17.24m-92.44-.94h18.09V80.92h30.29v28.82H506V36.12H487.93V64.41H457.64V36.12H439.55ZM370.62,81.87c0-8,6.31-14.1,14.62-14.1A17.22,17.22,0,0,1,397,72.09V91.54A16.36,16.36,0,0,1,385.24,96c-8.2,0-14.62-6.1-14.62-14.09m26.61,27.87h16.83V32.44l-17,3.68V57.05a28.3,28.3,0,0,0-14.2-3.68c-16.19,0-28.92,12.51-28.92,28.5a28.25,28.25,0,0,0,28.4,28.6,25.12,25.12,0,0,0,14.93-4.83ZM320,67c5.36,0,9.88,3.47,11.67,8.83H308.47C310.15,70.3,314.36,67,320,67M291.33,82c0,16.2,13.25,28.82,30.28,28.82,9.36,0,16.2-2.53,23.25-8.42l-11.26-10c-2.63,2.74-6.52,4.21-11.14,4.21a14.39,14.39,0,0,1-13.68-8.83h39.65V83.55c0-17.67-11.88-30.39-28.08-30.39a28.57,28.57,0,0,0-29,28.81M262,51.58c6,0,9.36,3.78,9.36,8.31S268,68.2,262,68.2H244.11V51.58Zm-36,58.16h18.09V82.92h13.77l13.89,26.82H292l-16.2-29.45a22.27,22.27,0,0,0,13.88-20.72c0-13.25-10.41-23.45-26-23.45H226Z"/></svg>
\ No newline at end of file
diff --git a/src/pybind/mgr/dashboard/frontend/src/assets/Logo-Red_Hat-Ceph_Storage-A-Reverse-RGB.png b/src/pybind/mgr/dashboard/frontend/src/assets/Logo-Red_Hat-Ceph_Storage-A-Reverse-RGB.png
new file mode 100644 (file)
index 0000000..e2db966
Binary files /dev/null and b/src/pybind/mgr/dashboard/frontend/src/assets/Logo-Red_Hat-Ceph_Storage-A-Reverse-RGB.png differ
diff --git a/src/pybind/mgr/dashboard/frontend/src/assets/redhat_new_background.svg b/src/pybind/mgr/dashboard/frontend/src/assets/redhat_new_background.svg
new file mode 100644 (file)
index 0000000..8ab25c9
--- /dev/null
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1500px" height="850px" viewBox="0 0 1500 850" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com -->
+    <title>BG</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Background-Downstream" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Login-Regular---Full-Feature">
+            <g id="BG">
+                <rect id="Rectangle" fill="#1A1A1A" x="0" y="0" width="1500" height="850"></rect>
+                <g id="Red-Hat-Hat-RGB-grey" transform="translate(235.000000, 13.000000)" fill="#090A0A" fill-rule="nonzero">
+                    <path d="M774.813452,506.645833 C851.074619,506.645833 961.500788,490.775 961.500788,399.822917 C961.500788,393.108333 960.890699,385.783333 959.67052,379.06875 L914.52391,181.29375 C904.152391,137.954167 895.001051,117.810417 818.739884,79.9645833 C759.561219,49.44375 630.83237,0 592.396742,0 C556.401471,-1.08431782e-14 546.029953,45.78125 503.933789,45.78125 C463.057803,45.78125 433.163426,11.5979167 394.727798,11.5979167 C358.122438,11.5979167 334.328954,36.625 316.026274,87.9 C316.026274,87.9 264.77877,232.56875 258.067788,253.933333 C256.847609,257.595833 256.847609,261.86875 256.847609,265.53125 C256.23752,321.689583 477.699947,506.035417 774.813452,506.645833 M973.092486,437.058333 C983.464004,487.1125 983.464004,492.60625 983.464004,498.710417 C983.464004,584.16875 887.679979,631.78125 761.391487,631.78125 C475.869679,631.78125 226.343142,464.527083 226.343142,354.041667 C226.343142,338.78125 229.393589,323.520833 235.494482,309.48125 C132.999475,314.364583 0,332.677083 0,449.877083 C0,642.158333 455.126642,879 815.079348,879 C1091.44982,879 1161,753.864583 1161,654.977083 C1161,577.454167 1093.89017,489.554167 973.092486,437.058333" id="Shape"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
index 2fbea9824ac2cd87308555a04a2130c31243103c..6bf08ee597dea4c93ff64d83c2d2766ed1744164 100644 (file)
@@ -2,3 +2,137 @@
 
 Custom styles, third-party libraries, frameworks, design systems, ...
 */
+
+@use './src/styles/vendor/variables' as vv;
+
+/* stylelint-disable */
+$pf-global--font-path: '~@patternfly/patternfly/assets/fonts';
+$fa-font-path: '~@patternfly/patternfly/assets/fonts/webfonts';
+$pf-global--fonticon-path: '~@patternfly/patternfly/assets/pficon';
+$pf-global--image-path: '~@patternfly/patternfly/assets/images';
+/* stylelint-enable */
+
+@import '~@patternfly/patternfly/patternfly';
+
+.login {
+  background-image: url('../../assets/redhat_new_background.svg') !important;
+  background-position: center;
+  background-size: cover;
+
+  nav {
+    display: none;
+  }
+
+  .container {
+    margin-left: 100px;
+
+    img {
+      content: url('../../assets/Logo-Red_Hat-Ceph_Storage-A-Reverse-RGB.png');
+    }
+
+    .img-fluid {
+      margin-left: 20%;
+    }
+
+    .list-inline {
+      font-size: 13px;
+      margin-bottom: 0;
+      margin-left: 44%;
+      margin-top: 10%;
+    }
+
+    cd-login {
+      background-color: var(--pf-global--BackgroundColor--light-100);
+
+      .placeholder {
+        color: vv.$black;
+      }
+
+      .input-group {
+        padding-top: 20px;
+      }
+
+      .container {
+        background-color: vv.$white;
+
+        form {
+          padding: 50px 20px 60px;
+        }
+
+        .pl-4,
+        .px-4 {
+          font-size: 14px;
+          padding-left: 0.3rem !important;
+        }
+
+        form:first-child::before {
+          @extend .pf-c-title, .pf-m-3xl;
+          color: vv.$black;
+          content: 'Login to your account \A \A';
+          white-space: pre-wrap;
+        }
+
+        .form-group-append {
+          display: none;
+        }
+
+        .btn-accent {
+          @extend .pf-c-button, .pf-m-primary, .pf-m-block;
+          margin-top: 20px;
+        }
+      }
+
+      .form-control {
+        // stylelint-disable
+        background-color: vv.$white !important;
+        border: 1px solid $pf-color-black-200 !important;
+        border-bottom: 2px solid $pf-color-red-100 !important;
+        color: vv.$black !important;
+        height: initial !important;
+        @extend .pf-c-form-control;
+        &:focus {
+          border-bottom: 2px solid vv.$primary !important;
+          box-shadow: none !important;
+          outline: 0;
+        }
+        &:valid {
+          border-bottom: 1px solid vv.$black !important;
+        }
+      }
+
+      @keyframes autofill {
+        to {
+          background-color: vv.$white;
+          color: vv.$black;
+        }
+      }
+
+      input:-webkit-autofill {
+        box-shadow: 0 0 0 1000px vv.$white inset;
+        -webkit-text-fill-color: vv.$black;
+      }
+    }
+  }
+}
+
+.btn {
+  @extend .pf-c-button;
+}
+
+.btn-submit {
+  @extend .pf-c-button, .pf-m-primary, .pf-m-block;
+  padding-top: 30px;
+}
+
+.form-group {
+  @extend .pf-c-form__group;
+  all: unset !important;
+}
+
+.placeholder {
+  @extend .pf-c-form__label;
+}
+
+.input-group {
+  @extend .pf-c-input-group;
+}
index 1df7a90845c15548da7a22b7b6e69835f5385b18..c2248fbeaaf20308b0bf5dc97ec4727f4d82d669 100644 (file)
@@ -3,6 +3,7 @@
 Example:
 $my-accent-color: #a18fff
 */
+@use '~@patternfly/patternfly/sass-utilities/colors';
 
 /* Bootstrap variables that are already defined can be overridden using configuration:
 https://sass-lang.com/documentation/at-rules/forward#configuring-modules
@@ -14,4 +15,6 @@ Example:
   )
 );
 */
-@forward '../defaults/bootstrap-defaults';
+@forward '../defaults/bootstrap-defaults' with (
+  $primary: colors.$pf-color-blue-400
+);