@awsui/components-react
Version:
AWS UI is a collection of [React](https://reactjs.org/) components that help create intuitive, responsive, and accessible user experiences for web applications. It is developed by Amazon Web Services (AWS). This work is available under the terms of the [A
124 lines (123 loc) • 4.39 kB
CSS
._button-trigger_18eso_szyd5_3 > ._arrow_18eso_szyd5_3:not(#\9){
transition:transform 135ms cubic-bezier(0.165, 0.84, 0.44, 1);
transition:transform var(--motion-duration-rotate-180-TMbCmo, 135ms) var(--motion-easing-rotate-180-2ebTCo, cubic-bezier(0.165, 0.84, 0.44, 1));
}
@media (prefers-reduced-motion: reduce){
._button-trigger_18eso_szyd5_3 > ._arrow_18eso_szyd5_3:not(#\9){
animation:none;
transition:none;
}
}
.awsui-motion-disabled ._button-trigger_18eso_szyd5_3 > ._arrow_18eso_szyd5_3:not(#\9){
animation:none;
transition:none;
}
._button-trigger_18eso_szyd5_3:not(#\9){
border-collapse:separate;
border-spacing:0;
caption-side:top;
cursor:auto;
direction:ltr;
empty-cells:show;
font-family:serif;
font-size:medium;
font-style:normal;
font-variant:normal;
font-weight:normal;
font-stretch:normal;
line-height:normal;
hyphens:none;
letter-spacing:normal;
list-style:disc outside none;
tab-size:8;
text-align:left;
text-align-last:auto;
text-indent:0;
text-shadow:none;
text-transform:none;
visibility:visible;
white-space:normal;
widows:2;
word-spacing:normal;
box-sizing:border-box;
font-size:1.4rem;
font-size:var(--size-font-body-100-1S0qZw, 1.4rem);
line-height:2.2rem;
line-height:var(--size-lineHeight-body-100-2aIKVt, 2.2rem);
color:#16191f;
color:var(--color-text-body-default-2ZjSsg, #16191f);
font-weight:400;
font-family:"Noto Sans", "Helvetica Neue", Roboto, Arial, sans-serif;
position:relative;
display:flex;
width:100%;
justify-content:space-between;
align-items:center;
padding:0.4rem calc(1.6rem + (2 * 0.8rem)) 0.4rem 0.8rem;
padding:var(--space-scaled-xxs-wz9S8K, 0.4rem) calc(var(--size-icon-normal-3o9QS_, 1.6rem) + (2 * var(--space-xs-qJuxzO, 0.8rem))) var(--space-scaled-xxs-wz9S8K, 0.4rem) var(--space-xs-qJuxzO, 0.8rem);
background-color:#ffffff;
background-color:var(--color-background-input-default-2k-l2Z, #ffffff);
border-radius:2px;
border:1px solid #aab7b8;
border:1px solid var(--color-border-input-default-2xktd9, #aab7b8);
min-height:3.2rem;
min-height:var(--size-vertical-input-3_q1V_, 3.2rem);
}
._button-trigger_18eso_szyd5_3 > ._placeholder_18eso_szyd5_36:not(#\9){
color:#aab7b8;
color:var(--color-text-input-placeholder-2xktd9, #aab7b8);
font-style:italic;
}
._button-trigger_18eso_szyd5_3 > ._arrow_18eso_szyd5_3:not(#\9){
position:absolute;
right:0.8rem;
right:var(--space-xs-qJuxzO, 0.8rem);
top:calc(50% - 2.2rem / 2);
top:calc(50% - var(--size-lineHeight-body-100-2aIKVt, 2.2rem) / 2);
color:#545b64;
color:var(--color-text-interactive-default-3MrzkF, #545b64);
}
._button-trigger_18eso_szyd5_3:not(#\9):hover > ._arrow_18eso_szyd5_3{
color:#16191f;
color:var(--color-text-interactive-hover-2ZjSsg, #16191f);
}
._button-trigger_18eso_szyd5_3._pressed_18eso_szyd5_49 > ._arrow_18eso_szyd5_3:not(#\9){
transform:rotate(-180deg);
}
._button-trigger_18eso_szyd5_3._disabled_18eso_szyd5_52:not(#\9){
background-color:#eaeded;
background-color:var(--color-background-input-disabled-p5fVsz, #eaeded);
border:1px solid #eaeded;
border:1px solid var(--color-border-input-disabled-2FoT5u, #eaeded);
color:#879596;
color:var(--color-text-input-disabled-18f9uV, #879596);
cursor:auto;
}
._button-trigger_18eso_szyd5_3._disabled_18eso_szyd5_52 > ._arrow_18eso_szyd5_3:not(#\9){
color:#aab7b8;
color:var(--color-text-interactive-disabled-2xktd9, #aab7b8);
}
._button-trigger_18eso_szyd5_3[data-awsui-focus-visible=true]:not(#\9):focus{
outline:2px dotted transparent;
border:1px solid #00a1c9;
border:1px solid var(--color-border-item-focused-RH7L5U, #00a1c9);
border-radius:2px;
box-shadow:0 0 0 1px #00a1c9;
box-shadow:0 0 0 1px var(--color-border-item-focused-RH7L5U, #00a1c9);
}
._button-trigger_18eso_szyd5_3:not(#\9):invalid{
box-shadow:none;
}
._button-trigger_18eso_szyd5_3._invalid_18eso_szyd5_70:not(#\9), ._button-trigger_18eso_szyd5_3._invalid_18eso_szyd5_70:not(#\9):focus{
color:#d13212;
color:var(--color-text-status-error-1SZf5y, #d13212);
border-color:#d13212;
border-color:var(--color-text-status-error-1SZf5y, #d13212);
padding-left:calc( 0.8rem - (4px - 1px) );
padding-left:calc( var(--space-xs-qJuxzO, 0.8rem) - (4px - 1px) );
border-left-width:4px;
}
._button-trigger_18eso_szyd5_3:not(#\9):focus{
outline:none;
text-decoration:none;
}