Commit 8aae447f authored by Ubbo Veentjer's avatar Ubbo Veentjer
Browse files

Merge branch 'release/3.1.3' into main

parents db928454 5b38791a
Pipeline #141257 passed with stages
in 7 minutes and 32 seconds
.tg.dropdown
float: right
position: relative
.tg.dropdown_toggle
cursor: pointer
&.-nav
+icon('angle-down', true, true)
+respond-to(medium)
+heading(2)
+icon(false)
cursor: default
margin: 0 0 0 ($grid / 2)
+hover
background: none
&.-settings
@extend %button
+modify-button(pale, small)
+icon('cog')
&.-download
@extend %button
+modify-button(small)
+icon('download')
.tg.dropdown_menu
+transition(top, opacity, z-index)
background: $popup-bg-color
border-radius: $br
box-shadow: $drop-shadow
float: left
font-size: $font-size
list-style: none
margin: ($grid / 4) 0
min-width: 100%
opacity: 0
padding: 0
position: absolute
top: 110%
white-space: nowrap
z-index: -1
// Top wedge
&:before
border: ($grid / 2) solid transparent
border-bottom-color: $popup-bg-color
content: ''
display: block
height: 0px
left: $grid
pointer-events: none // Won't work on older browsers
position: absolute
top: (-$grid)
width: 0px
z-index: 999
&.-open
opacity: 1
top: 100%
z-index: 1000
&.-centered
right: -100%
&:before
left: 50%
margin-left: (-$grid / 2)
li
float: none
+ li
border-top: $border-width solid $border-color
margin-top: (-$border-width)
> a
border: 0
display: block
min-width: ($grid * 2)
padding: ($grid / 2)
+hover
background: $pale-color-light
&.-current > a
background: $pale-color
color: $text-color
&.-nav
+respond-to(medium)
background: none
border-radius: 0
box-shadow: none
display: block
float: none
margin: 0
opacity: 1
padding-left: $grid
position: relative
top: 0
white-space: normal
z-index: 1000
&:before
display: none // Remove top wedge
&.-open
top: 0
.tg.dropdown_submenu
margin-left: $grid
.tg.dropdown_heading
display: block
padding: ($grid / 4) ($grid / 2)
.tg.footer
+row
background: $aside-bg-color
border-top: $border-width solid $border-color
font-size: $font-size-small
margin: 0
padding: ($grid - $border-width) $grid $grid
a
@extend %link
.tg.footer_left
+column(50%, small)
+respond-to(small)
margin-bottom: $grid
text-align: center
ul
@extend %navigation
display: inline-block
> li
> a,
> span
padding: ($grid / 4)
.tg.footer_right
+column(50%, small)
text-align: right
+respond-to(small)
text-align: center
.tg.footer_links
@extend %navigation
.tg.footer_contact
+icon('comment')
.tg.footer_logos
list-style: none
margin: (-$grid / 2)
ul
display: inline-block
margin: 0
li
display: inline-block
padding: ($grid / 2)
vertical-align: top
.tg.footer_logo
max-height: ($grid * 2.5)
&.-tall
max-height: ($grid * 3.5)
+hover
opacity: .7
.tg.header
+row
background: $aside-bg-color
border-bottom: $border-width solid $border-color
margin: 0
padding: $grid $grid ($grid - $border-width)
.tg.header_logo
+column(auto, large)
height: $grid * 4.5
margin-top: (-$grid * .5)
text-align: center
a
position: relative
img
max-width: none
height: 100%
vertical-align: top
+respond-to(small)
max-width: 100%
+respond-to(medium)
margin-top: ($grid * 1.5)
.tg.hero
border-bottom: $border-width solid $border-color
padding: 0 ($grid * 2) ($grid - $border-width)
.tg.hero_heading
padding: 0 $grid
text-align: center
.tg.hero_subheading
color: $heading-color
font-family: SancoaleSoftenedMedium
&:before
background: lighten($primary-color, 54)
display: block
font-size: ($line-height * 3)
margin: 0 (-$grid * 2) $grid
padding: $grid
+respond-to(small)
margin: 0 (-$grid) $grid
&.-laboratory
&:before
background: lighten($primary-color, 54) url(../images/icon-lab.png) center center no-repeat
content: ''
height: ($grid * 3)
&.-repository
&:before
background: lighten($primary-color, 54) url(../images/icon-rep.png) center center no-repeat
content: ''
height: ($grid * 3)
&.-community
&:before
background: lighten($primary-color, 54) url(../images/icon-community.png) center center no-repeat
content: ''
height: ($grid * 3)
.tg.hero_content
+row
position: relative
.tg.hero_column
+column(33.333333%, medium)
padding-bottom: ($line-height * 2)
text-align: center
+respond-to(medium)
padding-bottom: 0
.tg.hero_button
+align-bottom
margin-left: -8%
width: 16%
+respond-to(medium)
position: static
margin: 0
width: auto
&.-download
@extend %button
color: #f3f8fb // Override base link style
+icon('download')
&.-visit
@extend %button
+modify-button(pale)
+icon('arrow-right')
// IE 10 & 11 fix
_:-ms-lang(x),
.tg.hero_button
margin-left: 6.4%
.tg.main
display: block // IE 11 fix
padding: $grid ($grid * 2)
+respond-to(small)
padding: $grid
// Emulate Bootstrap 2 grid
&.-default .portlet-layout.row-fluid
+row
@for $i from 1 through 12
> .span#{$i}
+column(percentage( $i / 12 ), medium)
margin: 0
+respond-to(medium)
[class*='span'] + [class*='span']
border-top: $border-width solid $border-color
margin-top: $grid
padding-top: ($grid - $border-width)
&.-highlight-sidebar .portlet-layout.row-fluid
+row(true)
@for $i from 1 through 11 // NOTE: span12 cannot have a sidebar
> .span#{$i}
+column(percentage( $i / 12 ), medium, true)
margin: 0
// Highlight columns with width < 50% ("sidebar") if theme switch is set
@for $i from 1 through 5
> .span#{$i}
background: darken($aside-bg-color, 3)
border-top: $border-width solid $border-color
border-bottom: $border-width solid $border-color
box-shadow: $border-width 0 $border-color inset, 0 0 $grid rgba(#000, .06) inset
margin: (-$grid - $border-width) 0
padding-top: $grid
padding-bottom: $grid
text-shadow: 0 1px 0 rgba(#fff, .8)
+ div
box-shadow: (-$border-width) 0 $border-color inset
.tg.breadcrumbs + &
padding-top: ($grid * 2)
margin-top: (-$grid * 2 - $border-width)
+respond-to(medium)
[class*='span'] + [class*='span']
margin-top: ($grid - $border-width)
padding-top: $grid
> .column-1
+row
.portlet
+column
.tg.nav
padding-left: (14 * $grid) // rounded up width of logo plus margins
margin: ($grid * 2) $grid 0
z-index: 9
+respond-to(large)
margin-top: $grid
padding-left: 0
> ul // 1
@extend %navigation
display: table
float: right
+respond-to(large)
float: none
margin: 0 auto
+respond-to(medium)
display: block
> li // same as .tg.nav_item, but needed here for override
display: table-cell
float: none
vertical-align: top
white-space: nowrap
&.-has-search > ul
width: 100%
+respond-to(medium) // 2
+off-canvas
a
@extend %link
.tg.nav_item
&.-has-dropdown
+respond-to(medium)
padding: ($grid / 2) 0
&.-search
width: 99% // fill up available space
.tg.pagination
@extend %clearfix
width: 100%
a
border: 0
.tg.pagination_list
@extend %navigation
display: table
margin: $grid auto
.tg.pagination_link
border: 0
&.-first
+icon('step-backward', false)
&.-prev
+icon('chevron-left', false)
&.-next
+icon('chevron-right', false)
&.-last
+icon('step-forward', false)
.tg.search
margin-bottom: 0
white-space: nowrap // Prevent search button from breaking
&.-header
+respond-to(medium)
padding: $grid
text-align: center
width: 100%
&.-topbox
padding: ($grid / 2)
width: ($grid * 9)
.tg.search_advanced-search-link
border-bottom: $border-width solid transparent
border-radius: 0
font-size: $font-size-small
line-height: (.75 * $grid)
padding: 0
position: absolute
right: ($grid / 4)
+hover
background: none !important
border-color: $link-hover-color
+respond-to(medium)
bottom: 0
right: $grid
.tg.search_checkbox
// Using `display: none` would prevent its value from being submitted
position: absolute
visibility: hidden
.tg.search_fake-input
@extend %text-input
display: table
padding: 0 !important
.tg.search_filter
display: table-cell
+respond-to(medium)
display: block
label
@extend %button
+modify-button(pale, small)
+icon('square-o')
color: $text-color
font-size: $font-size-small
margin: 0 0 0 .5em
vertical-align: middle
&:before
width: 13px // WORKAROUND: Checked quare is slightly wider
:checked + label
+auto-color-for($primary-color)
+icon('check-square-o')
background: $primary-color
text-shadow: none
.tg.search_input
@extend %text-input
font-size: $font-size
margin: 0 !important
padding-right: ($grid * 2)
width: 100%
&.-header
border: 0 // Border is set in wrapper .search_fake-input
color: inherit // .aui override
min-height: (2 * $line-height - 2 * $border-width)
&.-main
width: 61.8%
.tg.search_search
display: table-cell
width: 999em
+respond-to(medium)
display: block
width: auto
.tg.search_submit
+icon('search', false)
+transition(color)
background: none
border: none
color: $link-color
font-size: $font-size
height: ($grid * 2)
margin-left: (-$grid * 2)
padding: ($grid / 2)
position: absolute
width: ($grid * 2)
&.-main
margin-left: .5em
margin-bottom: $grid
max-width: 35% // Prevent button from breaking on very small screens
position: relative
vertical-align: top
+hover
color: $link-hover-color
.tg.site
+transition(left)
background: $content-bg-color
box-shadow: $drop-shadow
color: $text-color
font: #{$font-size} / #{$line-height} $font-family-text
margin: 0 auto
max-width: map-get($widths, max)
position: relative
width: 92%
+respond-to(medium)
left: 0 // This has to be set for transition to work
width: map-get($widths, medium)
&:before
background: url('../images/bg.svg') no-repeat
content: ''
margin-left: -125px
position: absolute
width: 280px
height: 350px
z-index: -1
+respond-to(medium)
+transition(opacity, z-index)
background: rgba(#777, .5)
display: block
height: 100%
width: 100%
opacity: 0
position: fixed
right: 0
z-index: -1
&.-reveal-off-canvas
+respond-to(medium)
left: 61.8%
&:before
opacity: 1
z-index: 9
*
box-sizing: border-box
.tg.topbox
background: $pale-color
border-left: $border-width solid $border-color
border-bottom: $border-width solid $border-color
border-radius: 0 0 0 $br
font-size: $font-size-small
height: ($grid * 1.5 + $border-width) // TODO: This should not be necessary, yet the bar is 1px too high if not set
position: absolute
right: 0
top: 0
+respond-to(medium)
border-left: 0
border-radius: 0
width: 100%
> ul
@extend %navigation
> li
> a,
> span
padding: ($grid / 4)
+respond-to(medium)
float: right
a
@extend %link
.tg.topbox_language
font-weight: bold
.tg.topbox_toggle-search
+icon<