154 lines
3.0 KiB
Sass
154 lines
3.0 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"
|
||
|
||
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;
|
||
|