mirror of https://github.com/go-gitea/gitea
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).pull/30016/head^2
silverwind
11 months ago
committed by
GitHub
parent
68ec9b4859
commit
8d93cea296
@ -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; |
||||
} |
||||
Loading…
Reference in new issue