1
/*
2
 *  This file is part of CoCalc: Copyright © 2020 Sagemath, Inc.
3
 *  License: MS-RSL – see LICENSE.md for details
4
 */
5

6
@use 'colors'
7
@use 'mixins'
8

9
$selector-height: 180px
10
$code-height: 230px
11

12
.webapp-examples
13
  +mixins.disable-user-select
14

15
  .modal-header
16
    white-space : nowrap
17
    h2,
18
    .nav-pills,
19
    .webapp-examples-search
20
      display    : flex
21
      margin-top : 10px
22
    .btn-close,
23
    button.close
24
      margin-top : 10px
25
      > span
26
        font-size : 30px
27

28
  .modal-body
29
    > div.row:first-child
30

31
      > div.webapp-examples-loading
32
        height          : $selector-height
33
        display         : flex
34
        flex-direction  : column
35
        justify-content : center
36
        text-align      : center
37

38
      ul
39
        height   : $selector-height
40
        overflow : auto
41
        padding  : 1px
42
        > li
43
          cursor : pointer
44
          &:not(.active):hover
45
            background-color : #eee
46
          > span > p
47
            margin: 0
48

49
      > div > ul.list-group
50
        border          : 1px solid colors.$COL_GRAY_DDD
51
        border-radius   : 5px
52
        > li
53
          border        : none
54
          border-bottom : 1px solid colors.$COL_GRAY_LL
55
          margin        : 0
56
          border-radius : 0
57

58
    div.webapp-examples-descr,
59
    .webapp-examples-code>div>pre
60
      padding           : 0px
61
      height            : $code-height
62
      overflow          : auto
63
      border-color      : colors.$COL_GRAY_DDD
64
      +mixins.enable-user-select
65
      .attr,
66
      .attr a
67
        font-size  : 9px
68
        color      : grey
69
        margin-top : 30px
70
        text-align : right
71

72
  div.modal-footer
73
    padding    : 10px
74
    text-align : left
75
    > .contrib-link
76
      color: colors.$COL_GRAY
77

78
  span.badge
79
    background-color : #eee
80
    color            : #428bca
81

82
  span.hl
83
    background-color : yellow
84
  .active
85
    span.hl
86
      color : #333
87