_list.sass 7.19 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12
.table
  $row-min-height: 48px

  tr td
    height: $row-min-height

  ///////////////////////

  .page-paint-raw

    &--selected

13 14
      td:first-child
        position: relative
15

16 17 18 19 20 21 22
        &::before
          @include fit-positions

          content: ""
          width: 3px
          background-color: $info
          position: absolute
23 24 25 26 27 28 29 30 31 32 33 34 35 36

  ///////////////////////

  .page-paint-row

    &--active
      // font-weight: bold

    &--trash
      text-decoration: line-through

  ///////////////////////

  .doc-chooser
37
    // $offset-top: 3px // flex alignment won't work, hence empirical value
38

39
    // padding-top: $offset-top
40 41 42 43

  ///////////////////////


44
///////////////////////////////////////////////////:
45

46
.rating-group
47
  // $offset-top: 3px // flex alignment won't work, hence empirical value
48

49
  display: flex
50
  // padding-top: $offset-top
51

52 53 54 55
  &__action
    // @XXX Glyphicon icons lack of homogeneous width
    width: 14px
    margin-right: space-x(1)
56

57
///////////////////////////////////////////////////:
58

59 60 61 62 63 64 65 66 67 68 69
.loaded-ngrams-table-header
  display: flex
  margin-top: space-x(4)

  &__search
    flex-basis: 380px
    flex-grow: 0
    flex-shrink: 1

///////////////////////////////////////////////////:

70
.ngrams-table-search-button
71 72 73 74 75 76 77 78 79 80 81 82

  .input-group-text
    // @XXX Glyphicon icons lack of homogeneous width
    width: 41px

    // @XXX Bootstrap adding unwanted `z-index` on "_input-group.scss"
    z-index: initial

///////////////////////////////////////////////////:

.ngrams-table-container

83 84 85 86
  &__navigation
    display: flex
    justify-content: space-between
    align-items: center
arturo's avatar
arturo committed
87 88
    margin-top: space-x(2)
    margin-bottom: space-x(2)
89 90

  &__add-term
91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108
    margin-top: space-x(1.5)
    margin-left: space-x(1.5)
    display: flex
    align-items: center
    gap: space-x(1)
    font-size: 14px

    &::before
      $offset-y: 1px

      content: "└"
      color: $gray-400
      font-size: 18px
      line-height: 0
      position: relative
      top: $offset-y
      padding-right: space-x(1)

arturo's avatar
arturo committed
109
  &__selection-cta
110 111 112 113
    margin-left: space-x(1.5)
    display: flex
    align-items: center
    gap: space-x(1)
arturo's avatar
arturo committed
114
    font-size: 15px
115

arturo's avatar
arturo committed
116 117 118 119 120
  &__table-wrapper
    // @XXX: reset "main-page__main-route" wrapper margin
    //       see Gargantext.Components.Router)
    margin-left: - space-x(2)
    margin-right: - space-x(2)
121
    margin-bottom: - space-x(2) // (+ another trimmed gutter)
arturo's avatar
arturo committed
122 123 124 125 126 127 128 129 130 131 132

  &__actions
    display: flex
    align-items: center
    justify-content: space-between
    background-color: $body-bg
    position: sticky
    top: $topbar-height
    z-index: z-index('main', 'topbar')
    padding: $card-spacer-y space-x(2)
    border-bottom: 2px solid $border-color
133 134

  &__table
