Styles
The azure-devops-ui package includes some SCSS files that can be referenced by extensions in order to achieve the same styles used by Azure DevOps.
How to consume
Add an SCSS file to your project with the following import at the top of the file:
@import "node_modules/azure-devops-ui/Core/_platformCommon.scss";
Reference the pre-defined variables (list below) in your CSS like this:
.sample-hub {
font-size: $fontSizeM;
}
Contents
Core Styles
alignment
.v-align-middle
vertical-align: middle
border
.separator-line-top
separator line above the element
.separator-line-bottom
separator line below the element
.subtle-border
subtle border around the element
cursor
.cursor-default
cursor: default
.cursor-pointer
cursor: pointer
depth
.depth-0
No box-shadow
.depth-4
4px box-shadow
.depth-8
8px box-shadow
.depth-16
16px box-shadow
.depth-64
64px box-shadow
flex-box
.flex-column
display: flex and flex-direction: column
.flex-row
display: flex and flex-direction: row
.inline-flex-column
display: inline-flex and flex-direction: column
.inline-flex-row
display: inline-flex and flex-direction: row
.flex-center
align-items: center
.flex-end
align-items: flex-end
.flex-start
align-items: flex-start
.flex-stretch
align-items: stretch
.flex-baseline
align-items: baseline
.justify-start
justify-content: flex-start
.justify-center
justify-content: center
.justify-end
justify-content: flex-end
.justify-space-between
justify-content: space-between
.flex-wrap
flex-wrap: wrap
.flex-cell
Makes an element a row-based flex box, with items aligned center and no margin/padding.
flex-item
.flex-grow
flex-grow: 1
.flex-noshrink
flex-shrink: 0
.flex-self-center
align-self: center
.flex-self-end
align-self: flex-end
.flex-self-start
align-self: flex-start
.flex-self-stretch
align-self: stretch
font-size
.font-size-xxs
font-size: 9px
.font-size-xs
font-size: 10px
.font-size-s
font-size: 11px
.font-size
font-size: 12px
.font-size-ms
font-size: 13px
.font-size-m
font-size: 14px
.font-size-mm
font-size: 15px
.font-size-ml
font-size: 16px
.font-size-l
font-size: 18px
.font-size-ll
font-size: 24px
.font-size-lll
font-size: 28px
.font-size-xl
font-size: 36px
.font-size-xxl
font-size: 40px
.font-size-xxxl
font-size: 56px
.font-size-xxxxl
font-size: 72px
font-weight
.font-weight-light
font-weight: 200
.font-weight-normal
font-weight: normal
.font-weight-semibold
font-weight: 600
.font-weight-heavy
font-weight: bold
icon
.icon-margin
6px margin-right, separates icon and text
.icon-large-margin
12px margin-right, separates icon and text
layer
.sub-layer
Indicates another layer should be used (z-index: 10)
layout
.absolute-fill
Makes an element absolutely positioned and fill the entire space.
.absolute
position: absolute
.relative
position: relative
.no-events
pointer-events: none
link
.link-icon
2px padding used for icons within a link.
.link-text
2px vertical padding used for text within a link.
margin
.margin-0, .no-margin
Removes all margin from an element. Not intended to be used as the default, only to override defaults
.margin-4
Adds 4px of margin to all sides of the element
.margin-8
Adds 8px of margin to all sides of the element
.margin-16
Adds 16px of margin to all sides of the element
.margin-bottom-4
Adds 4px of margin to the bottom leaving the other sides unaffected
.margin-bottom-8
Adds 8px of margin to the bottom leaving the other sides unaffected
.margin-bottom-16
Adds 16px of margin to the bottom leaving the other sides unaffected
.margin-horizontal-0, .no-h-margin
Removes all horizontal margin from an element. Not intended to be used as the default, only to override defaults
.margin-horizontal-4
Adds 4px of margin to the left and right leaving the other sides unaffected
.margin-horizontal-8
Adds 8px of margin to the left and right leaving the other sides unaffected
.margin-horizontal-16
Adds 16px of margin to the left and right leaving the other sides unaffected
.margin-horizontal-20
Adds 20px of margin to the left and right leaving the other sides unaffected
.margin-left-4
Adds 4px of margin to the left leaving the other sides unaffected
.margin-left-8
Adds 8px of margin to the left leaving the other sides unaffected
.margin-left-16
Adds 16px of margin to the left leaving the other sides unaffected
.margin-right-4
Adds 4px of margin to the right leaving the other sides unaffected
.margin-right-8
Adds 8px of margin to the right leaving the other sides unaffected
.margin-right-16
Adds 16px of margin to the right leaving the other sides unaffected
.margin-top-4
Adds 4px of margin to the top leaving the other sides unaffected
.margin-top-8
Adds 8px of margin to the top leaving the other sides unaffected
.margin-top-16
Adds 16px of margin to the top leaving the other sides unaffected
.margin-vertical-0, .no-v-margin
Removes all vertical margin from an element. Not intended to be used as the default, only to override defaults
.margin-vertical-4
Adds 4px of margin to the top and bottom leaving the other sides unaffected
.margin-vertical-8
Adds 8px of margin to the top and bottom leaving the other sides unaffected
.margin-vertical-16
Adds 16px of margin to the top and bottom leaving the other sides unaffected
.margin-vertical-20
Adds 20px of margin to the top and bottom leaving the other sides unaffected
overflow
.scroll-hidden
overflow: hidden
.v-scroll-hidden
overflow-y: hidden
.h-scroll-hidden
overflow-x: hidden
.scroll-auto
overflow: auto
.v-scroll-auto
overflow-y: auto
.h-scroll-auto
overflow-x: auto
.full-height
height: 100%
.full-size
Makes an element a row-based flex-box, flex-grow: 1, and overflow: hidden.
.full-width
width: 100%
padding
.shadow-padding
Adds 4px of negative margin and 4 px of (positive) padding to offset it. This results in no visual padding, but allows shadows (e.g. from focus rects, Cards) to display outside of their boundary.
.padding-0, .no-padding
Removes all padding from an element. Not intended to be used as the default, only to override defaults
.padding-4
Adds 4px of padding to all sides of the element
.padding-8
Adds 8px of padding to all sides of the element
.padding-16
Adds 16px of padding to all sides of the element
.padding-bottom-0, .no-bottom-padding
Removes bottom padding from an element. Not intended to be used as the default, only to override defaults
.padding-bottom-4
Adds 4px of padding to the bottom leaving the other sides unaffected
.padding-bottom-8
Adds 8px of padding to the bottom leaving the other sides unaffected
.padding-bottom-16
Adds 16px of padding to the bottom leaving the other sides unaffected
.padding-horizontal-0, .no-h-padding
Removes all horizontal padding from an element. Not intended to be used as the default, only to override defaults
.padding-horizontal-4
Adds 4px of padding to the left and right leaving the other sides unaffected
.padding-horizontal-8
Adds 8px of padding to the left and right leaving the other sides unaffected
.padding-horizontal-16
Adds 16px of padding to the left and right leaving the other sides unaffected
.padding-horizontal-20
Adds 20px of padding to the left and right leaving the other sides unaffected
.padding-left-4
Adds 4px of padding to the left leaving the other sides unaffected
.padding-left-8
Adds 8px of padding to the left leaving the other sides unaffected
.padding-left-16
Adds 16px of padding to the left leaving the other sides unaffected
.padding-right-4
Adds 4px of padding to the right leaving the other sides unaffected
.padding-right-8
Adds 8px of padding to the right leaving the other sides unaffected
.padding-right-16
Adds 16px of padding to the right leaving the other sides unaffected
.padding-top-0, .no-top-padding
Removes top padding from an element. Not intended to be used as the default, only to override defaults
.padding-top-4
Adds 4px of padding to the top leaving the other sides unaffected
.padding-top-8
Adds 8px of padding to the top leaving the other sides unaffected
.padding-top-16
Adds 16px of padding to the top leaving the other sides unaffected
.padding-vertical-0, .no-v-padding
Removes all vertical padding from an element. Not intended to be used as the default, only to override defaults
.padding-vertical-4
Adds 4px of padding to the top and bottom leaving the other sides unaffected
.padding-vertical-8
Adds 8px of padding to the top and bottom leaving the other sides unaffected
.padding-vertical-16
Adds 16px of padding to the top and bottom leaving the other sides unaffected
.padding-vertical-20
Adds 20px of padding to the top and bottom leaving the other sides unaffected
rhythm
.rhythm-horizontal-4
Spaces children by 4px using left-margin
.rhythm-horizontal-8
Spaces children by 8px using left-margin
.rhythm-horizontal-16
Spaces children by 16px using left-margin
.rhythm-vertical-4
Spaces children by 4px using top-margin
.rhythm-vertical-8
Spaces children by 8px using top-margin
.rhythm-vertical-16
Spaces children by 16px using top-margin
.rhythm-vertical-20
Spaces children by 20px using top-margin
.rhythm-vertical-24
Spaces children by 24px using top-margin
.rhythm-vertical-32
Spaces children by 32px using top-margin
scrollbar
.custom-scrollbar
Overrides the default scrollbar with a custom one. Only works in browsers supporting webkit-scrollbar or scrollbar-color/width.
shimmer
.shimmer
Sets up a basic animation intended to mock the data shape being loaded with a small shimmer effect.
.shimmer-line
This shimmer-line style will use a wide animation and provide proportional corners to look like a line.
.shimmer-circle-small
This shimmer-circle-small style will use a circular element with a thin animation, this is used for small prefixes.
.shimmer-circle-large
This shimmer-circle-large style will use a circular element with a thin animation, this is used for large prefixes.
spacing
$spacingBorder
1px
1px
$spacingFocusRect
3px
3px
$spacing-4
4px
spacing-XXS
$spacing-8
8px
spacing-XS
$spacing-12
12px
spacing-S
$spacing-16
16px
spacing-M
$spacing-20
20px
spacing-L
$spacing-24
24px
$spacing-32
32px
spacing-XL
$spacing-40
40px
spacing-XXL
text
.text-ellipsis
Apply to an element to make its text ellipsis (a parent must have overflow hidden)
.text-left
text-align: left
.text-center
text-align: center
.text-right
text-align: right
.white-space-nowrap
white-space: nowrap;
.word-break
Ensure text wraps even when there are no appropriate break characters.
.selectable-text
Apply to an element t make the text within it selectable.
typography
$fontFamily
"Segoe UI", "-apple-system", BlinkMacSystemFont, Roboto, "Helvetica Neue", Helvetica, Ubuntu, Arial, sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol"
Default (Segoe UI) font family
$fontFamilyMonospace
Menlo, Consolas, Courier New, monospace
Fixed-width (code) font family
$fontWeightHeavy
bold
Heavy (bold) font weight
$fontWeightNormal
normal
Normal font weight
$fontWeightLighter
200
Light (200) font weight
$fontWeightSemiBold
600
Semi-bold (600) font weight
.title-l
Bold, 28px
.title-m
Semibold, 21px
.title-s
Semibold, 17px
.title-xs
Semibold, 15px
.body-xl
17px font, with 24px line height
.body-l
15px font, with 20x line height
.body-m
14px font, with 20px line height
.body-s
12px font, with 16px line height
.body-xs
10px font, with 16px line height
.monospaced-m
13px monospaced font with 20px line height
.monospaced-s
12px monospaced font with 20px line height
.monospaced-xs
12px monospaced font with 16px line height
.secondary-text
Uses the secondary text color (theme-dependent)
.monospaced-text
Uses a monospaced font family (Menlo, Consolas, Courier New, monospace)
.error-text
Uses the error text color
visibility
.hidden
display: none
.invisible
visibility: hidden
.rotate-180
rotate 180 degrees
Colors
communication
$communication-shade-30
rgba(0, 69, 120)
Communication shaded-30 (darkened)
$communication-shade-20
rgba(0, 90, 158)
Communication shaded-20 (darkened)
$communication-shade-10
rgba(16, 110, 190)
Communication shaded-10 (darkened)
$communication-foreground
rgba(0, 90, 158, 1)
Primary communication for foreground (text)
$communication-background
rgba(0, 120, 212, 1)
Primary communication for background
$communication-tint-10
rgba(43, 136, 216)
Communication tinted-10 (lightened)
$communication-tint-20
rgba(199, 224, 244)
Communication tinted-20 (lightened)
$communication-tint-30
rgba(222, 236, 249)
Communication tinted-30 (lightened)
$communication-tint-40
rgba(239, 246, 252)
Communication tinted-40 (lightened)
$communication-background-active
rgba(0, 91, 161)
Communication background active color
$communication-background-hover
rgba(0, 103, 181)
Communication background hover color
neutral-alphas
$neutral-alpha-80
rgba(0, 0, 0, 0.80)
80% black
$neutral-alpha-70
rgba(0, 0, 0, 0.70)
70% black
$neutral-alpha-60
rgba(0, 0, 0, 0.60)
60% black
$neutral-alpha-30
rgba(0, 0, 0, 0.30)
30% black
$neutral-alpha-20
rgba(0, 0, 0, 0.20)
20% black
$neutral-alpha-10
rgba(0, 0, 0, 0.10)
10% black
$neutral-alpha-8
rgba(0, 0, 0, 0.08)
8% black
$neutral-alpha-6
rgba(0, 0, 0, 0.06)
6% black
$neutral-alpha-4
rgba(0, 0, 0, 0.04)
4% black
$neutral-alpha-2
rgba(0, 0, 0, 0.02)
2% black
neutrals
$black
rgba(0, 0, 0)
Neutral-100 (black)
$neutral-80
rgba(51, 51, 51)
Neutral-80
$neutral-70
rgba(76, 76, 76)
Neutral-70
$neutral-60
rgba(102, 102, 102)
Neutral-60
$neutral-30
rgba(166, 166, 166)
Neutral-30
$neutral-20
rgba(200, 200, 200)
Neutral-20
$neutral-10
rgba(218, 218, 218)
Neutral-10
$neutral-8
rgba(234, 234, 234)
Neutral-8
$neutral-6
rgba(239, 239, 239)
Neutral-6
$neutral-4
rgba(244, 244, 244)
Neutral-4
$neutral-2
rgba(248, 248, 248)
Neutral-2
$neutral-0
rgba(255, 255, 255)
Neutral-0 (white)
status
$status-info-foreground
rgba(0, 120, 212, 1)
Info foreground color
$status-info-background
rgba(0, 120, 212, 1)
Info background color
$status-error-foreground
rgba(205, 74, 69, 1)
Error foreground color
$status-error-background
rgba(249, 235, 235, 1)
Error background color
$status-error-text
rgba(218, 10, 0, 1)
Error text color
$status-success-foreground
rgba(16, 124, 16, 1)
Success foreground color
$status-success-background
rgba(223, 246, 221, 1)
Success background color
$status-success-text
rgba(127, 184, 0, 1)
Success text color
$status-warning-icon-foreground
rgba(177, 133, 37, 1)
Warning foreground icon color
$status-warning-foreground
rgba(214, 127, 60, 1)
Warning foreground color
$status-warning-background
rgba(251, 242, 236, 1)
Warning background color
$status-warning-text
rgba(184, 94, 6, 1)
Warning text color
text-color
$backgroundColor
rgba(255, 255, 255, 1)
Main background color
$primary-text
rgba(0, 0, 0, .9)
Main text (foreground) color
$secondary-text
rgba(0, 0, 0, .55)
Secondary text color
$disabled-text
rgba(0, 0, 0, .38)
Disabled text color
$disabled-text-invert
rgba(255, 255, 255, 0.38)
Disabled text color inverse
$text-on-communication-background
rgba(255, 255, 255, 1)
Text color to use on communication (colored) backgrounds. This is always a light color independent of light/dark theme.