todo-webclient/client/style.sass

135 lines
2.6 KiB
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"
#body
position: absolute
top: 0
left: 0
bottom: 0
right: 0
display: flex
flex-flow: column nowrap
.project, .project .columns
height: 100%
.project .columns
overflow-x: auto
.avatar
border-radius: 4px
#main-section
margin: 0.75rem 1.5rem
flex: 1 1 auto
.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;