LT-250: Fixing quick switch dimensions
This commit is contained in:
parent
26687c579f
commit
ef742ee3b5
@ -1,12 +1,23 @@
|
|||||||
@import "{design}/app"
|
@import "{design}/app"
|
||||||
|
|
||||||
$switchSize = 50px
|
$switchSize = 50px
|
||||||
|
$switchTop = 5px
|
||||||
|
$switchHeight = 70px
|
||||||
|
$switchWrapperWidth = 140px
|
||||||
|
|
||||||
.quickSwitch
|
.quickSwitch
|
||||||
height: 80px
|
height: 80px
|
||||||
position: absolute
|
position: absolute
|
||||||
top: 5px
|
top: $switchTop
|
||||||
width: 140px
|
width: $switchWrapperWidth
|
||||||
|
|
||||||
|
&.middle
|
||||||
|
left: 'calc(50% - %s)' % ($switchWrapperWidth / 2)
|
||||||
|
|
||||||
|
&.left
|
||||||
|
left: 'calc(50% - %s - 20px)' % $switchWrapperWidth
|
||||||
|
&.right
|
||||||
|
left: calc(50% + 20px)
|
||||||
|
|
||||||
div.switchSection
|
div.switchSection
|
||||||
display: inline-block
|
display: inline-block
|
||||||
@ -42,11 +53,10 @@ $switchSize = 50px
|
|||||||
.mirror-x
|
.mirror-x
|
||||||
transform(scaleX(-1));
|
transform(scaleX(-1));
|
||||||
|
|
||||||
.studyHover
|
.studyHover, .seriesHover
|
||||||
position: absolute
|
position: absolute
|
||||||
z-index: 10000
|
z-index: 10000
|
||||||
top: 70px
|
top: $switchHeight
|
||||||
left: -350px
|
|
||||||
width: 400px
|
width: 400px
|
||||||
height: 500px
|
height: 500px
|
||||||
background: black
|
background: black
|
||||||
@ -54,17 +64,13 @@ $switchSize = 50px
|
|||||||
border-radius: 5px
|
border-radius: 5px
|
||||||
transition(all 0.3s ease)
|
transition(all 0.3s ease)
|
||||||
|
|
||||||
|
.studyHover
|
||||||
|
left: -350px
|
||||||
|
width: 400px
|
||||||
|
|
||||||
.seriesHover
|
.seriesHover
|
||||||
position: absolute
|
|
||||||
z-index: 10000
|
|
||||||
top: 70px
|
|
||||||
left: 50px
|
left: 50px
|
||||||
width: 700px
|
width: 700px
|
||||||
height: 900px
|
|
||||||
background: black
|
|
||||||
opacity: 0.8
|
|
||||||
border-radius: 5px
|
|
||||||
transition(all 0.3s ease)
|
|
||||||
|
|
||||||
&.tiny
|
&.tiny
|
||||||
width: 0
|
width: 0
|
||||||
@ -76,9 +82,15 @@ $switchSize = 50px
|
|||||||
width: 33%
|
width: 33%
|
||||||
display: inline-block
|
display: inline-block
|
||||||
|
|
||||||
$switchSizeSmall = 30px
|
$switchSizeSmall = 35px
|
||||||
@media screen and (max-width: 1600px)
|
@media screen and (max-width: 1600px)
|
||||||
.quickSwitch div.switchSection
|
.quickSwitch
|
||||||
|
&.left
|
||||||
|
left: 'calc(50% - %s - 8px)' % $switchWrapperWidth
|
||||||
|
&.right
|
||||||
|
left: calc(50% + 8px)
|
||||||
|
height: 45px
|
||||||
|
div.switchSection
|
||||||
.label
|
.label
|
||||||
font-size: 8px
|
font-size: 8px
|
||||||
font-weight: 400
|
font-weight: 400
|
||||||
|
|||||||
@ -60,16 +60,3 @@
|
|||||||
min-width: 30px
|
min-width: 30px
|
||||||
stroke: $defaultColor
|
stroke: $defaultColor
|
||||||
text-align: center
|
text-align: center
|
||||||
|
|
||||||
.quickSwitch
|
|
||||||
position: absolute
|
|
||||||
|
|
||||||
&.middle
|
|
||||||
left: calc(50% - 60px)
|
|
||||||
|
|
||||||
&.left
|
|
||||||
left: calc(50% - 160px)
|
|
||||||
|
|
||||||
&.right
|
|
||||||
left: 50%
|
|
||||||
margin-left: 20px
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user