CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutSign UpSign In
sagemathinc

Real-time collaboration for Jupyter Notebooks, Linux Terminals, LaTeX, VS Code, R IDE, and more,
all in one place.

GitHub Repository: sagemathinc/cocalc
 Path: blob/master/src/packages/frontend/_antd_fix.sass
Views: 687
1
/*

2
 *  This file is part of CoCalc: Copyright © 2020 Sagemath, Inc.

3
 *  License: MS-RSL – see LICENSE.md for details

4
 */

5


6
// Here we revert some of the style changes that antd made.

7


8
// This is mainly meant to be temporary, so that we keep the

9
// overall global bootstrap style.

10


11
@import colors

12


13
// make the color consistent with antd again, since bootstrap sets

14
// it to something else.  We want this to be consistent with our nextjs

15
// landing pages.

16
a

17
  color: $COL_ANTD_LINK_BLUE

18


19
html

20
  overflow: hidden

21


22
.ant-popover-content

23
  .ant-popover-arrow

24
    border-color: $COL_GRAY_L !important

25
    z-index: -1 !important

26


27
.ant-popover-inner-content>.cocalc-account-button-dropdown-links

28
  margin: -12px -16px //Accomodate untouchable padding in inner-content just for .cocalc-account-button-dropdown-links

29


30
.ant-input-group > span.ant-input-group-addon

31
  padding: 0

32
  border: 0

33


34
.cc-error-display

35
  margin: 0

36
  padding: 1px 0

37
  max-height: 30%

38
  position: relative

39
  display: flex

40
  flex-direction: column

41
  > .ant-alert-banner

42
    display: block

43


44
// The frame-editor title-bar's "..." popover has a higher z-index than e.g. the "Halt" modal

45
// This makes the antd modals appear on top of all other elements

46
// Ref: https://github.com/sagemathinc/cocalc/issues/6467

47
// I found this ticket: https://github.com/ant-design/ant-design/issues/31513

48
// UPDATE: this style hack breaks the CRM's "add additional tables" dialog, and could

49
// break all kinds of other things(!?).  This is bad to change generically.

50
// The correct fix, which I implemented for the "..." popover in title-bar.tsx is

51
//       <Popover overlayStyle={{ zIndex: 990 }}...>

52
// which makes the popover lower than the modal (which is at 1000 without the hack below).

53
// Then all other popovers are not impacted.

54


55
// .ant-modal-root .ant-modal-wrap

56
//   z-index: 1100

57


58