markdown-textarea.component.scss 5.79 KB
Newer Older
1
2
3
@import '_variables';
@import '_mixins';

4
5
6
7
8
9
10
11
12
13
14
15
16
$nav-preview-tab-height: 30px;
$base-padding: 15px;
$input-border-color: #C6C6C6;
$input-border-radius: 3px;

@mixin in-small-view {
  .root {
    display: flex;
    flex-direction: column;

    textarea {
      @include peertube-textarea(100%, 150px);

17
      background-color: pvar(--markdownTextareaBackgroundColor);
Chocobozzz's avatar
Chocobozzz committed
18

19
      font-family: monospace;
20
      font-size: 13px;
Chocobozzz's avatar
Chocobozzz committed
21
      border-bottom: 0;
22
23
24
      border-bottom-left-radius: unset;
      border-bottom-right-radius: unset;
    }
Chocobozzz's avatar
Chocobozzz committed
25

26
    .nav-preview {
Chocobozzz's avatar
Chocobozzz committed
27
28
29
      @include padding-left(10px);
      @include padding-right(10px);

30
      display: block;
Chocobozzz's avatar
Chocobozzz committed
31
      text-align: end;
32
33
34
35
36
37
38
      padding-top: 10px;
      padding-bottom: 10px;
      border-top: 1px dashed $input-border-color;
      border-left: 1px solid $input-border-color;
      border-right: 1px solid $input-border-color;
      border-bottom: 1px solid $input-border-color;
      border-bottom-right-radius: $input-border-radius;
39

40
41
42
43
44
45
      border-bottom-left-radius: $input-border-radius;
      ::ng-deep {
        .nav-link {
          display: none !important;
        }

46
47
48
49
50
51
52
53
54
        .maximize-button {
          padding: 0 7px;
          cursor: pointer;

          svg {
            stroke: var(--mainForegroundColor);
            opacity: 0.6;
          }

Chocobozzz's avatar
Chocobozzz committed
55
56
          &:hover,
          &:active {
57
58
59
60
            svg {
              opacity: 1;
            }
          }
61
62
63
64
65
66
67
68
69
        }
      }
    }

    ::ng-deep {
      .tab-content {
        display: none;
      }
    }
70
  }
71
72
73
74
75
76
77
}

@mixin nav-preview-medium {
  display: flex;
  flex-grow: 1;
  border-bottom-left-radius: unset;
  border-bottom-right-radius: unset;
78
  border-bottom: 2px solid pvar(--mainColor);
79

80
  :first-child {
Chocobozzz's avatar
Chocobozzz committed
81
    @include margin-left(auto);
Chocobozzz's avatar
Chocobozzz committed
82
83
  }

Chocobozzz's avatar
Chocobozzz committed
84
  ::ng-deep {
85
86
87
    .nav-link {
      display: flex !important;
      align-items: center;
88
      height: $nav-preview-tab-height !important;
89
      padding: 0 15px !important;
90
91
      font-size: 85% !important;
      opacity: .7;
92
93
    }

94
    .maximize-button {
Chocobozzz's avatar
Chocobozzz committed
95
      @include margin-left(5px);
96
97
98
99
100
101
102
103
104
105
106
107
108
109
    }
  }
}

@mixin content-preview-base {
  display: block;
  min-height: 75px;
  padding: $base-padding;
  overflow-y: auto;
  font-size: 15px;
  word-wrap: break-word;
}

