diff --git a/src/main/scss/abstracts/_theme.scss b/src/main/scss/abstracts/_theme.scss index 70f15eb3cbb1..242838b73f10 100644 --- a/src/main/scss/abstracts/_theme.scss +++ b/src/main/scss/abstracts/_theme.scss @@ -56,16 +56,9 @@ $semantics: ( --focus-input-border: var(--accent-color); --focus-input-glow: color-mix(in sRGB, var(--accent-color) 15%, transparent); - // Deprecated - --focus-btn-primary: #{color.change(#0b6aa2, $alpha: 0.5)}; - --focus-btn-secondary: #{color.change(#0b6aa2, $alpha: 0.5)}; - --focus-btn-danger: #{color.change(#cc0003, $alpha: 0.5)}; - // State colors - --primary-hover: #0587d4; - --primary-active: #095683; - --danger-hover: #eb383b; - --danger-active: #b50003; + --primary-hover: var(--accent-color); + --primary-active: var(--accent-color); // Status icon colors --weather-icon-color: var(--accent-color); @@ -77,16 +70,9 @@ $semantics: ( // Header --brand-link-color: var(--secondary); --header-link-color: var(--white); - --header-link-color-active: #f5f5f5; - --header-search-border: var(--white); - --search-input-color: var(--brand-link-color); - --search-bg: var(--white); - --search-box-completion-bg: var(--primary-hover); - --search-box-shadow: 0 1px 7px 0 rgb(0 0 0 / 0.3); --header-bg-classic: var(--black); --header-link-bg-classic-hover: #404040; --header-link-bg-classic-active: #404040; - --header-item-border-radius: 4px; // Breadcrumbs bar --breadcrumbs-bar-background: oklch( @@ -138,42 +124,6 @@ $semantics: ( // Typography --text-color-secondary: var(--secondary); - // Deprecated - Button generic - --btn-font-weight: bold; - --btn-text-color: var(--white); - --btn-font-size: var(--font-size-xs); - --btn-line-height: 1rem; - --btn-large-font-size: var(--font-size-sm); - --btn-large-line-height: 1.25rem; - - // Deprecated - Button primary - --button-color--primary: var(--background); - --btn-primary-bg: #063f61; - --btn-primary-bg-hover: #{color.adjust(#063f61, $lightness: 7.5%)}; - --btn-primary-bg-active: #{color.adjust(#063f61, $lightness: 12%)}; - - // Deprecated - Button primary - --btn-secondary-color: var(--secondary); - --btn-secondary-bg: var(--btn-text-color); - --btn-secondary-border: var(--medium-grey); - --btn-secondary-color--hover: var(--accent-color); - --btn-secondary-bg--hover: var(--btn-secondary-bg); - --btn-secondary-border--hover: var(--accent-color); - --btn-secondary-color--focus: var(--accent-color); - --btn-secondary-bg--focus: var(--btn-secondary-bg); - --btn-secondary-border--focus: var(--accent-color); - --btn-secondary-color--active: var(--primary-active); - --btn-secondary-bg--active: var(--btn-secondary-bg); - --btn-secondary-border--active: var(--primary-active); - - // Deprecated - Button link - --btn-link-color: var(--accent-color); - --btn-link-font-weight: var(--link-font-weight); - --btn-link-color--hover: var(--primary-hover); - --btn-link-bg--hover: var(--very-light-grey); - --btn-link-color--active: var(--primary-active); - --btn-link-bg--active: var(--light-grey); - // Table --table-background: oklch(from var(--text-color-secondary) l c h / 0.1); --table-header-foreground: var(--text-color); @@ -282,18 +232,10 @@ $semantics: ( --tabs-item-foreground--selected: var(--link-color); --tabs-border-radius: calc((10px + 34px) / 2); - // Deprecated - Tabbar baseline - --tab-baseline-width: 2px; - --tab-baseline-color: var(--light-grey); - --tab-baseline-default-display: none; - // Side panel --side-panel-width: 340px; --panel-header-bg-color: var(--light-grey); --panel-border-color: var(--light-grey); - --side-panel-hover-color: var(--panel-border-color); - --task-link-bg-color--active: var(--panel-border-color); - --task-link-bg-color--hover: var(--very-light-grey); // Form --section-padding: 1.625rem; @@ -337,24 +279,9 @@ $semantics: ( --standard-transition: 0.3s ease; --elastic-transition: 0.3s cubic-bezier(0, 0.68, 0.5, 1.5); - // Deprecated - Pop out menus - --menu-text-color: black; - --menu-bg-color: var(--white); - --menu-selected-color: #b3d4ff; - --menu-box-shadow: 0 3px 10px rgb(0 0 0 / 0.3); - - // Deprecated - Add form widget / configure job - --light-bg-color: #eee; - --light-bg-color--hover: rgb(255 255 255 / 0.65); - --add-item-btn-decorator-border-color: #acb; - --add-item-btn-decorator-bg-color: rgb(245 249 239 / 0.75); - // Plugin manager --plugin-manager-bg-color-already-upgraded: var(--light-grey); - // Auto complete - --auto-complete-bg-color--prehighlight: #b3d4ff; - // Default button --button-background: oklch(from var(--text-color-secondary) l c h / 0.075); --button-background--hover: oklch( @@ -366,6 +293,7 @@ $semantics: ( --button-box-shadow--focus: oklch( from var(--text-color-secondary) l c h / 0.1 ); + --button-color--primary: var(--background); // Variables for sidebar items, card items --item-background--hover: oklch(from var(--text-color-secondary) l c h / 0.1); diff --git a/src/main/scss/base/_style.scss b/src/main/scss/base/_style.scss index 6587ea3e7a52..fcbbf2a95161 100644 --- a/src/main/scss/base/_style.scss +++ b/src/main/scss/base/_style.scss @@ -229,11 +229,6 @@ pre.console { margin-top: 0; } -.setting-main > .yui-button { - clear: both; - float: right; -} - .expanding-input { display: flex; align-items: center; @@ -272,22 +267,6 @@ pre.console { color: gray; } -.bottom-sticker, -#bottom-sticker { - position: sticky; - - // This has to be set to -1px so that IntersectionObserver can add the - // &--stuck class when the element is stuck to the bottom of the screen - // https://css-tricks.com/how-to-detect-when-a-sticky-element-gets-pinned/ - bottom: -1px; - margin-left: calc(var(--section-padding) * -1); - width: calc( - 100% + calc(var(--section-padding) * 2) - ); /* it needs to occupy the entire width or else the underlying content will see through */ - - z-index: 998; /* behind top-sticker */ -} - .icon16x16 { width: 16px; height: 16px; @@ -403,20 +382,6 @@ img.icon-help { display: block; } -/* ================ Element overflow calculation helper styles ================ */ - -.force-wrap, -.force-wrap a { - white-space: normal !important; - overflow: visible !important; -} - -.force-nowrap, -.force-nowrap a { - white-space: nowrap !important; - overflow: hidden !important; -} - /* ========================= editable combobox style ========================= */ .comboBoxList { overflow-y: scroll; @@ -795,10 +760,6 @@ select.select-ajax-pending { } /* ========================= Button styles ================= */ -#disable-project { - margin-top: 6px; -} - .i18n { display: none; } diff --git a/src/main/scss/components/_app-bar.scss b/src/main/scss/components/_app-bar.scss index bce8aa213a41..092c2e48a3ad 100644 --- a/src/main/scss/components/_app-bar.scss +++ b/src/main/scss/components/_app-bar.scss @@ -110,6 +110,22 @@ } } +.bottom-sticker, +#bottom-sticker { + position: sticky; + + // This has to be set to -1px so that IntersectionObserver can add the + // &--stuck class when the element is stuck to the bottom of the screen + // https://css-tricks.com/how-to-detect-when-a-sticky-element-gets-pinned/ + bottom: -1px; + margin-left: calc(var(--section-padding) * -1); + width: calc( + 100% + calc(var(--section-padding) * 2) + ); /* it needs to occupy the entire width or else the underlying content will see through */ + + z-index: 998; /* behind top-sticker */ +} + .bottom-sticker-inner { position: relative; padding: 1em var(--section-padding); diff --git a/src/main/scss/components/_breadcrumbs.scss b/src/main/scss/components/_breadcrumbs.scss index f50677846430..ff45e04f2cb6 100644 --- a/src/main/scss/components/_breadcrumbs.scss +++ b/src/main/scss/components/_breadcrumbs.scss @@ -311,30 +311,3 @@ } } } - -// TODO: Remove when YUI dropdowns are removed - -#breadcrumb-menu .header { - font-weight: bold; - font-size: 0.875rem; - pointer-events: none; -} - -#breadcrumb-menu .separator { - position: relative; - display: block !important; - color: transparent; - overflow: hidden; - width: 100%; - - &::after { - content: ""; - position: absolute; - top: 9px; - left: -50vw; - right: -50vw; - background: var(--text-color); - height: 2px; - opacity: 0.1; - } -} diff --git a/src/main/scss/components/_buttons-deprecated.scss b/src/main/scss/components/_buttons-deprecated.scss deleted file mode 100644 index b28756d267f6..000000000000 --- a/src/main/scss/components/_buttons-deprecated.scss +++ /dev/null @@ -1,111 +0,0 @@ -// Button: variant mixins - -@mixin button-danger { - color: var(--btn-text-color); - background-color: var(--destructive-color); - border-color: var(--destructive-color); - - &:hover, - &:focus { - color: var(--btn-text-color); - background-color: var(--danger-hover); - border-color: var(--danger-hover); - } - - &:focus { - box-shadow: 0 0 0 0.2rem var(--focus-btn-danger); - } - - &:active { - color: var(--btn-text-color); - background-color: var(--danger-active); - border-color: var(--danger-active); - } -} - -@mixin button-primary { - color: var(--btn-text-color); - background-color: var(--btn-primary-bg); - border-color: var(--btn-primary-bg); - - &:hover, - &:focus { - color: var(--btn-text-color); - background-color: var(--btn-primary-bg-hover); - border-color: var(--btn-primary-bg-hover); - } - - &:focus { - box-shadow: 0 0 0 0.2rem var(--focus-btn-primary); - } - - &:active { - color: var(--btn-text-color); - background-color: var(--btn-primary-bg-active); - border-color: var(--btn-primary-bg-active); - } -} - -@mixin button-secondary { - color: var(--btn-secondary-color); - border-color: var(--btn-secondary-border); - background-color: var(--btn-secondary-bg); - - &:focus { - color: var(--btn-secondary-color--focus); - border-color: var(--btn-secondary-border--focus); - background-color: var(--btn-secondary-bg--focus); - box-shadow: 0 0 0 0.2rem var(--focus-btn-secondary); - } - - // Hover MUST be AFTER the focus declaration for this outlined button. - // Otherwise, the hover styles will not be applied when hovering over a focused element - &:hover { - color: var(--btn-secondary-color--hover); - border-color: var(--btn-secondary-border--hover); - background-color: var(--btn-secondary-bg--hover); - } - - &:active { - color: var(--btn-secondary-color--active); - border-color: var(--btn-secondary-border--active); - background-color: var(--btn-secondary-bg--active); - } -} - -@mixin button-link { - color: var(--accent-color); - background-color: transparent; - border-color: transparent; - font-weight: var(--btn-link-font-weight); - - &:hover, - &:focus { - color: var(--btn-link-color--hover); - background-color: var(--btn-link-bg--hover); - border-color: var(--btn-link-bg--hover); - } - - &:focus { - box-shadow: none; - } - - &:active { - color: var(--btn-link-color--active); - background-color: var(--btn-link-bg--active); - border-color: var(--btn-link-bg--active); - } -} - -.button-link { - @include button-link; -} - -@mixin button-disabled { - opacity: 0.5; - pointer-events: none; -} - -.button-disabled { - @include button-disabled; -} diff --git a/src/main/scss/components/_index.scss b/src/main/scss/components/_index.scss index d9c4133a2730..821805c17c57 100644 --- a/src/main/scss/components/_index.scss +++ b/src/main/scss/components/_index.scss @@ -3,7 +3,6 @@ @use "badges"; @use "breadcrumbs"; @use "buttons"; -@use "buttons-deprecated"; @use "cards"; @use "command-palette"; @use "content-blocks"; diff --git a/src/main/scss/components/_page-header.scss b/src/main/scss/components/_page-header.scss index 76c7fc9028e4..85c4cca0f71b 100644 --- a/src/main/scss/components/_page-header.scss +++ b/src/main/scss/components/_page-header.scss @@ -92,116 +92,3 @@ a.page-header__brand-link { margin-left: 0.25rem; } } - -/* Search box */ - -// Style it through the id selector to override the YUI selectors set by -// the YUI Autocomplete module -#searchform { - position: relative; - font-family: var(--font-family-sans); - display: inline-flex; - height: 2.5rem; -} - -// Need to add the id selector to override the ".yui-skin-sam .yui-ac-input" set by -// the YUI Autocomplete module -#search-box.main-search__input { - position: static; - padding: 0.25rem 2.5rem; - margin: 0; - font-size: var(--font-size-base); - line-height: var(--line-height-base); - font-weight: bold; - color: var(--search-input-color); - border-radius: var(--form-input-border-radius); - border: 2px solid var(--header-search-border); - outline: none; - box-shadow: 0 0 0 10px transparent; - transition: 0.2s ease; - - &::placeholder { - font-weight: normal; - } - - &:active, - &:focus { - border-color: var(--focus-input-border); - box-shadow: 0 0 0 5px var(--focus-input-glow); - } -} - -.main-search__icon-leading, -.main-search__icon-trailing { - position: absolute; - display: inline-flex; - height: 2.5rem; - width: 2.5rem; - justify-content: center; - align-items: center; - background: transparent; -} - -.main-search__icon-leading { - left: 0; - pointer-events: none; - - svg { - width: 16px; - height: 16px; - } -} - -.main-search__icon-trailing { - right: 0; - outline-color: var(--header-link-outline); - - &:link, - &:visited { - color: var(--search-input-color); - } - - &:hover, - &:focus { - color: var(--header-link-bg-classic-hover); - } - - &:active { - fill: var(--header-link-bg-classic-active); - } - - svg { - width: 20px; - height: 20px; - } -} - -#search-box-completion { - text-align: left; - width: 25em; - position: absolute; - z-index: 1000; -} - -#search-box-completion ul { - padding: 0.75rem 0; - width: 100%; - margin: 0; - list-style: none; -} - -#search-box-completion li { - white-space: nowrap; - padding: 0.25rem 1.25rem; - font-size: var(--font-size-base); - line-height: var(--line-height-base); - overflow: hidden; - text-overflow: ellipsis; -} - -#search-box-sizer { - position: absolute; - visibility: hidden; - min-width: 15rem; - max-width: calc(100vw - 500px); -} diff --git a/src/main/scss/components/_tabs.scss b/src/main/scss/components/_tabs.scss index 0e54d9646a99..94744aa8367c 100644 --- a/src/main/scss/components/_tabs.scss +++ b/src/main/scss/components/_tabs.scss @@ -72,21 +72,6 @@ cursor: default; } -.tabBarBaseline { - border-top: var(--tab-baseline-width) solid var(--tab-baseline-color); - z-index: 1; - position: absolute; - bottom: 0; - width: 100%; - - /* Baseline is hidden by default. See next rule fo adding visibility. */ - display: var(--tab-baseline-default-display, none); -} - -.tabBarFrame.showBaseline .tabBarBaseline { - display: block; -} - .jenkins-tab-pane__title { font-size: 1.6rem; margin: 2.2rem 0 1.4rem;