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

205 lines
3.5 KiB

$grid--gap-width: 20px
$grid--header-width: 20px
@import openproject/mixins
@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%
&:hover icon-triggered-context-menu
visibility: visible
&.-resizing
border: 1px solid $primary-color
z-index: 100
&.-addable
display: flex
flex-direction: column
justify-content: center
align-items: center
&.-placeholder
pointer-events: none
&.-dragged
display: none
.resizer
margin-top: 0
margin-left: auto
margin-right: -20px
position: relative
.cdk-drag-handle
cursor: grab
float: left
padding-top: 5px
.widget-box--header
display: flex
.widget-box--header-title
flex-grow: 1
icon-triggered-context-menu
visibility: hidden
.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, widget-wp-graph
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
&.-no-overflow
overflow-x: hidden
overflow-y: hidden
display: block
// styles specific to the custom-text widget
&.-custom-text
a.inplace-editing--trigger-link
color: inherit
text-decoration: none
.op-ckeditor--wrapper
margin-bottom: 0
.ck-editor__top
position: sticky
top: 0
.inplace-edit--controls
position: initial
i
float: initial
padding: 0
edit-field-controls
display: flex
position: sticky
bottom: 0
justify-content: flex-end
.textarea-wrapper
margin-bottom: 0
.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