First steps towards drop modal mobile view

frontend/src/app/spot/components/drop-modal/drop-modal.component.html

@@ -5,3 +5,11 @@
 >
   <ng-content select="[slot=body]"></ng-content>
 </div>
+<button
+  class="spot-drop-modal--close-button spot-button spot-button"
+  type="button"
+  aria-label="Close"
+  (click)="close()"
+>
+  <span class="icon-close"></span>
+</button>

frontend/src/app/spot/styles/sass/components/drop-modal.sass

@@ -3,40 +3,86 @@
   display: inline-flex
 
   &--body
-    @include spot-z-index("drop-modal")
+    @include spot-z-index("drop-modal", 1)
+    pointer-events: none
+    opacity: 0
+
+    position: fixed
+    top: auto
+    height: auto
+    bottom: $spot-spacing-3_5 
+    left: $spot-spacing-1
+    right: $spot-spacing-1
+    width: calc(100vw - (2 * #{$spot-spacing-1}))
+    max-height: calc(100vh - (#{$spot-spacing-3_5} - #{$spot-spacing-1}))
 
     box-shadow: $spot-shadow-light-mid
-    position: absolute
     background: $spot-color-basic-white
     border-radius: 5px
-    pointer-events: none
-    opacity: 0
 
-    &_bottom-center
+    @media #{$spot-mq-drop-modal-in-context}
-      top: calc(100% + #{$spot-spacing-0_25})
+      position: absolute
-      left: 50%
+      top: unset
-      transform: translateX(-50%)
+      bottom: unset
+      left: unset
+      right: unset
+
+      &_bottom-center
+        top: calc(100% + #{$spot-spacing-0_25})
+        left: 50%
+        transform: translateX(-50%)
+
+      &_bottom-left
+        top: calc(100% + #{$spot-spacing-0_25})
+        left: 0%
+
+      &_bottom-right
+        top: calc(100% + #{$spot-spacing-0_25})
+        right: 0%
+
+      &_top-center
+        bottom: calc(100% + #{$spot-spacing-0_25})
+        left: 50%
+        transform: translateX(-50%)
+
+      &_top-left
+        bottom: calc(100% + #{$spot-spacing-0_25})
+        left: 0%
 
-    &_bottom-left
+      &_top-right
-      top: calc(100% + #{$spot-spacing-0_25})
+        bottom: calc(100% + #{$spot-spacing-0_25})
-      left: 0%
+        right: 0%
+  
+  &_opened::before
+    @include spot-z-index("drop-modal", 0)
+    display: block
+    content: ''
+    position: fixed
+    top: 0
+    bottom: 0
+    left: 0
+    right: 0
+    background: rgba($spot-color-basic-black, 0.5)
 
-    &_bottom-right
+    @media #{$spot-mq-drop-modal-in-context}
-      top: calc(100% + #{$spot-spacing-0_25})
+      display: none
-      right: 0%
 
-    &_top-center
+  &--close-button
-      bottom: calc(100% + #{$spot-spacing-0_25})
+    @include spot-z-index("drop-modal", 1)
-      left: 50%
+    display: none
-      transform: translateX(-50%)
+    position: fixed
+    top: auto
+    height: auto
+    bottom: $spot-spacing-0_75
+    width: calc(100% - 2 * $spot-spacing-1)
+    left: 50%
+    transform: translateX(-50%)
 
-    &_top-left
+  &_opened &--close-button
-      bottom: calc(100% + #{$spot-spacing-0_25})
+    display: block
-      left: 0%
 
-    &_top-right
+    @media #{$spot-mq-drop-modal-in-context}
-      bottom: calc(100% + #{$spot-spacing-0_25})
+      display: none
-      right: 0%
 
   &_opened &--body
     pointer-events: all

frontend/src/app/spot/styles/tokens/dist/tokens.json

@@ -53,5 +53,8 @@
   "spot-shadow-light-high": "6px 6px 20px rgba(0, 0, 0, 0.15)",
   "spot-shadow-hard-low": "2px 2px 5px rgba(0, 0, 0, 0.25)",
   "spot-shadow-hard-mid": "4px 4px 10px rgba(0, 0, 0, 0.25)",
-  "spot-shadow-hard-high": "6px 6px 20px rgba(0, 0, 0, 0.25)"
+  "spot-shadow-hard-high": "6px 6px 20px rgba(0, 0, 0, 0.25)",
-}
+  "spot-mq-drop-modal-in-context": "'screen and (min-width: 768px)'",
+  "spot-mq-portrait": "'screen and (orientation: portrait)'",
+  "spot-mq-landscape": "'screen and (orientation: landscape)'"
+}

frontend/src/app/spot/styles/tokens/dist/tokens.sass

@@ -54,3 +54,6 @@ $spot-shadow-light-high: 6px 6px 20px rgba(0, 0, 0, 0.15)
 $spot-shadow-hard-low: 2px 2px 5px rgba(0, 0, 0, 0.25)
 $spot-shadow-hard-mid: 4px 4px 10px rgba(0, 0, 0, 0.25)
 $spot-shadow-hard-high: 6px 6px 20px rgba(0, 0, 0, 0.25)
+$spot-mq-drop-modal-in-context: 'screen and (min-width: 768px)'
+$spot-mq-portrait: 'screen and (orientation: portrait)'
+$spot-mq-landscape: 'screen and (orientation: landscape)'

frontend/src/app/spot/styles/tokens/media-queries.yml

@@ -0,0 +1,11 @@
+props:
+  spot-mq-drop-modal-in-context:
+    value: "'screen and (min-width: 768px)'"
+  spot-mq-portrait:
+    value: "'screen and (orientation: portrait)'"
+  spot-mq-landscape:
+    value: "'screen and (orientation: landscape)'"
+
+global:
+  type: media-query
+  category: media-query

frontend/src/app/spot/styles/tokens/tokens.yml

@@ -2,3 +2,4 @@ imports:
   - ./colors.yml
   - ./spacings.yml
   - ./shadows.yml
+  - ./media-queries.yml