todo-webclient/client/style.sass

@charset "utf-8"

// @import "../node_modules/bulmaswatch/superhero/_variables.scss"

// Import Bulma core
@import "../node_modules/bulma/bulma"

// @import "../node_modules/bulmaswatch/superhero/_overrides.scss"

html
    overflow: hidden

#body
    position: absolute
    top: 0
    left: 0
    bottom: 0
    right: 0
    display: flex
    flex-flow: column nowrap

.project .columns
    overflow-x: auto
    height: 100%

.avatar
    border-radius: 4px

// FIXME: wrap this in a desktop media query.
.login-form
  position: absolute
  left:  calc(50% - 150px)
  right: calc(50% - 150px)
  top:   25%

#main-section
  margin: 0.75rem 1.5rem
  flex: 1 1 auto
  overflow-y: auto
  overflow-x: hidden
  position: relative

.project
    position: absolute
    top: 0
    bottom: 0
    // FIXME: Those are supposed to match bulma’s column margins… use variables.
    left: 0.75em
    right: 0.75em

.project .columns .column
    padding: 0.25rem

.visible-on-hover
  transition-property: opacity visibility;
  transition-duration: 0.33s;

.project .column .visible-on-hover
  opacity: 0
  visibility: hidden
.project .column .title:hover > .visible-on-hover
  opacity: 1
  visibility: visible
.project .column:hover > .visible-on-hover
  opacity: 1
  visibility: visible

.project .column .card .visible-on-hover
  opacity: 0
  visibility: hidden
.project .column .card:hover .visible-on-hover
  opacity: 1
  visibility: visible

.cards-list .card
    border-top: 4px solid $grey-lighter
    transition-property: border-color;
    transition-duration: 0.33s;
.cards-list .card .card-content
    padding: 0.75rem
.cards-list .card .card-footer
    margin: -0.75rem
.cards-list .card.is-selected
  border-top-width: 4px
.cards-list .card .title.is-5
  margin-bottom: 0.25rem

.cards-list > .title
  margin: 0.5rem
  margin-bottom: 1rem

.card .title.is-5, .card .title.is-6
  font-weight: normal

.cards-list .card
    margin-bottom: 1rem

.cards-list .card:last-child
    margin-bottom: 0

.is-column-header + .card, .card + .button
    margin-top: 12px

.project > .hero
    margin-bottom: 12px

.project
    margin-top: 12px

.navbar
  border-bottom: 2px solid $grey-lighter
  background-color: $white

@each $name, $pair in $colors
  $color: nth($pair, 1)
  $color-invert: nth($pair, 2)

  .card.is-#{$name}
    border-top: 4px solid $color
    border-left: 1px solid transparent
    border-right: 1px solid transparent
    border-bottom: 1px solid transparent

  .card.is-#{$name}.is-selected
    border-top: 4px solid $color
    border-left: 1px solid $color
    border-right: 1px solid $color
    border-bottom: 1px solid $color

@import "../node_modules/bulma-divider/src/sass/index.sass"

.is-divider-vertical
  padding: 0 0.5rem
.is-divider-vertical::before
  top: 0
  bottom: 0

.fade-in
  -webkit-transition: 0.33s ease-out opacity;
  transition: 0.33s ease-out opacity;
  opacity: 0;

.fade-in.fade-in-active
  opacity: 1;

.fade-out
  -webkit-transition: 0.33s ease-out opacity;
  transition: 0.33s ease-out opacity;
  opacity: 1;

.fade-out.fade-out-active
  opacity: 0;