PromucFlow_constructor/app/client/src/globalStyles/portals.ts

61 lines
1.6 KiB
TypeScript

import { createGlobalStyle } from "styled-components";
import { Layers } from "constants/Layers";
import { Classes } from "@blueprintjs/core";
import { Classes as GitSyncClasses } from "pages/Editor/gitSync/constants";
import { Classes as GuidedTourClasses } from "pages/Editor/GuidedTour/constants";
import { Colors } from "constants/Colors";
export const replayHighlightClass = "ur--has-border";
export const PortalStyles = createGlobalStyle`
#header-root {
position: relative;
z-index: ${Layers.header};
}
.bp3-portal {
z-index: ${Layers.portals};
}
.file-picker-dialog.bp3-dialog .${Classes.DIALOG_BODY} {
padding: 0;
}
.${GitSyncClasses.MERGE_DROPDOWN} .ads-dropdown-options-wrapper {
border: none;
}
.flash .${replayHighlightClass} {
border-color: ${Colors.WARNING_SOLID} !important;
box-shadow: 0px 0px 4px 0.5px rgba(254, 184, 17, 0.7) !important;
& > input, .CodeMirror, .appsmith-select__control {
border-color: ${Colors.WARNING_SOLID} !important;
box-shadow: 0px 0px 4px 0.5px rgba(254, 184, 17, 0.7) !important;
}
}
.${GuidedTourClasses.GUIDED_TOUR_BORDER} {
position:fixed;
border: 4px solid rgba(191, 65, 9, 0);
border-radius: 4px;
filter: drop-shadow(0px 1px 3px rgba(16, 24, 40, 0.1)) drop-shadow(0px 1px 2px rgba(16, 24, 40, 0.06));
transition: all 1s;
z-index: 3;
pointer-events: none;
}
.${GuidedTourClasses.GUIDED_TOUR_SHOW_BORDER} {
border-color: rgba(191, 65, 9, 1);
}
.${GuidedTourClasses.GUIDED_TOUR_INDICATOR} {
position: fixed;
z-index: 3;
pointer-events: none;
height: 87px;
width: 116px;
transition: all 1s;
}
`;