Mercurial > hg > orthanc-stone

annotate Applications/StoneWebViewer/Resources/Styles/_layout.scss @ 1828:8bc9ba6f7518

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
integration StoneWebViewer-2.0->mainline
author Sebastien Jodogne <s.jodogne@gmail.com>
date Thu, 27 May 2021 11:06:46 +0200
parents d1806b4e4839
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
1495
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
1 $topHeight: 42px;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
2 $bottomHeightSmall: 7rem; // On small width, we provide two-lines bottom zone to compensate the smaller width
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
3 $bottomHeightLarge: 5rem; // On large width, we provide one-line bottom zone
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
4
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
5 $asideWidth: 32rem;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
6 $asideMinifyWidth: 12rem;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
7
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
8 $asideRightMinifyWidth: 85px; // eq. 7.5rem * 12px - ( $asideRightPadding / 2 )
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
9 $asideRightPadding: 10px;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
10
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
11 /* layout: left section */
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
12
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
13 // Adapt left aside based on state (opened/closed).
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
14 .wvLayoutLeft {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
15 // Set general properties.
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
16 position:absolute;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
17 z-index:2;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
18 background-color:black;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
19 width: $asideWidth;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
20
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
21 // Position the left side below the top zone if it is shown
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
22 &.wvLayoutLeft--toppadding {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
23 top: $topHeight;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
24 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
25 &:not(.wvLayoutLeft--toppadding) {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
26 top: 0;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
27 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
28
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
29 // Position the left section over the bottom one if the latter is shown
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
30 &.wvLayoutLeft--bottompadding {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
31 @media screen and (max-device-width: 374px) {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
32 bottom: $bottomHeightSmall;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
33 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
34 @media screen and (min-device-width: 375px) {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
35 bottom: $bottomHeightLarge;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
36 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
37 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
38 &:not(.wvLayoutLeft--bottompadding) {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
39 bottom: 0;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
40 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
41
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
42 // Position the left side on the left
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
43 left: 0;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
44
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
45 // When layout left is shown, nothing special happens (default state)
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
46 &:not(.wvLayoutLeft--closed) {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
47 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
48
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
49 // When layout left is closed, move it aside
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
50 &.wvLayoutLeft--closed {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
51 transform: translateX(- $asideWidth); // Move all out of the screen
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
52 &.wvLayoutLeft--small {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
53 transform: translateX(-$asideMinifyWidth);
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
54 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
55 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
56 &.wvLayoutLeft--small{
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
57 width: $asideMinifyWidth;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
58 & .wvLayoutLeft__contentTop, & .wvLayoutLeft__contentMiddle, & .wvLayoutLeft__contentBottom{
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
59 width: 100%;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
60 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
61 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
62 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
63
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
64 // Layout-Left Flexbox containers for the content.
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
65 .wvLayoutLeft__content {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
66 border-right: 1px solid #AAA;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
67
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
68 // Display flex mode so optional actions can be positionned at the bottom
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
69 // side.
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
70 flex: 1;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
71 display: flex;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
72 flex-direction: column;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
73
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
74 // Make it scrollable.
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
75 overflow-y: auto;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
76 height: 100%;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
77 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
78
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
79 .wvLayoutLeft__contentTop {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
80 // We have to set a static height since we use floating to make white space
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
81 // disapear in nested content.
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
82 // note: could be deactivate with the clearfix so we can have a dynamic height
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
83 // max-height: 6rem;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
84 padding: 0rem 1rem 0rem 1rem;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
85
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
86 // Enforce width even if there is a scrollbar on win/IE11 (-1 px for
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
87 // border).
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
88 width: $asideWidth - 0.1rem;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
89
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
90 &:after{
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
91 content: "";
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
92 display:block;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
93 height:0;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
94 width:0;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
95 clear:both;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
96 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
97 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
98
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
99 .wvLayoutLeft__contentMiddle {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
100 // Let the middle zone take as much space as required.
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
101 flex: 1 0 auto;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
102
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
103 // Enforce width even if there is a scrollbar on win/IE11 (-1 px for
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
104 // border).
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
105 width: $asideWidth - 0.1rem;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
106
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
107 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
108
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
109 .wvLayoutLeft__contentBottom {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
110 // Enforce width even if there is a scrollbar on win/IE11 (-1 px for
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
111 // border).
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
112 width: $asideWidth - 0.1rem;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
113 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
114 .wvLayout__leftBottom.wvLayout__leftBottom--enabled {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
115 border-top: 1px solid hsla(0, 0%, 100%, 0.2);
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
116 margin-top: 1rem;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
117 padding: 1rem;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
118
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
119 // Prevent from taking more space than intended.
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
120 // flex-grow: 0;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
121 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
122
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
123 .wvLayoutLeft__actions,
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
124 %wvLayoutLeft__actions{
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
125 display:block;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
126 position:absolute;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
127 right:1px; // border
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
128 top: 50%;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
129 transform: translateY(-50%);
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
130 width:25px;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
131 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
132 .wvLayoutLeft__actions--outside{
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
133 @extend.wvLayoutLeft__actions;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
134 right:-25px; // width + border
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
135 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
136 .wvLayoutLeft__action{
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
137 background-color:$primary;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
138 opacity: 0.5;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
139 color:white;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
140 transition: none;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
141 &:hover, &:focus{
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
142 opacity: 1;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
143 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
144 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
145
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
146
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
147 /* layout: right section */
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
148
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
149 // Adapt right aside based on state (opened/closed).
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
150 .wvLayout__right {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
151 display:block;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
152 position:absolute;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
153 z-index:2;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
154 background-color:black;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
155 width: $asideRightMinifyWidth;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
156
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
157 // Position the left side below the top zone if it is shown
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
158 &.wvLayout__right--toppadding {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
159 top: $topHeight;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
160 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
161 &:not(.wvLayout__right--toppadding) {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
162 top: 0;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
163 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
164
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
165 // Position the right section over the bottom one if the latter is shown
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
166 &.wvLayout__right--bottompadding {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
167 @media screen and (max-device-width: 374px) {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
168 bottom: $bottomHeightSmall;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
169 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
170 @media screen and (min-device-width: 375px) {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
171 bottom: $bottomHeightLarge;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
172 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
173 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
174 &:not(.wvLayout__right--bottompadding) {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
175 bottom: 0;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
176 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
177
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
178 // Position the right side on the right
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
179 right: 0;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
180
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
181 // When layout right is shown, nothing special happens (default state)
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
182 &:not(.wvLayout__right--closed) {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
183 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
184
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
185 // When layout right is closed, move it aside
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
186 &.wvLayout__right--closed {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
187 transform: translateX(+ $asideRightMinifyWidth); // Move all out of the screen
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
188 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
189
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
190 // Set childrens to full height (so border-left appears at 100% height)
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
191 & > wv-layout-right,
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
192 & > wv-layout-right > .wvViewer__asideRight
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
193 {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
194 display: block;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
195 height: 100%;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
196 width: 100%;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
197 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
198 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
199
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
200 .wvAsideRight__content {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
201 height: 100%;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
202 float: left;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
203
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
204 border-left: 1px solid #AAA;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
205
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
206 padding: 0 $asideRightPadding/2;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
207 width: $asideWidth;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
208 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
209
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
210 .wvAsideRight__actions,
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
211 %wvAsideRight__actions{
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
212 display:block;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
213 position:absolute;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
214 left:1px; // border
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
215 top: 50%;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
216 transform: translateY(-50%);
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
217 width:25px;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
218
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
219 // Compensate aside z-index to let user click on button when another button
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
220 // is behind the actions.
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
221 z-index: 3;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
222 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
223 .wvAsideRight__actions--outside{
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
224 @extend.wvAsideRight__actions;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
225 left:-25px; // width + border
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
226 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
227 .wvAsideRight__action{
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
228 background-color:$primary;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
229 opacity: 0.5;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
230 color:white;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
231 transition: none;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
232 &:hover, &:focus{
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
233 opacity: 1;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
234 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
235 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
236 .wvAsideRight__fixOpenFullyTooltip + .tooltip { // Fix the "open fully" bad tooltip placement of the asideRight
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
237 left: -6.633em !important;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
238 top: 1px !important;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
239 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
240
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
241
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
242 /* layout: bottom section */
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
243
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
244 // Set bottom section size & position
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
245 .wvLayout__bottom {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
246 position: absolute;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
247
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
248 // Display the bottom bar in the bottom side
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
249 @media screen and (max-device-width: 374px) {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
250 height: $bottomHeightSmall;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
251 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
252 @media screen and (min-device-width: 375px) {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
253 height: $bottomHeightLarge;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
254 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
255
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
256 left: 0;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
257 bottom: 0;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
258 right: 0;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
259
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
260 // Set grey background color (as it is only used to display notices)
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
261 background-color: hsl(0, 0%, 10%);
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
262 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
263
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
264
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
265 /* layout: main section */
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
266
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
267 // Set main section size & position
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
268 .wvLayout__main {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
269 position: absolute;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
270
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
271 // Align content (such as toolbar)
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
272 text-align: center;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
273
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
274 // Position splitpane considering the toolbar when toolbar is present.
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
275 & .wvLayout__splitpane--toolbarAtTop {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
276 display: block;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
277 height: calc(100% - #{$toolbarHeight});
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
278 width: 100%;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
279
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
280 position: relative;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
281 top: $toolbarHeight;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
282 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
283 & .wvLayout__splitpane--toolbarAtRight {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
284 display: block;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
285 height: 100%;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
286 width: calc(100% - #{$toolbarHeight});
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
287 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
288
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
289 & .wvLayout__splitpane--bigToolbarAtTop {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
290 display: block;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
291 height: calc(100% - 68px);
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
292 width: 100%;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
293
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
294 position: relative;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
295 top: 68px;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
296 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
297 & .wvLayout__splitpane--bigToolbarAtRight {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
298 display: block;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
299 height: 100%;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
300 width: calc(100% - 68px);
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
301 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
302
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
303 // Position the main section below the top zone if the latter is shown
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
304 &.wvLayout__main--toppadding {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
305 top: $topHeight;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
306 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
307 &:not(.wvLayout__main--toppadding) {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
308 top: 0;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
309 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
310
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
311 // Position the main section over the bottom one if the latter is shown
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
312 &.wvLayout__main--bottompadding {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
313 bottom:440px;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
314 @media screen and (max-device-width: 374px) {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
315 bottom: $bottomHeightSmall;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
316 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
317 @media screen and (min-device-width: 375px) {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
318 bottom: $bottomHeightLarge;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
319 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
320 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
321 &:not(.wvLayout__main--bottompadding) {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
322 bottom: 0;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
323 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
324
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
325 // Make the main content fill the screen by default
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
326 // Depending on the browser, the left and right attributes are more
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
327 // optimized than padding's ones. The reason is that they based upon
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
328 // absolute positioning. The require no contextual positioning calculation
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
329 // and are less performance intensive, especially concidering transition
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
330 // animation.
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
331 right: 0;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
332 left: 0;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
333
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
334 // transition: 0.6s left ease, 0.6s right ease;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
335
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
336 // Adapt main section's size based on aside left's state (opened/closed)
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
337 // 1. When aside left is not hidden , move the main section 300 pixel to
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
338 // the right
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
339 &.wvLayout__main--leftpadding {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
340 left: $asideWidth;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
341 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
342 // 2. When aside left is hidden, let the main take 100% of the place
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
343 &:not(.wvLayout__main--leftpadding, .wvLayout__main--smallleftpadding) {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
344 left: 0px;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
345 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
346 &.wvLayout__main--smallleftpadding {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
347 left: $asideMinifyWidth;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
348 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
349
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
350 // Adapt main section's size based on aside right's state (opened/closed)
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
351 // 1. When aside right is not hidden , move the main section 84 pixel to
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
352 // the left
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
353 &.wvLayout__main--rightpadding {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
354 right: $asideRightMinifyWidth;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
355 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
356 // 2. When aside right is hidden, let the main take 100% of the place
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
357 &:not(.wvLayout__main--rightpadding) {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
358 right: 0px;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
359 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
360 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
361
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
362 /* global */
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
363 .popover {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
364 // Set back black as default popover text color
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
365 color: black;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
366 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
367
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
368 .wvViewer__editor--full{
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
369 position:absolute;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
370 top:0;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
371 right:0;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
372 z-index:10;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
373 opacity:0;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
374 transform: translateX(100%);
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
375 width:100%;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
376 height:100%;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
377 background-color:white;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
378 color:$text-color;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
379 &.opened{
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
380 opacity:1;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
381 transform: translateX(0);
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
382 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
383 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
384
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
385 .wvViewer__topBar{
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
386 width:100%;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
387 // margin-top: 0.5rem;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
388
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
389 // Allow user to scroll through the toolbar if screen is too small. Note we
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
390 // can't use z-index properly to show buttons on top of the viewer, as any
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
391 // popover will appear behind them (even with higher z-index) due to an
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
392 // overflow property hidden somewhere.
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
393 overflow-y: auto;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
394 white-space: nowrap;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
395 max-width: 100%;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
396 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
397 .wvViewer__buttonGroup{
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
398 display:inline-block;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
399 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
400 .wvViewer__buttonGroup--asideWidth{
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
401 width: $asideWidth;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
402 padding-right: 1rem;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
403 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
404 .wvViewer__buttonGroup--contentWidth{
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
405 width: calc(100% - #{$asideWidth});
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
406 padding-left: 1rem;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
407 max-height: 4.2rem; // Make sure mobile keeps the menubar below a certain size
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
408 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
409 .wvViewer__iframe{
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
410 position:absolute;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
411 left:0;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
412 top:0;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
413 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
414
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
415 /* bottom bar */
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
416 .wvViewer__bottomBar,
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
417 %wvViewer__bottomBar{
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
418 position:absolute;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
419 left:0;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
420 bottom:0;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
421 width:100%;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
422 background-color:#111111;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
423 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
424
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
425 .wvViewer__bottomBar--expanded{
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
426 @extend .wvViewer__bottomBar;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
427 height: 80px; //total height of the last serieList cell (64 + 10(margin bottom previous item) + item padding bottom +1 border-width (top item)
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
428 //border-top: 1px solid rgba(255,255,255,0.1);
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
429 color:white;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
430
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
431 .wvViewer__timeline{
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
432 width: calc(100% - 80px);
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
433 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
434 .wvTimeline__hotspots{
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
435 bottom: -40px;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
436 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
437 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
438
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
439 .wvViewer__bottomBar--minimized{
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
440 @extend .wvViewer__bottomBar;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
441 color: white;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
442
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
443 padding-top: 0.5rem;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
444 padding-bottom: 0.5rem;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
445 padding-left: 2.5rem;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
446
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
447 .wvTimeline__hotspot{
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
448 top: -40px;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
449 opacity:0;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
450 visibility:hidden;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
451 z-index:-1;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
452 // transition: all 0.3s ease 0.6s; //adding a delay when mouse leave
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
453 // transition-property: opacity, visibility, z-index;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
454 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
455 &:hover .wvTimeline__hotspot{
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
456 opacity:1;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
457 visibility: visible;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
458 z-index:5;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
459 transition-delay: 0s;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
460 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
461 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
462
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
463 .wvViewer__timeline{
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
464 height:24px;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
465 //background-color:rgba(1,1,1,0.2);
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
466 line-height: 24px;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
467 vertical-align: middle;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
468 width:100%;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
469 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
470
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
471 .wvViewer__trademark{
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
472 display:inline-block;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
473 float:right;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
474 width:80px;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
475 height:80px;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
476 float:right;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
477 line-height: 80px;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
478 vertical-align: middle;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
479 text-align: center;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
480 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
481 .wvTimeline__action--text{
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
482
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
483 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
484 .wvTimeline__input{
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
485 border-radius: 3px;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
486 &:focus{
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
487 outline:none;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
488 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
489 margin-top:2px;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
490 border: 1px solid $border-color;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
491 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
492
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
493 .wvTimeline__actions{
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
494 display:inline-block;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
495 border-right: 1px solid $border-color;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
496 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
497 .wvTimeline__wrapper{
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
498 }