PWV-1: Fixing studylist and viewer links styles

This commit is contained in:
Bruno Alves de Faria 2016-10-03 11:33:01 -03:00 committed by Erik Ziegler
parent 597386f391
commit 710499c10b
7 changed files with 65 additions and 28 deletions

View File

@ -12,7 +12,7 @@
</div>
</a>
{{ #if studyListToggleText }}
<a class="btn studyListLinkSection pull-left m-x-1 p-x-2 p-y-0 js-toggle-studyList">
<a class="btn studyListLinkSection pull-left js-toggle-studyList">
{{studyListToggleText}}
</a>
{{ /if }}

View File

@ -9,12 +9,14 @@ $expandedHeight = 160px
.topBar
height: $topBarHeight
overflow: hidden
padding: 1rem $studyListPadding 0
padding: 10px 10px 0
theme('color', '$textPrimaryColor')
theme('background-color', '$primaryBackgroundColor')
transition(all 0.5s ease)
&>.clearfix
position: relative
.brandSection
height: 30px
display: inline-block
@ -33,6 +35,8 @@ $expandedHeight = 160px
.studyListLinkSection
theme('border-left', '%s solid $uiBorderColor' % $uiBorderThickness)
margin: 3px 0 0 10px
padding: 0 0 0 10px
.btn
theme('color', '$textSecondaryColor')
@ -40,7 +44,6 @@ $expandedHeight = 160px
font-size: 13px
font-weight: 500
line-height: 26px
margin-top: 3px
&:hover
theme('color', '$hoverColor')
@ -51,11 +54,13 @@ $expandedHeight = 160px
&.studyList
background-color: rgba(21, 25, 30, 0.7)
height: $expandedHeight
padding-left: $studyListPadding
padding-right: $studyListPadding
.brandSection
height: 100%
width: 80%
line-height: $expandedHeight
line-height: $expandedHeight - 10px
.logoImage
width: 50px
@ -65,10 +70,12 @@ $expandedHeight = 160px
font-size: 30px
.studyListLinkSection
position: absolute
border: none
top: 5px
left: 5px
left: 0
margin: 0
padding: 0
position: absolute
top: 0
#studylistTabs
height: "calc(100% - %s)" % $topBarHeight

View File

@ -12,7 +12,7 @@
</div>
</a>
{{#if studyListToggleText}}
<a class="btn studyListLinkSection pull-left m-x-1 p-x-2 p-y-0 js-toggle-studyList">
<a class="btn studyListLinkSection pull-left js-toggle-studyList">
{{studyListToggleText}}
</a>
{{/if}}

View File

@ -9,12 +9,14 @@ $expandedHeight = 160px
.topBar
height: $topBarHeight
overflow: hidden
padding: 1rem $studyListPadding 0
padding: 10px 10px 0
theme('color', '$textPrimaryColor')
theme('background-color', '$primaryBackgroundColor')
transition(all 0.5s ease)
&>.clearfix
position: relative
.brandSection
height: 30px
display: inline-block
@ -33,6 +35,8 @@ $expandedHeight = 160px
.studyListLinkSection
theme('border-left', '%s solid $uiBorderColor' % $uiBorderThickness)
margin: 3px 0 0 10px
padding: 0 0 0 10px
.btn
theme('color', '$textSecondaryColor')
@ -40,7 +44,6 @@ $expandedHeight = 160px
font-size: 13px
font-weight: 500
line-height: 26px
margin-top: 3px
&:hover
theme('color', '$hoverColor')
@ -51,11 +54,13 @@ $expandedHeight = 160px
&.studyList
background-color: rgba(21, 25, 30, 0.7)
height: $expandedHeight
padding-left: $studyListPadding
padding-right: $studyListPadding
.brandSection
height: 100%
width: 80%
line-height: $expandedHeight
line-height: $expandedHeight - 10px
.logoImage
width: 50px
@ -65,10 +70,12 @@ $expandedHeight = 160px
font-size: 30px
.studyListLinkSection
position: absolute
border: none
top: 5px
left: 5px
left: 0
margin: 0
padding: 0
position: absolute
top: 0
#studylistTabs
height: "calc(100% - %s)" % $topBarHeight

View File

@ -12,7 +12,7 @@
</div>
</a>
{{ #if studyListToggleText }}
<a class="btn studyListLinkSection pull-left m-x-1 p-x-2 p-y-0 js-toggle-studyList">
<a class="btn studyListLinkSection pull-left js-toggle-studyList">
{{studyListToggleText}}
</a>
{{ /if }}

View File

@ -9,12 +9,14 @@ $expandedHeight = 160px
.topBar
height: $topBarHeight
overflow: hidden
padding: 1rem $studyListPadding 0
padding: 10px 10px 0
theme('color', '$textPrimaryColor')
theme('background-color', '$primaryBackgroundColor')
transition(all 0.5s ease)
&>.clearfix
position: relative
.brandSection
height: 30px
display: inline-block
@ -33,6 +35,8 @@ $expandedHeight = 160px
.studyListLinkSection
theme('border-left', '%s solid $uiBorderColor' % $uiBorderThickness)
margin: 3px 0 0 10px
padding: 0 0 0 10px
.btn
theme('color', '$textSecondaryColor')
@ -40,7 +44,6 @@ $expandedHeight = 160px
font-size: 13px
font-weight: 500
line-height: 26px
margin-top: 3px
&:hover
theme('color', '$hoverColor')
@ -51,11 +54,13 @@ $expandedHeight = 160px
&.studyList
background-color: rgba(21, 25, 30, 0.7)
height: $expandedHeight
padding-left: $studyListPadding
padding-right: $studyListPadding
.brandSection
height: 100%
width: 80%
line-height: $expandedHeight
line-height: $expandedHeight - 10px
.logoImage
width: 50px
@ -65,10 +70,12 @@ $expandedHeight = 160px
font-size: 30px
.studyListLinkSection
position: absolute
border: none
top: 5px
left: 5px
left: 0
margin: 0
padding: 0
position: absolute
top: 0
#studylistTabs
height: "calc(100% - %s)" % $topBarHeight

View File

@ -9,12 +9,14 @@ $expandedHeight = 160px
.topBar
height: $topBarHeight
overflow: hidden
padding: 1rem $studyListPadding 0
padding: 10px 10px 0
theme('color', '$textPrimaryColor')
theme('background-color', '$primaryBackgroundColor')
transition(all 0.5s ease)
&>.clearfix
position: relative
.brandSection
height: 30px
display: inline-block
@ -31,13 +33,17 @@ $expandedHeight = 160px
theme('color', '$textPrimaryColor')
line-height: 30px
.studyListLinkSection
theme('border-left', '%s solid $uiBorderColor' % $uiBorderThickness)
margin: 3px 0 0 10px
padding: 0 0 0 10px
.btn
theme('color', '$textSecondaryColor')
cursor: pointer
font-size: 13px
font-weight: 500
line-height: 26px
margin-top: 3px
&:hover
theme('color', '$hoverColor')
@ -48,11 +54,13 @@ $expandedHeight = 160px
&.studyList
background-color: rgba(21, 25, 30, 0.7)
height: $expandedHeight
padding-left: $studyListPadding
padding-right: $studyListPadding
.brandSection
height: 100%
width: 80%
line-height: $expandedHeight
line-height: $expandedHeight - 10px
.logoImage
width: 50px
@ -61,6 +69,14 @@ $expandedHeight = 160px
.logoText
font-size: 30px
.studyListLinkSection
border: none
left: 0
margin: 0
padding: 0
position: absolute
top: 0
#studylistTabs
height: "calc(100% - %s)" % $topBarHeight