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/layout/_split_view.sass

313 lines
5.9 KiB

// http://monkeyandcrow.com/blog/css3_splitview/
// Panels
%panel
height: 4em
// Resizing
%resize-x
resize: horizontal
overflow: auto
// Initial Dimensions
.p-25
width: 25%
.p-50
width: 50%
.p-75
width: 75%
// Split View
.split-view
margin: 0.2em 0
width: 100%
clear: both
display: table
table-layout: fixed
border-top: 3px solid #EEEEEE
.split-view %panel
display: table-cell
.detail-panel-content
padding: 0px 5px 15px 10px
font-size: 13px
font-size: 0.8125rem
overflow: hidden
h2
margin: 0
padding: 0 0 4px 0
font-size: 20px
font-size: 1.25rem
line-height: 26px
font-weight: normal
border: none
text-transform: none
color: #333
// Detail Panel Content
span.subtitle
margin: 0px 0 0 0
padding: 0 0 10px 0
display: block
font-size: 12px
font-size: 0.75rem
div
&.detail-panel-content h3
margin: 0 0 10px 0
padding: 0
font-size: 14px
font-size: 0.875rem
font-weight: bold
border: none
&.select-type
font-size: 20px
font-size: 1.25rem
line-height: 26px
float: left
color: $content_link_color
&.detail-panel-description
float: left
margin: 10px 0 0 0
line-height: 18px
&.panel-toggler
float: left
width: 100%
color: #777777
fieldset
border-top: 1px solid #ddd
border-left: 0px
border-right: 0px
border-bottom: 0px
cursor: pointer
width: 100%
legend
padding: 0 20px
span
background: #ffffff
padding: 0
font-size: 12px
font-size: 0.75rem
i
background: #ffffff
padding: 0 10px 0 0px
&#detail-panel-watchers
float: left
width: 100%
ul
margin: 15px 0
padding: 0 0 15px 0
list-style-type: none
li
clear: both
margin-bottom: 10px
.user-field-user-link
float: left
.detail-panel-watchers-delete-watcher-icon
padding: 0 8px
color: $button_font_color
fieldset
border: 0
#detail-panel-watchers-add-watcher
clear: left
&.detail-panel-attributes
float: left
margin: 15px 0 0 0
width: 100%
ul
margin: 10px 0 0 0
padding: 0
list-style-type: none
li
margin: 0 0 25px 0
padding: 0
display: inline-table
min-width: 33%
clear: left
label
font-weight: bold
display: block
margin: 0 0 7px 0
&.detail-panel-attributes-toggler
float: left
margin: 10px 0 0 0
width: 100%
text-align: center
border-bottom: 1px solid #ddd
span.role
font-size: 11px
font-size: 0.6875rem
font-style: italic
color: #777777
line-height: 20px
div.detail-panel-latest-activity
float: left
margin: 10px 0 0 0
line-height: 18px
width: 100%
h3
margin: 0 0 10px 0
padding: 0
font-size: 14px
font-size: 0.875rem
font-weight: bold
ul
margin: 0
padding: 0
list-style-type: none
li
margin: 0 0 20px 0
padding: 0
div.work-package-details-tab
img
&.avatar
float: left
margin: -2px 10px 0 0
&.avatar-mini
float: left
margin: -3px 7px 0 0
span
&.user
display: block
line-height: 16px
&.date
display: block
font-size: 12px
&.comment
display: block
margin: 10px 0 0 46px
padding: 0 100px 0 0
color: #777777
font-style: italic
div
&.comments-number
padding: 0
float: right
text-align: right
display: block
&.comments-icons
padding: 0
text-align: right
display: block
i
padding: 5px 0 0 5px
display: inline-block
.comment ul
list-style-type: disc !important
margin: 0 0 0 12px !important
li
padding: 0 !important
margin: 0 !important
div
&.comments-form
float: left
width: 100%
margin: 10px 0 100px 0
textarea
border: 1px solid #dddddd
padding: 8px
border-radius: 2px
font-size: 13px
font-size: 0.8125rem
box-sizing: border-box
width: 100%
button
float: right
font-size: 13px
font-size: 0.8125rem
background: linear-gradient(to bottom, white 0%, #eeeeee 74%, #eeeeee 100%) repeat scroll 0 0 rgba(0, 0, 0, 0)
border: 1px solid #CCCCCC
border-radius: 2px
color: #222222
margin: 10px 0 0 0px
padding: 4px 10px 2px
cursor: pointer
height: 32px
i
&.icon-left
padding: 0 5px 0 0
vertical-align: -2px
&.icon-right
vertical-align: -2px
padding: 0 0px 0 4px
&.star
font-size: 17px
padding: 0 2px 0 0px
vertical-align: -3px
color: #ccc
margin: 0 0 0 -2px
cursor: pointer
&:hover, &.active
color: #f8d033
&.active:hover
color: #ccc
#tabs
position: relative
width: 100%
.tabrow
text-align: left
list-style: none
margin: 0 0 0 26px
padding: 4px 0 15px 0
line-height: 41px
height: 45px
overflow: hidden
font-size: 14px
position: relative
width: 97.5%
li
background: #ffffff
display: inline-block
position: relative
margin: 0
padding: 0
text-align: center
width: 18.6%
cursor: pointer
a
color: #333
text-decoration: none
li.selected
color: #999
border-bottom: 2px solid #3493b3
a
color: #3493b3
.work-package-details-activities-activity:not(:last-child)
margin-bottom: 10px
.work-package-details-activities-activity-contents
padding: 10px 0
textarea
width: 100%
resize: none
@media only screen and (max-width: 1280px)
.split-view .work-packages--details, .work-packages--split-view .work-packages--details
display: none
li[feature-flag=detailsView]
display: none
@media only screen and (min-width: 1281px)
.split-view .work-packages--details, .work-packages--split-view .work-packages--details
width: 480px
@media only screen and (min-width: 1440px)
.split-view .work-packages--details, .work-packages--split-view .work-packages--details
width: 580px