@flows/react-components/dist/index.css

Built-in components for Flows React SDK

:root{--flows-bg-default: #ffffff;--flows-bg-subtle: #fafafa;--flows-bg-hover: #f0f0f0;--flows-bg-primary: #067efd;--flows-bg-primary-hover: #0d67ec;--flows-bg-overlay: rgba(0, 0, 0, .4);--flows-fg-default: #1a1a1a;--flows-fg-onPrimary: #ffffff;--flows-borderWidth: 1px;--flows-border: var(--flows-borderWidth) solid #d6d6d6;--flows-border-strong: var(--flows-borderWidth) solid #ccc;--flows-border-strong-hover: var(--flows-borderWidth) solid #bababa;--flows-border-primary: var(--flows-borderWidth) solid #0d67ec;--flows-shadow: 0px 6px 18px rgba(0, 0, 0, .15), 0px 3px 8px rgba(0, 0, 0, .03), 0px 0px 1px rgba(0, 0, 0, .05);--flows-shadow-large: 0px 10px 48px rgba(0, 0, 0, .1), 0px 4px 24px rgba(0, 0, 0, .12), 0px 0px 1px rgba(0, 0, 0, .05);--flows-borderRadius-xSmall: 3px;--flows-borderRadius-small: 6px;--flows-borderRadius-medium: 8px;--flows-borderRadius-large: 12px;--flows-size-xSmall: 4px;--flows-size-small: 8px;--flows-size-medium: 12px;--flows-size-large: 20px;--flows-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;--flows-base-font-size: 14px;--flows-base-line-height: 20px;--flows-title-font-size: 16px;--flows-title-line-height: 24px;--flows-title-font-weight: 600;--flows-zIndex: 1500;--flows-tooltip-padding: var(--flows-size-large);--flows-tooltip-overlayBackground: var(--flows-bg-overlay);--flows-tooltip-overlayBorderRadius: var(--flows-borderRadius-medium);--flows-tooltip-overlayPadding: 4px;--flows-tooltip-minWidth: 200px;--flows-tooltip-maxWidth: 320px;--flows-modal-overlayBackground: var(--flows-bg-overlay);--flows-modal-padding: var(--flows-size-large);--flows-modal-minWidth: 320px;--flows-modal-maxWidth: 640px;--flows-banner-screenEdgePadding: var(--flows-size-large);--flows-banner-padding: var(--flows-size-large);--flows-banner-minWidth: 200px;--flows-banner-maxWidth: 320px}.dark{--flows-bg-default: #1e1e1e;--flows-bg-subtle: #262626;--flows-bg-hover: #333333;--flows-bg-primary: #357ddb;--flows-bg-primary-hover: #3382e7;--flows-bg-overlay: rgba(0, 0, 0, .6);--flows-fg-default: #fafafa;--flows-fg-onPrimary: #ffffff;--flows-border: 1px solid #3d3d3d;--flows-border-strong: 1px solid #4a4a4a;--flows-border-strong-hover: 1px solid #616161;--flows-border-primary: 1px solid #468ff1;--flows-shadow: 0px 4px 12px rgba(0, 0, 0, .2), 0px 2px 6px rgba(0, 0, 0, .25), 0px 1px 1px rgba(0, 0, 0, .2);--flows-shadow-large: 0px 1px 1px rgba(0, 0, 0, .2), 0px 2px 8px rgba(0, 0, 0, .2), 0px 4px 12px rgba(0, 0, 0, .2), 0px 4px 20px rgba(0, 0, 0, .2), 0px 4px 40px rgba(0, 0, 0, .15)}@keyframes flows-scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes flows-scaleOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes flows-fadeIn{0%{opacity:0}to{opacity:1}}@keyframes flows-ping{0%{transform:scale(1);opacity:.75}75%,to{transform:scale(2);opacity:0}}.flows_text{font-family:var(--flows-font-family);margin:0}.flows_text_body{font-size:var(--flows-base-font-size);line-height:var(--flows-base-line-height)}.flows_text_title{font-size:var(--flows-title-font-size);line-height:var(--flows-title-line-height);font-weight:var(--flows-title-font-weight)}.flows_button{border-radius:var(--flows-borderRadius-small);cursor:pointer;transition:background-color .12s ease-in-out,border-color .12s ease-in-out;padding:4px 8px;font-family:var(--flows-font-family);font-size:var(--flows-base-font-size);line-height:var(--flows-base-line-height);font-weight:600;white-space:nowrap;text-decoration:none}.flows_button_primary{background-color:var(--flows-bg-primary);border:var(--flows-border-primary);color:var(--flows-fg-onPrimary)}.flows_button_primary:hover{background-color:var(--flows-bg-primary-hover);border:1px solid var(--flows-bg-primary-hover)}.flows_button_secondary{background-color:var(--flows-bg-subtle);border:var(--flows-border-strong);color:var(--flows-fg-default)}.flows_button_secondary:hover{background-color:var(--flows-bg-hover);border:var(--flows-border-strong-hover)}.flows_iconButton{border-radius:var(--flows-borderRadius-small);cursor:pointer;transition:background-color .12s ease-in-out,border-color .12s ease-in-out;background-color:#0000;border:none;padding:0;width:20px;height:20px;display:grid;place-items:center}.flows_iconButton:hover{background-color:var(--flows-bg-hover)}.flows_tooltip_root{width:100%;top:0;left:0;position:absolute;z-index:var(--flows-zIndex)}.flows_tooltip_overlay{position:fixed;z-index:-1;pointer-events:none;animation:flows-fadeIn .1s ease-out}.flows_tooltip_overlay:after{content:"";position:absolute;inset:0;margin:calc(var(--flows-tooltip-overlayPadding) * -1);box-shadow:var(--flows-tooltip-overlayBackground) 0 0 0 9999px;border-radius:var(--flows-tooltip-overlayBorderRadius)}.flows_tooltip_tooltip{background-color:var(--flows-bg-default);border:var(--flows-border);color:var(--flows-fg-default);border-radius:var(--flows-borderRadius-medium);position:absolute;padding:var(--flows-tooltip-padding);font-family:var(--flows-font-family);font-size:var(--flows-base-font-size);line-height:var(--flows-base-line-height);box-sizing:border-box;min-width:var(--flows-tooltip-minWidth);max-width:min(var(--flows-tooltip-maxWidth),calc(100% - 16px));animation:flows-scaleIn .15s ease-out}.flows_tooltip_tooltip[data-open=true]{transition:all .15s ease-out}.flows_tooltip_tooltip:before{box-shadow:var(--flows-shadow);border-radius:var(--flows-borderRadius-medium);content:"";position:absolute;inset:calc(var(--flows-borderWidth) * -1);z-index:-1;pointer-events:none}.flows_tooltip_title{margin-right:24px}.flows_tooltip_body{margin-top:var(--flows-size-small)}.flows_tooltip_arrow{position:absolute;width:var(--flows-size-medium);height:var(--flows-size-medium);transform:rotate(45deg);border-radius:var(--flows-borderRadius-xSmall)}.flows_tooltip_tooltip[data-open=false] .flows_tooltip_arrow{border-color:var(--flows-bg-default);box-shadow:none}.flows_tooltip_arrow-bottom{border:var(--flows-border);z-index:-1;box-shadow:var(--flows-shadow)}.flows_tooltip_arrow-top{background-color:var(--flows-bg-default);border:var(--flows-border);border-color:#0000;background-clip:padding-box}.flows_tooltip_footer{margin-top:var(--flows-size-medium);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--flows-size-small)}.flows_tooltip_close{position:absolute;top:var(--flows-tooltip-padding);right:var(--flows-tooltip-padding)}.flows_modal_overlay{position:fixed;inset:0;background-color:var(--flows-modal-overlayBackground);pointer-events:none;animation:flows-fadeIn .1s ease-out;z-index:var(--flows-zIndex)}.flows_modal_wrapper{position:fixed;inset:0;display:grid;place-items:center;padding:var(--flows-modal-padding);overflow:auto;pointer-events:none;z-index:var(--flows-zIndex)}.flows_modal_modal{pointer-events:auto;background-color:var(--flows-bg-default);border:var(--flows-border);color:var(--flows-fg-default);border-radius:var(--flows-borderRadius-medium);box-shadow:var(--flows-shadow-large);padding:var(--flows-modal-padding);position:relative;box-sizing:border-box;min-width:var(--flows-modal-minWidth);max-width:var(--flows-modal-maxWidth);animation:flows-scaleIn .15s ease-out}.flows_modal_footer{margin-top:var(--flows-size-medium);display:flex;flex-wrap:wrap;justify-content:center;gap:var(--flows-size-small)}.flows_modal_close{position:absolute;top:var(--flows-modal-padding);right:var(--flows-modal-padding)}.flows_hint_hotspot{position:absolute;background-color:var(--flows-bg-primary);border-radius:50%;transition:background-color .12s ease-in-out;z-index:var(--flows-zIndex);width:16px;height:16px}.flows_hint_hotspot:hover{background-color:var(--flows-bg-primary-hover)}.flows_hint_hotspot:after{content:"";position:absolute;width:100%;height:100%;top:0;left:0;border-radius:50%;background-color:var(--flows-bg-primary);animation:flows-ping 2s cubic-bezier(0,0,.2,1) infinite}.flows_hint_tooltip.flows_hint_tooltip{transition:none}.flows_hint_tooltip{z-index:calc(var(--flows-zIndex) + 1)}.flows_hint_tooltip[data-open=false]{animation:flows-scaleOut .15s ease-out;opacity:0}