feat: move styling to es-ds-styles

EnergySage · Oct 1, 2024 · f694df5 · f694df5
1 parent 65860cc
commit f694df5
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 10 deletions.
diff --git a/es-ds-components/components/es-video.vue b/es-ds-components/components/es-video.vue
@@ -70,18 +70,9 @@ function handleLoadVideo() {
                 class="EsVideo-image d-block w-100"
                 :src="props.coverImageUrl" />
             <icon-video-play
-                class="EsVideo-icon position-absolute center-this"
+                class="EsVideo-icon position-absolute abs-center"
                 width="74px"
                 height="54px" />
         </es-card>
     </div>
 </template>
-
-<style lang="scss" scoped>
-.center-this {
-    left: 50%;
-    top: 50%;
-    transform: translateX(-50%) translateY(-50%);
-    z-index: 2;
-}
-</style>
diff --git a/es-ds-styles/scss/_variables.scss b/es-ds-styles/scss/_variables.scss
@@ -1325,6 +1325,7 @@ $form-validation-states: map.merge(
 $zindex-dropdown:                   1000 !default;
 $zindex-sticky:                     1020 !default;
 $zindex-fixed:                      1030 !default;
+$zindex-overlay:                    1035 !default;
 $zindex-modal-backdrop:             1040 !default;
 $zindex-modal:                      1050 !default;
 $zindex-popover:                    1060 !default;

diff --git a/es-ds-styles/scss/utilities/_position.scss b/es-ds-styles/scss/utilities/_position.scss
@@ -32,3 +32,11 @@
     z-index: variables.$zindex-sticky;
   }
 }
+
+// Used with position-absolute to center an element within it's container
+.abs-center {
+    left: 50%;
+    top: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    z-index: variables.$zindex-overlay;
+}