Fix Slideshow Block navigation arrows in editor to close #159

pixelgrade · Sep 14, 2020 · 49d3bdc · 49d3bdc
1 parent 2915632
commit 49d3bdc
Show file tree

Hide file tree

Showing 7 changed files with 163 additions and 3 deletions.
diff --git a/dist/css/block-editor-rtl.css b/dist/css/block-editor-rtl.css
@@ -361,6 +361,43 @@
     border: 0; }
   .editor-styles-wrapper .picker__frame {
     --current-font-size: 16px; }
+  .editor-styles-wrapper .novablocks-slideshow__arrow {
+    width: 50px;
+    height: 50px;
+    background-color: transparent;
+    transform: translateY(-50%); }
+    .editor-styles-wrapper .novablocks-slideshow__arrow:hover:after {
+      opacity: .1; }
+  .editor-styles-wrapper .novablocks-slideshow__arrow--prev:before,
+  .editor-styles-wrapper .novablocks-slideshow__arrow--next:before {
+    content: "";
+    display: block;
+    width: 32px;
+    height: 32px;
+    margin: 0;
+    border: 0;
+    padding: 0;
+    mask: url("../../assets/images/icon-arrow.svg") no-repeat 50% 50%;
+    mask-size: cover;
+    -webkit-mask: url("../../assets/images/icon-arrow.svg") no-repeat 50% 50%;
+    -webkit-mask-size: cover;
+    background-color: var(--current-light-primary); }
+  .editor-styles-wrapper .novablocks-slideshow__arrow--prev:before {
+    transform: translate(50%, -50%); }
+  .editor-styles-wrapper .novablocks-slideshow__arrow--next:before {
+    transform: translate(50%, -50%) rotate(-180deg); }
+  .editor-styles-wrapper .novablocks-slideshow__arrow:after {
+    content: "";
+    display: block;
+    width: 50px;
+    height: 50px;
+    margin-top: 0;
+    border: 0;
+    border-radius: 50%;
+    background-color: var(--current-light-primary);
+    opacity: 0;
+    transition: opacity 0.15s ease-in;
+    transform: none; }
   .editor-styles-wrapper .novablocks-card {
     --font-size: var(--theme-body-font-size);
     font-size: var(--final-font-size);

diff --git a/dist/css/block-editor.css b/dist/css/block-editor.css
@@ -361,6 +361,43 @@
     border: 0; }
   .editor-styles-wrapper .picker__frame {
     --current-font-size: 16px; }