arturo's avatar
arturo committed
135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157
    display: flex
    gap: space-x(2)

    .ngrams-tree-edit-real
      $width: 416px
      $min-width: 264px
      $empirical-action-row-height: 64px
      $offset-y: space-x(2)

      width: $width
      min-width: $min-width
      flex-grow: 0
      flex-shrink: 1

      align-self: flex-start
      position: sticky
      margin-top: $offset-y
      margin-bottom: $offset-y
      top: calc( #{$topbar-height} + #{$empirical-action-row-height} + #{$offset-y} )

    // reduce top border → due to the "__actions" bottom one
    thead th
      border-top-width: 0
158 159 160 161 162 163 164

    tbody
      padding-left: $card-spacer-x
      padding-right: $card-spacer-x


  &__table
165
    $select-column-width: 50px
166
    $score-column-width: 25%
arturo's avatar
arturo committed
167
    $score-column-min-width: 280px
168 169 170

    /// as of now (one-based index):
    /// nth(1) → "Select"
arturo's avatar
arturo committed
171 172
    /// nth(2) → "Score"
    /// nth(3) → "Terms"
173 174

    // (header)
175 176
    th:nth-child(1),
    th:nth-child(2)
177
      width: $select-column-width
178
      // padding-left: space-x(4)
179 180
      input
        @include clickable
181
    th:nth-child(3)
182
      width: $score-column-width
arturo's avatar
arturo committed
183
      min-width: $score-column-min-width
184 185

    // (rows)
186 187 188
    td:nth-child(1),
    th:nth-child(2)
      // padding: initial
189 190 191 192 193 194 195

      div
        $offset-y: 14px

        @include clickable

        height: 100%
196 197
        // padding-left: space-x(4)
        // padding-top: $offset-y
arturo's avatar
arturo committed
198
    td:nth-child(3)
199 200 201
      // padding-left: space-x(4)
      // margin-left: space-x(1.5)
    td:nth-child(4)
202 203 204 205 206 207 208

      .tree-loaded-plus
        $offset-y: 1px

        visibility: hidden
        position: relative
        top: $offset-y
arturo's avatar
arturo committed
209
        margin-left: space-x(1)
210

211 212 213 214
        .fa-plus-minus:before
          font-size: .85rem
          line-height: .85rem

215
    tr:hover
216

217 218
      .tree-loaded-plus
        visibility: unset
219 220 221 222 223 224 225 226 227 228 229 230 231 232


///////////////////////////////////////////////////:

.ngrams-tree-edit-real
  border-color: $primary

  &__actions
    display: flex
    margin-top: space-x(2)

    .b-button
      margin-right: space-x(1)

233 234 235
  .ngrams-tree-loaded-node a:hover
    text-decoration: line-through

236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262
//////////////////////////////////////////////////

.ngrams-tree-loaded-node


  &--first-child::before,
  &--grand-child::before
    color: $gray-400
    font-size: 11px
    margin-right: space-x(0.5)

    @include right-handed
      content: "└"
    @include left-handed
      content: "┘"

  &--first-child
    // empirical value where the child separator aligns with its parent text
    $child-offset: -2px

    margin-left: -2px

  &--grand-child
    // empirical value where the child separator aligns with its parent text
    $child-offset: 13px

    margin-left: 13px
263 264 265 266 267 268

////////////////////////////////////////////////////////

.table-header-rename
  margin-bottom: space-x(1)

269
  &__title
270 271 272
    display: flex
    align-items: center

273 274 275 276
    &__text
      font-size: $h3-font-size
      font-family: $headings-font-family

277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292
    &__line
      // (?) This is a peculiar line directly coming from the legacy style
      //     It originaly was a solid 2px black one, that added to much
      //     emphasize comparing to the surrounding gray border and lighter
      //     element (font, icon, etc)
      //
      //     As far as it goes, we kept it for inheritance, but without more
      //     previous decision on it, we can only make assumption here. Maybe
      //     the line was intended to bring the page title out, as we can see
      //     on the likes on some academing print paper
      border-bottom: 1px solid $gray-200
      border-top: none
      // (?) strange behavior where browser engine add it by itself
      height: 0
      flex-grow: 1
      margin-left: space-x(4)
293
      margin-right: space-x(4)
294

295 296 297 298
  &__cache-toolbar
    width: $topbar-fixed-button-width
    margin-left: $topbar-item-margin
    margin-right: $topbar-item-margin
299 300


301 302 303
.table-header-rename-edition
  margin-top: space-x(1)
  padding: $card-spacer-y $card-spacer-y
304

305 306 307 308
  .form-group
    display: flex
    align-items: baseline
    margin-bottom: space-x(0.75)
309

310 311
    // remove "bootstrap" not-needed-here rule
    flex-wrap: initial
312

313 314 315 316 317 318
  .form-group__label .b-icon
    // @XXX Glyphicon icons lack of homogeneous width
    $icon-width: 16px

    margin-right: space-x(1)
    width: $icon-width
319 320
    font-size: 14px
    text-align: center
321 322 323 324 325 326 327 328 329 330 331 332 333

.side-panel
  z-index: 10
  .ngrams-doc-list
    .list-group
      max-height: 40em
      overflow-y: scroll
      .context-item-title
        line-height: 1.3
        margin-bottom: 4px
      .context-item-source
        color: $gray-600
        font-variant-caps: small-caps
Fabien Manière's avatar
Fabien Manière committed
334
        font-size: 15px
335 336 337
      .context-item-date
        color: $gray-600
        font-size: .85rem