@mixin maximized-base {
Chocobozzz's avatar
Chocobozzz committed
110
111
  $nav-preview-vertical-padding: 40px;

112
113
114
115
116
117
118
119
120
121
122
123
  flex-direction: row;
  z-index: #{z(header) - 1};
  position: fixed;
  top: $header-height;
  left: $menu-width;
  max-height: none !important;
  max-width: none !important;
  width: calc(100% - #{$menu-width});
  height: calc(100vh - #{$header-height}) !important;

  .nav-preview {
    @include nav-preview-medium();
Chocobozzz's avatar
Chocobozzz committed
124
125
126
    @include padding-right(0);
    @include padding-left(0);

127
128
129
    padding-top: #{$nav-preview-vertical-padding / 2};
    padding-bottom: #{$nav-preview-vertical-padding / 2};
    position: absolute;
130
    background-color: pvar(--mainBackgroundColor);
131
    width: 100% !important;
Chocobozzz's avatar
Chocobozzz committed
132
133
134
    border-top: 0;
    border-left: 0;
    border-right: 0;
135
136

    :last-child {
Chocobozzz's avatar
Chocobozzz committed
137
      @include margin-right(pvar(--horizontalMarginContent));
138
139
140
141
142
    }
  }

  ::ng-deep .tab-content {
    @include content-preview-base();
143
144
    background-color: pvar(--mainBackgroundColor);
    scrollbar-color: pvar(--actionButtonColor) pvar(--mainBackgroundColor);
145
146
147
148
149
150
151
152
153
  }

  textarea,
  ::ng-deep .tab-content {
    max-height: none !important;
    max-width: none !important;
    margin-top: #{$nav-preview-tab-height + $nav-preview-vertical-padding} !important;
    height: calc(100vh - #{$header-height + $nav-preview-tab-height + $nav-preview-vertical-padding}) !important;
    width: 50% !important;
Chocobozzz's avatar
Chocobozzz committed
154
    border: 0 !important;
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
    border-radius: unset !important;
  }

  :host-context(.expanded) {
    .root.maximized {
      left: 0;
      width: 100%;
    }
  }
}

@mixin maximized-in-small-view {
  .root.maximized {
    @include maximized-base();

    textarea {
      display: none;
172
    }
173
174
175
176
177
178
179
180
181
182
183
184
185

    ::ng-deep .tab-content {
      width: 100% !important;
    }
  }
}

@mixin maximized-tabs-in-mobile-view {
  // Ellipsis on tabs for mobile view
  .root.maximized {
    .nav-preview {
      ::ng-deep .nav-link {
        @include ellipsis();
Chocobozzz's avatar
Chocobozzz committed
186
        @include margin-right(10px !important);
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231

        display: block !important;
        max-width: 45% !important;
        padding: 5px 0 !important;
        text-align: center;

        &:not(.active) {
          max-width: 15% !important;
        }

        &.active {
          padding: 5px 15px !important;
        }
      }
    }
  }
}

@mixin in-medium-view {
  .root {
    .nav-preview {
      @include nav-preview-medium();
    }

    ::ng-deep .tab-content {
      @include content-preview-base();
      max-height: 210px;
      border-bottom: 1px solid $input-border-color;
      border-left: 1px solid $input-border-color;
      border-right: 1px solid $input-border-color;
      border-bottom-left-radius: $input-border-radius;
      border-bottom-right-radius: $input-border-radius;
    }
  }
}

@mixin maximized-in-medium-view {
  .root.maximized {
    @include maximized-base();

    textarea {
      display: block;
      padding: $base-padding;
      border-right: 1px dashed $input-border-color !important;
      resize: none;
232
      scrollbar-color: pvar(--actionButtonColor) pvar(--markdownTextareaBackgroundColor);
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254

      &:focus {
        box-shadow: none;
      }
    }
  }
}

@include in-small-view();
@include maximized-in-small-view();

@media only screen and (max-width: $mobile-view) {
  @include maximized-tabs-in-mobile-view();
}

@media only screen and (max-width: #{$mobile-view + $menu-width}) {
  :host-context(.main-col:not(.expanded)) {
    @include maximized-tabs-in-mobile-view();
  }
}

@media only screen and (min-width: $small-view) {
Chocobozzz's avatar
Chocobozzz committed
255
256
  @include maximized-in-medium-view();

257
258
259
260
261
262
263
264
  :host-context(.expanded) {
    @include in-medium-view();
  }
}

@media only screen and (min-width: #{$small-view + $menu-width}) {
  :host-context(.main-col:not(.expanded)) {
    @include in-medium-view();
265
266
  }
}