OpenProject is the leading open source project management software.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 
openproject/app/assets/stylesheets/content/_grid.sass

149 lines
2.6 KiB

$grid--gap-width: 20px
$grid--header-width: 20px
@mixin grid--commons
display: grid
grid-column-gap: $grid--gap-width
grid-row-gap: $grid--gap-width
.grid--container
@include grid--commons
.grid--area
overflow: hidden
&.-drop-target
background-color: $gray-light
&.-resize-target
z-index: 1000
&.-widgeted
z-index: 10
@include widget-box--style
margin: 0
padding: 20px
.widget-box
height: 100%
&.-resizing
border: 1px solid $primary-color
z-index: 100
&.-addable
display: flex
flex-direction: column
justify-content: center
align-items: center
.resizer
margin-top: 0
margin-left: auto
margin-right: -20px
position: relative
.cdk-drag-handle
cursor: grab
.grid--area-drag-handle
margin-left: -19px
padding-right: 1px
margin-top: 3px
opacity: 0
cursor: grab
&:before
padding: 0
color: #888
.grid--area.-widgeted:hover &
opacity: 1
.grid--area-content
height: 100%
ng-component
display: flex
flex-direction: column
height: 100%
input[type="text"].toolbar--editable-toolbar
font-size: 18px
font-weight: normal
.title-container
margin-bottom: 0px
.grid--widget-content
height: 100%
overflow-x: auto
overflow-y: auto
.grid--widget-limited-text
max-height: 5rem
position: relative
overflow: hidden
&:before
content: ''
width: 100%
height: 100%
position: absolute
left: 0
top: 0
background: linear-gradient(to bottom, rgba($body-background, 0) 60%, rgba($body-background, 1))
.grid--widget-add
padding: 15px
background-color: $gray
border-radius: 50%
&:before
@include icon-font-common
@include icon-mixin-add
.grid--widget-remove
float: right
margin-top: -10px
margin-right: -10px
cursor: pointer
&:before
@include icon-font-common
@include icon-mixin-remove
font-size: 0.75em
.grid--column-headers
@include grid--commons
grid-template-rows: $grid--header-width
.grid--row-headers
@include grid--commons
grid-template-columns: $grid--header-width
float: left
margin-left: -$grid--header-width
.grid--header
background-color: $gray-light
transition: background-color 4s ease
&:hover
background-color: $gray
transition: background-color 1s ease
.grid--addable-widget
min-width: 400px
padding: 20px 5px
border-bottom: 1px solid $gray
cursor: pointer
background: none
transition: background 4s ease
&:hover
background: $gray-light
transition: background 1s ease
&:last-of-type
border-bottom: none