Make scrolling blocks usable

src/app/components/shared/select-add/select-add.component.html

@@ -1,5 +1,8 @@
-<div class="select-add {{ onlyShadowBorder ? 'shadow-border' : '' }}" (click)="$event.stopPropagation()">
-  <div #top class="top" (click)="!editMode && toggle()">
+<div
+  class="select-add {{ onlyShadowBorder ? 'shadow-border' : '' }} {{ disabled ? 'disabled' : '' }}"
+  (click)="$event.stopPropagation()"
+>
+  <div #top class="top" (click)="!editMode && !disabled && toggle()">
     <p [innerHTML]="selected ? selected : placeholder" *ngIf="!editMode || !selected; else editableSelected"></p>
     <ng-template #editableSelected>
       <input type="text" [value]="selected" (change)="changeOption(selected, $event)" />

src/app/components/shared/select-add/select-add.component.scss

@@ -5,6 +5,12 @@ $inner-padding: var(--medium-padding);
   width: 100%;
   position: relative;
 
+  &.disabled {
+    .top {
+      cursor: not-allowed !important;
+    }
+  }
+
   .top,
   .bottom {
     padding: $inner-padding;

src/app/components/shared/select-add/select-add.component.ts

@@ -13,6 +13,7 @@ export class SelectAddComponent {
   @Input() alwaysDropShadow = false;
   @Input() onlyShadowBorder = false;
   @Input() editable = false;
+  @Input() disabled = false;
 
   @Input() set default(value: string) {
     this.selected = value;

src/app/components/shared/toggle/toggle.component.html

@@ -1,5 +1,7 @@
 <span [className]="!on ? 'active' : ''" (click)="on = false" [innerText]="beforeText"></span>
 
-<input type="checkbox" [(ngModel)]="on" [className]="on ? 'on' : ''" />
+<label class="{{ disabled ? 'disabled' : '' }}">
+  <input type="checkbox" [disabled]="disabled" [(ngModel)]="on" [className]="on ? 'on' : ''" />
+</label>
 
 <span [className]="on ? 'active' : ''" (click)="on = true" [innerText]="afterText"></span>

src/app/components/shared/toggle/toggle.component.scss

@@ -24,46 +24,54 @@
     }
   }
 
-  input[type='checkbox'] {
-    -webkit-appearance: none;
-    -moz-appearance: none;
+  label {
+    display: block;
 
-    width: 2 * $size;
-    height: $size;
+    input[type='checkbox'] {
+      -webkit-appearance: none;
+      -moz-appearance: none;
 
-    border-radius: 1000px;
-    box-shadow: $shadow-border;
-
-    position: relative;
-    cursor: pointer;
-
-    &:after {
-      content: '';
-      position: absolute;
-      display: block;
-      left: 0;
-
-      @include square($size);
+      width: 2 * $size;
+      height: $size;
 
       border-radius: 1000px;
-      background-color: $text-color;
+      box-shadow: $shadow-border;
 
-      transition: box-shadow $long-animation-time, left $long-animation-time, transform $long-animation-time;
-    }
+      position: relative;
+      cursor: pointer;
 
-    @media (min-width: $mobile-width) {
-      &:hover:after {
-        box-shadow: $shadow;
-        transform: translateX(2px);
+      &:after {
+        content: '';
+        position: absolute;
+        display: block;
+        left: 0;
+
+        @include square($size);
+
+        border-radius: 1000px;
+        background-color: $text-color;
+
+        transition: box-shadow $long-animation-time, left $long-animation-time, transform $long-animation-time;
       }
 
-      &.on:hover:after {
-        transform: translateX(-2px);
+      &.on:after {
+        left: $size;
       }
     }
 
-    &.on:after {
-      left: $size;
+    &:not(.disabled) {
+      input[type='checkbox'] {
+        @media (min-width: $mobile-width) {
+          &:hover:after {
+            box-shadow: $shadow;
+            transform: translateX(2px);
+          }
+
+          &.on:hover:after {
+            transform: translateX(-2px);
+          }
+        }
+      }
     }
   }
 }

src/app/components/shared/toggle/toggle.component.ts

@@ -9,6 +9,8 @@ export class ToggleComponent {
   @Input() beforeText: string;
   @Input() afterText: string;
 
+  @Input() disabled = false;
+
   @Output() value: EventEmitter<boolean> = new EventEmitter();
 
   @Input() set default(value: boolean) {