client/src/app/shared/forms/markdown-textarea.component.scss

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