+  .editor-styles-wrapper .novablocks-slideshow__arrow {
+    width: 50px;
+    height: 50px;
+    background-color: transparent;
+    transform: translateY(-50%); }
+    .editor-styles-wrapper .novablocks-slideshow__arrow:hover:after {
+      opacity: .1; }
+  .editor-styles-wrapper .novablocks-slideshow__arrow--prev:before,
+  .editor-styles-wrapper .novablocks-slideshow__arrow--next:before {
+    content: "";
+    display: block;
+    width: 32px;
+    height: 32px;
+    margin: 0;
+    border: 0;
+    padding: 0;
+    mask: url("../../assets/images/icon-arrow.svg") no-repeat 50% 50%;
+    mask-size: cover;
+    -webkit-mask: url("../../assets/images/icon-arrow.svg") no-repeat 50% 50%;
+    -webkit-mask-size: cover;
+    background-color: var(--current-light-primary); }
+  .editor-styles-wrapper .novablocks-slideshow__arrow--prev:before {
+    transform: translate(-50%, -50%); }
+  .editor-styles-wrapper .novablocks-slideshow__arrow--next:before {
+    transform: translate(-50%, -50%) rotate(180deg); }
+  .editor-styles-wrapper .novablocks-slideshow__arrow:after {
+    content: "";
+    display: block;
+    width: 50px;
+    height: 50px;
+    margin-top: 0;
+    border: 0;
+    border-radius: 50%;
+    background-color: var(--current-light-primary);
+    opacity: 0;
+    transition: opacity 0.15s ease-in;
+    transform: none; }
   .editor-styles-wrapper .novablocks-card {
     --font-size: var(--theme-body-font-size);
     font-size: var(--final-font-size);

diff --git a/dist/css/blocks/editor-rtl.css b/dist/css/blocks/editor-rtl.css
@@ -389,6 +389,48 @@ ul.wp-block-categories__list[class] {
 .picker__frame {
   --current-font-size: 16px; }
 
+.novablocks-slideshow__arrow {
+  width: 50px;
+  height: 50px;
+  background-color: transparent;
+  transform: translateY(-50%); }
+  .novablocks-slideshow__arrow:hover:after {
+    opacity: .1; }
+
+.novablocks-slideshow__arrow--prev:before,
+.novablocks-slideshow__arrow--next:before {
+  content: "";
+  display: block;
+  width: 32px;
+  height: 32px;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  mask: url("../../assets/images/icon-arrow.svg") no-repeat 50% 50%;
+  mask-size: cover;
+  -webkit-mask: url("../../assets/images/icon-arrow.svg") no-repeat 50% 50%;
+  -webkit-mask-size: cover;
+  background-color: var(--current-light-primary); }
+
+.novablocks-slideshow__arrow--prev:before {
+  transform: translate(50%, -50%); }
+
+.novablocks-slideshow__arrow--next:before {
+  transform: translate(50%, -50%) rotate(-180deg); }
+
+.novablocks-slideshow__arrow:after {
+  content: "";
+  display: block;
+  width: 50px;
+  height: 50px;
+  margin-top: 0;
+  border: 0;
+  border-radius: 50%;
+  background-color: var(--current-light-primary);
+  opacity: 0;
+  transition: opacity 0.15s ease-in;
+  transform: none; }
+
 .novablocks-card {
   --font-size: var(--theme-body-font-size);
   font-size: var(--final-font-size);

diff --git a/dist/css/blocks/editor.css b/dist/css/blocks/editor.css
@@ -389,6 +389,48 @@ ul.wp-block-categories__list[class] {
 .picker__frame {
   --current-font-size: 16px; }
 
+.novablocks-slideshow__arrow {
+  width: 50px;
+  height: 50px;
+  background-color: transparent;
+  transform: translateY(-50%); }
+  .novablocks-slideshow__arrow:hover:after {
+    opacity: .1; }
+
+.novablocks-slideshow__arrow--prev:before,
+.novablocks-slideshow__arrow--next:before {
+  content: "";
+  display: block;
+  width: 32px;
+  height: 32px;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  mask: url("../../assets/images/icon-arrow.svg") no-repeat 50% 50%;
+  mask-size: cover;
+  -webkit-mask: url("../../assets/images/icon-arrow.svg") no-repeat 50% 50%;
+  -webkit-mask-size: cover;
+  background-color: var(--current-light-primary); }
+
+.novablocks-slideshow__arrow--prev:before {
+  transform: translate(-50%, -50%); }
+
+.novablocks-slideshow__arrow--next:before {
+  transform: translate(-50%, -50%) rotate(180deg); }
+
+.novablocks-slideshow__arrow:after {
+  content: "";
+  display: block;
+  width: 50px;
+  height: 50px;
+  margin-top: 0;
+  border: 0;
+  border-radius: 50%;
+  background-color: var(--current-light-primary);
+  opacity: 0;
+  transition: opacity 0.15s ease-in;
+  transform: none; }
+
 .novablocks-card {
   --font-size: var(--theme-body-font-size);
   font-size: var(--final-font-size);

diff --git a/src/scss/blocks/editor.scss b/src/scss/blocks/editor.scss
@@ -1,4 +1,4 @@
-$assets-folder-path: '../../../assets';
+$assets-folder-path: '../../assets';
 
 @import "../setup";
 
@@ -21,4 +21,4 @@ $assets-folder-path: '../../../assets';
 @import "core/social-links/editor";
 @import "core/table/editor";
 
-@import "nova-blocks/editor";
+@import "nova-blocks/editor";
diff --git a/src/scss/blocks/nova-blocks/slideshow/_editor.scss b/src/scss/blocks/nova-blocks/slideshow/_editor.scss
@@ -0,0 +1,2 @@
+@import "style";
+
diff --git a/src/scss/setup/_settings.scss b/src/scss/setup/_settings.scss
@@ -1,7 +1,7 @@
 $enable-separator-block-styles: false;
 
 $assets-folder-path: './assets' !default;
-$images-folder-path: '#{$assets-folder-path}/images' !default;
+$images-folder-path: '#{$assets-folder-path}/images';
 
 $icon-arrow-svg-path: '#{$images-folder-path}/icon-arrow.svg';
 $arrow-down-svg-path: '#{$images-folder-path}/arrow-down.svg';