@charset "UTF-8"; /* * Copyright 2017 Palantir Technologies, Inc. All rights reserved. */ /*! Copyright 2015-present Palantir Technologies, Inc. All rights reserved. Licensed under the Apache License, Version 2.0. */ html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } body { text-transform: none; line-height: 1.28581; letter-spacing: 0; font-size: 14px; font-weight: 400; color: #182026; font-family: "Lato", sans-serif; } p { margin-top: 0; margin-bottom: 10px; } small { font-size: 12px; } strong { font-weight: 600; } ::selection { background: rgba(125, 188, 255, 0.6); } /* * Copyright 2017 Palantir Technologies, Inc. All rights reserved. */ /* * Copyright 2017 Palantir Technologies, Inc. All rights reserved. */ /* * Copyright 2017 Palantir Technologies, Inc. All rights reserved. */ /* Headings Markup:

H1 heading

H2 heading

H3 heading

H4 heading

H5 heading

H6 heading

Styleguide headings */ .bp3-heading { color: #182026; font-weight: 600; margin: 0 0 10px; padding: 0; } .bp3-dark .bp3-heading { color: #f5f8fa; } h1.bp3-heading, .bp3-running-text h1 { line-height: 40px; font-size: 36px; } h2.bp3-heading, .bp3-running-text h2 { line-height: 32px; font-size: 28px; } h3.bp3-heading, .bp3-running-text h3 { line-height: 25px; font-size: 22px; } h4.bp3-heading, .bp3-running-text h4 { line-height: 21px; font-size: 18px; } h5.bp3-heading, .bp3-running-text h5 { line-height: 19px; font-size: 16px; } h6.bp3-heading, .bp3-running-text h6 { line-height: 16px; font-size: 14px; } /* UI text Markup:

More than a decade ago, we set out to create products that would transform the way organizations use their data. Today, our products are deployed at the most critical government, commercial, and non-profit institutions in the world to solve problems we hadn’t even dreamed of back then.

.bp3-ui-text - Default Blueprint font styles, applied to the `` tag and available as a class for nested resets. .bp3-monospace-text - Use a monospace font (ideal for code). .bp3-running-text - Increase line height ideal for longform text. See [Running text](#core/typography.running-text) below for additional features. .bp3-text-large - Use a larger font size. .bp3-text-small - Use a smaller font size. .bp3-text-muted - Change text color to a gentler gray. .bp3-text-disabled - Change text color to a transparent, faded gray. .bp3-text-overflow-ellipsis - Truncate a single line of text with an ellipsis if it overflows its container. Styleguide ui-text */ .bp3-ui-text { text-transform: none; line-height: 1.28581; letter-spacing: 0; font-size: 14px; font-weight: 400; } .bp3-monospace-text { text-transform: none; font-family: monospace; } .bp3-text-muted { color: #5c7080; } .bp3-dark .bp3-text-muted { color: #bfccd6; } .bp3-text-disabled { color: rgba(92, 112, 128, 0.5); } .bp3-dark .bp3-text-disabled { color: rgba(191, 204, 214, 0.5); } .bp3-text-overflow-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; } /* Running text Markup:

We build products that make people better at their most important work — the kind of work you read about on the front page of the newspaper, not just the technology section.

Item the first.
Item the second.
Item the third.

Scale, Speed, Agility

A successful data transformation requires the whole organization — users, the IT shop, and leadership — to operate in lockstep. With Foundry, the enterprise comes together to transform the organization and turn data into a competitive advantage.

.bp3-text-large - Use larger font size. Styleguide running-text */ .bp3-running-text { line-height: 1.5; font-size: 14px; } .bp3-running-text h1 { color: #182026; font-weight: 600; margin-top: 40px; margin-bottom: 20px; } .bp3-dark .bp3-running-text h1 { color: #f5f8fa; } .bp3-running-text h2 { color: #182026; font-weight: 600; margin-top: 40px; margin-bottom: 20px; } .bp3-dark .bp3-running-text h2 { color: #f5f8fa; } .bp3-running-text h3 { color: #182026; font-weight: 600; margin-top: 40px; margin-bottom: 20px; } .bp3-dark .bp3-running-text h3 { color: #f5f8fa; } .bp3-running-text h4 { color: #182026; font-weight: 600; margin-top: 40px; margin-bottom: 20px; } .bp3-dark .bp3-running-text h4 { color: #f5f8fa; } .bp3-running-text h5 { color: #182026; font-weight: 600; margin-top: 40px; margin-bottom: 20px; } .bp3-dark .bp3-running-text h5 { color: #f5f8fa; } .bp3-running-text h6 { color: #182026; font-weight: 600; margin-top: 40px; margin-bottom: 20px; } .bp3-dark .bp3-running-text h6 { color: #f5f8fa; } .bp3-running-text hr { margin: 20px 0; border: none; border-bottom: 1px solid rgba(16, 22, 26, 0.15); } .bp3-dark .bp3-running-text hr { border-color: rgba(255, 255, 255, 0.15); } .bp3-running-text p { margin: 0 0 10px; padding: 0; } .bp3-text-large { font-size: 16px; } .bp3-text-small { font-size: 12px; } /* Links Simply use an `` tag as you normally would. No class is necessary for Blueprint styles. Links are underlined only when hovered. Putting an icon inside a link will cause it to inherit the link's text color. Styleguide typography.links */ a { text-decoration: none; color: #106ba3; } a:hover { cursor: pointer; text-decoration: underline; color: #106ba3; } a .bp3-icon, a .bp3-icon-standard, a .bp3-icon-large { color: inherit; } a code, .bp3-dark a code { color: inherit; } .bp3-dark a, .bp3-dark a:hover { color: #48aff0; } .bp3-dark a .bp3-icon, .bp3-dark a .bp3-icon-standard, .bp3-dark a .bp3-icon-large, .bp3-dark a:hover .bp3-icon, .bp3-dark a:hover .bp3-icon-standard, .bp3-dark a:hover .bp3-icon-large { color: inherit; } /* Preformatted text Markup:

Use the <code> tag for snippets of code.

Use the <pre> tag for blocks of code.

// code sample
export function hasModifier(
  modifiers: ts.ModifiersArray,
  ...modifierKinds: ts.SyntaxKind[],
) {
  if (modifiers == null || modifierKinds == null) {
    return false;
  }
  return modifiers.some(m => modifierKinds.some(k => m.kind === k));
}

Premium Aerotec is a key supplier for Airbus, producing 30 million parts per year, which is huge complexity. Skywise helps us manage all the production steps. It gives Airbus much better visibility into where the product is in the supply chain, and it lets us immediately see our weak points so we can react on the spot.

Styleguide blockquote */ .bp3-running-text blockquote, .bp3-blockquote { margin: 0 0 10px; border-left: solid 4px rgba(167, 182, 194, 0.5); padding: 0 20px; } .bp3-dark .bp3-running-text blockquote, .bp3-running-text .bp3-dark blockquote, .bp3-dark .bp3-blockquote { border-color: rgba(115, 134, 148, 0.5); } /* Lists Markup:

Item the first
Item the second
Item the third
- Item the fourth
- Item the fifth

.bp3-list - Add a little spacing between items for readability. .bp3-list-unstyled - Remove all list styling (including indicators) so you can add your own. Styleguide lists */ .bp3-running-text ul, .bp3-running-text ol, .bp3-list { margin: 10px 0; padding-left: 30px; } .bp3-running-text ul li:not(:last-child), .bp3-running-text ol li:not(:last-child), .bp3-list li:not(:last-child) { margin-bottom: 5px; } .bp3-running-text ul ol, .bp3-running-text ol ol, .bp3-list ol, .bp3-running-text ul ul, .bp3-running-text ol ul, .bp3-list ul { margin-top: 5px; } .bp3-list-unstyled { margin: 0; padding: 0; list-style: none; } .bp3-list-unstyled li { padding: 0; } /* Right-to-left text Markup:

Arabic:

لكل لأداء بمحاولة من. مدينة الواقعة يبق أي, وإعلان وقوعها، حول كل, حدى عجّل مشروط الخاسرة قد. من الذود تكبّد بين, و لها واحدة الأراضي. عل الصفحة والروسية يتم, أي للحكومة استعملت شيء. أم وصل زهاء اليا

Hebrew:

כדי על עזרה יידיש הבהרה, מלא באגים טכניים דת. תנך או ברית ביולי. כתב בה הטבע למנוע, דת כלים פיסיקה החופשית זכר. מתן החלל מאמרשיחהצפה ב. הספרות אנציקלופדיה אם זכר, על שימושי שימושיים תאולוגיה עזה

Styleguide rtl */ .bp3-rtl { text-align: right; } .bp3-dark { color: #f5f8fa; } :focus { outline: rgba(19, 124, 189, 0.6) auto 2px; outline-offset: 2px; -moz-outline-radius: 6px; } .bp3-focus-disabled :focus { outline: none !important; } .bp3-focus-disabled :focus ~ .bp3-control-indicator { outline: none !important; } .bp3-alert { max-width: 400px; padding: 20px; } .bp3-alert-body { display: flex; } .bp3-alert-body .bp3-icon { margin-top: 0; margin-right: 20px; font-size: 40px; } .bp3-alert-footer { display: flex; flex-direction: row-reverse; margin-top: 10px; } .bp3-alert-footer .bp3-button { margin-left: 10px; } /* * Copyright 2017 Palantir Technologies, Inc. All rights reserved. */ /* * Copyright 2017 Palantir Technologies, Inc. All rights reserved. */ /* * Copyright 2017 Palantir Technologies, Inc. All rights reserved. */ /* Breadcrumbs Markup:

Styleguide breadcrumbs */ .bp3-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; margin: 0; cursor: default; height: 30px; padding: 0; list-style: none; } .bp3-breadcrumbs > li { display: flex; align-items: center; } .bp3-breadcrumbs > li::after { display: block; margin: 0 5px; background: svg-icon("16px/chevron-right.svg", (path: (fill: #5c7080))); width: 16px; height: 16px; content: ""; } .bp3-breadcrumbs > li:last-of-type::after { display: none; } .bp3-breadcrumb, .bp3-breadcrumb-current, .bp3-breadcrumbs-collapsed { display: inline-block; font-size: 16px; } .bp3-breadcrumb, .bp3-breadcrumbs-collapsed { color: #5c7080; } .bp3-breadcrumb:hover { text-decoration: none; } .bp3-breadcrumb.bp3-disabled { cursor: not-allowed; color: rgba(92, 112, 128, 0.5); } .bp3-breadcrumb-current { color: inherit; font-weight: 600; } .bp3-breadcrumb-current .bp3-input { vertical-align: baseline; font-size: inherit; font-weight: inherit; } .bp3-breadcrumbs-collapsed { margin-right: 2px; border: none; border-radius: 0; background: #ced9e0; cursor: pointer; padding: 1px 5px; vertical-align: text-bottom; } .bp3-breadcrumbs-collapsed::before { display: block; background: svg-icon("16px/more.svg", (circle: (fill: #5c7080))) center no-repeat; width: 16px; height: 16px; content: ""; } .bp3-breadcrumbs-collapsed:hover { background: #bfccd6; text-decoration: none; color: #182026; } .bp3-dark .bp3-breadcrumb, .bp3-dark .bp3-breadcrumbs-collapsed { color: #bfccd6; } .bp3-dark .bp3-breadcrumbs > li::after { color: #bfccd6; } .bp3-dark .bp3-breadcrumb.bp3-disabled { color: rgba(191, 204, 214, 0.5); } .bp3-dark .bp3-breadcrumb-current { color: #f5f8fa; } .bp3-dark .bp3-breadcrumbs-collapsed { background: rgba(16, 22, 26, 0.4); } .bp3-dark .bp3-breadcrumbs-collapsed:hover { background: rgba(16, 22, 26, 0.6); color: #f5f8fa; } /* CSS `border` property issues: - An element can only have one border. - Borders can't stack with shadows. - Borders modify the size of the element they're applied to. - Border positioning requires the extra `box-sizing` property. `box-shadow` doesn't have these issues, we're using it instead of `border`. */ /* Overlay shadows are used for default buttons floating on top of other elements. This way, the shadows blend with the colors beneath it. Switches and slider handles both use these variables. */ /* Button Markup: Anchor :disabled - Disabled state .bp3-active - Active appearance .bp3-disabled - Disabled appearance .bp3-intent-primary - Primary intent .bp3-intent-success - Success intent .bp3-intent-warning - Warning intent .bp3-intent-danger - Danger intent .bp3-minimal - More subtle appearance .bp3-large - Larger size .bp3-small - Smaller size .bp3-fill - Fill parent container Styleguide button */ .bp3-button { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; border: none; border-radius: 0; cursor: pointer; padding: 5px 10px; vertical-align: middle; text-align: left; font-size: 14px; min-width: 30px; min-height: 30px; } .bp3-button > * { flex-grow: 0; flex-shrink: 0; } .bp3-button > .bp3-fill { flex-grow: 1; flex-shrink: 1; } .bp3-button::before, .bp3-button > * { margin-right: 7px; } .bp3-button:empty::before, .bp3-button > :last-child { margin-right: 0; } .bp3-button:empty { padding: 0 !important; } .bp3-button:disabled, .bp3-button.bp3-disabled { cursor: not-allowed; } .bp3-button.bp3-fill { display: flex; width: 100%; } .bp3-button.bp3-align-right, .bp3-align-right .bp3-button { text-align: right; } .bp3-button:not([class*="bp3-intent-"]) { box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.2), inset 0 -1px 0 rgba(16, 22, 26, 0.1); background-color: #f5f8fa; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)); color: #182026; } .bp3-button:not([class*="bp3-intent-"]):hover { box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.2), inset 0 -1px 0 rgba(16, 22, 26, 0.1); background-clip: padding-box; background-color: #ebf1f5; } .bp3-button:not([class*="bp3-intent-"]):active, .bp3-button:not([class*="bp3-intent-"]).bp3-active { box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.2), inset 0 1px 2px rgba(16, 22, 26, 0.2); background-color: #d8e1e8; background-image: none; } .bp3-button:not([class*="bp3-intent-"]):disabled, .bp3-button:not([class*="bp3-intent-"]).bp3-disabled { outline: none; box-shadow: none; background-color: rgba(206, 217, 224, 0.5); background-image: none; cursor: not-allowed; color: rgba(92, 112, 128, 0.5); } .bp3-button:not([class*="bp3-intent-"]):disabled.bp3-active, .bp3-button:not([class*="bp3-intent-"]):disabled.bp3-active:hover, .bp3-button:not([class*="bp3-intent-"]).bp3-disabled.bp3-active, .bp3-button:not([class*="bp3-intent-"]).bp3-disabled.bp3-active:hover { background: rgba(206, 217, 224, 0.7); } .bp3-button.bp3-intent-primary { box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.4), inset 0 -1px 0 rgba(16, 22, 26, 0.2); background-color: #1bbaf2; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); color: #ffffff; } .bp3-button.bp3-intent-primary:hover, .bp3-button.bp3-intent-primary:active, .bp3-button.bp3-intent-primary.bp3-active { color: #ffffff; } .bp3-button.bp3-intent-primary:hover { box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.4), inset 0 -1px 0 rgba(16, 22, 26, 0.2); background-color: #106ba3; } .bp3-button.bp3-intent-primary:active, .bp3-button.bp3-intent-primary.bp3-active { box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.4), inset 0 1px 2px rgba(16, 22, 26, 0.2); background-color: #0e5a8a; background-image: none; } .bp3-button.bp3-intent-primary:disabled, .bp3-button.bp3-intent-primary.bp3-disabled { border-color: transparent; box-shadow: none; background-color: rgba(27, 186, 242, 0.5); background-image: none; color: rgba(255, 255, 255, 0.6); } .bp3-button.bp3-intent-success { box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.4), inset 0 -1px 0 rgba(16, 22, 26, 0.2); background-color: #0f9960; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); color: #ffffff; } .bp3-button.bp3-intent-success:hover, .bp3-button.bp3-intent-success:active, .bp3-button.bp3-intent-success.bp3-active { color: #ffffff; } .bp3-button.bp3-intent-success:hover { box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.4), inset 0 -1px 0 rgba(16, 22, 26, 0.2); background-color: #0d8050; } .bp3-button.bp3-intent-success:active, .bp3-button.bp3-intent-success.bp3-active { box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.4), inset 0 1px 2px rgba(16, 22, 26, 0.2); background-color: #0a6640; background-image: none; } .bp3-button.bp3-intent-success:disabled, .bp3-button.bp3-intent-success.bp3-disabled { border-color: transparent; box-shadow: none; background-color: rgba(15, 153, 96, 0.5); background-image: none; color: rgba(255, 255, 255, 0.6); } .bp3-button.bp3-intent-warning { box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.4), inset 0 -1px 0 rgba(16, 22, 26, 0.2); background-color: #d9822b; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); color: #ffffff; } .bp3-button.bp3-intent-warning:hover, .bp3-button.bp3-intent-warning:active, .bp3-button.bp3-intent-warning.bp3-active { color: #ffffff; } .bp3-button.bp3-intent-warning:hover { box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.4), inset 0 -1px 0 rgba(16, 22, 26, 0.2); background-color: #bf7326; } .bp3-button.bp3-intent-warning:active, .bp3-button.bp3-intent-warning.bp3-active { box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.4), inset 0 1px 2px rgba(16, 22, 26, 0.2); background-color: #a66321; background-image: none; } .bp3-button.bp3-intent-warning:disabled, .bp3-button.bp3-intent-warning.bp3-disabled { border-color: transparent; box-shadow: none; background-color: rgba(217, 130, 43, 0.5); background-image: none; color: rgba(255, 255, 255, 0.6); } .bp3-button.bp3-intent-danger { box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.4), inset 0 -1px 0 rgba(16, 22, 26, 0.2); background-color: #db3737; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); color: #ffffff; } .bp3-button.bp3-intent-danger:hover, .bp3-button.bp3-intent-danger:active, .bp3-button.bp3-intent-danger.bp3-active { color: #ffffff; } .bp3-button.bp3-intent-danger:hover { box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.4), inset 0 -1px 0 rgba(16, 22, 26, 0.2); background-color: #c23030; } .bp3-button.bp3-intent-danger:active, .bp3-button.bp3-intent-danger.bp3-active { box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.4), inset 0 1px 2px rgba(16, 22, 26, 0.2); background-color: #a82a2a; background-image: none; } .bp3-button.bp3-intent-danger:disabled, .bp3-button.bp3-intent-danger.bp3-disabled { border-color: transparent; box-shadow: none; background-color: rgba(219, 55, 55, 0.5); background-image: none; color: rgba(255, 255, 255, 0.6); } .bp3-button[class*="bp3-intent-"] .bp3-button-spinner .bp3-spinner-head { stroke: #ffffff; } .bp3-button.bp3-large, .bp3-large .bp3-button { min-width: 40px; min-height: 40px; padding: 5px 15px; font-size: 16px; } .bp3-button.bp3-large::before, .bp3-button.bp3-large > *, .bp3-large .bp3-button::before, .bp3-large .bp3-button > * { margin-right: 10px; } .bp3-button.bp3-large:empty::before, .bp3-button.bp3-large > :last-child, .bp3-large .bp3-button:empty::before, .bp3-large .bp3-button > :last-child { margin-right: 0; } .bp3-button.bp3-small, .bp3-small .bp3-button { min-width: 24px; min-height: 24px; padding: 0 7px; } .bp3-button.bp3-loading { position: relative; } .bp3-button.bp3-loading[class*="bp3-icon-"]::before { visibility: hidden; } .bp3-button.bp3-loading .bp3-button-spinner { position: absolute; margin: 0; } .bp3-button.bp3-loading > :not(.bp3-button-spinner) { visibility: hidden; } .bp3-button[class*="bp3-icon-"]::before { line-height: 1; font-family: "Icons16", sans-serif; font-size: 16px; font-weight: 400; font-style: normal; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; color: #5c7080; } .bp3-button .bp3-icon, .bp3-button .bp3-icon-standard, .bp3-button .bp3-icon-large { color: #5c7080; } .bp3-button .bp3-icon.bp3-align-right, .bp3-button .bp3-icon-standard.bp3-align-right, .bp3-button .bp3-icon-large.bp3-align-right { margin-left: 7px; } .bp3-button .bp3-icon:first-child:last-child, .bp3-button .bp3-spinner + .bp3-icon:last-child { margin: 0 -7px; } .bp3-dark .bp3-button:not([class*="bp3-intent-"]) { box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.4); background-color: #394b59; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0)); color: #f5f8fa; } .bp3-dark .bp3-button:not([class*="bp3-intent-"]):hover, .bp3-dark .bp3-button:not([class*="bp3-intent-"]):active, .bp3-dark .bp3-button:not([class*="bp3-intent-"]).bp3-active { color: #f5f8fa; } .bp3-dark .bp3-button:not([class*="bp3-intent-"]):hover { box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.4); background-color: #30404d; } .bp3-dark .bp3-button:not([class*="bp3-intent-"]):active, .bp3-dark .bp3-button:not([class*="bp3-intent-"]).bp3-active { box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.6), inset 0 1px 2px rgba(16, 22, 26, 0.2); background-color: #202b33; background-image: none; } .bp3-dark .bp3-button:not([class*="bp3-intent-"]):disabled, .bp3-dark .bp3-button:not([class*="bp3-intent-"]).bp3-disabled { box-shadow: none; background-color: rgba(57, 75, 89, 0.5); background-image: none; color: rgba(191, 204, 214, 0.5); } .bp3-dark .bp3-button:not([class*="bp3-intent-"]):disabled.bp3-active, .bp3-dark .bp3-button:not([class*="bp3-intent-"]).bp3-disabled.bp3-active { background: rgba(57, 75, 89, 0.7); } .bp3-dark .bp3-button:not([class*="bp3-intent-"]) .bp3-button-spinner .bp3-spinner-head { background: rgba(16, 22, 26, 0.5); stroke: #8a9ba8; } .bp3-dark .bp3-button:not([class*="bp3-intent-"])[class*="bp3-icon-"]::before { color: #bfccd6; } .bp3-dark .bp3-button:not([class*="bp3-intent-"]) .bp3-icon, .bp3-dark .bp3-button:not([class*="bp3-intent-"]) .bp3-icon-standard, .bp3-dark .bp3-button:not([class*="bp3-intent-"]) .bp3-icon-large { color: #bfccd6; } .bp3-dark .bp3-button[class*="bp3-intent-"] { box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.4); } .bp3-dark .bp3-button[class*="bp3-intent-"]:hover { box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.4); } .bp3-dark .bp3-button[class*="bp3-intent-"]:active, .bp3-dark .bp3-button[class*="bp3-intent-"].bp3-active { box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.4), inset 0 1px 2px rgba(16, 22, 26, 0.2); } .bp3-dark .bp3-button[class*="bp3-intent-"]:disabled, .bp3-dark .bp3-button[class*="bp3-intent-"].bp3-disabled { box-shadow: none; background-image: none; color: rgba(255, 255, 255, 0.3); } .bp3-dark .bp3-button[class*="bp3-intent-"] .bp3-button-spinner .bp3-spinner-head { stroke: #8a9ba8; } .bp3-button:disabled::before, .bp3-button:disabled .bp3-icon, .bp3-button:disabled .bp3-icon-standard, .bp3-button:disabled .bp3-icon-large, .bp3-button.bp3-disabled::before, .bp3-button.bp3-disabled .bp3-icon, .bp3-button.bp3-disabled .bp3-icon-standard, .bp3-button.bp3-disabled .bp3-icon-large, .bp3-button[class*="bp3-intent-"]::before, .bp3-button[class*="bp3-intent-"] .bp3-icon, .bp3-button[class*="bp3-intent-"] .bp3-icon-standard, .bp3-button[class*="bp3-intent-"] .bp3-icon-large { color: inherit !important; } .bp3-button.bp3-minimal { box-shadow: none; background: none; } .bp3-button.bp3-minimal:hover { box-shadow: none; background: rgba(167, 182, 194, 0.3); text-decoration: none; color: #182026; } .bp3-button.bp3-minimal:active, .bp3-button.bp3-minimal.bp3-active { box-shadow: none; background: rgba(115, 134, 148, 0.3); color: #182026; } .bp3-button.bp3-minimal:disabled, .bp3-button.bp3-minimal:disabled:hover, .bp3-button.bp3-minimal.bp3-disabled, .bp3-button.bp3-minimal.bp3-disabled:hover { background: none; cursor: not-allowed; color: rgba(92, 112, 128, 0.5); } .bp3-button.bp3-minimal:disabled.bp3-active, .bp3-button.bp3-minimal:disabled:hover.bp3-active, .bp3-button.bp3-minimal.bp3-disabled.bp3-active, .bp3-button.bp3-minimal.bp3-disabled:hover.bp3-active { background: rgba(115, 134, 148, 0.3); } .bp3-dark .bp3-button.bp3-minimal { box-shadow: none; background: none; color: inherit; } .bp3-dark .bp3-button.bp3-minimal:hover, .bp3-dark .bp3-button.bp3-minimal:active, .bp3-dark .bp3-button.bp3-minimal.bp3-active { box-shadow: none; background: none; } .bp3-dark .bp3-button.bp3-minimal:hover { background: rgba(138, 155, 168, 0.15); } .bp3-dark .bp3-button.bp3-minimal:active, .bp3-dark .bp3-button.bp3-minimal.bp3-active { background: rgba(138, 155, 168, 0.3); color: #f5f8fa; } .bp3-dark .bp3-button.bp3-minimal:disabled, .bp3-dark .bp3-button.bp3-minimal:disabled:hover, .bp3-dark .bp3-button.bp3-minimal.bp3-disabled, .bp3-dark .bp3-button.bp3-minimal.bp3-disabled:hover { background: none; cursor: not-allowed; color: rgba(191, 204, 214, 0.5); } .bp3-dark .bp3-button.bp3-minimal:disabled.bp3-active, .bp3-dark .bp3-button.bp3-minimal:disabled:hover.bp3-active, .bp3-dark .bp3-button.bp3-minimal.bp3-disabled.bp3-active, .bp3-dark .bp3-button.bp3-minimal.bp3-disabled:hover.bp3-active { background: rgba(138, 155, 168, 0.3); } .bp3-button.bp3-minimal.bp3-intent-primary { color: #106ba3; } .bp3-button.bp3-minimal.bp3-intent-primary:hover, .bp3-button.bp3-minimal.bp3-intent-primary:active, .bp3-button.bp3-minimal.bp3-intent-primary.bp3-active { box-shadow: none; background: none; color: #106ba3; } .bp3-button.bp3-minimal.bp3-intent-primary:hover { background: rgba(27, 186, 242, 0.15); color: #106ba3; } .bp3-button.bp3-minimal.bp3-intent-primary:active, .bp3-button.bp3-minimal.bp3-intent-primary.bp3-active { background: rgba(27, 186, 242, 0.3); color: #106ba3; } .bp3-button.bp3-minimal.bp3-intent-primary:disabled, .bp3-button.bp3-minimal.bp3-intent-primary.bp3-disabled { background: none; color: rgba(16, 107, 163, 0.5); } .bp3-button.bp3-minimal.bp3-intent-primary:disabled.bp3-active, .bp3-button.bp3-minimal.bp3-intent-primary.bp3-disabled.bp3-active { background: rgba(27, 186, 242, 0.3); } .bp3-button.bp3-minimal.bp3-intent-primary .bp3-button-spinner .bp3-spinner-head { stroke: #106ba3; } .bp3-dark .bp3-button.bp3-minimal.bp3-intent-primary { color: #48aff0; } .bp3-dark .bp3-button.bp3-minimal.bp3-intent-primary:hover { background: rgba(27, 186, 242, 0.2); color: #48aff0; } .bp3-dark .bp3-button.bp3-minimal.bp3-intent-primary:active, .bp3-dark .bp3-button.bp3-minimal.bp3-intent-primary.bp3-active { background: rgba(27, 186, 242, 0.3); color: #48aff0; } .bp3-dark .bp3-button.bp3-minimal.bp3-intent-primary:disabled, .bp3-dark .bp3-button.bp3-minimal.bp3-intent-primary.bp3-disabled { background: none; color: rgba(72, 175, 240, 0.5); } .bp3-dark .bp3-button.bp3-minimal.bp3-intent-primary:disabled.bp3-active, .bp3-dark .bp3-button.bp3-minimal.bp3-intent-primary.bp3-disabled.bp3-active { background: rgba(27, 186, 242, 0.3); } .bp3-button.bp3-minimal.bp3-intent-success { color: #0d8050; } .bp3-button.bp3-minimal.bp3-intent-success:hover, .bp3-button.bp3-minimal.bp3-intent-success:active, .bp3-button.bp3-minimal.bp3-intent-success.bp3-active { box-shadow: none; background: none; color: #0d8050; } .bp3-button.bp3-minimal.bp3-intent-success:hover { background: rgba(15, 153, 96, 0.15); color: #0d8050; } .bp3-button.bp3-minimal.bp3-intent-success:active, .bp3-button.bp3-minimal.bp3-intent-success.bp3-active { background: rgba(15, 153, 96, 0.3); color: #0d8050; } .bp3-button.bp3-minimal.bp3-intent-success:disabled, .bp3-button.bp3-minimal.bp3-intent-success.bp3-disabled { background: none; color: rgba(13, 128, 80, 0.5); } .bp3-button.bp3-minimal.bp3-intent-success:disabled.bp3-active, .bp3-button.bp3-minimal.bp3-intent-success.bp3-disabled.bp3-active { background: rgba(15, 153, 96, 0.3); } .bp3-button.bp3-minimal.bp3-intent-success .bp3-button-spinner .bp3-spinner-head { stroke: #0d8050; } .bp3-dark .bp3-button.bp3-minimal.bp3-intent-success { color: #3dcc91; } .bp3-dark .bp3-button.bp3-minimal.bp3-intent-success:hover { background: rgba(15, 153, 96, 0.2); color: #3dcc91; } .bp3-dark .bp3-button.bp3-minimal.bp3-intent-success:active, .bp3-dark .bp3-button.bp3-minimal.bp3-intent-success.bp3-active { background: rgba(15, 153, 96, 0.3); color: #3dcc91; } .bp3-dark .bp3-button.bp3-minimal.bp3-intent-success:disabled, .bp3-dark .bp3-button.bp3-minimal.bp3-intent-success.bp3-disabled { background: none; color: rgba(61, 204, 145, 0.5); } .bp3-dark .bp3-button.bp3-minimal.bp3-intent-success:disabled.bp3-active, .bp3-dark .bp3-button.bp3-minimal.bp3-intent-success.bp3-disabled.bp3-active { background: rgba(15, 153, 96, 0.3); } .bp3-button.bp3-minimal.bp3-intent-warning { color: #bf7326; } .bp3-button.bp3-minimal.bp3-intent-warning:hover, .bp3-button.bp3-minimal.bp3-intent-warning:active, .bp3-button.bp3-minimal.bp3-intent-warning.bp3-active { box-shadow: none; background: none; color: #bf7326; } .bp3-button.bp3-minimal.bp3-intent-warning:hover { background: rgba(217, 130, 43, 0.15); color: #bf7326; } .bp3-button.bp3-minimal.bp3-intent-warning:active, .bp3-button.bp3-minimal.bp3-intent-warning.bp3-active { background: rgba(217, 130, 43, 0.3); color: #bf7326; } .bp3-button.bp3-minimal.bp3-intent-warning:disabled, .bp3-button.bp3-minimal.bp3-intent-warning.bp3-disabled { background: none; color: rgba(191, 115, 38, 0.5); } .bp3-button.bp3-minimal.bp3-intent-warning:disabled.bp3-active, .bp3-button.bp3-minimal.bp3-intent-warning.bp3-disabled.bp3-active { background: rgba(217, 130, 43, 0.3); } .bp3-button.bp3-minimal.bp3-intent-warning .bp3-button-spinner .bp3-spinner-head { stroke: #bf7326; } .bp3-dark .bp3-button.bp3-minimal.bp3-intent-warning { color: #ffb366; } .bp3-dark .bp3-button.bp3-minimal.bp3-intent-warning:hover { background: rgba(217, 130, 43, 0.2); color: #ffb366; } .bp3-dark .bp3-button.bp3-minimal.bp3-intent-warning:active, .bp3-dark .bp3-button.bp3-minimal.bp3-intent-warning.bp3-active { background: rgba(217, 130, 43, 0.3); color: #ffb366; } .bp3-dark .bp3-button.bp3-minimal.bp3-intent-warning:disabled, .bp3-dark .bp3-button.bp3-minimal.bp3-intent-warning.bp3-disabled { background: none; color: rgba(255, 179, 102, 0.5); } .bp3-dark .bp3-button.bp3-minimal.bp3-intent-warning:disabled.bp3-active, .bp3-dark .bp3-button.bp3-minimal.bp3-intent-warning.bp3-disabled.bp3-active { background: rgba(217, 130, 43, 0.3); } .bp3-button.bp3-minimal.bp3-intent-danger { color: #c23030; } .bp3-button.bp3-minimal.bp3-intent-danger:hover, .bp3-button.bp3-minimal.bp3-intent-danger:active, .bp3-button.bp3-minimal.bp3-intent-danger.bp3-active { box-shadow: none; background: none; color: #c23030; } .bp3-button.bp3-minimal.bp3-intent-danger:hover { background: rgba(219, 55, 55, 0.15); color: #c23030; } .bp3-button.bp3-minimal.bp3-intent-danger:active, .bp3-button.bp3-minimal.bp3-intent-danger.bp3-active { background: rgba(219, 55, 55, 0.3); color: #c23030; } .bp3-button.bp3-minimal.bp3-intent-danger:disabled, .bp3-button.bp3-minimal.bp3-intent-danger.bp3-disabled { background: none; color: rgba(194, 48, 48, 0.5); } .bp3-button.bp3-minimal.bp3-intent-danger:disabled.bp3-active, .bp3-button.bp3-minimal.bp3-intent-danger.bp3-disabled.bp3-active { background: rgba(219, 55, 55, 0.3); } .bp3-button.bp3-minimal.bp3-intent-danger .bp3-button-spinner .bp3-spinner-head { stroke: #c23030; } .bp3-dark .bp3-button.bp3-minimal.bp3-intent-danger { color: #ff7373; } .bp3-dark .bp3-button.bp3-minimal.bp3-intent-danger:hover { background: rgba(219, 55, 55, 0.2); color: #ff7373; } .bp3-dark .bp3-button.bp3-minimal.bp3-intent-danger:active, .bp3-dark .bp3-button.bp3-minimal.bp3-intent-danger.bp3-active { background: rgba(219, 55, 55, 0.3); color: #ff7373; } .bp3-dark .bp3-button.bp3-minimal.bp3-intent-danger:disabled, .bp3-dark .bp3-button.bp3-minimal.bp3-intent-danger.bp3-disabled { background: none; color: rgba(255, 115, 115, 0.5); } .bp3-dark .bp3-button.bp3-minimal.bp3-intent-danger:disabled.bp3-active, .bp3-dark .bp3-button.bp3-minimal.bp3-intent-danger.bp3-disabled.bp3-active { background: rgba(219, 55, 55, 0.3); } a.bp3-button { text-align: center; text-decoration: none; transition: none; } a.bp3-button, a.bp3-button:hover, a.bp3-button:active { color: #182026; } a.bp3-button.bp3-disabled { color: rgba(92, 112, 128, 0.5); } .bp3-button-text { flex: 0 1 auto; } .bp3-button.bp3-align-left .bp3-button-text, .bp3-button.bp3-align-right .bp3-button-text, .bp3-button-group.bp3-align-left .bp3-button-text, .bp3-button-group.bp3-align-right .bp3-button-text { flex: 1 1 auto; } /* * Copyright 2017 Palantir Technologies, Inc. All rights reserved. */ /* * Copyright 2017 Palantir Technologies, Inc. All rights reserved. */ /* * Copyright 2017 Palantir Technologies, Inc. All rights reserved. */ /* CSS `border` property issues: - An element can only have one border. - Borders can't stack with shadows. - Borders modify the size of the element they're applied to. - Border positioning requires the extra `box-sizing` property. `box-shadow` doesn't have these issues, we're using it instead of `border`. */ /* Overlay shadows are used for default buttons floating on top of other elements. This way, the shadows blend with the colors beneath it. Switches and slider handles both use these variables. */ /* CSS `border` property issues: - An element can only have one border. - Borders can't stack with shadows. - Borders modify the size of the element they're applied to. - Border positioning requires the extra `box-sizing` property. `box-shadow` doesn't have these issues, we're using it instead of `border`. */ /* Overlay shadows are used for default buttons floating on top of other elements. This way, the shadows blend with the colors beneath it. Switches and slider handles both use these variables. */ /* Button groups Markup:

Queries Functions Options

.bp3-fill - Buttons expand equally to fill container .bp3-large - Use large buttons .bp3-minimal - Use minimal buttons .bp3-vertical - Vertical layout Styleguide button-group */ .bp3-button-group { display: inline-flex; /* Responsive Markup:

Start Left Middle Right End

Styleguide button-group}-fill */ /* Vertical button groups Markup:

Styleguide button-group-vertical */ } .bp3-button-group .bp3-button { flex: 0 0 auto; position: relative; z-index: 4; } .bp3-button-group .bp3-button:focus { z-index: 5; } .bp3-button-group .bp3-button:hover { z-index: 6; } .bp3-button-group .bp3-button:active, .bp3-button-group .bp3-button.bp3-active { z-index: 7; } .bp3-button-group .bp3-button:disabled, .bp3-button-group .bp3-button.bp3-disabled { z-index: 3; } .bp3-button-group .bp3-button[class*="bp3-intent-"] { z-index: 9; } .bp3-button-group .bp3-button[class*="bp3-intent-"]:focus { z-index: 10; } .bp3-button-group .bp3-button[class*="bp3-intent-"]:hover { z-index: 11; } .bp3-button-group .bp3-button[class*="bp3-intent-"]:active, .bp3-button-group .bp3-button[class*="bp3-intent-"].bp3-active { z-index: 12; } .bp3-button-group .bp3-button[class*="bp3-intent-"]:disabled, .bp3-button-group .bp3-button[class*="bp3-intent-"].bp3-disabled { z-index: 8; } .bp3-button-group:not(.bp3-minimal) > .bp3-popover-wrapper:not(:first-child) .bp3-button, .bp3-button-group:not(.bp3-minimal) > .bp3-button:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } .bp3-button-group:not(.bp3-minimal) > .bp3-popover-wrapper:not(:last-child) .bp3-button, .bp3-button-group:not(.bp3-minimal) > .bp3-button:not(:last-child) { margin-right: -1px; border-top-right-radius: 0; border-bottom-right-radius: 0; } .bp3-button-group.bp3-minimal .bp3-button { box-shadow: none; background: none; } .bp3-button-group.bp3-minimal .bp3-button:hover { box-shadow: none; background: rgba(167, 182, 194, 0.3); text-decoration: none; color: #182026; } .bp3-button-group.bp3-minimal .bp3-button:active, .bp3-button-group.bp3-minimal .bp3-button.bp3-active { box-shadow: none; background: rgba(115, 134, 148, 0.3); color: #182026; } .bp3-button-group.bp3-minimal .bp3-button:disabled, .bp3-button-group.bp3-minimal .bp3-button:disabled:hover, .bp3-button-group.bp3-minimal .bp3-button.bp3-disabled, .bp3-button-group.bp3-minimal .bp3-button.bp3-disabled:hover { background: none; cursor: not-allowed; color: rgba(92, 112, 128, 0.5); } .bp3-button-group.bp3-minimal .bp3-button:disabled.bp3-active, .bp3-button-group.bp3-minimal .bp3-button:disabled:hover.bp3-active, .bp3-button-group.bp3-minimal .bp3-button.bp3-disabled.bp3-active, .bp3-button-group.bp3-minimal .bp3-button.bp3-disabled:hover.bp3-active { background: rgba(115, 134, 148, 0.3); } .bp3-dark .bp3-button-group.bp3-minimal .bp3-button { box-shadow: none; background: none; color: inherit; } .bp3-dark .bp3-button-group.bp3-minimal .bp3-button:hover, .bp3-dark .bp3-button-group.bp3-minimal .bp3-button:active, .bp3-dark .bp3-button-group.bp3-minimal .bp3-button.bp3-active { box-shadow: none; background: none; } .bp3-dark .bp3-button-group.bp3-minimal .bp3-button:hover { background: rgba(138, 155, 168, 0.15); } .bp3-dark .bp3-button-group.bp3-minimal .bp3-button:active, .bp3-dark .bp3-button-group.bp3-minimal .bp3-button.bp3-active { background: rgba(138, 155, 168, 0.3); color: #f5f8fa; } .bp3-dark .bp3-button-group.bp3-minimal .bp3-button:disabled, .bp3-dark .bp3-button-group.bp3-minimal .bp3-button:disabled:hover, .bp3-dark .bp3-button-group.bp3-minimal .bp3-button.bp3-disabled, .bp3-dark .bp3-button-group.bp3-minimal .bp3-button.bp3-disabled:hover { background: none; cursor: not-allowed; color: rgba(191, 204, 214, 0.5); } .bp3-dark .bp3-button-group.bp3-minimal .bp3-button:disabled.bp3-active, .bp3-dark .bp3-button-group.bp3-minimal .bp3-button:disabled:hover.bp3-active, .bp3-dark .bp3-button-group.bp3-minimal .bp3-button.bp3-disabled.bp3-active, .bp3-dark .bp3-button-group.bp3-minimal .bp3-button.bp3-disabled:hover.bp3-active { background: rgba(138, 155, 168, 0.3); } .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-primary { color: #106ba3; } .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-primary:hover, .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-primary:active, .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-primary.bp3-active { box-shadow: none; background: none; color: #106ba3; } .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-primary:hover { background: rgba(27, 186, 242, 0.15); color: #106ba3; } .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-primary:active, .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-primary.bp3-active { background: rgba(27, 186, 242, 0.3); color: #106ba3; } .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-primary:disabled, .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-primary.bp3-disabled { background: none; color: rgba(16, 107, 163, 0.5); } .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-primary:disabled.bp3-active, .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-primary.bp3-disabled.bp3-active { background: rgba(27, 186, 242, 0.3); } .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-primary .bp3-button-spinner .bp3-spinner-head { stroke: #106ba3; } .bp3-dark .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-primary { color: #48aff0; } .bp3-dark .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-primary:hover { background: rgba(27, 186, 242, 0.2); color: #48aff0; } .bp3-dark .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-primary:active, .bp3-dark .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-primary.bp3-active { background: rgba(27, 186, 242, 0.3); color: #48aff0; } .bp3-dark .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-primary:disabled, .bp3-dark .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-primary.bp3-disabled { background: none; color: rgba(72, 175, 240, 0.5); } .bp3-dark .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-primary:disabled.bp3-active, .bp3-dark .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-primary.bp3-disabled.bp3-active { background: rgba(27, 186, 242, 0.3); } .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-success { color: #0d8050; } .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-success:hover, .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-success:active, .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-success.bp3-active { box-shadow: none; background: none; color: #0d8050; } .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-success:hover { background: rgba(15, 153, 96, 0.15); color: #0d8050; } .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-success:active, .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-success.bp3-active { background: rgba(15, 153, 96, 0.3); color: #0d8050; } .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-success:disabled, .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-success.bp3-disabled { background: none; color: rgba(13, 128, 80, 0.5); } .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-success:disabled.bp3-active, .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-success.bp3-disabled.bp3-active { background: rgba(15, 153, 96, 0.3); } .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-success .bp3-button-spinner .bp3-spinner-head { stroke: #0d8050; } .bp3-dark .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-success { color: #3dcc91; } .bp3-dark .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-success:hover { background: rgba(15, 153, 96, 0.2); color: #3dcc91; } .bp3-dark .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-success:active, .bp3-dark .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-success.bp3-active { background: rgba(15, 153, 96, 0.3); color: #3dcc91; } .bp3-dark .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-success:disabled, .bp3-dark .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-success.bp3-disabled { background: none; color: rgba(61, 204, 145, 0.5); } .bp3-dark .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-success:disabled.bp3-active, .bp3-dark .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-success.bp3-disabled.bp3-active { background: rgba(15, 153, 96, 0.3); } .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-warning { color: #bf7326; } .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-warning:hover, .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-warning:active, .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-warning.bp3-active { box-shadow: none; background: none; color: #bf7326; } .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-warning:hover { background: rgba(217, 130, 43, 0.15); color: #bf7326; } .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-warning:active, .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-warning.bp3-active { background: rgba(217, 130, 43, 0.3); color: #bf7326; } .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-warning:disabled, .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-warning.bp3-disabled { background: none; color: rgba(191, 115, 38, 0.5); } .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-warning:disabled.bp3-active, .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-warning.bp3-disabled.bp3-active { background: rgba(217, 130, 43, 0.3); } .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-warning .bp3-button-spinner .bp3-spinner-head { stroke: #bf7326; } .bp3-dark .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-warning { color: #ffb366; } .bp3-dark .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-warning:hover { background: rgba(217, 130, 43, 0.2); color: #ffb366; } .bp3-dark .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-warning:active, .bp3-dark .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-warning.bp3-active { background: rgba(217, 130, 43, 0.3); color: #ffb366; } .bp3-dark .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-warning:disabled, .bp3-dark .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-warning.bp3-disabled { background: none; color: rgba(255, 179, 102, 0.5); } .bp3-dark .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-warning:disabled.bp3-active, .bp3-dark .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-warning.bp3-disabled.bp3-active { background: rgba(217, 130, 43, 0.3); } .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-danger { color: #c23030; } .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-danger:hover, .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-danger:active, .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-danger.bp3-active { box-shadow: none; background: none; color: #c23030; } .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-danger:hover { background: rgba(219, 55, 55, 0.15); color: #c23030; } .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-danger:active, .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-danger.bp3-active { background: rgba(219, 55, 55, 0.3); color: #c23030; } .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-danger:disabled, .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-danger.bp3-disabled { background: none; color: rgba(194, 48, 48, 0.5); } .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-danger:disabled.bp3-active, .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-danger.bp3-disabled.bp3-active { background: rgba(219, 55, 55, 0.3); } .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-danger .bp3-button-spinner .bp3-spinner-head { stroke: #c23030; } .bp3-dark .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-danger { color: #ff7373; } .bp3-dark .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-danger:hover { background: rgba(219, 55, 55, 0.2); color: #ff7373; } .bp3-dark .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-danger:active, .bp3-dark .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-danger.bp3-active { background: rgba(219, 55, 55, 0.3); color: #ff7373; } .bp3-dark .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-danger:disabled, .bp3-dark .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-danger.bp3-disabled { background: none; color: rgba(255, 115, 115, 0.5); } .bp3-dark .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-danger:disabled.bp3-active, .bp3-dark .bp3-button-group.bp3-minimal .bp3-button.bp3-intent-danger.bp3-disabled.bp3-active { background: rgba(219, 55, 55, 0.3); } .bp3-button-group .bp3-popover-wrapper, .bp3-button-group .bp3-popover-target { display: flex; flex: 1 1 auto; } .bp3-button-group.bp3-fill { display: flex; width: 100%; } .bp3-button-group .bp3-button.bp3-fill, .bp3-button-group.bp3-fill .bp3-button:not(.bp3-fixed) { flex: 1 1 auto; } .bp3-button-group.bp3-vertical { flex-direction: column; align-items: stretch; vertical-align: top; } .bp3-button-group.bp3-vertical.bp3-fill { width: unset; height: 100%; } .bp3-button-group.bp3-vertical .bp3-button { margin-right: 0 !important; width: 100%; } .bp3-button-group.bp3-vertical:not(.bp3-minimal) > .bp3-popover-wrapper:first-child .bp3-button, .bp3-button-group.bp3-vertical:not(.bp3-minimal) > .bp3-button:first-child { border-radius: 0 0 0 0; } .bp3-button-group.bp3-vertical:not(.bp3-minimal) > .bp3-popover-wrapper:last-child .bp3-button, .bp3-button-group.bp3-vertical:not(.bp3-minimal) > .bp3-button:last-child { border-radius: 0 0 0 0; } .bp3-button-group.bp3-vertical:not(.bp3-minimal) > .bp3-popover-wrapper:not(:last-child) .bp3-button, .bp3-button-group.bp3-vertical:not(.bp3-minimal) > .bp3-button:not(:last-child) { margin-bottom: -1px; } .bp3-button-group.bp3-align-left .bp3-button { text-align: left; } .bp3-dark .bp3-button-group:not(.bp3-minimal) > .bp3-popover-wrapper:not(:last-child) .bp3-button, .bp3-dark .bp3-button-group:not(.bp3-minimal) > .bp3-button:not(:last-child) { margin-right: 1px; } .bp3-dark .bp3-button-group.bp3-vertical > .bp3-popover-wrapper:not(:last-child) .bp3-button, .bp3-dark .bp3-button-group.bp3-vertical > .bp3-button:not(:last-child) { margin-bottom: 1px; } /* Callout Markup:

Callout Heading

It's dangerous to go alone! Take this.

.bp3-intent-primary - Primary intent .bp3-intent-success - Success intent .bp3-intent-warning - Warning intent .bp3-intent-danger - Danger intent .bp3-icon-info-sign - With an icon Styleguide callout */ .bp3-callout { line-height: 1.5; font-size: 14px; position: relative; border-radius: 0; background-color: rgba(138, 155, 168, 0.15); width: 100%; padding: 10px 12px 9px; } .bp3-callout[class*="bp3-icon-"] { padding-left: 40px; } .bp3-callout[class*="bp3-icon-"]::before { line-height: 1; font-family: "Icons20", sans-serif; font-size: 20px; font-weight: 400; font-style: normal; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; position: absolute; top: 10px; left: 10px; color: #5c7080; } .bp3-callout.bp3-callout-icon { padding-left: 40px; } .bp3-callout.bp3-callout-icon > .bp3-icon:first-child { position: absolute; top: 10px; left: 10px; color: #5c7080; } .bp3-callout .bp3-heading { margin-top: 0; margin-bottom: 5px; line-height: 20px; } .bp3-callout .bp3-heading:last-child { margin-bottom: 0; } .bp3-dark .bp3-callout { background-color: rgba(138, 155, 168, 0.2); } .bp3-dark .bp3-callout[class*="bp3-icon-"]::before { color: #bfccd6; } .bp3-callout.bp3-intent-primary { background-color: rgba(27, 186, 242, 0.15); } .bp3-callout.bp3-intent-primary[class*="bp3-icon-"]::before, .bp3-callout.bp3-intent-primary > .bp3-icon:first-child, .bp3-callout.bp3-intent-primary .bp3-heading { color: #106ba3; } .bp3-dark .bp3-callout.bp3-intent-primary { background-color: rgba(27, 186, 242, 0.25); } .bp3-dark .bp3-callout.bp3-intent-primary[class*="bp3-icon-"]::before, .bp3-dark .bp3-callout.bp3-intent-primary > .bp3-icon:first-child, .bp3-dark .bp3-callout.bp3-intent-primary .bp3-heading { color: #48aff0; } .bp3-callout.bp3-intent-success { background-color: rgba(15, 153, 96, 0.15); } .bp3-callout.bp3-intent-success[class*="bp3-icon-"]::before, .bp3-callout.bp3-intent-success > .bp3-icon:first-child, .bp3-callout.bp3-intent-success .bp3-heading { color: #0d8050; } .bp3-dark .bp3-callout.bp3-intent-success { background-color: rgba(15, 153, 96, 0.25); } .bp3-dark .bp3-callout.bp3-intent-success[class*="bp3-icon-"]::before, .bp3-dark .bp3-callout.bp3-intent-success > .bp3-icon:first-child, .bp3-dark .bp3-callout.bp3-intent-success .bp3-heading { color: #3dcc91; } .bp3-callout.bp3-intent-warning { background-color: rgba(217, 130, 43, 0.15); } .bp3-callout.bp3-intent-warning[class*="bp3-icon-"]::before, .bp3-callout.bp3-intent-warning > .bp3-icon:first-child, .bp3-callout.bp3-intent-warning .bp3-heading { color: #bf7326; } .bp3-dark .bp3-callout.bp3-intent-warning { background-color: rgba(217, 130, 43, 0.25); } .bp3-dark .bp3-callout.bp3-intent-warning[class*="bp3-icon-"]::before, .bp3-dark .bp3-callout.bp3-intent-warning > .bp3-icon:first-child, .bp3-dark .bp3-callout.bp3-intent-warning .bp3-heading { color: #ffb366; } .bp3-callout.bp3-intent-danger { background-color: rgba(219, 55, 55, 0.15); } .bp3-callout.bp3-intent-danger[class*="bp3-icon-"]::before, .bp3-callout.bp3-intent-danger > .bp3-icon:first-child, .bp3-callout.bp3-intent-danger .bp3-heading { color: #c23030; } .bp3-dark .bp3-callout.bp3-intent-danger { background-color: rgba(219, 55, 55, 0.25); } .bp3-dark .bp3-callout.bp3-intent-danger[class*="bp3-icon-"]::before, .bp3-dark .bp3-callout.bp3-intent-danger > .bp3-icon:first-child, .bp3-dark .bp3-callout.bp3-intent-danger .bp3-heading { color: #ff7373; } .bp3-running-text .bp3-callout { margin: 20px 0; } /* Cards Markup:

We build products that make people better at their most important work.

.bp3-elevation-0 - Ground floor. This level provides just a gentle border shadow. .bp3-elevation-1 - First. Subtle drop shadow intended for static containers. .bp3-elevation-2 - Second. An even stronger shadow, moving on up. .bp3-elevation-3 - Third. For containers overlaying content temporarily. .bp3-elevation-4 - Fourth. The strongest shadow, usually for overlay containers on top of backdrops. .bp3-interactive - On hover, increase elevation and use pointer cursor. Styleguide card */ .bp3-card { border-radius: 0; box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.15), 0 0 0 rgba(16, 22, 26, 0), 0 0 0 rgba(16, 22, 26, 0); background-color: #ffffff; padding: 20px; transition: transform 200ms cubic-bezier(0.4, 1, 0.75, 0.9), box-shadow 200ms cubic-bezier(0.4, 1, 0.75, 0.9); } .bp3-card.bp3-dark, .bp3-dark .bp3-card { box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.4), 0 0 0 rgba(16, 22, 26, 0), 0 0 0 rgba(16, 22, 26, 0); background-color: #30404d; } .bp3-elevation-0 { box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.15), 0 0 0 rgba(16, 22, 26, 0), 0 0 0 rgba(16, 22, 26, 0); } .bp3-elevation-0.bp3-dark, .bp3-dark .bp3-elevation-0 { box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.4), 0 0 0 rgba(16, 22, 26, 0), 0 0 0 rgba(16, 22, 26, 0); } .bp3-elevation-1 { box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 0 0 rgba(16, 22, 26, 0), 0 1px 1px rgba(16, 22, 26, 0.2); } .bp3-elevation-1.bp3-dark, .bp3-dark .bp3-elevation-1 { box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.2), 0 0 0 rgba(16, 22, 26, 0), 0 1px 1px rgba(16, 22, 26, 0.4); } .bp3-elevation-2 { box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 1px 1px rgba(16, 22, 26, 0.2), 0 2px 6px rgba(16, 22, 26, 0.2); } .bp3-elevation-2.bp3-dark, .bp3-dark .bp3-elevation-2 { box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.2), 0 1px 1px rgba(16, 22, 26, 0.4), 0 2px 6px rgba(16, 22, 26, 0.4); } .bp3-elevation-3 { box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 2px 4px rgba(16, 22, 26, 0.2), 0 8px 24px rgba(16, 22, 26, 0.2); } .bp3-elevation-3.bp3-dark, .bp3-dark .bp3-elevation-3 { box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.2), 0 2px 4px rgba(16, 22, 26, 0.4), 0 8px 24px rgba(16, 22, 26, 0.4); } .bp3-elevation-4 { box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 4px 8px rgba(16, 22, 26, 0.2), 0 18px 46px 6px rgba(16, 22, 26, 0.2); } .bp3-elevation-4.bp3-dark, .bp3-dark .bp3-elevation-4 { box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.2), 0 4px 8px rgba(16, 22, 26, 0.4), 0 18px 46px 6px rgba(16, 22, 26, 0.4); } .bp3-card.bp3-interactive:hover { box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 2px 4px rgba(16, 22, 26, 0.2), 0 8px 24px rgba(16, 22, 26, 0.2); cursor: pointer; } .bp3-card.bp3-interactive:hover.bp3-dark, .bp3-dark .bp3-card.bp3-interactive:hover { box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.2), 0 2px 4px rgba(16, 22, 26, 0.4), 0 8px 24px rgba(16, 22, 26, 0.4); } .bp3-card.bp3-interactive:active { opacity: 0.9; box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 0 0 rgba(16, 22, 26, 0), 0 1px 1px rgba(16, 22, 26, 0.2); transition-duration: 0; } .bp3-card.bp3-interactive:active.bp3-dark, .bp3-dark .bp3-card.bp3-interactive:active { box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.2), 0 0 0 rgba(16, 22, 26, 0), 0 1px 1px rgba(16, 22, 26, 0.4); } .bp3-collapse { height: 0; overflow-y: hidden; transition: height 200ms cubic-bezier(0.4, 1, 0.75, 0.9); } .bp3-collapse .bp3-collapse-body { transition: transform 200ms cubic-bezier(0.4, 1, 0.75, 0.9); } .bp3-collapse .bp3-collapse-body[aria-hidden="true"] { display: none; } .bp3-context-menu .bp3-popover-target { display: block; } .bp3-context-menu-popover-target { position: fixed; } .bp3-divider { margin: 5px; border-right: 1px solid rgba(16, 22, 26, 0.15); border-bottom: 1px solid rgba(16, 22, 26, 0.15); } .bp3-dark .bp3-divider { border-color: rgba(16, 22, 26, 0.4); } /* * Copyright 2017 Palantir Technologies, Inc. All rights reserved. */ /* * Copyright 2017 Palantir Technologies, Inc. All rights reserved. */ /* * Copyright 2017 Palantir Technologies, Inc. All rights reserved. */ /* A mixin to generate the classes for a React CSSTransition which animates any number of CSS properties at once. Transitioned properties are specificed as a map of property names to lists of (inital value, final value). For enter & appear transitions, each property will transition from its initial to its final value. For exit transitions, each property will transition in reverse, from final to initial. **Simple example:** `@include react-transition("popover", (opacity: 0 1), $before: "&");` Transition named "popover" moves opacity from 0 to 1. `"&"` indicates that the Transition classes are expected to be applied to this element, where the mixin is invoked. **Params:** $name: React transitionName prop $properties: map of CSS property to (initial, final) values $duration: transition duration $easing: transition easing function $delay: transition delay $before: selector text to insert before transition name (often to select self: &) $after: selector text to insert after transiton name (to select children) */ /* A mixin to generate the classes for one phase of a React CSSTransition. `$phase` must be `appear` or `enter` or `exit`. If `enter` phase is given then `appear` phase will be generated at the same time. If `exit` phase is given then property values are animated in reverse, from final to initial. **Example:** @include react-transition-phase(toast, enter, $enter-translate, $before: "&"); @include react-transition-phase(toast, leave, $leave-blur, $pt-transition-duration * 3, $before: "&"); */ /* Given map of properties to values, set each property to the value at the given index. (remember that sass indices are 1-based). Example: `each-prop((opacity: 0 1), 2)` will print "opacity: 1" */ /* Format transition class name with all the bits. "enter" phase will include "appear" phase in returned name. */ /* Dialog Markup:

This dialog hasn't been wired up with any open or close interactions. It's just an example of markup and styles.

Styleguide dialog */ .bp3-dialog-container { opacity: 1; transform: scale(1); display: flex; align-items: center; justify-content: center; width: 100%; min-height: 100%; pointer-events: none; user-select: none; } .bp3-dialog-container.bp3-overlay-enter > .bp3-dialog, .bp3-dialog-container.bp3-overlay-appear > .bp3-dialog { opacity: 0; transform: scale(0.5); } .bp3-dialog-container.bp3-overlay-enter-active > .bp3-dialog, .bp3-dialog-container.bp3-overlay-appear-active > .bp3-dialog { opacity: 1; transform: scale(1); transition-property: opacity, transform; transition-duration: 300ms; transition-timing-function: cubic-bezier(0.54, 1.12, 0.38, 1.11); transition-delay: 0; } .bp3-dialog-container.bp3-overlay-exit > .bp3-dialog { opacity: 1; transform: scale(1); } .bp3-dialog-container.bp3-overlay-exit-active > .bp3-dialog { opacity: 0; transform: scale(0.5); transition-property: opacity, transform; transition-duration: 300ms; transition-timing-function: cubic-bezier(0.54, 1.12, 0.38, 1.11); transition-delay: 0; } .bp3-dialog { display: flex; flex-direction: column; margin: 30px 0; border-radius: 0; box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 4px 8px rgba(16, 22, 26, 0.2), 0 18px 46px 6px rgba(16, 22, 26, 0.2); background: #ebf1f5; width: 500px; padding-bottom: 20px; pointer-events: all; user-select: text; } .bp3-dialog:focus { outline: 0; } .bp3-dialog.bp3-dark, .bp3-dark .bp3-dialog { box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.2), 0 4px 8px rgba(16, 22, 26, 0.4), 0 18px 46px 6px rgba(16, 22, 26, 0.4); background: #293742; color: #f5f8fa; } .bp3-dialog-header { display: flex; flex: 0 0 auto; align-items: center; border-radius: 0 0 0 0; box-shadow: 0 1px 0 rgba(16, 22, 26, 0.15); background: #ffffff; min-height: 40px; padding-right: 5px; padding-left: 20px; } .bp3-dialog-header .bp3-icon-large, .bp3-dialog-header .bp3-icon { flex: 0 0 auto; margin-right: 10px; color: #5c7080; } .bp3-dialog-header .bp3-heading { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; flex: 1 1 auto; margin: 0; line-height: inherit; } .bp3-dialog-header .bp3-heading:last-child { margin-right: 20px; } .bp3-dark .bp3-dialog-header { box-shadow: 0 1px 0 rgba(16, 22, 26, 0.4); background: #30404d; } .bp3-dark .bp3-dialog-header .bp3-icon-large, .bp3-dark .bp3-dialog-header .bp3-icon { color: #bfccd6; } .bp3-dialog-body { flex: 1 1 auto; margin: 20px; line-height: 18px; } .bp3-dialog-footer { flex: 0 0 auto; margin: 0 20px; } .bp3-dialog-footer-actions { display: flex; justify-content: flex-end; } .bp3-dialog-footer-actions .bp3-button { margin-left: 10px; } /* * Copyright 2017 Palantir Technologies, Inc. All rights reserved. */ /* * Copyright 2017 Palantir Technologies, Inc. All rights reserved. */ /* * Copyright 2017 Palantir Technologies, Inc. All rights reserved. */ /* A mixin to generate the classes for a React CSSTransition which animates any number of CSS properties at once. Transitioned properties are specificed as a map of property names to lists of (inital value, final value). For enter & appear transitions, each property will transition from its initial to its final value. For exit transitions, each property will transition in reverse, from final to initial. **Simple example:** `@include react-transition("popover", (opacity: 0 1), $before: "&");` Transition named "popover" moves opacity from 0 to 1. `"&"` indicates that the Transition classes are expected to be applied to this element, where the mixin is invoked. **Params:** $name: React transitionName prop $properties: map of CSS property to (initial, final) values $duration: transition duration $easing: transition easing function $delay: transition delay $before: selector text to insert before transition name (often to select self: &) $after: selector text to insert after transiton name (to select children) */ /* A mixin to generate the classes for one phase of a React CSSTransition. `$phase` must be `appear` or `enter` or `exit`. If `enter` phase is given then `appear` phase will be generated at the same time. If `exit` phase is given then property values are animated in reverse, from final to initial. **Example:** @include react-transition-phase(toast, enter, $enter-translate, $before: "&"); @include react-transition-phase(toast, leave, $leave-blur, $pt-transition-duration * 3, $before: "&"); */ /* Given map of properties to values, set each property to the value at the given index. (remember that sass indices are 1-based). Example: `each-prop((opacity: 0 1), 2)` will print "opacity: 1" */ /* Format transition class name with all the bits. "enter" phase will include "appear" phase in returned name. */ .bp3-drawer { display: flex; flex-direction: column; margin: 0; box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 4px 8px rgba(16, 22, 26, 0.2), 0 18px 46px 6px rgba(16, 22, 26, 0.2); background: #ffffff; padding: 0; } .bp3-drawer:focus { outline: 0; } .bp3-drawer.bp3-position-top { top: 0; right: 0; left: 0; height: 50%; } .bp3-drawer.bp3-position-top.bp3-overlay-enter, .bp3-drawer.bp3-position-top.bp3-overlay-appear { transform: translateY(-100%); } .bp3-drawer.bp3-position-top.bp3-overlay-enter-active, .bp3-drawer.bp3-position-top.bp3-overlay-appear-active { transform: translateY(0); transition-property: transform; transition-duration: 200ms; transition-timing-function: cubic-bezier(0.4, 1, 0.75, 0.9); transition-delay: 0; } .bp3-drawer.bp3-position-top.bp3-overlay-exit { transform: translateY(0); } .bp3-drawer.bp3-position-top.bp3-overlay-exit-active { transform: translateY(-100%); transition-property: transform; transition-duration: 100ms; transition-timing-function: cubic-bezier(0.4, 1, 0.75, 0.9); transition-delay: 0; } .bp3-drawer.bp3-position-bottom { right: 0; bottom: 0; left: 0; height: 50%; } .bp3-drawer.bp3-position-bottom.bp3-overlay-enter, .bp3-drawer.bp3-position-bottom.bp3-overlay-appear { transform: translateY(100%); } .bp3-drawer.bp3-position-bottom.bp3-overlay-enter-active, .bp3-drawer.bp3-position-bottom.bp3-overlay-appear-active { transform: translateY(0); transition-property: transform; transition-duration: 200ms; transition-timing-function: cubic-bezier(0.4, 1, 0.75, 0.9); transition-delay: 0; } .bp3-drawer.bp3-position-bottom.bp3-overlay-exit { transform: translateY(0); } .bp3-drawer.bp3-position-bottom.bp3-overlay-exit-active { transform: translateY(100%); transition-property: transform; transition-duration: 100ms; transition-timing-function: cubic-bezier(0.4, 1, 0.75, 0.9); transition-delay: 0; } .bp3-drawer.bp3-position-left { top: 0; bottom: 0; left: 0; width: 50%; } .bp3-drawer.bp3-position-left.bp3-overlay-enter, .bp3-drawer.bp3-position-left.bp3-overlay-appear { transform: translateX(-100%); } .bp3-drawer.bp3-position-left.bp3-overlay-enter-active, .bp3-drawer.bp3-position-left.bp3-overlay-appear-active { transform: translateX(0); transition-property: transform; transition-duration: 200ms; transition-timing-function: cubic-bezier(0.4, 1, 0.75, 0.9); transition-delay: 0; } .bp3-drawer.bp3-position-left.bp3-overlay-exit { transform: translateX(0); } .bp3-drawer.bp3-position-left.bp3-overlay-exit-active { transform: translateX(-100%); transition-property: transform; transition-duration: 100ms; transition-timing-function: cubic-bezier(0.4, 1, 0.75, 0.9); transition-delay: 0; } .bp3-drawer.bp3-position-right { top: 0; right: 0; bottom: 0; width: 50%; } .bp3-drawer.bp3-position-right.bp3-overlay-enter, .bp3-drawer.bp3-position-right.bp3-overlay-appear { transform: translateX(100%); } .bp3-drawer.bp3-position-right.bp3-overlay-enter-active, .bp3-drawer.bp3-position-right.bp3-overlay-appear-active { transform: translateX(0); transition-property: transform; transition-duration: 200ms; transition-timing-function: cubic-bezier(0.4, 1, 0.75, 0.9); transition-delay: 0; } .bp3-drawer.bp3-position-right.bp3-overlay-exit { transform: translateX(0); } .bp3-drawer.bp3-position-right.bp3-overlay-exit-active { transform: translateX(100%); transition-property: transform; transition-duration: 100ms; transition-timing-function: cubic-bezier(0.4, 1, 0.75, 0.9); transition-delay: 0; } .bp3-drawer:not(.bp3-position-top):not(.bp3-position-bottom):not(.bp3-position-left):not( .bp3-position-right):not(.bp3-vertical) { top: 0; right: 0; bottom: 0; width: 50%; } .bp3-drawer:not(.bp3-position-top):not(.bp3-position-bottom):not(.bp3-position-left):not( .bp3-position-right):not(.bp3-vertical).bp3-overlay-enter, .bp3-drawer:not(.bp3-position-top):not(.bp3-position-bottom):not(.bp3-position-left):not( .bp3-position-right):not(.bp3-vertical).bp3-overlay-appear { transform: translateX(100%); } .bp3-drawer:not(.bp3-position-top):not(.bp3-position-bottom):not(.bp3-position-left):not( .bp3-position-right):not(.bp3-vertical).bp3-overlay-enter-active, .bp3-drawer:not(.bp3-position-top):not(.bp3-position-bottom):not(.bp3-position-left):not( .bp3-position-right):not(.bp3-vertical).bp3-overlay-appear-active { transform: translateX(0); transition-property: transform; transition-duration: 200ms; transition-timing-function: cubic-bezier(0.4, 1, 0.75, 0.9); transition-delay: 0; } .bp3-drawer:not(.bp3-position-top):not(.bp3-position-bottom):not(.bp3-position-left):not( .bp3-position-right):not(.bp3-vertical).bp3-overlay-exit { transform: translateX(0); } .bp3-drawer:not(.bp3-position-top):not(.bp3-position-bottom):not(.bp3-position-left):not( .bp3-position-right):not(.bp3-vertical).bp3-overlay-exit-active { transform: translateX(100%); transition-property: transform; transition-duration: 100ms; transition-timing-function: cubic-bezier(0.4, 1, 0.75, 0.9); transition-delay: 0; } .bp3-drawer:not(.bp3-position-top):not(.bp3-position-bottom):not(.bp3-position-left):not( .bp3-position-right).bp3-vertical { right: 0; bottom: 0; left: 0; height: 50%; } .bp3-drawer:not(.bp3-position-top):not(.bp3-position-bottom):not(.bp3-position-left):not( .bp3-position-right).bp3-vertical.bp3-overlay-enter, .bp3-drawer:not(.bp3-position-top):not(.bp3-position-bottom):not(.bp3-position-left):not( .bp3-position-right).bp3-vertical.bp3-overlay-appear { transform: translateY(100%); } .bp3-drawer:not(.bp3-position-top):not(.bp3-position-bottom):not(.bp3-position-left):not( .bp3-position-right).bp3-vertical.bp3-overlay-enter-active, .bp3-drawer:not(.bp3-position-top):not(.bp3-position-bottom):not(.bp3-position-left):not( .bp3-position-right).bp3-vertical.bp3-overlay-appear-active { transform: translateY(0); transition-property: transform; transition-duration: 200ms; transition-timing-function: cubic-bezier(0.4, 1, 0.75, 0.9); transition-delay: 0; } .bp3-drawer:not(.bp3-position-top):not(.bp3-position-bottom):not(.bp3-position-left):not( .bp3-position-right).bp3-vertical.bp3-overlay-exit { transform: translateY(0); } .bp3-drawer:not(.bp3-position-top):not(.bp3-position-bottom):not(.bp3-position-left):not( .bp3-position-right).bp3-vertical.bp3-overlay-exit-active { transform: translateY(100%); transition-property: transform; transition-duration: 100ms; transition-timing-function: cubic-bezier(0.4, 1, 0.75, 0.9); transition-delay: 0; } .bp3-drawer.bp3-dark, .bp3-dark .bp3-drawer { box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.2), 0 4px 8px rgba(16, 22, 26, 0.4), 0 18px 46px 6px rgba(16, 22, 26, 0.4); background: #30404d; color: #f5f8fa; } .bp3-drawer-header { display: flex; flex: 0 0 auto; align-items: center; position: relative; border-radius: 0; box-shadow: 0 1px 0 rgba(16, 22, 26, 0.15); min-height: 40px; padding: 5px; padding-left: 20px; } .bp3-drawer-header .bp3-icon-large, .bp3-drawer-header .bp3-icon { flex: 0 0 auto; margin-right: 10px; color: #5c7080; } .bp3-drawer-header .bp3-heading { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; flex: 1 1 auto; margin: 0; line-height: inherit; } .bp3-drawer-header .bp3-heading:last-child { margin-right: 20px; } .bp3-dark .bp3-drawer-header { box-shadow: 0 1px 0 rgba(16, 22, 26, 0.4); } .bp3-dark .bp3-drawer-header .bp3-icon-large, .bp3-dark .bp3-drawer-header .bp3-icon { color: #bfccd6; } .bp3-drawer-body { flex: 1 1 auto; overflow: auto; line-height: 18px; } .bp3-drawer-footer { flex: 0 0 auto; position: relative; box-shadow: inset 0 1px 0 rgba(16, 22, 26, 0.15); padding: 10px 20px; } .bp3-dark .bp3-drawer-footer { box-shadow: inset 0 1px 0 rgba(16, 22, 26, 0.4); } /* * Copyright 2017 Palantir Technologies, Inc. All rights reserved. */ /* * Copyright 2017 Palantir Technologies, Inc. All rights reserved. */ /* * Copyright 2017 Palantir Technologies, Inc. All rights reserved. */ /* CSS `border` property issues: - An element can only have one border. - Borders can't stack with shadows. - Borders modify the size of the element they're applied to. - Border positioning requires the extra `box-sizing` property. `box-shadow` doesn't have these issues, we're using it instead of `border`. */ /* Overlay shadows are used for default buttons floating on top of other elements. This way, the shadows blend with the colors beneath it. Switches and slider handles both use these variables. */ .bp3-editable-text { display: inline-block; position: relative; cursor: text; max-width: 100%; vertical-align: top; white-space: nowrap; } .bp3-editable-text::before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 0; content: ""; transition: background-color 100ms cubic-bezier(0.4, 1, 0.75, 0.9), box-shadow 100ms cubic-bezier(0.4, 1, 0.75, 0.9); } .bp3-editable-text:hover::before { box-shadow: 0 0 0 0 rgba(27, 186, 242, 0), 0 0 0 0 rgba(27, 186, 242, 0), inset 0 0 0 1px rgba(16, 22, 26, 0.15); } .bp3-editable-text.bp3-editable-text-editing::before { box-shadow: 0 0 0 1px #1bbaf2, 0 0 0 3px rgba(27, 186, 242, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.2); background-color: #ffffff; } .bp3-editable-text.bp3-disabled::before { box-shadow: none; } .bp3-editable-text.bp3-intent-primary .bp3-editable-text-input, .bp3-editable-text.bp3-intent-primary .bp3-editable-text-content { color: #1bbaf2; } .bp3-editable-text.bp3-intent-primary:hover::before { box-shadow: 0 0 0 0 rgba(27, 186, 242, 0), 0 0 0 0 rgba(27, 186, 242, 0), inset 0 0 0 1px rgba(27, 186, 242, 0.4); } .bp3-editable-text.bp3-intent-primary.bp3-editable-text-editing::before { box-shadow: 0 0 0 1px #1bbaf2, 0 0 0 3px rgba(27, 186, 242, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.2); } .bp3-editable-text.bp3-intent-success .bp3-editable-text-input, .bp3-editable-text.bp3-intent-success .bp3-editable-text-content { color: #0f9960; } .bp3-editable-text.bp3-intent-success:hover::before { box-shadow: 0 0 0 0 rgba(15, 153, 96, 0), 0 0 0 0 rgba(15, 153, 96, 0), inset 0 0 0 1px rgba(15, 153, 96, 0.4); } .bp3-editable-text.bp3-intent-success.bp3-editable-text-editing::before { box-shadow: 0 0 0 1px #0f9960, 0 0 0 3px rgba(15, 153, 96, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.2); } .bp3-editable-text.bp3-intent-warning .bp3-editable-text-input, .bp3-editable-text.bp3-intent-warning .bp3-editable-text-content { color: #d9822b; } .bp3-editable-text.bp3-intent-warning:hover::before { box-shadow: 0 0 0 0 rgba(217, 130, 43, 0), 0 0 0 0 rgba(217, 130, 43, 0), inset 0 0 0 1px rgba(217, 130, 43, 0.4); } .bp3-editable-text.bp3-intent-warning.bp3-editable-text-editing::before { box-shadow: 0 0 0 1px #d9822b, 0 0 0 3px rgba(217, 130, 43, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.2); } .bp3-editable-text.bp3-intent-danger .bp3-editable-text-input, .bp3-editable-text.bp3-intent-danger .bp3-editable-text-content { color: #db3737; } .bp3-editable-text.bp3-intent-danger:hover::before { box-shadow: 0 0 0 0 rgba(219, 55, 55, 0), 0 0 0 0 rgba(219, 55, 55, 0), inset 0 0 0 1px rgba(219, 55, 55, 0.4); } .bp3-editable-text.bp3-intent-danger.bp3-editable-text-editing::before { box-shadow: 0 0 0 1px #db3737, 0 0 0 3px rgba(219, 55, 55, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.2); } .bp3-dark .bp3-editable-text:hover::before { box-shadow: 0 0 0 0 rgba(27, 186, 242, 0), 0 0 0 0 rgba(27, 186, 242, 0), inset 0 0 0 1px rgba(255, 255, 255, 0.15); } .bp3-dark .bp3-editable-text.bp3-editable-text-editing::before { box-shadow: 0 0 0 1px #1bbaf2, 0 0 0 3px rgba(27, 186, 242, 0.3), inset 0 0 0 1px rgba(16, 22, 26, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.4); background-color: rgba(16, 22, 26, 0.3); } .bp3-dark .bp3-editable-text.bp3-disabled::before { box-shadow: none; } .bp3-dark .bp3-editable-text.bp3-intent-primary .bp3-editable-text-content { color: #48aff0; } .bp3-dark .bp3-editable-text.bp3-intent-primary:hover::before { box-shadow: 0 0 0 0 rgba(72, 175, 240, 0), 0 0 0 0 rgba(72, 175, 240, 0), inset 0 0 0 1px rgba(72, 175, 240, 0.4); } .bp3-dark .bp3-editable-text.bp3-intent-primary.bp3-editable-text-editing::before { box-shadow: 0 0 0 1px #48aff0, 0 0 0 3px rgba(72, 175, 240, 0.3), inset 0 0 0 1px rgba(16, 22, 26, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.4); } .bp3-dark .bp3-editable-text.bp3-intent-success .bp3-editable-text-content { color: #3dcc91; } .bp3-dark .bp3-editable-text.bp3-intent-success:hover::before { box-shadow: 0 0 0 0 rgba(61, 204, 145, 0), 0 0 0 0 rgba(61, 204, 145, 0), inset 0 0 0 1px rgba(61, 204, 145, 0.4); } .bp3-dark .bp3-editable-text.bp3-intent-success.bp3-editable-text-editing::before { box-shadow: 0 0 0 1px #3dcc91, 0 0 0 3px rgba(61, 204, 145, 0.3), inset 0 0 0 1px rgba(16, 22, 26, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.4); } .bp3-dark .bp3-editable-text.bp3-intent-warning .bp3-editable-text-content { color: #ffb366; } .bp3-dark .bp3-editable-text.bp3-intent-warning:hover::before { box-shadow: 0 0 0 0 rgba(255, 179, 102, 0), 0 0 0 0 rgba(255, 179, 102, 0), inset 0 0 0 1px rgba(255, 179, 102, 0.4); } .bp3-dark .bp3-editable-text.bp3-intent-warning.bp3-editable-text-editing::before { box-shadow: 0 0 0 1px #ffb366, 0 0 0 3px rgba(255, 179, 102, 0.3), inset 0 0 0 1px rgba(16, 22, 26, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.4); } .bp3-dark .bp3-editable-text.bp3-intent-danger .bp3-editable-text-content { color: #ff7373; } .bp3-dark .bp3-editable-text.bp3-intent-danger:hover::before { box-shadow: 0 0 0 0 rgba(255, 115, 115, 0), 0 0 0 0 rgba(255, 115, 115, 0), inset 0 0 0 1px rgba(255, 115, 115, 0.4); } .bp3-dark .bp3-editable-text.bp3-intent-danger.bp3-editable-text-editing::before { box-shadow: 0 0 0 1px #ff7373, 0 0 0 3px rgba(255, 115, 115, 0.3), inset 0 0 0 1px rgba(16, 22, 26, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.4); } .bp3-editable-text-input, .bp3-editable-text-content { display: inherit; position: relative; min-width: inherit; max-width: inherit; vertical-align: top; text-transform: inherit; letter-spacing: inherit; color: inherit; font: inherit; resize: none; } .bp3-editable-text-input { border: none; box-shadow: none; background: none; width: 100%; padding: 0; white-space: pre-wrap; } .bp3-editable-text-input::placeholder { opacity: 1; color: rgba(92, 112, 128, 0.5); } .bp3-editable-text-input:focus { outline: none; } .bp3-editable-text-input::-ms-clear { display: none; } .bp3-editable-text-content { overflow: hidden; padding-right: 2px; text-overflow: ellipsis; white-space: pre; } .bp3-editable-text-editing > .bp3-editable-text-content { position: absolute; left: 0; visibility: hidden; } .bp3-editable-text-placeholder > .bp3-editable-text-content { color: rgba(92, 112, 128, 0.5); } .bp3-dark .bp3-editable-text-placeholder > .bp3-editable-text-content { color: rgba(191, 204, 214, 0.5); } .bp3-editable-text.bp3-multiline { display: block; } .bp3-editable-text.bp3-multiline .bp3-editable-text-content { overflow: auto; white-space: pre-wrap; word-wrap: break-word; } /* * Copyright 2017 Palantir Technologies, Inc. All rights reserved. */ /* * Copyright 2017 Palantir Technologies, Inc. All rights reserved. */ /* * Copyright 2017 Palantir Technologies, Inc. All rights reserved. */ /* CSS `border` property issues: - An element can only have one border. - Borders can't stack with shadows. - Borders modify the size of the element they're applied to. - Border positioning requires the extra `box-sizing` property. `box-shadow` doesn't have these issues, we're using it instead of `border`. */ /* Overlay shadows are used for default buttons floating on top of other elements. This way, the shadows blend with the colors beneath it. Switches and slider handles both use these variables. */ /* CSS `border` property issues: - An element can only have one border. - Borders can't stack with shadows. - Borders modify the size of the element they're applied to. - Border positioning requires the extra `box-sizing` property. `box-shadow` doesn't have these issues, we're using it instead of `border`. */ /* Overlay shadows are used for default buttons floating on top of other elements. This way, the shadows blend with the colors beneath it. Switches and slider handles both use these variables. */ /* * Copyright 2017 Palantir Technologies, Inc. All rights reserved. */ /* * Copyright 2017 Palantir Technologies, Inc. All rights reserved. */ /* * Copyright 2017 Palantir Technologies, Inc. All rights reserved. */ /* CSS `border` property issues: - An element can only have one border. - Borders can't stack with shadows. - Borders modify the size of the element they're applied to. - Border positioning requires the extra `box-sizing` property. `box-shadow` doesn't have these issues, we're using it instead of `border`. */ /* Overlay shadows are used for default buttons floating on top of other elements. This way, the shadows blend with the colors beneath it. Switches and slider handles both use these variables. */ /* Control groups Markup:

Styleguide control-group */ .bp3-control-group { transform: translateZ(0); display: flex; flex-direction: row; align-items: stretch; /* Responsive control groups Markup:

Styleguide control-group-fill */ /* Vertical control groups Markup:

Styleguide control-group-vertical */ } .bp3-control-group > * { flex-grow: 0; flex-shrink: 0; } .bp3-control-group > .bp3-fill { flex-grow: 1; flex-shrink: 1; } .bp3-control-group .bp3-button, .bp3-control-group .bp3-html-select, .bp3-control-group .bp3-input, .bp3-control-group .bp3-select { position: relative; } .bp3-control-group .bp3-input { z-index: 2; border-radius: inherit; } .bp3-control-group .bp3-input:focus { z-index: 14; border-radius: 0; } .bp3-control-group .bp3-input[class*="bp3-intent"] { z-index: 13; } .bp3-control-group .bp3-input[class*="bp3-intent"]:focus { z-index: 15; } .bp3-control-group .bp3-input[readonly], .bp3-control-group .bp3-input:disabled, .bp3-control-group .bp3-input.bp3-disabled { z-index: 1; } .bp3-control-group .bp3-input-group[class*="bp3-intent"] .bp3-input { z-index: 13; } .bp3-control-group .bp3-input-group[class*="bp3-intent"] .bp3-input:focus { z-index: 15; } .bp3-control-group .bp3-button, .bp3-control-group .bp3-html-select select, .bp3-control-group .bp3-select select { transform: translateZ(0); z-index: 4; border-radius: inherit; } .bp3-control-group .bp3-button:focus, .bp3-control-group .bp3-html-select select:focus, .bp3-control-group .bp3-select select:focus { z-index: 5; } .bp3-control-group .bp3-button:hover, .bp3-control-group .bp3-html-select select:hover, .bp3-control-group .bp3-select select:hover { z-index: 6; } .bp3-control-group .bp3-button:active, .bp3-control-group .bp3-html-select select:active, .bp3-control-group .bp3-select select:active { z-index: 7; } .bp3-control-group .bp3-button[readonly], .bp3-control-group .bp3-button:disabled, .bp3-control-group .bp3-button.bp3-disabled, .bp3-control-group .bp3-html-select select[readonly], .bp3-control-group .bp3-html-select select:disabled, .bp3-control-group .bp3-html-select select.bp3-disabled, .bp3-control-group .bp3-select select[readonly], .bp3-control-group .bp3-select select:disabled, .bp3-control-group .bp3-select select.bp3-disabled { z-index: 3; } .bp3-control-group .bp3-button[class*="bp3-intent"], .bp3-control-group .bp3-html-select select[class*="bp3-intent"], .bp3-control-group .bp3-select select[class*="bp3-intent"] { z-index: 9; } .bp3-control-group .bp3-button[class*="bp3-intent"]:focus, .bp3-control-group .bp3-html-select select[class*="bp3-intent"]:focus, .bp3-control-group .bp3-select select[class*="bp3-intent"]:focus { z-index: 10; } .bp3-control-group .bp3-button[class*="bp3-intent"]:hover, .bp3-control-group .bp3-html-select select[class*="bp3-intent"]:hover, .bp3-control-group .bp3-select select[class*="bp3-intent"]:hover { z-index: 11; } .bp3-control-group .bp3-button[class*="bp3-intent"]:active, .bp3-control-group .bp3-html-select select[class*="bp3-intent"]:active, .bp3-control-group .bp3-select select[class*="bp3-intent"]:active { z-index: 12; } .bp3-control-group .bp3-button[class*="bp3-intent"][readonly], .bp3-control-group .bp3-button[class*="bp3-intent"]:disabled, .bp3-control-group .bp3-button[class*="bp3-intent"].bp3-disabled, .bp3-control-group .bp3-html-select select[class*="bp3-intent"][readonly], .bp3-control-group .bp3-html-select select[class*="bp3-intent"]:disabled, .bp3-control-group .bp3-html-select select[class*="bp3-intent"].bp3-disabled, .bp3-control-group .bp3-select select[class*="bp3-intent"][readonly], .bp3-control-group .bp3-select select[class*="bp3-intent"]:disabled, .bp3-control-group .bp3-select select[class*="bp3-intent"].bp3-disabled { z-index: 8; } .bp3-control-group .bp3-input-group > .bp3-icon, .bp3-control-group .bp3-input-group > .bp3-button, .bp3-control-group .bp3-input-group > .bp3-input-action { z-index: 16; } .bp3-control-group .bp3-select::after, .bp3-control-group .bp3-html-select::after, .bp3-control-group .bp3-select > .bp3-icon, .bp3-control-group .bp3-html-select > .bp3-icon { z-index: 17; } .bp3-control-group:not(.bp3-vertical) > * { margin-right: -1px; } .bp3-dark .bp3-control-group:not(.bp3-vertical) > * { margin-right: 0; } .bp3-dark .bp3-control-group:not(.bp3-vertical) > .bp3-button + .bp3-button { margin-left: 1px; } .bp3-control-group .bp3-popover-wrapper, .bp3-control-group .bp3-popover-target { border-radius: inherit; } .bp3-control-group > :first-child { border-radius: 0 0 0 0; } .bp3-control-group > :last-child { margin-right: 0; border-radius: 0 0 0 0; } .bp3-control-group > :only-child { margin-right: 0; border-radius: 0; } .bp3-control-group .bp3-input-group .bp3-button { border-radius: 0; } .bp3-control-group > .bp3-fill { flex: 1 1 auto; } .bp3-control-group.bp3-fill > *:not(.bp3-fixed) { flex: 1 1 auto; } .bp3-control-group.bp3-vertical { flex-direction: column; } .bp3-control-group.bp3-vertical > * { margin-top: -1px; } .bp3-control-group.bp3-vertical > :first-child { margin-top: 0; border-radius: 0 0 0 0; } .bp3-control-group.bp3-vertical > :last-child { border-radius: 0 0 0 0; } /* CSS `border` property issues: - An element can only have one border. - Borders can't stack with shadows. - Borders modify the size of the element they're applied to. - Border positioning requires the extra `box-sizing` property. `box-shadow` doesn't have these issues, we're using it instead of `border`. */ /* Overlay shadows are used for default buttons floating on top of other elements. This way, the shadows blend with the colors beneath it. Switches and slider handles both use these variables. */ .bp3-control { display: block; position: relative; margin-bottom: 10px; cursor: pointer; text-transform: none; /* Checkbox Markup: Checkbox :checked - Checked :disabled - Disabled. Also add .bp3-disabled to .bp3-control to change text color (not shown below). :indeterminate - Indeterminate. Note that this style can only be achieved via JavaScript input.indeterminate = true. .bp3-align-right - Right-aligned indicator .bp3-large - Large Styleguide checkbox */ /* Radio Markup: Radio :checked - Selected :disabled - Disabled. Also add .bp3-disabled to .bp3-control to change text color (not shown below). .bp3-align-right - Right-aligned indicator .bp3-large - Large Styleguide radio */ /* Switch Markup: Switch :checked - Selected :disabled - Disabled. Also add .bp3-disabled to .bp3-control to change text color (not shown below). .bp3-align-right - Right-aligned indicator .bp3-large - Large Styleguide switch */ /* Inline labels Markup:

A group of related options First Second Third

Styleguide checkbox-inline */ } .bp3-control input:checked ~ .bp3-control-indicator { box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.4), inset 0 -1px 0 rgba(16, 22, 26, 0.2); background-color: #1bbaf2; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); color: #ffffff; } .bp3-control:hover input:checked ~ .bp3-control-indicator { box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.4), inset 0 -1px 0 rgba(16, 22, 26, 0.2); background-color: #106ba3; } .bp3-control input:not(:disabled):active:checked ~ .bp3-control-indicator { box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.4), inset 0 1px 2px rgba(16, 22, 26, 0.2); background: #0e5a8a; } .bp3-control input:disabled:checked ~ .bp3-control-indicator { box-shadow: none; background: rgba(27, 186, 242, 0.5); } .bp3-dark .bp3-control input:checked ~ .bp3-control-indicator { box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.4); } .bp3-dark .bp3-control:hover input:checked ~ .bp3-control-indicator { box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.4); background-color: #106ba3; } .bp3-dark .bp3-control input:not(:disabled):active:checked ~ .bp3-control-indicator { box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.4), inset 0 1px 2px rgba(16, 22, 26, 0.2); background-color: #0e5a8a; } .bp3-dark .bp3-control input:disabled:checked ~ .bp3-control-indicator { box-shadow: none; background: rgba(14, 90, 138, 0.5); } .bp3-control:not(.bp3-align-right) { padding-left: 26px; } .bp3-control:not(.bp3-align-right) .bp3-control-indicator { margin-left: -26px; } .bp3-control.bp3-align-right { padding-right: 26px; } .bp3-control.bp3-align-right .bp3-control-indicator { margin-right: -26px; } .bp3-control.bp3-disabled { cursor: not-allowed; color: rgba(92, 112, 128, 0.5); } .bp3-control.bp3-inline { display: inline-block; margin-right: 20px; } .bp3-control input { position: absolute; top: 0; left: 0; opacity: 0; z-index: -1; } .bp3-control .bp3-control-indicator { display: inline-block; position: relative; margin-top: -3px; margin-right: 10px; border: none; box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.2), inset 0 -1px 0 rgba(16, 22, 26, 0.1); background-clip: padding-box; background-color: #f5f8fa; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)); cursor: pointer; width: 1em; height: 1em; vertical-align: middle; font-size: 16px; user-select: none; } .bp3-control .bp3-control-indicator::before { display: block; width: 1em; height: 1em; content: ""; } .bp3-control:hover .bp3-control-indicator { background-color: #ebf1f5; } .bp3-control input:not(:disabled):active ~ .bp3-control-indicator { box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.2), inset 0 1px 2px rgba(16, 22, 26, 0.2); background: #d8e1e8; } .bp3-control input:disabled ~ .bp3-control-indicator { box-shadow: none; background: rgba(206, 217, 224, 0.5); cursor: not-allowed; } .bp3-control input:focus ~ .bp3-control-indicator { outline: rgba(19, 124, 189, 0.6) auto 2px; outline-offset: 2px; -moz-outline-radius: 6px; } .bp3-control.bp3-align-right .bp3-control-indicator { float: right; margin-top: 1px; margin-left: 10px; } .bp3-control.bp3-large { font-size: 16px; } .bp3-control.bp3-large:not(.bp3-align-right) { padding-left: 30px; } .bp3-control.bp3-large:not(.bp3-align-right) .bp3-control-indicator { margin-left: -30px; } .bp3-control.bp3-large.bp3-align-right { padding-right: 30px; } .bp3-control.bp3-large.bp3-align-right .bp3-control-indicator { margin-right: -30px; } .bp3-control.bp3-large .bp3-control-indicator { font-size: 20px; } .bp3-control.bp3-large.bp3-align-right .bp3-control-indicator { margin-top: 0; } .bp3-control.bp3-checkbox input:indeterminate ~ .bp3-control-indicator { box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.4), inset 0 -1px 0 rgba(16, 22, 26, 0.2); background-color: #1bbaf2; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); color: #ffffff; } .bp3-control.bp3-checkbox:hover input:indeterminate ~ .bp3-control-indicator { box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.4), inset 0 -1px 0 rgba(16, 22, 26, 0.2); background-color: #106ba3; } .bp3-control.bp3-checkbox input:not(:disabled):active:indeterminate ~ .bp3-control-indicator { box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.4), inset 0 1px 2px rgba(16, 22, 26, 0.2); background: #0e5a8a; } .bp3-control.bp3-checkbox input:disabled:indeterminate ~ .bp3-control-indicator { box-shadow: none; background: rgba(27, 186, 242, 0.5); } .bp3-dark .bp3-control.bp3-checkbox input:indeterminate ~ .bp3-control-indicator { box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.4); } .bp3-dark .bp3-control.bp3-checkbox:hover input:indeterminate ~ .bp3-control-indicator { box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.4); background-color: #106ba3; } .bp3-dark .bp3-control.bp3-checkbox input:not(:disabled):active:indeterminate ~ .bp3-control-indicator { box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.4), inset 0 1px 2px rgba(16, 22, 26, 0.2); background-color: #0e5a8a; } .bp3-dark .bp3-control.bp3-checkbox input:disabled:indeterminate ~ .bp3-control-indicator { box-shadow: none; background: rgba(14, 90, 138, 0.5); } .bp3-control.bp3-checkbox .bp3-control-indicator { border-radius: 0; } .bp3-control.bp3-checkbox input:checked ~ .bp3-control-indicator::before { background-image: svg-icon("16px/small-tick.svg", (path: (fill: #ffffff))); } .bp3-control.bp3-checkbox input:indeterminate ~ .bp3-control-indicator::before { background-image: svg-icon("16px/small-minus.svg", (path: (fill: #ffffff))); } .bp3-control.bp3-radio .bp3-control-indicator { border-radius: 50%; } .bp3-control.bp3-radio input:checked ~ .bp3-control-indicator::before { background-image: radial-gradient(#ffffff, #ffffff 28%, transparent 32%); } .bp3-control.bp3-radio input:checked:disabled ~ .bp3-control-indicator::before { opacity: 0.5; } .bp3-control.bp3-radio input:focus ~ .bp3-control-indicator { -moz-outline-radius: 16px; } .bp3-control.bp3-switch input ~ .bp3-control-indicator { background: rgba(167, 182, 194, 0.5); } .bp3-control.bp3-switch:hover input ~ .bp3-control-indicator { background: rgba(115, 134, 148, 0.5); } .bp3-control.bp3-switch input:not(:disabled):active ~ .bp3-control-indicator { background: rgba(92, 112, 128, 0.5); } .bp3-control.bp3-switch input:disabled ~ .bp3-control-indicator { background: rgba(206, 217, 224, 0.5); } .bp3-control.bp3-switch input:checked ~ .bp3-control-indicator { background: #1bbaf2; } .bp3-control.bp3-switch:hover input:checked ~ .bp3-control-indicator { background: #106ba3; } .bp3-control.bp3-switch input:checked:not(:disabled):active ~ .bp3-control-indicator { background: #0e5a8a; } .bp3-control.bp3-switch input:checked:disabled ~ .bp3-control-indicator { background: rgba(19, 124, 189, 0.5); } .bp3-control.bp3-switch:not(.bp3-align-right) { padding-left: 38px; } .bp3-control.bp3-switch:not(.bp3-align-right) .bp3-control-indicator { margin-left: -38px; } .bp3-control.bp3-switch.bp3-align-right { padding-right: 38px; } .bp3-control.bp3-switch.bp3-align-right .bp3-control-indicator { margin-right: -38px; } .bp3-control.bp3-switch .bp3-control-indicator { border: none; border-radius: 1.75em; box-shadow: none !important; width: auto; min-width: 1.75em; transition: background-color 100ms cubic-bezier(0.4, 1, 0.75, 0.9); } .bp3-control.bp3-switch .bp3-control-indicator::before { position: absolute; left: 0; margin: 2px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.2), 0 1px 1px rgba(16, 22, 26, 0.2); background: #ffffff; width: calc(1em - 4px); height: calc(1em - 4px); transition: left 100ms cubic-bezier(0.4, 1, 0.75, 0.9); } .bp3-control.bp3-switch input:checked ~ .bp3-control-indicator::before { left: calc(100% - 1em); } .bp3-control.bp3-switch.bp3-large:not(.bp3-align-right) { padding-left: 45px; } .bp3-control.bp3-switch.bp3-large:not(.bp3-align-right) .bp3-control-indicator { margin-left: -45px; } .bp3-control.bp3-switch.bp3-large.bp3-align-right { padding-right: 45px; } .bp3-control.bp3-switch.bp3-large.bp3-align-right .bp3-control-indicator { margin-right: -45px; } .bp3-dark .bp3-control.bp3-switch input ~ .bp3-control-indicator { background: rgba(16, 22, 26, 0.5); } .bp3-dark .bp3-control.bp3-switch:hover input ~ .bp3-control-indicator { background: rgba(16, 22, 26, 0.7); } .bp3-dark .bp3-control.bp3-switch input:not(:disabled):active ~ .bp3-control-indicator { background: rgba(16, 22, 26, 0.9); } .bp3-dark .bp3-control.bp3-switch input:disabled ~ .bp3-control-indicator { background: rgba(57, 75, 89, 0.5); } .bp3-dark .bp3-control.bp3-switch input:checked ~ .bp3-control-indicator { background: #1bbaf2; } .bp3-dark .bp3-control.bp3-switch:hover input:checked ~ .bp3-control-indicator { background: #106ba3; } .bp3-dark .bp3-control.bp3-switch input:checked:not(:disabled):active ~ .bp3-control-indicator { background: #0e5a8a; } .bp3-dark .bp3-control.bp3-switch input:checked:disabled ~ .bp3-control-indicator { background: rgba(14, 90, 138, 0.5); } .bp3-dark .bp3-control.bp3-switch .bp3-control-indicator::before { box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.4); background: #394b59; } .bp3-dark .bp3-control.bp3-switch input:checked ~ .bp3-control-indicator::before { box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.4); } .bp3-control.bp3-switch .bp3-switch-inner-text { text-align: center; font-size: 0.7em; } .bp3-control.bp3-switch .bp3-control-indicator-child:first-child { visibility: hidden; margin-right: 1.2em; margin-left: 0.5em; line-height: 0; } .bp3-control.bp3-switch .bp3-control-indicator-child:last-child { visibility: visible; margin-right: 0.5em; margin-left: 1.2em; line-height: 1em; } .bp3-control.bp3-switch input:checked ~ .bp3-control-indicator .bp3-control-indicator-child:first-child { visibility: visible; line-height: 1em; } .bp3-control.bp3-switch input:checked ~ .bp3-control-indicator .bp3-control-indicator-child:last-child { visibility: hidden; line-height: 0; } .bp3-dark .bp3-control { color: #f5f8fa; } .bp3-dark .bp3-control.bp3-disabled { color: rgba(191, 204, 214, 0.5); } .bp3-dark .bp3-control .bp3-control-indicator { box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.4); background-color: #394b59; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0)); } .bp3-dark .bp3-control:hover .bp3-control-indicator { background-color: #30404d; } .bp3-dark .bp3-control input:not(:disabled):active ~ .bp3-control-indicator { box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.6), inset 0 1px 2px rgba(16, 22, 26, 0.2); background: #202b33; } .bp3-dark .bp3-control input:disabled ~ .bp3-control-indicator { box-shadow: none; background: rgba(57, 75, 89, 0.5); cursor: not-allowed; } .bp3-dark .bp3-control.bp3-checkbox input:disabled:checked ~ .bp3-control-indicator, .bp3-dark .bp3-control.bp3-checkbox input:disabled:indeterminate ~ .bp3-control-indicator { color: rgba(191, 204, 214, 0.5); } /* CSS `border` property issues: - An element can only have one border. - Borders can't stack with shadows. - Borders modify the size of the element they're applied to. - Border positioning requires the extra `box-sizing` property. `box-shadow` doesn't have these issues, we're using it instead of `border`. */ /* Overlay shadows are used for default buttons floating on top of other elements. This way, the shadows blend with the colors beneath it. Switches and slider handles both use these variables. */ /* File input Markup: Choose file... :disabled - Disabled .bp3-large - Larger size .bp3-fill - Take up full width of parent element .bp3-file-input-has-selection - User has made a selection Styleguide file-input */ .bp3-file-input { display: inline-block; position: relative; cursor: pointer; height: 30px; } .bp3-file-input input { opacity: 0; margin: 0; min-width: 200px; } .bp3-file-input input:disabled + .bp3-file-upload-input, .bp3-file-input input.bp3-disabled + .bp3-file-upload-input { box-shadow: none; background: rgba(206, 217, 224, 0.5); cursor: not-allowed; color: rgba(92, 112, 128, 0.5); resize: none; } .bp3-file-input input:disabled + .bp3-file-upload-input::after, .bp3-file-input input.bp3-disabled + .bp3-file-upload-input::after { outline: none; box-shadow: none; background-color: rgba(206, 217, 224, 0.5); background-image: none; cursor: not-allowed; color: rgba(92, 112, 128, 0.5); } .bp3-file-input input:disabled + .bp3-file-upload-input::after.bp3-active, .bp3-file-input input:disabled + .bp3-file-upload-input::after.bp3-active:hover, .bp3-file-input input.bp3-disabled + .bp3-file-upload-input::after.bp3-active, .bp3-file-input input.bp3-disabled + .bp3-file-upload-input::after.bp3-active:hover { background: rgba(206, 217, 224, 0.7); } .bp3-dark .bp3-file-input input:disabled + .bp3-file-upload-input, .bp3-dark .bp3-file-input input.bp3-disabled + .bp3-file-upload-input { box-shadow: none; background: rgba(57, 75, 89, 0.5); color: rgba(191, 204, 214, 0.5); } .bp3-dark .bp3-file-input input:disabled + .bp3-file-upload-input::after, .bp3-dark .bp3-file-input input.bp3-disabled + .bp3-file-upload-input::after { box-shadow: none; background-color: rgba(57, 75, 89, 0.5); background-image: none; color: rgba(191, 204, 214, 0.5); } .bp3-dark .bp3-file-input input:disabled + .bp3-file-upload-input::after.bp3-active, .bp3-dark .bp3-file-input input.bp3-disabled + .bp3-file-upload-input::after.bp3-active { background: rgba(57, 75, 89, 0.7); } .bp3-file-input.bp3-file-input-has-selection .bp3-file-upload-input { color: #182026; } .bp3-dark .bp3-file-input.bp3-file-input-has-selection .bp3-file-upload-input { color: #f5f8fa; } .bp3-file-input.bp3-fill { width: 100%; } .bp3-file-input.bp3-large, .bp3-large .bp3-file-input { height: 40px; } .bp3-file-input .bp3-file-upload-input-custom-text::after { content: attr(bp3-button-text); } .bp3-file-upload-input { outline: none; border: none; border-radius: 0; box-shadow: 0 0 0 0 rgba(27, 186, 242, 0), 0 0 0 0 rgba(27, 186, 242, 0), inset 0 0 0 1px #e6eaee, inset 1px 1px 1px #e6eaee; background: #ffffff; height: 30px; padding: 0 10px; vertical-align: middle; line-height: 30px; color: #182026; font-size: 14px; font-weight: 400; transition: box-shadow 100ms cubic-bezier(0.4, 1, 0.75, 0.9); appearance: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; position: absolute; top: 0; right: 0; left: 0; padding-right: 80px; color: rgba(92, 112, 128, 0.5); user-select: none; } .bp3-file-upload-input::placeholder { opacity: 1; color: rgba(92, 112, 128, 0.5); } .bp3-file-upload-input:focus, .bp3-file-upload-input.bp3-active { box-shadow: 0 0 0 1px #1bbaf2, 0 0 0 3px rgba(27, 186, 242, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.2); } .bp3-file-upload-input[type="search"], .bp3-file-upload-input.bp3-round { border-radius: 30px; box-sizing: border-box; padding-left: 10px; } .bp3-file-upload-input[readonly] { box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.15); } .bp3-file-upload-input:disabled, .bp3-file-upload-input.bp3-disabled { box-shadow: none; background: rgba(206, 217, 224, 0.5); cursor: not-allowed; color: rgba(92, 112, 128, 0.5); resize: none; } .bp3-file-upload-input::after { box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.2), inset 0 -1px 0 rgba(16, 22, 26, 0.1); background-color: #f5f8fa; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)); color: #182026; min-width: 24px; min-height: 24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; position: absolute; top: 0; right: 0; margin: 3px; border-radius: 0; width: 70px; text-align: center; line-height: 24px; content: "Browse"; } .bp3-file-upload-input::after:hover { box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.2), inset 0 -1px 0 rgba(16, 22, 26, 0.1); background-clip: padding-box; background-color: #ebf1f5; } .bp3-file-upload-input::after:active, .bp3-file-upload-input::after.bp3-active { box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.2), inset 0 1px 2px rgba(16, 22, 26, 0.2); background-color: #d8e1e8; background-image: none; } .bp3-file-upload-input::after:disabled, .bp3-file-upload-input::after.bp3-disabled { outline: none; box-shadow: none; background-color: rgba(206, 217, 224, 0.5); background-image: none; cursor: not-allowed; color: rgba(92, 112, 128, 0.5); } .bp3-file-upload-input::after:disabled.bp3-active, .bp3-file-upload-input::after:disabled.bp3-active:hover, .bp3-file-upload-input::after.bp3-disabled.bp3-active, .bp3-file-upload-input::after.bp3-disabled.bp3-active:hover { background: rgba(206, 217, 224, 0.7); } .bp3-file-upload-input:hover::after { box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.2), inset 0 -1px 0 rgba(16, 22, 26, 0.1); background-clip: padding-box; background-color: #ebf1f5; } .bp3-file-upload-input:active::after { box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.2), inset 0 1px 2px rgba(16, 22, 26, 0.2); background-color: #d8e1e8; background-image: none; } .bp3-large .bp3-file-upload-input { height: 40px; line-height: 40px; font-size: 16px; padding-right: 95px; } .bp3-large .bp3-file-upload-input[type="search"], .bp3-large .bp3-file-upload-input.bp3-round { padding: 0 15px; } .bp3-large .bp3-file-upload-input::after { min-width: 30px; min-height: 30px; margin: 5px; width: 85px; line-height: 30px; } .bp3-dark .bp3-file-upload-input { box-shadow: 0 0 0 0 rgba(27, 186, 242, 0), 0 0 0 0 rgba(27, 186, 242, 0), 0 0 0 0 rgba(27, 186, 242, 0), inset 0 0 0 1px rgba(16, 22, 26, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.4); background: rgba(16, 22, 26, 0.3); color: #f5f8fa; color: rgba(191, 204, 214, 0.5); } .bp3-dark .bp3-file-upload-input::placeholder { color: rgba(191, 204, 214, 0.5); } .bp3-dark .bp3-file-upload-input:focus { box-shadow: 0 0 0 1px #1bbaf2, 0 0 0 1px #1bbaf2, 0 0 0 3px rgba(27, 186, 242, 0.3), inset 0 0 0 1px rgba(16, 22, 26, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.4); } .bp3-dark .bp3-file-upload-input[readonly] { box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.4); } .bp3-dark .bp3-file-upload-input:disabled, .bp3-dark .bp3-file-upload-input.bp3-disabled { box-shadow: none; background: rgba(57, 75, 89, 0.5); color: rgba(191, 204, 214, 0.5); } .bp3-dark .bp3-file-upload-input::after { box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.4); background-color: #394b59; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0)); color: #f5f8fa; } .bp3-dark .bp3-file-upload-input::after:hover, .bp3-dark .bp3-file-upload-input::after:active, .bp3-dark .bp3-file-upload-input::after.bp3-active { color: #f5f8fa; } .bp3-dark .bp3-file-upload-input::after:hover { box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.4); background-color: #30404d; } .bp3-dark .bp3-file-upload-input::after:active, .bp3-dark .bp3-file-upload-input::after.bp3-active { box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.6), inset 0 1px 2px rgba(16, 22, 26, 0.2); background-color: #202b33; background-image: none; } .bp3-dark .bp3-file-upload-input::after:disabled, .bp3-dark .bp3-file-upload-input::after.bp3-disabled { box-shadow: none; background-color: rgba(57, 75, 89, 0.5); background-image: none; color: rgba(191, 204, 214, 0.5); } .bp3-dark .bp3-file-upload-input::after:disabled.bp3-active, .bp3-dark .bp3-file-upload-input::after.bp3-disabled.bp3-active { background: rgba(57, 75, 89, 0.7); } .bp3-dark .bp3-file-upload-input::after .bp3-button-spinner .bp3-spinner-head { background: rgba(16, 22, 26, 0.5); stroke: #8a9ba8; } .bp3-dark .bp3-file-upload-input:hover::after { box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.4); background-color: #30404d; } .bp3-dark .bp3-file-upload-input:active::after { box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.6), inset 0 1px 2px rgba(16, 22, 26, 0.2); background-color: #202b33; background-image: none; } .bp3-file-upload-input::after { box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.2), inset 0 -1px 0 rgba(16, 22, 26, 0.1); } /* * Copyright 2017 Palantir Technologies, Inc. All rights reserved. */ /* * Copyright 2017 Palantir Technologies, Inc. All rights reserved. */ /* * Copyright 2017 Palantir Technologies, Inc. All rights reserved. */ /* CSS `border` property issues: - An element can only have one border. - Borders can't stack with shadows. - Borders modify the size of the element they're applied to. - Border positioning requires the extra `box-sizing` property. `box-shadow` doesn't have these issues, we're using it instead of `border`. */ /* Overlay shadows are used for default buttons floating on top of other elements. This way, the shadows blend with the colors beneath it. Switches and slider handles both use these variables. */ /* Form groups Markup:

Label (required)

Please enter a value

:disabled - Disable the input. .bp3-disabled - Disabled styles. Input must be disabled separately via attribute. .bp3-inline - Label and content appear side by side. .bp3-intent-primary - Apply intent to form group and input separately. Styleguide form-group */ .bp3-form-group { display: flex; flex-direction: column; margin: 0 0 15px; } .bp3-form-group label.bp3-label { margin-bottom: 5px; } .bp3-form-group .bp3-control { margin-top: 7px; } .bp3-form-group .bp3-form-helper-text { margin-top: 5px; color: #5c7080; font-size: 12px; } .bp3-form-group.bp3-intent-primary .bp3-form-helper-text { color: #106ba3; } .bp3-form-group.bp3-intent-success .bp3-form-helper-text { color: #0d8050; } .bp3-form-group.bp3-intent-warning .bp3-form-helper-text { color: #bf7326; } .bp3-form-group.bp3-intent-danger .bp3-form-helper-text { color: #c23030; } .bp3-form-group.bp3-inline { flex-direction: row; align-items: flex-start; } .bp3-form-group.bp3-inline.bp3-large label.bp3-label { margin: 0 10px 0 0; line-height: 40px; } .bp3-form-group.bp3-inline label.bp3-label { margin: 0 10px 0 0; line-height: 30px; } .bp3-form-group.bp3-disabled .bp3-label, .bp3-form-group.bp3-disabled .bp3-text-muted, .bp3-form-group.bp3-disabled .bp3-form-helper-text { color: rgba(92, 112, 128, 0.5) !important; } .bp3-dark .bp3-form-group.bp3-intent-primary .bp3-form-helper-text { color: #48aff0; } .bp3-dark .bp3-form-group.bp3-intent-success .bp3-form-helper-text { color: #3dcc91; } .bp3-dark .bp3-form-group.bp3-intent-warning .bp3-form-helper-text { color: #ffb366; } .bp3-dark .bp3-form-group.bp3-intent-danger .bp3-form-helper-text { color: #ff7373; } .bp3-dark .bp3-form-group .bp3-form-helper-text { color: #bfccd6; } .bp3-dark .bp3-form-group.bp3-disabled .bp3-label, .bp3-dark .bp3-form-group.bp3-disabled .bp3-text-muted, .bp3-dark .bp3-form-group.bp3-disabled .bp3-form-helper-text { color: rgba(191, 204, 214, 0.5) !important; } /* CSS `border` property issues: - An element can only have one border. - Borders can't stack with shadows. - Borders modify the size of the element they're applied to. - Border positioning requires the extra `box-sizing` property. `box-shadow` doesn't have these issues, we're using it instead of `border`. */ /* Overlay shadows are used for default buttons floating on top of other elements. This way, the shadows blend with the colors beneath it. Switches and slider handles both use these variables. */ /* Input groups Markup:

:disabled - Disabled input. Must be added separately to the <input> and <button>. Also add .bp3-disabled to .bp3-input-group for icon coloring (not shown below). .bp3-round - Rounded caps. Button will also be rounded. .bp3-large - Large group. Children will adjust size accordingly. .bp3-small - Small group. Children will adjust size accordingly. .bp3-intent-primary - Primary intent. (All 4 intents are supported.) .bp3-fill - Take up full width of parent element. Styleguide input-group */ .bp3-input-group { display: block; position: relative; } .bp3-input-group .bp3-input { position: relative; width: 100%; } .bp3-input-group .bp3-input:not(:first-child) { padding-left: 30px; } .bp3-input-group .bp3-input:not(:last-child) { padding-right: 30px; } .bp3-input-group .bp3-input-action, .bp3-input-group > .bp3-button, .bp3-input-group > .bp3-icon { position: absolute; top: 0; } .bp3-input-group .bp3-input-action:first-child, .bp3-input-group > .bp3-button:first-child, .bp3-input-group > .bp3-icon:first-child { left: 0; } .bp3-input-group .bp3-input-action:last-child, .bp3-input-group > .bp3-button:last-child, .bp3-input-group > .bp3-icon:last-child { right: 0; } .bp3-input-group .bp3-button { min-width: 24px; min-height: 24px; margin: 3px; padding: 0 7px; } .bp3-input-group .bp3-button:empty { padding: 0; } .bp3-input-group > .bp3-icon { z-index: 1; color: #5c7080; } .bp3-input-group > .bp3-icon:empty { line-height: 1; font-family: "Icons16", sans-serif; font-size: 16px; font-weight: 400; font-style: normal; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } .bp3-input-group > .bp3-icon, .bp3-input-group .bp3-input-action > .bp3-spinner { margin: 7px; } .bp3-input-group .bp3-tag { margin: 5px; } .bp3-input-group .bp3-input:not(:focus) + .bp3-button.bp3-minimal:not(:hover):not(:focus), .bp3-input-group .bp3-input:not(:focus) + .bp3-input-action .bp3-button.bp3-minimal:not(:hover):not(:focus) { color: #5c7080; } .bp3-dark .bp3-input-group .bp3-input:not(:focus) + .bp3-button.bp3-minimal:not(:hover):not(:focus), .bp3-dark .bp3-input-group .bp3-input:not(:focus) + .bp3-input-action .bp3-button.bp3-minimal:not(:hover):not(:focus) { color: #bfccd6; } .bp3-input-group .bp3-input:not(:focus) + .bp3-button.bp3-minimal:not(:hover):not(:focus) .bp3-icon, .bp3-input-group .bp3-input:not(:focus) + .bp3-button.bp3-minimal:not(:hover):not(:focus) .bp3-icon-standard, .bp3-input-group .bp3-input:not(:focus) + .bp3-button.bp3-minimal:not(:hover):not(:focus) .bp3-icon-large, .bp3-input-group .bp3-input:not(:focus) + .bp3-input-action .bp3-button.bp3-minimal:not(:hover):not(:focus) .bp3-icon, .bp3-input-group .bp3-input:not(:focus) + .bp3-input-action .bp3-button.bp3-minimal:not(:hover):not(:focus) .bp3-icon-standard, .bp3-input-group .bp3-input:not(:focus) + .bp3-input-action .bp3-button.bp3-minimal:not(:hover):not(:focus) .bp3-icon-large { color: #5c7080; } .bp3-input-group .bp3-input:not(:focus) + .bp3-button.bp3-minimal:disabled, .bp3-input-group .bp3-input:not(:focus) + .bp3-input-action .bp3-button.bp3-minimal:disabled { color: rgba(92, 112, 128, 0.5) !important; } .bp3-input-group .bp3-input:not(:focus) + .bp3-button.bp3-minimal:disabled .bp3-icon, .bp3-input-group .bp3-input:not(:focus) + .bp3-button.bp3-minimal:disabled .bp3-icon-standard, .bp3-input-group .bp3-input:not(:focus) + .bp3-button.bp3-minimal:disabled .bp3-icon-large, .bp3-input-group .bp3-input:not(:focus) + .bp3-input-action .bp3-button.bp3-minimal:disabled .bp3-icon, .bp3-input-group .bp3-input:not(:focus) + .bp3-input-action .bp3-button.bp3-minimal:disabled .bp3-icon-standard, .bp3-input-group .bp3-input:not(:focus) + .bp3-input-action .bp3-button.bp3-minimal:disabled .bp3-icon-large { color: rgba(92, 112, 128, 0.5) !important; } .bp3-input-group.bp3-disabled { cursor: not-allowed; } .bp3-input-group.bp3-disabled .bp3-icon { color: rgba(92, 112, 128, 0.5); } .bp3-input-group.bp3-large .bp3-button { min-width: 30px; min-height: 30px; margin: 5px; } .bp3-input-group.bp3-large > .bp3-icon, .bp3-input-group.bp3-large .bp3-input-action > .bp3-spinner { margin: 12px; } .bp3-input-group.bp3-large .bp3-input { height: 40px; line-height: 40px; font-size: 16px; } .bp3-input-group.bp3-large .bp3-input[type="search"], .bp3-input-group.bp3-large .bp3-input.bp3-round { padding: 0 15px; } .bp3-input-group.bp3-large .bp3-input:not(:first-child) { padding-left: 40px; } .bp3-input-group.bp3-large .bp3-input:not(:last-child) { padding-right: 40px; } .bp3-input-group.bp3-small .bp3-button { min-width: 20px; min-height: 20px; margin: 2px; } .bp3-input-group.bp3-small .bp3-tag { min-width: 20px; min-height: 20px; margin: 2px; } .bp3-input-group.bp3-small > .bp3-icon, .bp3-input-group.bp3-small .bp3-input-action > .bp3-spinner { margin: 4px; } .bp3-input-group.bp3-small .bp3-input { height: 24px; padding-right: 8px; padding-left: 8px; line-height: 24px; font-size: 12px; } .bp3-input-group.bp3-small .bp3-input[type="search"], .bp3-input-group.bp3-small .bp3-input.bp3-round { padding: 0 12px; } .bp3-input-group.bp3-small .bp3-input:not(:first-child) { padding-left: 24px; } .bp3-input-group.bp3-small .bp3-input:not(:last-child) { padding-right: 24px; } .bp3-input-group.bp3-fill { flex: 1 1 auto; width: 100%; } .bp3-input-group.bp3-round .bp3-button, .bp3-input-group.bp3-round .bp3-input, .bp3-input-group.bp3-round .bp3-tag { border-radius: 30px; } .bp3-dark .bp3-input-group .bp3-icon { color: #bfccd6; } .bp3-dark .bp3-input-group.bp3-disabled .bp3-icon { color: rgba(191, 204, 214, 0.5); } .bp3-input-group.bp3-intent-primary .bp3-input { box-shadow: 0 0 0 0 rgba(27, 186, 242, 0), 0 0 0 0 rgba(27, 186, 242, 0), inset 0 0 0 1px #1bbaf2, inset 0 0 0 1px #e6eaee, inset 1px 1px 1px #e6eaee; } .bp3-input-group.bp3-intent-primary .bp3-input:focus { box-shadow: 0 0 0 1px #1bbaf2, 0 0 0 3px rgba(27, 186, 242, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.2); } .bp3-input-group.bp3-intent-primary .bp3-input[readonly] { box-shadow: inset 0 0 0 1px #1bbaf2; } .bp3-input-group.bp3-intent-primary .bp3-input:disabled, .bp3-input-group.bp3-intent-primary .bp3-input.bp3-disabled { box-shadow: none; } .bp3-input-group.bp3-intent-primary > .bp3-icon { color: #106ba3; } .bp3-dark .bp3-input-group.bp3-intent-primary > .bp3-icon { color: #48aff0; } .bp3-input-group.bp3-intent-success .bp3-input { box-shadow: 0 0 0 0 rgba(15, 153, 96, 0), 0 0 0 0 rgba(15, 153, 96, 0), inset 0 0 0 1px #0f9960, inset 0 0 0 1px #e6eaee, inset 1px 1px 1px #e6eaee; } .bp3-input-group.bp3-intent-success .bp3-input:focus { box-shadow: 0 0 0 1px #0f9960, 0 0 0 3px rgba(15, 153, 96, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.2); } .bp3-input-group.bp3-intent-success .bp3-input[readonly] { box-shadow: inset 0 0 0 1px #0f9960; } .bp3-input-group.bp3-intent-success .bp3-input:disabled, .bp3-input-group.bp3-intent-success .bp3-input.bp3-disabled { box-shadow: none; } .bp3-input-group.bp3-intent-success > .bp3-icon { color: #0d8050; } .bp3-dark .bp3-input-group.bp3-intent-success > .bp3-icon { color: #3dcc91; } .bp3-input-group.bp3-intent-warning .bp3-input { box-shadow: 0 0 0 0 rgba(217, 130, 43, 0), 0 0 0 0 rgba(217, 130, 43, 0), inset 0 0 0 1px #d9822b, inset 0 0 0 1px #e6eaee, inset 1px 1px 1px #e6eaee; } .bp3-input-group.bp3-intent-warning .bp3-input:focus { box-shadow: 0 0 0 1px #d9822b, 0 0 0 3px rgba(217, 130, 43, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.2); } .bp3-input-group.bp3-intent-warning .bp3-input[readonly] { box-shadow: inset 0 0 0 1px #d9822b; } .bp3-input-group.bp3-intent-warning .bp3-input:disabled, .bp3-input-group.bp3-intent-warning .bp3-input.bp3-disabled { box-shadow: none; } .bp3-input-group.bp3-intent-warning > .bp3-icon { color: #bf7326; } .bp3-dark .bp3-input-group.bp3-intent-warning > .bp3-icon { color: #ffb366; } .bp3-input-group.bp3-intent-danger .bp3-input { box-shadow: 0 0 0 0 rgba(219, 55, 55, 0), 0 0 0 0 rgba(219, 55, 55, 0), inset 0 0 0 1px #db3737, inset 0 0 0 1px #e6eaee, inset 1px 1px 1px #e6eaee; } .bp3-input-group.bp3-intent-danger .bp3-input:focus { box-shadow: 0 0 0 1px #db3737, 0 0 0 3px rgba(219, 55, 55, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.2); } .bp3-input-group.bp3-intent-danger .bp3-input[readonly] { box-shadow: inset 0 0 0 1px #db3737; } .bp3-input-group.bp3-intent-danger .bp3-input:disabled, .bp3-input-group.bp3-intent-danger .bp3-input.bp3-disabled { box-shadow: none; } .bp3-input-group.bp3-intent-danger > .bp3-icon { color: #c23030; } .bp3-dark .bp3-input-group.bp3-intent-danger > .bp3-icon { color: #ff7373; } /* Text inputs Markup: :disabled - Disabled :readonly - Readonly .bp3-round - Rounded ends .bp3-large - Larger size .bp3-small - Small size .bp3-intent-primary - Primary intent .bp3-intent-success - Success intent .bp3-intent-warning - Warning intent .bp3-intent-danger - Danger intent .bp3-fill - Take up full width of parent element Styleguide input */ .bp3-input { outline: none; border: none; border-radius: 0; box-shadow: 0 0 0 0 rgba(27, 186, 242, 0), 0 0 0 0 rgba(27, 186, 242, 0), inset 0 0 0 1px #e6eaee, inset 1px 1px 1px #e6eaee; background: #ffffff; height: 30px; padding: 0 10px; vertical-align: middle; line-height: 30px; color: #182026; font-size: 14px; font-weight: 400; transition: box-shadow 100ms cubic-bezier(0.4, 1, 0.75, 0.9); appearance: none; } .bp3-input::placeholder { opacity: 1; color: rgba(92, 112, 128, 0.5); } .bp3-input:focus, .bp3-input.bp3-active { box-shadow: 0 0 0 1px #1bbaf2, 0 0 0 3px rgba(27, 186, 242, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.2); } .bp3-input[type="search"], .bp3-input.bp3-round { border-radius: 30px; box-sizing: border-box; padding-left: 10px; } .bp3-input[readonly] { box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.15); } .bp3-input:disabled, .bp3-input.bp3-disabled { box-shadow: none; background: rgba(206, 217, 224, 0.5); cursor: not-allowed; color: rgba(92, 112, 128, 0.5); resize: none; } .bp3-input.bp3-large { height: 40px; line-height: 40px; font-size: 16px; } .bp3-input.bp3-large[type="search"], .bp3-input.bp3-large.bp3-round { padding: 0 15px; } .bp3-input.bp3-small { height: 24px; padding-right: 8px; padding-left: 8px; line-height: 24px; font-size: 12px; } .bp3-input.bp3-small[type="search"], .bp3-input.bp3-small.bp3-round { padding: 0 12px; } .bp3-input.bp3-fill { flex: 1 1 auto; width: 100%; } .bp3-dark .bp3-input { box-shadow: 0 0 0 0 rgba(27, 186, 242, 0), 0 0 0 0 rgba(27, 186, 242, 0), 0 0 0 0 rgba(27, 186, 242, 0), inset 0 0 0 1px rgba(16, 22, 26, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.4); background: rgba(16, 22, 26, 0.3); color: #f5f8fa; } .bp3-dark .bp3-input::placeholder { color: rgba(191, 204, 214, 0.5); } .bp3-dark .bp3-input:focus { box-shadow: 0 0 0 1px #1bbaf2, 0 0 0 1px #1bbaf2, 0 0 0 3px rgba(27, 186, 242, 0.3), inset 0 0 0 1px rgba(16, 22, 26, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.4); } .bp3-dark .bp3-input[readonly] { box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.4); } .bp3-dark .bp3-input:disabled, .bp3-dark .bp3-input.bp3-disabled { box-shadow: none; background: rgba(57, 75, 89, 0.5); color: rgba(191, 204, 214, 0.5); } .bp3-input.bp3-intent-primary { box-shadow: 0 0 0 0 rgba(27, 186, 242, 0), 0 0 0 0 rgba(27, 186, 242, 0), inset 0 0 0 1px #1bbaf2, inset 0 0 0 1px #e6eaee, inset 1px 1px 1px #e6eaee; } .bp3-input.bp3-intent-primary:focus { box-shadow: 0 0 0 1px #1bbaf2, 0 0 0 3px rgba(27, 186, 242, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.2); } .bp3-input.bp3-intent-primary[readonly] { box-shadow: inset 0 0 0 1px #1bbaf2; } .bp3-input.bp3-intent-primary:disabled, .bp3-input.bp3-intent-primary.bp3-disabled { box-shadow: none; } .bp3-dark .bp3-input.bp3-intent-primary { box-shadow: 0 0 0 0 rgba(27, 186, 242, 0), 0 0 0 0 rgba(27, 186, 242, 0), 0 0 0 0 rgba(27, 186, 242, 0), inset 0 0 0 1px #1bbaf2, inset 0 0 0 1px rgba(16, 22, 26, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.4); } .bp3-dark .bp3-input.bp3-intent-primary:focus { box-shadow: 0 0 0 1px #1bbaf2, 0 0 0 1px #1bbaf2, 0 0 0 3px rgba(27, 186, 242, 0.3), inset 0 0 0 1px rgba(16, 22, 26, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.4); } .bp3-dark .bp3-input.bp3-intent-primary[readonly] { box-shadow: inset 0 0 0 1px #1bbaf2; } .bp3-dark .bp3-input.bp3-intent-primary:disabled, .bp3-dark .bp3-input.bp3-intent-primary.bp3-disabled { box-shadow: none; } .bp3-input.bp3-intent-success { box-shadow: 0 0 0 0 rgba(15, 153, 96, 0), 0 0 0 0 rgba(15, 153, 96, 0), inset 0 0 0 1px #0f9960, inset 0 0 0 1px #e6eaee, inset 1px 1px 1px #e6eaee; } .bp3-input.bp3-intent-success:focus { box-shadow: 0 0 0 1px #0f9960, 0 0 0 3px rgba(15, 153, 96, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.2); } .bp3-input.bp3-intent-success[readonly] { box-shadow: inset 0 0 0 1px #0f9960; } .bp3-input.bp3-intent-success:disabled, .bp3-input.bp3-intent-success.bp3-disabled { box-shadow: none; } .bp3-dark .bp3-input.bp3-intent-success { box-shadow: 0 0 0 0 rgba(15, 153, 96, 0), 0 0 0 0 rgba(15, 153, 96, 0), 0 0 0 0 rgba(15, 153, 96, 0), inset 0 0 0 1px #0f9960, inset 0 0 0 1px rgba(16, 22, 26, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.4); } .bp3-dark .bp3-input.bp3-intent-success:focus { box-shadow: 0 0 0 1px #0f9960, 0 0 0 1px #0f9960, 0 0 0 3px rgba(15, 153, 96, 0.3), inset 0 0 0 1px rgba(16, 22, 26, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.4); } .bp3-dark .bp3-input.bp3-intent-success[readonly] { box-shadow: inset 0 0 0 1px #0f9960; } .bp3-dark .bp3-input.bp3-intent-success:disabled, .bp3-dark .bp3-input.bp3-intent-success.bp3-disabled { box-shadow: none; } .bp3-input.bp3-intent-warning { box-shadow: 0 0 0 0 rgba(217, 130, 43, 0), 0 0 0 0 rgba(217, 130, 43, 0), inset 0 0 0 1px #d9822b, inset 0 0 0 1px #e6eaee, inset 1px 1px 1px #e6eaee; } .bp3-input.bp3-intent-warning:focus { box-shadow: 0 0 0 1px #d9822b, 0 0 0 3px rgba(217, 130, 43, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.2); } .bp3-input.bp3-intent-warning[readonly] { box-shadow: inset 0 0 0 1px #d9822b; } .bp3-input.bp3-intent-warning:disabled, .bp3-input.bp3-intent-warning.bp3-disabled { box-shadow: none; } .bp3-dark .bp3-input.bp3-intent-warning { box-shadow: 0 0 0 0 rgba(217, 130, 43, 0), 0 0 0 0 rgba(217, 130, 43, 0), 0 0 0 0 rgba(217, 130, 43, 0), inset 0 0 0 1px #d9822b, inset 0 0 0 1px rgba(16, 22, 26, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.4); } .bp3-dark .bp3-input.bp3-intent-warning:focus { box-shadow: 0 0 0 1px #d9822b, 0 0 0 1px #d9822b, 0 0 0 3px rgba(217, 130, 43, 0.3), inset 0 0 0 1px rgba(16, 22, 26, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.4); } .bp3-dark .bp3-input.bp3-intent-warning[readonly] { box-shadow: inset 0 0 0 1px #d9822b; } .bp3-dark .bp3-input.bp3-intent-warning:disabled, .bp3-dark .bp3-input.bp3-intent-warning.bp3-disabled { box-shadow: none; } .bp3-input.bp3-intent-danger { box-shadow: 0 0 0 0 rgba(219, 55, 55, 0), 0 0 0 0 rgba(219, 55, 55, 0), inset 0 0 0 1px #db3737, inset 0 0 0 1px #e6eaee, inset 1px 1px 1px #e6eaee; } .bp3-input.bp3-intent-danger:focus { box-shadow: 0 0 0 1px #db3737, 0 0 0 3px rgba(219, 55, 55, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.2); } .bp3-input.bp3-intent-danger[readonly] { box-shadow: inset 0 0 0 1px #db3737; } .bp3-input.bp3-intent-danger:disabled, .bp3-input.bp3-intent-danger.bp3-disabled { box-shadow: none; } .bp3-dark .bp3-input.bp3-intent-danger { box-shadow: 0 0 0 0 rgba(219, 55, 55, 0), 0 0 0 0 rgba(219, 55, 55, 0), 0 0 0 0 rgba(219, 55, 55, 0), inset 0 0 0 1px #db3737, inset 0 0 0 1px rgba(16, 22, 26, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.4); } .bp3-dark .bp3-input.bp3-intent-danger:focus { box-shadow: 0 0 0 1px #db3737, 0 0 0 1px #db3737, 0 0 0 3px rgba(219, 55, 55, 0.3), inset 0 0 0 1px rgba(16, 22, 26, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.4); } .bp3-dark .bp3-input.bp3-intent-danger[readonly] { box-shadow: inset 0 0 0 1px #db3737; } .bp3-dark .bp3-input.bp3-intent-danger:disabled, .bp3-dark .bp3-input.bp3-intent-danger.bp3-disabled { box-shadow: none; } .bp3-input::-ms-clear { display: none; } /* Search inputs Markup:

:disabled - Disabled. Also add .bp3-disabled to .bp3-input-group for icon coloring (not shown below). .bp3-large - Large .bp3-small - Small Styleguide input-search */ /* Textareas Markup: :disabled - Disabled :readonly - Readonly .bp3-large - Larger font size .bp3-small - Small font size .bp3-intent-primary - Primary intent .bp3-intent-danger - Danger intent .bp3-fill - Take up full width of parent element Styleguide textarea */ textarea.bp3-input { max-width: 100%; padding: 10px; } textarea.bp3-input, textarea.bp3-input.bp3-large, textarea.bp3-input.bp3-small { height: auto; line-height: inherit; } textarea.bp3-input.bp3-small { padding: 8px; } .bp3-dark textarea.bp3-input { box-shadow: 0 0 0 0 rgba(27, 186, 242, 0), 0 0 0 0 rgba(27, 186, 242, 0), 0 0 0 0 rgba(27, 186, 242, 0), inset 0 0 0 1px rgba(16, 22, 26, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.4); background: rgba(16, 22, 26, 0.3); color: #f5f8fa; } .bp3-dark textarea.bp3-input::placeholder { color: rgba(191, 204, 214, 0.5); } .bp3-dark textarea.bp3-input:focus { box-shadow: 0 0 0 1px #1bbaf2, 0 0 0 1px #1bbaf2, 0 0 0 3px rgba(27, 186, 242, 0.3), inset 0 0 0 1px rgba(16, 22, 26, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.4); } .bp3-dark textarea.bp3-input[readonly] { box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.4); } .bp3-dark textarea.bp3-input:disabled, .bp3-dark textarea.bp3-input.bp3-disabled { box-shadow: none; background: rgba(57, 75, 89, 0.5); color: rgba(191, 204, 214, 0.5); } /* Labels Markup:

Label A (optional) Label B

Label C

:disabled - Disable the input. .bp3-disabled - Disabled styles. Input must be disabled separately via attribute. .bp3-inline - Label and content appear side by side. Styleguide label */ label.bp3-label { display: block; margin-top: 0; margin-bottom: 15px; } label.bp3-label .bp3-html-select, label.bp3-label .bp3-input, label.bp3-label .bp3-select, label.bp3-label .bp3-slider, label.bp3-label .bp3-popover-wrapper { display: block; margin-top: 5px; text-transform: none; } label.bp3-label .bp3-select select, label.bp3-label .bp3-html-select select { width: 100%; vertical-align: top; font-weight: 400; } label.bp3-label.bp3-disabled, label.bp3-label.bp3-disabled .bp3-text-muted { color: rgba(92, 112, 128, 0.5); } label.bp3-label.bp3-inline { line-height: 30px; } label.bp3-label.bp3-inline .bp3-html-select, label.bp3-label.bp3-inline .bp3-input, label.bp3-label.bp3-inline .bp3-input-group, label.bp3-label.bp3-inline .bp3-select, label.bp3-label.bp3-inline .bp3-popover-wrapper { display: inline-block; margin: 0 0 0 5px; vertical-align: top; } label.bp3-label.bp3-inline .bp3-input-group .bp3-input { margin-left: 0; } label.bp3-label.bp3-inline.bp3-large { line-height: 40px; } label.bp3-label:not(.bp3-inline) .bp3-popover-target { display: block; } .bp3-dark label.bp3-label { color: #f5f8fa; } .bp3-dark label.bp3-label.bp3-disabled, .bp3-dark label.bp3-label.bp3-disabled .bp3-text-muted { color: rgba(191, 204, 214, 0.5); } /* * Copyright 2017 Palantir Technologies, Inc. All rights reserved. */ /* * Copyright 2017 Palantir Technologies, Inc. All rights reserved. */ /* * Copyright 2017 Palantir Technologies, Inc. All rights reserved. */ /* CSS `border` property issues: - An element can only have one border. - Borders can't stack with shadows. - Borders modify the size of the element they're applied to. - Border positioning requires the extra `box-sizing` property. `box-shadow` doesn't have these issues, we're using it instead of `border`. */ /* Overlay shadows are used for default buttons floating on top of other elements. This way, the shadows blend with the colors beneath it. Switches and slider handles both use these variables. */ .bp3-numeric-input .bp3-button-group.bp3-vertical > .bp3-button { flex: 1 1 14px; width: 30px; min-height: 0; padding: 0; } .bp3-numeric-input .bp3-button-group.bp3-vertical > .bp3-button:first-child { border-radius: 0 0 0 0; } .bp3-numeric-input .bp3-button-group.bp3-vertical > .bp3-button:last-child { border-radius: 0 0 0 0; } .bp3-numeric-input .bp3-button-group.bp3-vertical:first-child > .bp3-button:first-child { border-radius: 0 0 0 0; } .bp3-numeric-input .bp3-button-group.bp3-vertical:first-child > .bp3-button:last-child { border-radius: 0 0 0 0; } .bp3-numeric-input.bp3-large .bp3-button-group.bp3-vertical > .bp3-button { width: 40px; } form { display: block; } /* A mixin to generate the classes for a React CSSTransition which animates any number of CSS properties at once. Transitioned properties are specificed as a map of property names to lists of (inital value, final value). For enter & appear transitions, each property will transition from its initial to its final value. For exit transitions, each property will transition in reverse, from final to initial. **Simple example:** `@include react-transition("popover", (opacity: 0 1), $before: "&");` Transition named "popover" moves opacity from 0 to 1. `"&"` indicates that the Transition classes are expected to be applied to this element, where the mixin is invoked. **Params:** $name: React transitionName prop $properties: map of CSS property to (initial, final) values $duration: transition duration $easing: transition easing function $delay: transition delay $before: selector text to insert before transition name (often to select self: &) $after: selector text to insert after transiton name (to select children) */ /* A mixin to generate the classes for one phase of a React CSSTransition. `$phase` must be `appear` or `enter` or `exit`. If `enter` phase is given then `appear` phase will be generated at the same time. If `exit` phase is given then property values are animated in reverse, from final to initial. **Example:** @include react-transition-phase(toast, enter, $enter-translate, $before: "&"); @include react-transition-phase(toast, leave, $leave-blur, $pt-transition-duration * 3, $before: "&"); */ /* Given map of properties to values, set each property to the value at the given index. (remember that sass indices are 1-based). Example: `each-prop((opacity: 0 1), 2)` will print "opacity: 1" */ /* Format transition class name with all the bits. "enter" phase will include "appear" phase in returned name. */ /* * Copyright 2017 Palantir Technologies, Inc. All rights reserved. */ /* * Copyright 2017 Palantir Technologies, Inc. All rights reserved. */ /* * Copyright 2017 Palantir Technologies, Inc. All rights reserved. */ /* CSS `border` property issues: - An element can only have one border. - Borders can't stack with shadows. - Borders modify the size of the element they're applied to. - Border positioning requires the extra `box-sizing` property. `box-shadow` doesn't have these issues, we're using it instead of `border`. */ /* Overlay shadows are used for default buttons floating on top of other elements. This way, the shadows blend with the colors beneath it. Switches and slider handles both use these variables. */ .bp3-html-select select, .bp3-select select { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; border: none; border-radius: 0; cursor: pointer; padding: 5px 10px; vertical-align: middle; text-align: left; font-size: 14px; box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.2), inset 0 -1px 0 rgba(16, 22, 26, 0.1); background-color: #f5f8fa; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)); color: #182026; border-radius: 0; width: 100%; height: 30px; padding: 0 25px 0 10px; -moz-appearance: none; -webkit-appearance: none; } .bp3-html-select select > *, .bp3-select select > * { flex-grow: 0; flex-shrink: 0; } .bp3-html-select select > .bp3-fill, .bp3-select select > .bp3-fill { flex-grow: 1; flex-shrink: 1; } .bp3-html-select select::before, .bp3-select select::before, .bp3-html-select select > *, .bp3-select select > * { margin-right: 7px; } .bp3-html-select select:empty::before, .bp3-select select:empty::before, .bp3-html-select select > :last-child, .bp3-select select > :last-child { margin-right: 0; } .bp3-html-select select:hover, .bp3-select select:hover { box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.2), inset 0 -1px 0 rgba(16, 22, 26, 0.1); background-clip: padding-box; background-color: #ebf1f5; } .bp3-html-select select:active, .bp3-select select:active, .bp3-html-select select.bp3-active, .bp3-select select.bp3-active { box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.2), inset 0 1px 2px rgba(16, 22, 26, 0.2); background-color: #d8e1e8; background-image: none; } .bp3-html-select select:disabled, .bp3-select select:disabled, .bp3-html-select select.bp3-disabled, .bp3-select select.bp3-disabled { outline: none; box-shadow: none; background-color: rgba(206, 217, 224, 0.5); background-image: none; cursor: not-allowed; color: rgba(92, 112, 128, 0.5); } .bp3-html-select select:disabled.bp3-active, .bp3-select select:disabled.bp3-active, .bp3-html-select select:disabled.bp3-active:hover, .bp3-select select:disabled.bp3-active:hover, .bp3-html-select select.bp3-disabled.bp3-active, .bp3-select select.bp3-disabled.bp3-active, .bp3-html-select select.bp3-disabled.bp3-active:hover, .bp3-select select.bp3-disabled.bp3-active:hover { background: rgba(206, 217, 224, 0.7); } .bp3-html-select.bp3-minimal select, .bp3-select.bp3-minimal select { box-shadow: none; background: none; } .bp3-html-select.bp3-minimal select:hover, .bp3-select.bp3-minimal select:hover { box-shadow: none; background: rgba(167, 182, 194, 0.3); text-decoration: none; color: #182026; } .bp3-html-select.bp3-minimal select:active, .bp3-select.bp3-minimal select:active, .bp3-html-select.bp3-minimal select.bp3-active, .bp3-select.bp3-minimal select.bp3-active { box-shadow: none; background: rgba(115, 134, 148, 0.3); color: #182026; } .bp3-html-select.bp3-minimal select:disabled, .bp3-select.bp3-minimal select:disabled, .bp3-html-select.bp3-minimal select:disabled:hover, .bp3-select.bp3-minimal select:disabled:hover, .bp3-html-select.bp3-minimal select.bp3-disabled, .bp3-select.bp3-minimal select.bp3-disabled, .bp3-html-select.bp3-minimal select.bp3-disabled:hover, .bp3-select.bp3-minimal select.bp3-disabled:hover { background: none; cursor: not-allowed; color: rgba(92, 112, 128, 0.5); } .bp3-html-select.bp3-minimal select:disabled.bp3-active, .bp3-select.bp3-minimal select:disabled.bp3-active, .bp3-html-select.bp3-minimal select:disabled:hover.bp3-active, .bp3-select.bp3-minimal select:disabled:hover.bp3-active, .bp3-html-select.bp3-minimal select.bp3-disabled.bp3-active, .bp3-select.bp3-minimal select.bp3-disabled.bp3-active, .bp3-html-select.bp3-minimal select.bp3-disabled:hover.bp3-active, .bp3-select.bp3-minimal select.bp3-disabled:hover.bp3-active { background: rgba(115, 134, 148, 0.3); } .bp3-dark .bp3-html-select.bp3-minimal select, .bp3-html-select.bp3-minimal .bp3-dark select, .bp3-dark .bp3-select.bp3-minimal select, .bp3-select.bp3-minimal .bp3-dark select { box-shadow: none; background: none; color: inherit; } .bp3-dark .bp3-html-select.bp3-minimal select:hover, .bp3-html-select.bp3-minimal .bp3-dark select:hover, .bp3-dark .bp3-select.bp3-minimal select:hover, .bp3-select.bp3-minimal .bp3-dark select:hover, .bp3-dark .bp3-html-select.bp3-minimal select:active, .bp3-html-select.bp3-minimal .bp3-dark select:active, .bp3-dark .bp3-select.bp3-minimal select:active, .bp3-select.bp3-minimal .bp3-dark select:active, .bp3-dark .bp3-html-select.bp3-minimal select.bp3-active, .bp3-html-select.bp3-minimal .bp3-dark select.bp3-active, .bp3-dark .bp3-select.bp3-minimal select.bp3-active, .bp3-select.bp3-minimal .bp3-dark select.bp3-active { box-shadow: none; background: none; } .bp3-dark .bp3-html-select.bp3-minimal select:hover, .bp3-html-select.bp3-minimal .bp3-dark select:hover, .bp3-dark .bp3-select.bp3-minimal select:hover, .bp3-select.bp3-minimal .bp3-dark select:hover { background: rgba(138, 155, 168, 0.15); } .bp3-dark .bp3-html-select.bp3-minimal select:active, .bp3-html-select.bp3-minimal .bp3-dark select:active, .bp3-dark .bp3-select.bp3-minimal select:active, .bp3-select.bp3-minimal .bp3-dark select:active, .bp3-dark .bp3-html-select.bp3-minimal select.bp3-active, .bp3-html-select.bp3-minimal .bp3-dark select.bp3-active, .bp3-dark .bp3-select.bp3-minimal select.bp3-active, .bp3-select.bp3-minimal .bp3-dark select.bp3-active { background: rgba(138, 155, 168, 0.3); color: #f5f8fa; } .bp3-dark .bp3-html-select.bp3-minimal select:disabled, .bp3-html-select.bp3-minimal .bp3-dark select:disabled, .bp3-dark .bp3-select.bp3-minimal select:disabled, .bp3-select.bp3-minimal .bp3-dark select:disabled, .bp3-dark .bp3-html-select.bp3-minimal select:disabled:hover, .bp3-html-select.bp3-minimal .bp3-dark select:disabled:hover, .bp3-dark .bp3-select.bp3-minimal select:disabled:hover, .bp3-select.bp3-minimal .bp3-dark select:disabled:hover, .bp3-dark .bp3-html-select.bp3-minimal select.bp3-disabled, .bp3-html-select.bp3-minimal .bp3-dark select.bp3-disabled, .bp3-dark .bp3-select.bp3-minimal select.bp3-disabled, .bp3-select.bp3-minimal .bp3-dark select.bp3-disabled, .bp3-dark .bp3-html-select.bp3-minimal select.bp3-disabled:hover, .bp3-html-select.bp3-minimal .bp3-dark select.bp3-disabled:hover, .bp3-dark .bp3-select.bp3-minimal select.bp3-disabled:hover, .bp3-select.bp3-minimal .bp3-dark select.bp3-disabled:hover { background: none; cursor: not-allowed; color: rgba(191, 204, 214, 0.5); } .bp3-dark .bp3-html-select.bp3-minimal select:disabled.bp3-active, .bp3-html-select.bp3-minimal .bp3-dark select:disabled.bp3-active, .bp3-dark .bp3-select.bp3-minimal select:disabled.bp3-active, .bp3-select.bp3-minimal .bp3-dark select:disabled.bp3-active, .bp3-dark .bp3-html-select.bp3-minimal select:disabled:hover.bp3-active, .bp3-html-select.bp3-minimal .bp3-dark select:disabled:hover.bp3-active, .bp3-dark .bp3-select.bp3-minimal select:disabled:hover.bp3-active, .bp3-select.bp3-minimal .bp3-dark select:disabled:hover.bp3-active, .bp3-dark .bp3-html-select.bp3-minimal select.bp3-disabled.bp3-active, .bp3-html-select.bp3-minimal .bp3-dark select.bp3-disabled.bp3-active, .bp3-dark .bp3-select.bp3-minimal select.bp3-disabled.bp3-active, .bp3-select.bp3-minimal .bp3-dark select.bp3-disabled.bp3-active, .bp3-dark .bp3-html-select.bp3-minimal select.bp3-disabled:hover.bp3-active, .bp3-html-select.bp3-minimal .bp3-dark select.bp3-disabled:hover.bp3-active, .bp3-dark .bp3-select.bp3-minimal select.bp3-disabled:hover.bp3-active, .bp3-select.bp3-minimal .bp3-dark select.bp3-disabled:hover.bp3-active { background: rgba(138, 155, 168, 0.3); } .bp3-html-select.bp3-minimal select.bp3-intent-primary, .bp3-select.bp3-minimal select.bp3-intent-primary { color: #106ba3; } .bp3-html-select.bp3-minimal select.bp3-intent-primary:hover, .bp3-select.bp3-minimal select.bp3-intent-primary:hover, .bp3-html-select.bp3-minimal select.bp3-intent-primary:active, .bp3-select.bp3-minimal select.bp3-intent-primary:active, .bp3-html-select.bp3-minimal select.bp3-intent-primary.bp3-active, .bp3-select.bp3-minimal select.bp3-intent-primary.bp3-active { box-shadow: none; background: none; color: #106ba3; } .bp3-html-select.bp3-minimal select.bp3-intent-primary:hover, .bp3-select.bp3-minimal select.bp3-intent-primary:hover { background: rgba(27, 186, 242, 0.15); color: #106ba3; } .bp3-html-select.bp3-minimal select.bp3-intent-primary:active, .bp3-select.bp3-minimal select.bp3-intent-primary:active, .bp3-html-select.bp3-minimal select.bp3-intent-primary.bp3-active, .bp3-select.bp3-minimal select.bp3-intent-primary.bp3-active { background: rgba(27, 186, 242, 0.3); color: #106ba3; } .bp3-html-select.bp3-minimal select.bp3-intent-primary:disabled, .bp3-select.bp3-minimal select.bp3-intent-primary:disabled, .bp3-html-select.bp3-minimal select.bp3-intent-primary.bp3-disabled, .bp3-select.bp3-minimal select.bp3-intent-primary.bp3-disabled { background: none; color: rgba(16, 107, 163, 0.5); } .bp3-html-select.bp3-minimal select.bp3-intent-primary:disabled.bp3-active, .bp3-select.bp3-minimal select.bp3-intent-primary:disabled.bp3-active, .bp3-html-select.bp3-minimal select.bp3-intent-primary.bp3-disabled.bp3-active, .bp3-select.bp3-minimal select.bp3-intent-primary.bp3-disabled.bp3-active { background: rgba(27, 186, 242, 0.3); } .bp3-html-select.bp3-minimal select.bp3-intent-primary .bp3-button-spinner .bp3-spinner-head, .bp3-select.bp3-minimal select.bp3-intent-primary .bp3-button-spinner .bp3-spinner-head { stroke: #106ba3; } .bp3-dark .bp3-html-select.bp3-minimal select.bp3-intent-primary, .bp3-html-select.bp3-minimal .bp3-dark select.bp3-intent-primary, .bp3-dark .bp3-select.bp3-minimal select.bp3-intent-primary, .bp3-select.bp3-minimal .bp3-dark select.bp3-intent-primary { color: #48aff0; } .bp3-dark .bp3-html-select.bp3-minimal select.bp3-intent-primary:hover, .bp3-html-select.bp3-minimal .bp3-dark select.bp3-intent-primary:hover, .bp3-dark .bp3-select.bp3-minimal select.bp3-intent-primary:hover, .bp3-select.bp3-minimal .bp3-dark select.bp3-intent-primary:hover { background: rgba(27, 186, 242, 0.2); color: #48aff0; } .bp3-dark .bp3-html-select.bp3-minimal select.bp3-intent-primary:active, .bp3-html-select.bp3-minimal .bp3-dark select.bp3-intent-primary:active, .bp3-dark .bp3-select.bp3-minimal select.bp3-intent-primary:active, .bp3-select.bp3-minimal .bp3-dark select.bp3-intent-primary:active, .bp3-dark .bp3-html-select.bp3-minimal select.bp3-intent-primary.bp3-active, .bp3-html-select.bp3-minimal .bp3-dark select.bp3-intent-primary.bp3-active, .bp3-dark .bp3-select.bp3-minimal select.bp3-intent-primary.bp3-active, .bp3-select.bp3-minimal .bp3-dark select.bp3-intent-primary.bp3-active { background: rgba(27, 186, 242, 0.3); color: #48aff0; } .bp3-dark .bp3-html-select.bp3-minimal select.bp3-intent-primary:disabled, .bp3-html-select.bp3-minimal .bp3-dark select.bp3-intent-primary:disabled, .bp3-dark .bp3-select.bp3-minimal select.bp3-intent-primary:disabled, .bp3-select.bp3-minimal .bp3-dark select.bp3-intent-primary:disabled, .bp3-dark .bp3-html-select.bp3-minimal select.bp3-intent-primary.bp3-disabled, .bp3-html-select.bp3-minimal .bp3-dark select.bp3-intent-primary.bp3-disabled, .bp3-dark .bp3-select.bp3-minimal select.bp3-intent-primary.bp3-disabled, .bp3-select.bp3-minimal .bp3-dark select.bp3-intent-primary.bp3-disabled { background: none; color: rgba(72, 175, 240, 0.5); } .bp3-dark .bp3-html-select.bp3-minimal select.bp3-intent-primary:disabled.bp3-active, .bp3-html-select.bp3-minimal .bp3-dark select.bp3-intent-primary:disabled.bp3-active, .bp3-dark .bp3-select.bp3-minimal select.bp3-intent-primary:disabled.bp3-active, .bp3-select.bp3-minimal .bp3-dark select.bp3-intent-primary:disabled.bp3-active, .bp3-dark .bp3-html-select.bp3-minimal select.bp3-intent-primary.bp3-disabled.bp3-active, .bp3-html-select.bp3-minimal .bp3-dark select.bp3-intent-primary.bp3-disabled.bp3-active, .bp3-dark .bp3-select.bp3-minimal select.bp3-intent-primary.bp3-disabled.bp3-active, .bp3-select.bp3-minimal .bp3-dark select.bp3-intent-primary.bp3-disabled.bp3-active { background: rgba(27, 186, 242, 0.3); } .bp3-html-select.bp3-minimal select.bp3-intent-success, .bp3-select.bp3-minimal select.bp3-intent-success { color: #0d8050; } .bp3-html-select.bp3-minimal select.bp3-intent-success:hover, .bp3-select.bp3-minimal select.bp3-intent-success:hover, .bp3-html-select.bp3-minimal select.bp3-intent-success:active, .bp3-select.bp3-minimal select.bp3-intent-success:active, .bp3-html-select.bp3-minimal select.bp3-intent-success.bp3-active, .bp3-select.bp3-minimal select.bp3-intent-success.bp3-active { box-shadow: none; background: none; color: #0d8050; } .bp3-html-select.bp3-minimal select.bp3-intent-success:hover, .bp3-select.bp3-minimal select.bp3-intent-success:hover { background: rgba(15, 153, 96, 0.15); color: #0d8050; } .bp3-html-select.bp3-minimal select.bp3-intent-success:active, .bp3-select.bp3-minimal select.bp3-intent-success:active, .bp3-html-select.bp3-minimal select.bp3-intent-success.bp3-active, .bp3-select.bp3-minimal select.bp3-intent-success.bp3-active { background: rgba(15, 153, 96, 0.3); color: #0d8050; } .bp3-html-select.bp3-minimal select.bp3-intent-success:disabled, .bp3-select.bp3-minimal select.bp3-intent-success:disabled, .bp3-html-select.bp3-minimal select.bp3-intent-success.bp3-disabled, .bp3-select.bp3-minimal select.bp3-intent-success.bp3-disabled { background: none; color: rgba(13, 128, 80, 0.5); } .bp3-html-select.bp3-minimal select.bp3-intent-success:disabled.bp3-active, .bp3-select.bp3-minimal select.bp3-intent-success:disabled.bp3-active, .bp3-html-select.bp3-minimal select.bp3-intent-success.bp3-disabled.bp3-active, .bp3-select.bp3-minimal select.bp3-intent-success.bp3-disabled.bp3-active { background: rgba(15, 153, 96, 0.3); } .bp3-html-select.bp3-minimal select.bp3-intent-success .bp3-button-spinner .bp3-spinner-head, .bp3-select.bp3-minimal select.bp3-intent-success .bp3-button-spinner .bp3-spinner-head { stroke: #0d8050; } .bp3-dark .bp3-html-select.bp3-minimal select.bp3-intent-success, .bp3-html-select.bp3-minimal .bp3-dark select.bp3-intent-success, .bp3-dark .bp3-select.bp3-minimal select.bp3-intent-success, .bp3-select.bp3-minimal .bp3-dark select.bp3-intent-success { color: #3dcc91; } .bp3-dark .bp3-html-select.bp3-minimal select.bp3-intent-success:hover, .bp3-html-select.bp3-minimal .bp3-dark select.bp3-intent-success:hover, .bp3-dark .bp3-select.bp3-minimal select.bp3-intent-success:hover, .bp3-select.bp3-minimal .bp3-dark select.bp3-intent-success:hover { background: rgba(15, 153, 96, 0.2); color: #3dcc91; } .bp3-dark .bp3-html-select.bp3-minimal select.bp3-intent-success:active, .bp3-html-select.bp3-minimal .bp3-dark select.bp3-intent-success:active, .bp3-dark .bp3-select.bp3-minimal select.bp3-intent-success:active, .bp3-select.bp3-minimal .bp3-dark select.bp3-intent-success:active, .bp3-dark .bp3-html-select.bp3-minimal select.bp3-intent-success.bp3-active, .bp3-html-select.bp3-minimal .bp3-dark select.bp3-intent-success.bp3-active, .bp3-dark .bp3-select.bp3-minimal select.bp3-intent-success.bp3-active, .bp3-select.bp3-minimal .bp3-dark select.bp3-intent-success.bp3-active { background: rgba(15, 153, 96, 0.3); color: #3dcc91; } .bp3-dark .bp3-html-select.bp3-minimal select.bp3-intent-success:disabled, .bp3-html-select.bp3-minimal .bp3-dark select.bp3-intent-success:disabled, .bp3-dark .bp3-select.bp3-minimal select.bp3-intent-success:disabled, .bp3-select.bp3-minimal .bp3-dark select.bp3-intent-success:disabled, .bp3-dark .bp3-html-select.bp3-minimal select.bp3-intent-success.bp3-disabled, .bp3-html-select.bp3-minimal .bp3-dark select.bp3-intent-success.bp3-disabled, .bp3-dark .bp3-select.bp3-minimal select.bp3-intent-success.bp3-disabled, .bp3-select.bp3-minimal .bp3-dark select.bp3-intent-success.bp3-disabled { background: none; color: rgba(61, 204, 145, 0.5); } .bp3-dark .bp3-html-select.bp3-minimal select.bp3-intent-success:disabled.bp3-active, .bp3-html-select.bp3-minimal .bp3-dark select.bp3-intent-success:disabled.bp3-active, .bp3-dark .bp3-select.bp3-minimal select.bp3-intent-success:disabled.bp3-active, .bp3-select.bp3-minimal .bp3-dark select.bp3-intent-success:disabled.bp3-active, .bp3-dark .bp3-html-select.bp3-minimal select.bp3-intent-success.bp3-disabled.bp3-active, .bp3-html-select.bp3-minimal .bp3-dark select.bp3-intent-success.bp3-disabled.bp3-active, .bp3-dark .bp3-select.bp3-minimal select.bp3-intent-success.bp3-disabled.bp3-active, .bp3-select.bp3-minimal .bp3-dark select.bp3-intent-success.bp3-disabled.bp3-active { background: rgba(15, 153, 96, 0.3); } .bp3-html-select.bp3-minimal select.bp3-intent-warning, .bp3-select.bp3-minimal select.bp3-intent-warning { color: #bf7326; } .bp3-html-select.bp3-minimal select.bp3-intent-warning:hover, .bp3-select.bp3-minimal select.bp3-intent-warning:hover, .bp3-html-select.bp3-minimal select.bp3-intent-warning:active, .bp3-select.bp3-minimal select.bp3-intent-warning:active, .bp3-html-select.bp3-minimal select.bp3-intent-warning.bp3-active, .bp3-select.bp3-minimal select.bp3-intent-warning.bp3-active { box-shadow: none; background: none; color: #bf7326; } .bp3-html-select.bp3-minimal select.bp3-intent-warning:hover, .bp3-select.bp3-minimal select.bp3-intent-warning:hover { background: rgba(217, 130, 43, 0.15); color: #bf7326; } .bp3-html-select.bp3-minimal select.bp3-intent-warning:active, .bp3-select.bp3-minimal select.bp3-intent-warning:active, .bp3-html-select.bp3-minimal select.bp3-intent-warning.bp3-active, .bp3-select.bp3-minimal select.bp3-intent-warning.bp3-active { background: rgba(217, 130, 43, 0.3); color: #bf7326; } .bp3-html-select.bp3-minimal select.bp3-intent-warning:disabled, .bp3-select.bp3-minimal select.bp3-intent-warning:disabled, .bp3-html-select.bp3-minimal select.bp3-intent-warning.bp3-disabled, .bp3-select.bp3-minimal select.bp3-intent-warning.bp3-disabled { background: none; color: rgba(191, 115, 38, 0.5); } .bp3-html-select.bp3-minimal select.bp3-intent-warning:disabled.bp3-active, .bp3-select.bp3-minimal select.bp3-intent-warning:disabled.bp3-active, .bp3-html-select.bp3-minimal select.bp3-intent-warning.bp3-disabled.bp3-active, .bp3-select.bp3-minimal select.bp3-intent-warning.bp3-disabled.bp3-active { background: rgba(217, 130, 43, 0.3); } .bp3-html-select.bp3-minimal select.bp3-intent-warning .bp3-button-spinner .bp3-spinner-head, .bp3-select.bp3-minimal select.bp3-intent-warning .bp3-button-spinner .bp3-spinner-head { stroke: #bf7326; } .bp3-dark .bp3-html-select.bp3-minimal select.bp3-intent-warning, .bp3-html-select.bp3-minimal .bp3-dark select.bp3-intent-warning, .bp3-dark .bp3-select.bp3-minimal select.bp3-intent-warning, .bp3-select.bp3-minimal .bp3-dark select.bp3-intent-warning { color: #ffb366; } .bp3-dark .bp3-html-select.bp3-minimal select.bp3-intent-warning:hover, .bp3-html-select.bp3-minimal .bp3-dark select.bp3-intent-warning:hover, .bp3-dark .bp3-select.bp3-minimal select.bp3-intent-warning:hover, .bp3-select.bp3-minimal .bp3-dark select.bp3-intent-warning:hover { background: rgba(217, 130, 43, 0.2); color: #ffb366; } .bp3-dark .bp3-html-select.bp3-minimal select.bp3-intent-warning:active, .bp3-html-select.bp3-minimal .bp3-dark select.bp3-intent-warning:active, .bp3-dark .bp3-select.bp3-minimal select.bp3-intent-warning:active, .bp3-select.bp3-minimal .bp3-dark select.bp3-intent-warning:active, .bp3-dark .bp3-html-select.bp3-minimal select.bp3-intent-warning.bp3-active, .bp3-html-select.bp3-minimal .bp3-dark select.bp3-intent-warning.bp3-active, .bp3-dark .bp3-select.bp3-minimal select.bp3-intent-warning.bp3-active, .bp3-select.bp3-minimal .bp3-dark select.bp3-intent-warning.bp3-active { background: rgba(217, 130, 43, 0.3); color: #ffb366; } .bp3-dark .bp3-html-select.bp3-minimal select.bp3-intent-warning:disabled, .bp3-html-select.bp3-minimal .bp3-dark select.bp3-intent-warning:disabled, .bp3-dark .bp3-select.bp3-minimal select.bp3-intent-warning:disabled, .bp3-select.bp3-minimal .bp3-dark select.bp3-intent-warning:disabled, .bp3-dark .bp3-html-select.bp3-minimal select.bp3-intent-warning.bp3-disabled, .bp3-html-select.bp3-minimal .bp3-dark select.bp3-intent-warning.bp3-disabled, .bp3-dark .bp3-select.bp3-minimal select.bp3-intent-warning.bp3-disabled, .bp3-select.bp3-minimal .bp3-dark select.bp3-intent-warning.bp3-disabled { background: none; color: rgba(255, 179, 102, 0.5); } .bp3-dark .bp3-html-select.bp3-minimal select.bp3-intent-warning:disabled.bp3-active, .bp3-html-select.bp3-minimal .bp3-dark select.bp3-intent-warning:disabled.bp3-active, .bp3-dark .bp3-select.bp3-minimal select.bp3-intent-warning:disabled.bp3-active, .bp3-select.bp3-minimal .bp3-dark select.bp3-intent-warning:disabled.bp3-active, .bp3-dark .bp3-html-select.bp3-minimal select.bp3-intent-warning.bp3-disabled.bp3-active, .bp3-html-select.bp3-minimal .bp3-dark select.bp3-intent-warning.bp3-disabled.bp3-active, .bp3-dark .bp3-select.bp3-minimal select.bp3-intent-warning.bp3-disabled.bp3-active, .bp3-select.bp3-minimal .bp3-dark select.bp3-intent-warning.bp3-disabled.bp3-active { background: rgba(217, 130, 43, 0.3); } .bp3-html-select.bp3-minimal select.bp3-intent-danger, .bp3-select.bp3-minimal select.bp3-intent-danger { color: #c23030; } .bp3-html-select.bp3-minimal select.bp3-intent-danger:hover, .bp3-select.bp3-minimal select.bp3-intent-danger:hover, .bp3-html-select.bp3-minimal select.bp3-intent-danger:active, .bp3-select.bp3-minimal select.bp3-intent-danger:active, .bp3-html-select.bp3-minimal select.bp3-intent-danger.bp3-active, .bp3-select.bp3-minimal select.bp3-intent-danger.bp3-active { box-shadow: none; background: none; color: #c23030; } .bp3-html-select.bp3-minimal select.bp3-intent-danger:hover, .bp3-select.bp3-minimal select.bp3-intent-danger:hover { background: rgba(219, 55, 55, 0.15); color: #c23030; } .bp3-html-select.bp3-minimal select.bp3-intent-danger:active, .bp3-select.bp3-minimal select.bp3-intent-danger:active, .bp3-html-select.bp3-minimal select.bp3-intent-danger.bp3-active, .bp3-select.bp3-minimal select.bp3-intent-danger.bp3-active { background: rgba(219, 55, 55, 0.3); color: #c23030; } .bp3-html-select.bp3-minimal select.bp3-intent-danger:disabled, .bp3-select.bp3-minimal select.bp3-intent-danger:disabled, .bp3-html-select.bp3-minimal select.bp3-intent-danger.bp3-disabled, .bp3-select.bp3-minimal select.bp3-intent-danger.bp3-disabled { background: none; color: rgba(194, 48, 48, 0.5); } .bp3-html-select.bp3-minimal select.bp3-intent-danger:disabled.bp3-active, .bp3-select.bp3-minimal select.bp3-intent-danger:disabled.bp3-active, .bp3-html-select.bp3-minimal select.bp3-intent-danger.bp3-disabled.bp3-active, .bp3-select.bp3-minimal select.bp3-intent-danger.bp3-disabled.bp3-active { background: rgba(219, 55, 55, 0.3); } .bp3-html-select.bp3-minimal select.bp3-intent-danger .bp3-button-spinner .bp3-spinner-head, .bp3-select.bp3-minimal select.bp3-intent-danger .bp3-button-spinner .bp3-spinner-head { stroke: #c23030; } .bp3-dark .bp3-html-select.bp3-minimal select.bp3-intent-danger, .bp3-html-select.bp3-minimal .bp3-dark select.bp3-intent-danger, .bp3-dark .bp3-select.bp3-minimal select.bp3-intent-danger, .bp3-select.bp3-minimal .bp3-dark select.bp3-intent-danger { color: #ff7373; } .bp3-dark .bp3-html-select.bp3-minimal select.bp3-intent-danger:hover, .bp3-html-select.bp3-minimal .bp3-dark select.bp3-intent-danger:hover, .bp3-dark .bp3-select.bp3-minimal select.bp3-intent-danger:hover, .bp3-select.bp3-minimal .bp3-dark select.bp3-intent-danger:hover { background: rgba(219, 55, 55, 0.2); color: #ff7373; } .bp3-dark .bp3-html-select.bp3-minimal select.bp3-intent-danger:active, .bp3-html-select.bp3-minimal .bp3-dark select.bp3-intent-danger:active, .bp3-dark .bp3-select.bp3-minimal select.bp3-intent-danger:active, .bp3-select.bp3-minimal .bp3-dark select.bp3-intent-danger:active, .bp3-dark .bp3-html-select.bp3-minimal select.bp3-intent-danger.bp3-active, .bp3-html-select.bp3-minimal .bp3-dark select.bp3-intent-danger.bp3-active, .bp3-dark .bp3-select.bp3-minimal select.bp3-intent-danger.bp3-active, .bp3-select.bp3-minimal .bp3-dark select.bp3-intent-danger.bp3-active { background: rgba(219, 55, 55, 0.3); color: #ff7373; } .bp3-dark .bp3-html-select.bp3-minimal select.bp3-intent-danger:disabled, .bp3-html-select.bp3-minimal .bp3-dark select.bp3-intent-danger:disabled, .bp3-dark .bp3-select.bp3-minimal select.bp3-intent-danger:disabled, .bp3-select.bp3-minimal .bp3-dark select.bp3-intent-danger:disabled, .bp3-dark .bp3-html-select.bp3-minimal select.bp3-intent-danger.bp3-disabled, .bp3-html-select.bp3-minimal .bp3-dark select.bp3-intent-danger.bp3-disabled, .bp3-dark .bp3-select.bp3-minimal select.bp3-intent-danger.bp3-disabled, .bp3-select.bp3-minimal .bp3-dark select.bp3-intent-danger.bp3-disabled { background: none; color: rgba(255, 115, 115, 0.5); } .bp3-dark .bp3-html-select.bp3-minimal select.bp3-intent-danger:disabled.bp3-active, .bp3-html-select.bp3-minimal .bp3-dark select.bp3-intent-danger:disabled.bp3-active, .bp3-dark .bp3-select.bp3-minimal select.bp3-intent-danger:disabled.bp3-active, .bp3-select.bp3-minimal .bp3-dark select.bp3-intent-danger:disabled.bp3-active, .bp3-dark .bp3-html-select.bp3-minimal select.bp3-intent-danger.bp3-disabled.bp3-active, .bp3-html-select.bp3-minimal .bp3-dark select.bp3-intent-danger.bp3-disabled.bp3-active, .bp3-dark .bp3-select.bp3-minimal select.bp3-intent-danger.bp3-disabled.bp3-active, .bp3-select.bp3-minimal .bp3-dark select.bp3-intent-danger.bp3-disabled.bp3-active { background: rgba(219, 55, 55, 0.3); } .bp3-html-select.bp3-large select, .bp3-select.bp3-large select { height: 40px; padding-right: 35px; font-size: 16px; } .bp3-dark .bp3-html-select select, .bp3-dark .bp3-select select { box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.4); background-color: #394b59; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0)); color: #f5f8fa; } .bp3-dark .bp3-html-select select:hover, .bp3-dark .bp3-select select:hover, .bp3-dark .bp3-html-select select:active, .bp3-dark .bp3-select select:active, .bp3-dark .bp3-html-select select.bp3-active, .bp3-dark .bp3-select select.bp3-active { color: #f5f8fa; } .bp3-dark .bp3-html-select select:hover, .bp3-dark .bp3-select select:hover { box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.4); background-color: #30404d; } .bp3-dark .bp3-html-select select:active, .bp3-dark .bp3-select select:active, .bp3-dark .bp3-html-select select.bp3-active, .bp3-dark .bp3-select select.bp3-active { box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.6), inset 0 1px 2px rgba(16, 22, 26, 0.2); background-color: #202b33; background-image: none; } .bp3-dark .bp3-html-select select:disabled, .bp3-dark .bp3-select select:disabled, .bp3-dark .bp3-html-select select.bp3-disabled, .bp3-dark .bp3-select select.bp3-disabled { box-shadow: none; background-color: rgba(57, 75, 89, 0.5); background-image: none; color: rgba(191, 204, 214, 0.5); } .bp3-dark .bp3-html-select select:disabled.bp3-active, .bp3-dark .bp3-select select:disabled.bp3-active, .bp3-dark .bp3-html-select select.bp3-disabled.bp3-active, .bp3-dark .bp3-select select.bp3-disabled.bp3-active { background: rgba(57, 75, 89, 0.7); } .bp3-dark .bp3-html-select select .bp3-button-spinner .bp3-spinner-head, .bp3-dark .bp3-select select .bp3-button-spinner .bp3-spinner-head { background: rgba(16, 22, 26, 0.5); stroke: #8a9ba8; } .bp3-html-select select:disabled, .bp3-select select:disabled { box-shadow: none; background-color: rgba(206, 217, 224, 0.5); cursor: not-allowed; color: rgba(92, 112, 128, 0.5); } .bp3-html-select .bp3-icon, .bp3-select .bp3-icon, .bp3-select::after { position: absolute; top: 7px; right: 7px; color: #5c7080; pointer-events: none; } .bp3-html-select .bp3-disabled.bp3-icon, .bp3-select .bp3-disabled.bp3-icon, .bp3-disabled.bp3-select::after { color: rgba(92, 112, 128, 0.5); } /* HTML select Markup:

:disabled - Disabled. Also add .bp3-disabled to .bp3-select for icon coloring (not shown below). .bp3-fill - Expand to fill parent container .bp3-large - Large size .bp3-minimal - Minimal appearance Styleguide select */ .bp3-html-select, .bp3-select { display: inline-block; position: relative; vertical-align: middle; letter-spacing: normal; } .bp3-html-select select::-ms-expand, .bp3-select select::-ms-expand { display: none; } .bp3-html-select .bp3-icon, .bp3-select .bp3-icon { color: #5c7080; } .bp3-html-select .bp3-icon:hover, .bp3-select .bp3-icon:hover { color: #182026; } .bp3-dark .bp3-html-select .bp3-icon, .bp3-dark .bp3-select .bp3-icon { color: #bfccd6; } .bp3-dark .bp3-html-select .bp3-icon:hover, .bp3-dark .bp3-select .bp3-icon:hover { color: #f5f8fa; } .bp3-html-select.bp3-large::after, .bp3-html-select.bp3-large .bp3-icon, .bp3-select.bp3-large::after, .bp3-select.bp3-large .bp3-icon { top: 12px; right: 12px; } .bp3-html-select.bp3-fill, .bp3-html-select.bp3-fill select, .bp3-select.bp3-fill, .bp3-select.bp3-fill select { width: 100%; } .bp3-dark .bp3-html-select option, .bp3-dark .bp3-select option { background-color: #30404d; color: #f5f8fa; } .bp3-dark .bp3-html-select::after, .bp3-dark .bp3-select::after { color: #bfccd6; } .bp3-select::after { line-height: 1; font-family: "Icons16", sans-serif; font-size: 16px; font-weight: 400; font-style: normal; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; content: ""; } /* Tables Markup:

Project	Description	Technologies
Blueprint	CSS framework and UI toolkit	Sass, TypeScript, React
TSLint	Static analysis linter for TypeScript	TypeScript
Plottable	Composable charting library built on top of D3	SVG, TypeScript, D3

.bp3-html-table-bordered - Bordered appearance .bp3-html-table-condensed - Condensed smaller appearance .bp3-html-table-striped - Striped appearance .bp3-interactive - Enables hover styles on rows .bp3-small - Small, condensed appearance for this element _and all child elements_ Styleguide html-table */ .bp3-running-text table, table.bp3-html-table { border-spacing: 0; font-size: 14px; } .bp3-running-text table th, table.bp3-html-table th, .bp3-running-text table td, table.bp3-html-table td { padding: 11px; vertical-align: top; text-align: left; } .bp3-running-text table th, table.bp3-html-table th { color: #182026; font-weight: 600; } .bp3-running-text table td, table.bp3-html-table td { color: #182026; } .bp3-running-text table tbody tr:first-child th, table.bp3-html-table tbody tr:first-child th, .bp3-running-text table tbody tr:first-child td, table.bp3-html-table tbody tr:first-child td { box-shadow: inset 0 1px 0 0 rgba(16, 22, 26, 0.15); } .bp3-dark .bp3-running-text table th, .bp3-running-text .bp3-dark table th, .bp3-dark table.bp3-html-table th { color: #f5f8fa; } .bp3-dark .bp3-running-text table td, .bp3-running-text .bp3-dark table td, .bp3-dark table.bp3-html-table td { color: #f5f8fa; } .bp3-dark .bp3-running-text table tbody tr:first-child th, .bp3-running-text .bp3-dark table tbody tr:first-child th, .bp3-dark table.bp3-html-table tbody tr:first-child th, .bp3-dark .bp3-running-text table tbody tr:first-child td, .bp3-running-text .bp3-dark table tbody tr:first-child td, .bp3-dark table.bp3-html-table tbody tr:first-child td { box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15); } table.bp3-html-table.bp3-html-table-condensed th, table.bp3-html-table.bp3-html-table-condensed td, table.bp3-html-table.bp3-small th, table.bp3-html-table.bp3-small td { padding-top: 6px; padding-bottom: 6px; } table.bp3-html-table.bp3-html-table-striped tbody tr:nth-child(odd) td { background: rgba(191, 204, 214, 0.15); } table.bp3-html-table.bp3-html-table-bordered th:not(:first-child) { box-shadow: inset 1px 0 0 0 rgba(16, 22, 26, 0.15); } table.bp3-html-table.bp3-html-table-bordered tbody tr td { box-shadow: inset 0 1px 0 0 rgba(16, 22, 26, 0.15); } table.bp3-html-table.bp3-html-table-bordered tbody tr td:not(:first-child) { box-shadow: inset 1px 1px 0 0 rgba(16, 22, 26, 0.15); } table.bp3-html-table.bp3-html-table-bordered.bp3-html-table-striped tbody tr:not(:first-child) td { box-shadow: none; } table.bp3-html-table.bp3-html-table-bordered.bp3-html-table-striped tbody tr:not(:first-child) td:not(:first-child) { box-shadow: inset 1px 0 0 0 rgba(16, 22, 26, 0.15); } table.bp3-html-table.bp3-interactive tbody tr:hover td { background-color: rgba(191, 204, 214, 0.3); cursor: pointer; } table.bp3-html-table.bp3-interactive tbody tr:active td { background-color: rgba(191, 204, 214, 0.4); } .bp3-dark table.bp3-html-table.bp3-html-table-striped tbody tr:nth-child(odd) td { background: rgba(92, 112, 128, 0.15); } .bp3-dark table.bp3-html-table.bp3-html-table-bordered th:not(:first-child) { box-shadow: inset 1px 0 0 0 rgba(255, 255, 255, 0.15); } .bp3-dark table.bp3-html-table.bp3-html-table-bordered tbody tr td { box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15); } .bp3-dark table.bp3-html-table.bp3-html-table-bordered tbody tr td:not(:first-child) { box-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.15); } .bp3-dark table.bp3-html-table.bp3-html-table-bordered.bp3-html-table-striped tbody tr:not(:first-child) td { box-shadow: inset 1px 0 0 0 rgba(255, 255, 255, 0.15); } .bp3-dark table.bp3-html-table.bp3-html-table-bordered.bp3-html-table-striped tbody tr:not(:first-child) td:first-child { box-shadow: none; } .bp3-dark table.bp3-html-table.bp3-interactive tbody tr:hover td { background-color: rgba(92, 112, 128, 0.3); cursor: pointer; } .bp3-dark table.bp3-html-table.bp3-interactive tbody tr:active td { background-color: rgba(92, 112, 128, 0.4); } .bp3-key-combo { display: flex; flex-direction: row; align-items: center; } .bp3-key-combo > * { flex-grow: 0; flex-shrink: 0; } .bp3-key-combo > .bp3-fill { flex-grow: 1; flex-shrink: 1; } .bp3-key-combo::before, .bp3-key-combo > * { margin-right: 5px; } .bp3-key-combo:empty::before, .bp3-key-combo > :last-child { margin-right: 0; } .bp3-hotkey-dialog { top: 40px; padding-bottom: 0; } .bp3-hotkey-dialog .bp3-dialog-body { margin: 0; padding: 0; } .bp3-hotkey-dialog .bp3-hotkey-label { flex-grow: 1; } .bp3-hotkey-column { margin: auto; max-height: 80vh; overflow-y: auto; padding: 30px; } .bp3-hotkey-column .bp3-heading { margin-bottom: 20px; } .bp3-hotkey-column .bp3-heading:not(:first-child) { margin-top: 40px; } .bp3-hotkey { display: flex; align-items: center; justify-content: space-between; margin-right: 0; margin-left: 0; } .bp3-hotkey:not(:last-child) { margin-bottom: 10px; } /* * Copyright 2017 Palantir Technologies, Inc. All rights reserved. */ /* * Copyright 2017 Palantir Technologies, Inc. All rights reserved. */ /* * Copyright 2017 Palantir Technologies, Inc. All rights reserved. */ .bp3-icon { display: inline-block; flex: 0 0 auto; vertical-align: text-bottom; } .bp3-icon:not(:empty)::before { content: "" !important; content: unset !important; } .bp3-icon > svg { display: block; } .bp3-icon > svg:not([fill]) { fill: currentColor; } .bp3-icon.bp3-intent-primary, .bp3-icon-standard.bp3-intent-primary, .bp3-icon-large.bp3-intent-primary { color: #106ba3; } .bp3-dark .bp3-icon.bp3-intent-primary, .bp3-dark .bp3-icon-standard.bp3-intent-primary, .bp3-dark .bp3-icon-large.bp3-intent-primary { color: #48aff0; } .bp3-icon.bp3-intent-success, .bp3-icon-standard.bp3-intent-success, .bp3-icon-large.bp3-intent-success { color: #0d8050; } .bp3-dark .bp3-icon.bp3-intent-success, .bp3-dark .bp3-icon-standard.bp3-intent-success, .bp3-dark .bp3-icon-large.bp3-intent-success { color: #3dcc91; } .bp3-icon.bp3-intent-warning, .bp3-icon-standard.bp3-intent-warning, .bp3-icon-large.bp3-intent-warning { color: #bf7326; } .bp3-dark .bp3-icon.bp3-intent-warning, .bp3-dark .bp3-icon-standard.bp3-intent-warning, .bp3-dark .bp3-icon-large.bp3-intent-warning { color: #ffb366; } .bp3-icon.bp3-intent-danger, .bp3-icon-standard.bp3-intent-danger, .bp3-icon-large.bp3-intent-danger { color: #c23030; } .bp3-dark .bp3-icon.bp3-intent-danger, .bp3-dark .bp3-icon-standard.bp3-intent-danger, .bp3-dark .bp3-icon-large.bp3-intent-danger { color: #ff7373; } span.bp3-icon-standard { line-height: 1; font-family: "Icons16", sans-serif; font-size: 16px; font-weight: 400; font-style: normal; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: inline-block; } span.bp3-icon-large { line-height: 1; font-family: "Icons20", sans-serif; font-size: 20px; font-weight: 400; font-style: normal; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: inline-block; } span.bp3-icon:empty { line-height: 1; font-family: "Icons20"; font-size: inherit; font-weight: 400; font-style: normal; } span.bp3-icon:empty::before { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } .bp3-icon-add::before { content: ""; } .bp3-icon-add-column-left::before { content: ""; } .bp3-icon-add-column-right::before { content: ""; } .bp3-icon-add-row-bottom::before { content: ""; } .bp3-icon-add-row-top::before { content: ""; } .bp3-icon-add-to-artifact::before { content: ""; } .bp3-icon-add-to-folder::before { content: ""; } .bp3-icon-airplane::before { content: ""; } .bp3-icon-align-center::before { content: ""; } .bp3-icon-align-justify::before { content: ""; } .bp3-icon-align-left::before { content: ""; } .bp3-icon-align-right::before { content: ""; } .bp3-icon-alignment-bottom::before { content: ""; } .bp3-icon-alignment-horizontal-center::before { content: ""; } .bp3-icon-alignment-left::before { content: ""; } .bp3-icon-alignment-right::before { content: ""; } .bp3-icon-alignment-top::before { content: ""; } .bp3-icon-alignment-vertical-center::before { content: ""; } .bp3-icon-annotation::before { content: ""; } .bp3-icon-application::before { content: ""; } .bp3-icon-applications::before { content: ""; } .bp3-icon-arrow-bottom-left::before { content: "↙"; } .bp3-icon-arrow-bottom-right::before { content: "↘"; } .bp3-icon-arrow-down::before { content: "↓"; } .bp3-icon-arrow-left::before { content: "←"; } .bp3-icon-arrow-right::before { content: "→"; } .bp3-icon-arrow-top-left::before { content: "↖"; } .bp3-icon-arrow-top-right::before { content: "↗"; } .bp3-icon-arrow-up::before { content: "↑"; } .bp3-icon-arrows-horizontal::before { content: "↔"; } .bp3-icon-arrows-vertical::before { content: "↕"; } .bp3-icon-asterisk::before { content: "*"; } .bp3-icon-automatic-updates::before { content: ""; } .bp3-icon-badge::before { content: ""; } .bp3-icon-ban-circle::before { content: ""; } .bp3-icon-bank-account::before { content: ""; } .bp3-icon-barcode::before { content: ""; } .bp3-icon-blank::before { content: ""; } .bp3-icon-blocked-person::before { content: ""; } .bp3-icon-bold::before { content: ""; } .bp3-icon-book::before { content: ""; } .bp3-icon-bookmark::before { content: ""; } .bp3-icon-box::before { content: ""; } .bp3-icon-briefcase::before { content: ""; } .bp3-icon-build::before { content: ""; } .bp3-icon-calculator::before { content: ""; } .bp3-icon-calendar::before { content: ""; } .bp3-icon-camera::before { content: ""; } .bp3-icon-caret-down::before { content: "⌄"; } .bp3-icon-caret-left::before { content: "〈"; } .bp3-icon-caret-right::before { content: "〉"; } .bp3-icon-caret-up::before { content: "⌃"; } .bp3-icon-cell-tower::before { content: ""; } .bp3-icon-changes::before { content: ""; } .bp3-icon-chart::before { content: ""; } .bp3-icon-chat::before { content: ""; } .bp3-icon-chevron-backward::before { content: ""; } .bp3-icon-chevron-down::before { content: ""; } .bp3-icon-chevron-forward::before { content: ""; } .bp3-icon-chevron-left::before { content: ""; } .bp3-icon-chevron-right::before { content: ""; } .bp3-icon-chevron-up::before { content: ""; } .bp3-icon-circle::before { content: ""; } .bp3-icon-circle-arrow-down::before { content: ""; } .bp3-icon-circle-arrow-left::before { content: ""; } .bp3-icon-circle-arrow-right::before { content: ""; } .bp3-icon-circle-arrow-up::before { content: ""; } .bp3-icon-citation::before { content: ""; } .bp3-icon-clean::before { content: ""; } .bp3-icon-clipboard::before { content: ""; } .bp3-icon-cloud::before { content: "☁"; } .bp3-icon-cloud-download::before { content: ""; } .bp3-icon-cloud-upload::before { content: ""; } .bp3-icon-code::before { content: ""; } .bp3-icon-code-block::before { content: ""; } .bp3-icon-cog::before { content: ""; } .bp3-icon-collapse-all::before { content: ""; } .bp3-icon-column-layout::before { content: ""; } .bp3-icon-comment::before { content: ""; } .bp3-icon-comparison::before { content: ""; } .bp3-icon-compass::before { content: ""; } .bp3-icon-compressed::before { content: ""; } .bp3-icon-confirm::before { content: ""; } .bp3-icon-console::before { content: ""; } .bp3-icon-contrast::before { content: ""; } .bp3-icon-control::before { content: ""; } .bp3-icon-credit-card::before { content: ""; } .bp3-icon-cross::before { content: "✗"; } .bp3-icon-crown::before { content: ""; } .bp3-icon-cube::before { content: ""; } .bp3-icon-cube-add::before { content: ""; } .bp3-icon-cube-remove::before { content: ""; } .bp3-icon-curved-range-chart::before { content: ""; } .bp3-icon-cut::before { content: ""; } .bp3-icon-dashboard::before { content: ""; } .bp3-icon-database::before { content: ""; } .bp3-icon-delete::before { content: ""; } .bp3-icon-delta::before { content: "Δ"; } .bp3-icon-derive-column::before { content: ""; } .bp3-icon-desktop::before { content: ""; } .bp3-icon-diagram-tree::before { content: ""; } .bp3-icon-direction-left::before { content: ""; } .bp3-icon-direction-right::before { content: ""; } .bp3-icon-disable::before { content: ""; } .bp3-icon-document::before { content: ""; } .bp3-icon-document-open::before { content: ""; } .bp3-icon-document-share::before { content: ""; } .bp3-icon-dollar::before { content: "$"; } .bp3-icon-dot::before { content: "•"; } .bp3-icon-double-caret-horizontal::before { content: ""; } .bp3-icon-double-caret-vertical::before { content: ""; } .bp3-icon-double-chevron-down::before { content: ""; } .bp3-icon-double-chevron-left::before { content: ""; } .bp3-icon-double-chevron-right::before { content: ""; } .bp3-icon-double-chevron-up::before { content: ""; } .bp3-icon-doughnut-chart::before { content: ""; } .bp3-icon-download::before { content: ""; } .bp3-icon-drag-handle-horizontal::before { content: ""; } .bp3-icon-drag-handle-vertical::before { content: ""; } .bp3-icon-draw::before { content: ""; } .bp3-icon-drive-time::before { content: ""; } .bp3-icon-duplicate::before { content: ""; } .bp3-icon-edit::before { content: "✎"; } .bp3-icon-eject::before { content: "⏏"; } .bp3-icon-endorsed::before { content: ""; } .bp3-icon-envelope::before { content: "✉"; } .bp3-icon-equals::before { content: ""; } .bp3-icon-eraser::before { content: ""; } .bp3-icon-error::before { content: ""; } .bp3-icon-euro::before { content: "€"; } .bp3-icon-exchange::before { content: ""; } .bp3-icon-exclude-row::before { content: ""; } .bp3-icon-expand-all::before { content: ""; } .bp3-icon-export::before { content: ""; } .bp3-icon-eye-off::before { content: ""; } .bp3-icon-eye-on::before { content: ""; } .bp3-icon-eye-open::before { content: ""; } .bp3-icon-fast-backward::before { content: ""; } .bp3-icon-fast-forward::before { content: ""; } .bp3-icon-feed::before { content: ""; } .bp3-icon-feed-subscribed::before { content: ""; } .bp3-icon-film::before { content: ""; } .bp3-icon-filter::before { content: ""; } .bp3-icon-filter-keep::before { content: ""; } .bp3-icon-filter-list::before { content: ""; } .bp3-icon-filter-open::before { content: ""; } .bp3-icon-filter-remove::before { content: ""; } .bp3-icon-flag::before { content: "⚑"; } .bp3-icon-flame::before { content: ""; } .bp3-icon-flash::before { content: ""; } .bp3-icon-floppy-disk::before { content: ""; } .bp3-icon-flow-branch::before { content: ""; } .bp3-icon-flow-end::before { content: ""; } .bp3-icon-flow-linear::before { content: ""; } .bp3-icon-flow-review::before { content: ""; } .bp3-icon-flow-review-branch::before { content: ""; } .bp3-icon-flows::before { content: ""; } .bp3-icon-folder-close::before { content: ""; } .bp3-icon-folder-new::before { content: ""; } .bp3-icon-folder-open::before { content: ""; } .bp3-icon-folder-shared::before { content: ""; } .bp3-icon-folder-shared-open::before { content: ""; } .bp3-icon-follower::before { content: ""; } .bp3-icon-following::before { content: ""; } .bp3-icon-font::before { content: ""; } .bp3-icon-fork::before { content: ""; } .bp3-icon-form::before { content: ""; } .bp3-icon-full-circle::before { content: ""; } .bp3-icon-full-stacked-chart::before { content: ""; } .bp3-icon-fullscreen::before { content: ""; } .bp3-icon-function::before { content: ""; } .bp3-icon-gantt-chart::before { content: ""; } .bp3-icon-geolocation::before { content: ""; } .bp3-icon-geosearch::before { content: ""; } .bp3-icon-git-branch::before { content: ""; } .bp3-icon-git-commit::before { content: ""; } .bp3-icon-git-merge::before { content: ""; } .bp3-icon-git-new-branch::before { content: ""; } .bp3-icon-git-pull::before { content: ""; } .bp3-icon-git-push::before { content: ""; } .bp3-icon-git-repo::before { content: ""; } .bp3-icon-glass::before { content: ""; } .bp3-icon-globe::before { content: ""; } .bp3-icon-globe-network::before { content: ""; } .bp3-icon-graph::before { content: ""; } .bp3-icon-graph-remove::before { content: ""; } .bp3-icon-greater-than::before { content: ""; } .bp3-icon-greater-than-or-equal-to::before { content: ""; } .bp3-icon-grid::before { content: ""; } .bp3-icon-grid-view::before { content: ""; } .bp3-icon-group-objects::before { content: ""; } .bp3-icon-grouped-bar-chart::before { content: ""; } .bp3-icon-hand::before { content: ""; } .bp3-icon-hand-down::before { content: ""; } .bp3-icon-hand-left::before { content: ""; } .bp3-icon-hand-right::before { content: ""; } .bp3-icon-hand-up::before { content: ""; } .bp3-icon-header::before { content: ""; } .bp3-icon-header-one::before { content: ""; } .bp3-icon-header-two::before { content: ""; } .bp3-icon-headset::before { content: ""; } .bp3-icon-heart::before { content: "♥"; } .bp3-icon-heart-broken::before { content: ""; } .bp3-icon-heat-grid::before { content: ""; } .bp3-icon-heatmap::before { content: ""; } .bp3-icon-help::before { content: "?"; } .bp3-icon-helper-management::before { content: ""; } .bp3-icon-highlight::before { content: ""; } .bp3-icon-history::before { content: ""; } .bp3-icon-home::before { content: "⌂"; } .bp3-icon-horizontal-bar-chart::before { content: ""; } .bp3-icon-horizontal-bar-chart-asc::before { content: ""; } .bp3-icon-horizontal-bar-chart-desc::before { content: ""; } .bp3-icon-horizontal-distribution::before { content: ""; } .bp3-icon-id-number::before { content: ""; } .bp3-icon-image-rotate-left::before { content: ""; } .bp3-icon-image-rotate-right::before { content: ""; } .bp3-icon-import::before { content: ""; } .bp3-icon-inbox::before { content: ""; } .bp3-icon-inbox-filtered::before { content: ""; } .bp3-icon-inbox-geo::before { content: ""; } .bp3-icon-inbox-search::before { content: ""; } .bp3-icon-inbox-update::before { content: ""; } .bp3-icon-info-sign::before { content: "ℹ"; } .bp3-icon-inheritance::before { content: ""; } .bp3-icon-inner-join::before { content: ""; } .bp3-icon-insert::before { content: ""; } .bp3-icon-intersection::before { content: ""; } .bp3-icon-ip-address::before { content: ""; } .bp3-icon-issue::before { content: ""; } .bp3-icon-issue-closed::before { content: ""; } .bp3-icon-issue-new::before { content: ""; } .bp3-icon-italic::before { content: ""; } .bp3-icon-join-table::before { content: ""; } .bp3-icon-key::before { content: ""; } .bp3-icon-key-backspace::before { content: ""; } .bp3-icon-key-command::before { content: ""; } .bp3-icon-key-control::before { content: ""; } .bp3-icon-key-delete::before { content: ""; } .bp3-icon-key-enter::before { content: ""; } .bp3-icon-key-escape::before { content: ""; } .bp3-icon-key-option::before { content: ""; } .bp3-icon-key-shift::before { content: ""; } .bp3-icon-key-tab::before { content: ""; } .bp3-icon-known-vehicle::before { content: ""; } .bp3-icon-label::before { content: ""; } .bp3-icon-layer::before { content: ""; } .bp3-icon-layers::before { content: ""; } .bp3-icon-layout::before { content: ""; } .bp3-icon-layout-auto::before { content: ""; } .bp3-icon-layout-balloon::before { content: ""; } .bp3-icon-layout-circle::before { content: ""; } .bp3-icon-layout-grid::before { content: ""; } .bp3-icon-layout-group-by::before { content: ""; } .bp3-icon-layout-hierarchy::before { content: ""; } .bp3-icon-layout-linear::before { content: ""; } .bp3-icon-layout-skew-grid::before { content: ""; } .bp3-icon-layout-sorted-clusters::before { content: ""; } .bp3-icon-left-join::before { content: ""; } .bp3-icon-less-than::before { content: ""; } .bp3-icon-less-than-or-equal-to::before { content: ""; } .bp3-icon-lifesaver::before { content: ""; } .bp3-icon-lightbulb::before { content: ""; } .bp3-icon-link::before { content: ""; } .bp3-icon-list::before { content: "☰"; } .bp3-icon-list-columns::before { content: ""; } .bp3-icon-list-detail-view::before { content: ""; } .bp3-icon-locate::before { content: ""; } .bp3-icon-lock::before { content: ""; } .bp3-icon-log-in::before { content: ""; } .bp3-icon-log-out::before { content: ""; } .bp3-icon-manual::before { content: ""; } .bp3-icon-manually-entered-data::before { content: ""; } .bp3-icon-map::before { content: ""; } .bp3-icon-map-create::before { content: ""; } .bp3-icon-map-marker::before { content: ""; } .bp3-icon-maximize::before { content: ""; } .bp3-icon-media::before { content: ""; } .bp3-icon-menu::before { content: ""; } .bp3-icon-menu-closed::before { content: ""; } .bp3-icon-menu-open::before { content: ""; } .bp3-icon-merge-columns::before { content: ""; } .bp3-icon-merge-links::before { content: ""; } .bp3-icon-minimize::before { content: ""; } .bp3-icon-minus::before { content: "−"; } .bp3-icon-mobile-phone::before { content: ""; } .bp3-icon-mobile-video::before { content: ""; } .bp3-icon-moon::before { content: ""; } .bp3-icon-more::before { content: ""; } .bp3-icon-mountain::before { content: ""; } .bp3-icon-move::before { content: ""; } .bp3-icon-mugshot::before { content: ""; } .bp3-icon-multi-select::before { content: ""; } .bp3-icon-music::before { content: ""; } .bp3-icon-new-grid-item::before { content: ""; } .bp3-icon-new-link::before { content: ""; } .bp3-icon-new-object::before { content: ""; } .bp3-icon-new-person::before { content: ""; } .bp3-icon-new-prescription::before { content: ""; } .bp3-icon-new-text-box::before { content: ""; } .bp3-icon-ninja::before { content: ""; } .bp3-icon-not-equal-to::before { content: ""; } .bp3-icon-notifications::before { content: ""; } .bp3-icon-notifications-updated::before { content: ""; } .bp3-icon-numbered-list::before { content: ""; } .bp3-icon-numerical::before { content: ""; } .bp3-icon-office::before { content: ""; } .bp3-icon-offline::before { content: ""; } .bp3-icon-oil-field::before { content: ""; } .bp3-icon-one-column::before { content: ""; } .bp3-icon-outdated::before { content: ""; } .bp3-icon-page-layout::before { content: ""; } .bp3-icon-panel-stats::before { content: ""; } .bp3-icon-panel-table::before { content: ""; } .bp3-icon-paperclip::before { content: ""; } .bp3-icon-paragraph::before { content: ""; } .bp3-icon-path::before { content: ""; } .bp3-icon-path-search::before { content: ""; } .bp3-icon-pause::before { content: ""; } .bp3-icon-people::before { content: ""; } .bp3-icon-percentage::before { content: ""; } .bp3-icon-person::before { content: ""; } .bp3-icon-phone::before { content: "☎"; } .bp3-icon-pie-chart::before { content: ""; } .bp3-icon-pin::before { content: ""; } .bp3-icon-pivot::before { content: ""; } .bp3-icon-pivot-table::before { content: ""; } .bp3-icon-play::before { content: ""; } .bp3-icon-plus::before { content: "+"; } .bp3-icon-polygon-filter::before { content: ""; } .bp3-icon-power::before { content: ""; } .bp3-icon-predictive-analysis::before { content: ""; } .bp3-icon-prescription::before { content: ""; } .bp3-icon-presentation::before { content: ""; } .bp3-icon-print::before { content: "⎙"; } .bp3-icon-projects::before { content: ""; } .bp3-icon-properties::before { content: ""; } .bp3-icon-property::before { content: ""; } .bp3-icon-publish-function::before { content: ""; } .bp3-icon-pulse::before { content: ""; } .bp3-icon-random::before { content: ""; } .bp3-icon-record::before { content: ""; } .bp3-icon-redo::before { content: ""; } .bp3-icon-refresh::before { content: ""; } .bp3-icon-regression-chart::before { content: ""; } .bp3-icon-remove::before { content: ""; } .bp3-icon-remove-column::before { content: ""; } .bp3-icon-remove-column-left::before { content: ""; } .bp3-icon-remove-column-right::before { content: ""; } .bp3-icon-remove-row-bottom::before { content: ""; } .bp3-icon-remove-row-top::before { content: ""; } .bp3-icon-repeat::before { content: ""; } .bp3-icon-reset::before { content: ""; } .bp3-icon-resolve::before { content: ""; } .bp3-icon-rig::before { content: ""; } .bp3-icon-right-join::before { content: ""; } .bp3-icon-ring::before { content: ""; } .bp3-icon-rotate-document::before { content: ""; } .bp3-icon-rotate-page::before { content: ""; } .bp3-icon-satellite::before { content: ""; } .bp3-icon-saved::before { content: ""; } .bp3-icon-scatter-plot::before { content: ""; } .bp3-icon-search::before { content: ""; } .bp3-icon-search-around::before { content: ""; } .bp3-icon-search-template::before { content: ""; } .bp3-icon-search-text::before { content: ""; } .bp3-icon-segmented-control::before { content: ""; } .bp3-icon-select::before { content: ""; } .bp3-icon-selection::before { content: "⦿"; } .bp3-icon-send-to::before { content: ""; } .bp3-icon-send-to-graph::before { content: ""; } .bp3-icon-send-to-map::before { content: ""; } .bp3-icon-series-add::before { content: ""; } .bp3-icon-series-configuration::before { content: ""; } .bp3-icon-series-derived::before { content: ""; } .bp3-icon-series-filtered::before { content: ""; } .bp3-icon-series-search::before { content: ""; } .bp3-icon-settings::before { content: ""; } .bp3-icon-share::before { content: ""; } .bp3-icon-shield::before { content: ""; } .bp3-icon-shop::before { content: ""; } .bp3-icon-shopping-cart::before { content: ""; } .bp3-icon-sim-card::before { content: ""; } .bp3-icon-slash::before { content: ""; } .bp3-icon-small-cross::before { content: ""; } .bp3-icon-small-minus::before { content: ""; } .bp3-icon-small-plus::before { content: ""; } .bp3-icon-small-tick::before { content: ""; } .bp3-icon-snowflake::before { content: ""; } .bp3-icon-social-media::before { content: ""; } .bp3-icon-sort::before { content: ""; } .bp3-icon-sort-alphabetical::before { content: ""; } .bp3-icon-sort-alphabetical-desc::before { content: ""; } .bp3-icon-sort-asc::before { content: ""; } .bp3-icon-sort-desc::before { content: ""; } .bp3-icon-sort-numerical::before { content: ""; } .bp3-icon-sort-numerical-desc::before { content: ""; } .bp3-icon-split-columns::before { content: ""; } .bp3-icon-square::before { content: ""; } .bp3-icon-stacked-chart::before { content: ""; } .bp3-icon-star::before { content: "★"; } .bp3-icon-star-empty::before { content: "☆"; } .bp3-icon-step-backward::before { content: ""; } .bp3-icon-step-chart::before { content: ""; } .bp3-icon-step-forward::before { content: ""; } .bp3-icon-stop::before { content: ""; } .bp3-icon-strikethrough::before { content: ""; } .bp3-icon-style::before { content: ""; } .bp3-icon-swap-horizontal::before { content: ""; } .bp3-icon-swap-vertical::before { content: ""; } .bp3-icon-symbol-circle::before { content: ""; } .bp3-icon-symbol-cross::before { content: ""; } .bp3-icon-symbol-diamond::before { content: ""; } .bp3-icon-symbol-square::before { content: ""; } .bp3-icon-symbol-triangle-down::before { content: ""; } .bp3-icon-symbol-triangle-up::before { content: ""; } .bp3-icon-tag::before { content: ""; } .bp3-icon-take-action::before { content: ""; } .bp3-icon-taxi::before { content: ""; } .bp3-icon-text-highlight::before { content: ""; } .bp3-icon-th::before { content: ""; } .bp3-icon-th-derived::before { content: ""; } .bp3-icon-th-disconnect::before { content: ""; } .bp3-icon-th-filtered::before { content: ""; } .bp3-icon-th-list::before { content: ""; } .bp3-icon-thumbs-down::before { content: ""; } .bp3-icon-thumbs-up::before { content: ""; } .bp3-icon-tick::before { content: "✓"; } .bp3-icon-tick-circle::before { content: ""; } .bp3-icon-time::before { content: "⏲"; } .bp3-icon-timeline-area-chart::before { content: ""; } .bp3-icon-timeline-bar-chart::before { content: ""; } .bp3-icon-timeline-events::before { content: ""; } .bp3-icon-timeline-line-chart::before { content: ""; } .bp3-icon-tint::before { content: ""; } .bp3-icon-torch::before { content: ""; } .bp3-icon-train::before { content: ""; } .bp3-icon-translate::before { content: ""; } .bp3-icon-trash::before { content: ""; } .bp3-icon-tree::before { content: ""; } .bp3-icon-trending-down::before { content: ""; } .bp3-icon-trending-up::before { content: ""; } .bp3-icon-two-columns::before { content: ""; } .bp3-icon-underline::before { content: "⎁"; } .bp3-icon-undo::before { content: "⎌"; } .bp3-icon-ungroup-objects::before { content: ""; } .bp3-icon-unknown-vehicle::before { content: ""; } .bp3-icon-unlock::before { content: ""; } .bp3-icon-unpin::before { content: ""; } .bp3-icon-unresolve::before { content: ""; } .bp3-icon-updated::before { content: ""; } .bp3-icon-upload::before { content: ""; } .bp3-icon-user::before { content: ""; } .bp3-icon-variable::before { content: ""; } .bp3-icon-vertical-bar-chart-asc::before { content: ""; } .bp3-icon-vertical-bar-chart-desc::before { content: ""; } .bp3-icon-vertical-distribution::before { content: ""; } .bp3-icon-video::before { content: ""; } .bp3-icon-volume-down::before { content: ""; } .bp3-icon-volume-off::before { content: ""; } .bp3-icon-volume-up::before { content: ""; } .bp3-icon-walk::before { content: ""; } .bp3-icon-warning-sign::before { content: ""; } .bp3-icon-waterfall-chart::before { content: ""; } .bp3-icon-widget::before { content: ""; } .bp3-icon-widget-button::before { content: ""; } .bp3-icon-widget-footer::before { content: ""; } .bp3-icon-widget-header::before { content: ""; } .bp3-icon-wrench::before { content: ""; } .bp3-icon-zoom-in::before { content: ""; } .bp3-icon-zoom-out::before { content: ""; } .bp3-icon-zoom-to-fit::before { content: ""; } /* * Copyright 2017 Palantir Technologies, Inc. All rights reserved. */ /* * Copyright 2017 Palantir Technologies, Inc. All rights reserved. */ /* * Copyright 2017 Palantir Technologies, Inc. All rights reserved. */ /* * Copyright 2017 Palantir Technologies, Inc. All rights reserved. */ /* * Copyright 2017 Palantir Technologies, Inc. All rights reserved. */ /* * Copyright 2017 Palantir Technologies, Inc. All rights reserved. */ .bp3-submenu > .bp3-popover-wrapper { display: block; } .bp3-submenu .bp3-popover-target { display: block; } .bp3-submenu.bp3-popover { box-shadow: none; padding: 0 5px; } .bp3-submenu.bp3-popover > .bp3-popover-content { box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 2px 4px rgba(16, 22, 26, 0.2), 0 8px 24px rgba(16, 22, 26, 0.2); } .bp3-dark .bp3-submenu.bp3-popover, .bp3-submenu.bp3-popover.bp3-dark { box-shadow: none; } .bp3-dark .bp3-submenu.bp3-popover > .bp3-popover-content, .bp3-submenu.bp3-popover.bp3-dark > .bp3-popover-content { box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.2), 0 2px 4px rgba(16, 22, 26, 0.4), 0 8px 24px rgba(16, 22, 26, 0.4); } /* Menus Markup: .bp3-large - Large size (only supported on .bp3-menu) Styleguide menu */ .bp3-menu { margin: 0; border-radius: 0; background: #ffffff; min-width: 180px; padding: 5px; list-style: none; text-align: left; color: #182026; } .bp3-menu-divider { display: block; margin: 5px; border-top: 1px solid rgba(16, 22, 26, 0.15); } .bp3-dark .bp3-menu-divider { border-top-color: rgba(255, 255, 255, 0.15); } .bp3-menu-item { display: flex; flex-direction: row; align-items: flex-start; border-radius: -1; padding: 5px 7px; text-decoration: none; line-height: 20px; color: inherit; user-select: none; } .bp3-menu-item > * { flex-grow: 0; flex-shrink: 0; } .bp3-menu-item > .bp3-fill { flex-grow: 1; flex-shrink: 1; } .bp3-menu-item::before, .bp3-menu-item > * { margin-right: 7px; } .bp3-menu-item:empty::before, .bp3-menu-item > :last-child { margin-right: 0; } .bp3-menu-item > .bp3-fill { word-break: break-word; } .bp3-menu-item:hover, .bp3-submenu .bp3-popover-target.bp3-popover-open > .bp3-menu-item { background-color: rgba(167, 182, 194, 0.3); cursor: pointer; text-decoration: none; } .bp3-menu-item.bp3-disabled { background-color: inherit; cursor: not-allowed; color: rgba(92, 112, 128, 0.5); } .bp3-dark .bp3-menu-item { color: inherit; } .bp3-dark .bp3-menu-item:hover, .bp3-dark .bp3-submenu .bp3-popover-target.bp3-popover-open > .bp3-menu-item, .bp3-submenu .bp3-dark .bp3-popover-target.bp3-popover-open > .bp3-menu-item { background-color: rgba(138, 155, 168, 0.15); color: inherit; } .bp3-dark .bp3-menu-item.bp3-disabled { background-color: inherit; color: rgba(191, 204, 214, 0.5); } .bp3-menu-item.bp3-intent-primary { color: #106ba3; } .bp3-menu-item.bp3-intent-primary .bp3-icon { color: inherit; } .bp3-menu-item.bp3-intent-primary::before, .bp3-menu-item.bp3-intent-primary::after, .bp3-menu-item.bp3-intent-primary .bp3-menu-item-label { color: #106ba3; } .bp3-menu-item.bp3-intent-primary:hover, .bp3-submenu .bp3-popover-target.bp3-popover-open > .bp3-intent-primary.bp3-menu-item, .bp3-menu-item.bp3-intent-primary.bp3-active { background-color: #1bbaf2; } .bp3-menu-item.bp3-intent-primary:active { background-color: #106ba3; } .bp3-menu-item.bp3-intent-primary:hover, .bp3-submenu .bp3-popover-target.bp3-popover-open > .bp3-intent-primary.bp3-menu-item, .bp3-menu-item.bp3-intent-primary:hover::before, .bp3-submenu .bp3-popover-target.bp3-popover-open > .bp3-intent-primary.bp3-menu-item::before, .bp3-menu-item.bp3-intent-primary:hover::after, .bp3-submenu .bp3-popover-target.bp3-popover-open > .bp3-intent-primary.bp3-menu-item::after, .bp3-menu-item.bp3-intent-primary:hover .bp3-menu-item-label, .bp3-submenu .bp3-popover-target.bp3-popover-open > .bp3-intent-primary.bp3-menu-item .bp3-menu-item-label, .bp3-menu-item.bp3-intent-primary:active, .bp3-menu-item.bp3-intent-primary:active::before, .bp3-menu-item.bp3-intent-primary:active::after, .bp3-menu-item.bp3-intent-primary:active .bp3-menu-item-label, .bp3-menu-item.bp3-intent-primary.bp3-active, .bp3-menu-item.bp3-intent-primary.bp3-active::before, .bp3-menu-item.bp3-intent-primary.bp3-active::after, .bp3-menu-item.bp3-intent-primary.bp3-active .bp3-menu-item-label { color: #ffffff; } .bp3-menu-item.bp3-intent-success { color: #0d8050; } .bp3-menu-item.bp3-intent-success .bp3-icon { color: inherit; } .bp3-menu-item.bp3-intent-success::before, .bp3-menu-item.bp3-intent-success::after, .bp3-menu-item.bp3-intent-success .bp3-menu-item-label { color: #0d8050; } .bp3-menu-item.bp3-intent-success:hover, .bp3-submenu .bp3-popover-target.bp3-popover-open > .bp3-intent-success.bp3-menu-item, .bp3-menu-item.bp3-intent-success.bp3-active { background-color: #0f9960; } .bp3-menu-item.bp3-intent-success:active { background-color: #0d8050; } .bp3-menu-item.bp3-intent-success:hover, .bp3-submenu .bp3-popover-target.bp3-popover-open > .bp3-intent-success.bp3-menu-item, .bp3-menu-item.bp3-intent-success:hover::before, .bp3-submenu .bp3-popover-target.bp3-popover-open > .bp3-intent-success.bp3-menu-item::before, .bp3-menu-item.bp3-intent-success:hover::after, .bp3-submenu .bp3-popover-target.bp3-popover-open > .bp3-intent-success.bp3-menu-item::after, .bp3-menu-item.bp3-intent-success:hover .bp3-menu-item-label, .bp3-submenu .bp3-popover-target.bp3-popover-open > .bp3-intent-success.bp3-menu-item .bp3-menu-item-label, .bp3-menu-item.bp3-intent-success:active, .bp3-menu-item.bp3-intent-success:active::before, .bp3-menu-item.bp3-intent-success:active::after, .bp3-menu-item.bp3-intent-success:active .bp3-menu-item-label, .bp3-menu-item.bp3-intent-success.bp3-active, .bp3-menu-item.bp3-intent-success.bp3-active::before, .bp3-menu-item.bp3-intent-success.bp3-active::after, .bp3-menu-item.bp3-intent-success.bp3-active .bp3-menu-item-label { color: #ffffff; } .bp3-menu-item.bp3-intent-warning { color: #bf7326; } .bp3-menu-item.bp3-intent-warning .bp3-icon { color: inherit; } .bp3-menu-item.bp3-intent-warning::before, .bp3-menu-item.bp3-intent-warning::after, .bp3-menu-item.bp3-intent-warning .bp3-menu-item-label { color: #bf7326; } .bp3-menu-item.bp3-intent-warning:hover, .bp3-submenu .bp3-popover-target.bp3-popover-open > .bp3-intent-warning.bp3-menu-item, .bp3-menu-item.bp3-intent-warning.bp3-active { background-color: #d9822b; } .bp3-menu-item.bp3-intent-warning:active { background-color: #bf7326; } .bp3-menu-item.bp3-intent-warning:hover, .bp3-submenu .bp3-popover-target.bp3-popover-open > .bp3-intent-warning.bp3-menu-item, .bp3-menu-item.bp3-intent-warning:hover::before, .bp3-submenu .bp3-popover-target.bp3-popover-open > .bp3-intent-warning.bp3-menu-item::before, .bp3-menu-item.bp3-intent-warning:hover::after, .bp3-submenu .bp3-popover-target.bp3-popover-open > .bp3-intent-warning.bp3-menu-item::after, .bp3-menu-item.bp3-intent-warning:hover .bp3-menu-item-label, .bp3-submenu .bp3-popover-target.bp3-popover-open > .bp3-intent-warning.bp3-menu-item .bp3-menu-item-label, .bp3-menu-item.bp3-intent-warning:active, .bp3-menu-item.bp3-intent-warning:active::before, .bp3-menu-item.bp3-intent-warning:active::after, .bp3-menu-item.bp3-intent-warning:active .bp3-menu-item-label, .bp3-menu-item.bp3-intent-warning.bp3-active, .bp3-menu-item.bp3-intent-warning.bp3-active::before, .bp3-menu-item.bp3-intent-warning.bp3-active::after, .bp3-menu-item.bp3-intent-warning.bp3-active .bp3-menu-item-label { color: #ffffff; } .bp3-menu-item.bp3-intent-danger { color: #c23030; } .bp3-menu-item.bp3-intent-danger .bp3-icon { color: inherit; } .bp3-menu-item.bp3-intent-danger::before, .bp3-menu-item.bp3-intent-danger::after, .bp3-menu-item.bp3-intent-danger .bp3-menu-item-label { color: #c23030; } .bp3-menu-item.bp3-intent-danger:hover, .bp3-submenu .bp3-popover-target.bp3-popover-open > .bp3-intent-danger.bp3-menu-item, .bp3-menu-item.bp3-intent-danger.bp3-active { background-color: #db3737; } .bp3-menu-item.bp3-intent-danger:active { background-color: #c23030; } .bp3-menu-item.bp3-intent-danger:hover, .bp3-submenu .bp3-popover-target.bp3-popover-open > .bp3-intent-danger.bp3-menu-item, .bp3-menu-item.bp3-intent-danger:hover::before, .bp3-submenu .bp3-popover-target.bp3-popover-open > .bp3-intent-danger.bp3-menu-item::before, .bp3-menu-item.bp3-intent-danger:hover::after, .bp3-submenu .bp3-popover-target.bp3-popover-open > .bp3-intent-danger.bp3-menu-item::after, .bp3-menu-item.bp3-intent-danger:hover .bp3-menu-item-label, .bp3-submenu .bp3-popover-target.bp3-popover-open > .bp3-intent-danger.bp3-menu-item .bp3-menu-item-label, .bp3-menu-item.bp3-intent-danger:active, .bp3-menu-item.bp3-intent-danger:active::before, .bp3-menu-item.bp3-intent-danger:active::after, .bp3-menu-item.bp3-intent-danger:active .bp3-menu-item-label, .bp3-menu-item.bp3-intent-danger.bp3-active, .bp3-menu-item.bp3-intent-danger.bp3-active::before, .bp3-menu-item.bp3-intent-danger.bp3-active::after, .bp3-menu-item.bp3-intent-danger.bp3-active .bp3-menu-item-label { color: #ffffff; } .bp3-menu-item::before { line-height: 1; font-family: "Icons16", sans-serif; font-size: 16px; font-weight: 400; font-style: normal; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; margin-right: 7px; } .bp3-menu-item::before, .bp3-menu-item > .bp3-icon { margin-top: 2px; color: #5c7080; } .bp3-menu-item .bp3-menu-item-label { color: #5c7080; } .bp3-menu-item:hover, .bp3-submenu .bp3-popover-target.bp3-popover-open > .bp3-menu-item { color: inherit; } .bp3-menu-item.bp3-active, .bp3-menu-item:active { background-color: rgba(115, 134, 148, 0.3); } .bp3-menu-item.bp3-disabled { outline: none !important; background-color: inherit !important; cursor: not-allowed !important; color: rgba(92, 112, 128, 0.5) !important; } .bp3-menu-item.bp3-disabled::before, .bp3-menu-item.bp3-disabled > .bp3-icon, .bp3-menu-item.bp3-disabled .bp3-menu-item-label { color: rgba(92, 112, 128, 0.5) !important; } .bp3-large .bp3-menu-item { padding: 9px 7px; line-height: 22px; font-size: 16px; } .bp3-large .bp3-menu-item .bp3-icon { margin-top: 3px; } .bp3-large .bp3-menu-item::before { line-height: 1; font-family: "Icons20", sans-serif; font-size: 20px; font-weight: 400; font-style: normal; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; margin-top: 1px; margin-right: 10px; } button.bp3-menu-item { border: none; background: none; width: 100%; text-align: left; } /* Menu headers Markup: Styleguide menu-header */ .bp3-menu-header { display: block; margin: 5px; border-top: 1px solid rgba(16, 22, 26, 0.15); cursor: default; padding-left: 2px; } .bp3-dark .bp3-menu-header { border-top-color: rgba(255, 255, 255, 0.15); } .bp3-menu-header:first-of-type { border-top: none; } .bp3-menu-header > h6 { color: #182026; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; margin: 0; padding: 10px 7px 0 1px; line-height: 17px; } .bp3-dark .bp3-menu-header > h6 { color: #f5f8fa; } .bp3-menu-header:first-of-type > h6 { padding-top: 0; } .bp3-large .bp3-menu-header > h6 { padding-top: 15px; padding-bottom: 5px; font-size: 18px; } .bp3-large .bp3-menu-header:first-of-type > h6 { padding-top: 0; } .bp3-dark .bp3-menu { background: #30404d; color: #f5f8fa; } .bp3-dark .bp3-menu-item.bp3-intent-primary { color: #48aff0; } .bp3-dark .bp3-menu-item.bp3-intent-primary .bp3-icon { color: inherit; } .bp3-dark .bp3-menu-item.bp3-intent-primary::before, .bp3-dark .bp3-menu-item.bp3-intent-primary::after, .bp3-dark .bp3-menu-item.bp3-intent-primary .bp3-menu-item-label { color: #48aff0; } .bp3-dark .bp3-menu-item.bp3-intent-primary:hover, .bp3-dark .bp3-submenu .bp3-popover-target.bp3-popover-open > .bp3-intent-primary.bp3-menu-item, .bp3-submenu .bp3-dark .bp3-popover-target.bp3-popover-open > .bp3-intent-primary.bp3-menu-item, .bp3-dark .bp3-menu-item.bp3-intent-primary.bp3-active { background-color: #1bbaf2; } .bp3-dark .bp3-menu-item.bp3-intent-primary:active { background-color: #106ba3; } .bp3-dark .bp3-menu-item.bp3-intent-primary:hover, .bp3-dark .bp3-submenu .bp3-popover-target.bp3-popover-open > .bp3-intent-primary.bp3-menu-item, .bp3-submenu .bp3-dark .bp3-popover-target.bp3-popover-open > .bp3-intent-primary.bp3-menu-item, .bp3-dark .bp3-menu-item.bp3-intent-primary:hover::before, .bp3-dark .bp3-submenu .bp3-popover-target.bp3-popover-open > .bp3-intent-primary.bp3-menu-item::before, .bp3-submenu .bp3-dark .bp3-popover-target.bp3-popover-open > .bp3-intent-primary.bp3-menu-item::before, .bp3-dark .bp3-menu-item.bp3-intent-primary:hover::after, .bp3-dark .bp3-submenu .bp3-popover-target.bp3-popover-open > .bp3-intent-primary.bp3-menu-item::after, .bp3-submenu .bp3-dark .bp3-popover-target.bp3-popover-open > .bp3-intent-primary.bp3-menu-item::after, .bp3-dark .bp3-menu-item.bp3-intent-primary:hover .bp3-menu-item-label, .bp3-dark .bp3-submenu .bp3-popover-target.bp3-popover-open > .bp3-intent-primary.bp3-menu-item .bp3-menu-item-label, .bp3-submenu .bp3-dark .bp3-popover-target.bp3-popover-open > .bp3-intent-primary.bp3-menu-item .bp3-menu-item-label, .bp3-dark .bp3-menu-item.bp3-intent-primary:active, .bp3-dark .bp3-menu-item.bp3-intent-primary:active::before, .bp3-dark .bp3-menu-item.bp3-intent-primary:active::after, .bp3-dark .bp3-menu-item.bp3-intent-primary:active .bp3-menu-item-label, .bp3-dark .bp3-menu-item.bp3-intent-primary.bp3-active, .bp3-dark .bp3-menu-item.bp3-intent-primary.bp3-active::before, .bp3-dark .bp3-menu-item.bp3-intent-primary.bp3-active::after, .bp3-dark .bp3-menu-item.bp3-intent-primary.bp3-active .bp3-menu-item-label { color: #ffffff; } .bp3-dark .bp3-menu-item.bp3-intent-success { color: #3dcc91; } .bp3-dark .bp3-menu-item.bp3-intent-success .bp3-icon { color: inherit; } .bp3-dark .bp3-menu-item.bp3-intent-success::before, .bp3-dark .bp3-menu-item.bp3-intent-success::after, .bp3-dark .bp3-menu-item.bp3-intent-success .bp3-menu-item-label { color: #3dcc91; } .bp3-dark .bp3-menu-item.bp3-intent-success:hover, .bp3-dark .bp3-submenu .bp3-popover-target.bp3-popover-open > .bp3-intent-success.bp3-menu-item, .bp3-submenu .bp3-dark .bp3-popover-target.bp3-popover-open > .bp3-intent-success.bp3-menu-item, .bp3-dark .bp3-menu-item.bp3-intent-success.bp3-active { background-color: #0f9960; } .bp3-dark .bp3-menu-item.bp3-intent-success:active { background-color: #0d8050; } .bp3-dark .bp3-menu-item.bp3-intent-success:hover, .bp3-dark .bp3-submenu .bp3-popover-target.bp3-popover-open > .bp3-intent-success.bp3-menu-item, .bp3-submenu .bp3-dark .bp3-popover-target.bp3-popover-open > .bp3-intent-success.bp3-menu-item, .bp3-dark .bp3-menu-item.bp3-intent-success:hover::before, .bp3-dark .bp3-submenu .bp3-popover-target.bp3-popover-open > .bp3-intent-success.bp3-menu-item::before, .bp3-submenu .bp3-dark .bp3-popover-target.bp3-popover-open > .bp3-intent-success.bp3-menu-item::before, .bp3-dark .bp3-menu-item.bp3-intent-success:hover::after, .bp3-dark .bp3-submenu .bp3-popover-target.bp3-popover-open > .bp3-intent-success.bp3-menu-item::after, .bp3-submenu .bp3-dark .bp3-popover-target.bp3-popover-open > .bp3-intent-success.bp3-menu-item::after, .bp3-dark .bp3-menu-item.bp3-intent-success:hover .bp3-menu-item-label, .bp3-dark .bp3-submenu .bp3-popover-target.bp3-popover-open > .bp3-intent-success.bp3-menu-item .bp3-menu-item-label, .bp3-submenu .bp3-dark .bp3-popover-target.bp3-popover-open > .bp3-intent-success.bp3-menu-item .bp3-menu-item-label, .bp3-dark .bp3-menu-item.bp3-intent-success:active, .bp3-dark .bp3-menu-item.bp3-intent-success:active::before, .bp3-dark .bp3-menu-item.bp3-intent-success:active::after, .bp3-dark .bp3-menu-item.bp3-intent-success:active .bp3-menu-item-label, .bp3-dark .bp3-menu-item.bp3-intent-success.bp3-active, .bp3-dark .bp3-menu-item.bp3-intent-success.bp3-active::before, .bp3-dark .bp3-menu-item.bp3-intent-success.bp3-active::after, .bp3-dark .bp3-menu-item.bp3-intent-success.bp3-active .bp3-menu-item-label { color: #ffffff; } .bp3-dark .bp3-menu-item.bp3-intent-warning { color: #ffb366; } .bp3-dark .bp3-menu-item.bp3-intent-warning .bp3-icon { color: inherit; } .bp3-dark .bp3-menu-item.bp3-intent-warning::before, .bp3-dark .bp3-menu-item.bp3-intent-warning::after, .bp3-dark .bp3-menu-item.bp3-intent-warning .bp3-menu-item-label { color: #ffb366; } .bp3-dark .bp3-menu-item.bp3-intent-warning:hover, .bp3-dark .bp3-submenu .bp3-popover-target.bp3-popover-open > .bp3-intent-warning.bp3-menu-item, .bp3-submenu .bp3-dark .bp3-popover-target.bp3-popover-open > .bp3-intent-warning.bp3-menu-item, .bp3-dark .bp3-menu-item.bp3-intent-warning.bp3-active { background-color: #d9822b; } .bp3-dark .bp3-menu-item.bp3-intent-warning:active { background-color: #bf7326; } .bp3-dark .bp3-menu-item.bp3-intent-warning:hover, .bp3-dark .bp3-submenu .bp3-popover-target.bp3-popover-open > .bp3-intent-warning.bp3-menu-item, .bp3-submenu .bp3-dark .bp3-popover-target.bp3-popover-open > .bp3-intent-warning.bp3-menu-item, .bp3-dark .bp3-menu-item.bp3-intent-warning:hover::before, .bp3-dark .bp3-submenu .bp3-popover-target.bp3-popover-open > .bp3-intent-warning.bp3-menu-item::before, .bp3-submenu .bp3-dark .bp3-popover-target.bp3-popover-open > .bp3-intent-warning.bp3-menu-item::before, .bp3-dark .bp3-menu-item.bp3-intent-warning:hover::after, .bp3-dark .bp3-submenu .bp3-popover-target.bp3-popover-open > .bp3-intent-warning.bp3-menu-item::after, .bp3-submenu .bp3-dark .bp3-popover-target.bp3-popover-open > .bp3-intent-warning.bp3-menu-item::after, .bp3-dark .bp3-menu-item.bp3-intent-warning:hover .bp3-menu-item-label, .bp3-dark .bp3-submenu .bp3-popover-target.bp3-popover-open > .bp3-intent-warning.bp3-menu-item .bp3-menu-item-label, .bp3-submenu .bp3-dark .bp3-popover-target.bp3-popover-open > .bp3-intent-warning.bp3-menu-item .bp3-menu-item-label, .bp3-dark .bp3-menu-item.bp3-intent-warning:active, .bp3-dark .bp3-menu-item.bp3-intent-warning:active::before, .bp3-dark .bp3-menu-item.bp3-intent-warning:active::after, .bp3-dark .bp3-menu-item.bp3-intent-warning:active .bp3-menu-item-label, .bp3-dark .bp3-menu-item.bp3-intent-warning.bp3-active, .bp3-dark .bp3-menu-item.bp3-intent-warning.bp3-active::before, .bp3-dark .bp3-menu-item.bp3-intent-warning.bp3-active::after, .bp3-dark .bp3-menu-item.bp3-intent-warning.bp3-active .bp3-menu-item-label { color: #ffffff; } .bp3-dark .bp3-menu-item.bp3-intent-danger { color: #ff7373; } .bp3-dark .bp3-menu-item.bp3-intent-danger .bp3-icon { color: inherit; } .bp3-dark .bp3-menu-item.bp3-intent-danger::before, .bp3-dark .bp3-menu-item.bp3-intent-danger::after, .bp3-dark .bp3-menu-item.bp3-intent-danger .bp3-menu-item-label { color: #ff7373; } .bp3-dark .bp3-menu-item.bp3-intent-danger:hover, .bp3-dark .bp3-submenu .bp3-popover-target.bp3-popover-open > .bp3-intent-danger.bp3-menu-item, .bp3-submenu .bp3-dark .bp3-popover-target.bp3-popover-open > .bp3-intent-danger.bp3-menu-item, .bp3-dark .bp3-menu-item.bp3-intent-danger.bp3-active { background-color: #db3737; } .bp3-dark .bp3-menu-item.bp3-intent-danger:active { background-color: #c23030; } .bp3-dark .bp3-menu-item.bp3-intent-danger:hover, .bp3-dark .bp3-submenu .bp3-popover-target.bp3-popover-open > .bp3-intent-danger.bp3-menu-item, .bp3-submenu .bp3-dark .bp3-popover-target.bp3-popover-open > .bp3-intent-danger.bp3-menu-item, .bp3-dark .bp3-menu-item.bp3-intent-danger:hover::before, .bp3-dark .bp3-submenu .bp3-popover-target.bp3-popover-open > .bp3-intent-danger.bp3-menu-item::before, .bp3-submenu .bp3-dark .bp3-popover-target.bp3-popover-open > .bp3-intent-danger.bp3-menu-item::before, .bp3-dark .bp3-menu-item.bp3-intent-danger:hover::after, .bp3-dark .bp3-submenu .bp3-popover-target.bp3-popover-open > .bp3-intent-danger.bp3-menu-item::after, .bp3-submenu .bp3-dark .bp3-popover-target.bp3-popover-open > .bp3-intent-danger.bp3-menu-item::after, .bp3-dark .bp3-menu-item.bp3-intent-danger:hover .bp3-menu-item-label, .bp3-dark .bp3-submenu .bp3-popover-target.bp3-popover-open > .bp3-intent-danger.bp3-menu-item .bp3-menu-item-label, .bp3-submenu .bp3-dark .bp3-popover-target.bp3-popover-open > .bp3-intent-danger.bp3-menu-item .bp3-menu-item-label, .bp3-dark .bp3-menu-item.bp3-intent-danger:active, .bp3-dark .bp3-menu-item.bp3-intent-danger:active::before, .bp3-dark .bp3-menu-item.bp3-intent-danger:active::after, .bp3-dark .bp3-menu-item.bp3-intent-danger:active .bp3-menu-item-label, .bp3-dark .bp3-menu-item.bp3-intent-danger.bp3-active, .bp3-dark .bp3-menu-item.bp3-intent-danger.bp3-active::before, .bp3-dark .bp3-menu-item.bp3-intent-danger.bp3-active::after, .bp3-dark .bp3-menu-item.bp3-intent-danger.bp3-active .bp3-menu-item-label { color: #ffffff; } .bp3-dark .bp3-menu-item::before, .bp3-dark .bp3-menu-item > .bp3-icon { color: #bfccd6; } .bp3-dark .bp3-menu-item .bp3-menu-item-label { color: #bfccd6; } .bp3-dark .bp3-menu-item.bp3-active, .bp3-dark .bp3-menu-item:active { background-color: rgba(138, 155, 168, 0.3); } .bp3-dark .bp3-menu-item.bp3-disabled { color: rgba(191, 204, 214, 0.5) !important; } .bp3-dark .bp3-menu-item.bp3-disabled::before, .bp3-dark .bp3-menu-item.bp3-disabled > .bp3-icon, .bp3-dark .bp3-menu-item.bp3-disabled .bp3-menu-item-label { color: rgba(191, 204, 214, 0.5) !important; } .bp3-dark .bp3-menu-divider, .bp3-dark .bp3-menu-header { border-color: rgba(255, 255, 255, 0.15); } .bp3-dark .bp3-menu-header > h6 { color: #f5f8fa; } .bp3-label .bp3-menu { margin-top: 5px; } /* Navbars Markup: .bp3-dark - Dark theme Styleguide navbar */ .bp3-navbar { position: relative; z-index: 10; box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 0 0 rgba(16, 22, 26, 0), 0 1px 1px rgba(16, 22, 26, 0.2); background-color: #ffffff; width: 100%; height: 50px; padding: 0 15px; } .bp3-navbar.bp3-dark, .bp3-dark .bp3-navbar { background-color: #394b59; } .bp3-navbar.bp3-dark { box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.2), 0 0 0 rgba(16, 22, 26, 0), 0 1px 1px rgba(16, 22, 26, 0.4); } .bp3-dark .bp3-navbar { box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.2), 0 0 0 rgba(16, 22, 26, 0), 0 1px 1px rgba(16, 22, 26, 0.4); } .bp3-navbar.bp3-fixed-top { position: fixed; top: 0; right: 0; left: 0; } .bp3-navbar-heading { margin-right: 15px; font-size: 16px; } .bp3-navbar-group { display: flex; align-items: center; height: 50px; } .bp3-navbar-group.bp3-align-left { float: left; } .bp3-navbar-group.bp3-align-right { float: right; } .bp3-navbar-divider { margin: 0 10px; border-left: 1px solid rgba(16, 22, 26, 0.15); height: 20px; } .bp3-dark .bp3-navbar-divider { border-left-color: rgba(255, 255, 255, 0.15); } /* Fixed width Markup: Styleguide navbar-container */ /* Non-ideal state Markup:

This folder is empty

Create a new file to populate the folder.

Styleguide non-ideal-state */ .bp3-non-ideal-state { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; text-align: center; } .bp3-non-ideal-state > * { flex-grow: 0; flex-shrink: 0; } .bp3-non-ideal-state > .bp3-fill { flex-grow: 1; flex-shrink: 1; } .bp3-non-ideal-state::before, .bp3-non-ideal-state > * { margin-bottom: 20px; } .bp3-non-ideal-state:empty::before, .bp3-non-ideal-state > :last-child { margin-bottom: 0; } .bp3-non-ideal-state > * { max-width: 400px; } .bp3-non-ideal-state-visual { color: rgba(92, 112, 128, 0.5); font-size: 60px; } .bp3-dark .bp3-non-ideal-state-visual { color: rgba(191, 204, 214, 0.5); } .bp3-overflow-list { display: flex; flex-wrap: nowrap; min-width: 0; } .bp3-overflow-list-spacer { flex-shrink: 1; width: 1px; } body.bp3-overlay-open { overflow: hidden; } .bp3-overlay { position: static; top: 0; right: 0; bottom: 0; left: 0; z-index: 20; } .bp3-overlay:not(.bp3-overlay-open) { pointer-events: none; } .bp3-overlay.bp3-overlay-container { position: fixed; overflow: hidden; } .bp3-overlay.bp3-overlay-container.bp3-overlay-inline { position: absolute; } .bp3-overlay.bp3-overlay-scroll-container { position: fixed; overflow: auto; } .bp3-overlay.bp3-overlay-scroll-container.bp3-overlay-inline { position: absolute; } .bp3-overlay.bp3-overlay-inline { display: inline; overflow: visible; } .bp3-overlay-content { position: fixed; z-index: 20; } .bp3-overlay-inline .bp3-overlay-content, .bp3-overlay-scroll-container .bp3-overlay-content { position: absolute; } .bp3-overlay-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; opacity: 1; z-index: 20; background-color: rgba(16, 22, 26, 0.7); overflow: auto; user-select: none; } .bp3-overlay-backdrop.bp3-overlay-enter, .bp3-overlay-backdrop.bp3-overlay-appear { opacity: 0; } .bp3-overlay-backdrop.bp3-overlay-enter-active, .bp3-overlay-backdrop.bp3-overlay-appear-active { opacity: 1; transition-property: opacity; transition-duration: 200ms; transition-timing-function: cubic-bezier(0.4, 1, 0.75, 0.9); transition-delay: 0; } .bp3-overlay-backdrop.bp3-overlay-exit { opacity: 1; } .bp3-overlay-backdrop.bp3-overlay-exit-active { opacity: 0; transition-property: opacity; transition-duration: 200ms; transition-timing-function: cubic-bezier(0.4, 1, 0.75, 0.9); transition-delay: 0; } .bp3-overlay-backdrop:focus { outline: none; } .bp3-overlay-inline .bp3-overlay-backdrop { position: absolute; } /* A mixin to generate the classes for a React CSSTransition which animates any number of CSS properties at once. Transitioned properties are specificed as a map of property names to lists of (inital value, final value). For enter & appear transitions, each property will transition from its initial to its final value. For exit transitions, each property will transition in reverse, from final to initial. **Simple example:** `@include react-transition("popover", (opacity: 0 1), $before: "&");` Transition named "popover" moves opacity from 0 to 1. `"&"` indicates that the Transition classes are expected to be applied to this element, where the mixin is invoked. **Params:** $name: React transitionName prop $properties: map of CSS property to (initial, final) values $duration: transition duration $easing: transition easing function $delay: transition delay $before: selector text to insert before transition name (often to select self: &) $after: selector text to insert after transiton name (to select children) */ /* A mixin to generate the classes for one phase of a React CSSTransition. `$phase` must be `appear` or `enter` or `exit`. If `enter` phase is given then `appear` phase will be generated at the same time. If `exit` phase is given then property values are animated in reverse, from final to initial. **Example:** @include react-transition-phase(toast, enter, $enter-translate, $before: "&"); @include react-transition-phase(toast, leave, $leave-blur, $pt-transition-duration * 3, $before: "&"); */ /* Given map of properties to values, set each property to the value at the given index. (remember that sass indices are 1-based). Example: `each-prop((opacity: 0 1), 2)` will print "opacity: 1" */ /* Format transition class name with all the bits. "enter" phase will include "appear" phase in returned name. */ .bp3-panel-stack { position: relative; overflow: hidden; } .bp3-panel-stack-header { display: flex; flex-shrink: 0; align-items: center; z-index: 1; box-shadow: 0 1px rgba(16, 22, 26, 0.15); height: 30px; } .bp3-dark .bp3-panel-stack-header { box-shadow: 0 1px rgba(255, 255, 255, 0.15); } .bp3-panel-stack-header > span { display: flex; flex: 1; align-items: stretch; } .bp3-panel-stack-header .bp3-heading { margin: 0 5px; } .bp3-button.bp3-panel-stack-header-back { margin-left: 5px; padding-left: 0; white-space: nowrap; } .bp3-button.bp3-panel-stack-header-back .bp3-icon { margin: 0 2px; } .bp3-panel-stack-view { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; margin-right: -1px; border-right: 1px solid rgba(16, 22, 26, 0.15); background-color: #ffffff; overflow-y: auto; } .bp3-dark .bp3-panel-stack-view { background-color: #30404d; } .bp3-panel-stack-push .bp3-panel-stack-enter, .bp3-panel-stack-push .bp3-panel-stack-appear { transform: translateX(100%); opacity: 0; } .bp3-panel-stack-push .bp3-panel-stack-enter-active, .bp3-panel-stack-push .bp3-panel-stack-appear-active { transform: translate(0%); opacity: 1; transition-property: transform, opacity; transition-duration: 400ms; transition-timing-function: ease; transition-delay: 0; } .bp3-panel-stack-push .bp3-panel-stack-exit { transform: translate(0%); opacity: 1; } .bp3-panel-stack-push .bp3-panel-stack-exit-active { transform: translateX(-50%); opacity: 0; transition-property: transform, opacity; transition-duration: 400ms; transition-timing-function: ease; transition-delay: 0; } .bp3-panel-stack-pop .bp3-panel-stack-enter, .bp3-panel-stack-pop .bp3-panel-stack-appear { transform: translateX(-50%); opacity: 0; } .bp3-panel-stack-pop .bp3-panel-stack-enter-active, .bp3-panel-stack-pop .bp3-panel-stack-appear-active { transform: translate(0%); opacity: 1; transition-property: transform, opacity; transition-duration: 400ms; transition-timing-function: ease; transition-delay: 0; } .bp3-panel-stack-pop .bp3-panel-stack-exit { transform: translate(0%); opacity: 1; } .bp3-panel-stack-pop .bp3-panel-stack-exit-active { transform: translateX(100%); opacity: 0; transition-property: transform, opacity; transition-duration: 400ms; transition-timing-function: ease; transition-delay: 0; } /* A mixin to generate the classes for a React CSSTransition which animates any number of CSS properties at once. Transitioned properties are specificed as a map of property names to lists of (inital value, final value). For enter & appear transitions, each property will transition from its initial to its final value. For exit transitions, each property will transition in reverse, from final to initial. **Simple example:** `@include react-transition("popover", (opacity: 0 1), $before: "&");` Transition named "popover" moves opacity from 0 to 1. `"&"` indicates that the Transition classes are expected to be applied to this element, where the mixin is invoked. **Params:** $name: React transitionName prop $properties: map of CSS property to (initial, final) values $duration: transition duration $easing: transition easing function $delay: transition delay $before: selector text to insert before transition name (often to select self: &) $after: selector text to insert after transiton name (to select children) */ /* A mixin to generate the classes for one phase of a React CSSTransition. `$phase` must be `appear` or `enter` or `exit`. If `enter` phase is given then `appear` phase will be generated at the same time. If `exit` phase is given then property values are animated in reverse, from final to initial. **Example:** @include react-transition-phase(toast, enter, $enter-translate, $before: "&"); @include react-transition-phase(toast, leave, $leave-blur, $pt-transition-duration * 3, $before: "&"); */ /* Given map of properties to values, set each property to the value at the given index. (remember that sass indices are 1-based). Example: `each-prop((opacity: 0 1), 2)` will print "opacity: 1" */ /* Format transition class name with all the bits. "enter" phase will include "appear" phase in returned name. */ .bp3-popover { box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 2px 4px rgba(16, 22, 26, 0.2), 0 8px 24px rgba(16, 22, 26, 0.2); transform: scale(1); display: inline-block; z-index: 20; border-radius: 0; } .bp3-popover .bp3-popover-arrow { position: absolute; width: 30px; height: 30px; } .bp3-popover .bp3-popover-arrow::before { margin: 5px; width: 20px; height: 20px; } .bp3-tether-element-attached-bottom.bp3-tether-target-attached-top > .bp3-popover { margin-top: -17px; margin-bottom: 17px; } .bp3-tether-element-attached-bottom.bp3-tether-target-attached-top > .bp3-popover > .bp3-popover-arrow { bottom: -11px; } .bp3-tether-element-attached-bottom.bp3-tether-target-attached-top > .bp3-popover > .bp3-popover-arrow svg { transform: rotate(-90deg); } .bp3-tether-element-attached-left.bp3-tether-target-attached-right > .bp3-popover { margin-left: 17px; } .bp3-tether-element-attached-left.bp3-tether-target-attached-right > .bp3-popover > .bp3-popover-arrow { left: -11px; } .bp3-tether-element-attached-left.bp3-tether-target-attached-right > .bp3-popover > .bp3-popover-arrow svg { transform: rotate(0); } .bp3-tether-element-attached-top.bp3-tether-target-attached-bottom > .bp3-popover { margin-top: 17px; } .bp3-tether-element-attached-top.bp3-tether-target-attached-bottom > .bp3-popover > .bp3-popover-arrow { top: -11px; } .bp3-tether-element-attached-top.bp3-tether-target-attached-bottom > .bp3-popover > .bp3-popover-arrow svg { transform: rotate(90deg); } .bp3-tether-element-attached-right.bp3-tether-target-attached-left > .bp3-popover { margin-right: 17px; margin-left: -17px; } .bp3-tether-element-attached-right.bp3-tether-target-attached-left > .bp3-popover > .bp3-popover-arrow { right: -11px; } .bp3-tether-element-attached-right.bp3-tether-target-attached-left > .bp3-popover > .bp3-popover-arrow svg { transform: rotate(180deg); } .bp3-tether-element-attached-middle > .bp3-popover > .bp3-popover-arrow { top: 50%; transform: translateY(-50%); } .bp3-tether-element-attached-center > .bp3-popover > .bp3-popover-arrow { right: 50%; transform: translateX(50%); } .bp3-tether-element-attached-top.bp3-tether-target-attached-top > .bp3-popover > .bp3-popover-arrow { top: -0.3934px; } .bp3-tether-element-attached-right.bp3-tether-target-attached-right > .bp3-popover > .bp3-popover-arrow { right: -0.3934px; } .bp3-tether-element-attached-left.bp3-tether-target-attached-left > .bp3-popover > .bp3-popover-arrow { left: -0.3934px; } .bp3-tether-element-attached-bottom.bp3-tether-target-attached-bottom > .bp3-popover > .bp3-popover-arrow { bottom: -0.3934px; } .bp3-tether-element-attached-top.bp3-tether-element-attached-left > .bp3-popover { transform-origin: top left; } .bp3-tether-element-attached-top.bp3-tether-element-attached-center > .bp3-popover { transform-origin: top center; } .bp3-tether-element-attached-top.bp3-tether-element-attached-right > .bp3-popover { transform-origin: top right; } .bp3-tether-element-attached-middle.bp3-tether-element-attached-left > .bp3-popover { transform-origin: center left; } .bp3-tether-element-attached-middle.bp3-tether-element-attached-center > .bp3-popover { transform-origin: center center; } .bp3-tether-element-attached-middle.bp3-tether-element-attached-right > .bp3-popover { transform-origin: center right; } .bp3-tether-element-attached-bottom.bp3-tether-element-attached-left > .bp3-popover { transform-origin: bottom left; } .bp3-tether-element-attached-bottom.bp3-tether-element-attached-center > .bp3-popover { transform-origin: bottom center; } .bp3-tether-element-attached-bottom.bp3-tether-element-attached-right > .bp3-popover { transform-origin: bottom right; } .bp3-popover .bp3-popover-content { background: #ffffff; color: inherit; } .bp3-popover .bp3-popover-arrow::before { box-shadow: 1px 1px 6px rgba(16, 22, 26, 0.2); } .bp3-popover .bp3-popover-arrow-border { fill: #10161a; fill-opacity: 0.1; } .bp3-popover .bp3-popover-arrow-fill { fill: #ffffff; } .bp3-popover-enter > .bp3-popover, .bp3-popover-appear > .bp3-popover { transform: scale(0.3); } .bp3-popover-enter-active > .bp3-popover, .bp3-popover-appear-active > .bp3-popover { transform: scale(1); transition-property: transform; transition-duration: 300ms; transition-timing-function: cubic-bezier(0.54, 1.12, 0.38, 1.11); transition-delay: 0; } .bp3-popover-exit > .bp3-popover { transform: scale(1); } .bp3-popover-exit-active > .bp3-popover { transform: scale(0.3); transition-property: transform; transition-duration: 300ms; transition-timing-function: cubic-bezier(0.54, 1.12, 0.38, 1.11); transition-delay: 0; } .bp3-popover .bp3-popover-content { position: relative; border-radius: 0; } .bp3-popover.bp3-popover-content-sizing .bp3-popover-content { max-width: 350px; padding: 20px; } .bp3-popover-target + .bp3-overlay .bp3-popover.bp3-popover-content-sizing { width: 350px; } .bp3-popover.bp3-minimal { margin: 0 !important; } .bp3-popover.bp3-minimal .bp3-popover-arrow { display: none; } .bp3-popover.bp3-minimal.bp3-popover { transform: scale(1); } .bp3-popover-enter > .bp3-popover.bp3-minimal.bp3-popover, .bp3-popover-appear > .bp3-popover.bp3-minimal.bp3-popover { transform: scale(1); } .bp3-popover-enter-active > .bp3-popover.bp3-minimal.bp3-popover, .bp3-popover-appear-active > .bp3-popover.bp3-minimal.bp3-popover { transform: scale(1); transition-property: transform; transition-duration: 100ms; transition-timing-function: cubic-bezier(0.4, 1, 0.75, 0.9); transition-delay: 0; } .bp3-popover-exit > .bp3-popover.bp3-minimal.bp3-popover { transform: scale(1); } .bp3-popover-exit-active > .bp3-popover.bp3-minimal.bp3-popover { transform: scale(1); transition-property: transform; transition-duration: 100ms; transition-timing-function: cubic-bezier(0.4, 1, 0.75, 0.9); transition-delay: 0; } .bp3-popover.bp3-dark, .bp3-dark .bp3-popover { box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.2), 0 2px 4px rgba(16, 22, 26, 0.4), 0 8px 24px rgba(16, 22, 26, 0.4); } .bp3-popover.bp3-dark .bp3-popover-content, .bp3-dark .bp3-popover .bp3-popover-content { background: #30404d; color: inherit; } .bp3-popover.bp3-dark .bp3-popover-arrow::before, .bp3-dark .bp3-popover .bp3-popover-arrow::before { box-shadow: 1px 1px 6px rgba(16, 22, 26, 0.4); } .bp3-popover.bp3-dark .bp3-popover-arrow-border, .bp3-dark .bp3-popover .bp3-popover-arrow-border { fill: #10161a; fill-opacity: 0.2; } .bp3-popover.bp3-dark .bp3-popover-arrow-fill, .bp3-dark .bp3-popover .bp3-popover-arrow-fill { fill: #30404d; } .bp3-popover-arrow::before { display: block; position: absolute; transform: rotate(45deg); border-radius: -1; content: ""; } .bp3-tether-pinned .bp3-popover-arrow { display: none; } .bp3-popover-backdrop { background: rgba(255, 255, 255, 0); } .bp3-transition-container { opacity: 1; display: flex; z-index: 20; } .bp3-transition-container.bp3-popover-enter, .bp3-transition-container.bp3-popover-appear { opacity: 0; } .bp3-transition-container.bp3-popover-enter-active, .bp3-transition-container.bp3-popover-appear-active { opacity: 1; transition-property: opacity; transition-duration: 100ms; transition-timing-function: cubic-bezier(0.4, 1, 0.75, 0.9); transition-delay: 0; } .bp3-transition-container.bp3-popover-exit { opacity: 1; } .bp3-transition-container.bp3-popover-exit-active { opacity: 0; transition-property: opacity; transition-duration: 100ms; transition-timing-function: cubic-bezier(0.4, 1, 0.75, 0.9); transition-delay: 0; } .bp3-transition-container:focus { outline: none; } .bp3-transition-container.bp3-popover-leave .bp3-popover-content { pointer-events: none; } .bp3-transition-container[data-x-out-of-boundaries] { display: none; } span.bp3-popover-target { display: inline-block; } .bp3-popover-wrapper.bp3-fill { width: 100%; } .bp3-portal { position: absolute; top: 0; right: 0; left: 0; } /* Progress bars Markup:

.bp3-no-stripes - No stripes .bp3-no-animation - No animation Styleguide progress-bar */ @keyframes linear-progress-bar-stripes { from { background-position: 0 0; } to { background-position: 30px 0; } } .bp3-progress-bar { display: block; position: relative; border-radius: 40px; background: rgba(92, 112, 128, 0.2); width: 100%; height: 8px; overflow: hidden; } .bp3-progress-bar .bp3-progress-meter { position: absolute; border-radius: 40px; background: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%); background-color: rgba(92, 112, 128, 0.8); background-size: 30px 30px; width: 100%; height: 100%; transition: width 200ms cubic-bezier(0.4, 1, 0.75, 0.9); } .bp3-progress-bar:not(.bp3-no-animation):not(.bp3-no-stripes) .bp3-progress-meter { animation: linear-progress-bar-stripes 300ms linear infinite reverse; } .bp3-progress-bar.bp3-no-stripes .bp3-progress-meter { background-image: none; } .bp3-dark .bp3-progress-bar { background: rgba(16, 22, 26, 0.5); } .bp3-dark .bp3-progress-bar .bp3-progress-meter { background-color: #8a9ba8; } .bp3-progress-bar.bp3-intent-primary .bp3-progress-meter { background-color: #1bbaf2; } .bp3-progress-bar.bp3-intent-success .bp3-progress-meter { background-color: #0f9960; } .bp3-progress-bar.bp3-intent-warning .bp3-progress-meter { background-color: #d9822b; } .bp3-progress-bar.bp3-intent-danger .bp3-progress-meter { background-color: #db3737; } /* Skeletons Markup:

Card heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget tortor felis. Fusce dapibus metus in dapibus mollis. Quisque eget ex diam.

.bp3-skeleton - Render this element as a skeleton, an outline of its true self. Styleguide skeleton */ @keyframes skeleton-glow { from { border-color: rgba(206, 217, 224, 0.2); background: rgba(206, 217, 224, 0.2); } to { border-color: rgba(92, 112, 128, 0.2); background: rgba(92, 112, 128, 0.2); } } /* stylelint-disable declaration-no-important */ .bp3-skeleton { border-color: rgba(206, 217, 224, 0.2) !important; border-radius: 2px; box-shadow: none !important; background: rgba(206, 217, 224, 0.2); background-clip: padding-box !important; cursor: default; color: transparent !important; animation: 1000ms linear infinite alternate skeleton-glow; pointer-events: none; user-select: none; } .bp3-skeleton::before, .bp3-skeleton::after, .bp3-skeleton * { visibility: hidden !important; } /* stylelint-enable declaration-no-important */ /* * Copyright 2017 Palantir Technologies, Inc. All rights reserved. */ /* * Copyright 2017 Palantir Technologies, Inc. All rights reserved. */ /* * Copyright 2017 Palantir Technologies, Inc. All rights reserved. */ /* CSS `border` property issues: - An element can only have one border. - Borders can't stack with shadows. - Borders modify the size of the element they're applied to. - Border positioning requires the extra `box-sizing` property. `box-shadow` doesn't have these issues, we're using it instead of `border`. */ /* Overlay shadows are used for default buttons floating on top of other elements. This way, the shadows blend with the colors beneath it. Switches and slider handles both use these variables. */ .bp3-slider { width: 100%; min-width: 150px; height: 40px; position: relative; outline: none; cursor: default; user-select: none; } .bp3-slider:hover { cursor: pointer; } .bp3-slider:active { cursor: grabbing; } .bp3-slider.bp3-disabled { opacity: 0.5; cursor: not-allowed; } .bp3-slider.bp3-slider-unlabeled { height: 16px; } .bp3-slider-track, .bp3-slider-progress { top: 5px; right: 0; left: 0; height: 6px; position: absolute; } .bp3-slider-track { border-radius: 0; overflow: hidden; } .bp3-slider-progress { background: rgba(92, 112, 128, 0.2); } .bp3-dark .bp3-slider-progress { background: rgba(16, 22, 26, 0.5); } .bp3-slider-progress.bp3-intent-primary { background-color: #1bbaf2; } .bp3-slider-progress.bp3-intent-success { background-color: #0f9960; } .bp3-slider-progress.bp3-intent-warning { background-color: #d9822b; } .bp3-slider-progress.bp3-intent-danger { background-color: #db3737; } .bp3-slider-handle { box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.2), inset 0 -1px 0 rgba(16, 22, 26, 0.1); background-color: #f5f8fa; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)); color: #182026; position: absolute; top: 0; left: 0; border-radius: 0; box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.2), 0 1px 1px rgba(16, 22, 26, 0.2); cursor: pointer; width: 16px; height: 16px; } .bp3-slider-handle:hover { box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.2), inset 0 -1px 0 rgba(16, 22, 26, 0.1); background-clip: padding-box; background-color: #ebf1f5; } .bp3-slider-handle:active, .bp3-slider-handle.bp3-active { box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.2), inset 0 1px 2px rgba(16, 22, 26, 0.2); background-color: #d8e1e8; background-image: none; } .bp3-slider-handle:disabled, .bp3-slider-handle.bp3-disabled { outline: none; box-shadow: none; background-color: rgba(206, 217, 224, 0.5); background-image: none; cursor: not-allowed; color: rgba(92, 112, 128, 0.5); } .bp3-slider-handle:disabled.bp3-active, .bp3-slider-handle:disabled.bp3-active:hover, .bp3-slider-handle.bp3-disabled.bp3-active, .bp3-slider-handle.bp3-disabled.bp3-active:hover { background: rgba(206, 217, 224, 0.7); } .bp3-slider-handle:focus { z-index: 1; } .bp3-slider-handle:hover { box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.2), inset 0 -1px 0 rgba(16, 22, 26, 0.1); background-clip: padding-box; background-color: #ebf1f5; z-index: 2; box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.2), 0 1px 1px rgba(16, 22, 26, 0.2); cursor: grab; } .bp3-slider-handle.bp3-active { box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.2), inset 0 1px 2px rgba(16, 22, 26, 0.2); background-color: #d8e1e8; background-image: none; box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.2), inset 0 1px 1px rgba(16, 22, 26, 0.1); cursor: grabbing; } .bp3-disabled .bp3-slider-handle { box-shadow: none; background: #bfccd6; pointer-events: none; } .bp3-dark .bp3-slider-handle { box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.4); background-color: #394b59; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0)); color: #f5f8fa; } .bp3-dark .bp3-slider-handle:hover, .bp3-dark .bp3-slider-handle:active, .bp3-dark .bp3-slider-handle.bp3-active { color: #f5f8fa; } .bp3-dark .bp3-slider-handle:hover { box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.4); background-color: #30404d; } .bp3-dark .bp3-slider-handle:active, .bp3-dark .bp3-slider-handle.bp3-active { box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.6), inset 0 1px 2px rgba(16, 22, 26, 0.2); background-color: #202b33; background-image: none; } .bp3-dark .bp3-slider-handle:disabled, .bp3-dark .bp3-slider-handle.bp3-disabled { box-shadow: none; background-color: rgba(57, 75, 89, 0.5); background-image: none; color: rgba(191, 204, 214, 0.5); } .bp3-dark .bp3-slider-handle:disabled.bp3-active, .bp3-dark .bp3-slider-handle.bp3-disabled.bp3-active { background: rgba(57, 75, 89, 0.7); } .bp3-dark .bp3-slider-handle .bp3-button-spinner .bp3-spinner-head { background: rgba(16, 22, 26, 0.5); stroke: #8a9ba8; } .bp3-dark .bp3-slider-handle, .bp3-dark .bp3-slider-handle:hover { background-color: #394b59; } .bp3-dark .bp3-slider-handle.bp3-active { background-color: #293742; } .bp3-dark .bp3-disabled .bp3-slider-handle { border-color: #5c7080; box-shadow: none; background: #5c7080; } .bp3-slider-handle .bp3-slider-label { margin-left: 8px; border-radius: 0; box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 2px 4px rgba(16, 22, 26, 0.2), 0 8px 24px rgba(16, 22, 26, 0.2); background: #394b59; color: #f5f8fa; } .bp3-dark .bp3-slider-handle .bp3-slider-label { box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.2), 0 2px 4px rgba(16, 22, 26, 0.4), 0 8px 24px rgba(16, 22, 26, 0.4); background: #e1e8ed; color: #394b59; } .bp3-disabled .bp3-slider-handle .bp3-slider-label { box-shadow: none; } .bp3-slider-handle.bp3-start, .bp3-slider-handle.bp3-end { width: 8px; } .bp3-slider-handle.bp3-start { border-top-right-radius: 0; border-bottom-right-radius: 0; } .bp3-slider-handle.bp3-end { margin-left: 8px; border-top-left-radius: 0; border-bottom-left-radius: 0; } .bp3-slider-handle.bp3-end .bp3-slider-label { margin-left: 0; } .bp3-slider-label { transform: translate(-50%, 20px); display: inline-block; position: absolute; padding: 2px 5px; vertical-align: top; line-height: 1; font-size: 12px; } .bp3-slider.bp3-vertical { width: 40px; min-width: 40px; height: 150px; } .bp3-slider.bp3-vertical .bp3-slider-track, .bp3-slider.bp3-vertical .bp3-slider-progress { top: 0; bottom: 0; left: 5px; width: 6px; height: auto; } .bp3-slider.bp3-vertical .bp3-slider-progress { top: auto; } .bp3-slider.bp3-vertical .bp3-slider-label { transform: translate(20px, 50%); } .bp3-slider.bp3-vertical .bp3-slider-handle { top: auto; } .bp3-slider.bp3-vertical .bp3-slider-handle .bp3-slider-label { margin-top: -8px; margin-left: 0; } .bp3-slider.bp3-vertical .bp3-slider-handle.bp3-end, .bp3-slider.bp3-vertical .bp3-slider-handle.bp3-start { margin-left: 0; width: 16px; height: 8px; } .bp3-slider.bp3-vertical .bp3-slider-handle.bp3-start { border-top-left-radius: 0; border-bottom-right-radius: 0; } .bp3-slider.bp3-vertical .bp3-slider-handle.bp3-start .bp3-slider-label { transform: translate(20px); } .bp3-slider.bp3-vertical .bp3-slider-handle.bp3-end { margin-bottom: 8px; border-top-left-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } @keyframes pt-spinner-animation { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .bp3-spinner { display: flex; align-items: center; justify-content: center; overflow: visible; vertical-align: middle; } .bp3-spinner svg { display: block; } .bp3-spinner path { fill-opacity: 0; } .bp3-spinner .bp3-spinner-head { transform-origin: center; transition: stroke-dashoffset 200ms cubic-bezier(0.4, 1, 0.75, 0.9); stroke: rgba(92, 112, 128, 0.8); stroke-linecap: round; } .bp3-spinner .bp3-spinner-track { stroke: rgba(92, 112, 128, 0.2); } .bp3-spinner-animation { animation: pt-spinner-animation 500ms linear infinite; } .bp3-no-spin > .bp3-spinner-animation { animation: none; } .bp3-dark .bp3-spinner .bp3-spinner-head { stroke: #8a9ba8; } .bp3-dark .bp3-spinner .bp3-spinner-track { stroke: rgba(16, 22, 26, 0.5); } .bp3-spinner.bp3-intent-primary .bp3-spinner-head { stroke: #1bbaf2; } .bp3-spinner.bp3-intent-success .bp3-spinner-head { stroke: #0f9960; } .bp3-spinner.bp3-intent-warning .bp3-spinner-head { stroke: #d9822b; } .bp3-spinner.bp3-intent-danger .bp3-spinner-head { stroke: #db3737; } /* Tabs Markup:

Selected tab
Another tab
Disabled tab

Selected panel

.bp3-large - Large tabs Styleguide tabs */ .bp3-tabs.bp3-vertical { display: flex; } .bp3-tabs.bp3-vertical > .bp3-tab-list { flex-direction: column; align-items: flex-start; } .bp3-tabs.bp3-vertical > .bp3-tab-list .bp3-tab { border-radius: 0; width: 100%; padding: 0 10px; } .bp3-tabs.bp3-vertical > .bp3-tab-list .bp3-tab[aria-selected="true"] { box-shadow: none; background-color: rgba(27, 186, 242, 0.2); } .bp3-tabs.bp3-vertical > .bp3-tab-list .bp3-tab-indicator-wrapper .bp3-tab-indicator { top: 0; right: 0; bottom: 0; left: 0; border-radius: 0; background-color: rgba(27, 186, 242, 0.2); height: auto; } .bp3-tabs.bp3-vertical > .bp3-tab-panel { margin-top: 0; padding-left: 20px; } .bp3-tab-list { display: flex; flex: 0 0 auto; align-items: flex-end; position: relative; margin: 0; border: none; padding: 0; list-style: none; } .bp3-tab-list > *:not(:last-child) { margin-right: 20px; } .bp3-tab { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; flex: 0 0 auto; position: relative; cursor: pointer; max-width: 100%; vertical-align: top; line-height: 30px; color: #182026; font-size: 14px; } .bp3-tab a { display: block; text-decoration: none; color: inherit; } .bp3-tab-indicator-wrapper ~ .bp3-tab { box-shadow: none !important; background-color: transparent !important; } .bp3-tab[aria-disabled="true"] { cursor: not-allowed; color: rgba(92, 112, 128, 0.5); } .bp3-tab[aria-selected="true"] { border-radius: 0; box-shadow: inset 0 -3px 0 #106ba3; } .bp3-tab[aria-selected="true"], .bp3-tab:not([aria-disabled="true"]):hover { color: #106ba3; } .bp3-tab:focus { -moz-outline-radius: 0; } .bp3-large > .bp3-tab { line-height: 40px; font-size: 16px; } .bp3-tab-panel { margin-top: 20px; } .bp3-tab-panel[aria-hidden="true"] { display: none; } .bp3-tab-indicator-wrapper { position: absolute; top: 0; left: 0; transform: translateX(0), translateY(0); transition: height, transform, width; transition-duration: 200ms; transition-timing-function: cubic-bezier(0.4, 1, 0.75, 0.9); pointer-events: none; } .bp3-tab-indicator-wrapper .bp3-tab-indicator { position: absolute; right: 0; bottom: 0; left: 0; background-color: #106ba3; height: 3px; } .bp3-tab-indicator-wrapper.bp3-no-animation { transition: none; } .bp3-dark .bp3-tab { color: #f5f8fa; } .bp3-dark .bp3-tab[aria-disabled="true"] { color: rgba(191, 204, 214, 0.5); } .bp3-dark .bp3-tab[aria-selected="true"] { box-shadow: inset 0 -3px 0 #48aff0; } .bp3-dark .bp3-tab[aria-selected="true"], .bp3-dark .bp3-tab:not([aria-disabled="true"]):hover { color: #48aff0; } .bp3-dark .bp3-tab-indicator { background-color: #48aff0; } .bp3-flex-expander { flex: 1 1; } /* Tags Markup: 125 Done Tracking Crushed A rather long string of text that wraps to multiple lines demonstrates the position of the remove button. .bp3-large - Large .bp3-minimal - Minimal appearance .bp3-round - Rounded corners, ideal for badges .bp3-interactive - Hover and active effects .bp3-intent-primary - Primary intent .bp3-intent-success - Success intent .bp3-intent-warning - Warning intent .bp3-intent-danger - Danger intent Styleguide tag */ .bp3-tag { display: inline-flex; flex-direction: row; align-items: center; position: relative; border: none; border-radius: 0; box-shadow: none; background-color: #5c7080; min-width: 20px; max-width: 100%; min-height: 20px; padding: 2px 6px; line-height: 16px; color: #f5f8fa; font-size: 12px; } .bp3-tag.bp3-interactive { cursor: pointer; } .bp3-tag.bp3-interactive:hover { background-color: rgba(92, 112, 128, 0.85); } .bp3-tag.bp3-interactive.bp3-active, .bp3-tag.bp3-interactive:active { background-color: rgba(92, 112, 128, 0.7); } .bp3-tag > * { flex-grow: 0; flex-shrink: 0; } .bp3-tag > .bp3-fill { flex-grow: 1; flex-shrink: 1; } .bp3-tag::before, .bp3-tag > * { margin-right: 4px; } .bp3-tag:empty::before, .bp3-tag > :last-child { margin-right: 0; } .bp3-tag:focus { outline: rgba(19, 124, 189, 0.6) auto 2px; outline-offset: 0; -moz-outline-radius: 6px; } .bp3-tag.bp3-round { border-radius: 30px; padding-right: 8px; padding-left: 8px; } .bp3-dark .bp3-tag { background-color: #bfccd6; color: #182026; } .bp3-dark .bp3-tag.bp3-interactive { cursor: pointer; } .bp3-dark .bp3-tag.bp3-interactive:hover { background-color: rgba(191, 204, 214, 0.85); } .bp3-dark .bp3-tag.bp3-interactive.bp3-active, .bp3-dark .bp3-tag.bp3-interactive:active { background-color: rgba(191, 204, 214, 0.7); } .bp3-dark .bp3-tag > .bp3-icon, .bp3-dark .bp3-tag .bp3-icon-standard, .bp3-dark .bp3-tag .bp3-icon-large { fill: currentColor; } .bp3-tag > .bp3-icon, .bp3-tag .bp3-icon-standard, .bp3-tag .bp3-icon-large { fill: #ffffff; } .bp3-tag.bp3-large, .bp3-large .bp3-tag { min-width: 30px; min-height: 30px; padding: 0 10px; line-height: 20px; font-size: 14px; } .bp3-tag.bp3-large::before, .bp3-tag.bp3-large > *, .bp3-large .bp3-tag::before, .bp3-large .bp3-tag > * { margin-right: 7px; } .bp3-tag.bp3-large:empty::before, .bp3-tag.bp3-large > :last-child, .bp3-large .bp3-tag:empty::before, .bp3-large .bp3-tag > :last-child { margin-right: 0; } .bp3-tag.bp3-large.bp3-round, .bp3-large .bp3-tag.bp3-round { padding-right: 12px; padding-left: 12px; } .bp3-tag.bp3-intent-primary { background: #1bbaf2; color: #ffffff; } .bp3-tag.bp3-intent-primary.bp3-interactive { cursor: pointer; } .bp3-tag.bp3-intent-primary.bp3-interactive:hover { background-color: rgba(27, 186, 242, 0.85); } .bp3-tag.bp3-intent-primary.bp3-interactive.bp3-active, .bp3-tag.bp3-intent-primary.bp3-interactive:active { background-color: rgba(27, 186, 242, 0.7); } .bp3-tag.bp3-intent-success { background: #0f9960; color: #ffffff; } .bp3-tag.bp3-intent-success.bp3-interactive { cursor: pointer; } .bp3-tag.bp3-intent-success.bp3-interactive:hover { background-color: rgba(15, 153, 96, 0.85); } .bp3-tag.bp3-intent-success.bp3-interactive.bp3-active, .bp3-tag.bp3-intent-success.bp3-interactive:active { background-color: rgba(15, 153, 96, 0.7); } .bp3-tag.bp3-intent-warning { background: #d9822b; color: #ffffff; } .bp3-tag.bp3-intent-warning.bp3-interactive { cursor: pointer; } .bp3-tag.bp3-intent-warning.bp3-interactive:hover { background-color: rgba(217, 130, 43, 0.85); } .bp3-tag.bp3-intent-warning.bp3-interactive.bp3-active, .bp3-tag.bp3-intent-warning.bp3-interactive:active { background-color: rgba(217, 130, 43, 0.7); } .bp3-tag.bp3-intent-danger { background: #db3737; color: #ffffff; } .bp3-tag.bp3-intent-danger.bp3-interactive { cursor: pointer; } .bp3-tag.bp3-intent-danger.bp3-interactive:hover { background-color: rgba(219, 55, 55, 0.85); } .bp3-tag.bp3-intent-danger.bp3-interactive.bp3-active, .bp3-tag.bp3-intent-danger.bp3-interactive:active { background-color: rgba(219, 55, 55, 0.7); } .bp3-tag.bp3-fill { display: flex; width: 100%; } .bp3-tag.bp3-minimal > .bp3-icon, .bp3-tag.bp3-minimal .bp3-icon-standard, .bp3-tag.bp3-minimal .bp3-icon-large { fill: #5c7080; } .bp3-tag.bp3-minimal:not([class*="bp3-intent-"]) { background-color: rgba(138, 155, 168, 0.2); color: #182026; } .bp3-tag.bp3-minimal:not([class*="bp3-intent-"]).bp3-interactive { cursor: pointer; } .bp3-tag.bp3-minimal:not([class*="bp3-intent-"]).bp3-interactive:hover { background-color: rgba(92, 112, 128, 0.3); } .bp3-tag.bp3-minimal:not([class*="bp3-intent-"]).bp3-interactive.bp3-active, .bp3-tag.bp3-minimal:not([class*="bp3-intent-"]).bp3-interactive:active { background-color: rgba(92, 112, 128, 0.4); } .bp3-dark .bp3-tag.bp3-minimal:not([class*="bp3-intent-"]) { color: #f5f8fa; } .bp3-dark .bp3-tag.bp3-minimal:not([class*="bp3-intent-"]).bp3-interactive { cursor: pointer; } .bp3-dark .bp3-tag.bp3-minimal:not([class*="bp3-intent-"]).bp3-interactive:hover { background-color: rgba(191, 204, 214, 0.3); } .bp3-dark .bp3-tag.bp3-minimal:not([class*="bp3-intent-"]).bp3-interactive.bp3-active, .bp3-dark .bp3-tag.bp3-minimal:not([class*="bp3-intent-"]).bp3-interactive:active { background-color: rgba(191, 204, 214, 0.4); } .bp3-dark .bp3-tag.bp3-minimal:not([class*="bp3-intent-"]) > .bp3-icon, .bp3-dark .bp3-tag.bp3-minimal:not([class*="bp3-intent-"]) .bp3-icon-standard, .bp3-dark .bp3-tag.bp3-minimal:not([class*="bp3-intent-"]) .bp3-icon-large { fill: #bfccd6; } .bp3-tag.bp3-minimal.bp3-intent-primary { background-color: rgba(27, 186, 242, 0.15); color: #106ba3; } .bp3-tag.bp3-minimal.bp3-intent-primary.bp3-interactive { cursor: pointer; } .bp3-tag.bp3-minimal.bp3-intent-primary.bp3-interactive:hover { background-color: rgba(27, 186, 242, 0.25); } .bp3-tag.bp3-minimal.bp3-intent-primary.bp3-interactive.bp3-active, .bp3-tag.bp3-minimal.bp3-intent-primary.bp3-interactive:active { background-color: rgba(27, 186, 242, 0.35); } .bp3-tag.bp3-minimal.bp3-intent-primary > .bp3-icon, .bp3-tag.bp3-minimal.bp3-intent-primary .bp3-icon-standard, .bp3-tag.bp3-minimal.bp3-intent-primary .bp3-icon-large { fill: #1bbaf2; } .bp3-dark .bp3-tag.bp3-minimal.bp3-intent-primary { background-color: rgba(27, 186, 242, 0.25); color: #48aff0; } .bp3-dark .bp3-tag.bp3-minimal.bp3-intent-primary.bp3-interactive { cursor: pointer; } .bp3-dark .bp3-tag.bp3-minimal.bp3-intent-primary.bp3-interactive:hover { background-color: rgba(27, 186, 242, 0.35); } .bp3-dark .bp3-tag.bp3-minimal.bp3-intent-primary.bp3-interactive.bp3-active, .bp3-dark .bp3-tag.bp3-minimal.bp3-intent-primary.bp3-interactive:active { background-color: rgba(27, 186, 242, 0.45); } .bp3-tag.bp3-minimal.bp3-intent-success { background-color: rgba(15, 153, 96, 0.15); color: #0d8050; } .bp3-tag.bp3-minimal.bp3-intent-success.bp3-interactive { cursor: pointer; } .bp3-tag.bp3-minimal.bp3-intent-success.bp3-interactive:hover { background-color: rgba(15, 153, 96, 0.25); } .bp3-tag.bp3-minimal.bp3-intent-success.bp3-interactive.bp3-active, .bp3-tag.bp3-minimal.bp3-intent-success.bp3-interactive:active { background-color: rgba(15, 153, 96, 0.35); } .bp3-tag.bp3-minimal.bp3-intent-success > .bp3-icon, .bp3-tag.bp3-minimal.bp3-intent-success .bp3-icon-standard, .bp3-tag.bp3-minimal.bp3-intent-success .bp3-icon-large { fill: #0f9960; } .bp3-dark .bp3-tag.bp3-minimal.bp3-intent-success { background-color: rgba(15, 153, 96, 0.25); color: #3dcc91; } .bp3-dark .bp3-tag.bp3-minimal.bp3-intent-success.bp3-interactive { cursor: pointer; } .bp3-dark .bp3-tag.bp3-minimal.bp3-intent-success.bp3-interactive:hover { background-color: rgba(15, 153, 96, 0.35); } .bp3-dark .bp3-tag.bp3-minimal.bp3-intent-success.bp3-interactive.bp3-active, .bp3-dark .bp3-tag.bp3-minimal.bp3-intent-success.bp3-interactive:active { background-color: rgba(15, 153, 96, 0.45); } .bp3-tag.bp3-minimal.bp3-intent-warning { background-color: rgba(217, 130, 43, 0.15); color: #bf7326; } .bp3-tag.bp3-minimal.bp3-intent-warning.bp3-interactive { cursor: pointer; } .bp3-tag.bp3-minimal.bp3-intent-warning.bp3-interactive:hover { background-color: rgba(217, 130, 43, 0.25); } .bp3-tag.bp3-minimal.bp3-intent-warning.bp3-interactive.bp3-active, .bp3-tag.bp3-minimal.bp3-intent-warning.bp3-interactive:active { background-color: rgba(217, 130, 43, 0.35); } .bp3-tag.bp3-minimal.bp3-intent-warning > .bp3-icon, .bp3-tag.bp3-minimal.bp3-intent-warning .bp3-icon-standard, .bp3-tag.bp3-minimal.bp3-intent-warning .bp3-icon-large { fill: #d9822b; } .bp3-dark .bp3-tag.bp3-minimal.bp3-intent-warning { background-color: rgba(217, 130, 43, 0.25); color: #ffb366; } .bp3-dark .bp3-tag.bp3-minimal.bp3-intent-warning.bp3-interactive { cursor: pointer; } .bp3-dark .bp3-tag.bp3-minimal.bp3-intent-warning.bp3-interactive:hover { background-color: rgba(217, 130, 43, 0.35); } .bp3-dark .bp3-tag.bp3-minimal.bp3-intent-warning.bp3-interactive.bp3-active, .bp3-dark .bp3-tag.bp3-minimal.bp3-intent-warning.bp3-interactive:active { background-color: rgba(217, 130, 43, 0.45); } .bp3-tag.bp3-minimal.bp3-intent-danger { background-color: rgba(219, 55, 55, 0.15); color: #c23030; } .bp3-tag.bp3-minimal.bp3-intent-danger.bp3-interactive { cursor: pointer; } .bp3-tag.bp3-minimal.bp3-intent-danger.bp3-interactive:hover { background-color: rgba(219, 55, 55, 0.25); } .bp3-tag.bp3-minimal.bp3-intent-danger.bp3-interactive.bp3-active, .bp3-tag.bp3-minimal.bp3-intent-danger.bp3-interactive:active { background-color: rgba(219, 55, 55, 0.35); } .bp3-tag.bp3-minimal.bp3-intent-danger > .bp3-icon, .bp3-tag.bp3-minimal.bp3-intent-danger .bp3-icon-standard, .bp3-tag.bp3-minimal.bp3-intent-danger .bp3-icon-large { fill: #db3737; } .bp3-dark .bp3-tag.bp3-minimal.bp3-intent-danger { background-color: rgba(219, 55, 55, 0.25); color: #ff7373; } .bp3-dark .bp3-tag.bp3-minimal.bp3-intent-danger.bp3-interactive { cursor: pointer; } .bp3-dark .bp3-tag.bp3-minimal.bp3-intent-danger.bp3-interactive:hover { background-color: rgba(219, 55, 55, 0.35); } .bp3-dark .bp3-tag.bp3-minimal.bp3-intent-danger.bp3-interactive.bp3-active, .bp3-dark .bp3-tag.bp3-minimal.bp3-intent-danger.bp3-interactive:active { background-color: rgba(219, 55, 55, 0.45); } .bp3-tag-remove { display: flex; opacity: 0.5; margin-top: -2px; margin-right: -6px !important; margin-bottom: -2px; border: none; background: none; cursor: pointer; padding: 2px; padding-left: 0; color: inherit; } .bp3-tag-remove:hover { opacity: 0.8; background: none; text-decoration: none; } .bp3-tag-remove:active { opacity: 1; } .bp3-tag-remove:empty::before { line-height: 1; font-family: "Icons16", sans-serif; font-size: 16px; font-weight: 400; font-style: normal; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; content: ""; } .bp3-large .bp3-tag-remove { margin-right: -10px !important; padding: 5px; padding-left: 0; } .bp3-large .bp3-tag-remove:empty::before { line-height: 1; font-family: "Icons20", sans-serif; font-size: 20px; font-weight: 400; font-style: normal; } /* * Copyright 2017 Palantir Technologies, Inc. All rights reserved. */ /* * Copyright 2017 Palantir Technologies, Inc. All rights reserved. */ /* * Copyright 2017 Palantir Technologies, Inc. All rights reserved. */ /* CSS `border` property issues: - An element can only have one border. - Borders can't stack with shadows. - Borders modify the size of the element they're applied to. - Border positioning requires the extra `box-sizing` property. `box-shadow` doesn't have these issues, we're using it instead of `border`. */ /* Overlay shadows are used for default buttons floating on top of other elements. This way, the shadows blend with the colors beneath it. Switches and slider handles both use these variables. */ .bp3-tag-input { display: flex; flex-direction: row; align-items: flex-start; cursor: text; height: auto; min-height: 30px; padding-right: 0; padding-left: 5px; line-height: inherit; } .bp3-tag-input > * { flex-grow: 0; flex-shrink: 0; } .bp3-tag-input > .bp3-tag-input-values { flex-grow: 1; flex-shrink: 1; } .bp3-tag-input .bp3-tag-input-icon { margin-top: 7px; margin-right: 7px; margin-left: 2px; color: #5c7080; } .bp3-tag-input .bp3-tag-input-values { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; align-self: stretch; margin-top: 5px; margin-right: 7px; min-width: 0; } .bp3-tag-input .bp3-tag-input-values > * { flex-grow: 0; flex-shrink: 0; } .bp3-tag-input .bp3-tag-input-values > .bp3-fill { flex-grow: 1; flex-shrink: 1; } .bp3-tag-input .bp3-tag-input-values::before, .bp3-tag-input .bp3-tag-input-values > * { margin-right: 5px; } .bp3-tag-input .bp3-tag-input-values:empty::before, .bp3-tag-input .bp3-tag-input-values > :last-child { margin-right: 0; } .bp3-tag-input .bp3-tag-input-values:first-child .bp3-input-ghost:first-child { padding-left: 5px; } .bp3-tag-input .bp3-tag-input-values > * { margin-bottom: 5px; } .bp3-tag-input .bp3-tag { overflow-wrap: break-word; } .bp3-tag-input .bp3-tag.bp3-active { outline: rgba(19, 124, 189, 0.6) auto 2px; outline-offset: 0; -moz-outline-radius: 6px; } .bp3-tag-input .bp3-input-ghost { flex: 1 1 auto; width: 80px; line-height: 20px; } .bp3-tag-input .bp3-input-ghost:disabled, .bp3-tag-input .bp3-input-ghost.bp3-disabled { cursor: not-allowed; } .bp3-tag-input .bp3-button, .bp3-tag-input .bp3-spinner { margin: 3px; margin-left: 0; } .bp3-tag-input .bp3-button { min-width: 24px; min-height: 24px; padding: 0 7px; } .bp3-tag-input.bp3-large { height: auto; min-height: 40px; } .bp3-tag-input.bp3-large::before, .bp3-tag-input.bp3-large > * { margin-right: 10px; } .bp3-tag-input.bp3-large:empty::before, .bp3-tag-input.bp3-large > :last-child { margin-right: 0; } .bp3-tag-input.bp3-large .bp3-tag-input-icon { margin-top: 10px; margin-left: 5px; } .bp3-tag-input.bp3-large .bp3-input-ghost { line-height: 30px; } .bp3-tag-input.bp3-large .bp3-button { min-width: 30px; min-height: 30px; padding: 5px 10px; margin: 5px; margin-left: 0; } .bp3-tag-input.bp3-large .bp3-spinner { margin: 8px; margin-left: 0; } .bp3-tag-input.bp3-active { box-shadow: 0 0 0 1px #1bbaf2, 0 0 0 3px rgba(27, 186, 242, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.2); background-color: #ffffff; } .bp3-dark .bp3-tag-input .bp3-tag-input-icon, .bp3-tag-input.bp3-dark .bp3-tag-input-icon { color: #bfccd6; } .bp3-dark .bp3-tag-input .bp3-input-ghost, .bp3-tag-input.bp3-dark .bp3-input-ghost { color: #f5f8fa; } .bp3-dark .bp3-tag-input .bp3-input-ghost::placeholder, .bp3-tag-input.bp3-dark .bp3-input-ghost::placeholder { color: rgba(191, 204, 214, 0.5); } .bp3-dark .bp3-tag-input.bp3-active, .bp3-tag-input.bp3-dark.bp3-active { box-shadow: 0 0 0 1px #1bbaf2, 0 0 0 1px #1bbaf2, 0 0 0 3px rgba(27, 186, 242, 0.3), inset 0 0 0 1px rgba(16, 22, 26, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.4); background-color: rgba(16, 22, 26, 0.3); } .bp3-input-ghost { border: none; box-shadow: none; background: none; padding: 0; } .bp3-input-ghost::placeholder { opacity: 1; color: rgba(92, 112, 128, 0.5); } .bp3-input-ghost:focus { outline: none !important; } /* A mixin to generate the classes for a React CSSTransition which animates any number of CSS properties at once. Transitioned properties are specificed as a map of property names to lists of (inital value, final value). For enter & appear transitions, each property will transition from its initial to its final value. For exit transitions, each property will transition in reverse, from final to initial. **Simple example:** `@include react-transition("popover", (opacity: 0 1), $before: "&");` Transition named "popover" moves opacity from 0 to 1. `"&"` indicates that the Transition classes are expected to be applied to this element, where the mixin is invoked. **Params:** $name: React transitionName prop $properties: map of CSS property to (initial, final) values $duration: transition duration $easing: transition easing function $delay: transition delay $before: selector text to insert before transition name (often to select self: &) $after: selector text to insert after transiton name (to select children) */ /* A mixin to generate the classes for one phase of a React CSSTransition. `$phase` must be `appear` or `enter` or `exit`. If `enter` phase is given then `appear` phase will be generated at the same time. If `exit` phase is given then property values are animated in reverse, from final to initial. **Example:** @include react-transition-phase(toast, enter, $enter-translate, $before: "&"); @include react-transition-phase(toast, leave, $leave-blur, $pt-transition-duration * 3, $before: "&"); */ /* Given map of properties to values, set each property to the value at the given index. (remember that sass indices are 1-based). Example: `each-prop((opacity: 0 1), 2)` will print "opacity: 1" */ /* Format transition class name with all the bits. "enter" phase will include "appear" phase in returned name. */ .bp3-toast { display: flex; align-items: flex-start; position: relative !important; margin: 20px 0 0; border-radius: 0; box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 2px 4px rgba(16, 22, 26, 0.2), 0 8px 24px rgba(16, 22, 26, 0.2); background-color: #ffffff; min-width: 300px; max-width: 500px; pointer-events: all; } .bp3-toast.bp3-toast-enter, .bp3-toast.bp3-toast-appear { transform: translateY(-40px); } .bp3-toast.bp3-toast-enter-active, .bp3-toast.bp3-toast-appear-active { transform: translateY(0); transition-property: transform; transition-duration: 300ms; transition-timing-function: cubic-bezier(0.54, 1.12, 0.38, 1.11); transition-delay: 0; } .bp3-toast.bp3-toast-enter ~ .bp3-toast, .bp3-toast.bp3-toast-appear ~ .bp3-toast { transform: translateY(-40px); } .bp3-toast.bp3-toast-enter-active ~ .bp3-toast, .bp3-toast.bp3-toast-appear-active ~ .bp3-toast { transform: translateY(0); transition-property: transform; transition-duration: 300ms; transition-timing-function: cubic-bezier(0.54, 1.12, 0.38, 1.11); transition-delay: 0; } .bp3-toast.bp3-toast-exit { opacity: 1; filter: blur(0); } .bp3-toast.bp3-toast-exit-active { opacity: 0; filter: blur(10px); transition-property: opacity, filter; transition-duration: 300ms; transition-timing-function: cubic-bezier(0.4, 1, 0.75, 0.9); transition-delay: 0; } .bp3-toast.bp3-toast-exit ~ .bp3-toast { transform: translateY(0); } .bp3-toast.bp3-toast-exit-active ~ .bp3-toast { transform: translateY(-40px); transition-property: transform; transition-duration: 100ms; transition-timing-function: cubic-bezier(0.4, 1, 0.75, 0.9); transition-delay: 50ms; } .bp3-toast .bp3-button-group { flex: 0 0 auto; padding: 5px; padding-left: 0; } .bp3-toast > .bp3-icon { margin: 12px; margin-right: 0; color: #5c7080; } .bp3-toast.bp3-dark, .bp3-dark .bp3-toast { box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.2), 0 2px 4px rgba(16, 22, 26, 0.4), 0 8px 24px rgba(16, 22, 26, 0.4); background-color: #394b59; } .bp3-toast.bp3-dark > .bp3-icon, .bp3-dark .bp3-toast > .bp3-icon { color: #bfccd6; } .bp3-toast[class*="bp3-intent-"] a { color: rgba(255, 255, 255, 0.7); } .bp3-toast[class*="bp3-intent-"] a:hover { color: #ffffff; } .bp3-toast[class*="bp3-intent-"] > .bp3-icon { color: #ffffff; } .bp3-toast[class*="bp3-intent-"] .bp3-button, .bp3-toast[class*="bp3-intent-"] .bp3-button::before, .bp3-toast[class*="bp3-intent-"] .bp3-button .bp3-icon, .bp3-toast[class*="bp3-intent-"] .bp3-button:active { color: rgba(255, 255, 255, 0.7) !important; } .bp3-toast[class*="bp3-intent-"] .bp3-button:focus { outline-color: rgba(255, 255, 255, 0.5); } .bp3-toast[class*="bp3-intent-"] .bp3-button:hover { background-color: rgba(255, 255, 255, 0.15) !important; color: #ffffff !important; } .bp3-toast[class*="bp3-intent-"] .bp3-button:active { background-color: rgba(255, 255, 255, 0.3) !important; color: #ffffff !important; } .bp3-toast[class*="bp3-intent-"] .bp3-button::after { background: rgba(255, 255, 255, 0.3) !important; } .bp3-toast.bp3-intent-primary { background-color: #1bbaf2; color: #ffffff; } .bp3-toast.bp3-intent-success { background-color: #0f9960; color: #ffffff; } .bp3-toast.bp3-intent-warning { background-color: #d9822b; color: #ffffff; } .bp3-toast.bp3-intent-danger { background-color: #db3737; color: #ffffff; } .bp3-toast-message { flex: 1 1 auto; padding: 11px; word-break: break-word; } .bp3-toast-container { display: flex !important; flex-direction: column; align-items: center; position: fixed; right: 0; left: 0; z-index: 40; overflow: hidden; padding: 0 20px 20px; pointer-events: none; } .bp3-toast-container.bp3-toast-container-top { top: 0; bottom: auto; } .bp3-toast-container.bp3-toast-container-bottom { flex-direction: column-reverse; top: auto; bottom: 0; } .bp3-toast-container.bp3-toast-container-left { align-items: flex-start; } .bp3-toast-container.bp3-toast-container-right { align-items: flex-end; } .bp3-toast-container-bottom .bp3-toast.bp3-toast-enter:not(.bp3-toast-enter-active), .bp3-toast-container-bottom .bp3-toast.bp3-toast-enter:not(.bp3-toast-enter-active) ~ .bp3-toast, .bp3-toast-container-bottom .bp3-toast.bp3-toast-leave-active ~ .bp3-toast { transform: translateY(60px); } /* A mixin to generate the classes for a React CSSTransition which animates any number of CSS properties at once. Transitioned properties are specificed as a map of property names to lists of (inital value, final value). For enter & appear transitions, each property will transition from its initial to its final value. For exit transitions, each property will transition in reverse, from final to initial. **Simple example:** `@include react-transition("popover", (opacity: 0 1), $before: "&");` Transition named "popover" moves opacity from 0 to 1. `"&"` indicates that the Transition classes are expected to be applied to this element, where the mixin is invoked. **Params:** $name: React transitionName prop $properties: map of CSS property to (initial, final) values $duration: transition duration $easing: transition easing function $delay: transition delay $before: selector text to insert before transition name (often to select self: &) $after: selector text to insert after transiton name (to select children) */ /* A mixin to generate the classes for one phase of a React CSSTransition. `$phase` must be `appear` or `enter` or `exit`. If `enter` phase is given then `appear` phase will be generated at the same time. If `exit` phase is given then property values are animated in reverse, from final to initial. **Example:** @include react-transition-phase(toast, enter, $enter-translate, $before: "&"); @include react-transition-phase(toast, leave, $leave-blur, $pt-transition-duration * 3, $before: "&"); */ /* Given map of properties to values, set each property to the value at the given index. (remember that sass indices are 1-based). Example: `each-prop((opacity: 0 1), 2)` will print "opacity: 1" */ /* Format transition class name with all the bits. "enter" phase will include "appear" phase in returned name. */ .bp3-tooltip { box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 2px 4px rgba(16, 22, 26, 0.2), 0 8px 24px rgba(16, 22, 26, 0.2); transform: scale(1); } .bp3-tooltip .bp3-popover-arrow { position: absolute; width: 22px; height: 22px; } .bp3-tooltip .bp3-popover-arrow::before { margin: 4px; width: 14px; height: 14px; } .bp3-tether-element-attached-bottom.bp3-tether-target-attached-top > .bp3-tooltip { margin-top: -11px; margin-bottom: 11px; } .bp3-tether-element-attached-bottom.bp3-tether-target-attached-top > .bp3-tooltip > .bp3-popover-arrow { bottom: -8px; } .bp3-tether-element-attached-bottom.bp3-tether-target-attached-top > .bp3-tooltip > .bp3-popover-arrow svg { transform: rotate(-90deg); } .bp3-tether-element-attached-left.bp3-tether-target-attached-right > .bp3-tooltip { margin-left: 11px; } .bp3-tether-element-attached-left.bp3-tether-target-attached-right > .bp3-tooltip > .bp3-popover-arrow { left: -8px; } .bp3-tether-element-attached-left.bp3-tether-target-attached-right > .bp3-tooltip > .bp3-popover-arrow svg { transform: rotate(0); } .bp3-tether-element-attached-top.bp3-tether-target-attached-bottom > .bp3-tooltip { margin-top: 11px; } .bp3-tether-element-attached-top.bp3-tether-target-attached-bottom > .bp3-tooltip > .bp3-popover-arrow { top: -8px; } .bp3-tether-element-attached-top.bp3-tether-target-attached-bottom > .bp3-tooltip > .bp3-popover-arrow svg { transform: rotate(90deg); } .bp3-tether-element-attached-right.bp3-tether-target-attached-left > .bp3-tooltip { margin-right: 11px; margin-left: -11px; } .bp3-tether-element-attached-right.bp3-tether-target-attached-left > .bp3-tooltip > .bp3-popover-arrow { right: -8px; } .bp3-tether-element-attached-right.bp3-tether-target-attached-left > .bp3-tooltip > .bp3-popover-arrow svg { transform: rotate(180deg); } .bp3-tether-element-attached-middle > .bp3-tooltip > .bp3-popover-arrow { top: 50%; transform: translateY(-50%); } .bp3-tether-element-attached-center > .bp3-tooltip > .bp3-popover-arrow { right: 50%; transform: translateX(50%); } .bp3-tether-element-attached-top.bp3-tether-target-attached-top > .bp3-tooltip > .bp3-popover-arrow { top: -0.22183px; } .bp3-tether-element-attached-right.bp3-tether-target-attached-right > .bp3-tooltip > .bp3-popover-arrow { right: -0.22183px; } .bp3-tether-element-attached-left.bp3-tether-target-attached-left > .bp3-tooltip > .bp3-popover-arrow { left: -0.22183px; } .bp3-tether-element-attached-bottom.bp3-tether-target-attached-bottom > .bp3-tooltip > .bp3-popover-arrow { bottom: -0.22183px; } .bp3-tether-element-attached-top.bp3-tether-element-attached-left > .bp3-tooltip { transform-origin: top left; } .bp3-tether-element-attached-top.bp3-tether-element-attached-center > .bp3-tooltip { transform-origin: top center; } .bp3-tether-element-attached-top.bp3-tether-element-attached-right > .bp3-tooltip { transform-origin: top right; } .bp3-tether-element-attached-middle.bp3-tether-element-attached-left > .bp3-tooltip { transform-origin: center left; } .bp3-tether-element-attached-middle.bp3-tether-element-attached-center > .bp3-tooltip { transform-origin: center center; } .bp3-tether-element-attached-middle.bp3-tether-element-attached-right > .bp3-tooltip { transform-origin: center right; } .bp3-tether-element-attached-bottom.bp3-tether-element-attached-left > .bp3-tooltip { transform-origin: bottom left; } .bp3-tether-element-attached-bottom.bp3-tether-element-attached-center > .bp3-tooltip { transform-origin: bottom center; } .bp3-tether-element-attached-bottom.bp3-tether-element-attached-right > .bp3-tooltip { transform-origin: bottom right; } .bp3-tooltip .bp3-popover-content { background: #394b59; color: #f5f8fa; } .bp3-tooltip .bp3-popover-arrow::before { box-shadow: 1px 1px 6px rgba(16, 22, 26, 0.2); } .bp3-tooltip .bp3-popover-arrow-border { fill: #10161a; fill-opacity: 0.1; } .bp3-tooltip .bp3-popover-arrow-fill { fill: #394b59; } .bp3-popover-enter > .bp3-tooltip, .bp3-popover-appear > .bp3-tooltip { transform: scale(0.8); } .bp3-popover-enter-active > .bp3-tooltip, .bp3-popover-appear-active > .bp3-tooltip { transform: scale(1); transition-property: transform; transition-duration: 100ms; transition-timing-function: cubic-bezier(0.4, 1, 0.75, 0.9); transition-delay: 0; } .bp3-popover-exit > .bp3-tooltip { transform: scale(1); } .bp3-popover-exit-active > .bp3-tooltip { transform: scale(0.8); transition-property: transform; transition-duration: 100ms; transition-timing-function: cubic-bezier(0.4, 1, 0.75, 0.9); transition-delay: 0; } .bp3-tooltip .bp3-popover-content { padding: 10px 12px; } .bp3-tooltip.bp3-dark, .bp3-dark .bp3-tooltip { box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.2), 0 2px 4px rgba(16, 22, 26, 0.4), 0 8px 24px rgba(16, 22, 26, 0.4); } .bp3-tooltip.bp3-dark .bp3-popover-content, .bp3-dark .bp3-tooltip .bp3-popover-content { background: #e1e8ed; color: #394b59; } .bp3-tooltip.bp3-dark .bp3-popover-arrow::before, .bp3-dark .bp3-tooltip .bp3-popover-arrow::before { box-shadow: 1px 1px 6px rgba(16, 22, 26, 0.4); } .bp3-tooltip.bp3-dark .bp3-popover-arrow-border, .bp3-dark .bp3-tooltip .bp3-popover-arrow-border { fill: #10161a; fill-opacity: 0.2; } .bp3-tooltip.bp3-dark .bp3-popover-arrow-fill, .bp3-dark .bp3-tooltip .bp3-popover-arrow-fill { fill: #e1e8ed; } .bp3-tooltip.bp3-intent-primary .bp3-popover-content { background: #1bbaf2; color: #ffffff; } .bp3-tooltip.bp3-intent-primary .bp3-popover-arrow-fill { fill: #1bbaf2; } .bp3-tooltip.bp3-intent-success .bp3-popover-content { background: #0f9960; color: #ffffff; } .bp3-tooltip.bp3-intent-success .bp3-popover-arrow-fill { fill: #0f9960; } .bp3-tooltip.bp3-intent-warning .bp3-popover-content { background: #d9822b; color: #ffffff; } .bp3-tooltip.bp3-intent-warning .bp3-popover-arrow-fill { fill: #d9822b; } .bp3-tooltip.bp3-intent-danger .bp3-popover-content { background: #db3737; color: #ffffff; } .bp3-tooltip.bp3-intent-danger .bp3-popover-arrow-fill { fill: #db3737; } .bp3-tooltip-indicator { border-bottom: dotted 1px; cursor: help; } /* * Copyright 2017 Palantir Technologies, Inc. All rights reserved. */ /* * Copyright 2017 Palantir Technologies, Inc. All rights reserved. */ /* * Copyright 2017 Palantir Technologies, Inc. All rights reserved. */ /* Trees Markup:

Label Secondary label
- A Document
- Another Document

Styleguide tree */ .bp3-tree .bp3-icon, .bp3-tree .bp3-icon-standard, .bp3-tree .bp3-icon-large { color: #5c7080; } .bp3-tree .bp3-icon.bp3-intent-primary, .bp3-tree .bp3-icon-standard.bp3-intent-primary, .bp3-tree .bp3-icon-large.bp3-intent-primary { color: #1bbaf2; } .bp3-tree .bp3-icon.bp3-intent-success, .bp3-tree .bp3-icon-standard.bp3-intent-success, .bp3-tree .bp3-icon-large.bp3-intent-success { color: #0f9960; } .bp3-tree .bp3-icon.bp3-intent-warning, .bp3-tree .bp3-icon-standard.bp3-intent-warning, .bp3-tree .bp3-icon-large.bp3-intent-warning { color: #d9822b; } .bp3-tree .bp3-icon.bp3-intent-danger, .bp3-tree .bp3-icon-standard.bp3-intent-danger, .bp3-tree .bp3-icon-large.bp3-intent-danger { color: #db3737; } .bp3-tree-node-list { margin: 0; padding-left: 0; list-style: none; } .bp3-tree-root { position: relative; background-color: transparent; cursor: default; padding-left: 0; } .bp3-tree-node-content-0 { padding-left: 0px; } .bp3-tree-node-content-1 { padding-left: 23px; } .bp3-tree-node-content-2 { padding-left: 46px; } .bp3-tree-node-content-3 { padding-left: 69px; } .bp3-tree-node-content-4 { padding-left: 92px; } .bp3-tree-node-content-5 { padding-left: 115px; } .bp3-tree-node-content-6 { padding-left: 138px; } .bp3-tree-node-content-7 { padding-left: 161px; } .bp3-tree-node-content-8 { padding-left: 184px; } .bp3-tree-node-content-9 { padding-left: 207px; } .bp3-tree-node-content-10 { padding-left: 230px; } .bp3-tree-node-content-11 { padding-left: 253px; } .bp3-tree-node-content-12 { padding-left: 276px; } .bp3-tree-node-content-13 { padding-left: 299px; } .bp3-tree-node-content-14 { padding-left: 322px; } .bp3-tree-node-content-15 { padding-left: 345px; } .bp3-tree-node-content-16 { padding-left: 368px; } .bp3-tree-node-content-17 { padding-left: 391px; } .bp3-tree-node-content-18 { padding-left: 414px; } .bp3-tree-node-content-19 { padding-left: 437px; } .bp3-tree-node-content-20 { padding-left: 460px; } .bp3-tree-node-content { display: flex; align-items: center; width: 100%; height: 30px; padding-right: 5px; } .bp3-tree-node-content:hover { background-color: rgba(191, 204, 214, 0.4); } .bp3-tree-node-caret, .bp3-tree-node-caret-none { min-width: 30px; } .bp3-tree-node-caret { color: #5c7080; transform: rotate(0deg); cursor: pointer; padding: 7px; transition: transform 200ms cubic-bezier(0.4, 1, 0.75, 0.9); } .bp3-tree-node-caret:hover { color: #182026; } .bp3-dark .bp3-tree-node-caret { color: #bfccd6; } .bp3-dark .bp3-tree-node-caret:hover { color: #f5f8fa; } .bp3-tree-node-caret.bp3-tree-node-caret-open { transform: rotate(90deg); } .bp3-tree-node-caret.bp3-icon-standard::before { content: ""; } .bp3-tree-node-icon { position: relative; margin-right: 7px; } .bp3-tree-node-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; flex: 1 1 auto; position: relative; user-select: none; } .bp3-tree-node-label span { display: inline; } .bp3-tree-node-secondary-label { padding: 0 5px; user-select: none; } .bp3-tree-node-secondary-label .bp3-popover-wrapper, .bp3-tree-node-secondary-label .bp3-popover-target { display: flex; align-items: center; } .bp3-tree-node.bp3-disabled .bp3-tree-node-content { background-color: inherit; cursor: not-allowed; color: rgba(92, 112, 128, 0.5); } .bp3-tree-node.bp3-disabled .bp3-tree-node-caret, .bp3-tree-node.bp3-disabled .bp3-tree-node-icon { cursor: not-allowed; color: rgba(92, 112, 128, 0.5); } .bp3-tree-node.bp3-tree-node-selected > .bp3-tree-node-content { background-color: #1bbaf2; } .bp3-tree-node.bp3-tree-node-selected > .bp3-tree-node-content, .bp3-tree-node.bp3-tree-node-selected > .bp3-tree-node-content .bp3-icon, .bp3-tree-node.bp3-tree-node-selected > .bp3-tree-node-content .bp3-icon-standard, .bp3-tree-node.bp3-tree-node-selected > .bp3-tree-node-content .bp3-icon-large { color: #ffffff; } .bp3-tree-node.bp3-tree-node-selected > .bp3-tree-node-content .bp3-tree-node-caret::before { color: rgba(255, 255, 255, 0.7); } .bp3-tree-node.bp3-tree-node-selected > .bp3-tree-node-content .bp3-tree-node-caret:hover::before { color: #ffffff; } .bp3-dark .bp3-tree-node-content:hover { background-color: rgba(92, 112, 128, 0.3); } .bp3-dark .bp3-tree .bp3-icon, .bp3-dark .bp3-tree .bp3-icon-standard, .bp3-dark .bp3-tree .bp3-icon-large { color: #bfccd6; } .bp3-dark .bp3-tree .bp3-icon.bp3-intent-primary, .bp3-dark .bp3-tree .bp3-icon-standard.bp3-intent-primary, .bp3-dark .bp3-tree .bp3-icon-large.bp3-intent-primary { color: #1bbaf2; } .bp3-dark .bp3-tree .bp3-icon.bp3-intent-success, .bp3-dark .bp3-tree .bp3-icon-standard.bp3-intent-success, .bp3-dark .bp3-tree .bp3-icon-large.bp3-intent-success { color: #0f9960; } .bp3-dark .bp3-tree .bp3-icon.bp3-intent-warning, .bp3-dark .bp3-tree .bp3-icon-standard.bp3-intent-warning, .bp3-dark .bp3-tree .bp3-icon-large.bp3-intent-warning { color: #d9822b; } .bp3-dark .bp3-tree .bp3-icon.bp3-intent-danger, .bp3-dark .bp3-tree .bp3-icon-standard.bp3-intent-danger, .bp3-dark .bp3-tree .bp3-icon-large.bp3-intent-danger { color: #db3737; } .bp3-dark .bp3-tree-node.bp3-tree-node-selected > .bp3-tree-node-content { background-color: #1bbaf2; } body, html { min-height: 100%; margin: 0; min-width: 1024px; height: 100%; width: 100%; } #__next { min-height: 100%; } input, textarea, select, button { font-family: 'Lato', sans-serif; } a { color: #1db6f4; } h1, h2, h3, h4, h5, h6 { color: #1f272a; font-weight: 500; margin: 0; } h1 { font-size: 24px; margin-bottom: 20px; line-height: 40px; } h3 { font-size: 18px; margin-bottom: 30px; line-height: 25px; } h4 { line-height: 21px; } h6 { line-height: 16px; } figure { padding: 0; margin: 0; } .bp3-control.bp3-checkbox input:checked ~ .bp3-control-indicator:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 1.003 0 0 0-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0 0 12 5z' fill='rgba(255,255,255,1)'/%3E%3C/svg%3E"); } .bp3-heading { font-weight: 500; } .sn-default-layout { display: flex; flex-direction: row; width: 100%; height: 100%; position: fixed; } .sn-default-layout_header-container { width: 75px; } .sn-default-layout_content { overflow: auto; height: 100%; } .sn-default-layout_centered .sn-default-layout_content { padding: 50px; max-width: 1280px; margin: 0 auto; height: auto; } .sn-default-layout_content-wrapper { flex-grow: 1; height: 100%; } .sn-default-layout_centered .sn-default-layout_content-wrapper { overflow: auto; } /* * Copyright 2017 Palantir Technologies, Inc. All rights reserved. */ #nprogress { pointer-events: none; } #nprogress .bar { background: #1bbaf2; position: fixed; z-index: 1031; top: 0; left: 0; width: 100%; height: 2px; } #nprogress .peg { display: block; position: absolute; right: 0px; width: 100px; height: 100%; box-shadow: 0 0 10px #1bbaf2, 0 0 5px #1bbaf2; opacity: 1; -webkit-transform: rotate(3deg) translate(0px, -4px); -ms-transform: rotate(3deg) translate(0px, -4px); transform: rotate(3deg) translate(0px, -4px); } #nprogress .spinner { display: none; position: fixed; z-index: 1031; top: 15px; right: 15px; } #nprogress .spinner-icon { width: 18px; height: 18px; box-sizing: border-box; border: solid 2px transparent; border-top-color: #1bbaf2; border-left-color: #1bbaf2; border-radius: 50%; -webkit-animation: nprogresss-spinner 400ms linear infinite; animation: nprogress-spinner 400ms linear infinite; } .nprogress-custom-parent { overflow: hidden; position: relative; } .nprogress-custom-parent #nprogress .spinner, .nprogress-custom-parent #nprogress .bar { position: absolute; } @-webkit-keyframes nprogress-spinner { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes nprogress-spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .sn-account-drawer-section { border-bottom: solid 1px #eaeaea; } .sn-account-drawer-section .sn-account-drawer-section__button { justify-content: left; height: 56px; padding: 0; font-size: 14px; font-weight: 600; color: #1d1d1d; } .sn-account-drawer-section .sn-account-drawer-section__button:hover { background: none; color: #1db6f4; } /** * React Select * ============ * Created by Jed Watson and Joss Mackison for KeystoneJS, http://www.keystonejs.com/ * https://twitter.com/jedwatson https://twitter.com/jossmackison https://twitter.com/keystonejs * MIT License: https://github.com/JedWatson/react-select */ @keyframes Select-animation-spin { to { transform: rotate(1turn); } } @-webkit-keyframes Select-animation-spin { to { -webkit-transform: rotate(1turn); } } .Select { position: relative; } .Select input::-webkit-contacts-auto-fill-button, .Select input::-webkit-credentials-auto-fill-button { display: none !important; } .Select input::-ms-clear { display: none !important; } .Select input::-ms-reveal { display: none !important; } .Select, .Select div, .Select input, .Select span { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .Select.is-disabled .Select-arrow-zone { cursor: default; pointer-events: none; } .Select.is-disabled > .Select-control { background-color: #f9f9f9; } .Select.is-disabled > .Select-control:hover { box-shadow: none; } .Select.is-searchable.is-open > .Select-control { cursor: text; } .Select.is-searchable.is-focused:not(.is-open) > .Select-control { cursor: text; } .Select.is-open > .Select-control { border-bottom-right-radius: 0; border-bottom-left-radius: 0; background: #fff; border-color: #b3b3b3 #ccc #d9d9d9; } .Select.is-open > .Select-control .Select-arrow { top: -2px; border-color: transparent transparent #999; border-width: 0 5px 5px; } .Select.is-focused > .Select-control { background: #fff; } .Select.is-focused:not(.is-open) > .Select-control { border-color: #08c #0099e6 #0099e6; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 5px -1px fade(#08c, 50%); } .Select.has-value.is-clearable.Select--single > .Select-control .Select-value { padding-right: 42px; } .Select.has-value.Select--single > .Select-control .Select-value .Select-value-label, .Select.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value .Select-value-label { color: #333; } .Select.has-value.Select--single > .Select-control .Select-value a.Select-value-label, .Select.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label { cursor: pointer; text-decoration: none; } .Select.has-value.Select--single > .Select-control .Select-value a.Select-value-label:hover, .Select.has-value.Select--single > .Select-control .Select-value a.Select-value-label:focus, .Select.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:hover, .Select.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:focus { color: #08c; outline: none; text-decoration: underline; } .Select.has-value.Select--single > .Select-control .Select-value a.Select-value-label:focus, .Select.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:focus { background: #fff; } .Select.has-value.is-pseudo-focused .Select-input { opacity: 0; } .Select.is-open .Select-arrow, .Select .Select-arrow-zone:hover > .Select-arrow { border-top-color: #666; } .Select.Select--rtl { direction: rtl; text-align: right; } .Select-control { background-color: #fff; border-color: #d9d9d9 #ccc #b3b3b3; border-radius: 0px; border: 1px solid #ccc; color: #333; cursor: default; display: table; border-spacing: 0; border-collapse: separate; height: 36px; outline: none; overflow: hidden; position: relative; width: 100%; } .Select-control:hover { box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); } .Select-control .Select-input:focus { outline: none; background: #fff; } .Select-placeholder, .Select--single > .Select-control .Select-value { bottom: 0; color: #aaa; left: 0; line-height: 34px; padding-left: 10px; padding-right: 10px; position: absolute; right: 0; top: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .Select-input { height: 34px; padding-left: 10px; padding-right: 10px; vertical-align: middle; } .Select-input > input { width: 100%; background: none transparent; border: 0 none; box-shadow: none; cursor: default; display: inline-block; font-family: inherit; font-size: inherit; margin: 0; outline: none; line-height: 17px; /* For IE 8 compatibility */ padding: 8px 0 12px; /* For IE 8 compatibility */ -webkit-appearance: none; } .is-focused .Select-input > input { cursor: text; } .Select-control:not(.is-searchable) > .Select-input { outline: none; } .Select-loading-zone { cursor: pointer; display: table-cell; position: relative; text-align: center; vertical-align: middle; width: 16px; } .Select-loading { -webkit-animation: Select-animation-spin 400ms infinite linear; -o-animation: Select-animation-spin 400ms infinite linear; animation: Select-animation-spin 400ms infinite linear; width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; border: 2px solid #ccc; border-right-color: #333; display: inline-block; position: relative; vertical-align: middle; } .Select-clear-zone { -webkit-animation: Select-animation-fadeIn 200ms; -o-animation: Select-animation-fadeIn 200ms; animation: Select-animation-fadeIn 200ms; color: #999; cursor: pointer; display: table-cell; position: relative; text-align: center; vertical-align: middle; width: 17px; } .Select-clear-zone:hover { color: #D0021B; } .Select-clear { display: inline-block; font-size: 18px; line-height: 1; } .Select--multi .Select-clear-zone { width: 17px; } .Select--multi .Select-multi-value-wrapper { display: inline-block; } .Select .Select-aria-only { position: absolute; display: inline-block; height: 1px; width: 1px; margin: -1px; clip: rect(0, 0, 0, 0); overflow: hidden; float: left; } .Select-arrow-zone { cursor: pointer; display: table-cell; position: relative; text-align: center; vertical-align: middle; width: 25px; padding-right: 5px; } .Select--rtl .Select-arrow-zone { padding-right: 0; padding-left: 5px; } .Select-arrow { border-color: #999 transparent transparent; border-style: solid; border-width: 5px 5px 2.5px; display: inline-block; height: 0; width: 0; position: relative; } @-webkit-keyframes Select-animation-fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes Select-animation-fadeIn { from { opacity: 0; } to { opacity: 1; } } .Select-menu-outer { border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; background-color: #fff; border: 1px solid #ccc; border-top-color: #e6e6e6; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); box-sizing: border-box; margin-top: -1px; max-height: 200px; position: absolute; left: 0; top: 100%; width: 100%; z-index: 1000; -webkit-overflow-scrolling: touch; } .Select-menu { max-height: 198px; overflow-y: auto; } .Select-option { box-sizing: border-box; background-color: #fff; color: #666666; cursor: pointer; display: block; padding: 8px 10px; } .Select-option:last-child { border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } .Select-option.is-selected { background-color: #f5faff; color: #333; } .Select-option.is-focused { background-color: #f2f9fc; color: #333; } .Select-option.is-disabled { color: #cccccc; cursor: default; } .Select-noresults { box-sizing: border-box; color: #999999; cursor: default; display: block; padding: 8px 10px; } .Select--multi .Select-input { vertical-align: middle; margin-left: 10px; padding: 0; } .Select--multi.Select--rtl .Select-input { margin-left: 0; margin-right: 10px; } .Select--multi.has-value .Select-input { margin-left: 5px; } .Select--multi .Select-value { background-color: #f2f9fc; border-radius: 2px; border: 1px solid #c9e6f2; color: #08c; display: inline-block; font-size: 0.9em; margin-left: 5px; margin-top: 5px; vertical-align: top; } .Select--multi .Select-value-icon, .Select--multi .Select-value-label { display: inline-block; vertical-align: middle; } .Select--multi .Select-value-label { border-bottom-right-radius: 2px; border-top-right-radius: 2px; cursor: default; padding: 2px 5px; } .Select--multi a.Select-value-label { color: #08c; cursor: pointer; text-decoration: none; } .Select--multi a.Select-value-label:hover { text-decoration: underline; } .Select--multi .Select-value-icon { cursor: pointer; border-bottom-left-radius: 2px; border-top-left-radius: 2px; border-right: 1px solid #c9e6f2; padding: 1px 5px 3px; } .Select--multi .Select-value-icon:hover, .Select--multi .Select-value-icon:focus { background-color: #ddeff7; color: #0077b3; } .Select--multi .Select-value-icon:active { background-color: #c9e6f2; } .Select--multi.Select--rtl .Select-value { margin-left: 0; margin-right: 5px; } .Select--multi.Select--rtl .Select-value-icon { border-right: none; border-left: 1px solid #c9e6f2; } .Select--multi.is-disabled .Select-value { background-color: #fcfcfc; border: 1px solid #e3e3e3; color: #333; } .Select--multi.is-disabled .Select-value-icon { cursor: not-allowed; border-right: 1px solid #e3e3e3; } .Select--multi.is-disabled .Select-value-icon:hover, .Select--multi.is-disabled .Select-value-icon:focus, .Select--multi.is-disabled .Select-value-icon:active { background-color: #fcfcfc; } @keyframes Select-animation-spin { to { transform: rotate(1turn); } } @-webkit-keyframes Select-animation-spin { to { -webkit-transform: rotate(1turn); } } .sn-project-chooser .bp3-large .bp3-input { height: 40px; border-radius: 1px; border: solid 1px rgba(166, 174, 176, 0.5); box-shadow: none; font-size: 14px; } .sn-project-chooser.sn-dark .bp3-large .bp3-input { background-color: #09232f; color: #a6aeb0; border: none; } .sn-project-chooser.sn-dark .bp3-input::placeholder { color: #a6aeb0; } .sn-project-chooser.sn-fill { display: block; } .sn-project-chooser.sn-fill > .bp3-popover-target { display: block; } .sn-project-chooser-popover .bp3-menu { min-width: 451px; } .sn-project-chooser-popover .sn-no-content { text-align: center; padding: 20px; } .sn-account-drawer .sn-account-drawer__content { padding: 0 37px; } .sn-account-drawer .sn-account-drawer__title { display: flex; width: 100%; background-color: #e5ebed; padding: 12px 37px; height: 60px; align-items: center; cursor: pointer; font-weight: bold; font-size: 14px; } .sn-account-drawer .sn-account-drawer__title > *:first-child { flex-grow: 1; } .sn-account-drawer .sn-account-drawer__submenu { margin: 0 -11px; } .sn-account-drawer .sn-account-drawer__project-create-btn { margin: 8px 0 24px; } .sn-account-drawer__button__label { text-overflow: ellipsis; white-space: nowrap; width: 120px; display: inline-block; overflow: hidden; color: #a6aeb0; } .sn-account-drawer__button { background-color: #09232f !important; height: 40px; margin-right: 5px; } .sn-main-sidebar { border-right: solid 1px #f0f3f4; width: 70px; display: flex; flex-direction: column; justify-content: space-between; padding: 10px 5px 5px; } .sn-main-sidebar .sn-main-sidebar_button { width: 60px; height: 50px; } .sn-main-sidebar .sn-main-sidebar_button:hover, .sn-main-sidebar .sn-main-sidebar_button.bp3-active { background: none; color: #1db6f4; } .sn-main-sidebar .sn-main-sidebar_button:hover .bp3-icon > svg:not([fill]), .sn-main-sidebar .sn-main-sidebar_button.bp3-active .bp3-icon > svg:not([fill]) { fill: #1db6f4; } /* * Copyright 2017 Palantir Technologies, Inc. All rights reserved. */ /* * Copyright 2017 Palantir Technologies, Inc. All rights reserved. */ .sn-content-box { padding: 30px; background-color: #fff; border: solid 1px #f0f3f4; color: #1d1d1d; margin-bottom: 30px; } .sn-content-box.sn-no-padding { padding: 0; }