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/_examples.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
$selector-height: 180px

7
$code-height: 230px

8


9
.webapp-examples

10
  +disable-user-select

11


12
  .modal-header

13
    white-space : nowrap

14
    h2,

15
    .nav-pills,

16
    .webapp-examples-search

17
      display    : flex

18
      margin-top : 10px

19
    .btn-close,

20
    button.close

21
      margin-top : 10px

22
      > span

23
        font-size : 30px

24


25
  .modal-body

26
    > div.row:first-child

27


28
      > div.webapp-examples-loading

29
        height          : $selector-height

30
        display         : flex

31
        flex-direction  : column

32
        justify-content : center

33
        text-align      : center

34


35
      ul

36
        height   : $selector-height

37
        overflow : auto

38
        padding  : 1px

39
        > li

40
          cursor : pointer

41
          &:not(.active):hover

42
            background-color : #eee

43
          > span > p

44
            margin: 0

45


46
      > div > ul.list-group

47
        border          : 1px solid $COL_GRAY_DDD

48
        border-radius   : 5px

49
        > li

50
          border        : none

51
          border-bottom : 1px solid $COL_GRAY_LL

52
          margin        : 0

53
          border-radius : 0

54


55
    div.webapp-examples-descr,

56
    .webapp-examples-code>div>pre

57
      padding           : 0px

58
      height            : $code-height

59
      overflow          : auto

60
      border-color      : $COL_GRAY_DDD

61
      +enable-user-select

62
      .attr,

63
      .attr a

64
        font-size  : 9px

65
        color      : grey

66
        margin-top : 30px

67
        text-align : right

68


69
  div.modal-footer

70
    padding    : 10px

71
    text-align : left

72
    > .contrib-link

73
      color: $COL_GRAY

74


75
  span.badge

76
    background-color : #eee

77
    color            : #428bca

78


79
  span.hl

80
    background-color : yellow

81
  .active

82
    span.hl

83
      color : #333

84