_styles.sass 3.11 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 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44
.left-handed
  .side-panel
    //background-color: $dark
    left: 2%
    padding: 0.3em
    position: fixed
    top: 3.7em
    background-color: #fff
    width: 28%
    .header
      float: left
    .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
.right-handed
  .side-panel
    //background-color: $dark
    left: 70%
    padding: 0.3em
    position: fixed
    top: 3.7em
    background-color: #fff
    width: 28%
    .header
      float: right
    .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
45 46 47

.simple-layout
  height: 100%
48 49
  .license
    padding-top: 10px
50 51 52 53
  .spinner
    position: absolute
    left: 50%
    top: 50%
54 55

.table
56 57
  tr
    td
58
      color: #005a9aff
59 60
      .active
        font-weight: bold
61
        text-decoration: underline
62 63 64 65 66 67
      .ngrams-selector
        display: flex
        .ngrams-chooser
          padding: 3px
      .trash
        text-decoration: line-through
68

69 70 71
.action-search
  margin: 10px

72 73
.context-menu
  position: fixed
74 75 76

.search-bar
  margin: 10px
77

Alexandre Delanoë's avatar
Alexandre Delanoë committed
78
/* */
79 80 81 82
.body
  ul
    li
      color: #005a9aff
Alexandre Delanoë's avatar
Alexandre Delanoë committed
83 84 85 86 87 88 89 90 91 92 93 94 95 96
    .nav
      color: #005a9aff

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


ul
  .nav
    color: #005a9aff
  li
    color: #005a9aff
97 98

.frame
99
  height: 100vh
100 101
  iframe
    border: 0
102

103 104 105
.join-button
  padding-bottom: 100px
  padding-top: 100px
106 107 108 109 110 111 112 113 114 115 116 117 118


#app
  width: 100%

.router-inner
  display: flex

  &.left-handed
    flex-direction: row

  &.right-handed
    flex-direction: row
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 172 173 174 175 176 177


.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