Add mixin for items

janfaracik · Jun 8, 2022 · e925490 · e925490
1 parent d579dc5
commit e925490
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 109 deletions.
diff --git a/war/src/main/less/abstracts/mixins.less b/war/src/main/less/abstracts/mixins.less
@@ -45,3 +45,49 @@
     text-decoration: var(--link-dark-text-decoration--active);
   }
 }
+
+.longhorn() {
+  position: relative;
+  z-index: 0;
+
+  &::before,
+  &::after {
+    position: absolute;
+    content: "";
+    inset: 0;
+    z-index: -1;
+    border-radius: 10px;
+    transition: var(--standard-transition);
+    pointer-events: none;
+  }
+
+  &::before {
+    background-color: transparent;
+    border: 1px solid transparent;
+  }
+
+  &::after {
+    box-shadow: 0 0 0 10px transparent;
+  }
+
+  &:hover,
+  &:focus {
+    &::before {
+      background-color: var(--longhorn-background--hover);
+    }
+  }
+
+  &:active,
+  &:focus {
+    outline: none !important;
+    z-index: 1;
+
+    &::before {
+      background-color: var(--longhorn-background--active);
+    }
+
+    &::after {
+      box-shadow: 0 0 0 5px var(--longhorn-box-shadow--focus);
+    }
+  }
+}
diff --git a/war/src/main/less/abstracts/theme.less b/war/src/main/less/abstracts/theme.less
@@ -17,11 +17,11 @@
   --light-grey: #f2f2f2;
   --medium-grey: #9ba7af;
   --dark-grey: #4d545d;
-  --black: #333;
+  --black: hsl(240, 0.2, 0.1);
 
   // branding
   --primary: #024cb6;
-  --secondary: #4d545d;
+  --secondary: hsl(240, 0.1, 0.5);
   --success: var(--green);
   --danger: var(--red);
   --warning: var(--orange);
@@ -272,7 +272,7 @@
   --selection-color: rgba(2, 76, 182, 0.3);
 
   // Animations
-  --standard-transition: 0.2s ease;
+  --standard-transition: 0.3s ease;
   --elastic-transition: 0.3s cubic-bezier(0, 0.68, 0.5, 1.5);
 
   // Pop out menus
@@ -312,6 +312,11 @@
   --call-to-action-link-color: #000;
   --call-to-action-text-color: var(--alert-info-text-color);
 
+  // Longhorn
+  --longhorn-background--hover: hsla(240, 0.2, 0.6, 0.075);
+  --longhorn-background--active: hsla(240, 0.2, 0.6, 0.15);
+  --longhorn-box-shadow--focus: var(--longhorn-background--hover);
+
   // Colors
   each(@colors, {
     --light-@{key}: lighten(@value, 20%);

diff --git a/war/src/main/less/modules/section.less b/war/src/main/less/modules/section.less
@@ -25,7 +25,7 @@
 .jenkins-section__title {
   margin: 0 0 var(--section-padding) 0;
   font-size: 1.1rem;
-  font-weight: 700;
+  font-weight: 600;
 }
 
 .jenkins-section__items {
@@ -47,52 +47,15 @@
 }
 
 .jenkins-section__item a {
-  position: relative;
+  .longhorn();
+
   display: flex;
-  z-index: 0;
   text-decoration: none;
   margin: 0;
 
   &::before,
   &::after {
-    position: absolute;
-    content: "";
-    inset: -10px;
-    z-index: -1;
-    border-radius: 10px;
-    transition: var(--standard-transition);
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  &::before {
-    background-color: var(--text-color);
-  }
-
-  &::after {
-    box-shadow: 0 0 0 10px currentColor;
-  }
-
-  &:hover,
-  &:focus {
-    &::before {
-      opacity: 0.1;
-    }
-  }
-
-  &:active,
-  &:focus {
-    outline: none !important;
-    z-index: 1;
-
-    &::before {
-      opacity: 0.15;
-    }
-
-    &::after {
-      opacity: 0.075;
-      box-shadow: 0 0 0 5px var(--text-color);
-    }
+    inset: -0.65rem;
   }
 
   dl {
@@ -112,23 +75,13 @@
     flex-shrink: 0;
     color: var(--text-color);
 
-    &::before,
-    &::after {
+    &::before {
       content: "";
       position: absolute;
       inset: 0;
       border-radius: 100%;
       pointer-events: none;
-    }
-
-    &::before {
-      background: currentColor;
-      opacity: 0.1;
-    }
-
-    &::after {
-      border: 1px solid currentColor;
-      opacity: 0.015;
+      background: var(--longhorn-background--active);
     }
 
     img,
@@ -172,9 +125,9 @@
   }
 
   dt {
-    font-size: 0.95rem;
+    font-size: 0.925rem;
     font-weight: 600;
-    margin: 0 0 0.25rem 0;
+    margin: 0.1rem 0 0.2rem 0;
     color: var(--text-color);
   }
 
@@ -183,6 +136,7 @@
     font-weight: 500;
     line-height: 1.6;
     margin: 0 10px 0 0;
+    font-size: 0.925rem;
   }
 }
 

diff --git a/war/src/main/less/modules/side-panel-tasks.less b/war/src/main/less/modules/side-panel-tasks.less
@@ -20,6 +20,8 @@
 }
 
 #tasks .task .task-link {
+  .longhorn();
+
   position: relative;
   display: flex;
   align-items: center;
@@ -36,51 +38,13 @@
   border: none;
   text-decoration: none;
 
-  &::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    background: var(--text-color);
-    border-radius: 10px;
-    opacity: 0;
-    transition: 0.2s ease;
-    z-index: -1;
-  }
-
-  &::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    border-radius: 10px;
-    opacity: 0.05;
-    transition: 0.2s ease;
-    box-shadow: 0 0 0 10px transparent;
-  }
-
-  &:hover {
-    &::before {
-      opacity: 0.05;
-    }
-  }
-
   .task-icon-link {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    margin: 0;
-    width: 1.4rem;
-    height: 1.4rem;
+    display: contents;
 
     svg,
     img {
-      width: 100% !important;
-      height: 100% !important;
+      width: 1.4rem !important;
+      height: 1.4rem !important;
       color: var(--text-color);
 
       * {
@@ -89,26 +53,23 @@
     }
   }
 
-  &:active,
-  &:focus {
-    &::before {
-      opacity: 0.1;
-    }
-
-    &::after {
-      box-shadow: 0 0 0 5px var(--text-color);
-    }
+  .task-link-text {
+    display: contents;
   }
 
   &--active {
     font-weight: 600 !important;
+    cursor: default;
 
     svg * {
       stroke-width: 38px;
     }
 
     &::before {
-      opacity: 0.1 !important;
+      background-color: var(--longhorn-background--active) !important;
+    }
+    &::after {
+      box-shadow: none !important;
     }
   }
 }