[UI] Add new themes to Packages List view page (#9852)

* Add new theme to Package List page
NuGet · Mar 21, 2024 · 8a6ddd0 · 8a6ddd0
1 parent 8abd405
commit 8a6ddd0
Show file tree

Hide file tree

Showing 12 changed files with 673 additions and 248 deletions.
diff --git a/src/Bootstrap/dist/css/bootstrap-theme.css b/src/Bootstrap/dist/css/bootstrap-theme.css
diff --git a/src/Bootstrap/dist/css/bootstrap.css b/src/Bootstrap/dist/css/bootstrap.css
diff --git a/src/Bootstrap/less/buttons.less b/src/Bootstrap/less/buttons.less
@@ -94,37 +94,58 @@
   border-color: var(--brandBackground1Rest);
   border-radius: var(--Medium, 4px);
   border: 2px solid transparent;
+  box-shadow: none;
+  outline: none;
 
-  &:focus,
-  &.focus {
+  &:hover {
+    border: 2px solid var(--brandBackground1Hover);
     color: var(--neutralForegroundOnBrandRest);
-    box-shadow: inset 0px 0px 0px 1px var(--neutralStrokeFocus1Rest);
-    border: 2px solid var(--neutralStrokeFocus2Rest);
+    background-color: var(--brandBackground1Hover);
+    box-shadow: none;
     outline: none;
   }
 
-  &:hover,
-  &.hover {
-    outline: none;
+  &:active {
+    border: 2px solid var(--brandBackground1Pressed);
     color: var(--neutralForegroundOnBrandRest);
-    background-color: var(--brandBackground1Hover);
-    border: 2px solid var(--brandBackground1Hover);
+    background-color: var(--brandBackground1Pressed);
+    box-shadow: none;
+    outline: none;
   }
 
-  &:active,
-  &.active {
+  &:focus-within,
+  &:focus-visible,
+  &:focus {
+    border: 2px solid var(--neutralStrokeFocus2Rest);
     color: var(--neutralForegroundOnBrandRest);
-    outline: none;
+    box-shadow: inset 0px 0px 0px 1px var(--neutralStrokeFocus1Rest);
+    outline: none !important; // removes focus from .tab-focus()
+  }
+}
+.brand-button-transparent {
+  color: var(--neutralForeground2Rest);
+  background-color: var(--transparentBackgroundRest);
+  border-radius: var(--Medium, 4px);
+  border: 2px solid transparent;
+  box-shadow: none !important;
+  padding: 5px 12px;
+
+  &:hover,
+  &:focus:hover {
+    color: var(--neutralForeground2BrandHover);
+  }
+
+  &:active,
+  &:active:focus {
+    color: var(--neutralForeground2BrandPressed);
+  }
 
-    &:hover,
-    &:focus,
-    &.focus {
-      color: var(--neutralForegroundOnBrandRest);
-      border: 2px solid var(--brandBackground1Pressed);
-      box-shadow: none;   
-      background-color: var(--brandBackground1Pressed);
-      outline: none;
-    }
+  &:focus-within,
+  &:focus-visible,
+  &:focus {
+    color: var(--neutralForeground2Rest);
+    border: 2px solid var(--neutralStrokeFocus2Rest);
+    outline: none !important; // removes focus from .tab-focus()
   }
 }