Refine button appearances in sidebars, menus, pages and breadcrumbs (#…

…9367) * Push * Push * Update _buttons.scss
jenkinsci · Jun 11, 2024 · 73de53a · 73de53a
1 parent a6542b9
commit 73de53a
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 19 deletions.
diff --git a/war/src/main/scss/components/_app-bar.scss b/war/src/main/scss/components/_app-bar.scss
@@ -9,16 +9,16 @@
  justify-content: center;
  flex-direction: column;
  width: 100%;
- min-height: 36px;
+ min-height: 2.25rem;
  }
 
  .jenkins-app-bar__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: var(--section-padding);
- min-height: 36px;
- gap: 1rem;
+ min-height: 2.25rem;
+ gap: 0.75rem;
 
  .jenkins-search {
  min-width: 260px;

diff --git a/war/src/main/scss/components/_breadcrumbs.scss b/war/src/main/scss/components/_breadcrumbs.scss
@@ -26,7 +26,7 @@
  justify-content: center;
  color: var(--text-color);
  font-weight: 500;
- font-size: 0.85rem;
+ font-size: 0.875rem;
  padding: 0.2rem 0.4rem;
 
  & > a {

diff --git a/war/src/main/scss/components/_buttons.scss b/war/src/main/scss/components/_buttons.scss
@@ -14,15 +14,14 @@
  border: none;
  outline: none;
  margin: 0;
- padding: 0.5rem 0.85rem;
- font-size: 0.8125rem;
- font-weight: 500;
+ padding: 0.5rem 0.9rem;
+ font-size: 0.875rem;
  text-decoration: none !important;
  background: transparent;
  color: var(--text-color) !important;
  border-radius: 0.66rem;
  cursor: pointer;
- min-height: 36px;
+ min-height: 2.25rem;
  white-space: nowrap;
  gap: 1ch;
  transition: var(--standard-transition);
@@ -32,8 +31,8 @@
  }
 
  svg {
- width: 1.1rem;
- height: 1.1rem;
+ width: 1.125rem;
+ height: 1.125rem;
  }
 
  &:disabled {
@@ -45,7 +44,6 @@
 
 .jenkins-button--primary {
  color: var(--button-color--primary) !important;
- font-weight: 600;
 
  &::before {
  background: var(--accent-color) !important;

diff --git a/war/src/main/scss/components/_dropdowns.scss b/war/src/main/scss/components/_dropdowns.scss
@@ -92,7 +92,7 @@ $dropdown-padding: 0.4rem;
  color: var(--text-color-secondary) !important;
  margin: $dropdown-padding 0.55rem;
  font-size: 0.8125rem;
- font-weight: 600;
+ font-weight: 500;
  opacity: 0.8;
 
  &:not(:first-of-type) {
@@ -133,7 +133,7 @@ $dropdown-padding: 0.4rem;
  margin: 0;
  padding: $dropdown-padding 1.75rem $dropdown-padding 0.6rem;
  font-size: 0.8125rem;
- font-weight: 500;
+ font-weight: 450;
  text-decoration: none !important;
  background: transparent;
  color: var(--text-color) !important;

diff --git a/war/src/main/scss/components/_side-panel-tasks.scss b/war/src/main/scss/components/_side-panel-tasks.scss
@@ -8,7 +8,7 @@ $background-outset: 0.7rem;
  display: flex;
  flex-direction: column;
  margin: var(--section-padding);
- gap: 5px;
+ gap: 0.125rem;
 
  /* stylelint-disable-next-line media-query-no-invalid */
  @media (min-width: breakpoints.$tablet-breakpoint) {
@@ -63,11 +63,11 @@ $background-outset: 0.7rem;
  align-items: center;
  justify-content: flex-start;
  padding: 0.55rem $background-outset;
- gap: 0.75rem;
+ gap: 0.65rem;
  width: 100%;
  cursor: pointer;
- font-weight: 500 !important;
- font-size: 0.9rem;
+ font-weight: 450 !important;
+ font-size: 0.875rem;
  color: var(--text-color) !important;
  background: transparent;
  outline: none;
@@ -101,11 +101,11 @@ $background-outset: 0.7rem;
  }
 
  &--active {
- font-weight: 600 !important;
+ font-weight: 500 !important;
  cursor: default;
 
  svg * {
- stroke-width: 38px;
+ stroke-width: 35px;
  }
 
  &::before {