change gradient

Author: cviterirei

src/components/objectOverlay/examples/ObjectOverlay.vue

@@ -18,7 +18,7 @@ defineOptions({ name: 'ObjectOverlay' });
 
   <hr />
 
-  <CdrObjectOverlay :position="{ xs: 'center-center', lg: 'bottom-center' }" :margin="['zero', 'eighth-x']">
+  <CdrObjectOverlay :position="{ xs: 'center-center', lg: 'bottom-center', md: 'bottom-left' }" :margin="['zero', 'eighth-x']">
     <template #container>
       <img src="https://placehold.co/600x400" width="100%" height="100%" alt="Background image" :style="{ display: 'block' }"/>
     </template>

src/components/objectOverlay/styles/CdrObjectOverlay.module.scss

@@ -21,10 +21,10 @@ $positions: (
 );
 
 $gradients: (
-  'to-top': linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent),
-  'to-bottom': linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent),
-  'to-left': linear-gradient(to left, rgba(0, 0, 0, 0.5), transparent),
-  'to-right': linear-gradient(to right, rgba(0, 0, 0, 0.5), transparent)
+  'to-top': linear-gradient(to top, black 0%, rgba(0, 0, 0, 0.55) 40%, transparent),
+  'to-bottom': linear-gradient(to bottom, black 0%, rgba(0, 0, 0, 0.55) 40%, transparent),
+  'to-left': linear-gradient(to left, black 0%, rgba(0, 0, 0, 0.55) 40%, transparent),
+  'to-right': linear-gradient(to right, black 0%, rgba(0, 0, 0, 0.55) 40%, transparent)
 );
 
 .cdr-object-overlay {