_styles.sass 2.77 KB
Newer Older
1 2
@use "./abstract/_members" as *

3 4
.cache-toggle
  cursor: pointer
5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

.side-panel
  background-color: #fff
  padding: 0.3em
  width: 28%
  top: 3.7em
  position: fixed

  .corpus-doc-view
    .annotated-field-wrapper
      .annotated-field-runs
        max-height: 200px
        overflow-y: scroll
  .list-group
    .list-group-item-heading
      display: inline-block
      width: 60px

  @include right-handed
24
    left: 70%
25

26 27
    .header
      float: right
28 29 30 31 32 33 34

  @include left-handed
    left: 2%

    .header
      float: left

35 36 37

.simple-layout
  height: 100%
38 39
  .license
    padding-top: 10px
40 41 42 43
  .spinner
    position: absolute
    left: 50%
    top: 50%
44 45

.table
46 47
  tr
    td
48
      color: #005a9aff
49 50
      .active
        font-weight: bold
51
        text-decoration: underline
52 53 54 55 56 57
      .ngrams-selector
        display: flex
        .ngrams-chooser
          padding: 3px
      .trash
        text-decoration: line-through
58

59 60 61
.action-search
  margin: 10px

62 63
.context-menu
  position: fixed
64 65 66

.search-bar
  margin: 10px
67

Alexandre Delanoë's avatar
Alexandre Delanoë committed
68
/* */
69 70 71 72
.body
  ul
    li
      color: #005a9aff
Alexandre Delanoë's avatar
Alexandre Delanoë committed
73 74 75 76 77 78 79 80 81 82 83 84 85 86
    .nav
      color: #005a9aff

.btn-primary
  color: white
  background-color: #005a9aff
  border-color: black


ul
  .nav
    color: #005a9aff
  li
    color: #005a9aff
87 88

.frame
89
  height: 100vh
90 91
  iframe
    border: 0
92

93 94 95
.join-button
  padding-bottom: 100px
  padding-top: 100px
96

97 98 99 100
// Add pointer to Bootstrap Select
select.form-control
  cursor: pointer

101 102 103 104 105 106 107 108 109 110 111 112

#app
  width: 100%

.router-inner
  display: flex

  &.left-handed
    flex-direction: row

  &.right-handed
    flex-direction: row
113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171


.main-page
  $self: &
  $page-padding: space-x(3) space-x(4)
  $topbar-height: 56px // ~ unworthy empirical value (@TODO topbar height calculation)

  flex-grow: 1 // quick workaround, stretching block when subjected to flex API

  &__main-row
    display: flex

    &--with-y-tiles

      #{ $self }__main-route
        width: 60%
      #{ $self }__vertical-tiles
        width: 40%

    &--only-y-tiles
      // ensure minimum height, so that the border delimiting "main route" and
      // its "vertical tiles" will not end abruptly
      min-height: calc( 100vh - #{ $topbar-height })

  // main route ~ main tile
  &__main-route
    padding: $page-padding
    width: 100%

  // optional vertical tiles ~ y axis column
  &__vertical-tiles
    display: flex
    flex-direction: column

  // optional horizontal tiles ~ x axis row
  &__horizontal-tiles
    display: flex
    flex-direction: row

    // dynamic width according to number of tiles
    @for $i from 1 through 10

      &--#{ $i } .tile-block
        width: calc( 100% / #{ $i })

.tile-block
  $tile-padding: space-x(0.5) space-x(2) space-x(1.5)

  &__header
    display: flex

    @include right-handed
      justify-content: flex-end

    @include left-handed
      justify-content: flex-start

  &__body
    padding: $tile-padding