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       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 }