@blueprintjs/core
Version:
Core styles & components
1,240 lines (1,151 loc) • 319 kB
CSS
@charset "UTF-8";
/*!
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: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", "Helvetica Neue", "Icons16", 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:
<div>
<h1 class="@ns-heading">H1 heading</h1>
<h2 class="@ns-heading">H2 heading</h2>
<h3 class="@ns-heading">H3 heading</h3>
<h4 class="@ns-heading">H4 heading</h4>
<h5 class="@ns-heading">H5 heading</h5>
<h6 class="@ns-heading">H6 heading</h6>
</div>
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:
<div class="{{.modifier}}">
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.
</div>
.bp3-ui-text - Default Blueprint font styles, applied to the `<body>` 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: #a7b6c2; }
.bp3-text-disabled {
color: rgba(92, 112, 128, 0.6); }
.bp3-dark .bp3-text-disabled {
color: rgba(167, 182, 194, 0.6); }
.bp3-text-overflow-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: normal; }
/*
Running text
Markup:
<div class="@ns-running-text {{.modifier}}">
<p>
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.
</p>
<ul>
<li>Item the <code>first</code>.</li>
<li>Item the <strong>second</strong></code>.</li>
<li>Item the <a href="#core/typography.running-text">third</a>.</li>
</ul>
<h3>Scale, Speed, Agility</h3>
<p>
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.
</p>
</div>
.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 `<a href="">` 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:
<div>
<p>Use the <code class="@ns-code"><code></code> tag for snippets of code.</p>
<pre class="@ns-code-block">Use the <pre> tag for blocks of code.</pre>
<pre class="@ns-code-block"><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));
}</code></pre>
</div>
Styleguide preformatted
*/
.bp3-running-text code, .bp3-code {
text-transform: none;
font-family: monospace;
border-radius: 3px;
box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.2);
background: rgba(255, 255, 255, 0.7);
padding: 2px 5px;
color: #5c7080;
font-size: smaller; }
.bp3-dark .bp3-running-text code, .bp3-running-text .bp3-dark code, .bp3-dark .bp3-code {
box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.4);
background: rgba(16, 22, 26, 0.3);
color: #a7b6c2; }
.bp3-running-text a > code, a > .bp3-code {
color: #137cbd; }
.bp3-dark .bp3-running-text a > code, .bp3-running-text .bp3-dark a > code, .bp3-dark a > .bp3-code {
color: inherit; }
.bp3-running-text pre, .bp3-code-block {
text-transform: none;
font-family: monospace;
display: block;
margin: 10px 0;
border-radius: 3px;
box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.15);
background: rgba(255, 255, 255, 0.7);
padding: 13px 15px 12px;
line-height: 1.4;
color: #182026;
font-size: 13px;
word-break: break-all;
word-wrap: break-word; }
.bp3-dark .bp3-running-text pre, .bp3-running-text .bp3-dark pre, .bp3-dark .bp3-code-block {
box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.4);
background: rgba(16, 22, 26, 0.3);
color: #f5f8fa; }
.bp3-running-text pre > code, .bp3-code-block > code {
box-shadow: none;
background: none;
padding: 0;
color: inherit;
font-size: inherit; }
.bp3-running-text kbd, .bp3-key {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 3px;
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: #ffffff;
min-width: 24px;
height: 24px;
padding: 3px 6px;
vertical-align: middle;
line-height: 24px;
color: #5c7080;
font-family: inherit;
font-size: 12px; }
.bp3-running-text kbd .bp3-icon, .bp3-key .bp3-icon, .bp3-running-text kbd .bp3-icon-standard, .bp3-key .bp3-icon-standard, .bp3-running-text kbd .bp3-icon-large, .bp3-key .bp3-icon-large {
margin-right: 5px; }
.bp3-dark .bp3-running-text kbd, .bp3-running-text .bp3-dark kbd, .bp3-dark .bp3-key {
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);
background: #394b59;
color: #a7b6c2; }
/*
Block quotes
Markup:
<blockquote class="@ns-blockquote">
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.
</blockquote>
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:
<ol class="{{.modifier}}">
<li>Item the first</li>
<li>Item the second</li>
<li>
Item the third
<ul class="{{.modifier}}">
<li>Item the fourth</li>
<li>Item the fifth</li>
</ul>
</li>
</ol>
.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:
<h5 class="@ns-heading">Arabic:</h5>
<p class="@ns-rtl">
لكل لأداء بمحاولة من. مدينة الواقعة يبق أي, وإعلان وقوعها، حول كل, حدى عجّل مشروط الخاسرة قد.
من الذود تكبّد بين, و لها واحدة الأراضي. عل الصفحة والروسية يتم, أي للحكومة استعملت شيء. أم وصل زهاء اليا
</p>
<h5 class="@ns-heading">Hebrew:</h5>
<p class="@ns-rtl">
כדי על עזרה יידיש הבהרה, מלא באגים טכניים דת. תנך או ברית ביולי. כתב בה הטבע למנוע, דת כלים פיסיקה החופשית זכר.
מתן החלל מאמרשיחהצפה ב. הספרות אנציקלופדיה אם זכר, על שימושי שימושיים תאולוגיה עזה
</p>
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:
<ul class="bp3-breadcrumbs">
<li><a class="bp3-breadcrumbs-collapsed" href="#"></a></li>
<li><a class="bp3-breadcrumb bp3-disabled">Folder one</a></li>
<li><a class="bp3-breadcrumb" href="#">Folder two</a></li>
<li><a class="bp3-breadcrumb" href="#">Folder three</a></li>
<li><span class="bp3-breadcrumb bp3-breadcrumb-current">File</span></li>
</ul>
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: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.71 7.29l-4-4a1.003 1.003 0 0 0-1.42 1.42L8.59 8 5.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 0 0 1.71.71l4-4c.18-.18.29-.43.29-.71 0-.28-.11-.53-.29-.71z' fill='%235C7080'/%3e%3c/svg%3e");
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.6); }
.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: 3px;
background: #ced9e0;
cursor: pointer;
padding: 1px 5px;
vertical-align: text-bottom; }
.bp3-breadcrumbs-collapsed::before {
display: block;
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cg fill='%235C7080'%3e%3ccircle cx='2' cy='8.03' r='2'/%3e%3ccircle cx='14' cy='8.03' r='2'/%3e%3ccircle cx='8' cy='8.03' r='2'/%3e%3c/g%3e%3c/svg%3e") 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: #a7b6c2; }
.bp3-dark .bp3-breadcrumbs > li::after {
color: #a7b6c2; }
.bp3-dark .bp3-breadcrumb.bp3-disabled {
color: rgba(167, 182, 194, 0.6); }
.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:
<a role="button" class="bp3-button {{.modifier}}" {{:modifier}} tabindex="0">Anchor</a>
<button type="button" class="bp3-button bp3-icon-add {{.modifier}}" {{:modifier}}>Button</button>
: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: 3px;
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.6); }
.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: #137cbd;
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(19, 124, 189, 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(167, 182, 194, 0.6); }
.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: #a7b6c2; }
.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: #a7b6c2; }
.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.6); }
.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(167, 182, 194, 0.6); }
.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(19, 124, 189, 0.15);
color: #106ba3; }
.bp3-button.bp3-minimal.bp3-intent-primary:active, .bp3-button.bp3-minimal.bp3-intent-primary.bp3-active {
background: rgba(19, 124, 189, 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(19, 124, 189, 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(19, 124, 189, 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(19, 124, 189, 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(19, 124, 189, 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.6); }
.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:
<div class="bp3-button-group {{.modifier}}">
<button type="button" class="bp3-button bp3-intent-success">Save</button>
<button type="button" class="bp3-button bp3-intent-success bp3-icon-caret-down"></button>
</div>
<div class="bp3-button-group {{.modifier}}">
<a class="bp3-button bp3-icon-database" tabindex="0" role="button">Queries</a>
<a class="bp3-button bp3-icon-function" tabindex="0" role="button">Functions</a>
<a class="bp3-button" tabindex="0" role="button">
Options <span class="bp3-icon-standard bp3-icon-caret-down bp3-align-right"></span>
</a>
</div>
<div class="bp3-button-group {{.modifier}}">
<a class="bp3-button bp3-icon-chart" tabindex="0" role="button"></a>
<a class="bp3-button bp3-icon-control" tabindex="0" role="button"></a>
<a class="bp3-button bp3-icon-graph" tabindex="0" role="button"></a>
<a class="bp3-button bp3-icon-camera" tabindex="0" role="button"></a>
<a class="bp3-button bp3-icon-map" tabindex="0" role="button"></a>
<a class="bp3-button bp3-icon-code" tabindex="0" role="button"></a>
<a class="bp3-button bp3-icon-th" tabindex="0" role="button"></a>
<a class="bp3-button bp3-icon-time" tabindex="0" role="button"></a>
<a class="bp3-button bp3-icon-compressed" tabindex="0" role="button"></a>
</div>
.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:
<div class="bp3-button-group bp3-large bp3-fill">
<a class="bp3-button bp3-intent-primary bp3-fixed" tabindex="0" role="button">Start</a>
<a class="bp3-button bp3-intent-primary" tabindex="0" role="button">Left</a>
<a class="bp3-button bp3-intent-primary bp3-active" tabindex="0" role="button">Middle</a>
<a class="bp3-button bp3-intent-primary" tabindex="0" role="button">Right</a>
<a class="bp3-button bp3-intent-primary bp3-fixed" tabindex="0" role="button">End</a>
</div>
<br />
<div class="bp3-button-group bp3-fill">
<button class="bp3-button bp3-icon-arrow-left"></button>
<button class="bp3-button bp3-fill">Middle</button>
<button class="bp3-button bp3-icon-arrow-right"></button>
</div>
Styleguide button-group}-fill
*/
/*
Vertical button groups
Markup:
<div class="bp3-button-group bp3-vertical">
<a class="bp3-button bp3-icon-search-template" role="button" tabindex="0"></a>
<a class="bp3-button bp3-icon-zoom-in" role="button" tabindex="0"></a>
<a class="bp3-button bp3-icon-zoom-out" role="button" tabindex="0"></a>
<a class="bp3-button bp3-icon-zoom-to-fit" role="button" tabindex="0"></a>
</div>
<div class="bp3-button-group bp3-vertical">
<button type="button" class="bp3-button bp3-active">Home</button>
<button type="button" class="bp3-button">Pages</button>
<button type="button" class="bp3-button">Blog</button>
<button type="button" class="bp3-button">Calendar</button>
</div>
<div class="bp3-button-group bp3-vertical bp3-align-left bp3-large">
<button type="button" class="bp3-button bp3-intent-primary bp3-icon-document">Text</button>
<button type="button" class="bp3-button bp3-intent-primary bp3-icon-media bp3-active">Media</button>
<button type="button" class="bp3-button bp3-intent-primary bp3-icon-link">Sources</button>
</div>
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.6); }
.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(167, 182, 194, 0.6); }
.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(19, 124, 189, 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(19, 124, 189, 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(19, 124, 189, 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(19, 124, 189, 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(19, 124, 189, 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(19, 124, 189, 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-gro