diff options
author | Chocobozzz <me@florianbigard.com> | 2020-06-23 14:10:17 +0200 |
---|---|---|
committer | Chocobozzz <chocobozzz@cpy.re> | 2020-06-23 16:00:49 +0200 |
commit | 67ed6552b831df66713bac9e672738796128d33f (patch) | |
tree | 59c97d41e0b49d75a90aa3de987968ab9b1ff447 /client/src/app/shared/forms/markdown-textarea.component.scss | |
parent | 0c4bacbff53bc732f5a2677d62a6ead7752e2405 (diff) | |
download | PeerTube-67ed6552b831df66713bac9e672738796128d33f.tar.gz PeerTube-67ed6552b831df66713bac9e672738796128d33f.tar.zst PeerTube-67ed6552b831df66713bac9e672738796128d33f.zip |
Reorganize client shared modules
Diffstat (limited to 'client/src/app/shared/forms/markdown-textarea.component.scss')
-rw-r--r-- | client/src/app/shared/forms/markdown-textarea.component.scss | 251 |
1 files changed, 0 insertions, 251 deletions
diff --git a/client/src/app/shared/forms/markdown-textarea.component.scss b/client/src/app/shared/forms/markdown-textarea.component.scss deleted file mode 100644 index f2c76f7a1..000000000 --- a/client/src/app/shared/forms/markdown-textarea.component.scss +++ /dev/null | |||
@@ -1,251 +0,0 @@ | |||
1 | @import '_variables'; | ||
2 | @import '_mixins'; | ||
3 | |||
4 | $nav-preview-tab-height: 30px; | ||
5 | $base-padding: 15px; | ||
6 | $input-border-color: #C6C6C6; | ||
7 | $input-border-radius: 3px; | ||
8 | |||
9 | @mixin in-small-view { | ||
10 | .root { | ||
11 | display: flex; | ||
12 | flex-direction: column; | ||
13 | |||
14 | textarea { | ||
15 | @include peertube-textarea(100%, 150px); | ||
16 | |||
17 | background-color: pvar(--markdownTextareaBackgroundColor); | ||
18 | |||
19 | font-family: monospace; | ||
20 | font-size: 13px; | ||
21 | border-bottom: none; | ||
22 | border-bottom-left-radius: unset; | ||
23 | border-bottom-right-radius: unset; | ||
24 | } | ||
25 | |||
26 | .nav-preview { | ||
27 | display: block; | ||
28 | text-align: right; | ||
29 | padding-top: 10px; | ||
30 | padding-bottom: 10px; | ||
31 | padding-left: 10px; | ||
32 | padding-right: 10px; | ||
33 | border-top: 1px dashed $input-border-color; | ||
34 | border-left: 1px solid $input-border-color; | ||
35 | border-right: 1px solid $input-border-color; | ||
36 | border-bottom: 1px solid $input-border-color; | ||
37 | border-bottom-right-radius: $input-border-radius; | ||
38 | |||
39 | border-bottom-left-radius: $input-border-radius; | ||
40 | ::ng-deep { | ||
41 | .nav-link { | ||
42 | display: none !important; | ||
43 | } | ||
44 | |||
45 | .grey-button { | ||
46 | padding: 0 12px 0 12px; | ||
47 | } | ||
48 | } | ||
49 | } | ||
50 | |||
51 | ::ng-deep { | ||
52 | .tab-content { | ||
53 | display: none; | ||
54 | } | ||
55 | } | ||
56 | } | ||
57 | } | ||
58 | |||
59 | @mixin nav-preview-medium { | ||
60 | display: flex; | ||
61 | flex-grow: 1; | ||
62 | border-bottom-left-radius: unset; | ||
63 | border-bottom-right-radius: unset; | ||
64 | border-bottom: 2px solid pvar(--mainColor); | ||
65 | |||
66 | :first-child { | ||
67 | margin-left: auto; | ||
68 | } | ||
69 | |||
70 | ::ng-deep { | ||
71 | .nav-link { | ||
72 | display: flex !important; | ||
73 | align-items: center; | ||
74 | height: $nav-preview-tab-height !important; | ||
75 | padding: 0 15px !important; | ||
76 | font-size: 85% !important; | ||
77 | opacity: .7; | ||
78 | } | ||
79 | |||
80 | .grey-button { | ||
81 | margin-left: 5px; | ||
82 | } | ||
83 | } | ||
84 | } | ||
85 | |||
86 | @mixin content-preview-base { | ||
87 | display: block; | ||
88 | min-height: 75px; | ||
89 | padding: $base-padding; | ||
90 | overflow-y: auto; | ||
91 | font-size: 15px; | ||
92 | word-wrap: break-word; | ||
93 | } | ||
94 | |||
95 | @mixin maximized-base { | ||
96 | flex-direction: row; | ||
97 | z-index: #{z(header) - 1}; | ||
98 | position: fixed; | ||
99 | top: $header-height; | ||
100 | left: $menu-width; | ||
101 | max-height: none !important; | ||
102 | max-width: none !important; | ||
103 | width: calc(100% - #{$menu-width}); | ||
104 | height: calc(100vh - #{$header-height}) !important; | ||
105 | |||
106 | $nav-preview-vertical-padding: 40px; | ||
107 | |||
108 | .nav-preview { | ||
109 | @include nav-preview-medium(); | ||
110 | padding-top: #{$nav-preview-vertical-padding / 2}; | ||
111 | padding-bottom: #{$nav-preview-vertical-padding / 2}; | ||
112 | padding-left: 0px; | ||
113 | padding-right: 0px; | ||
114 | position: absolute; | ||
115 | background-color: pvar(--mainBackgroundColor); | ||
116 | width: 100% !important; | ||
117 | border-top: none; | ||
118 | border-left: none; | ||
119 | border-right: none; | ||
120 | |||
121 | :last-child { | ||
122 | margin-right: $not-expanded-horizontal-margins; | ||
123 | } | ||
124 | } | ||
125 | |||
126 | ::ng-deep .tab-content { | ||
127 | @include content-preview-base(); | ||
128 | background-color: pvar(--mainBackgroundColor); | ||
129 | scrollbar-color: pvar(--actionButtonColor) pvar(--mainBackgroundColor); | ||
130 | } | ||
131 | |||
132 | textarea, | ||
133 | ::ng-deep .tab-content { | ||
134 | max-height: none !important; | ||
135 | max-width: none !important; | ||
136 | margin-top: #{$nav-preview-tab-height + $nav-preview-vertical-padding} !important; | ||
137 | height: calc(100vh - #{$header-height + $nav-preview-tab-height + $nav-preview-vertical-padding}) !important; | ||
138 | width: 50% !important; | ||
139 | border: none !important; | ||
140 | border-radius: unset !important; | ||
141 | } | ||
142 | |||
143 | :host-context(.expanded) { | ||
144 | .root.maximized { | ||
145 | left: 0; | ||
146 | width: 100%; | ||
147 | } | ||
148 | } | ||
149 | } | ||
150 | |||
151 | @mixin maximized-in-small-view { | ||
152 | .root.maximized { | ||
153 | @include maximized-base(); | ||
154 | |||
155 | textarea { | ||
156 | display: none; | ||
157 | } | ||
158 | |||
159 | ::ng-deep .tab-content { | ||
160 | width: 100% !important; | ||
161 | } | ||
162 | } | ||
163 | } | ||
164 | |||
165 | @mixin maximized-tabs-in-mobile-view { | ||
166 | // Ellipsis on tabs for mobile view | ||
167 | .root.maximized { | ||
168 | .nav-preview { | ||
169 | ::ng-deep .nav-link { | ||
170 | @include ellipsis(); | ||
171 | |||
172 | display: block !important; | ||
173 | max-width: 45% !important; | ||
174 | padding: 5px 0 !important; | ||
175 | margin-right: 10px !important; | ||
176 | text-align: center; | ||
177 | |||
178 | &:not(.active) { | ||
179 | max-width: 15% !important; | ||
180 | } | ||
181 | |||
182 | &.active { | ||
183 | padding: 5px 15px !important; | ||
184 | } | ||
185 | } | ||
186 | } | ||
187 | } | ||
188 | } | ||
189 | |||
190 | @mixin in-medium-view { | ||
191 | .root { | ||
192 | .nav-preview { | ||
193 | @include nav-preview-medium(); | ||
194 | } | ||
195 | |||
196 | ::ng-deep .tab-content { | ||
197 | @include content-preview-base(); | ||
198 | max-height: 210px; | ||
199 | border-bottom: 1px solid $input-border-color; | ||
200 | border-left: 1px solid $input-border-color; | ||
201 | border-right: 1px solid $input-border-color; | ||
202 | border-bottom-left-radius: $input-border-radius; | ||
203 | border-bottom-right-radius: $input-border-radius; | ||
204 | } | ||
205 | } | ||
206 | } | ||
207 | |||
208 | @mixin maximized-in-medium-view { | ||
209 | .root.maximized { | ||
210 | @include maximized-base(); | ||
211 | |||
212 | textarea { | ||
213 | display: block; | ||
214 | padding: $base-padding; | ||
215 | border-right: 1px dashed $input-border-color !important; | ||
216 | resize: none; | ||
217 | scrollbar-color: pvar(--actionButtonColor) pvar(--markdownTextareaBackgroundColor); | ||
218 | |||
219 | &:focus { | ||
220 | box-shadow: none; | ||
221 | } | ||
222 | } | ||
223 | } | ||
224 | } | ||
225 | |||
226 | @include in-small-view(); | ||
227 | @include maximized-in-small-view(); | ||
228 | |||
229 | @media only screen and (max-width: $mobile-view) { | ||
230 | @include maximized-tabs-in-mobile-view(); | ||
231 | } | ||
232 | |||
233 | @media only screen and (max-width: #{$mobile-view + $menu-width}) { | ||
234 | :host-context(.main-col:not(.expanded)) { | ||
235 | @include maximized-tabs-in-mobile-view(); | ||
236 | } | ||
237 | } | ||
238 | |||
239 | @media only screen and (min-width: $small-view) { | ||
240 | :host-context(.expanded) { | ||
241 | @include in-medium-view(); | ||
242 | } | ||
243 | |||
244 | @include maximized-in-medium-view(); | ||
245 | } | ||
246 | |||
247 | @media only screen and (min-width: #{$small-view + $menu-width}) { | ||
248 | :host-context(.main-col:not(.expanded)) { | ||
249 | @include in-medium-view(); | ||
250 | } | ||
251 | } | ||