From 8d93cea2969730fc8f3bdeb3704a3b89db0bbcc0 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sun, 24 Mar 2024 17:48:06 +0100 Subject: [PATCH] Remove fomantic segment module (#30042) Another CSS-only module. Also, I re-ordered the imports based on [original fomantic order](https://github.com/fomantic/Fomantic-UI/blob/2.8.7/src/semantic.less). --- web_src/css/base.css | 45 +- web_src/css/index.css | 18 +- web_src/css/modules/segment.css | 195 ++++++++ web_src/fomantic/build/semantic.css | 668 ---------------------------- web_src/fomantic/semantic.json | 1 - 5 files changed, 207 insertions(+), 720 deletions(-) create mode 100644 web_src/css/modules/segment.css diff --git a/web_src/css/base.css b/web_src/css/base.css index 51a4852e7e826..3f46e4cd1aed8 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -360,6 +360,7 @@ ol.ui.list li, .ui.vertical.menu { background: var(--color-menu); border-color: var(--color-secondary); + box-shadow: none; } .ui.menu .item { @@ -576,14 +577,6 @@ ol.ui.list li, visibility: visible !important; } -.ui.error.segment { - border-color: var(--color-error-border) !important; -} - -.ui.warning.segment { - border-color: var(--color-warning-border) !important; -} - .ui.selection.active.dropdown, .ui.selection.active.dropdown:hover, .ui.selection.active.dropdown .menu, @@ -930,12 +923,6 @@ input:-webkit-autofill:active, background-color: transparent; } -.ui.menu, -.ui.vertical.menu, -.ui.segment { - box-shadow: none; -} - /* replace fomantic popover box shadows */ .ui.dropdown .menu, .ui.upward.dropdown > .menu, @@ -1029,19 +1016,6 @@ input:-webkit-autofill:active, vertical-align: middle; } -.ui .info.segment.top h3, -.ui .info.segment.top h4 { - margin-top: 0; -} - -.ui .info.segment.top h3:last-child { - margin-top: 4px; -} - -.ui .info.segment.top > :last-child { - margin-bottom: 0; -} - .ui .form .autofill-dummy { position: absolute; width: 1px; @@ -1678,23 +1652,6 @@ a.ui.basic.label:hover { margin-left: 0; } -.ui.segment, -.ui.segments, -.ui.attached.segment { - background: var(--color-box-body); - color: var(--color-text); - border-color: var(--color-secondary); -} - -.ui.segments > .segment { - border-color: var(--color-secondary); -} - -.ui.secondary.segment { - background: var(--color-secondary-bg); - color: var(--color-text-light); -} - .rss-icon { display: inline-flex; color: var(--color-text-light-1); diff --git a/web_src/css/index.css b/web_src/css/index.css index 7ba19e62d4ec8..4258b85797835 100644 --- a/web_src/css/index.css +++ b/web_src/css/index.css @@ -1,21 +1,25 @@ @import "./modules/normalize.css"; @import "./modules/animations.css"; -@import "./modules/grid.css"; + +/* fomantic replacements */ @import "./modules/button.css"; +@import "./modules/container.css"; +@import "./modules/divider.css"; +@import "./modules/header.css"; +@import "./modules/segment.css"; +@import "./modules/grid.css"; +@import "./modules/message.css"; +@import "./modules/card.css"; +@import "./modules/modal.css"; + @import "./modules/select.css"; @import "./modules/tippy.css"; -@import "./modules/modal.css"; @import "./modules/breadcrumb.css"; -@import "./modules/card.css"; @import "./modules/comment.css"; @import "./modules/navbar.css"; @import "./modules/toast.css"; -@import "./modules/divider.css"; @import "./modules/svg.css"; @import "./modules/flexcontainer.css"; -@import "./modules/message.css"; -@import "./modules/container.css"; -@import "./modules/header.css"; @import "./shared/flex-list.css"; @import "./shared/milestone.css"; diff --git a/web_src/css/modules/segment.css b/web_src/css/modules/segment.css new file mode 100644 index 0000000000000..8bdd25bfe7497 --- /dev/null +++ b/web_src/css/modules/segment.css @@ -0,0 +1,195 @@ +/* based on Fomantic UI segment module, with just the parts extracted that we use. If you find any + unused rules here after refactoring, please remove them. */ + +.ui.segment { + position: relative; + margin: 1rem 0; + padding: 1em; + border-radius: 0.28571429rem; + border: 1px solid var(--color-secondary); + background: var(--color-box-body); + color: var(--color-text); +} +.ui.segment:first-child { + margin-top: 0; +} +.ui.segment:last-child { + margin-bottom: 0; +} + +.ui.grid.segment { + margin: 1rem 0; + border-radius: 0.28571429rem; +} + +.ui.segment.tab:last-child { + margin-bottom: 1rem; +} + +.ui.segments { + flex-direction: column; + position: relative; + margin: 1rem 0; + border: 1px solid var(--color-secondary); + border-radius: 0.28571429rem; + background: var(--color-box-body); + color: var(--color-text); +} +.ui.segments:first-child { + margin-top: 0; +} +.ui.segments:last-child { + margin-bottom: 0; +} + +.ui.segments > .segment { + top: 0; + bottom: 0; + border-radius: 0; + margin: 0; + width: auto; + box-shadow: none; + border: none; + border-top: 1px solid var(--color-secondary); +} +.ui.segments:not(.horizontal) > .segment:first-child { + top: 0; + bottom: 0; + border-top: none; + margin-top: 0; + margin-bottom: 0; + border-radius: 0.28571429rem 0.28571429rem 0 0; +} + +.ui.segments:not(.horizontal) > .segment:last-child { + top: 0; + bottom: 0; + margin-top: 0; + margin-bottom: 0; + border-radius: 0 0 0.28571429rem 0.28571429rem; +} + +.ui.segments:not(.horizontal) > .segment:only-child { + border-radius: 0.28571429rem; +} + +.ui.segments > .ui.segments { + border-top: 1px solid var(--color-secondary); + margin: 1rem; +} +.ui.segments > .segments:first-child { + border-top: none; +} +.ui.segments > .segment + .segments:not(.horizontal) { + margin-top: 0; +} + +.ui.horizontal.segments { + display: flex; + flex-direction: row; + background-color: transparent; + padding: 0; + margin: 1rem 0; + border-radius: 0.28571429rem; + border: 1px solid var(--color-secondary); +} + +.ui.horizontal.segments > .segment { + margin: 0; + min-width: 0; + border-radius: 0; + border: none; + box-shadow: none; + border-left: 1px solid var(--color-secondary); +} + +.ui.segments > .horizontal.segments:first-child { + border-top: none; +} +.ui.horizontal.segments:not(.stackable) > .segment:first-child { + border-left: none; +} +.ui.horizontal.segments > .segment:first-child { + border-radius: 0.28571429rem 0 0 0.28571429rem; +} +.ui.horizontal.segments > .segment:last-child { + border-radius: 0 0.28571429rem 0.28571429rem 0; +} + +.ui.clearing.segment::after { + content: ""; + display: block; + clear: both; +} + +.ui[class*="left aligned"].segment { + text-align: left; +} +.ui[class*="center aligned"].segment { + text-align: center; +} + +.ui.secondary.segment { + background: var(--color-secondary-bg); + color: var(--color-text-light); +} + +.ui.attached.segment { + top: 0; + bottom: 0; + border-radius: 0; + margin: 0 -1px; + width: calc(100% + 2px); + max-width: calc(100% + 2px); + box-shadow: none; + border: 1px solid var(--color-secondary); + background: var(--color-box-body); + color: var(--color-text); +} +.ui.attached:not(.message) + .ui.attached.segment:not(.top) { + border-top: none; +} + +.ui[class*="top attached"].segment { + bottom: 0; + margin-bottom: 0; + top: 0; + margin-top: 1rem; + border-radius: 0.28571429rem 0.28571429rem 0 0; +} +.ui.segment[class*="top attached"]:first-child { + margin-top: 0; +} + +.ui.segment[class*="bottom attached"] { + bottom: 0; + margin-top: 0; + top: 0; + margin-bottom: 1rem; + border-radius: 0 0 0.28571429rem 0.28571429rem; +} +.ui.segment[class*="bottom attached"]:last-child { + margin-bottom: 1rem; +} + +.ui.fitted.segment:not(.horizontally) { + padding-top: 0; + padding-bottom: 0; +} +.ui.fitted.segment:not(.vertically) { + padding-left: 0; + padding-right: 0; +} + +.ui.segments .segment, +.ui.segment { + font-size: 1rem; +} + +.ui.error.segment { + border-color: var(--color-error-border) !important; +} + +.ui.warning.segment { + border-color: var(--color-warning-border) !important; +} diff --git a/web_src/fomantic/build/semantic.css b/web_src/fomantic/build/semantic.css index d9abf343b8db7..5421641da844f 100644 --- a/web_src/fomantic/build/semantic.css +++ b/web_src/fomantic/build/semantic.css @@ -13392,674 +13392,6 @@ Floated Menu / Item Theme Overrides *******************************/ -/******************************* - Site Overrides -*******************************/ -/*! - * # Fomantic-UI - Segment - * http://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ - -/******************************* - Segment -*******************************/ - -.ui.segment { - position: relative; - background: #FFFFFF; - box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15); - margin: 1rem 0; - padding: 1em 1em; - border-radius: 0.28571429rem; - border: 1px solid rgba(34, 36, 38, 0.15); -} - -.ui.segment:first-child { - margin-top: 0; -} - -.ui.segment:last-child { - margin-bottom: 0; -} - -/* Vertical */ - -.ui.vertical.segment { - margin: 0; - padding-left: 0; - padding-right: 0; - background: none transparent; - border-radius: 0; - box-shadow: none; - border: none; - border-bottom: 1px solid rgba(34, 36, 38, 0.15); -} - -.ui.vertical.segment:last-child { - border-bottom: none; -} - -/*------------------- - Loose Coupling ---------------------*/ - -/* Label */ - -.ui[class*="bottom attached"].segment > [class*="top attached"].label { - border-top-left-radius: 0; - border-top-right-radius: 0; -} - -.ui[class*="top attached"].segment > [class*="bottom attached"].label { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; -} - -.ui.attached.segment:not(.top):not(.bottom) > [class*="top attached"].label { - border-top-left-radius: 0; - border-top-right-radius: 0; -} - -.ui.attached.segment:not(.top):not(.bottom) > [class*="bottom attached"].label { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; -} - -/* Grid */ - -.ui.page.grid.segment, -.ui.grid > .row > .ui.segment.column, -.ui.grid > .ui.segment.column { - padding-top: 2em; - padding-bottom: 2em; -} - -.ui.grid.segment { - margin: 1rem 0; - border-radius: 0.28571429rem; -} - -/* Table */ - -.ui.basic.table.segment { - background: #FFFFFF; - border: 1px solid rgba(34, 36, 38, 0.15); - box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15); -} - -.ui[class*="very basic"].table.segment { - padding: 1em 1em; -} - -/* Tab */ - -.ui.segment.tab:last-child { - margin-bottom: 1rem; -} - -/******************************* - Types -*******************************/ - -/*------------------- - Placeholder - --------------------*/ - -.ui.placeholder.segment { - display: flex; - flex-direction: column; - justify-content: center; - align-items: stretch; - max-width: initial; - animation: none; - overflow: visible; - padding: 1em 1em; - min-height: 18rem; - background: #F9FAFB; - border-color: rgba(34, 36, 38, 0.15); - box-shadow: 0 2px 25px 0 rgba(34, 36, 38, 0.05) inset; -} - -.ui.placeholder.segment .button, -.ui.placeholder.segment textarea { - display: block; -} - -.ui.placeholder.segment .field, -.ui.placeholder.segment textarea, -.ui.placeholder.segment > .ui.input, -.ui.placeholder.segment .button { - max-width: 15rem; - margin-left: auto; - margin-right: auto; -} - -.ui.placeholder.segment .column .button, -.ui.placeholder.segment .column .field, -.ui.placeholder.segment .column textarea, -.ui.placeholder.segment .column > .ui.input { - max-width: 15rem; - margin-left: auto; - margin-right: auto; -} - -.ui.placeholder.segment > .inline { - align-self: center; -} - -.ui.placeholder.segment > .inline > .button { - display: inline-block; - width: auto; - margin: 0 0.35714286rem 0 0; -} - -.ui.placeholder.segment > .inline > .button:last-child { - margin-right: 0; -} - -/*------------------- - Padded - --------------------*/ - -.ui.padded.segment { - padding: 1.5em; -} - -.ui[class*="very padded"].segment { - padding: 3em; -} - -/* Padded vertical */ - -.ui.padded.segment.vertical.segment, -.ui[class*="very padded"].vertical.segment { - padding-left: 0; - padding-right: 0; -} - -/*------------------- - Compact - --------------------*/ - -.ui.compact.segment { - display: table; -} - -/* Compact Group */ - -.ui.compact.segments { - display: inline-flex; -} - -.ui.compact.segments .segment, -.ui.segments .compact.segment { - display: block; - flex: 0 1 auto; -} - -/*------------------- - Circular - --------------------*/ - -.ui.circular.segment { - display: table-cell; - padding: 2em; - text-align: center; - vertical-align: middle; - border-radius: 500em; -} - -/*------------------- - Raised - --------------------*/ - -.ui.raised.raised.segments, -.ui.raised.raised.segment { - box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15); -} - -/******************************* - Groups - *******************************/ - -/* Group */ - -.ui.segments { - flex-direction: column; - position: relative; - margin: 1rem 0; - border: 1px solid rgba(34, 36, 38, 0.15); - box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15); - border-radius: 0.28571429rem; -} - -.ui.segments:first-child { - margin-top: 0; -} - -.ui.segments:last-child { - margin-bottom: 0; -} - -/* Nested Segment */ - -.ui.segments > .segment { - top: 0; - bottom: 0; - border-radius: 0; - margin: 0; - width: auto; - box-shadow: none; - border: none; - border-top: 1px solid rgba(34, 36, 38, 0.15); -} - -.ui.segments:not(.horizontal) > .segment:first-child { - top: 0; - bottom: 0; - border-top: none; - margin-top: 0; - margin-bottom: 0; - border-radius: 0.28571429rem 0.28571429rem 0 0; -} - -/* Bottom */ - -.ui.segments:not(.horizontal) > .segment:last-child { - top: 0; - bottom: 0; - margin-top: 0; - margin-bottom: 0; - box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), none; - border-radius: 0 0 0.28571429rem 0.28571429rem; -} - -/* Only */ - -.ui.segments:not(.horizontal) > .segment:only-child { - border-radius: 0.28571429rem; -} - -/* Nested Group */ - -.ui.segments > .ui.segments { - border-top: 1px solid rgba(34, 36, 38, 0.15); - margin: 1rem 1rem; -} - -.ui.segments > .segments:first-child { - border-top: none; -} - -.ui.segments > .segment + .segments:not(.horizontal) { - margin-top: 0; -} - -/* Horizontal Group */ - -.ui.horizontal.segments { - display: flex; - flex-direction: row; - background-color: transparent; - padding: 0; - box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15); - margin: 1rem 0; - border-radius: 0.28571429rem; - border: 1px solid rgba(34, 36, 38, 0.15); -} - -.ui.stackable.horizontal.segments { - flex-wrap: wrap; -} - -/* Nested Horizontal Group */ - -.ui.segments > .horizontal.segments { - margin: 0; - background-color: transparent; - border-radius: 0; - border: none; - box-shadow: none; - border-top: 1px solid rgba(34, 36, 38, 0.15); -} - -/* Horizontal Segment */ - -.ui.horizontal.segments:not(.compact) > .segment:not(.compact) { - flex: 1 1 auto; - -ms-flex: 1 1 0; - /* Solves #2550 MS Flex */ -} - -.ui.horizontal.segments > .segment { - margin: 0; - min-width: 0; - border-radius: 0; - border: none; - box-shadow: none; - border-left: 1px solid rgba(34, 36, 38, 0.15); -} - -/* Border Fixes */ - -.ui.segments > .horizontal.segments:first-child { - border-top: none; -} - -.ui.horizontal.segments:not(.stackable) > .segment:first-child { - border-left: none; -} - -.ui.horizontal.segments > .segment:first-child { - border-radius: 0.28571429rem 0 0 0.28571429rem; -} - -.ui.horizontal.segments > .segment:last-child { - border-radius: 0 0.28571429rem 0.28571429rem 0; -} - -/******************************* - States -*******************************/ - -/*-------------- - Disabled - ---------------*/ - -.ui.disabled.segment { - opacity: var(--opacity-disabled); - color: rgba(40, 40, 40, 0.3); -} - -/*-------------- - Loading - ---------------*/ - -.ui.loading.segment { - position: relative; - cursor: default; - pointer-events: none; - text-shadow: none !important; - transition: all 0s linear; -} - -.ui.loading.segment:before { - position: absolute; - content: ''; - top: 0; - left: 0; - background: rgba(255, 255, 255, 0.8); - width: 100%; - height: 100%; - border-radius: 0.28571429rem; - z-index: 100; -} - -.ui.loading.segment:after { - position: absolute; - content: ''; - top: 50%; - left: 50%; - margin: -1.5em 0 0 -1.5em; - width: 3em; - height: 3em; - animation: loader 0.6s infinite linear; - border: 0.2em solid #767676; - border-radius: 500rem; - box-shadow: 0 0 0 1px transparent; - visibility: visible; - z-index: 101; -} - -/******************************* - Variations -*******************************/ - -/*------------------- - Basic - --------------------*/ - -.ui.basic.segment, -.ui.segments .ui.basic.segment, -.ui.basic.segments { - background: none transparent; - box-shadow: none; - border: none; - border-radius: 0; -} - -/*------------------- - Clearing - --------------------*/ - -.ui.clearing.segment:after { - content: ""; - display: block; - clear: both; -} - -/*------------------- - Colors ---------------------*/ - -.ui.red.segment.segment.segment.segment.segment:not(.inverted) { - border-top: 2px solid #DB2828; -} - -.ui.orange.segment.segment.segment.segment.segment:not(.inverted) { - border-top: 2px solid #F2711C; -} - -.ui.yellow.segment.segment.segment.segment.segment:not(.inverted) { - border-top: 2px solid #FBBD08; -} - -.ui.olive.segment.segment.segment.segment.segment:not(.inverted) { - border-top: 2px solid #B5CC18; -} - -.ui.green.segment.segment.segment.segment.segment:not(.inverted) { - border-top: 2px solid #21BA45; -} - -.ui.teal.segment.segment.segment.segment.segment:not(.inverted) { - border-top: 2px solid #00B5AD; -} - -.ui.blue.segment.segment.segment.segment.segment:not(.inverted) { - border-top: 2px solid #2185D0; -} - -.ui.violet.segment.segment.segment.segment.segment:not(.inverted) { - border-top: 2px solid #6435C9; -} - -.ui.purple.segment.segment.segment.segment.segment:not(.inverted) { - border-top: 2px solid #A333C8; -} - -.ui.pink.segment.segment.segment.segment.segment:not(.inverted) { - border-top: 2px solid #E03997; -} - -.ui.brown.segment.segment.segment.segment.segment:not(.inverted) { - border-top: 2px solid #A5673F; -} - -.ui.grey.segment.segment.segment.segment.segment:not(.inverted) { - border-top: 2px solid #767676; -} - -.ui.black.segment.segment.segment.segment.segment:not(.inverted) { - border-top: 2px solid #1B1C1D; -} - -/*------------------- - Aligned - --------------------*/ - -.ui[class*="left aligned"].segment { - text-align: left; -} - -.ui[class*="right aligned"].segment { - text-align: right; -} - -.ui[class*="center aligned"].segment { - text-align: center; -} - -/*------------------- - Floated - --------------------*/ - -.ui.floated.segment, -.ui[class*="left floated"].segment { - float: left; - margin-right: 1em; -} - -.ui[class*="right floated"].segment { - float: right; - margin-left: 1em; -} - -/*------------------- - Emphasis ---------------------*/ - -/* Secondary */ - -.ui.secondary.segment { - background: #F3F4F5; - color: rgba(0, 0, 0, 0.6); -} - -/* Tertiary */ - -.ui.tertiary.segment { - background: #DCDDDE; - color: rgba(0, 0, 0, 0.6); -} - -/*------------------- - Attached - --------------------*/ - -/* Middle */ - -.ui.attached.segment { - top: 0; - bottom: 0; - border-radius: 0; - margin: 0 -1px; - width: calc(100% + 2px); - max-width: calc(100% + 2px); - box-shadow: none; - border: 1px solid #D4D4D5; -} - -.ui.attached:not(.message) + .ui.attached.segment:not(.top) { - border-top: none; -} - -/* Top */ - -.ui[class*="top attached"].segment { - bottom: 0; - margin-bottom: 0; - top: 0; - margin-top: 1rem; - border-radius: 0.28571429rem 0.28571429rem 0 0; -} - -.ui.segment[class*="top attached"]:first-child { - margin-top: 0; -} - -/* Bottom */ - -.ui.segment[class*="bottom attached"] { - bottom: 0; - margin-top: 0; - top: 0; - margin-bottom: 1rem; - box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), none; - border-radius: 0 0 0.28571429rem 0.28571429rem; -} - -.ui.segment[class*="bottom attached"]:last-child { - margin-bottom: 1rem; -} - -/*-------------- - Fitted - ---------------*/ - -.ui.fitted.segment:not(.horizontally) { - padding-top: 0; - padding-bottom: 0; -} - -.ui.fitted.segment:not(.vertically) { - padding-left: 0; - padding-right: 0; -} - -/*------------------- - Size ---------------------*/ - -.ui.segments .segment, -.ui.segment { - font-size: 1rem; -} - -.ui.mini.segments .segment, -.ui.mini.segment { - font-size: 0.78571429rem; -} - -.ui.tiny.segments .segment, -.ui.tiny.segment { - font-size: 0.85714286rem; -} - -.ui.small.segments .segment, -.ui.small.segment { - font-size: 0.92857143rem; -} - -.ui.large.segments .segment, -.ui.large.segment { - font-size: 1.14285714rem; -} - -.ui.big.segments .segment, -.ui.big.segment { - font-size: 1.28571429rem; -} - -.ui.huge.segments .segment, -.ui.huge.segment { - font-size: 1.42857143rem; -} - -.ui.massive.segments .segment, -.ui.massive.segment { - font-size: 1.71428571rem; -} - -/******************************* - Theme Overrides -*******************************/ - /******************************* Site Overrides *******************************/ diff --git a/web_src/fomantic/semantic.json b/web_src/fomantic/semantic.json index 9c7cb54cb7ae3..3c9a87c9d705b 100644 --- a/web_src/fomantic/semantic.json +++ b/web_src/fomantic/semantic.json @@ -33,7 +33,6 @@ "menu", "modal", "search", - "segment", "tab", "table" ]