File: //usr/share/opensearch-dashboards/node_modules/@elastic/eui/dist/oui_theme_v9_light.css
@charset "UTF-8";
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/**
* 1. Focus rings shouldn't be visible on scrollable regions, but a11y requires them to be focusable.
* Browser's supporting `:focus-visible` will still show outline on keyboard focus only.
* Others like Safari, won't show anything at all.
* 2. Force the `:focus-visible` when the `tabindex=0` (is tabbable)
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
@-webkit-keyframes ouiAnimFadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes ouiAnimFadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes ouiGrow {
0% {
opacity: 0;
}
1% {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes ouiGrow {
0% {
opacity: 0;
}
1% {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes focusRingAnimate {
0% {
box-shadow: 0 0 0 6px rgba(2, 104, 188, 0);
}
100% {
box-shadow: 0 0 0 3px rgba(2, 104, 188, 0.3);
}
}
@keyframes focusRingAnimate {
0% {
box-shadow: 0 0 0 6px rgba(2, 104, 188, 0);
}
100% {
box-shadow: 0 0 0 3px rgba(2, 104, 188, 0.3);
}
}
@-webkit-keyframes focusRingAnimateLarge {
0% {
box-shadow: 0 0 0 10px rgba(2, 104, 188, 0);
}
100% {
box-shadow: 0 0 0 4px rgba(2, 104, 188, 0.3);
}
}
@keyframes focusRingAnimateLarge {
0% {
box-shadow: 0 0 0 10px rgba(2, 104, 188, 0);
}
100% {
box-shadow: 0 0 0 4px rgba(2, 104, 188, 0.3);
}
}
@-webkit-keyframes ouiButtonActive {
50% {
-webkit-transform: translateY(1px);
transform: translateY(1px);
}
}
@keyframes ouiButtonActive {
50% {
-webkit-transform: translateY(1px);
transform: translateY(1px);
}
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.oui-alignBaseline {
vertical-align: baseline !important;
}
.oui-alignBottom {
vertical-align: bottom !important;
}
.oui-alignMiddle {
vertical-align: middle !important;
}
.oui-alignTop {
vertical-align: top !important;
}
.oui-displayBlock {
display: block !important;
}
.oui-displayInline {
display: inline !important;
}
.oui-displayInlineBlock {
display: inline-block !important;
}
.oui-displayNone {
display: none !important;
}
.oui-fullWidth {
display: block !important;
width: 100% !important;
}
.oui-textCenter {
text-align: center !important;
}
.oui-textLeft {
text-align: left !important;
}
.oui-textRight {
text-align: right !important;
}
.oui-textNoWrap {
white-space: nowrap !important;
}
.oui-textInheritColor {
color: inherit !important;
}
.oui-textBreakWord {
overflow-wrap: break-word !important;
word-wrap: break-word !important;
word-break: break-word;
}
.oui-textBreakAll {
overflow-wrap: break-word !important;
word-break: break-all !important;
}
.oui-textBreakNormal {
overflow-wrap: normal !important;
word-wrap: normal !important;
word-break: normal !important;
}
.oui-textOverflowWrap {
overflow-wrap: break-word !important;
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
.oui-textOverflowWrap {
word-break: break-all !important;
}
}
.oui-textTruncate {
max-width: 100%;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
word-wrap: normal !important;
}
/**
* Responsive
*
* 1. Be sure to hide the element initially
*/
[class*=oui-showFor] {
display: none !important; /* 1 */
}
@media only screen and (max-width: 574px) {
.oui-hideFor--xs {
display: none !important;
}
}
@media only screen and (max-width: 574px) {
.oui-showFor--xs {
display: inline !important;
}
}
@media only screen and (max-width: 574px) {
.oui-showFor--xs--block {
display: block !important;
}
}
@media only screen and (max-width: 574px) {
.oui-showFor--xs--inlineBlock {
display: inline-block !important;
}
}
@media only screen and (max-width: 574px) {
.oui-showFor--xs--flex {
display: -webkit-flex !important;
display: flex !important;
}
}
@media only screen and (min-width: 575px) and (max-width: 767px) {
.oui-hideFor--s {
display: none !important;
}
}
@media only screen and (min-width: 575px) and (max-width: 767px) {
.oui-showFor--s {
display: inline !important;
}
}
@media only screen and (min-width: 575px) and (max-width: 767px) {
.oui-showFor--s--block {
display: block !important;
}
}
@media only screen and (min-width: 575px) and (max-width: 767px) {
.oui-showFor--s--inlineBlock {
display: inline-block !important;
}
}
@media only screen and (min-width: 575px) and (max-width: 767px) {
.oui-showFor--s--flex {
display: -webkit-flex !important;
display: flex !important;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.oui-hideFor--m {
display: none !important;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.oui-showFor--m {
display: inline !important;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.oui-showFor--m--block {
display: block !important;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.oui-showFor--m--inlineBlock {
display: inline-block !important;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.oui-showFor--m--flex {
display: -webkit-flex !important;
display: flex !important;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.oui-hideFor--l {
display: none !important;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.oui-showFor--l {
display: inline !important;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.oui-showFor--l--block {
display: block !important;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.oui-showFor--l--inlineBlock {
display: inline-block !important;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.oui-showFor--l--flex {
display: -webkit-flex !important;
display: flex !important;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1679px) {
.oui-hideFor--xl {
display: none !important;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1679px) {
.oui-showFor--xl {
display: inline !important;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1679px) {
.oui-showFor--xl--block {
display: block !important;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1679px) {
.oui-showFor--xl--inlineBlock {
display: inline-block !important;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1679px) {
.oui-showFor--xl--flex {
display: -webkit-flex !important;
display: flex !important;
}
}
@media only screen and (min-width: 1680px) and (max-width: 1919px) {
.oui-hideFor--xxl {
display: none !important;
}
}
@media only screen and (min-width: 1680px) and (max-width: 1919px) {
.oui-showFor--xxl {
display: inline !important;
}
}
@media only screen and (min-width: 1680px) and (max-width: 1919px) {
.oui-showFor--xxl--block {
display: block !important;
}
}
@media only screen and (min-width: 1680px) and (max-width: 1919px) {
.oui-showFor--xxl--inlineBlock {
display: inline-block !important;
}
}
@media only screen and (min-width: 1680px) and (max-width: 1919px) {
.oui-showFor--xxl--flex {
display: -webkit-flex !important;
display: flex !important;
}
}
@media only screen and (min-width: 1920px) {
.oui-hideFor--xxxl {
display: none !important;
}
}
@media only screen and (min-width: 1920px) {
.oui-showFor--xxxl {
display: inline !important;
}
}
@media only screen and (min-width: 1920px) {
.oui-showFor--xxxl--block {
display: block !important;
}
}
@media only screen and (min-width: 1920px) {
.oui-showFor--xxxl--inlineBlock {
display: inline-block !important;
}
}
@media only screen and (min-width: 1920px) {
.oui-showFor--xxxl--flex {
display: -webkit-flex !important;
display: flex !important;
}
}
/**
* IE doesn't properly wrap groups if it is within a flex-item of a flex-group.
* Adding the following styles to the flex-item that contains the wrapping group, will fix IE.
* https://github.com/philipwalton/flexbugs/issues/104
*/
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
.ouiIEFlexWrapFix {
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-flex-shrink: 1;
flex-shrink: 1;
-webkit-flex-basis: 0%;
flex-basis: 0%;
}
}
/**
* Overflow scrolling
*/
.oui-yScroll {
scrollbar-width: thin;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
}
.oui-yScroll::-webkit-scrollbar {
width: 16px;
height: 16px;
}
.oui-yScroll::-webkit-scrollbar-thumb {
background-color: rgba(90, 104, 117, 0.5);
border: 6px solid transparent;
background-clip: content-box;
}
.oui-yScroll::-webkit-scrollbar-corner, .oui-yScroll::-webkit-scrollbar-track {
background-color: transparent;
}
.oui-yScroll:focus {
outline: none; /* 1 */
}
.oui-yScroll[tabindex="0"]:focus:focus-visible {
outline-style: auto; /* 2 */
}
.oui-xScroll {
scrollbar-width: thin;
overflow-x: auto;
}
.oui-xScroll::-webkit-scrollbar {
width: 16px;
height: 16px;
}
.oui-xScroll::-webkit-scrollbar-thumb {
background-color: rgba(90, 104, 117, 0.5);
border: 6px solid transparent;
background-clip: content-box;
}
.oui-xScroll::-webkit-scrollbar-corner, .oui-xScroll::-webkit-scrollbar-track {
background-color: transparent;
}
.oui-xScroll:focus {
outline: none; /* 1 */
}
.oui-xScroll[tabindex="0"]:focus:focus-visible {
outline-style: auto; /* 2 */
}
/**
* Overflow scrolling with shadows
*/
.oui-yScrollWithShadows {
scrollbar-width: thin;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
-webkit-mask-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.1) 0%, red 7.5px, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%);
mask-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.1) 0%, red 7.5px, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%);
contain: paint;
}
.oui-yScrollWithShadows::-webkit-scrollbar {
width: 16px;
height: 16px;
}
.oui-yScrollWithShadows::-webkit-scrollbar-thumb {
background-color: rgba(90, 104, 117, 0.5);
border: 6px solid transparent;
background-clip: content-box;
}
.oui-yScrollWithShadows::-webkit-scrollbar-corner, .oui-yScrollWithShadows::-webkit-scrollbar-track {
background-color: transparent;
}
.oui-yScrollWithShadows:focus {
outline: none; /* 1 */
}
.oui-yScrollWithShadows[tabindex="0"]:focus:focus-visible {
outline-style: auto; /* 2 */
}
.oui-xScrollWithShadows {
scrollbar-width: thin;
overflow-x: auto;
-webkit-mask-image: linear-gradient(to right, rgba(255, 0, 0, 0.1) 0%, red 7.5px, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%);
mask-image: linear-gradient(to right, rgba(255, 0, 0, 0.1) 0%, red 7.5px, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%);
contain: paint;
}
.oui-xScrollWithShadows::-webkit-scrollbar {
width: 16px;
height: 16px;
}
.oui-xScrollWithShadows::-webkit-scrollbar-thumb {
background-color: rgba(90, 104, 117, 0.5);
border: 6px solid transparent;
background-clip: content-box;
}
.oui-xScrollWithShadows::-webkit-scrollbar-corner, .oui-xScrollWithShadows::-webkit-scrollbar-track {
background-color: transparent;
}
.oui-xScrollWithShadows:focus {
outline: none; /* 1 */
}
.oui-xScrollWithShadows[tabindex="0"]:focus:focus-visible {
outline-style: auto; /* 2 */
}
.ouiYScrollWithShadows {
scrollbar-width: thin;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
-webkit-mask-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.1) 0%, red 7.5px, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%);
mask-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.1) 0%, red 7.5px, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%);
contain: paint;
}
.ouiYScrollWithShadows::-webkit-scrollbar {
width: 16px;
height: 16px;
}
.ouiYScrollWithShadows::-webkit-scrollbar-thumb {
background-color: rgba(90, 104, 117, 0.5);
border: 6px solid transparent;
background-clip: content-box;
}
.ouiYScrollWithShadows::-webkit-scrollbar-corner, .ouiYScrollWithShadows::-webkit-scrollbar-track {
background-color: transparent;
}
.ouiYScrollWithShadows:focus {
outline: none; /* 1 */
}
.ouiYScrollWithShadows[tabindex="0"]:focus:focus-visible {
outline-style: auto; /* 2 */
}
/**
* Forcing focus ring on non-OUI elements
*/
.oui-isFocusable:focus {
-webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimateLarge !important;
animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimateLarge !important;
}
/**
* For quickly applying a full-height element whether using flex or not
*/
.oui-fullHeight {
height: 100%;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
overflow: hidden;
}
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/
/*!
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/
:root {
--oui-font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
--oui-code-font-family: 'Source Code Pro', Consolas, Menlo, Courier, monospace;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/**
* Adapted from Eric Meyer's reset (http://meyerweb.com/eric/tools/css/reset/, v2.0 | 20110126).
*
*/
*, *:before, *:after {
box-sizing: border-box;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: none;
vertical-align: baseline;
}
code, pre, kbd, samp {
font-family: var(--oui-code-font-family);
line-height: 1.5;
}
h1, h2, h3, h4, h5, h6, p {
font-family: inherit;
font-weight: inherit;
font-size: inherit;
}
input, textarea, select, button {
font-family: var(--oui-font-family);
}
em {
font-style: italic;
}
b, strong {
font-weight: 500;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
html {
font-family: var(--oui-font-family);
font-weight: 400;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-font-kerning: normal;
font-kerning: normal;
font-size: 14px;
color: #2A3947;
height: 100%;
background-color: #F0F2F4;
}
body {
line-height: 1;
}
*:focus {
outline: none;
}
*:focus::-moz-focus-inner {
border: none;
}
*:focus:-moz-focusring {
outline: none;
}
a {
text-decoration: none;
color: #0268BC;
}
a:hover {
text-decoration: none;
}
a:focus {
text-decoration: none;
outline: none;
}
a:hover, button, [role=button] {
cursor: pointer;
}
input {
margin: 0;
padding: 0;
}
input:disabled {
opacity: 1; /* required on iOS */
}
button {
background: none;
border: none;
padding: 0;
margin: 0;
outline: none;
font-size: inherit;
color: inherit;
border-radius: 0;
}
button:hover {
cursor: pointer;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
hr {
margin: 0;
}
fieldset {
min-inline-size: auto;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
svg text {
letter-spacing: normal !important;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
html {
scrollbar-width: thin;
scrollbar-color: rgba(90, 104, 117, 0.5) transparent;
}
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiScreenReaderOnly,
.ouiScreenReaderOnly--showOnFocus:not(:focus):not(:active) {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiSkipLink {
transition: none !important;
}
.ouiSkipLink:focus {
-webkit-animation: none !important;
animation: none !important;
}
.ouiSkipLink.ouiSkipLink--absolute:focus {
position: absolute;
}
.ouiSkipLink.ouiSkipLink--fixed:focus {
position: fixed;
top: 4px;
left: 4px;
z-index: 1001;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiAccordion__triggerWrapper {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
}
.ouiAccordion__button {
font-size: 14px;
font-size: 1rem;
line-height: 1.5;
text-align: left;
width: 100%;
-webkit-flex-grow: 1;
flex-grow: 1;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
}
.ouiAccordion__button:hover, .ouiAccordion__button:focus {
text-decoration: underline;
cursor: pointer;
}
.ouiAccordion__button:focus .ouiAccordion__iconWrapper {
-webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important;
animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important;
color: #0268BC;
outline: none;
}
.ouiAccordion__buttonReverse {
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.ouiAccordion__buttonReverse .ouiAccordion__iconWrapper {
margin-left: 8px;
margin-right: 4px;
}
.ouiAccordion__iconWrapper {
width: 16px;
height: 16px;
margin-left: 4px;
margin-right: 8px;
border-radius: 4px;
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
.ouiAccordion__iconWrapper .ouiAccordion__icon {
vertical-align: top;
transition: -webkit-transform 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
transition: transform 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
transition: transform 250ms cubic-bezier(0.694, 0.0482, 0.335, 1), -webkit-transform 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
}
.ouiAccordion__iconWrapper .ouiAccordion__icon-isOpen {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.ouiAccordion__iconButton {
margin-left: 8px;
margin-right: 4px;
}
.ouiAccordion__iconButton:focus {
-webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important;
animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important;
color: #0268BC;
}
.ouiAccordion__optionalAction {
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
.ouiAccordion__childWrapper {
visibility: hidden;
height: 0;
opacity: 0;
overflow: hidden;
-webkit-transform: translatez(0);
transform: translatez(0);
transition: height 250ms cubic-bezier(0.694, 0.0482, 0.335, 1), opacity 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
}
.ouiAccordion__childWrapper:focus {
outline: none;
}
.ouiAccordion__padding--xs {
padding: 4px;
}
.ouiAccordion__padding--s {
padding: 8px;
}
.ouiAccordion__padding--m {
padding: 16px;
}
.ouiAccordion__padding--l {
padding: 24px;
}
.ouiAccordion__padding--xl {
padding: 32px;
}
.ouiAccordion.ouiAccordion-isOpen .ouiAccordion__childWrapper {
visibility: visible;
opacity: 1;
height: auto;
}
.ouiAccordion__children-isLoading {
line-height: 1.5;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
}
.ouiAccordion__children-isLoading .ouiAccordion__spinner {
margin-right: 4px;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiAccordionForm__extraAction {
opacity: 0;
transition: opacity 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
}
.ouiAccordionForm__extraAction:focus {
opacity: 1;
}
.ouiAccordionForm__title {
display: inline-block;
}
.ouiAccordionForm__button {
padding: 16px 16px 16px 0;
}
.ouiAccordionForm__button:hover {
text-decoration: none;
}
.ouiAccordionForm__button:hover .ouiAccordionForm__title {
text-decoration: underline;
}
.ouiAccordionForm {
border-top: 1px solid #D6D9DD;
border-bottom: 1px solid #D6D9DD;
}
.ouiAccordionForm + .ouiAccordionForm {
border-top: none;
}
.ouiAccordionForm:hover .ouiAccordionForm__extraAction {
opacity: 1;
visibility: visible;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiAspectRatio {
position: relative;
}
.ouiAspectRatio > * {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiAvatar {
-webkit-flex-shrink: 0;
flex-shrink: 0;
display: -webkit-inline-flex;
display: inline-flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
background-size: cover;
text-align: center;
vertical-align: middle;
overflow-x: hidden;
font-weight: 500;
}
.ouiAvatar--user {
position: relative;
border-radius: 50%;
}
.ouiAvatar--user:after {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 50%;
content: "";
pointer-events: none;
border: 1px solid rgba(42, 57, 71, 0.05);
}
.ouiAvatar--space {
position: relative;
border-radius: 4px;
}
.ouiAvatar--space:after {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 4px;
content: "";
pointer-events: none;
border: 1px solid rgba(42, 57, 71, 0.05);
}
.ouiAvatar-isDisabled {
cursor: not-allowed;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.ouiAvatar--plain {
background-color: #FCFEFF;
}
.ouiAvatar--s {
width: 24px;
height: 24px;
line-height: 24px;
font-size: 12px;
}
.ouiAvatar--m {
width: 32px;
height: 32px;
line-height: 32px;
font-size: 14.4px;
}
.ouiAvatar--l {
width: 40px;
height: 40px;
line-height: 40px;
font-size: 19.2px;
}
.ouiAvatar--xl {
width: 64px;
height: 64px;
line-height: 64px;
font-size: 25.6px;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/**
* 1. Accounts for the border
*/
.ouiBadge {
font-size: 12.000002px;
font-weight: 500;
line-height: 18px; /* 1 */
padding: 0 8px;
display: inline-block;
text-decoration: none;
border-radius: 2px;
border: solid 1px transparent;
background-color: transparent;
white-space: nowrap;
vertical-align: middle;
cursor: default;
max-width: 100%;
text-align: left;
}
.ouiBadge.ouiBadge-isDisabled {
color: #7e828a !important;
background-color: #bdc3c8 !important;
}
.ouiBadge:focus-within {
-webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important;
animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important;
}
.ouiBadge + .ouiBadge {
margin-left: 4px;
}
.ouiBadge .ouiBadge__content {
min-height: 18px;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
overflow: hidden;
}
.ouiBadge .ouiBadge__childButton {
max-width: 100%;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
word-wrap: normal !important;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
text-align: inherit;
font-weight: inherit;
line-height: inherit;
color: inherit;
}
.ouiBadge .ouiBadge__childButton:disabled {
cursor: not-allowed;
}
.ouiBadge .ouiBadge__childButton:not(:disabled):hover, .ouiBadge .ouiBadge__childButton:not(:disabled):focus {
text-decoration: underline;
}
.ouiBadge .ouiBadge__iconButton {
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
font-size: 0;
margin-left: 4px;
}
.ouiBadge .ouiBadge__iconButton:focus {
background-color: rgba(252, 254, 255, 0.8);
color: #02020E;
border-radius: 2px;
}
.ouiBadge .ouiBadge__iconButton:disabled {
cursor: not-allowed;
}
.ouiBadge .ouiBadge__iconButton .ouiBadge__icon {
margin: 0 !important;
}
.ouiBadge .ouiBadge__text {
max-width: 100%;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
word-wrap: normal !important;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
cursor: default;
}
.ouiBadge .ouiBadge__icon {
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
}
.ouiBadge .ouiBadge__icon:not(:only-child) {
margin-left: 4px;
}
.ouiBadge.ouiBadge--iconLeft .ouiBadge__content {
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.ouiBadge.ouiBadge--iconLeft .ouiBadge__iconButton,
.ouiBadge.ouiBadge--iconLeft .ouiBadge__icon:not(:only-child) {
margin-right: 4px;
margin-left: 0;
}
.ouiBadge-isClickable:not(:disabled):hover, .ouiBadge-isClickable:not(:disabled):focus {
text-decoration: underline;
}
.ouiBadge-isClickable.ouiBadge-isDisabled {
cursor: not-allowed;
}
.ouiBadge-isClickable:focus {
-webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important;
animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important;
}
.ouiBadge-isClickable .ouiBadge__text {
cursor: inherit;
}
.ouiBadge--hollow {
background-color: #FCFEFF;
border-color: #D6D9DD;
color: #2A3947;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiBadgeGroup__item {
display: inline-block;
max-width: 100%;
}
.ouiBadgeGroup--gutterExtraSmall {
margin: -2px;
}
.ouiBadgeGroup--gutterExtraSmall > .ouiBadgeGroup__item {
margin: 2px;
max-width: calc(100% - 4px);
}
.ouiBadgeGroup--gutterSmall {
margin: -4px;
}
.ouiBadgeGroup--gutterSmall > .ouiBadgeGroup__item {
margin: 4px;
max-width: calc(100% - 8px);
}
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiBetaBadge {
display: inline-block;
padding: 0 16px;
border-radius: 24px;
box-shadow: inset 0 0 0 1px #D6D9DD;
vertical-align: super;
font-size: 12.000002px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
line-height: 24px;
text-align: center;
white-space: nowrap;
cursor: default;
}
.ouiBetaBadge:focus {
-webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important;
animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important;
outline-color: #02020E;
outline-offset: 2px;
}
.ouiBetaBadge:not(.ouiBetaBadge--hollow) {
box-shadow: none;
}
.ouiBetaBadge.ouiBetaBadge--small {
font-size: 8.75px;
font-size: 0.625rem;
line-height: 20px;
padding: 0 12px;
}
.ouiBetaBadge--iconOnly {
padding: 0;
width: 24px;
}
.ouiBetaBadge--iconOnly .ouiBetaBadge__icon {
position: relative;
margin-top: -1px;
}
.ouiBetaBadge--iconOnly.ouiBetaBadge--small {
width: 20px;
padding: 0;
}
.ouiBetaBadge--singleLetter {
padding: 0 0 0 1px;
width: 24px;
}
.ouiBetaBadge--singleLetter.ouiBetaBadge--small {
width: 20px;
padding: 0 0 0 1px;
}
.ouiBetaBadge--subdued {
background: #e1e4e7;
color: #02020E;
}
.ouiBetaBadge--subdued.ouiBetaBadge-isClickable {
color: #02020E;
}
.ouiBetaBadge--hollow.ouiBetaBadge-isClickable {
color: #02020E;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiNotificationBadge {
-webkit-flex-shrink: 0;
flex-shrink: 0;
display: inline-block;
border-radius: 4px;
font-size: 12.000002px;
font-weight: 500;
line-height: 16px;
height: 16px;
min-width: 16px;
padding-left: 4px;
padding-right: 4px;
vertical-align: middle;
text-align: center;
transition: all 150ms ease-in;
cursor: default;
background: #9C47BF;
color: #FCFEFF;
}
.ouiNotificationBadge--medium {
line-height: 20px;
height: 20px;
min-width: 24px;
}
.ouiNotificationBadge--subdued {
background: #e1e4e7;
color: #02020E;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiBasicTable-loading {
position: relative;
}
.ouiBasicTable-loading tbody {
overflow: hidden;
}
.ouiBasicTable-loading tbody:before {
position: absolute;
content: "";
width: 100%;
height: 2px;
background-color: #0268BC;
-webkit-animation: ouiBasicTableLoading 1000ms linear;
animation: ouiBasicTableLoading 1000ms linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@-webkit-keyframes ouiBasicTableLoading {
from {
left: 0;
width: 0;
}
20% {
left: 0;
width: 40%;
}
80% {
left: 60%;
width: 40%;
}
100% {
left: 100%;
width: 0;
}
}
@keyframes ouiBasicTableLoading {
from {
left: 0;
width: 0;
}
20% {
left: 0;
width: 40%;
}
80% {
left: 60%;
width: 40%;
}
100% {
left: 100%;
width: 0;
}
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiBeacon {
position: relative;
background-color: #54B399;
border-radius: 50%;
}
.ouiBeacon:before, .ouiBeacon:after {
position: absolute;
content: "";
height: 100%;
width: 100%;
left: 0;
top: 0;
background-color: transparent;
border-radius: 50%;
box-shadow: 0 0 1px 1px #54B399;
}
.ouiBeacon:before {
-webkit-animation: ouiBeaconPulseLarge 2.5s infinite ease-out;
animation: ouiBeaconPulseLarge 2.5s infinite ease-out;
}
.ouiBeacon:after {
-webkit-animation: ouiBeaconPulseSmall 2.5s infinite ease-out 0.25s;
animation: ouiBeaconPulseSmall 2.5s infinite ease-out 0.25s;
}
@-webkit-keyframes ouiBeaconPulseLarge {
0% {
-webkit-transform: scale(0.1);
transform: scale(0.1);
opacity: 1;
}
70% {
-webkit-transform: scale(3);
transform: scale(3);
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes ouiBeaconPulseLarge {
0% {
-webkit-transform: scale(0.1);
transform: scale(0.1);
opacity: 1;
}
70% {
-webkit-transform: scale(3);
transform: scale(3);
opacity: 0;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes ouiBeaconPulseSmall {
0% {
-webkit-transform: scale(0.1);
transform: scale(0.1);
opacity: 1;
}
70% {
-webkit-transform: scale(2);
transform: scale(2);
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes ouiBeaconPulseSmall {
0% {
-webkit-transform: scale(0.1);
transform: scale(0.1);
opacity: 1;
}
70% {
-webkit-transform: scale(2);
transform: scale(2);
opacity: 0;
}
100% {
opacity: 0;
}
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiBottomBar {
bottom: 0;
left: 0;
right: 0;
box-shadow: 0 0 12px -1px rgba(78, 92, 110, 0.2), 0 0 4px -1px rgba(78, 92, 110, 0.2), 0 0 2px 0 rgba(78, 92, 110, 0.2);
background: #001522;
color: #FCFEFF;
}
@media screen and (prefers-reduced-motion: no-preference) {
.ouiBottomBar {
-webkit-animation: ouiBottomBarAppear 350ms cubic-bezier(0.694, 0.0482, 0.335, 1);
animation: ouiBottomBarAppear 350ms cubic-bezier(0.694, 0.0482, 0.335, 1);
}
}
.ouiBottomBar--fixed {
position: fixed;
z-index: 998;
}
.ouiBottomBar--sticky {
position: -webkit-sticky;
position: sticky;
z-index: 998;
}
.ouiBottomBar--paddingSmall {
padding: 8px;
}
.ouiBottomBar--paddingMedium {
padding: 16px;
}
.ouiBottomBar--paddingLarge {
padding: 24px;
}
@-webkit-keyframes ouiBottomBarAppear {
0% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
opacity: 0;
}
100% {
-webkit-transform: translateY(0%);
transform: translateY(0%);
opacity: 1;
}
}
@keyframes ouiBottomBarAppear {
0% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
opacity: 0;
}
100% {
-webkit-transform: translateY(0%);
transform: translateY(0%);
opacity: 1;
}
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiButton {
display: inline-block;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
height: 40px;
line-height: 40px;
text-align: center;
white-space: nowrap;
max-width: 100%;
vertical-align: middle;
font-family: var(--oui-font-family);
font-weight: 400;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-font-kerning: normal;
font-kerning: normal;
font-size: 14px;
font-size: 1rem;
line-height: 1.5;
text-decoration: none;
border: solid 1px transparent;
font-weight: 400;
border-radius: 4px;
min-width: 112px;
}
@media screen and (prefers-reduced-motion: no-preference) {
.ouiButton {
transition: background 250ms ease-in-out;
}
}
.ouiButton:hover:not([class*=isDisabled]), .ouiButton:focus {
text-decoration: underline;
}
.ouiButton .ouiButton__content {
padding: 0 12px;
}
.ouiButton .ouiButton__text {
text-overflow: ellipsis;
overflow: hidden;
}
.ouiButton.ouiButton--small {
height: 32px;
line-height: 32px;
}
.ouiButton:hover, .ouiButton:active {
box-shadow: 0 4px 8px 0 rgba(173, 180, 186, 0.15), 0 2px 2px -1px rgba(173, 180, 186, 0.3);
}
.ouiButton:not([class*=isDisabled]):hover, .ouiButton:not([class*=isDisabled]):focus, .ouiButton:not([class*=isDisabled]):focus-within {
background-color: rgba(2, 104, 188, 0.1);
}
.ouiButton.ouiButton-isDisabled {
pointer-events: auto;
cursor: not-allowed;
color: #a3a7ae;
border-color: #bdc3c8;
}
.ouiButton.ouiButton-isDisabled .ouiButtonContent__icon {
fill: currentColor;
}
.ouiButton.ouiButton-isDisabled .ouiButtonContent__spinner {
border-color: #0268BC currentColor currentColor currentColor;
}
.ouiButton.ouiButton-isDisabled.ouiButton--fill {
color: #7e828a;
background-color: #bdc3c8;
border-color: #bdc3c8;
}
.ouiButton.ouiButton-isDisabled.ouiButton--fill:hover, .ouiButton.ouiButton-isDisabled.ouiButton--fill:focus, .ouiButton.ouiButton-isDisabled.ouiButton--fill:focus-within {
background-color: #bdc3c8;
border-color: #bdc3c8;
}
.ouiButton.ouiButton-isDisabled:hover, .ouiButton.ouiButton-isDisabled:focus, .ouiButton.ouiButton-isDisabled:focus-within {
box-shadow: 0 2px 2px -1px rgba(173, 180, 186, 0.3);
text-decoration: none;
}
.ouiButton--primary {
color: #0268BC;
border-color: #0268BC;
}
.ouiButton--primary.ouiButton--fill {
background-color: #0268BC;
border-color: #0268BC;
color: #FCFEFF;
}
.ouiButton--primary.ouiButton--fill:not([class*=isDisabled]):hover, .ouiButton--primary.ouiButton--fill:not([class*=isDisabled]):focus, .ouiButton--primary.ouiButton--fill:not([class*=isDisabled]):focus-within {
background-color: #025aa3;
border-color: #025aa3;
}
.ouiButton--primary.ouiButton--fill:not([class*=isDisabled]):active {
box-shadow: inset 1px 2px 8px rgba(1, 76, 138, 0.4);
}
.ouiButton--primary:not([class*=isDisabled]):hover, .ouiButton--primary:not([class*=isDisabled]):focus, .ouiButton--primary:not([class*=isDisabled]):focus-within {
box-shadow: 0 4px 8px 0 rgba(59, 98, 131, 0.15), 0 2px 2px -1px rgba(59, 98, 131, 0.3);
background-color: rgba(2, 104, 188, 0.1);
}
.ouiButton--primary:not([class*=isDisabled]):active {
box-shadow: inset 1px 2px 8px rgba(2, 104, 188, 0.15);
}
.ouiButton--accent {
color: #9C47BF;
border-color: #9C47BF;
}
.ouiButton--accent.ouiButton--fill {
background-color: #9C47BF;
border-color: #9C47BF;
color: #FCFEFF;
}
.ouiButton--accent.ouiButton--fill:not([class*=isDisabled]):hover, .ouiButton--accent.ouiButton--fill:not([class*=isDisabled]):focus, .ouiButton--accent.ouiButton--fill:not([class*=isDisabled]):focus-within {
background-color: #8e3daf;
border-color: #8e3daf;
}
.ouiButton--accent.ouiButton--fill:not([class*=isDisabled]):active {
box-shadow: inset 1px 2px 8px rgba(127, 54, 157, 0.4);
}
.ouiButton--accent:not([class*=isDisabled]):hover, .ouiButton--accent:not([class*=isDisabled]):focus, .ouiButton--accent:not([class*=isDisabled]):focus-within {
box-shadow: 0 4px 8px 0 rgba(131, 131, 131, 0.15), 0 2px 2px -1px rgba(131, 131, 131, 0.3);
background-color: rgba(156, 71, 191, 0.1);
}
.ouiButton--accent:not([class*=isDisabled]):active {
box-shadow: inset 1px 2px 8px rgba(156, 71, 191, 0.15);
}
.ouiButton--secondary {
color: #0F7B68;
border-color: #0F7B68;
}
.ouiButton--secondary.ouiButton--fill {
background-color: #0F7B68;
border-color: #0F7B68;
color: #FCFEFF;
}
.ouiButton--secondary.ouiButton--fill:not([class*=isDisabled]):hover, .ouiButton--secondary.ouiButton--fill:not([class*=isDisabled]):focus, .ouiButton--secondary.ouiButton--fill:not([class*=isDisabled]):focus-within {
background-color: #0c6455;
border-color: #0c6455;
}
.ouiButton--secondary.ouiButton--fill:not([class*=isDisabled]):active {
box-shadow: inset 1px 2px 8px rgba(9, 78, 66, 0.4);
}
.ouiButton--secondary:not([class*=isDisabled]):hover, .ouiButton--secondary:not([class*=isDisabled]):focus, .ouiButton--secondary:not([class*=isDisabled]):focus-within {
box-shadow: 0 4px 8px 0 rgba(56, 82, 77, 0.15), 0 2px 2px -1px rgba(56, 82, 77, 0.3);
background-color: rgba(15, 123, 104, 0.1);
}
.ouiButton--secondary:not([class*=isDisabled]):active {
box-shadow: inset 1px 2px 8px rgba(15, 123, 104, 0.15);
}
.ouiButton--success {
color: #0F7B68;
border-color: #0F7B68;
}
.ouiButton--success.ouiButton--fill {
background-color: #0F7B68;
border-color: #0F7B68;
color: #FCFEFF;
}
.ouiButton--success.ouiButton--fill:not([class*=isDisabled]):hover, .ouiButton--success.ouiButton--fill:not([class*=isDisabled]):focus, .ouiButton--success.ouiButton--fill:not([class*=isDisabled]):focus-within {
background-color: #0c6455;
border-color: #0c6455;
}
.ouiButton--success.ouiButton--fill:not([class*=isDisabled]):active {
box-shadow: inset 1px 2px 8px rgba(9, 78, 66, 0.4);
}
.ouiButton--success:not([class*=isDisabled]):hover, .ouiButton--success:not([class*=isDisabled]):focus, .ouiButton--success:not([class*=isDisabled]):focus-within {
box-shadow: 0 4px 8px 0 rgba(56, 82, 77, 0.15), 0 2px 2px -1px rgba(56, 82, 77, 0.3);
background-color: rgba(15, 123, 104, 0.1);
}
.ouiButton--success:not([class*=isDisabled]):active {
box-shadow: inset 1px 2px 8px rgba(15, 123, 104, 0.15);
}
.ouiButton--warning {
color: #8e6625;
border-color: #E0A130;
}
.ouiButton--warning.ouiButton--fill {
background-color: #E0A130;
border-color: #E0A130;
color: #02020E;
}
.ouiButton--warning.ouiButton--fill:not([class*=isDisabled]):hover, .ouiButton--warning.ouiButton--fill:not([class*=isDisabled]):focus, .ouiButton--warning.ouiButton--fill:not([class*=isDisabled]):focus-within {
background-color: #d69520;
border-color: #d69520;
}
.ouiButton--warning.ouiButton--fill:not([class*=isDisabled]):active {
box-shadow: inset 1px 2px 8px rgba(192, 134, 29, 0.4);
}
.ouiButton--warning:not([class*=isDisabled]):hover, .ouiButton--warning:not([class*=isDisabled]):focus, .ouiButton--warning:not([class*=isDisabled]):focus-within {
box-shadow: 0 4px 8px 0 rgba(153, 141, 119, 0.15), 0 2px 2px -1px rgba(153, 141, 119, 0.3);
background-color: rgba(224, 161, 48, 0.1);
}
.ouiButton--warning:not([class*=isDisabled]):active {
box-shadow: inset 1px 2px 8px rgba(224, 161, 48, 0.15);
}
.ouiButton--danger {
color: #C43D35;
border-color: #C43D35;
}
.ouiButton--danger.ouiButton--fill {
background-color: #C43D35;
border-color: #C43D35;
color: #FCFEFF;
}
.ouiButton--danger.ouiButton--fill:not([class*=isDisabled]):hover, .ouiButton--danger.ouiButton--fill:not([class*=isDisabled]):focus, .ouiButton--danger.ouiButton--fill:not([class*=isDisabled]):focus-within {
background-color: #b03730;
border-color: #b03730;
}
.ouiButton--danger.ouiButton--fill:not([class*=isDisabled]):active {
box-shadow: inset 1px 2px 8px rgba(156, 49, 42, 0.4);
}
.ouiButton--danger:not([class*=isDisabled]):hover, .ouiButton--danger:not([class*=isDisabled]):focus, .ouiButton--danger:not([class*=isDisabled]):focus-within {
box-shadow: 0 4px 8px 0 rgba(125, 125, 125, 0.15), 0 2px 2px -1px rgba(125, 125, 125, 0.3);
background-color: rgba(196, 61, 53, 0.1);
}
.ouiButton--danger:not([class*=isDisabled]):active {
box-shadow: inset 1px 2px 8px rgba(196, 61, 53, 0.15);
}
.ouiButton--subdued {
color: #686c75;
border-color: #686c75;
}
.ouiButton--subdued.ouiButton--fill {
background-color: #686c75;
border-color: #686c75;
color: #FCFEFF;
}
.ouiButton--subdued.ouiButton--fill:not([class*=isDisabled]):hover, .ouiButton--subdued.ouiButton--fill:not([class*=isDisabled]):focus, .ouiButton--subdued.ouiButton--fill:not([class*=isDisabled]):focus-within {
background-color: #5c6068;
border-color: #5c6068;
}
.ouiButton--subdued.ouiButton--fill:not([class*=isDisabled]):active {
box-shadow: inset 1px 2px 8px rgba(80, 83, 90, 0.4);
}
.ouiButton--subdued:not([class*=isDisabled]):hover, .ouiButton--subdued:not([class*=isDisabled]):focus, .ouiButton--subdued:not([class*=isDisabled]):focus-within {
box-shadow: 0 4px 8px 0 rgba(111, 111, 111, 0.15), 0 2px 2px -1px rgba(111, 111, 111, 0.3);
background-color: rgba(104, 108, 117, 0.1);
}
.ouiButton--subdued:not([class*=isDisabled]):active {
box-shadow: inset 1px 2px 8px rgba(104, 108, 117, 0.15);
}
.ouiButton--ghost {
color: #FCFEFF;
border-color: #FCFEFF;
}
.ouiButton--ghost.ouiButton--fill {
background-color: #FCFEFF;
border-color: #FCFEFF;
color: #02020E;
}
.ouiButton--ghost.ouiButton--fill:not([class*=isDisabled]):hover, .ouiButton--ghost.ouiButton--fill:not([class*=isDisabled]):focus, .ouiButton--ghost.ouiButton--fill:not([class*=isDisabled]):focus-within {
background-color: #e3f6ff;
border-color: #e3f6ff;
}
.ouiButton--ghost.ouiButton--fill:not([class*=isDisabled]):active {
box-shadow: inset 1px 2px 8px rgba(201, 237, 255, 0.4);
}
.ouiButton--ghost:not([class*=isDisabled]):hover, .ouiButton--ghost:not([class*=isDisabled]):focus, .ouiButton--ghost:not([class*=isDisabled]):focus-within {
box-shadow: 0 4px 8px 0 rgba(2, 2, 14, 0.15), 0 2px 2px -1px rgba(2, 2, 14, 0.3);
background-color: rgba(252, 254, 255, 0.1);
}
.ouiButton--ghost:not([class*=isDisabled]):active {
box-shadow: inset 1px 2px 8px rgba(252, 254, 255, 0.15);
}
.ouiButton--text {
color: #2A3947;
border-color: #5A6875;
}
.ouiButton--text.ouiButton--fill {
background-color: #5A6875;
border-color: #5A6875;
color: #FCFEFF;
}
.ouiButton--text.ouiButton--fill:not([class*=isDisabled]):hover, .ouiButton--text.ouiButton--fill:not([class*=isDisabled]):focus, .ouiButton--text.ouiButton--fill:not([class*=isDisabled]):focus-within {
background-color: #4f5b67;
border-color: #4f5b67;
}
.ouiButton--text.ouiButton--fill:not([class*=isDisabled]):active {
box-shadow: inset 1px 2px 8px rgba(68, 78, 88, 0.4);
}
.ouiButton--text:not([class*=isDisabled]):hover, .ouiButton--text:not([class*=isDisabled]):focus, .ouiButton--text:not([class*=isDisabled]):focus-within {
box-shadow: 0 4px 8px 0 rgba(104, 104, 104, 0.15), 0 2px 2px -1px rgba(104, 104, 104, 0.3);
background-color: rgba(90, 104, 117, 0.1);
}
.ouiButton--text:not([class*=isDisabled]):active {
box-shadow: inset 1px 2px 8px rgba(90, 104, 117, 0.15);
}
.ouiButton.ouiButton-isDisabled.ouiButton--ghost {
color: #5A6875;
border-color: #5A6875;
}
.ouiButton.ouiButton-isDisabled.ouiButton--ghost:hover, .ouiButton.ouiButton-isDisabled.ouiButton--ghost:focus, .ouiButton.ouiButton-isDisabled.ouiButton--ghost:focus-within {
box-shadow: 0 2px 2px -1px rgba(2, 2, 14, 0.3);
color: #5A6875;
border-color: #5A6875;
}
.ouiButton.ouiButton-isDisabled.ouiButton--ghost.ouiButton--fill {
background-color: #5A6875;
color: #919ba4;
}
.ouiButton--fullWidth {
display: block;
width: 100%;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiButtonContent {
height: 100%;
width: 100%;
vertical-align: middle;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
}
.ouiButtonContent .ouiButtonContent__icon,
.ouiButtonContent .ouiButtonContent__spinner {
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
.ouiButtonContent > * + * {
-webkit-margin-start: 8px;
margin-inline-start: 8px;
}
.ouiButtonContent.ouiButtonContent--smallIconGap > * + * {
-webkit-margin-start: 2px;
margin-inline-start: 2px;
}
.ouiButtonContent.ouiButtonContent--noIconGap > * + * {
-webkit-margin-start: 0;
margin-inline-start: 0;
}
.ouiButtonContent--iconRight {
height: 100%;
width: 100%;
vertical-align: middle;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.ouiButtonContent--iconRight .ouiButtonContent__icon,
.ouiButtonContent--iconRight .ouiButtonContent__spinner {
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
.ouiButtonContent--iconRight > * + * {
-webkit-margin-start: 0;
margin-inline-start: 0;
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
.ouiButtonContent--iconRight.ouiButtonContent--smallIconGap > * + * {
-webkit-margin-start: 0;
margin-inline-start: 0;
-webkit-margin-end: 2px;
margin-inline-end: 2px;
}
.ouiButtonContent--iconRight.ouiButtonContent--noIconGap > * + * {
-webkit-margin-start: 0;
margin-inline-start: 0;
-webkit-margin-end: 0;
margin-inline-end: 0;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/**
* 1. We don't want any of the animations that come inherited from the mixin.
* These should act like normal links instead.
* 2. Change the easing, quickness to not bounce so lighter backgrounds don't flash
*/
.ouiButtonEmpty {
display: inline-block;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
height: 40px;
line-height: 40px;
text-align: center;
white-space: nowrap;
max-width: 100%;
vertical-align: middle;
font-family: var(--oui-font-family);
font-weight: 400;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-font-kerning: normal;
font-kerning: normal;
font-size: 14px;
font-size: 1rem;
line-height: 1.5;
text-decoration: none;
border: solid 1px transparent;
font-weight: 400;
border-color: transparent;
background-color: transparent;
box-shadow: none;
-webkit-transform: none !important;
transform: none !important; /* 1 */
-webkit-animation: none !important;
animation: none !important; /* 1 */
transition-timing-function: ease-in; /* 2 */
transition-duration: 150ms; /* 2 */
line-height: inherit;
}
@media screen and (prefers-reduced-motion: no-preference) {
.ouiButtonEmpty {
transition: background 250ms ease-in-out;
}
}
.ouiButtonEmpty:hover:not([class*=isDisabled]), .ouiButtonEmpty:focus {
text-decoration: underline;
}
.ouiButtonEmpty .ouiButtonEmpty__content {
padding: 0 8px;
}
.ouiButtonEmpty .ouiButtonEmpty__text {
text-overflow: ellipsis;
overflow: hidden;
}
.ouiButtonEmpty.ouiButtonEmpty--small {
height: 32px;
}
.ouiButtonEmpty.ouiButtonEmpty--xSmall {
height: 24px;
font-size: 14px;
}
.ouiButtonEmpty:disabled {
pointer-events: auto;
cursor: not-allowed;
color: #a3a7ae;
}
.ouiButtonEmpty:disabled .ouiButtonContent__icon {
fill: currentColor;
}
.ouiButtonEmpty:disabled .ouiButtonContent__spinner {
border-color: #0268BC currentColor currentColor currentColor;
}
.ouiButtonEmpty:disabled:focus {
background-color: transparent;
}
.ouiButtonEmpty:disabled:hover, .ouiButtonEmpty:disabled:focus {
text-decoration: none;
}
.ouiButtonEmpty--flushLeft .ouiButtonEmpty__content,
.ouiButtonEmpty--flushRight .ouiButtonEmpty__content,
.ouiButtonEmpty--flushBoth .ouiButtonEmpty__content {
padding-left: 0;
padding-right: 0;
}
.ouiButtonEmpty--flushLeft {
margin-right: 8px;
}
.ouiButtonEmpty--flushRight {
margin-left: 8px;
}
.ouiButtonEmpty--primary {
color: #0268BC;
}
.ouiButtonEmpty--primary:focus {
background-color: rgba(2, 104, 188, 0.1);
}
.ouiButtonEmpty--danger {
color: #C43D35;
}
.ouiButtonEmpty--danger:focus {
background-color: rgba(196, 61, 53, 0.1);
}
.ouiButtonEmpty--disabled {
color: #72767e;
}
.ouiButtonEmpty--disabled:focus {
background-color: rgba(163, 167, 174, 0.1);
}
.ouiButtonEmpty--disabled:hover {
cursor: not-allowed;
}
.ouiButtonEmpty--ghost {
color: #FCFEFF;
}
.ouiButtonEmpty--ghost:focus {
background-color: rgba(252, 254, 255, 0.1);
}
.ouiButtonEmpty--text {
color: #2A3947;
}
.ouiButtonEmpty--text:focus {
background-color: rgba(42, 57, 71, 0.1);
}
.ouiButtonEmpty--success {
color: #0F7B68;
}
.ouiButtonEmpty--success:focus {
background-color: rgba(15, 123, 104, 0.1);
}
.ouiButtonEmpty--warning {
color: #8e6625;
}
.ouiButtonEmpty--warning:focus {
background-color: rgba(142, 102, 37, 0.1);
}
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiButtonIcon {
display: inline-block;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
height: 40px;
line-height: 40px;
text-align: center;
white-space: nowrap;
max-width: 100%;
vertical-align: middle;
font-family: var(--oui-font-family);
font-weight: 400;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-font-kerning: normal;
font-kerning: normal;
font-size: 14px;
font-size: 1rem;
line-height: 1.5;
text-decoration: none;
border: solid 1px transparent;
font-weight: 400;
border-radius: 4px;
width: 40px;
display: -webkit-inline-flex;
display: inline-flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: space-around;
justify-content: space-around;
}
@media screen and (prefers-reduced-motion: no-preference) {
.ouiButtonIcon {
transition: background 250ms ease-in-out;
}
}
.ouiButtonIcon:hover:not([class*=isDisabled]), .ouiButtonIcon:focus {
text-decoration: underline;
}
.ouiButtonIcon > svg {
pointer-events: none;
}
.ouiButtonIcon.ouiButtonIcon--empty {
box-shadow: none !important;
border: none;
}
.ouiButtonIcon.ouiButtonIcon-isDisabled {
pointer-events: auto;
cursor: not-allowed;
color: #a3a7ae;
border-color: #bdc3c8;
}
.ouiButtonIcon.ouiButtonIcon-isDisabled .ouiButtonContent__icon {
fill: currentColor;
}
.ouiButtonIcon.ouiButtonIcon-isDisabled .ouiButtonContent__spinner {
border-color: #0268BC currentColor currentColor currentColor;
}
.ouiButtonIcon.ouiButtonIcon-isDisabled.ouiButtonIcon--fill {
color: #7e828a;
background-color: #bdc3c8;
border-color: #bdc3c8;
}
.ouiButtonIcon.ouiButtonIcon-isDisabled.ouiButtonIcon--fill:hover, .ouiButtonIcon.ouiButtonIcon-isDisabled.ouiButtonIcon--fill:focus, .ouiButtonIcon.ouiButtonIcon-isDisabled.ouiButtonIcon--fill:focus-within {
background-color: #bdc3c8;
border-color: #bdc3c8;
}
.ouiButtonIcon.ouiButtonIcon-isDisabled:hover, .ouiButtonIcon.ouiButtonIcon-isDisabled:focus, .ouiButtonIcon.ouiButtonIcon-isDisabled:focus-within {
box-shadow: 0 2px 2px -1px rgba(173, 180, 186, 0.3);
text-decoration: none;
}
.ouiButtonIcon--xSmall {
height: 24px;
width: 24px;
}
.ouiButtonIcon--small {
height: 32px;
width: 32px;
}
.ouiButtonIcon--primary {
color: #0268BC;
border-color: #0268BC;
}
.ouiButtonIcon--primary.ouiButtonIcon--fill {
background-color: #0268BC;
border-color: #0268BC;
color: #FCFEFF;
}
.ouiButtonIcon--primary.ouiButtonIcon--fill:not([class*=isDisabled]):hover, .ouiButtonIcon--primary.ouiButtonIcon--fill:not([class*=isDisabled]):focus, .ouiButtonIcon--primary.ouiButtonIcon--fill:not([class*=isDisabled]):focus-within {
background-color: #025aa3;
border-color: #025aa3;
}
.ouiButtonIcon--primary.ouiButtonIcon--fill:not([class*=isDisabled]):active {
box-shadow: inset 1px 2px 8px rgba(1, 76, 138, 0.4);
}
.ouiButtonIcon--primary:not([class*=isDisabled]):hover, .ouiButtonIcon--primary:not([class*=isDisabled]):focus, .ouiButtonIcon--primary:not([class*=isDisabled]):focus-within {
box-shadow: 0 4px 8px 0 rgba(59, 98, 131, 0.15), 0 2px 2px -1px rgba(59, 98, 131, 0.3);
background-color: rgba(2, 104, 188, 0.1);
}
.ouiButtonIcon--primary:not([class*=isDisabled]):active {
box-shadow: inset 1px 2px 8px rgba(2, 104, 188, 0.15);
}
.ouiButtonIcon--accent {
color: #9C47BF;
border-color: #9C47BF;
}
.ouiButtonIcon--accent.ouiButtonIcon--fill {
background-color: #9C47BF;
border-color: #9C47BF;
color: #FCFEFF;
}
.ouiButtonIcon--accent.ouiButtonIcon--fill:not([class*=isDisabled]):hover, .ouiButtonIcon--accent.ouiButtonIcon--fill:not([class*=isDisabled]):focus, .ouiButtonIcon--accent.ouiButtonIcon--fill:not([class*=isDisabled]):focus-within {
background-color: #8e3daf;
border-color: #8e3daf;
}
.ouiButtonIcon--accent.ouiButtonIcon--fill:not([class*=isDisabled]):active {
box-shadow: inset 1px 2px 8px rgba(127, 54, 157, 0.4);
}
.ouiButtonIcon--accent:not([class*=isDisabled]):hover, .ouiButtonIcon--accent:not([class*=isDisabled]):focus, .ouiButtonIcon--accent:not([class*=isDisabled]):focus-within {
box-shadow: 0 4px 8px 0 rgba(131, 131, 131, 0.15), 0 2px 2px -1px rgba(131, 131, 131, 0.3);
background-color: rgba(156, 71, 191, 0.1);
}
.ouiButtonIcon--accent:not([class*=isDisabled]):active {
box-shadow: inset 1px 2px 8px rgba(156, 71, 191, 0.15);
}
.ouiButtonIcon--secondary {
color: #0F7B68;
border-color: #0F7B68;
}
.ouiButtonIcon--secondary.ouiButtonIcon--fill {
background-color: #0F7B68;
border-color: #0F7B68;
color: #FCFEFF;
}
.ouiButtonIcon--secondary.ouiButtonIcon--fill:not([class*=isDisabled]):hover, .ouiButtonIcon--secondary.ouiButtonIcon--fill:not([class*=isDisabled]):focus, .ouiButtonIcon--secondary.ouiButtonIcon--fill:not([class*=isDisabled]):focus-within {
background-color: #0c6455;
border-color: #0c6455;
}
.ouiButtonIcon--secondary.ouiButtonIcon--fill:not([class*=isDisabled]):active {
box-shadow: inset 1px 2px 8px rgba(9, 78, 66, 0.4);
}
.ouiButtonIcon--secondary:not([class*=isDisabled]):hover, .ouiButtonIcon--secondary:not([class*=isDisabled]):focus, .ouiButtonIcon--secondary:not([class*=isDisabled]):focus-within {
box-shadow: 0 4px 8px 0 rgba(56, 82, 77, 0.15), 0 2px 2px -1px rgba(56, 82, 77, 0.3);
background-color: rgba(15, 123, 104, 0.1);
}
.ouiButtonIcon--secondary:not([class*=isDisabled]):active {
box-shadow: inset 1px 2px 8px rgba(15, 123, 104, 0.15);
}
.ouiButtonIcon--success {
color: #0F7B68;
border-color: #0F7B68;
}
.ouiButtonIcon--success.ouiButtonIcon--fill {
background-color: #0F7B68;
border-color: #0F7B68;
color: #FCFEFF;
}
.ouiButtonIcon--success.ouiButtonIcon--fill:not([class*=isDisabled]):hover, .ouiButtonIcon--success.ouiButtonIcon--fill:not([class*=isDisabled]):focus, .ouiButtonIcon--success.ouiButtonIcon--fill:not([class*=isDisabled]):focus-within {
background-color: #0c6455;
border-color: #0c6455;
}
.ouiButtonIcon--success.ouiButtonIcon--fill:not([class*=isDisabled]):active {
box-shadow: inset 1px 2px 8px rgba(9, 78, 66, 0.4);
}
.ouiButtonIcon--success:not([class*=isDisabled]):hover, .ouiButtonIcon--success:not([class*=isDisabled]):focus, .ouiButtonIcon--success:not([class*=isDisabled]):focus-within {
box-shadow: 0 4px 8px 0 rgba(56, 82, 77, 0.15), 0 2px 2px -1px rgba(56, 82, 77, 0.3);
background-color: rgba(15, 123, 104, 0.1);
}
.ouiButtonIcon--success:not([class*=isDisabled]):active {
box-shadow: inset 1px 2px 8px rgba(15, 123, 104, 0.15);
}
.ouiButtonIcon--warning {
color: #8e6625;
border-color: #E0A130;
}
.ouiButtonIcon--warning.ouiButtonIcon--fill {
background-color: #E0A130;
border-color: #E0A130;
color: #02020E;
}
.ouiButtonIcon--warning.ouiButtonIcon--fill:not([class*=isDisabled]):hover, .ouiButtonIcon--warning.ouiButtonIcon--fill:not([class*=isDisabled]):focus, .ouiButtonIcon--warning.ouiButtonIcon--fill:not([class*=isDisabled]):focus-within {
background-color: #d69520;
border-color: #d69520;
}
.ouiButtonIcon--warning.ouiButtonIcon--fill:not([class*=isDisabled]):active {
box-shadow: inset 1px 2px 8px rgba(192, 134, 29, 0.4);
}
.ouiButtonIcon--warning:not([class*=isDisabled]):hover, .ouiButtonIcon--warning:not([class*=isDisabled]):focus, .ouiButtonIcon--warning:not([class*=isDisabled]):focus-within {
box-shadow: 0 4px 8px 0 rgba(153, 141, 119, 0.15), 0 2px 2px -1px rgba(153, 141, 119, 0.3);
background-color: rgba(224, 161, 48, 0.1);
}
.ouiButtonIcon--warning:not([class*=isDisabled]):active {
box-shadow: inset 1px 2px 8px rgba(224, 161, 48, 0.15);
}
.ouiButtonIcon--danger {
color: #C43D35;
border-color: #C43D35;
}
.ouiButtonIcon--danger.ouiButtonIcon--fill {
background-color: #C43D35;
border-color: #C43D35;
color: #FCFEFF;
}
.ouiButtonIcon--danger.ouiButtonIcon--fill:not([class*=isDisabled]):hover, .ouiButtonIcon--danger.ouiButtonIcon--fill:not([class*=isDisabled]):focus, .ouiButtonIcon--danger.ouiButtonIcon--fill:not([class*=isDisabled]):focus-within {
background-color: #b03730;
border-color: #b03730;
}
.ouiButtonIcon--danger.ouiButtonIcon--fill:not([class*=isDisabled]):active {
box-shadow: inset 1px 2px 8px rgba(156, 49, 42, 0.4);
}
.ouiButtonIcon--danger:not([class*=isDisabled]):hover, .ouiButtonIcon--danger:not([class*=isDisabled]):focus, .ouiButtonIcon--danger:not([class*=isDisabled]):focus-within {
box-shadow: 0 4px 8px 0 rgba(125, 125, 125, 0.15), 0 2px 2px -1px rgba(125, 125, 125, 0.3);
background-color: rgba(196, 61, 53, 0.1);
}
.ouiButtonIcon--danger:not([class*=isDisabled]):active {
box-shadow: inset 1px 2px 8px rgba(196, 61, 53, 0.15);
}
.ouiButtonIcon--subdued {
color: #686c75;
border-color: #686c75;
}
.ouiButtonIcon--subdued.ouiButtonIcon--fill {
background-color: #686c75;
border-color: #686c75;
color: #FCFEFF;
}
.ouiButtonIcon--subdued.ouiButtonIcon--fill:not([class*=isDisabled]):hover, .ouiButtonIcon--subdued.ouiButtonIcon--fill:not([class*=isDisabled]):focus, .ouiButtonIcon--subdued.ouiButtonIcon--fill:not([class*=isDisabled]):focus-within {
background-color: #5c6068;
border-color: #5c6068;
}
.ouiButtonIcon--subdued.ouiButtonIcon--fill:not([class*=isDisabled]):active {
box-shadow: inset 1px 2px 8px rgba(80, 83, 90, 0.4);
}
.ouiButtonIcon--subdued:not([class*=isDisabled]):hover, .ouiButtonIcon--subdued:not([class*=isDisabled]):focus, .ouiButtonIcon--subdued:not([class*=isDisabled]):focus-within {
box-shadow: 0 4px 8px 0 rgba(111, 111, 111, 0.15), 0 2px 2px -1px rgba(111, 111, 111, 0.3);
background-color: rgba(104, 108, 117, 0.1);
}
.ouiButtonIcon--subdued:not([class*=isDisabled]):active {
box-shadow: inset 1px 2px 8px rgba(104, 108, 117, 0.15);
}
.ouiButtonIcon--ghost {
color: #FCFEFF;
border-color: #FCFEFF;
}
.ouiButtonIcon--ghost.ouiButtonIcon--fill {
background-color: #FCFEFF;
border-color: #FCFEFF;
color: #02020E;
}
.ouiButtonIcon--ghost.ouiButtonIcon--fill:not([class*=isDisabled]):hover, .ouiButtonIcon--ghost.ouiButtonIcon--fill:not([class*=isDisabled]):focus, .ouiButtonIcon--ghost.ouiButtonIcon--fill:not([class*=isDisabled]):focus-within {
background-color: #e3f6ff;
border-color: #e3f6ff;
}
.ouiButtonIcon--ghost.ouiButtonIcon--fill:not([class*=isDisabled]):active {
box-shadow: inset 1px 2px 8px rgba(201, 237, 255, 0.4);
}
.ouiButtonIcon--ghost:not([class*=isDisabled]):hover, .ouiButtonIcon--ghost:not([class*=isDisabled]):focus, .ouiButtonIcon--ghost:not([class*=isDisabled]):focus-within {
box-shadow: 0 4px 8px 0 rgba(2, 2, 14, 0.15), 0 2px 2px -1px rgba(2, 2, 14, 0.3);
background-color: rgba(252, 254, 255, 0.1);
}
.ouiButtonIcon--ghost:not([class*=isDisabled]):active {
box-shadow: inset 1px 2px 8px rgba(252, 254, 255, 0.15);
}
.ouiButtonIcon--text {
color: #2A3947;
border-color: #5A6875;
}
.ouiButtonIcon--text.ouiButtonIcon--fill {
background-color: #5A6875;
border-color: #5A6875;
color: #FCFEFF;
}
.ouiButtonIcon--text.ouiButtonIcon--fill:not([class*=isDisabled]):hover, .ouiButtonIcon--text.ouiButtonIcon--fill:not([class*=isDisabled]):focus, .ouiButtonIcon--text.ouiButtonIcon--fill:not([class*=isDisabled]):focus-within {
background-color: #4f5b67;
border-color: #4f5b67;
}
.ouiButtonIcon--text.ouiButtonIcon--fill:not([class*=isDisabled]):active {
box-shadow: inset 1px 2px 8px rgba(68, 78, 88, 0.4);
}
.ouiButtonIcon--text:not([class*=isDisabled]):hover, .ouiButtonIcon--text:not([class*=isDisabled]):focus, .ouiButtonIcon--text:not([class*=isDisabled]):focus-within {
box-shadow: 0 4px 8px 0 rgba(104, 104, 104, 0.15), 0 2px 2px -1px rgba(104, 104, 104, 0.3);
background-color: rgba(90, 104, 117, 0.1);
}
.ouiButtonIcon--text:not([class*=isDisabled]):active {
box-shadow: inset 1px 2px 8px rgba(90, 104, 117, 0.15);
}
.ouiButtonIcon.ouiButtonIcon-isDisabled.ouiButtonIcon--ghost {
color: #5A6875;
border-color: #5A6875;
}
.ouiButtonIcon.ouiButtonIcon-isDisabled.ouiButtonIcon--ghost:hover, .ouiButtonIcon.ouiButtonIcon-isDisabled.ouiButtonIcon--ghost:focus, .ouiButtonIcon.ouiButtonIcon-isDisabled.ouiButtonIcon--ghost:focus-within {
box-shadow: 0 2px 2px -1px rgba(2, 2, 14, 0.3);
color: #5A6875;
border-color: #5A6875;
}
.ouiButtonIcon.ouiButtonIcon-isDisabled.ouiButtonIcon--ghost.ouiButton--fill {
background-color: #5A6875;
color: #919ba4;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiButtonGroup {
display: inline-block;
max-width: 100%;
position: relative;
}
.ouiButtonGroup--fullWidth {
display: block;
}
.ouiButtonGroup--fullWidth .ouiButtonGroup__buttons {
width: 100%;
}
.ouiButtonGroup--fullWidth .ouiButtonGroup__buttons .ouiButtonGroupButton {
-webkit-flex: 1;
flex: 1;
}
.ouiButtonGroup__buttons {
border-radius: 5px;
max-width: 100%;
display: -webkit-flex;
display: flex;
overflow: hidden;
}
.ouiButtonGroup--isDisabled .ouiButtonGroup__buttons {
box-shadow: none;
}
.ouiButtonGroup--compressed .ouiButtonGroup__buttons {
box-shadow: none !important;
border-radius: 2px;
background-color: #f2f4f6;
height: 32px;
border: 1px solid rgba(18, 38, 126, 0.1);
overflow: visible;
}
.ouiButtonGroup--vertical .ouiButtonGroup__buttons {
height: auto;
-webkit-flex-direction: column;
flex-direction: column;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiButtonGroupButton {
display: inline-block;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
height: 40px;
line-height: 40px;
text-align: center;
white-space: nowrap;
max-width: 100%;
vertical-align: middle;
font-family: var(--oui-font-family);
font-weight: 400;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-font-kerning: normal;
font-kerning: normal;
font-size: 14px;
font-size: 1rem;
line-height: 1.5;
transition: background-color 250ms ease-in-out, border-color 250ms ease-in-out, color 250ms ease-in-out;
min-width: 0;
-webkit-flex-shrink: 1;
flex-shrink: 1;
-webkit-flex-grow: 0;
flex-grow: 0;
}
.ouiButtonGroupButton .ouiButton__content {
padding: 0 12px;
}
.ouiButtonGroupButton-isIconOnly .ouiButton__content {
padding: 0 8px;
}
.ouiButtonGroupButton .ouiButton__text {
text-overflow: ellipsis;
overflow: hidden;
}
.ouiButtonGroupButton.ouiButtonGroupButton--small {
height: 32px;
line-height: 32px;
}
.ouiButtonGroupButton:not([class*=isDisabled]):hover, .ouiButtonGroupButton:not([class*=isDisabled]):focus, .ouiButtonGroupButton:not([class*=isDisabled]):focus-within {
background-color: rgba(2, 104, 188, 0.1);
text-decoration: underline;
}
.ouiButtonGroupButton.ouiButtonGroupButton-isDisabled {
pointer-events: auto;
cursor: not-allowed;
color: #a3a7ae;
}
.ouiButtonGroupButton.ouiButtonGroupButton-isDisabled .ouiButtonContent__icon {
fill: currentColor;
}
.ouiButtonGroupButton.ouiButtonGroupButton-isDisabled .ouiButtonContent__spinner {
border-color: #0268BC currentColor currentColor currentColor;
}
.ouiButtonGroupButton.ouiButtonGroupButton-isDisabled.ouiButtonGroupButton-isSelected {
color: #7e828a;
background-color: #bdc3c8;
border-color: #bdc3c8;
}
.ouiButtonGroupButton.ouiButtonGroupButton-isDisabled.ouiButtonGroupButton-isSelected:hover, .ouiButtonGroupButton.ouiButtonGroupButton-isDisabled.ouiButtonGroupButton-isSelected:focus, .ouiButtonGroupButton.ouiButtonGroupButton-isDisabled.ouiButtonGroupButton-isSelected:focus-within {
background-color: #bdc3c8;
border-color: #bdc3c8;
}
.ouiButtonGroupButton.ouiButtonGroupButton--primary:not([class*=isDisabled]) {
color: #0268BC;
}
.ouiButtonGroupButton.ouiButtonGroupButton--primary:not([class*=isDisabled]).ouiButtonGroupButton-isSelected {
background-color: #0268BC;
border-color: #0268BC;
color: #FCFEFF;
}
.ouiButtonGroupButton.ouiButtonGroupButton--primary:not([class*=isDisabled]).ouiButtonGroupButton-isSelected:hover, .ouiButtonGroupButton.ouiButtonGroupButton--primary:not([class*=isDisabled]).ouiButtonGroupButton-isSelected:focus, .ouiButtonGroupButton.ouiButtonGroupButton--primary:not([class*=isDisabled]).ouiButtonGroupButton-isSelected:focus-within {
background-color: #025aa3;
border-color: #025aa3;
}
.ouiButtonGroupButton.ouiButtonGroupButton--primary:not([class*=isDisabled]):hover, .ouiButtonGroupButton.ouiButtonGroupButton--primary:not([class*=isDisabled]):focus, .ouiButtonGroupButton.ouiButtonGroupButton--primary:not([class*=isDisabled]):focus-within {
background-color: rgba(2, 104, 188, 0.1);
}
.ouiButtonGroupButton.ouiButtonGroupButton--accent:not([class*=isDisabled]) {
color: #9C47BF;
}
.ouiButtonGroupButton.ouiButtonGroupButton--accent:not([class*=isDisabled]).ouiButtonGroupButton-isSelected {
background-color: #9C47BF;
border-color: #9C47BF;
color: #FCFEFF;
}
.ouiButtonGroupButton.ouiButtonGroupButton--accent:not([class*=isDisabled]).ouiButtonGroupButton-isSelected:hover, .ouiButtonGroupButton.ouiButtonGroupButton--accent:not([class*=isDisabled]).ouiButtonGroupButton-isSelected:focus, .ouiButtonGroupButton.ouiButtonGroupButton--accent:not([class*=isDisabled]).ouiButtonGroupButton-isSelected:focus-within {
background-color: #8e3daf;
border-color: #8e3daf;
}
.ouiButtonGroupButton.ouiButtonGroupButton--accent:not([class*=isDisabled]):hover, .ouiButtonGroupButton.ouiButtonGroupButton--accent:not([class*=isDisabled]):focus, .ouiButtonGroupButton.ouiButtonGroupButton--accent:not([class*=isDisabled]):focus-within {
background-color: rgba(156, 71, 191, 0.1);
}
.ouiButtonGroupButton.ouiButtonGroupButton--secondary:not([class*=isDisabled]) {
color: #0F7B68;
}
.ouiButtonGroupButton.ouiButtonGroupButton--secondary:not([class*=isDisabled]).ouiButtonGroupButton-isSelected {
background-color: #0F7B68;
border-color: #0F7B68;
color: #FCFEFF;
}
.ouiButtonGroupButton.ouiButtonGroupButton--secondary:not([class*=isDisabled]).ouiButtonGroupButton-isSelected:hover, .ouiButtonGroupButton.ouiButtonGroupButton--secondary:not([class*=isDisabled]).ouiButtonGroupButton-isSelected:focus, .ouiButtonGroupButton.ouiButtonGroupButton--secondary:not([class*=isDisabled]).ouiButtonGroupButton-isSelected:focus-within {
background-color: #0c6455;
border-color: #0c6455;
}
.ouiButtonGroupButton.ouiButtonGroupButton--secondary:not([class*=isDisabled]):hover, .ouiButtonGroupButton.ouiButtonGroupButton--secondary:not([class*=isDisabled]):focus, .ouiButtonGroupButton.ouiButtonGroupButton--secondary:not([class*=isDisabled]):focus-within {
background-color: rgba(15, 123, 104, 0.1);
}
.ouiButtonGroupButton.ouiButtonGroupButton--success:not([class*=isDisabled]) {
color: #0F7B68;
}
.ouiButtonGroupButton.ouiButtonGroupButton--success:not([class*=isDisabled]).ouiButtonGroupButton-isSelected {
background-color: #0F7B68;
border-color: #0F7B68;
color: #FCFEFF;
}
.ouiButtonGroupButton.ouiButtonGroupButton--success:not([class*=isDisabled]).ouiButtonGroupButton-isSelected:hover, .ouiButtonGroupButton.ouiButtonGroupButton--success:not([class*=isDisabled]).ouiButtonGroupButton-isSelected:focus, .ouiButtonGroupButton.ouiButtonGroupButton--success:not([class*=isDisabled]).ouiButtonGroupButton-isSelected:focus-within {
background-color: #0c6455;
border-color: #0c6455;
}
.ouiButtonGroupButton.ouiButtonGroupButton--success:not([class*=isDisabled]):hover, .ouiButtonGroupButton.ouiButtonGroupButton--success:not([class*=isDisabled]):focus, .ouiButtonGroupButton.ouiButtonGroupButton--success:not([class*=isDisabled]):focus-within {
background-color: rgba(15, 123, 104, 0.1);
}
.ouiButtonGroupButton.ouiButtonGroupButton--warning:not([class*=isDisabled]) {
color: #8e6625;
}
.ouiButtonGroupButton.ouiButtonGroupButton--warning:not([class*=isDisabled]).ouiButtonGroupButton-isSelected {
background-color: #E0A130;
border-color: #E0A130;
color: #02020E;
}
.ouiButtonGroupButton.ouiButtonGroupButton--warning:not([class*=isDisabled]).ouiButtonGroupButton-isSelected:hover, .ouiButtonGroupButton.ouiButtonGroupButton--warning:not([class*=isDisabled]).ouiButtonGroupButton-isSelected:focus, .ouiButtonGroupButton.ouiButtonGroupButton--warning:not([class*=isDisabled]).ouiButtonGroupButton-isSelected:focus-within {
background-color: #d69520;
border-color: #d69520;
}
.ouiButtonGroupButton.ouiButtonGroupButton--warning:not([class*=isDisabled]):hover, .ouiButtonGroupButton.ouiButtonGroupButton--warning:not([class*=isDisabled]):focus, .ouiButtonGroupButton.ouiButtonGroupButton--warning:not([class*=isDisabled]):focus-within {
background-color: rgba(224, 161, 48, 0.1);
}
.ouiButtonGroupButton.ouiButtonGroupButton--danger:not([class*=isDisabled]) {
color: #C43D35;
}
.ouiButtonGroupButton.ouiButtonGroupButton--danger:not([class*=isDisabled]).ouiButtonGroupButton-isSelected {
background-color: #C43D35;
border-color: #C43D35;
color: #FCFEFF;
}
.ouiButtonGroupButton.ouiButtonGroupButton--danger:not([class*=isDisabled]).ouiButtonGroupButton-isSelected:hover, .ouiButtonGroupButton.ouiButtonGroupButton--danger:not([class*=isDisabled]).ouiButtonGroupButton-isSelected:focus, .ouiButtonGroupButton.ouiButtonGroupButton--danger:not([class*=isDisabled]).ouiButtonGroupButton-isSelected:focus-within {
background-color: #b03730;
border-color: #b03730;
}
.ouiButtonGroupButton.ouiButtonGroupButton--danger:not([class*=isDisabled]):hover, .ouiButtonGroupButton.ouiButtonGroupButton--danger:not([class*=isDisabled]):focus, .ouiButtonGroupButton.ouiButtonGroupButton--danger:not([class*=isDisabled]):focus-within {
background-color: rgba(196, 61, 53, 0.1);
}
.ouiButtonGroupButton.ouiButtonGroupButton--subdued:not([class*=isDisabled]) {
color: #686c75;
}
.ouiButtonGroupButton.ouiButtonGroupButton--subdued:not([class*=isDisabled]).ouiButtonGroupButton-isSelected {
background-color: #686c75;
border-color: #686c75;
color: #FCFEFF;
}
.ouiButtonGroupButton.ouiButtonGroupButton--subdued:not([class*=isDisabled]).ouiButtonGroupButton-isSelected:hover, .ouiButtonGroupButton.ouiButtonGroupButton--subdued:not([class*=isDisabled]).ouiButtonGroupButton-isSelected:focus, .ouiButtonGroupButton.ouiButtonGroupButton--subdued:not([class*=isDisabled]).ouiButtonGroupButton-isSelected:focus-within {
background-color: #5c6068;
border-color: #5c6068;
}
.ouiButtonGroupButton.ouiButtonGroupButton--subdued:not([class*=isDisabled]):hover, .ouiButtonGroupButton.ouiButtonGroupButton--subdued:not([class*=isDisabled]):focus, .ouiButtonGroupButton.ouiButtonGroupButton--subdued:not([class*=isDisabled]):focus-within {
background-color: rgba(104, 108, 117, 0.1);
}
.ouiButtonGroupButton.ouiButtonGroupButton--ghost:not([class*=isDisabled]) {
color: #FCFEFF;
}
.ouiButtonGroupButton.ouiButtonGroupButton--ghost:not([class*=isDisabled]).ouiButtonGroupButton-isSelected {
background-color: #FCFEFF;
border-color: #FCFEFF;
color: #02020E;
}
.ouiButtonGroupButton.ouiButtonGroupButton--ghost:not([class*=isDisabled]).ouiButtonGroupButton-isSelected:hover, .ouiButtonGroupButton.ouiButtonGroupButton--ghost:not([class*=isDisabled]).ouiButtonGroupButton-isSelected:focus, .ouiButtonGroupButton.ouiButtonGroupButton--ghost:not([class*=isDisabled]).ouiButtonGroupButton-isSelected:focus-within {
background-color: #e3f6ff;
border-color: #e3f6ff;
}
.ouiButtonGroupButton.ouiButtonGroupButton--ghost:not([class*=isDisabled]):hover, .ouiButtonGroupButton.ouiButtonGroupButton--ghost:not([class*=isDisabled]):focus, .ouiButtonGroupButton.ouiButtonGroupButton--ghost:not([class*=isDisabled]):focus-within {
background-color: rgba(252, 254, 255, 0.1);
}
.ouiButtonGroupButton.ouiButtonGroupButton--text:not([class*=isDisabled]) {
color: #2A3947;
}
.ouiButtonGroupButton.ouiButtonGroupButton--text:not([class*=isDisabled]).ouiButtonGroupButton-isSelected {
background-color: #5A6875;
border-color: #5A6875;
color: #FCFEFF;
}
.ouiButtonGroupButton.ouiButtonGroupButton--text:not([class*=isDisabled]).ouiButtonGroupButton-isSelected:hover, .ouiButtonGroupButton.ouiButtonGroupButton--text:not([class*=isDisabled]).ouiButtonGroupButton-isSelected:focus, .ouiButtonGroupButton.ouiButtonGroupButton--text:not([class*=isDisabled]).ouiButtonGroupButton-isSelected:focus-within {
background-color: #4f5b67;
border-color: #4f5b67;
}
.ouiButtonGroupButton.ouiButtonGroupButton--text:not([class*=isDisabled]):hover, .ouiButtonGroupButton.ouiButtonGroupButton--text:not([class*=isDisabled]):focus, .ouiButtonGroupButton.ouiButtonGroupButton--text:not([class*=isDisabled]):focus-within {
background-color: rgba(90, 104, 117, 0.1);
}
.ouiButtonGroupButton__textShift::after {
display: block;
content: attr(data-text);
font-weight: 500;
height: 0;
overflow: hidden;
visibility: hidden;
}
/**
* Medium and Small sizing (regular button style)
*/
.ouiButtonGroup--medium .ouiButtonGroupButton,
.ouiButtonGroup--small .ouiButtonGroupButton {
border: 1px solid #D6D9DD;
}
.ouiButtonGroup--medium:not(.ouiButtonGroup--vertical) .ouiButtonGroupButton:not(:first-child),
.ouiButtonGroup--small:not(.ouiButtonGroup--vertical) .ouiButtonGroupButton:not(:first-child) {
margin-left: -1px;
}
.ouiButtonGroup--medium:not(.ouiButtonGroup--vertical) .ouiButtonGroupButton:first-child,
.ouiButtonGroup--small:not(.ouiButtonGroup--vertical) .ouiButtonGroupButton:first-child {
border-radius: 4px 0 0 4px;
}
.ouiButtonGroup--medium:not(.ouiButtonGroup--vertical) .ouiButtonGroupButton:last-child,
.ouiButtonGroup--small:not(.ouiButtonGroup--vertical) .ouiButtonGroupButton:last-child {
border-radius: 0 4px 4px 0;
}
.ouiButtonGroup--medium.ouiButtonGroup--vertical .ouiButtonGroupButton:not(:first-child),
.ouiButtonGroup--small.ouiButtonGroup--vertical .ouiButtonGroupButton:not(:first-child) {
margin-top: -1px;
}
.ouiButtonGroup--medium.ouiButtonGroup--vertical .ouiButtonGroupButton:first-child,
.ouiButtonGroup--small.ouiButtonGroup--vertical .ouiButtonGroupButton:first-child {
border-radius: 4px 4px 0 0;
}
.ouiButtonGroup--medium.ouiButtonGroup--vertical .ouiButtonGroupButton:last-child,
.ouiButtonGroup--small.ouiButtonGroup--vertical .ouiButtonGroupButton:last-child {
border-radius: 0 0 4px 4px;
}
.ouiButtonGroup--medium .ouiButtonGroupButton.ouiButtonGroupButton-isDisabled.ouiButtonGroupButton--ghost, .ouiButtonGroup--medium .ouiButtonGroupButton.ouiButtonGroupButton-isDisabled.ouiButtonGroupButton--ghost:hover, .ouiButtonGroup--medium .ouiButtonGroupButton.ouiButtonGroupButton-isDisabled.ouiButtonGroupButton--ghost:focus, .ouiButtonGroup--medium .ouiButtonGroupButton.ouiButtonGroupButton-isDisabled.ouiButtonGroupButton--ghost:focus-within,
.ouiButtonGroup--small .ouiButtonGroupButton.ouiButtonGroupButton-isDisabled.ouiButtonGroupButton--ghost,
.ouiButtonGroup--small .ouiButtonGroupButton.ouiButtonGroupButton-isDisabled.ouiButtonGroupButton--ghost:hover,
.ouiButtonGroup--small .ouiButtonGroupButton.ouiButtonGroupButton-isDisabled.ouiButtonGroupButton--ghost:focus,
.ouiButtonGroup--small .ouiButtonGroupButton.ouiButtonGroupButton-isDisabled.ouiButtonGroupButton--ghost:focus-within {
color: #5A6875;
}
.ouiButtonGroup--isDisabled .ouiButtonGroup--medium .ouiButtonGroupButton.ouiButtonGroupButton-isDisabled.ouiButtonGroupButton--ghost,
.ouiButtonGroup--isDisabled .ouiButtonGroup--small .ouiButtonGroupButton.ouiButtonGroupButton-isDisabled.ouiButtonGroupButton--ghost {
border-color: #5A6875;
}
.ouiButtonGroup--medium .ouiButtonGroupButton.ouiButtonGroupButton-isDisabled.ouiButtonGroupButton--ghost.ouiButtonGroupButton-isSelected,
.ouiButtonGroup--small .ouiButtonGroupButton.ouiButtonGroupButton-isDisabled.ouiButtonGroupButton--ghost.ouiButtonGroupButton-isSelected {
background-color: #5A6875;
color: #919ba4;
}
.ouiButtonGroup--medium .ouiButtonGroupButton-isSelected,
.ouiButtonGroup--small .ouiButtonGroupButton-isSelected {
z-index: 0;
}
.ouiButtonGroup--medium .ouiButtonGroupButton-isSelected + .ouiButtonGroupButton-isSelected,
.ouiButtonGroup--small .ouiButtonGroupButton-isSelected + .ouiButtonGroupButton-isSelected {
box-shadow: -1px 0 0 rgba(252, 254, 255, 0.1);
}
/**
* Compressed (form style)
*/
.ouiButtonGroup--compressed .ouiButtonGroupButton {
height: 30px;
line-height: 30px;
font-size: 14px;
border-radius: 4px;
padding: 2px;
background-clip: content-box;
}
.ouiButtonGroup--compressed .ouiButtonGroupButton .ouiButton__content {
padding-left: 8px;
padding-right: 8px;
}
.ouiButtonGroup--compressed .ouiButtonGroupButton.ouiButtonGroupButton-isSelected {
font-weight: 500;
}
.ouiButtonGroup--compressed .ouiButtonGroupButton:not([class*=isDisabled]):focus, .ouiButtonGroup--compressed .ouiButtonGroupButton:not([class*=isDisabled]):focus-within {
outline: 2px solid rgba(2, 104, 188, 0.3);
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/**
* 1. Add vertical space between breadcrumbs,
* but make sure the whole breadcrumb set doesn't add space below itself
*/
.ouiBreadcrumbs {
font-size: 14px;
font-size: 1rem;
line-height: 1.5;
margin-bottom: -4px; /* 1 */
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
min-width: 0;
}
.ouiBreadcrumb {
display: inline-block;
color: #5e626b !important;
}
.ouiBreadcrumb:hover {
color: #4f535c !important;
}
.ouiBreadcrumb.ouiLink[class*=ouiLink--]:focus,
.ouiBreadcrumb__collapsedLink.ouiLink[class*=ouiLink--]:focus {
-webkit-animation: none !important;
animation: none !important;
}
.ouiBreadcrumbs:not(.ouiBreadcrumbs__inPopover) .ouiBreadcrumbWrapper--last .ouiBreadcrumb {
font-weight: 500;
}
.ouiBreadcrumb--collapsed {
-webkit-flex-shrink: 0;
flex-shrink: 0;
color: #022a52 !important;
vertical-align: top !important;
}
.ouiBreadcrumb__collapsedLink:hover {
color: #4f535c !important;
}
.ouiBreadcrumbs--truncate {
white-space: nowrap;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.ouiBreadcrumbs--truncate .ouiBreadcrumb:not(.ouiBreadcrumb--collapsed) {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: top;
}
.ouiBreadcrumb--truncate {
max-width: 100%;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
word-wrap: normal !important;
max-width: 100%;
text-align: center;
vertical-align: top;
}
.ouiBreadcrumbWrapper--truncate {
max-width: 160px;
}
.ouiBreadcrumbWrapper {
position: relative;
z-index: 0;
padding: 1.5px 24px 1.5px 20px;
}
.ouiBreadcrumbWrapper::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 4px;
right: 4px;
z-index: -1;
-webkit-transform: skewX(-20deg);
transform: skewX(-20deg);
border-radius: 4px;
background-color: #dbdee2;
}
.ouiBreadcrumbs--truncate .ouiBreadcrumbWrapper:not(.ouiBreadcrumbWrapper--collapsed) {
max-width: 160px;
min-width: calc(3ch + 20px + 24px);
overflow: hidden;
text-overflow: ellipsis;
}
.ouiBreadcrumbs--truncate .ouiBreadcrumbWrapper:not(.ouiBreadcrumbWrapper--collapsed).ouiBreadcrumbWrapper--last {
max-width: none;
}
.ouiBreadcrumbWall:has(.ouiBreadcrumbWrapper:not(.ouiBreadcrumbWrapper--collapsed)) {
min-width: calc(3ch + 20px + 24px);
}
.ouiBreadcrumbs:not(.ouiBreadcrumbs__inPopover) .ouiBreadcrumbWrapper.ouiBreadcrumbWrapper--last .ouiBreadcrumb,
.ouiBreadcrumbs:not(.ouiBreadcrumbs__inPopover) .ouiBreadcrumbWrapper.ouiBreadcrumbWrapper--last .ouiBreadcrumb:hover {
color: inherit !important;
}
.ouiBreadcrumbs:not(.ouiBreadcrumbs__inPopover) .ouiBreadcrumbWrapper.ouiBreadcrumbWrapper--last::before {
background-color: #b6d4ec;
}
.ouiBreadcrumbWrapper:has(.ouiLink--subdued:focus)::before {
background-color: #edeff1;
}
.ouiBreadcrumbWrapper:not(.ouiBreadcrumbWrapper--first) {
margin-bottom: 4px; /* 1 */
padding-left: 24px;
}
.ouiBreadcrumbs--truncate .ouiBreadcrumbWrapper:not(.ouiBreadcrumbWrapper--first):not(.ouiBreadcrumbWrapper--collapsed) {
min-width: calc(3ch + 24px + 24px);
}
.ouiBreadcrumbWall {
background-image: linear-gradient(to right, #dbdee2 0 12px, transparent 12px);
border-radius: 4px;
overflow: hidden;
margin-bottom: 4px; /* 1 */
}
.ouiBreadcrumbWall:has(.ouiLink--subdued:focus) {
background-image: linear-gradient(to right, #edeff1 0 12px, transparent 12px);
}
.ouiBreadcrumbWall--single {
background-image: linear-gradient(to right, #b6d4ec 0 12px, transparent 12px);
}
.euiLink.euiBreadcrumb {
line-height: inherit;
font-weight: inherit;
}
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiSimplifiedBreadcrumbs {
font-size: 14px;
font-size: 1rem;
line-height: 1.5;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
gap: 8px;
min-width: 0;
margin-left: 0;
}
.ouiSimplifiedBreadcrumbs .ouiLink.euiLink--text:focus {
-webkit-animation: none;
animation: none;
background: none;
}
.ouiSimplifiedBreadcrumbs--truncate {
white-space: nowrap;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.ouiSimplifiedBreadcrumbs--truncate .ouiSimplifiedBreadcrumb:not(.ouiSimplifiedBreadcrumb--collapsed) {
width: 100%;
max-width: -webkit-fit-content;
max-width: -moz-fit-content;
max-width: fit-content;
overflow: hidden;
text-overflow: ellipsis;
}
.ouiSimplifiedBreadcrumb {
display: block;
}
.ouiSimplifiedBreadcrumb.ouiLink {
line-height: inherit;
font-weight: inherit;
}
.ouiSimplifiedBreadcrumb.ouiLink[class*=ouiLink--]:focus {
background-color: unset !important;
-webkit-animation: none !important;
animation: none !important;
}
.ouiSimplifiedBreadcrumb--collapsed {
-webkit-flex-shrink: 0;
flex-shrink: 0;
color: #022a52 !important;
vertical-align: top !important;
}
.ouiSimplifiedBreadcrumb--collapsed:hover {
color: #4f535c !important;
}
.ouiSimplifiedBreadcrumb--truncate {
max-width: 100%;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
word-wrap: normal !important;
max-width: 100%;
text-align: center;
vertical-align: top;
}
.ouiBreadcrumbSeparator {
-webkit-flex-shrink: 0;
flex-shrink: 0;
width: 8px;
color: #a3a7ae;
height: 12.000002px;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiCallOut {
padding: 16px;
border-left: 2px solid transparent;
position: relative;
}
.ouiCallOut.ouiCallOut--small {
padding: 8px;
}
.ouiCallOut .ouiCallOutHeader__icon {
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
-webkit-transform: translateY(2px);
transform: translateY(2px);
}
.ouiCallOut .ouiCallOutHeader__title {
color: #161e2b;
font-size: 16.0006px;
font-size: 1.1429rem;
line-height: 1.35715rem;
font-weight: 500;
font-weight: 400;
margin-bottom: 0;
}
.ouiCallOut .ouiCallOut__closeIcon {
position: absolute;
right: 4px;
top: 0;
}
.ouiCallOut--small .ouiCallOutHeader__title {
color: #161e2b;
font-size: 14px;
font-size: 1rem;
line-height: 1.2143rem;
font-weight: 500;
font-weight: 400;
}
.ouiCallOut--primary {
border-color: #0268BC;
background-color: #e3eff8;
}
.ouiCallOut--primary .ouiCallOutHeader__icon {
fill: #0268bc;
}
.ouiCallOut--primary .ouiCallOutHeader__title {
color: #0268bc;
}
.ouiCallOut--primary .ouiCallOut__closeIcon {
fill: #0268bc;
}
.ouiCallOut--success {
border-color: #0F7B68;
background-color: #e4f1f0;
}
.ouiCallOut--success .ouiCallOutHeader__icon {
fill: #0e7564;
}
.ouiCallOut--success .ouiCallOutHeader__title {
color: #0e7564;
}
.ouiCallOut--success .ouiCallOut__closeIcon {
fill: #0e7564;
}
.ouiCallOut--warning {
border-color: #E0A130;
background-color: #f9f5ea;
}
.ouiCallOut--warning .ouiCallOutHeader__icon {
fill: #8e6625;
}
.ouiCallOut--warning .ouiCallOutHeader__title {
color: #8e6625;
}
.ouiCallOut--warning .ouiCallOut__closeIcon {
fill: #8e6625;
}
.ouiCallOut--danger {
border-color: #C43D35;
background-color: #f6ebeb;
}
.ouiCallOut--danger .ouiCallOutHeader__icon {
fill: #ba3a33;
}
.ouiCallOut--danger .ouiCallOutHeader__title {
color: #ba3a33;
}
.ouiCallOut--danger .ouiCallOut__closeIcon {
fill: #ba3a33;
}
/**
* 1. Align icon with first line of title text if it wraps.
* 2. If content exists under the header, space it appropriately.
* 3. Apply margin to all but last item in the flex.
*/
.ouiCallOutHeader {
display: -webkit-flex;
display: flex;
-webkit-align-items: baseline;
align-items: baseline; /* 1 */
}
.ouiCallOutHeader + * {
margin-top: 8px; /* 1 */
}
.ouiCallOutHeader > * + * {
margin-left: 8px; /* 3 */
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/**
* 1. Footer is always at the bottom.
* 2. Fix for IE where the image correctly resizes in width but doesn't collapse its height
(https://github.com/philipwalton/flexbugs/issues/75#issuecomment-134702421)
* 3. Horizontal layouts should always top left align no matter the textAlign prop
*/
.ouiCard {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
min-height: 1px; /* 2 */
}
.ouiCard.ouiCard-isDisabled {
cursor: not-allowed !important;
-webkit-transform: none !important;
transform: none !important;
box-shadow: none !important;
text-decoration: none !important;
background-color: rgba(189, 195, 200, 0.1) !important;
color: #a3a7ae;
}
.ouiCard.ouiCard-isDisabled .ouiCard__top {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.ouiCard.ouiCard-isDisabled .ouiCard__titleAnchor,
.ouiCard.ouiCard-isDisabled .ouiCard__titleButton {
color: #a3a7ae;
cursor: inherit;
}
.ouiCard.ouiCard-isDisabled .ouiCard__betaBadge:not(.ouiBetaBadge-isClickable):not(.ouiBetaBadge--hollow) {
box-shadow: inset 0 0 0 1px #D6D9DD;
background: transparent;
color: inherit;
}
.ouiCard.ouiCard-isDisabled .ouiCard__betaBadge:not(.ouiBetaBadge-isClickable).ouiBetaBadge--hollow {
background-color: #FCFEFF;
}
.ouiCard.ouiCard--isClickable {
display: -webkit-flex;
display: flex;
width: 100%;
}
.ouiCard.ouiCard--isClickable:not(.ouiCard-isDisabled):focus-within {
box-shadow: 0 4px 8px 0 rgba(173, 180, 186, 0.15), 0 2px 2px -1px rgba(173, 180, 186, 0.3);
-webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimateLarge !important;
animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimateLarge !important;
}
.ouiCard.ouiCard--isClickable:not(.ouiCard-isDisabled):focus .ouiCard__title,
.ouiCard.ouiCard--isClickable:not(.ouiCard-isDisabled):focus .ouiCard__titleAnchor,
.ouiCard.ouiCard--isClickable:not(.ouiCard-isDisabled):focus .ouiCard__titleButton, .ouiCard.ouiCard--isClickable:not(.ouiCard-isDisabled):hover .ouiCard__title,
.ouiCard.ouiCard--isClickable:not(.ouiCard-isDisabled):hover .ouiCard__titleAnchor,
.ouiCard.ouiCard--isClickable:not(.ouiCard-isDisabled):hover .ouiCard__titleButton {
text-decoration: underline;
}
.ouiCard .ouiCard__top,
.ouiCard .ouiCard__content,
.ouiCard .ouiCard__footer {
width: 100%;
}
.ouiCard.ouiCard--leftAligned {
text-align: left;
-webkit-align-items: flex-start;
align-items: flex-start;
}
.ouiCard.ouiCard--leftAligned .ouiCard__titleButton {
text-align: left;
}
.ouiCard.ouiCard--centerAligned {
text-align: center;
-webkit-align-items: center;
align-items: center;
}
.ouiCard.ouiCard--rightAligned {
text-align: right;
-webkit-align-items: flex-end;
align-items: flex-end;
}
.ouiCard.ouiCard--rightAligned .ouiCard__titleButton {
text-align: right;
}
.ouiCard.ouiCard-isSelected {
transition: all 150ms cubic-bezier(0.694, 0.0482, 0.335, 1);
}
.ouiCard--hasBetaBadge {
position: relative;
overflow: visible;
}
.ouiCard--hasBetaBadge .ouiCard__betaBadgeWrapper {
position: absolute;
top: -12px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
z-index: 3;
min-width: 30%;
max-width: calc(100% - 32px);
}
.ouiCard--hasBetaBadge .ouiCard__betaBadgeWrapper .ouiToolTipAnchor,
.ouiCard--hasBetaBadge .ouiCard__betaBadgeWrapper .ouiCard__betaBadge {
width: 100%;
}
.ouiCard--hasBetaBadge .ouiCard__betaBadgeWrapper .ouiCard__betaBadge {
overflow: hidden;
text-overflow: ellipsis;
}
.ouiCard__betaBadge.ouiBetaBadge--hollow {
background-color: #FCFEFF;
}
.ouiCard--isSelectable {
position: relative;
}
.ouiCard[class*=paddingSmall] {
padding: 8px;
}
.ouiCard[class*=paddingSmall].ouiCard--isSelectable {
padding-bottom: 48px;
}
.ouiCard[class*=paddingSmall] .ouiCard__top .ouiCard__image {
width: calc(100% + (8px * 2));
left: -8px;
top: -8px;
margin-bottom: -8px;
}
.ouiCard[class*=paddingSmall] .ouiCard__top .ouiCard__image + .ouiCard__icon {
-webkit-transform: translate(-50%, -75%);
transform: translate(-50%, -75%);
-webkit-transform: translate(-50%, calc(-50% + -8px));
transform: translate(-50%, calc(-50% + -8px));
}
.ouiCard[class*=paddingMedium] {
padding: 16px;
}
.ouiCard[class*=paddingMedium].ouiCard--isSelectable {
padding-bottom: 56px;
}
.ouiCard[class*=paddingMedium] .ouiCard__top .ouiCard__image {
width: calc(100% + (16px * 2));
left: -16px;
top: -16px;
margin-bottom: -16px;
}
.ouiCard[class*=paddingMedium] .ouiCard__top .ouiCard__image + .ouiCard__icon {
-webkit-transform: translate(-50%, -75%);
transform: translate(-50%, -75%);
-webkit-transform: translate(-50%, calc(-50% + -16px));
transform: translate(-50%, calc(-50% + -16px));
}
.ouiCard[class*=paddingLarge] {
padding: 24px;
}
.ouiCard[class*=paddingLarge].ouiCard--isSelectable {
padding-bottom: 64px;
}
.ouiCard[class*=paddingLarge] .ouiCard__top .ouiCard__image {
width: calc(100% + (24px * 2));
left: -24px;
top: -24px;
margin-bottom: -24px;
}
.ouiCard[class*=paddingLarge] .ouiCard__top .ouiCard__image + .ouiCard__icon {
-webkit-transform: translate(-50%, -75%);
transform: translate(-50%, -75%);
-webkit-transform: translate(-50%, calc(-50% + -24px));
transform: translate(-50%, calc(-50% + -24px));
}
.ouiCard__top {
-webkit-flex-grow: 0;
flex-grow: 0; /* 1 */
position: relative;
min-height: 1px; /* 2 */
font-size: 0;
}
.ouiCard__top .ouiCard__image {
position: relative;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
overflow: hidden;
}
.ouiCard__top .ouiCard__image img {
width: 100%;
}
.ouiCard__top .ouiCard__image + .ouiCard__icon {
position: absolute;
top: 50%;
left: 50%;
}
.ouiCard__top .ouiCard__icon {
margin-top: 8px;
}
.ouiCard__footer:not(:empty) {
-webkit-flex-grow: 0;
flex-grow: 0; /* 1 */
margin-top: 16px;
}
.ouiCard[class*=transparent] .ouiCard__image {
border-radius: 4px;
}
.ouiCard--isSelectable--text.ouiCard-isSelected:not(.ouiCard-isDisabled) {
border-color: #0F7B68 !important;
}
.ouiCard--isSelectable--primary.ouiCard-isSelected:not(.ouiCard-isDisabled) {
border-color: #0268BC !important;
}
.ouiCard--isSelectable--success.ouiCard-isSelected:not(.ouiCard-isDisabled) {
border-color: #0F7B68 !important;
}
.ouiCard--isSelectable--danger.ouiCard-isSelected:not(.ouiCard-isDisabled) {
border-color: #C43D35 !important;
}
.ouiCard--isSelectable--ghost.ouiCard-isSelected:not(.ouiCard-isDisabled) {
border-color: #5A6875 !important;
}
.ouiCard__top + .ouiCard__content {
margin-top: 16px;
}
.ouiCard__content {
-webkit-flex-grow: 1;
flex-grow: 1; /* 1 */
}
.ouiCard__content .ouiCard__description,
.ouiCard__content .ouiCard__children {
margin-top: 8px;
}
.ouiCard__content .ouiCard__titleAnchor,
.ouiCard__content .ouiCard__titleButton {
font: inherit;
color: inherit;
letter-spacing: inherit;
}
.ouiCard__content .ouiCard__titleAnchor:focus,
.ouiCard__content .ouiCard__titleButton:focus {
text-decoration: underline;
}
.ouiCard.ouiCard--horizontal .ouiCard__content,
.ouiCard.ouiCard--horizontal .ouiCard__titleButton {
text-align: left; /* 3 */
}
.ouiCard.ouiCard--horizontal.ouiCard--hasIcon {
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: flex-start !important;
align-items: flex-start !important; /* 3 */
}
.ouiCard.ouiCard--horizontal.ouiCard--hasIcon .ouiCard__top,
.ouiCard.ouiCard--horizontal.ouiCard--hasIcon .ouiCard__content {
width: auto;
margin-top: 0;
}
.ouiCard.ouiCard--horizontal.ouiCard--hasIcon .ouiCard__top .ouiCard__icon {
margin-top: 0;
margin-right: 16px;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiCardSelect {
position: absolute;
bottom: 0;
left: 0;
height: 40px !important;
width: 100%;
overflow: hidden;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
font-weight: 500;
}
.ouiCardSelect--text:enabled {
background-color: #E3E5E8;
}
.ouiCardSelect--primary:enabled {
background-color: #e3eff8;
}
.ouiCardSelect--success:enabled {
background-color: #e4f1f0;
color: #0e7564;
}
.ouiCardSelect--danger:enabled {
background-color: #f6ebeb;
}
.ouiCardSelect--ghost:enabled {
background-color: #5A6875;
}
.ouiCardSelect:disabled {
background-color: #F0F2F4;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiCheckableCard {
transition: border-color 250ms ease-in;
}
.ouiCheckableCard:not(.ouiCheckableCard-isDisabled).ouiCheckableCard-isChecked {
border-color: #0268BC;
}
.ouiCheckableCard__label {
cursor: pointer;
display: block;
width: calc(100% + 32px);
padding: 16px;
margin: -16px;
}
.ouiCheckableCard__label-isDisabled {
color: #ADB4BA;
cursor: not-allowed;
}
.ouiCheckableCard__children {
margin-top: 16px;
}
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiCodeBlock {
max-width: 100%;
display: block;
position: relative;
background: #E3E5E8;
color: #2A3947;
/*
* 1. Size the code against the text its embedded within.
*/
}
.ouiCodeBlock .ouiCodeBlock__pre {
scrollbar-width: thin;
height: 100%;
overflow: auto;
display: block;
}
.ouiCodeBlock .ouiCodeBlock__pre::-webkit-scrollbar {
width: 16px;
height: 16px;
}
.ouiCodeBlock .ouiCodeBlock__pre::-webkit-scrollbar-thumb {
background-color: rgba(90, 104, 117, 0.5);
border: 6px solid transparent;
background-clip: content-box;
}
.ouiCodeBlock .ouiCodeBlock__pre::-webkit-scrollbar-corner, .ouiCodeBlock .ouiCodeBlock__pre::-webkit-scrollbar-track {
background-color: transparent;
}
.ouiCodeBlock .ouiCodeBlock__pre--whiteSpacePre {
white-space: pre;
}
.ouiCodeBlock .ouiCodeBlock__pre--whiteSpacePreWrap {
white-space: pre-wrap;
}
.ouiCodeBlock .ouiCodeBlock__code {
font-family: var(--oui-code-font-family);
letter-spacing: normal;
line-height: 1.5;
display: block;
line-height: 1.5;
font-weight: 400;
font-size: inherit;
}
.ouiCodeBlock .ouiCodeBlock__controls {
position: absolute;
top: 0;
right: 0;
}
.ouiCodeBlock .ouiCodeBlock__fullScreenButton + .ouiCodeBlock__copyButton {
margin-top: 4px;
}
.ouiCodeBlock .ouiCodeBlock__line {
display: block;
}
.ouiCodeBlock.ouiCodeBlock-isFullScreen {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.ouiCodeBlock.ouiCodeBlock-isFullScreen .ouiCodeBlock__pre {
padding: 32px !important;
}
.ouiCodeBlock.ouiCodeBlock-isFullScreen .ouiCodeBlock__controls {
top: 4px;
right: 4px;
}
.ouiCodeBlock.ouiCodeBlock--fontSmall {
font-size: 12.000002px;
}
.ouiCodeBlock.ouiCodeBlock--fontMedium {
font-size: 14px;
}
.ouiCodeBlock.ouiCodeBlock--fontLarge {
font-size: 14px;
}
.ouiCodeBlock.ouiCodeBlock--hasControls .ouiCodeBlock__pre--whiteSpacePreWrap {
padding-right: 28px;
}
.ouiCodeBlock.ouiCodeBlock--hasControls .ouiCodeBlock__pre--whiteSpacePre {
margin-right: 28px;
}
.ouiCodeBlock.ouiCodeBlock--paddingSmall .ouiCodeBlock__pre {
padding: 8px;
}
.ouiCodeBlock.ouiCodeBlock--paddingSmall .ouiCodeBlock__controls {
top: 8px;
right: 8px;
}
.ouiCodeBlock.ouiCodeBlock--paddingSmall.ouiCodeBlock--hasControls .ouiCodeBlock__pre--whiteSpacePreWrap {
padding-right: 36px;
}
.ouiCodeBlock.ouiCodeBlock--paddingSmall.ouiCodeBlock--hasControls .ouiCodeBlock__pre--whiteSpacePre {
margin-right: 36px;
}
.ouiCodeBlock.ouiCodeBlock--paddingMedium .ouiCodeBlock__pre {
padding: 16px;
}
.ouiCodeBlock.ouiCodeBlock--paddingMedium .ouiCodeBlock__controls {
top: 16px;
right: 16px;
}
.ouiCodeBlock.ouiCodeBlock--paddingMedium.ouiCodeBlock--hasControls .ouiCodeBlock__pre--whiteSpacePreWrap {
padding-right: 44px;
}
.ouiCodeBlock.ouiCodeBlock--paddingMedium.ouiCodeBlock--hasControls .ouiCodeBlock__pre--whiteSpacePre {
margin-right: 44px;
}
.ouiCodeBlock.ouiCodeBlock--paddingLarge .ouiCodeBlock__pre {
padding: 24px;
}
.ouiCodeBlock.ouiCodeBlock--paddingLarge .ouiCodeBlock__controls {
top: 24px;
right: 24px;
}
.ouiCodeBlock.ouiCodeBlock--paddingLarge.ouiCodeBlock--hasControls .ouiCodeBlock__pre--whiteSpacePreWrap {
padding-right: 52px;
}
.ouiCodeBlock.ouiCodeBlock--paddingLarge.ouiCodeBlock--hasControls .ouiCodeBlock__pre--whiteSpacePre {
margin-right: 52px;
}
.ouiCodeBlock.ouiCodeBlock--inline {
display: inline-block;
white-space: pre;
color: #2A3947;
font-size: 90%; /* 1 */
padding: 0 8px;
background: #E3E5E8;
}
.ouiCodeBlock.ouiCodeBlock--inline .ouiCodeBlock__pre {
padding: 0 4px;
}
.ouiCodeBlock.ouiCodeBlock--inline .ouiCodeBlock__code {
display: inline;
white-space: normal;
}
.ouiCodeBlock.ouiCodeBlock--transparentBackground {
background: transparent;
}
.ouiCodeBlock .token.punctuation:not(.interpolation-punctuation):not([class*=attr-]) {
opacity: 0.7;
}
.ouiCodeBlock .token.comment,
.ouiCodeBlock .token.prolog,
.ouiCodeBlock .token.doctype,
.ouiCodeBlock .token.cdata,
.ouiCodeBlock .token.coord,
.ouiCodeBlock .token.blockquote {
color: #5e626b;
font-style: italic;
}
.ouiCodeBlock .token.selector {
color: inherit;
}
.ouiCodeBlock .token.string,
.ouiCodeBlock .token.interpolation,
.ouiCodeBlock .token.interpolation-punctuation,
.ouiCodeBlock .token.doc-comment .token.keyword,
.ouiCodeBlock .token.attr-value,
.ouiCodeBlock .token.url .token.content {
color: #9c4766;
}
.ouiCodeBlock .token.number,
.ouiCodeBlock .token.boolean,
.ouiCodeBlock .token.keyword.nil,
.ouiCodeBlock .token.regex,
.ouiCodeBlock .token.variable,
.ouiCodeBlock .token.unit,
.ouiCodeBlock .token.hexcode,
.ouiCodeBlock .token.attr-name,
.ouiCodeBlock .token.attr-equals {
color: #336c61;
}
.ouiCodeBlock .token.atrule .token.rule,
.ouiCodeBlock .token.keyword {
color: #715892;
}
.ouiCodeBlock .token.function {
color: inherit;
}
.ouiCodeBlock .token.tag {
color: #44678a;
}
.ouiCodeBlock .token.class-name {
color: #44678a;
}
.ouiCodeBlock .token.property {
color: inherit;
}
.ouiCodeBlock .token.console,
.ouiCodeBlock .token.list-punctuation,
.ouiCodeBlock .token.url-reference,
.ouiCodeBlock .token.url .token.url {
color: #a3483a;
}
.ouiCodeBlock .token.paramater {
color: inherit;
}
.ouiCodeBlock .token.meta,
.ouiCodeBlock .token.important {
color: #5e626b;
}
.ouiCodeBlock .token.title {
color: #8a5831;
}
.ouiCodeBlock .token.section {
color: #a3483a;
}
.ouiCodeBlock .token.prefix.inserted,
.ouiCodeBlock .token.prefix.deleted {
padding-left: 4px;
margin-left: -4px;
}
.ouiCodeBlock .token.prefix.inserted {
box-shadow: -4px 0 #336c61;
color: #336c61;
}
.ouiCodeBlock .token.prefix.deleted {
box-shadow: -4px 0 #b13731;
color: #b13731;
}
.ouiCodeBlock .token.selector .token.class {
color: inherit;
}
.ouiCodeBlock .token.selector .token.id {
color: inherit;
}
.ouiCodeBlock .token.italic {
font-style: italic;
}
.ouiCodeBlock .token.important,
.ouiCodeBlock .token.bold {
font-weight: 700;
}
.ouiCodeBlock .token.url-reference,
.ouiCodeBlock .token.url .token.url {
text-decoration: underline;
}
.ouiCodeBlock .token.entity {
cursor: help;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiCodeEditorWrapper {
position: relative;
}
.ouiCodeEditorWrapper .ace_hidden-cursors {
opacity: 0;
}
.ouiCodeEditorWrapper.ouiCodeEditorWrapper-isEditing .ace_hidden-cursors {
opacity: 1;
}
.ouiCodeEditorKeyboardHint {
position: absolute;
top: 0;
left: 0;
background: rgba(252, 254, 255, 0.7);
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
opacity: 0;
cursor: pointer;
height: 100%;
width: 100%;
}
.ouiCodeEditorKeyboardHint:focus {
opacity: 1;
border: 2px solid #0268BC;
z-index: 1000;
}
.ouiCodeEditorKeyboardHint.ouiCodeEditorKeyboardHint-isInactive {
display: none;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiCollapsibleNav:not([class*=push]) {
z-index: 6000 !important;
}
.ouiCollapsibleNav.ouiFlyout {
background-color: #F0F2F4;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiCollapsibleNavGroup {
background-color: #F0F2F4;
}
.ouiCollapsibleNavGroup:not(:first-child) {
border-top: 1px solid #D6D9DD;
}
.ouiCollapsibleNavGroup .ouiAccordion__triggerWrapper {
padding: 16px;
}
.ouiCollapsibleNavGroup--light {
background-color: #F0F2F4;
}
.ouiCollapsibleNavGroup--dark {
background-color: #222e3c;
color: #FCFEFF;
}
.ouiCollapsibleNavGroup--dark .ouiCollapsibleNavGroup__heading:focus .ouiAccordion__iconWrapper {
color: #267ec5;
-webkit-animation-name: ouiCollapsibleNavGroupDarkFocusRingAnimate !important;
animation-name: ouiCollapsibleNavGroupDarkFocusRingAnimate !important;
}
.ouiCollapsibleNavGroup--dark .ouiCollapsibleNavGroup__title {
color: inherit;
line-height: inherit;
}
.ouiCollapsibleNavGroup__heading {
font-weight: 500;
}
.ouiCollapsibleNavGroup__heading:not(.ouiAccordion__button) {
padding: 16px;
}
.ouiCollapsibleNavGroup__children {
padding: 8px;
}
.ouiCollapsibleNavGroup--withHeading .ouiCollapsibleNavGroup__children {
padding-top: 0;
}
@-webkit-keyframes ouiCollapsibleNavGroupDarkFocusRingAnimate {
0% {
box-shadow: 0 0 0 6px rgba(2, 104, 188, 0);
}
100% {
box-shadow: 0 0 0 3px #267ec5;
}
}
@keyframes ouiCollapsibleNavGroupDarkFocusRingAnimate {
0% {
box-shadow: 0 0 0 6px rgba(2, 104, 188, 0);
}
100% {
box-shadow: 0 0 0 3px #267ec5;
}
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiColorPicker {
position: relative;
width: 152px;
}
.ouiColorPicker__popoverAnchor .ouiColorPicker__input {
padding-right: 40px;
}
.ouiColorPicker__popoverAnchor .ouiColorPicker__input[class*="--compressed"] {
padding-right: 32px;
}
.ouiColorPicker__popoverAnchor .ouiColorPicker__input + .ouiFormControlLayoutIcons {
color: inherit;
}
.ouiSwatchInput__stroke {
fill: none;
stroke: rgba(10, 18, 25, 0.2);
}
.ouiColorPicker__popoverPanel--pickerOnly {
padding-bottom: 0 !important;
}
.ouiColorPicker__input--inGroup {
height: 38px !important;
box-shadow: none !important;
border-radius: 0;
}
.ouiColorPicker__input--inGroup.ouiFieldText--compressed {
height: 30px !important;
border-radius: 0;
}
.ouiColorPicker__alphaRange .ouiRangeInput {
min-width: 0;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiColorPickerSwatch {
display: inline-block;
height: 24px;
width: 24px;
border-radius: 2px;
cursor: pointer;
border: solid 1px rgba(10, 18, 25, 0.1);
box-shadow: inset 0 0 0 1px rgba(252, 254, 255, 0.05);
}
.ouiColorPickerSwatch:focus {
-webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important;
animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiHue {
background: linear-gradient(to right, #FF3232 0%, #FFF130 20%, #45FF30 35%, #28FFF0 52%, #282CFF 71%, #FF28FB 88%, #FF0094 100%);
height: 24px;
margin: 4px 0;
position: relative;
}
.ouiHue:before, .ouiHue:after {
content: "";
left: 0;
position: absolute;
height: 8px;
background: #FCFEFF;
width: 100%;
}
.ouiHue:after {
bottom: 0;
}
.ouiHue__range {
position: relative;
height: 24px;
width: calc(100% + 2px);
margin: 0 -1px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: transparent;
z-index: 2;
}
.ouiHue__range::-webkit-slider-thumb {
box-shadow: 0 2px 2px -1px rgba(173, 180, 186, 0.3);
padding: 7px;
border: 1px solid #bbbcc1;
background: #FCFEFF no-repeat center;
border-radius: 14px;
-webkit-transition: background-color 150ms ease-in, border-color 150ms ease-in;
transition: background-color 150ms ease-in, border-color 150ms ease-in;
cursor: pointer;
border-color: #5A6875;
padding: 0;
height: 16px;
width: 16px;
}
.ouiHue__range::-moz-range-thumb {
box-shadow: 0 2px 2px -1px rgba(173, 180, 186, 0.3);
padding: 7px;
border: 1px solid #bbbcc1;
background: #FCFEFF no-repeat center;
border-radius: 14px;
-moz-transition: background-color 150ms ease-in, border-color 150ms ease-in;
transition: background-color 150ms ease-in, border-color 150ms ease-in;
cursor: pointer;
border-color: #5A6875;
padding: 0;
height: 16px;
width: 16px;
}
.ouiHue__range::-ms-thumb {
box-shadow: 0 2px 2px -1px rgba(173, 180, 186, 0.3);
padding: 7px;
border: 1px solid #bbbcc1;
background: #FCFEFF no-repeat center;
border-radius: 14px;
-ms-transition: background-color 150ms ease-in, border-color 150ms ease-in;
transition: background-color 150ms ease-in, border-color 150ms ease-in;
cursor: pointer;
border-color: #5A6875;
padding: 0;
height: 16px;
width: 16px;
}
.ouiHue__range::-webkit-slider-thumb {
-webkit-appearance: none;
margin-top: 0;
}
.ouiHue__range::-ms-thumb {
margin-top: 0;
}
.ouiHue__range::-ms-track {
height: 24px;
background: transparent;
border-color: transparent;
color: transparent;
}
.ouiHue__range::-moz-focus-outer {
border: none;
}
.ouiHue__range::-ms-fill-lower, .ouiHue__range::-ms-fill-upper {
background: transparent;
}
.ouiHue__range:focus {
outline: none;
}
.ouiHue__range:focus::-webkit-slider-thumb {
box-shadow: 0 0 0 3px rgba(2, 104, 188, 0.3);
border-color: #0268BC;
}
.ouiHue__range:focus::-moz-range-thumb {
box-shadow: 0 0 0 3px rgba(2, 104, 188, 0.3);
border-color: #0268BC;
}
.ouiHue__range:focus::-ms-thumb {
box-shadow: 0 0 0 3px rgba(2, 104, 188, 0.3);
border-color: #0268BC;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiSaturation {
position: relative;
width: 100%;
padding-bottom: 100%;
border-radius: 2px;
touch-action: none;
z-index: 3;
}
.ouiSaturation .ouiSaturation__lightness,
.ouiSaturation .ouiSaturation__saturation {
position: absolute;
top: -1px;
bottom: 0;
left: 0;
right: 0;
border-radius: 2px;
}
.ouiSaturation .ouiSaturation__lightness {
background: linear-gradient(to right, rgb(255, 255, 255), rgba(255, 255, 255, 0));
}
.ouiSaturation .ouiSaturation__saturation {
background: linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0));
}
.ouiSaturation .ouiSaturation__indicator {
position: absolute;
height: 12px;
width: 12px;
border-radius: 100%;
margin-top: -6px;
margin-left: -6px;
border: 1px solid #2A3947;
}
.ouiSaturation .ouiSaturation__indicator:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 100%;
border: 1px solid #E3E5E8;
}
.ouiSaturation:focus {
outline: none;
}
.ouiSaturation:focus .ouiSaturation__indicator {
box-shadow: 0 0 0 3px rgba(2, 104, 188, 0.3);
border-color: #0268BC;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiColorStops:not(.ouiColorStops-isDisabled):focus {
outline: 2px solid rgba(2, 104, 188, 0.3);
}
.ouiColorStops__addContainer {
display: block;
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 16px;
margin-top: -8px;
}
.ouiColorStops__addContainer:hover:not(.ouiColorStops__addContainer-isDisabled) {
cursor: pointer;
}
.ouiColorStops__addContainer:hover:not(.ouiColorStops__addContainer-isDisabled) .ouiColorStops__addTarget {
opacity: 0.7;
}
.ouiColorStops__addTarget {
box-shadow: 0 2px 2px -1px rgba(173, 180, 186, 0.3);
padding: 7px;
border: 1px solid #bbbcc1;
background: #FCFEFF no-repeat center;
border-radius: 14px;
transition: background-color 150ms ease-in, border-color 150ms ease-in;
cursor: pointer;
border-color: #5A6875;
padding: 0;
height: 16px;
width: 16px;
position: absolute;
top: 0;
height: 16px;
width: 16px;
background-color: #E3E5E8;
pointer-events: none;
opacity: 0;
transition: opacity 150ms;
}
.ouiColorStop {
width: 152px;
}
.ouiColorStopPopover.ouiPopover {
position: absolute;
top: 50%;
width: 16px;
height: 16px;
margin-top: -8px;
}
.ouiColorStopPopover-hasFocus {
z-index: 1;
}
.ouiColorStopPopover__anchor {
position: absolute;
width: 100%;
height: 100%;
}
.ouiColorStopPopover__anchor:before {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
height: 16px;
width: 16px;
border-radius: 16px;
background: #FCFEFF;
}
.ouiColorStopThumb.ouiRangeThumb:not(:disabled) {
top: 0;
margin-top: 0;
pointer-events: auto;
cursor: -webkit-grab;
cursor: grab;
border: solid 3px #FCFEFF;
box-shadow: 0 0 0 1px #ADB4BA, 0 2px 2px -1px rgba(173, 180, 186, 0.2), 0 1px 5px -2px rgba(173, 180, 186, 0.2);
}
.ouiColorStopThumb.ouiRangeThumb:not(:disabled):active {
cursor: -webkit-grabbing;
cursor: grabbing;
}
.ouiColorStopPopover-isLoadingPanel {
visibility: hidden !important;
}
.ouiColorStops.ouiColorStops-isDragging:not(.ouiColorStops-isDisabled):not(.ouiColorStops-isReadOnly) {
cursor: -webkit-grabbing;
cursor: grabbing;
}
.ouiColorStops__highlight {
color: #5A6875;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiColorPalettePicker__itemTitle {
font-size: 12.000002px;
font-size: 0.857143rem;
line-height: 1.5;
}
.ouiColorPalettePicker__itemTitle + .ouiColorPaletteDisplay {
margin-top: 4px;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiColorPaletteDisplay {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
overflow: hidden;
height: 8px;
}
.ouiColorPaletteDisplay--sizeExtraSmall {
position: relative;
height: 4px;
border-radius: 4px;
}
.ouiColorPaletteDisplay--sizeExtraSmall:after {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 4px;
content: "";
pointer-events: none;
border: 1px solid rgba(42, 57, 71, 0.2);
}
.ouiColorPaletteDisplay--sizeExtraSmall .ouiColorPaletteDisplayFixed__bleedArea {
height: 4px;
}
.ouiColorPaletteDisplay--sizeSmall {
position: relative;
height: 8px;
border-radius: 8px;
}
.ouiColorPaletteDisplay--sizeSmall:after {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 8px;
content: "";
pointer-events: none;
border: 1px solid rgba(42, 57, 71, 0.2);
}
.ouiColorPaletteDisplay--sizeSmall .ouiColorPaletteDisplayFixed__bleedArea {
height: 8px;
}
.ouiColorPaletteDisplay--sizeMedium {
position: relative;
height: 16px;
border-radius: 16px;
}
.ouiColorPaletteDisplay--sizeMedium:after {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 16px;
content: "";
pointer-events: none;
border: 1px solid rgba(42, 57, 71, 0.2);
}
.ouiColorPaletteDisplay--sizeMedium .ouiColorPaletteDisplayFixed__bleedArea {
height: 16px;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiColorPaletteDisplayFixed__bleedArea {
position: absolute;
top: 0;
left: 0;
display: -webkit-flex;
display: flex;
height: 8px;
width: calc(100% + 1px);
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiComboBox {
max-width: 400px;
width: 100%;
height: auto;
position: relative;
/**
* 1. Allow pills to truncate their text with an ellipsis.
* 2. Don't allow pills/placeholder to overlap with the caret, loading icon or clear button.
* 3. The height on combo can be larger than normal text inputs.
*/
/**
* 1. Force field height to match other field heights.
* 2. Force input height to expand to fill this element.
* 3. Reset appearance on Safari.
* 4. Fix react-input-autosize appearance.
* 5. Prevent a lot of input from causing the react-input-autosize to overflow the container.
*/
}
.ouiComboBox--fullWidth {
max-width: 100%;
}
.ouiComboBox--compressed {
height: 32px;
}
.ouiComboBox--inGroup {
height: 100%;
}
.ouiComboBox--compressed,
.ouiComboBox .ouiFormControlLayout {
height: auto;
}
.ouiComboBox .ouiComboBox__inputWrap {
max-width: 400px;
width: 100%;
height: 40px;
background-color: #fcfeff;
background-repeat: no-repeat;
background-size: 0% 100%;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in;
font-family: var(--oui-font-family);
font-weight: 400;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-font-kerning: normal;
font-kerning: normal;
font-size: 14px;
color: #2A3947;
border: none;
border-radius: 0;
padding: 12px;
max-width: 400px;
width: 100%;
height: auto;
padding: 4px 8px;
display: -webkit-flex;
display: flex; /* 1 */
outline: none;
padding-right: 40px;
/* 2 */
}
.ouiComboBox .ouiComboBox__inputWrap--fullWidth {
max-width: 100%;
}
.ouiComboBox .ouiComboBox__inputWrap--compressed {
height: 32px;
}
.ouiComboBox .ouiComboBox__inputWrap--inGroup {
height: 100%;
}
.ouiComboBox .ouiComboBox__inputWrap:hover, .ouiComboBox .ouiComboBox__inputWrap:focus {
box-shadow: 0 1px 1px -1px rgba(173, 180, 186, 0.2), 0 3px 2px -2px rgba(173, 180, 186, 0.2), inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
@supports (-moz-appearance: none) {
.ouiComboBox .ouiComboBox__inputWrap {
transition-property: box-shadow, background-image, background-size;
}
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
.ouiComboBox .ouiComboBox__inputWrap {
line-height: 1em;
}
}
.ouiComboBox .ouiComboBox__inputWrap::-webkit-input-placeholder {
color: #686c75;
opacity: 1;
}
.ouiComboBox .ouiComboBox__inputWrap::-moz-placeholder {
color: #686c75;
opacity: 1;
}
.ouiComboBox .ouiComboBox__inputWrap::placeholder {
color: #686c75;
opacity: 1;
}
.ouiComboBox .ouiComboBox__inputWrap--compressed {
background-color: #fcfeff;
background-repeat: no-repeat;
background-size: 0% 100%;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in;
padding: 8px;
border-radius: 2px;
}
.ouiComboBox .ouiComboBox__inputWrap--compressed:hover, .ouiComboBox .ouiComboBox__inputWrap--compressed:focus {
box-shadow: 0 1px 1px -1px rgba(173, 180, 186, 0.2), 0 3px 2px -2px rgba(173, 180, 186, 0.2), inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
@supports (-moz-appearance: none) {
.ouiComboBox .ouiComboBox__inputWrap--compressed {
transition-property: box-shadow, background-image, background-size;
}
}
.ouiComboBox .ouiComboBox__inputWrap--inGroup {
box-shadow: none !important;
border-radius: 0;
}
.ouiComboBox .ouiComboBox__inputWrap--withIcon {
padding-left: 40px;
}
.ouiComboBox .ouiComboBox__inputWrap--fullWidth {
max-width: 100%;
}
.ouiComboBox .ouiComboBox__inputWrap--compressed {
height: 32px;
}
.ouiComboBox .ouiComboBox__inputWrap--inGroup {
height: 100%;
}
.ouiComboBox .ouiComboBox__inputWrap .ouiComboBoxPill {
max-width: calc(100% - 2px - 16px);
}
.ouiComboBox .ouiComboBox__inputWrap .ouiComboBoxIcon {
-webkit-align-self: center;
align-self: center;
}
.ouiComboBox .ouiComboBox__inputWrap:not(.ouiComboBox__inputWrap--noWrap) {
padding-top: 4px;
padding-bottom: 4px;
padding-left: 4px;
height: auto; /* 3 */
-webkit-flex-wrap: wrap;
flex-wrap: wrap; /* 1 */
-webkit-align-content: flex-start;
align-content: flex-start;
}
.ouiComboBox .ouiComboBox__inputWrap:not(.ouiComboBox__inputWrap--noWrap):hover {
cursor: text;
}
.ouiComboBox .ouiComboBox__inputWrap.ouiComboBox__inputWrap-isClearable {
padding-right: 62px;
/* 2 */
}
.ouiComboBox .ouiComboBox__inputWrap.ouiComboBox__inputWrap-isLoading {
padding-right: 62px;
/* 2 */
}
.ouiComboBox .ouiComboBox__inputWrap.ouiComboBox__inputWrap-isLoading .ouiComboBoxPlaceholder {
padding-right: 62px;
/* 2 */
}
.ouiComboBox .ouiComboBox__inputWrap.ouiComboBox__inputWrap-isLoading.ouiComboBox__inputWrap-isClearable {
padding-right: 84px;
/* 2 */
}
.ouiComboBox .ouiComboBox__inputWrap--inGroup.ouiComboBox .ouiComboBox__inputWrap--compressed {
height: 30px; /* 2 */
line-height: 30px; /* 2 */
}
.ouiComboBox .ouiComboBox__inputWrap--inGroup.ouiComboBox .ouiComboBox__inputWrap--compressed .ouiComboBoxPill,
.ouiComboBox .ouiComboBox__inputWrap--inGroup.ouiComboBox .ouiComboBox__inputWrap--compressed .ouiComboBoxPill + .ouiComboBoxPill {
margin: 4px 4px 0 0;
}
.ouiComboBox .ouiComboBox__inputWrap--inGroup.ouiComboBox .ouiComboBox__inputWrap--compressed .ouiComboBoxPill--plainText {
line-height: 22px;
}
.ouiComboBox .ouiComboBox__input {
display: -webkit-inline-flex !important;
display: inline-flex !important; /* 1 */
height: 32px; /* 2 */
overflow: hidden; /* 5 */
}
.ouiComboBox .ouiComboBox__input > input {
font-family: var(--oui-font-family);
font-weight: 400;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-font-kerning: normal;
font-kerning: normal;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; /* 3 */
padding: 0;
border: none;
background: transparent;
font-size: 14px;
color: #2A3947;
margin: 4px;
line-height: 1.5; /* 4 */
}
.ouiComboBox.ouiComboBox-isOpen .ouiComboBox__inputWrap {
background-color: #fcfeff;
background-image: linear-gradient(to top, #0268BC, #0268BC 2px, transparent 2px, transparent 100%);
background-size: 100% 100%;
box-shadow: 0 1px 1px -1px rgba(173, 180, 186, 0.2), 0 4px 4px -2px rgba(173, 180, 186, 0.2), inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
.ouiComboBox.ouiComboBox-isOpen .ouiComboBox__inputWrap--compressed {
background-color: #fcfeff;
background-image: linear-gradient(to top, #0268BC, #0268BC 2px, transparent 2px, transparent 100%);
background-size: 100% 100%;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
.ouiComboBox.ouiComboBox-isInvalid .ouiComboBox__inputWrap {
background-image: linear-gradient(to top, #C43D35, #C43D35 2px, transparent 2px, transparent 100%);
background-size: 100%;
}
.ouiComboBox.ouiComboBox-isDisabled .ouiComboBox__inputWrap {
color: #ADB4BA;
-webkit-text-fill-color: #ADB4BA;
cursor: not-allowed;
background: #dde0e3;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
-webkit-text-fill-color: unset;
}
.ouiComboBox.ouiComboBox-isDisabled .ouiComboBox__inputWrap::-webkit-input-placeholder {
color: #ADB4BA;
opacity: 1;
}
.ouiComboBox.ouiComboBox-isDisabled .ouiComboBox__inputWrap::-moz-placeholder {
color: #ADB4BA;
opacity: 1;
}
.ouiComboBox.ouiComboBox-isDisabled .ouiComboBox__inputWrap::placeholder {
color: #ADB4BA;
opacity: 1;
}
.ouiComboBox.ouiComboBox-isDisabled .ouiComboBoxPlaceholder,
.ouiComboBox.ouiComboBox-isDisabled .ouiComboBoxPill--plainText {
color: #ADB4BA;
-webkit-text-fill-color: #ADB4BA;
}
.ouiComboBox.ouiComboBox-isDisabled .ouiComboBox__inputWrap:not(.ouiComboBox__inputWrap--noWrap):hover {
cursor: not-allowed;
}
.ouiComboBox .ouiFormControlLayout--group .ouiComboBox__input {
height: 30px;
}
.ouiComboBox.ouiComboBox--compressed .ouiFormControlLayout--group .ouiComboBox__input {
height: 30px;
}
.ouiComboBox.ouiComboBox--compressed .ouiComboBox__inputWrap {
line-height: 32px; /* 2 */
padding-top: 0;
padding-bottom: 0;
padding-right: 32px;
/* 2 */
}
.ouiComboBox.ouiComboBox--compressed .ouiComboBox__inputWrap.ouiComboBox__inputWrap-isClearable {
padding-right: 54px;
/* 2 */
}
.ouiComboBox.ouiComboBox--compressed .ouiComboBox__inputWrap.ouiComboBox__inputWrap-isLoading {
padding-right: 54px;
/* 2 */
}
.ouiComboBox.ouiComboBox--compressed .ouiComboBox__inputWrap.ouiComboBox__inputWrap-isLoading .ouiComboBoxPlaceholder {
padding-right: 54px;
/* 2 */
}
.ouiComboBox.ouiComboBox--compressed .ouiComboBox__inputWrap.ouiComboBox__inputWrap-isLoading.ouiComboBox__inputWrap-isClearable {
padding-right: 76px;
/* 2 */
}
.ouiComboBox .ouiFormControlLayout--group .ouiText {
line-height: 0 !important;
}
.ouiComboBox .ouiFormControlLayout__prepend,
.ouiComboBox .ouiFormControlLayout__append {
height: auto !important;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiComboBox__input {
max-width: 100%;
}
.ouiComboBox__input input {
border: none !important;
box-shadow: none !important;
outline: none !important;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*
* 1. Overwrites the base styling of OuiBadge, to give it a larger size and margins
* that make sense in the input wrap.
*/
.ouiComboBoxPill {
height: 22px;
line-height: 22px;
vertical-align: baseline;
}
.ouiComboBoxPill.ouiBadge {
line-height: 20px;
}
.ouiComboBoxPill, .ouiComboBoxPill + .ouiComboBoxPill {
margin: 4px;
}
.ouiFormControlLayout--group .ouiComboBoxPill, .ouiFormControlLayout--group .ouiComboBoxPill + .ouiComboBoxPill {
margin: 3px 5px 4px 3px;
}
.ouiComboBoxPill.ouiBadge, .ouiComboBoxPill.ouiBadge + .ouiComboBoxPill.ouiBadge {
margin: 5px 4px;
}
.ouiComboBox--compressed .ouiComboBoxPill, .ouiComboBox--compressed .ouiComboBoxPill + .ouiComboBoxPill {
margin: 4px 4px 0 0;
line-height: 22px;
}
.ouiComboBox--compressed .ouiFormControlLayout--group .ouiComboBoxPill, .ouiComboBox--compressed .ouiFormControlLayout--group .ouiComboBoxPill + .ouiComboBoxPill {
margin: 3px 5px 0 -1px;
}
.ouiComboBox--compressed .ouiComboBoxPill.ouiBadge, .ouiComboBox--compressed .ouiComboBoxPill.ouiBadge + .ouiComboBoxPill.ouiBadge {
margin: 5px 4px 0 0;
line-height: 20px;
}
.ouiComboBoxPill--plainText {
font-family: var(--oui-font-family);
font-weight: 400;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-font-kerning: normal;
font-kerning: normal;
max-width: 100%;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
word-wrap: normal !important;
line-height: 24px;
font-size: 14px;
padding: 0;
color: #2A3947;
vertical-align: middle;
display: inline-block;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiComboBoxPlaceholder {
max-width: 100%;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
word-wrap: normal !important;
padding-right: 40px;
position: absolute;
pointer-events: none;
padding-left: 4px;
line-height: 32px;
color: #686c75;
margin-bottom: 0 !important;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/**
* 1. Using specificity to override panel shadow
* 2. Prevent really long input from overflowing the container.
*/
.ouiComboBoxOptionsList {
-webkit-transform: none !important;
transform: none !important;
top: 0;
}
.ouiComboBoxOptionsList.ouiPopover__panel-isAttached.ouiComboBoxOptionsList--top { /* 1 */
box-shadow: 0 0 12px -1px rgba(173, 180, 186, 0.2), 0 0 4px -1px rgba(173, 180, 186, 0.2), 0 0 2px 0 rgba(173, 180, 186, 0.2);
}
.ouiComboBoxOptionsList__empty {
overflow-wrap: break-word !important;
word-wrap: break-word !important;
word-break: break-word;
/* 2 */
padding: 8px;
text-align: center;
word-wrap: break-word;
}
.ouiComboBoxOptionsList__rowWrap {
padding: 0;
max-height: 200px;
overflow: hidden;
}
.ouiComboBoxOptionsList__rowWrap > div {
scrollbar-width: thin;
}
.ouiComboBoxOptionsList__rowWrap > div::-webkit-scrollbar {
width: 16px;
height: 16px;
}
.ouiComboBoxOptionsList__rowWrap > div::-webkit-scrollbar-thumb {
background-color: rgba(90, 104, 117, 0.5);
border: 6px solid transparent;
background-clip: content-box;
}
.ouiComboBoxOptionsList__rowWrap > div::-webkit-scrollbar-corner, .ouiComboBoxOptionsList__rowWrap > div::-webkit-scrollbar-track {
background-color: transparent;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiComboBoxOption {
font-size: 14px;
padding: 4px 8px 4px 16px;
width: 100%;
text-align: left;
border: 1px solid #D6D9DD;
border-color: transparent;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
}
.ouiComboBoxOption:hover {
text-decoration: underline;
}
.ouiComboBoxOption.ouiComboBoxOption-isFocused {
cursor: pointer;
color: #0268BC;
background-color: #e3eff8;
}
.ouiComboBoxOption.ouiComboBoxOption-isDisabled {
color: #ADB4BA;
cursor: not-allowed;
}
.ouiComboBoxOption.ouiComboBoxOption-isDisabled:hover {
text-decoration: none;
}
.ouiComboBoxOption__contentWrapper {
display: -webkit-flex;
display: flex;
}
.ouiComboBoxOption__contentWrapper .ouiComboBoxOption__emptyStateText {
-webkit-flex: 1;
flex: 1;
text-align: left;
margin-bottom: 0;
}
.ouiComboBoxOption__contentWrapper .ouiComboBoxOption__enterBadge {
-webkit-align-self: flex-start;
align-self: flex-start;
margin-left: 4px;
}
.ouiComboBoxOption__content {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
-webkit-flex: 1;
flex: 1;
text-align: left;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/**
* 1. Force each title to be the same height as an option, so that the virtualized scroll logic
* works.
*/
.ouiComboBoxTitle {
font-size: 12.000002px;
padding: 11px 8px 4px; /* 1 */
width: 100%;
font-weight: 500;
color: #0A1219;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiComment {
font-size: 14px;
display: -webkit-flex;
display: flex;
padding-bottom: 16px;
min-height: 56px;
}
.ouiComment .ouiCommentEvent {
-webkit-flex-grow: 1;
flex-grow: 1;
}
.ouiComment .ouiCommentTimeline {
position: relative;
-webkit-flex-grow: 0;
flex-grow: 0;
margin-right: 16px;
}
.ouiComment .ouiCommentTimeline::before {
content: "";
position: absolute;
left: 20px;
top: 24px;
width: 2px;
background-color: #D6D9DD;
height: calc(100% + 24px);
}
.ouiComment:last-of-type .ouiCommentTimeline::before {
display: none;
}
.ouiComment--update:not(.ouiComment--hasBody) {
-webkit-align-items: center;
align-items: center;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiCommentEvent--regular {
background-color: #FCFEFF;
border: 1px solid #D6D9DD;
border-radius: 4px;
-webkit-flex-grow: 1;
flex-grow: 1;
}
.ouiCommentEvent--regular.ouiCommentEvent--regular--flexGrowZero {
-webkit-flex-grow: 0;
flex-grow: 0;
}
.ouiCommentEvent--regular.ouiCommentEvent--regular--noBorder {
border: none;
}
.ouiCommentEvent--regular.ouiCommentEvent--regular--hasShadow {
box-shadow: 0 2px 2px -1px rgba(173, 180, 186, 0.3), 0 1px 5px -2px rgba(173, 180, 186, 0.3);
border: 1px solid #D6D9DD;
}
.ouiCommentEvent--regular.ouiCommentEvent--regular--isClickable {
transition: all 150ms cubic-bezier(0.694, 0.0482, 0.335, 1);
}
.ouiCommentEvent--regular.ouiCommentEvent--regular--isClickable:enabled {
display: block;
width: 100%;
text-align: left;
}
.ouiCommentEvent--regular.ouiCommentEvent--regular--isClickable:hover, .ouiCommentEvent--regular.ouiCommentEvent--regular--isClickable:focus {
box-shadow: 0 4px 8px 0 rgba(173, 180, 186, 0.15), 0 2px 2px -1px rgba(173, 180, 186, 0.3);
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
cursor: pointer;
}
.ouiCommentEvent--regular.ouiCommentEvent--regular--borderRadiusNone {
border-radius: 0;
}
.ouiCommentEvent--regular.ouiCommentEvent--regular--borderRadiusMedium {
border-radius: 4px;
}
.ouiCommentEvent--regular.ouiCommentEvent--regular--borderRadiusLarge {
border-radius: 8px;
}
.ouiCommentEvent--regular.ouiCommentEvent--regular--borderRadiusXLarge {
border-radius: 16px;
}
.ouiCommentEvent--regular.ouiCommentEvent--regular--transparent {
background-color: transparent;
}
.ouiCommentEvent--regular.ouiCommentEvent--regular--plain {
background-color: #FCFEFF;
}
.ouiCommentEvent--regular.ouiCommentEvent--regular--subdued {
background-color: #F0F2F4;
}
.ouiCommentEvent--regular.ouiCommentEvent--regular--accent {
background-color: #f2ecf9;
}
.ouiCommentEvent--regular.ouiCommentEvent--regular--primary {
background-color: #e3eff8;
}
.ouiCommentEvent--regular.ouiCommentEvent--regular--success {
background-color: #e4f1f0;
}
.ouiCommentEvent--regular.ouiCommentEvent--regular--warning {
background-color: #f9f5ea;
}
.ouiCommentEvent--regular.ouiCommentEvent--regular--danger {
background-color: #f6ebeb;
}
.ouiCommentEvent {
overflow: hidden;
}
.ouiCommentEvent__header {
line-height: 1.5;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
}
.ouiCommentEvent__headerData {
-webkit-align-items: center;
align-items: center;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.ouiCommentEvent__headerData > div {
padding-right: 4px;
}
.ouiCommentEvent__headerUsername {
font-weight: 500;
}
.ouiCommentEvent--regular {
box-shadow: 0 2px 2px -1px rgba(173, 180, 186, 0.3);
border-radius: 4px;
border: 1px solid #D6D9DD;
}
.ouiCommentEvent--regular .ouiCommentEvent__header {
min-height: 40px;
background-color: #E3E5E8;
border-bottom: 1px solid #D6D9DD;
padding: 4px 8px;
/**
* Fix for IE when using align-items:center in an item that has min-height
(https://github.com/philipwalton/flexbugs/issues/231#issuecomment-362790042)
*/
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
.ouiCommentEvent--regular .ouiCommentEvent__header::after {
content: "";
min-height: 32px;
font-size: 0;
display: block;
}
}
.ouiCommentEvent--regular .ouiCommentEvent__headerData {
-webkit-flex-grow: 1;
flex-grow: 1;
}
.ouiCommentEvent--regular .ouiCommentEvent__body {
padding: 8px;
}
.ouiCommentEvent--update .ouiCommentEvent__header {
-webkit-justify-content: flex-start;
justify-content: flex-start;
padding: 4px 0;
}
.ouiCommentEvent--update .ouiCommentEvent__headerData {
padding-right: 8px;
}
.ouiCommentEvent--update .ouiCommentEvent__body {
padding-top: 4px;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiCommentTimeline__content {
min-width: 40px;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
position: relative;
}
.ouiCommentTimeline__icon--default {
-webkit-flex-shrink: 0;
flex-shrink: 0;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
overflow-x: hidden;
border-radius: 50%;
background-color: #E3E5E8;
}
.ouiCommentTimeline__icon--default.ouiCommentTimeline__icon--regular {
width: 40px;
height: 40px;
}
.ouiCommentTimeline__icon--default.ouiCommentTimeline__icon--update {
width: 24px;
height: 24px;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiContextMenu {
width: 256px;
max-width: 100%;
position: relative;
overflow: hidden;
transition: height 150ms cubic-bezier(0.694, 0.0482, 0.335, 1);
border-radius: 4px;
}
.ouiContextMenu .ouiContextMenu__content {
padding: 8px;
}
/**
* 1. When there are multiple ContextMenuPanels, the ContextMenu will absolutely
* position them. ContextMenuPanel will break the layout of a Popover if it's
* absolutely positioned by default.
*/
.ouiContextMenu__panel {
position: absolute; /* 1 */
}
.ouiContextMenu__icon {
margin-right: 8px;
}
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiContextMenuPanel {
width: 100%;
visibility: visible;
outline-offset: -3px;
}
.ouiContextMenuPanel:focus {
outline: none;
}
.ouiContextMenuPanel.ouiContextMenuPanel-txInLeft {
pointer-events: none;
-webkit-animation: ouiContextMenuPanelTxInLeft 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
animation: ouiContextMenuPanelTxInLeft 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
}
.ouiContextMenuPanel.ouiContextMenuPanel-txOutLeft {
pointer-events: none;
-webkit-animation: ouiContextMenuPanelTxOutLeft 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
animation: ouiContextMenuPanelTxOutLeft 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
}
.ouiContextMenuPanel.ouiContextMenuPanel-txInRight {
pointer-events: none;
-webkit-animation: ouiContextMenuPanelTxInRight 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
animation: ouiContextMenuPanelTxInRight 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
}
.ouiContextMenuPanel.ouiContextMenuPanel-txOutRight {
pointer-events: none;
-webkit-animation: ouiContextMenuPanelTxOutRight 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
animation: ouiContextMenuPanelTxOutRight 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
}
.ouiContextMenuPanel--next {
-webkit-transform: translateX(256px);
transform: translateX(256px);
visibility: hidden;
}
.ouiContextMenuPanel--previous {
-webkit-transform: translateX(-256px);
transform: translateX(-256px);
visibility: hidden;
}
.ouiContextMenuPanelTitle {
color: #161e2b;
font-size: 14px;
font-size: 1rem;
line-height: 1.2143rem;
font-weight: 500;
padding: 12px;
text-transform: none;
border-bottom: 1px solid #D6D9DD;
padding: 12px;
width: 100%;
text-align: left;
outline-offset: -3px;
}
.ouiContextMenuPanelTitle:enabled:hover, .ouiContextMenuPanelTitle:enabled:focus {
text-decoration: underline;
}
.ouiContextMenuPanelTitle--small {
color: #161e2b;
font-size: 14px;
font-size: 1rem;
line-height: 1.2143rem;
font-weight: 500;
padding: 12px;
text-transform: none;
border-bottom: 1px solid #D6D9DD;
padding: 6px 8px;
}
@-webkit-keyframes ouiContextMenuPanelTxInLeft {
0% {
-webkit-transform: translateX(256px);
transform: translateX(256px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes ouiContextMenuPanelTxInLeft {
0% {
-webkit-transform: translateX(256px);
transform: translateX(256px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@-webkit-keyframes ouiContextMenuPanelTxOutLeft {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(-256px);
transform: translateX(-256px);
}
}
@keyframes ouiContextMenuPanelTxOutLeft {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(-256px);
transform: translateX(-256px);
}
}
@-webkit-keyframes ouiContextMenuPanelTxInRight {
0% {
-webkit-transform: translateX(-256px);
transform: translateX(-256px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes ouiContextMenuPanelTxInRight {
0% {
-webkit-transform: translateX(-256px);
transform: translateX(-256px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@-webkit-keyframes ouiContextMenuPanelTxOutRight {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(256px);
transform: translateX(256px);
}
}
@keyframes ouiContextMenuPanelTxOutRight {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(256px);
transform: translateX(256px);
}
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiContextMenuItem {
display: block;
padding: 12px;
width: 100%;
text-align: left;
color: #2A3947;
outline-offset: -3px;
}
.ouiContextMenuItem:hover, .ouiContextMenuItem:focus {
text-decoration: underline;
}
.ouiContextMenuItem:focus {
background-color: #e3eff8;
}
.ouiContextMenuItem.ouiContextMenuItem-isDisabled {
color: #a3a7ae;
cursor: default;
}
.ouiContextMenuItem.ouiContextMenuItem-isDisabled:hover, .ouiContextMenuItem.ouiContextMenuItem-isDisabled:focus {
text-decoration: none;
}
.ouiContextMenuItem--small {
padding: 6px 8px;
}
.ouiContextMenuItem--small .ouiContextMenuItem__text {
font-size: 14px;
font-size: 1rem;
line-height: 1.5;
}
.ouiContextMenuItem__inner {
display: -webkit-flex;
display: flex;
}
.ouiContextMenuItem__text {
-webkit-flex-grow: 1;
flex-grow: 1;
overflow: hidden;
}
.ouiContextMenuItem__arrow {
-webkit-align-self: flex-end;
align-self: flex-end;
}
.ouiContextMenu__itemLayout {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
}
.ouiContextMenu__itemLayout.ouiContextMenu__itemLayout--bottom {
-webkit-align-items: flex-end;
align-items: flex-end;
}
.ouiContextMenu__itemLayout.ouiContextMenu__itemLayout--top {
-webkit-align-items: flex-start;
align-items: flex-start;
}
.ouiContextMenu__itemLayout .ouiContextMenu__icon {
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiControlBar {
background: #2A3947;
color: white;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
box-shadow: inset 0 40px 0 #2A3947, inset 0 600rem 0 #F0F2F4;
bottom: 0;
-webkit-transform: translateY(0);
transform: translateY(0);
height: 40px;
max-height: calc(100vh - 80px);
}
.ouiControlBar--fixed {
position: fixed;
z-index: 6000;
}
.ouiControlBar--absolute {
position: absolute;
z-index: 1000;
}
.ouiControlBar--relative {
position: relative;
}
.ouiControlBar-isOpen {
-webkit-animation-duration: 250ms;
animation-duration: 250ms;
-webkit-animation-timing-function: cubic-bezier(0.694, 0.0482, 0.335, 1);
animation-timing-function: cubic-bezier(0.694, 0.0482, 0.335, 1);
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.ouiControlBar-isOpen.ouiControlBar--large {
-webkit-animation-name: ouiControlBarOpenPanelLarge;
animation-name: ouiControlBarOpenPanelLarge;
height: calc(100vh - 80px);
bottom: -100vh;
}
.ouiControlBar-isOpen.ouiControlBar--medium {
-webkit-animation-name: ouiControlBarOpenPanelMedium;
animation-name: ouiControlBarOpenPanelMedium;
height: 480px;
bottom: -480px;
}
.ouiControlBar-isOpen.ouiControlBar--small {
-webkit-animation-name: ouiControlBarOpenPanelSmall;
animation-name: ouiControlBarOpenPanelSmall;
height: 240px;
bottom: -240px;
}
.ouiControlBar__controls {
height: 40px;
width: 100%;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
overflow-y: hidden;
overflow-x: auto;
padding: 0 12px;
}
.ouiControlBar__content {
scrollbar-width: thin;
overflow-y: auto;
width: 100%;
height: calc(100% - 40px);
background-color: #F0F2F4;
-webkit-animation-name: ouiControlBarShowContent;
animation-name: ouiControlBarShowContent;
-webkit-animation-duration: 350ms;
animation-duration: 350ms;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-timing-function: cubic-bezier(0.694, 0.0482, 0.335, 1);
animation-timing-function: cubic-bezier(0.694, 0.0482, 0.335, 1);
color: #2A3947;
}
.ouiControlBar__content::-webkit-scrollbar {
width: 16px;
height: 16px;
}
.ouiControlBar__content::-webkit-scrollbar-thumb {
background-color: rgba(90, 104, 117, 0.5);
border: 6px solid transparent;
background-clip: content-box;
}
.ouiControlBar__content::-webkit-scrollbar-corner, .ouiControlBar__content::-webkit-scrollbar-track {
background-color: transparent;
}
.ouiControlBar__icon {
-webkit-flex-shrink: 0;
flex-shrink: 0;
margin-left: 8px;
margin-right: 8px;
}
.ouiControlBar__buttonIcon {
-webkit-flex-shrink: 0;
flex-shrink: 0;
min-width: 40px;
min-height: 40px;
}
.ouiControlBar__button {
-webkit-flex-shrink: 0;
flex-shrink: 0;
border-radius: 2px;
margin-left: 4px;
font-size: 14px;
}
.ouiControlBar__button:enabled:hover {
-webkit-transform: none;
transform: none;
box-shadow: none;
}
.ouiControlBar__button:last-child {
margin-right: 4px;
}
.ouiControlBar__breadcrumbs .ouiBreadcrumb:not(.ouiBreadcrumb--last) {
color: #9ea2a9;
}
.ouiControlBar__breadcrumbs .ouiBreadcrumbSeparator {
background: rgba(252, 254, 255, 0.2);
}
.ouiControlBar__spacer {
-webkit-flex-grow: 1;
flex-grow: 1;
height: 100%;
}
.ouiControlBar__divider {
-webkit-flex-shrink: 0;
flex-shrink: 0;
height: 100%;
width: 1px;
background-color: rgba(252, 254, 255, 0.2);
}
.ouiControlBar__text {
max-width: 100%;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
word-wrap: normal !important;
font-size: 14px;
font-size: 1rem;
line-height: 1.5;
padding: 0 8px;
color: white;
}
.ouiControlBar__text:last-child {
padding-right: 0;
}
.ouiControlBar__tab {
max-width: 100%;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
word-wrap: normal !important;
font-size: 14px;
font-size: 1rem;
line-height: 1.5;
color: white;
padding: 0 16px;
text-align: center;
height: 100%;
}
.ouiControlBar__tab:hover, .ouiControlBar__tab:focus {
text-decoration: underline;
cursor: pointer;
}
.ouiControlBar__tab.ouiControlBar__tab--active {
background-color: #F0F2F4;
box-shadow: inset 0 4px 0 #0263b3;
color: #0263b3;
}
.ouiControlBar__controls .ouiLink.ouiLink--primary {
color: #6ea9d8;
}
.ouiControlBar__controls .ouiLink.ouiLink--primary:hover {
color: #4d95d0;
}
.ouiControlBar__controls .ouiLink.ouiLink--text {
color: #FCFEFF;
}
.ouiControlBar__controls .ouiControlBar__button.ouiButton--primary:enabled {
box-shadow: none;
}
.ouiControlBar__controls .ouiControlBar__button.ouiButton--primary:enabled:not(.ouiButton--fill) {
color: #6ea9d8;
border-color: #6ea9d8;
}
.ouiControlBar__controls .ouiButtonIcon--primary {
color: #6ea9d8;
}
.ouiControlBar__controls .ouiLink.ouiLink--accent {
color: #c390d8;
}
.ouiControlBar__controls .ouiLink.ouiLink--accent:hover {
color: #b97ed2;
}
.ouiControlBar__controls .ouiLink.ouiLink--text {
color: #FCFEFF;
}
.ouiControlBar__controls .ouiControlBar__button.ouiButton--accent:enabled {
box-shadow: none;
}
.ouiControlBar__controls .ouiControlBar__button.ouiButton--accent:enabled:not(.ouiButton--fill) {
color: #c390d8;
border-color: #c390d8;
}
.ouiControlBar__controls .ouiButtonIcon--accent {
color: #c390d8;
}
.ouiControlBar__controls .ouiLink.ouiLink--secondary {
color: #6eb0a5;
}
.ouiControlBar__controls .ouiLink.ouiLink--secondary:hover {
color: #56a295;
}
.ouiControlBar__controls .ouiLink.ouiLink--text {
color: #FCFEFF;
}
.ouiControlBar__controls .ouiControlBar__button.ouiButton--secondary:enabled {
box-shadow: none;
}
.ouiControlBar__controls .ouiControlBar__button.ouiButton--secondary:enabled:not(.ouiButton--fill) {
color: #6eb0a5;
border-color: #6eb0a5;
}
.ouiControlBar__controls .ouiButtonIcon--secondary {
color: #6eb0a5;
}
.ouiControlBar__controls .ouiLink.ouiLink--success {
color: #6eb0a5;
}
.ouiControlBar__controls .ouiLink.ouiLink--success:hover {
color: #56a295;
}
.ouiControlBar__controls .ouiLink.ouiLink--text {
color: #FCFEFF;
}
.ouiControlBar__controls .ouiControlBar__button.ouiButton--success:enabled {
box-shadow: none;
}
.ouiControlBar__controls .ouiControlBar__button.ouiButton--success:enabled:not(.ouiButton--fill) {
color: #6eb0a5;
border-color: #6eb0a5;
}
.ouiControlBar__controls .ouiButtonIcon--success {
color: #6eb0a5;
}
.ouiControlBar__controls .ouiLink.ouiLink--warning {
color: #E0A130;
}
.ouiControlBar__controls .ouiLink.ouiLink--warning:hover {
color: #e8bd6e;
}
.ouiControlBar__controls .ouiLink.ouiLink--text {
color: #FCFEFF;
}
.ouiControlBar__controls .ouiControlBar__button.ouiButton--warning:enabled {
box-shadow: none;
}
.ouiControlBar__controls .ouiControlBar__button.ouiButton--warning:enabled:not(.ouiButton--fill) {
color: #E0A130;
border-color: #E0A130;
}
.ouiControlBar__controls .ouiButtonIcon--warning {
color: #E0A130;
}
.ouiControlBar__controls .ouiLink.ouiLink--danger {
color: #db8a86;
}
.ouiControlBar__controls .ouiLink.ouiLink--danger:hover {
color: #d57772;
}
.ouiControlBar__controls .ouiLink.ouiLink--text {
color: #FCFEFF;
}
.ouiControlBar__controls .ouiControlBar__button.ouiButton--danger:enabled {
box-shadow: none;
}
.ouiControlBar__controls .ouiControlBar__button.ouiButton--danger:enabled:not(.ouiButton--fill) {
color: #db8a86;
border-color: #db8a86;
}
.ouiControlBar__controls .ouiButtonIcon--danger {
color: #db8a86;
}
.ouiControlBar__controls .ouiLink.ouiLink--subdued {
color: #9ea2a9;
}
.ouiControlBar__controls .ouiLink.ouiLink--subdued:hover {
color: #94989e;
}
.ouiControlBar__controls .ouiLink.ouiLink--text {
color: #FCFEFF;
}
.ouiControlBar__controls .ouiControlBar__button.ouiButton--subdued:enabled {
box-shadow: none;
}
.ouiControlBar__controls .ouiControlBar__button.ouiButton--subdued:enabled:not(.ouiButton--fill) {
color: #9ea2a9;
border-color: #9ea2a9;
}
.ouiControlBar__controls .ouiButtonIcon--subdued {
color: #9ea2a9;
}
.ouiControlBar__controls .ouiLink.ouiLink--ghost {
color: #FCFEFF;
}
.ouiControlBar__controls .ouiLink.ouiLink--ghost:hover {
color: #fcfeff;
}
.ouiControlBar__controls .ouiLink.ouiLink--text {
color: #FCFEFF;
}
.ouiControlBar__controls .ouiControlBar__button.ouiButton--ghost:enabled {
box-shadow: none;
}
.ouiControlBar__controls .ouiControlBar__button.ouiButton--ghost:enabled:not(.ouiButton--fill) {
color: #FCFEFF;
border-color: #FCFEFF;
}
.ouiControlBar__controls .ouiButtonIcon--ghost {
color: #FCFEFF;
}
.ouiControlBar__controls .ouiLink.ouiLink--text {
color: #9ba5ad;
}
.ouiControlBar__controls .ouiLink.ouiLink--text:hover {
color: #8b959e;
}
.ouiControlBar__controls .ouiLink.ouiLink--text {
color: #FCFEFF;
}
.ouiControlBar__controls .ouiControlBar__button.ouiButton--text:enabled {
box-shadow: none;
}
.ouiControlBar__controls .ouiControlBar__button.ouiButton--text:enabled:not(.ouiButton--fill) {
color: #9ba5ad;
border-color: #9ba5ad;
}
.ouiControlBar__controls .ouiButtonIcon--text {
color: #9ba5ad;
}
@media only screen and (max-width: 574px) {
.ouiControlBar:not(.ouiControlBar--showOnMobile) {
display: none;
}
}
@media only screen and (min-width: 575px) and (max-width: 767px) {
.ouiControlBar:not(.ouiControlBar--showOnMobile) {
display: none;
}
}
@-webkit-keyframes ouiControlBarOpenPanelLarge {
0% {
-webkit-transform: translateY(calc((40px * 3) * -1));
transform: translateY(calc((40px * 3) * -1));
}
100% {
-webkit-transform: translateY(-100vh);
transform: translateY(-100vh);
}
}
@keyframes ouiControlBarOpenPanelLarge {
0% {
-webkit-transform: translateY(calc((40px * 3) * -1));
transform: translateY(calc((40px * 3) * -1));
}
100% {
-webkit-transform: translateY(-100vh);
transform: translateY(-100vh);
}
}
@-webkit-keyframes ouiControlBarOpenPanelMedium {
0% {
-webkit-transform: translateY(-40px);
transform: translateY(-40px);
}
100% {
-webkit-transform: translateY(-480px);
transform: translateY(-480px);
}
}
@keyframes ouiControlBarOpenPanelMedium {
0% {
-webkit-transform: translateY(-40px);
transform: translateY(-40px);
}
100% {
-webkit-transform: translateY(-480px);
transform: translateY(-480px);
}
}
@-webkit-keyframes ouiControlBarOpenPanelSmall {
0% {
-webkit-transform: translateY(-40px);
transform: translateY(-40px);
}
100% {
-webkit-transform: translateY(-240px);
transform: translateY(-240px);
}
}
@keyframes ouiControlBarOpenPanelSmall {
0% {
-webkit-transform: translateY(-40px);
transform: translateY(-40px);
}
100% {
-webkit-transform: translateY(-240px);
transform: translateY(-240px);
}
}
@-webkit-keyframes ouiControlBarShowContent {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes ouiControlBarShowContent {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* This file is a heavy retheme of react-datepicker's Sass as of v1.4.0
** https://github.com/Hacker0x01/react-datepicker
**
** In places where features were disabled, I've commented out the original Sass
** selectors rather than removing it so we can better understand what's changed.
** Commented out selectors that don't have properties indicate that we are not
** using those dom elements for styling of any kind. For example, react-datepicker
** has lots of pointer arrows attached to its popovers, but we choose not to render
** then in any way.
**
** Similarly, you will also find several times where we use display: none to
** completely remove extraneous UI (they had some overly obvious legends for example).
*/
.ouiDatePicker .ouiFormControlLayout {
height: auto;
}
.ouiDatePicker.ouiDatePicker--shadow .react-datepicker-popper {
box-shadow: 0 6px 12px -1px rgba(173, 180, 186, 0.2), 0 4px 4px -1px rgba(173, 180, 186, 0.2), 0 2px 2px 0 rgba(173, 180, 186, 0.2);
border: 1px solid #D6D9DD;
background-color: #FCFEFF;
border-radius: 0 0 4px 4px;
}
.ouiDatePicker.ouiDatePicker--shadow.ouiDatePicker--inline .react-datepicker {
box-shadow: 0 6px 12px -1px rgba(173, 180, 186, 0.2), 0 4px 4px -1px rgba(173, 180, 186, 0.2), 0 2px 2px 0 rgba(173, 180, 186, 0.2);
border: 1px solid #D6D9DD;
background-color: #FCFEFF;
border-radius: 4px;
}
.react-datepicker {
font-family: var(--oui-font-family);
font-weight: 400;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-font-kerning: normal;
font-kerning: normal;
font-size: 12.000002px;
color: #0A1219;
display: -webkit-flex;
display: flex;
position: relative;
border-radius: 4px;
}
.react-datepicker--time-only .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
width: 100%;
}
.react-datepicker--time-only .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box .react-datepicker__time-list li.react-datepicker__time-list-item {
font-size: 14px;
text-align: left;
padding-left: 36px;
padding-right: 36px;
color: #2A3947;
}
.react-datepicker--time-only .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box .react-datepicker__time-list li.react-datepicker__time-list-item.react-datepicker__time-list-item--selected {
color: #FCFEFF;
}
.react-datepicker--time-only .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box .react-datepicker__time-list li.react-datepicker__time-list-item.react-datepicker__time-list-item--disabled {
color: #a3a7ae;
}
.react-datepicker--time-only .react-datepicker__time-container {
border-left: 0;
}
.ouiDatePicker.ouiDatePicker--shadow .react-datepicker-popper {
z-index: 2000;
-webkit-animation: ouiAnimFadeIn 150ms ease-in;
animation: ouiAnimFadeIn 150ms ease-in;
}
.ouiDatePicker.ouiDatePicker--shadow .react-datepicker-popper[data-placement^=top] {
box-shadow: 0 0 12px -1px rgba(173, 180, 186, 0.2), 0 0 4px -1px rgba(173, 180, 186, 0.2), 0 0 2px 0 rgba(173, 180, 186, 0.2);
border-radius: 4px 4px 0 0;
}
.ouiDatePicker.ouiDatePicker--shadow .react-datepicker-popper[data-placement^=right] {
margin-left: 0;
}
.ouiDatePicker.ouiDatePicker--shadow .react-datepicker-popper[data-placement^=left] {
margin-right: 0;
}
.react-datepicker__header {
text-align: center;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.react-datepicker__header--time {
display: none;
}
.react-datepicker__header__dropdown {
padding: 16px 0 8px 0;
}
.react-datepicker__year-dropdown-container--select,
.react-datepicker__month-dropdown-container--select,
.react-datepicker__month-year-dropdown-container--select,
.react-datepicker__year-dropdown-container--scroll,
.react-datepicker__month-dropdown-container--scroll,
.react-datepicker__month-year-dropdown-container--scroll {
display: inline-block;
margin: 0 4px;
}
.react-datepicker__current-month,
.react-datepicker-time__header {
display: none;
}
.react-datepicker-time__header {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.react-datepicker__navigation {
cursor: pointer;
position: absolute;
top: 18px;
width: 0;
padding: 0;
z-index: 1;
text-indent: -999em;
overflow: hidden;
}
.react-datepicker__navigation--previous {
background-position: center;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+ICA8ZGVmcz4gICAgPHBhdGggaWQ9ImFycm93X2Rvd24tYSIgZD0iTTEzLjA2ODg1MDgsNS4xNTcyNTAzOCBMOC4zODQyMzk3NSw5Ljc2ODI3NDI4IEM4LjE3MDU0NDE1LDkuOTc4NjEzMDggNy44Mjk5OTIxNCw5Ljk3OTE0MDk1IDcuNjE1NzYwMjUsOS43NjgyNzQyOCBMMi45MzExNDkxNSw1LjE1NzI1MDM4IEMyLjcxODEzNTksNC45NDc1ODMyMSAyLjM3Mjc3MzE5LDQuOTQ3NTgzMjEgMi4xNTk3NTk5NCw1LjE1NzI1MDM4IEMxLjk0Njc0NjY5LDUuMzY2OTE3NTYgMS45NDY3NDY2OSw1LjcwNjg1NTIyIDIuMTU5NzU5OTQsNS45MTY1MjI0IEw2Ljg0NDM3MTA0LDEwLjUyNzU0NjMgQzcuNDg1MTc0MjQsMTEuMTU4MjgzNiA4LjUxNjQ0OTc5LDExLjE1NjY4NTEgOS4xNTU2Mjg5NiwxMC41Mjc1NDYzIEwxMy44NDAyNDAxLDUuOTE2NTIyNCBDMTQuMDUzMjUzMyw1LjcwNjg1NTIyIDE0LjA1MzI1MzMsNS4zNjY5MTc1NiAxMy44NDAyNDAxLDUuMTU3MjUwMzggQzEzLjYyNzIyNjgsNC45NDc1ODMyMSAxMy4yODE4NjQxLDQuOTQ3NTgzMjEgMTMuMDY4ODUwOCw1LjE1NzI1MDM4IFoiLz4gIDwvZGVmcz4gIDxnIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgIDx1c2UgZmlsbC1ydWxlPSJub256ZXJvIiB4bGluazpocmVmPSIjYXJyb3dfZG93bi1hIi8+ICA8L2c+PC9zdmc+);
left: 20px;
height: 16px;
width: 16px;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
transition: -webkit-transform 90ms ease-in-out;
transition: transform 90ms ease-in-out;
transition: transform 90ms ease-in-out, -webkit-transform 90ms ease-in-out;
}
.react-datepicker__navigation--previous:hover, .react-datepicker__navigation--previous:focus {
border-radius: 4px;
-webkit-transform: scale(1.2) rotate(90deg);
transform: scale(1.2) rotate(90deg);
}
.react-datepicker__navigation--previous:hover {
background-color: #E3E5E8;
box-shadow: 0 0 0 2px #E3E5E8;
}
.react-datepicker__navigation--previous:focus {
background-color: #e3eff8;
box-shadow: 0 0 0 2px #e3eff8;
}
.react-datepicker__navigation--previous--disabled, .react-datepicker__navigation--previous--disabled:hover {
cursor: not-allowed;
opacity: 0.2;
}
.react-datepicker__navigation--next {
background-position: center;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+ICA8ZGVmcz4gICAgPHBhdGggaWQ9ImFycm93X2Rvd24tYSIgZD0iTTEzLjA2ODg1MDgsNS4xNTcyNTAzOCBMOC4zODQyMzk3NSw5Ljc2ODI3NDI4IEM4LjE3MDU0NDE1LDkuOTc4NjEzMDggNy44Mjk5OTIxNCw5Ljk3OTE0MDk1IDcuNjE1NzYwMjUsOS43NjgyNzQyOCBMMi45MzExNDkxNSw1LjE1NzI1MDM4IEMyLjcxODEzNTksNC45NDc1ODMyMSAyLjM3Mjc3MzE5LDQuOTQ3NTgzMjEgMi4xNTk3NTk5NCw1LjE1NzI1MDM4IEMxLjk0Njc0NjY5LDUuMzY2OTE3NTYgMS45NDY3NDY2OSw1LjcwNjg1NTIyIDIuMTU5NzU5OTQsNS45MTY1MjI0IEw2Ljg0NDM3MTA0LDEwLjUyNzU0NjMgQzcuNDg1MTc0MjQsMTEuMTU4MjgzNiA4LjUxNjQ0OTc5LDExLjE1NjY4NTEgOS4xNTU2Mjg5NiwxMC41Mjc1NDYzIEwxMy44NDAyNDAxLDUuOTE2NTIyNCBDMTQuMDUzMjUzMyw1LjcwNjg1NTIyIDE0LjA1MzI1MzMsNS4zNjY5MTc1NiAxMy44NDAyNDAxLDUuMTU3MjUwMzggQzEzLjYyNzIyNjgsNC45NDc1ODMyMSAxMy4yODE4NjQxLDQuOTQ3NTgzMjEgMTMuMDY4ODUwOCw1LjE1NzI1MDM4IFoiLz4gIDwvZGVmcz4gIDxnIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgIDx1c2UgZmlsbC1ydWxlPSJub256ZXJvIiB4bGluazpocmVmPSIjYXJyb3dfZG93bi1hIi8+ICA8L2c+PC9zdmc+);
right: 20px;
height: 16px;
width: 16px;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
left: 248px;
}
.react-datepicker__navigation--next:hover, .react-datepicker__navigation--next:focus {
border-radius: 4px;
-webkit-transform: scale(1.2) rotate(-90deg);
transform: scale(1.2) rotate(-90deg);
}
.react-datepicker__navigation--next:hover {
background-color: #E3E5E8;
box-shadow: 0 0 0 2px #E3E5E8;
}
.react-datepicker__navigation--next:focus {
background-color: #e3eff8;
box-shadow: 0 0 0 2px #e3eff8;
}
.react-datepicker__navigation--next--disabled, .react-datepicker__navigation--next--disabled:hover {
cursor: not-allowed;
opacity: 0.2;
}
.react-datepicker__navigation--years {
position: relative;
top: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.react-datepicker__navigation--years-previous {
top: 4px;
border-top-color: #E3E5E8;
}
.react-datepicker__navigation--years-previous:hover {
border-top-color: #c7cbd1;
}
.react-datepicker__navigation--years-upcoming {
top: -4px;
border-bottom-color: #E3E5E8;
}
.react-datepicker__navigation--years-upcoming:hover {
border-bottom-color: #c7cbd1;
}
.react-datepicker__month {
margin: 0 16px 16px 16px;
text-align: center;
border-radius: 4px;
}
.react-datepicker__time-container {
border-left: #D6D9DD;
width: auto;
display: -webkit-flex;
display: flex;
padding: 16px 0;
border-radius: 0 4px 4px 0;
-webkit-flex-grow: 1;
flex-grow: 1;
}
.react-datepicker__time-container .react-datepicker__time {
position: relative;
-webkit-flex-grow: 1;
flex-grow: 1;
display: -webkit-flex;
display: flex;
padding-left: 4px;
-webkit-flex-direction: column;
flex-direction: column;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
width: auto;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-flex-grow: 1;
flex-grow: 1;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
scrollbar-width: thin;
height: 204px !important;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-flex-grow: 1;
flex-grow: 1;
overflow-y: auto;
-webkit-align-items: center;
align-items: center;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list::-webkit-scrollbar {
width: 16px;
height: 16px;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list::-webkit-scrollbar-thumb {
background-color: rgba(90, 104, 117, 0.5);
border: 6px solid transparent;
background-clip: content-box;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list::-webkit-scrollbar-corner, .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list::-webkit-scrollbar-track {
background-color: transparent;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
padding: 4px 8px;
margin-bottom: 4px;
text-align: right;
color: #5A6875;
white-space: nowrap;
line-height: 12px;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover, .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:focus {
cursor: pointer;
text-decoration: underline;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
background-color: #0268BC;
color: white;
border-radius: 2px;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
background-color: #0268BC;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
color: #D6D9DD;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
cursor: not-allowed;
text-decoration: none;
background-color: transparent;
}
.react-datepicker__week-number {
color: #E3E5E8;
display: inline-block;
width: 32px;
line-height: 28px;
text-align: center;
margin: 0 4px;
}
.react-datepicker__week-number.react-datepicker__week-number--clickable {
cursor: pointer;
}
.react-datepicker__week-number.react-datepicker__week-number--clickable:hover {
border-radius: 4px;
background-color: #FCFEFF;
}
.react-datepicker__day-names,
.react-datepicker__week {
white-space: nowrap;
}
.react-datepicker__day-name,
.react-datepicker__day,
.react-datepicker__time-name {
color: #0A1219;
display: inline-block;
width: 32px;
line-height: 28px;
text-align: center;
margin: 0 2px;
}
.react-datepicker__day-name {
color: #5A6875;
text-transform: uppercase;
}
.react-datepicker__day {
cursor: pointer;
border: solid 2px transparent;
transition: -webkit-transform 90ms ease-in-out;
transition: transform 90ms ease-in-out;
transition: transform 90ms ease-in-out, -webkit-transform 90ms ease-in-out;
}
.react-datepicker__day:hover:not(.react-datepicker__day--disabled) {
text-decoration: underline;
font-weight: 500;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.react-datepicker__day--today {
font-weight: bold;
color: #0268BC;
}
.react-datepicker__day--outside-month {
color: #5A6875;
}
.react-datepicker__day--highlighted {
border-radius: 4px;
background-color: #0F7B68;
color: #FCFEFF;
}
.react-datepicker__day--highlighted:hover {
background-color: #0c6455;
}
.react-datepicker__day--in-range {
background-color: rgba(2, 104, 188, 0.1);
color: #0A1219;
border-radius: 0;
border-top: solid 6px #FCFEFF;
border-bottom: solid 6px #FCFEFF;
border-right: none;
border-left: none;
line-height: 20px;
}
.react-datepicker__day--selected, .react-datepicker__day--in-selecting-range {
height: 32px;
margin: 0 2px;
border-radius: 4px;
background-color: #0268BC;
line-height: 28px;
border: solid 2px #0268BC;
color: #FCFEFF;
}
.react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover {
background-color: #025aa3;
}
.react-datepicker__day--keyboard-selected {
border-radius: 4px;
border: solid 2px #0268BC;
font-weight: 500;
}
.react-datepicker__day--keyboard-selected:hover {
background-color: #025aa3;
color: #FCFEFF;
}
.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range) {
background-color: rgba(2, 104, 188, 0.5);
}
.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range) {
background-color: #FCFEFF;
color: #0A1219;
}
.react-datepicker__day--disabled {
cursor: not-allowed;
color: #D6D9DD;
}
.react-datepicker__day--disabled:hover {
background-color: transparent;
}
.react-datepicker__input-container {
position: relative;
}
.react-datepicker__year-read-view {
font-weight: 400;
color: #5A6875;
}
.react-datepicker__month-read-view {
font-weight: 500;
}
.react-datepicker__year-read-view,
.react-datepicker__month-read-view,
.react-datepicker__month-year-read-view {
font-size: 17.999996px;
}
.react-datepicker__year-read-view:hover,
.react-datepicker__month-read-view:hover,
.react-datepicker__month-year-read-view:hover {
cursor: pointer;
color: #0268BC;
}
.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
border-top-color: #c7cbd1;
}
.react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
display: none;
}
.react-datepicker__year-dropdown,
.react-datepicker__month-dropdown,
.react-datepicker__month-year-dropdown {
background-color: #FCFEFF;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 1;
text-align: center;
border-radius: 4px;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-animation: ouiAnimFadeIn 150ms ease-in;
animation: ouiAnimFadeIn 150ms ease-in;
-webkit-align-content: space-around;
align-content: space-around;
-webkit-align-items: center;
align-items: center;
padding: 8px;
}
.react-datepicker__year-dropdown:hover,
.react-datepicker__month-dropdown:hover,
.react-datepicker__month-year-dropdown:hover {
cursor: pointer;
}
.react-datepicker__year-dropdown {
-webkit-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
.react-datepicker__year-option:first-of-type, .react-datepicker__year-option:last-of-type {
display: none;
}
.react-datepicker__year-option,
.react-datepicker__month-option,
.react-datepicker__month-year-option {
font-size: 12.000002px;
padding: 8px;
color: #2A3947;
-webkit-flex-basis: 33.3%;
flex-basis: 33.3%;
}
.react-datepicker__year-option:first-of-type,
.react-datepicker__month-option:first-of-type,
.react-datepicker__month-year-option:first-of-type {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.react-datepicker__year-option:last-of-type,
.react-datepicker__month-option:last-of-type,
.react-datepicker__month-year-option:last-of-type {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.react-datepicker__year-option:hover,
.react-datepicker__month-option:hover,
.react-datepicker__month-year-option:hover {
background-color: #E3E5E8;
}
.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
border-bottom-color: #c7cbd1;
}
.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
border-top-color: #c7cbd1;
}
.react-datepicker__year-option--selected,
.react-datepicker__month-option--selected,
.react-datepicker__month-year-option--selected {
display: none;
}
.react-datepicker__screenReaderOnly {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
.react-datepicker__year-option--preselected,
.react-datepicker__month-option--preselected {
background: #e3eff8;
}
.react-datepicker__year-option--selected_year.react-datepicker__year-option--preselected,
.react-datepicker__month-option--selected_month.react-datepicker__month-option--preselected {
background: #0268BC;
}
.react-datepicker__time-list-item--preselected,
.react-datepicker__year-option--preselected,
.react-datepicker__month-option--preselected {
background: #cfe3f3;
}
.react-datepicker__time-container--focus {
background: #e3eff8;
}
.react-datepicker__month-read-view:focus,
.react-datepicker__year-read-view:focus {
text-decoration: underline;
}
.react-datepicker__month--accessible:focus {
background: #e3eff8;
}
.react-datepicker__month--accessible:focus .react-datepicker__day--in-range:not(.react-datepicker__day--selected) {
border-top-color: #e3eff8;
border-bottom-color: #e3eff8;
}
.react-datepicker__navigation:focus {
background-color: #e3eff8;
}
.react-datepicker__year-option--selected_year,
.react-datepicker__month-option--selected_month {
background: #0268BC;
color: #FCFEFF;
font-weight: 500;
border-radius: 4px;
}
.react-datepicker__focusTrap {
display: -webkit-flex;
display: flex;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/**
* 1. Account for inner box-shadow style border
*/
.ouiDatePickerRange {
max-width: 400px;
width: 100%;
height: auto;
background-color: #fcfeff;
background-repeat: no-repeat;
background-size: 0% 100%;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
padding: 1px; /* 1 */
}
.ouiDatePickerRange--fullWidth {
max-width: 100%;
}
.ouiDatePickerRange--compressed {
height: 32px;
}
.ouiDatePickerRange--inGroup {
height: 100%;
}
.ouiDatePickerRange .ouiDatePicker.ouiFieldText--compressed {
height: 30px;
}
.ouiDatePickerRange:hover, .ouiDatePickerRange:focus {
box-shadow: 0 1px 1px -1px rgba(173, 180, 186, 0.2), 0 3px 2px -2px rgba(173, 180, 186, 0.2), inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
@supports (-moz-appearance: none) {
.ouiDatePickerRange {
transition-property: box-shadow, background-image, background-size;
}
}
.ouiDatePickerRange > * {
-webkit-flex-grow: 1;
flex-grow: 1;
}
.ouiDatePickerRange .ouiFieldText.ouiDatePicker {
box-shadow: none !important;
text-align: center;
}
.ouiDatePickerRange .react-datepicker-popper .ouiFieldText.ouiDatePicker {
text-align: left;
}
.ouiDatePickerRange--inGroup {
box-shadow: none;
padding: 0;
}
.ouiDatePickerRange--inGroup .ouiDatePicker {
height: 38px;
}
.ouiDatePickerRange > .ouiDatePickerRange__delimeter {
background-color: transparent !important;
line-height: 1 !important;
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 6px;
padding-right: 6px;
}
.ouiDatePickerRange--readOnly {
background: #dde0e3;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiSuperDatePicker__absoluteDateFormRow {
padding: 0 8px 8px;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiDatePopoverButton {
font-family: var(--oui-font-family);
font-weight: 400;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-font-kerning: normal;
font-kerning: normal;
font-size: 14px;
color: #2A3947;
display: block;
width: 100%;
padding: 0 8px;
line-height: 38px;
height: 38px;
word-break: break-all;
transition: background 150ms ease-in;
background-size: 100%;
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
.ouiDatePopoverButton {
line-height: 1em;
}
}
.ouiDatePopoverButton::-webkit-input-placeholder {
color: #686c75;
opacity: 1;
}
.ouiDatePopoverButton::-moz-placeholder {
color: #686c75;
opacity: 1;
}
.ouiDatePopoverButton::placeholder {
color: #686c75;
opacity: 1;
}
.ouiDatePopoverButton:focus, .ouiDatePopoverButton-isSelected {
background-image: linear-gradient(to top, #0268BC, #0268BC 2px, transparent 2px, transparent 100%);
}
.ouiDatePopoverButton-needsUpdating {
background-color: #e4f1f0;
color: #0e7564;
}
.ouiDatePopoverButton-needsUpdating:focus, .ouiDatePopoverButton-needsUpdating.ouiDatePopoverButton-isSelected {
background-image: linear-gradient(to top, #0F7B68, #0F7B68 2px, transparent 2px, transparent 100%);
}
.ouiDatePopoverButton-isInvalid {
background-color: #f6ebeb;
color: #ba3a33;
}
.ouiDatePopoverButton-isInvalid:focus, .ouiDatePopoverButton-isInvalid.ouiDatePopoverButton-isSelected {
background-image: linear-gradient(to top, #C43D35, #C43D35 2px, transparent 2px, transparent 100%);
}
.ouiDatePopoverButton:disabled {
background-color: #dde0e3;
color: #5A6875;
cursor: default;
}
.ouiDatePopoverButton-compressed {
line-height: 30px;
height: 30px;
}
.ouiDatePopoverButton--start {
text-align: right;
}
.ouiDatePopoverButton--end {
text-align: left;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiDatePopoverContent {
width: 400px;
max-width: 100%;
}
.ouiDatePopoverContent__padded {
padding: 8px;
}
.ouiDatePopoverContent__padded--large {
padding: 16px;
}
@media only screen and (max-width: 574px) {
.ouiDatePopoverContent {
width: 284px;
}
}
@media only screen and (min-width: 575px) and (max-width: 767px) {
.ouiDatePopoverContent {
width: 284px;
}
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiQuickSelectPopover__content {
width: 400px;
max-width: 100%;
}
.ouiQuickSelectPopover__section {
scrollbar-width: thin;
max-height: 132px;
overflow: hidden;
overflow-y: auto;
padding: 8px 0 4px;
}
.ouiQuickSelectPopover__section::-webkit-scrollbar {
width: 16px;
height: 16px;
}
.ouiQuickSelectPopover__section::-webkit-scrollbar-thumb {
background-color: rgba(90, 104, 117, 0.5);
border: 6px solid transparent;
background-clip: content-box;
}
.ouiQuickSelectPopover__section::-webkit-scrollbar-corner, .ouiQuickSelectPopover__section::-webkit-scrollbar-track {
background-color: transparent;
}
.ouiQuickSelectPopover__buttonText {
margin-right: 2px !important;
}
.ouiQuickSelectPopover__anchor {
height: 100%;
}
.ouiQuickSelectPopover__sectionItem {
font-size: 14px;
line-height: 14px;
}
.ouiQuickSelectPopover__sectionItem:not(:last-of-type) {
margin-bottom: 8px;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiQuickSelect__applyButton {
min-width: 0;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiRefreshInterval__startButton {
min-width: 90px;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiSuperDatePicker__flexWrapper {
max-width: calc(100% + 8px);
width: 606px;
}
.ouiSuperDatePicker__flexWrapper--isAutoRefreshOnly {
width: 400px;
}
.ouiSuperDatePicker__flexWrapper--noUpdateButton {
width: 480px;
}
.ouiSuperDatePicker {
max-width: 100% !important;
}
.ouiSuperDatePicker > .ouiFormControlLayout__childrenWrapper {
-webkit-flex: 1 1 100%;
flex: 1 1 100%;
overflow: hidden;
}
.ouiSuperDatePicker > .ouiFormControlLayout__childrenWrapper > .ouiDatePickerRange {
max-width: none;
width: auto;
border-radius: 0 0 0 0;
}
.ouiSuperDatePicker__startPopoverButton {
margin-right: -12px;
}
.ouiSuperDatePicker__startPopoverButton.ouiSuperDatePicker__startPopoverButton--compressed {
margin-right: -8px;
}
.ouiSuperDatePicker__prettyFormat {
font-family: var(--oui-font-family);
font-weight: 400;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-font-kerning: normal;
font-kerning: normal;
font-size: 14px;
color: #2A3947;
display: block;
width: 100%;
padding: 0 8px;
line-height: 38px;
height: 38px;
word-break: break-all;
transition: background 150ms ease-in;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
text-align: left;
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
.ouiSuperDatePicker__prettyFormat {
line-height: 1em;
}
}
.ouiSuperDatePicker__prettyFormat::-webkit-input-placeholder {
color: #686c75;
opacity: 1;
}
.ouiSuperDatePicker__prettyFormat::-moz-placeholder {
color: #686c75;
opacity: 1;
}
.ouiSuperDatePicker__prettyFormat::placeholder {
color: #686c75;
opacity: 1;
}
.ouiSuperDatePicker__prettyFormat:not(:disabled):hover, .ouiSuperDatePicker__prettyFormat:focus {
text-decoration: none;
}
.ouiSuperDatePicker__prettyFormat:not(:disabled):hover .ouiSuperDatePicker__prettyFormatLink, .ouiSuperDatePicker__prettyFormat:focus .ouiSuperDatePicker__prettyFormatLink {
text-decoration: underline;
}
.ouiSuperDatePicker__prettyFormat:disabled {
background-color: #dde0e3;
color: #5A6875;
cursor: not-allowed;
}
.ouiSuperDatePicker__prettyFormat:disabled .ouiSuperDatePicker__prettyFormatLink {
display: none;
}
.ouiSuperDatePicker__prettyFormat--compressed {
line-height: 30px;
height: 30px;
}
.ouiSuperDatePicker__prettyFormatLink {
color: #0268BC;
padding-left: 4px;
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
@media only screen and (max-width: 574px) {
.ouiSuperDatePicker__flexWrapper {
width: calc(100% + 8px);
}
.ouiSuperDatePicker__prettyFormatLink {
-webkit-flex-shrink: 1;
flex-shrink: 1;
min-width: 3em;
}
}
@media only screen and (min-width: 575px) and (max-width: 767px) {
.ouiSuperDatePicker__flexWrapper {
width: calc(100% + 8px);
}
.ouiSuperDatePicker__prettyFormatLink {
-webkit-flex-shrink: 1;
flex-shrink: 1;
min-width: 3em;
}
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiSuperUpdateButton {
min-width: 118px;
}
@media only screen and (max-width: 574px) {
.ouiSuperUpdateButton {
min-width: 0;
}
.ouiSuperUpdateButton .ouiSuperUpdateButton__text {
display: none;
}
}
@media only screen and (min-width: 575px) and (max-width: 767px) {
.ouiSuperUpdateButton {
min-width: 0;
}
.ouiSuperUpdateButton .ouiSuperUpdateButton__text {
display: none;
}
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiDataGrid {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: stretch;
align-items: stretch;
overflow: hidden;
height: 100%;
}
.ouiDataGrid--fullScreen {
height: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 8000;
background: #FCFEFF;
}
.ouiDataGrid--fullScreen .ouiDataGrid__pagination {
padding-bottom: 4px;
background: #E3E5E8;
border-top: 1px solid #D6D9DD;
}
.ouiDataGrid--fullScreen .ouiDataGrid__verticalScroll .ouiDataGridRow {
will-change: transform;
}
.ouiDataGrid__content {
height: 100%;
font-feature-settings: "tnum" 1;
max-width: 100%;
width: 100%;
z-index: 2;
background: #FCFEFF;
}
.ouiDataGrid__controls {
background: #F0F2F4;
position: relative;
z-index: 3;
border: 1px solid #D6D9DD;
padding: 4px;
-webkit-flex-grow: 0;
flex-grow: 0;
}
.ouiDataGrid__controls > * {
margin-left: 2px;
}
.ouiDataGrid__controlBtn {
border-radius: 4px;
}
.ouiDataGrid__controlBtn:focus {
background: #cdced2;
}
.ouiDataGrid__controlBtn--active,
.ouiDataGrid__controlBtn--active:focus {
font-weight: 500;
color: #0A1219;
}
.ouiDataGrid--bordersNone .ouiDataGrid__controls {
border: none;
background: #FCFEFF;
}
.ouiDataGrid--bordersHorizontal .ouiDataGrid__controls {
border-right: none;
border-left: none;
border-top: none;
background: #FCFEFF;
}
.ouiDataGrid__pagination {
padding-top: 4px;
-webkit-flex-grow: 0;
flex-grow: 0;
}
.ouiDataGrid__verticalScroll {
-webkit-flex-grow: 1;
flex-grow: 1;
overflow-y: hidden;
height: 100%;
}
.ouiDataGrid__overflow {
overflow-y: hidden;
height: 100%;
background: #FCFEFF;
}
.ouiDataGrid__restrictBody {
height: 100vh;
overflow: hidden;
}
.ouiDataGrid__controlScroll {
scrollbar-width: thin;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
-webkit-mask-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.1) 0%, red 7.5px, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%);
mask-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.1) 0%, red 7.5px, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%);
contain: paint;
max-height: 400px;
padding: 8px;
margin: -8px;
}
.ouiDataGrid__controlScroll::-webkit-scrollbar {
width: 16px;
height: 16px;
}
.ouiDataGrid__controlScroll::-webkit-scrollbar-thumb {
background-color: rgba(90, 104, 117, 0.5);
border: 6px solid transparent;
background-clip: content-box;
}
.ouiDataGrid__controlScroll::-webkit-scrollbar-corner, .ouiDataGrid__controlScroll::-webkit-scrollbar-track {
background-color: transparent;
}
.ouiDataGrid__controlScroll:focus {
outline: none; /* 1 */
}
.ouiDataGrid__controlScroll[tabindex="0"]:focus:focus-visible {
outline-style: auto; /* 2 */
}
.ouiDataGrid__focusWrap {
height: 100%;
}
.ouiDataGrid__virtualized {
scrollbar-width: thin;
scroll-padding: 0;
}
.ouiDataGrid__virtualized::-webkit-scrollbar {
width: 16px;
height: 16px;
}
.ouiDataGrid__virtualized::-webkit-scrollbar-thumb {
background-color: rgba(90, 104, 117, 0.5);
border: 6px solid #FCFEFF;
background-clip: content-box;
}
.ouiDataGrid__virtualized::-webkit-scrollbar-corner, .ouiDataGrid__virtualized::-webkit-scrollbar-track {
background-color: #FCFEFF;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiDataGridHeader {
display: -webkit-flex;
display: flex;
z-index: 3;
background: #FCFEFF;
position: -webkit-sticky;
position: sticky;
top: 0;
}
.ouiDataGridHeaderCell {
font-size: 14px;
font-size: 1rem;
line-height: 1.5;
font-weight: 500;
padding: 6px;
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
position: relative;
-webkit-align-items: center;
align-items: center;
display: -webkit-flex;
display: flex;
}
.ouiDataGridHeaderCell > * {
max-width: 100%;
width: 100%;
}
.ouiDataGridHeaderCell.ouiDataGridHeaderCell--numeric {
text-align: right;
}
.ouiDataGridHeaderCell.ouiDataGridHeaderCell--currency {
text-align: right;
}
.ouiDataGridHeaderCell:focus {
border: 1px solid transparent;
box-shadow: 0 0 0 2px rgba(2, 104, 188, 0.3);
border-radius: 1px;
z-index: 2;
outline: none;
border-top: none;
}
.ouiDataGridHeaderCell:not(.ouiDataGridHeaderCell--controlColumn):focus-within {
border: 1px solid transparent;
box-shadow: 0 0 0 2px rgba(2, 104, 188, 0.3);
border-radius: 1px;
z-index: 2;
outline: none;
border-top: none;
}
.ouiDataGridHeaderCell:not(.ouiDataGridHeaderCell--controlColumn) .ouiDataGridHeaderCell__sortingArrow {
margin-right: 4px;
}
.ouiDataGridHeaderCell:not(.ouiDataGridHeaderCell--controlColumn) .ouiDataGridHeaderCell__anchor {
width: 100%;
}
.ouiDataGridHeaderCell:not(.ouiDataGridHeaderCell--controlColumn) .ouiDataGridHeaderCell__button {
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
position: relative;
-webkit-align-items: center;
align-items: center;
display: -webkit-flex;
display: flex;
width: 100%;
font-weight: 500;
outline: none;
}
.ouiDataGridHeaderCell:not(.ouiDataGridHeaderCell--controlColumn) .ouiDataGridHeaderCell__button .ouiDataGridHeaderCell__sortingArrow {
-webkit-flex-grow: 0;
flex-grow: 0;
}
.ouiDataGridHeaderCell:not(.ouiDataGridHeaderCell--controlColumn) .ouiDataGridHeaderCell__content {
max-width: 100%;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
word-wrap: normal !important;
overflow: hidden;
white-space: nowrap;
text-align: left;
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-align-self: baseline;
align-self: baseline;
}
.ouiDataGridHeaderCell:not(.ouiDataGridHeaderCell--controlColumn) .ouiDataGridHeaderCell__icon {
-webkit-flex-grow: 0;
flex-grow: 0;
-webkit-flex-basis: auto;
flex-basis: auto;
width: auto;
padding-left: 4px;
}
.ouiDataGridHeader__action--selected {
font-weight: 500 !important;
}
.ouiDataGrid--bordersNone.ouiDataGrid--bordersHorizontal .ouiDataGridHeader {
background: #FCFEFF;
}
.ouiDataGrid--headerUnderline .ouiDataGridHeaderCell {
border-top: none;
border-left: none;
border-right: none;
border-bottom: 2px solid #D6D9DD;
border-bottom-color: #2A3947;
}
.ouiDataGrid--bordersNone.ouiDataGrid--headerUnderline .ouiDataGridHeaderCell {
border-bottom: 2px solid #D6D9DD;
border-color: #2A3947;
}
.ouiDataGrid--headerShade .ouiDataGridHeaderCell {
background: #e3e5e8;
}
.ouiDataGrid--headerShade.ouiDataGrid--bordersAll .ouiDataGridHeaderCell {
border-right: 1px solid #D6D9DD;
border-bottom: 1px solid #D6D9DD;
border-left: none;
}
.ouiDataGrid--headerShade.ouiDataGrid--bordersAll .ouiDataGridHeaderCell:first-of-type {
border-left: 1px solid #D6D9DD;
}
.ouiDataGrid--headerShade.ouiDataGrid--bordersHorizontal .ouiDataGridHeaderCell {
border-top: none;
border-bottom: 1px solid #D6D9DD;
}
.ouiDataGrid--bordersNone .ouiDataGridHeaderCell {
border: none;
}
.ouiDataGrid--borderhorizontal .ouiDataGridHeaderCell {
border-top: none;
border-right: none;
border-left: none;
}
.ouiDataGrid--fontSizeSmall .ouiDataGridHeaderCell {
font-size: 12.000002px;
font-size: 0.857143rem;
line-height: 1.5;
}
.ouiDataGrid--fontSizeLarge .ouiDataGridHeaderCell {
font-size: 14px;
font-size: 1rem;
line-height: 1.5;
}
.ouiDataGrid--paddingSmall .ouiDataGridHeaderCell {
padding: 4px;
}
.ouiDataGrid--paddingLarge .ouiDataGridHeaderCell {
padding: 8px;
}
.ouiDataGrid--noControls.ouiDataGrid--bordersAll .ouiDataGridHeaderCell {
border-top: 1px solid #D6D9DD;
}
.ouiDataGrid--noControls.ouiDataGrid--bordersHorizontal .ouiDataGridHeaderCell {
border-top: 1px solid #D6D9DD;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiDataGridRowCell.ouiDataGridFooterCell {
font-weight: 500;
}
.ouiDataGrid--stickyFooter .ouiDataGridFooter {
position: -webkit-sticky;
position: sticky;
bottom: 0;
}
.ouiDataGrid--footerOverline .ouiDataGridRowCell.ouiDataGridFooterCell {
border-top: 2px solid #D6D9DD;
border-top-color: #2A3947 !important;
background: #FCFEFF !important;
}
.ouiDataGrid--bordersNone .ouiDataGridRowCell.ouiDataGridFooterCell {
border-left: none;
border-right: none;
}
.ouiDataGrid--bordersHorizontal .ouiDataGridRowCell.ouiDataGridFooterCell {
border-left: none;
border-right: none;
}
.ouiDataGrid--footerShade .ouiDataGridRowCell.ouiDataGridFooterCell {
background: #e3e5e8;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiDataGridColumnResizer {
position: absolute;
top: 0;
right: -8px;
height: 100%;
width: 16px;
cursor: ew-resize;
opacity: 0;
z-index: 2;
}
.ouiDataGridColumnResizer:after {
content: "";
position: absolute;
left: 7px;
top: 0;
bottom: 0;
width: 3px;
background-color: #0268BC;
}
.ouiDataGridColumnResizer:hover, .ouiDataGridColumnResizer:active {
opacity: 1;
}
.ouiDataGridColumnResizer:hover ~ .ouiDataGridHeaderCell__content, .ouiDataGridColumnResizer:active ~ .ouiDataGridHeaderCell__content {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.ouiDataGridHeaderCell:last-child .ouiDataGridColumnResizer {
right: 0;
width: 8px;
}
.ouiDataGridHeaderCell:last-child .ouiDataGridColumnResizer:after {
left: auto;
right: 0;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiDataGridRow {
display: -webkit-flex;
display: flex;
}
.ouiDataGridRowCell {
font-size: 14px;
font-size: 1rem;
line-height: 1.5;
padding: 6px;
border-right: solid 1px #edeff1;
border-bottom: 1px solid #D6D9DD;
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
background: #FCFEFF;
position: relative;
-webkit-align-items: center;
align-items: center;
display: -webkit-flex;
display: flex;
}
.ouiDataGridRowCell > * {
max-width: 100%;
width: 100%;
}
.ouiDataGridRowCell.ouiDataGridRowCell--firstColumn {
border-left: 1px solid #D6D9DD;
}
.ouiDataGridRowCell.ouiDataGridRowCell--lastColumn {
border-right-color: #D6D9DD;
}
.ouiDataGridRowCell:focus {
border: 1px solid transparent;
box-shadow: 0 0 0 2px rgba(2, 104, 188, 0.3);
border-radius: 1px;
z-index: 2;
outline: none;
margin-top: -1px;
}
.ouiDataGridRowCell:hover .ouiDataGridRowCell__expandButtonIcon {
-webkit-animation-duration: 90ms;
animation-duration: 90ms;
-webkit-animation-name: ouiDataGridCellButtonSlideIn;
animation-name: ouiDataGridCellButtonSlideIn;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-delay: 250ms;
animation-delay: 250ms;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.ouiDataGridRowCell:hover .ouiDataGridRowCell__actionButtonIcon {
-webkit-animation-duration: 90ms;
animation-duration: 90ms;
-webkit-animation-name: ouiDataGridCellButtonSlideIn;
animation-name: ouiDataGridCellButtonSlideIn;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-delay: 250ms;
animation-delay: 250ms;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.ouiDataGridRowCell:not(:hover) .ouiDataGridRowCell__expandButtonIcon, .ouiDataGridRowCell.ouiDataGridRowCell--open .ouiDataGridRowCell__expandButtonIcon {
-webkit-animation: none;
animation: none;
margin-left: 6px;
width: 12px;
}
.ouiDataGridRowCell:not(:hover) .ouiDataGridRowCell__actionButtonIcon, .ouiDataGridRowCell.ouiDataGridRowCell--open .ouiDataGridRowCell__actionButtonIcon {
-webkit-animation: none;
animation: none;
margin-left: 6px;
width: 12px;
}
.ouiDataGridRowCell:focus .ouiDataGridRowCell__actionButtonIcon {
margin-left: 6px;
width: 12px;
}
.ouiDataGridRowCell:not(:hover):not(:focus):not(.ouiDataGridRowCell--open) .ouiDataGridRowCell__expandButtonIcon,
.ouiDataGridRowCell:not(:hover):not(:focus):not(.ouiDataGridRowCell--open) .ouiDataGridRowCell__actionButtonIcon {
display: none;
}
.ouiDataGridRowCell:focus:not(:first-of-type) {
padding-left: 5px;
}
.ouiDataGridRowCell.ouiDataGridRowCell--numeric {
text-align: right;
}
.ouiDataGridRowCell.ouiDataGridRowCell--currency {
text-align: right;
}
.ouiDataGridRowCell.ouiDataGridRowCell--uppercase {
text-transform: uppercase;
}
.ouiDataGridRowCell.ouiDataGridRowCell--lowercase {
text-transform: lowercase;
}
.ouiDataGridRowCell.ouiDataGridRowCell--capitalize {
text-transform: capitalize;
}
.ouiDataGridRowCell:not(.ouiDataGridRowCell--controlColumn) .ouiDataGridRowCell__content,
.ouiDataGridRowCell:not(.ouiDataGridRowCell--controlColumn) .ouiDataGridRowCell__truncate, .ouiDataGridRowCell:not(.ouiDataGridRowCell--controlColumn).ouiDataGridRowCell__truncate,
.ouiDataGridRowCell:not(.ouiDataGridRowCell--controlColumn) .ouiDataGridRowCell__expandContent {
max-width: 100%;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
word-wrap: normal !important;
overflow: hidden;
white-space: nowrap;
}
.ouiDataGridRowCell__popover {
scrollbar-width: thin;
overflow: auto;
max-width: 400px !important;
max-height: 400px !important;
}
.ouiDataGridRowCell__popover::-webkit-scrollbar {
width: 16px;
height: 16px;
}
.ouiDataGridRowCell__popover::-webkit-scrollbar-thumb {
background-color: rgba(90, 104, 117, 0.5);
border: 6px solid transparent;
background-clip: content-box;
}
.ouiDataGridRowCell__popover::-webkit-scrollbar-corner, .ouiDataGridRowCell__popover::-webkit-scrollbar-track {
background-color: transparent;
}
.ouiDataGridRowCell__expand {
width: 100%;
max-width: 100%;
}
.ouiDataGridRowCell__expandFlex {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
height: 100%;
}
.ouiDataGridRowCell__expandContent {
-webkit-flex-grow: 1;
flex-grow: 1;
}
.ouiDataGridRowCell__contentByHeight {
-webkit-flex-grow: 1;
flex-grow: 1;
height: 100%;
}
.ouiDataGridRowCell__alignBaseLine {
-webkit-align-items: baseline;
align-items: baseline;
}
.ouiDataGridRowCell__actionButtonIcon, .ouiDataGridRowCell__expandButtonIcon {
height: 12px;
border-radius: 2px;
width: 0;
overflow: hidden;
transition: none;
}
.ouiDataGridRowCell__expandButtonIcon {
box-shadow: none !important;
/* ToDo: Remove unnecessary logic: the old beta theme has
* evolved and the statement below about the `Next` theme
* is not valid.
*/
border: none;
}
.ouiDataGridRowCell__expandButtonIcon-isActive {
margin-left: 6px;
width: 12px;
}
.ouiDataGridRowCell__expandButton > * {
z-index: 2;
}
.ouiDataGridRowCell__expandButton {
display: -webkit-flex;
display: flex;
-webkit-flex-grow: 0;
flex-grow: 0;
position: absolute;
top: calc(1.5em / 2 + 6px);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
right: 0;
padding-right: 6px;
z-index: 1;
padding-left: 12px;
padding-top: 6px;
padding-bottom: 6px;
}
.ouiDataGridRowCell__expandButton::before {
content: "";
position: absolute;
display: block;
right: 0;
top: 0;
height: 100%;
width: 100%;
background-image: linear-gradient(to right, transparent 0, #FCFEFF 12px);
z-index: 1;
}
.ouiDataGridRowCell__expandButton > * {
z-index: 2;
}
.ouiDataGrid--rowHoverHighlight .ouiDataGridRow:hover .ouiDataGridRowCell {
background-color: #FFE1B0 !important;
}
.ouiDataGrid--stripes .ouiDataGridRowCell.ouiDataGridRowCell--stripe {
background: #E3E5E8;
}
.ouiDataGrid--bordersNone .ouiDataGridRowCell {
border-color: transparent !important;
}
.ouiDataGrid--bordersHorizontal .ouiDataGridRowCell {
border-right-color: transparent;
border-left-color: transparent;
}
.ouiDataGrid--fontSizeSmall .ouiDataGridRowCell {
font-size: 12.000002px;
font-size: 0.857143rem;
line-height: 1.5;
}
.ouiDataGridRowCell--fontSizeSmall {
font-size: 12.000002px;
font-size: 0.857143rem;
line-height: 1.5;
}
.ouiDataGrid--fontSizeLarge .ouiDataGridRowCell {
font-size: 14px;
font-size: 1rem;
line-height: 1.5;
}
.ouiDataGridRowCell--fontSizeLarge {
font-size: 14px;
font-size: 1rem;
line-height: 1.5;
}
.ouiDataGrid--paddingSmall .ouiDataGridRowCell {
padding: 4px;
}
.ouiDataGrid--paddingSmall .ouiDataGridRowCell:focus:not(:first-of-type) {
padding-left: 3px;
}
.ouiDataGridRowCell--paddingSmall {
padding: 4px;
}
.ouiDataGrid--paddingLarge .ouiDataGridRowCell {
padding: 8px;
}
.ouiDataGrid--paddingLarge .ouiDataGridRowCell:focus:not(:first-of-type) {
padding-left: 7px;
}
.ouiDataGridRowCell--paddingLarge {
padding: 8px;
}
@-webkit-keyframes ouiDataGridCellButtonSlideIn {
from {
margin-left: 0;
width: 0;
}
to {
margin-left: 6px;
width: 12px;
}
}
@keyframes ouiDataGridCellButtonSlideIn {
from {
margin-left: 0;
width: 0;
}
to {
margin-left: 6px;
width: 12px;
}
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiDataGridColumnSelector__item {
padding: 4px;
}
.ouiDataGridColumnSelector__item-isDragging {
box-shadow: 0 12px 24px 0 rgba(78, 92, 110, 0.1), 0 6px 12px 0 rgba(78, 92, 110, 0.1), 0 4px 4px 0 rgba(78, 92, 110, 0.1), 0 2px 2px 0 rgba(78, 92, 110, 0.1);
background: #FCFEFF;
}
.ouiDataGridColumnSelector__columnList {
scrollbar-width: thin;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
-webkit-mask-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.1) 0%, red 7.5px, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%);
mask-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.1) 0%, red 7.5px, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%);
contain: paint;
max-height: 400px;
margin: 0 -8px;
}
.ouiDataGridColumnSelector__columnList::-webkit-scrollbar {
width: 16px;
height: 16px;
}
.ouiDataGridColumnSelector__columnList::-webkit-scrollbar-thumb {
background-color: rgba(90, 104, 117, 0.5);
border: 6px solid transparent;
background-clip: content-box;
}
.ouiDataGridColumnSelector__columnList::-webkit-scrollbar-corner, .ouiDataGridColumnSelector__columnList::-webkit-scrollbar-track {
background-color: transparent;
}
.ouiDataGridColumnSelector__columnList:focus {
outline: none; /* 1 */
}
.ouiDataGridColumnSelector__columnList[tabindex="0"]:focus:focus-visible {
outline-style: auto; /* 2 */
}
.ouiDataGridColumnSelector__itemLabel {
font-size: 12.000002px;
font-size: 0.857143rem;
line-height: 1.5;
}
.ouiDataGridColumnSelectorPopover {
-webkit-transform: none !important;
transform: none !important;
transition: none !important;
margin-top: -8px;
min-width: 192px;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiDataGridColumnSorting__item-isDragging {
box-shadow: 0 12px 24px 0 rgba(78, 92, 110, 0.1), 0 6px 12px 0 rgba(78, 92, 110, 0.1), 0 4px 4px 0 rgba(78, 92, 110, 0.1), 0 2px 2px 0 rgba(78, 92, 110, 0.1);
background: #FCFEFF;
}
.ouiDataGridColumnSortingPopover {
-webkit-transform: none !important;
transform: none !important;
transition: none !important;
margin-top: -8px;
min-width: 192px;
}
.ouiDataGridColumnSorting__fieldList {
scrollbar-width: thin;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
-webkit-mask-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.1) 0%, red 7.5px, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%);
mask-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.1) 0%, red 7.5px, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%);
contain: paint;
padding-top: 4px;
padding-bottom: 4px;
max-height: 300px;
}
.ouiDataGridColumnSorting__fieldList::-webkit-scrollbar {
width: 16px;
height: 16px;
}
.ouiDataGridColumnSorting__fieldList::-webkit-scrollbar-thumb {
background-color: rgba(90, 104, 117, 0.5);
border: 6px solid transparent;
background-clip: content-box;
}
.ouiDataGridColumnSorting__fieldList::-webkit-scrollbar-corner, .ouiDataGridColumnSorting__fieldList::-webkit-scrollbar-track {
background-color: transparent;
}
.ouiDataGridColumnSorting__fieldList:focus {
outline: none; /* 1 */
}
.ouiDataGridColumnSorting__fieldList[tabindex="0"]:focus:focus-visible {
outline-style: auto; /* 2 */
}
.ouiDataGridColumnSorting__field {
display: block;
padding: 4px 8px;
width: 100%;
outline-offset: -3px;
}
.ouiDataGridColumnSorting__field:hover {
cursor: pointer;
text-decoration: underline;
}
.ouiDataGridColumnSorting__field:focus {
cursor: pointer;
text-decoration: underline;
background-color: #e3eff8;
}
.ouiDataGridColumnSorting__field:disabled {
cursor: not-allowed;
text-decoration: none;
color: #a3a7ae;
}
.ouiDataGridColumnSorting__orderButtons {
padding-left: 24px;
}
@media only screen and (max-width: 574px) {
.ouiDataGridColumnSorting__orderButtons {
padding-left: 4px;
}
}
@media only screen and (min-width: 575px) and (max-width: 767px) {
.ouiDataGridColumnSorting__orderButtons {
padding-left: 4px;
}
}
.ouiDataGridColumnSorting__orderButtons .ouiDataGridColumnSorting__order {
min-width: 200px;
border: none;
}
@media only screen and (max-width: 574px) {
.ouiDataGridColumnSorting__orderButtons .ouiDataGridColumnSorting__order {
min-width: unset;
}
}
@media only screen and (min-width: 575px) and (max-width: 767px) {
.ouiDataGridColumnSorting__orderButtons .ouiDataGridColumnSorting__order {
min-width: unset;
}
}
.ouiDataGridColumnSorting__orderButtons .ouiDataGridColumnSorting__order button {
font-size: 12.000002px !important;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiDescriptionList.ouiDescriptionList--row .ouiDescriptionList__title {
color: #161e2b;
font-size: 16.0006px;
font-size: 1.1429rem;
line-height: 1.35715rem;
font-weight: 500;
line-height: 1.5;
margin-top: 16px;
}
.ouiDescriptionList.ouiDescriptionList--row .ouiDescriptionList__title:first-of-type {
margin-top: 0;
}
.ouiDescriptionList.ouiDescriptionList--row .ouiDescriptionList__description {
font-size: 14px;
font-size: 1rem;
line-height: 1.5;
}
.ouiDescriptionList.ouiDescriptionList--row.ouiDescriptionList--center {
text-align: center;
}
.ouiDescriptionList.ouiDescriptionList--row.ouiDescriptionList--reverse .ouiDescriptionList__title {
color: #2A3947;
font-weight: 400;
font-size: 14px;
font-size: 1rem;
line-height: 1.5;
}
.ouiDescriptionList.ouiDescriptionList--row.ouiDescriptionList--reverse .ouiDescriptionList__description {
color: #161e2b;
font-size: 16.0006px;
font-size: 1.1429rem;
line-height: 1.35715rem;
font-weight: 500;
}
.ouiDescriptionList.ouiDescriptionList--row.ouiDescriptionList--compressed .ouiDescriptionList__title {
color: #161e2b;
font-size: 14px;
font-size: 1rem;
line-height: 1.2143rem;
font-weight: 500;
line-height: 1.5;
}
.ouiDescriptionList.ouiDescriptionList--row.ouiDescriptionList--compressed .ouiDescriptionList__description {
font-size: 14px;
font-size: 1rem;
line-height: 1.5;
}
.ouiDescriptionList.ouiDescriptionList--row.ouiDescriptionList--compressed.ouiDescriptionList--reverse .ouiDescriptionList__title {
color: #2A3947;
font-weight: 400;
font-size: 14px;
font-size: 1rem;
line-height: 1.5;
}
.ouiDescriptionList.ouiDescriptionList--row.ouiDescriptionList--compressed.ouiDescriptionList--reverse .ouiDescriptionList__description {
color: #161e2b;
font-size: 14px;
font-size: 1rem;
line-height: 1.2143rem;
font-weight: 500;
line-height: 1.5;
}
.ouiDescriptionList.ouiDescriptionList--column, .ouiDescriptionList.ouiDescriptionList--responsiveColumn {
display: -webkit-flex;
display: flex;
-webkit-align-items: stretch;
align-items: stretch;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.ouiDescriptionList.ouiDescriptionList--column > *, .ouiDescriptionList.ouiDescriptionList--responsiveColumn > * {
margin-top: 16px;
}
.ouiDescriptionList.ouiDescriptionList--column > *:first-child,
.ouiDescriptionList.ouiDescriptionList--column > :nth-child(2), .ouiDescriptionList.ouiDescriptionList--responsiveColumn > *:first-child,
.ouiDescriptionList.ouiDescriptionList--responsiveColumn > :nth-child(2) {
margin-top: 0;
}
.ouiDescriptionList.ouiDescriptionList--column .ouiDescriptionList__title, .ouiDescriptionList.ouiDescriptionList--responsiveColumn .ouiDescriptionList__title {
color: #161e2b;
font-size: 16.0006px;
font-size: 1.1429rem;
line-height: 1.35715rem;
font-weight: 500;
line-height: 1.5;
width: 50%;
padding-right: 8px;
}
.ouiDescriptionList.ouiDescriptionList--column .ouiDescriptionList__description, .ouiDescriptionList.ouiDescriptionList--responsiveColumn .ouiDescriptionList__description {
font-size: 14px;
font-size: 1rem;
line-height: 1.5;
width: 50%;
padding-left: 8px;
}
.ouiDescriptionList.ouiDescriptionList--column.ouiDescriptionList--center .ouiDescriptionList__title, .ouiDescriptionList.ouiDescriptionList--responsiveColumn.ouiDescriptionList--center .ouiDescriptionList__title {
text-align: right;
}
.ouiDescriptionList.ouiDescriptionList--column.ouiDescriptionList--reverse .ouiDescriptionList__title, .ouiDescriptionList.ouiDescriptionList--responsiveColumn.ouiDescriptionList--reverse .ouiDescriptionList__title {
color: #2A3947;
font-weight: 400;
font-size: 14px;
font-size: 1rem;
line-height: 1.5;
}
.ouiDescriptionList.ouiDescriptionList--column.ouiDescriptionList--reverse .ouiDescriptionList__description, .ouiDescriptionList.ouiDescriptionList--responsiveColumn.ouiDescriptionList--reverse .ouiDescriptionList__description {
color: #161e2b;
font-size: 16.0006px;
font-size: 1.1429rem;
line-height: 1.35715rem;
font-weight: 500;
line-height: 1.5;
}
.ouiDescriptionList.ouiDescriptionList--column.ouiDescriptionList--compressed .ouiDescriptionList__title, .ouiDescriptionList.ouiDescriptionList--responsiveColumn.ouiDescriptionList--compressed .ouiDescriptionList__title {
color: #161e2b;
font-size: 14px;
font-size: 1rem;
line-height: 1.2143rem;
font-weight: 500;
line-height: 1.5;
}
.ouiDescriptionList.ouiDescriptionList--column.ouiDescriptionList--compressed .ouiDescriptionList__description, .ouiDescriptionList.ouiDescriptionList--responsiveColumn.ouiDescriptionList--compressed .ouiDescriptionList__description {
font-size: 14px;
font-size: 1rem;
line-height: 1.5;
}
.ouiDescriptionList.ouiDescriptionList--column.ouiDescriptionList--compressed.ouiDescriptionList--reverse .ouiDescriptionList__title, .ouiDescriptionList.ouiDescriptionList--responsiveColumn.ouiDescriptionList--compressed.ouiDescriptionList--reverse .ouiDescriptionList__title {
color: #2A3947;
font-weight: 400;
font-size: 14px;
font-size: 1rem;
line-height: 1.5;
}
.ouiDescriptionList.ouiDescriptionList--column.ouiDescriptionList--compressed.ouiDescriptionList--reverse .ouiDescriptionList__description, .ouiDescriptionList.ouiDescriptionList--responsiveColumn.ouiDescriptionList--compressed.ouiDescriptionList--reverse .ouiDescriptionList__description {
color: #161e2b;
font-size: 14px;
font-size: 1rem;
line-height: 1.2143rem;
font-weight: 500;
line-height: 1.5;
}
@media only screen and (max-width: 574px) {
.ouiDescriptionList.ouiDescriptionList--responsiveColumn {
display: block;
}
.ouiDescriptionList.ouiDescriptionList--responsiveColumn .ouiDescriptionList__title,
.ouiDescriptionList.ouiDescriptionList--responsiveColumn .ouiDescriptionList__description {
width: 100%;
padding: 0;
}
.ouiDescriptionList.ouiDescriptionList--responsiveColumn .ouiDescriptionList__description {
font-size: 14px;
font-size: 1rem;
line-height: 1.5;
margin-top: 0;
}
.ouiDescriptionList.ouiDescriptionList--responsiveColumn.ouiDescriptionList--center .ouiDescriptionList__title,
.ouiDescriptionList.ouiDescriptionList--responsiveColumn.ouiDescriptionList--center .ouiDescriptionList__description {
text-align: center;
}
.ouiDescriptionList.ouiDescriptionList--responsiveColumn.ouiDescriptionList--reverse .ouiDescriptionList__title {
font-size: 14px;
font-size: 1rem;
line-height: 1.5;
}
.ouiDescriptionList.ouiDescriptionList--responsiveColumn.ouiDescriptionList--reverse .ouiDescriptionList__description {
color: #161e2b;
font-size: 16.0006px;
font-size: 1.1429rem;
line-height: 1.35715rem;
font-weight: 500;
}
}
@media only screen and (min-width: 575px) and (max-width: 767px) {
.ouiDescriptionList.ouiDescriptionList--responsiveColumn {
display: block;
}
.ouiDescriptionList.ouiDescriptionList--responsiveColumn .ouiDescriptionList__title,
.ouiDescriptionList.ouiDescriptionList--responsiveColumn .ouiDescriptionList__description {
width: 100%;
padding: 0;
}
.ouiDescriptionList.ouiDescriptionList--responsiveColumn .ouiDescriptionList__description {
font-size: 14px;
font-size: 1rem;
line-height: 1.5;
margin-top: 0;
}
.ouiDescriptionList.ouiDescriptionList--responsiveColumn.ouiDescriptionList--center .ouiDescriptionList__title,
.ouiDescriptionList.ouiDescriptionList--responsiveColumn.ouiDescriptionList--center .ouiDescriptionList__description {
text-align: center;
}
.ouiDescriptionList.ouiDescriptionList--responsiveColumn.ouiDescriptionList--reverse .ouiDescriptionList__title {
font-size: 14px;
font-size: 1rem;
line-height: 1.5;
}
.ouiDescriptionList.ouiDescriptionList--responsiveColumn.ouiDescriptionList--reverse .ouiDescriptionList__description {
color: #161e2b;
font-size: 16.0006px;
font-size: 1.1429rem;
line-height: 1.35715rem;
font-weight: 500;
}
}
.ouiDescriptionList.ouiDescriptionList--inline .ouiDescriptionList__title {
font-size: 14px;
font-size: 1rem;
line-height: 1.5;
display: inline;
border-radius: 4px;
font-weight: 400;
background: #E3E5E8;
border: 1px solid #D6D9DD;
padding: 0 4px;
margin: 0 4px;
}
.ouiDescriptionList.ouiDescriptionList--inline .ouiDescriptionList__title:first-of-type {
margin-left: 0;
}
.ouiDescriptionList.ouiDescriptionList--inline .ouiDescriptionList__description {
font-size: 14px;
font-size: 1rem;
line-height: 1.5;
display: inline;
word-break: break-all;
}
.ouiDescriptionList.ouiDescriptionList--inline.ouiDescriptionList--compressed .ouiDescriptionList__title {
font-size: 12.000002px;
font-size: 0.857143rem;
line-height: 1.5;
}
.ouiDescriptionList.ouiDescriptionList--inline.ouiDescriptionList--compressed .ouiDescriptionList__description {
font-size: 12.000002px;
font-size: 0.857143rem;
line-height: 1.5;
}
.ouiDescriptionList.ouiDescriptionList--inline.ouiDescriptionList--center {
text-align: center;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiDraggable.ouiDraggable--isDragging {
z-index: 9000 !important;
}
.ouiDraggable.ouiDraggable--hasClone:not(.ouiDraggable--isDragging) {
-webkit-transform: none !important;
transform: none !important;
}
.ouiDraggable.ouiDraggable--withoutDropAnimation {
transition-duration: 0.001s !important;
}
.ouiDraggable:focus > .ouiDraggable__item, .ouiDraggable.ouiDraggable--hasCustomDragHandle > .ouiDraggable__item [data-react-beautiful-dnd-drag-handle]:focus {
-webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important;
animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important;
}
.ouiDraggable .ouiDraggable__item.ouiDraggable__item--isDisabled {
cursor: not-allowed;
}
.ouiDraggable--s {
padding: 2px;
}
.ouiDraggable--m {
padding: 4px;
}
.ouiDraggable--l {
padding: 8px;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiDroppable {
transition: background-color 500ms ease;
}
.ouiDroppable.ouiDroppable--isDraggingType:not(.ouiDroppable--isDisabled) {
background-color: rgba(15, 123, 104, 0.1);
}
.ouiDroppable.ouiDroppable--isDraggingType:not(.ouiDroppable--isDisabled).ouiDroppable--isDraggingOver {
background-color: rgba(15, 123, 104, 0.25);
}
.ouiDroppable .ouiDroppable__placeholder.ouiDroppable__placeholder--isHidden {
display: none !important;
}
.ouiDroppable--withPanel {
background-color: #FCFEFF;
border: 1px solid #D6D9DD;
border-radius: 4px;
-webkit-flex-grow: 1;
flex-grow: 1;
}
.ouiDroppable--withPanel.ouiDroppable--withPanel--flexGrowZero {
-webkit-flex-grow: 0;
flex-grow: 0;
}
.ouiDroppable--withPanel.ouiDroppable--withPanel--noBorder {
border: none;
}
.ouiDroppable--withPanel.ouiDroppable--withPanel--hasShadow {
box-shadow: 0 2px 2px -1px rgba(173, 180, 186, 0.3), 0 1px 5px -2px rgba(173, 180, 186, 0.3);
border: 1px solid #D6D9DD;
}
.ouiDroppable--withPanel.ouiDroppable--withPanel--isClickable {
transition: all 150ms cubic-bezier(0.694, 0.0482, 0.335, 1);
}
.ouiDroppable--withPanel.ouiDroppable--withPanel--isClickable:enabled {
display: block;
width: 100%;
text-align: left;
}
.ouiDroppable--withPanel.ouiDroppable--withPanel--isClickable:hover, .ouiDroppable--withPanel.ouiDroppable--withPanel--isClickable:focus {
box-shadow: 0 4px 8px 0 rgba(173, 180, 186, 0.15), 0 2px 2px -1px rgba(173, 180, 186, 0.3);
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
cursor: pointer;
}
.ouiDroppable--withPanel.ouiDroppable--withPanel--borderRadiusNone {
border-radius: 0;
}
.ouiDroppable--withPanel.ouiDroppable--withPanel--borderRadiusMedium {
border-radius: 4px;
}
.ouiDroppable--withPanel.ouiDroppable--withPanel--borderRadiusLarge {
border-radius: 8px;
}
.ouiDroppable--withPanel.ouiDroppable--withPanel--borderRadiusXLarge {
border-radius: 16px;
}
.ouiDroppable--withPanel.ouiDroppable--withPanel--transparent {
background-color: transparent;
}
.ouiDroppable--withPanel.ouiDroppable--withPanel--plain {
background-color: #FCFEFF;
}
.ouiDroppable--withPanel.ouiDroppable--withPanel--subdued {
background-color: #F0F2F4;
}
.ouiDroppable--withPanel.ouiDroppable--withPanel--accent {
background-color: #f2ecf9;
}
.ouiDroppable--withPanel.ouiDroppable--withPanel--primary {
background-color: #e3eff8;
}
.ouiDroppable--withPanel.ouiDroppable--withPanel--success {
background-color: #e4f1f0;
}
.ouiDroppable--withPanel.ouiDroppable--withPanel--warning {
background-color: #f9f5ea;
}
.ouiDroppable--withPanel.ouiDroppable--withPanel--danger {
background-color: #f6ebeb;
}
.ouiDroppable--withPanel {
box-shadow: 0 6px 12px -1px rgba(173, 180, 186, 0.2), 0 4px 4px -1px rgba(173, 180, 186, 0.2), 0 2px 2px 0 rgba(173, 180, 186, 0.2);
border-radius: 4px;
}
.ouiDroppable--noGrow {
-webkit-flex-grow: 0;
flex-grow: 0;
}
.ouiDroppable--grow {
-webkit-flex-grow: 1;
flex-grow: 1;
}
.ouiDroppable--s {
padding: 2px;
}
.ouiDroppable--m {
padding: 4px;
}
.ouiDroppable--l {
padding: 8px;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
.ouiEmptyPrompt {
max-width: 36em;
text-align: center;
padding: 24px;
margin: auto;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiErrorBoundary {
background: repeating-linear-gradient(45deg, rgba(196, 61, 53, 0.25), rgba(196, 61, 53, 0.25) 1px, rgba(196, 61, 53, 0.05) 1px, rgba(196, 61, 53, 0.05) 20px);
overflow: auto;
padding: 16px;
}
.ouiErrorBoundary__text {
background-color: #FCFEFF;
padding: 8px;
}
.ouiErrorBoundary__stack {
white-space: pre-wrap;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/**
* 1. Keep each expression's text together as much as possible,
* but then wrap long words
*/
.ouiExpression {
overflow-wrap: break-word !important;
word-wrap: break-word !important;
word-break: break-word;
/* 1 */
font-size: 14px;
font-size: 1rem;
line-height: 1.5;
font-family: var(--oui-code-font-family);
letter-spacing: normal;
line-height: 1.5;
border-bottom: 2px solid transparent;
display: inline-block; /* 1 */
text-align: left;
padding: 2px 0;
transition: all 250ms ease-in-out;
color: #2A3947;
}
.ouiExpression:focus {
border-bottom-style: solid;
}
.ouiExpression + .ouiExpression {
margin-left: 8px;
}
.ouiExpression.ouiExpression--columns {
border-color: transparent;
border-bottom-style: solid;
margin-bottom: 4px;
}
.ouiExpression.ouiExpression--truncate {
max-width: 100%;
}
.ouiExpression.ouiExpression--truncate .ouiExpression__description,
.ouiExpression.ouiExpression--truncate .ouiExpression__value {
max-width: 100%;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
word-wrap: normal !important;
display: inline-block;
vertical-align: bottom;
}
.ouiExpression-isUppercase .ouiExpression__description {
text-transform: uppercase;
}
.ouiExpression-isClickable {
cursor: pointer;
border-bottom: 2px dotted #D6D9DD;
}
.ouiExpression-isClickable:hover:not(:disabled) {
border-bottom-style: solid;
-webkit-transform: translateY(-1px);
transform: translateY(-1px);
}
.ouiExpression__icon {
margin-left: 4px;
}
.ouiExpression-isActive {
border-bottom-style: solid;
}
.ouiExpression--columns {
width: 100%;
display: -webkit-flex;
display: flex;
padding: 4px;
border-radius: 4px;
}
.ouiExpression--columns.ouiExpression-isClickable {
background-color: #E3E5E8;
}
.ouiExpression--columns.ouiExpression-isClickable:focus .ouiExpression__description,
.ouiExpression--columns.ouiExpression-isClickable:focus .ouiExpression__value, .ouiExpression--columns.ouiExpression-isClickable:hover:not(:disabled) .ouiExpression__description,
.ouiExpression--columns.ouiExpression-isClickable:hover:not(:disabled) .ouiExpression__value {
text-decoration: underline;
}
.ouiExpression--columns .ouiExpression__description {
text-align: right;
margin-right: 8px;
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
.ouiExpression--columns .ouiExpression__value {
-webkit-flex-grow: 1;
flex-grow: 1;
}
.ouiExpression--columns .ouiExpression__icon {
margin-top: 4px;
}
.ouiExpression--subdued:focus {
background-color: rgba(104, 108, 117, 0.1);
}
.ouiExpression--subdued.ouiExpression-isActive {
border-bottom-color: #686c75;
border-color: #686c75;
}
.ouiExpression--subdued .ouiExpression__description {
color: #686c75;
}
.ouiExpression--primary:focus {
background-color: rgba(2, 104, 188, 0.1);
}
.ouiExpression--primary.ouiExpression-isActive {
border-bottom-color: #0268BC;
border-color: #0268BC;
}
.ouiExpression--primary .ouiExpression__description {
color: #0268BC;
}
.ouiExpression--success:focus {
background-color: rgba(15, 123, 104, 0.1);
}
.ouiExpression--success.ouiExpression-isActive {
border-bottom-color: #0F7B68;
border-color: #0F7B68;
}
.ouiExpression--success .ouiExpression__description {
color: #0F7B68;
}
.ouiExpression--secondary:focus {
background-color: rgba(15, 123, 104, 0.1);
}
.ouiExpression--secondary.ouiExpression-isActive {
border-bottom-color: #0F7B68;
border-color: #0F7B68;
}
.ouiExpression--secondary .ouiExpression__description {
color: #0F7B68;
}
.ouiExpression--warning:focus {
background-color: rgba(142, 102, 37, 0.1);
}
.ouiExpression--warning.ouiExpression-isActive {
border-bottom-color: #8e6625;
border-color: #8e6625;
}
.ouiExpression--warning .ouiExpression__description {
color: #8e6625;
}
.ouiExpression--danger:focus {
background-color: rgba(196, 61, 53, 0.1);
}
.ouiExpression--danger.ouiExpression-isActive {
border-bottom-color: #C43D35;
border-color: #C43D35;
}
.ouiExpression--danger .ouiExpression__description {
color: #C43D35;
}
.ouiExpression--accent:focus {
background-color: rgba(156, 71, 191, 0.1);
}
.ouiExpression--accent.ouiExpression-isActive {
border-bottom-color: #9C47BF;
border-color: #9C47BF;
}
.ouiExpression--accent .ouiExpression__description {
color: #9C47BF;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/**
* 1. Make sure the quantity doesn't get an underline on hover
*/
.ouiFacetButton {
display: inline-block;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
height: 40px;
line-height: 40px;
text-align: center;
white-space: nowrap;
max-width: 100%;
vertical-align: middle;
font-family: var(--oui-font-family);
font-weight: 400;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-font-kerning: normal;
font-kerning: normal;
font-size: 14px;
font-size: 1rem;
line-height: 1.5;
height: 32px;
text-align: left;
text-decoration: none;
transition: all 150ms ease-in;
}
.ouiFacetButton:hover:not(:disabled) .ouiFacetButton__text, .ouiFacetButton:focus:not(:disabled) .ouiFacetButton__text {
text-decoration: underline; /* 1 */
}
.ouiFacetButton:focus {
background-color: #e3eff8;
box-shadow: -4px 0 #e3eff8, 4px 0 #e3eff8;
}
.ouiFacetButton:disabled {
color: #a3a7ae;
pointer-events: none;
}
.ouiFacetButton:disabled .ouiFacetButton__content {
pointer-events: auto;
cursor: not-allowed;
}
.ouiFacetButton:disabled .ouiFacetButton__icon,
.ouiFacetButton:disabled .ouiFacetButton__quantity {
opacity: 0.5;
}
.ouiFacetButton:disabled:focus {
background-color: transparent;
}
.ouiFacetButton:disabled:hover, .ouiFacetButton:disabled:focus {
text-decoration: none;
}
.ouiFacetButton__content {
height: 100%;
width: 100%;
vertical-align: middle;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
}
.ouiFacetButton__content .ouiButtonContent__icon,
.ouiFacetButton__content .ouiButtonContent__spinner {
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
.ouiFacetButton__content > * + * {
-webkit-margin-start: 8px;
margin-inline-start: 8px;
}
.ouiFacetButton__content.ouiButtonContent--smallIconGap > * + * {
-webkit-margin-start: 2px;
margin-inline-start: 2px;
}
.ouiFacetButton__content.ouiButtonContent--noIconGap > * + * {
-webkit-margin-start: 0;
margin-inline-start: 0;
}
.ouiFacetButton__text {
max-width: 100%;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
word-wrap: normal !important;
-webkit-flex-grow: 1;
flex-grow: 1;
vertical-align: middle;
}
.ouiFacetButton__text::after {
display: block;
content: attr(data-text);
font-weight: 500;
height: 0;
overflow: hidden;
visibility: hidden;
}
.ouiFacetButton--isSelected .ouiFacetButton__text {
font-weight: 500;
}
.ouiFacetButton__icon {
transition: all 150ms ease-in;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiFacetGroup--gutterNone .ouiFacetButton {
margin-top: 0;
margin-bottom: 0;
}
.ouiFacetGroup--gutterNone.ouiFacetGroup--horizontal {
margin-left: -12px;
}
.ouiFacetGroup--gutterNone.ouiFacetGroup--horizontal .ouiFacetButton {
margin-left: 12px;
max-width: calc(100% - 12px);
}
.ouiFacetGroup--gutterSmall .ouiFacetButton {
margin-top: 2px;
margin-bottom: 2px;
}
.ouiFacetGroup--gutterSmall.ouiFacetGroup--horizontal {
margin-left: -16px;
}
.ouiFacetGroup--gutterSmall.ouiFacetGroup--horizontal .ouiFacetButton {
margin-left: 16px;
max-width: calc(100% - 16px);
}
.ouiFacetGroup--gutterMedium .ouiFacetButton {
margin-top: 4px;
margin-bottom: 4px;
}
.ouiFacetGroup--gutterMedium.ouiFacetGroup--horizontal {
margin-left: -20px;
}
.ouiFacetGroup--gutterMedium.ouiFacetGroup--horizontal .ouiFacetButton {
margin-left: 20px;
max-width: calc(100% - 20px);
}
.ouiFacetGroup--gutterLarge .ouiFacetButton {
margin-top: 6px;
margin-bottom: 6px;
}
.ouiFacetGroup--gutterLarge.ouiFacetGroup--horizontal {
margin-left: -24px;
}
.ouiFacetGroup--gutterLarge.ouiFacetGroup--horizontal .ouiFacetButton {
margin-left: 24px;
max-width: calc(100% - 24px);
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiFilterGroup {
display: -webkit-inline-flex;
display: inline-flex;
max-width: 100%;
border-right: 1px solid rgba(18, 38, 126, 0.1);
box-shadow: 0 1px 2px -1px rgba(173, 180, 186, 0.2), 0 3px 3px -2px rgba(173, 180, 186, 0.2);
overflow: hidden;
}
.ouiFilterGroup > * {
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
min-width: 48px;
}
.ouiFilterGroup > .ouiFilterButton--noGrow {
-webkit-flex-grow: 0;
flex-grow: 0;
}
.ouiFilterGroup > .ouiFilterButton-hasNotification {
min-width: 96px;
}
.ouiFilterGroup > .ouiFilterButton--hasIcon {
min-width: 128px;
}
.ouiFilterGroup .ouiPopover__anchor {
display: block;
}
.ouiFilterGroup .ouiPopover__anchor .ouiFilterButton {
width: 100%;
}
.ouiFilterGroup--fullWidth {
display: -webkit-flex;
display: flex;
}
@media only screen and (max-width: 574px) {
.ouiFilterGroup {
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
}
@media only screen and (min-width: 575px) and (max-width: 767px) {
.ouiFilterGroup {
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
}
@media only screen and (max-width: 574px) {
.ouiFilterGroup {
display: -webkit-flex;
display: flex;
}
.ouiFilterGroup .ouiFilterButton {
-webkit-flex-grow: 1 !important;
flex-grow: 1 !important;
}
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiFilterButton {
background-color: #f2f4f6;
height: 40px;
width: auto;
border: 1px solid rgba(18, 38, 126, 0.1);
border-right: none;
font-size: 14px;
}
.ouiFilterButton:disabled {
color: #a3a7ae;
pointer-events: none;
}
.ouiFilterButton:disabled .ouiFilterButton__notification {
opacity: 0.5;
}
.ouiFilterButton:hover:not(:disabled), .ouiFilterButton:focus:not(:disabled) {
text-decoration: none;
}
.ouiFilterButton:hover:not(:disabled) .ouiFilterButton__textShift, .ouiFilterButton:focus:not(:disabled) .ouiFilterButton__textShift {
text-decoration: underline;
}
.ouiFilterButton-hasActiveFilters {
font-weight: 500;
}
.ouiFilterButton--hasIcon .ouiButtonEmpty__content {
-webkit-justify-content: space-between;
justify-content: space-between;
}
.ouiFilterButton--withNext + .ouiFilterButton {
margin-left: -4px;
border-left: none;
}
.ouiFilterButton-isSelected {
background-color: #E3E5E8;
}
.ouiFilterButton__text-hasNotification {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
}
.ouiFilterButton__notification {
margin-left: 8px;
vertical-align: text-bottom;
}
.ouiFilterButton__textShift {
max-width: 100%;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
word-wrap: normal !important;
min-width: 48px;
}
.ouiFilterButton__textShift::after {
display: block;
content: attr(data-text);
font-weight: 500;
height: 0;
overflow: hidden;
visibility: hidden;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiFilterSelectItem {
font-size: 14px;
font-size: 1rem;
line-height: 1.5;
padding: 4px 12px;
display: block;
width: 100%;
text-align: left;
color: #2A3947;
border-bottom: 1px solid #D6D9DD;
border-color: #dde0e3;
outline-offset: -3px;
}
.ouiFilterSelectItem:hover {
cursor: pointer;
text-decoration: underline;
}
.ouiFilterSelectItem:focus {
cursor: pointer;
text-decoration: underline;
background-color: #e3eff8;
}
.ouiFilterSelectItem:disabled {
cursor: not-allowed;
text-decoration: none;
color: #a3a7ae;
}
.ouiFilterSelectItem:focus, .ouiFilterSelectItem-isFocused {
background-color: #e3eff8;
color: #0268BC;
}
.ouiFilterSelectItem__content {
max-width: 100%;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
word-wrap: normal !important;
}
.ouiFilterSelect__items {
scrollbar-width: thin;
overflow-y: auto;
max-height: 480px;
}
.ouiFilterSelect__items::-webkit-scrollbar {
width: 16px;
height: 16px;
}
.ouiFilterSelect__items::-webkit-scrollbar-thumb {
background-color: rgba(90, 104, 117, 0.5);
border: 6px solid transparent;
background-clip: content-box;
}
.ouiFilterSelect__items::-webkit-scrollbar-corner, .ouiFilterSelect__items::-webkit-scrollbar-track {
background-color: transparent;
}
.ouiFilterSelect__note {
height: 64px;
text-align: center;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: space-around;
justify-content: space-around;
}
.ouiFilterSelect__noteContent {
color: #5A6875;
font-size: 14px;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/**
* 1. Not always needed, but fixes an IE11 issue when flex-groups are nested under display: flex elements.
* 2. IE requires a unit to grow.
*/
.ouiFlexGroup {
display: -webkit-flex;
display: flex;
-webkit-align-items: stretch;
align-items: stretch;
-webkit-flex-grow: 1;
flex-grow: 1; /* 1 */
}
.ouiFlexGroup .ouiFlexItem {
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-flex-basis: 0%;
flex-basis: 0%; /* 2 */
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
.ouiFlexGroup .ouiFlexItem {
min-width: 1px;
}
}
.ouiFlexGroup--gutterExtraSmall {
margin: -2px;
}
.ouiFlexGroup--gutterExtraSmall > .ouiFlexItem {
margin: 2px;
}
.ouiFlexGroup--gutterSmall {
margin: -4px;
}
.ouiFlexGroup--gutterSmall > .ouiFlexItem {
margin: 4px;
}
.ouiFlexGroup--gutterMedium {
margin: -8px;
}
.ouiFlexGroup--gutterMedium > .ouiFlexItem {
margin: 8px;
}
.ouiFlexGroup--gutterLarge {
margin: -12px;
}
.ouiFlexGroup--gutterLarge > .ouiFlexItem {
margin: 12px;
}
.ouiFlexGroup--gutterExtraLarge {
margin: -20px;
}
.ouiFlexGroup--gutterExtraLarge > .ouiFlexItem {
margin: 20px;
}
.ouiFlexGroup--justifyContentSpaceEvenly {
-webkit-justify-content: space-evenly;
justify-content: space-evenly;
}
.ouiFlexGroup--justifyContentSpaceBetween {
-webkit-justify-content: space-between;
justify-content: space-between;
}
.ouiFlexGroup--justifyContentSpaceAround {
-webkit-justify-content: space-around;
justify-content: space-around;
}
.ouiFlexGroup--justifyContentCenter {
-webkit-justify-content: center;
justify-content: center;
}
.ouiFlexGroup--justifyContentFlexEnd {
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
.ouiFlexGroup--alignItemsFlexStart {
-webkit-align-items: flex-start;
align-items: flex-start;
}
.ouiFlexGroup--alignItemsCenter {
-webkit-align-items: center;
align-items: center;
}
.ouiFlexGroup--alignItemsFlexEnd {
-webkit-align-items: flex-end;
align-items: flex-end;
}
.ouiFlexGroup--alignItemsBaseline {
-webkit-align-items: baseline;
align-items: baseline;
}
.ouiFlexGroup--directionRow {
-webkit-flex-direction: row;
flex-direction: row;
}
.ouiFlexGroup--directionRowReverse {
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.ouiFlexGroup--directionColumn {
-webkit-flex-direction: column;
flex-direction: column;
}
.ouiFlexGroup--directionColumnReverse {
-webkit-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.ouiFlexGroup--wrap {
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
@media only screen and (max-width: 574px) {
.ouiFlexGroup--responsive {
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin-left: 0;
margin-right: 0;
}
}
@media only screen and (min-width: 575px) and (max-width: 767px) {
.ouiFlexGroup--responsive {
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin-left: 0;
margin-right: 0;
}
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiFlexGrid {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 0;
}
.ouiFlexGrid > .ouiFlexItem {
-webkit-flex-grow: 0;
flex-grow: 0;
}
.ouiFlexGrid > .ouiFlexItem.ouiFlexItem--flexGrowZero {
-webkit-flex-grow: 0 !important;
flex-grow: 0 !important;
-webkit-flex-basis: auto !important;
flex-basis: auto !important;
}
/**
* 1. For vertical layouts we use columns instead of flex
*/
.ouiFlexGrid--directionColumn {
display: block; /* 1 */
-webkit-column-gap: 0;
-moz-column-gap: 0;
column-gap: 0;
}
.ouiFlexGrid--directionColumn > .ouiFlexItem {
display: inline-block; /* 1 */
line-height: initial;
}
/**
* Uncouple the gutter margin from the column widths to support cases where we use a FlexGrid
* without columns.
*/
.ouiFlexGrid--gutterNone {
margin: 0px;
-webkit-align-items: stretch;
align-items: stretch;
}
.ouiFlexGrid--gutterNone > .ouiFlexItem {
margin: 0px;
}
.ouiFlexGrid--gutterNone.ouiFlexGrid--fourths > .ouiFlexItem {
-webkit-flex-basis: calc(25% - 0px);
flex-basis: calc(25% - 0px);
}
.ouiFlexGrid--gutterNone.ouiFlexGrid--fourths.ouiFlexGrid--directionColumn { /* 1 */
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
.ouiFlexGrid--gutterNone.ouiFlexGrid--fourths.ouiFlexGrid--directionColumn > .ouiFlexItem {
width: calc(100% - 0px);
}
.ouiFlexGrid--gutterNone.ouiFlexGrid--thirds > .ouiFlexItem {
-webkit-flex-basis: calc(33.3% - 0px);
flex-basis: calc(33.3% - 0px);
}
.ouiFlexGrid--gutterNone.ouiFlexGrid--thirds.ouiFlexGrid--directionColumn { /* 1 */
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
.ouiFlexGrid--gutterNone.ouiFlexGrid--thirds.ouiFlexGrid--directionColumn > .ouiFlexItem {
width: calc(100% - 0px);
}
.ouiFlexGrid--gutterNone.ouiFlexGrid--halves > .ouiFlexItem {
-webkit-flex-basis: calc(50% - 0px);
flex-basis: calc(50% - 0px);
}
.ouiFlexGrid--gutterNone.ouiFlexGrid--halves.ouiFlexGrid--directionColumn { /* 1 */
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
.ouiFlexGrid--gutterNone.ouiFlexGrid--halves.ouiFlexGrid--directionColumn > .ouiFlexItem {
width: calc(100% - 0px);
}
.ouiFlexGrid--gutterNone.ouiFlexGrid--single > .ouiFlexItem {
-webkit-flex-basis: calc(100% - 0px);
flex-basis: calc(100% - 0px);
}
.ouiFlexGrid--gutterNone.ouiFlexGrid--single.ouiFlexGrid--directionColumn { /* 1 */
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
.ouiFlexGrid--gutterNone.ouiFlexGrid--single.ouiFlexGrid--directionColumn > .ouiFlexItem {
width: calc(100% - 0px);
}
/**
* Uncouple the gutter margin from the column widths to support cases where we use a FlexGrid
* without columns.
*/
.ouiFlexGrid--gutterSmall {
margin: -4px;
-webkit-align-items: stretch;
align-items: stretch;
}
.ouiFlexGrid--gutterSmall > .ouiFlexItem {
margin: 4px;
}
.ouiFlexGrid--gutterSmall.ouiFlexGrid--fourths > .ouiFlexItem {
-webkit-flex-basis: calc(25% - 8px);
flex-basis: calc(25% - 8px);
}
.ouiFlexGrid--gutterSmall.ouiFlexGrid--fourths.ouiFlexGrid--directionColumn { /* 1 */
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
.ouiFlexGrid--gutterSmall.ouiFlexGrid--fourths.ouiFlexGrid--directionColumn > .ouiFlexItem {
width: calc(100% - 8px);
}
.ouiFlexGrid--gutterSmall.ouiFlexGrid--thirds > .ouiFlexItem {
-webkit-flex-basis: calc(33.3% - 8px);
flex-basis: calc(33.3% - 8px);
}
.ouiFlexGrid--gutterSmall.ouiFlexGrid--thirds.ouiFlexGrid--directionColumn { /* 1 */
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
.ouiFlexGrid--gutterSmall.ouiFlexGrid--thirds.ouiFlexGrid--directionColumn > .ouiFlexItem {
width: calc(100% - 8px);
}
.ouiFlexGrid--gutterSmall.ouiFlexGrid--halves > .ouiFlexItem {
-webkit-flex-basis: calc(50% - 8px);
flex-basis: calc(50% - 8px);
}
.ouiFlexGrid--gutterSmall.ouiFlexGrid--halves.ouiFlexGrid--directionColumn { /* 1 */
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
.ouiFlexGrid--gutterSmall.ouiFlexGrid--halves.ouiFlexGrid--directionColumn > .ouiFlexItem {
width: calc(100% - 8px);
}
.ouiFlexGrid--gutterSmall.ouiFlexGrid--single > .ouiFlexItem {
-webkit-flex-basis: calc(100% - 8px);
flex-basis: calc(100% - 8px);
}
.ouiFlexGrid--gutterSmall.ouiFlexGrid--single.ouiFlexGrid--directionColumn { /* 1 */
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
.ouiFlexGrid--gutterSmall.ouiFlexGrid--single.ouiFlexGrid--directionColumn > .ouiFlexItem {
width: calc(100% - 8px);
}
/**
* Uncouple the gutter margin from the column widths to support cases where we use a FlexGrid
* without columns.
*/
.ouiFlexGrid--gutterMedium {
margin: -8px;
-webkit-align-items: stretch;
align-items: stretch;
}
.ouiFlexGrid--gutterMedium > .ouiFlexItem {
margin: 8px;
}
.ouiFlexGrid--gutterMedium.ouiFlexGrid--fourths > .ouiFlexItem {
-webkit-flex-basis: calc(25% - 16px);
flex-basis: calc(25% - 16px);
}
.ouiFlexGrid--gutterMedium.ouiFlexGrid--fourths.ouiFlexGrid--directionColumn { /* 1 */
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
.ouiFlexGrid--gutterMedium.ouiFlexGrid--fourths.ouiFlexGrid--directionColumn > .ouiFlexItem {
width: calc(100% - 16px);
}
.ouiFlexGrid--gutterMedium.ouiFlexGrid--thirds > .ouiFlexItem {
-webkit-flex-basis: calc(33.3% - 16px);
flex-basis: calc(33.3% - 16px);
}
.ouiFlexGrid--gutterMedium.ouiFlexGrid--thirds.ouiFlexGrid--directionColumn { /* 1 */
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
.ouiFlexGrid--gutterMedium.ouiFlexGrid--thirds.ouiFlexGrid--directionColumn > .ouiFlexItem {
width: calc(100% - 16px);
}
.ouiFlexGrid--gutterMedium.ouiFlexGrid--halves > .ouiFlexItem {
-webkit-flex-basis: calc(50% - 16px);
flex-basis: calc(50% - 16px);
}
.ouiFlexGrid--gutterMedium.ouiFlexGrid--halves.ouiFlexGrid--directionColumn { /* 1 */
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
.ouiFlexGrid--gutterMedium.ouiFlexGrid--halves.ouiFlexGrid--directionColumn > .ouiFlexItem {
width: calc(100% - 16px);
}
.ouiFlexGrid--gutterMedium.ouiFlexGrid--single > .ouiFlexItem {
-webkit-flex-basis: calc(100% - 16px);
flex-basis: calc(100% - 16px);
}
.ouiFlexGrid--gutterMedium.ouiFlexGrid--single.ouiFlexGrid--directionColumn { /* 1 */
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
.ouiFlexGrid--gutterMedium.ouiFlexGrid--single.ouiFlexGrid--directionColumn > .ouiFlexItem {
width: calc(100% - 16px);
}
/**
* Uncouple the gutter margin from the column widths to support cases where we use a FlexGrid
* without columns.
*/
.ouiFlexGrid--gutterLarge {
margin: -12px;
-webkit-align-items: stretch;
align-items: stretch;
}
.ouiFlexGrid--gutterLarge > .ouiFlexItem {
margin: 12px;
}
.ouiFlexGrid--gutterLarge.ouiFlexGrid--fourths > .ouiFlexItem {
-webkit-flex-basis: calc(25% - 24px);
flex-basis: calc(25% - 24px);
}
.ouiFlexGrid--gutterLarge.ouiFlexGrid--fourths.ouiFlexGrid--directionColumn { /* 1 */
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
.ouiFlexGrid--gutterLarge.ouiFlexGrid--fourths.ouiFlexGrid--directionColumn > .ouiFlexItem {
width: calc(100% - 24px);
}
.ouiFlexGrid--gutterLarge.ouiFlexGrid--thirds > .ouiFlexItem {
-webkit-flex-basis: calc(33.3% - 24px);
flex-basis: calc(33.3% - 24px);
}
.ouiFlexGrid--gutterLarge.ouiFlexGrid--thirds.ouiFlexGrid--directionColumn { /* 1 */
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
.ouiFlexGrid--gutterLarge.ouiFlexGrid--thirds.ouiFlexGrid--directionColumn > .ouiFlexItem {
width: calc(100% - 24px);
}
.ouiFlexGrid--gutterLarge.ouiFlexGrid--halves > .ouiFlexItem {
-webkit-flex-basis: calc(50% - 24px);
flex-basis: calc(50% - 24px);
}
.ouiFlexGrid--gutterLarge.ouiFlexGrid--halves.ouiFlexGrid--directionColumn { /* 1 */
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
.ouiFlexGrid--gutterLarge.ouiFlexGrid--halves.ouiFlexGrid--directionColumn > .ouiFlexItem {
width: calc(100% - 24px);
}
.ouiFlexGrid--gutterLarge.ouiFlexGrid--single > .ouiFlexItem {
-webkit-flex-basis: calc(100% - 24px);
flex-basis: calc(100% - 24px);
}
.ouiFlexGrid--gutterLarge.ouiFlexGrid--single.ouiFlexGrid--directionColumn { /* 1 */
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
.ouiFlexGrid--gutterLarge.ouiFlexGrid--single.ouiFlexGrid--directionColumn > .ouiFlexItem {
width: calc(100% - 24px);
}
/**
* Uncouple the gutter margin from the column widths to support cases where we use a FlexGrid
* without columns.
*/
.ouiFlexGrid--gutterXLarge {
margin: -16px;
-webkit-align-items: stretch;
align-items: stretch;
}
.ouiFlexGrid--gutterXLarge > .ouiFlexItem {
margin: 16px;
}
.ouiFlexGrid--gutterXLarge.ouiFlexGrid--fourths > .ouiFlexItem {
-webkit-flex-basis: calc(25% - 32px);
flex-basis: calc(25% - 32px);
}
.ouiFlexGrid--gutterXLarge.ouiFlexGrid--fourths.ouiFlexGrid--directionColumn { /* 1 */
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
.ouiFlexGrid--gutterXLarge.ouiFlexGrid--fourths.ouiFlexGrid--directionColumn > .ouiFlexItem {
width: calc(100% - 32px);
}
.ouiFlexGrid--gutterXLarge.ouiFlexGrid--thirds > .ouiFlexItem {
-webkit-flex-basis: calc(33.3% - 32px);
flex-basis: calc(33.3% - 32px);
}
.ouiFlexGrid--gutterXLarge.ouiFlexGrid--thirds.ouiFlexGrid--directionColumn { /* 1 */
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
.ouiFlexGrid--gutterXLarge.ouiFlexGrid--thirds.ouiFlexGrid--directionColumn > .ouiFlexItem {
width: calc(100% - 32px);
}
.ouiFlexGrid--gutterXLarge.ouiFlexGrid--halves > .ouiFlexItem {
-webkit-flex-basis: calc(50% - 32px);
flex-basis: calc(50% - 32px);
}
.ouiFlexGrid--gutterXLarge.ouiFlexGrid--halves.ouiFlexGrid--directionColumn { /* 1 */
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
.ouiFlexGrid--gutterXLarge.ouiFlexGrid--halves.ouiFlexGrid--directionColumn > .ouiFlexItem {
width: calc(100% - 32px);
}
.ouiFlexGrid--gutterXLarge.ouiFlexGrid--single > .ouiFlexItem {
-webkit-flex-basis: calc(100% - 32px);
flex-basis: calc(100% - 32px);
}
.ouiFlexGrid--gutterXLarge.ouiFlexGrid--single.ouiFlexGrid--directionColumn { /* 1 */
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
.ouiFlexGrid--gutterXLarge.ouiFlexGrid--single.ouiFlexGrid--directionColumn > .ouiFlexItem {
width: calc(100% - 32px);
}
@media only screen and (max-width: 574px) {
.ouiFlexGrid.ouiFlexGrid--responsive {
margin-left: 0 !important;
margin-right: 0 !important;
-webkit-column-count: 1 !important;
-moz-column-count: 1 !important;
column-count: 1 !important;
}
}
@media only screen and (min-width: 575px) and (max-width: 767px) {
.ouiFlexGrid.ouiFlexGrid--responsive {
margin-left: 0 !important;
margin-right: 0 !important;
-webkit-column-count: 1 !important;
-moz-column-count: 1 !important;
column-count: 1 !important;
}
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/**
* 1. Allow OuiPanels to expand to fill the item.
* 2. IE11 hack forces inner content of flex items to respect a higher parent's width (mostly) and
* not cause weird wrapping issues.
*/
.ouiFlexItem {
display: -webkit-flex;
display: flex; /* 1 */
-webkit-flex-direction: column;
flex-direction: column; /* 1 */
/*
* 1. We need the extra specificity here to override the FlexGroup > FlexItem styles.
* 2. FlexItem can be manually set to not grow if needed.
*/
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
.ouiFlexItem {
min-width: 1px; /* 2 */
}
}
.ouiFlexItem.ouiFlexItem--flexGrowZero { /* 1 */
-webkit-flex-grow: 0;
flex-grow: 0; /* 2 */
-webkit-flex-basis: auto;
flex-basis: auto; /* 2 */
}
.ouiFlexItem.ouiFlexItem--flexGrow1 {
-webkit-flex-grow: 1;
flex-grow: 1;
}
.ouiFlexItem.ouiFlexItem--flexGrow2 {
-webkit-flex-grow: 2;
flex-grow: 2;
}
.ouiFlexItem.ouiFlexItem--flexGrow3 {
-webkit-flex-grow: 3;
flex-grow: 3;
}
.ouiFlexItem.ouiFlexItem--flexGrow4 {
-webkit-flex-grow: 4;
flex-grow: 4;
}
.ouiFlexItem.ouiFlexItem--flexGrow5 {
-webkit-flex-grow: 5;
flex-grow: 5;
}
.ouiFlexItem.ouiFlexItem--flexGrow6 {
-webkit-flex-grow: 6;
flex-grow: 6;
}
.ouiFlexItem.ouiFlexItem--flexGrow7 {
-webkit-flex-grow: 7;
flex-grow: 7;
}
.ouiFlexItem.ouiFlexItem--flexGrow8 {
-webkit-flex-grow: 8;
flex-grow: 8;
}
.ouiFlexItem.ouiFlexItem--flexGrow9 {
-webkit-flex-grow: 9;
flex-grow: 9;
}
.ouiFlexItem.ouiFlexItem--flexGrow10 {
-webkit-flex-grow: 10;
flex-grow: 10;
}
@media only screen and (max-width: 574px) {
.ouiFlexGroup--responsive > .ouiFlexItem,
.ouiFlexGrid--responsive > .ouiFlexItem {
width: 100% !important;
-webkit-flex-basis: 100% !important;
flex-basis: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
margin-bottom: 16px !important;
}
}
@media only screen and (min-width: 575px) and (max-width: 767px) {
.ouiFlexGroup--responsive > .ouiFlexItem,
.ouiFlexGrid--responsive > .ouiFlexItem {
width: 100% !important;
-webkit-flex-basis: 100% !important;
flex-basis: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
margin-bottom: 16px !important;
}
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiFlyout {
border-left: 1px solid #D6D9DD;
box-shadow: 0 40px 64px 0 rgba(78, 92, 110, 0.1), 0 24px 32px 0 rgba(78, 92, 110, 0.1), 0 16px 16px 0 rgba(78, 92, 110, 0.1), 0 8px 8px 0 rgba(78, 92, 110, 0.1), 0 4px 4px 0 rgba(78, 92, 110, 0.1), 0 2px 2px 0 rgba(78, 92, 110, 0.1);
border-color: #c8cdd4;
border-top-color: #e2e6e9;
border-bottom-color: #aeb5be;
position: fixed;
top: 0;
bottom: 0;
right: 0;
height: 100%;
z-index: 1000;
background: #FCFEFF;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: stretch;
align-items: stretch;
-webkit-clip-path: polygon(-50% 0, 100% 0, 100% 100%, -50% 100%);
clip-path: polygon(-50% 0, 100% 0, 100% 100%, -50% 100%);
-webkit-animation: ouiFlyout 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
animation: ouiFlyout 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
}
.ouiFlyout:focus {
outline: none;
}
.ouiFlyout__closeButton {
background-color: rgba(252, 254, 255, 0.9);
position: absolute;
right: 8px;
top: 8px;
z-index: 3;
}
.ouiFlyout__closeButton--outside {
box-shadow: 0 40px 64px 0 rgba(78, 92, 110, 0.1), 0 24px 32px 0 rgba(78, 92, 110, 0.1), 0 16px 16px 0 rgba(78, 92, 110, 0.1), 0 8px 8px 0 rgba(78, 92, 110, 0.1), 0 4px 4px 0 rgba(78, 92, 110, 0.1), 0 2px 2px 0 rgba(78, 92, 110, 0.1);
right: auto;
left: 0;
-webkit-transform: translateX(calc(-100% - 24px)) !important;
transform: translateX(calc(-100% - 24px)) !important;
-webkit-animation: none !important;
animation: none !important;
}
.ouiFlyout--left .ouiFlyout__closeButton--outside {
left: auto;
right: 0;
-webkit-transform: translateX(calc(100% + 24px)) !important;
transform: translateX(calc(100% + 24px)) !important;
}
.ouiFlyoutBody__banner {
overflow-x: hidden;
}
/**
* 1. Calculating the minimum width based on the screen takeover breakpoint
*/
.ouiFlyout--small {
min-width: 384px;
width: 25vw;
}
.ouiFlyout--small.ouiFlyout--maxWidth-default {
max-width: 403px;
}
.ouiFlyout--medium {
min-width: 424px;
width: 50vw;
}
.ouiFlyout--medium.ouiFlyout--maxWidth-default {
max-width: 768px;
}
.ouiFlyout--large {
min-width: 691px;
width: 75vw;
}
.ouiFlyout--large.ouiFlyout--maxWidth-default {
max-width: 992px;
}
.ouiFlyout--paddingNone .ouiFlyoutHeader {
padding: 0 0 0;
}
.ouiFlyout--paddingNone .ouiFlyoutHeader--hasBorder {
padding-bottom: 0;
}
.ouiFlyout--paddingNone .ouiFlyoutBody__overflowContent {
padding: 0;
}
.ouiFlyout--paddingNone .ouiFlyoutBody__banner .ouiCallOut {
padding-left: 0;
padding-right: 0;
}
.ouiFlyout--paddingNone .ouiFlyoutFooter {
padding: 0;
}
.ouiFlyout--paddingSmall .ouiFlyoutHeader {
padding: 8px 8px 0;
}
.ouiFlyout--paddingSmall .ouiFlyoutHeader--hasBorder {
padding-bottom: 8px;
}
.ouiFlyout--paddingSmall .ouiFlyoutBody__overflowContent {
padding: 8px;
}
.ouiFlyout--paddingSmall .ouiFlyoutBody__banner .ouiCallOut {
padding-left: 8px;
padding-right: 8px;
}
.ouiFlyout--paddingSmall .ouiFlyoutFooter {
padding: 8px;
}
.ouiFlyout--paddingMedium .ouiFlyoutHeader {
padding: 16px 16px 0;
}
.ouiFlyout--paddingMedium .ouiFlyoutHeader--hasBorder {
padding-bottom: 16px;
}
.ouiFlyout--paddingMedium .ouiFlyoutBody__overflowContent {
padding: 16px;
}
.ouiFlyout--paddingMedium .ouiFlyoutBody__banner .ouiCallOut {
padding-left: 16px;
padding-right: 16px;
}
.ouiFlyout--paddingMedium .ouiFlyoutFooter {
padding: 12px 16px;
}
.ouiFlyout--paddingLarge .ouiFlyoutHeader {
padding: 24px 24px 0;
}
.ouiFlyout--paddingLarge .ouiFlyoutHeader--hasBorder {
padding-bottom: 24px;
}
.ouiFlyout--paddingLarge .ouiFlyoutBody__overflowContent {
padding: 24px;
}
.ouiFlyout--paddingLarge .ouiFlyoutBody__banner .ouiCallOut {
padding-left: 24px;
padding-right: 24px;
}
.ouiFlyout--paddingLarge .ouiFlyoutFooter {
padding: 16px 24px;
}
@-webkit-keyframes ouiFlyout {
0% {
opacity: 0;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
75% {
opacity: 1;
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
}
@keyframes ouiFlyout {
0% {
opacity: 0;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
75% {
opacity: 1;
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
}
/**
* 1. Leave only a small sliver exposed on small screens so users understand that this is not a new page
* 2. If a custom maxWidth is set, we need to override it.
*/
@media only screen and (max-width: 574px) {
.ouiFlyout {
max-width: 90vw !important; /* 1, 2 */
}
.ouiFlyout--small {
min-width: 0;
width: 384px;
}
.ouiFlyout--medium {
min-width: 0;
width: 424px;
}
.ouiFlyout--large {
min-width: 0;
width: 691px;
}
.ouiFlyout__closeButton--outside {
-webkit-transform: translateX(calc(-100% - 4px)) !important;
transform: translateX(calc(-100% - 4px)) !important;
}
.ouiFlyout--left .ouiFlyout__closeButton--outside {
-webkit-transform: translateX(calc(100% + 4px)) !important;
transform: translateX(calc(100% + 4px)) !important;
}
}
@media only screen and (min-width: 575px) and (max-width: 767px) {
.ouiFlyout {
max-width: 90vw !important; /* 1, 2 */
}
.ouiFlyout--small {
min-width: 0;
width: 384px;
}
.ouiFlyout--medium {
min-width: 0;
width: 424px;
}
.ouiFlyout--large {
min-width: 0;
width: 691px;
}
.ouiFlyout__closeButton--outside {
-webkit-transform: translateX(calc(-100% - 4px)) !important;
transform: translateX(calc(-100% - 4px)) !important;
}
.ouiFlyout--left .ouiFlyout__closeButton--outside {
-webkit-transform: translateX(calc(100% + 4px)) !important;
transform: translateX(calc(100% + 4px)) !important;
}
}
/**
* Left side flyout (should only be used for navigation)
*/
.ouiFlyout--left {
border-right: 1px solid #D6D9DD;
border-left: none;
right: auto;
left: 0;
-webkit-clip-path: polygon(0 0, 150% 0, 150% 100%, 0 100%);
clip-path: polygon(0 0, 150% 0, 150% 100%, 0 100%);
-webkit-animation-name: ouiFlyoutLeft;
animation-name: ouiFlyoutLeft;
}
@-webkit-keyframes ouiFlyoutLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
75% {
opacity: 1;
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
}
@keyframes ouiFlyoutLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
75% {
opacity: 1;
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
}
/**
* Pushed style (inside body)
*/
.ouiFlyout.ouiFlyout--push {
box-shadow: none;
-webkit-clip-path: none;
clip-path: none;
-webkit-animation-duration: 0s;
animation-duration: 0s;
border-left: 2px solid #D6D9DD;
z-index: 999;
}
.ouiFlyout.ouiFlyout--push.ouiFlyout--left {
border-left: none;
border-right: 2px solid #D6D9DD;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiFlyoutBody {
-webkit-flex-grow: 1;
flex-grow: 1;
overflow-y: hidden;
height: 100%;
}
.ouiFlyoutBody .ouiFlyoutBody__overflow {
scrollbar-width: thin;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
-webkit-mask-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.1) 0%, red 7.5px, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%);
mask-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.1) 0%, red 7.5px, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%);
contain: paint;
}
.ouiFlyoutBody .ouiFlyoutBody__overflow::-webkit-scrollbar {
width: 16px;
height: 16px;
}
.ouiFlyoutBody .ouiFlyoutBody__overflow::-webkit-scrollbar-thumb {
background-color: rgba(90, 104, 117, 0.5);
border: 6px solid transparent;
background-clip: content-box;
}
.ouiFlyoutBody .ouiFlyoutBody__overflow::-webkit-scrollbar-corner, .ouiFlyoutBody .ouiFlyoutBody__overflow::-webkit-scrollbar-track {
background-color: transparent;
}
.ouiFlyoutBody .ouiFlyoutBody__overflow:focus {
outline: none; /* 1 */
}
.ouiFlyoutBody .ouiFlyoutBody__overflow[tabindex="0"]:focus:focus-visible {
outline-style: auto; /* 2 */
}
.ouiFlyoutBody .ouiFlyoutBody__overflow.ouiFlyoutBody__overflow--hasBanner {
-webkit-mask-image: linear-gradient(to bottom, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%);
mask-image: linear-gradient(to bottom, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%);
contain: paint;
}
.ouiFlyoutBody .ouiFlyoutBody__banner .ouiCallOut {
border: none;
border-radius: 0;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiFlyoutFooter {
background: #E3E5E8;
-webkit-flex-grow: 0;
flex-grow: 0;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiFlyoutHeader {
-webkit-flex-grow: 0;
flex-grow: 0;
}
.ouiFlyoutHeader--hasBorder {
border-bottom: 1px solid #D6D9DD;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiCheckbox {
position: relative;
/**
* 1. Float above the visual radio and match its dimension, so that when users try to click it
* they actually click this input.
*/
}
.ouiCheckbox .ouiCheckbox__input {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.ouiCheckbox .ouiCheckbox__input ~ .ouiCheckbox__label {
display: inline-block;
padding-left: 24px;
line-height: 24px;
font-size: 14px;
position: relative;
z-index: 2;
cursor: pointer;
}
.ouiCheckbox .ouiCheckbox__input + .ouiCheckbox__square {
box-shadow: 0 2px 2px -1px rgba(173, 180, 186, 0.3);
padding: 7px;
border: 1px solid #bbbcc1;
background: #FCFEFF no-repeat center;
border-radius: 4px;
transition: background-color 150ms ease-in, border-color 150ms ease-in;
display: inline-block;
position: absolute;
left: 0;
top: 3px;
}
.ouiCheckbox .ouiCheckbox__input:checked + .ouiCheckbox__square {
border-color: #0268BC;
background-color: #0268BC;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M.375 2.625L3.375 5.625M3.375 5.625L8.625.375' fill='none' fill-rule='evenodd' stroke='rgb%28252, 254, 255%29' stroke-linecap='round' stroke-width='1.5' transform='translate(.5 1)'/%3E%3C/svg%3E");
}
.ouiCheckbox .ouiCheckbox__input:indeterminate + .ouiCheckbox__square {
border-color: #0268BC;
background-color: #0268BC;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'%3E%3Crect width='6' height='6' fill='rgb%28252, 254, 255%29' fill-rule='evenodd'/%3E%3C/svg%3E");
}
.ouiCheckbox .ouiCheckbox__input[disabled] {
cursor: not-allowed !important;
}
.ouiCheckbox .ouiCheckbox__input[disabled] ~ .ouiCheckbox__label {
color: #ADB4BA;
cursor: not-allowed !important;
}
.ouiCheckbox .ouiCheckbox__input[disabled] + .ouiCheckbox__square {
border-color: #D6D9DD;
background-color: #D6D9DD;
box-shadow: none;
}
.ouiCheckbox .ouiCheckbox__input:checked[disabled] + .ouiCheckbox__square {
border-color: #D6D9DD;
background-color: #D6D9DD;
box-shadow: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M.375 2.625L3.375 5.625M3.375 5.625L8.625.375' fill='none' fill-rule='evenodd' stroke='rgb%28108, 112, 121%29' stroke-linecap='round' stroke-width='1.5' transform='translate(.5 1)'/%3E%3C/svg%3E");
}
.ouiCheckbox .ouiCheckbox__input:indeterminate[disabled] + .ouiCheckbox__square {
border-color: #D6D9DD;
background-color: #D6D9DD;
box-shadow: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'%3E%3Ccircle cx='8' cy='11' r='3' fill='rgb%28108, 112, 121%29' fill-rule='evenodd' transform='translate(-5 -8)'/%3E%3C/svg%3E");
}
.ouiCheckbox .ouiCheckbox__input:focus + .ouiCheckbox__square, .ouiCheckbox .ouiCheckbox__input:active:not(:disabled) + .ouiCheckbox__square {
-webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important;
animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important;
border-color: #0268BC;
}
.ouiCheckbox.ouiCheckbox--inList, .ouiCheckbox.ouiCheckbox--noLabel {
min-height: 16px;
min-width: 16px;
}
.ouiCheckbox.ouiCheckbox--inList .ouiCheckbox__square, .ouiCheckbox.ouiCheckbox--noLabel .ouiCheckbox__square {
top: 0;
}
.ouiCheckbox.ouiCheckbox--inList .ouiCheckbox__input, .ouiCheckbox.ouiCheckbox--noLabel .ouiCheckbox__input {
width: 16px;
height: 16px;
/* 1 */
position: absolute; /* 1 */
opacity: 0; /* 1 */
z-index: 1; /* 1 */
margin: 0; /* 1 */
left: 0; /* 1 */
cursor: pointer;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiCheckboxGroup__item + .ouiCheckboxGroup__item {
margin-top: 4px;
}
.ouiCheckboxGroup__item + .ouiCheckboxGroup__item.ouiCheckbox--compressed {
margin-top: 0;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiDescribedFormGroup {
max-width: 800px;
}
.ouiDescribedFormGroup + * {
margin-top: 24px;
}
.ouiDescribedFormGroup.ouiDescribedFormGroup--fullWidth {
max-width: 100%;
}
.ouiDescribedFormGroup .ouiDescribedFormGroup__description {
padding-top: 8px;
}
.ouiDescribedFormGroup .ouiDescribedFormGroup__fields {
min-width: 0;
}
.ouiDescribedFormGroup .ouiDescribedFormGroup__fieldPadding--xxxsmall {
padding-top: 8.000001px;
}
.ouiDescribedFormGroup .ouiDescribedFormGroup__fieldPadding--xxsmall {
padding-top: 10.999998px;
}
.ouiDescribedFormGroup .ouiDescribedFormGroup__fieldPadding--xsmall {
padding-top: 10.999998px;
}
.ouiDescribedFormGroup .ouiDescribedFormGroup__fieldPadding--small {
padding-top: 16.999992px;
}
.ouiDescribedFormGroup .ouiDescribedFormGroup__fieldPadding--medium {
padding-top: 26.000004px;
}
.ouiDescribedFormGroup .ouiDescribedFormGroup__fieldPadding--large {
padding-top: 31.999998px;
}
@media only screen and (max-width: 574px) {
.ouiDescribedFormGroup .ouiDescribedFormGroup__fields {
padding-top: 0;
}
.ouiDescribedFormGroup .ouiDescribedFormGroup__fields > .ouiFormRow--hasEmptyLabelSpace:first-child {
padding-top: 0;
}
}
@media only screen and (min-width: 575px) and (max-width: 767px) {
.ouiDescribedFormGroup .ouiDescribedFormGroup__fields {
padding-top: 0;
}
.ouiDescribedFormGroup .ouiDescribedFormGroup__fields > .ouiFormRow--hasEmptyLabelSpace:first-child {
padding-top: 0;
}
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiFieldNumber {
max-width: 400px;
width: 100%;
height: 40px;
background-color: #fcfeff;
background-repeat: no-repeat;
background-size: 0% 100%;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in;
font-family: var(--oui-font-family);
font-weight: 400;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-font-kerning: normal;
font-kerning: normal;
font-size: 14px;
color: #2A3947;
border: none;
border-radius: 0;
padding: 12px;
}
.ouiFieldNumber--fullWidth {
max-width: 100%;
}
.ouiFieldNumber--compressed {
height: 32px;
}
.ouiFieldNumber--inGroup {
height: 100%;
}
.ouiFieldNumber:hover, .ouiFieldNumber:focus {
box-shadow: 0 1px 1px -1px rgba(173, 180, 186, 0.2), 0 3px 2px -2px rgba(173, 180, 186, 0.2), inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
@supports (-moz-appearance: none) {
.ouiFieldNumber {
transition-property: box-shadow, background-image, background-size;
}
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
.ouiFieldNumber {
line-height: 1em;
}
}
.ouiFieldNumber::-webkit-input-placeholder {
color: #686c75;
opacity: 1;
}
.ouiFieldNumber::-moz-placeholder {
color: #686c75;
opacity: 1;
}
.ouiFieldNumber::placeholder {
color: #686c75;
opacity: 1;
}
.ouiFieldNumber:invalid {
background-image: linear-gradient(to top, #C43D35, #C43D35 2px, transparent 2px, transparent 100%);
background-size: 100%;
}
.ouiFieldNumber:focus {
background-color: #fcfeff;
background-image: linear-gradient(to top, #0268BC, #0268BC 2px, transparent 2px, transparent 100%);
background-size: 100% 100%;
box-shadow: 0 1px 1px -1px rgba(173, 180, 186, 0.2), 0 4px 4px -2px rgba(173, 180, 186, 0.2), inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
.ouiFieldNumber:disabled {
color: #ADB4BA;
-webkit-text-fill-color: #ADB4BA;
cursor: not-allowed;
background: #dde0e3;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
.ouiFieldNumber:disabled::-webkit-input-placeholder {
color: #ADB4BA;
opacity: 1;
}
.ouiFieldNumber:disabled::-moz-placeholder {
color: #ADB4BA;
opacity: 1;
}
.ouiFieldNumber:disabled::placeholder {
color: #ADB4BA;
opacity: 1;
}
.ouiFieldNumber[readOnly] {
cursor: default;
background: rgba(214, 217, 221, 0.05);
border-color: transparent;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
.ouiFieldNumber:-webkit-autofill, .ouiFieldNumber:autofill {
/* Many browsers use `!important` in their built-in `:-webkit-autofill` style declarations,
* making their colors non-overridable. `-webkit-text-fill-color` is able to overwrite the
* appearance of texts and is used here as a workaround.
*/
-webkit-text-fill-color: #2A3947;
/* OUI -> EUI Aliases */
/* End of Aliases */
}
.ouiFieldNumber:-webkit-autofill ~ .ouiFormControlLayoutIcons, .ouiFieldNumber:autofill ~ .ouiFormControlLayoutIcons {
color: #2A3947;
}
.ouiFieldNumber:-webkit-autofill ~ .euiFormControlLayoutIcons, .ouiFieldNumber:autofill ~ .euiFormControlLayoutIcons {
color: #2A3947;
}
.ouiFieldNumber--compressed {
background-color: #fcfeff;
background-repeat: no-repeat;
background-size: 0% 100%;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in;
padding: 8px;
border-radius: 2px;
}
.ouiFieldNumber--compressed:hover, .ouiFieldNumber--compressed:focus {
box-shadow: 0 1px 1px -1px rgba(173, 180, 186, 0.2), 0 3px 2px -2px rgba(173, 180, 186, 0.2), inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
@supports (-moz-appearance: none) {
.ouiFieldNumber--compressed {
transition-property: box-shadow, background-image, background-size;
}
}
.ouiFieldNumber--compressed:invalid {
background-image: linear-gradient(to top, #C43D35, #C43D35 2px, transparent 2px, transparent 100%);
background-size: 100%;
}
.ouiFieldNumber--compressed:focus {
background-color: #fcfeff;
background-image: linear-gradient(to top, #0268BC, #0268BC 2px, transparent 2px, transparent 100%);
background-size: 100% 100%;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
.ouiFieldNumber--compressed:disabled {
color: #ADB4BA;
-webkit-text-fill-color: #ADB4BA;
cursor: not-allowed;
background: #dde0e3;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
.ouiFieldNumber--compressed:disabled::-webkit-input-placeholder {
color: #ADB4BA;
opacity: 1;
}
.ouiFieldNumber--compressed:disabled::-moz-placeholder {
color: #ADB4BA;
opacity: 1;
}
.ouiFieldNumber--compressed:disabled::placeholder {
color: #ADB4BA;
opacity: 1;
}
.ouiFieldNumber--compressed[readOnly] {
cursor: default;
background: rgba(214, 217, 221, 0.05);
border-color: transparent;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
.ouiFieldNumber--inGroup {
box-shadow: none !important;
border-radius: 0;
}
.ouiFieldNumber--withIcon {
padding-left: 40px;
}
.ouiFieldNumber-isLoading {
padding-right: 40px;
}
.ouiFieldNumber-isLoading.ouiFieldNumber--compressed {
padding-right: 32px;
}
.ouiFieldNumber--withIcon.ouiFieldNumber--compressed {
padding-left: 32px;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiFieldPassword {
max-width: 400px;
width: 100%;
height: 40px;
background-color: #fcfeff;
background-repeat: no-repeat;
background-size: 0% 100%;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in;
font-family: var(--oui-font-family);
font-weight: 400;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-font-kerning: normal;
font-kerning: normal;
font-size: 14px;
color: #2A3947;
border: none;
border-radius: 0;
padding: 12px;
padding-left: 40px;
}
.ouiFieldPassword--fullWidth {
max-width: 100%;
}
.ouiFieldPassword--compressed {
height: 32px;
}
.ouiFieldPassword--inGroup {
height: 100%;
}
.ouiFieldPassword:hover, .ouiFieldPassword:focus {
box-shadow: 0 1px 1px -1px rgba(173, 180, 186, 0.2), 0 3px 2px -2px rgba(173, 180, 186, 0.2), inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
@supports (-moz-appearance: none) {
.ouiFieldPassword {
transition-property: box-shadow, background-image, background-size;
}
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
.ouiFieldPassword {
line-height: 1em;
}
}
.ouiFieldPassword::-webkit-input-placeholder {
color: #686c75;
opacity: 1;
}
.ouiFieldPassword::-moz-placeholder {
color: #686c75;
opacity: 1;
}
.ouiFieldPassword::placeholder {
color: #686c75;
opacity: 1;
}
.ouiFieldPassword:invalid {
background-image: linear-gradient(to top, #C43D35, #C43D35 2px, transparent 2px, transparent 100%);
background-size: 100%;
}
.ouiFieldPassword:focus {
background-color: #fcfeff;
background-image: linear-gradient(to top, #0268BC, #0268BC 2px, transparent 2px, transparent 100%);
background-size: 100% 100%;
box-shadow: 0 1px 1px -1px rgba(173, 180, 186, 0.2), 0 4px 4px -2px rgba(173, 180, 186, 0.2), inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
.ouiFieldPassword:disabled {
color: #ADB4BA;
-webkit-text-fill-color: #ADB4BA;
cursor: not-allowed;
background: #dde0e3;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
.ouiFieldPassword:disabled::-webkit-input-placeholder {
color: #ADB4BA;
opacity: 1;
}
.ouiFieldPassword:disabled::-moz-placeholder {
color: #ADB4BA;
opacity: 1;
}
.ouiFieldPassword:disabled::placeholder {
color: #ADB4BA;
opacity: 1;
}
.ouiFieldPassword[readOnly] {
cursor: default;
background: rgba(214, 217, 221, 0.05);
border-color: transparent;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
.ouiFieldPassword:-webkit-autofill, .ouiFieldPassword:autofill {
/* Many browsers use `!important` in their built-in `:-webkit-autofill` style declarations,
* making their colors non-overridable. `-webkit-text-fill-color` is able to overwrite the
* appearance of texts and is used here as a workaround.
*/
-webkit-text-fill-color: #2A3947;
/* OUI -> EUI Aliases */
/* End of Aliases */
}
.ouiFieldPassword:-webkit-autofill ~ .ouiFormControlLayoutIcons, .ouiFieldPassword:autofill ~ .ouiFormControlLayoutIcons {
color: #2A3947;
}
.ouiFieldPassword:-webkit-autofill ~ .euiFormControlLayoutIcons, .ouiFieldPassword:autofill ~ .euiFormControlLayoutIcons {
color: #2A3947;
}
.ouiFieldPassword--compressed {
background-color: #fcfeff;
background-repeat: no-repeat;
background-size: 0% 100%;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in;
padding: 8px;
border-radius: 2px;
}
.ouiFieldPassword--compressed:hover, .ouiFieldPassword--compressed:focus {
box-shadow: 0 1px 1px -1px rgba(173, 180, 186, 0.2), 0 3px 2px -2px rgba(173, 180, 186, 0.2), inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
@supports (-moz-appearance: none) {
.ouiFieldPassword--compressed {
transition-property: box-shadow, background-image, background-size;
}
}
.ouiFieldPassword--compressed:invalid {
background-image: linear-gradient(to top, #C43D35, #C43D35 2px, transparent 2px, transparent 100%);
background-size: 100%;
}
.ouiFieldPassword--compressed:focus {
background-color: #fcfeff;
background-image: linear-gradient(to top, #0268BC, #0268BC 2px, transparent 2px, transparent 100%);
background-size: 100% 100%;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
.ouiFieldPassword--compressed:disabled {
color: #ADB4BA;
-webkit-text-fill-color: #ADB4BA;
cursor: not-allowed;
background: #dde0e3;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
.ouiFieldPassword--compressed:disabled::-webkit-input-placeholder {
color: #ADB4BA;
opacity: 1;
}
.ouiFieldPassword--compressed:disabled::-moz-placeholder {
color: #ADB4BA;
opacity: 1;
}
.ouiFieldPassword--compressed:disabled::placeholder {
color: #ADB4BA;
opacity: 1;
}
.ouiFieldPassword--compressed[readOnly] {
cursor: default;
background: rgba(214, 217, 221, 0.05);
border-color: transparent;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
.ouiFieldPassword--inGroup {
box-shadow: none !important;
border-radius: 0;
}
.ouiFieldPassword-isLoading {
padding-right: 40px;
}
.ouiFieldPassword-isLoading.ouiFieldPassword--compressed {
padding-right: 32px;
}
.ouiFieldPassword.ouiFieldPassword--compressed {
padding-left: 32px;
}
.ouiFieldPassword--withToggle::-ms-reveal {
display: none;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*
* 1. Fix for Safari to ensure that it renders like a normal text input
* and doesn't add extra spacing around text
* 2. Remove the X clear button from input type search in Chrome and IE
*/
.ouiFieldSearch {
max-width: 400px;
width: 100%;
height: 40px;
background-color: #fcfeff;
background-repeat: no-repeat;
background-size: 0% 100%;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in;
font-family: var(--oui-font-family);
font-weight: 400;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-font-kerning: normal;
font-kerning: normal;
font-size: 14px;
color: #2A3947;
border: none;
border-radius: 0;
padding: 12px;
padding-left: 40px;
-webkit-appearance: textfield; /* 1 */
}
.ouiFieldSearch--fullWidth {
max-width: 100%;
}
.ouiFieldSearch--compressed {
height: 32px;
}
.ouiFieldSearch--inGroup {
height: 100%;
}
.ouiFieldSearch:hover, .ouiFieldSearch:focus {
box-shadow: 0 1px 1px -1px rgba(173, 180, 186, 0.2), 0 3px 2px -2px rgba(173, 180, 186, 0.2), inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
@supports (-moz-appearance: none) {
.ouiFieldSearch {
transition-property: box-shadow, background-image, background-size;
}
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
.ouiFieldSearch {
line-height: 1em;
}
}
.ouiFieldSearch::-webkit-input-placeholder {
color: #686c75;
opacity: 1;
}
.ouiFieldSearch::-moz-placeholder {
color: #686c75;
opacity: 1;
}
.ouiFieldSearch::placeholder {
color: #686c75;
opacity: 1;
}
.ouiFieldSearch:invalid {
background-image: linear-gradient(to top, #C43D35, #C43D35 2px, transparent 2px, transparent 100%);
background-size: 100%;
}
.ouiFieldSearch:focus {
background-color: #fcfeff;
background-image: linear-gradient(to top, #0268BC, #0268BC 2px, transparent 2px, transparent 100%);
background-size: 100% 100%;
box-shadow: 0 1px 1px -1px rgba(173, 180, 186, 0.2), 0 4px 4px -2px rgba(173, 180, 186, 0.2), inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
.ouiFieldSearch:disabled {
color: #ADB4BA;
-webkit-text-fill-color: #ADB4BA;
cursor: not-allowed;
background: #dde0e3;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
.ouiFieldSearch:disabled::-webkit-input-placeholder {
color: #ADB4BA;
opacity: 1;
}
.ouiFieldSearch:disabled::-moz-placeholder {
color: #ADB4BA;
opacity: 1;
}
.ouiFieldSearch:disabled::placeholder {
color: #ADB4BA;
opacity: 1;
}
.ouiFieldSearch[readOnly] {
cursor: default;
background: rgba(214, 217, 221, 0.05);
border-color: transparent;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
.ouiFieldSearch:-webkit-autofill, .ouiFieldSearch:autofill {
/* Many browsers use `!important` in their built-in `:-webkit-autofill` style declarations,
* making their colors non-overridable. `-webkit-text-fill-color` is able to overwrite the
* appearance of texts and is used here as a workaround.
*/
-webkit-text-fill-color: #2A3947;
/* OUI -> EUI Aliases */
/* End of Aliases */
}
.ouiFieldSearch:-webkit-autofill ~ .ouiFormControlLayoutIcons, .ouiFieldSearch:autofill ~ .ouiFormControlLayoutIcons {
color: #2A3947;
}
.ouiFieldSearch:-webkit-autofill ~ .euiFormControlLayoutIcons, .ouiFieldSearch:autofill ~ .euiFormControlLayoutIcons {
color: #2A3947;
}
.ouiFieldSearch--compressed {
background-color: #fcfeff;
background-repeat: no-repeat;
background-size: 0% 100%;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in;
padding: 8px;
border-radius: 2px;
}
.ouiFieldSearch--compressed:hover, .ouiFieldSearch--compressed:focus {
box-shadow: 0 1px 1px -1px rgba(173, 180, 186, 0.2), 0 3px 2px -2px rgba(173, 180, 186, 0.2), inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
@supports (-moz-appearance: none) {
.ouiFieldSearch--compressed {
transition-property: box-shadow, background-image, background-size;
}
}
.ouiFieldSearch--compressed:invalid {
background-image: linear-gradient(to top, #C43D35, #C43D35 2px, transparent 2px, transparent 100%);
background-size: 100%;
}
.ouiFieldSearch--compressed:focus {
background-color: #fcfeff;
background-image: linear-gradient(to top, #0268BC, #0268BC 2px, transparent 2px, transparent 100%);
background-size: 100% 100%;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
.ouiFieldSearch--compressed:disabled {
color: #ADB4BA;
-webkit-text-fill-color: #ADB4BA;
cursor: not-allowed;
background: #dde0e3;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
.ouiFieldSearch--compressed:disabled::-webkit-input-placeholder {
color: #ADB4BA;
opacity: 1;
}
.ouiFieldSearch--compressed:disabled::-moz-placeholder {
color: #ADB4BA;
opacity: 1;
}
.ouiFieldSearch--compressed:disabled::placeholder {
color: #ADB4BA;
opacity: 1;
}
.ouiFieldSearch--compressed[readOnly] {
cursor: default;
background: rgba(214, 217, 221, 0.05);
border-color: transparent;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
.ouiFieldSearch--inGroup {
box-shadow: none !important;
border-radius: 0;
}
.ouiFieldSearch-isLoading {
padding-right: 40px;
}
.ouiFieldSearch-isLoading.ouiFieldSearch--compressed {
padding-right: 32px;
}
.ouiFieldSearch::-webkit-search-decoration, .ouiFieldSearch::-webkit-search-cancel-button {
-webkit-appearance: none; /* 1, 2 */
}
.ouiFieldSearch::-ms-clear {
display: none; /* 2 */
}
.ouiFieldSearch.ouiFieldSearch-isClearable {
padding-right: 40px;
}
.ouiFieldSearch.ouiFieldSearch-isLoading {
padding-right: 40px;
}
.ouiFieldSearch.ouiFieldSearch-isLoading.ouiFieldSearch-isClearable {
padding-right: 62px;
}
.ouiFieldSearch.ouiFieldSearch--compressed {
padding-left: 32px;
}
.ouiFieldSearch.ouiFieldSearch--compressed.ouiFieldSearch-isClearable {
padding-right: 32px;
}
.ouiFieldSearch.ouiFieldSearch--compressed.ouiFieldSearch-isLoading {
padding-right: 32px;
}
.ouiFieldSearch.ouiFieldSearch--compressed.ouiFieldSearch-isLoading.ouiFieldSearch-isClearable {
padding-right: 54px;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiFieldText {
max-width: 400px;
width: 100%;
height: 40px;
background-color: #fcfeff;
background-repeat: no-repeat;
background-size: 0% 100%;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in;
font-family: var(--oui-font-family);
font-weight: 400;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-font-kerning: normal;
font-kerning: normal;
font-size: 14px;
color: #2A3947;
border: none;
border-radius: 0;
padding: 12px;
/* Invalid state normally comes from :invalid, but several components
/* like OuiDatePicker need it toggled through an extra class.
*/
}
.ouiFieldText--fullWidth {
max-width: 100%;
}
.ouiFieldText--compressed {
height: 32px;
}
.ouiFieldText--inGroup {
height: 100%;
}
.ouiFieldText:hover, .ouiFieldText:focus {
box-shadow: 0 1px 1px -1px rgba(173, 180, 186, 0.2), 0 3px 2px -2px rgba(173, 180, 186, 0.2), inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
@supports (-moz-appearance: none) {
.ouiFieldText {
transition-property: box-shadow, background-image, background-size;
}
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
.ouiFieldText {
line-height: 1em;
}
}
.ouiFieldText::-webkit-input-placeholder {
color: #686c75;
opacity: 1;
}
.ouiFieldText::-moz-placeholder {
color: #686c75;
opacity: 1;
}
.ouiFieldText::placeholder {
color: #686c75;
opacity: 1;
}
.ouiFieldText:invalid {
background-image: linear-gradient(to top, #C43D35, #C43D35 2px, transparent 2px, transparent 100%);
background-size: 100%;
}
.ouiFieldText:focus {
background-color: #fcfeff;
background-image: linear-gradient(to top, #0268BC, #0268BC 2px, transparent 2px, transparent 100%);
background-size: 100% 100%;
box-shadow: 0 1px 1px -1px rgba(173, 180, 186, 0.2), 0 4px 4px -2px rgba(173, 180, 186, 0.2), inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
.ouiFieldText:disabled {
color: #ADB4BA;
-webkit-text-fill-color: #ADB4BA;
cursor: not-allowed;
background: #dde0e3;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
.ouiFieldText:disabled::-webkit-input-placeholder {
color: #ADB4BA;
opacity: 1;
}
.ouiFieldText:disabled::-moz-placeholder {
color: #ADB4BA;
opacity: 1;
}
.ouiFieldText:disabled::placeholder {
color: #ADB4BA;
opacity: 1;
}
.ouiFieldText[readOnly] {
cursor: default;
background: rgba(214, 217, 221, 0.05);
border-color: transparent;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
.ouiFieldText:-webkit-autofill, .ouiFieldText:autofill {
/* Many browsers use `!important` in their built-in `:-webkit-autofill` style declarations,
* making their colors non-overridable. `-webkit-text-fill-color` is able to overwrite the
* appearance of texts and is used here as a workaround.
*/
-webkit-text-fill-color: #2A3947;
/* OUI -> EUI Aliases */
/* End of Aliases */
}
.ouiFieldText:-webkit-autofill ~ .ouiFormControlLayoutIcons, .ouiFieldText:autofill ~ .ouiFormControlLayoutIcons {
color: #2A3947;
}
.ouiFieldText:-webkit-autofill ~ .euiFormControlLayoutIcons, .ouiFieldText:autofill ~ .euiFormControlLayoutIcons {
color: #2A3947;
}
.ouiFieldText--compressed {
background-color: #fcfeff;
background-repeat: no-repeat;
background-size: 0% 100%;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in;
padding: 8px;
border-radius: 2px;
}
.ouiFieldText--compressed:hover, .ouiFieldText--compressed:focus {
box-shadow: 0 1px 1px -1px rgba(173, 180, 186, 0.2), 0 3px 2px -2px rgba(173, 180, 186, 0.2), inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
@supports (-moz-appearance: none) {
.ouiFieldText--compressed {
transition-property: box-shadow, background-image, background-size;
}
}
.ouiFieldText--compressed:invalid {
background-image: linear-gradient(to top, #C43D35, #C43D35 2px, transparent 2px, transparent 100%);
background-size: 100%;
}
.ouiFieldText--compressed:focus {
background-color: #fcfeff;
background-image: linear-gradient(to top, #0268BC, #0268BC 2px, transparent 2px, transparent 100%);
background-size: 100% 100%;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
.ouiFieldText--compressed:disabled {
color: #ADB4BA;
-webkit-text-fill-color: #ADB4BA;
cursor: not-allowed;
background: #dde0e3;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
.ouiFieldText--compressed:disabled::-webkit-input-placeholder {
color: #ADB4BA;
opacity: 1;
}
.ouiFieldText--compressed:disabled::-moz-placeholder {
color: #ADB4BA;
opacity: 1;
}
.ouiFieldText--compressed:disabled::placeholder {
color: #ADB4BA;
opacity: 1;
}
.ouiFieldText--compressed[readOnly] {
cursor: default;
background: rgba(214, 217, 221, 0.05);
border-color: transparent;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
.ouiFieldText--inGroup {
box-shadow: none !important;
border-radius: 0;
}
.ouiFieldText--withIcon {
padding-left: 40px;
}
.ouiFieldText-isLoading {
padding-right: 40px;
}
.ouiFieldText-isLoading.ouiFieldText--compressed {
padding-right: 32px;
}
.ouiFieldText.ouiFieldText-isInvalid {
background-image: linear-gradient(to top, #C43D35, #C43D35 2px, transparent 2px, transparent 100%);
background-size: 100%;
}
.ouiFieldText--withIcon.ouiFieldText--compressed {
padding-left: 32px;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/**
* REMEMBER: --large modifiers must come last to override --compressed
*/
.ouiFilePicker {
max-width: 400px;
width: 100%;
height: 40px;
position: relative;
}
.ouiFilePicker--fullWidth {
max-width: 100%;
}
.ouiFilePicker--compressed {
height: 32px;
}
.ouiFilePicker--inGroup {
height: 100%;
}
.ouiFilePicker.ouiFilePicker--large {
border-radius: 0;
overflow: hidden;
height: auto;
}
.ouiFilePicker.ouiFilePicker--large.ouiFilePicker--compressed {
border-radius: 2px;
}
.ouiFilePicker__input {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
overflow: hidden;
}
.ouiFilePicker__input:hover {
cursor: pointer;
}
.ouiFilePicker__input:hover:disabled {
cursor: not-allowed;
}
.ouiFilePicker__input:disabled {
opacity: 0;
}
.ouiFilePicker__input:disabled ~ .ouiFilePicker__prompt {
color: #ADB4BA;
}
.ouiFilePicker__icon {
position: absolute;
left: 12px;
top: 12px;
transition: -webkit-transform 150ms cubic-bezier(0.694, 0.0482, 0.335, 1);
transition: transform 150ms cubic-bezier(0.694, 0.0482, 0.335, 1);
transition: transform 150ms cubic-bezier(0.694, 0.0482, 0.335, 1), -webkit-transform 150ms cubic-bezier(0.694, 0.0482, 0.335, 1);
}
.ouiFilePicker--compressed .ouiFilePicker__icon {
top: 8px;
left: 8px;
}
.ouiFilePicker--large .ouiFilePicker__icon {
position: static;
margin-bottom: 16px;
}
/**
* 1. Don't block the user from dropping files onto the filepicker.
* 2. Ensure space for import icon, loading spinner, and clear button (only if it has files)
* 3. Delay focus gradient or else it will only partially transition while file chooser opens
* 4. Static height so that it doesn't shift its surrounding contents around
*/
.ouiFilePicker__prompt {
background-color: #fcfeff;
background-repeat: no-repeat;
background-size: 0% 100%;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in;
padding-left: 40px;
/* 2 */
height: 40px;
padding-top: 12px;
padding-right: 12px;
padding-bottom: 12px;
pointer-events: none; /* 1 */
border-radius: 0;
transition: box-shadow 150ms ease-in, background-color 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in 150ms; /* 3 */
}
.ouiFilePicker__prompt:hover, .ouiFilePicker__prompt:focus {
box-shadow: 0 1px 1px -1px rgba(173, 180, 186, 0.2), 0 3px 2px -2px rgba(173, 180, 186, 0.2), inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
@supports (-moz-appearance: none) {
.ouiFilePicker__prompt {
transition-property: box-shadow, background-image, background-size;
}
}
.ouiFilePicker--compressed .ouiFilePicker__prompt {
background-color: #fcfeff;
background-repeat: no-repeat;
background-size: 0% 100%;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in;
padding: 8px;
border-radius: 2px;
padding-left: 32px;
/* 2 */
height: 32px;
border-radius: 2px;
}
.ouiFilePicker--compressed .ouiFilePicker__prompt:hover, .ouiFilePicker--compressed .ouiFilePicker__prompt:focus {
box-shadow: 0 1px 1px -1px rgba(173, 180, 186, 0.2), 0 3px 2px -2px rgba(173, 180, 186, 0.2), inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
@supports (-moz-appearance: none) {
.ouiFilePicker--compressed .ouiFilePicker__prompt {
transition-property: box-shadow, background-image, background-size;
}
}
.ouiFilePicker--large .ouiFilePicker__prompt {
height: 128px; /* 4 */
padding: 0 24px;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
.ouiFilePicker--large.ouiFilePicker--compressed .ouiFilePicker__prompt {
height: 104px; /* 4 */
}
.ouiFilePicker-isInvalid .ouiFilePicker__prompt {
background-image: linear-gradient(to top, #C43D35, #C43D35 2px, transparent 2px, transparent 100%);
background-size: 100%;
}
.ouiFilePicker__promptText {
font-size: 14px;
font-size: 1rem;
line-height: 1.5;
max-width: 100%;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
word-wrap: normal !important;
line-height: 16px;
}
.ouiFilePicker:not(.ouiFilePicker--large):not(.ouiFilePicker-hasFiles) .ouiFilePicker__promptText {
color: #ADB4BA;
}
.ouiFilePicker__clearButton,
.ouiFilePicker__loadingSpinner {
position: absolute;
right: 12px;
top: 12px;
}
.ouiFilePicker--compressed .ouiFilePicker__clearButton,
.ouiFilePicker--compressed .ouiFilePicker__loadingSpinner {
top: 8px;
}
/**
* 1. Undo the pointer-events: none applied to the enclosing prompt.
*/
.ouiFilePicker__clearButton {
pointer-events: auto; /* 1 */
}
.ouiFilePicker:not(.ouiFilePicker--large) .ouiFilePicker__clearButton {
width: 16px;
height: 16px;
pointer-events: all;
background-color: #ADB4BA;
border-radius: 16px;
line-height: 0;
}
.ouiFilePicker:not(.ouiFilePicker--large) .ouiFilePicker__clearButton:focus {
-webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important;
animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important;
}
.ouiFilePicker:not(.ouiFilePicker--large) .ouiFilePicker__clearButton .ouiFilePicker__clearIcon {
width: 8px;
height: 8px;
fill: #FCFEFF;
stroke: #FCFEFF;
stroke-width: 2px;
}
.ouiFilePicker--large .ouiFilePicker__clearButton {
position: relative;
top: 0;
right: 0;
}
.ouiFilePicker__showDrop .ouiFilePicker__prompt,
.ouiFilePicker__input:focus + .ouiFilePicker__prompt {
background-color: #fcfeff;
background-image: linear-gradient(to top, #0268BC, #0268BC 2px, transparent 2px, transparent 100%);
background-size: 100% 100%;
box-shadow: 0 1px 1px -1px rgba(173, 180, 186, 0.2), 0 4px 4px -2px rgba(173, 180, 186, 0.2), inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
.ouiFilePicker--compressed .ouiFilePicker__showDrop .ouiFilePicker__prompt,
.ouiFilePicker--compressed .ouiFilePicker__input:focus + .ouiFilePicker__prompt {
background-color: #fcfeff;
background-image: linear-gradient(to top, #0268BC, #0268BC 2px, transparent 2px, transparent 100%);
background-size: 100% 100%;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
.ouiFilePicker__input:disabled + .ouiFilePicker__prompt {
color: #ADB4BA;
-webkit-text-fill-color: #ADB4BA;
cursor: not-allowed;
background: #dde0e3;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
.ouiFilePicker__input:disabled + .ouiFilePicker__prompt::-webkit-input-placeholder {
color: #ADB4BA;
opacity: 1;
}
.ouiFilePicker__input:disabled + .ouiFilePicker__prompt::-moz-placeholder {
color: #ADB4BA;
opacity: 1;
}
.ouiFilePicker__input:disabled + .ouiFilePicker__prompt::placeholder {
color: #ADB4BA;
opacity: 1;
}
.ouiFilePicker:not(.ouiFilePicker--large).ouiFilePicker-isLoading .ouiFilePicker__prompt, .ouiFilePicker:not(.ouiFilePicker--large).ouiFilePicker-hasFiles .ouiFilePicker__prompt {
padding-right: 40px;
/* 2 */
}
.ouiFilePicker-hasFiles .ouiFilePicker__promptText {
color: #2A3947;
}
.ouiFilePicker--large .ouiFilePicker__input:hover:not(:disabled) + .ouiFilePicker__prompt .ouiFilePicker__promptText,
.ouiFilePicker--large .ouiFilePicker__input:focus + .ouiFilePicker__prompt .ouiFilePicker__promptText {
text-decoration: underline;
}
.ouiFilePicker--large .ouiFilePicker__input:hover:not(:disabled) + .ouiFilePicker__prompt .ouiFilePicker__icon,
.ouiFilePicker--large .ouiFilePicker__input:focus + .ouiFilePicker__prompt .ouiFilePicker__icon {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.ouiFilePicker--large.ouiFilePicker__showDrop .ouiFilePicker__prompt .ouiFilePicker__promptText {
text-decoration: underline;
}
.ouiFilePicker--large.ouiFilePicker__showDrop .ouiFilePicker__prompt .ouiFilePicker__icon {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.ouiFilePicker--large.ouiFilePicker-hasFiles .ouiFilePicker__promptText {
font-weight: 500;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiForm__error {
font-size: 14px;
font-size: 1rem;
line-height: 1.5;
list-style: disc;
}
.ouiForm__errors {
margin-bottom: 16px;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiFormControlLayout {
max-width: 400px;
width: 100%;
height: 40px;
}
.ouiFormControlLayout--fullWidth {
max-width: 100%;
}
.ouiFormControlLayout--compressed {
height: 32px;
}
.ouiFormControlLayout--inGroup {
height: 100%;
}
.ouiFormControlLayout__childrenWrapper {
position: relative;
}
/**
* 1. Account for inner box-shadow style border
* 2. Ensure truncation works in children elements
*/
.ouiFormControlLayout--group {
background-color: #fcfeff;
background-repeat: no-repeat;
background-size: 0% 100%;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in;
display: -webkit-flex;
display: flex;
-webkit-align-items: stretch;
align-items: stretch;
padding: 1px; /* 1 */
/* Hide the box-shadow and grouping border combining */
}
.ouiFormControlLayout--group:hover, .ouiFormControlLayout--group:focus {
box-shadow: 0 1px 1px -1px rgba(173, 180, 186, 0.2), 0 3px 2px -2px rgba(173, 180, 186, 0.2), inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
@supports (-moz-appearance: none) {
.ouiFormControlLayout--group {
transition-property: box-shadow, background-image, background-size;
}
}
.ouiFormControlLayout--group > *,
.ouiFormControlLayout--group > .ouiFormControlLayout > *,
.ouiFormControlLayout--group .ouiPopover__anchor,
.ouiFormControlLayout--group .ouiButtonEmpty,
.ouiFormControlLayout--group .ouiText,
.ouiFormControlLayout--group .ouiFormLabel,
.ouiFormControlLayout--group .ouiButtonIcon {
height: 100%;
}
.ouiFormControlLayout--group .ouiFormControlLayout__childrenWrapper {
-webkit-flex-grow: 1;
flex-grow: 1;
overflow: hidden; /* 2 */
}
.ouiFormControlLayout--group .ouiFormControlLayout__prepend,
.ouiFormControlLayout--group .ouiFormControlLayout__append {
max-width: 100%;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
word-wrap: normal !important;
-webkit-flex-shrink: 0;
flex-shrink: 0;
height: 100%;
border-radius: 0;
}
.ouiFormControlLayout--group .ouiFormControlLayout__prepend.ouiIcon,
.ouiFormControlLayout--group .ouiFormControlLayout__prepend .ouiIcon,
.ouiFormControlLayout--group .ouiFormControlLayout__append.ouiIcon,
.ouiFormControlLayout--group .ouiFormControlLayout__append .ouiIcon {
padding: 0 8px;
width: 32px;
border-radius: 0;
background-color: #e9ecee;
}
.ouiFormControlLayout--group .ouiFormControlLayout__prepend.ouiButtonIcon, .ouiFormControlLayout--group .ouiFormControlLayout__prepend.ouiButtonEmpty,
.ouiFormControlLayout--group .ouiFormControlLayout__prepend .ouiButtonIcon,
.ouiFormControlLayout--group .ouiFormControlLayout__prepend .ouiButtonEmpty,
.ouiFormControlLayout--group .ouiFormControlLayout__append.ouiButtonIcon,
.ouiFormControlLayout--group .ouiFormControlLayout__append.ouiButtonEmpty,
.ouiFormControlLayout--group .ouiFormControlLayout__append .ouiButtonIcon,
.ouiFormControlLayout--group .ouiFormControlLayout__append .ouiButtonEmpty {
-webkit-transform: none !important;
transform: none !important;
}
.ouiFormControlLayout--group .ouiFormControlLayout__prepend.ouiButtonIcon .ouiIcon, .ouiFormControlLayout--group .ouiFormControlLayout__prepend.ouiButtonEmpty .ouiIcon,
.ouiFormControlLayout--group .ouiFormControlLayout__prepend .ouiButtonIcon .ouiIcon,
.ouiFormControlLayout--group .ouiFormControlLayout__prepend .ouiButtonEmpty .ouiIcon,
.ouiFormControlLayout--group .ouiFormControlLayout__append.ouiButtonIcon .ouiIcon,
.ouiFormControlLayout--group .ouiFormControlLayout__append.ouiButtonEmpty .ouiIcon,
.ouiFormControlLayout--group .ouiFormControlLayout__append .ouiButtonIcon .ouiIcon,
.ouiFormControlLayout--group .ouiFormControlLayout__append .ouiButtonEmpty .ouiIcon {
background: none !important;
padding: 0;
width: 16px;
}
.ouiFormControlLayout--group .ouiFieldText.ouiFormControlLayout__prepend, .ouiFormControlLayout--group .ouiFieldText.ouiFormControlLayout__append,
.ouiFormControlLayout--group .ouiFieldNumber.ouiFormControlLayout__prepend,
.ouiFormControlLayout--group .ouiFieldNumber.ouiFormControlLayout__append,
.ouiFormControlLayout--group .ouiFieldSearch.ouiFormControlLayout__prepend,
.ouiFormControlLayout--group .ouiFieldSearch.ouiFormControlLayout__append,
.ouiFormControlLayout--group .ouiFieldPassword.ouiFormControlLayout__prepend,
.ouiFormControlLayout--group .ouiFieldPassword.ouiFormControlLayout__append,
.ouiFormControlLayout--group .ouiSelect.ouiFormControlLayout__prepend,
.ouiFormControlLayout--group .ouiSelect.ouiFormControlLayout__append {
height: calc(100% + 2px);
margin: -1px -1px 0 1px;
}
.ouiFormControlLayout--group .ouiFieldText.ouiFormControlLayout__prepend:focus, .ouiFormControlLayout--group .ouiFieldText.ouiFormControlLayout__append:focus,
.ouiFormControlLayout--group .ouiFieldNumber.ouiFormControlLayout__prepend:focus,
.ouiFormControlLayout--group .ouiFieldNumber.ouiFormControlLayout__append:focus,
.ouiFormControlLayout--group .ouiFieldSearch.ouiFormControlLayout__prepend:focus,
.ouiFormControlLayout--group .ouiFieldSearch.ouiFormControlLayout__append:focus,
.ouiFormControlLayout--group .ouiFieldPassword.ouiFormControlLayout__prepend:focus,
.ouiFormControlLayout--group .ouiFieldPassword.ouiFormControlLayout__append:focus,
.ouiFormControlLayout--group .ouiSelect.ouiFormControlLayout__prepend:focus,
.ouiFormControlLayout--group .ouiSelect.ouiFormControlLayout__append:focus {
background-position: 1px -1px;
}
.ouiFormControlLayout--group .ouiFieldText.ouiFormControlLayout__prepend,
.ouiFormControlLayout--group .ouiFieldNumber.ouiFormControlLayout__prepend,
.ouiFormControlLayout--group .ouiFieldSearch.ouiFormControlLayout__prepend,
.ouiFormControlLayout--group .ouiFieldPassword.ouiFormControlLayout__prepend,
.ouiFormControlLayout--group .ouiSelect.ouiFormControlLayout__prepend {
margin: -1px 1px 0 -1px;
}
.ouiFormControlLayout--group .ouiFieldText.ouiFormControlLayout__prepend:focus,
.ouiFormControlLayout--group .ouiFieldNumber.ouiFormControlLayout__prepend:focus,
.ouiFormControlLayout--group .ouiFieldSearch.ouiFormControlLayout__prepend:focus,
.ouiFormControlLayout--group .ouiFieldPassword.ouiFormControlLayout__prepend:focus,
.ouiFormControlLayout--group .ouiSelect.ouiFormControlLayout__prepend:focus {
background-position: -1px -1px;
}
.ouiFormControlLayout--group .ouiButtonIcon {
padding: 0 8px;
width: 32px;
border-radius: 0;
}
.ouiFormControlLayout--group .ouiButtonIcon:not(:focus) {
background-color: #e9ecee;
}
.ouiFormControlLayout--group .ouiButtonIcon:focus-visible {
outline: 2px solid rgba(2, 104, 188, 0.3);
outline-offset: -2px;
}
.ouiFormControlLayout--group .ouiToolTipAnchor > .ouiIcon {
height: 100%;
background-color: #e9ecee;
padding: 0 8px;
width: 32px;
border-radius: 0;
}
.ouiFormControlLayout--group > .ouiFormControlLayout__prepend,
.ouiFormControlLayout--group > .ouiFormControlLayout__append {
max-width: 50%;
}
.ouiFormControlLayout--group .ouiFormLabel,
.ouiFormControlLayout--group .ouiText {
background-color: #e9ecee;
padding: 12px;
line-height: 14px !important;
cursor: default !important;
}
.ouiFormControlLayout--group .ouiFormLabel + *:not(.ouiFormControlLayout__childrenWrapper):not(input),
.ouiFormControlLayout--group .ouiText + *:not(.ouiFormControlLayout__childrenWrapper):not(input) {
margin-left: -12px;
}
.ouiFormControlLayout--group > *:not(.ouiFormControlLayout__childrenWrapper) + .ouiFormLabel,
.ouiFormControlLayout--group > *:not(.ouiFormControlLayout__childrenWrapper) + .ouiText {
margin-left: -12px;
}
.ouiFormControlLayout--group .ouiButtonEmpty {
border-right: 1px solid #e4e7ea;
}
.ouiFormControlLayout--group .ouiFormControlLayout__childrenWrapper ~ .ouiButtonEmpty,
.ouiFormControlLayout--group .ouiFormControlLayout__childrenWrapper ~ * .ouiButtonEmpty {
border-right: none;
border-left: 1px solid #e4e7ea;
}
.ouiFormControlLayout--group.ouiFormControlLayout--compressed {
background-color: #fcfeff;
background-repeat: no-repeat;
background-size: 0% 100%;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in;
border-radius: 2px;
overflow: hidden;
}
.ouiFormControlLayout--group.ouiFormControlLayout--compressed:hover, .ouiFormControlLayout--group.ouiFormControlLayout--compressed:focus {
box-shadow: 0 1px 1px -1px rgba(173, 180, 186, 0.2), 0 3px 2px -2px rgba(173, 180, 186, 0.2), inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
@supports (-moz-appearance: none) {
.ouiFormControlLayout--group.ouiFormControlLayout--compressed {
transition-property: box-shadow, background-image, background-size;
}
}
.ouiFormControlLayout--group.ouiFormControlLayout--compressed .ouiFormLabel,
.ouiFormControlLayout--group.ouiFormControlLayout--compressed .ouiText {
padding: 8px;
}
.ouiFormControlLayout--group.ouiFormControlLayout--compressed .ouiFormLabel + *:not(.ouiFormControlLayout__childrenWrapper),
.ouiFormControlLayout--group.ouiFormControlLayout--compressed .ouiText + *:not(.ouiFormControlLayout__childrenWrapper) {
margin-left: -8px;
}
.ouiFormControlLayout--group.ouiFormControlLayout--compressed > *:not(.ouiFormControlLayout__childrenWrapper) + .ouiFormLabel,
.ouiFormControlLayout--group.ouiFormControlLayout--compressed > *:not(.ouiFormControlLayout__childrenWrapper) + .ouiText {
margin-left: -8px;
}
.ouiFormControlLayout--group.ouiFormControlLayout--readOnly {
cursor: default;
background: rgba(214, 217, 221, 0.05);
border-color: transparent;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
.ouiFormControlLayout--group.ouiFormControlLayout--readOnly input {
background-color: transparent;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiFormControlLayoutDelimited {
background-color: #fcfeff;
background-repeat: no-repeat;
background-size: 0% 100%;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in;
display: -webkit-flex;
display: flex;
-webkit-align-items: stretch;
align-items: stretch;
padding: 1px; /* 1 */
}
.ouiFormControlLayoutDelimited:hover, .ouiFormControlLayoutDelimited:focus {
box-shadow: 0 1px 1px -1px rgba(173, 180, 186, 0.2), 0 3px 2px -2px rgba(173, 180, 186, 0.2), inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
@supports (-moz-appearance: none) {
.ouiFormControlLayoutDelimited {
transition-property: box-shadow, background-image, background-size;
}
}
.ouiFormControlLayoutDelimited .ouiFormControlLayoutDelimited__delimeter {
background-color: #f2f4f6;
}
.ouiFormControlLayoutDelimited > .ouiFormControlLayout__childrenWrapper {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
width: 100%;
}
.ouiFormControlLayoutDelimited[class*="--compressed"] {
background-color: #fcfeff;
background-repeat: no-repeat;
background-size: 0% 100%;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in;
border-radius: 2px;
}
.ouiFormControlLayoutDelimited[class*="--compressed"]:hover, .ouiFormControlLayoutDelimited[class*="--compressed"]:focus {
box-shadow: 0 1px 1px -1px rgba(173, 180, 186, 0.2), 0 3px 2px -2px rgba(173, 180, 186, 0.2), inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
@supports (-moz-appearance: none) {
.ouiFormControlLayoutDelimited[class*="--compressed"] {
transition-property: box-shadow, background-image, background-size;
}
}
.ouiFormControlLayoutDelimited[class*="--compressed"] .ouiFormControlLayoutDelimited__input {
height: 100%;
padding-top: 0;
padding-bottom: 0;
padding-left: 8px;
padding-right: 8px;
}
.ouiFormControlLayoutDelimited[class*="--compressed"] .ouiFormControlLayoutIcons {
padding-left: 8px;
padding-right: 8px;
}
.ouiFormControlLayoutDelimited[class*="--fullWidth"] .ouiFormControlLayout__childrenWrapper, .ouiFormControlLayoutDelimited[class*="--fullWidth"] input {
width: 100%;
max-width: none;
}
.ouiFormControlLayoutDelimited[class*=-isDisabled] {
color: #ADB4BA;
-webkit-text-fill-color: #ADB4BA;
cursor: not-allowed;
background: #dde0e3;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
.ouiFormControlLayoutDelimited[class*=-isDisabled]::-webkit-input-placeholder {
color: #ADB4BA;
opacity: 1;
}
.ouiFormControlLayoutDelimited[class*=-isDisabled]::-moz-placeholder {
color: #ADB4BA;
opacity: 1;
}
.ouiFormControlLayoutDelimited[class*=-isDisabled]::placeholder {
color: #ADB4BA;
opacity: 1;
}
.ouiFormControlLayoutDelimited[class*=-isDisabled] .ouiFormControlLayoutDelimited__delimeter {
background-color: #dde0e3;
}
.ouiFormControlLayoutDelimited[class*="--readOnly"] {
cursor: default;
background: rgba(214, 217, 221, 0.05);
border-color: transparent;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
.ouiFormControlLayoutDelimited[class*="--readOnly"] input,
.ouiFormControlLayoutDelimited[class*="--readOnly"] .ouiFormControlLayoutDelimited__delimeter {
background-color: rgba(214, 217, 221, 0.05);
}
.ouiFormControlLayoutDelimited .ouiFormControlLayoutIcons {
position: static;
padding-left: 12px;
padding-right: 12px;
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
.ouiFormControlLayoutDelimited .ouiFormControlLayoutIcons:not(.ouiFormControlLayoutIcons--right) {
-webkit-order: -1;
order: -1;
}
.ouiFormControlLayoutDelimited__input {
box-shadow: none !important;
border-radius: 0 !important;
text-align: center;
height: 100%;
min-width: 0;
}
.ouiFormControlLayoutDelimited[class*="--compressed"] .ouiFormControlLayoutDelimited__input {
max-width: none;
}
.ouiFormControlLayoutDelimited__delimeter {
line-height: 1 !important;
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 6px;
padding-right: 6px;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiFormControlLayoutIcons {
pointer-events: none;
position: absolute;
top: 0;
bottom: 0;
left: 12px;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
}
.ouiFormControlLayoutIcons > * + * {
margin-left: 6px;
}
.ouiFormControlLayout--compressed .ouiFormControlLayoutIcons {
left: 8px;
}
.ouiFormControlLayoutIcons--right {
left: auto;
right: 12px;
}
.ouiFormControlLayout--compressed .ouiFormControlLayoutIcons--right {
left: auto;
right: 8px;
}
*:disabled + .ouiFormControlLayoutIcons {
cursor: not-allowed;
color: #ADB4BA;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiFormControlLayoutClearButton {
width: 16px;
height: 16px;
pointer-events: all;
background-color: #ADB4BA;
border-radius: 16px;
line-height: 0;
}
.ouiFormControlLayoutClearButton:focus {
-webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important;
animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important;
}
.ouiFormControlLayoutClearButton .ouiFormControlLayoutClearButton__icon {
width: 8px;
height: 8px;
fill: #FCFEFF;
stroke: #FCFEFF;
stroke-width: 2px;
}
.ouiFormControlLayoutClearButton--small {
width: 12px;
height: 12px;
pointer-events: all;
background-color: #ADB4BA;
border-radius: 12px;
line-height: 0;
}
.ouiFormControlLayoutClearButton--small:focus {
-webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important;
animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important;
}
.ouiFormControlLayoutClearButton--small .ouiFormControlLayoutClearButton__icon {
width: 6px;
height: 6px;
fill: #FCFEFF;
stroke: #FCFEFF;
stroke-width: 4px;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiFormControlLayoutCustomIcon {
pointer-events: none;
font-size: 0;
}
.ouiFormControlLayoutCustomIcon--clickable {
width: 16px;
height: 16px;
pointer-events: all;
}
.ouiFormControlLayoutCustomIcon--clickable .ouiFormControlLayoutCustomIcon__icon {
vertical-align: baseline;
-webkit-transform: none;
transform: none;
}
.ouiFormControlLayoutCustomIcon--clickable:focus {
-webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important;
animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important;
}
.ouiFormControlLayoutCustomIcon--clickable:disabled {
cursor: not-allowed;
color: #ADB4BA;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiFormErrorText {
font-size: 12.000002px;
font-size: 0.857143rem;
line-height: 1.5;
padding-top: 4px;
color: #C43D35;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiFormLegend {
font-size: 12.000002px;
font-size: 0.857143rem;
line-height: 1.5;
color: #161e2b;
font-weight: 500;
}
.ouiFormLegend:not(.ouiFormLegend-isHidden) {
margin-bottom: 8px;
}
.ouiFormLegend:not(.ouiFormLegend-isHidden).ouiFormLegend--compressed {
margin-bottom: 4px;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiFormHelpText {
font-size: 12.000002px;
font-size: 0.857143rem;
line-height: 1.5;
padding-top: 4px;
color: #5A6875;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/**
* 1. Focused state overrides invalid state.
*/
.ouiFormLabel {
font-size: 12.000002px;
font-size: 0.857143rem;
line-height: 1.5;
color: #161e2b;
font-weight: 500;
display: inline-block;
transition: all 150ms cubic-bezier(0.694, 0.0482, 0.335, 1);
}
.ouiFormLabel.ouiFormLabel-isInvalid {
color: #C43D35; /* 1 */
}
.ouiFormLabel.ouiFormLabel-isFocused {
color: #0268BC; /* 1 */
}
.ouiFormLabel[for] {
cursor: pointer;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/**
* 1. Coerce inline form elements to behave as block-level elements.
* 2. For inline forms, we need to add margin if the label doesn't exist.
*/
.ouiFormRow {
display: -webkit-flex;
display: flex; /* 1 */
-webkit-flex-direction: column;
flex-direction: column; /* 1 */
max-width: 400px;
}
.ouiFormRow + .ouiFormRow,
.ouiFormRow + .ouiButton {
margin-top: 16px;
}
.ouiFormRow--fullWidth {
max-width: 100%;
}
.ouiFormRow--hasEmptyLabelSpace {
margin-top: 22.000003px; /* 2 */
min-height: 40px;
padding-bottom: 0;
-webkit-justify-content: center;
justify-content: center;
}
.ouiFormRow__labelWrapper {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-between;
justify-content: space-between;
margin-bottom: 4px;
}
.ouiFormRow--horizontal {
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: stretch;
align-items: stretch;
}
.ouiFormRow--horizontal .ouiFormRow__label {
overflow-wrap: break-word !important;
word-wrap: break-word !important;
word-break: break-word;
-webkit-hyphens: auto;
hyphens: auto;
max-width: 100%;
}
.ouiFormRow--horizontal .ouiFormRow__labelWrapper {
display: block;
line-height: 31px;
width: calc(33% - 8px);
margin-right: 8px;
margin-bottom: 0;
}
.ouiFormRow--horizontal .ouiFormRow__fieldWrapper {
width: 67%;
}
.ouiFormRow--horizontal + .ouiFormRow--horizontal {
margin-top: 8px;
}
.ouiFormRow--horizontal + .ouiFormRow--horizontal.ouiFormRow--hasSwitch {
margin-top: 12px;
}
.ouiFormRow--horizontal.ouiFormRow--hasSwitch .ouiFormRow__labelWrapper {
line-height: 19px;
width: auto;
min-width: calc(33% - 8px);
}
.ouiFormRow--horizontal.ouiFormRow--hasSwitch .ouiFormRow__fieldWrapper {
width: auto;
}
.ouiFormRow--horizontal.ouiFormRow--hasSwitch .ouiFormRow__fieldWrapper .ouiSwitch--compressed {
margin-top: 2px;
}
.ouiFormRow--horizontal.ouiFormRow--hasSwitch + .ouiFormRow--horizontal {
margin-top: 12px;
}
.ouiFormRow__fieldWrapperDisplayOnly {
min-height: 40px;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
}
.ouiFormRow--compressed.ouiFormRow--hasEmptyLabelSpace {
min-height: 32px;
}
.ouiFormRow--compressed .ouiFormRow__fieldWrapperDisplayOnly {
min-height: 32px;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiRadio {
position: relative;
/**
* 1. Float above the visual radio and match its dimension, so that when users try to click it
* they actually click this input.
*/
}
.ouiRadio .ouiRadio__input {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.ouiRadio .ouiRadio__input ~ .ouiRadio__label {
display: inline-block;
padding-left: 24px;
line-height: 24px;
font-size: 14px;
position: relative;
z-index: 2;
cursor: pointer;
}
.ouiRadio .ouiRadio__input + .ouiRadio__circle {
box-shadow: 0 2px 2px -1px rgba(173, 180, 186, 0.3);
padding: 7px;
border: 1px solid #bbbcc1;
background: #FCFEFF no-repeat center;
border-radius: 14px;
transition: background-color 150ms ease-in, border-color 150ms ease-in;
display: inline-block;
position: absolute;
left: 0;
top: 3px;
}
.ouiRadio .ouiRadio__input:checked + .ouiRadio__circle {
border-color: #0268BC;
background-color: #0268BC;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'%3E%3Ccircle cx='8' cy='11' r='3' fill='rgb%28252, 254, 255%29' fill-rule='evenodd' transform='translate(-5 -8)'/%3E%3C/svg%3E");
}
.ouiRadio .ouiRadio__input[disabled] {
cursor: not-allowed !important;
}
.ouiRadio .ouiRadio__input[disabled] ~ .ouiRadio__label {
color: #ADB4BA;
cursor: not-allowed !important;
}
.ouiRadio .ouiRadio__input[disabled] + .ouiRadio__circle {
border-color: #D6D9DD;
background-color: #D6D9DD;
box-shadow: none;
}
.ouiRadio .ouiRadio__input:checked[disabled] + .ouiRadio__circle {
border-color: #D6D9DD;
background-color: #D6D9DD;
box-shadow: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'%3E%3Ccircle cx='8' cy='11' r='3' fill='rgb%28108, 112, 121%29' fill-rule='evenodd' transform='translate(-5 -8)'/%3E%3C/svg%3E");
}
.ouiRadio .ouiRadio__input:focus + .ouiRadio__circle, .ouiRadio .ouiRadio__input:active:not(:disabled) + .ouiRadio__circle {
-webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important;
animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important;
border-color: #0268BC;
}
.ouiRadio.ouiRadio--inList, .ouiRadio.ouiRadio--noLabel {
min-height: 16px;
min-width: 16px;
}
.ouiRadio.ouiRadio--inList .ouiRadio__circle, .ouiRadio.ouiRadio--noLabel .ouiRadio__circle {
top: 0;
}
.ouiRadio.ouiRadio--inList .ouiRadio__input, .ouiRadio.ouiRadio--noLabel .ouiRadio__input {
width: 16px;
height: 16px;
/* 1 */
position: absolute; /* 1 */
opacity: 0; /* 1 */
z-index: 1; /* 1 */
margin: 0; /* 1 */
left: 0; /* 1 */
cursor: pointer;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiRadioGroup__item + .ouiRadioGroup__item {
margin-top: 4px;
}
.ouiRadioGroup__item + .ouiRadioGroup__item.ouiRadio--compressed {
margin-top: 0;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiRange__horizontalSpacer {
width: 16px;
}
.ouiRange__slimHorizontalSpacer {
width: 8px;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiRangeDraggable {
height: 20px;
position: absolute;
top: 10px;
pointer-events: none;
z-index: 2;
}
.ouiRangeDraggable.ouiRangeDraggable--compressed {
height: 16px;
top: 8px;
}
.ouiRangeDraggable.ouiRangeDraggable--hasTicks {
top: 0;
}
.ouiRangeDraggable .ouiRangeDraggle__inner {
position: absolute;
left: 16px;
right: 16px;
top: 0;
bottom: 0;
}
.ouiRangeDraggable:not(.ouiRangeDraggable--disabled) .ouiRangeDraggle__inner {
cursor: -webkit-grab;
cursor: grab;
pointer-events: all;
}
.ouiRangeDraggable:not(.ouiRangeDraggable--disabled) .ouiRangeDraggle__inner:active {
cursor: -webkit-grabbing;
cursor: grabbing;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiRangeHighlight {
position: absolute;
left: 0;
width: 100%;
top: calc(50% - 2px);
overflow: hidden;
}
.ouiRangeHighlight__progress {
height: 4px;
border-radius: 4px;
background-color: #5A6875;
}
.ouiRangeHighlight__progress--hasFocus {
background-color: #0268BC;
}
.ouiRangeHighlight--hasTicks {
top: 8px;
}
.ouiRangeHighlight--hasTicks.ouiRangeHighlight--compressed {
top: 6px;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiRangeInput {
width: auto;
min-width: 64px;
}
.ouiRange__popover .ouiRangeInput {
margin: 0 !important;
width: 100%;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiRangeLabel--min, .ouiRangeLabel--max {
font-size: 12.000002px;
}
.ouiRangeLabel--min {
margin-right: 8px;
}
.ouiRangeLabel--max {
margin-left: 8px;
}
.ouiRangeLabel--isDisabled {
opacity: 0.25;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiRangeLevels {
display: -webkit-flex;
display: flex;
-webkit-justify-content: stretch;
justify-content: stretch;
position: absolute;
left: 0;
right: 0;
top: 22px;
}
.ouiRangeLevels--hasTicks {
top: 12px;
}
.ouiRangeLevels--compressed {
top: 18px;
}
.ouiRangeLevels--compressed.ouiRangeLevels--hasTicks {
top: 10px;
}
.ouiRangeLevel {
display: block;
height: 6px;
border-radius: 6px;
margin: 2px;
}
.ouiRangeLevel--primary {
background-color: rgba(2, 104, 188, 0.3);
}
.ouiRangeLevel--success {
background-color: rgba(15, 123, 104, 0.3);
}
.ouiRangeLevel--warning {
background-color: rgba(224, 161, 48, 0.3);
}
.ouiRangeLevel--danger {
background-color: rgba(196, 61, 53, 0.3);
}
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*
* Input Range Customization by browser
*/
.ouiRangeSlider {
height: 40px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: transparent;
width: 100%;
position: relative;
cursor: pointer;
z-index: 1;
}
.ouiRangeSlider:disabled {
cursor: not-allowed;
}
.ouiRangeSlider:disabled::-webkit-slider-thumb {
cursor: not-allowed;
border-color: #5A6875;
background-color: #5A6875;
box-shadow: none;
}
.ouiRangeSlider:disabled::-moz-range-thumb {
cursor: not-allowed;
border-color: #5A6875;
background-color: #5A6875;
box-shadow: none;
}
.ouiRangeSlider:disabled::-ms-thumb {
cursor: not-allowed;
border-color: #5A6875;
background-color: #5A6875;
box-shadow: none;
}
.ouiRangeSlider:disabled ~ .ouiRangeThumb {
cursor: not-allowed;
border-color: #5A6875;
background-color: #5A6875;
box-shadow: none;
}
.ouiRangeSlider::-webkit-slider-thumb {
box-shadow: 0 2px 2px -1px rgba(173, 180, 186, 0.3);
padding: 7px;
border: 1px solid #bbbcc1;
background: #FCFEFF no-repeat center;
border-radius: 14px;
-webkit-transition: background-color 150ms ease-in, border-color 150ms ease-in;
transition: background-color 150ms ease-in, border-color 150ms ease-in;
cursor: pointer;
border-color: #5A6875;
padding: 0;
height: 16px;
width: 16px;
}
.ouiRangeSlider::-moz-range-thumb {
box-shadow: 0 2px 2px -1px rgba(173, 180, 186, 0.3);
padding: 7px;
border: 1px solid #bbbcc1;
background: #FCFEFF no-repeat center;
border-radius: 14px;
-moz-transition: background-color 150ms ease-in, border-color 150ms ease-in;
transition: background-color 150ms ease-in, border-color 150ms ease-in;
cursor: pointer;
border-color: #5A6875;
padding: 0;
height: 16px;
width: 16px;
}
.ouiRangeSlider::-ms-thumb {
box-shadow: 0 2px 2px -1px rgba(173, 180, 186, 0.3);
padding: 7px;
border: 1px solid #bbbcc1;
background: #FCFEFF no-repeat center;
border-radius: 14px;
-ms-transition: background-color 150ms ease-in, border-color 150ms ease-in;
transition: background-color 150ms ease-in, border-color 150ms ease-in;
cursor: pointer;
border-color: #5A6875;
padding: 0;
height: 16px;
width: 16px;
}
.ouiRangeSlider::-webkit-slider-runnable-track {
height: 2px;
-webkit-transition: all 250ms ease-in;
transition: all 250ms ease-in;
width: 100%;
background: #5A6875;
border: 0px solid #5A6875;
border-radius: 4px;
}
.ouiRangeSlider::-moz-range-track {
height: 2px;
-moz-transition: all 250ms ease-in;
transition: all 250ms ease-in;
width: 100%;
background: #5A6875;
border: 0px solid #5A6875;
border-radius: 4px;
}
.ouiRangeSlider::-ms-fill-lower {
height: 2px;
-ms-transition: all 250ms ease-in;
transition: all 250ms ease-in;
width: 100%;
background: #5A6875;
border: 0px solid #5A6875;
border-radius: 4px;
}
.ouiRangeSlider::-ms-fill-upper {
height: 2px;
-ms-transition: all 250ms ease-in;
transition: all 250ms ease-in;
width: 100%;
background: #5A6875;
border: 0px solid #5A6875;
border-radius: 4px;
}
.ouiRangeSlider:focus {
outline: none;
}
.ouiRangeSlider:focus-visible::-webkit-slider-thumb, .ouiRangeSlider--hasFocus::-webkit-slider-thumb {
box-shadow: 0 0 0 3px rgba(2, 104, 188, 0.3);
}
.ouiRangeSlider:focus-visible::-moz-range-thumb, .ouiRangeSlider--hasFocus::-moz-range-thumb {
box-shadow: 0 0 0 3px rgba(2, 104, 188, 0.3);
}
.ouiRangeSlider:focus-visible::-ms-thumb, .ouiRangeSlider--hasFocus::-ms-thumb {
box-shadow: 0 0 0 3px rgba(2, 104, 188, 0.3);
}
.ouiRangeSlider:focus-visible ~ .ouiRangeThumb, .ouiRangeSlider--hasFocus ~ .ouiRangeThumb {
border-color: #5A6875;
}
.ouiRangeSlider:focus-visible::-webkit-slider-runnable-track, .ouiRangeSlider--hasFocus::-webkit-slider-runnable-track {
background-color: #0268BC;
border-color: #0268BC;
}
.ouiRangeSlider:focus-visible::-moz-range-track, .ouiRangeSlider--hasFocus::-moz-range-track {
background-color: #0268BC;
border-color: #0268BC;
}
.ouiRangeSlider:focus-visible::-ms-fill-lower, .ouiRangeSlider--hasFocus::-ms-fill-lower {
background-color: #0268BC;
border-color: #0268BC;
}
.ouiRangeSlider:focus-visible::-ms-fill-upper, .ouiRangeSlider--hasFocus::-ms-fill-upper {
background-color: #0268BC;
border-color: #0268BC;
}
.ouiRangeSlider:focus-visible ~ .ouiRangeHighlight .ouiRangeHighlight__progress, .ouiRangeSlider--hasFocus ~ .ouiRangeHighlight .ouiRangeHighlight__progress {
background-color: #0268BC;
}
.ouiRangeSlider:focus-visible ~ .ouiRangeTooltip .ouiRangeTooltip__value, .ouiRangeSlider--hasFocus ~ .ouiRangeTooltip .ouiRangeTooltip__value {
box-shadow: 0 6px 12px -1px rgba(173, 180, 186, 0.2), 0 4px 4px -1px rgba(173, 180, 186, 0.2), 0 2px 2px 0 rgba(173, 180, 186, 0.2);
}
.ouiRangeSlider:focus-visible ~ .ouiRangeTooltip .ouiRangeTooltip__value.ouiRangeTooltip__value--right, .ouiRangeSlider:focus-visible ~ .ouiRangeTooltip .ouiRangeTooltip__value.ouiRangeTooltip__value--left, .ouiRangeSlider--hasFocus ~ .ouiRangeTooltip .ouiRangeTooltip__value.ouiRangeTooltip__value--right, .ouiRangeSlider--hasFocus ~ .ouiRangeTooltip .ouiRangeTooltip__value.ouiRangeTooltip__value--left {
-webkit-transform: translateX(0) translateY(-50%) scale(1.1);
transform: translateX(0) translateY(-50%) scale(1.1);
}
.ouiRangeSlider::-webkit-slider-thumb {
-webkit-appearance: none;
margin-top: -7px;
}
.ouiRangeSlider::-ms-thumb {
margin-top: 0;
}
.ouiRangeSlider::-moz-focus-outer {
border: none;
}
.ouiRangeSlider::-ms-track {
height: 2px;
-ms-transition: all 250ms ease-in;
transition: all 250ms ease-in;
width: 100%;
background: transparent;
border-color: transparent;
border-width: 8px 0;
color: transparent;
}
.ouiRangeSlider--hasTicks {
height: 20px;
}
.ouiRangeSlider--compressed {
height: 32px;
}
.ouiRangeSlider--compressed.ouiRangeSlider--hasTicks {
height: 16px;
}
.ouiRangeSlider--hasRange::-webkit-slider-runnable-track {
background-color: rgba(90, 104, 117, 0.4);
border-color: rgba(90, 104, 117, 0.4);
}
.ouiRangeSlider--hasRange::-moz-range-track {
background-color: rgba(90, 104, 117, 0.4);
border-color: rgba(90, 104, 117, 0.4);
}
.ouiRangeSlider--hasRange::-ms-fill-lower {
background-color: rgba(90, 104, 117, 0.4);
border-color: rgba(90, 104, 117, 0.4);
}
.ouiRangeSlider--hasRange::-ms-fill-upper {
background-color: rgba(90, 104, 117, 0.4);
border-color: rgba(90, 104, 117, 0.4);
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiRangeThumb {
box-shadow: 0 2px 2px -1px rgba(173, 180, 186, 0.3);
padding: 7px;
border: 1px solid #bbbcc1;
background: #FCFEFF no-repeat center;
border-radius: 14px;
transition: background-color 150ms ease-in, border-color 150ms ease-in;
cursor: pointer;
border-color: #5A6875;
padding: 0;
height: 16px;
width: 16px;
content: "";
position: absolute;
left: 0;
top: 50%;
margin-top: -8px;
pointer-events: none;
z-index: 1;
}
.ouiRangeThumb:focus {
-webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important;
animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important;
border-color: #0268BC;
}
.ouiRangeThumb--hasTicks {
top: 25%;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiRangeTicks {
position: absolute;
left: 0;
right: 0;
top: 8px;
display: -webkit-flex;
display: flex;
}
.ouiRangeTicks--isCustom {
left: 2px;
right: 2px;
}
.ouiRangeTick {
overflow-x: hidden;
text-overflow: ellipsis;
font-size: 12.000002px;
position: absolute;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
padding-top: 16px;
}
.ouiRangeTick:not(.ouiRangeTick--hasTickMark)::before {
width: 4px;
height: 4px;
background-color: #5A6875;
border-radius: 100%;
position: absolute;
top: 0;
content: "";
left: calc(50% - 2px);
}
.ouiRangeTick .ouiRangeTick__pseudo {
width: 4px;
height: 4px;
background-color: #5A6875;
border-radius: 100%;
position: absolute;
top: 0;
}
.ouiRangeTick--isCustom {
overflow-x: visible;
}
.ouiRangeTick--isMin, .ouiRangeTick--isMax {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.ouiRangeTick--isMin .ouiRangeTick__pseudo {
left: 0;
}
.ouiRangeTick--isMax .ouiRangeTick__pseudo {
right: 0;
}
.ouiRangeTick:enabled:hover, .ouiRangeTick:focus, .ouiRangeTick--selected {
color: #0268BC;
}
.ouiRangeTick--selected {
font-weight: 500;
}
.ouiRangeTick:disabled {
cursor: not-allowed;
}
.ouiRangeTicks--compressed {
top: 6px;
}
.ouiRangeTicks--compressed .ouiRangeTick {
padding-top: 14px;
}
.ouiRangeTick__label {
pointer-events: none;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiRangeTooltip {
display: block;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: calc(100% - 16px);
margin-left: 8px;
pointer-events: none;
z-index: 2;
}
.ouiRangeTooltip__value {
font-size: 14px;
font-size: 1rem;
line-height: 1.5;
border: 1px solid #2A3947;
position: absolute;
border-radius: 4px;
padding: 2px 8px;
background-color: #2A3947;
color: #FCFEFF;
max-width: 256px;
top: 50%;
transition: box-shadow 250ms cubic-bezier(0.694, 0.0482, 0.335, 1), -webkit-transform 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
transition: box-shadow 250ms cubic-bezier(0.694, 0.0482, 0.335, 1), transform 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
transition: box-shadow 250ms cubic-bezier(0.694, 0.0482, 0.335, 1), transform 250ms cubic-bezier(0.694, 0.0482, 0.335, 1), -webkit-transform 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
}
.ouiRangeTooltip__value::after, .ouiRangeTooltip__value::before {
content: "";
position: absolute;
bottom: -6px;
left: 50%;
-webkit-transform-origin: center;
transform-origin: center;
background-color: #2A3947;
width: 12px;
height: 12px;
border-radius: 2px;
}
.ouiRangeTooltip__value::before {
background-color: #2A3947;
}
.ouiRangeTooltip__value.ouiRangeTooltip__value--right {
margin-left: 24px;
}
.ouiRangeTooltip__value.ouiRangeTooltip__value--right:before, .ouiRangeTooltip__value.ouiRangeTooltip__value--right:after {
left: -5px;
}
.ouiRangeTooltip__value.ouiRangeTooltip__value--right::before {
margin-left: -1px;
}
.ouiRangeTooltip__value.ouiRangeTooltip__value--left {
margin-right: 24px;
}
.ouiRangeTooltip__value.ouiRangeTooltip__value--left:before, .ouiRangeTooltip__value.ouiRangeTooltip__value--left:after {
left: auto;
right: -5px;
}
.ouiRangeTooltip__value.ouiRangeTooltip__value--left::before {
margin-right: -1px;
}
.ouiRangeTooltip__value.ouiRangeTooltip__value--right, .ouiRangeTooltip__value.ouiRangeTooltip__value--left {
-webkit-transform: translateX(0) translateY(-50%);
transform: translateX(0) translateY(-50%);
}
.ouiRangeTooltip__value.ouiRangeTooltip__value--right:before, .ouiRangeTooltip__value.ouiRangeTooltip__value--right:after, .ouiRangeTooltip__value.ouiRangeTooltip__value--left:before, .ouiRangeTooltip__value.ouiRangeTooltip__value--left:after {
bottom: 50%;
-webkit-transform: translateY(50%) rotateZ(45deg);
transform: translateY(50%) rotateZ(45deg);
}
.ouiRangeTooltip__value--hasTicks {
top: 10px;
}
.ouiRangeTooltip--compressed .ouiRangeTooltip__value--hasTicks {
top: 8px;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiRangeTrack {
height: 100%;
-webkit-flex-grow: 1;
flex-grow: 1;
position: relative;
-webkit-align-self: flex-start;
align-self: flex-start;
}
.ouiRangeTrack--hasTicks {
margin-left: 1em;
margin-right: 1em;
}
.ouiRangeTrack--disabled {
opacity: 0.25;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*
* 1. There's no way to target the layout of the extra input, so we must
* use the descendant selector to allow the width to shrink.
*
* 2. Prevent the prepend/append label from extending outside the parent element
*/
.ouiRangeWrapper {
max-width: 400px;
width: 100%;
height: 40px;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
}
.ouiRangeWrapper--fullWidth {
max-width: 100%;
}
.ouiRangeWrapper--compressed {
height: 32px;
}
.ouiRangeWrapper--inGroup {
height: 100%;
}
.ouiRangeWrapper > .ouiFormControlLayout { /* 1 */
width: auto;
}
.ouiRangeWrapper > .ouiFormControlLayout.ouiFormControlLayout--group {
-webkit-flex-shrink: 0;
flex-shrink: 0; /* 2 */
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiDualRange__slider::-webkit-slider-thumb {
visibility: hidden;
}
.ouiDualRange__slider::-moz-range-thumb {
visibility: hidden;
}
.ouiDualRange__slider::-ms-thumb {
visibility: hidden;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/**
* 1. Leave room for caret.
* 2. Ensure the descenders don't get cut off
*/
.ouiSelect {
max-width: 400px;
width: 100%;
height: 40px;
background-color: #fcfeff;
background-repeat: no-repeat;
background-size: 0% 100%;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in;
font-family: var(--oui-font-family);
font-weight: 400;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-font-kerning: normal;
font-kerning: normal;
font-size: 14px;
color: #2A3947;
border: none;
border-radius: 0;
padding: 12px;
padding-right: 40px;
/* 1 */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
line-height: 40px; /* 2 */
padding-top: 0; /* 2 */
padding-bottom: 0; /* 2 */
}
.ouiSelect--fullWidth {
max-width: 100%;
}
.ouiSelect--compressed {
height: 32px;
}
.ouiSelect--inGroup {
height: 100%;
}
.ouiSelect:hover, .ouiSelect:focus {
box-shadow: 0 1px 1px -1px rgba(173, 180, 186, 0.2), 0 3px 2px -2px rgba(173, 180, 186, 0.2), inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
@supports (-moz-appearance: none) {
.ouiSelect {
transition-property: box-shadow, background-image, background-size;
}
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
.ouiSelect {
line-height: 1em;
}
}
.ouiSelect::-webkit-input-placeholder {
color: #686c75;
opacity: 1;
}
.ouiSelect::-moz-placeholder {
color: #686c75;
opacity: 1;
}
.ouiSelect::placeholder {
color: #686c75;
opacity: 1;
}
.ouiSelect:invalid {
background-image: linear-gradient(to top, #C43D35, #C43D35 2px, transparent 2px, transparent 100%);
background-size: 100%;
}
.ouiSelect:focus {
background-color: #fcfeff;
background-image: linear-gradient(to top, #0268BC, #0268BC 2px, transparent 2px, transparent 100%);
background-size: 100% 100%;
box-shadow: 0 1px 1px -1px rgba(173, 180, 186, 0.2), 0 4px 4px -2px rgba(173, 180, 186, 0.2), inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
.ouiSelect:disabled {
color: #ADB4BA;
-webkit-text-fill-color: #ADB4BA;
cursor: not-allowed;
background: #dde0e3;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
.ouiSelect:disabled::-webkit-input-placeholder {
color: #ADB4BA;
opacity: 1;
}
.ouiSelect:disabled::-moz-placeholder {
color: #ADB4BA;
opacity: 1;
}
.ouiSelect:disabled::placeholder {
color: #ADB4BA;
opacity: 1;
}
.ouiSelect[readOnly] {
cursor: default;
background: rgba(214, 217, 221, 0.05);
border-color: transparent;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
.ouiSelect:-webkit-autofill, .ouiSelect:autofill {
/* Many browsers use `!important` in their built-in `:-webkit-autofill` style declarations,
* making their colors non-overridable. `-webkit-text-fill-color` is able to overwrite the
* appearance of texts and is used here as a workaround.
*/
-webkit-text-fill-color: #2A3947;
/* OUI -> EUI Aliases */
/* End of Aliases */
}
.ouiSelect:-webkit-autofill ~ .ouiFormControlLayoutIcons, .ouiSelect:autofill ~ .ouiFormControlLayoutIcons {
color: #2A3947;
}
.ouiSelect:-webkit-autofill ~ .euiFormControlLayoutIcons, .ouiSelect:autofill ~ .euiFormControlLayoutIcons {
color: #2A3947;
}
.ouiSelect--compressed {
background-color: #fcfeff;
background-repeat: no-repeat;
background-size: 0% 100%;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in;
padding: 8px;
border-radius: 2px;
}
.ouiSelect--compressed:hover, .ouiSelect--compressed:focus {
box-shadow: 0 1px 1px -1px rgba(173, 180, 186, 0.2), 0 3px 2px -2px rgba(173, 180, 186, 0.2), inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
@supports (-moz-appearance: none) {
.ouiSelect--compressed {
transition-property: box-shadow, background-image, background-size;
}
}
.ouiSelect--compressed:invalid {
background-image: linear-gradient(to top, #C43D35, #C43D35 2px, transparent 2px, transparent 100%);
background-size: 100%;
}
.ouiSelect--compressed:focus {
background-color: #fcfeff;
background-image: linear-gradient(to top, #0268BC, #0268BC 2px, transparent 2px, transparent 100%);
background-size: 100% 100%;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
.ouiSelect--compressed:disabled {
color: #ADB4BA;
-webkit-text-fill-color: #ADB4BA;
cursor: not-allowed;
background: #dde0e3;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
.ouiSelect--compressed:disabled::-webkit-input-placeholder {
color: #ADB4BA;
opacity: 1;
}
.ouiSelect--compressed:disabled::-moz-placeholder {
color: #ADB4BA;
opacity: 1;
}
.ouiSelect--compressed:disabled::placeholder {
color: #ADB4BA;
opacity: 1;
}
.ouiSelect--compressed[readOnly] {
cursor: default;
background: rgba(214, 217, 221, 0.05);
border-color: transparent;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
.ouiSelect--inGroup {
box-shadow: none !important;
border-radius: 0;
}
.ouiSelect-isLoading {
padding-right: 62px;
}
.ouiSelect-isLoading.ouiSelect--compressed {
padding-right: 54px;
}
.ouiSelect--compressed {
padding-right: 32px;
/* 1 */
line-height: 32px; /* 2 */
padding-top: 0; /* 2 */
padding-bottom: 0; /* 2 */
}
.ouiSelect--inGroup {
line-height: 38px; /* 2 */
}
.ouiSelect--inGroup.ouiSelect--compressed {
line-height: 30px; /* 2 */
}
.ouiSelect::-ms-expand {
display: none;
}
.ouiSelect:focus::-ms-value {
color: #2A3947;
background: transparent;
}
.ouiSelect:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #2A3947;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiSuperSelect__listbox {
scrollbar-width: thin;
max-height: 300px;
overflow: hidden;
overflow-y: auto;
}
.ouiSuperSelect__listbox::-webkit-scrollbar {
width: 16px;
height: 16px;
}
.ouiSuperSelect__listbox::-webkit-scrollbar-thumb {
background-color: rgba(90, 104, 117, 0.5);
border: 6px solid transparent;
background-clip: content-box;
}
.ouiSuperSelect__listbox::-webkit-scrollbar-corner, .ouiSuperSelect__listbox::-webkit-scrollbar-track {
background-color: transparent;
}
.ouiSuperSelect__item {
font-size: 14px;
font-size: 1rem;
line-height: 1.5;
padding: 8px;
}
.ouiSuperSelect__item:hover {
cursor: pointer;
text-decoration: underline;
}
.ouiSuperSelect__item:focus {
cursor: pointer;
text-decoration: underline;
background-color: #e3eff8;
}
.ouiSuperSelect__item:disabled {
cursor: not-allowed;
text-decoration: none;
color: #a3a7ae;
}
.ouiSuperSelect__item--hasDividers:not(:last-of-type) {
border-bottom: 1px solid #D6D9DD;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/**
* 1. Leave room for caret.
* 2. Ensure the descenders don't get cut off
* 3. Makes sure the height is correct when there's no selection
*/
.ouiSuperSelectControl {
max-width: 400px;
width: 100%;
height: 40px;
background-color: #fcfeff;
background-repeat: no-repeat;
background-size: 0% 100%;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in;
font-family: var(--oui-font-family);
font-weight: 400;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-font-kerning: normal;
font-kerning: normal;
font-size: 14px;
color: #2A3947;
border: none;
border-radius: 0;
padding: 12px;
padding-right: 40px;
/* 1 */
display: block; /* 3 */
text-align: left;
line-height: 40px; /* 2 */
padding-top: 0; /* 2 */
padding-bottom: 0; /* 2 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ouiSuperSelectControl--fullWidth {
max-width: 100%;
}
.ouiSuperSelectControl--compressed {
height: 32px;
}
.ouiSuperSelectControl--inGroup {
height: 100%;
}
.ouiSuperSelectControl:hover, .ouiSuperSelectControl:focus {
box-shadow: 0 1px 1px -1px rgba(173, 180, 186, 0.2), 0 3px 2px -2px rgba(173, 180, 186, 0.2), inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
@supports (-moz-appearance: none) {
.ouiSuperSelectControl {
transition-property: box-shadow, background-image, background-size;
}
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
.ouiSuperSelectControl {
line-height: 1em;
}
}
.ouiSuperSelectControl::-webkit-input-placeholder {
color: #686c75;
opacity: 1;
}
.ouiSuperSelectControl::-moz-placeholder {
color: #686c75;
opacity: 1;
}
.ouiSuperSelectControl::placeholder {
color: #686c75;
opacity: 1;
}
.ouiSuperSelectControl:invalid {
background-image: linear-gradient(to top, #C43D35, #C43D35 2px, transparent 2px, transparent 100%);
background-size: 100%;
}
.ouiSuperSelectControl:focus {
background-color: #fcfeff;
background-image: linear-gradient(to top, #0268BC, #0268BC 2px, transparent 2px, transparent 100%);
background-size: 100% 100%;
box-shadow: 0 1px 1px -1px rgba(173, 180, 186, 0.2), 0 4px 4px -2px rgba(173, 180, 186, 0.2), inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
.ouiSuperSelectControl:disabled {
color: #ADB4BA;
-webkit-text-fill-color: #ADB4BA;
cursor: not-allowed;
background: #dde0e3;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
.ouiSuperSelectControl:disabled::-webkit-input-placeholder {
color: #ADB4BA;
opacity: 1;
}
.ouiSuperSelectControl:disabled::-moz-placeholder {
color: #ADB4BA;
opacity: 1;
}
.ouiSuperSelectControl:disabled::placeholder {
color: #ADB4BA;
opacity: 1;
}
.ouiSuperSelectControl[readOnly] {
cursor: default;
background: rgba(214, 217, 221, 0.05);
border-color: transparent;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
.ouiSuperSelectControl:-webkit-autofill, .ouiSuperSelectControl:autofill {
/* Many browsers use `!important` in their built-in `:-webkit-autofill` style declarations,
* making their colors non-overridable. `-webkit-text-fill-color` is able to overwrite the
* appearance of texts and is used here as a workaround.
*/
-webkit-text-fill-color: #2A3947;
/* OUI -> EUI Aliases */
/* End of Aliases */
}
.ouiSuperSelectControl:-webkit-autofill ~ .ouiFormControlLayoutIcons, .ouiSuperSelectControl:autofill ~ .ouiFormControlLayoutIcons {
color: #2A3947;
}
.ouiSuperSelectControl:-webkit-autofill ~ .euiFormControlLayoutIcons, .ouiSuperSelectControl:autofill ~ .euiFormControlLayoutIcons {
color: #2A3947;
}
.ouiSuperSelectControl--compressed {
background-color: #fcfeff;
background-repeat: no-repeat;
background-size: 0% 100%;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in;
padding: 8px;
border-radius: 2px;
}
.ouiSuperSelectControl--compressed:hover, .ouiSuperSelectControl--compressed:focus {
box-shadow: 0 1px 1px -1px rgba(173, 180, 186, 0.2), 0 3px 2px -2px rgba(173, 180, 186, 0.2), inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
@supports (-moz-appearance: none) {
.ouiSuperSelectControl--compressed {
transition-property: box-shadow, background-image, background-size;
}
}
.ouiSuperSelectControl--compressed:invalid {
background-image: linear-gradient(to top, #C43D35, #C43D35 2px, transparent 2px, transparent 100%);
background-size: 100%;
}
.ouiSuperSelectControl--compressed:focus {
background-color: #fcfeff;
background-image: linear-gradient(to top, #0268BC, #0268BC 2px, transparent 2px, transparent 100%);
background-size: 100% 100%;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
.ouiSuperSelectControl--compressed:disabled {
color: #ADB4BA;
-webkit-text-fill-color: #ADB4BA;
cursor: not-allowed;
background: #dde0e3;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
.ouiSuperSelectControl--compressed:disabled::-webkit-input-placeholder {
color: #ADB4BA;
opacity: 1;
}
.ouiSuperSelectControl--compressed:disabled::-moz-placeholder {
color: #ADB4BA;
opacity: 1;
}
.ouiSuperSelectControl--compressed:disabled::placeholder {
color: #ADB4BA;
opacity: 1;
}
.ouiSuperSelectControl--compressed[readOnly] {
cursor: default;
background: rgba(214, 217, 221, 0.05);
border-color: transparent;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
.ouiSuperSelectControl--inGroup {
box-shadow: none !important;
border-radius: 0;
}
.ouiSuperSelectControl-isLoading {
padding-right: 62px;
}
.ouiSuperSelectControl-isLoading.ouiSuperSelectControl--compressed {
padding-right: 54px;
}
.ouiSuperSelectControl-isInvalid {
background-image: linear-gradient(to top, #C43D35, #C43D35 2px, transparent 2px, transparent 100%);
background-size: 100%;
}
.ouiSuperSelectControl--compressed {
padding-right: 32px;
/* 1 */
line-height: 32px; /* 2 */
padding-top: 0; /* 2 */
padding-bottom: 0; /* 2 */
}
.ouiSuperSelectControl.ouiSuperSelect--isOpen__button {
background-color: #fcfeff;
background-image: linear-gradient(to top, #0268BC, #0268BC 2px, transparent 2px, transparent 100%);
background-size: 100% 100%;
box-shadow: 0 1px 1px -1px rgba(173, 180, 186, 0.2), 0 4px 4px -2px rgba(173, 180, 186, 0.2), inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiSwitch {
position: relative;
display: -webkit-inline-flex;
display: inline-flex;
-webkit-align-items: flex-start;
align-items: flex-start;
min-height: 20px;
}
.ouiSwitch .ouiSwitch__label {
cursor: pointer;
padding-left: 8px;
line-height: 20px;
font-size: 14px;
vertical-align: middle;
display: inline-block;
}
.ouiSwitch .ouiSwitch__button {
-webkit-flex-shrink: 0;
flex-shrink: 0;
line-height: 0;
}
.ouiSwitch .ouiSwitch__button:focus .ouiSwitch__track {
-webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important;
animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important;
border-color: #0268BC;
}
.ouiSwitch .ouiSwitch__button:disabled:hover,
.ouiSwitch .ouiSwitch__button:disabled ~ .ouiSwitch__label:hover {
cursor: not-allowed;
}
.ouiSwitch .ouiSwitch__button:disabled .ouiSwitch__body {
background-color: rgba(173, 180, 186, 0.2);
}
.ouiSwitch .ouiSwitch__button:disabled .ouiSwitch__thumb {
border-color: #D6D9DD;
background-color: #D6D9DD;
box-shadow: none;
background-color: rgba(173, 180, 186, 0.2);
}
.ouiSwitch .ouiSwitch__button:disabled .ouiSwitch__icon {
fill: #6c7079;
}
.ouiSwitch .ouiSwitch__button:disabled + .ouiSwitch__label {
color: #ADB4BA;
}
.ouiSwitch .ouiSwitch__button[aria-checked=false] .ouiSwitch__body {
background-color: rgba(173, 180, 186, 0.2);
}
.ouiSwitch .ouiSwitch__button[aria-checked=false] .ouiSwitch__thumb {
left: 0;
}
.ouiSwitch .ouiSwitch__button[aria-checked=false] .ouiSwitch__icon {
right: -8px;
}
.ouiSwitch .ouiSwitch__button[aria-checked=false] .ouiSwitch__icon.ouiSwitch__icon--checked {
right: auto;
left: -34px;
}
.ouiSwitch .ouiSwitch__body {
pointer-events: none;
width: 44px;
height: 20px;
display: inline-block;
position: relative;
border-radius: 20px;
vertical-align: middle;
}
.ouiSwitch .ouiSwitch__thumb {
box-shadow: 0 2px 2px -1px rgba(173, 180, 186, 0.3);
padding: 9px;
border: 1px solid #bbbcc1;
background: #FCFEFF no-repeat center;
border-radius: 18px;
transition: background-color 150ms ease-in, border-color 150ms ease-in;
position: absolute;
display: inline-block;
left: 24px;
transition: border-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), background-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), left 250ms cubic-bezier(0.34, 1.61, 0.7, 1), -webkit-transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1);
transition: border-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), background-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), left 250ms cubic-bezier(0.34, 1.61, 0.7, 1), transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1);
transition: border-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), background-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), left 250ms cubic-bezier(0.34, 1.61, 0.7, 1), transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1), -webkit-transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1);
}
.ouiSwitch .ouiSwitch__track {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
border-radius: 20px;
}
.ouiSwitch .ouiSwitch__icon {
position: absolute;
right: -34px;
top: 2px;
bottom: 0;
width: 42px;
height: 16px;
transition: left 250ms cubic-bezier(0.34, 1.61, 0.7, 1), right 250ms cubic-bezier(0.34, 1.61, 0.7, 1);
fill: #2A3947;
}
.ouiSwitch .ouiSwitch__icon--checked {
right: auto;
left: -8px;
fill: #FCFEFF;
}
.ouiSwitch:hover .ouiSwitch__button:not(:disabled) .ouiSwitch__thumb {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
.ouiSwitch:hover .ouiSwitch__button:active .ouiSwitch__thumb {
-webkit-transform: scale(0.95);
transform: scale(0.95);
}
.ouiSwitch.ouiSwitch--compressed {
min-height: 16px;
}
.ouiSwitch.ouiSwitch--compressed .ouiSwitch__label {
line-height: 16px;
}
.ouiSwitch.ouiSwitch--compressed .ouiSwitch__body {
width: 28px;
height: 16px;
border-radius: 16px;
}
.ouiSwitch.ouiSwitch--compressed .ouiSwitch__thumb {
box-shadow: 0 2px 2px -1px rgba(173, 180, 186, 0.3);
padding: 6px;
border: 1px solid #bbbcc1;
background: #FCFEFF no-repeat center;
border-radius: 12px;
transition: background-color 150ms ease-in, border-color 150ms ease-in;
left: 13px;
top: 1px;
transition: border-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), background-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), left 250ms cubic-bezier(0.34, 1.61, 0.7, 1), -webkit-transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1);
transition: border-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), background-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), left 250ms cubic-bezier(0.34, 1.61, 0.7, 1), transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1);
transition: border-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), background-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), left 250ms cubic-bezier(0.34, 1.61, 0.7, 1), transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1), -webkit-transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1);
}
.ouiSwitch.ouiSwitch--compressed .ouiSwitch__track {
border-radius: 16px;
}
.ouiSwitch.ouiSwitch--mini {
min-height: 10px;
}
.ouiSwitch.ouiSwitch--mini .ouiSwitch__label {
line-height: 10px;
font-size: 12.000002px;
}
.ouiSwitch.ouiSwitch--mini .ouiSwitch__body {
width: 22px;
height: 10px;
border-radius: 10px;
}
.ouiSwitch.ouiSwitch--mini .ouiSwitch__thumb {
box-shadow: 0 2px 2px -1px rgba(173, 180, 186, 0.3);
padding: 3px;
border: 1px solid #bbbcc1;
background: #FCFEFF no-repeat center;
border-radius: 6px;
transition: background-color 150ms ease-in, border-color 150ms ease-in;
left: 13px;
top: 1px;
transition: border-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), background-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), left 250ms cubic-bezier(0.34, 1.61, 0.7, 1), -webkit-transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1);
transition: border-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), background-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), left 250ms cubic-bezier(0.34, 1.61, 0.7, 1), transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1);
transition: border-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), background-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), left 250ms cubic-bezier(0.34, 1.61, 0.7, 1), transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1), -webkit-transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1);
}
.ouiSwitch.ouiSwitch--mini .ouiSwitch__track {
border-radius: 10px;
}
.ouiSwitch.ouiSwitch--compressed .ouiSwitch__button[aria-checked=false] .ouiSwitch__thumb, .ouiSwitch.ouiSwitch--mini .ouiSwitch__button[aria-checked=false] .ouiSwitch__thumb {
left: 1px;
}
.ouiSwitch.ouiSwitch--compressed .ouiSwitch__button[aria-checked=false] .ouiSwitch__thumb,
.ouiSwitch.ouiSwitch--compressed .ouiSwitch__button[aria-checked=true]:disabled .ouiSwitch__thumb, .ouiSwitch.ouiSwitch--mini .ouiSwitch__button[aria-checked=false] .ouiSwitch__thumb,
.ouiSwitch.ouiSwitch--mini .ouiSwitch__button[aria-checked=true]:disabled .ouiSwitch__thumb {
border-color: #bbbcc1;
}
.ouiSwitch.ouiSwitch--compressed .ouiSwitch__button[aria-checked=true] .ouiSwitch__thumb, .ouiSwitch.ouiSwitch--mini .ouiSwitch__button[aria-checked=true] .ouiSwitch__thumb {
border-color: #0268BC;
}
.ouiSwitch.ouiSwitch--base {
border: solid 1px transparent;
cursor: pointer;
height: 40px;
line-height: 40px;
vertical-align: middle;
-webkit-align-items: stretch;
align-items: stretch;
border-radius: 4px;
padding: 0 12px;
}
.ouiSwitch.ouiSwitch--base .ouiSwitch__label {
line-height: 38px !important;
}
.ouiSwitch.ouiSwitch--base.ouiSwitch--compressed, .ouiSwitch.ouiSwitch--base.ouiSwitch--mini {
height: 32px;
line-height: 32px;
}
.ouiSwitch.ouiSwitch--base.ouiSwitch--compressed .ouiSwitch__label, .ouiSwitch.ouiSwitch--base.ouiSwitch--mini .ouiSwitch__label {
line-height: 30px !important;
}
.ouiSwitch.ouiSwitch--base.ouiSwitch-isDisabled {
border-color: #bdc3c8;
cursor: not-allowed;
}
.ouiSwitch.ouiSwitch--base.ouiSwitch-isDisabled:hover, .ouiSwitch.ouiSwitch--base.ouiSwitch-isDisabled:focus, .ouiSwitch.ouiSwitch--base.ouiSwitch-isDisabled:focus-within {
box-shadow: 0 2px 2px -1px rgba(173, 180, 186, 0.3);
}
.ouiSwitch--primary.ouiSwitch--base {
border-color: #0268BC;
color: #0268BC;
}
@media screen and (prefers-reduced-motion: no-preference) {
.ouiSwitch--primary.ouiSwitch--base {
transition: background 250ms ease-in-out;
}
}
.ouiSwitch--primary.ouiSwitch--base:not([class*=isDisabled]):hover, .ouiSwitch--primary.ouiSwitch--base:not([class*=isDisabled]):focus, .ouiSwitch--primary.ouiSwitch--base:not([class*=isDisabled]):focus-within {
box-shadow: 0 4px 8px 0 rgba(59, 98, 131, 0.15), 0 2px 2px -1px rgba(59, 98, 131, 0.3);
background-color: rgba(2, 104, 188, 0.1);
}
.ouiSwitch--primary.ouiSwitch--base:not([class*=isDisabled]):active {
box-shadow: inset 1px 2px 8px rgba(2, 104, 188, 0.15);
}
.ouiSwitch--primary .ouiSwitch__body {
background-color: #0268BC;
}
.ouiSwitch--primary.ouiSwitch--compressed .ouiSwitch__button[aria-checked=true] .ouiSwitch__thumb, .ouiSwitch--primary.ouiSwitch--mini .ouiSwitch__button[aria-checked=true] .ouiSwitch__thumb {
border-color: #0268BC;
}
.ouiSwitch--accent.ouiSwitch--base {
border-color: #9C47BF;
color: #9C47BF;
}
@media screen and (prefers-reduced-motion: no-preference) {
.ouiSwitch--accent.ouiSwitch--base {
transition: background 250ms ease-in-out;
}
}
.ouiSwitch--accent.ouiSwitch--base:not([class*=isDisabled]):hover, .ouiSwitch--accent.ouiSwitch--base:not([class*=isDisabled]):focus, .ouiSwitch--accent.ouiSwitch--base:not([class*=isDisabled]):focus-within {
box-shadow: 0 4px 8px 0 rgba(131, 131, 131, 0.15), 0 2px 2px -1px rgba(131, 131, 131, 0.3);
background-color: rgba(156, 71, 191, 0.1);
}
.ouiSwitch--accent.ouiSwitch--base:not([class*=isDisabled]):active {
box-shadow: inset 1px 2px 8px rgba(156, 71, 191, 0.15);
}
.ouiSwitch--accent .ouiSwitch__body {
background-color: #9C47BF;
}
.ouiSwitch--accent.ouiSwitch--compressed .ouiSwitch__button[aria-checked=true] .ouiSwitch__thumb, .ouiSwitch--accent.ouiSwitch--mini .ouiSwitch__button[aria-checked=true] .ouiSwitch__thumb {
border-color: #9C47BF;
}
.ouiSwitch--secondary.ouiSwitch--base {
border-color: #0F7B68;
color: #0F7B68;
}
@media screen and (prefers-reduced-motion: no-preference) {
.ouiSwitch--secondary.ouiSwitch--base {
transition: background 250ms ease-in-out;
}
}
.ouiSwitch--secondary.ouiSwitch--base:not([class*=isDisabled]):hover, .ouiSwitch--secondary.ouiSwitch--base:not([class*=isDisabled]):focus, .ouiSwitch--secondary.ouiSwitch--base:not([class*=isDisabled]):focus-within {
box-shadow: 0 4px 8px 0 rgba(56, 82, 77, 0.15), 0 2px 2px -1px rgba(56, 82, 77, 0.3);
background-color: rgba(15, 123, 104, 0.1);
}
.ouiSwitch--secondary.ouiSwitch--base:not([class*=isDisabled]):active {
box-shadow: inset 1px 2px 8px rgba(15, 123, 104, 0.15);
}
.ouiSwitch--secondary .ouiSwitch__body {
background-color: #0F7B68;
}
.ouiSwitch--secondary.ouiSwitch--compressed .ouiSwitch__button[aria-checked=true] .ouiSwitch__thumb, .ouiSwitch--secondary.ouiSwitch--mini .ouiSwitch__button[aria-checked=true] .ouiSwitch__thumb {
border-color: #0F7B68;
}
.ouiSwitch--success.ouiSwitch--base {
border-color: #0F7B68;
color: #0F7B68;
}
@media screen and (prefers-reduced-motion: no-preference) {
.ouiSwitch--success.ouiSwitch--base {
transition: background 250ms ease-in-out;
}
}
.ouiSwitch--success.ouiSwitch--base:not([class*=isDisabled]):hover, .ouiSwitch--success.ouiSwitch--base:not([class*=isDisabled]):focus, .ouiSwitch--success.ouiSwitch--base:not([class*=isDisabled]):focus-within {
box-shadow: 0 4px 8px 0 rgba(56, 82, 77, 0.15), 0 2px 2px -1px rgba(56, 82, 77, 0.3);
background-color: rgba(15, 123, 104, 0.1);
}
.ouiSwitch--success.ouiSwitch--base:not([class*=isDisabled]):active {
box-shadow: inset 1px 2px 8px rgba(15, 123, 104, 0.15);
}
.ouiSwitch--success .ouiSwitch__body {
background-color: #0F7B68;
}
.ouiSwitch--success.ouiSwitch--compressed .ouiSwitch__button[aria-checked=true] .ouiSwitch__thumb, .ouiSwitch--success.ouiSwitch--mini .ouiSwitch__button[aria-checked=true] .ouiSwitch__thumb {
border-color: #0F7B68;
}
.ouiSwitch--warning.ouiSwitch--base {
border-color: #E0A130;
color: #8e6625;
}
@media screen and (prefers-reduced-motion: no-preference) {
.ouiSwitch--warning.ouiSwitch--base {
transition: background 250ms ease-in-out;
}
}
.ouiSwitch--warning.ouiSwitch--base:not([class*=isDisabled]):hover, .ouiSwitch--warning.ouiSwitch--base:not([class*=isDisabled]):focus, .ouiSwitch--warning.ouiSwitch--base:not([class*=isDisabled]):focus-within {
box-shadow: 0 4px 8px 0 rgba(153, 141, 119, 0.15), 0 2px 2px -1px rgba(153, 141, 119, 0.3);
background-color: rgba(224, 161, 48, 0.1);
}
.ouiSwitch--warning.ouiSwitch--base:not([class*=isDisabled]):active {
box-shadow: inset 1px 2px 8px rgba(224, 161, 48, 0.15);
}
.ouiSwitch--warning .ouiSwitch__body {
background-color: #E0A130;
}
.ouiSwitch--warning.ouiSwitch--compressed .ouiSwitch__button[aria-checked=true] .ouiSwitch__thumb, .ouiSwitch--warning.ouiSwitch--mini .ouiSwitch__button[aria-checked=true] .ouiSwitch__thumb {
border-color: #E0A130;
}
.ouiSwitch--danger.ouiSwitch--base {
border-color: #C43D35;
color: #C43D35;
}
@media screen and (prefers-reduced-motion: no-preference) {
.ouiSwitch--danger.ouiSwitch--base {
transition: background 250ms ease-in-out;
}
}
.ouiSwitch--danger.ouiSwitch--base:not([class*=isDisabled]):hover, .ouiSwitch--danger.ouiSwitch--base:not([class*=isDisabled]):focus, .ouiSwitch--danger.ouiSwitch--base:not([class*=isDisabled]):focus-within {
box-shadow: 0 4px 8px 0 rgba(125, 125, 125, 0.15), 0 2px 2px -1px rgba(125, 125, 125, 0.3);
background-color: rgba(196, 61, 53, 0.1);
}
.ouiSwitch--danger.ouiSwitch--base:not([class*=isDisabled]):active {
box-shadow: inset 1px 2px 8px rgba(196, 61, 53, 0.15);
}
.ouiSwitch--danger .ouiSwitch__body {
background-color: #C43D35;
}
.ouiSwitch--danger.ouiSwitch--compressed .ouiSwitch__button[aria-checked=true] .ouiSwitch__thumb, .ouiSwitch--danger.ouiSwitch--mini .ouiSwitch__button[aria-checked=true] .ouiSwitch__thumb {
border-color: #C43D35;
}
.ouiSwitch--subdued.ouiSwitch--base {
border-color: #686c75;
color: #686c75;
}
@media screen and (prefers-reduced-motion: no-preference) {
.ouiSwitch--subdued.ouiSwitch--base {
transition: background 250ms ease-in-out;
}
}
.ouiSwitch--subdued.ouiSwitch--base:not([class*=isDisabled]):hover, .ouiSwitch--subdued.ouiSwitch--base:not([class*=isDisabled]):focus, .ouiSwitch--subdued.ouiSwitch--base:not([class*=isDisabled]):focus-within {
box-shadow: 0 4px 8px 0 rgba(111, 111, 111, 0.15), 0 2px 2px -1px rgba(111, 111, 111, 0.3);
background-color: rgba(104, 108, 117, 0.1);
}
.ouiSwitch--subdued.ouiSwitch--base:not([class*=isDisabled]):active {
box-shadow: inset 1px 2px 8px rgba(104, 108, 117, 0.15);
}
.ouiSwitch--subdued .ouiSwitch__body {
background-color: #686c75;
}
.ouiSwitch--subdued.ouiSwitch--compressed .ouiSwitch__button[aria-checked=true] .ouiSwitch__thumb, .ouiSwitch--subdued.ouiSwitch--mini .ouiSwitch__button[aria-checked=true] .ouiSwitch__thumb {
border-color: #686c75;
}
.ouiSwitch--ghost.ouiSwitch--base {
border-color: #FCFEFF;
color: #FCFEFF;
}
@media screen and (prefers-reduced-motion: no-preference) {
.ouiSwitch--ghost.ouiSwitch--base {
transition: background 250ms ease-in-out;
}
}
.ouiSwitch--ghost.ouiSwitch--base:not([class*=isDisabled]):hover, .ouiSwitch--ghost.ouiSwitch--base:not([class*=isDisabled]):focus, .ouiSwitch--ghost.ouiSwitch--base:not([class*=isDisabled]):focus-within {
box-shadow: 0 4px 8px 0 rgba(2, 2, 14, 0.15), 0 2px 2px -1px rgba(2, 2, 14, 0.3);
background-color: rgba(252, 254, 255, 0.1);
}
.ouiSwitch--ghost.ouiSwitch--base:not([class*=isDisabled]):active {
box-shadow: inset 1px 2px 8px rgba(252, 254, 255, 0.15);
}
.ouiSwitch--ghost .ouiSwitch__body {
background-color: #FCFEFF;
}
.ouiSwitch--ghost.ouiSwitch--compressed .ouiSwitch__button[aria-checked=true] .ouiSwitch__thumb, .ouiSwitch--ghost.ouiSwitch--mini .ouiSwitch__button[aria-checked=true] .ouiSwitch__thumb {
border-color: #FCFEFF;
}
.ouiSwitch--text.ouiSwitch--base {
border-color: #5A6875;
color: #2A3947;
}
@media screen and (prefers-reduced-motion: no-preference) {
.ouiSwitch--text.ouiSwitch--base {
transition: background 250ms ease-in-out;
}
}
.ouiSwitch--text.ouiSwitch--base:not([class*=isDisabled]):hover, .ouiSwitch--text.ouiSwitch--base:not([class*=isDisabled]):focus, .ouiSwitch--text.ouiSwitch--base:not([class*=isDisabled]):focus-within {
box-shadow: 0 4px 8px 0 rgba(104, 104, 104, 0.15), 0 2px 2px -1px rgba(104, 104, 104, 0.3);
background-color: rgba(90, 104, 117, 0.1);
}
.ouiSwitch--text.ouiSwitch--base:not([class*=isDisabled]):active {
box-shadow: inset 1px 2px 8px rgba(90, 104, 117, 0.15);
}
.ouiSwitch--text .ouiSwitch__body {
background-color: #5A6875;
}
.ouiSwitch--text.ouiSwitch--compressed .ouiSwitch__button[aria-checked=true] .ouiSwitch__thumb, .ouiSwitch--text.ouiSwitch--mini .ouiSwitch__button[aria-checked=true] .ouiSwitch__thumb {
border-color: #5A6875;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiTextArea {
max-width: 400px;
width: 100%;
height: 40px;
background-color: #fcfeff;
background-repeat: no-repeat;
background-size: 0% 100%;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in;
font-family: var(--oui-font-family);
font-weight: 400;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-font-kerning: normal;
font-kerning: normal;
font-size: 14px;
color: #2A3947;
border: none;
border-radius: 0;
padding: 12px;
line-height: 1.5;
}
.ouiTextArea--fullWidth {
max-width: 100%;
}
.ouiTextArea--compressed {
height: 32px;
}
.ouiTextArea--inGroup {
height: 100%;
}
.ouiTextArea:hover, .ouiTextArea:focus {
box-shadow: 0 1px 1px -1px rgba(173, 180, 186, 0.2), 0 3px 2px -2px rgba(173, 180, 186, 0.2), inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
@supports (-moz-appearance: none) {
.ouiTextArea {
transition-property: box-shadow, background-image, background-size;
}
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
.ouiTextArea {
line-height: 1em;
}
}
.ouiTextArea::-webkit-input-placeholder {
color: #686c75;
opacity: 1;
}
.ouiTextArea::-moz-placeholder {
color: #686c75;
opacity: 1;
}
.ouiTextArea::placeholder {
color: #686c75;
opacity: 1;
}
.ouiTextArea:invalid {
background-image: linear-gradient(to top, #C43D35, #C43D35 2px, transparent 2px, transparent 100%);
background-size: 100%;
}
.ouiTextArea:focus {
background-color: #fcfeff;
background-image: linear-gradient(to top, #0268BC, #0268BC 2px, transparent 2px, transparent 100%);
background-size: 100% 100%;
box-shadow: 0 1px 1px -1px rgba(173, 180, 186, 0.2), 0 4px 4px -2px rgba(173, 180, 186, 0.2), inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
.ouiTextArea:disabled {
color: #ADB4BA;
-webkit-text-fill-color: #ADB4BA;
cursor: not-allowed;
background: #dde0e3;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
.ouiTextArea:disabled::-webkit-input-placeholder {
color: #ADB4BA;
opacity: 1;
}
.ouiTextArea:disabled::-moz-placeholder {
color: #ADB4BA;
opacity: 1;
}
.ouiTextArea:disabled::placeholder {
color: #ADB4BA;
opacity: 1;
}
.ouiTextArea[readOnly] {
cursor: default;
background: rgba(214, 217, 221, 0.05);
border-color: transparent;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
.ouiTextArea:-webkit-autofill, .ouiTextArea:autofill {
/* Many browsers use `!important` in their built-in `:-webkit-autofill` style declarations,
* making their colors non-overridable. `-webkit-text-fill-color` is able to overwrite the
* appearance of texts and is used here as a workaround.
*/
-webkit-text-fill-color: #2A3947;
/* OUI -> EUI Aliases */
/* End of Aliases */
}
.ouiTextArea:-webkit-autofill ~ .ouiFormControlLayoutIcons, .ouiTextArea:autofill ~ .ouiFormControlLayoutIcons {
color: #2A3947;
}
.ouiTextArea:-webkit-autofill ~ .euiFormControlLayoutIcons, .ouiTextArea:autofill ~ .euiFormControlLayoutIcons {
color: #2A3947;
}
.ouiTextArea--compressed {
background-color: #fcfeff;
background-repeat: no-repeat;
background-size: 0% 100%;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in;
padding: 8px;
border-radius: 2px;
}
.ouiTextArea--compressed:hover, .ouiTextArea--compressed:focus {
box-shadow: 0 1px 1px -1px rgba(173, 180, 186, 0.2), 0 3px 2px -2px rgba(173, 180, 186, 0.2), inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
@supports (-moz-appearance: none) {
.ouiTextArea--compressed {
transition-property: box-shadow, background-image, background-size;
}
}
.ouiTextArea--compressed:invalid {
background-image: linear-gradient(to top, #C43D35, #C43D35 2px, transparent 2px, transparent 100%);
background-size: 100%;
}
.ouiTextArea--compressed:focus {
background-color: #fcfeff;
background-image: linear-gradient(to top, #0268BC, #0268BC 2px, transparent 2px, transparent 100%);
background-size: 100% 100%;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
.ouiTextArea--compressed:disabled {
color: #ADB4BA;
-webkit-text-fill-color: #ADB4BA;
cursor: not-allowed;
background: #dde0e3;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
.ouiTextArea--compressed:disabled::-webkit-input-placeholder {
color: #ADB4BA;
opacity: 1;
}
.ouiTextArea--compressed:disabled::-moz-placeholder {
color: #ADB4BA;
opacity: 1;
}
.ouiTextArea--compressed:disabled::placeholder {
color: #ADB4BA;
opacity: 1;
}
.ouiTextArea--compressed[readOnly] {
cursor: default;
background: rgba(214, 217, 221, 0.05);
border-color: transparent;
box-shadow: inset 0 0 0 1px rgba(18, 38, 126, 0.1);
}
.ouiTextArea--inGroup {
box-shadow: none !important;
border-radius: 0;
}
.ouiTextArea, .ouiTextArea--compressed {
height: auto;
}
.ouiTextArea--resizeVertical {
resize: vertical;
}
.ouiTextArea--resizeHorizontal {
resize: horizontal;
}
.ouiTextArea--resizeBoth {
resize: both;
}
.ouiTextArea--resizeNone {
resize: none;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiHeader {
box-shadow: 0 2px 2px -1px rgba(173, 180, 186, 0.3), 0 1px 5px -2px rgba(173, 180, 186, 0.3);
height: 49px;
position: relative;
z-index: 999;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
background: #F0F2F4;
border-bottom: 1px solid #D6D9DD;
}
.ouiHeader--fixed {
z-index: 1000;
position: fixed;
top: 0;
left: 0;
right: 0;
}
.ouiHeader--fixed + .ouiHeader--fixed {
top: 49px;
}
.ouiHeader--dark {
background-color: #001522;
border-bottom-color: #001522;
}
.ouiHeader--dark .ouiHeaderLogo__text,
.ouiHeader--dark .ouiHeaderLink,
.ouiHeader--dark .ouiHeaderSectionItemButton {
color: #FCFEFF;
}
.ouiHeader--dark .ouiHeaderLink-isActive {
color: #3184c8;
}
.ouiHeader--dark .ouiHeaderSectionItem:after {
background: #5A6875;
}
.ouiHeader--dark .ouiHeaderLogo:focus,
.ouiHeader--dark .ouiHeaderLink:focus,
.ouiHeader--dark .ouiHeaderSectionItemButton:focus {
background: #023565;
}
.ouiHeader--dark .ouiHeaderSectionItemButton__notification--badge {
box-shadow: 0 0 0 1px #001522;
}
.ouiHeader--dark .ouiHeaderSectionItemButton__notification--dot {
stroke: #001522;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiHeaderProfile {
padding: 16px;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiHeaderLinks {
display: -webkit-flex;
display: flex;
}
.ouiHeaderLinks__list {
white-space: nowrap;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
}
.ouiHeaderLinks__list--gutterXS > * {
margin: 0 4px;
}
.ouiHeaderLinks__list--gutterS > * {
margin: 0 8px;
}
.ouiHeaderLinks__list--gutterM > * {
margin: 0 12px;
}
.ouiHeaderLinks__list--gutterL > * {
margin: 0 24px;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiHeaderLinks__mobileList .ouiHeaderLink {
display: block;
width: 100%;
padding: 8px;
}
.ouiHeaderLinks__mobileList .ouiHeaderLink > span {
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
.ouiHeaderLogo {
text-align: left;
font-weight: 500;
position: relative;
height: 48px;
line-height: 48px;
min-width: 49px;
padding: 0 13px 0 12px;
display: -webkit-inline-flex;
display: inline-flex;
-webkit-align-items: center;
align-items: center;
vertical-align: middle;
white-space: nowrap;
}
.ouiHeaderLogo:hover {
text-decoration: underline;
}
.ouiHeaderLogo:focus {
text-decoration: underline;
background: #e3eff8;
}
.ouiHeaderLogo:focus, .ouiHeaderLogo:hover {
text-decoration: none;
}
.ouiHeaderLogo__text {
color: #161e2b;
font-size: 17.999996px;
font-size: 1.285714rem;
line-height: 1.57145rem;
font-weight: 500;
padding-left: 16px;
font-weight: 400;
}
@media only screen and (max-width: 574px) {
.ouiHeaderLogo {
padding: 0 12px;
}
.ouiHeaderLogo__icon.ouiIcon--xLarge {
width: 24px;
height: 24px;
}
.ouiHeaderLogo__text {
color: #161e2b;
font-size: 16.0006px;
font-size: 1.1429rem;
line-height: 1.35715rem;
font-weight: 500;
font-weight: 400;
}
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiHeaderAlert {
min-width: 300px;
position: relative;
margin-bottom: 24px;
padding: 0 8px 24px;
border-bottom: 1px solid #D6D9DD;
border-top: none;
}
.ouiHeaderAlert .ouiHeaderAlert__dismiss {
opacity: 0;
position: absolute;
right: 12px;
top: 12px;
transition: opacity 250ms ease-in;
}
.ouiHeaderAlert:hover .ouiHeaderAlert__dismiss,
.ouiHeaderAlert .ouiHeaderAlert__dismiss:focus {
opacity: 1;
}
.ouiHeaderAlert .ouiHeaderAlert__title {
color: #161e2b;
font-size: 16.0006px;
font-size: 1.1429rem;
line-height: 1.35715rem;
font-weight: 500;
margin-bottom: 8px;
}
.ouiHeaderAlert .ouiHeaderAlert__text {
font-size: 14px;
font-size: 1rem;
line-height: 1.5;
margin-bottom: 16px;
}
.ouiHeaderAlert .ouiHeaderAlert__action {
font-size: 14px;
font-size: 1rem;
line-height: 1.5;
}
.ouiHeaderAlert .ouiHeaderAlert__date {
font-size: 12.000002px;
font-size: 0.857143rem;
line-height: 1.5;
color: #5A6875;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiHeaderBreadcrumbs {
margin-left: 12px;
margin-right: 12px;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-flex-grow: 1;
flex-grow: 1;
}
.ouiHeaderBreadcrumbs--simplified {
margin-left: 0;
margin-right: 0;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiHeaderSection {
display: -webkit-flex;
display: flex;
-webkit-flex-grow: 0;
flex-grow: 0;
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
.ouiHeaderSection--grow,
.ouiHeaderSection--left {
-webkit-flex-grow: 1;
flex-grow: 1;
}
.ouiHeaderSection--dontGrow {
-webkit-flex-grow: 0;
flex-grow: 0;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiHeaderSectionItem {
position: relative;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
}
.ouiHeaderSectionItem:after {
position: absolute;
content: "";
top: 16px;
bottom: 0;
background: #D6D9DD;
left: 0;
}
.ouiHeaderSectionItem--borderLeft:after {
left: 0;
width: 1px;
}
.ouiHeaderSectionItem--borderRight:after {
width: 1px;
left: auto;
right: 0;
}
@media only screen and (max-width: 574px) {
.ouiHeaderSectionItem {
min-width: 36px;
}
.ouiHeaderSectionItem--borderLeft:after,
.ouiHeaderSectionItem--borderRight:after {
display: none;
}
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiHeaderSectionItemButton {
position: relative;
height: 48px;
min-width: 48px;
text-align: center;
font-size: 0;
}
.ouiHeaderSectionItemButton__notification {
position: absolute;
}
.ouiHeaderSectionItemButton__notification--dot {
top: 0;
right: 0;
stroke: #F0F2F4;
}
.ouiHeaderSectionItemButton__notification--badge {
top: 9%;
right: 9%;
box-shadow: 0 0 0 1px #F0F2F4;
}
.ouiHeaderSectionItemButton__content {
display: inline-block;
}
@media only screen and (max-width: 574px) {
.ouiHeaderSectionItemButton {
min-width: 36px;
}
.ouiHeaderSectionItemButton__notification.ouiHeaderSectionItemButton__notification--dot {
width: 16px;
height: 16px;
top: 9%;
}
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiHealth {
display: inline-block;
}
.ouiHealth--textSizeXS {
font-size: 12.000002px;
font-size: 0.857143rem;
line-height: 1.5;
}
.ouiHealth--textSizeS {
font-size: 14px;
font-size: 1rem;
line-height: 1.5;
}
.ouiHealth--textSizeM {
font-size: 16.0006px;
font-size: 1.1429rem;
line-height: 1.5;
}
.ouiHealth--textSizeInherit {
font-size: inherit;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiHorizontalRule {
border: none;
height: 1px;
background-color: #D6D9DD;
-webkit-flex-shrink: 0;
flex-shrink: 0;
-webkit-flex-grow: 0;
flex-grow: 0;
}
.ouiHorizontalRule.ouiHorizontalRule--full {
width: 100%;
}
.ouiHorizontalRule.ouiHorizontalRule--half {
width: 50%;
margin-left: auto;
margin-right: auto;
}
.ouiHorizontalRule.ouiHorizontalRule--quarter {
width: 25%;
margin-left: auto;
margin-right: auto;
}
.ouiHorizontalRule--marginXSmall {
margin: 8px 0;
}
.ouiHorizontalRule--marginSmall {
margin: 12px 0;
}
.ouiHorizontalRule--marginMedium {
margin: 16px 0;
}
.ouiHorizontalRule--marginLarge {
margin: 24px 0;
}
.ouiHorizontalRule--marginXLarge {
margin: 32px 0;
}
.ouiHorizontalRule--marginXXLarge {
margin: 40px 0;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiIcon {
-webkit-flex-shrink: 0;
flex-shrink: 0;
display: inline-block;
vertical-align: middle;
fill: currentColor;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
.ouiIcon:focus {
opacity: 1;
background: #e3eff8;
}
.ouiIcon--app {
fill: #2A3947;
}
.ouiIcon--app .ouiIcon__fillSecondary {
fill: #0F7B68;
}
.ouiIcon-isLoading {
opacity: 0.05;
background-color: currentColor;
border-radius: 4px;
}
.ouiIcon-isLoaded {
-webkit-animation: ouiIconLoading 250ms ease-in 0s 1 forwards;
animation: ouiIconLoading 250ms ease-in 0s 1 forwards;
}
.ouiIcon--accent {
color: #9C47BF;
}
.ouiIcon--danger {
color: #C43D35;
}
.ouiIcon--ghost {
color: #FCFEFF;
}
.ouiIcon--primary {
color: #0268BC;
}
.ouiIcon--secondary {
color: #0F7B68;
}
.ouiIcon--success {
color: #0F7B68;
}
.ouiIcon--subdued {
color: #686c75;
}
.ouiIcon--text {
color: #2A3947;
}
.ouiIcon--warning {
color: #ae7d29;
}
.ouiIcon--inherit {
color: inherit;
}
.ouiIcon--text,
.ouiIcon--text .ouiIcon__fillSecondary,
.ouiIcon--subdued,
.ouiIcon--subdued .ouiIcon__fillSecondary,
.ouiIcon--primary,
.ouiIcon--primary .ouiIcon__fillSecondary,
.ouiIcon--customColor,
.ouiIcon--customColor .ouiIcon__fillSecondary {
fill: currentColor;
}
.ouiIcon__fillNegative {
fill: #2A3947;
}
.ouiIcon--small {
width: 12px;
height: 12px;
}
.ouiIcon--medium {
width: 16px;
height: 16px;
}
.ouiIcon--large {
width: 24px;
height: 24px;
}
.ouiIcon--xLarge {
width: 32px;
height: 32px;
}
.ouiIcon--xxLarge {
width: 40px;
height: 40px;
}
@-webkit-keyframes ouiIconLoading {
0% {
opacity: 0.05;
}
100% {
opacity: 1;
}
}
@keyframes ouiIconLoading {
0% {
opacity: 0.05;
}
100% {
opacity: 1;
}
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/**
* 1. Fix for IE where the image correctly resizes in width but doesn't collapse its height
(https://github.com/philipwalton/flexbugs/issues/75#issuecomment-134702421)
*/
.ouiImage {
display: inline-block;
max-width: 100%;
position: relative;
min-height: 1px; /* 1 */
line-height: 0;
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
.ouiImage .ouiImage__img {
margin-bottom: 0;
}
.ouiImage.ouiImage--hasShadow .ouiImage__img {
box-shadow: 0 6px 12px -1px rgba(173, 180, 186, 0.2), 0 4px 4px -1px rgba(173, 180, 186, 0.2), 0 2px 2px 0 rgba(173, 180, 186, 0.2);
}
.ouiImage .ouiImage__button {
position: relative;
cursor: pointer;
transition: all 150ms cubic-bezier(0.694, 0.0482, 0.335, 1);
}
.ouiImage .ouiImage__button:focus {
outline: 2px solid rgba(2, 104, 188, 0.3);
}
.ouiImage .ouiImage__button:hover .ouiImage__icon {
visibility: visible;
fill-opacity: 1;
}
.ouiImage .ouiImage__button--fullWidth {
width: 100%;
}
.ouiImage.ouiImage--allowFullScreen:hover .ouiImage__caption {
text-decoration: underline;
}
.ouiImage.ouiImage--allowFullScreen:not(.ouiImage--hasShadow) .ouiImage__button:hover, .ouiImage.ouiImage--allowFullScreen:not(.ouiImage--hasShadow) .ouiImage__button:focus {
box-shadow: 0 6px 12px -1px rgba(173, 180, 186, 0.2), 0 4px 4px -1px rgba(173, 180, 186, 0.2), 0 2px 2px 0 rgba(173, 180, 186, 0.2);
}
.ouiImage.ouiImage--allowFullScreen.ouiImage--hasShadow .ouiImage__button:hover, .ouiImage.ouiImage--allowFullScreen.ouiImage--hasShadow .ouiImage__button:focus {
box-shadow: 0 12px 24px 0 rgba(78, 92, 110, 0.1), 0 6px 12px 0 rgba(78, 92, 110, 0.1), 0 4px 4px 0 rgba(78, 92, 110, 0.1), 0 2px 2px 0 rgba(78, 92, 110, 0.1);
}
.ouiImage.ouiImage--small .ouiImage__img {
width: 8.5714285714rem;
}
.ouiImage.ouiImage--medium .ouiImage__img {
width: 14.2857142857rem;
}
.ouiImage.ouiImage--large .ouiImage__img {
width: 25.7142857143rem;
}
.ouiImage.ouiImage--xlarge .ouiImage__img {
width: 42.8571428571rem;
}
.ouiImage.ouiImage--fullWidth {
width: 100%;
}
.ouiImage.ouiImage--original .ouiImage__img {
width: auto;
max-width: 100%;
}
.ouiImage.ouiImage--floatLeft {
float: left;
}
.ouiImage.ouiImage--floatLeft[class*=ouiImage--margin] {
margin-left: 0;
margin-top: 0;
}
.ouiImage.ouiImage--floatRight {
float: right;
}
.ouiImage.ouiImage--floatRight[class*=ouiImage--margin] {
margin-right: 0;
margin-top: 0;
}
.ouiImage.ouiImage--marginSmall {
margin: 8px;
}
.ouiImage.ouiImage--marginMedium {
margin: 16px;
}
.ouiImage.ouiImage--marginLarge {
margin: 24px;
}
.ouiImage.ouiImage--marginXlarge {
margin: 32px;
}
.ouiImage__img {
width: 100%;
vertical-align: middle;
}
.ouiImage__caption {
font-size: 14px;
font-size: 1rem;
line-height: 1.5;
margin-top: 4px;
text-align: center;
}
.ouiImage__icon {
visibility: hidden;
fill-opacity: 0;
position: absolute;
right: 16px;
top: 16px;
transition: fill-opacity 350ms cubic-bezier(0.694, 0.0482, 0.335, 1);
cursor: pointer;
}
.ouiImage-isFullScreen {
position: relative;
max-height: 80vh;
max-width: 80vw;
-webkit-animation: ouiImageFullScreen 500ms cubic-bezier(0.34, 1.61, 0.7, 1);
animation: ouiImageFullScreen 500ms cubic-bezier(0.34, 1.61, 0.7, 1);
}
.ouiImage-isFullScreen:hover .ouiImage__button {
box-shadow: 0 12px 24px 0 rgba(78, 92, 110, 0.1), 0 6px 12px 0 rgba(78, 92, 110, 0.1), 0 4px 4px 0 rgba(78, 92, 110, 0.1), 0 2px 2px 0 rgba(78, 92, 110, 0.1);
}
.ouiImage-isFullScreen:hover .ouiImage__caption {
text-decoration: underline;
}
.ouiImage-isFullScreen__img {
max-height: 80vh;
max-width: 80vw;
vertical-align: middle;
cursor: pointer;
transition: all 150ms cubic-bezier(0.694, 0.0482, 0.335, 1);
}
.ouiImage-isFullScreenCloseIcon {
position: absolute;
right: 16px;
top: 16px;
pointer-events: none;
}
@-webkit-keyframes ouiImageFullScreen {
0% {
opacity: 0;
-webkit-transform: translateY(64px);
transform: translateY(64px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes ouiImageFullScreen {
0% {
opacity: 0;
-webkit-transform: translateY(64px);
transform: translateY(64px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@media only screen and (max-width: 574px) {
.ouiImage.ouiImage--floatLeft, .ouiImage.ouiImage--floatRight {
float: none;
}
.ouiImage.ouiImage--floatLeft[class*=ouiImage--margin], .ouiImage.ouiImage--floatRight[class*=ouiImage--margin] {
margin-top: inherit;
margin-right: inherit;
margin-bottom: inherit;
margin-left: inherit;
}
}
@media only screen and (min-width: 575px) and (max-width: 767px) {
.ouiImage.ouiImage--floatLeft, .ouiImage.ouiImage--floatRight {
float: none;
}
.ouiImage.ouiImage--floatLeft[class*=ouiImage--margin], .ouiImage.ouiImage--floatRight[class*=ouiImage--margin] {
margin-top: inherit;
margin-right: inherit;
margin-bottom: inherit;
margin-left: inherit;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.ouiImage.ouiImage--floatLeft, .ouiImage.ouiImage--floatRight {
float: none;
}
.ouiImage.ouiImage--floatLeft[class*=ouiImage--margin], .ouiImage.ouiImage--floatRight[class*=ouiImage--margin] {
margin-top: inherit;
margin-right: inherit;
margin-bottom: inherit;
margin-left: inherit;
}
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/**
* 1. Default to grid of 3
*/
.ouiKeyPadMenu {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width: 288px;
max-width: 100%;
}
/**
* 1. If this class is applied to a button, we need to override the Chrome default font.
* 2. If it has a BetaBadge, make sure only the first letter shows
*/
.ouiKeyPadMenuItem {
font-family: var(--oui-font-family);
font-weight: 400;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-font-kerning: normal;
font-kerning: normal;
/* 1 */
display: block;
padding: 4px;
height: 96px;
width: 96px;
color: #5A6875;
border: 1px solid #D6D9DD;
border-color: transparent;
border-radius: 4px;
transition: border-color 150ms ease-in, box-shadow 150ms ease-in;
}
.ouiKeyPadMenuItem:not(:disabled):hover, .ouiKeyPadMenuItem:not(:disabled):focus {
box-shadow: 0 2px 2px -1px rgba(173, 180, 186, 0.3);
border-color: #D6D9DD;
}
.ouiKeyPadMenuItem:not(:disabled):hover .ouiKeyPadMenuItem__icon, .ouiKeyPadMenuItem:not(:disabled):focus .ouiKeyPadMenuItem__icon {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.ouiKeyPadMenuItem:disabled {
color: #a3a7ae;
cursor: not-allowed;
}
.ouiKeyPadMenuItem:disabled .ouiKeyPadMenuItem__icon {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.ouiKeyPadMenuItem:disabled .ouiKeyPadMenuItem__icon svg * {
fill: #a3a7ae;
}
.ouiKeyPadMenuItem__inner {
width: 100%;
height: 100%;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
.ouiKeyPadMenuItem--hasBetaBadge .ouiKeyPadMenuItem__inner {
position: relative;
}
.ouiKeyPadMenuItem--hasBetaBadge .ouiKeyPadMenuItem__inner .ouiKeyPadMenuItem__betaBadgeWrapper {
position: absolute;
top: 4px;
right: 8px;
z-index: 3;
}
.ouiKeyPadMenuItem--hasBetaBadge .ouiKeyPadMenuItem__inner .ouiKeyPadMenuItem__betaBadgeWrapper .ouiKeyPadMenuItem__betaBadge:not(.ouiBetaBadge--iconOnly) {
padding: 0 6px; /* 2 */
overflow: hidden; /* 2 */
letter-spacing: 3rem; /* 2 */
}
.ouiKeyPadMenuItem__betaBadge {
width: 20px;
height: 20px;
line-height: 20px;
color: #0A1219;
background-color: #e9ecee;
box-shadow: none;
}
.ouiKeyPadMenuItem__betaBadge .ouiBetaBadge__icon {
width: 12px;
height: 12px;
}
.ouiKeyPadMenuItem__icon {
transition: -webkit-transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1);
transition: transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1);
transition: transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1), -webkit-transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1);
-webkit-transform: translateY(2px);
transform: translateY(2px);
margin-bottom: 12px;
}
.ouiKeyPadMenuItem__label {
font-size: 12.000002px;
font-weight: 500;
line-height: 16px;
text-align: center;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiLink {
text-align: left;
font-weight: 500;
}
.ouiLink:hover {
text-decoration: underline;
}
.ouiLink:focus {
text-decoration: underline;
background: #e3eff8;
}
.ouiLink .ouiLink__externalIcon {
margin-left: 4px;
}
.ouiLink.ouiLink-disabled {
text-decoration: none;
cursor: default;
}
.ouiLink.ouiLink--subdued {
color: #686c75;
}
.ouiLink.ouiLink--subdued:hover, .ouiLink.ouiLink--subdued:focus {
color: #50535a;
text-decoration: underline;
}
.ouiLink.ouiLink--subdued:focus {
background-color: #edeff1;
-webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important;
animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important;
}
.ouiLink.ouiLink--primary {
color: #0268BC;
}
.ouiLink.ouiLink--primary:hover, .ouiLink.ouiLink--primary:focus {
color: #014c8a;
text-decoration: underline;
}
.ouiLink.ouiLink--primary:focus {
background-color: #e3eff8;
-webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important;
animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important;
}
.ouiLink.ouiLink--secondary {
color: #0F7B68;
}
.ouiLink.ouiLink--secondary:hover, .ouiLink.ouiLink--secondary:focus {
color: #094e42;
text-decoration: underline;
}
.ouiLink.ouiLink--secondary:focus {
background-color: #e4f1f0;
-webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important;
animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important;
}
.ouiLink.ouiLink--success {
color: #0F7B68;
}
.ouiLink.ouiLink--success:hover, .ouiLink.ouiLink--success:focus {
color: #094e42;
text-decoration: underline;
}
.ouiLink.ouiLink--success:focus {
background-color: #e4f1f0;
-webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important;
animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important;
}
.ouiLink.ouiLink--accent {
color: #9C47BF;
}
.ouiLink.ouiLink--accent:hover, .ouiLink.ouiLink--accent:focus {
color: #7f369d;
text-decoration: underline;
}
.ouiLink.ouiLink--accent:focus {
background-color: #f2ecf9;
-webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important;
animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important;
}
.ouiLink.ouiLink--warning {
color: #8e6625;
}
.ouiLink.ouiLink--warning:hover, .ouiLink.ouiLink--warning:focus {
color: #66491a;
text-decoration: underline;
}
.ouiLink.ouiLink--warning:focus {
background-color: #f1efe9;
-webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important;
animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important;
}
.ouiLink.ouiLink--danger {
color: #C43D35;
}
.ouiLink.ouiLink--danger:hover, .ouiLink.ouiLink--danger:focus {
color: #9c312a;
text-decoration: underline;
}
.ouiLink.ouiLink--danger:focus {
background-color: #f6ebeb;
-webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important;
animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important;
}
.ouiLink.ouiLink--text {
color: #2A3947;
}
.ouiLink.ouiLink--text:hover, .ouiLink.ouiLink--text:focus {
color: #171f27;
text-decoration: underline;
}
.ouiLink.ouiLink--text:focus {
background-color: #e7eaed;
-webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important;
animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important;
}
.ouiLink.ouiLink--ghost {
color: #FCFEFF;
}
.ouiLink.ouiLink--ghost:hover, .ouiLink.ouiLink--ghost:focus {
color: #c9edff;
text-decoration: underline;
}
.ouiLink.ouiLink--ghost:focus {
background-color: #fcfeff;
-webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important;
animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important;
}
button.ouiLink {
-webkit-user-select: text;
-moz-user-select: text;
user-select: text;
}
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/**
* The List Group component provides neatly styled lists containing plain text
* or links. The outer container can be bordered, with padding, or borderless
* with links flush to the sides.
*/
.ouiListGroup.ouiListGroup-flush {
padding: 0;
border: none;
}
.ouiListGroup.ouiListGroup-bordered {
border-radius: 4px;
border: 1px solid #D6D9DD;
}
.ouiListGroup-maxWidthDefault {
max-width: 400px;
}
.ouiListGroup--gutterSmall {
padding: 8px;
}
.ouiListGroup--gutterSmall .ouiListGroupItem:not(:first-of-type) {
margin-top: 8px;
}
.ouiListGroup--gutterMedium {
padding: 16px;
}
.ouiListGroup--gutterMedium .ouiListGroupItem:not(:first-of-type) {
margin-top: 16px;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiListGroupItem {
padding: 0;
border-radius: 4px;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
transition: background-color 150ms;
position: relative;
}
.ouiListGroupItem.ouiListGroupItem-isActive, .ouiListGroupItem.ouiListGroupItem-isClickable:hover {
background-color: rgba(214, 217, 221, 0.25);
}
.ouiListGroupItem.ouiListGroupItem-isClickable:focus-within {
background-color: rgba(214, 217, 221, 0.25);
}
.ouiListGroupItem.ouiListGroupItem--ghost.ouiListGroupItem-isClickable:hover {
background-color: rgba(252, 254, 255, 0.1);
}
.ouiListGroupItem.ouiListGroupItem--ghost.ouiListGroupItem-isClickable:focus-within {
background-color: rgba(252, 254, 255, 0.1);
}
.ouiListGroupItem.ouiListGroupItem-isClickable:hover .ouiListGroupItem__button,
.ouiListGroupItem .ouiListGroupItem__button:hover,
.ouiListGroupItem .ouiListGroupItem__button:focus {
text-decoration: underline;
}
.ouiListGroupItem.ouiListGroupItem-isDisabled, .ouiListGroupItem.ouiListGroupItem-isDisabled:hover, .ouiListGroupItem.ouiListGroupItem-isDisabled:focus, .ouiListGroupItem.ouiListGroupItem-isDisabled .ouiListGroupItem__button:hover, .ouiListGroupItem.ouiListGroupItem-isDisabled .ouiListGroupItem__button:focus {
color: #bdc3c8;
cursor: not-allowed;
background-color: transparent;
text-decoration: none;
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
.ouiListGroupItem__button:hover,
.ouiListGroupItem__button:focus {
background-color: rgba(214, 217, 221, 0.25);
border-radius: 4px;
}
.ouiListGroupItem__button:hover .ouiListGroupItem--ghost .ouiListGroupItem__button:hover,
.ouiListGroupItem__button:hover .ouiListGroupItem--ghost .ouiListGroupItem__button:focus,
.ouiListGroupItem__button:focus .ouiListGroupItem--ghost .ouiListGroupItem__button:hover,
.ouiListGroupItem__button:focus .ouiListGroupItem--ghost .ouiListGroupItem__button:focus {
background-color: rgba(252, 254, 255, 0.1);
}
}
.ouiListGroupItem__text,
.ouiListGroupItem__button {
line-height: 24px;
padding: 4px 8px;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-flex: 1 0 auto;
flex: 1 0 auto;
text-align: left;
max-width: 100%;
font-weight: inherit;
}
.ouiListGroupItem-hasExtraAction .ouiListGroupItem__text,
.ouiListGroupItem-hasExtraAction .ouiListGroupItem__button {
max-width: calc(100% - 32px);
}
.ouiListGroupItem--primary .ouiListGroupItem__text:not(:disabled),
.ouiListGroupItem--primary .ouiListGroupItem__button:not(:disabled) {
color: #0268BC;
}
.ouiListGroupItem--text .ouiListGroupItem__text:not(:disabled),
.ouiListGroupItem--text .ouiListGroupItem__button:not(:disabled) {
color: #2A3947;
}
.ouiListGroupItem--subdued .ouiListGroupItem__text:not(:disabled),
.ouiListGroupItem--subdued .ouiListGroupItem__button:not(:disabled) {
color: #686c75;
}
.ouiListGroupItem--ghost .ouiListGroupItem__text:not(:disabled),
.ouiListGroupItem--ghost .ouiListGroupItem__button:not(:disabled) {
color: #FCFEFF;
}
.ouiListGroupItem__text .ouiListGroupItem__icon,
.ouiListGroupItem__button .ouiListGroupItem__icon {
height: 24px;
}
.ouiListGroupItem-isActive:not(.ouiListGroupItem--ghost) .ouiListGroupItem__text,
.ouiListGroupItem-isActive:not(.ouiListGroupItem--ghost) .ouiListGroupItem__button {
color: #2A3947;
}
.ouiListGroupItem__label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ouiListGroupItem__extraAction {
opacity: 0;
margin-right: 8px;
transition: opacity 150ms;
}
.ouiListGroupItem:not(.ouiListGroupItem-isDisabled):focus .ouiListGroupItem__extraAction, .ouiListGroupItem:not(.ouiListGroupItem-isDisabled):hover .ouiListGroupItem__extraAction, .ouiListGroupItem__extraAction.ouiListGroupItem__extraAction-alwaysShow, .ouiListGroupItem__extraAction:focus {
opacity: 1;
}
.ouiListGroupItem__icon {
-webkit-align-self: flex-start;
align-self: flex-start;
margin-right: 12px;
-webkit-flex-grow: 0;
flex-grow: 0;
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
.ouiListGroupItem--xSmall {
font-size: 12.000002px;
}
.ouiListGroupItem--small {
font-size: 14px;
}
.ouiListGroupItem--medium {
font-size: 14px;
}
.ouiListGroupItem--large {
font-size: 17.999996px;
}
.ouiListGroupItem--xSmall,
.ouiListGroupItem--small {
font-weight: 500;
letter-spacing: 0;
}
.ouiListGroupItem--xSmall .ouiListGroupItem__button,
.ouiListGroupItem--xSmall .ouiListGroupItem__text {
line-height: 16px;
}
.ouiListGroupItem--xSmall .ouiListGroupItem__icon {
height: 16px;
}
.ouiListGroupItem--large .ouiListGroupItem__button,
.ouiListGroupItem--large .ouiListGroupItem__text {
line-height: 32px;
}
.ouiListGroupItem--large .ouiListGroupItem__icon {
height: 32px;
}
.ouiListGroupItem--wrapText .ouiListGroupItem__button,
.ouiListGroupItem--wrapText .ouiListGroupItem__text {
width: 100%;
word-break: break-word;
}
.ouiListGroupItem--wrapText .ouiListGroupItem__label {
white-space: inherit;
}
.ouiListGroup-flush .ouiListGroupItem {
border-radius: 0;
}
.ouiListGroup-bordered .ouiListGroupItem:first-child {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.ouiListGroup-bordered .ouiListGroupItem:last-child {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.ouiListGroupItem__tooltip {
width: 100%;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiPinnableListGroup__itemExtraAction svg {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.ouiPinnableListGroup__itemExtraAction-pinned:not(:hover):not(:focus) {
color: #878a91;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/
.ouiLoadingDashboards {
position: relative;
display: inline-block;
}
.ouiLoadingDashboards--medium {
width: 16px;
}
.ouiLoadingDashboards--large {
width: 24px;
}
.ouiLoadingDashboards--xLarge {
width: 32px;
}
.ouiLoadingDashboards--xxLarge {
width: 40px;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiLoadingLogo,
.ouiLoadingKibana {
position: relative;
display: inline-block;
}
@media screen and (prefers-reduced-motion: no-preference) {
.ouiLoadingLogo:before, .ouiLoadingLogo:after,
.ouiLoadingKibana:before,
.ouiLoadingKibana:after {
position: absolute;
content: "";
width: 90%;
left: 5%;
border-radius: 50%;
opacity: 0.2;
z-index: 1;
}
.ouiLoadingLogo:before,
.ouiLoadingKibana:before {
box-shadow: 0 0 8px #0A1219;
-webkit-animation: 1s ouiLoadingKibanaPulsateAndFade cubic-bezier(0.694, 0.0482, 0.335, 1) infinite;
animation: 1s ouiLoadingKibanaPulsateAndFade cubic-bezier(0.694, 0.0482, 0.335, 1) infinite;
}
.ouiLoadingLogo:after,
.ouiLoadingKibana:after {
background-color: #0A1219;
-webkit-animation: 1s ouiLoadingKibanaPulsate cubic-bezier(0.694, 0.0482, 0.335, 1) infinite;
animation: 1s ouiLoadingKibanaPulsate cubic-bezier(0.694, 0.0482, 0.335, 1) infinite;
}
}
.ouiLoadingLogo .ouiLoadingLogo__icon,
.ouiLoadingLogo .ouiLoadingKibana__icon,
.ouiLoadingKibana .ouiLoadingLogo__icon,
.ouiLoadingKibana .ouiLoadingKibana__icon {
display: block;
}
@media screen and (prefers-reduced-motion: no-preference) {
.ouiLoadingLogo .ouiLoadingLogo__icon,
.ouiLoadingLogo .ouiLoadingKibana__icon,
.ouiLoadingKibana .ouiLoadingLogo__icon,
.ouiLoadingKibana .ouiLoadingKibana__icon {
-webkit-animation: 1s ouiLoadingKibanaBounceMedium cubic-bezier(0.694, 0.0482, 0.335, 1) infinite;
animation: 1s ouiLoadingKibanaBounceMedium cubic-bezier(0.694, 0.0482, 0.335, 1) infinite;
}
}
/**
* 1. Requires pixel math for animation.
*/
.ouiLoadingLogo--medium,
.ouiLoadingKibana--medium {
width: 16px;
}
.ouiLoadingLogo--medium:before, .ouiLoadingLogo--medium:after,
.ouiLoadingKibana--medium:before,
.ouiLoadingKibana--medium:after {
height: 3px; /* 1 */
bottom: -4px;
}
.ouiLoadingLogo--medium .ouiLoadingLogo__icon,
.ouiLoadingLogo--medium .ouiLoadingKibana__icon,
.ouiLoadingKibana--medium .ouiLoadingLogo__icon,
.ouiLoadingKibana--medium .ouiLoadingKibana__icon {
z-index: 999;
-webkit-animation-name: ouiLoadingKibanaBounceMedium;
animation-name: ouiLoadingKibanaBounceMedium;
}
.ouiLoadingLogo--large,
.ouiLoadingKibana--large {
width: 24px;
}
.ouiLoadingLogo--large:before, .ouiLoadingLogo--large:after,
.ouiLoadingKibana--large:before,
.ouiLoadingKibana--large:after {
height: 6px; /* 1 */
bottom: -8px;
}
.ouiLoadingLogo--large .ouiLoadingLogo__icon,
.ouiLoadingLogo--large .ouiLoadingKibana__icon,
.ouiLoadingKibana--large .ouiLoadingLogo__icon,
.ouiLoadingKibana--large .ouiLoadingKibana__icon {
-webkit-animation-name: ouiLoadingKibanaBounceLarge;
animation-name: ouiLoadingKibanaBounceLarge;
}
.ouiLoadingLogo--xLarge,
.ouiLoadingKibana--xLarge {
width: 32px;
}
.ouiLoadingLogo--xLarge:before, .ouiLoadingLogo--xLarge:after,
.ouiLoadingKibana--xLarge:before,
.ouiLoadingKibana--xLarge:after {
height: 8px;
bottom: -12px;
}
.ouiLoadingLogo--xLarge .ouiLoadingLogo__icon,
.ouiLoadingLogo--xLarge .ouiLoadingKibana__icon,
.ouiLoadingKibana--xLarge .ouiLoadingLogo__icon,
.ouiLoadingKibana--xLarge .ouiLoadingKibana__icon {
-webkit-animation-name: ouiLoadingKibanaBounceXLarge;
animation-name: ouiLoadingKibanaBounceXLarge;
}
@-webkit-keyframes ouiLoadingKibanaBounceMedium {
50% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}
}
@keyframes ouiLoadingKibanaBounceMedium {
50% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}
}
@-webkit-keyframes ouiLoadingKibanaBounceLarge {
50% {
-webkit-transform: translateY(-12px);
transform: translateY(-12px);
}
}
@keyframes ouiLoadingKibanaBounceLarge {
50% {
-webkit-transform: translateY(-12px);
transform: translateY(-12px);
}
}
@-webkit-keyframes ouiLoadingKibanaBounceXLarge {
50% {
-webkit-transform: translateY(-16px);
transform: translateY(-16px);
}
}
@keyframes ouiLoadingKibanaBounceXLarge {
50% {
-webkit-transform: translateY(-16px);
transform: translateY(-16px);
}
}
@-webkit-keyframes ouiLoadingKibanaPulsateAndFade {
0% {
opacity: 0;
}
50% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
opacity: 0.1;
}
100% {
opacity: 0;
}
}
@keyframes ouiLoadingKibanaPulsateAndFade {
0% {
opacity: 0;
}
50% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
opacity: 0.1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes ouiLoadingKibanaPulsate {
0% {
opacity: 0.15;
}
50% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
opacity: 0.05;
}
100% {
opacity: 0.15;
}
}
@keyframes ouiLoadingKibanaPulsate {
0% {
opacity: 0.15;
}
50% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
opacity: 0.05;
}
100% {
opacity: 0.15;
}
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiLoadingElastic {
position: relative;
display: inline-block;
}
.ouiLoadingElastic--medium {
width: 16px;
}
.ouiLoadingElastic--large {
width: 24px;
}
.ouiLoadingElastic--xLarge {
width: 32px;
}
.ouiLoadingElastic--xxLarge {
width: 40px;
}
.ouiLoadingElastic path {
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-direction: alternate;
animation-direction: alternate;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: cubic-bezier(0, 0.63, 0.49, 1);
animation-timing-function: cubic-bezier(0, 0.63, 0.49, 1);
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
@media screen and (prefers-reduced-motion: no-preference) {
.ouiLoadingElastic path {
-webkit-animation-name: ouiLoadingElastic;
animation-name: ouiLoadingElastic;
}
}
.ouiLoadingElastic path:nth-of-type(1) {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.ouiLoadingElastic path:nth-of-type(2) {
-webkit-animation-delay: 0.035s;
animation-delay: 0.035s;
}
.ouiLoadingElastic path:nth-of-type(3) {
-webkit-animation-delay: 0.125s;
animation-delay: 0.125s;
}
.ouiLoadingElastic path:nth-of-type(4) {
-webkit-animation-delay: 0.155s;
animation-delay: 0.155s;
}
.ouiLoadingElastic path:nth-of-type(5) {
-webkit-animation-delay: 0.075s;
animation-delay: 0.075s;
}
.ouiLoadingElastic path:nth-of-type(6) {
-webkit-animation-delay: 0.06s;
animation-delay: 0.06s;
}
@-webkit-keyframes ouiLoadingElastic {
0% {
-webkit-transform: scale3d(0, 0, -0.7);
transform: scale3d(0, 0, -0.7);
opacity: 0;
}
40% {
-webkit-transform: scale3d(1, 1, 2);
transform: scale3d(1, 1, 2);
opacity: 1;
}
50% {
-webkit-transform: scale3d(0.99, 0.99, 2);
transform: scale3d(0.99, 0.99, 2);
}
70% {
-webkit-transform: scale3d(0.96, 0.96, -2.5);
transform: scale3d(0.96, 0.96, -2.5);
}
100% {
-webkit-transform: scale3d(0.98, 0.98, 2);
transform: scale3d(0.98, 0.98, 2);
}
}
@keyframes ouiLoadingElastic {
0% {
-webkit-transform: scale3d(0, 0, -0.7);
transform: scale3d(0, 0, -0.7);
opacity: 0;
}
40% {
-webkit-transform: scale3d(1, 1, 2);
transform: scale3d(1, 1, 2);
opacity: 1;
}
50% {
-webkit-transform: scale3d(0.99, 0.99, 2);
transform: scale3d(0.99, 0.99, 2);
}
70% {
-webkit-transform: scale3d(0.96, 0.96, -2.5);
transform: scale3d(0.96, 0.96, -2.5);
}
100% {
-webkit-transform: scale3d(0.98, 0.98, 2);
transform: scale3d(0.98, 0.98, 2);
}
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiLoadingChart {
height: 32px;
z-index: 500;
overflow: hidden;
display: inline-block;
}
/**
* 1. Without the animation, the bars are all the same height,
* so we apply transforms only if they can't animate
*/
.ouiLoadingChart__bar {
height: 100%;
width: 8px;
display: inline-block;
margin-bottom: -16px;
margin-left: 2px;
}
@media screen and (prefers-reduced-motion: no-preference) {
.ouiLoadingChart__bar {
-webkit-animation: ouiLoadingChart 1s infinite;
animation: ouiLoadingChart 1s infinite;
}
}
.ouiLoadingChart__bar:nth-child(1) {
background-color: #54B399;
}
@media screen and (prefers-reduced-motion: reduce) {
.ouiLoadingChart__bar:nth-child(1) {
-webkit-transform: translateY(66%);
transform: translateY(66%); /* 1 */
}
}
.ouiLoadingChart__bar:nth-child(2) {
background-color: #6092C0;
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
@media screen and (prefers-reduced-motion: reduce) {
.ouiLoadingChart__bar:nth-child(2) {
-webkit-transform: translateY(44%);
transform: translateY(44%); /* 1 */
}
}
.ouiLoadingChart__bar:nth-child(3) {
background-color: #D36086;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
@media screen and (prefers-reduced-motion: reduce) {
.ouiLoadingChart__bar:nth-child(3) {
-webkit-transform: translateY(22%);
transform: translateY(22%); /* 1 */
}
}
.ouiLoadingChart__bar:nth-child(4) {
background-color: #9170B8;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.ouiLoadingChart--mono .ouiLoadingChart__bar:nth-child(1) {
background-color: #D6D9DD;
}
.ouiLoadingChart--mono .ouiLoadingChart__bar:nth-child(2) {
background-color: #ced0d5;
}
.ouiLoadingChart--mono .ouiLoadingChart__bar:nth-child(3) {
background-color: #c5c8cc;
}
.ouiLoadingChart--mono .ouiLoadingChart__bar:nth-child(4) {
background-color: #bdbfc4;
}
.ouiLoadingChart--medium {
height: 16px;
}
.ouiLoadingChart--medium > span {
width: 2px;
margin-left: 2px;
margin-bottom: 8px;
}
.ouiLoadingChart--large {
height: 24px;
}
.ouiLoadingChart--large > span {
width: 4px;
margin-left: 2px;
margin-bottom: 12px;
}
.ouiLoadingChart--xLarge {
height: 32px;
}
.ouiLoadingChart--xLarge > span {
width: 8px;
margin-left: 4px;
margin-bottom: 16px;
}
@-webkit-keyframes ouiLoadingChart {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
50% {
-webkit-transform: translateY(66%);
transform: translateY(66%);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes ouiLoadingChart {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
50% {
-webkit-transform: translateY(66%);
transform: translateY(66%);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiLoadingContent__loader {
display: block;
width: 100%;
}
.ouiLoadingContent__singleLine {
display: block;
width: 100%;
height: 16px;
margin-bottom: 8px;
border-radius: 4px;
overflow: hidden;
}
.ouiLoadingContent__singleLine:last-child:not(:only-child) {
width: 75%;
}
.ouiLoadingContent__singleLineBackground {
display: block;
width: 220%;
height: 100%;
background: linear-gradient(137deg, #eff1f3 45%, #f4f7f8 50%, #eff1f3 55%);
}
@media screen and (prefers-reduced-motion: no-preference) {
.ouiLoadingContent__singleLineBackground {
-webkit-animation: ouiLoadingContentGradientLoad 1.5s cubic-bezier(0.694, 0.0482, 0.335, 1) infinite;
animation: ouiLoadingContentGradientLoad 1.5s cubic-bezier(0.694, 0.0482, 0.335, 1) infinite;
}
}
@-webkit-keyframes ouiLoadingContentGradientLoad {
0% {
-webkit-transform: translateX(-53%);
transform: translateX(-53%);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes ouiLoadingContentGradientLoad {
0% {
-webkit-transform: translateX(-53%);
transform: translateX(-53%);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiLoadingSpinner {
-webkit-flex-shrink: 0;
flex-shrink: 0;
display: inline-block;
width: 32px;
height: 32px;
border-radius: 50%;
border: solid 2px #D6D9DD;
border-color: #0268BC #D6D9DD #D6D9DD #D6D9DD;
}
@media screen and (prefers-reduced-motion: no-preference) {
.ouiLoadingSpinner {
-webkit-animation: ouiLoadingSpinner 0.6s infinite linear;
animation: ouiLoadingSpinner 0.6s infinite linear;
}
}
.ouiLoadingSpinner--small {
width: 8px;
height: 8px;
border-width: 1px;
}
.ouiLoadingSpinner--medium {
width: 16px;
height: 16px;
border-width: 1px;
}
.ouiLoadingSpinner--large {
width: 24px;
height: 24px;
}
.ouiLoadingSpinner--xLarge {
width: 32px;
height: 32px;
}
@-webkit-keyframes ouiLoadingSpinner {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes ouiLoadingSpinner {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiMarkdownEditor--isPreviewing .ouiMarkdownEditor__toggleContainer {
display: none;
}
.ouiMarkdownEditor--fullHeight {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
height: 100%;
}
.ouiMarkdownEditor--fullHeight .ouiMarkdownEditorTextArea {
resize: none;
}
.ouiMarkdownEditor--fullHeight .ouiMarkdownEditorDropZone {
height: 100%;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiMarkdownEditorDropZone {
display: -webkit-flex;
display: flex;
position: relative;
-webkit-flex-direction: column;
flex-direction: column;
min-height: 150px;
}
.ouiMarkdownEditorDropZone__input {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
overflow: hidden;
}
.ouiMarkdownEditorDropZone__input:hover {
cursor: pointer;
}
.ouiMarkdownEditorDropZone__input:hover:disabled {
cursor: not-allowed;
}
.ouiMarkdownEditorDropZone--isDragging .ouiMarkdownEditorFooter,
.ouiMarkdownEditorDropZone--isDragging .ouiMarkdownEditorTextArea,
.ouiMarkdownEditorDropZone--isDragging .ouiMarkdownEditorTextArea:focus,
.ouiMarkdownEditorDropZone--isDragging .ouiMarkdownEditor:focus-within .ouiMarkdownEditorTextArea {
background-color: rgba(2, 104, 188, 0.1) !important;
}
.ouiMarkdownEditorDropZone--isDragging .ouiMarkdownEditorTextArea,
.ouiMarkdownEditorDropZone--isDragging .ouiMarkdownEditorTextArea:focus {
background-image: linear-gradient(to top, #0268BC, #0268BC 2px, transparent 2px, transparent 100%) !important;
}
.ouiMarkdownEditorDropZone--isDraggingError .ouiMarkdownEditorFooter,
.ouiMarkdownEditorDropZone--isDraggingError .ouiMarkdownEditorTextArea,
.ouiMarkdownEditorDropZone--isDraggingError .ouiMarkdownEditorTextArea:focus,
.ouiMarkdownEditorDropZone--isDraggingError .ouiMarkdownEditor:focus-within .ouiMarkdownEditorTextArea {
background-color: rgba(196, 61, 53, 0.1) !important;
}
.ouiMarkdownEditorDropZone--hasError .ouiMarkdownEditorTextArea,
.ouiMarkdownEditorDropZone--hasError .ouiMarkdownEditorTextArea:focus {
background-image: linear-gradient(to top, #C43D35, #C43D35 2px, transparent 2px, transparent 100%) !important;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiMarkdownFormat {
font-family: var(--oui-font-family);
font-weight: 400;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-font-kerning: normal;
font-kerning: normal;
color: #2A3947;
font-weight: 400;
}
.ouiMarkdownFormat--reversed {
color: #E3E5E8;
}
.ouiMarkdownFormat > div > *:first-child {
margin-top: 0 !important;
}
.ouiMarkdownFormat > div > * {
margin-top: 0;
margin-bottom: 1em;
}
.ouiMarkdownFormat > div > *:last-child,
.ouiMarkdownFormat .ouiCheckbox {
margin-bottom: 0 !important;
}
.ouiMarkdownFormat .ouiCheckbox + *:not(.ouiCheckbox) {
margin-top: 1em;
}
.ouiMarkdownFormat p,
.ouiMarkdownFormat blockquote,
.ouiMarkdownFormat ul,
.ouiMarkdownFormat ol,
.ouiMarkdownFormat dl,
.ouiMarkdownFormat pre,
.ouiMarkdownFormat table {
margin-top: 0;
margin-bottom: 1em;
line-height: 1.5em;
}
.ouiMarkdownFormat strong {
font-weight: 600;
}
.ouiMarkdownFormat h1,
.ouiMarkdownFormat h2,
.ouiMarkdownFormat h3,
.ouiMarkdownFormat h4,
.ouiMarkdownFormat h5,
.ouiMarkdownFormat h6 {
margin-top: 0;
margin-bottom: 0.5em;
}
.ouiMarkdownFormat h1 {
font-size: 2.25em;
line-height: 1.333333em;
font-weight: 300;
}
.ouiMarkdownFormat h2 {
font-size: 1.75em;
line-height: 1.428571em;
font-weight: 300;
}
.ouiMarkdownFormat h3 {
font-size: 1.25em;
line-height: 1.6em;
font-weight: 600;
}
.ouiMarkdownFormat h4 {
font-size: 1em;
line-height: 1.5em;
font-weight: 600;
}
.ouiMarkdownFormat h5 {
font-size: 0.875em;
line-height: 1.142857em;
font-weight: 700;
}
.ouiMarkdownFormat h6 {
font-size: 0.75em;
line-height: 1.333333em;
font-weight: 700;
text-transform: uppercase;
}
.ouiMarkdownFormat img {
max-width: 100%;
box-sizing: content-box;
border-style: none;
}
.ouiMarkdownFormat blockquote {
padding: 0 1em;
border-left: 0.25em solid rgba(10, 18, 25, 0.15);
}
.ouiMarkdownFormat--reversed blockquote {
border-left-color: rgba(252, 254, 255, 0.15);
}
.ouiMarkdownFormat hr {
border: none;
height: 1px;
background-color: rgba(10, 18, 25, 0.15);
margin: 1.5em 0;
}
.ouiMarkdownFormat hr::before {
display: table;
content: "";
}
.ouiMarkdownFormat hr::after {
display: table;
clear: both;
content: "";
}
.ouiMarkdownFormat ul,
.ouiMarkdownFormat ol {
padding-left: 1.5em;
margin-top: 0;
margin-bottom: 1em;
}
.ouiMarkdownFormat ul {
list-style-type: disc;
}
.ouiMarkdownFormat ol {
list-style-type: decimal;
}
.ouiMarkdownFormat ul ul {
list-style-type: circle;
}
.ouiMarkdownFormat ol ol,
.ouiMarkdownFormat ul ol {
list-style-type: lower-roman;
}
.ouiMarkdownFormat ul ul ol,
.ouiMarkdownFormat ul ol ol,
.ouiMarkdownFormat ol ul ol,
.ouiMarkdownFormat ol ol ol {
list-style-type: lower-alpha;
}
.ouiMarkdownFormat dd {
margin-left: 0;
}
.ouiMarkdownFormat ul ul,
.ouiMarkdownFormat ul ol,
.ouiMarkdownFormat ol ol,
.ouiMarkdownFormat ol ul {
margin-top: 0;
margin-bottom: 0;
}
.ouiMarkdownFormat li > p {
margin-bottom: 0.5em;
}
.ouiMarkdownFormat li + li {
margin-top: 0.25em;
}
.ouiMarkdownFormat .task-list-item {
list-style-type: none;
}
.ouiMarkdownFormat .task-list-item + .task-list-item {
margin-top: 0.25em;
}
.ouiMarkdownFormat .task-list-item input {
margin: 0 0.2em 0.25em -1.6em;
vertical-align: middle;
}
.ouiMarkdownFormat table {
display: block;
width: 100%;
overflow: auto;
border-left: 1px solid rgba(10, 18, 25, 0.15);
border-spacing: 0;
border-collapse: collapse;
}
.ouiMarkdownFormat td,
.ouiMarkdownFormat th {
padding: 0;
}
.ouiMarkdownFormat table th,
.ouiMarkdownFormat table td {
padding: 0.25em 0.5em;
border-top: 1px solid rgba(10, 18, 25, 0.15);
border-bottom: 1px solid rgba(10, 18, 25, 0.15);
}
.ouiMarkdownFormat table th:last-child,
.ouiMarkdownFormat table td:last-child {
border-right: 1px solid rgba(10, 18, 25, 0.15);
}
.ouiMarkdownFormat table tr {
background-color: transparent;
border-top: 1px solid rgba(10, 18, 25, 0.15);
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiMarkdownEditorFooter {
display: -webkit-inline-flex;
display: inline-flex;
padding: 4px;
border: 1px solid #D6D9DD;
-webkit-align-items: center;
align-items: center;
background: #F0F2F4;
}
.ouiMarkdownEditorFooter__popover {
width: 300px;
}
.ouiMarkdownEditorFooter__actions {
-webkit-flex: 1;
flex: 1;
display: -webkit-inline-flex;
display: inline-flex;
}
.ouiMarkdownEditorFooter__actions > button,
.ouiMarkdownEditorFooter__actions > span {
margin-right: 4px;
-webkit-align-self: center;
align-self: center;
}
.ouiMarkdownEditorFooter__actions .ouiMarkdownEditorFooter__uploadError {
position: relative;
left: -1px;
line-height: 1;
border-radius: 4px;
}
.ouiMarkdownEditorFooter__actions .ouiMarkdownEditorFooter__uploadError > span {
padding: 0 4px;
}
.ouiMarkdownEditorFooter__help {
justify-self: flex-end;
}
.ouiMarkdownEditorFooter__help > svg {
width: 26px;
}
.ouiMarkdownEditorFooter__errors > svg {
color: #686c75;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiMarkdownEditorPreview {
scrollbar-width: thin;
background: #FCFEFF;
min-height: 150px;
overflow-y: auto;
border: 1px solid #D6D9DD;
padding: 12px;
}
.ouiMarkdownEditorPreview::-webkit-scrollbar {
width: 16px;
height: 16px;
}
.ouiMarkdownEditorPreview::-webkit-scrollbar-thumb {
background-color: rgba(90, 104, 117, 0.5);
border: 6px solid transparent;
background-clip: content-box;
}
.ouiMarkdownEditorPreview::-webkit-scrollbar-corner, .ouiMarkdownEditorPreview::-webkit-scrollbar-track {
background-color: transparent;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiMarkdownEditorTextArea {
font-family: var(--oui-font-family);
font-weight: 400;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-font-kerning: normal;
font-kerning: normal;
font-size: 14px;
color: #2A3947;
scrollbar-width: thin;
width: 100%;
height: 100%;
min-height: 150px;
padding: 12px;
border: 1px solid #D6D9DD;
border-bottom: none;
line-height: 1.5;
resize: vertical;
background-color: #f2f4f6;
background-repeat: no-repeat;
background-size: 0% 100%;
margin: 0;
transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in;
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
.ouiMarkdownEditorTextArea {
line-height: 1em;
}
}
.ouiMarkdownEditorTextArea::-webkit-input-placeholder {
color: #686c75;
opacity: 1;
}
.ouiMarkdownEditorTextArea::-moz-placeholder {
color: #686c75;
opacity: 1;
}
.ouiMarkdownEditorTextArea::placeholder {
color: #686c75;
opacity: 1;
}
.ouiMarkdownEditorTextArea::-webkit-scrollbar {
width: 16px;
height: 16px;
}
.ouiMarkdownEditorTextArea::-webkit-scrollbar-thumb {
background-color: rgba(90, 104, 117, 0.5);
border: 6px solid transparent;
background-clip: content-box;
}
.ouiMarkdownEditorTextArea::-webkit-scrollbar-corner, .ouiMarkdownEditorTextArea::-webkit-scrollbar-track {
background-color: transparent;
}
.ouiMarkdownEditorTextArea:focus, .ouiMarkdownEditor:focus-within .ouiMarkdownEditorTextArea {
background-color: #fcfeff;
background-image: linear-gradient(to top, #0268BC, #0268BC 2px, transparent 2px, transparent 100%);
background-size: 100% 100%;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiMarkdownEditorToolbar {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
background: #E3E5E8;
border: 1px solid #D6D9DD;
border-color: #D6D9DD;
border-bottom: none;
padding: 4px;
}
.ouiMarkdownEditorToolbar__buttons {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex: 1;
flex: 1;
-webkit-align-items: center;
align-items: center;
}
.ouiMarkdownEditorToolbar__buttons > * {
margin-right: 4px;
}
.ouiMarkdownEditorToolbar__divider {
content: "";
height: 24px;
display: block;
margin-left: 4px;
padding-right: 4px;
border-left: 1px solid #D6D9DD;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiMarkdownTooltip__icon {
-webkit-transform: translateY(-1px);
transform: translateY(-1px);
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiMark {
background-color: transparent;
font-weight: 500;
color: #2A3947;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/**
* 1. Fix IE overflow issue (min-height) by adding a separate wrapper for the
* flex display. https://github.com/philipwalton/flexbugs#flexbug-3
* 2. IE has trouble with min-widths on flex elements. Use the pixel value
* from our forms since that's usually the smallest we want them.
*/
.ouiModal {
border: 1px solid #D6D9DD;
box-shadow: 0 40px 64px 0 rgba(78, 92, 110, 0.1), 0 24px 32px 0 rgba(78, 92, 110, 0.1), 0 16px 16px 0 rgba(78, 92, 110, 0.1), 0 8px 8px 0 rgba(78, 92, 110, 0.1), 0 4px 4px 0 rgba(78, 92, 110, 0.1), 0 2px 2px 0 rgba(78, 92, 110, 0.1);
border-color: #c8cdd4;
border-top-color: #e2e6e9;
border-bottom-color: #aeb5be;
display: -webkit-flex;
display: flex; /* 1 */
position: relative;
background-color: #FCFEFF;
border-radius: 4px;
z-index: 8000;
min-width: 400px;
-webkit-animation: ouiModal 90ms cubic-bezier(0.34, 1.61, 0.7, 1);
animation: ouiModal 90ms cubic-bezier(0.34, 1.61, 0.7, 1);
max-width: calc(100vw - 16px);
}
.ouiModal:focus {
outline: none;
}
.ouiModal .ouiModal__flex { /* 1 */
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
max-height: 75vh;
overflow: hidden;
}
.ouiModal--maxWidth-default {
max-width: min(768px, calc(100vw - 16px));
}
.ouiModal--confirmation {
min-width: 400px;
}
.ouiModalHeader {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: center;
align-items: center;
padding: 24px 40px 16px 24px;
-webkit-flex-grow: 0;
flex-grow: 0;
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
.ouiModalHeader__title {
color: #161e2b;
font-size: 24.000004px;
font-size: 1.714286rem;
line-height: 2.07145rem;
font-weight: 400;
}
.ouiModalBody {
-webkit-flex-grow: 1;
flex-grow: 1;
overflow: hidden;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
}
.ouiModalBody .ouiModalBody__overflow {
scrollbar-width: thin;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
-webkit-mask-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.1) 0%, red 7.5px, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%);
mask-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.1) 0%, red 7.5px, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%);
contain: paint;
padding: 8px 24px;
}
.ouiModalBody .ouiModalBody__overflow::-webkit-scrollbar {
width: 16px;
height: 16px;
}
.ouiModalBody .ouiModalBody__overflow::-webkit-scrollbar-thumb {
background-color: rgba(90, 104, 117, 0.5);
border: 6px solid transparent;
background-clip: content-box;
}
.ouiModalBody .ouiModalBody__overflow::-webkit-scrollbar-corner, .ouiModalBody .ouiModalBody__overflow::-webkit-scrollbar-track {
background-color: transparent;
}
.ouiModalBody .ouiModalBody__overflow:focus {
outline: none; /* 1 */
}
.ouiModalBody .ouiModalBody__overflow[tabindex="0"]:focus:focus-visible {
outline-style: auto; /* 2 */
}
.ouiModalFooter {
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-end;
justify-content: flex-end;
padding: 16px 24px 24px;
-webkit-flex-grow: 0;
flex-grow: 0;
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
.ouiModalFooter > * + * {
margin-left: 16px;
}
.ouiModalHeader + .ouiModalFooter {
padding-top: 8px;
}
.ouiModalBody:last-of-type .ouiModalBody__overflow {
padding-bottom: 24px;
}
.ouiModal__closeIcon {
background-color: rgba(252, 254, 255, 0.9);
position: absolute;
right: 4px;
top: 4px;
z-index: 3;
}
@-webkit-keyframes ouiModal {
0% {
opacity: 0;
-webkit-transform: translateY(32px);
transform: translateY(32px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes ouiModal {
0% {
opacity: 0;
-webkit-transform: translateY(32px);
transform: translateY(32px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@media only screen and (max-width: 574px) {
.ouiModal {
position: fixed;
width: 100vw !important;
max-width: none !important;
min-width: 0 !important;
left: 0;
right: 0;
bottom: 0;
top: 0;
border-radius: 0;
border: none;
}
.ouiModal.ouiModal--confirmation {
box-shadow: 0 -40px 64px 0 rgba(78, 92, 110, 0.1), 0 -24px 32px 0 rgba(78, 92, 110, 0.1), 0 -16px 16px 0 rgba(78, 92, 110, 0.1), 0 -8px 8px 0 rgba(78, 92, 110, 0.1);
top: auto;
}
.ouiModal .ouiModal__flex { /* 1 */
max-height: 100vh;
}
.ouiModalHeader {
width: 100%;
}
.ouiModalFooter {
width: 100%;
background: #E3E5E8;
padding: 12px 24px !important;
-webkit-justify-content: stretch;
justify-content: stretch;
}
.ouiModalFooter > * {
-webkit-flex: 1;
flex: 1;
}
.ouiModalFooter > * + * {
margin-left: 0;
}
.ouiModalBody {
width: 100%;
}
.ouiModalBody .ouiModalBody__overflow {
padding-bottom: 24px;
}
}
@media only screen and (min-width: 575px) and (max-width: 767px) {
.ouiModal {
position: fixed;
width: 100vw !important;
max-width: none !important;
min-width: 0 !important;
left: 0;
right: 0;
bottom: 0;
top: 0;
border-radius: 0;
border: none;
}
.ouiModal.ouiModal--confirmation {
box-shadow: 0 -40px 64px 0 rgba(78, 92, 110, 0.1), 0 -24px 32px 0 rgba(78, 92, 110, 0.1), 0 -16px 16px 0 rgba(78, 92, 110, 0.1), 0 -8px 8px 0 rgba(78, 92, 110, 0.1);
top: auto;
}
.ouiModal .ouiModal__flex { /* 1 */
max-height: 100vh;
}
.ouiModalHeader {
width: 100%;
}
.ouiModalFooter {
width: 100%;
background: #E3E5E8;
padding: 12px 24px !important;
-webkit-justify-content: stretch;
justify-content: stretch;
}
.ouiModalFooter > * {
-webkit-flex: 1;
flex: 1;
}
.ouiModalFooter > * + * {
margin-left: 0;
}
.ouiModalBody {
width: 100%;
}
.ouiModalBody .ouiModalBody__overflow {
padding-bottom: 24px;
}
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiNotificationEvent {
display: -webkit-flex;
display: flex;
padding: 12px 0 12px 12px;
border-bottom: 1px solid #D6D9DD;
}
.ouiNotificationEvent:last-child {
border-bottom: none;
}
.ouiNotificationEvent--withReadState {
padding: 12px 0 12px 8px;
}
.ouiNotificationEvent__title {
color: #161e2b;
font-size: 16.0006px;
font-size: 1.1429rem;
line-height: 1.35715rem;
font-weight: 500;
display: -webkit-flex;
display: flex;
}
.ouiNotificationEvent__title.ouiLink {
color: #0268BC;
}
.ouiNotificationEvent__title--isRead {
color: #5A6875 !important;
}
.ouiNotificationEvent__readButton {
margin-right: 8px;
}
.ouiNotificationEvent__content {
-webkit-flex: 1;
flex: 1;
}
.ouiNotificationEvent__content > * + * {
margin-top: 8px;
margin-right: 12px;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiNotificationEventMeta {
position: relative;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: center;
align-items: center;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: 4px;
min-height: 24px;
}
.ouiNotificationEventMeta--hasContextMenu {
padding-right: 24px;
}
.ouiNotificationEventMeta__contextMenuWrapper {
position: absolute;
top: 0;
right: 0;
}
.ouiNotificationEventMeta__section {
margin-right: 8px;
}
.ouiNotificationEventMeta__section:first-child {
display: -webkit-flex;
display: flex;
-webkit-flex: 1;
flex: 1;
-webkit-align-items: center;
align-items: center;
}
.ouiNotificationEventMeta__icon {
margin-right: 8px;
}
.ouiNotificationEventMeta__badge {
max-width: 100%;
display: inline-grid;
}
.ouiNotificationEventMeta__time {
font-size: 12.000002px;
color: #686c75;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiNotificationEventMessages {
font-size: 14px;
}
.ouiNotificationEventMessages__accordion {
color: #5A6875;
}
.ouiNotificationEventMessages__accordionButton {
color: #0268BC;
}
.ouiNotificationEventMessages__accordionContent > * {
padding-top: 8px;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiNotificationEventReadButton--isRead svg {
fill: transparent;
stroke-width: 1px;
stroke: #D6D9DD;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiNotificationEventReadIcon {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
height: 24px;
margin: 0 4px;
}
.ouiNotificationEventReadIcon--isRead svg {
fill: transparent;
stroke-width: 1px;
stroke: #D6D9DD;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiOverlayMask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
padding-bottom: 10vh;
-webkit-animation: ouiAnimFadeIn 150ms ease-in;
animation: ouiAnimFadeIn 150ms ease-in;
background: rgba(252, 254, 255, 0.8);
}
.ouiBody-hasOverlayMask {
overflow: hidden;
}
.ouiOverlayMask--aboveHeader {
z-index: 6000;
}
.ouiOverlayMask--belowHeader {
z-index: 1000;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiPagination {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
}
.ouiPagination__compressedText {
display: -webkit-inline-flex;
display: inline-flex;
-webkit-align-items: center;
align-items: center;
line-height: 1 !important;
}
.ouiPagination__compressedText > *:first-child {
margin-right: 4px;
}
.ouiPagination__compressedText > *:last-child {
margin-left: 4px;
}
.ouiPagination__list {
display: -webkit-flex;
display: flex;
-webkit-align-items: baseline;
align-items: baseline;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiPaginationButton {
font-size: 14px;
padding: 0;
text-align: center;
border-radius: 4px;
}
.ouiPaginationButton-isActive {
font-weight: 500;
}
.ouiPaginationButton-isActive.ouiPaginationButton-isActive {
color: #0268BC;
}
.ouiPaginationButton-isActive.ouiPaginationButton-isActive .ouiButtonEmpty__content {
cursor: default;
}
.ouiPaginationButton-isActive.ouiPaginationButton-isActive, .ouiPaginationButton-isActive.ouiPaginationButton-isActive:hover {
text-decoration: underline;
}
.ouiPaginationButton-isPlaceholder {
-webkit-align-items: baseline;
align-items: baseline;
color: #a3a7ae;
font-size: 14px;
padding: 0 8px;
height: 24px;
padding-top: 6px;
}
@media only screen and (max-width: 574px) {
.ouiPaginationButton-isPlaceholder,
.ouiPaginationButton--hideOnMobile {
display: none;
}
}
@media only screen and (min-width: 575px) and (max-width: 767px) {
.ouiPaginationButton-isPlaceholder,
.ouiPaginationButton--hideOnMobile {
display: none;
}
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiPanel {
background-color: #FCFEFF;
border: 1px solid #D6D9DD;
border-radius: 4px;
-webkit-flex-grow: 1;
flex-grow: 1;
}
.ouiPanel.ouiPanel--flexGrowZero {
-webkit-flex-grow: 0;
flex-grow: 0;
}
.ouiPanel.ouiPanel--noBorder {
border: none;
}
.ouiPanel.ouiPanel--hasShadow {
box-shadow: 0 2px 2px -1px rgba(173, 180, 186, 0.3), 0 1px 5px -2px rgba(173, 180, 186, 0.3);
border: 1px solid #D6D9DD;
}
.ouiPanel.ouiPanel--isClickable {
transition: all 150ms cubic-bezier(0.694, 0.0482, 0.335, 1);
}
.ouiPanel.ouiPanel--isClickable:enabled {
display: block;
width: 100%;
text-align: left;
}
.ouiPanel.ouiPanel--isClickable:hover, .ouiPanel.ouiPanel--isClickable:focus {
box-shadow: 0 4px 8px 0 rgba(173, 180, 186, 0.15), 0 2px 2px -1px rgba(173, 180, 186, 0.3);
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
cursor: pointer;
}
.ouiPanel.ouiPanel--borderRadiusNone {
border-radius: 0;
}
.ouiPanel.ouiPanel--borderRadiusMedium {
border-radius: 4px;
}
.ouiPanel.ouiPanel--borderRadiusLarge {
border-radius: 8px;
}
.ouiPanel.ouiPanel--borderRadiusXLarge {
border-radius: 16px;
}
.ouiPanel.ouiPanel--transparent {
background-color: transparent;
}
.ouiPanel.ouiPanel--plain {
background-color: #FCFEFF;
}
.ouiPanel.ouiPanel--subdued {
background-color: #F0F2F4;
}
.ouiPanel.ouiPanel--accent {
background-color: #f2ecf9;
}
.ouiPanel.ouiPanel--primary {
background-color: #e3eff8;
}
.ouiPanel.ouiPanel--success {
background-color: #e4f1f0;
}
.ouiPanel.ouiPanel--warning {
background-color: #f9f5ea;
}
.ouiPanel.ouiPanel--danger {
background-color: #f6ebeb;
}
.ouiPanel--paddingSmall {
padding: 8px;
}
.ouiPanel--paddingMedium {
padding: 16px;
}
.ouiPanel--paddingLarge {
padding: 24px;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiSplitPanel {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
min-width: 0;
}
.ouiSplitPanel .ouiSplitPanel__inner {
-webkit-flex-basis: 0%;
flex-basis: 0%;
-webkit-transform: none !important;
transform: none !important;
box-shadow: none !important;
}
.ouiSplitPanel.ouiSplitPanel-isResponsive.ouiPanel--borderRadiusNone .ouiSplitPanel__inner:first-child, .ouiSplitPanel.ouiPanel--borderRadiusNone .ouiSplitPanel__inner:first-child {
border-radius: -1 -1 0 0;
}
.ouiSplitPanel.ouiSplitPanel-isResponsive.ouiPanel--borderRadiusNone .ouiSplitPanel__inner:last-child, .ouiSplitPanel.ouiPanel--borderRadiusNone .ouiSplitPanel__inner:last-child {
border-radius: 0 0 -1 -1;
}
.ouiSplitPanel.ouiSplitPanel-isResponsive.ouiPanel--borderRadiusMedium .ouiSplitPanel__inner:first-child, .ouiSplitPanel.ouiPanel--borderRadiusMedium .ouiSplitPanel__inner:first-child {
border-radius: 3px 3px 0 0;
}
.ouiSplitPanel.ouiSplitPanel-isResponsive.ouiPanel--borderRadiusMedium .ouiSplitPanel__inner:last-child, .ouiSplitPanel.ouiPanel--borderRadiusMedium .ouiSplitPanel__inner:last-child {
border-radius: 0 0 3px 3px;
}
.ouiSplitPanel.ouiSplitPanel-isResponsive.ouiPanel--borderRadiusLarge .ouiSplitPanel__inner:first-child, .ouiSplitPanel.ouiPanel--borderRadiusLarge .ouiSplitPanel__inner:first-child {
border-radius: 7px 7px 0 0;
}
.ouiSplitPanel.ouiSplitPanel-isResponsive.ouiPanel--borderRadiusLarge .ouiSplitPanel__inner:last-child, .ouiSplitPanel.ouiPanel--borderRadiusLarge .ouiSplitPanel__inner:last-child {
border-radius: 0 0 7px 7px;
}
.ouiSplitPanel.ouiSplitPanel-isResponsive.ouiPanel--borderRadiusXLarge .ouiSplitPanel__inner:first-child, .ouiSplitPanel.ouiPanel--borderRadiusXLarge .ouiSplitPanel__inner:first-child {
border-radius: 15px 15px 0 0;
}
.ouiSplitPanel.ouiSplitPanel-isResponsive.ouiPanel--borderRadiusXLarge .ouiSplitPanel__inner:last-child, .ouiSplitPanel.ouiPanel--borderRadiusXLarge .ouiSplitPanel__inner:last-child {
border-radius: 0 0 15px 15px;
}
.ouiSplitPanel--row {
-webkit-flex-direction: row;
flex-direction: row;
}
.ouiSplitPanel--row.ouiSplitPanel-isResponsive {
-webkit-flex-direction: column;
flex-direction: column;
}
.ouiSplitPanel--row.ouiPanel--borderRadiusNone .ouiSplitPanel__inner:first-child {
border-radius: -1 0 0 -1;
}
.ouiSplitPanel--row.ouiPanel--borderRadiusNone .ouiSplitPanel__inner:last-child {
border-radius: 0 -1 -1 0;
}
.ouiSplitPanel--row.ouiPanel--borderRadiusMedium .ouiSplitPanel__inner:first-child {
border-radius: 3px 0 0 3px;
}
.ouiSplitPanel--row.ouiPanel--borderRadiusMedium .ouiSplitPanel__inner:last-child {
border-radius: 0 3px 3px 0;
}
.ouiSplitPanel--row.ouiPanel--borderRadiusLarge .ouiSplitPanel__inner:first-child {
border-radius: 7px 0 0 7px;
}
.ouiSplitPanel--row.ouiPanel--borderRadiusLarge .ouiSplitPanel__inner:last-child {
border-radius: 0 7px 7px 0;
}
.ouiSplitPanel--row.ouiPanel--borderRadiusXLarge .ouiSplitPanel__inner:first-child {
border-radius: 15px 0 0 15px;
}
.ouiSplitPanel--row.ouiPanel--borderRadiusXLarge .ouiSplitPanel__inner:last-child {
border-radius: 0 15px 15px 0;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiPage {
display: -webkit-flex;
display: flex;
background-color: #F0F2F4;
-webkit-flex-shrink: 0;
flex-shrink: 0;
max-width: 100%;
}
.ouiPage--restrictWidth-default, .ouiPage--restrictWidth-custom {
margin-left: auto;
margin-right: auto;
width: 100%;
}
.ouiPage--restrictWidth-default {
max-width: 1000px;
}
.ouiPage--grow {
-webkit-flex-grow: 1;
flex-grow: 1;
}
.ouiPage--column {
-webkit-flex-direction: column;
flex-direction: column;
}
@media only screen and (max-width: 574px) {
.ouiPage {
-webkit-flex-direction: column;
flex-direction: column;
}
}
@media only screen and (min-width: 575px) and (max-width: 767px) {
.ouiPage {
-webkit-flex-direction: column;
flex-direction: column;
}
}
.ouiPage--paddingSmall {
padding: 8px;
}
.ouiPage--paddingSmall .ouiPageSideBar {
min-width: 192px;
margin-right: 8px;
}
@media only screen and (max-width: 574px) {
.ouiPage--paddingSmall .ouiPageSideBar {
margin-right: 0;
margin-bottom: 8px;
}
}
@media only screen and (min-width: 575px) and (max-width: 767px) {
.ouiPage--paddingSmall .ouiPageSideBar {
margin-right: 0;
margin-bottom: 8px;
}
}
.ouiPage--paddingSmall .ouiPageBody > .ouiPageHeader {
margin-bottom: 8px;
}
.ouiPage--paddingMedium {
padding: 16px;
}
.ouiPage--paddingMedium .ouiPageSideBar {
min-width: 192px;
margin-right: 16px;
}
@media only screen and (max-width: 574px) {
.ouiPage--paddingMedium .ouiPageSideBar {
margin-right: 0;
margin-bottom: 16px;
}
}
@media only screen and (min-width: 575px) and (max-width: 767px) {
.ouiPage--paddingMedium .ouiPageSideBar {
margin-right: 0;
margin-bottom: 16px;
}
}
.ouiPage--paddingMedium .ouiPageBody > .ouiPageHeader {
margin-bottom: 16px;
}
.ouiPage--paddingLarge {
padding: 24px;
}
.ouiPage--paddingLarge .ouiPageSideBar {
min-width: 192px;
margin-right: 24px;
}
@media only screen and (max-width: 574px) {
.ouiPage--paddingLarge .ouiPageSideBar {
margin-right: 0;
margin-bottom: 24px;
}
}
@media only screen and (min-width: 575px) and (max-width: 767px) {
.ouiPage--paddingLarge .ouiPageSideBar {
margin-right: 0;
margin-bottom: 24px;
}
}
.ouiPage--paddingLarge .ouiPageBody > .ouiPageHeader {
margin-bottom: 24px;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiPageBody {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: stretch;
align-items: stretch;
-webkit-flex: 1 1 100%;
flex: 1 1 100%;
max-width: 100%;
min-width: 0;
}
.ouiPageBody--restrictWidth-default, .ouiPageBody--restrictWidth-custom {
margin-left: auto;
margin-right: auto;
width: 100%;
}
.ouiPageBody--restrictWidth-default {
max-width: 1000px;
}
.ouiPageBody.ouiPageBody--borderRadiusNone {
border-top-width: 0;
border-right-width: 0;
border-bottom-width: 0;
}
.ouiPageBody--paddingSmall {
padding: 8px;
}
.ouiPageBody--paddingSmall > .ouiPageHeader:not([class*="--padding"]) {
margin-bottom: 8px;
border-bottom: 1px solid #D6D9DD;
}
.ouiPageBody--paddingSmall > .ouiPageHeader:not([class*="--padding"]):not(.ouiPageHeader--tabsAtBottom) {
padding-bottom: 8px;
}
.ouiPageBody--paddingMedium {
padding: 16px;
}
.ouiPageBody--paddingMedium > .ouiPageHeader:not([class*="--padding"]) {
margin-bottom: 16px;
border-bottom: 1px solid #D6D9DD;
}
.ouiPageBody--paddingMedium > .ouiPageHeader:not([class*="--padding"]):not(.ouiPageHeader--tabsAtBottom) {
padding-bottom: 16px;
}
.ouiPageBody--paddingLarge {
padding: 24px;
}
.ouiPageBody--paddingLarge > .ouiPageHeader:not([class*="--padding"]) {
margin-bottom: 24px;
border-bottom: 1px solid #D6D9DD;
}
.ouiPageBody--paddingLarge > .ouiPageHeader:not([class*="--padding"]):not(.ouiPageHeader--tabsAtBottom) {
padding-bottom: 24px;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiPageContent {
width: 100%;
min-width: 0;
}
.ouiPageContent.ouiPageContent--borderRadiusNone {
border-left-width: 0;
border-right-width: 0;
border-bottom-width: 0;
}
.ouiPageContent.ouiPageContent--verticalCenter {
-webkit-align-self: center;
align-self: center;
margin-top: auto;
margin-bottom: auto;
-webkit-flex-grow: 0;
flex-grow: 0;
}
.ouiPageContent.ouiPageContent--horizontalCenter {
width: auto;
max-width: 100%;
margin-left: auto;
margin-right: auto;
-webkit-flex-grow: 0;
flex-grow: 0;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiPageContentBody--restrictWidth-default, .ouiPageContentBody--restrictWidth-custom {
margin-left: auto;
margin-right: auto;
width: 100%;
}
.ouiPageContentBody--restrictWidth-default {
max-width: 1000px;
}
.ouiPageContentBody--paddingSmall {
padding: 8px;
}
.ouiPageContentBody--paddingMedium {
padding: 16px;
}
.ouiPageContentBody--paddingLarge {
padding: 24px;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiPageContentHeader {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: center;
align-items: center;
}
.ouiPageContent[class*=paddingSmall] .ouiPageContentHeader {
margin-bottom: 8px;
}
.ouiPageContent[class*=paddingMedium] .ouiPageContentHeader {
margin-bottom: 16px;
}
.ouiPageContent[class*=paddingLarge] .ouiPageContentHeader {
margin-bottom: 24px;
}
@media only screen and (max-width: 574px) {
.ouiPageContentHeader--responsive {
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: flex-start;
align-items: flex-start;
}
}
@media only screen and (min-width: 575px) and (max-width: 767px) {
.ouiPageContentHeader--responsive {
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: flex-start;
align-items: flex-start;
}
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiPageContentHeaderSection + .ouiPageContentHeaderSection {
margin-left: 32px;
}
@media only screen and (max-width: 574px) {
.ouiPageContent[class*=paddingSmall] .ouiPageContentHeader--responsive .ouiPageContentHeaderSection + .ouiPageContentHeaderSection {
margin-left: 0;
margin-top: 4px;
}
.ouiPageContent[class*=paddingMedium] .ouiPageContentHeader--responsive .ouiPageContentHeaderSection + .ouiPageContentHeaderSection {
margin-left: 0;
margin-top: 8px;
}
.ouiPageContent[class*=paddingLarge] .ouiPageContentHeader--responsive .ouiPageContentHeaderSection + .ouiPageContentHeaderSection {
margin-left: 0;
margin-top: 12px;
}
}
@media only screen and (min-width: 575px) and (max-width: 767px) {
.ouiPageContent[class*=paddingSmall] .ouiPageContentHeader--responsive .ouiPageContentHeaderSection + .ouiPageContentHeaderSection {
margin-left: 0;
margin-top: 4px;
}
.ouiPageContent[class*=paddingMedium] .ouiPageContentHeader--responsive .ouiPageContentHeaderSection + .ouiPageContentHeaderSection {
margin-left: 0;
margin-top: 8px;
}
.ouiPageContent[class*=paddingLarge] .ouiPageContentHeader--responsive .ouiPageContentHeaderSection + .ouiPageContentHeaderSection {
margin-left: 0;
margin-top: 12px;
}
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/**
* Note: Margin is added in _page.scss when OuiPage has `paddingSize`
* 1. Prevent side bar width from changing when content width changes.
*/
.ouiPageSideBar {
min-width: 240px;
-webkit-flex: 0 1 0%;
flex: 0 1 0%; /* 1 */
}
.ouiPageSideBar--paddingSmall {
padding: 8px;
}
.ouiPageSideBar--paddingMedium {
padding: 16px;
}
.ouiPageSideBar--paddingLarge {
padding: 24px;
}
@media only screen and (max-width: 574px) {
.ouiPageSideBar {
width: 100%;
}
}
@media only screen and (min-width: 575px) and (max-width: 767px) {
.ouiPageSideBar {
width: 100%;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.ouiPageSideBar--sticky {
scrollbar-width: thin;
overflow-y: auto;
-webkit-flex-grow: 1;
flex-grow: 1;
position: -webkit-sticky;
position: sticky;
max-height: 100vh;
top: 0;
}
.ouiPageSideBar--sticky::-webkit-scrollbar {
width: 16px;
height: 16px;
}
.ouiPageSideBar--sticky::-webkit-scrollbar-thumb {
background-color: rgba(90, 104, 117, 0.5);
border: 6px solid transparent;
background-clip: content-box;
}
.ouiPageSideBar--sticky::-webkit-scrollbar-corner, .ouiPageSideBar--sticky::-webkit-scrollbar-track {
background-color: transparent;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.ouiPageSideBar--sticky {
scrollbar-width: thin;
overflow-y: auto;
-webkit-flex-grow: 1;
flex-grow: 1;
position: -webkit-sticky;
position: sticky;
max-height: 100vh;
top: 0;
}
.ouiPageSideBar--sticky::-webkit-scrollbar {
width: 16px;
height: 16px;
}
.ouiPageSideBar--sticky::-webkit-scrollbar-thumb {
background-color: rgba(90, 104, 117, 0.5);
border: 6px solid transparent;
background-clip: content-box;
}
.ouiPageSideBar--sticky::-webkit-scrollbar-corner, .ouiPageSideBar--sticky::-webkit-scrollbar-track {
background-color: transparent;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1679px) {
.ouiPageSideBar--sticky {
scrollbar-width: thin;
overflow-y: auto;
-webkit-flex-grow: 1;
flex-grow: 1;
position: -webkit-sticky;
position: sticky;
max-height: 100vh;
top: 0;
}
.ouiPageSideBar--sticky::-webkit-scrollbar {
width: 16px;
height: 16px;
}
.ouiPageSideBar--sticky::-webkit-scrollbar-thumb {
background-color: rgba(90, 104, 117, 0.5);
border: 6px solid transparent;
background-clip: content-box;
}
.ouiPageSideBar--sticky::-webkit-scrollbar-corner, .ouiPageSideBar--sticky::-webkit-scrollbar-track {
background-color: transparent;
}
}
@media only screen and (min-width: 1680px) and (max-width: 1919px) {
.ouiPageSideBar--sticky {
scrollbar-width: thin;
overflow-y: auto;
-webkit-flex-grow: 1;
flex-grow: 1;
position: -webkit-sticky;
position: sticky;
max-height: 100vh;
top: 0;
}
.ouiPageSideBar--sticky::-webkit-scrollbar {
width: 16px;
height: 16px;
}
.ouiPageSideBar--sticky::-webkit-scrollbar-thumb {
background-color: rgba(90, 104, 117, 0.5);
border: 6px solid transparent;
background-clip: content-box;
}
.ouiPageSideBar--sticky::-webkit-scrollbar-corner, .ouiPageSideBar--sticky::-webkit-scrollbar-track {
background-color: transparent;
}
}
@media only screen and (min-width: 1920px) {
.ouiPageSideBar--sticky {
scrollbar-width: thin;
overflow-y: auto;
-webkit-flex-grow: 1;
flex-grow: 1;
position: -webkit-sticky;
position: sticky;
max-height: 100vh;
top: 0;
}
.ouiPageSideBar--sticky::-webkit-scrollbar {
width: 16px;
height: 16px;
}
.ouiPageSideBar--sticky::-webkit-scrollbar-thumb {
background-color: rgba(90, 104, 117, 0.5);
border: 6px solid transparent;
background-clip: content-box;
}
.ouiPageSideBar--sticky::-webkit-scrollbar-corner, .ouiPageSideBar--sticky::-webkit-scrollbar-track {
background-color: transparent;
}
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/**
* Note: Bottom margin is added in _page.scss when OuiPage has `paddingSize`
* Or it's added in _page_body.scss when OuiPageBody has `paddingSize`
*/
.ouiPageHeader {
width: 100%;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: center;
align-items: center;
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
.ouiPageHeader--restrictWidth-default, .ouiPageHeader--restrictWidth-custom {
margin-left: auto;
margin-right: auto;
width: 100%;
}
.ouiPageHeader--restrictWidth-default {
max-width: 1000px;
}
.ouiPageHeader--bottomBorder {
border-bottom: 1px solid #D6D9DD;
}
.ouiPageHeader--bottomBorder:not(.ouiPageHeader--tabsAtBottom) {
padding-bottom: 24px;
}
.ouiPageHeader--paddingSmall {
padding: 8px;
}
.ouiPageHeader--paddingSmall.ouiPageHeader--tabsAtBottom {
padding-bottom: 0;
}
.ouiPageHeader--paddingSmall.ouiPageHeader--tabsAtBottom.ouiPageHeader--bottomBorder {
margin-bottom: 8px;
}
.ouiPageHeader--paddingMedium {
padding: 16px;
}
.ouiPageHeader--paddingMedium.ouiPageHeader--tabsAtBottom {
padding-bottom: 0;
}
.ouiPageHeader--paddingMedium.ouiPageHeader--tabsAtBottom.ouiPageHeader--bottomBorder {
margin-bottom: 16px;
}
.ouiPageHeader--paddingLarge {
padding: 24px;
}
.ouiPageHeader--paddingLarge.ouiPageHeader--tabsAtBottom {
padding-bottom: 0;
}
.ouiPageHeader--paddingLarge.ouiPageHeader--tabsAtBottom.ouiPageHeader--bottomBorder {
margin-bottom: 24px;
}
.ouiPageHeader--top {
-webkit-align-items: flex-start;
align-items: flex-start;
}
.ouiPageHeader--bottom {
-webkit-align-items: flex-end;
align-items: flex-end;
}
.ouiPageHeader--stretch {
-webkit-align-items: stretch;
align-items: stretch;
}
@media only screen and (max-width: 574px) {
.ouiPageHeader--responsive {
-webkit-flex-direction: column;
flex-direction: column;
}
.ouiPageHeader--responsiveReverse {
-webkit-flex-direction: column-reverse;
flex-direction: column-reverse;
}
}
@media only screen and (min-width: 575px) and (max-width: 767px) {
.ouiPageHeader--responsive {
-webkit-flex-direction: column;
flex-direction: column;
}
.ouiPageHeader--responsiveReverse {
-webkit-flex-direction: column-reverse;
flex-direction: column-reverse;
}
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiPageHeader .ouiPageHeaderContent {
width: 100%;
}
.ouiPageHeaderContent__titleIcon {
top: -4px;
position: relative;
margin-right: 16px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.ouiPageHeaderContent__rightSideItems {
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.ouiPageHeaderContent__rightSideItems {
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1679px) {
.ouiPageHeaderContent__rightSideItems {
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
}
}
@media only screen and (min-width: 1680px) and (max-width: 1919px) {
.ouiPageHeaderContent__rightSideItems {
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
}
}
@media only screen and (min-width: 1920px) {
.ouiPageHeaderContent__rightSideItems {
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
}
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiPageHeaderSection:not(:first-of-type) {
margin-left: 32px;
}
@media only screen and (max-width: 574px) {
.ouiPageHeader--responsive .ouiPageHeaderSection {
width: 100%;
}
.ouiPageHeader--responsive .ouiPageHeaderSection:not(:first-of-type) {
margin-left: 0;
margin-top: 16px;
}
.ouiPageHeader--responsiveReverse .ouiPageHeaderSection {
width: 100%;
}
.ouiPageHeader--responsiveReverse .ouiPageHeaderSection:not(:first-of-type) {
margin-left: 0;
}
.ouiPageHeader--responsiveReverse .ouiPageHeaderSection:not(:last-of-type) {
margin-top: 16px;
}
}
@media only screen and (min-width: 575px) and (max-width: 767px) {
.ouiPageHeader--responsive .ouiPageHeaderSection {
width: 100%;
}
.ouiPageHeader--responsive .ouiPageHeaderSection:not(:first-of-type) {
margin-left: 0;
margin-top: 16px;
}
.ouiPageHeader--responsiveReverse .ouiPageHeaderSection {
width: 100%;
}
.ouiPageHeader--responsiveReverse .ouiPageHeaderSection:not(:first-of-type) {
margin-left: 0;
}
.ouiPageHeader--responsiveReverse .ouiPageHeaderSection:not(:last-of-type) {
margin-top: 16px;
}
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiPopover {
display: inline-block;
position: relative;
vertical-align: middle;
max-width: 100%;
}
.ouiPopover__anchor {
display: inline-block;
}
.ouiPopover--displayBlock {
display: block;
}
.ouiPopover--displayBlock .ouiPopover__anchor {
display: block;
}
/**
* 1. Can expand further, but it looks weird if it's smaller than the originating button.
* 2. Animation happens on the panel. But don't animate when using the attached mode like for inputs
* 3. Make sure the panel stays within the window.
*/
.ouiPopover__panel {
box-shadow: 0 12px 24px 0 rgba(78, 92, 110, 0.1), 0 6px 12px 0 rgba(78, 92, 110, 0.1), 0 4px 4px 0 rgba(78, 92, 110, 0.1), 0 2px 2px 0 rgba(78, 92, 110, 0.1);
border-color: #d1d6db;
border-top-color: #d9dee2;
border-bottom-color: #aeb5be;
position: absolute;
min-width: 112px; /* 1 */
max-width: calc(100vw - 32px); /* 3 */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
pointer-events: none;
opacity: 0; /* 2 */
visibility: hidden; /* 2 */
transition: opacity cubic-bezier(0.34, 1.61, 0.7, 1) 90ms, visibility cubic-bezier(0.34, 1.61, 0.7, 1) 90ms;
}
.ouiPopover__panel:not(.ouiPopover__panel-isAttached) {
-webkit-transform: translateY(0) translateX(0) translateZ(0);
transform: translateY(0) translateX(0) translateZ(0); /* 2 */
transition: opacity cubic-bezier(0.34, 1.61, 0.7, 1) 90ms, visibility cubic-bezier(0.34, 1.61, 0.7, 1) 90ms, -webkit-transform cubic-bezier(0.34, 1.61, 0.7, 1) 190ms;
transition: opacity cubic-bezier(0.34, 1.61, 0.7, 1) 90ms, visibility cubic-bezier(0.34, 1.61, 0.7, 1) 90ms, transform cubic-bezier(0.34, 1.61, 0.7, 1) 190ms;
transition: opacity cubic-bezier(0.34, 1.61, 0.7, 1) 90ms, visibility cubic-bezier(0.34, 1.61, 0.7, 1) 90ms, transform cubic-bezier(0.34, 1.61, 0.7, 1) 190ms, -webkit-transform cubic-bezier(0.34, 1.61, 0.7, 1) 190ms;
}
.ouiPopover__panel.ouiPopover__panel-isOpen {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.ouiPopover__panel .ouiPopover__panelArrow {
position: absolute;
width: 0;
height: 0;
}
.ouiPopover__panel .ouiPopover__panelArrow:before {
position: absolute;
content: "";
height: 0;
width: 0;
}
.ouiPopover__panel .ouiPopover__panelArrow:after {
position: absolute;
content: "";
height: 0;
width: 0;
}
.ouiPopover__panel .ouiPopover__panelArrow.ouiPopover__panelArrow--top:before {
bottom: -10px;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-top: 12px solid #D6D9DD;
}
.ouiPopover__panel .ouiPopover__panelArrow.ouiPopover__panelArrow--top:after {
bottom: -9px;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-top: 12px solid #FCFEFF;
}
.ouiPopover__panel .ouiPopover__panelArrow.ouiPopover__panelArrow--right:before {
left: -12px;
top: 50%;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-right: 12px solid #D6D9DD;
}
.ouiPopover__panel .ouiPopover__panelArrow.ouiPopover__panelArrow--right:after {
left: -11px;
top: 50%;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-right: 12px solid #FCFEFF;
}
.ouiPopover__panel .ouiPopover__panelArrow.ouiPopover__panelArrow--bottom:before {
top: -12px;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 12px solid #D6D9DD;
}
.ouiPopover__panel .ouiPopover__panelArrow.ouiPopover__panelArrow--bottom:after {
top: -11px;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 12px solid #FCFEFF;
}
.ouiPopover__panel .ouiPopover__panelArrow.ouiPopover__panelArrow--left:before {
right: -11px;
top: 50%;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-left: 12px solid #D6D9DD;
}
.ouiPopover__panel .ouiPopover__panelArrow.ouiPopover__panelArrow--left:after {
right: -10px;
top: 50%;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-left: 12px solid #FCFEFF;
}
.ouiPopover__panel.ouiPopover__panel-noArrow .ouiPopover__panelArrow {
display: none;
}
.ouiPopover__panel.ouiPopover__panel-isAttached.ouiPopover__panel--bottom {
border-top-color: rgba(214, 217, 221, 0.8);
border-top-right-radius: 0;
border-top-left-radius: 0;
}
.ouiPopover__panel.ouiPopover__panel-isAttached.ouiPopover__panel--top {
box-shadow: 0 0 12px -1px rgba(173, 180, 186, 0.2), 0 0 4px -1px rgba(173, 180, 186, 0.2), 0 0 2px 0 rgba(173, 180, 186, 0.2);
border-bottom-color: rgba(214, 217, 221, 0.8);
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.ouiPopover__panel.ouiPopover__panel-isAttached.ouiPopover__panel--top,
.ouiPopover__panel.ouiPopover__panel-isOpen.ouiPopover__panel--top {
-webkit-transform: translateY(8px) translateZ(0);
transform: translateY(8px) translateZ(0);
}
.ouiPopover__panel.ouiPopover__panel-isAttached.ouiPopover__panel--bottom,
.ouiPopover__panel.ouiPopover__panel-isOpen.ouiPopover__panel--bottom {
-webkit-transform: translateY(-8px) translateZ(0);
transform: translateY(-8px) translateZ(0);
}
.ouiPopover__panel.ouiPopover__panel-isOpen.ouiPopover__panel--left {
-webkit-transform: translateX(8px) translateZ(0);
transform: translateX(8px) translateZ(0);
}
.ouiPopover__panel.ouiPopover__panel-isOpen.ouiPopover__panel--right {
-webkit-transform: translateX(-8px) translateZ(0);
transform: translateX(-8px) translateZ(0);
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiPopoverTitle {
color: #161e2b;
font-size: 14px;
font-size: 1rem;
line-height: 1.2143rem;
font-weight: 500;
padding: 12px;
text-transform: none;
border-bottom: 1px solid #D6D9DD;
}
.ouiPopoverTitle--paddingNone {
padding: 0;
}
.ouiPopoverTitle--paddingSmall {
padding: 8px;
}
.ouiPopoverTitle--paddingMedium {
padding: 16px;
}
.ouiPopoverTitle--paddingLarge {
padding: 24px;
}
.ouiPopover__panel.ouiPanel--paddingSmall .ouiPopoverTitle {
margin: -8px -8px 8px;
}
.ouiPopover__panel.ouiPanel--paddingSmall .ouiPopoverTitle:not([class*=ouiPopoverTitle--padding]) {
padding: 12px 8px;
}
.ouiPopover__panel.ouiPanel--paddingMedium .ouiPopoverTitle {
margin: -16px -16px 16px;
}
.ouiPopover__panel.ouiPanel--paddingMedium .ouiPopoverTitle:not([class*=ouiPopoverTitle--padding]) {
padding: 12px 16px;
}
.ouiPopover__panel.ouiPanel--paddingLarge .ouiPopoverTitle {
margin: -24px -24px 24px;
}
.ouiPopover__panel.ouiPanel--paddingLarge .ouiPopoverTitle:not([class*=ouiPopoverTitle--padding]) {
padding: 12px 24px;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiPopoverFooter {
font-size: 14px;
font-size: 1rem;
line-height: 1.5;
padding: 12px;
border-top: 1px solid #D6D9DD;
}
.ouiPopoverFooter--paddingNone {
padding: 0;
}
.ouiPopoverFooter--paddingSmall {
padding: 8px;
}
.ouiPopoverFooter--paddingMedium {
padding: 16px;
}
.ouiPopoverFooter--paddingLarge {
padding: 24px;
}
.ouiPopover__panel.ouiPanel--paddingSmall .ouiPopoverFooter {
margin: 8px -8px -8px;
}
.ouiPopover__panel.ouiPanel--paddingSmall .ouiPopoverFooter:not([class*=ouiPopoverFooter--padding]) {
padding: 12px 8px;
}
.ouiPopover__panel.ouiPanel--paddingMedium .ouiPopoverFooter {
margin: 16px -16px -16px;
}
.ouiPopover__panel.ouiPanel--paddingMedium .ouiPopoverFooter:not([class*=ouiPopoverFooter--padding]) {
padding: 12px 16px;
}
.ouiPopover__panel.ouiPanel--paddingLarge .ouiPopoverFooter {
margin: 24px -24px -24px;
}
.ouiPopover__panel.ouiPanel--paddingLarge .ouiPopoverFooter:not([class*=ouiPopoverFooter--padding]) {
padding: 12px 24px;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiInputPopover {
max-width: 400px;
}
.ouiInputPopover.ouiInputPopover--fullWidth {
max-width: 100%;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/**
* 1. Portal content is absolutely positioned (e.g. tooltips, popovers, flyouts).
*/
.ouiBody-hasPortalContent {
position: relative; /* 1 */
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiProgress {
position: relative;
overflow: hidden;
background-color: #D6D9DD;
}
.ouiProgress--xs {
height: 2px;
}
.ouiProgress--s {
height: 4px;
}
.ouiProgress--m {
height: 8px;
}
.ouiProgress--l {
height: 16px;
}
.ouiProgress--native {
display: block;
width: 100%;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
}
.ouiProgress--native::-webkit-progress-bar {
background-color: #D6D9DD;
}
.ouiProgress--native::-webkit-progress-value {
-webkit-transition: width 250ms linear;
transition: width 250ms linear;
}
.ouiProgress--native::-moz-progress-bar {
-moz-transition: width 250ms linear;
transition: width 250ms linear;
}
/**
* An indeterminate bar has an unreliable end time. Because of a Firefox animation issue,
* we apply this style to a <div> instead of a <progress> element.
* See https://css-tricks.com/html5-progress-element/ for more info.
*/
.ouiProgress--indeterminate:before {
position: absolute;
content: "";
width: 100%;
top: 0;
bottom: 0;
left: 0;
-webkit-transform: scaleX(0) translateX(0%);
transform: scaleX(0) translateX(0%);
-webkit-animation: ouiProgress 1s cubic-bezier(0.694, 0.0482, 0.335, 1) infinite;
animation: ouiProgress 1s cubic-bezier(0.694, 0.0482, 0.335, 1) infinite;
}
.ouiProgress--fixed {
position: fixed;
z-index: 1001;
}
.ouiProgress--absolute {
position: absolute;
}
.ouiProgress--fixed,
.ouiProgress--absolute {
top: 0;
left: 0;
right: 0;
background-color: transparent;
}
.ouiProgress--fixed.ouiProgress--native::-webkit-progress-bar,
.ouiProgress--absolute.ouiProgress--native::-webkit-progress-bar {
background-color: transparent;
}
.ouiProgress--fixed.ouiProgress--native::-moz-progress-bar,
.ouiProgress--absolute.ouiProgress--native::-moz-progress-bar {
background-color: transparent;
}
.ouiProgress--primary.ouiProgress--native::-webkit-progress-value {
background-color: #0268BC;
}
.ouiProgress--primary.ouiProgress--native::-moz-progress-bar {
background-color: #0268BC;
}
.ouiProgress--primary.ouiProgress--indeterminate:before {
background-color: #0268BC;
}
.ouiProgress__data--primary .ouiProgress__valueText {
color: #0268BC;
}
.ouiProgress--secondary.ouiProgress--native::-webkit-progress-value {
background-color: #0F7B68;
}
.ouiProgress--secondary.ouiProgress--native::-moz-progress-bar {
background-color: #0F7B68;
}
.ouiProgress--secondary.ouiProgress--indeterminate:before {
background-color: #0F7B68;
}
.ouiProgress__data--secondary .ouiProgress__valueText {
color: #0F7B68;
}
.ouiProgress--success.ouiProgress--native::-webkit-progress-value {
background-color: #0F7B68;
}
.ouiProgress--success.ouiProgress--native::-moz-progress-bar {
background-color: #0F7B68;
}
.ouiProgress--success.ouiProgress--indeterminate:before {
background-color: #0F7B68;
}
.ouiProgress__data--success .ouiProgress__valueText {
color: #0F7B68;
}
.ouiProgress--warning.ouiProgress--native::-webkit-progress-value {
background-color: #E0A130;
}
.ouiProgress--warning.ouiProgress--native::-moz-progress-bar {
background-color: #E0A130;
}
.ouiProgress--warning.ouiProgress--indeterminate:before {
background-color: #E0A130;
}
.ouiProgress__data--warning .ouiProgress__valueText {
color: #8e6625;
}
.ouiProgress--danger.ouiProgress--native::-webkit-progress-value {
background-color: #C43D35;
}
.ouiProgress--danger.ouiProgress--native::-moz-progress-bar {
background-color: #C43D35;
}
.ouiProgress--danger.ouiProgress--indeterminate:before {
background-color: #C43D35;
}
.ouiProgress__data--danger .ouiProgress__valueText {
color: #C43D35;
}
.ouiProgress--accent.ouiProgress--native::-webkit-progress-value {
background-color: #9C47BF;
}
.ouiProgress--accent.ouiProgress--native::-moz-progress-bar {
background-color: #9C47BF;
}
.ouiProgress--accent.ouiProgress--indeterminate:before {
background-color: #9C47BF;
}
.ouiProgress__data--accent .ouiProgress__valueText {
color: #9C47BF;
}
.ouiProgress--subdued.ouiProgress--native::-webkit-progress-value {
background-color: #686c75;
}
.ouiProgress--subdued.ouiProgress--native::-moz-progress-bar {
background-color: #686c75;
}
.ouiProgress--subdued.ouiProgress--indeterminate:before {
background-color: #686c75;
}
.ouiProgress__data--subdued .ouiProgress__valueText {
color: #686c75;
}
.ouiProgress--vis0.ouiProgress--native::-webkit-progress-value {
background-color: #54B399;
}
.ouiProgress--vis0.ouiProgress--native::-moz-progress-bar {
background-color: #54B399;
}
.ouiProgress--vis0.ouiProgress--indeterminate:before {
background-color: #54B399;
}
.ouiProgress__data--vis0 .ouiProgress__valueText {
color: #39786a;
}
.ouiProgress--vis1.ouiProgress--native::-webkit-progress-value {
background-color: #6092C0;
}
.ouiProgress--vis1.ouiProgress--native::-moz-progress-bar {
background-color: #6092C0;
}
.ouiProgress--vis1.ouiProgress--indeterminate:before {
background-color: #6092C0;
}
.ouiProgress__data--vis1 .ouiProgress__valueText {
color: #476c91;
}
.ouiProgress--vis2.ouiProgress--native::-webkit-progress-value {
background-color: #D36086;
}
.ouiProgress--vis2.ouiProgress--native::-moz-progress-bar {
background-color: #D36086;
}
.ouiProgress--vis2.ouiProgress--indeterminate:before {
background-color: #D36086;
}
.ouiProgress__data--vis2 .ouiProgress__valueText {
color: #ad4f70;
}
.ouiProgress--vis3.ouiProgress--native::-webkit-progress-value {
background-color: #9170B8;
}
.ouiProgress--vis3.ouiProgress--native::-moz-progress-bar {
background-color: #9170B8;
}
.ouiProgress--vis3.ouiProgress--indeterminate:before {
background-color: #9170B8;
}
.ouiProgress__data--vis3 .ouiProgress__valueText {
color: #7d61a0;
}
.ouiProgress--vis4.ouiProgress--native::-webkit-progress-value {
background-color: #CA8EAE;
}
.ouiProgress--vis4.ouiProgress--native::-moz-progress-bar {
background-color: #CA8EAE;
}
.ouiProgress--vis4.ouiProgress--indeterminate:before {
background-color: #CA8EAE;
}
.ouiProgress__data--vis4 .ouiProgress__valueText {
color: #875f78;
}
.ouiProgress--vis5.ouiProgress--native::-webkit-progress-value {
background-color: #D6BF57;
}
.ouiProgress--vis5.ouiProgress--native::-moz-progress-bar {
background-color: #D6BF57;
}
.ouiProgress--vis5.ouiProgress--indeterminate:before {
background-color: #D6BF57;
}
.ouiProgress__data--vis5 .ouiProgress__valueText {
color: #7a6d38;
}
.ouiProgress--vis6.ouiProgress--native::-webkit-progress-value {
background-color: #B9A888;
}
.ouiProgress--vis6.ouiProgress--native::-moz-progress-bar {
background-color: #B9A888;
}
.ouiProgress--vis6.ouiProgress--indeterminate:before {
background-color: #B9A888;
}
.ouiProgress__data--vis6 .ouiProgress__valueText {
color: #766b5c;
}
.ouiProgress--vis7.ouiProgress--native::-webkit-progress-value {
background-color: #DA8B45;
}
.ouiProgress--vis7.ouiProgress--native::-moz-progress-bar {
background-color: #DA8B45;
}
.ouiProgress--vis7.ouiProgress--indeterminate:before {
background-color: #DA8B45;
}
.ouiProgress__data--vis7 .ouiProgress__valueText {
color: #996235;
}
.ouiProgress--vis8.ouiProgress--native::-webkit-progress-value {
background-color: #AA6556;
}
.ouiProgress--vis8.ouiProgress--native::-moz-progress-bar {
background-color: #AA6556;
}
.ouiProgress--vis8.ouiProgress--indeterminate:before {
background-color: #AA6556;
}
.ouiProgress__data--vis8 .ouiProgress__valueText {
color: #9a5b4f;
}
.ouiProgress--vis9.ouiProgress--native::-webkit-progress-value {
background-color: #E7664C;
}
.ouiProgress--vis9.ouiProgress--native::-moz-progress-bar {
background-color: #E7664C;
}
.ouiProgress--vis9.ouiProgress--indeterminate:before {
background-color: #E7664C;
}
.ouiProgress__data--vis9 .ouiProgress__valueText {
color: #b4503e;
}
.ouiProgress--customColor.ouiProgress--native::-webkit-progress-value {
background-color: currentColor;
}
.ouiProgress--customColor.ouiProgress--native::-moz-progress-bar {
background-color: currentColor;
}
.ouiProgress--customColor.ouiProgress--indeterminate:before {
background-color: currentColor;
}
@-webkit-keyframes ouiProgress {
0% {
-webkit-transform: scaleX(1) translateX(-100%);
transform: scaleX(1) translateX(-100%);
}
100% {
-webkit-transform: scaleX(1) translateX(100%);
transform: scaleX(1) translateX(100%);
}
}
@keyframes ouiProgress {
0% {
-webkit-transform: scaleX(1) translateX(-100%);
transform: scaleX(1) translateX(-100%);
}
100% {
-webkit-transform: scaleX(1) translateX(100%);
transform: scaleX(1) translateX(100%);
}
}
.ouiProgress__data {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.ouiProgress__label,
.ouiProgress__valueText {
color: #2A3947;
font-weight: 400;
font-size: 12.000002px;
font-size: 0.857143rem;
line-height: 1.5;
max-width: 100%;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
word-wrap: normal !important;
}
.ouiProgress__label {
-webkit-flex-grow: 1;
flex-grow: 1;
}
.ouiProgress__label + .ouiProgress__valueText {
padding-left: 4px;
-webkit-flex-grow: 1;
flex-grow: 1;
text-align: right;
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
.ouiProgress__valueText {
font-feature-settings: "tnum" 1;
margin-left: auto;
}
.ouiProgress__data--l .ouiProgress__label,
.ouiProgress__data--l .ouiProgress__valueText {
font-size: 14px;
font-size: 1rem;
line-height: 1.5;
}
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiTreeView__wrapper .ouiTreeView {
margin: 0;
list-style-type: none;
}
.ouiTreeView .ouiTreeView {
padding-left: 24px;
}
.ouiTreeView__node {
max-height: 32px;
line-height: 32px;
}
.ouiTreeView__node--expanded {
max-height: 100vh;
}
.ouiTreeView__nodeInner {
max-width: 100%;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
word-wrap: normal !important;
padding-left: 8px;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
height: 32px;
border-radius: 4px;
width: 100%;
-moz-text-align-last: left;
text-align-last: left;
}
.ouiTreeView__nodeInner:focus {
-webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important;
animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important;
}
.ouiTreeView__nodeInner:hover, .ouiTreeView__nodeInner:active, .ouiTreeView__nodeInner:focus {
background-color: #e7eaed;
}
.ouiTreeView__nodeInner .ouiTreeView__iconPlaceholder {
width: 32px;
}
.ouiTreeView__nodeLabel {
max-width: 100%;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
word-wrap: normal !important;
}
.ouiTreeView__iconWrapper {
margin-top: -2px;
margin-right: 8px;
}
.ouiTreeView__iconWrapper .ouiToken {
margin-top: 2px;
}
.ouiTreeView--compressed .ouiTreeView__node {
max-height: 24px;
line-height: 24px;
}
.ouiTreeView--compressed .ouiTreeView__node .ouiTreeView__nodeInner {
height: 24px;
}
.ouiTreeView--compressed .ouiTreeView__node .ouiTreeView__iconWrapper {
margin: 0 6px 0 0;
}
.ouiTreeView--compressed .ouiTreeView__node .ouiTreeView__nodeLabel {
margin-top: -1px;
}
.ouiTreeView--compressed .ouiTreeView__node .ouiTreeView__iconPlaceholder {
width: 24px;
}
.ouiTreeView--compressed .ouiTreeView__node--expanded {
max-height: 100vh;
}
.ouiTreeView--withArrows .ouiTreeView__expansionArrow {
margin-right: 4px;
}
.ouiTreeView--withArrows.ouiTreeView .ouiTreeView__nodeInner--withArrows .ouiTreeView__iconWrapper {
margin-left: 0;
}
.ouiTreeView--withArrows.ouiTreeView .ouiTreeView__iconWrapper {
margin-left: 20px;
}
.ouiTreeView--withArrows.ouiTreeView--compressed .ouiTreeView__nodeInner--withArrows .ouiTreeView__iconWrapper {
margin-left: 0;
}
.ouiTreeView--withArrows.ouiTreeView--compressed .ouiTreeView__iconWrapper {
margin-left: 16px;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiResizableButton {
position: relative;
-webkit-flex-shrink: 0;
flex-shrink: 0;
z-index: 1000;
}
.ouiResizableButton:before, .ouiResizableButton:after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
background-color: #2A3947;
transition: width 150ms ease, height 150ms ease, background-color 150ms ease, -webkit-transform 150ms ease;
transition: width 150ms ease, height 150ms ease, transform 150ms ease, background-color 150ms ease;
transition: width 150ms ease, height 150ms ease, transform 150ms ease, background-color 150ms ease, -webkit-transform 150ms ease;
}
.ouiResizableButton.ouiResizableButton--horizontal {
cursor: col-resize;
width: 16px;
margin-left: -8px;
margin-right: -8px;
}
.ouiResizableButton.ouiResizableButton--horizontal:before, .ouiResizableButton.ouiResizableButton--horizontal:after {
width: 1px;
height: 12px;
}
.ouiResizableButton.ouiResizableButton--horizontal:before {
-webkit-transform: translate(-2px, -50%);
transform: translate(-2px, -50%);
}
.ouiResizableButton.ouiResizableButton--horizontal:after {
-webkit-transform: translate(1px, -50%);
transform: translate(1px, -50%);
}
.ouiResizableButton.ouiResizableButton--vertical {
cursor: row-resize;
height: 16px;
margin-top: -8px;
margin-bottom: -8px;
}
.ouiResizableButton.ouiResizableButton--vertical:before, .ouiResizableButton.ouiResizableButton--vertical:after {
width: 12px;
height: 1px;
}
.ouiResizableButton.ouiResizableButton--vertical:before {
-webkit-transform: translate(-50%, -2px);
transform: translate(-50%, -2px);
}
.ouiResizableButton.ouiResizableButton--vertical:after {
-webkit-transform: translate(-50%, 1px);
transform: translate(-50%, 1px);
}
.ouiResizableButton:hover:not(:disabled):before, .ouiResizableButton:hover:not(:disabled):after {
background-color: #ADB4BA;
transition-delay: 150ms;
}
.ouiResizableButton:focus:not(:disabled) {
background-color: rgba(2, 104, 188, 0.1);
}
.ouiResizableButton:focus:not(:disabled):before, .ouiResizableButton:focus:not(:disabled):after {
background-color: #0268BC;
transition: width 150ms ease, height 150ms ease, -webkit-transform 150ms ease;
transition: width 150ms ease, height 150ms ease, transform 150ms ease;
transition: width 150ms ease, height 150ms ease, transform 150ms ease, -webkit-transform 150ms ease;
transition-delay: 75ms;
}
.ouiResizableButton:hover:not(:disabled).ouiResizableButton--horizontal:before, .ouiResizableButton:hover:not(:disabled).ouiResizableButton--horizontal:after, .ouiResizableButton:focus:not(:disabled).ouiResizableButton--horizontal:before, .ouiResizableButton:focus:not(:disabled).ouiResizableButton--horizontal:after {
height: 100%;
}
.ouiResizableButton:hover:not(:disabled).ouiResizableButton--horizontal:before, .ouiResizableButton:focus:not(:disabled).ouiResizableButton--horizontal:before {
-webkit-transform: translate(-1px, -50%);
transform: translate(-1px, -50%);
}
.ouiResizableButton:hover:not(:disabled).ouiResizableButton--horizontal:after, .ouiResizableButton:focus:not(:disabled).ouiResizableButton--horizontal:after {
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
}
.ouiResizableButton:hover:not(:disabled).ouiResizableButton--vertical:before, .ouiResizableButton:hover:not(:disabled).ouiResizableButton--vertical:after, .ouiResizableButton:focus:not(:disabled).ouiResizableButton--vertical:before, .ouiResizableButton:focus:not(:disabled).ouiResizableButton--vertical:after {
width: 100%;
}
.ouiResizableButton:hover:not(:disabled).ouiResizableButton--vertical:before, .ouiResizableButton:focus:not(:disabled).ouiResizableButton--vertical:before {
-webkit-transform: translate(-50%, -1px);
transform: translate(-50%, -1px);
}
.ouiResizableButton:hover:not(:disabled).ouiResizableButton--vertical:after, .ouiResizableButton:focus:not(:disabled).ouiResizableButton--vertical:after {
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
.ouiResizableButton:disabled {
display: none !important;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/**
* 1. The default position of the button should always be `middle`, so
* those position styles aren't restricted to a class
* 2. When collpsed, the button itself is the full collapsed area and we use
* flex to align the icon within
*/
.ouiResizableToggleButton {
box-shadow: 0 2px 2px -1px rgba(173, 180, 186, 0.3);
position: absolute;
z-index: 1001;
-webkit-animation: none !important;
animation: none !important;
transition-property: background, box-shadow;
}
.ouiResizableToggleButton:focus {
box-shadow: 0 4px 8px 0 rgba(173, 180, 186, 0.15), 0 2px 2px -1px rgba(173, 180, 186, 0.3);
}
.ouiResizableToggleButton-isCollapsed {
box-shadow: none;
background: transparent;
border-radius: 0;
}
.ouiResizableToggleButton:not(:focus):not(:active):not(.ouiResizableToggleButton-isVisible):not(.ouiResizableToggleButton-isCollapsed) {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
border-width: 0;
height: 0;
width: 0;
}
.ouiResizableToggleButton--horizontal.ouiResizableToggleButton.ouiResizableToggleButton--after {
right: 0;
top: 50%; /* 1 */
-webkit-transform: translate(50%, -50%);
transform: translate(50%, -50%); /* 1 */
}
.ouiResizableToggleButton--horizontal.ouiResizableToggleButton.ouiResizableToggleButton--after.ouiResizableToggleButton--top {
top: 0;
-webkit-transform: translate(50%, 16px);
transform: translate(50%, 16px);
}
.ouiResizableToggleButton--horizontal.ouiResizableToggleButton.ouiResizableToggleButton--after.ouiResizableToggleButton--bottom {
top: auto;
bottom: 0;
-webkit-transform: translate(50%, -16px);
transform: translate(50%, -16px);
}
.ouiResizableToggleButton--horizontal.ouiResizableToggleButton.ouiResizableToggleButton--before {
left: 0;
top: 50%; /* 1 */
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); /* 1 */
}
.ouiResizableToggleButton--horizontal.ouiResizableToggleButton.ouiResizableToggleButton--before.ouiResizableToggleButton--top {
top: 0;
-webkit-transform: translate(-50%, 16px);
transform: translate(-50%, 16px);
}
.ouiResizableToggleButton--horizontal.ouiResizableToggleButton.ouiResizableToggleButton--before.ouiResizableToggleButton--bottom {
top: auto;
bottom: 0;
-webkit-transform: translate(-50%, -16px);
transform: translate(-50%, -16px);
}
.ouiResizableToggleButton--horizontal.ouiResizableToggleButton.ouiResizableToggleButton-isCollapsed {
top: 0 !important;
bottom: 0 !important;
-webkit-transform: none !important;
transform: none !important;
height: 100%;
}
.ouiResizableToggleButton--horizontal.ouiResizableToggleButton.ouiResizableToggleButton-isCollapsed.ouiResizableToggleButton--top {
padding-top: 16px;
-webkit-align-items: flex-start;
align-items: flex-start; /* 2 */
}
.ouiResizableToggleButton--horizontal.ouiResizableToggleButton.ouiResizableToggleButton-isCollapsed.ouiResizableToggleButton--bottom {
padding-bottom: 16px;
-webkit-align-items: flex-end;
align-items: flex-end; /* 2 */
}
.ouiResizableToggleButton--vertical.ouiResizableToggleButton.ouiResizableToggleButton--after {
top: 100%;
left: 50%; /* 1 */
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); /* 1 */
}
.ouiResizableToggleButton--vertical.ouiResizableToggleButton.ouiResizableToggleButton--after.ouiResizableToggleButton--left {
left: 0;
-webkit-transform: translate(16px, -50%);
transform: translate(16px, -50%);
}
.ouiResizableToggleButton--vertical.ouiResizableToggleButton.ouiResizableToggleButton--after.ouiResizableToggleButton--right {
left: auto;
right: 0;
-webkit-transform: translate(-16px, -50%);
transform: translate(-16px, -50%);
}
.ouiResizableToggleButton--vertical.ouiResizableToggleButton.ouiResizableToggleButton--before {
bottom: 100%;
left: 50%; /* 1 */
-webkit-transform: translate(-50%, 50%);
transform: translate(-50%, 50%); /* 1 */
}
.ouiResizableToggleButton--vertical.ouiResizableToggleButton.ouiResizableToggleButton--before.ouiResizableToggleButton--left {
left: 0;
-webkit-transform: translate(16px, 50%);
transform: translate(16px, 50%);
}
.ouiResizableToggleButton--vertical.ouiResizableToggleButton.ouiResizableToggleButton--before.ouiResizableToggleButton--right {
left: auto;
right: 0;
-webkit-transform: translate(-16px, 50%);
transform: translate(-16px, 50%);
}
.ouiResizableToggleButton--vertical.ouiResizableToggleButton.ouiResizableToggleButton-isCollapsed {
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
-webkit-transform: none !important;
transform: none !important;
width: 100%;
}
.ouiResizableToggleButton--vertical.ouiResizableToggleButton.ouiResizableToggleButton-isCollapsed.ouiResizableToggleButton--left {
padding-left: 16px;
-webkit-justify-content: flex-start;
justify-content: flex-start; /* 2 */
}
.ouiResizableToggleButton--vertical.ouiResizableToggleButton.ouiResizableToggleButton-isCollapsed.ouiResizableToggleButton--right {
padding-right: 16px;
-webkit-justify-content: flex-end;
justify-content: flex-end; /* 2 */
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiResizableContainer {
display: -webkit-flex;
display: flex;
width: 100%;
}
.ouiResizableContainer--vertical {
-webkit-flex-direction: column;
flex-direction: column;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiResizablePanel {
position: relative;
}
.ouiResizablePanel--paddingSmall {
padding: 8px;
}
.ouiResizablePanel--paddingMedium {
padding: 16px;
}
.ouiResizablePanel--paddingLarge {
padding: 24px;
}
.ouiResizablePanel__content {
height: 100%;
}
.ouiResizablePanel__content:not([class*=plain]) {
border-width: 0;
}
.ouiResizablePanel__content--scrollable {
scrollbar-width: thin;
overflow-y: auto;
}
.ouiResizablePanel__content--scrollable::-webkit-scrollbar {
width: 16px;
height: 16px;
}
.ouiResizablePanel__content--scrollable::-webkit-scrollbar-thumb {
background-color: rgba(90, 104, 117, 0.5);
border: 6px solid transparent;
background-clip: content-box;
}
.ouiResizablePanel__content--scrollable::-webkit-scrollbar-corner, .ouiResizablePanel__content--scrollable::-webkit-scrollbar-track {
background-color: transparent;
}
.ouiResizablePanel-isCollapsed {
overflow: hidden;
}
.ouiResizablePanel-isCollapsed .ouiResizablePanel__content * {
display: none;
}
.ouiResizableContainer--horizontal .ouiResizablePanel-isCollapsed {
min-width: 0 !important;
}
.ouiResizableContainer--horizontal .ouiResizablePanel--collapsible.ouiResizablePanel-isCollapsed {
min-width: 24px !important;
}
.ouiResizableContainer--vertical .ouiResizablePanel-isCollapsed {
min-height: 0 !important;
}
.ouiResizableContainer--vertical .ouiResizablePanel--collapsible.ouiResizablePanel-isCollapsed {
min-height: 24px !important;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiSchemaItem {
display: -webkit-flex;
display: flex;
gap: 8px;
-webkit-align-items: center;
align-items: center;
padding: 8px;
border-radius: 4px;
}
.ouiSchemaItem:hover {
background-color: #e7eaed;
}
.ouiSchemaItem:hover .ouiSchemaItem__actions .ouiButtonIcon {
opacity: 1;
visibility: visible;
}
.ouiSchemaItem__icon {
-webkit-align-self: flex-start;
align-self: flex-start;
margin: 8px 0;
}
.ouiSchemaItem__label {
-webkit-flex: 1;
flex: 1;
margin: 8px 0;
}
.ouiSchemaItem__actions {
gap: 4px;
display: -webkit-flex;
display: flex;
}
.ouiSchemaItem__actions .ouiButtonIcon {
opacity: 0;
transition: opacity 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
}
.ouiSchemaItem__actions .ouiButtonIcon:focus {
opacity: 1;
}
.ouiSchemaItem--withPanel {
box-shadow: 0 2px 2px -1px rgba(173, 180, 186, 0.3), 0 1px 5px -2px rgba(173, 180, 186, 0.3);
border: 1px solid #D6D9DD;
}
.ouiSchemaItem--withPanel:hover {
background-color: #f0f2f4;
}
.ouiSchemaItem--compressed {
padding: 4px;
gap: 4px;
font-size: 12.000002px;
}
.ouiSchemaItem--compressed .ouiSchemaItem__icon {
margin: 6px 0;
margin-left: 4px;
}
.ouiSchemaItem--compressed .ouiSchemaItem__label {
-webkit-flex: 1;
flex: 1;
margin: 6px 0;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiSideNav__mobileToggle {
height: auto;
border-bottom: 1px solid #D6D9DD;
width: 100%;
text-align: left;
border-radius: 0 !important;
font-size: 16.0006px;
padding: 0 16px;
}
.ouiSideNav__mobileToggle .ouiSideNav__mobileToggleText {
padding: 16px 0;
}
.ouiSideNav__mobileToggle .ouiSideNav__mobileToggleContent {
-webkit-justify-content: space-between;
justify-content: space-between;
}
.ouiSideNav__heading {
margin-bottom: 24px;
}
@media only screen and (max-width: 574px) {
.ouiSideNav__contentMobile-xs {
overflow: hidden;
visibility: hidden;
opacity: 0;
max-height: 0;
padding: 0 24px;
}
.ouiSideNav-isOpenMobile .ouiSideNav__contentMobile-xs {
visibility: visible;
opacity: 1;
padding: 24px;
max-height: 5000px; /* 1 */
}
}
@media only screen and (max-width: 574px) and (prefers-reduced-motion: no-preference) {
.ouiSideNav-isOpenMobile .ouiSideNav__contentMobile-xs {
transition: all 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
}
}
@media only screen and (min-width: 575px) and (max-width: 767px) {
.ouiSideNav__contentMobile-s {
overflow: hidden;
visibility: hidden;
opacity: 0;
max-height: 0;
padding: 0 24px;
}
.ouiSideNav-isOpenMobile .ouiSideNav__contentMobile-s {
visibility: visible;
opacity: 1;
padding: 24px;
max-height: 5000px; /* 1 */
}
}
@media only screen and (min-width: 575px) and (max-width: 767px) and (prefers-reduced-motion: no-preference) {
.ouiSideNav-isOpenMobile .ouiSideNav__contentMobile-s {
transition: all 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.ouiSideNav__contentMobile-m {
overflow: hidden;
visibility: hidden;
opacity: 0;
max-height: 0;
padding: 0 24px;
}
.ouiSideNav-isOpenMobile .ouiSideNav__contentMobile-m {
visibility: visible;
opacity: 1;
padding: 24px;
max-height: 5000px; /* 1 */
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) and (prefers-reduced-motion: no-preference) {
.ouiSideNav-isOpenMobile .ouiSideNav__contentMobile-m {
transition: all 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.ouiSideNav__contentMobile-l {
overflow: hidden;
visibility: hidden;
opacity: 0;
max-height: 0;
padding: 0 24px;
}
.ouiSideNav-isOpenMobile .ouiSideNav__contentMobile-l {
visibility: visible;
opacity: 1;
padding: 24px;
max-height: 5000px; /* 1 */
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) and (prefers-reduced-motion: no-preference) {
.ouiSideNav-isOpenMobile .ouiSideNav__contentMobile-l {
transition: all 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
}
}
@media only screen and (min-width: 1200px) and (max-width: 1679px) {
.ouiSideNav__contentMobile-xl {
overflow: hidden;
visibility: hidden;
opacity: 0;
max-height: 0;
padding: 0 24px;
}
.ouiSideNav-isOpenMobile .ouiSideNav__contentMobile-xl {
visibility: visible;
opacity: 1;
padding: 24px;
max-height: 5000px; /* 1 */
}
}
@media only screen and (min-width: 1200px) and (max-width: 1679px) and (prefers-reduced-motion: no-preference) {
.ouiSideNav-isOpenMobile .ouiSideNav__contentMobile-xl {
transition: all 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
}
}
@media only screen and (min-width: 1680px) and (max-width: 1919px) {
.ouiSideNav__contentMobile-xxl {
overflow: hidden;
visibility: hidden;
opacity: 0;
max-height: 0;
padding: 0 24px;
}
.ouiSideNav-isOpenMobile .ouiSideNav__contentMobile-xxl {
visibility: visible;
opacity: 1;
padding: 24px;
max-height: 5000px; /* 1 */
}
}
@media only screen and (min-width: 1680px) and (max-width: 1919px) and (prefers-reduced-motion: no-preference) {
.ouiSideNav-isOpenMobile .ouiSideNav__contentMobile-xxl {
transition: all 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
}
}
@media only screen and (min-width: 1920px) {
.ouiSideNav__contentMobile-xxxl {
overflow: hidden;
visibility: hidden;
opacity: 0;
max-height: 0;
padding: 0 24px;
}
.ouiSideNav-isOpenMobile .ouiSideNav__contentMobile-xxxl {
visibility: visible;
opacity: 1;
padding: 24px;
max-height: 5000px; /* 1 */
}
}
@media only screen and (min-width: 1920px) and (prefers-reduced-motion: no-preference) {
.ouiSideNav-isOpenMobile .ouiSideNav__contentMobile-xxxl {
transition: all 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
}
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/**
* 1. Text-align defaults to center, so we have to override that.
* 2. Color the text at the item level and then have the button inherit so overrides are easier
* 3. Enable ellipsis overflow to work (https://css-tricks.com/flexbox-truncated-text/)
* 4. Restrict the underline to the button __label so it doesn't affect other components that might live within
*/
.ouiSideNavItemButton {
font-size: 14px;
font-size: 1rem;
line-height: 1.5;
text-align: left; /* 1 */
display: block;
width: 100%;
padding: 2px 0;
color: inherit; /* 2 */
}
.ouiSideNavItemButton.ouiSideNavItemButton--isClickable:not(:disabled):hover {
cursor: pointer;
}
.ouiSideNavItemButton.ouiSideNavItemButton--isClickable:not(:disabled):hover .ouiSideNavItemButton__label, .ouiSideNavItemButton.ouiSideNavItemButton--isClickable:not(:disabled):focus .ouiSideNavItemButton__label {
text-decoration: underline; /* 4 */
}
.ouiSideNavItemButton.ouiSideNavItemButton-isSelected {
color: #0268BC;
font-weight: 500;
}
.ouiSideNavItemButton.ouiSideNavItemButton-isSelected .ouiSideNavItemButton__label {
text-decoration: underline; /* 4 */
}
.ouiSideNavItemButton:disabled {
cursor: not-allowed;
text-decoration: none;
color: #a3a7ae;
}
.ouiSideNavItemButton__content {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
}
.ouiSideNavItemButton__icon {
margin-right: 8px;
}
.ouiSideNavItemButton__labelContainer {
min-width: 0; /* 3 */
}
.ouiSideNavItemButton__label {
-webkit-flex-grow: 1;
flex-grow: 1;
}
.ouiSideNavItemButton__label--truncated {
max-width: 100%;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
word-wrap: normal !important;
}
.ouiSideNavItem--root {
/**
* 1. Create padding around focus area without indenting the item itself.
*/
}
.ouiSideNavItem--root.ouiSideNavItem--rootIcon > .ouiSideNavItem__items {
margin-left: 24px;
}
.ouiSideNavItem--root > .ouiSideNavItemButton {
margin-bottom: 8px;
padding: 0;
padding-left: 8px; /* 1 */
padding-right: 8px; /* 1 */
margin-left: -8px; /* 1 */
width: calc(100% + 16px); /* 1 */
}
.ouiSideNavItem--root > .ouiSideNavItemButton .ouiSideNavItemButton__label {
color: #161e2b;
font-size: 16.0006px;
font-size: 1.1429rem;
line-height: 1.35715rem;
font-weight: 500;
color: inherit;
}
.ouiSideNavItem--root > .ouiSideNavItem__items {
position: static;
margin-left: 0;
}
.ouiSideNavItem--root > .ouiSideNavItem__items:after {
display: none;
}
.ouiSideNavItem--root + .ouiSideNavItem--root {
margin-top: 32px;
}
.ouiSideNavItem--trunk {
color: #161e2b; /* 2 */
/**
* 1. Create padding around focus area without indenting the item itself.
*/
}
.ouiSideNavItem--trunk > .ouiSideNavItemButton {
padding-left: 8px; /* 1 */
padding-right: 8px; /* 1 */
margin-left: -8px; /* 1 */
width: calc(100% + 16px); /* 1 */
}
.ouiSideNavItem--trunk > .ouiSideNavItem__items {
margin-left: 8px;
width: 100%;
}
.ouiSideNavItem--branch {
/**
* 1. Draw the vertical line to group an expanded item's child items together.
*/
position: relative;
color: #636770; /* 2 */
/**
* 2. Absolutely position the horizontal tick connecting the item to the vertical line.
*/
}
.ouiSideNavItem--branch::after { /* 1 */
position: absolute;
content: "";
top: 0;
bottom: 0;
width: 1px;
background: #D6D9DD;
left: 0;
}
.ouiSideNavItem--branch:last-of-type::after {
height: 12px;
}
.ouiSideNavItem--branch > .ouiSideNavItemButton {
position: relative; /* 2 */
padding-left: 8px;
padding-right: 8px; /* 2 */
}
.ouiSideNavItem--branch > .ouiSideNavItemButton:after {
position: absolute; /* 2 */
content: "";
top: 12px;
left: 0;
width: 4px;
height: 1px;
background: #D6D9DD;
}
.ouiSideNavItem--branch > .ouiSideNavItem__items {
margin-left: 16px;
}
.ouiSideNavItem--emphasized {
background: rgba(2, 104, 188, 0.2);
color: #161e2b;
box-shadow: 100px 0 0 0 rgba(2, 104, 188, 0.2), -100px 0 0 0 rgba(2, 104, 188, 0.2);
}
.ouiSideNavItem--emphasized > .ouiSideNavItemButton {
font-weight: 500;
}
.ouiSideNavItem--emphasized .ouiSideNavItem--emphasized {
background: transparent;
box-shadow: none;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiSpacer {
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
.ouiSpacer--xs {
height: 4px;
}
.ouiSpacer--s {
height: 8px;
}
.ouiSpacer--m {
height: 16px;
}
.ouiSpacer--l {
height: 24px;
}
.ouiSpacer--xl {
height: 32px;
}
.ouiSpacer--xxl {
height: 40px;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiSearchBar__searchHolder {
min-width: 200px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.ouiSearchBar__filtersHolder {
max-width: calc(100% - 16px);
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.ouiSearchBar__filtersHolder {
max-width: calc(100% - 16px);
}
}
@media only screen and (min-width: 1200px) and (max-width: 1679px) {
.ouiSearchBar__filtersHolder {
max-width: calc(100% - 16px);
}
}
@media only screen and (min-width: 1680px) and (max-width: 1919px) {
.ouiSearchBar__filtersHolder {
max-width: calc(100% - 16px);
}
}
@media only screen and (min-width: 1920px) {
.ouiSearchBar__filtersHolder {
max-width: calc(100% - 16px);
}
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiSelectable {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
}
.ouiSelectable-fullHeight {
height: 100%;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiSelectableList:focus-within {
-webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important;
animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important;
}
.ouiSelectableList-fullHeight {
-webkit-flex-grow: 1;
flex-grow: 1;
}
.ouiSelectableList-bordered {
overflow: hidden;
border: 1px solid #D6D9DD;
border-radius: 4px;
}
.ouiSelectableList__list {
-webkit-mask-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.1) 0%, red 7.5px, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%);
mask-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.1) 0%, red 7.5px, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%);
contain: paint;
scrollbar-width: thin;
}
.ouiSelectableList__list::-webkit-scrollbar {
width: 16px;
height: 16px;
}
.ouiSelectableList__list::-webkit-scrollbar-thumb {
background-color: rgba(90, 104, 117, 0.5);
border: 6px solid transparent;
background-clip: content-box;
}
.ouiSelectableList__list::-webkit-scrollbar-corner, .ouiSelectableList__list::-webkit-scrollbar-track {
background-color: transparent;
}
.ouiSelectableList__groupLabel {
color: #161e2b;
font-size: 14px;
font-size: 1rem;
line-height: 1.2143rem;
font-weight: 500;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
border-bottom: 1px solid #dde0e3;
padding: 4px 12px;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiSelectableListItem {
font-size: 14px;
font-size: 1rem;
line-height: 1.5;
display: -webkit-inline-flex;
display: inline-flex;
width: 100%;
text-align: left;
color: #2A3947;
cursor: pointer;
}
.ouiSelectableListItem:not(:last-of-type) {
border-bottom: 1px solid #dde0e3;
}
.ouiSelectableListItem-isFocused:not([aria-disabled=true]), .ouiSelectableListItem:hover:not([aria-disabled=true]) {
color: #0268BC;
background-color: #e3eff8;
}
.ouiSelectableListItem-isFocused:not([aria-disabled=true]) .ouiSelectableListItem__text, .ouiSelectableListItem:hover:not([aria-disabled=true]) .ouiSelectableListItem__text {
text-decoration: underline;
}
.ouiSelectableListItem[aria-disabled=true] {
color: #ADB4BA;
cursor: not-allowed;
}
.ouiSelectableListItem__content {
padding: 4px 12px;
width: 100%;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
}
.ouiSelectableListItem__icon,
.ouiSelectableListItem__prepend {
margin-right: 12px;
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
.ouiSelectableListItem__append {
margin-left: 12px;
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
.ouiSelectableListItem__text {
max-width: 100%;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
word-wrap: normal !important;
-webkit-flex-grow: 1;
flex-grow: 1;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/**
* 1. Prevent really long input from overflowing the container.
*/
.ouiSelectableMessage {
padding: 8px;
text-align: center;
word-wrap: break-word; /* 1 */
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
}
.ouiSelectableMessage--bordered {
overflow: hidden;
border: 1px solid #D6D9DD;
border-radius: 4px;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiHeader--dark .ouiSelectableTemplateSitewide .ouiFormControlLayout {
background-color: transparent;
}
.ouiHeader--dark .ouiSelectableTemplateSitewide .ouiFormControlLayout--group,
.ouiHeader--dark .ouiSelectableTemplateSitewide .ouiFormControlLayout input {
box-shadow: inset 0 0 0 1px rgba(252, 254, 255, 0.3);
}
.ouiHeader--dark .ouiSelectableTemplateSitewide .ouiFormControlLayout:not(:focus-within) {
color: rgba(252, 254, 255, 0.7);
}
.ouiHeader--dark .ouiSelectableTemplateSitewide .ouiFormControlLayout:not(:focus-within) input {
color: inherit;
background-color: transparent;
}
.ouiHeader--dark .ouiSelectableTemplateSitewide .ouiFormControlLayout:not(:focus-within) input::-webkit-input-placeholder {
color: rgba(252, 254, 255, 0.4);
opacity: 1;
}
.ouiHeader--dark .ouiSelectableTemplateSitewide .ouiFormControlLayout:not(:focus-within) input::-moz-placeholder {
color: rgba(252, 254, 255, 0.4);
opacity: 1;
}
.ouiHeader--dark .ouiSelectableTemplateSitewide .ouiFormControlLayout:not(:focus-within) input::placeholder {
color: rgba(252, 254, 255, 0.4);
opacity: 1;
}
.ouiHeader--dark .ouiSelectableTemplateSitewide .ouiFormControlLayout:not(:focus-within) .ouiFormControlLayout__append {
background-color: transparent;
color: inherit;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiSelectableTemplateSitewide__listItem .ouiSelectableListItem__text {
text-decoration: none !important;
}
.ouiSelectableTemplateSitewide__listItem[class*=-isFocused]:not([aria-disabled=true]) .ouiSelectableTemplateSitewide__listItemTitle, .ouiSelectableTemplateSitewide__listItem:hover:not([aria-disabled=true]) .ouiSelectableTemplateSitewide__listItemTitle {
text-decoration: underline;
}
.ouiSelectableTemplateSitewide__optionMetasList {
display: block;
margin-top: 4px;
font-size: 12.000002px;
color: #686c75;
}
.ouiSelectableTemplateSitewide__optionMeta:not(:last-of-type)::after {
content: "•";
margin: 0 4px;
color: #686c75;
}
.ouiSelectableTemplateSitewide__optionMeta--application {
color: #476c91;
font-weight: 500;
}
.ouiSelectableTemplateSitewide__optionMeta--deployment {
color: #39786a;
font-weight: 500;
}
.ouiSelectableTemplateSitewide__optionMeta--article {
color: #7d61a0;
font-weight: 500;
}
.ouiSelectableTemplateSitewide__optionMeta--case {
color: #b4503e;
font-weight: 500;
}
.ouiSelectableTemplateSitewide__optionMeta--platform {
color: #7a6d38;
font-weight: 500;
}
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/
.ouiSplitButton__listbox {
scrollbar-width: thin;
max-height: 300px;
overflow: hidden;
overflow-y: auto;
}
.ouiSplitButton__listbox::-webkit-scrollbar {
width: 16px;
height: 16px;
}
.ouiSplitButton__listbox::-webkit-scrollbar-thumb {
background-color: rgba(90, 104, 117, 0.5);
border: 6px solid transparent;
background-clip: content-box;
}
.ouiSplitButton__listbox::-webkit-scrollbar-corner, .ouiSplitButton__listbox::-webkit-scrollbar-track {
background-color: transparent;
}
.ouiSplitButton__item {
font-size: 14px;
font-size: 1rem;
line-height: 1.5;
padding: 8px;
}
.ouiSplitButton__item:hover {
cursor: pointer;
text-decoration: underline;
}
.ouiSplitButton__item:focus {
cursor: pointer;
text-decoration: underline;
background-color: #e3eff8;
}
.ouiSplitButton__item:disabled {
cursor: not-allowed;
text-decoration: none;
color: #a3a7ae;
}
.ouiSplitButton__item--hasDividers:not(:last-of-type) {
border-bottom: 1px solid #D6D9DD;
}
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/
.ouiSplitButton button.ouiSplitButtonControl--primary {
border-top-width: 0px;
border-left-width: 0px;
border-bottom-width: 0px;
border-right-width: 1px;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
.ouiSplitButton button.ouiSplitButtonControl--primary:hover, .ouiSplitButton button.ouiSplitButtonControl--primary:active, .ouiSplitButton button.ouiSplitButtonControl--primary:focus {
-webkit-transform: none;
transform: none;
}
.ouiSplitButton button.ouiSplitButtonControl--dropdown {
border-width: 0px;
border-radius: 0px;
}
.ouiSplitButton button.ouiSplitButtonControl--dropdown:hover, .ouiSplitButton button.ouiSplitButtonControl--dropdown:active, .ouiSplitButton button.ouiSplitButtonControl--dropdown:focus {
-webkit-transform: none;
transform: none;
}
.ouiSplitButton .ouiSplitButtonControl {
border: 2px solid #D6D9DD;
border-radius: 4px;
}
.ouiSplitButton .ouiSplitButtonHairline--primary:not([class*=isDisabled]) {
border-right-color: rgba(2, 104, 188, 0.2);
}
.ouiSplitButton .ouiSplitButtonHairline--primary.ouiSplitButtonHairline--filled:not([class*=isDisabled]) {
border-right-color: #014c8a;
}
.ouiSplitButton .ouiSplitButtonHairline--accent:not([class*=isDisabled]) {
border-right-color: rgba(156, 71, 191, 0.2);
}
.ouiSplitButton .ouiSplitButtonHairline--accent.ouiSplitButtonHairline--filled:not([class*=isDisabled]) {
border-right-color: #7f369d;
}
.ouiSplitButton .ouiSplitButtonHairline--secondary:not([class*=isDisabled]) {
border-right-color: rgba(15, 123, 104, 0.2);
}
.ouiSplitButton .ouiSplitButtonHairline--secondary.ouiSplitButtonHairline--filled:not([class*=isDisabled]) {
border-right-color: #094e42;
}
.ouiSplitButton .ouiSplitButtonHairline--success:not([class*=isDisabled]) {
border-right-color: rgba(15, 123, 104, 0.2);
}
.ouiSplitButton .ouiSplitButtonHairline--success.ouiSplitButtonHairline--filled:not([class*=isDisabled]) {
border-right-color: #094e42;
}
.ouiSplitButton .ouiSplitButtonHairline--warning:not([class*=isDisabled]) {
border-right-color: rgba(224, 161, 48, 0.2);
}
.ouiSplitButton .ouiSplitButtonHairline--warning.ouiSplitButtonHairline--filled:not([class*=isDisabled]) {
border-right-color: #c0861d;
}
.ouiSplitButton .ouiSplitButtonHairline--danger:not([class*=isDisabled]) {
border-right-color: rgba(196, 61, 53, 0.2);
}
.ouiSplitButton .ouiSplitButtonHairline--danger.ouiSplitButtonHairline--filled:not([class*=isDisabled]) {
border-right-color: #9c312a;
}
.ouiSplitButton .ouiSplitButtonHairline--subdued:not([class*=isDisabled]) {
border-right-color: rgba(104, 108, 117, 0.2);
}
.ouiSplitButton .ouiSplitButtonHairline--subdued.ouiSplitButtonHairline--filled:not([class*=isDisabled]) {
border-right-color: #50535a;
}
.ouiSplitButton .ouiSplitButtonHairline--ghost:not([class*=isDisabled]) {
border-right-color: rgba(252, 254, 255, 0.2);
}
.ouiSplitButton .ouiSplitButtonHairline--ghost.ouiSplitButtonHairline--filled:not([class*=isDisabled]) {
border-right-color: #c9edff;
}
.ouiSplitButton .ouiSplitButtonHairline--text:not([class*=isDisabled]) {
border-right-color: rgba(90, 104, 117, 0.2);
}
.ouiSplitButton .ouiSplitButtonHairline--text.ouiSplitButtonHairline--filled:not([class*=isDisabled]) {
border-right-color: #444e58;
}
.ouiSplitButton .ouiSplitButtonColor--primary {
color: #0268BC;
border-color: #0268BC;
}
.ouiSplitButton .ouiSplitButtonColor--primary.ouiSplitButtonColor--fill {
background-color: #0268BC;
border-color: #0268BC;
color: #FCFEFF;
}
.ouiSplitButton .ouiSplitButtonColor--primary.ouiSplitButtonColor--fill:not([class*=isDisabled]):hover, .ouiSplitButton .ouiSplitButtonColor--primary.ouiSplitButtonColor--fill:not([class*=isDisabled]):focus, .ouiSplitButton .ouiSplitButtonColor--primary.ouiSplitButtonColor--fill:not([class*=isDisabled]):focus-within {
background-color: #025aa3;
border-color: #025aa3;
}
.ouiSplitButton .ouiSplitButtonColor--primary:not([class*=isDisabled]):hover, .ouiSplitButton .ouiSplitButtonColor--primary:not([class*=isDisabled]):focus, .ouiSplitButton .ouiSplitButtonColor--primary:not([class*=isDisabled]):focus-within {
box-shadow: 0 4px 8px 0 rgba(59, 98, 131, 0.15), 0 2px 2px -1px rgba(59, 98, 131, 0.3);
background-color: rgba(2, 104, 188, 0.1);
}
.ouiSplitButton .ouiSplitButtonColor--accent {
color: #9C47BF;
border-color: #9C47BF;
}
.ouiSplitButton .ouiSplitButtonColor--accent.ouiSplitButtonColor--fill {
background-color: #9C47BF;
border-color: #9C47BF;
color: #FCFEFF;
}
.ouiSplitButton .ouiSplitButtonColor--accent.ouiSplitButtonColor--fill:not([class*=isDisabled]):hover, .ouiSplitButton .ouiSplitButtonColor--accent.ouiSplitButtonColor--fill:not([class*=isDisabled]):focus, .ouiSplitButton .ouiSplitButtonColor--accent.ouiSplitButtonColor--fill:not([class*=isDisabled]):focus-within {
background-color: #8e3daf;
border-color: #8e3daf;
}
.ouiSplitButton .ouiSplitButtonColor--accent:not([class*=isDisabled]):hover, .ouiSplitButton .ouiSplitButtonColor--accent:not([class*=isDisabled]):focus, .ouiSplitButton .ouiSplitButtonColor--accent:not([class*=isDisabled]):focus-within {
box-shadow: 0 4px 8px 0 rgba(131, 131, 131, 0.15), 0 2px 2px -1px rgba(131, 131, 131, 0.3);
background-color: rgba(156, 71, 191, 0.1);
}
.ouiSplitButton .ouiSplitButtonColor--secondary {
color: #0F7B68;
border-color: #0F7B68;
}
.ouiSplitButton .ouiSplitButtonColor--secondary.ouiSplitButtonColor--fill {
background-color: #0F7B68;
border-color: #0F7B68;
color: #FCFEFF;
}
.ouiSplitButton .ouiSplitButtonColor--secondary.ouiSplitButtonColor--fill:not([class*=isDisabled]):hover, .ouiSplitButton .ouiSplitButtonColor--secondary.ouiSplitButtonColor--fill:not([class*=isDisabled]):focus, .ouiSplitButton .ouiSplitButtonColor--secondary.ouiSplitButtonColor--fill:not([class*=isDisabled]):focus-within {
background-color: #0c6455;
border-color: #0c6455;
}
.ouiSplitButton .ouiSplitButtonColor--secondary:not([class*=isDisabled]):hover, .ouiSplitButton .ouiSplitButtonColor--secondary:not([class*=isDisabled]):focus, .ouiSplitButton .ouiSplitButtonColor--secondary:not([class*=isDisabled]):focus-within {
box-shadow: 0 4px 8px 0 rgba(56, 82, 77, 0.15), 0 2px 2px -1px rgba(56, 82, 77, 0.3);
background-color: rgba(15, 123, 104, 0.1);
}
.ouiSplitButton .ouiSplitButtonColor--success {
color: #0F7B68;
border-color: #0F7B68;
}
.ouiSplitButton .ouiSplitButtonColor--success.ouiSplitButtonColor--fill {
background-color: #0F7B68;
border-color: #0F7B68;
color: #FCFEFF;
}
.ouiSplitButton .ouiSplitButtonColor--success.ouiSplitButtonColor--fill:not([class*=isDisabled]):hover, .ouiSplitButton .ouiSplitButtonColor--success.ouiSplitButtonColor--fill:not([class*=isDisabled]):focus, .ouiSplitButton .ouiSplitButtonColor--success.ouiSplitButtonColor--fill:not([class*=isDisabled]):focus-within {
background-color: #0c6455;
border-color: #0c6455;
}
.ouiSplitButton .ouiSplitButtonColor--success:not([class*=isDisabled]):hover, .ouiSplitButton .ouiSplitButtonColor--success:not([class*=isDisabled]):focus, .ouiSplitButton .ouiSplitButtonColor--success:not([class*=isDisabled]):focus-within {
box-shadow: 0 4px 8px 0 rgba(56, 82, 77, 0.15), 0 2px 2px -1px rgba(56, 82, 77, 0.3);
background-color: rgba(15, 123, 104, 0.1);
}
.ouiSplitButton .ouiSplitButtonColor--warning {
color: #8e6625;
border-color: #E0A130;
}
.ouiSplitButton .ouiSplitButtonColor--warning.ouiSplitButtonColor--fill {
background-color: #E0A130;
border-color: #E0A130;
color: #02020E;
}
.ouiSplitButton .ouiSplitButtonColor--warning.ouiSplitButtonColor--fill:not([class*=isDisabled]):hover, .ouiSplitButton .ouiSplitButtonColor--warning.ouiSplitButtonColor--fill:not([class*=isDisabled]):focus, .ouiSplitButton .ouiSplitButtonColor--warning.ouiSplitButtonColor--fill:not([class*=isDisabled]):focus-within {
background-color: #d69520;
border-color: #d69520;
}
.ouiSplitButton .ouiSplitButtonColor--warning:not([class*=isDisabled]):hover, .ouiSplitButton .ouiSplitButtonColor--warning:not([class*=isDisabled]):focus, .ouiSplitButton .ouiSplitButtonColor--warning:not([class*=isDisabled]):focus-within {
box-shadow: 0 4px 8px 0 rgba(153, 141, 119, 0.15), 0 2px 2px -1px rgba(153, 141, 119, 0.3);
background-color: rgba(224, 161, 48, 0.1);
}
.ouiSplitButton .ouiSplitButtonColor--danger {
color: #C43D35;
border-color: #C43D35;
}
.ouiSplitButton .ouiSplitButtonColor--danger.ouiSplitButtonColor--fill {
background-color: #C43D35;
border-color: #C43D35;
color: #FCFEFF;
}
.ouiSplitButton .ouiSplitButtonColor--danger.ouiSplitButtonColor--fill:not([class*=isDisabled]):hover, .ouiSplitButton .ouiSplitButtonColor--danger.ouiSplitButtonColor--fill:not([class*=isDisabled]):focus, .ouiSplitButton .ouiSplitButtonColor--danger.ouiSplitButtonColor--fill:not([class*=isDisabled]):focus-within {
background-color: #b03730;
border-color: #b03730;
}
.ouiSplitButton .ouiSplitButtonColor--danger:not([class*=isDisabled]):hover, .ouiSplitButton .ouiSplitButtonColor--danger:not([class*=isDisabled]):focus, .ouiSplitButton .ouiSplitButtonColor--danger:not([class*=isDisabled]):focus-within {
box-shadow: 0 4px 8px 0 rgba(125, 125, 125, 0.15), 0 2px 2px -1px rgba(125, 125, 125, 0.3);
background-color: rgba(196, 61, 53, 0.1);
}
.ouiSplitButton .ouiSplitButtonColor--subdued {
color: #686c75;
border-color: #686c75;
}
.ouiSplitButton .ouiSplitButtonColor--subdued.ouiSplitButtonColor--fill {
background-color: #686c75;
border-color: #686c75;
color: #FCFEFF;
}
.ouiSplitButton .ouiSplitButtonColor--subdued.ouiSplitButtonColor--fill:not([class*=isDisabled]):hover, .ouiSplitButton .ouiSplitButtonColor--subdued.ouiSplitButtonColor--fill:not([class*=isDisabled]):focus, .ouiSplitButton .ouiSplitButtonColor--subdued.ouiSplitButtonColor--fill:not([class*=isDisabled]):focus-within {
background-color: #5c6068;
border-color: #5c6068;
}
.ouiSplitButton .ouiSplitButtonColor--subdued:not([class*=isDisabled]):hover, .ouiSplitButton .ouiSplitButtonColor--subdued:not([class*=isDisabled]):focus, .ouiSplitButton .ouiSplitButtonColor--subdued:not([class*=isDisabled]):focus-within {
box-shadow: 0 4px 8px 0 rgba(111, 111, 111, 0.15), 0 2px 2px -1px rgba(111, 111, 111, 0.3);
background-color: rgba(104, 108, 117, 0.1);
}
.ouiSplitButton .ouiSplitButtonColor--ghost {
color: #FCFEFF;
border-color: #FCFEFF;
}
.ouiSplitButton .ouiSplitButtonColor--ghost.ouiSplitButtonColor--fill {
background-color: #FCFEFF;
border-color: #FCFEFF;
color: #02020E;
}
.ouiSplitButton .ouiSplitButtonColor--ghost.ouiSplitButtonColor--fill:not([class*=isDisabled]):hover, .ouiSplitButton .ouiSplitButtonColor--ghost.ouiSplitButtonColor--fill:not([class*=isDisabled]):focus, .ouiSplitButton .ouiSplitButtonColor--ghost.ouiSplitButtonColor--fill:not([class*=isDisabled]):focus-within {
background-color: #e3f6ff;
border-color: #e3f6ff;
}
.ouiSplitButton .ouiSplitButtonColor--ghost:not([class*=isDisabled]):hover, .ouiSplitButton .ouiSplitButtonColor--ghost:not([class*=isDisabled]):focus, .ouiSplitButton .ouiSplitButtonColor--ghost:not([class*=isDisabled]):focus-within {
box-shadow: 0 4px 8px 0 rgba(2, 2, 14, 0.15), 0 2px 2px -1px rgba(2, 2, 14, 0.3);
background-color: rgba(252, 254, 255, 0.1);
}
.ouiSplitButton .ouiSplitButtonColor--text {
color: #2A3947;
border-color: #5A6875;
}
.ouiSplitButton .ouiSplitButtonColor--text.ouiSplitButtonColor--fill {
background-color: #5A6875;
border-color: #5A6875;
color: #FCFEFF;
}
.ouiSplitButton .ouiSplitButtonColor--text.ouiSplitButtonColor--fill:not([class*=isDisabled]):hover, .ouiSplitButton .ouiSplitButtonColor--text.ouiSplitButtonColor--fill:not([class*=isDisabled]):focus, .ouiSplitButton .ouiSplitButtonColor--text.ouiSplitButtonColor--fill:not([class*=isDisabled]):focus-within {
background-color: #4f5b67;
border-color: #4f5b67;
}
.ouiSplitButton .ouiSplitButtonColor--text:not([class*=isDisabled]):hover, .ouiSplitButton .ouiSplitButtonColor--text:not([class*=isDisabled]):focus, .ouiSplitButton .ouiSplitButtonColor--text:not([class*=isDisabled]):focus-within {
box-shadow: 0 4px 8px 0 rgba(104, 104, 104, 0.15), 0 2px 2px -1px rgba(104, 104, 104, 0.3);
background-color: rgba(90, 104, 117, 0.1);
}
.ouiSplitButton .ouiSplitButtonColor.ouiSplitButtonColor-isDisabled.ouiSplitButtonColor--ghost {
color: #5A6875;
border-color: #5A6875;
}
.ouiSplitButton .ouiSplitButtonColor.ouiSplitButtonColor-isDisabled.ouiSplitButtonColor--ghost:hover, .ouiSplitButton .ouiSplitButtonColor.ouiSplitButtonColor-isDisabled.ouiSplitButtonColor--ghost:focus, .ouiSplitButton .ouiSplitButtonColor.ouiSplitButtonColor-isDisabled.ouiSplitButtonColor--ghost:focus-within {
box-shadow: 0 2px 2px -1px rgba(2, 2, 14, 0.3);
color: #5A6875;
border-color: #5A6875;
}
.ouiSplitButton .ouiSplitButtonColor.ouiSplitButtonColor-isDisabled.ouiSplitButtonColor--ghost.ouiSplitButtonColor--fill {
background-color: #5A6875;
color: #919ba4;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiStat .ouiStat__title {
color: #0A1219;
}
.ouiStat .ouiStat__title--subdued {
color: #686c75;
}
.ouiStat .ouiStat__title--primary {
color: #0268BC;
}
.ouiStat .ouiStat__title--secondary {
color: #0F7B68;
}
.ouiStat .ouiStat__title--success {
color: #0F7B68;
}
.ouiStat .ouiStat__title--danger {
color: #C43D35;
}
.ouiStat .ouiStat__title--accent {
color: #9C47BF;
}
.ouiStat .ouiStat__title-isLoading {
-webkit-animation: ouiStatPulse 1.5s infinite ease-in-out;
animation: ouiStatPulse 1.5s infinite ease-in-out;
}
.ouiStat.ouiStat--leftAligned {
text-align: left;
-webkit-align-items: flex-start;
align-items: flex-start;
}
.ouiStat.ouiStat--centerAligned {
text-align: center;
-webkit-align-items: center;
align-items: center;
}
.ouiStat.ouiStat--rightAligned {
text-align: right;
-webkit-align-items: flex-end;
align-items: flex-end;
}
@-webkit-keyframes ouiStatPulse {
0% {
opacity: 1;
}
50% {
opacity: 0.25;
}
100% {
opacity: 1;
}
}
@keyframes ouiStatPulse {
0% {
opacity: 1;
}
50% {
opacity: 0.25;
}
100% {
opacity: 1;
}
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiStepNumber {
width: 32px;
height: 32px;
display: inline-block;
line-height: 32px;
border-radius: 32px;
text-align: center;
color: #FCFEFF;
background-color: #0268BC;
font-size: 14px;
font-weight: 500;
}
.ouiStepNumber .ouiStepNumber__icon {
vertical-align: middle;
position: relative;
top: -2px;
}
.ouiStepNumber--small {
width: 24px;
height: 24px;
display: inline-block;
line-height: 24px;
border-radius: 24px;
text-align: center;
color: #FCFEFF;
background-color: #0268BC;
font-size: 12.000002px;
font-weight: 500;
}
.ouiStepNumber--small .ouiStepNumber__icon {
top: -1px;
}
.ouiStepNumber--complete .ouiStepNumber__icon {
stroke: currentColor;
stroke-width: 0.5px;
}
@media screen and (prefers-reduced-motion: no-preference) {
.ouiStepNumber--complete, .ouiStepNumber--warning, .ouiStepNumber--danger {
-webkit-animation: ouiGrow 150ms cubic-bezier(0.34, 1.61, 0.7, 1);
animation: ouiGrow 150ms cubic-bezier(0.34, 1.61, 0.7, 1);
}
}
.ouiStepNumber--loading {
background: transparent;
}
.ouiStepNumber.ouiStepNumber-isHollow {
background-color: transparent;
border: 2px solid #0268BC;
}
.ouiStepNumber.ouiStepNumber-isHollow .ouiStepNumber__number {
display: none;
}
.ouiStepNumber--warning {
color: #8e6625;
background-color: #f9f5ea;
}
.ouiStepNumber--danger {
color: #ba3a33;
background-color: #f6ebeb;
}
.ouiStepNumber--disabled {
color: #5A6875;
background-color: #eceff1;
}
.ouiStepNumber--incomplete {
color: #5A6875;
background-color: #eceff1;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/**
* 1. Ensure that the step number vertically aligns with the title text
*/
.ouiStep:not(:last-of-type) {
background-image: linear-gradient(to right, transparent 0, transparent 15px, #D6D9DD 15px, #D6D9DD 17px, transparent 17px, transparent 100%);
background-repeat: no-repeat;
background-position: left 40px;
}
.ouiStep--small:not(:last-of-type) {
background-position: left -4px top 32px;
}
.ouiStep--small .ouiStep__content {
padding-left: 28px;
margin-left: 12px;
}
.ouiStep__titleWrapper {
display: -webkit-flex;
display: flex;
}
.ouiStep__circle {
-webkit-flex-shrink: 0;
flex-shrink: 0;
margin-right: 16px;
vertical-align: top; /* 1 */
}
.ouiStep__title {
font-weight: 500;
}
.ouiStep__content {
padding: 16px 16px 32px;
margin: 8px 0;
padding-left: 32px;
margin-left: 16px;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiSubSteps {
padding: 16px;
background-color: #E3E5E8;
margin-bottom: 16px;
}
.ouiSubSteps > *:last-child {
margin-bottom: 0;
}
.ouiText .ouiSubSteps ol, .ouiSubSteps ol {
list-style-type: lower-alpha;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/**
* 1. Ensure the connecting lines stays behind the number
* 2. Make each step the same width
* 3. Make the content of each step align to the top, even if the steps are of varying heights,
* e.g. due to some of their titles wrapping to multiple lines
*/
.ouiStepsHorizontal {
display: -webkit-flex;
display: flex;
-webkit-align-items: stretch;
align-items: stretch;
background: rgba(227, 229, 232, 0.5);
}
.ouiStepHorizontal__item {
-webkit-flex-grow: 1;
flex-grow: 1; /* 2 */
-webkit-flex-basis: 0%;
flex-basis: 0%; /* 2 */
}
.ouiStepHorizontal__item:first-of-type > .ouiStepHorizontal::before, .ouiStepHorizontal__item:last-of-type > .ouiStepHorizontal::after {
display: none;
}
.ouiStepHorizontal {
padding: 24px 16px 16px;
display: -webkit-flex;
display: flex; /* 3 */
-webkit-flex-direction: column;
flex-direction: column; /* 3 */
-webkit-align-items: center;
align-items: center; /* 3 */
-webkit-justify-content: flex-start;
justify-content: flex-start; /* 3 */
cursor: pointer;
position: relative;
width: 100%;
}
.ouiStepHorizontal:focus:not(.ouiStepHorizontal-isDisabled) .ouiStepHorizontal__title, .ouiStepHorizontal:hover:not(.ouiStepHorizontal-isDisabled) .ouiStepHorizontal__title {
text-decoration: underline;
}
.ouiStepHorizontal:focus:not(.ouiStepHorizontal-isDisabled) {
outline: none;
}
.ouiStepHorizontal:focus:not(.ouiStepHorizontal-isDisabled) .ouiStepHorizontal__number {
-webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimateLarge !important;
animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimateLarge !important;
}
.ouiStepHorizontal.ouiStepHorizontal-isDisabled {
cursor: not-allowed;
}
.ouiStepHorizontal::before, .ouiStepHorizontal::after {
content: "";
position: absolute;
width: calc(50% - 16px);
height: 1px;
top: 40px;
background-color: #D6D9DD;
z-index: 0; /* 1 */
}
.ouiStepHorizontal::before {
left: 0;
}
.ouiStepHorizontal::after {
right: 0;
}
.ouiStepHorizontal__number {
position: relative; /* 1 */
z-index: 1; /* 1 */
transition: all 150ms ease-in-out;
}
.ouiStepHorizontal__title {
color: #161e2b;
font-size: 16.0006px;
font-size: 1.1429rem;
line-height: 1.35715rem;
font-weight: 500;
margin-top: 8px;
font-weight: 400;
text-align: center;
}
.ouiStepHorizontal-isDisabled .ouiStepHorizontal__title {
color: #5A6875;
}
.ouiStepHorizontal-isComplete::before, .ouiStepHorizontal-isComplete::after {
height: 2px;
background-color: #0268BC;
}
.ouiStepHorizontal-isSelected .ouiStepHorizontal__number:not([class*=danger]):not([class*=warning]):not([class*=loading]) {
box-shadow: 0 2px 2px -1px rgba(21, 102, 169, 0.3);
}
.ouiStepHorizontal-isSelected::before {
height: 2px;
background-color: #0268BC;
}
@media only screen and (max-width: 574px) {
.ouiStepHorizontal {
padding-top: 16px;
}
.ouiStepHorizontal::before, .ouiStepHorizontal::after {
top: 32px;
}
.ouiStepHorizontal__title {
display: none;
}
}
@media only screen and (min-width: 575px) and (max-width: 767px) {
.ouiStepHorizontal {
padding-top: 16px;
}
.ouiStepHorizontal::before, .ouiStepHorizontal::after {
top: 32px;
}
.ouiStepHorizontal__title {
display: none;
}
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiSuggestItem {
display: -webkit-flex;
display: flex;
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-align-items: center;
align-items: center;
font-size: 12.000002px;
white-space: nowrap;
}
.ouiSuggestItem.ouiSuggestItem-isClickable {
width: 100%;
text-align: left;
}
.ouiSuggestItem.ouiSuggestItem-isClickable:hover, .ouiSuggestItem.ouiSuggestItem-isClickable:focus {
cursor: pointer;
background-color: #E3E5E8;
}
.ouiSuggestItem.ouiSuggestItem-isClickable:hover .ouiSuggestItem__type, .ouiSuggestItem.ouiSuggestItem-isClickable:focus .ouiSuggestItem__type {
color: #2A3947;
}
.ouiSuggestItem .ouiSuggestItem__type--tint0 {
background-color: #def1ed;
color: #367265;
}
.ouiSuggestItem .ouiSuggestItem__type--tint1 {
background-color: #e0ebf4;
color: #476c91;
}
.ouiSuggestItem .ouiSuggestItem__type--tint2 {
background-color: #f5e2e9;
color: #9c4766;
}
.ouiSuggestItem .ouiSuggestItem__type--tint3 {
background-color: #e9e4f2;
color: #715892;
}
.ouiSuggestItem .ouiSuggestItem__type--tint4 {
background-color: #f3eaf0;
color: #875f78;
}
.ouiSuggestItem .ouiSuggestItem__type--tint5 {
background-color: #f5f3e1;
color: #7a6d38;
}
.ouiSuggestItem .ouiSuggestItem__type--tint6 {
background-color: #f0efea;
color: #766b5c;
}
.ouiSuggestItem .ouiSuggestItem__type--tint7 {
background-color: #f6e9de;
color: #915d33;
}
.ouiSuggestItem .ouiSuggestItem__type--tint8 {
background-color: #ede2e1;
color: #8b5349;
}
.ouiSuggestItem .ouiSuggestItem__type--tint9 {
background-color: #f8e3df;
color: #a3483a;
}
.ouiSuggestItem .ouiSuggestItem__type--tint10 {
background-color: #dfe3e6;
color: #566370;
}
.ouiSuggestItem .ouiSuggestItem__label,
.ouiSuggestItem .ouiSuggestItem__type,
.ouiSuggestItem .ouiSuggestItem__description {
-webkit-flex-grow: 0;
flex-grow: 0;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
}
.ouiSuggestItem .ouiSuggestItem__type {
position: relative;
-webkit-flex-shrink: 0;
flex-shrink: 0;
-webkit-flex-basis: auto;
flex-basis: auto;
width: 32px;
height: 32px;
text-align: center;
overflow: hidden;
padding: 4px;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
}
.ouiSuggestItem .ouiSuggestItem__label {
max-width: 100%;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
word-wrap: normal !important;
font-family: var(--oui-code-font-family);
letter-spacing: normal;
line-height: 1.5;
overflow: hidden;
text-overflow: ellipsis;
padding: 4px 8px;
color: #2A3947;
display: block;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width20 {
-webkit-flex-basis: 20%;
flex-basis: 20%;
min-width: 20%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width21 {
-webkit-flex-basis: 21%;
flex-basis: 21%;
min-width: 21%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width22 {
-webkit-flex-basis: 22%;
flex-basis: 22%;
min-width: 22%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width23 {
-webkit-flex-basis: 23%;
flex-basis: 23%;
min-width: 23%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width24 {
-webkit-flex-basis: 24%;
flex-basis: 24%;
min-width: 24%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width25 {
-webkit-flex-basis: 25%;
flex-basis: 25%;
min-width: 25%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width26 {
-webkit-flex-basis: 26%;
flex-basis: 26%;
min-width: 26%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width27 {
-webkit-flex-basis: 27%;
flex-basis: 27%;
min-width: 27%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width28 {
-webkit-flex-basis: 28%;
flex-basis: 28%;
min-width: 28%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width29 {
-webkit-flex-basis: 29%;
flex-basis: 29%;
min-width: 29%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width30 {
-webkit-flex-basis: 30%;
flex-basis: 30%;
min-width: 30%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width31 {
-webkit-flex-basis: 31%;
flex-basis: 31%;
min-width: 31%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width32 {
-webkit-flex-basis: 32%;
flex-basis: 32%;
min-width: 32%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width33 {
-webkit-flex-basis: 33%;
flex-basis: 33%;
min-width: 33%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width34 {
-webkit-flex-basis: 34%;
flex-basis: 34%;
min-width: 34%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width35 {
-webkit-flex-basis: 35%;
flex-basis: 35%;
min-width: 35%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width36 {
-webkit-flex-basis: 36%;
flex-basis: 36%;
min-width: 36%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width37 {
-webkit-flex-basis: 37%;
flex-basis: 37%;
min-width: 37%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width38 {
-webkit-flex-basis: 38%;
flex-basis: 38%;
min-width: 38%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width39 {
-webkit-flex-basis: 39%;
flex-basis: 39%;
min-width: 39%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width40 {
-webkit-flex-basis: 40%;
flex-basis: 40%;
min-width: 40%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width41 {
-webkit-flex-basis: 41%;
flex-basis: 41%;
min-width: 41%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width42 {
-webkit-flex-basis: 42%;
flex-basis: 42%;
min-width: 42%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width43 {
-webkit-flex-basis: 43%;
flex-basis: 43%;
min-width: 43%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width44 {
-webkit-flex-basis: 44%;
flex-basis: 44%;
min-width: 44%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width45 {
-webkit-flex-basis: 45%;
flex-basis: 45%;
min-width: 45%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width46 {
-webkit-flex-basis: 46%;
flex-basis: 46%;
min-width: 46%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width47 {
-webkit-flex-basis: 47%;
flex-basis: 47%;
min-width: 47%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width48 {
-webkit-flex-basis: 48%;
flex-basis: 48%;
min-width: 48%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width49 {
-webkit-flex-basis: 49%;
flex-basis: 49%;
min-width: 49%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width50 {
-webkit-flex-basis: 50%;
flex-basis: 50%;
min-width: 50%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width51 {
-webkit-flex-basis: 51%;
flex-basis: 51%;
min-width: 51%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width52 {
-webkit-flex-basis: 52%;
flex-basis: 52%;
min-width: 52%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width53 {
-webkit-flex-basis: 53%;
flex-basis: 53%;
min-width: 53%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width54 {
-webkit-flex-basis: 54%;
flex-basis: 54%;
min-width: 54%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width55 {
-webkit-flex-basis: 55%;
flex-basis: 55%;
min-width: 55%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width56 {
-webkit-flex-basis: 56%;
flex-basis: 56%;
min-width: 56%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width57 {
-webkit-flex-basis: 57%;
flex-basis: 57%;
min-width: 57%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width58 {
-webkit-flex-basis: 58%;
flex-basis: 58%;
min-width: 58%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width59 {
-webkit-flex-basis: 59%;
flex-basis: 59%;
min-width: 59%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width60 {
-webkit-flex-basis: 60%;
flex-basis: 60%;
min-width: 60%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width61 {
-webkit-flex-basis: 61%;
flex-basis: 61%;
min-width: 61%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width62 {
-webkit-flex-basis: 62%;
flex-basis: 62%;
min-width: 62%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width63 {
-webkit-flex-basis: 63%;
flex-basis: 63%;
min-width: 63%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width64 {
-webkit-flex-basis: 64%;
flex-basis: 64%;
min-width: 64%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width65 {
-webkit-flex-basis: 65%;
flex-basis: 65%;
min-width: 65%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width66 {
-webkit-flex-basis: 66%;
flex-basis: 66%;
min-width: 66%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width67 {
-webkit-flex-basis: 67%;
flex-basis: 67%;
min-width: 67%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width68 {
-webkit-flex-basis: 68%;
flex-basis: 68%;
min-width: 68%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width69 {
-webkit-flex-basis: 69%;
flex-basis: 69%;
min-width: 69%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width70 {
-webkit-flex-basis: 70%;
flex-basis: 70%;
min-width: 70%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width71 {
-webkit-flex-basis: 71%;
flex-basis: 71%;
min-width: 71%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width72 {
-webkit-flex-basis: 72%;
flex-basis: 72%;
min-width: 72%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width73 {
-webkit-flex-basis: 73%;
flex-basis: 73%;
min-width: 73%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width74 {
-webkit-flex-basis: 74%;
flex-basis: 74%;
min-width: 74%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width75 {
-webkit-flex-basis: 75%;
flex-basis: 75%;
min-width: 75%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width76 {
-webkit-flex-basis: 76%;
flex-basis: 76%;
min-width: 76%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width77 {
-webkit-flex-basis: 77%;
flex-basis: 77%;
min-width: 77%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width78 {
-webkit-flex-basis: 78%;
flex-basis: 78%;
min-width: 78%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width79 {
-webkit-flex-basis: 79%;
flex-basis: 79%;
min-width: 79%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width80 {
-webkit-flex-basis: 80%;
flex-basis: 80%;
min-width: 80%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width81 {
-webkit-flex-basis: 81%;
flex-basis: 81%;
min-width: 81%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width82 {
-webkit-flex-basis: 82%;
flex-basis: 82%;
min-width: 82%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width83 {
-webkit-flex-basis: 83%;
flex-basis: 83%;
min-width: 83%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width84 {
-webkit-flex-basis: 84%;
flex-basis: 84%;
min-width: 84%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width85 {
-webkit-flex-basis: 85%;
flex-basis: 85%;
min-width: 85%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width86 {
-webkit-flex-basis: 86%;
flex-basis: 86%;
min-width: 86%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width87 {
-webkit-flex-basis: 87%;
flex-basis: 87%;
min-width: 87%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width88 {
-webkit-flex-basis: 88%;
flex-basis: 88%;
min-width: 88%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width89 {
-webkit-flex-basis: 89%;
flex-basis: 89%;
min-width: 89%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__label--width90 {
-webkit-flex-basis: 90%;
flex-basis: 90%;
min-width: 90%;
}
.ouiSuggestItem .ouiSuggestItem__label.ouiSuggestItem__labelDisplay--expand {
-webkit-flex-basis: auto;
flex-basis: auto;
-webkit-flex-shrink: 1;
flex-shrink: 1;
}
.ouiSuggestItem .ouiSuggestItem__description {
color: #5A6875;
-webkit-flex-basis: auto;
flex-basis: auto;
padding-top: 2px;
display: block;
}
.ouiSuggestItem .ouiSuggestItem__description.ouiSuggestItem__description--wrap {
overflow-wrap: break-word !important;
word-wrap: break-word !important;
word-break: break-word;
white-space: normal;
line-height: 14px;
}
.ouiSuggestItem .ouiSuggestItem__description.ouiSuggestItem__description--truncate {
max-width: 100%;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
word-wrap: normal !important;
line-height: 1.5;
}
.ouiSuggestItem .ouiSuggestItem__description:empty {
-webkit-flex-grow: 0;
flex-grow: 0;
margin-left: 0;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiSuggestInput__statusIcon {
background-color: transparent !important;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/**
* NOTE: table-layout: fixed causes a bug in IE11 and Edge (see #9929). It also prevents us from
* specifying a column width, e.g. the checkbox column.
*/
.ouiTable {
font-size: 14px;
font-size: 1rem;
line-height: 1.5;
font-feature-settings: "calt" 1, "kern" 1, "liga" 1, "tnum" 1;
width: 100%;
table-layout: fixed;
border: none;
border-collapse: collapse;
background-color: #FCFEFF;
}
.ouiTable.ouiTable--auto {
table-layout: auto;
}
.ouiTableCaption {
position: relative;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.ouiTable--compressed .ouiTableCellContent {
font-size: 12.000002px;
font-size: 0.857143rem;
line-height: 1.5;
padding: 4px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.ouiTable--compressed .ouiTableCellContent {
font-size: 12.000002px;
font-size: 0.857143rem;
line-height: 1.5;
padding: 4px;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1679px) {
.ouiTable--compressed .ouiTableCellContent {
font-size: 12.000002px;
font-size: 0.857143rem;
line-height: 1.5;
padding: 4px;
}
}
@media only screen and (min-width: 1680px) and (max-width: 1919px) {
.ouiTable--compressed .ouiTableCellContent {
font-size: 12.000002px;
font-size: 0.857143rem;
line-height: 1.5;
padding: 4px;
}
}
@media only screen and (min-width: 1920px) {
.ouiTable--compressed .ouiTableCellContent {
font-size: 12.000002px;
font-size: 0.857143rem;
line-height: 1.5;
padding: 4px;
}
}
.ouiTableFooterCell,
.ouiTableHeaderCell {
vertical-align: middle;
border-top: 1px solid #D6D9DD;
border-bottom: 1px solid #D6D9DD;
font-weight: inherit;
text-align: inherit;
color: #161e2b;
font-size: 14px;
font-size: 1rem;
line-height: 1.2143rem;
font-weight: 500;
font-weight: 500;
border-top: none;
}
.ouiTableFooterCell .ouiTableHeaderButton,
.ouiTableHeaderCell .ouiTableHeaderButton {
text-align: left;
font-weight: 500;
}
.ouiTableFooterCell .ouiTableCellContent__text,
.ouiTableHeaderCell .ouiTableCellContent__text {
font-size: 12.000002px;
font-size: 0.857143rem;
line-height: 1.5;
font-weight: 500;
}
.ouiTableHeaderButton {
font-size: 14px;
font-size: 1rem;
line-height: 1.5;
color: inherit;
width: 100%;
}
.ouiTableHeaderButton:hover .ouiTableCellContent__text, .ouiTableHeaderButton:focus .ouiTableCellContent__text {
text-decoration: underline;
color: #0268BC;
}
.ouiTableHeaderButton:hover .ouiTableSortIcon, .ouiTableHeaderButton:focus .ouiTableSortIcon {
fill: #0268BC;
}
.ouiTableSortIcon {
margin-left: 4px;
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
.ouiTableHeaderButton-isSorted .ouiTableSortIcon {
fill: #161e2b;
}
.ouiTableHeaderCellCheckbox {
vertical-align: middle;
border-top: 1px solid #D6D9DD;
border-bottom: 1px solid #D6D9DD;
font-weight: inherit;
text-align: inherit;
width: 32px;
vertical-align: middle;
border-top: none;
}
.ouiTableRow:hover {
background-color: #f0f2f4;
}
.ouiTableRow.ouiTableRow-isClickable:hover {
background-color: rgba(2, 104, 188, 0.05);
cursor: pointer;
}
.ouiTableRow.ouiTableRow-isClickable:focus {
background-color: rgba(2, 104, 188, 0.1);
}
.ouiTableRow.ouiTableRow-isExpandedRow {
background-color: #f0f2f4;
}
.ouiTableRow.ouiTableRow-isExpandedRow.ouiTableRow-isSelectable .ouiTableCellContent {
padding-left: 40px;
}
.ouiTableRow.ouiTableRow-isSelected {
background-color: #ebf4fa;
}
.ouiTableRow.ouiTableRow-isSelected + .ouiTableRow.ouiTableRow-isExpandedRow .ouiTableRowCell {
background-color: #ebf4fa;
}
.ouiTableRow.ouiTableRow-isSelected:hover, .ouiTableRow.ouiTableRow-isSelected:hover + .ouiTableRow.ouiTableRow-isExpandedRow .ouiTableRowCell {
background-color: #e3eff8;
}
.ouiTableRowCell {
vertical-align: middle;
border-top: 1px solid #D6D9DD;
border-bottom: 1px solid #D6D9DD;
font-weight: inherit;
text-align: inherit;
color: #2A3947;
}
.ouiTableRowCell.ouiTableRowCell--isMobileHeader {
display: none;
}
.ouiTableRowCellCheckbox {
vertical-align: middle;
border-top: 1px solid #D6D9DD;
border-bottom: 1px solid #D6D9DD;
font-weight: inherit;
text-align: inherit;
width: 32px;
vertical-align: middle;
}
.ouiTableFooterCell {
background-color: #E3E5E8;
border-bottom: none;
}
/**
* 1. Vertically align all children.
* 2. The padding on this div allows the ellipsis to show if the content is truncated. If
* the padding was on the cell, the ellipsis would be cropped.
* 3. Support wrapping.
* 4. Prevent very long single words (e.g. the name of a field in a document) from overflowing
* the cell.
*/
.ouiTableCellContent {
overflow: hidden; /* 4 */
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center; /* 1 */
padding: 8px; /* 2 */
}
.ouiTableCellContent__text {
overflow-wrap: break-word !important;
word-wrap: break-word !important;
word-break: break-word;
/* 4 */
min-width: 0;
text-overflow: ellipsis;
}
.ouiTableCellContent--alignRight {
-webkit-justify-content: flex-end;
justify-content: flex-end;
text-align: right;
}
.ouiTableCellContent--alignCenter {
-webkit-justify-content: center;
justify-content: center;
text-align: center;
}
.ouiTableHeaderCell,
.ouiTableFooterCell,
.ouiTableCellContent--truncateText {
white-space: nowrap; /* 3 */
}
.ouiTableHeaderCell .ouiTableCellContent__text,
.ouiTableFooterCell .ouiTableCellContent__text,
.ouiTableCellContent--truncateText .ouiTableCellContent__text {
overflow: hidden;
}
.ouiTableCellContent--overflowingContent {
overflow: visible;
white-space: normal;
word-break: break-all;
word-break: break-word;
}
.ouiTableCellContent--showOnHover > *:not(:first-child) {
margin-left: 8px;
}
.ouiTableRow-hasActions .ouiTableCellContent--showOnHover .ouiTableCellContent__hoverItem {
-webkit-flex-shrink: 0;
flex-shrink: 0;
opacity: 0.7;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
transition: opacity 250ms cubic-bezier(0.694, 0.0482, 0.335, 1), -webkit-filter 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
transition: opacity 250ms cubic-bezier(0.694, 0.0482, 0.335, 1), filter 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
transition: opacity 250ms cubic-bezier(0.694, 0.0482, 0.335, 1), filter 250ms cubic-bezier(0.694, 0.0482, 0.335, 1), -webkit-filter 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
}
.ouiTableRow-hasActions .ouiTableCellContent--showOnHover .expandedItemActions__completelyHide,
.ouiTableRow-hasActions .ouiTableCellContent--showOnHover .expandedItemActions__completelyHide:disabled,
.ouiTableRow-hasActions .ouiTableCellContent--showOnHover .expandedItemActions__completelyHide:disabled:hover,
.ouiTableRow-hasActions .ouiTableCellContent--showOnHover .expandedItemActions__completelyHide:disabled:focus, .ouiTableRow:hover .ouiTableRow-hasActions .ouiTableCellContent--showOnHover .expandedItemActions__completelyHide:disabled {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
opacity: 0;
}
.ouiTableRow-hasActions:hover .ouiTableCellContent--showOnHover .ouiTableCellContent__hoverItem:not(:disabled), .ouiTableRow-hasActions:hover .ouiTableCellContent--showOnHover .ouiTableCellContent__hoverItem:not(:disabled):hover, .ouiTableRow-hasActions:hover .ouiTableCellContent--showOnHover .ouiTableCellContent__hoverItem:not(:disabled):focus {
opacity: 1;
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
.ouiTableRow-isExpandedRow .ouiTableCellContent {
overflow: hidden;
-webkit-animation: 250ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards growExpandedRow;
animation: 250ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards growExpandedRow;
}
@-webkit-keyframes growExpandedRow {
0% {
max-height: 0;
}
99% {
max-height: 100vh;
}
100% {
max-height: unset;
}
}
@keyframes growExpandedRow {
0% {
max-height: 0;
}
99% {
max-height: 100vh;
}
100% {
max-height: unset;
}
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiTableRowCell__mobileHeader {
display: none;
}
@media only screen and (max-width: 574px) {
.ouiTableRowCell--hideForMobile {
display: none !important;
}
}
@media only screen and (min-width: 575px) and (max-width: 767px) {
.ouiTableRowCell--hideForMobile {
display: none !important;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.ouiTableRowCell--hideForDesktop {
display: none !important;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.ouiTableRowCell--hideForDesktop {
display: none !important;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1679px) {
.ouiTableRowCell--hideForDesktop {
display: none !important;
}
}
@media only screen and (min-width: 1680px) and (max-width: 1919px) {
.ouiTableRowCell--hideForDesktop {
display: none !important;
}
}
@media only screen and (min-width: 1920px) {
.ouiTableRowCell--hideForDesktop {
display: none !important;
}
}
@media only screen and (max-width: 574px) {
.ouiTable.ouiTable--responsive thead {
display: none;
}
.ouiTable.ouiTable--responsive tfoot {
display: none;
}
.ouiTable.ouiTable--responsive .ouiTableRowCell__mobileHeader {
max-width: 100%;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
word-wrap: normal !important;
font-size: 9.625px;
font-size: 0.6875rem;
display: block;
color: #5A6875;
padding: 8px;
padding-bottom: 0;
margin-bottom: -8px;
min-height: 24px;
}
.ouiTableRowCell:only-child .ouiTable.ouiTable--responsive .ouiTableRowCell__mobileHeader {
min-height: 0;
}
.ouiTable.ouiTable--responsive .ouiTableRowCell--enlargeForMobile {
font-size: 14px;
font-size: 1rem;
line-height: 1.5;
}
.ouiTable.ouiTable--responsive .ouiTableRowCell--isMobileFullWidth {
width: 100%;
}
.ouiTable.ouiTable--responsive .ouiTableRowCell--isMobileFullWidth .ouiTableCellContent--alignCenter {
-webkit-justify-content: center;
justify-content: center;
text-align: center;
}
.ouiTable.ouiTable--responsive .ouiTableRow {
background-color: #FCFEFF;
border: 1px solid #D6D9DD;
border-radius: 4px;
-webkit-flex-grow: 1;
flex-grow: 1;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow--flexGrowZero {
-webkit-flex-grow: 0;
flex-grow: 0;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow--noBorder {
border: none;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow--hasShadow {
box-shadow: 0 2px 2px -1px rgba(173, 180, 186, 0.3), 0 1px 5px -2px rgba(173, 180, 186, 0.3);
border: 1px solid #D6D9DD;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow--isClickable {
transition: all 150ms cubic-bezier(0.694, 0.0482, 0.335, 1);
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow--isClickable:enabled {
display: block;
width: 100%;
text-align: left;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow--isClickable:hover, .ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow--isClickable:focus {
box-shadow: 0 4px 8px 0 rgba(173, 180, 186, 0.15), 0 2px 2px -1px rgba(173, 180, 186, 0.3);
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
cursor: pointer;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow--borderRadiusNone {
border-radius: 0;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow--borderRadiusMedium {
border-radius: 4px;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow--borderRadiusLarge {
border-radius: 8px;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow--borderRadiusXLarge {
border-radius: 16px;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow--transparent {
background-color: transparent;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow--plain {
background-color: #FCFEFF;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow--subdued {
background-color: #F0F2F4;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow--accent {
background-color: #f2ecf9;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow--primary {
background-color: #e3eff8;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow--success {
background-color: #e4f1f0;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow--warning {
background-color: #f9f5ea;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow--danger {
background-color: #f6ebeb;
}
.ouiTable.ouiTable--responsive .ouiTableRow {
box-shadow: 0 2px 2px -1px rgba(173, 180, 186, 0.3), 0 1px 5px -2px rgba(173, 180, 186, 0.3);
background-color: #FCFEFF;
border-radius: 4px;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
padding: 8px;
margin-bottom: 8px;
}
.ouiTable.ouiTable--responsive .ouiTableRow:hover {
background-color: #FCFEFF;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow-isExpandable, .ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow-hasActions {
background-image: linear-gradient(to right, rgba(173, 180, 186, 0.1) 0, rgba(173, 180, 186, 0.1) 1px, transparent 1px, transparent 100%);
background-size: 40px 100%;
background-position-x: right;
background-repeat: no-repeat;
padding-right: 40px;
position: relative;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow-isExpandable .ouiTableRowCell--isExpander, .ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow-hasActions .ouiTableRowCell--hasActions {
min-width: 0;
width: 24px;
position: absolute;
top: 16px;
right: 8px;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow-isExpandable .ouiTableRowCell--isExpander::before, .ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow-hasActions .ouiTableRowCell--hasActions::before {
display: none;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow-isExpandable .ouiTableRowCell--isExpander .ouiTableCellContent, .ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow-hasActions .ouiTableRowCell--hasActions .ouiTableCellContent {
-webkit-flex-direction: column;
flex-direction: column;
padding: 0;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow-isExpandable .ouiTableRowCell--isExpander .ouiTableCellContent .ouiLink, .ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow-hasActions .ouiTableRowCell--hasActions .ouiTableCellContent .ouiLink {
padding: 4px;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow-hasActions.ouiTableRow-isExpandable .ouiTableRowCell--isExpander {
top: auto;
bottom: 16px;
right: 0;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow-isSelectable {
padding-left: 36px;
position: relative;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow-isSelectable .ouiTableRowCellCheckbox {
position: absolute;
left: 4px;
top: 8px;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow-isSelected, .ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow-isSelected:hover,
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow-isSelected + .ouiTableRow.ouiTableRow-isExpandedRow, .ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow-isSelected:hover + .ouiTableRow.ouiTableRow-isExpandedRow .ouiTableRowCell {
background-color: #ebf4fa;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow-isExpandedRow {
background-image: linear-gradient(to right, rgba(173, 180, 186, 0.1) 0, rgba(173, 180, 186, 0.1) 1px, transparent 1px, transparent 100%);
background-size: 40px 100%;
background-position-x: right;
background-repeat: no-repeat;
box-shadow: 0 2px 2px -1px rgba(173, 180, 186, 0.3), 0 1px 5px -2px rgba(173, 180, 186, 0.3);
margin-top: -16px;
position: relative;
z-index: 2;
border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
padding-left: 8px;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow-isExpandedRow:hover {
background-color: #FCFEFF;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow-isExpandedRow .ouiTableRowCell {
width: calc(100% - 40px);
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow-isExpandedRow .ouiTableRowCell::before {
display: none;
}
.ouiTable.ouiTable--responsive .ouiTableRowCell {
display: block; /* IE requires block to grow and wrap. */
min-width: 50%;
border: none;
}
.ouiTable.ouiTable--responsive .ouiTableRowCellCheckbox {
border: none;
}
.ouiTable.ouiTable--responsive .ouiTableRow-hasActions .ouiTableCellContent--showOnHover > * {
margin-left: 0;
}
.ouiTable.ouiTable--responsive .ouiTableRow-hasActions .ouiTableCellContent--showOnHover .expandedItemActions__completelyHide {
display: none;
}
.ouiTable.ouiTable--responsive .ouiTableRow-hasActions .ouiTableCellContent--showOnHover .ouiTableCellContent__hoverItem {
opacity: 1;
-webkit-filter: none;
filter: none;
margin-left: 0;
margin-bottom: 8px;
}
.ouiTable.ouiTable--responsive .ouiTableCellContent--alignRight {
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
.ouiTable.ouiTable--responsive .ouiTableCellContent--alignCenter {
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
}
@media only screen and (min-width: 575px) and (max-width: 767px) {
.ouiTable.ouiTable--responsive thead {
display: none;
}
.ouiTable.ouiTable--responsive tfoot {
display: none;
}
.ouiTable.ouiTable--responsive .ouiTableRowCell__mobileHeader {
max-width: 100%;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
word-wrap: normal !important;
font-size: 9.625px;
font-size: 0.6875rem;
display: block;
color: #5A6875;
padding: 8px;
padding-bottom: 0;
margin-bottom: -8px;
min-height: 24px;
}
.ouiTableRowCell:only-child .ouiTable.ouiTable--responsive .ouiTableRowCell__mobileHeader {
min-height: 0;
}
.ouiTable.ouiTable--responsive .ouiTableRowCell--enlargeForMobile {
font-size: 14px;
font-size: 1rem;
line-height: 1.5;
}
.ouiTable.ouiTable--responsive .ouiTableRowCell--isMobileFullWidth {
width: 100%;
}
.ouiTable.ouiTable--responsive .ouiTableRowCell--isMobileFullWidth .ouiTableCellContent--alignCenter {
-webkit-justify-content: center;
justify-content: center;
text-align: center;
}
.ouiTable.ouiTable--responsive .ouiTableRow {
background-color: #FCFEFF;
border: 1px solid #D6D9DD;
border-radius: 4px;
-webkit-flex-grow: 1;
flex-grow: 1;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow--flexGrowZero {
-webkit-flex-grow: 0;
flex-grow: 0;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow--noBorder {
border: none;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow--hasShadow {
box-shadow: 0 2px 2px -1px rgba(173, 180, 186, 0.3), 0 1px 5px -2px rgba(173, 180, 186, 0.3);
border: 1px solid #D6D9DD;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow--isClickable {
transition: all 150ms cubic-bezier(0.694, 0.0482, 0.335, 1);
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow--isClickable:enabled {
display: block;
width: 100%;
text-align: left;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow--isClickable:hover, .ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow--isClickable:focus {
box-shadow: 0 4px 8px 0 rgba(173, 180, 186, 0.15), 0 2px 2px -1px rgba(173, 180, 186, 0.3);
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
cursor: pointer;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow--borderRadiusNone {
border-radius: 0;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow--borderRadiusMedium {
border-radius: 4px;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow--borderRadiusLarge {
border-radius: 8px;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow--borderRadiusXLarge {
border-radius: 16px;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow--transparent {
background-color: transparent;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow--plain {
background-color: #FCFEFF;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow--subdued {
background-color: #F0F2F4;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow--accent {
background-color: #f2ecf9;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow--primary {
background-color: #e3eff8;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow--success {
background-color: #e4f1f0;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow--warning {
background-color: #f9f5ea;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow--danger {
background-color: #f6ebeb;
}
.ouiTable.ouiTable--responsive .ouiTableRow {
box-shadow: 0 2px 2px -1px rgba(173, 180, 186, 0.3), 0 1px 5px -2px rgba(173, 180, 186, 0.3);
background-color: #FCFEFF;
border-radius: 4px;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
padding: 8px;
margin-bottom: 8px;
}
.ouiTable.ouiTable--responsive .ouiTableRow:hover {
background-color: #FCFEFF;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow-isExpandable, .ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow-hasActions {
background-image: linear-gradient(to right, rgba(173, 180, 186, 0.1) 0, rgba(173, 180, 186, 0.1) 1px, transparent 1px, transparent 100%);
background-size: 40px 100%;
background-position-x: right;
background-repeat: no-repeat;
padding-right: 40px;
position: relative;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow-isExpandable .ouiTableRowCell--isExpander, .ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow-hasActions .ouiTableRowCell--hasActions {
min-width: 0;
width: 24px;
position: absolute;
top: 16px;
right: 8px;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow-isExpandable .ouiTableRowCell--isExpander::before, .ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow-hasActions .ouiTableRowCell--hasActions::before {
display: none;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow-isExpandable .ouiTableRowCell--isExpander .ouiTableCellContent, .ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow-hasActions .ouiTableRowCell--hasActions .ouiTableCellContent {
-webkit-flex-direction: column;
flex-direction: column;
padding: 0;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow-isExpandable .ouiTableRowCell--isExpander .ouiTableCellContent .ouiLink, .ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow-hasActions .ouiTableRowCell--hasActions .ouiTableCellContent .ouiLink {
padding: 4px;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow-hasActions.ouiTableRow-isExpandable .ouiTableRowCell--isExpander {
top: auto;
bottom: 16px;
right: 0;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow-isSelectable {
padding-left: 36px;
position: relative;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow-isSelectable .ouiTableRowCellCheckbox {
position: absolute;
left: 4px;
top: 8px;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow-isSelected, .ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow-isSelected:hover,
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow-isSelected + .ouiTableRow.ouiTableRow-isExpandedRow, .ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow-isSelected:hover + .ouiTableRow.ouiTableRow-isExpandedRow .ouiTableRowCell {
background-color: #ebf4fa;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow-isExpandedRow {
background-image: linear-gradient(to right, rgba(173, 180, 186, 0.1) 0, rgba(173, 180, 186, 0.1) 1px, transparent 1px, transparent 100%);
background-size: 40px 100%;
background-position-x: right;
background-repeat: no-repeat;
box-shadow: 0 2px 2px -1px rgba(173, 180, 186, 0.3), 0 1px 5px -2px rgba(173, 180, 186, 0.3);
margin-top: -16px;
position: relative;
z-index: 2;
border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
padding-left: 8px;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow-isExpandedRow:hover {
background-color: #FCFEFF;
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow-isExpandedRow .ouiTableRowCell {
width: calc(100% - 40px);
}
.ouiTable.ouiTable--responsive .ouiTableRow.ouiTableRow-isExpandedRow .ouiTableRowCell::before {
display: none;
}
.ouiTable.ouiTable--responsive .ouiTableRowCell {
display: block; /* IE requires block to grow and wrap. */
min-width: 50%;
border: none;
}
.ouiTable.ouiTable--responsive .ouiTableRowCellCheckbox {
border: none;
}
.ouiTable.ouiTable--responsive .ouiTableRow-hasActions .ouiTableCellContent--showOnHover > * {
margin-left: 0;
}
.ouiTable.ouiTable--responsive .ouiTableRow-hasActions .ouiTableCellContent--showOnHover .expandedItemActions__completelyHide {
display: none;
}
.ouiTable.ouiTable--responsive .ouiTableRow-hasActions .ouiTableCellContent--showOnHover .ouiTableCellContent__hoverItem {
opacity: 1;
-webkit-filter: none;
filter: none;
margin-left: 0;
margin-bottom: 8px;
}
.ouiTable.ouiTable--responsive .ouiTableCellContent--alignRight {
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
.ouiTable.ouiTable--responsive .ouiTableCellContent--alignCenter {
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiTableHeaderMobile,
.ouiTableHeaderCell--hideForDesktop {
display: none;
}
@media only screen and (max-width: 574px) {
.ouiTableHeaderMobile {
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-end;
justify-content: flex-end;
padding: 8px 0;
}
.ouiTableSortMobile {
display: block;
}
}
@media only screen and (min-width: 575px) and (max-width: 767px) {
.ouiTableHeaderMobile {
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-end;
justify-content: flex-end;
padding: 8px 0;
}
.ouiTableSortMobile {
display: block;
}
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiTabs {
scrollbar-width: thin;
display: -webkit-flex;
display: flex;
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
position: relative;
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
.ouiTabs::-webkit-scrollbar {
width: 16px;
height: 16px;
}
.ouiTabs::-webkit-scrollbar-thumb {
background-color: rgba(90, 104, 117, 0.5);
border: 6px solid transparent;
background-clip: content-box;
}
.ouiTabs::-webkit-scrollbar-corner, .ouiTabs::-webkit-scrollbar-track {
background-color: transparent;
}
.ouiTabs::-webkit-scrollbar {
height: 3px;
}
.ouiTabs:not(.ouiTabs--condensed)::before {
background-color: #D6D9DD;
bottom: 0;
content: "";
height: 1px;
left: 0;
position: absolute;
right: 0;
}
.ouiTab {
font-size: 14px;
font-size: 1rem;
color: #2A3947;
background-color: transparent;
cursor: pointer;
line-height: 1.5;
padding: 12px 16px;
position: relative;
transition: color 250ms cubic-bezier(0.694, 0.0482, 0.335, 1), background-color 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
}
.ouiTab:hover:not(.ouiTab-isSelected) {
text-decoration: underline;
}
.ouiTab:focus {
background-color: #e3eff8;
text-decoration: underline;
outline-offset: -3px;
}
.ouiTab:focus::before {
background-color: #D6D9DD;
bottom: 0;
content: "";
height: 1px;
left: 0;
position: absolute;
right: 0;
}
.ouiTab.ouiTab-isSelected {
color: #0268BC;
cursor: default;
}
.ouiTab.ouiTab-isSelected::after {
-webkit-animation: ouiTab 150ms cubic-bezier(0.694, 0.0482, 0.335, 1);
animation: ouiTab 150ms cubic-bezier(0.694, 0.0482, 0.335, 1);
background-color: #0268BC;
bottom: 0;
content: " ";
height: 2px;
left: 0;
position: absolute;
width: 100%;
}
.ouiTab.ouiTab-isDisabled {
color: #a3a7ae;
}
.ouiTab.ouiTab-isDisabled:hover {
color: #a3a7ae;
cursor: not-allowed;
text-decoration: none;
}
.ouiTab.ouiTab-isDisabled::after {
background-color: #a3a7ae;
}
.ouiTabs--small .ouiTab {
font-size: 14px;
font-size: 1rem;
padding: 8px;
}
.ouiTabs--condensed .ouiTab {
font-weight: 500;
padding: 8px 4px;
}
.ouiTabs--condensed .ouiTab:focus {
background-color: #e3eff8;
}
.ouiTabs--condensed .ouiTab:focus::before {
display: none;
}
.ouiTabs--condensed .ouiTab-isSelected {
text-decoration: none;
}
.ouiTabs--condensed .ouiTab + .ouiTab {
margin-left: 16px;
}
.ouiTabs--small.ouiTabs--condensed .ouiTab {
padding-top: 6px;
padding-bottom: 6px;
}
.ouiTabs--large.ouiTabs--condensed .ouiTab + .ouiTab {
margin-left: 24px;
}
.ouiTabs--expand .ouiTab {
-webkit-flex-basis: 0%;
flex-basis: 0%;
-webkit-flex-grow: 1;
flex-grow: 1;
}
.ouiTab__content {
display: block;
overflow: hidden;
text-overflow: ellipsis;
-webkit-transform: translateY(0);
transform: translateY(0);
transition: -webkit-transform 150ms cubic-bezier(0.34, 1.61, 0.7, 1);
transition: transform 150ms cubic-bezier(0.34, 1.61, 0.7, 1);
transition: transform 150ms cubic-bezier(0.34, 1.61, 0.7, 1), -webkit-transform 150ms cubic-bezier(0.34, 1.61, 0.7, 1);
white-space: nowrap;
}
@-webkit-keyframes ouiTab {
0% {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
100% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
}
@keyframes ouiTab {
0% {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
100% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiTextDiff del {
color: #C43D35;
}
.ouiTextDiff ins {
color: #0F7B68;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiTitle + .ouiTitle {
margin-top: 24px;
}
.ouiTitle--uppercase {
text-transform: uppercase;
}
.ouiTitle--xxxsmall {
color: #161e2b;
font-size: 14px;
font-size: 1rem;
line-height: 1.2143rem;
font-weight: 500;
}
.ouiTitle--xxsmall {
color: #161e2b;
font-size: 14px;
font-size: 1rem;
line-height: 1.2143rem;
font-weight: 500;
}
.ouiTitle--xsmall {
color: #161e2b;
font-size: 16.0006px;
font-size: 1.1429rem;
line-height: 1.35715rem;
font-weight: 500;
}
.ouiTitle--small {
color: #161e2b;
font-size: 17.999996px;
font-size: 1.285714rem;
line-height: 1.57145rem;
font-weight: 500;
}
.ouiTitle--medium {
color: #161e2b;
font-size: 24.000004px;
font-size: 1.714286rem;
line-height: 2.07145rem;
font-weight: 400;
}
.ouiTitle--large {
color: #161e2b;
font-size: 28px;
font-size: 2rem;
line-height: 2.4285rem;
font-weight: 400;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/**
* 1. Allow list to expand as items are added, but cap it at the screen height.
* 2. Allow some padding for shadow
*/
.ouiGlobalToastList {
scrollbar-width: thin;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: stretch;
align-items: stretch;
position: fixed;
z-index: 9000;
bottom: 0;
width: 400px; /* 2 */
max-height: 100vh; /* 1 */
overflow-y: auto;
scrollbar-width: none;
}
.ouiGlobalToastList::-webkit-scrollbar {
width: 16px;
height: 16px;
}
.ouiGlobalToastList::-webkit-scrollbar-thumb {
background-color: rgba(90, 104, 117, 0.5);
border: 6px solid transparent;
background-clip: content-box;
}
.ouiGlobalToastList::-webkit-scrollbar-corner, .ouiGlobalToastList::-webkit-scrollbar-track {
background-color: transparent;
}
.ouiGlobalToastList::-webkit-scrollbar {
width: 0;
height: 0;
}
.ouiGlobalToastList:not(:empty) {
padding: 16px;
}
.ouiGlobalToastList--right:not(:empty) {
right: 0;
padding-left: 64px; /* 2 */
}
.ouiGlobalToastList--left:not(:empty) {
left: 0;
padding-right: 64px; /* 2 */
}
.ouiGlobalToastListItem {
margin-bottom: 16px;
-webkit-animation: 250ms ouiShowToast cubic-bezier(0.694, 0.0482, 0.335, 1);
animation: 250ms ouiShowToast cubic-bezier(0.694, 0.0482, 0.335, 1);
opacity: 1;
/**
* 1. justify-content: flex-end interferes with overflowing content, so we'll use this to push
* items to the bottom instead.
*/
}
.ouiGlobalToastListItem:first-child {
margin-top: auto; /* 1 */
}
.ouiGlobalToastListItem:last-child {
margin-bottom: 0;
}
.ouiGlobalToastListItem.ouiGlobalToastListItem-isDismissed {
transition: opacity 250ms;
opacity: 0;
}
@-webkit-keyframes ouiShowToast {
from {
-webkit-transform: translateY(24px) scale(0.9);
transform: translateY(24px) scale(0.9);
opacity: 0;
}
to {
-webkit-transform: translateY(0) scale(1);
transform: translateY(0) scale(1);
opacity: 1;
}
}
@keyframes ouiShowToast {
from {
-webkit-transform: translateY(24px) scale(0.9);
transform: translateY(24px) scale(0.9);
opacity: 0;
}
to {
-webkit-transform: translateY(0) scale(1);
transform: translateY(0) scale(1);
opacity: 1;
}
}
@media only screen and (max-width: 574px) {
/**
* 1. Mobile we make these 100%. Matching change happens on the item as well.
*/
.ouiGlobalToastList:not(:empty) {
left: 0;
padding-left: 16px;
padding-right: 16px;
width: 100%; /* 1 */
}
}
@media only screen and (min-width: 575px) and (max-width: 767px) {
/**
* 1. Mobile we make these 100%. Matching change happens on the item as well.
*/
.ouiGlobalToastList:not(:empty) {
left: 0;
padding-left: 16px;
padding-right: 16px;
width: 100%; /* 1 */
}
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiToast {
border: 1px solid #D6D9DD;
box-shadow: 0 40px 64px 0 rgba(78, 92, 110, 0.1), 0 24px 32px 0 rgba(78, 92, 110, 0.1), 0 16px 16px 0 rgba(78, 92, 110, 0.1), 0 8px 8px 0 rgba(78, 92, 110, 0.1), 0 4px 4px 0 rgba(78, 92, 110, 0.1), 0 2px 2px 0 rgba(78, 92, 110, 0.1);
border-color: #c8cdd4;
border-top-color: #e2e6e9;
border-bottom-color: #aeb5be;
position: relative;
padding: 16px;
background-color: #FCFEFF;
width: 100%;
}
.ouiToast:hover .ouiToast__closeButton, .ouiToast:focus .ouiToast__closeButton {
opacity: 1;
}
/**
* 1. Fit button to icon.
*/
.ouiToast__closeButton {
position: absolute;
top: 16px;
right: 16px;
line-height: 0; /* 1 */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
opacity: 0;
transition: opacity 150ms cubic-bezier(0.694, 0.0482, 0.335, 1);
}
.ouiToast__closeButton svg {
fill: #898e95;
}
.ouiToast__closeButton:hover svg {
fill: #161e2b;
}
.ouiToast__closeButton:focus {
background-color: #e3eff8;
opacity: 1;
}
.ouiToast__closeButton:focus svg {
fill: #0268BC;
}
.ouiToast--primary {
border-top: 2px solid #0268BC;
}
.ouiToast--success {
border-top: 2px solid #0F7B68;
}
.ouiToast--warning {
border-top: 2px solid #c08a2b;
}
.ouiToast--danger {
border-top: 2px solid #C43D35;
}
/**
* 1. Align icon with first line of title text if it wraps.
* 2. Apply margin to all but last item in the flex.
* 3. Account for close button.
*/
.ouiToastHeader {
padding-right: 24px; /* 3 */
display: -webkit-flex;
display: flex;
-webkit-align-items: baseline;
align-items: baseline; /* 1 */
}
.ouiToastHeader > * + * {
margin-left: 8px; /* 2 */
}
/**
* 1. Vertically center icon with first line of title.
*/
.ouiToastHeader__icon {
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
fill: #161e2b;
-webkit-transform: translateY(2px);
transform: translateY(2px); /* 1 */
}
.ouiToastHeader__title {
color: #161e2b;
font-size: 16.0006px;
font-size: 1.1429rem;
line-height: 1.35715rem;
font-weight: 500;
overflow-wrap: break-word !important;
word-wrap: break-word !important;
word-break: break-word;
font-weight: 400;
}
.ouiToastHeader--withBody {
margin-bottom: 8px;
}
/**
* 1. Prevent long lines from overflowing.
*/
.ouiToastBody {
word-wrap: break-word; /* 1 */
}
/* OUI -> EUI Aliases */
/* End of Aliases */
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiToken {
display: -webkit-inline-flex;
display: inline-flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
.ouiToken svg {
height: 100%;
margin: auto;
}
.ouiToken--circle {
border-radius: 50%;
}
.ouiToken--square {
border-radius: 3px;
}
.ouiToken--xsmall {
width: 12px;
height: 12px;
}
.ouiToken--xsmall.ouiToken--rectangle {
padding: 0 4px;
}
.ouiToken--small {
width: 16px;
height: 16px;
}
.ouiToken--small.ouiToken--rectangle {
padding: 0 4px;
}
.ouiToken--medium {
width: 24px;
height: 24px;
}
.ouiToken--medium.ouiToken--rectangle {
padding: 0 8px;
}
.ouiToken--large {
width: 32px;
height: 32px;
}
.ouiToken--large.ouiToken--rectangle {
padding: 0 8px;
}
.ouiToken--rectangle {
box-sizing: content-box;
}
.ouiToken--ouiColorVis0 {
color: #54B399;
}
.ouiToken--ouiColorVis0.ouiToken--light {
color: #39786a;
background-color: #ebf7f5;
box-shadow: inset 0 0 0 1px #cae8e0;
}
.ouiToken--ouiColorVis0.ouiToken--dark {
background-color: #6DCCB1;
color: #02020E;
}
.ouiToken--ouiColorVis1 {
color: #6092C0;
}
.ouiToken--ouiColorVis1.ouiToken--light {
color: #4b7298;
background-color: #ecf3f9;
box-shadow: inset 0 0 0 1px #cddeec;
}
.ouiToken--ouiColorVis1.ouiToken--dark {
background-color: #79AAD9;
color: #02020E;
}
.ouiToken--ouiColorVis2 {
color: #D36086;
}
.ouiToken--ouiColorVis2.ouiToken--light {
color: #a44b6b;
background-color: #f8eef3;
box-shadow: inset 0 0 0 1px #f0cfdb;
}
.ouiToken--ouiColorVis2.ouiToken--dark {
background-color: #EE789D;
color: #02020E;
}
.ouiToken--ouiColorVis3 {
color: #9170B8;
}
.ouiToken--ouiColorVis3.ouiToken--light {
color: #7d61a0;
background-color: #f1f0f8;
box-shadow: inset 0 0 0 1px #dcd3ea;
}
.ouiToken--ouiColorVis3.ouiToken--dark {
background-color: #A987D1;
color: #02020E;
}
.ouiToken--ouiColorVis4 {
color: #CA8EAE;
}
.ouiToken--ouiColorVis4.ouiToken--light {
color: #875f78;
background-color: #f7f3f7;
box-shadow: inset 0 0 0 1px #eddce7;
}
.ouiToken--ouiColorVis4.ouiToken--dark {
background-color: #E4A6C7;
color: #02020E;
}
.ouiToken--ouiColorVis5 {
color: #D6BF57;
}
.ouiToken--ouiColorVis5.ouiToken--light {
color: #7a6d38;
background-color: #f8f8ee;
box-shadow: inset 0 0 0 1px #f1ebcd;
}
.ouiToken--ouiColorVis5.ouiToken--dark {
background-color: #F1D86F;
color: #02020E;
}
.ouiToken--ouiColorVis6 {
color: #B9A888;
}
.ouiToken--ouiColorVis6.ouiToken--light {
color: #766b5c;
background-color: #f5f5f3;
box-shadow: inset 0 0 0 1px #e8e4db;
}
.ouiToken--ouiColorVis6.ouiToken--dark {
background-color: #D2C0A0;
color: #02020E;
}
.ouiToken--ouiColorVis7 {
color: #DA8B45;
}
.ouiToken--ouiColorVis7.ouiToken--light {
color: #996235;
background-color: #f9f3ec;
box-shadow: inset 0 0 0 1px #f2dcc7;
}
.ouiToken--ouiColorVis7.ouiToken--dark {
background-color: #F5A35C;
color: #02020E;
}
.ouiToken--ouiColorVis8 {
color: #AA6556;
}
.ouiToken--ouiColorVis8.ouiToken--light {
color: #9a5b4f;
background-color: #f4efee;
box-shadow: inset 0 0 0 1px #e3d0cc;
}
.ouiToken--ouiColorVis8.ouiToken--dark {
background-color: #C47C6C;
color: #02020E;
}
.ouiToken--ouiColorVis9 {
color: #E7664C;
}
.ouiToken--ouiColorVis9.ouiToken--light {
color: #ab4c3c;
background-color: #faefed;
box-shadow: inset 0 0 0 1px #f6d0c9;
}
.ouiToken--ouiColorVis9.ouiToken--dark {
background-color: #FF7E62;
color: #02020E;
}
.ouiToken--gray {
color: #5A6875;
}
.ouiToken--gray.ouiToken--light {
color: #5A6875;
background-color: #eceff1;
box-shadow: inset 0 0 0 1px #cbd1d6;
}
.ouiToken--gray.ouiToken--dark {
background-color: #5A6875;
color: #FCFEFF;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*
* 1. Shift arrow 1px more than half its size to account for border radius
*/
.ouiToolTip {
box-shadow: 0 12px 24px 0 rgba(2, 2, 14, 0.1), 0 6px 12px 0 rgba(2, 2, 14, 0.1), 0 4px 4px 0 rgba(2, 2, 14, 0.1), 0 2px 2px 0 rgba(2, 2, 14, 0.1);
border-radius: 4px;
background-color: #2A3947;
color: #FCFEFF;
z-index: 9000;
max-width: 256px;
overflow-wrap: break-word;
font-size: 12.000002px;
font-size: 0.857143rem;
line-height: 1.5;
padding: 8px;
-webkit-animation: ouiToolTipTop 90ms ease-out 0s forwards;
animation: ouiToolTipTop 90ms ease-out 0s forwards;
position: absolute;
opacity: 0;
/* 1 */
/* 1 */
}
.ouiToolTip .ouiToolTip__arrow {
content: "";
position: absolute;
-webkit-transform-origin: center;
transform-origin: center;
border-radius: 2px;
background-color: #2A3947;
width: 12px;
height: 12px;
-webkit-transform: translateY(-7px) rotateZ(45deg);
transform: translateY(-7px) rotateZ(45deg); /* 1 */
}
.ouiToolTip.ouiToolTip--right {
-webkit-animation-name: ouiToolTipRight;
animation-name: ouiToolTipRight;
}
.ouiToolTip.ouiToolTip--right .ouiToolTip__arrow {
-webkit-transform: translateX(-5px) rotateZ(45deg);
transform: translateX(-5px) rotateZ(45deg); /* 1 */
}
.ouiToolTip.ouiToolTip--bottom {
-webkit-animation-name: ouiToolTipBottom;
animation-name: ouiToolTipBottom;
}
.ouiToolTip.ouiToolTip--bottom .ouiToolTip__arrow {
-webkit-transform: translateY(-5px) rotateZ(45deg);
transform: translateY(-5px) rotateZ(45deg); /* 1 */
}
.ouiToolTip.ouiToolTip--left {
-webkit-animation-name: ouiToolTipLeft;
animation-name: ouiToolTipLeft;
}
.ouiToolTip.ouiToolTip--left .ouiToolTip__arrow {
-webkit-transform: translateX(-7px) rotateZ(45deg);
transform: translateX(-7px) rotateZ(45deg); /* 1 */
}
.ouiToolTip .ouiToolTip__title {
font-weight: 500;
border-bottom: solid 1px #5f656a;
padding-bottom: 4px;
margin-bottom: 4px;
}
.ouiToolTipAnchor {
display: inline-block;
}
.ouiToolTipAnchor *[disabled] {
pointer-events: none;
}
.ouiToolTipAnchor.ouiToolTipAnchor--displayBlock {
display: block;
}
@-webkit-keyframes ouiToolTipTop {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes ouiToolTipTop {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes ouiToolTipBottom {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes ouiToolTipBottom {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes ouiToolTipLeft {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes ouiToolTipLeft {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes ouiToolTipRight {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes ouiToolTipRight {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiTour--minWidth-default {
min-width: 240px;
}
.ouiTourHeader {
border-bottom: none;
margin-bottom: 8px !important;
}
.ouiTourHeader .ouiTourHeader__title {
margin-top: 0;
}
.ouiTourHeader__subtitle {
color: #5A6875;
}
.ouiTourFooter {
background-color: #E3E5E8;
margin-top: 24px !important;
}
.ouiTour .ouiTour__beacon {
pointer-events: none;
position: absolute;
opacity: 0;
transition: opacity 0s 350ms;
}
.ouiTour .ouiPopover__panelArrow.ouiPopover__panelArrow--right .ouiTour__beacon {
opacity: 1;
top: 6px;
left: -24px;
}
.ouiTour .ouiPopover__panelArrow.ouiPopover__panelArrow--left .ouiTour__beacon {
opacity: 1;
top: 6px;
left: 12px;
}
.ouiTour .ouiPopover__panelArrow.ouiPopover__panelArrow--top:after {
border-top-color: #E3E5E8;
}
.ouiTour .ouiPopover__panelArrow.ouiPopover__panelArrow--top .ouiTour__beacon {
opacity: 1;
top: 12px;
left: 6px;
}
.ouiTour .ouiPopover__panelArrow.ouiPopover__panelArrow--bottom .ouiTour__beacon {
opacity: 1;
top: -24px;
left: 6px;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiTourStepIndicator {
display: inline-block;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiText {
color: #2A3947;
font-weight: 400;
font-size: 14px;
font-size: 1rem;
line-height: 1.5;
color: inherit;
clear: both;
line-height: 1.5rem;
}
.ouiText a:not([class]) {
color: #0268BC;
}
.ouiText a:not([class]):hover, .ouiText a:not([class]):focus {
color: #014c8a;
text-decoration: underline;
}
.ouiText a:not([class]):focus {
background-color: #e3eff8;
-webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important;
animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important;
}
.ouiText img {
display: block;
width: 100%;
}
.ouiText ul {
list-style: disc;
}
.ouiText ol {
list-style: decimal;
}
.ouiText blockquote {
position: relative;
text-align: center;
margin-left: auto;
margin-right: auto;
font-style: italic;
letter-spacing: normal;
}
.ouiText blockquote p:last-child {
margin-bottom: 0;
}
.ouiText blockquote:before, .ouiText blockquote:after {
position: absolute;
content: "";
height: 2px;
width: 50%;
right: 0;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
background: #5A6875;
}
.ouiText blockquote:before {
top: 0;
}
.ouiText blockquote:after {
bottom: 0;
}
.ouiText h1,
.ouiText h2,
.ouiText h3,
.ouiText h4,
.ouiText h5,
.ouiText h6 {
margin-bottom: 0.5rem;
}
.ouiText * + h2,
.ouiText * + h3,
.ouiText * + h4,
.ouiText * + h5,
.ouiText * + h6 {
margin-top: 2rem;
}
.ouiText h1 {
color: #161e2b;
font-size: 28px;
font-size: 2rem;
line-height: 2.4285rem;
font-weight: 400;
}
.ouiText h2 {
color: #161e2b;
font-size: 24.000004px;
font-size: 1.714286rem;
line-height: 2.07145rem;
font-weight: 400;
}
.ouiText h3 {
color: #161e2b;
font-size: 17.999996px;
font-size: 1.285714rem;
line-height: 1.57145rem;
font-weight: 500;
}
.ouiText h4,
.ouiText dt {
color: #161e2b;
font-size: 16.0006px;
font-size: 1.1429rem;
line-height: 1.35715rem;
font-weight: 500;
}
.ouiText h5 {
color: #161e2b;
font-size: 14px;
font-size: 1rem;
line-height: 1.2143rem;
font-weight: 500;
}
.ouiText h6 {
color: #161e2b;
font-size: 14px;
font-size: 1rem;
line-height: 1.2143rem;
font-weight: 500;
text-transform: uppercase;
}
.ouiText pre {
white-space: pre-wrap;
background: #E3E5E8;
color: #2A3947;
}
.ouiText pre,
.ouiText pre code {
display: block;
}
.ouiText code {
font-family: var(--oui-code-font-family);
letter-spacing: normal;
line-height: 1.5;
display: inline-block;
font-weight: 400;
}
.ouiText p,
.ouiText ul,
.ouiText ol,
.ouiText dl,
.ouiText blockquote,
.ouiText img,
.ouiText pre {
margin-bottom: 1.5rem;
}
.ouiText ul,
.ouiText ol {
margin-left: 1.5rem;
}
.ouiText blockquote {
padding: 1.5rem;
font-size: 1.1429rem;
}
.ouiText dd + dt {
margin-top: 1rem;
}
.ouiText dt,
.ouiText .oui-definitionListReverse dd {
font-size: 1rem;
line-height: 1.5rem;
}
.ouiText .oui-definitionListReverse dt {
font-size: 0.75rem;
color: #2A3947;
}
.ouiText small {
font-size: 0.857143rem;
}
.ouiText pre {
padding: 14px;
}
.ouiText code {
font-size: 0.9rem;
}
.ouiText.ouiText--constrainedWidth {
max-width: 36em;
min-width: 75%;
}
.ouiText > :last-child,
.ouiText .ouiTextColor > :last-child {
margin-bottom: 0 !important;
}
.ouiText--small {
font-size: 14px;
font-size: 1rem;
line-height: 1.5rem;
}
.ouiText--small p,
.ouiText--small ul,
.ouiText--small ol,
.ouiText--small dl,
.ouiText--small blockquote,
.ouiText--small img,
.ouiText--small pre {
margin-bottom: 1.5rem;
}
.ouiText--small ul,
.ouiText--small ol {
margin-left: 1.5rem;
}
.ouiText--small blockquote {
padding: 1.5rem;
font-size: 1.1429rem;
}
.ouiText--small dd + dt {
margin-top: 1rem;
}
.ouiText--small dt,
.ouiText--small .oui-definitionListReverse dd {
font-size: 1rem;
line-height: 1.5rem;
}
.ouiText--small .oui-definitionListReverse dt {
font-size: 0.75rem;
color: #2A3947;
}
.ouiText--small small {
font-size: 0.857143rem;
}
.ouiText--small pre {
padding: 14px;
}
.ouiText--small code {
font-size: 0.9rem;
}
.ouiText--extraSmall {
font-size: 12.000002px;
font-size: 0.857143rem;
line-height: 1.2857145rem;
}
.ouiText--extraSmall p,
.ouiText--extraSmall ul,
.ouiText--extraSmall ol,
.ouiText--extraSmall dl,
.ouiText--extraSmall blockquote,
.ouiText--extraSmall img,
.ouiText--extraSmall pre {
margin-bottom: 1.2857145rem;
}
.ouiText--extraSmall ul,
.ouiText--extraSmall ol {
margin-left: 1.2857145rem;
}
.ouiText--extraSmall blockquote {
padding: 1.2857145rem;
font-size: 0.9796287347rem;
}
.ouiText--extraSmall dd + dt {
margin-top: 0.857143rem;
}
.ouiText--extraSmall dt,
.ouiText--extraSmall .oui-definitionListReverse dd {
font-size: 0.857143rem;
line-height: 1.2857145rem;
}
.ouiText--extraSmall .oui-definitionListReverse dt {
font-size: 0.64285725rem;
color: #2A3947;
}
.ouiText--extraSmall small {
font-size: 0.7346941224rem;
}
.ouiText--extraSmall pre {
padding: 12.000002px;
}
.ouiText--extraSmall code {
font-size: 0.7714287rem;
}
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiTextColor--default {
color: #2A3947;
}
.ouiTextColor--subdued {
color: #686c75;
}
.ouiTextColor--secondary {
color: #0F7B68;
}
.ouiTextColor--success {
color: #0F7B68;
}
.ouiTextColor--accent {
color: #9C47BF;
}
.ouiTextColor--warning {
color: #956b26;
}
.ouiTextColor--danger {
color: #C43D35;
}
.ouiTextColor--ghost {
color: #717178;
color: #FCFEFF !important;
}
/* OUI -> EUI Aliases */
/* End of Aliases */
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/
.ouiTextAlign--left {
text-align: left;
}
.ouiTextAlign--right {
text-align: right;
}
.ouiTextAlign--center {
text-align: center;
}
/*!
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/