todo-webclient/client/style.sass

135 lines
2.6 KiB
Sass
Raw Normal View History

2019-11-20 19:22:51 +01:00
@charset "utf-8"
2019-12-12 01:25:36 +01:00
// @import "../node_modules/bulmaswatch/superhero/_variables.scss"
2019-11-20 19:22:51 +01:00
// Import Bulma core
@import "../node_modules/bulma/bulma"
2019-12-12 01:25:36 +01:00
// @import "../node_modules/bulmaswatch/superhero/_overrides.scss"
2019-11-20 19:22:51 +01:00
2019-12-12 21:49:15 +01:00
#body
position: absolute
top: 0
left: 0
bottom: 0
right: 0
display: flex
flex-flow: column nowrap
.project, .project .columns
height: 100%
.project .columns
2019-12-12 01:25:36 +01:00
overflow-x: auto
2019-11-20 19:22:51 +01:00
.avatar
border-radius: 4px
2019-12-12 21:49:15 +01:00
#main-section
margin: 0.75rem 1.5rem
flex: 1 1 auto
.project .columns .column
padding: 0.25rem
2019-12-24 22:40:37 +01:00
.visible-on-hover
transition-property: opacity visibility;
transition-duration: 0.33s;
.project .column .visible-on-hover
2019-12-24 22:40:37 +01:00
opacity: 0
visibility: hidden
.project .column .title:hover > .visible-on-hover
2019-12-24 22:40:37 +01:00
opacity: 1
visibility: visible
.project .column:hover > .visible-on-hover
2019-12-24 22:40:37 +01:00
opacity: 1
visibility: visible
.project .column .card .visible-on-hover
2019-12-24 22:40:37 +01:00
opacity: 0
visibility: hidden
.project .column .card:hover .visible-on-hover
2019-12-24 22:40:37 +01:00
opacity: 1
visibility: visible
2019-12-12 21:49:15 +01:00
.cards-list .card
border-top: 4px solid $grey-lighter
2019-12-24 22:40:37 +01:00
transition-property: border-color;
transition-duration: 0.33s;
2019-12-12 21:49:15 +01:00
.cards-list .card .card-content
padding: 0.75rem
.cards-list .card .card-footer
margin: -0.75rem
.cards-list .card.is-selected
2019-12-24 22:25:01 +01:00
border-top-width: 4px
2019-12-12 21:49:15 +01:00
.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
2019-11-20 19:22:51 +01:00
.is-column-header + .card, .card + .button
margin-top: 12px
.project > .hero
margin-bottom: 12px
.project
margin-top: 12px
2019-12-12 21:49:15 +01:00
.navbar
border-bottom: 2px solid $grey-lighter
background-color: $white
2019-11-20 19:22:51 +01:00
@each $name, $pair in $colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
.card.is-#{$name}
2019-12-12 21:49:15 +01:00
border-top: 4px solid $color
2019-12-24 22:25:01 +01:00
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
2019-12-12 21:49:15 +01:00
@import "../node_modules/bulma-divider/src/sass/index.sass"
.is-divider-vertical
padding: 0 0.5rem
.is-divider-vertical::before
top: 0
bottom: 0
2019-11-20 19:22:51 +01:00
2019-12-25 01:27:20 +01:00
.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;