_styles.sass 6.27 KB
Newer Older
arturo's avatar
arturo committed
1 2 3 4
// cf. "Resize" hook
.no-user-select
  user-select: none

5 6 7
.no-pointer-events
  pointer-events: none

8 9 10
.side-panel
  background-color: #fff
  padding: 0.3em
11
  width: 50vw
12 13
  top: 3.7em
  position: fixed
14
  z-index: 1
15 16 17 18 19 20 21

  .list-group
    .list-group-item-heading
      display: inline-block
      width: 60px

  @include right-handed
22
    right: space-x(1)
23

24 25
    .header
      float: right
26 27

  @include left-handed
28
    left: space-x(1)
29 30 31 32

    .header
      float: left

arturo's avatar
arturo committed
33 34 35 36
  // @TODO: better side panel management
  .texts-sidepanel

    &__header
37
      padding: $card-spacer-y $card-spacer-x 0
arturo's avatar
arturo committed
38
      font-size: 20px
39
      text-align: right
arturo's avatar
arturo committed
40 41 42 43 44 45

    &__body
      padding-left: $card-spacer-x
      padding-right: $card-spacer-x

      .document-layout__title
46
        font-size: 21px
arturo's avatar
arturo committed
47 48

      .document-layout__abstract__content
49 50
        // max-height: 200px
        // overflow-y: scroll
arturo's avatar
arturo committed
51 52
        font-size: 16px

53

54

Alexandre Delanoë's avatar
Alexandre Delanoë committed
55 56
/* */

57 58 59
.join-button
  padding-bottom: 100px
  padding-top: 100px
60

61 62 63 64
// Add pointer to Bootstrap Select
select.form-control
  cursor: pointer

65

66 67 68
#app
  width: 100%

arturo's avatar
arturo committed
69
.router
70

arturo's avatar
arturo committed
71 72 73
  &__inner
    display: flex
    position: relative
74

arturo's avatar
arturo committed
75 76 77 78 79 80 81 82 83
    @include left-handed
      flex-direction: row-reverse

    @include right-handed
      flex-direction: row

  &__aside
    // @TODO: topbar width
    $offset-y: 56px
84 85
    $min-width: 200px
    $default-width: 280px
arturo's avatar
arturo committed
86 87 88

    flex-grow: 0
    flex-shrink: 0
89
    width: $default-width
arturo's avatar
arturo committed
90 91
    min-width: $min-width
    height: calc(100vh - #{ $offset-y })
arturo's avatar
arturo committed
92
    z-index: z-index('main', 'sidebar')
arturo's avatar
arturo committed
93

arturo's avatar
arturo committed
94 95 96 97 98
    &__inner
      height: inherit
      width: inherit
      min-width: inherit
      position: fixed
arturo's avatar
arturo committed
99

arturo's avatar
arturo committed
100 101 102
    &__handle
      min-width: inherit
      width: inherit
arturo's avatar
arturo committed
103
      height: inherit
arturo's avatar
arturo committed
104 105 106 107 108 109 110 111 112 113 114 115 116 117
      position: fixed
      z-index: z-index('main', 'handlebar')
      pointer-events: none

      &__action
        $handle-width: 8px

        width: $handle-width
        height: inherit
        background: transparent
        cursor: col-resize
        position: absolute
        right: - #{ $handle-width / 2 }
        pointer-events: all
arturo's avatar
arturo committed
118 119 120 121 122 123


  &__body
    position: relative
    flex-grow: 1
    flex-shrink: 1
124 125 126 127 128 129


.main-page
  $self: &
  $page-padding: space-x(3) space-x(4)

arturo's avatar
arturo committed
130
  position: relative
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 178 179 180 181

  &__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
arturo's avatar
arturo committed
182 183 184 185 186 187 188 189 190 191 192 193 194 195

.action-upload-button
  $spinner-size: 23px // @TODO use futur bootstrap button deferred status here
  $spinner-left-offset: -32px
  $spinner-top-offset: 6px

  position: relative

  &__spinner
    position: absolute
    width: $spinner-size
    height: $spinner-size
    left: $spinner-left-offset
    top: $spinner-top-offset
196

197 198 199 200 201 202 203 204 205 206 207 208 209 210
// @TODO expand <tabs> to fit a ".main-page__main-route" with its padding
//       really KISS solution, better prevent the whole padding set (as the
//       likes of many pages, such as the Graph Explorer one)
.nodes-lists-layout-tabs,
.nodes-texts-layout-tabs,
.nodes-annuaire-layout-tabs

  .nav.nav-tabs
    margin-left: -32px
    margin-right: -32px
    padding-left: 32px
    padding-right: 32px


211
.jitsi-iframe
212
  height: 70em
arturo's avatar
arturo committed
213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251


// based on https://codeburst.io/how-to-pure-css-pie-charts-w-css-variables-38287aea161e
.progress-pie
  background: rgba(51, 122, 183, 0.1)
  border-radius: 100%
  height: calc(var(--size, 14) * 1px)
  overflow: hidden
  position: relative
  width: calc(var(--size, 14) * 1px)

  .progress-pie-segment
    --a: calc(var(--over50, 0) * -100%)
    --b: calc((1 + var(--over50, 0)) * 100%)
    --degrees: calc((var(--offset, 0) / 100) * 360)
    -webkit-clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b))
    clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b))
    height: 100%
    position: absolute
    transform: translate(0, -50%) rotate(90deg) rotate(calc(var(--degrees) * 1deg))
    transform-origin: 50% 100%
    width: 100%
    z-index: calc(1 + var(--over50))

    &:after,
    &:before
      background: var(--bg, rgb(51, 122, 183))
      content: ''
      height: 100%
      position: absolute
      width: 100%

    &:before
      --degrees: calc((var(--value, 45) / 100) * 360)
      transform: translate(0, 100%) rotate(calc(var(--degrees) * 1deg))
      transform-origin: 50% 0%

    &:after
      opacity: var(--over50, 0)
arturo's avatar
arturo committed
252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306

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

// @TODO better responsive display for tablet screens
.home-title
  $raw-logo-width: 334px

  padding: space-x(3)
  display: flex
  gap: space-x(3)
  margin-bottom: space-x(5)

  &__logo
    flex-basis: $raw-logo-width
    flex-shrink: 1

  &__jumbo
    flex-grow: 1
    position: relative

  &__folders

    &:not(:first-child)
      margin-top: space-x(3)


.home-tutorial
  // for preload purpose
  $card-estimated-width: 712px
  $card-estimated-height: 164px

  text-align: center

  .card
    min-width: $card-estimated-width
    display: inline-flex

    &:not(:last-child)
      margin-bottom: space-x(3)

  .card-body
    min-height: $card-estimated-height

  .folder-view
    display: inline-flex
    flex-wrap: unset


.home-license
  font-size: 15px

  .b-icon
    font-size: 12px

/////////////////////////////////////////////
307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322

.glyphitem
  top: 0
  display: inline-block
  float: right
  opacity: 0.6
  padding-right: 5px
  cursor: pointer
  transition: transform 0.1s ease-out 0s
  font-size: 15px
  text-align: center

  &:hover
    display: inline-block
    opacity: 1
    transform: scale(1.4)