diff --git a/src/main/js/widgets/add/addform.scss b/src/main/js/widgets/add/addform.scss index 6270004b00f9..140657ec88fe 100644 --- a/src/main/js/widgets/add/addform.scss +++ b/src/main/js/widgets/add/addform.scss @@ -183,13 +183,12 @@ } li { - @include mixins.item; + @include mixins.item($border: false); -webkit-touch-callout: none; user-select: none; padding: 0.75rem 1rem; min-height: 68px; - cursor: pointer; display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; diff --git a/src/main/scss/abstracts/_mixins.scss b/src/main/scss/abstracts/_mixins.scss index 7999284e1a96..00e3ac00d700 100644 --- a/src/main/scss/abstracts/_mixins.scss +++ b/src/main/scss/abstracts/_mixins.scss @@ -56,11 +56,17 @@ } } -@mixin item { +@mixin item($border: true) { position: relative; + appearance: none; z-index: 0; text-decoration: none !important; - border-radius: 0.66rem; + font-weight: normal; + border-radius: var(--form-input-border-radius); + cursor: pointer; + background: transparent; + outline: none; + border: none; &::before, &::after { @@ -74,11 +80,12 @@ } &::before { - background-color: transparent; + background-color: var(--item-background); + border: var(--jenkins-border--subtle); } &::after { - box-shadow: 0 0 0 0.66rem transparent; + box-shadow: 0 0 0 0.5rem transparent; } &:focus-visible { @@ -102,7 +109,7 @@ } &::after { - box-shadow: 0 0 0 0.33rem var(--item-box-shadow--focus); + box-shadow: 0 0 0 0.25rem var(--item-box-shadow--focus); } } @@ -113,4 +120,12 @@ } } } + + @if $border == false { + &:not(:hover, &:active, &:focus) { + &::before { + border-color: transparent; + } + } + } } diff --git a/src/main/scss/abstracts/_theme.scss b/src/main/scss/abstracts/_theme.scss index 2aadb8c41b12..cba11ac5c1a8 100644 --- a/src/main/scss/abstracts/_theme.scss +++ b/src/main/scss/abstracts/_theme.scss @@ -80,6 +80,13 @@ $semantics: ( from var(--text-color) 96.8% 0.005 h / 0.8 ); + // App bar + --bottom-app-bar-shadow: color-mix( + in sRGB, + var(--text-color-secondary) 7.5%, + transparent + ); + // Alert call outs --alert-success-text-color: var(--success-color); --alert-success-bg-color: color-mix( @@ -125,8 +132,41 @@ $semantics: ( // Typography --text-color-secondary: var(--secondary); + // Borders + --jenkins-border-width: 1.5px; + --jenkins-border-color: color-mix( + in sRGB, + var(--text-color-secondary) 12%, + var(--card-background) + ); + --jenkins-border-color--subtle: color-mix( + in sRGB, + currentColor 1.5%, + transparent + ); + + /* This is a harsher border - for dividers, content blocks and more */ + --jenkins-border: var(--jenkins-border-width) solid + var(--jenkins-border-color); + + /* This is a subtle border - for increasing contrast on elements, such as buttons, menu and more */ + --jenkins-border--subtle: var(--jenkins-border-width) solid + var(--jenkins-border-color--subtle); + --jenkins-border--subtle-shadow: 0 0 0 1.5px + var(--jenkins-border-color--subtle); + + @media (resolution <= 1x) { + --jenkins-border-width: 2px; + } + + @media (prefers-contrast: more) { + --focus-input-border: var(--text-color); + --jenkins-border-color: var(--text-color); + --jenkins-border-color--subtle: var(--text-color); + } + // Table - --table-background: oklch(from var(--text-color-secondary) l c h / 0.1); + --table-background: oklch(from var(--text-color-secondary) l c h / 0.075); --table-header-foreground: var(--text-color); --table-body-background: var(--background); --table-body-foreground: var(--text-color); @@ -158,7 +198,8 @@ $semantics: ( // Command Palette --command-palette-results-backdrop-filter: contrast(0.7) brightness(1.5) saturate(1.4) blur(20px); - --command-palette-inset-shadow: inset 0 0 2px 2px rgb(255 255 255 / 0.1); + --command-palette-inset-shadow: inset 0 0 2px 2px rgb(255 255 255 / 0.1), + var(--jenkins-border--subtle-shadow); ::backdrop { --command-palette-backdrop-background: radial-gradient( @@ -171,21 +212,23 @@ $semantics: ( // Tooltips --tooltip-backdrop-filter: saturate(2) blur(20px); --tooltip-color: var(--text-color); - --tooltip-box-shadow: 0 0 8px 2px rgb(0 0 30 / 0.05), - 0 0 1px 1px rgb(0 0 20 / 0.025), 0 10px 20px rgb(0 0 20 / 0.15); + --tooltip-box-shadow: 0 0 8px 2px rgb(0 0 50 / 0.05), + var(--jenkins-border--subtle-shadow), 0 10px 50px rgb(0 0 20 / 0.1); // Dropdowns --dropdown-backdrop-filter: saturate(1.5) blur(20px); - --dropdown-box-shadow: 0 10px 30px rgb(0 0 20 / 0.2), - 0 2px 10px rgb(0 0 20 / 0.05), inset 0 -1px 2px rgb(255 255 255 / 0.025); + --dropdown-box-shadow: var(--jenkins-border--subtle-shadow), + 0 10px 30px rgb(0 0 20 / 0.1), 0 2px 10px rgb(0 0 20 / 0.05), + inset 0 -1px 2px rgb(255 255 255 / 0.025); // Dialogs ::backdrop { --dialog-backdrop-background: hsl(240 10% 20% / 0.8); } - --dialog-box-shadow: 0 10px 40px rgb(0 0 20 / 0.15), - 0 2px 15px rgb(0 0 20 / 0.05), inset 0 0 2px 2px rgb(255 255 255 / 0.025); + --dialog-box-shadow: var(--jenkins-border--subtle-shadow), + 0 10px 40px rgb(0 0 20 / 0.15), 0 2px 15px rgb(0 0 20 / 0.05), + inset 0 0 2px 2px rgb(255 255 255 / 0.025); // Dark link --link-dark-color: var(--text-color); @@ -219,12 +262,20 @@ $semantics: ( --card-border-color--active: oklch( from var(--text-color-secondary) l c h / 0.5 ); - --card-border-width: 2px; + --card-border-width: var(--jenkins-border-width); + + @media (prefers-contrast: more) { + --card-border-color: var(--text-color); + } // Tab bar --tabs-background: oklch(from var(--text-color-secondary) l c h / 0.1); --tabs-item-background: transparent; - --tabs-item-foreground: var(--text-color); + --tabs-item-foreground: color-mix( + in sRGB, + var(--text-color-secondary), + var(--text-color) + ); --tabs-item-background--hover: rgb(0 0 0 / 0.05); --tabs-item-foreground--hover: var(--text-color); --tabs-item-background--active: rgb(0 0 0 / 0.1); @@ -268,14 +319,21 @@ $semantics: ( } --form-label-font-weight: var(--font-bold-weight); - --form-input-padding: 0.625rem; + --form-input-padding: 0.5rem 0.625rem; --form-input-border-radius: 0.625rem; - --form-input-glow: 0 0 0 10px transparent; - --form-input-glow--focus: 0 0 0 5px var(--focus-input-glow); - --pre-background: rgb(0 0 0 / 0.05); + --form-input-glow: 0 0 0 0.5rem transparent; + --form-input-glow--focus: 0 0 0 0.25rem var(--focus-input-glow); + --pre-background: var(--button-background); --pre-color: var(--text-color); --selection-color: oklch(from var(--accent-color) l c h / 0.2); + @media (prefers-contrast: more) { + --input-border: var(--text-color) !important; + --input-border-hover: var(--text-color) !important; + --form-input-glow--focus: 0 0 0 4px + color-mix(in sRGB, var(--text-color), transparent); + } + // Animations --standard-transition: 0.3s ease; --elastic-transition: 0.3s cubic-bezier(0, 0.68, 0.5, 1.5); diff --git a/src/main/scss/base/_style.scss b/src/main/scss/base/_style.scss index d0a8e4223701..001a44c73c98 100644 --- a/src/main/scss/base/_style.scss +++ b/src/main/scss/base/_style.scss @@ -152,6 +152,7 @@ pre { margin: 0 0 var(--section-padding); padding: 0.8rem 1rem; border-radius: var(--form-input-border-radius); + border: var(--jenkins-border--subtle); background-color: var(--pre-background); color: var(--pre-color); font-family: var(--font-family-mono); @@ -290,21 +291,13 @@ pre.console { padding: 1rem; margin: 1rem 0; word-break: break-word; - border-radius: 6px; + border-radius: var(--form-input-border-radius); + background-color: var(--button-background); + border: var(--jenkins-border--subtle); z-index: 0; --section-padding: 0.8rem; - &::before { - content: ""; - position: absolute; - inset: 0; - background: var(--text-color); - opacity: 0.05; - z-index: -1; - border-radius: inherit; - } - p:first-of-type { margin-top: 0; } @@ -536,7 +529,7 @@ table.fingerprint-in-build td { top: 0; left: 10px; bottom: 0; - width: 2px; + width: var(--jenkins-border-width); background: var(--input-border); border-radius: 2px; transition: var(--standard-transition); diff --git a/src/main/scss/components/_alert.scss b/src/main/scss/components/_alert.scss index 7ae9bbedd5e5..7380a4321777 100644 --- a/src/main/scss/components/_alert.scss +++ b/src/main/scss/components/_alert.scss @@ -2,8 +2,8 @@ .jenkins-alert { font-size: var(--font-size-sm); padding: 15px; - margin-bottom: 20px; - border: 1px solid transparent; + margin-bottom: var(--section-padding); + border: var(--jenkins-border-width) solid transparent; border-radius: var(--form-input-border-radius); strong { @@ -52,4 +52,8 @@ color: var(--alert-danger-text-color); } } + + @media (prefers-contrast: more) { + border-color: var(--text-color); + } } diff --git a/src/main/scss/components/_app-bar.scss b/src/main/scss/components/_app-bar.scss index 6ccc36be80f5..8dbbf58eedec 100644 --- a/src/main/scss/components/_app-bar.scss +++ b/src/main/scss/components/_app-bar.scss @@ -151,7 +151,7 @@ top: -30px; left: 0; right: 0; - background: linear-gradient(transparent, rgba(#556, 0.075) 110%); + background: linear-gradient(transparent, var(--bottom-app-bar-shadow) 110%); max-width: 100%; height: 30px; opacity: 0; diff --git a/src/main/scss/components/_breadcrumbs.scss b/src/main/scss/components/_breadcrumbs.scss index 609737acefb3..593b95c2856e 100644 --- a/src/main/scss/components/_breadcrumbs.scss +++ b/src/main/scss/components/_breadcrumbs.scss @@ -30,7 +30,7 @@ padding: 0.2rem 0.4rem; & > a { - @include mixins.item; + @include mixins.item($border: false); display: inline-flex; align-items: center; @@ -40,7 +40,6 @@ margin: 0; padding: 0; color: var(--text-color); - text-decoration: none; margin-right: 0 !important; transition: var(--standard-transition); diff --git a/src/main/scss/components/_buttons.scss b/src/main/scss/components/_buttons.scss index 0ffc8e65a64e..113933bfd875 100644 --- a/src/main/scss/components/_buttons.scss +++ b/src/main/scss/components/_buttons.scss @@ -1,34 +1,24 @@ @use "../abstracts/mixins"; .jenkins-button { + --item-background: var(--button-background); --item-background--hover: var(--button-background--hover); --item-background--active: var(--button-background--active); --item-box-shadow--focus: var(--button-box-shadow--focus); @include mixins.item; - appearance: none; display: inline-flex; align-items: center; justify-content: center; - border: none; - outline: none; margin: 0; - padding: 0.5rem 0.9rem; + padding: 0.5rem 1rem; font-size: var(--font-size-sm); - font-weight: normal; - text-decoration: none !important; - background: transparent; color: var(--text-color) !important; - cursor: pointer; - min-height: 2.25rem; + min-height: 2.375rem; white-space: nowrap; gap: 1ch; - &::before { - background: var(--button-background); - } - svg { width: 1.125rem; height: 1.125rem; @@ -42,121 +32,44 @@ } .jenkins-button--primary { - color: var(--button-color--primary) !important; - - &::before { - background: var(--accent-color) !important; - } - - &::after { - box-shadow: 0 0 0 0.66rem var(--accent-color); - opacity: 0; - } - - &:not(:disabled) { - &:hover { - &::before { - opacity: 0.9; - } - } - - &:active, - &:focus-visible { - &::before { - opacity: 0.8; - } + --button-background: oklch(from var(--accent-color) l c h); + --button-background--hover: oklch(from var(--accent-color) l c h / 0.9); + --button-background--active: oklch(from var(--accent-color) l c h / 0.8); + --button-box-shadow--focus: oklch(from var(--accent-color) l c h / 0.4); - &::after { - box-shadow: 0 0 0 0.33rem var(--accent-color); - opacity: 0.2; - } - } - } -} - -.jenkins-button--tertiary { - &::before { - background: transparent; - } + color: var(--button-color--primary) !important; } // Support for custom colors // Modifier classes must include 'color' in name to work .jenkins-button[class*="color"] { - background: transparent; - color: var(--color) !important; - - &::before { - background: currentColor !important; - opacity: 0.1; - } - - &::after { - box-shadow: 0 0 0 0.66rem currentColor; - opacity: 0; - } - - &:not(:disabled) { - &:hover { - &::before { - opacity: 0.15; - } - } - - &:active { - &::before { - opacity: 0.2; - } + --button-background: oklch(from currentColor l c h / 0.1); + --button-background--hover: oklch(from currentColor l c h / 0.15); + --button-background--active: oklch(from currentColor l c h / 0.25); + --button-box-shadow--focus: oklch(from currentColor l c h / 0.125); - &::after { - box-shadow: 0 0 0 0.33rem currentColor; - opacity: 0.1; - } - } - } + color: var(--color) !important; } .jenkins-button--primary[class*="color"] { - background: transparent; - color: var(--background) !important; - - &::before { - background: var(--color) !important; - opacity: 1; - } - - &::after { - box-shadow: 0 0 0 0.66rem var(--color); - opacity: 0; - } + --button-background: oklch(from var(--color) l c h); + --button-background--hover: oklch(from var(--color) l c h / 0.9); + --button-background--active: oklch(from var(--color) l c h / 0.8); + --button-box-shadow--focus: oklch(from var(--color) l c h / 0.4); - &:not(:disabled) { - &:hover { - &::before { - opacity: 0.9; - } - } + color: var(--background) !important; +} - &:active, - &:focus-visible { - &::before { - opacity: 0.8; - } +.jenkins-button--tertiary { + --button-background: transparent !important; - &::after { - box-shadow: 0 0 0 0.33rem var(--color); - opacity: 0.3; - } + &:not(:hover, &:active, &:focus) { + &::before { + border-color: transparent; } } } -.jenkins-button--tertiary[class*="color"] { - &::before { - opacity: 0; - } -} - // Additional button related classes .jenkins-buttons-row { display: flex; @@ -249,7 +162,7 @@ in sRGB, var(--success-color) 10%, transparent - ); + ) !important; --button-background--hover: var(--button-background); --button-background--active: var(--button-background); @@ -352,13 +265,13 @@ $jenkins-split-button-border-radius: 0.2rem; } .stop-button-link { + --item-background: color-mix(in sRGB, var(--red) 15%, transparent); --item-background--hover: color-mix(in sRGB, var(--red) 20%, transparent); --item-background--active: color-mix(in sRGB, var(--red) 25%, transparent); --item-box-shadow--focus: transparent; @include mixins.item; - position: relative; display: inline-flex; align-items: center; justify-content: center; @@ -366,10 +279,6 @@ $jenkins-split-button-border-radius: 0.2rem; height: 1rem; border-radius: 0.25rem; - &::before { - background: color-mix(in sRGB, var(--red) 15%, transparent); - } - svg { width: 87.5%; height: 87.5%; diff --git a/src/main/scss/components/_cards.scss b/src/main/scss/components/_cards.scss index 9a73b4f5bbec..4de565b1c2a8 100644 --- a/src/main/scss/components/_cards.scss +++ b/src/main/scss/components/_cards.scss @@ -27,22 +27,29 @@ $card-padding: 1rem; } &:not(:hover) { - .jenkins-card__unveil { - color: var(--text-color-secondary) !important; + .jenkins-card__unveil, + .jenkins-card__reveal { + color: var(--text-color-secondary); } } - &:hover { + @media (prefers-contrast: more) { + .jenkins-card__unveil, .jenkins-card__reveal { color: var(--text-color) !important; } } + &:hover { + .jenkins-card__reveal { + color: var(--text-color); + } + } + &__content { display: flex; flex-direction: column; padding: 0 $card-padding $card-padding; - color: var(--text-color-secondary); &:empty { display: none; @@ -69,7 +76,6 @@ $card-padding: 1rem; width: 26px; height: 26px; border-radius: 0.33rem; - color: var(--text-color-secondary) !important; transition: scale var(--standard-transition), opacity var(--standard-transition); diff --git a/src/main/scss/components/_command-palette.scss b/src/main/scss/components/_command-palette.scss index bc3aca71cd7b..1d487915e9f4 100644 --- a/src/main/scss/components/_command-palette.scss +++ b/src/main/scss/components/_command-palette.scss @@ -86,6 +86,7 @@ max-width: unset; input { + padding: 0 0.5rem 0 45px; background: transparent !important; --input-border: transparent; @@ -136,7 +137,7 @@ } &__item { - @include mixins.item; + @include mixins.item($border: false); --item-background--hover: color-mix( in sRGB, @@ -152,19 +153,15 @@ display: flex; align-items: center; justify-content: flex-start; - background: transparent; padding: 0.75rem; border-radius: 0.5rem; - cursor: pointer; color: var(--text-color) !important; transition: var(--standard-transition); - box-shadow: 0 0 0 10px transparent; - border: none; - outline: none; &--hover { &::before { background-color: var(--item-background--hover); + border: var(--jenkins-border--subtle) !important; } } diff --git a/src/main/scss/components/_dropdowns.scss b/src/main/scss/components/_dropdowns.scss index 6c0b2307551c..4e6a17cf7aee 100644 --- a/src/main/scss/components/_dropdowns.scss +++ b/src/main/scss/components/_dropdowns.scss @@ -1,9 +1,10 @@ @use "../abstracts/mixins"; -$dropdown-padding: 0.4rem; +$dropdown-border-radius: 1rem; +$dropdown-padding: 0.375rem; .tippy-box[data-theme~="dropdown"] { - border-radius: 15px; + border-radius: $dropdown-border-radius; box-shadow: var(--dropdown-box-shadow); outline: none !important; background: color-mix(in sRGB, var(--background) 85%, transparent); @@ -76,22 +77,15 @@ $dropdown-padding: 0.4rem; &__separator { position: relative; - height: 0.125rem; + height: var(--jenkins-border-width); margin: $dropdown-padding calc($dropdown-padding * -1); border: none; - - &::before { - content: ""; - position: absolute; - inset: 0; - background-color: var(--text-color-secondary); - opacity: 0.1; - } + background-color: var(--jenkins-border-color); } &__heading { color: var(--text-color-secondary) !important; - margin: $dropdown-padding 0.55rem; + margin: $dropdown-padding 0.65rem; font-size: 0.8125rem; font-weight: var(--font-bold-weight); opacity: 0.8; @@ -123,7 +117,7 @@ $dropdown-padding: 0.4rem; --item-background--active: var(--button-background--active); --item-box-shadow--focus: var(--button-box-shadow--focus); - @include mixins.item; + @include mixins.item($border: false); appearance: none; display: inline-flex; @@ -138,7 +132,7 @@ $dropdown-padding: 0.4rem; text-decoration: none !important; background: transparent; color: var(--text-color) !important; - border-radius: 0.66rem; + border-radius: calc($dropdown-border-radius - $dropdown-padding); cursor: pointer; min-height: 36px; white-space: nowrap; @@ -223,14 +217,25 @@ $dropdown-padding: 0.4rem; &:hover { .jenkins-dropdown__item--selected { - background: transparent; + &::before { + opacity: 0; + } } } } .jenkins-dropdown__item--selected { - background: var(--item-background--hover); - animation: pulse 1s ease-in-out forwards; + &::before { + background: var(--item-background--hover); + border: var(--jenkins-border--subtle) !important; + animation: pulse 1s ease-in-out forwards; + } + + &:hover { + &::before { + opacity: 1 !important; + } + } @keyframes pulse { 50% { diff --git a/src/main/scss/components/_notice.scss b/src/main/scss/components/_notice.scss index 812e933f6c10..aa58c1cb2a37 100644 --- a/src/main/scss/components/_notice.scss +++ b/src/main/scss/components/_notice.scss @@ -6,6 +6,7 @@ gap: 1rem; min-height: 15rem; background: var(--button-background); + border: var(--jenkins-border--subtle); border-radius: var(--form-input-border-radius); font-size: var(--font-size-base); margin-bottom: var(--section-padding); diff --git a/src/main/scss/components/_notifications.scss b/src/main/scss/components/_notifications.scss index 1f474b106330..8e8ea554e2ec 100644 --- a/src/main/scss/components/_notifications.scss +++ b/src/main/scss/components/_notifications.scss @@ -36,8 +36,8 @@ inset: 0; border-radius: inherit; z-index: -1; - background: var(--background); - opacity: 0.3; + background: oklch(from var(--background) l c h / 0.3); + border: var(--jenkins-border--subtle); } @supports not (backdrop-filter: blur(15px)) { diff --git a/src/main/scss/components/_row-selection-controller.scss b/src/main/scss/components/_row-selection-controller.scss index 1eee5ab1b630..b816adf2a9f0 100644 --- a/src/main/scss/components/_row-selection-controller.scss +++ b/src/main/scss/components/_row-selection-controller.scss @@ -12,8 +12,8 @@ outline: none; border: none; box-shadow: - 0 0 0 10px transparent, - inset 0 0 0 0.125rem var(--input-border); + var(--form-input-glow), + inset 0 0 0 var(--jenkins-border-width) var(--input-border); border-radius: 6px; transition: var(--standard-transition); cursor: pointer; @@ -21,14 +21,14 @@ &:hover { box-shadow: - 0 0 0 10px transparent, + var(--form-input-glow), inset 0 0 0 0.3125rem var(--input-border-hover); } &:active, &:focus { box-shadow: - 0 0 0 5px var(--focus-input-glow), + 0 0 0 4px var(--focus-input-glow), inset 0 0 0 0.3125rem var(--focus-input-border); } @@ -61,19 +61,19 @@ &--all { box-shadow: - 0 0 0 10px transparent, + var(--form-input-glow), inset 0 0 0 0.6875rem var(--focus-input-border); &:hover { box-shadow: - 0 0 0 10px transparent, + var(--form-input-glow), inset 0 0 0 1.375rem var(--focus-input-border); } &:active, &:focus { box-shadow: - 0 0 0 5px var(--focus-input-glow), + 0 0 0 4px var(--focus-input-glow), inset 0 0 0 1.375rem var(--focus-input-border); } diff --git a/src/main/scss/components/_section.scss b/src/main/scss/components/_section.scss index 160655ed176a..410fafb18c01 100644 --- a/src/main/scss/components/_section.scss +++ b/src/main/scss/components/_section.scss @@ -1,7 +1,7 @@ @use "../abstracts/mixins"; .jenkins-section { - border-top: 2px solid var(--panel-border-color); + border-top: var(--jenkins-border); padding: var(--section-padding) 0 0 0; max-width: 1800px; @@ -55,7 +55,7 @@ } .jenkins-section__item a { - @include mixins.item; + @include mixins.item($border: false); display: flex; text-decoration: none; @@ -90,6 +90,7 @@ border-radius: 100%; pointer-events: none; background: var(--item-background--active); + border: var(--jenkins-border--subtle); } img, diff --git a/src/main/scss/components/_side-panel-tasks.scss b/src/main/scss/components/_side-panel-tasks.scss index 034c07822f1b..a267f2503023 100644 --- a/src/main/scss/components/_side-panel-tasks.scss +++ b/src/main/scss/components/_side-panel-tasks.scss @@ -61,17 +61,11 @@ $background-outset: 0.7rem; display: flex; align-items: center; justify-content: flex-start; - padding: 0.55rem $background-outset; + padding: 0.5rem $background-outset; gap: 0.65rem; width: 100%; - cursor: pointer; - font-weight: normal !important; font-size: var(--font-size-sm); - color: var(--text-color) !important; - background: transparent; - outline: none; - border: none; - text-decoration: none; + color: var(--text-color); margin: 0; transition: opacity var(--standard-transition); @@ -100,7 +94,7 @@ $background-outset: 0.7rem; } &--active { - font-weight: 500 !important; + font-weight: 450; cursor: default; svg * { @@ -115,4 +109,10 @@ $background-outset: 0.7rem; box-shadow: none !important; } } + + &:not(:hover, &:active, &:focus, &--active) { + &::before { + border-color: transparent; + } + } } diff --git a/src/main/scss/components/_spinner.scss b/src/main/scss/components/_spinner.scss index 3454dc8d48ec..9654c18ce30f 100644 --- a/src/main/scss/components/_spinner.scss +++ b/src/main/scss/components/_spinner.scss @@ -19,7 +19,8 @@ &::before { position: relative; margin-right: 0.5lh; - opacity: 0.2; + opacity: 0.3; + border-color: var(--text-color-secondary); } &::after { diff --git a/src/main/scss/components/_table.scss b/src/main/scss/components/_table.scss index 00ef3b3656bb..a860eeab7576 100644 --- a/src/main/scss/components/_table.scss +++ b/src/main/scss/components/_table.scss @@ -6,10 +6,12 @@ position: relative; width: 100%; background: var(--table-background); - border-radius: calc(var(--table-border-radius) + 4px); - border: 4px solid var(--table-background); - border-bottom-width: 2px; - border-spacing: 0 2px; + border-radius: calc( + var(--table-border-radius) + (var(--card-border-width) * 2) + ); + border: calc(var(--card-border-width) * 2) solid var(--table-background); + border-bottom-width: var(--card-border-width); + border-spacing: 0 var(--card-border-width); background-clip: padding-box; margin-bottom: var(--section-padding); @@ -18,8 +20,8 @@ &::before { content: ""; position: absolute; - inset: -4px -4px -2px; - border: var(--card-border-width) solid var(--table-border-color); + inset: -3px -3px -2px; + border: var(--jenkins-border--subtle); border-radius: inherit; pointer-events: none; } @@ -38,8 +40,8 @@ padding-top: calc(var(--table-padding) * 0.9); padding-bottom: calc((var(--table-padding) * 0.9) + 2px); padding-left: 1.6rem; - font-weight: var(--font-bold-weight); font-size: var(--font-size-sm); + font-weight: var(--font-bold-weight); &[align="center"] { text-align: center; @@ -257,7 +259,7 @@ &__button, .sortheader, &__link { - @include mixins.item; + @include mixins.item($border: false); align-items: center; justify-content: center; @@ -283,39 +285,23 @@ } &__badge { - margin-left: 1rem !important; + @include mixins.item; - &::before { - inset: -5px -8px; - border-radius: 13px; - background: currentColor; - opacity: 0.05; - } + --item-background: color-mix(in sRGB, currentColor 5%, transparent); + --item-background--hover: color-mix(in sRGB, currentColor 10%, transparent); + --item-background--active: color-mix( + in sRGB, + currentColor 15%, + transparent + ); + --item-box-shadow--focus: color-mix(in sRGB, currentColor 5%, transparent); + + margin-left: 1rem !important; + border-radius: 13px; + &::before, &::after { inset: -5px -8px; - box-shadow: 0 0 0 10px currentColor; - opacity: 0; - } - - &:hover { - &::before { - background: currentColor; - border-radius: 6px; - } - } - - &:active, - &:focus { - &::before { - background: currentColor; - border-radius: 6px; - } - - &::after { - box-shadow: 0 0 0 5px currentColor; - opacity: 0.025; - } } } } diff --git a/src/main/scss/components/_tabs.scss b/src/main/scss/components/_tabs.scss index 3fc440d3dc6e..b7ac90c23789 100644 --- a/src/main/scss/components/_tabs.scss +++ b/src/main/scss/components/_tabs.scss @@ -1,3 +1,7 @@ +@use "../abstracts/mixins"; + +$border-radius: 100px; + .tabBarFrame { position: relative; } @@ -7,8 +11,8 @@ display: inline-flex; align-items: center; flex-wrap: wrap; - background: var(--tabs-background); - border-radius: var(--tabs-border-radius); + background: var(--button-background); + border-radius: $border-radius; padding: 2px; margin-bottom: var(--section-padding); @@ -16,7 +20,7 @@ content: ""; position: absolute; inset: 0; - border: var(--card-border-width) solid var(--tabs-border-color); + border: var(--jenkins-border--subtle); border-radius: inherit; pointer-events: none; } @@ -27,38 +31,28 @@ } .tabBar .tab a { - position: relative; + @include mixins.item($border: false); + display: flex; align-items: center; justify-content: center; - min-width: 3rem; - text-decoration: none; - margin: 2px; - padding: 0.4rem 1.2rem; - border-radius: 100px; - background: var(--tabs-item-background); + min-height: 36px; + padding: 0 1.2rem; + border-radius: $border-radius; color: var(--tabs-item-foreground); - font-weight: var(--font-bold-weight); + font-weight: normal; font-size: var(--font-size-sm); - transition: var(--standard-transition); - cursor: pointer; + min-width: 3.75rem; - &:hover { - background: var(--tabs-item-background--hover); - color: var(--tabs-item-foreground--hover); - } - - &:active, - &:focus { - outline: none; - background: var(--tabs-item-background--active); - color: var(--tabs-item-foreground--active); + &::before, + &::after { + inset: 2px; } } .tabBar .tab .addTab svg { - width: 1.25rem; - height: 1.25rem; + width: 1.125rem; + height: 1.125rem; } .tabBar .tab [type="radio"] { @@ -66,10 +60,25 @@ } .tabBar .tab.active a { - background: var(--tabs-item-background--selected); - color: var(--tabs-item-foreground--selected); z-index: 2; cursor: default; + font-weight: 450; + color: var(--tabs-item-foreground--active); + + &::before { + background-clip: padding-box; + background-color: var(--tabs-item-background--selected) !important; + border: var(--jenkins-border--subtle) !important; + } + + &::after { + display: none; + } + + &::before, + &::after { + inset: 0; + } } .jenkins-tab-pane__title { diff --git a/src/main/scss/components/_tooltips.scss b/src/main/scss/components/_tooltips.scss index dabd16e1ef0c..90570a7ce301 100644 --- a/src/main/scss/components/_tooltips.scss +++ b/src/main/scss/components/_tooltips.scss @@ -36,7 +36,7 @@ position: absolute; inset: 0; border-radius: 0.375rem; - border: 0.1rem solid var(--text-color-secondary); + border: var(--jenkins-border-width) solid var(--text-color-secondary); opacity: 0.3; mask-image: linear-gradient( -45deg, @@ -101,8 +101,8 @@ position: absolute; inset: 0; border-radius: 0.375rem; - border: 0.1rem solid var(--text-color-secondary); - opacity: 0.3; + border: var(--jenkins-border-width) solid var(--text-color-secondary); + opacity: 0.2; } svg { diff --git a/src/main/scss/form/_checkbox.scss b/src/main/scss/form/_checkbox.scss index 6e5633dd991f..92614fefe50c 100644 --- a/src/main/scss/form/_checkbox.scss +++ b/src/main/scss/form/_checkbox.scss @@ -32,7 +32,7 @@ & + label { &::before { box-shadow: - 0 0 0 5px var(--focus-input-glow), + var(--form-input-glow--focus), inset 0 0 0 5px var(--focus-input-border); } } @@ -44,7 +44,7 @@ & + label { &::before { box-shadow: - 0 0 0 5px var(--focus-input-glow), + var(--form-input-glow--focus), inset 0 0 0 12px var(--focus-input-border); } } @@ -58,7 +58,7 @@ & + label { &::before { box-shadow: - 0 0 0 5px var(--focus-input-glow), + var(--form-input-glow--focus), inset 0 0 0 12px var(--focus-input-border); } } @@ -71,7 +71,7 @@ &:focus { &::before { box-shadow: - 0 0 0 5px var(--focus-input-glow), + var(--form-input-glow--focus), inset 0 0 0 12px var(--focus-input-border); } } @@ -80,7 +80,7 @@ & + label { &::before { box-shadow: - 0 0 0 10px transparent, + var(--form-input-glow), inset 0 0 0 12px var(--focus-input-border); } @@ -97,7 +97,7 @@ &::before { opacity: 0.35 !important; box-shadow: - 0 0 0 10px transparent, + var(--form-input-glow), inset 0 0 0 2px var(--input-border) !important; } } @@ -106,7 +106,7 @@ & + label { &::before { box-shadow: - 0 0 0 10px transparent, + var(--form-input-glow), inset 0 0 0 12px var(--focus-input-border) !important; } @@ -138,8 +138,8 @@ transition: var(--standard-transition); margin-right: 11px; box-shadow: - 0 0 0 10px transparent, - inset 0 0 0 2px var(--input-border); + var(--form-input-glow), + inset 0 0 0 var(--jenkins-border-width) var(--input-border); background: var(--input-color); } @@ -171,7 +171,7 @@ &:hover { &::before { box-shadow: - 0 0 0 10px transparent, + var(--form-input-glow), inset 0 0 0 5px var(--input-border-hover); } } @@ -180,7 +180,7 @@ &:focus { &::before { box-shadow: - 0 0 0 5px var(--focus-input-glow), + var(--form-input-glow--focus), inset 0 0 0 5px var(--focus-input-border); } } diff --git a/src/main/scss/form/_codemirror.scss b/src/main/scss/form/_codemirror.scss index a34165e8ba57..fb14e6bb9fe6 100644 --- a/src/main/scss/form/_codemirror.scss +++ b/src/main/scss/form/_codemirror.scss @@ -1,7 +1,7 @@ .CodeMirror { display: block; background: var(--input-color); - border: 2px solid var(--input-border); + border: var(--jenkins-border-width) solid var(--input-border); border-radius: var(--form-input-border-radius); width: 100%; box-shadow: var(--form-input-glow); @@ -48,8 +48,7 @@ } .CodeMirror-gutter-text { - padding: var(--form-input-padding) calc(var(--form-input-padding) * 0.5) - var(--form-input-padding) var(--form-input-padding); + padding: 0.5rem calc(0.625rem * 0.5) 0.625rem 0.5rem; color: var(--text-color-secondary); } } diff --git a/src/main/scss/form/_file-upload.scss b/src/main/scss/form/_file-upload.scss index 1969d823ec76..5c5f82f6c08c 100644 --- a/src/main/scss/form/_file-upload.scss +++ b/src/main/scss/form/_file-upload.scss @@ -24,7 +24,6 @@ display: inline-flex; align-items: center; justify-content: center; - border: none; outline: none; margin: 0 1rem 0 0; padding: 0.5rem 0.85rem 0.5rem 2.5rem; @@ -34,7 +33,7 @@ padding: 0.5rem 0.85rem; } - font-size: 0.8rem; + font-size: var(--font-size-sm); font-weight: normal; color: var(--text-color); border-radius: var(--form-input-border-radius); @@ -43,7 +42,8 @@ white-space: nowrap; background: var(--button-background); transition: var(--standard-transition); - box-shadow: 0 0 0 10px transparent; + box-shadow: var(--form-input-glow); + border: var(--jenkins-border--subtle); &:hover { background: var(--button-background--hover); @@ -51,7 +51,7 @@ &:active { background: var(--button-background--active); - box-shadow: 0 0 0 5px var(--button-box-shadow--focus); + box-shadow: 0 0 0 4px var(--button-box-shadow--focus); } } diff --git a/src/main/scss/form/_input.scss b/src/main/scss/form/_input.scss index 0d97b0816211..d81ffb2cf740 100644 --- a/src/main/scss/form/_input.scss +++ b/src/main/scss/form/_input.scss @@ -1,10 +1,11 @@ .jenkins-input { display: block; background: var(--input-color); - border: 2px solid var(--input-border); + border: var(--jenkins-border-width) solid var(--input-border); padding: var(--form-input-padding); border-radius: var(--form-input-border-radius); width: 100%; + min-height: 2.375rem; box-shadow: var(--form-input-glow); // Set height transition to 0s as vertical resizing has a delay/lag otherwise @@ -13,15 +14,21 @@ height 0s, padding 0s; - &:hover { - border-color: var(--input-border-hover); + &:not(:disabled) { + &:hover { + border-color: var(--input-border-hover); + } + + &:active, + &:focus { + outline: none; + border-color: var(--focus-input-border); + box-shadow: var(--form-input-glow--focus); + } } - &:active, - &:focus { - outline: none; - border-color: var(--focus-input-border); - box-shadow: var(--form-input-glow--focus); + &:disabled { + cursor: not-allowed; } } diff --git a/src/main/scss/form/_layout.scss b/src/main/scss/form/_layout.scss index 2b0706f53749..77e5dd58af66 100644 --- a/src/main/scss/form/_layout.scss +++ b/src/main/scss/form/_layout.scss @@ -1,3 +1,5 @@ +@use "../abstracts/mixins"; + .jenkins-form { max-width: var(--form-item-max-width); } @@ -70,6 +72,8 @@ align-items: center; background-color: var(--button-background); border-radius: var(--form-input-border-radius); + outline: var(--jenkins-border--subtle); + outline-offset: calc(var(--jenkins-border-width) * -1); padding: 0 1rem; gap: 1.5rem; @@ -89,12 +93,14 @@ } .jenkins-help-button { - position: relative; + @include mixins.item; + + --item-background: var(--button-background); + display: inline-flex; justify-content: center; align-items: center; margin-left: 1ch; - color: var(--text-color) !important; border-radius: 100%; span { @@ -110,47 +116,6 @@ mask-position: center; mask-repeat: no-repeat; } - - &::before { - content: ""; - position: absolute; - inset: 0; - background: var(--text-color-secondary); - opacity: 0.1; - border-radius: inherit; - transition: var(--standard-transition); - } - - &::after { - content: ""; - position: absolute; - inset: 0; - border: 1px solid - color-mix(in sRGB, var(--text-color-secondary), transparent); - box-shadow: var(--form-input-glow); - border-radius: inherit; - opacity: 0.1; - transition: var(--standard-transition); - } - - &:hover { - &::before { - opacity: 0.2; - } - } - - &:active, - &:focus { - outline: none; - - &::before { - opacity: 0.3; - } - - &::after { - box-shadow: 0 0 0 5px var(--text-color); - } - } } .jenkins-select-help { @@ -170,7 +135,6 @@ gap: 0.45rem; margin-left: 0.4rem; font-size: 0.8rem; - font-weight: var(--font-bold-weight); cursor: default; svg { diff --git a/src/main/scss/form/_radio.scss b/src/main/scss/form/_radio.scss index 00a4e52615eb..6c4828cf5930 100644 --- a/src/main/scss/form/_radio.scss +++ b/src/main/scss/form/_radio.scss @@ -1,10 +1,9 @@ $jenkins-radio-size: 1.375rem; -$jenkins-radio-border-size: 0.125rem; +$jenkins-radio-border-size: 1.5px; $jenkins-radio-border-hover-size: 0.3125rem; $jenkins-radio-border-active-size: 0.5rem; $jenkins-radio-border-checked-size: 0.4rem; -$jenkins-radio-glow-size: 0.625rem; -$jenkins-radio-glow-active-size: 0.3125rem; +$jenkins-radio-glow-size: 0.5rem; .jenkins-radio-help-wrapper { display: flex; @@ -37,7 +36,7 @@ $jenkins-radio-glow-active-size: 0.3125rem; &:active { & + label::before { box-shadow: - 0 0 0 $jenkins-radio-glow-active-size var(--focus-input-glow), + var(--form-input-glow--focus), inset 0 0 0 $jenkins-radio-border-active-size var(--focus-input-border); } @@ -62,7 +61,7 @@ $jenkins-radio-glow-active-size: 0.3125rem; &:active { & + label::before { box-shadow: - 0 0 0 $jenkins-radio-glow-active-size var(--focus-input-glow), + var(--form-input-glow--focus), inset 0 0 0 $jenkins-radio-border-active-size var(--focus-input-border); } diff --git a/src/main/scss/form/_search-bar.scss b/src/main/scss/form/_search-bar.scss index 79d6bfd899bc..e8b25e63f953 100644 --- a/src/main/scss/form/_search-bar.scss +++ b/src/main/scss/form/_search-bar.scss @@ -153,7 +153,7 @@ --search-bar-height: 3rem; width: 100%; - margin-block: -6px; + margin-block: -5px; @media (min-width: breakpoints.$tablet-breakpoint) { max-width: 50vw; diff --git a/src/main/scss/form/_select.scss b/src/main/scss/form/_select.scss index e8b2b2973b94..12f7377bb61e 100644 --- a/src/main/scss/form/_select.scss +++ b/src/main/scss/form/_select.scss @@ -8,26 +8,28 @@ top: 0; right: 13px; bottom: 0; - width: 12px; + width: 0.625rem; background-color: currentColor; mask-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='UTF-8'?%3e%3csvg width='336px' height='192px' viewBox='0 0 336 192' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3ctitle%3ePath%3c/title%3e%3cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3e%3cg id='arrow' transform='translate(0.000000, 0.000000)' fill='%23FF0000' fill-rule='nonzero'%3e%3cpath d='M7.02943725,7.02943725 C16.3053957,-2.24652118 31.2852799,-2.34214962 40.6788451,6.74255194 L40.9705627,7.02943725 L168,134.059 L295.029437,7.02943725 C304.305396,-2.24652118 319.28528,-2.34214962 328.678845,6.74255194 L328.970563,7.02943725 C338.246521,16.3053957 338.34215,31.2852799 329.257448,40.6788451 L328.970563,40.9705627 L184.970563,184.970563 C175.694604,194.246521 160.71472,194.34215 151.321155,185.257448 L151.029437,184.970563 L7.02943725,40.9705627 C-2.34314575,31.5979797 -2.34314575,16.4020203 7.02943725,7.02943725 Z' id='Path'%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e"); mask-size: contain; mask-repeat: no-repeat; mask-position: center; pointer-events: none; + transition: translate var(--elastic-transition); } &__input { appearance: none; display: block; - border: 2px solid var(--input-border); + border: var(--jenkins-border-width) solid var(--input-border); padding: var(--form-input-padding); width: 100% !important; // TODO remove important after https://github.com/jenkinsci/credentials-plugin/pull/255 max-width: 100% !important; // TODO remove important after https://github.com/jenkinsci/credentials-plugin/pull/255 border-radius: var(--form-input-border-radius); - box-shadow: 0 0 0 10px transparent; + box-shadow: var(--form-input-glow); transition: var(--standard-transition); min-height: 38px; + cursor: pointer; &:hover { border-color: var(--input-border-hover); @@ -37,27 +39,33 @@ &:focus { outline: none; border-color: var(--focus-input-border); - box-shadow: 0 0 0 5px var(--focus-input-glow); + box-shadow: var(--form-input-glow--focus); } &:disabled { pointer-events: none; } } + + &:hover { + &::after { + translate: 0 1px; + } + } } .jenkins-multi-select { position: relative; width: 100%; - border: 2px solid var(--input-border); + border: var(--jenkins-border-width) solid var(--input-border); border-radius: var(--form-input-border-radius); - box-shadow: 0 0 0 10px transparent; + box-shadow: var(--form-input-glow); transition: var(--standard-transition); outline: none; &:focus { border-color: var(--focus-input-border); - box-shadow: 0 0 0 5px var(--focus-input-glow); + box-shadow: var(--form-input-glow--focus); } &:disabled { diff --git a/src/main/scss/form/_textarea.scss b/src/main/scss/form/_textarea.scss index db5931407349..94af18dd057a 100644 --- a/src/main/scss/form/_textarea.scss +++ b/src/main/scss/form/_textarea.scss @@ -6,7 +6,8 @@ } .textarea-preview { - background-color: var(--very-light-grey); + background-color: var(--button-background); + border: var(--jenkins-border--subtle); padding: var(--form-input-padding); margin-top: 0.5rem; border-radius: var(--form-input-border-radius); diff --git a/src/main/scss/form/_toggle-switch.scss b/src/main/scss/form/_toggle-switch.scss index 5f7f46a7f53a..33efe7d23ca7 100644 --- a/src/main/scss/form/_toggle-switch.scss +++ b/src/main/scss/form/_toggle-switch.scss @@ -69,6 +69,13 @@ &:active, &:focus { + &::before { + box-shadow: + inset 0 0 0 1.5px + color-mix(in sRGB, var(--text-color-secondary) 9%, transparent), + var(--form-input-glow--focus); + } + &::after { left: 20px; width: 25px; @@ -101,6 +108,7 @@ cursor: pointer; line-height: 30px; font-weight: var(--form-label-font-weight); + user-select: none; &::before { display: inline-block; @@ -113,8 +121,9 @@ transition: var(--standard-transition); margin-right: 1rem; box-shadow: - inset 0 0 0 1px rgb(0 0 0 / 0.05), - 0 0 0 10px transparent; + inset 0 0 0 1.5px + color-mix(in sRGB, var(--text-color-secondary) 9%, transparent), + var(--form-input-glow); } &::after { @@ -132,7 +141,8 @@ mask-position: center; border-radius: 100px; transition: var(--standard-transition); - box-shadow: 0 1px 0 rgb(0 0 0 / 0.1); + box-shadow: 0 0 0 1.5px + color-mix(in sRGB, var(--text-color-secondary) 9%, transparent); } &:hover::before { @@ -143,8 +153,10 @@ &:focus { &::before { box-shadow: - inset 0 0 0 1px rgb(0 0 0 / 0.05), - 0 0 0 5px var(--focus-input-glow); + inset 0 0 0 1.5px + color-mix(in sRGB, var(--text-color-secondary) 9%, transparent), + 0 0 0 4px + color-mix(in sRGB, var(--text-color-secondary) 25%, transparent); } &::after { diff --git a/src/main/scss/pages/_about.scss b/src/main/scss/pages/_about.scss index 99eb40d9338f..4879090b290e 100644 --- a/src/main/scss/pages/_about.scss +++ b/src/main/scss/pages/_about.scss @@ -7,15 +7,18 @@ pointer-events: none; margin-bottom: var(--section-padding); overflow: hidden; - mask-border-source: url("data:image/svg+xml,%3Csvg width='45' height='45' viewBox='0 0 45 45' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 22.5C0 15.5109 0 12.0163 1.14181 9.25975C2.66422 5.58433 5.58433 2.66422 9.25975 1.14181C12.0163 0 15.5109 0 22.5 0C29.4891 0 32.9837 0 35.7402 1.14181C39.4157 2.66422 42.3358 5.58433 43.8582 9.25975C45 12.0163 45 15.5109 45 22.5C45 29.4891 45 32.9837 43.8582 35.7402C42.3358 39.4157 39.4157 42.3358 35.7402 43.8582C32.9837 45 29.4891 45 22.5 45C15.5109 45 12.0163 45 9.25975 43.8582C5.58433 42.3358 2.66422 39.4157 1.14181 35.7402C0 32.9837 0 29.4891 0 22.5Z' fill='%23D9D9D9'/%3E%3C/svg%3E%0A"); - mask-border-slice: 49% fill; + border-radius: 1rem; - &::before { + &::before, + &::after { content: ""; position: absolute; + z-index: 1; + } + + &::before { width: 120%; aspect-ratio: 1; - z-index: 1; background: repeating-conic-gradient( var(--background) 0deg, rgb(100 100 100 / 0.25) 20deg @@ -24,6 +27,12 @@ opacity: 0.25; } + &::after { + inset: 0; + border: var(--jenkins-border--subtle); + border-radius: inherit; + } + img { height: 7.5rem; z-index: 1; diff --git a/src/main/scss/pages/_build.scss b/src/main/scss/pages/_build.scss index cb5e3298faf1..b8f84d8aca74 100644 --- a/src/main/scss/pages/_build.scss +++ b/src/main/scss/pages/_build.scss @@ -15,6 +15,7 @@ pre { background: transparent; + border: none; margin: 0; padding: 0; line-height: 1.75; diff --git a/src/main/scss/pages/_dashboard.scss b/src/main/scss/pages/_dashboard.scss index c66b39e4508a..e8251c2dad76 100644 --- a/src/main/scss/pages/_dashboard.scss +++ b/src/main/scss/pages/_dashboard.scss @@ -1,6 +1,6 @@ @use "../abstracts/mixins"; -$min-button-size: 36px; +$min-button-size: 2.375rem; .jenkins-icon-size { display: flex; diff --git a/src/main/scss/pages/_job.scss b/src/main/scss/pages/_job.scss index b9675ee8a6d5..105817790a16 100644 --- a/src/main/scss/pages/_job.scss +++ b/src/main/scss/pages/_job.scss @@ -94,7 +94,7 @@ } .app-builds-container__item { - @include mixins.item; + @include mixins.item($border: false); display: grid; grid-template-columns: auto 1fr auto;