Refactor torrent-or-magnet divider in video import

diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss
index 6d59ed834290a945b814649e29d7661093008c4a..3b46475b426714239873d0a741f9b634757d551e 100644 (file)
--- a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss
+++ b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss
@@ -3,7 +3,11 @@
 
 .first-step-block {
   .torrent-or-magnet {
-    margin: 10px 0;
+    @include divider($color: var(--inputPlaceholderColor), $background: var(--submenuColor));
+    
+    &[data-content] {
+      margin: 1.5rem 0;
+    }
   }
 
   .form-group-magnet-uri {

diff --git a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss
index 95baa3d0a68cb75c61fbcf1367979a86debef0af..a4f87b0b845eaa098f9d8f7a4bb4962518e3c366 100644 (file)
--- a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss
+++ b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss
@@ -2,7 +2,6 @@
 @import 'mixins';
 
 .first-step-block {
-
   .form-group-channel {
     margin-bottom: 20px;
     margin-top: 35px;

diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 76e3f3f97f6f0fc69fa0f49efb1bab97454b065a..d414704e943e7a2f6d3872b3d5a248f68718717e 100644 (file)
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -774,3 +774,26 @@
     }
   }
 }
+
+@mixin divider($color: var(--submenuColor), $background: var(--mainBackgroundColor)) {
+  width: 95%;
+  border-top: .05rem solid $color;
+  height: .05rem;
+  text-align: center;
+  display: block;
+  position: relative;
+
+  &[data-content] {
+    margin: .8rem 0;
+
+    &::after {
+      background: $background;
+      color: $color;
+      content: attr(data-content);
+      display: inline-block;
+      font-size: .7rem;
+      padding: 0 .4rem;
+      transform: translateY(-.65rem);
+    }
+  }
+}