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/_toolbar.sass

324 lines
6.7 KiB

//-- copyright
// OpenProject is a project management system.
// Copyright (C) 2012-2018 the OpenProject Foundation (OPF)
//
// This program is free software; you can redistribute it and/or
// modify it under the terms of the GNU General Public License version 3.
//
// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
// Copyright (C) 2006-2017 Jean-Philippe Lang
// Copyright (C) 2010-2013 the ChiliProject Team
//
// This program is free software; you can redistribute it and/or
// modify it under the terms of the GNU General Public License
// as published by the Free Software Foundation; either version 2
// of the License, or (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program; if not, write to the Free Software
// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
//
// See docs/COPYRIGHT.rdoc for more details.
//++
@mixin query-select-dropdown-filter-select($color)
text-decoration: underline
color: $color
@mixin query-selection-link($color)
a
color: $color
font-weight: normal
text-decoration: none
@mixin toolbar-element-sizing
margin: 0.625rem 0 0
height: 34px
line-height: 22px
.toolbar-container
padding: 0
margin-bottom: 12px
min-height: 50px
> .subtitle
font-size: rem-calc(14px)
font-style: italic
margin-top: rem-calc(5px)
margin-bottom: 10px
&.-with-dropdown .toolbar-item.drop-down
position: relative
.toolbar
ul
margin: 0
padding: 0
float: right
li
list-style-type: none
// automatically clear the toolbar
.toolbar:after
clear: both
content: ""
display: table
.toolbar-items
.toolbar-item,
.toolbar-button-group > li
float: left
&.toolbar-item
margin: 0 5px //$drop-nav-spacing // spacing between nav items
&:last-child
margin-right: 0
// hack around the old watchers_link implementation
// remove once all watcher_links in plugins have no button wrappers anymore
.button .button
background: transparent
border: none
margin: 0
padding: 0
button,
.button
// Overwrite Foundastion's default padding. Let line-height fix vertical
// center
padding-top: 0
padding-bottom: 0
.button--icon
font-size: 14px
.button--text
margin-left: 0.2em
.badge
font-size: 14px
vertical-align: 1px
&.toolbar-icon
// Make sure that icon only toolbar items are squared
width: 34px
font-size: 14px
line-height: 1
i
font-size: 14px
line-height: 1
&::before
font-size: 14px
line-height: 1
a.button
// For links the total height adds borders to line-height (== 34px)
line-height: 32px
button,
.button,
input[type=text],
input[type=number],
select
@include toolbar-element-sizing
border: 1px solid $toolbar-item--border-color
button,
.button,
.toolbar-input--affix
background: $toolbar-item--bg-color
&.-pressed,
&:active
background: $toolbar-item--bg-color-pressed
box-shadow: inset 0 2px 3px rgba(0,0,0,.125)
select
//extend forms select
@extend .form--select
//hack vertical text alignment for select (for all browsers)
padding-top: 5px
padding-bottom: 11px
//firefox hack, outline fix for select, remove to see why
&:-moz-focusring
color: transparent
text-shadow: 0 0 0 #000
a.last,
.last
margin-right: 0
#repository-checkout-url
min-width: 350px
.toolbar-item
&.-icon-only
.button
text-align: center
.button--icon
font-size: 1.1rem
position: relative
left: 0
right: 1px
vertical-align: text-top
.title-container
@include clearfix
float: left
height: auto
padding: 0
h2
border: 0
padding: 12px 0
color: $toolbar-title-color
@include breakpoint(medium down)
font-size: $h2-font-size
span
@include varprop(color, content-link-color)
&:hover
text-decoration: underline
ul
margin: 0
padding: 0
float: left
li
float: none
span.filter-selection
@include query-select-dropdown-filter-select($primary-color)
/** Allow select2 to display correctly in the toolbar */
.toolbar .select2-container
padding: 0
.select2-choice
min-width: 150px
.select2-arrow
border-color: $toolbar-item--border-color
.toolbar-input-group
display: flex
input,
.select2-container
flex: 1
flex-basis: 150px
> div
@include toolbar-element-sizing
display: flex
align-items: center
padding: 0 5px
label
margin: 0
font-size: 1.05rem
flex-grow: 1
.toolbar-input-group--affix
background: $toolbar-item--bg-color
border: 1px solid $toolbar-item--border-color
color: $inlinelabel-color
border-radius: 2px
&.-prepend
border-right: none !important
&.-append
border-left: none !important
#querySelectDropdown
min-width: 250px
border: 1px solid #dddddd
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15)
background: #ffffff
padding: 3px 0
.query-menu-container
float: left
clear: both
width: 100%
display: block
.search-query-wrapper
padding: 15px
overflow: hidden
.query-select-dropdown--no-results
padding: 15px 15px 0
.ui-menu-item
cursor: pointer
input
box-sizing: border-box
margin: 0 auto
width: 100%
min-width: 250px
height: 30px
line-height: 30px
background: #ffffff
border: 1px solid #cacaca
color: #222222
border-radius: 2px
.title-group-header
padding: 0 15px 0 15px
font-weight: bold
text-transform: uppercase
#magnifier
position: absolute
top: 24px
right: 22px
color: #999999
.ui-widget-content.-inplace
max-height: 55vh
overflow-x: auto
input[type="search"]::-webkit-search-cancel-button
display: none
.text
cursor: pointer
i
float: right
color: #333333
padding-left: 5px
&:hover
text-decoration: none
.toolbar
*
outline: none
@include breakpoint(680px down)
.toolbar-container .toolbar-items
background: #fff
display: flex
width: calc(100% + 5px)
&:not(:empty)
margin-bottom: 20px
> li
-webkit-flex: 1 0 0
flex: 1 0 0
&:first-child
-webkit-flex: 3 0 0
flex: 3 0 0
.button
width: 100%
white-space: nowrap
.button,
input,
label,
div
margin-top: 0